/* ==========================================================================
   CliniqAI website — marketing layer
   Built on the admin design system tokens (assets/css/tokens/*.css).
   RULE: no colour, radius, shadow or duration literal below. Every value is a
   token, or a marketing token defined in the one block at the top.
   ========================================================================== */

/* ---------- Marketing tokens: adds only, overrides nothing ---------- */
:root{
  /* Type scale — the console tops out at 30px; a hero needs more.
     Hero max is 56px, not 64px: at 64px the two-line headline "Your phone,
     answered. / Your system, whichever it is." needs ~670px and the hero's
     text column is ~630px, so it wrapped to four lines. */
  --fs-hero:clamp(36px, 4.4vw, 56px);
  --fs-h1:clamp(30px, 3.6vw, 42px);
  --fs-h2:clamp(22px, 2.4vw, 28px);
  --fs-h3:18px;
  --fs-lead:clamp(17px, 1.5vw, 20px);
  --fs-body-lg:16px;
  --fs-eyebrow:12px;

  /* Spacing */
  --section-py:clamp(64px, 8vw, 112px);
  --section-py-lg:clamp(88px, 10vw, 144px);
  --content-max-marketing:1200px;
  --content-pad:clamp(20px, 5vw, 40px);
  --prose-max:68ch;

  /* Marketing surfaces — the one relaxation of the no-gradient rule:
     two stops, same hue, vertical, full-width bands only. */
  --surface-hero:linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
  --surface-band-quiet:var(--neutral-50);
  --surface-band-tint:var(--blue-50);
  --surface-band-brand:var(--blue-800);

  /* Reversed (on dark bands) */
  --text-on-dark:var(--neutral-0);
  --text-on-dark-secondary:var(--neutral-300);
  --border-on-dark:rgba(255,255,255,.14);
  --surface-on-dark:rgba(255,255,255,.06);

  --header-h:64px;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--neutral-0);
  font-size:var(--fs-body-lg);
  line-height:var(--lh-relaxed);
  color:var(--text-body);
}

img{max-width:100%;height:auto;display:block}

.wrap{
  max-width:var(--content-max-marketing);
  margin-inline:auto;
  padding-inline:var(--content-pad);
}
.wrap--narrow{max-width:880px}

/* Closing remark beneath a section's content */
.note{margin-top:var(--space-11);font-size:var(--fs-body);color:var(--text-secondary)}
.note--sm{margin-top:var(--space-9);font-size:var(--fs-help);color:var(--text-muted)}
.grid--spaced{margin-top:var(--space-12)}

.section{padding-block:var(--section-py)}
.section--lg{padding-block:var(--section-py-lg)}
.band-quiet{background:var(--surface-band-quiet)}
.band-tint{background:var(--surface-band-tint)}
.band-dark{background:var(--surface-band-brand);color:var(--text-on-dark)}
.band-dark h2,.band-dark h3{color:var(--text-on-dark)}

/* ---------- Type ---------- */
.eyebrow{
  font:var(--fw-semibold) var(--fs-eyebrow)/var(--lh-snug) var(--font-sans);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 var(--space-6);
}
.band-dark .eyebrow{color:var(--ai)}
.band-tint .eyebrow{color:var(--brand)}

h1,.h1{font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h2,.h2{font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin:0}
h3,.h3{font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);margin:0}
h4{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin:0}

.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-relaxed);
  color:var(--text-secondary);
  max-width:var(--prose-max);
  margin:var(--space-7) 0 0;
}
.band-dark .lead{color:var(--text-on-dark-secondary)}

p{margin:0 0 var(--space-7);max-width:var(--prose-max)}
p:last-child{margin-bottom:0}

