/* ═══════════════════════════════════════════════════════════════
   SYNAPSES — Marketing site stylesheet
   Source of truth: ../../04-DESIGN-SYSTEM.md
   Primary + Secondary ramps adopted from Synapses-Frontend/src/index.css
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · TOKENS
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Primary — Synapse Blue (logo + product ramp) */
  --p50:  oklch(0.9469 0.0292 236.9);
  --p100: oklch(0.9019 0.0550 236.7);
  --p200: oklch(0.8122 0.1065 237.2);
  --p300: oklch(0.7283 0.1535 241.4);
  --p400: oklch(0.6453 0.1697 247.1);
  --p500: oklch(0.5114 0.1308 245.9);
  --p600: oklch(0.4349 0.1099 245.4);
  --p700: oklch(0.3541 0.0865 243.9);
  --p800: oklch(0.2810 0.0670 242.2);
  --p900: oklch(0.1891 0.0404 235.5);
  --p950: oklch(0.1450 0.0300 240.0);

  /* Secondary — Care Teal */
  --t50:  oklch(0.9730 0.0169 192.4);
  --t100: oklch(0.9434 0.0376 188.3);
  --t200: oklch(0.8888 0.0704 188.2);
  --t300: oklch(0.8402 0.1001 186.7);
  --t400: oklch(0.7951 0.1202 185.6);
  --t500: oklch(0.7165 0.1175 185.0);
  --t600: oklch(0.6064 0.0987 185.2);
  --t700: oklch(0.4940 0.0793 184.6);

  /* Accent — Marigold (action only) */
  --a100: oklch(0.9500 0.0420 80);
  --a200: oklch(0.9050 0.0800 79);
  --a400: oklch(0.8150 0.1350 76);
  --a500: oklch(0.7750 0.1480 75);
  --a600: oklch(0.6900 0.1400 71);
  --a700: oklch(0.5800 0.1180 68);
  --a800: oklch(0.4600 0.0920 66);

  /* Neutrals — Warm Stone */
  --s0:   oklch(1 0 0);
  --s50:  oklch(0.985 0.004 85);
  --s100: oklch(0.968 0.006 84);
  --s200: oklch(0.930 0.008 83);
  --s300: oklch(0.880 0.009 82);
  --s400: oklch(0.760 0.010 80);
  --s500: oklch(0.620 0.011 78);
  --s600: oklch(0.510 0.011 76);
  --s700: oklch(0.410 0.010 74);
  --s800: oklch(0.300 0.009 72);

  /* Semantic — separate from accent */
  --ok:      oklch(0.620 0.130 152);
  --ok-bg:   oklch(0.960 0.025 152);
  --warn:    oklch(0.680 0.165 42);
  --warn-bg: oklch(0.960 0.028 48);
  --bad:     oklch(0.575 0.185 25);
  --bad-bg:  oklch(0.958 0.022 25);

  /* Roles */
  --canvas:       var(--s50);
  --canvas-alt:   var(--s100);
  --surface:      var(--s0);
  --ink:          var(--s800);
  --ink-soft:     var(--s600);
  --ink-head:     var(--p800);
  --brand:        var(--p500);
  --brand-soft:   var(--p100);
  --line:         var(--s200);
  --line-strong:  var(--s300);
  --band-dark:    var(--p900);
  --band-teal:    var(--t50);
  --on-dark:      oklch(0.97 0.004 85);
  --on-dark-soft: oklch(0.80 0.010 85);

  /* Gradients */
  --g-signature: linear-gradient(135deg, var(--p400) 0%, var(--p800) 100%);
  --g-action:    linear-gradient(180deg, var(--a400) 0%, var(--a500) 100%);
  --g-care:      linear-gradient(135deg, var(--t400) 0%, var(--t600) 100%);
  --g-edge:      linear-gradient(180deg, oklch(1 0 0 / .7) 0%, oklch(1 0 0 / 0) 40%);
  --g-ambient:
    radial-gradient(58% 78% at 12% 18%, oklch(0.6453 0.1697 247.1 / .11) 0%, transparent 62%),
    radial-gradient(48% 68% at 88% 26%, oklch(0.7165 0.1175 185.0 / .09) 0%, transparent 62%),
    radial-gradient(70% 58% at 46% 104%, oklch(0.7750 0.1480 75 / .06) 0%, transparent 70%);

  /* Elevation — navy-tinted, never black */
  --sh-xs: 0 1px 2px oklch(0.1891 0.0404 235.5 / .05);
  --sh-sm: 0 1px 3px oklch(0.1891 0.0404 235.5 / .07), 0 1px 2px oklch(0.1891 0.0404 235.5 / .04);
  --sh-md: 0 4px 12px oklch(0.1891 0.0404 235.5 / .08), 0 2px 4px oklch(0.1891 0.0404 235.5 / .04);
  --sh-lg: 0 12px 28px oklch(0.1891 0.0404 235.5 / .10), 0 4px 8px oklch(0.1891 0.0404 235.5 / .05);
  --sh-xl: 0 24px 56px oklch(0.1891 0.0404 235.5 / .12), 0 8px 16px oklch(0.1891 0.0404 235.5 / .06);
  --sh-act: 0 2px 8px oklch(0.5800 0.1180 68 / .28);

  /* Geometry */
  --hdr-h: 76px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px;

  /* Motion */
  --m-fast: 180ms cubic-bezier(.2,0,0,1);
  --m-base: 260ms cubic-bezier(.2,0,0,1);

  /* Type */
  --f-display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dark — system default (un-stamped), unless an explicit light choice wins */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:       var(--p950);
    --canvas-alt:   oklch(0.185 0.028 240);
    --surface:      oklch(0.222 0.028 240);
    --ink:          oklch(0.92 0.006 85);
    --ink-soft:     oklch(0.72 0.008 82);
    --ink-head:     oklch(0.96 0.005 85);
    --brand:        var(--p400);
    --brand-soft:   oklch(0.30 0.055 243);
    --line:         oklch(1 0 0 / .10);
    --line-strong:  oklch(1 0 0 / .17);
    --band-dark:    oklch(0.175 0.030 240);
    --band-teal:    oklch(0.235 0.033 187);
    --ok:      oklch(0.700 0.115 152);
    --ok-bg:   oklch(0.285 0.048 152);
    --warn:    oklch(0.775 0.140 46);
    --warn-bg: oklch(0.300 0.055 46);
    --bad:     oklch(0.680 0.150 25);
    --bad-bg:  oklch(0.295 0.058 25);
    --a500:    oklch(0.8150 0.1350 76);
    --g-signature: linear-gradient(135deg, var(--p500) 0%, var(--p950) 100%);
    --sh-xs: 0 1px 2px oklch(0 0 0 / .20);
    --sh-sm: 0 1px 3px oklch(0 0 0 / .26);
    --sh-md: 0 4px 12px oklch(0 0 0 / .30);
    --sh-lg: 0 12px 28px oklch(0 0 0 / .36);
    --sh-xl: 0 24px 56px oklch(0 0 0 / .44);
  }
}

