/* =================================================================
   SanXpert Digital: Design system
   Tokens first, then base elements, then components, then layout.
   ================================================================= */

:root {
  /* ---- Brand colour (fixed) ---- */
  --navy: #071a36;
  --navy-700: #0f2a52;
  --navy-500: #1c3a66;
  --orange: #ff5a00;
  --orange-600: #e04e00;
  --green: #159a59;
  --white: #ffffff;

  /* ---- Neutrals derived for a readable UI on top of the brand ---- */
  --ink: #10192b;
  --muted: #5b6477;
  --muted-2: #8891a0;
  --border: #e3e7ee;
  --surface: #ffffff;
  --surface-alt: #f5f7fa;
  --surface-navy-wash: #0d2244;

  /* ---- Type ---- */
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(7, 26, 54, 0.06);
  --shadow-md: 0 12px 28px rgba(7, 26, 54, 0.09);
  --shadow-lg: 0 24px 56px rgba(7, 26, 54, 0.16);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 5vw, 44px);
  --section-pad: clamp(32px, 7vw, 88px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --speed: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The native `hidden` attribute and an author rule that sets `display` on
   the same element (e.g. .btn's `display: inline-flex`) have equal CSS
   specificity, so whichever is declared later in the stylesheet wins, which
   silently un-hides "hidden" buttons/panels that also carry a component
   class. Force `hidden` to always win, site-wide. */
[hidden] { display: none !important; }
html, body {
  /* Structural safety net: nothing on this site should ever be able to push
     the page wider than the viewport and let it scroll sideways. Belt and
     braces alongside fixing whatever specific element causes it. */
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------
   Type scale
   --------------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  color: var(--navy);
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 60ch;
}
.section-intro {
  max-width: 62ch;
  margin-bottom: clamp(18px, 3vw, 36px);
}
.section-intro p { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }
@media (max-width: 640px) {
  .section-intro { text-align: center; margin-inline: auto; }
}
small, .small { font-size: 0.875rem; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section-alt { background: var(--surface-alt); }
/* Sits directly under Testimonials, whose own bottom padding already creates
   space, so this section's top padding is trimmed to avoid doubling it up. */
#portfolio { padding-top: clamp(20px, 4vw, 48px); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .muted { color: rgba(255, 255, 255, 0.72); }

.stack { display: flex; flex-direction: column; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 32px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; margin-inline: auto; }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease);
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--orange); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--orange-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--navy); }
.btn-on-navy { background: var(--white); color: var(--navy); }
.btn-on-navy:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
.btn-ghost-on-navy { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost-on-navy:hover { border-color: var(--white); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-text {
  background: none; color: var(--navy); font-weight: 600; padding: 6px 2px;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
}
.btn-text:hover { border-color: var(--navy); }

/* ---------------------------------------------------------------
   Badges / pills
   --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--navy);
  border: 1px solid var(--border);
}
.badge-orange { background: #fff1e8; color: var(--orange-600); border-color: #ffd9bf; }
.badge-green { background: #e9f7ef; color: var(--green); border-color: #c6ecd6; }

/* ---------------------------------------------------------------
   Header (minimal, no site navigation, this is a conversion funnel)
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); }
/* Swap assets/images/logo.png for the real logo. This class controls its
   on-screen size only, so any reasonably-wide logo file will fit cleanly. */
.logo-img { height: 46px; width: auto; display: block; flex: none; }
.site-footer .logo-img { height: 40px; }
.header-support {
  display: flex; align-items: center; gap: 18px;
}
.header-trust { font-size: 0.85rem; color: var(--muted); display: none; }
@media (min-width: 700px) { .header-trust { display: inline; } }
@media (max-width: 480px) {
  .header-price { display: none !important; }
  .logo-img { height: 42px; }
  .header-support { gap: 10px; }
  .btn-sm { padding: 8px 14px; font-size: 0.85rem; }
}
.header-price {
  font-family: var(--font-display); font-weight: 700; color: var(--orange-600);
  font-size: 0.92rem; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.header-price.is-visible { opacity: 1; transform: translateY(0); }
.step-indicator { display: flex; gap: 6px; align-items: center; }
.step-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.step-indicator .dot.active { background: var(--orange); }
.step-indicator .dot.done { background: var(--green); }
.step-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero {
  padding-block: clamp(28px, 6vw, 72px) clamp(24px, 5vw, 56px);
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(255, 90, 0, 0.10), transparent 60%),
    var(--surface);
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-price-line, .hero-ctas { justify-content: center; }
}
.hero-price-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.hero-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--orange-600);
}
.hero-price-note { color: var(--muted); font-size: 0.98rem; }
.hero-copy p.lede { margin-top: 16px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-fineprint { margin-top: 14px; color: var(--muted-2); font-size: 0.85rem; }

.hero-visual {
  position: relative;
}
.mockup-single img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  filter: drop-shadow(0 24px 40px rgba(7, 26, 54, 0.22));
}