.section-head{max-width:760px;margin-bottom:var(--space-12)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  height:var(--control-h-lg);padding-inline:var(--space-8);
  border-radius:var(--radius-control);border:1px solid transparent;
  font:var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--transition-control);
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand);color:var(--text-on-brand);border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--text-on-brand)}
.btn--primary:active{background:var(--brand-active);border-color:var(--brand-active)}
.btn--secondary{background:var(--neutral-0);color:var(--text-body);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-body)}
.btn--ghost{background:transparent;color:var(--text-link);border-color:transparent}
.btn--ghost:hover{background:var(--brand-subtle);color:var(--text-link-hover)}
.btn--sm{height:var(--control-h-md);padding-inline:var(--space-7);font-size:var(--fs-body-sm)}

/* Reversed buttons on dark */
.band-dark .btn--primary,.hero .btn--primary{background:var(--neutral-0);color:var(--blue-800);border-color:var(--neutral-0)}
.band-dark .btn--primary:hover,.hero .btn--primary:hover{background:var(--neutral-100);border-color:var(--neutral-100);color:var(--blue-900)}
.band-dark .btn--secondary,.hero .btn--secondary{background:transparent;color:var(--text-on-dark);border-color:var(--border-on-dark)}
.band-dark .btn--secondary:hover,.hero .btn--secondary:hover{background:var(--surface-on-dark);border-color:var(--neutral-400);color:var(--text-on-dark)}
.band-dark a:focus-visible,.hero a:focus-visible,.band-dark button:focus-visible,.hero button:focus-visible{outline-color:var(--neutral-0)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-10)}

/* ---------- Icons ---------- */
.icon{width:20px;height:20px;stroke-width:1.75;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon--sm{width:16px;height:16px}
.icon--lg{width:24px;height:24px}

/* ---------- Header ---------- */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--header-h);display:flex;align-items:center;
  background:transparent;
  transition:background-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard);
  border-bottom:1px solid transparent;
}
.header .wrap{display:flex;align-items:center;gap:var(--space-10);width:100%}
.header.is-stuck{background:var(--neutral-0);border-bottom-color:var(--border-subtle);box-shadow:var(--shadow-xs)}

.brand{display:flex;align-items:center;gap:var(--space-5);margin-inline-end:auto;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;flex:none}
.brand-name{font:var(--fw-semibold) 19px/1 var(--font-sans);letter-spacing:var(--ls-tight);color:var(--brand)}
.brand-name em{font-style:normal;color:var(--ai)}
.header:not(.is-stuck) .brand-name{color:var(--text-on-dark)}
.header:not(.is-stuck) .brand-name em{color:var(--ai)}

.nav{display:flex;align-items:center;gap:var(--space-9)}
.nav a{
  font:var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  color:var(--text-secondary);text-decoration:none;padding-block:var(--space-4);
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav a:hover{color:var(--text-heading);text-decoration:none}
.header:not(.is-stuck) .nav a{color:var(--text-on-dark-secondary)}
.header:not(.is-stuck) .nav a:hover{color:var(--text-on-dark)}

.nav-toggle{display:none;background:transparent;border:0;padding:var(--space-4);cursor:pointer;color:var(--text-heading)}
.header:not(.is-stuck) .nav-toggle{color:var(--text-on-dark)}

/* ---------- Hero ---------- */
.hero{
  background:var(--surface-hero);color:var(--text-on-dark);
  padding-block:calc(var(--header-h) + clamp(48px,6vw,88px)) var(--section-py);
  overflow:hidden;
}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{font-size:var(--fs-hero);color:var(--text-on-dark);letter-spacing:var(--ls-tight);text-wrap:balance}
.hero .lead{color:var(--text-on-dark-secondary)}
.hero .eyebrow{color:var(--ai)}

/* Icon and text stay on one row — the text is long enough to wrap, so the icon
   must not be allowed to wrap onto a line of its own above it. */
.hero-strip{
  margin-top:var(--space-12);padding-top:var(--space-8);
  border-top:1px solid var(--border-on-dark);
  display:flex;align-items:flex-start;gap:var(--space-5);flex-wrap:nowrap;
  font-size:var(--fs-body-sm);line-height:var(--lh-normal);
  color:var(--text-on-dark-secondary);
}
.hero-strip .icon{margin-top:2px;color:var(--ai)}
.hero-strip span{max-width:52ch}
.hero-strip strong{color:var(--text-on-dark);font-weight:var(--fw-medium)}

/* Hero visual: waveform resolving into a booking */
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:64px}
.wave span{
  display:block;width:4px;border-radius:var(--radius-pill);background:var(--ai);
  height:100%;transform-origin:center;
  animation:cq-bar 2.4s var(--ease-in-out) infinite;
}
.wave span:nth-child(1){height:26%;animation-delay:0s}
.wave span:nth-child(2){height:52%;animation-delay:.12s}
.wave span:nth-child(3){height:78%;animation-delay:.24s}
.wave span:nth-child(4){height:100%;animation-delay:.36s}
.wave span:nth-child(5){height:64%;animation-delay:.48s}
.wave span:nth-child(6){height:88%;animation-delay:.6s}
.wave span:nth-child(7){height:40%;animation-delay:.72s}
.wave span:nth-child(8){height:70%;animation-delay:.84s}
.wave span:nth-child(9){height:30%;animation-delay:.96s}
@media (prefers-reduced-motion:reduce){.wave span{animation:none}}