/* Dark — explicit choice, wins over a light OS */
:root[data-theme="dark"] {
  --canvas:       var(--p950);
  --canvas-alt:   oklch(0.185 0.028 240);
  --surface:      oklch(0.222 0.028 240);
  --ink:          oklch(0.92 0.006 85);
  --ink-soft:     oklch(0.72 0.008 82);
  --ink-head:     oklch(0.96 0.005 85);
  --brand:        var(--p400);
  --brand-soft:   oklch(0.30 0.055 243);
  --line:         oklch(1 0 0 / .10);
  --line-strong:  oklch(1 0 0 / .17);
  --band-dark:    oklch(0.175 0.030 240);
  --band-teal:    oklch(0.235 0.033 187);
  --ok:      oklch(0.700 0.115 152);
  --ok-bg:   oklch(0.285 0.048 152);
  --warn:    oklch(0.775 0.140 46);
  --warn-bg: oklch(0.300 0.055 46);
  --bad:     oklch(0.680 0.150 25);
  --bad-bg:  oklch(0.295 0.058 25);
  --a500:    oklch(0.8150 0.1350 76);
  --g-signature: linear-gradient(135deg, var(--p500) 0%, var(--p950) 100%);
  --sh-xs: 0 1px 2px oklch(0 0 0 / .20);
  --sh-sm: 0 1px 3px oklch(0 0 0 / .26);
  --sh-md: 0 4px 12px oklch(0 0 0 / .30);
  --sh-lg: 0 12px 28px oklch(0 0 0 / .36);
  --sh-xl: 0 24px 56px oklch(0 0 0 / .44);
}

/* ───────────────────────────────────────────────────────────────
   2 · BASE
   ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(16px, .4vw + 15px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink-head);
  margin: 0;
  text-wrap: balance;
  font-weight: 600;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.3rem);   line-height: 1.03; letter-spacing: -.038em; }
h2 { font-size: clamp(1.95rem, 3.3vw, 3rem);  line-height: 1.08; letter-spacing: -.032em; }
h3 { font-size: clamp(1.12rem, 1.1vw, 1.3rem); line-height: 1.28; letter-spacing: -.018em; }
h4 { font-size: 1rem; line-height: 1.35; letter-spacing: -.012em; }

p, ul, ol { margin: 0; }
a { color: var(--brand); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 600; color: var(--ink-head); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
  border-radius: var(--r-xs);
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--ink-head);
  padding: 12px 18px; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); font-weight: 600;
  transition: top var(--m-fast);
}
.skip:focus { top: 12px; }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
@media (min-width: 900px) { .wrap { width: min(1200px, 100% - 6rem); } }
.wrap--narrow { width: min(880px, 100% - 2.5rem); margin-inline: auto; }
@media (min-width: 900px) { .wrap--narrow { width: min(880px, 100% - 6rem); } }

section { padding-block: clamp(4rem, 7vw, 8.5rem); }
.sec--tight { padding-block: clamp(3rem, 5vw, 5rem); }

.eyebrow {
  font-family: var(--f-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.lede { font-size: clamp(1.04rem, .7vw + .9rem, 1.2rem); color: var(--ink-soft); line-height: 1.62; max-width: 56ch; }
.fine { font-size: .845rem; color: var(--ink-soft); opacity: .85; }
.sechd { display: flex; flex-direction: column; gap: 1.05rem; max-width: 44ch; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ───────────────────────────────────────────────────────────────
   3 · BUTTONS & LINKS
   ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-body); font-size: .945rem; font-weight: 600;
  border-radius: var(--r-md); border: 0; cursor: pointer;
  padding: 0 1.4rem; min-height: 48px; text-decoration: none; white-space: nowrap;
  transition: transform var(--m-fast), box-shadow var(--m-fast), background var(--m-fast), border-color var(--m-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--g-action); color: var(--p900); box-shadow: var(--sh-act); }
.btn--primary:hover { background: linear-gradient(180deg, var(--a500) 0%, var(--a600) 100%); }
.btn--navy { background: var(--p800); color: var(--on-dark); box-shadow: var(--sh-sm); }
.btn--navy:hover { background: var(--p700); box-shadow: var(--sh-md); }
.btn--ghost { background: var(--surface); color: var(--p700); border: 1px solid var(--line-strong); box-shadow: var(--sh-xs); }
.btn--ghost:hover { border-color: var(--brand); box-shadow: var(--sh-sm); }
.btn--onDark { background: oklch(1 0 0 / .10); color: var(--on-dark); border: 1px solid oklch(1 0 0 / .22); }
.btn--onDark:hover { background: oklch(1 0 0 / .17); }
.btn--sm { min-height: 40px; font-size: .875rem; padding: 0 1.05rem; }
.btn--lg { min-height: 54px; font-size: 1rem; padding: 0 1.85rem; }
.btn--block { width: 100%; }
.btn:disabled { background: var(--s200); color: var(--s400); box-shadow: none; cursor: not-allowed; transform: none; }

:root[data-theme="dark"] .btn--ghost { color: var(--p200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--ghost { color: var(--p200); } }

.textlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .945rem; color: var(--brand); }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.textlink svg { transition: transform var(--m-fast); }
.textlink:hover svg { transform: translateX(3px); }

.acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__inner .acts { justify-content: flex-start; }

/* ───────────────────────────────────────────────────────────────
   4 · CHIPS (semantic — never button-shaped)
   ─────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 500; font-family: var(--f-body);
  padding: .3rem .65rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; flex: none; }
.chip--open   { background: var(--t50);   color: var(--t700); border-color: var(--t200); }
.chip--ok     { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in oklch, var(--ok) 40%, transparent); }
.chip--warn   { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }
.chip--bad    { background: var(--bad-bg);  color: var(--bad);  border-color: color-mix(in oklch, var(--bad) 40%, transparent); }
.chip--mute   { background: var(--canvas-alt); color: var(--ink-soft); border-color: var(--line); }
.chip--filter { background: var(--brand-soft); color: var(--p700); border-color: var(--p200); }
:root[data-theme="dark"] .chip--filter { border-color: transparent; color: var(--p200); }
:root[data-theme="dark"] .chip--open   { color: var(--t300); border-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--filter { border-color: transparent; color: var(--p200); }
  :root:not([data-theme="light"]) .chip--open   { color: var(--t300); border-color: transparent; }
}

/* ───────────────────────────────────────────────────────────────
   5 · HEADER
   ─────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent;
  /* Transparent at rest so the hero's ambient wash runs unbroken behind it —
     an opaque bar here cuts a hard seam across the top of every interior page.
     The stuck state below is where the surface appears. */
  background: transparent;
  transition: background var(--m-base), box-shadow var(--m-base), border-color var(--m-base);
}