/* Trust strip directly under hero */
.trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding-block: 20px;
  justify-content: center;
}
@media (min-width: 860px) {
  .trust-strip .container { flex-wrap: nowrap; justify-content: space-between; }
}
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--navy); font-weight: 600; }
.trust-item svg { flex: none; color: var(--green); }

/* ---------------------------------------------------------------
   Why buy not rent
   --------------------------------------------------------------- */
.principle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .principle { grid-template-columns: 1fr; } }

/* Comparison table needs more room than a 50/50 split can give it, so this
   instance always stacks (copy above, full-width table below) rather than
   only collapsing at the general .principle breakpoint. */
.principle-compare { grid-template-columns: 1fr; gap: 32px; }
.principle-compare .compare-card { width: 100%; }

.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.96rem; white-space: nowrap; }
.compare-table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.compare-table td.good { color: var(--green); font-weight: 600; }
.compare-table td.bad { color: var(--muted); }
.compare-table td.good::before { content: "✓"; display: inline-block; margin-right: 7px; font-weight: 700; }
.compare-table td.bad::before { content: "✕"; display: inline-block; margin-right: 7px; opacity: 0.55; }
.compare-row-label {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
  white-space: normal;
}
.compare-highlight { background: #fff3ea; }
thead .compare-highlight {
  color: var(--orange-600); font-size: 0.9rem; text-transform: none; letter-spacing: normal; font-weight: 700;
  border-top: 3px solid var(--orange);
}
.compare-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.compare-scroll::-webkit-scrollbar { display: none; }
.compare-scroll-hint { display: none; text-align: center; padding: 10px 0 2px; color: var(--muted-2); font-size: 0.8rem; }
@media (max-width: 700px) { .compare-scroll-hint { display: block; } }
.compare-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }

/* ---------------------------------------------------------------
   Portfolio: basic horizontal slider (native scroll-snap, no library)
   --------------------------------------------------------------- */
.portfolio-slider { position: relative; }
.portfolio-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px; /* keeps card shadow from looking clipped */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.portfolio-track::-webkit-scrollbar { display: none; } /* Chrome, Safari, new Edge */
.portfolio-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.portfolio-item {
  flex: 0 0 auto;
  width: min(420px, 88vw);
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* Mobile default: full uncropped screenshot, card wraps around it (unchanged
   from the earlier mobile-approved version). Cropping to a shared size is a
   desktop-only choice, applied below at min-width: 701px. */
.portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  flex: none;
}
@media (max-width: 700px) {
  .portfolio-item { flex: 0 0 100%; width: 100%; }
}
@media (min-width: 701px) {
  .portfolio-item img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
  }
}
.portfolio-item figcaption {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
}
.portfolio-item figcaption .name { font-weight: 600; color: var(--navy); }
.portfolio-item figcaption .type { color: var(--muted); font-size: 0.85rem; }
.portfolio-controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.portfolio-nav {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  background: var(--surface);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.portfolio-nav:hover { border-color: var(--navy); }
.portfolio-nav:disabled { opacity: 0.4; cursor: default; }
.portfolio-nav:disabled:hover { border-color: var(--border); }

/* ---------------------------------------------------------------
   Benefit cards
   --------------------------------------------------------------- */
.benefits-slider { position: relative; }
.benefits-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.benefits-track::-webkit-scrollbar { display: none; }
.benefits-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.benefit-card {
  flex: 0 0 auto;
  width: min(240px, 70vw);
  scroll-snap-align: start;
  padding: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.benefit-card h3 { white-space: nowrap; }
@media (max-width: 480px) { .benefit-card h3 { white-space: normal; } }
.benefit-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  margin-bottom: 16px;
}
.benefit-card h3 { margin-bottom: 8px; }
.benefit-card p { color: var(--muted); font-size: 0.96rem; }
.testimonial-card .stars { color: var(--orange); font-size: 1rem; letter-spacing: 2px; }
.testimonial-card .quote { color: var(--ink); font-size: 0.96rem; margin-top: 10px; }
.google-badge { display: block; margin: 0 auto 14px; height: 48px; width: auto; }

.testimonial-slider { position: relative; }
.testimonial-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.testimonial-card {
  flex: 0 0 auto;
  width: min(340px, 85vw);
  scroll-snap-align: start;
  padding: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.testimonial-card .company { margin-top: 14px; font-weight: 600; color: var(--navy); font-size: 0.9rem; }

/* ---------------------------------------------------------------
   Pricing cards
   --------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: var(--surface);
  position: relative;
}
.price-card.is-featured {
  border-color: var(--orange);
  background: linear-gradient(180deg, #fff8f3 0%, #ffffff 60%);
  box-shadow: var(--shadow-md);
}
.price-card .badge-orange { position: absolute; top: -13px; left: 24px; }
.price-card h3 { font-size: 1.25rem; }
.price-card .price-tagline { color: var(--muted); font-size: 0.92rem; margin-top: 6px; min-height: 2.6em; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.price-amount .amount { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--navy); }
.price-amount .unit { color: var(--muted); font-size: 0.9rem; }
.price-pages { margin-top: 4px; color: var(--muted); font-size: 0.92rem; }
.price-includes { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-includes li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.92rem; color: var(--ink); }
.price-includes svg { flex: none; margin-top: 2px; color: var(--green); }
.price-card .btn { margin-top: 22px; }

/* ---------------------------------------------------------------
   Help me choose: interactive estimator
   --------------------------------------------------------------- */
.estimator-panel { display: flex; flex-direction: column; gap: 18px; }
.estimator-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.estimator-question label { font-weight: 600; color: var(--navy); }
.estimator-checkbox { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--ink); cursor: pointer; }
.estimator-checkbox input { width: 19px; height: 19px; accent-color: var(--orange); }
.estimator-result {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border);
}
.estimator-result-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin: 4px 0 2px; }
.estimator-result-price { display: flex; align-items: center; gap: 16px; }
.estimator-result-price .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--orange-600); }