.wave-link{width:1px;height:32px;background:linear-gradient(180deg,var(--ai) 0%,var(--border-on-dark) 100%)}

.booking-card{
  width:100%;max-width:340px;background:var(--neutral-0);color:var(--text-body);
  border-radius:var(--radius-card);box-shadow:var(--shadow-lg);
  padding:var(--space-8);
  animation:cq-rise var(--dur-slow) var(--ease-out) both;
}
@keyframes cq-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.booking-card{animation:none}}

.booking-card__status{
  display:flex;align-items:center;gap:var(--space-4);
  font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-sans);
  color:var(--status-success-fg);
  padding-bottom:var(--space-7);margin-bottom:var(--space-7);
  border-bottom:1px solid var(--border-subtle);
}
.booking-card__row{display:flex;justify-content:space-between;gap:var(--space-7);padding-block:var(--space-3);font-size:var(--fs-body-sm)}
.booking-card__row dt{color:var(--text-secondary);margin:0}
.booking-card__row dd{margin:0;font-weight:var(--fw-medium);color:var(--text-heading);font-variant-numeric:tabular-nums;text-align:end}
.booking-card dl{margin:0}

/* Fine print under the hero buttons */
.hero-fine{margin-top:var(--space-7);font-size:var(--fs-body-sm);color:var(--text-on-dark-secondary)}

/* Best Practice partner lockup — white wordmark, dark bands only */
.hero-partner{
  margin-top:var(--space-12);
  display:flex;align-items:center;gap:var(--space-7);flex-wrap:wrap;
  font-size:var(--fs-body-sm);color:var(--text-on-dark-secondary);
}
.hero-partner img{height:32px;width:auto}
.hero-partner strong{color:var(--text-on-dark);font-weight:var(--fw-medium)}
.hero-partner + .hero-strip{margin-top:var(--space-8)}
.footer__partner{display:inline-flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.footer__partner img{height:20px;width:auto;opacity:.85}

/* ---------- Trust strip ---------- */
.trust{background:var(--neutral-25);border-bottom:1px solid var(--border-subtle);padding-block:var(--space-8)}
.trust ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-5) var(--space-9);
  font-size:var(--fs-body-sm);color:var(--text-secondary);
}
.trust li{display:flex;align-items:center;gap:var(--space-4)}
.trust .icon{color:var(--brand)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);margin-block:var(--space-12)}
.stat__num{
  font:var(--fw-semibold) clamp(38px,4.4vw,52px)/1 var(--font-sans);
  letter-spacing:var(--ls-tight);color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.stat__label{margin-top:var(--space-6);font-size:var(--fs-body);color:var(--text-body);max-width:32ch}
.stat__src{margin-top:var(--space-5);font-size:var(--fs-help);color:var(--text-muted)}

/* ---------- Generated illustrations ---------- */
/* Section head beside an illustration */
.media-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,64px);align-items:center}
.media-split .section-head{margin-bottom:0}
.media-split__fig{margin:0}
.media-split__fig img,.section-media img{
  border-radius:var(--radius-card);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-xs);
}
/* Full-width capped figure below a section's content */
.section-media{margin:var(--space-12) auto 0;max-width:880px}
.section-media figcaption{
  margin-top:var(--space-6);font-size:var(--fs-body-sm);color:var(--text-muted);text-align:center;
}
.media-split + .stats{margin-top:var(--space-12)}