.hdr.is-stuck {
  background: var(--canvas);              /* solid base — never a see-through bar */
  border-bottom-color: var(--line);
  box-shadow: var(--sh-md);
}
/* Translucency + blur only where the browser can actually blur behind it */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hdr.is-stuck {
    background: color-mix(in oklch, var(--canvas) 92%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* ── Over a dark full-bleed hero, before it sticks ──────────
   The header is transparent here, so every colour must come from the
   light-on-dark set or it disappears into the photograph. */
.hdr--over:not(.is-stuck) .brand__name,
.hdr--over:not(.is-stuck) .nav a,
.hdr--over:not(.is-stuck) .hdr__login { color: oklch(1 0 0 / .88); }
.hdr--over:not(.is-stuck) .hdr__signup { color: #fff; }
.hdr--over:not(.is-stuck) .nav a:hover,
.hdr--over:not(.is-stuck) .hdr__login:hover,
.hdr--over:not(.is-stuck) .hdr__signup:hover { color: #fff; }
.hdr--over:not(.is-stuck) .brand__mark { filter: brightness(0) invert(1); }
.hdr--over:not(.is-stuck) .seg {
  background: oklch(1 0 0 / .12); border-color: oklch(1 0 0 / .22);
}
.hdr--over:not(.is-stuck) .seg a { color: oklch(1 0 0 / .80); }
.hdr--over:not(.is-stuck) .seg a.is-on { background: oklch(1 0 0 / .92); color: var(--p800); }
.hdr--over:not(.is-stuck) .themetog,
.hdr--over:not(.is-stuck) .burger {
  background: oklch(1 0 0 / .12); border-color: oklch(1 0 0 / .24); color: oklch(1 0 0 / .9);
}
.hdr--over:not(.is-stuck) .themetog:hover,
.hdr--over:not(.is-stuck) .burger:hover { background: oklch(1 0 0 / .2); color: #fff; border-color: oklch(1 0 0 / .4); }
.hdr--over:not(.is-stuck) .mnav { border-top-color: oklch(1 0 0 / .18); }
.hdr--over:not(.is-stuck) .mnav a { color: oklch(1 0 0 / .9); border-bottom-color: oklch(1 0 0 / .14); }
.hdr--over:not(.is-stuck) :focus-visible { box-shadow: 0 0 0 2px oklch(0.1891 0.0404 235.5), 0 0 0 4px #fff; }
.hdr__in { display: flex; align-items: center; gap: 1.4rem; min-height: var(--hdr-h); }
.hdr.is-stuck .hdr__in { min-height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.028em; color: var(--ink-head); }

.nav { display: none; gap: 1.6rem; }
@media (min-width: 1040px) { .nav { display: flex; } }
.nav a { font-size: .92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: 4px; }
.nav a:hover { color: var(--brand); }
.nav a[aria-current="page"] { color: var(--ink-head); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.seg { display: none; padding: 4px; gap: 2px; background: var(--canvas-alt); border-radius: 999px; border: 1px solid var(--line); }
@media (min-width: 1180px) { .seg { display: flex; } }
.seg a {
  font-family: var(--f-body); font-size: .845rem; font-weight: 600;
  padding: .42rem .95rem; border-radius: 999px; color: var(--ink-soft);
  transition: background var(--m-fast), color var(--m-fast), box-shadow var(--m-fast);
}
.seg a.is-on { background: var(--surface); color: var(--p700); box-shadow: var(--sh-xs); }
:root[data-theme="dark"] .seg a.is-on { color: var(--p200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg a.is-on { color: var(--p200); } }

.hdr__login, .hdr__signup { display: none; font-size: .92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
@media (min-width: 760px) { .hdr__login { display: inline; } }
@media (min-width: 860px) { .hdr__signup { display: inline; } }
.hdr__login:hover, .hdr__signup:hover { color: var(--brand); }
/* Sign up is the weightier of the two account actions */
.hdr__signup { font-weight: 600; color: var(--p700); }
.hdr__signup:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .hdr__signup { color: var(--p200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hdr__signup { color: var(--p200); } }

.themetog {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: color var(--m-fast), border-color var(--m-fast);
}
.themetog:hover { color: var(--brand); border-color: var(--brand); }
.themetog svg { width: 17px; height: 17px; }
.themetog .i-moon { display: none; }
:root[data-theme="dark"] .themetog .i-sun  { display: none; }
:root[data-theme="dark"] .themetog .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetog .i-sun  { display: none; }
  :root:not([data-theme="light"]) .themetog .i-moon { display: block; }
}

/* Mobile menu */
.burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
@media (min-width: 1040px) { .burger { display: none; } }
.burger svg { width: 19px; height: 19px; }
.mnav { display: none; flex-direction: column; gap: .2rem; padding: .6rem 0 1.2rem; border-top: 1px solid var(--line); }
.mnav.is-on { display: flex; }
@media (min-width: 1040px) { .mnav, .mnav.is-on { display: none; } }
.mnav a { padding: .75rem .25rem; font-size: 1rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.mnav a:last-of-type { border-bottom: 0; }

/* ───────────────────────────────────────────────────────────────
   6 · BANDS
   ─────────────────────────────────────────────────────────────── */

.band--alt  { background: var(--canvas-alt); }
.band--pure { background: var(--surface); }
.band--teal { background: var(--band-teal); }
.band--dark { background: var(--band-dark); color: var(--on-dark-soft); position: relative; overflow: hidden; }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-dark); }
.band--dark .eyebrow { color: oklch(1 0 0 / .55); }
.band--dark strong, .band--dark b { color: var(--on-dark); }
.band--dark::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--g-ambient); opacity: .5; pointer-events: none; }
.band--dark > * { position: relative; z-index: 1; }

/* ── Home hero — full-bleed photograph ─────────────────────
   Photo + navy scrim; every overlay colour is a literal that works
   on the dark ground in both themes, so the hero never inverts. */
.hero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(560px, 82vh, 860px);
  /* Start beneath the sticky header so the photograph runs edge to edge,
     then restore the height as padding so nothing hides under the bar. */
  margin-top: calc(var(--hdr-h) * -1);
  padding-top: calc(var(--hdr-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero--photo::before { display: none; }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(78% 92% at 44% 50%, oklch(0.1891 0.0404 235.5 / .88) 0%, oklch(0.1891 0.0404 235.5 / .76) 44%, oklch(0.2810 0.0670 242.2 / .50) 76%, oklch(0.2810 0.0670 242.2 / .38) 100%),
    linear-gradient(180deg, oklch(0.1891 0.0404 235.5 / .42) 0%, transparent 42%, oklch(0.1891 0.0404 235.5 / .58) 100%);
}
.hero__inner { display: flex; flex-direction: column; gap: 1.35rem; align-items: flex-start;
               text-align: left; max-width: 48ch; margin-inline: auto; }
.hero__inner .eyebrow { color: oklch(1 0 0 / .72); }
.hero__inner h1 { color: oklch(0.99 0.004 85); }
.hero__inner h1 em { font-style: normal; color: oklch(0.80 0.115 200); }
.hero__inner .lede { color: oklch(1 0 0 / .86); max-width: 44ch; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; font-size: .875rem; color: oklch(1 0 0 / .78); }
.hero__trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust svg { width: 16px; height: 16px; flex: none; color: oklch(0.80 0.115 200); }
.hero__alt { font-size: .9rem; color: oklch(1 0 0 / .74); }
.hero__alt a { color: oklch(0.99 0.004 85); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Floating product card — proof, without pretending to be live */
.hero__card {
  display: none; position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 1; width: min(340px, 32vw);
}
/* .hero__card retired — a corner card fights a centred content block */

/* Home hero — search-forward asymmetric split */
.hero { position: relative; padding-block: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem); }
.hero::before { content: ""; position: absolute; inset: -20% -10% 0; z-index: -1; background: var(--g-ambient); pointer-events: none; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }

/* Long-form doc layout with sticky contents rail */
.doc { display: grid; gap: 3.5rem; }
@media (min-width: 1000px) { .doc { grid-template-columns: 220px 1fr; gap: 4.5rem; } }
.doc__body { display: flex; flex-direction: column; gap: 3.5rem; max-width: 70ch; }
.doc__body h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }

/* Page hero (interior pages) */
.phero { position: relative; padding-block: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem); }
.phero::before { content: ""; position: absolute; inset: -30% -10% 0; z-index: -1; background: var(--g-ambient); pointer-events: none; }
.phero__in { display: flex; flex-direction: column; gap: 1.3rem; max-width: 52ch; }

/* ───────────────────────────────────────────────────────────────
   7 · CARDS & MOCKS
   ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  display: flex; flex-direction: column; gap: .8rem; position: relative;
}
.card::after { content: ""; position: absolute; inset: 0 0 auto; height: 34%; background: var(--g-edge); border-radius: var(--r-lg) var(--r-lg) 0 0; pointer-events: none; }
.card > * { position: relative; }
.card p { color: var(--ink-soft); font-size: .945rem; }

.mock {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: 1rem; display: flex; flex-direction: column; gap: .7rem; position: relative;
}
.mock::after { content: ""; position: absolute; inset: 0 0 auto; height: 34%; background: var(--g-edge); border-radius: var(--r-xl) var(--r-xl) 0 0; pointer-events: none; }
.mock > * { position: relative; }
.mock__bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mock__count { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.mock__cap { font-size: .78rem; color: var(--ink-soft); font-family: var(--f-mono); padding-top: .5rem; border-top: 1px solid var(--line); }

/* Provider card */
.pcard {
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .85rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas);
  transition: border-color var(--m-fast), transform var(--m-fast), box-shadow var(--m-fast);
}
.pcard:hover { border-color: var(--p200); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pcard__av {
  width: 46px; height: 46px; border-radius: 999px; flex: none; background: var(--g-care);
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .9rem;
  font-family: var(--f-display); border: 2px solid var(--surface); box-shadow: var(--sh-xs);
}
.pcard__nm { font-weight: 600; font-size: .95rem; color: var(--ink-head); font-family: var(--f-display); letter-spacing: -.012em; }
.pcard__cr { font-size: .805rem; color: var(--ink-soft); }
.pcard__meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .3rem; align-items: center; }
.pcard__stat { display: inline-flex; align-items: center; gap: .28rem; font-size: .78rem; color: var(--ink-soft); font-family: var(--f-mono); }
.pcard__stat svg { width: 12px; height: 12px; color: var(--a600); }
.pcard__right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

/* Credential rows */
.cred { display: flex; align-items: center; gap: .75rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.cred:last-child { border-bottom: 0; }
.cred__ic { width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--brand-soft); display: grid; place-items: center; color: var(--brand); flex: none; }
.cred__ic svg { width: 15px; height: 15px; }
.cred__t { font-size: .875rem; font-weight: 500; color: var(--ink); }
.cred__d { font-size: .76rem; color: var(--ink-soft); font-family: var(--f-mono); }
.cred__s { margin-left: auto; }

/* Fee breakdown */
.fee__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .62rem 0; font-size: .9rem; border-bottom: 1px solid var(--line); }
.fee__row:last-of-type { border-bottom: 0; }
.fee__row span:first-child { color: var(--ink-soft); }
.fee__row span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; text-align: right; }
.fee__row--hl { background: var(--a100); margin-inline: -.6rem; padding-inline: .6rem; border-radius: var(--r-xs); border-bottom: 0; }
.fee__row--hl span:first-child { color: var(--a800); font-weight: 600; }
:root[data-theme="dark"] .fee__row--hl { background: oklch(0.32 0.055 72); }
:root[data-theme="dark"] .fee__row--hl span:first-child { color: var(--a200); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fee__row--hl { background: oklch(0.32 0.055 72); }
  :root:not([data-theme="light"]) .fee__row--hl span:first-child { color: var(--a200); }
}
.fee__row--total { border-top: 1px solid var(--line-strong); border-bottom: 0; margin-top: .3rem; padding-top: .75rem; }
.fee__row--total span { font-weight: 700 !important; color: var(--ink-head) !important; }
.fee__code {
  margin-top: .7rem; padding: .6rem .8rem; border-radius: var(--r-sm);
  background: var(--ok-bg); color: var(--ok); font-family: var(--f-mono);
  font-size: .8rem; font-weight: 500; display: flex; align-items: center; gap: .5rem;
}
.fee__code svg { width: 14px; height: 14px; flex: none; }

/* ───────────────────────────────────────────────────────────────
   8 · SEARCH + ZERO STATE
   ─────────────────────────────────────────────────────────────── */

.search {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2xl); box-shadow: var(--sh-lg); padding: .7rem; position: relative;
  transition: box-shadow var(--m-base), border-color var(--m-base);
}
.search:focus-within { box-shadow: var(--sh-xl); border-color: var(--p200); }
.search::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: var(--g-edge); border-radius: var(--r-2xl) var(--r-2xl) 0 0; pointer-events: none; }
.search > * { position: relative; }
.search__fields { display: grid; gap: .55rem; }
@media (min-width: 620px)  { .search__fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .search__fields { grid-template-columns: 1.25fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .3rem; padding: .65rem .85rem; border-radius: var(--r-lg); transition: background var(--m-fast); }
.field:hover { background: var(--canvas-alt); }
.field label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select {
  font-family: var(--f-body); font-size: .975rem; font-weight: 500; color: var(--ink);
  background: transparent; border: 0; padding: 0; width: 100%; min-height: 26px;
}
.field select { cursor: pointer; }
.field input:focus, .field select:focus { outline: none; }
.field input::placeholder { color: var(--s400); font-weight: 400; }
.search__go { margin-top: .55rem; }
.search__go .btn { width: 100%; }
@media (min-width: 620px) { .search__go { display: flex; justify-content: flex-end; } .search__go .btn { width: auto; min-width: 190px; } }

.zero {
  margin-top: 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2xl); box-shadow: var(--sh-md);
  padding: clamp(1.5rem, 3vw, 2.25rem); display: none; flex-direction: column; gap: 1.05rem;
}
.zero.is-on { display: flex; animation: rise var(--m-base) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.zero__mark { width: 54px; height: 54px; }
.zero h3 { font-size: 1.26rem; }
.zero__q { font-family: var(--f-mono); font-size: .85rem; color: var(--ink-soft); }
.zero p { font-size: .925rem; color: var(--ink-soft); max-width: 46ch; }
.zero__form { display: grid; gap: .6rem; }
@media (min-width: 560px) { .zero__form { grid-template-columns: 1fr auto; } }
.zero__alts { display: flex; flex-wrap: wrap; gap: .5rem; }
.zero__done { display: none; gap: .6rem; align-items: flex-start; }
.zero__done.is-on { display: flex; }
.zero__done svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 2px; }

