/* ==========================================================================
   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-section:clamp(30px, 3.6vw, 46px);
  --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-hero-scrim:linear-gradient(180deg, color-mix(in srgb, var(--blue-900) 62%, transparent) 0%, color-mix(in srgb, var(--blue-800) 52%, transparent) 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:80px;
}

/* ---------- 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-section);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:820px;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%;padding-inline-start:calc(var(--content-pad) - var(--space-8))}
.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:44px;height:44px;flex:none}
.brand-name{font:var(--fw-semibold) 24px/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-image:var(--surface-hero-scrim),url('../img/hero-reception.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--text-on-dark);
  min-height:100vh;
  display:flex;align-items:center;
  padding-block:var(--header-h) var(--section-py);
  overflow:hidden;
}
.hero .wrap{max-width:680px}
.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(--text-on-dark)}

.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);padding-block:var(--section-py)}

.trust-badges{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-8);
}
.trust-badges__logo{height:108px;width:auto}
.trust-badges__line{
  font-size:var(--fs-h3);color:var(--brand);
  font-weight:var(--fw-semibold);text-align:center;margin:0;
}
.trust-badges__certs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-9)}
.trust-badges__cert-label{
  font:var(--fw-semibold) var(--fs-eyebrow)/var(--lh-snug) var(--font-sans);
  letter-spacing:var(--ls-overline);text-transform:uppercase;
  color:var(--text-secondary);
}

/* ---------- 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)}
.band-dark .stat__num{color:var(--ai)}
.band-dark .stat__label,.band-dark .stat__src{color:var(--text-on-dark-secondary)}
.band-dark .stat__src a{color:var(--text-on-dark)}

/* ---------- 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;
}
.band-dark .bridge{color:var(--text-on-dark)}

/* ---------- 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)}

/* Scope band variant with a figure beside the copy instead of a centred stack */
.scope .wrap:has(.media-split){max-width:none;text-align:left}
.scope .media-split .lead{margin-inline:0}

/* ---------- 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}

/* "On the call" — icon sits beside its heading; grid stays inside one viewport, no internal scroll */
#capabilities{
  padding-block:var(--space-11);
  min-height:100vh;
  display:flex;
  align-items:center;
}
#capabilities .wrap{width:100%}
#capabilities .section-head{max-width:640px;margin-bottom:var(--space-11)}
#capabilities .grid-3{gap:var(--space-8)}
#capabilities .card{padding:var(--space-9)}
.card__head{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-5)}
.card__head .icon{margin-bottom:0;flex-shrink:0}
.card__head h4{margin-bottom:0}
#capabilities .card .icon{width:28px;height:28px}
#capabilities .card:not(.card--highlight){background:var(--ai-subtle);border-color:var(--ai-subtle-border)}
#capabilities .card:not(.card--highlight) .icon{color:var(--brand)}

/* "Why ClinIQAI" cards — same icon-beside-heading layout and colour theme as "On the call" */
#why-cliniqai-grid .card{background:var(--ai-subtle);border-color:var(--ai-subtle-border)}
#why-cliniqai-grid .card .icon{color:var(--brand);margin-bottom:0;flex-shrink:0}
#why-cliniqai-grid .card h4{margin-bottom:0}

/* Accuracy metrics — dark-blue top accent so the plain cards pick up the page's colour theme */
#accuracy .card{border-top:3px solid var(--brand)}

/* "Who it's for" — one-line summary per audience, same card treatment as above */
#who-its-for-grid .card{background:var(--ai-subtle);border-color:var(--ai-subtle-border)}
#who-its-for-grid .card .icon{color:var(--brand);margin-bottom:0;flex-shrink:0}
#who-its-for-grid .card h4{margin-bottom:0}
#who-its-for-grid .card p{margin:0}
@media (max-width:860px){
  #capabilities{min-height:0}
}