/* ---------------------------------------------------------------
   How it works
   --------------------------------------------------------------- */
.steps-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 860px) { .steps-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-strip { grid-template-columns: 1fr; } }
.step-block { padding-top: 4px; }
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--orange);
  border: 1.5px solid rgba(255, 90, 0, 0.4);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.step-block h3 { color: var(--white); }
.step-block p { color: rgba(255, 255, 255, 0.72); font-size: 0.94rem; margin-top: 6px; }

/* ---------------------------------------------------------------
   Ownership block
   --------------------------------------------------------------- */
.ownership-points { display: grid; gap: 18px; margin-top: 8px; }
.ownership-point { display: flex; gap: 14px; align-items: flex-start; }
.ownership-point svg { flex: none; margin-top: 3px; color: var(--green); }
.ownership-point strong { display: block; color: var(--navy); margin-bottom: 2px; }
.ownership-point span { color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  font-size: 1.02rem;
}
.faq-q .icon { flex: none; transition: transform var(--speed) var(--ease); color: var(--muted); }
.faq-item[open] .faq-q .icon { transform: rotate(45deg); }
.faq-a { padding: 0 4px 20px; color: var(--muted); max-width: 68ch; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------
   Final CTA
   --------------------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta .btn { margin-top: 8px; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.78); padding-block: 44px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px 24px; font-size: 0.9rem; }
.footer-links a:hover { color: var(--white); }
.footer-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); margin-top: 22px; }

/* ---------------------------------------------------------------
   Image placeholders (replaceable visual slots)
   --------------------------------------------------------------- */
.placeholder-note {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.68rem;
  background: rgba(7, 26, 54, 0.72);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* =================================================================
   Stage 2 / 3: configurator and checkout shared layout
   ================================================================= */
.stage-shell {
  padding-block: clamp(28px, 5vw, 48px) 80px;
}
.stage-grid {
  display: grid;
  /* minmax(0, 1fr) rather than a bare 1fr: a grid track's automatic minimum
     width defaults to the min-content size of whatever is inside it, so a
     long unbreakable label (e.g. a small button's text) can silently force
     the whole track wider than the viewport and push the page into
     horizontal scroll. minmax(0, ...) removes that floor. */
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}
.panel + .panel { margin-top: 20px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.panel-title h2 { font-size: 1.15rem; }
.panel-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }

.selected-package-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt);
}
.selected-package-row .pkg-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.selected-package-row .pkg-meta { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }
.selected-package-row .pkg-price { font-family: var(--font-display); font-weight: 700; color: var(--orange-600); font-size: 1.2rem; }