/* ───────────────────────────────────────────────────────────────
   9 · FORMS
   ─────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__f { display: flex; flex-direction: column; gap: .4rem; }
.form__f label { font-size: .855rem; font-weight: 600; color: var(--ink-head); }
.form__f label .opt { font-weight: 400; color: var(--ink-soft); }
.form__f input, .form__f select, .form__f textarea {
  font-family: var(--f-body); font-size: .975rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: .82rem 1rem; width: 100%; min-height: 48px;
  transition: border-color var(--m-fast), box-shadow var(--m-fast);
}
.form__f textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form__f input:focus, .form__f select:focus, .form__f textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.form__f input::placeholder, .form__f textarea::placeholder { color: var(--s400); }
.form__hint { font-size: .82rem; color: var(--ink-soft); }
.form__err {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .875rem; color: var(--bad); line-height: 1.55;
  background: var(--bad-bg); border: 1px solid color-mix(in oklch, var(--bad) 35%, transparent);
  border-radius: var(--r-sm); padding: .8rem 1rem;
}
.form__err[hidden] { display: none; }
.form__done {
  display: none; flex-direction: column; gap: .7rem;
  background: var(--surface); border: 1px solid color-mix(in oklch, var(--ok) 45%, transparent);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.form__done.is-on { display: flex; }
.form__done .ic { width: 40px; height: 40px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.form__done .ic svg { width: 20px; height: 20px; }
.form__done p { color: var(--ink-soft); font-size: .945rem; }

/* ───────────────────────────────────────────────────────────────
   10 · LAYOUT PATTERNS
   ─────────────────────────────────────────────────────────────── */

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.split--wideL { }
@media (min-width: 960px) { .split--wideL { grid-template-columns: 1.1fr .9fr; } }
@media (min-width: 960px) { .split--wideR { grid-template-columns: .9fr 1.1fr; } }
.split--top { align-items: start; }
@media (min-width: 960px) { .split--flip > *:first-child { order: 2; } }