/* Standalone source citation under the stat tiles */
.stats + .stat__src{margin-top:calc(var(--space-11) * -1);margin-bottom:var(--space-11)}

/* The bridge line closing the problem section — a claim, not body copy */
.bridge{
  margin-top:var(--space-11);
  font:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing:var(--ls-snug);color:var(--text-heading);
  max-width:44ch;
}

/* ---------- Scope boundary band (§5.5 — must be impossible to miss) ---------- */
.scope .wrap{max-width:880px;text-align:center}
.scope .icon{color:var(--ai);margin-inline:auto;margin-bottom:var(--space-8)}
.scope h2{color:var(--text-on-dark)}
.scope .lead{margin-inline:auto}
.scope__link{margin-top:var(--space-9)}
.scope__link a{color:var(--text-on-dark);text-underline-offset:3px}
.scope__link a:hover{color:var(--text-on-dark)}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-10)}

.card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:var(--space-8);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.card .icon{color:var(--brand);margin-bottom:var(--space-7)}
.card h4{margin-bottom:var(--space-5)}
.card p{font-size:var(--fs-body);color:var(--text-secondary);margin:0}
.card--muted{background:var(--neutral-25);border-style:dashed}

/* ---------- Integration diagram ---------- */
.adapter{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-9);margin-block:var(--space-12)}
.adapter__node{
  background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--space-7) var(--space-8);text-align:center;box-shadow:var(--shadow-xs);
}
.adapter__node strong{display:block;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-heading)}
.adapter__node span{display:block;margin-top:var(--space-2);font-size:var(--fs-help);color:var(--text-secondary)}
.adapter__node--ai{border-color:var(--ai-subtle-border);background:var(--ai-subtle)}
.adapter__node--ai strong{color:var(--ai-text)}
.adapter__stack{display:flex;flex-direction:column;gap:var(--space-5)}
.adapter__arrow{color:var(--border-default);display:flex;align-items:center;justify-content:center}

/* ---------- Status chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-10)}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-7);border-radius:var(--radius-pill);
  border:1px solid var(--status-neutral-border);background:var(--status-neutral-bg);
  font-size:var(--fs-body-sm);color:var(--status-neutral-fg);
}
.chip::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--status-neutral-dot);flex:none}
.chip--ok{background:var(--status-success-bg);border-color:var(--status-success-border);color:var(--status-success-fg)}
.chip--ok::before{background:var(--status-success-dot)}
.chip--req{background:var(--status-info-bg);border-color:var(--status-info-border);color:var(--status-info-fg)}
.chip--req::before{background:var(--status-info-dot)}
.chip strong{font-weight:var(--fw-semibold)}

/* ---------- Control / oversight split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10)}
.panel{
  background:var(--neutral-0);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:var(--space-9);box-shadow:var(--shadow-xs);
}
.panel--ai{border-color:var(--ai-subtle-border)}
.panel h4{margin-bottom:var(--space-6)}
.panel > p{font-size:var(--fs-body);color:var(--text-secondary)}
.panel--centred{max-width:720px;margin-inline:auto;text-align:center}
.panel--centred .icon{color:var(--ai-strong);margin-inline:auto}
.panel__note{margin-top:var(--space-7);margin-inline:auto}
.panel__note--sm{font-size:var(--fs-body-sm);margin-bottom:0}
.ticks{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;gap:var(--space-6)}
.ticks li{display:flex;gap:var(--space-5);font-size:var(--fs-body);color:var(--text-body)}
.ticks .icon{color:var(--brand);margin-top:2px}
.panel--ai .ticks .icon{color:var(--ai-strong)}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--border-subtle)}
.acc__item{border-bottom:1px solid var(--border-subtle)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
  background:transparent;border:0;cursor:pointer;text-align:start;
  padding:var(--space-8) 0;
  font:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);
  transition:color var(--dur-fast) var(--ease-standard);
}
.acc__btn:hover{color:var(--brand)}
.acc__btn .icon{color:var(--text-secondary);transition:transform var(--dur-normal) var(--ease-standard)}
.acc__btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.acc__sub{display:block;font:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);color:var(--text-secondary);margin-top:var(--space-3)}
.acc__panel{overflow:hidden;height:0;transition:height var(--dur-normal) var(--ease-standard)}
.acc__inner{padding-bottom:var(--space-9)}
.acc__inner p{font-size:var(--fs-body);color:var(--text-secondary)}
.acc__inner .ticks{margin-top:0}

/* FAQ variant — lighter weight */
.acc--faq .acc__btn{font-size:var(--fs-body-lg);font-weight:var(--fw-medium)}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:320px 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.portrait{
  aspect-ratio:4/5;border-radius:var(--radius-card);border:1px solid var(--border-subtle);
  background:var(--neutral-100);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:var(--fs-body-sm);text-align:center;padding:var(--space-9);
  overflow:hidden;
}
.portrait img{width:100%;height:100%;object-fit:cover}
/* Pull-quote: a real attributed quotation, so it is a blockquote with a footer.
   Sized well below the section heading — it is testimony, not a headline. */