.included-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Add-on option cards */
.addon-card {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.addon-card:hover { border-color: var(--navy-500); }
.addon-card.is-checked { border-color: var(--orange); background: #fff8f3; }
.addon-card.is-included {
  cursor: default;
  background: var(--surface-alt);
  border-style: dashed;
}
.addon-card input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange);
}
.addon-name { font-weight: 600; color: var(--navy); }
.addon-desc { color: var(--muted); font-size: 0.88rem; margin-top: 3px; }
.addon-used-for { color: var(--muted-2); font-size: 0.8rem; margin-top: 4px; }
.addon-price { font-weight: 700; color: var(--navy); white-space: nowrap; font-family: var(--font-display); }
.addon-group { display: grid; gap: 12px; margin-bottom: 22px; }
.addon-group:last-child { margin-bottom: 0; }
.addon-group-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; }

.radio-options { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.radio-chip {
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 0.88rem; font-weight: 600; color: var(--navy);
  cursor: pointer; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.radio-chip.is-active { border-color: var(--orange); background: #fff1e8; color: var(--orange-600); }
.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }

.stepper {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 8px; width: fit-content;
}
.stepper button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--navy);
}
.stepper button:hover { border-color: var(--navy); }
.stepper .count { min-width: 22px; text-align: center; font-weight: 700; font-family: var(--font-display); }

/* Upgrade prompt */
.upgrade-prompt {
  border: 1.5px dashed var(--orange);
  background: #fff8f3;
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.upgrade-prompt svg { flex: none; color: var(--orange); margin-top: 2px; }
.upgrade-prompt strong { color: var(--navy); display: block; margin-bottom: 4px; }
.upgrade-prompt p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.upgrade-prompt .actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Order summary sidebar */
.order-summary {
  position: sticky;
  top: 90px;
}
.order-line { display: flex; justify-content: space-between; gap: 10px; padding-block: 9px; font-size: 0.92rem; border-bottom: 1px solid var(--border); }
.order-line .label { color: var(--ink); }
.order-line .amount { font-weight: 600; color: var(--navy); font-family: var(--font-display); }
.order-total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 4px; }
.order-total-row .label { font-weight: 600; color: var(--navy); }
.order-total-row .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--orange-600); }
.order-note { font-size: 0.8rem; color: var(--muted-2); margin-top: 8px; }
.order-empty { color: var(--muted); font-size: 0.92rem; }

.mobile-summary-bar {
  display: none;
}
@media (max-width: 980px) {
  .order-summary { position: static; }
  .mobile-summary-bar {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(7, 26, 54, 0.08);
    padding: 14px var(--gutter);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .mobile-summary-bar .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--orange-600); }
}

/* ---------------------------------------------------------------
   Payment stage
   --------------------------------------------------------------- */