.stack { display: flex; flex-direction: column; gap: 1.2rem; }
.stack--tight { gap: .8rem; }
.stack p { color: var(--ink-soft); max-width: 56ch; }

.grid2 { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.grid3 { display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.grid4 { display: grid; gap: 2.25rem; }
@media (min-width: 700px)  { .grid4 { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }
@media (min-width: 1100px) { .grid4 { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; } }
.mt-lg { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.mt-md { margin-top: 2rem; }

/* Feature block */
.pillar { display: flex; flex-direction: column; gap: .8rem; }
.pillar__ic {
  width: 54px; height: 54px; border-radius: var(--r-lg); display: grid; place-items: center; flex: none;
  background: color-mix(in oklch, var(--t500) 12%, transparent);
  border: 1px solid var(--t200); color: var(--t700);
}
.pillar__ic svg { width: 24px; height: 24px; }
.pillar p { color: var(--ink-soft); font-size: .945rem; }
:root[data-theme="dark"] .pillar__ic { border-color: transparent; color: var(--t400); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pillar__ic { border-color: transparent; color: var(--t400); } }

/* Numbered steps */
.steps { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .steps--3 { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
.step { display: flex; flex-direction: column; gap: 1rem; }
.step__hd { display: flex; align-items: center; gap: .8rem; }
.step__n {
  width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--p800); color: var(--on-dark); font-family: var(--f-display); font-weight: 600; font-size: .95rem;
}
.step--last .step__n { background: var(--g-action); color: var(--p900); box-shadow: var(--sh-act); }
.step p { color: var(--ink-soft); font-size: .945rem; }

/* Step list (vertical, how-it-works) */
.vsteps { display: flex; flex-direction: column; gap: 0; }
.vstep { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-bottom: 2.25rem; position: relative; }
.vstep:last-child { padding-bottom: 0; }
.vstep::before {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px);
}
.vstep:last-child::before { display: none; }
.vstep__body { display: flex; flex-direction: column; gap: .5rem; padding-top: .35rem; }
.vstep__body p { color: var(--ink-soft); font-size: .945rem; max-width: 60ch; }

/* Trust divider grid */
.trust { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 700px)  { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.tItem { display: flex; flex-direction: column; gap: .55rem; padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) {
  .tItem { padding: 1.9rem 2rem 1.9rem 0; border-right: 1px solid var(--line); }
  .tItem:nth-child(2n) { padding-right: 0; border-right: 0; padding-left: 2rem; }
}
@media (min-width: 1060px) {
  .tItem { padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--line); }
  .tItem:nth-child(2n) { padding-left: 0; }
  .tItem:nth-child(3n) { border-right: 0; }
}
.tItem svg { width: 26px; height: 26px; color: var(--brand); }
.tItem h3 { font-size: 1.02rem; }
.tItem p { font-size: .895rem; color: var(--ink-soft); }

/* ── Photography ──────────────────────────────────────────
   Explicit width/height on every <img> reserves the box and
   prevents layout shift on load. */
.shot {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  background: var(--canvas-alt);
}
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--figure { aspect-ratio: 3 / 2; }

/* Full-bleed photo band with navy scrim (G6) — text always sits at AA */
.shotband { position: relative; overflow: hidden; border-radius: var(--r-2xl); isolation: isolate; }
.shotband > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.shotband::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.2810 0.0670 242.2 / .62) 0%, oklch(0.1891 0.0404 235.5 / .88) 100%),
    linear-gradient(135deg, oklch(0.2810 0.0670 242.2 / .55) 0%, oklch(0.1891 0.0404 235.5 / .35) 100%);
}

/* Photo placeholder — handoff artifact */
.photo {
  border-radius: var(--r-xl); border: 1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklch, var(--ink-soft) 5%, transparent) 14px 15px),
    var(--canvas-alt);
  min-height: 300px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
}
.photo--sm { min-height: 220px; }
.photo--tall { min-height: 420px; }
.photo__id { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; color: var(--brand); letter-spacing: .04em; }
.photo__d { font-size: .855rem; color: var(--ink-soft); max-width: 44ch; line-height: 1.5; }