/* ---------- 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-top:3px solid var(--brand);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(--brand);background:var(--ai-subtle);
  position:sticky;inset-block-start:0;
}
.cmp thead th:first-child{width:36%}
.cmp thead th:not(:first-child){text-align:center}
.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(--space-11) var(--space-8);font-size:var(--fs-body-sm)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-9)}
.footer h5{font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans);color:var(--text-on-dark);margin:0 0 var(--space-6);text-transform:none}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.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(--space-9);padding-top:var(--space-6);
  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);
}

/* ---------- Floating "Book a demo" launcher ---------- */
.fab{
  position:fixed;inset-block-end:var(--space-10);inset-inline-end:var(--space-10);z-index:90;
  display:flex;align-items:center;gap:var(--space-5);
  height:var(--control-h-lg);padding-inline:var(--space-8);
  background:var(--brand);color:var(--neutral-0);border:none;border-radius:var(--radius-pill);
  font:var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  box-shadow:var(--shadow-lg);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.fab:hover{background:var(--brand-hover);box-shadow:var(--shadow-dialog)}
.fab .icon{width:18px;height:18px}

/* ---------- Demo request dialog ---------- */
.demo-dialog{
  border:none;border-radius:var(--radius-dialog);padding:0;
  width:min(440px, calc(100vw - var(--space-10) * 2));
  box-shadow:var(--shadow-dialog);
}
.demo-dialog::backdrop{background:color-mix(in srgb, var(--blue-900) 55%, transparent)}
.demo-dialog__form{padding:var(--space-10)}
.demo-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}
.demo-dialog__head h2{font-size:var(--fs-h2)}
.demo-dialog__close{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;
}
.demo-dialog__close:hover{background:var(--neutral-100);color:var(--text-heading)}
.demo-dialog__close .icon{width:18px;height:18px}
.demo-dialog__lead{margin-top:var(--space-6);color:var(--text-secondary);font-size:var(--fs-body)}
.demo-dialog__note{margin-top:var(--space-7);font-size:var(--fs-help)}
.demo-dialog__error{margin-top:var(--space-7);padding:var(--space-5) var(--space-6);border:1px solid var(--status-danger-border);border-radius:var(--radius-control);background:var(--status-danger-bg);color:var(--status-danger-fg);font-size:var(--fs-help)}
.demo-dialog__error[hidden]{display:none}
.demo-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-6);margin-top:var(--space-9)}

.field{margin-top:var(--space-8)}
.field label{display:block;font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-sans);color:var(--text-heading);margin-bottom:var(--space-5)}
.field input{
  width:100%;height:var(--control-h-lg);padding-inline:var(--space-7);
  background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-control);
  font:var(--fw-regular) var(--fs-body)/1 var(--font-sans);color:var(--text-body);
}
.field input::placeholder{color:var(--text-muted)}
.field input:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-color:transparent}

.demo-dialog__success{padding:var(--space-11) var(--space-10);text-align:center}
.demo-dialog__success .icon{color:var(--status-success-fg);margin-bottom:var(--space-7)}
.demo-dialog__success h2{font-size:var(--fs-h2)}
.demo-dialog__success p{margin-top:var(--space-6);color:var(--text-secondary)}
.demo-dialog__success .btn{margin-top:var(--space-9)}

@media (max-width:640px){
  .fab span{display:none}
  .fab{padding-inline:0;width:var(--control-h-lg);justify-content:center}
  .fab .icon{width:20px;height:20px}
}

/* ---------- 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)}

  .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%}
}

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


.h1-logo{height:1.4em;width:auto}


.h1-bp{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}

.card--highlight{position:relative;background:var(--brand);border-color:var(--brand);box-shadow:var(--shadow-sm)}
.card--highlight:hover{border-color:var(--brand)}
.card--highlight .icon{color:var(--ai)}
.card--highlight h4{color:var(--text-on-dark)}
.card--highlight p{color:var(--text-on-dark-secondary)}
.card--highlight .card__badge{position:absolute;top:var(--space-8);right:var(--space-8);margin:0;padding:var(--space-2) var(--space-6);border-radius:var(--radius-pill);background:var(--ai);color:var(--blue-900);font-size:var(--fs-small,.8125rem);font-weight:600}

.voice-picker{display:flex;justify-content:center;gap:var(--space-9);margin-top:var(--space-10)}
.voice-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);width:170px;padding:var(--space-9) var(--space-10);background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-xl);color:var(--text-primary);font:inherit;font-weight:500;cursor:pointer;transition:border-color var(--dur-fast,120ms) var(--ease-standard),box-shadow var(--dur-fast,120ms) var(--ease-standard)}
.voice-btn .avatar{width:72px;height:72px}
.avatar .av-bg{fill:var(--blue-50)}
.avatar .av-body{fill:var(--brand)}
.avatar .av-skin{fill:#E8B896}
.avatar .av-hair{fill:#3B2A22}
.voice-btn:hover{border-color:var(--ai-strong);box-shadow:var(--shadow-sm)}
.voice-btn[aria-pressed="true"]{border-color:var(--ai-strong);background:var(--ai-subtle-border,var(--neutral-50))}
.voice-status{min-height:1.5em;margin:var(--space-7) 0 0;color:var(--text-secondary);font-size:var(--fs-body-sm)}

.shots-head{margin-top:var(--space-13);margin-bottom:var(--space-10)}
.shots-head h3{font-size:var(--fs-h2)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-10)}
.shot{margin:0}
.shot__frame{background:var(--neutral-50);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.shot__frame img{display:block;width:100%;height:auto}
.shot__frame.is-empty{min-height:280px;display:flex;align-items:center;justify-content:center;border-style:dashed}
.shot__frame.is-empty::before{content:"Screenshot coming soon";color:var(--text-muted);font-size:var(--fs-body-sm)}
.shot figcaption{margin-top:var(--space-6);font-weight:600;color:var(--text-heading)}
@media(max-width:720px){.shots{grid-template-columns:1fr}}

.steps--stack{grid-template-columns:1fr;gap:var(--space-10)}
.steps--stack{gap:var(--space-11)}
.steps--stack .step{padding-top:0;padding-inline-start:64px;min-height:32px}
.steps--stack .step::before{width:40px;height:40px;line-height:38px;background:var(--brand);border-color:var(--brand);color:var(--neutral-0);font-size:var(--fs-body)}
.steps--stack .step::after{display:block;inset-block-start:44px;inset-block-end:calc(var(--space-11) * -1 + 4px);inset-inline-start:19px;inset-inline-end:auto;width:2px;height:auto;background:var(--brand-subtle-border)}
.steps--stack .step:last-child::after{display:none}
.media-split__fig figcaption{margin-top:var(--space-6);font-size:var(--fs-help);color:var(--text-muted)}
.steps--stack{margin-top:var(--space-11)}

.shot-rows{display:grid;gap:var(--space-13)}
.shot-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,4vw,64px);align-items:center}
.shot-row:nth-child(even){grid-template-columns:1.2fr .8fr}
.shot-row:nth-child(even) .shot-row__text{order:2}
.shot-row__text h4{font-size:var(--fs-h2);margin-bottom:var(--space-6)}
.shot-row__text p:last-child{font-size:var(--fs-body);color:var(--text-secondary);margin:0}
@media(max-width:860px){.shot-row,.shot-row:nth-child(even){grid-template-columns:1fr}.shot-row:nth-child(even) .shot-row__text{order:0}}
.shot-row__text p.shot-row__why:last-child{margin-top:var(--space-7);padding-top:var(--space-7);border-top:1px solid var(--border-subtle);color:var(--text-heading);font-weight:500}

/* Header: logo only, right-aligned */
.header .wrap{justify-content:flex-start;padding-inline-start:var(--content-pad)}
.brand{margin-inline:0 auto;gap:var(--space-6)}
.brand-mark{width:56px;height:56px}
.brand-name{font-size:32px}
.header .wrap{max-width:none;padding-inline-start:var(--space-10)}