.payment-method-note {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-alt);
  font-size: 0.88rem; color: var(--muted); margin-top: 14px;
}
.demo-callout {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--muted-2);
  background: var(--surface-alt);
}
.demo-callout strong { color: var(--navy); display: block; margin-bottom: 4px; }
.demo-callout p { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; overflow-wrap: anywhere; }
.demo-callout code {
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 0.85em;
  overflow-wrap: anywhere;
}
.demo-callout .btn {
  /* Buttons default to nowrap so icon+label stay on one line, but this
     callout's button label is long ("Simulate successful payment (demo
     only) →") and needs to wrap on narrow screens instead of forcing the
     button (and everything around it) wider than the viewport. */
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* ---------------------------------------------------------------
   Confirmation stage
   --------------------------------------------------------------- */
.confirm-hero { text-align: center; padding-block: clamp(48px, 8vw, 90px) 40px; }
.confirm-check {
  width: 76px; height: 76px; border-radius: 50%;
  background: #e9f7ef; color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.next-steps { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
@media (max-width: 780px) { .next-steps { grid-template-columns: 1fr; } }
/* .benefit-card is shared with the horizontal benefits slider, where it's a
   flex item with a fixed width (min(240px, 70vw)) and a nowrap heading so
   cards line up neatly in a scroll track. Reused here as a grid item, that
   fixed width stops the card from filling its grid column (leaving it
   stuck to the left instead of centred) and the nowrap heading can spill
   text past the card's own edge. Scope it back to a normal, centred,
   wrapping card for this context only. */
.next-steps .benefit-card {
  width: 100%;
  text-align: center;
}
.next-steps .benefit-icon { margin-inline: auto; }
.next-steps .benefit-card h3 { white-space: normal; }

/* ---------------------------------------------------------------
   Onboarding form
   --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; font-size: 0.96rem;
  background: var(--white); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); }
.field textarea { resize: vertical; min-height: 100px; }
.field-hint { color: var(--muted-2); font-size: 0.8rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.brief-progress { justify-content: flex-start; }
.brief-progress .dot { width: 9px; height: 9px; }
.brief-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.brief-nav #brief-back { margin-right: auto; }

/* Brief received: celebratory success state */
.celebrate-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: 44px;
  padding-bottom: 40px;
  background: linear-gradient(180deg, #fff8f0 0%, var(--surface) 60%);
}
.celebrate-badge {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, #1fb96e 100%);
  box-shadow: 0 14px 30px rgba(21, 154, 89, 0.35);
  animation: celebrate-pop 0.6s var(--ease) both;
}
.celebrate-panel h3 {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
}
.celebrate-panel .panel-sub {
  position: relative;
  z-index: 1;
  max-width: 380px;
  margin-inline: auto;
  margin-bottom: 24px;
}
.celebrate-panel .btn {
  position: relative;
  z-index: 1;
}
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 1.7s ease-in both;
}
.confetti span:nth-child(1)  { left: 6%;  background: var(--orange);     animation-delay: 0.05s; }
.confetti span:nth-child(2)  { left: 15%; background: var(--green);      animation-delay: 0.22s; }
.confetti span:nth-child(3)  { left: 24%; background: var(--navy-500);   animation-delay: 0.02s; }
.confetti span:nth-child(4)  { left: 33%; background: var(--orange-600); animation-delay: 0.3s;  }
.confetti span:nth-child(5)  { left: 42%; background: var(--green);      animation-delay: 0.12s; }
.confetti span:nth-child(6)  { left: 51%; background: var(--orange);     animation-delay: 0.36s; }
.confetti span:nth-child(7)  { left: 60%; background: var(--navy-500);   animation-delay: 0.16s; }
.confetti span:nth-child(8)  { left: 69%; background: var(--green);      animation-delay: 0.28s; }
.confetti span:nth-child(9)  { left: 78%; background: var(--orange-600); animation-delay: 0.08s; }
.confetti span:nth-child(10) { left: 87%; background: var(--orange);     animation-delay: 0.24s; }
.confetti span:nth-child(11) { left: 94%; background: var(--navy-500);   animation-delay: 0.4s;  }
.confetti span:nth-child(12) { left: 90%; background: var(--green);      animation-delay: 0.18s; }
.confetti span:nth-child(odd)  { transform: rotate(-16deg); }
.confetti span:nth-child(even) { transform: rotate(16deg); }
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(-16px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(170px) rotate(220deg); }
}
@keyframes celebrate-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------
   Utility
   --------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.mt-0 { margin-top: 0; }
.aria-live-total { }

/* ===== Sep 2026 copy update ===== */
[hidden] { display: none !important; }
.example-label { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.problem-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.problem-list li { position: relative; padding: 14px 16px 14px 44px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 17px; line-height: 1.45; color: var(--ink); }
.problem-list li::before { content: "✕"; position: absolute; left: 16px; top: 14px; color: var(--orange); font-weight: 700; }
.problem-close { margin-top: 22px; }
.costs-panel { margin-top: 28px; }
.costs-panel h3 { margin: 0 0 12px; }
.costs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; line-height: 1.5; color: var(--ink); }
.costs-close { margin: 14px 0 0; font-weight: 600; color: var(--ink); }
.promise-panel h2 { margin: 0; }
.final-contact { margin-top: 14px; }
.whatsapp-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.whatsapp-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.steps-strip.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps-strip.steps-3 { grid-template-columns: 1fr; } }
.site-footer .footer-meta a { color: #fff; }
.packages-note { margin-top: 18px; text-align: center; }
.pkg-section-title { font-size: 16px; margin: 22px 0 10px; }
.pkg-includes { margin: 0; }
.good-to-know { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; line-height: 1.5; color: var(--ink); font-size: 15px; }
.good-to-know li { padding-left: 16px; position: relative; }
.good-to-know li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.review-snippet .review-snippet-head { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--ink); }
.review-snippet .stars { color: var(--orange); letter-spacing: 1px; }
.review-snippet .quote { margin: 10px 0 6px; color: var(--ink); line-height: 1.5; }
.review-snippet .company { margin: 0; font-weight: 600; font-size: 14px; color: var(--muted); }