/* Disclaimer — tinted surface + icon, no accent rail */
.disc {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--canvas-alt); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
  font-size: .865rem; color: var(--ink-soft); line-height: 1.6;
}
.disc svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
.disc--strong { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--sh-xs); }

/* Pull quote / punch line */
.punch {
  font-family: var(--f-display); font-size: clamp(1.28rem, 1.8vw, 1.7rem); font-weight: 600;
  color: var(--ink-head); letter-spacing: -.022em; line-height: 1.28;
  padding-left: 1.1rem; border-left: 3px solid var(--a500);
}

/* ───────────────────────────────────────────────────────────────
   11 · TABS · ACCORDION · TABLES
   ─────────────────────────────────────────────────────────────── */

.tabs { display: inline-flex; padding: 4px; gap: 2px; background: var(--canvas-alt); border: 1px solid var(--line); border-radius: 999px; }
.tabs button {
  font-family: var(--f-body); font-size: .92rem; font-weight: 600; padding: .6rem 1.25rem;
  border-radius: 999px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background var(--m-fast), color var(--m-fast), box-shadow var(--m-fast);
}
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--p700); box-shadow: var(--sh-xs); }
:root[data-theme="dark"] .tabs button[aria-selected="true"] { color: var(--p200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs button[aria-selected="true"] { color: var(--p200); } }
.tabpanel[hidden] { display: none; }

.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__t {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-head);
  letter-spacing: -.015em; line-height: 1.35;
}
.acc__t svg { width: 20px; height: 20px; flex: none; color: var(--ink-soft); transition: transform var(--m-base); }
.acc__t[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc__p { padding: 0 0 1.35rem; max-width: 68ch; }
.acc__p p { color: var(--ink-soft); font-size: .945rem; }
.acc__p[hidden] { display: none; }

.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 32rem; }
thead th {
  background: var(--canvas-alt); font-family: var(--f-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line);
}
thead th.is-hero { color: var(--p700); box-shadow: inset 0 2px 0 var(--brand); background: var(--brand-soft); }
:root[data-theme="dark"] thead th.is-hero { color: var(--p200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) thead th.is-hero { color: var(--p200); } }
tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
td .yes { color: var(--ok); }
td .no  { color: var(--s400); }
td svg { width: 17px; height: 17px; }