.quote{
  margin:0 0 var(--space-10);
  padding-inline-start:var(--space-8);
  border-inline-start:2px solid var(--brand-subtle-border);
}
.quote p{
  font:var(--fw-regular) clamp(18px,1.8vw,21px)/var(--lh-relaxed) var(--font-sans);
  letter-spacing:var(--ls-snug);color:var(--text-heading);
  margin:0 0 var(--space-7);max-width:52ch;
}
.quote__attr{display:flex;flex-direction:column;gap:var(--space-2)}
.quote__name{font:var(--fw-semibold) var(--fs-body)/1.3 var(--font-sans);color:var(--text-heading)}
.quote__post{font-size:var(--fs-body-sm);color:var(--text-secondary)}
.creds{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-9);list-style:none;padding:0}
.creds li{
  font-size:var(--fs-body-sm);color:var(--brand);font-weight:var(--fw-medium);
  background:var(--brand-subtle);border:1px solid var(--brand-subtle-border);
  padding:var(--space-4) var(--space-7);border-radius:var(--radius-pill);
}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-9);counter-reset:step}
.steps--3{grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:var(--space-11)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;inset-block-start:0;inset-inline-start:0;
  width:32px;height:32px;border-radius:var(--radius-pill);
  background:var(--brand-subtle);border:1px solid var(--brand-subtle-border);
  color:var(--brand);font:var(--fw-semibold) var(--fs-body-sm)/30px var(--font-sans);
  text-align:center;
}
.step::after{
  content:"";position:absolute;inset-block-start:16px;inset-inline-start:40px;inset-inline-end:calc(var(--space-9) * -1);
  height:1px;background:var(--border-subtle);
}
.step:last-child::after{display:none}
.step h4{margin-bottom:var(--space-5)}
.step p{font-size:var(--fs-body);color:var(--text-secondary);margin:0}