/* ---------- Alternating white and grey bands; blue is reserved for the footer ---------- */
main > section:not(.hero):not(.band-dark):nth-of-type(even){background:var(--neutral-0)}
main > section:not(.hero):not(.band-dark):nth-of-type(odd){background:var(--neutral-50)}

/* ---------- Pricing (§5.13) ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-7);align-items:stretch}
.pricing-card{
  display:flex;flex-direction:column;
  background:var(--neutral-0);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);
}
.pricing-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.pricing-card__head{min-height:112px;margin-bottom:var(--space-6)}
.pricing-card__head .icon{color:var(--brand);margin-bottom:var(--space-6)}
.pricing-card h3{font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.pricing-card__tier{font-size:var(--fs-body-sm);color:var(--text-secondary);margin:0}
.pricing-card__price{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-5);min-height:64px;justify-content:flex-end}
.pricing-card__was{font-size:var(--fs-body-sm);color:var(--text-muted);text-decoration:line-through}
.pricing-card__now{font:var(--fw-semibold) var(--fs-h2)/1 var(--font-sans);letter-spacing:var(--ls-tight);color:var(--text-heading)}
.pricing-card__now--text{font-size:var(--fs-h2)}
.pricing-card__now span{font:var(--fw-regular) var(--fs-body-sm)/1 var(--font-sans);color:var(--text-secondary)}
.pricing-card .chip{margin-bottom:var(--space-7);align-self:flex-start}
.pricing-card__desc{font-size:var(--fs-body-sm);color:var(--text-secondary);margin:0 0 var(--space-7);min-height:4.5em}
.pricing-card__label{border-top:1px solid var(--border-subtle);padding-top:var(--space-6);font:var(--fw-semibold) var(--fs-body-sm)/var(--lh-snug) var(--font-sans);color:var(--text-heading);margin:0 0 var(--space-5)}
.pricing-card .ticks{gap:var(--space-5);margin-bottom:var(--space-8)}
.pricing-card .ticks li{font-size:var(--fs-body-sm)}
.pricing-card__note{font-size:var(--fs-help);color:var(--text-muted);margin:0 0 var(--space-7)}
.pricing-card__cta{margin-top:auto;width:100%;justify-content:center}
.pricing-trial{margin-top:var(--space-12);max-width:720px;margin-inline:auto;text-align:center}
.pricing-trial__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}
.pricing-trial__head .icon{margin-inline:auto;flex-shrink:0}
.pricing-trial h3{font-size:var(--fs-h2);margin-bottom:var(--space-3)}
.pricing-trial__head p{margin-bottom:0}
.pricing-trial__ticks{width:fit-content;margin-inline:auto;margin-top:var(--space-8);margin-bottom:var(--space-9);text-align:start}
@media(max-width:1180px){.pricing-grid{grid-template-columns:repeat(2,1fr)}.pricing-card__desc{min-height:0}.pricing-card__head{min-height:0}}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}