/* Pricing tiers */
.tiers { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .tiers { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.tier { display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.6rem, 2.5vw, 2.2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); position: relative; }
.tier--hero { border: 2px solid var(--brand); box-shadow: var(--sh-lg); }
@media (min-width: 820px) { .tier--hero { transform: translateY(-8px); } }
.tier__flag { position: absolute; top: -13px; left: clamp(1.6rem, 2.5vw, 2.2rem); background: var(--g-action); color: var(--p900); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; box-shadow: var(--sh-act); }
.tier__nm { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.tier__pr { font-family: var(--f-display); font-size: clamp(2.1rem, 3vw, 2.7rem); font-weight: 600; color: var(--ink-head); letter-spacing: -.03em; line-height: 1; }
.tier__pr small { font-family: var(--f-body); font-size: .92rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.tier li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.tier li svg { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 3px; }

/* Table of contents (trust page) */
.toc { position: sticky; top: 100px; display: none; flex-direction: column; gap: .55rem; }
@media (min-width: 1000px) { .toc { display: flex; } }
.toc .toc__h, .toc h4 { font-family: var(--f-body); font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.toc a { font-size: .89rem; color: var(--ink-soft); padding: .3rem 0; border-left: 2px solid var(--line); padding-left: .85rem; }
.toc a:hover { color: var(--brand); border-left-color: var(--brand); }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 1000px) { .jump { display: none; } }

/* ───────────────────────────────────────────────────────────────
   12 · FINAL CTA · FOOTER · STICKY BAR
   ─────────────────────────────────────────────────────────────── */

.final { padding-block: 0; }
.final__in {
  background: var(--g-signature); border-radius: var(--r-2xl);
  padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.75rem, 5vw, 4.5rem);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start;
}
.final__in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 100% at 85% 10%, oklch(1 0 0 / .13) 0%, transparent 60%); pointer-events: none; }

/* Photographic variant — signature gradient laid over a darkened operatory.
   Gradient opacity is deliberately high so white text stays well above AA. */