/* ---------- Comparison table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--neutral-0)}
.cmp{width:100%;min-width:720px;font-size:var(--fs-body-sm);border-collapse:collapse}
.cmp th,.cmp td{padding:var(--space-7) var(--space-8);text-align:start;border-bottom:1px solid var(--border-subtle)}
.cmp thead th{
  font:var(--fw-semibold) var(--fs-body-sm)/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);background:var(--neutral-25);
  position:sticky;inset-block-start:0;
}
.cmp thead th:first-child{width:36%}
.cmp tbody th{font-weight:var(--fw-regular);color:var(--text-body);position:sticky;inset-inline-start:0;background:var(--neutral-0)}
.cmp td{text-align:center;color:var(--text-secondary)}
.cmp .col-us{background:var(--brand-subtle)}
.cmp thead .col-us{background:var(--blue-100);color:var(--brand)}
.cmp .yes{color:var(--status-success-fg);font-weight:var(--fw-medium)}
.cmp .no{color:var(--text-muted)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* ---------- Security items ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-9)}
.sec-item .icon{color:var(--brand);margin-bottom:var(--space-6)}
.sec-item h4{font-size:var(--fs-body-lg);margin-bottom:var(--space-4)}
.sec-item p{font-size:var(--fs-body-sm);color:var(--text-secondary);margin:0}

/* ---------- Closing CTA ---------- */
.cta{text-align:center}
.cta .btn-row{justify-content:center}
.cta .lead{margin-inline:auto}
.cta__fine{margin-top:var(--space-9);font-size:var(--fs-body-sm);color:var(--text-on-dark-secondary)}
/* Audio placeholder inside the closing band */
.cta__audio{
  margin:var(--space-11) auto 0;max-width:640px;
  border:1px dashed var(--border-on-dark);border-radius:var(--radius-card);
  padding:var(--space-9);color:var(--text-on-dark-secondary);
}
.cta__audio .icon{color:var(--ai);margin-inline:auto}

/* ---------- Footer ---------- */
.footer{background:var(--blue-900);color:var(--text-on-dark-secondary);padding-block:var(--section-py) var(--space-10);font-size:var(--fs-body-sm)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-10)}
.footer h5{font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans);color:var(--text-on-dark);margin:0 0 var(--space-7);text-transform:none}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.footer a{color:var(--text-on-dark-secondary);text-decoration:none}
.footer a:hover{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:2px}
.footer p{color:var(--text-on-dark-secondary);max-width:34ch}
.footer__brand .brand-name{color:var(--text-on-dark)}
.footer__bar{
  margin-top:var(--section-py);padding-top:var(--space-8);
  border-top:1px solid var(--border-on-dark);
  display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-9);justify-content:space-between;
  font-size:var(--fs-help);color:var(--neutral-400);
}

/* ---------- Placeholder marker (build only — remove before launch) ---------- */
.ph{
  background:var(--status-warning-bg);color:var(--status-warning-fg);
  border-bottom:1px dashed var(--status-warning-border);
  padding-inline:2px;border-radius:var(--radius-xs);
}
.band-dark .ph,.hero .ph{background:transparent;color:var(--amber-200);border-bottom-color:var(--amber-200)}

/* ---------- Section entrance ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:var(--space-11)}
  .step:nth-child(2)::after{display:none}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{
    display:none;position:fixed;inset-block-start:var(--header-h);inset-inline:0;
    background:var(--neutral-0);border-bottom:1px solid var(--border-subtle);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--space-6) var(--content-pad) var(--space-9);
    box-shadow:var(--shadow-lg);
  }
  .nav.is-open{display:flex}
  .nav a{padding-block:var(--space-8);border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
  .header:not(.is-stuck) .nav a{color:var(--text-body)}
  .nav .btn{margin-top:var(--space-8)}
  .nav-toggle{display:inline-flex}
  .header .wrap{gap:var(--space-6)}
  .header .nav-cta{display:none}

  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{order:2;margin-top:var(--space-10)}
  .booking-card{max-width:320px}
  .grid-3,.grid-2,.split,.stats{grid-template-columns:1fr}
  .stats{gap:var(--space-11)}
  .adapter{grid-template-columns:1fr;gap:var(--space-7)}
  .adapter__arrow{transform:rotate(90deg)}
  .media-split{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .portrait{max-width:280px}
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .steps,.sec-grid,.footer__cols{grid-template-columns:1fr}
  .step::after{display:none}
  .btn-row .btn{width:100%}
  .trust ul{justify-content:flex-start;gap:var(--space-5) var(--space-8)}
}

.footer__blurb{margin-top:var(--space-7)}