.final__in--photo {
  background-image:
    linear-gradient(135deg,
      oklch(0.4453 0.1397 247.1 / .90) 0%,
      oklch(0.2210 0.0620 242.2 / .96) 100%),
    var(--final-photo);
  background-size: cover, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat, no-repeat;
}
:root[data-theme="dark"] .final__in--photo,
:root:not([data-theme="light"]) .final__in--photo {
  background-image:
    linear-gradient(135deg,
      oklch(0.3200 0.1000 247.1 / .93) 0%,
      oklch(0.1450 0.0300 240.0 / .97) 100%),
    var(--final-photo);
}
.final__in > * { position: relative; }
.final h2 { color: oklch(0.98 0.005 85); max-width: 21ch; }
.final p { color: oklch(1 0 0 / .82); max-width: 48ch; }
.final__micro { font-size: .885rem; color: oklch(1 0 0 / .72); margin-top: .2rem; }
.final__micro a { color: oklch(0.98 0.005 85); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ftr { background: var(--p900); color: var(--on-dark-soft); padding-block: clamp(3.5rem, 5vw, 5rem) 2.5rem; margin-top: clamp(4rem, 7vw, 8rem); position: relative; }
.ftr::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--g-signature); }
.ftr__cols { display: grid; gap: 2.25rem; padding-bottom: 2.75rem; border-bottom: 1px solid oklch(1 0 0 / .1); }
@media (min-width: 640px)  { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ftr__cols { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 3rem; } }
.ftr__col .ftr__h, .ftr__col h4 { font-family: var(--f-body); font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: oklch(1 0 0 / .5); margin-bottom: .95rem; }
.ftr__col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ftr__col a { font-size: .89rem; color: oklch(1 0 0 / .72); }
.ftr__col a:hover { color: #fff; }
.ftr__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.ftr__brand .brand__name { color: oklch(0.98 0.005 85); }
.ftr__motto {
  font-family: var(--f-display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.022em; line-height: 1.25; color: oklch(0.97 0.004 85);
  margin-bottom: .7rem;
}
.ftr__tag { font-size: .89rem; color: oklch(1 0 0 / .6); max-width: 30ch; line-height: 1.55; }
.ftr__legal { padding-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.ftr__legal p { font-size: .8rem; color: oklch(1 0 0 / .5); line-height: 1.65; max-width: 88ch; }
.ftr__legal b { color: oklch(1 0 0 / .72); font-weight: 600; }
.ftr__legal a { color: oklch(1 0 0 / .6); }

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: color-mix(in oklch, var(--canvas) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px oklch(0.1891 0.0404 235.5 / .09);
  padding: .7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .85rem;
  transform: translateY(120%); transition: transform var(--m-base);
}
.sticky.is-on { transform: none; }
@media (min-width: 900px) { .sticky { display: none; } }
.sticky__lbl { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; }
.sticky .btn { margin-left: auto; }

/* ───────────────────────────────────────────────────────────────
   13 · REDUCED MOTION
   ─────────────────────────────────────────────────────────────── */

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

/* ───────────────────────────────────────────────────────────────
   14 · BOOKING MODAL (Google appointment schedule)
   ─────────────────────────────────────────────────────────────── */

.bookdlg {
  padding: 0; border: 0; background: transparent;
  width: min(940px, 100% - 2rem); max-width: 940px;
  max-height: min(92vh, 860px);
  overflow: visible;
}
.bookdlg::backdrop {
  background: oklch(0.1891 0.0404 235.5 / .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bookdlg > * { background: var(--surface); }
.bookdlg {
  display: none;
}
.bookdlg[open] {
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--sh-xl); border: 1px solid var(--line);
  animation: bookIn var(--m-base) both;
}
@keyframes bookIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.bookdlg__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); flex: none;
}
.bookdlg__t { font-size: 1.2rem; }
.bookdlg__s { font-size: .875rem; color: var(--ink-soft); margin-top: .2rem; }
.bookdlg__x {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line); background: var(--canvas);
  color: var(--ink-soft); cursor: pointer;
  transition: color var(--m-fast), border-color var(--m-fast), background var(--m-fast);
}
.bookdlg__x:hover { color: var(--ink-head); border-color: var(--line-strong); background: var(--canvas-alt); }
.bookdlg__x svg { width: 17px; height: 17px; }

.bookdlg__body { position: relative; flex: 1; min-height: 0; background: var(--surface); }
.bookdlg__body iframe { width: 100%; height: 100%; min-height: 560px; border: 0; display: block; }
.bookdlg__load {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .9rem; color: var(--ink-soft); background: var(--surface); z-index: 1;
}
.bookdlg__load[hidden] { display: none; }

.bookdlg__ft {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem; border-top: 1px solid var(--line);
  font-size: .845rem; color: var(--ink-soft); flex: none;
}

@media (max-width: 640px) {
  .bookdlg { width: 100%; max-width: 100%; max-height: 100vh; margin: 0; }
  .bookdlg[open] { border-radius: 0; height: 100vh; }
  .bookdlg__body iframe { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .bookdlg[open] { animation: none; } }

/* ───────────────────────────────────────────────────────────────
   15 · MOBILE CORRECTIONS
   ─────────────────────────────────────────────────────────────── */

/* Touch targets. 40px controls are fine with a mouse and too small with a
   thumb — grow them only where the pointer is actually coarse, so desktop
   chrome doesn't inflate. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .themetog, .burger { width: 44px; height: 44px; }
  .bookdlg__x { width: 44px; height: 44px; }
  .mnav a { padding-block: .95rem; }
}

/* Buttons are nowrap so labels never break mid-phrase on desktop, but the
   longest ("Read our trust & safety approach") is wider than a 320px screen.
   Below 480px let them wrap and go full width — the standard phone pattern. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: .7rem; }
  .acts { flex-direction: column; align-items: stretch; }
  .acts .btn { width: 100%; }
  .hdr__in .btn--sm { padding-inline: .8rem; }
}

/* The fixed action bar sits over the end of the footer; reserve its height. */
@media (max-width: 899px) {
  body:has(.sticky) { padding-bottom: 4.75rem; }
}

/* Slightly shorter hero on small screens so the CTAs stay above the fold. */
@media (max-width: 560px) {
  .hero--photo { min-height: clamp(480px, 74vh, 620px); }
}