/* ==========================================================================
   Weight Loss Online USA — Trust & Authority design system
   Light palette on :root. Dark redefines tokens only. Never define a color
   solely inside a media/[data-theme] block.
   ========================================================================== */

:root{
  /* Clinical cyan, not corporate gold. Note --accent is cyan-700 not cyan-600:
     white on #0891B2 measures 3.68:1 and fails body-text contrast. 5.36:1 here. */
  --navy:#14232E; --navy-2:#1E3A5F;
  --bg:#F7F5F0; --bg-2:#FFFFFF; --bg-3:#E8E2D6;
  --fg:#14232E; --fg-2:#3D4F5C; --fg-3:#50616B;
  --border:#DED7C9; --border-2:#C6BCA9;
  --accent:#1E3A5F; --accent-fg:#FFFFFF; --accent-soft:#DCE4F0; --accent-ink:#1A3252;
  --num:#8E7F66;
  /* Flag red, rationed. Allowed on exactly four things: countdown digits, the
     struck $149, the "waived" stamp, and one primary CTA per screen. Never a
     background field, never behind body text. 6.10:1 on paper. */
  --flag:#B3202C; --flag-soft:#FBE9EA;
  --ok:#15803D; --ok-soft:#DCFCE7;
  --surface-ink:#0F172A; --surface-ink-fg:#F8FAFC;
  --ring:#1E3A8A;
  --shadow-sm:0 1px 2px rgba(2,6,23,.06),0 1px 3px rgba(2,6,23,.05);
  --shadow:0 4px 6px -1px rgba(2,6,23,.07),0 2px 4px -2px rgba(2,6,23,.05);
  --shadow-lg:0 12px 24px -8px rgba(2,6,23,.12),0 4px 8px -4px rgba(2,6,23,.06);
  --shadow-xl:0 24px 48px -12px rgba(2,6,23,.18);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --maxw:1180px;
  --font-h:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1626; --bg-2:#172235; --bg-3:#1F2C40;
    --fg:#E8EEF6; --fg-2:#B8C6D8; --fg-3:#93A3B8;
    --border:#2A3850; --border-2:#3A4A64;
    --accent:#7FB2F0; --accent-fg:#0E1626; --accent-soft:#1B2A42; --accent-ink:#A9CBF7;
  --num:#7288A6;
  --flag:#F2919C; --flag-soft:#2A1A20;
    --ok:#4ADE80; --ok-soft:#0C2A17;
    --surface-ink:#0E1626; --surface-ink-fg:#EEF3FA;
    --ring:#7FA8F5;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 10px rgba(0,0,0,.45);
    --shadow-lg:0 16px 32px -8px rgba(0,0,0,.55); --shadow-xl:0 28px 56px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1626; --bg-2:#172235; --bg-3:#1F2C40;
  --fg:#E8EEF6; --fg-2:#B8C6D8; --fg-3:#93A3B8;
  --border:#2A3850; --border-2:#3A4A64;
  --accent:#7FB2F0; --accent-fg:#0E1626; --accent-soft:#1B2A42; --accent-ink:#A9CBF7;
  --num:#7288A6;
  --flag:#F2919C; --flag-soft:#2A1A20;
  --ok:#4ADE80; --ok-soft:#0C2A17;
  --surface-ink:#0E1626; --surface-ink-fg:#EEF3FA;
  --ring:#7FA8F5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 10px rgba(0,0,0,.45);
  --shadow-lg:0 16px 32px -8px rgba(0,0,0,.55); --shadow-xl:0 28px 56px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-b);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[lang="hi"] body{font-family:'Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;line-height:1.8}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] .h-font{
  font-family:'Noto Sans Devanagari','Figtree',system-ui,sans-serif;letter-spacing:0
}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.15;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:700}
h2{font-size:clamp(1.65rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:clamp(1.12rem,1.8vw,1.4rem);font-weight:600}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-fg)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,32px)}
.sec{padding-block:clamp(56px,9vw,112px)}
.sec--tight{padding-block:clamp(44px,6vw,76px)}
.sec--alt{background:var(--bg-2)}
.sec--ink{background:var(--navy);color:#F8FAFC}

/* Dark containers sit on --navy in BOTH themes, so they must not inherit the
   light theme's accent tokens: --accent-ink (#0A5568) on navy measures 1.26:1.
   Re-point the whole accent quartet to its dark-theme values at the boundary.
   In dark theme these are already the root values, so this is a no-op there. */
.anno,.sec--ink,.ft{
  --accent:#7FB2F0; --accent-fg:#0E1626; --accent-soft:#1B2A42; --accent-ink:#A9CBF7;
  --num:#7288A6; --flag:#F2919C;
}
:root[data-theme="dark"] .sec--ink{background:var(--bg-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec--ink{background:var(--bg-2)}}
.sec--ink h2,.sec--ink h3{color:#FFFFFF}
.sec--ink p{color:#CBD5E1}
:root[data-theme="dark"] .sec--ink h2,:root[data-theme="dark"] .sec--ink h3{color:var(--fg)}
:root[data-theme="dark"] .sec--ink p{color:var(--fg-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  padding:6px 13px;border-radius:999px;margin-bottom:var(--sp-4)
}
.sec--ink .eyebrow{background:rgba(127,178,240,.16);color:var(--accent-ink);border-color:rgba(127,178,240,.32)}
.lede{font-size:clamp(1.02rem,1.5vw,1.17rem);color:var(--fg-2);max-width:62ch}
.muted{color:var(--fg-3)}
.sec-head{max-width:70ch;margin-bottom:var(--sp-7)}
.sec-head p{margin-top:var(--sp-4)}
.center{text-align:center;margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 28px;border-radius:var(--r);border:1.5px solid transparent;
  font-family:var(--font-h);font-size:1rem;font-weight:650;text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,border-color .18s,color .18s;
  white-space:nowrap
}
.btn:active{transform:translateY(1px)}
.btn--p{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow)}
.btn--p:hover{background:color-mix(in srgb,var(--accent) 88%,#000);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.btn--s{background:var(--bg-2);color:var(--fg);border-color:var(--border-2)}
.btn--s:hover{border-color:var(--fg-3);background:var(--bg-3)}
.sec--ink .btn--s{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.sec--ink .btn--s:hover{background:rgba(255,255,255,.1);border-color:#fff}
:root[data-theme="dark"] .sec--ink .btn--s{background:var(--bg-3);color:var(--fg);border-color:var(--border-2)}
.btn--sm{min-height:44px;padding:10px 20px;font-size:.93rem}
.btn--block{width:100%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- announcement bar ---------- */
.anno{background:var(--navy);color:#fff;font-size:.9rem;position:relative;z-index:60}
:root[data-theme="dark"] .anno{background:var(--bg-3);border-bottom:1px solid var(--border)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .anno{background:var(--bg-3);border-bottom:1px solid var(--border)}}
.anno__in{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;padding:11px 54px 11px 18px;text-align:center}
.anno__txt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.anno__strong{font-weight:750;color:var(--accent-ink)}
.anno__cd{display:inline-flex;gap:5px;font-variant-numeric:tabular-nums;font-weight:650}
.anno__u{background:rgba(255,255,255,.12);border-radius:6px;padding:3px 7px;min-width:42px;display:inline-block;text-align:center;font-size:.84rem}
:root[data-theme="dark"] .anno__u{background:var(--bg-2)}
.anno__u i{font-style:normal;opacity:.65;font-size:.7em;margin-left:2px}
.anno__cta{color:var(--accent-ink);font-weight:700;text-underline-offset:3px}
.anno__x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.65);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:8px}
.anno__x:hover{color:#fff;background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .anno__x{color:var(--fg-3)}
:root[data-theme="dark"] .anno__x:hover{color:var(--fg);background:var(--bg-2)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-5);min-height:70px;flex-wrap:nowrap}
.hdr__act{flex-shrink:0}
.nav{min-width:0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-h);font-weight:750;font-size:1.06rem;letter-spacing:-.02em;color:var(--fg);flex-shrink:0}
.logo svg{flex-shrink:0}
.logo span i{font-style:normal;color:var(--accent)}
.nav{display:none;align-items:center;gap:3px;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--fg-2);font-size:.9rem;font-weight:550;padding:9px 11px;border-radius:8px;transition:color .15s,background .15s;white-space:nowrap}
.nav a:hover{color:var(--fg);background:var(--bg-3)}
.hdr__act{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto}
.nav+.hdr__act{margin-inline-start:0}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-2);color:var(--fg-2);cursor:pointer;transition:.15s;flex-shrink:0}
.icon-btn:hover{color:var(--fg);border-color:var(--border-2)}
.icon-btn svg{width:19px;height:19px}
.t-dark{display:none}
:root[data-theme="dark"] .t-dark{display:block}:root[data-theme="dark"] .t-light{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-dark{display:block}:root:not([data-theme="light"]) .t-light{display:none}}
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-2);color:var(--fg-2);font-family:var(--font-b);font-size:.88rem;font-weight:600;cursor:pointer;transition:.15s}
.lang__btn:hover{color:var(--fg);border-color:var(--border-2)}
.lang__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xl);padding:6px;min-width:182px;z-index:70}
.lang__menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--fg-2);font-size:.92rem;min-height:44px}
.lang__menu a:hover{background:var(--bg-3);color:var(--fg)}
.lang__menu a[aria-current="true"]{color:var(--accent-ink);font-weight:650;background:var(--accent-soft)}
.lang__menu a small{color:var(--fg-3);font-size:.8rem}
.burger{display:grid}
/* The desktop nav only appears once the longest locale's labels actually fit.
   Spanish needs ~1359px at comfortable sizing, so 1280-1439 runs a compact
   band and the full-size row starts at 1440. Below 1280 everyone gets the
   burger - better than a CTA pushed off the right edge. */
@media (min-width:1280px){.nav{display:flex}.burger{display:none}}
@media (min-width:1280px) and (max-width:1439px){
  .hdr__in{gap:var(--sp-4)}
  .logo{font-size:.98rem}
  .nav{gap:0}
  .nav a{font-size:.83rem;padding:8px 8px}
}
.mnav{display:none;border-top:1px solid var(--border);background:var(--bg-2);padding:var(--sp-3) 0 var(--sp-5)}
.mnav.is-open{display:block}
@media (min-width:1280px){.mnav.is-open{display:none}}
.mnav a{display:block;padding:14px 4px;text-decoration:none;color:var(--fg-2);font-weight:600;border-bottom:1px solid var(--border)}
/* --- small-screen header: the action cluster must never outgrow the bar.
   The CTA lives in the mobile menu and the sticky bottom bar instead. --- */
@media (max-width:819px){
  .hdr__act > .btn{display:none}
}
@media (max-width:559px){
  .lang__btn{width:44px;padding:0;justify-content:center}
  .lang__btn > span{display:none}
}
@media (max-width:819px){
  .hdr__in{gap:var(--sp-2);padding-inline:16px}
}
@media (max-width:420px){
  .logo{font-size:.88rem}
  .logo svg{width:24px;height:24px}
}
/* Structural guarantee: the brand text yields before anything leaves the bar,
   so no locale's wordmark can ever push the burger off-screen. */
.logo{min-width:0}
.logo > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky{width:100%;max-width:100%}
/* Long labels (Spanish and Hindi run longer than English) must wrap rather than
   push past the viewport. nowrap is only safe where there is room for it. */
@media (max-width:559px){
  .btn{white-space:normal;text-align:center;line-height:1.3;padding-inline:20px;max-width:100%}
  .btn svg{flex-shrink:0}
}
.mnav__lang{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.mnav__lang a{flex:1;text-align:center;border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:12px 6px;font-size:.9rem;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px}
.mnav__lang a small{opacity:.6;font-size:.76rem}
.mnav__lang a[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
/* sticky bar: text must shrink, never push the button off-screen */
.sticky__t{min-width:0;flex:1}
.sticky__t b,.sticky__t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sticky > .btn{flex-shrink:0}
.mnav .btn{margin-top:var(--sp-4)}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(36px,4.6vw,64px) clamp(36px,5vw,64px);overflow:hidden}
.hero__in{position:relative;z-index:1;display:grid;gap:var(--sp-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--sp-8)}}
.hero h1{margin-bottom:var(--sp-4)}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero__sub{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--fg-2);max-width:60ch;margin-bottom:var(--sp-5)}
.hero__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.hero__note{font-size:.91rem;color:var(--fg-3);display:flex;align-items:center;gap:7px}
.hero__note svg{color:var(--ok);flex-shrink:0}
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.trust li{display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--fg-2);font-weight:550}
.trust svg{color:var(--ok);flex-shrink:0}
ul{list-style:none;margin:0;padding:0}

/* hero card */
.hcard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);padding:clamp(22px,3vw,30px);position:relative}
.hcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);margin-bottom:var(--sp-4)}
.hcard__ttl{font-family:var(--font-h);font-weight:700;font-size:1.02rem}
.pill{font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.mk{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:11px 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.mk:last-of-type{border-bottom:0}
.mk b{font-family:var(--font-h);font-variant-numeric:tabular-nums;font-weight:650}
.mk__bar{height:6px;border-radius:99px;background:var(--bg-3);flex:1;max-width:96px;overflow:hidden;position:relative}
.mk__bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent);border-radius:99px;display:block;width:var(--w)}
.hcard__ft{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border);font-size:.85rem;color:var(--fg-3);display:flex;align-items:center;gap:8px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-7)}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--bg-2);padding:var(--sp-6) var(--sp-5);text-align:center}
.stat b{display:block;font-family:var(--font-h);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:750;color:var(--accent);line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums}
.stat span{font-size:.87rem;color:var(--fg-2);line-height:1.45;display:block}

/* ---------- pillars ---------- */
.pillars{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pillar{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s}
.pillar:hover{box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.pillar__tag{font-size:.73rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--sp-3)}
.pillar h3{font-size:clamp(1.42rem,2.4vw,1.85rem);margin-bottom:var(--sp-3)}
.pillar__lede{color:var(--accent-ink);font-weight:600;margin-bottom:var(--sp-4);font-size:1.02rem}
.pillar p{color:var(--fg-2);margin-bottom:var(--sp-5)}
.checks li{display:flex;gap:11px;padding:8px 0;font-size:.95rem;color:var(--fg-2);align-items:flex-start}
.checks svg{color:var(--ok);flex-shrink:0;margin-top:4px}
.pillar .btn{margin-top:auto;align-self:flex-start}
.pillar__split{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
@media (min-width:560px){.pillar__split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gender{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.gender h4{font-family:var(--font-h);font-size:1rem;font-weight:700;margin-bottom:var(--sp-2);display:flex;align-items:center;gap:8px}
.gender h4 svg{color:var(--accent)}
.gender p{font-size:.9rem;margin-bottom:var(--sp-3)}
.gender li{font-size:.86rem;padding:5px 0;display:flex;gap:9px;color:var(--fg-2);align-items:flex-start}
.gender li svg{color:var(--accent);flex-shrink:0;margin-top:4px;width:14px;height:14px}

/* ---------- peptides ---------- */
.pep{position:relative;overflow:hidden}
.pep::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 400px at 84% 12%,rgba(127,178,240,.12),transparent 68%)}
.pep__in{position:relative;z-index:1;display:grid;gap:var(--sp-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.pep__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sp-8);align-items:start}}
.pep h2{margin-bottom:var(--sp-4)}
.pep__lede{font-size:clamp(1.04rem,1.6vw,1.19rem);margin-bottom:var(--sp-4)}
.pepgrid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.pepgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pepcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:var(--sp-5);transition:background .22s,border-color .22s}
.pepcard:hover{background:rgba(255,255,255,.095);border-color:rgba(127,178,240,.44)}
:root[data-theme="dark"] .pepcard{background:var(--bg-3);border-color:var(--border)}
:root[data-theme="dark"] .pepcard:hover{border-color:color-mix(in srgb,var(--accent) 48%,transparent)}
.pepcard h3{font-size:1.03rem;margin-bottom:8px;color:var(--accent-ink)}
:root[data-theme="dark"] .pepcard h3{color:var(--accent)}
.pepcard p{font-size:.9rem;line-height:1.6}
.pep__disc{margin-top:var(--sp-5);padding:var(--sp-5);border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:.86rem;line-height:1.65}
:root[data-theme="dark"] .pep__disc{background:var(--bg-3);border-color:var(--border)}
.pep__disc strong{color:var(--accent-ink);display:block;margin-bottom:5px;font-weight:700}
:root[data-theme="dark"] .pep__disc strong{color:var(--accent)}

/* ---------- included (free) ---------- */
.free{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.free{grid-template-columns:repeat(2,minmax(0,1fr))}}
.freecard{background:var(--bg-2);border:2px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:var(--r-xl);padding:clamp(24px,3.2vw,36px);position:relative;box-shadow:var(--shadow)}
.freecard__badge{position:absolute;top:-13px;inset-inline-start:clamp(24px,3.2vw,36px);background:var(--accent);color:var(--accent-fg);font-size:.73rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:999px;box-shadow:var(--shadow)}
.freecard h3{font-size:clamp(1.3rem,2.1vw,1.6rem);margin-bottom:var(--sp-3);margin-top:6px}
.freecard__lede{color:var(--accent-ink);font-weight:600;margin-bottom:var(--sp-3)}
.freecard>p{color:var(--fg-2);margin-bottom:var(--sp-5)}
.phases{display:grid;gap:var(--sp-3)}
.phase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4);background:var(--bg-3);border-radius:var(--r);border:1px solid var(--border)}
.phase__n{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--font-h);font-weight:750;font-size:.95rem;flex-shrink:0}
.phase h4{font-family:var(--font-h);font-size:.97rem;font-weight:700;margin-bottom:3px}
.phase__wk{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:5px}
.phase p{font-size:.88rem;color:var(--fg-2);line-height:1.58}

/* ---------- how ---------- */
.steps{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr);counter-reset:s}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);position:relative;overflow:hidden;transition:border-color .22s,transform .22s}
.step:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.step:hover{transform:none}}
.step__n{font-family:var(--font-h);font-size:2.5rem;font-weight:800;color:var(--num);line-height:1;margin-bottom:var(--sp-3);font-variant-numeric:tabular-nums}
.step h3{font-size:1.07rem;margin-bottom:9px}
.step p{font-size:.92rem;color:var(--fg-2);line-height:1.62}

/* ---------- pricing ---------- */
.enroll{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-3);background:var(--accent-soft);border:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6);text-align:center}
.enroll s{color:var(--fg-3);font-size:1rem}
.enroll b{font-family:var(--font-h);color:var(--accent-ink);font-size:1.12rem;font-weight:750}
.enroll svg{color:var(--accent-ink);flex-shrink:0}
.tiers{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The recommended tier is WIDER, not scaled. A transform can be cancelled by a
   higher-specificity rule or by reduce-motion; grid tracks cannot. Symmetric at
   900-1039 because asymmetric tracks there leave ~255px flanks, which Spanish
   and Devanagari overflow. */
@media (min-width:1040px){
  .tiers--spot{grid-template-columns:minmax(0,.86fr) minmax(0,1.28fr) minmax(0,.86fr);
    gap:0 var(--sp-4);align-items:stretch}
  /* No overhang: insetting the flanks pushed their CTAs 16px off the panel's.
     The panel is already 49% wider, which is emphasis the cascade cannot cancel,
     so a single CTA baseline across all three is the better trade. */
  .tiers--spot .tier{margin-block:0}
  .tiers--spot .tier--hot{scale:none}
}
@media (max-width:899px){.tiers--spot .tier--hot{order:-1}}
.tiers--spot .tier .checks{flex:1}
.tier{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm)}
/* Dark panel inside a light section. Same boundary problem as .anno/.sec--ink/.ft:
   light-theme --fg (#0B2430) on navy is 1.12:1 and --accent-ink (#0A5568) is 1.26:1.
   Re-point in PLAIN HEX - a custom property set with an unsupported function is
   invalid-at-computed-value-time, which would make the panel background transparent. */
.tier--hot{
  --bg-2:#14232E; --bg-3:#1D3140;
  --fg:#F4F7FB; --fg-2:#CBD8E6; --fg-3:#AEBECE;   /* measured over the worst video frame */
  --border:#2B4256; --border-2:#3A5470;
  --accent:#7FB2F0; --accent-fg:#0E1626; --accent-soft:#1B2A42; --accent-ink:#A9CBF7;
  --ok:#4ADE80; --flag:#F2919C;
  background:#14232E;color:var(--fg);
  border:1px solid #2B4256;box-shadow:var(--shadow-xl);
  position:relative;isolation:isolate}
.tier--hot h3{color:var(--fg)}
/* The ambient field must sit BEHIND the card's own text. Inside a stacking
   context, negative-z children paint after the element's background but before
   in-flow content - at z-index:0 it would cover the copy. */
.tier--hot .secbg{z-index:-1}
.tier--hot .secbg__scrim{background:rgba(20,35,46,.58)}
@media (min-width:900px){.tier--hot{scale:1.035;z-index:2}}
@media (prefers-reduced-motion:reduce){.tier--hot{scale:none}}
.tier__hot{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-fg);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 15px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow)}
.tier h3{font-size:1.28rem;margin-bottom:8px}
.tier__for{font-size:.89rem;color:var(--fg-3);margin-bottom:var(--sp-5);line-height:1.5}
.tier__shelf{border-radius:var(--r);padding:var(--sp-4) var(--sp-4) var(--sp-3);
  margin-bottom:var(--sp-5);background:color-mix(in srgb,var(--bg-3) 70%,var(--bg-2));
  border:1px solid var(--border)}
.tier--hot .tier__shelf{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10)}
.tier__shelf .tier__price{margin-bottom:6px}
.tier__shelf .tier__enroll{margin-bottom:0}
.tier__delta{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border-2);
  font-size:.8rem;color:var(--fg-2);line-height:1.45}
.tier__price{display:flex;align-items:baseline;gap:4px;margin-bottom:var(--sp-2);font-family:var(--font-h)}
.tier__price sup{font-size:1.25rem;font-weight:650;color:var(--fg-2);top:-.55em;position:relative}
.tier__price b{font-size:clamp(2.6rem,4.6vw,3.3rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tier__price span{font-size:1rem;color:var(--fg-3);font-weight:550}
.tier__enroll{font-size:.85rem;color:var(--ok);font-weight:650;margin-bottom:var(--sp-5);display:flex;align-items:center;gap:6px}
.tier__enroll s{color:var(--fg-3);font-weight:400}
.tier .checks{margin-bottom:var(--sp-6);flex:1}
.tier .checks li{font-size:.91rem;padding:7px 0}
.addons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-6)}
.addon{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;padding:10px 20px;font-size:.89rem;color:var(--fg-2)}
.addon b{font-family:var(--font-h);color:var(--fg);font-variant-numeric:tabular-nums}
.pfoot{margin-top:var(--sp-6);text-align:center;font-size:.86rem;color:var(--fg-3);max-width:74ch;margin-inline:auto;line-height:1.65}
.risk{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:var(--sp-5);font-size:.93rem;color:var(--fg-2)}
.risk svg{color:var(--ok);flex-shrink:0}
.risk b{color:var(--fg);font-family:var(--font-h)}

/* ---------- secondary services ---------- */
.svc{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svccard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);transition:border-color .2s,background .2s}
.svccard:hover{border-color:var(--border-2);background:var(--bg-3)}
.svccard h3{font-size:1rem;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.svccard h3 svg{color:var(--accent);flex-shrink:0}
.svccard p{font-size:.88rem;color:var(--fg-2);line-height:1.6}

/* ---------- faq ---------- */
.faq{max-width:860px;margin-inline:auto}
.qa{border-bottom:1px solid var(--border)}
.qa summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) 0;cursor:pointer;font-family:var(--font-h);font-weight:650;font-size:1.03rem;list-style:none;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-ink)}
.qa__i{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;transition:transform .25s,background .2s;margin-top:2px}
.qa[open] .qa__i{transform:rotate(45deg);background:var(--accent-soft);color:var(--accent-ink)}
.qa__a{padding-bottom:var(--sp-5);color:var(--fg-2);font-size:.96rem;line-height:1.7;max-width:74ch}

/* ---------- final cta ---------- */
.fcta{text-align:center}
.fcta h2{margin-bottom:var(--sp-4);max-width:22ch;margin-inline:auto}
.fcta p{max-width:60ch;margin-inline:auto;margin-bottom:var(--sp-6)}
.fcta__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-bottom:var(--sp-5)}
.fcta__offer{display:inline-flex;align-items:center;gap:9px;font-size:.93rem;font-weight:650;color:var(--accent-ink)}
:root[data-theme="dark"] .fcta__offer{color:var(--accent)}
.fcta__offer svg{flex-shrink:0}

/* ---------- sticky mobile cta ---------- */
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:45;background:var(--bg-2);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(2,6,23,.14);padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.sticky.is-on{transform:translateY(0)}
.sticky__t{font-size:.82rem;line-height:1.3}
.sticky__t b{display:block;font-family:var(--font-h);font-size:.93rem;color:var(--accent-ink)}
@media (min-width:820px){.sticky{display:none}}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}
body.has-sticky{padding-bottom:84px}
@media (min-width:820px){body.has-sticky{padding-bottom:0}}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:#CBD5E1;padding-block:var(--sp-8) var(--sp-6);font-size:.92rem}
:root[data-theme="dark"] .ft{background:var(--bg-2);border-top:1px solid var(--border);color:var(--fg-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ft{background:var(--bg-2);border-top:1px solid var(--border);color:var(--fg-2)}}
.ft__top{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr);padding-bottom:var(--sp-7);border-bottom:1px solid rgba(255,255,255,.12)}
:root[data-theme="dark"] .ft__top{border-color:var(--border)}
@media (min-width:760px){.ft__top{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
.ft__brand .logo{color:#fff;margin-bottom:var(--sp-3)}
:root[data-theme="dark"] .ft__brand .logo{color:var(--fg)}
.ft__brand p{max-width:40ch;color:#94A3B8;font-size:.89rem}
:root[data-theme="dark"] .ft__brand p{color:var(--fg-3)}
.ft h4{font-family:var(--font-h);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:var(--sp-4);font-weight:700}
:root[data-theme="dark"] .ft h4{color:var(--fg)}
.ft li{margin-bottom:11px}
.ft li a{text-decoration:none;color:#CBD5E1;font-size:.89rem;transition:color .15s}
.ft li a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
:root[data-theme="dark"] .ft li a{color:var(--fg-2)}
:root[data-theme="dark"] .ft li a:hover{color:var(--accent)}
.ft__med{margin-top:var(--sp-6);padding:var(--sp-5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);font-size:.81rem;line-height:1.68;color:#94A3B8}
:root[data-theme="dark"] .ft__med{background:var(--bg-3);border-color:var(--border);color:var(--fg-3)}
.ft__med strong{display:block;color:#fff;margin-bottom:7px;font-family:var(--font-h);font-size:.86rem}
:root[data-theme="dark"] .ft__med strong{color:var(--fg)}
.ft__bot{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:center;font-size:.82rem;color:#94A3B8}
:root[data-theme="dark"] .ft__bot{color:var(--fg-3)}

/* ---------- reveal: MUST fail visible ----------
   Default state is fully visible. Animation is opt-in and only enabled once
   JS confirms IntersectionObserver exists; a watchdog disarms it regardless. */
/* Entry motion rides the independent `translate` property, NOT `transform`.
   Why: .reveal and [data-stagger] > * are high-specificity and set transform on
   EVERY revealed element. .tier--hot{transform:scale(1.035)} at (0,1,0) lost to
   html.anim-on [data-stagger].is-in > *{transform:none} at (0,3,1), and .tiers
   carries data-stagger - so the recommended tier was never once emphasised for
   any visitor with JS. The same collision silently killed the hover lifts on
   .step .mech .oitem .bun inside staggered grids. translate/scale/rotate are
   separate animatable properties that compose with transform instead of
   replacing it, so entry motion and emphasis/hover can now coexist. */
.reveal{opacity:1;translate:none}
html.anim-on .reveal{opacity:0;translate:0 18px;transition:opacity .55s ease-out,translate .55s cubic-bezier(.2,.8,.3,1)}
html.anim-on .reveal.is-in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
  html.anim-on .reveal{opacity:1!important;transform:none!important;transition:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-60px;inset-inline-start:16px;z-index:100;background:var(--accent);color:var(--accent-fg);padding:12px 20px;border-radius:0 0 var(--r) var(--r);text-decoration:none;font-weight:650;transition:top .18s}
.skip:focus{top:0}

/* ==========================================================================
   v1.2 — science / timeline / in-person care
   ========================================================================== */

/* ---------- science ---------- */
.sci__in{display:grid;gap:var(--sp-7);grid-template-columns:minmax(0,1fr);align-items:center;margin-bottom:var(--sp-8)}
@media (min-width:980px){.sci__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8)}}
.sci__copy>p{color:var(--fg-2);font-size:1.03rem;margin-bottom:var(--sp-5)}
.sci__note{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:var(--sp-5);margin-bottom:var(--sp-4)}
.sci__note h4{font-family:var(--font-h);font-size:1rem;font-weight:700;margin-bottom:8px}
.sci__note p{font-size:.93rem;color:var(--fg-2);line-height:1.62}
.sci__fig{margin:0}
.sci__fig figcaption{text-align:center;font-size:.84rem;color:var(--fg-3);margin-top:var(--sp-3)}
.glp{width:100%;height:auto;color:var(--accent);display:block}
.glp__hub rect{fill:var(--accent);stroke:none}
.glp__hubt{fill:var(--accent-fg);font-family:var(--font-h);font-size:26px;font-weight:800;letter-spacing:-.02em}
.glp__hubs{fill:var(--accent-fg);font-family:var(--font-b);font-size:12px;opacity:.78}
.glp__node circle{fill:var(--bg-2);stroke:var(--border-2);stroke-width:2}
.glp__nt{fill:var(--fg);font-family:var(--font-h);font-size:14px;font-weight:700}
.glp__ns{fill:var(--fg-3);font-family:var(--font-b);font-size:9px}
.sci__mt{text-align:center;margin-bottom:var(--sp-6);font-size:clamp(1.15rem,1.9vw,1.45rem)}
.mechs{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.mechs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.mechs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mech{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);
  transition:border-color .2s,transform .2s}
.mech:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.mech:hover{transform:none}}
.mech__n{display:inline-block;font-family:var(--font-h);font-size:.78rem;font-weight:800;letter-spacing:.09em;
  color:var(--accent-ink);background:var(--accent-soft);padding:4px 10px;border-radius:999px;margin-bottom:var(--sp-3)}
.mech h3{font-size:1rem;margin-bottom:8px}
.mech p{font-size:.9rem;color:var(--fg-2);line-height:1.6}
.sci__disc{display:flex;gap:11px;align-items:flex-start;margin-top:var(--sp-6);padding:var(--sp-5);
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);font-size:.86rem;
  color:var(--fg-2);line-height:1.65;max-width:84ch;margin-inline:auto}
.sci__disc svg{color:var(--accent);flex-shrink:0;margin-top:3px}

/* ---------- timeline ---------- */
.tl{display:grid;gap:0;position:relative;margin-bottom:var(--sp-8);padding:0;list-style:none}
.tl__item{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);padding-bottom:var(--sp-5);position:relative}
@media (min-width:760px){
  .tl{padding-inline-start:0}
  .tl__item{grid-template-columns:130px minmax(0,1fr);gap:var(--sp-5);align-items:start}
  .tl__item::before{content:"";position:absolute;inset-inline-start:130px;top:26px;bottom:-6px;width:2px;
    background:var(--border);transform:translateX(-1px)}
  .tl__item:last-child::before{display:none}
  .tl__item::after{content:"";position:absolute;inset-inline-start:130px;top:18px;width:11px;height:11px;
    border-radius:50%;background:var(--accent);transform:translateX(-5.5px);box-shadow:0 0 0 4px var(--bg)}
  .sec--alt .tl__item::after{box-shadow:0 0 0 4px var(--bg-2)}
  .tl__card{margin-inline-start:var(--sp-5)}
}
.tl__wk{font-family:var(--font-h);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);padding-top:14px}
.tl__card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.sec--alt .tl__card{background:var(--bg)}
.tl__card h3{font-size:1.02rem;margin-bottom:7px}
.tl__card p{font-size:.92rem;color:var(--fg-2);line-height:1.6}

.measbox{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px)}
.sec--alt .measbox{background:var(--bg)}
.measbox h3{font-size:clamp(1.15rem,1.9vw,1.4rem);margin-bottom:8px}
.measbox>.muted{margin-bottom:var(--sp-5);font-size:.93rem}
.measgrid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.measgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.measgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.meas{background:var(--bg-2);padding:var(--sp-4) var(--sp-5)}
.sec--alt .meas{background:var(--bg)}
.meas b{display:block;font-family:var(--font-h);font-size:.95rem;margin-bottom:4px}
.meas span{font-size:.85rem;color:var(--fg-3);line-height:1.5}
.photos{margin-top:var(--sp-7)}
.photos__grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.photos__note{margin-top:var(--sp-4);font-size:.82rem;color:var(--fg-3)}

/* ---------- beyond / in-person ---------- */
.beyond__body{max-width:74ch;margin:0 auto var(--sp-6);text-align:center;font-size:1.02rem}
.bcards{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--sp-8)}
@media (min-width:860px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:var(--sp-6)}
:root[data-theme="dark"] .bcard{background:var(--bg-3);border-color:var(--border)}
.bcard h3{font-size:1.06rem;margin-bottom:10px;color:var(--accent-ink)}
:root[data-theme="dark"] .bcard h3{color:var(--accent)}
.bcard p{font-size:.94rem;line-height:1.65}
.beyond__mt{text-align:center;margin-bottom:var(--sp-6);font-size:clamp(1.12rem,1.8vw,1.4rem)}
.bsteps{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--sp-6)}
@media (min-width:760px){.bsteps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bstep{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:var(--sp-5)}
:root[data-theme="dark"] .bstep{background:var(--bg-3);border-color:var(--border)}
.bstep__n{display:block;font-family:var(--font-h);font-size:1.5rem;font-weight:800;color:var(--accent-ink);
  line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .bstep__n{color:var(--accent)}
.bstep h4{font-family:var(--font-h);font-size:.98rem;font-weight:700;margin-bottom:6px;color:#fff}
:root[data-theme="dark"] .bstep h4{color:var(--fg)}
.bstep p{font-size:.89rem;line-height:1.6}
.beyond__disc{display:flex;gap:11px;align-items:flex-start;padding:var(--sp-5);border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:.85rem;line-height:1.68;
  max-width:88ch;margin-inline:auto}
:root[data-theme="dark"] .beyond__disc{background:var(--bg-3);border-color:var(--border)}
.beyond__disc svg{color:var(--accent-ink);flex-shrink:0;margin-top:3px}
:root[data-theme="dark"] .beyond__disc svg{color:var(--accent)}
.beyond__cta{text-align:center;margin-top:var(--sp-6)}

/* ---------- peptide availability callout ---------- */
.pep__avail{margin-top:var(--sp-5);padding:var(--sp-5);border-radius:var(--r);
  background:rgba(127,178,240,.12);border:1px solid rgba(127,178,240,.34)}
:root[data-theme="dark"] .pep__avail{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.pep__avail strong{display:block;color:var(--accent-ink);font-family:var(--font-h);font-size:.95rem;margin-bottom:6px}
:root[data-theme="dark"] .pep__avail strong{color:var(--accent)}
.pep__avail span{font-size:.91rem;line-height:1.62}

/* ---------- standards ---------- */
.stds{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.stds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.std{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.std>svg{color:var(--ok);flex-shrink:0;margin-top:4px;width:20px;height:20px}
.std h3{font-size:1rem;margin-bottom:6px}
.std p{font-size:.91rem;color:var(--fg-2);line-height:1.62}
.std__disc{display:flex;gap:11px;align-items:flex-start;margin-top:var(--sp-6);padding:var(--sp-5);
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);font-size:.86rem;
  color:var(--fg-2);line-height:1.65;max-width:84ch;margin-inline:auto}
.std__disc svg{color:var(--accent);flex-shrink:0;margin-top:3px}

/* ---------- HSA / FSA ---------- */
.pay__body{max-width:76ch;margin:0 auto var(--sp-6);text-align:center;color:var(--fg-2);font-size:1.02rem}
.paycols{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--sp-6)}
@media (min-width:820px){.paycols{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.paycol{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.sec--alt .paycol{background:var(--bg)}
.paycol--yes{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.paycol h3{font-size:1rem;margin-bottom:var(--sp-3);display:flex;align-items:center;gap:9px}
.paycol--yes h3 svg{color:var(--ok)}
.paycol--no h3{color:var(--fg-3)}
.checks--muted li{color:var(--fg-3)}
.checks--muted svg{color:var(--fg-3)}
.payhow{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,30px)}
.sec--alt .payhow{background:var(--bg)}
.payhow h3{font-size:1rem;margin-bottom:var(--sp-4)}
.payhow__list{list-style:none;display:grid;gap:var(--sp-3);margin:0;padding:0}
.payhow__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:start;
  font-size:.93rem;color:var(--fg-2);line-height:1.6}
.payhow__n{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--font-h);font-weight:750;font-size:.78rem;flex-shrink:0}

/* ---------- request form ---------- */
.rform{max-width:720px;margin:var(--sp-7) auto 0;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);text-align:left;box-shadow:var(--shadow-xl)}
.rform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rform__h{font-size:clamp(1.25rem,2.1vw,1.55rem);margin-bottom:8px;color:var(--fg)}
.rform__sub{font-size:.94rem;color:var(--fg-2);margin-bottom:var(--sp-6);line-height:1.6}
.rform__grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.rform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fld--wide{grid-column:1 / -1}}
.fld{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.fld label{font-family:var(--font-h);font-size:.86rem;font-weight:650;color:var(--fg)}
.fld input,.fld select,.fld textarea{
  width:100%;min-width:0;min-height:48px;padding:12px 14px;font-family:var(--font-b);font-size:16px;
  color:var(--fg);background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:104px;resize:vertical;line-height:1.55}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;padding-inline-end:42px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-3)}
.rform .btn{margin-top:var(--sp-6)}
.rform__privacy{display:flex;gap:10px;align-items:flex-start;margin-top:var(--sp-4);
  font-size:.82rem;color:var(--fg-3);line-height:1.6}
.rform__privacy svg{color:var(--fg-3);flex-shrink:0;margin-top:3px}
.fcta .rform h3,.fcta .rform label{color:var(--fg)}

/* The form card is a LIGHT surface sitting inside a dark section, so the
   section's own ink rules (.sec--ink p) must not reach into it. Scope the card
   as its own colour context rather than patching each child — anything added
   to the form later then inherits correctly instead of silently going 1.48:1. */
.sec--ink .rform{color:var(--fg)}
.sec--ink .rform p,.sec--ink .rform li,.sec--ink .rform span{color:var(--fg-2)}
.sec--ink .rform h3,.sec--ink .rform label{color:var(--fg)}
.sec--ink .rform .rform__privacy,
.sec--ink .rform .rform__privacy span{color:var(--fg-3)}
.sec--ink .rform .fld input::placeholder,
.sec--ink .rform .fld textarea::placeholder{color:var(--fg-3)}

/* ---------- the $69 founding offer ---------- */
.offer__head{text-align:center;max-width:72ch;margin:0 auto var(--sp-7)}
.offer__price{display:flex;align-items:baseline;justify-content:center;gap:4px;
  font-family:var(--font-h);margin:var(--sp-3) 0 var(--sp-4);line-height:1}
.offer__price sup{font-size:1.7rem;font-weight:650;color:var(--fg-2);top:-.6em;position:relative}
.offer__price b{font-size:clamp(3.4rem,8vw,5.4rem);font-weight:800;letter-spacing:-.04em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.offer__price span{font-size:1.2rem;color:var(--fg-3);font-weight:550}
.oitems{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.oitems{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.oitems{grid-template-columns:repeat(4,minmax(0,1fr))}}
.oitem{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);transition:border-color .2s,transform .2s}
.sec--alt .oitem{background:var(--bg)}
.oitem:hover{border-color:color-mix(in srgb,var(--accent) 48%,transparent);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.oitem:hover{transform:none}}
.oitem__tag{display:inline-block;font-family:var(--font-h);font-size:.76rem;font-weight:800;
  letter-spacing:.1em;color:var(--accent-ink);background:var(--accent-soft);
  padding:4px 10px;border-radius:999px;margin-bottom:var(--sp-3)}
.oitem h3{font-size:1rem;margin-bottom:8px}
.oitem p{font-size:.9rem;color:var(--fg-2);line-height:1.6}
.offer__fridge{display:flex;gap:10px;align-items:flex-start;justify-content:center;
  margin-top:var(--sp-6);font-size:.87rem;color:var(--fg-2);max-width:70ch;margin-inline:auto}
.offer__fridge svg{color:var(--accent);flex-shrink:0;margin-top:3px}
.offer__cta{text-align:center;margin-top:var(--sp-6);display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-3)}
.offer__ctasub{font-size:.86rem;color:var(--fg-3)}

/* ---------- bundles ---------- */
.buns{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.buns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bun{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.bun h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:8px}
.bun__lede{color:var(--accent-ink);font-weight:600;margin-bottom:var(--sp-5);font-size:1rem}
.bun .checks{margin-bottom:var(--sp-5)}
.bun .checks li{font-size:.92rem;padding:7px 0}
.bun__note{font-size:.84rem;color:var(--fg-3);line-height:1.6;padding-top:var(--sp-4);
  border-top:1px solid var(--border)}
.bun__both{margin-top:var(--sp-6);text-align:center;background:var(--bg-3);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.bun__both h3{font-size:1.1rem;margin-bottom:10px}
.bun__both p{color:var(--fg-2);max-width:68ch;margin-inline:auto;font-size:.95rem;line-height:1.65}
.bun__both p:last-child{margin-top:var(--sp-5)}

/* ---------- video panels ----------
   Bounded media, never a text background. Caption sits BELOW the clip, so
   legibility never depends on what frame happens to be on screen. */
.vgrid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vp{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--bg-3)}
.vp__v{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:
  /* visible fallback: if the mp4 and the poster are both absent this still
     reads as an intentional tinted panel rather than a black hole */
  linear-gradient(145deg,color-mix(in srgb,var(--navy-2) 16%,var(--bg-3)),
                  color-mix(in srgb,var(--accent) 12%,var(--bg-3)))}
.vp__cap{padding:var(--sp-4) var(--sp-4) var(--sp-5);font-size:.86rem;color:var(--fg-2);
  line-height:1.5;background:var(--bg-2)}
@media (prefers-reduced-motion:reduce){
  /* Do NOT hide the panel. Freeze it: the poster frame still carries the image. */
  .vp__v{animation:none}
}

/* ==========================================================================
   v2.1 — intake assessment quiz
   Default state = every question visible, submit visible, nav hidden. That is
   the no-JS experience and it works. `.quiz--stepped` is added by JS only.
   ========================================================================== */
.quiz{max-width:700px;margin:var(--sp-7) auto 0;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);text-align:left;box-shadow:var(--shadow-xl)}
.quiz__head{margin-bottom:var(--sp-6)}
.quiz__h{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:10px;color:var(--fg)}
.quiz__sub{font-size:.95rem;color:var(--fg-2);line-height:1.6}
.quiz__nojs{font-size:.86rem;color:var(--fg-3);background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-4);margin-bottom:var(--sp-5)}

.quiz__prog{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.quiz__bar{flex:1;height:6px;border-radius:99px;background:var(--bg-3);overflow:hidden;min-width:0}
.quiz__bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);
  transition:width .32s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.quiz__bar i{transition:none}}
.quiz__count{font-size:.8rem;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}

.qstep{border:0;margin:0 0 var(--sp-7);padding:0;min-width:0}
.qstep__q{font-family:var(--font-h);font-size:clamp(1.08rem,1.8vw,1.3rem);font-weight:700;
  color:var(--fg);padding:0;margin-bottom:8px;line-height:1.3}
.qstep__help{font-size:.88rem;color:var(--fg-3);line-height:1.55;margin-bottom:var(--sp-4)}

.qopts{display:grid;gap:10px}
@media (min-width:560px){.qopts--single{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qopt{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;
  background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--r);
  transition:border-color .15s,background .15s;min-width:0}
.qopt:hover{border-color:var(--fg-3)}
.qopt input{position:absolute;opacity:0;width:1px;height:1px}
.qopt__box{width:22px;height:22px;flex-shrink:0;border-radius:6px;border:1.5px solid var(--border-2);
  display:grid;place-items:center;background:var(--bg-2);transition:.15s}
.qopt__box svg{width:14px;height:14px;color:var(--accent-fg);opacity:0;transition:opacity .12s}
.qopt__t{font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.qopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.qopt:has(input:checked) .qopt__box{background:var(--accent);border-color:var(--accent)}
.qopt:has(input:checked) .qopt__box svg{opacity:1}
.qopt:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:2px}
.qopts--single .qopt__box{border-radius:50%}

.qmeasure{display:grid;gap:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.qcontact{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.qcontact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qcontact .fld:last-child{grid-column:1 / -1}}

.quiz__err{font-size:.88rem;color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--destructive) 35%,transparent);border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:var(--sp-4)}
.quiz__nav{display:flex;gap:var(--sp-3);align-items:center}
.quiz__nav .btn{flex:1}

/* --- stepped mode: only added once JS is running --- */
.quiz--stepped .qstep{display:none;margin-bottom:var(--sp-6)}
.quiz--stepped .qstep.is-on{display:block}
.quiz--stepped .quiz__nojs{display:none}

/* the form card is a light surface inside a dark section - own its colour context */
.sec--ink .quiz{color:var(--fg)}
.sec--ink .quiz p,.sec--ink .quiz span,.sec--ink .quiz li{color:var(--fg-2)}
.sec--ink .quiz h3,.sec--ink .quiz legend,.sec--ink .quiz label{color:var(--fg)}
.sec--ink .quiz .qstep__help,.sec--ink .quiz .quiz__count,
.sec--ink .quiz .rform__privacy,.sec--ink .quiz .rform__privacy span{color:var(--fg-3)}
.sec--ink .quiz .qopt__t{color:var(--fg)}
/* 4th time a .sec--ink section rule has leaked into a light card: .sec--ink .btn--s
   paints #fff, and the quiz/request cards are white. Reset buttons at the boundary. */
.sec--ink .quiz .btn--s,.sec--ink .rform .btn--s{
  background:var(--bg-2);color:var(--fg);border-color:var(--border-2)}
.sec--ink .quiz .btn--s:hover,.sec--ink .rform .btn--s:hover{
  border-color:var(--fg-3);background:var(--bg-3)}

/* A card inside a centred section must own its own layout. `.fcta p` sets
   max-width:60ch + margin-inline:auto for the section's own prose, and that
   was silently centring every paragraph inside the form card too — a 48px
   phantom indent on the help text. Reset layout at the card boundary rather
   than patching each child; this is the third rule to leak in this way. */
.fcta .quiz,.fcta .rform{text-align:left}
.fcta .quiz p,.fcta .rform p,
.fcta .quiz legend,.fcta .quiz label,.fcta .quiz span{
  max-width:none;margin-inline:0;text-align:left}
.fcta .quiz p{margin-bottom:0}
.fcta .quiz .quiz__sub{margin-bottom:0}
.fcta .quiz .qstep__help{margin-bottom:var(--sp-4)}
.fcta .quiz .quiz__nojs{margin-bottom:var(--sp-5)}
.fcta .quiz .rform__privacy{margin-top:var(--sp-4)}

/* Illustrative photography carries its disclosure with it, not in the footer.
   A reader who sees the image must see the qualifier in the same glance. */
.vgrid__disc{margin-top:var(--sp-5);text-align:center;font-size:.8rem;color:var(--fg-3);
  max-width:80ch;margin-inline:auto;line-height:1.6}

/* ---------- legal page ---------- */
.lgl{max-width:74ch}
.lgl h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:var(--sp-3) 0 var(--sp-7)}
.lgl h2{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:var(--sp-8) 0 var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--border);scroll-margin-top:90px}
.lgl__s{margin-bottom:var(--sp-5)}
.lgl__s h3{font-size:1rem;margin-bottom:6px}
.lgl__s p{color:var(--fg-2);font-size:.95rem;line-height:1.7}
.lgl__back{margin-top:var(--sp-8)}

/* ---------- brand mark ---------- */
.logo .mark{color:var(--accent);flex-shrink:0}
.ft__brand .logo .mark{color:var(--accent)}
.mark__hex{transition:opacity .3s ease}
.logo:hover .mark__hex{opacity:.8}

/* ==========================================================================
   v2.3 — motion layer
   Every rule here is additive on top of a page that is already complete and
   correct without it. Nothing below is required to read, use or submit the site.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.sprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;
  background:transparent}
.sprog i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--navy-2)));
  transform-origin:left center}
@media (prefers-reduced-motion:reduce){.sprog{display:none}}

/* ---------- stagger ----------
   A cascade, not a wall. Children of a revealed container enter one after
   another ~55ms apart; past ~8 the delay stops growing or the tail feels broken. */
html.anim-on [data-stagger] > *{opacity:0;translate:0 14px;
  transition:opacity .5s ease-out,translate .5s cubic-bezier(.2,.8,.3,1)}
html.anim-on [data-stagger].is-in > *{opacity:1;translate:none}
html.anim-on [data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
html.anim-on [data-stagger].is-in > *:nth-child(2){transition-delay:55ms}
html.anim-on [data-stagger].is-in > *:nth-child(3){transition-delay:110ms}
html.anim-on [data-stagger].is-in > *:nth-child(4){transition-delay:165ms}
html.anim-on [data-stagger].is-in > *:nth-child(5){transition-delay:220ms}
html.anim-on [data-stagger].is-in > *:nth-child(6){transition-delay:275ms}
html.anim-on [data-stagger].is-in > *:nth-child(n+7){transition-delay:330ms}
@media (prefers-reduced-motion:reduce){
  html.anim-on [data-stagger] > *{opacity:1!important;translate:none!important;transition:none}
}

/* ---------- icon pop-in ----------
   Overshoot on the tick, so a list of inclusions reads as items being ticked
   off rather than text arriving. */
html.anim-on [data-stagger].is-in .checks svg,
html.anim-on .oitem.is-in .oitem__tag,
html.anim-on .std.is-in > svg{animation:popin .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popin{0%{transform:scale(.72)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html.anim-on [data-stagger].is-in .checks svg,
  html.anim-on .oitem.is-in .oitem__tag,
  html.anim-on .std.is-in > svg{animation:none}
}

/* ---------- counters hold their space ----------
   Reserve the final width so a counting number cannot reflow the row. */
.stat b{font-variant-numeric:tabular-nums;display:block;min-height:1em}

/* ---------- the diagram breathes ---------- */
@keyframes glpflow{0%,100%{opacity:.35}50%{opacity:.85}}
html.anim-on .glp__line line{animation:glpflow 3.2s ease-in-out infinite}
html.anim-on .glp__line line:nth-child(2){animation-delay:.4s}
html.anim-on .glp__line line:nth-child(3){animation-delay:.8s}
html.anim-on .glp__line line:nth-child(4){animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){html.anim-on .glp__line line{animation:none;opacity:.5}}

/* ---------- lift on hover, consistently ---------- */
.bun,.paycol,.tier,.freecard,.bcard{transition:transform .22s cubic-bezier(.2,.8,.3,1),
  box-shadow .22s,border-color .22s}
.bun:hover,.paycol:hover,.freecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){
  .bun:hover,.paycol:hover,.freecard:hover{transform:none}
}

/* ==========================================================================
   v2.4 — hero media, credibility strip, animated panel
   ========================================================================== */

/* ---------- background filmstrip ----------
   Four portrait clips behind the hero. The codebase rule is that text never
   sits on footage, because then contrast depends on whatever frame is showing.
   Here the text DOES sit over it, so the rule is kept a different way: the
   scrim is opaque enough that the footage cannot move the result. Measured
   across every frame of all four clips, the darkest and brightest text-sized
   patch are 0.00 and 0.95 relative luminance. At 0.96 alpha the worst case is
   --fg 14.0:1, --fg-2 7.5:1 and the h1 accent 4.7:1. Do not lower it. */
.hero__media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr)}
/* Desktop: sit the mosaic in the right portion, where the scrim is light enough
   to actually see it. Behind the copy column the scrim is 0.96 and any footage
   there is invisible, so putting clips there only costs bandwidth. */
@media (min-width:1000px){.hero__strip{inset-inline-start:54%}}
.hero__clip{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.hero__scrim{position:absolute;inset:0}

/* Banded, not a flat inset-0 wash: solid across the copy column, then a
   non-linear falloff so the footage is still legibly footage on the right. */
.hero__scrim{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 96%,transparent) 0%,
      color-mix(in srgb,var(--bg) 96%,transparent) 56%,
      color-mix(in srgb,var(--bg) 74%,transparent) 64%,
      color-mix(in srgb,var(--bg) 34%,transparent) 76%,
      color-mix(in srgb,var(--bg) 18%,transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 70%,transparent) 0%,
      transparent 22%,
      transparent 72%,
      color-mix(in srgb,var(--bg) 85%,transparent) 100%);
}
/* Below 980px the copy spans the full width, so the scrim would have to be
   solid everywhere behind it - which makes the footage invisible. Invisible
   footage is not worth 1.2MB on a phone, so it is not shipped at all there.
   The same four clips appear at full size in "Who this is for" further down. */
/* Below 1000px the hero is ONE column, so the copy spans the full width and the
   directional scrim (which only holds full strength to 56%) cannot protect it.
   Must match the .hero__in breakpoint exactly - a 20px gap between them put text
   on open footage at 980-999px. */
@media (max-width:999px){
  .hero__media,.hero__disc{display:none}
}
.hero__copy{position:relative;z-index:1}
.hero__disc{position:relative;z-index:1;max-width:var(--maxw);margin:var(--sp-5) auto 0;
  padding-inline:var(--pad,20px);font-size:.78rem;line-height:1.5}
.hero__disc span{display:inline-block;max-width:60ch;
  color:var(--fg-2);background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-radius:var(--r-sm);padding:6px 10px}

/* A still frame is a complete hero. Reduce motion pauses to the poster via JS;
   this keeps the first frame from ever being a blank box if decode fails. */
@media (prefers-reduced-motion:reduce){.hero__clip{filter:saturate(.9)}}

/* ---------- credibility strip ----------
   Our own icons and our own words. There is no official HIPAA or CLIA logo to
   display, and FDA prohibits private use of its logo, so an invented seal would
   be both false and less persuasive than the plain claim. */
.hbadges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border-2);list-style:none}
.hbadge{display:flex;align-items:flex-start;gap:9px;min-width:0}
.hbadge__i{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:9px;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.hbadge__t{display:block;min-width:0}
.hbadge__t b{display:block;font-family:var(--font-h);font-size:.84rem;font-weight:700;line-height:1.25;color:var(--fg)}
.hbadge__t small{display:block;font-size:.76rem;color:var(--fg-3);line-height:1.35;margin-top:2px}
.hero__fda{margin-top:var(--sp-4);font-size:.78rem;color:var(--fg-3);line-height:1.55;max-width:62ch}

html.anim-on .hbadge{opacity:0;translate:0 10px;
  transition:opacity .45s ease-out,translate .45s cubic-bezier(.2,.8,.3,1)}
html.anim-on .hero__copy.is-in .hbadge{opacity:1;translate:none}
html.anim-on .hero__copy.is-in .hbadge:nth-child(1){transition-delay:.10s}
html.anim-on .hero__copy.is-in .hbadge:nth-child(2){transition-delay:.18s}
html.anim-on .hero__copy.is-in .hbadge:nth-child(3){transition-delay:.26s}
html.anim-on .hero__copy.is-in .hbadge:nth-child(4){transition-delay:.34s}
@media (prefers-reduced-motion:reduce){
  html.anim-on .hbadge{opacity:1!important;translate:none!important;transition:none}
}

/* ---------- the panel fills in ----------
   Default is the real width, so no-JS and reduce-motion both render a complete
   panel. anim-on is the only thing that starts a bar at zero. */
html.anim-on .hcard .mk__bar i{width:0;
  transition:width .85s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(.22s + var(--i) * .09s)}
html.anim-on .hcard.is-in .mk__bar i{width:var(--w)}
html.anim-on .hcard .mk{opacity:0;translate:0 8px;
  transition:opacity .4s ease-out,translate .4s ease-out;
  transition-delay:calc(.14s + var(--i) * .07s)}
html.anim-on .hcard.is-in .mk{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
  html.anim-on .hcard .mk__bar i{width:var(--w)!important;transition:none}
  html.anim-on .hcard .mk{opacity:1!important;translate:none!important;transition:none}
}

/* ---------- the mark ----------
   38px now. The hexagon draws itself once, the droplet settles after it. */
.logo .mark{width:38px;height:38px}
.ft__brand .logo .mark{width:42px;height:42px}
@keyframes markdraw{0%{stroke-dashoffset:84}100%{stroke-dashoffset:0}}
@keyframes markdrop{0%{transform:translateY(-3px) scale(.86)}
  60%{transform:translateY(0) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@keyframes markpulse{0%,100%{opacity:.45}50%{opacity:.95}}
html.anim-on .logo .mark__hex{stroke-dasharray:84;animation:markdraw 1.1s ease-out both}
html.anim-on .logo .mark__drop{transform-origin:16px 18px;animation:markdrop .72s cubic-bezier(.34,1.56,.64,1) .45s both}
.logo:hover .mark__hex{animation:markpulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  html.anim-on .logo .mark__hex{stroke-dasharray:none;animation:none;opacity:.45}
  html.anim-on .logo .mark__drop{animation:none;opacity:1;transform:none}
  .logo:hover .mark__hex{animation:none}
}

/* ---------- ambient section background ----------
   Measured, not guessed. The brightest pixel across every frame of amb-price is
   rgb(21,123,144) and of amb-cta rgb(17,93,125). Compositing --bg (dark #061820)
   over the worst case at 0.66 alpha gives --fg 10.3:1, --fg-2 6.5:1, --fg-3 4.8:1.
   Lower the alpha and --fg-3 fails first. */
.secbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.secbg__v{width:100%;height:100%;object-fit:cover;display:block}
.secbg__scrim{position:absolute;inset:0;
  background:rgba(14,22,38,.66)}
.sec--ink.has-bg,.sec.has-bg{position:relative;isolation:isolate}
.sec--ink.has-bg > .wrap,.sec.has-bg > .wrap{position:relative;z-index:1}
/* The section keeps its own solid colour underneath, so a failed decode or a
   blocked request leaves exactly the section that was there before. */
@media (prefers-reduced-motion:reduce){
  .secbg__v{display:none}
  .secbg__scrim{background:#0E1626}
}

/* ---------- pricing: what every tier shares ----------
   The three tiers carried four byte-identical bullets in all three locales, so
   4 of Essentials' 5 lines were also Elite's and the real ladder was invisible.
   Rendered once here instead; the cards now show only what differs. */
.shared{margin-top:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-2);padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.shared__t{display:block;font-family:var(--font-h);font-size:.76rem;font-weight:750;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--sp-4)}
.shared__l{display:grid;gap:var(--sp-2) var(--sp-5);list-style:none;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:680px){.shared__l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shared__l li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--fg-2);padding:4px 0}
.shared__l svg{color:var(--ok);flex-shrink:0;margin-top:3px}

/* ---------- pricing: assurance bar ----------
   No contract / no cancellation fee is the strongest asset a site with no
   testimonials has. It was a dim <p> under the add-ons. */
.assure{display:grid;gap:var(--sp-4);margin-top:var(--sp-5);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.assure{grid-template-columns:repeat(2,minmax(0,1fr))}}
.assure__c{display:flex;align-items:flex-start;gap:12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.assure__c svg{color:var(--ok);flex-shrink:0;margin-top:3px}
.assure__c b{display:block;font-family:var(--font-h);font-size:.95rem;margin-bottom:3px;color:var(--fg)}
.assure__c span{font-size:.88rem;color:var(--fg-2);line-height:1.55}

/* ==========================================================================
   v2.5 — interaction layer
   Entry motion owns `translate`. Hover/emphasis owns `transform`. They are
   separate properties so neither can cancel the other - that collision is what
   silently killed every hover lift inside a [data-stagger] grid until now.
   Every block has a prefers-reduced-motion escape; the owner runs reduce-motion
   at OS level, so the static state is the real design.
   ========================================================================== */

/* ---------- cards lift and the border wakes up ---------- */
.tier,.svccard,.bcard,.pepcard,.mech,.step,.oitem,.shared,.assure__c{
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s}
@media (hover:hover){
  .tier:not(.tier--hot):hover,.svccard:hover,.shared:hover,.assure__c:hover{
    transform:translateY(-3px);box-shadow:var(--shadow-lg);
    border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
  .tier--hot:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl)}
}

/* ---------- the primary button gets a sheen on hover ---------- */
.btn--p{position:relative;overflow:hidden}
.btn--p::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  translate:-120% 0;transition:translate .62s cubic-bezier(.3,.7,.3,1)}
@media (hover:hover){.btn--p:hover::after{translate:120% 0}}

/* ---------- underline that draws from the start edge ---------- */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.8,.3,1)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}

/* ---------- section headings rise a touch ahead of their body ---------- */
html.anim-on .sec-head{opacity:0;translate:0 16px;
  transition:opacity .5s ease-out,translate .55s cubic-bezier(.2,.8,.3,1)}
html.anim-on .sec-head.is-in{opacity:1;translate:none}

/* ---------- the enrollment ribbon pulses once when it arrives ---------- */
@keyframes enrollin{0%{translate:0 10px}60%{scale:1.015}100%{translate:none;scale:1}}
html.anim-on .enroll.is-in{animation:enrollin .7s cubic-bezier(.34,1.3,.64,1) both}

/* ---------- the price counts up to its real number ---------- */
.tier__price b{font-variant-numeric:tabular-nums}

/* ---------- checkmarks tick in ---------- */
html.anim-on .shared.is-in .shared__l svg,
html.anim-on .tier.is-in .checks svg{animation:popin .4s cubic-bezier(.34,1.56,.64,1) both}
html.anim-on .shared.is-in .shared__l li:nth-child(2) svg{animation-delay:.06s}
html.anim-on .shared.is-in .shared__l li:nth-child(3) svg{animation-delay:.12s}
html.anim-on .shared.is-in .shared__l li:nth-child(4) svg{animation-delay:.18s}

/* ---------- the panel's accent ring breathes, very slightly ---------- */
@keyframes ringglow{0%,100%{box-shadow:var(--shadow-xl),0 0 0 1px rgba(127,178,240,.26)}
  50%{box-shadow:var(--shadow-xl),0 0 0 1px rgba(127,178,240,.52)}}
html.anim-on .tier--hot.is-in{animation:ringglow 4.5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .tier,.svccard,.bcard,.pepcard,.mech,.step,.oitem,.shared,.assure__c{transition:none}
  .tier:not(.tier--hot):hover,.svccard:hover,.shared:hover,.assure__c:hover,
  .tier--hot:hover{transform:none}
  .btn--p::after{display:none}
  .nav a::after{transition:none}
  .nav a:hover::after{transform:scaleX(1)}
  html.anim-on .sec-head{opacity:1!important;translate:none!important;transition:none}
  html.anim-on .enroll.is-in{animation:none}
  html.anim-on .shared.is-in .shared__l svg,
  html.anim-on .tier.is-in .checks svg{animation:none}
  html.anim-on .tier--hot.is-in{animation:none;box-shadow:var(--shadow-xl),0 0 0 1px rgba(127,178,240,.44)}
}

/* ==========================================================================
   v2.7 — animated icons + scroll-driven motion
   ========================================================================== */

/* ---------- icons that draw themselves ----------
   Every stroke path carries pathLength="100", so one dash rule drives icons of
   any real geometry. The tick is a separate stroked path on top of a filled
   disc precisely so it CAN draw - the old check was a single filled path with a
   knocked-out tick, which can only ever pop. */
.ico{overflow:visible}
html.anim-on .ico--chk .ico__disc{transform-origin:10px 10px}
/* Hide the stroke ONLY inside a container that is a reveal target and has not
   revealed yet. A blanket `html.anim-on .ico__tick{stroke-dashoffset:100}` would
   leave every icon outside a reveal container permanently undrawn - the same
   fail-invisible trap as hiding content and waiting for JS to show it. */
html.anim-on :is(.reveal,[data-stagger],.hero__copy,.hcard,.sec-head,.shared,.tier,.enroll):not(.is-in) .ico--chk .ico__tick,
html.anim-on :is(.reveal,[data-stagger],.hero__copy,.hcard,.sec-head,.shared,.tier,.enroll):not(.is-in) .ico--line [pathLength]{
  stroke-dasharray:100;stroke-dashoffset:100}

@keyframes icoDisc{0%{transform:scale(.72)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes icoDraw{to{stroke-dashoffset:0}}

html.anim-on .is-in .ico--chk .ico__disc,
html.anim-on .ico--chk.is-in .ico__disc{animation:icoDisc .34s cubic-bezier(.34,1.56,.64,1) both}
html.anim-on .is-in .ico--chk .ico__tick,
html.anim-on .ico--chk.is-in .ico__tick{animation:icoDraw .3s cubic-bezier(.4,0,.2,1) .2s both}
html.anim-on .is-in .ico--line [pathLength]{animation:icoDraw .62s cubic-bezier(.4,0,.2,1) both}
/* stagger down a list so ticks read as items being checked off, not a flash */
html.anim-on .is-in li:nth-child(2) .ico--chk .ico__tick{animation-delay:.26s}
html.anim-on .is-in li:nth-child(3) .ico--chk .ico__tick{animation-delay:.32s}
html.anim-on .is-in li:nth-child(4) .ico--chk .ico__tick{animation-delay:.38s}
html.anim-on .is-in li:nth-child(n+5) .ico--chk .ico__tick{animation-delay:.44s}

/* hover: the badge icons redraw, the disc gives a small nudge */
@media (hover:hover){
  .hbadge:hover .ico--line [pathLength]{animation:icoDraw .5s cubic-bezier(.4,0,.2,1) both}
  .checks li:hover .ico--chk .ico__disc{transform:scale(1.12);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
}

/* ==========================================================================
   scroll-driven layer
   Gated twice: @supports so a browser without view()/scroll() timelines gets
   NOTHING rather than an animation stuck at its 0% keyframe, and
   prefers-reduced-motion:no-preference so none of it exists for a
   reduce-motion visitor. Both gates matter - fill-mode:both on an animation
   that never runs is how content goes permanently invisible.
   ========================================================================== */
@supports (animation-timeline: view()) and (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {

  /* hero mosaic parallax - four rates so the grid reads as depth, not a sheet */
  @keyframes paraA{to{translate:0 -9%}}
  @keyframes paraB{to{translate:0 -15%}}
  @keyframes paraC{to{translate:0 -5%}}
  @keyframes paraD{to{translate:0 -12%}}
  html.anim-on .hero__clip{animation:paraA linear both;animation-timeline:scroll(root);animation-range:0 110vh}
  html.anim-on .hero__clip:nth-child(2){animation-name:paraB}
  html.anim-on .hero__clip:nth-child(3){animation-name:paraC}
  html.anim-on .hero__clip:nth-child(4){animation-name:paraD}

  /* ambient section fields drift against the scroll */
  @keyframes bgDrift{from{translate:0 -4%;scale:1.08}to{translate:0 4%;scale:1.08}}
  html.anim-on .secbg__v{animation:bgDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

  /* an accent rule under each section heading, drawn by the scroll itself */
  .sec-head{position:relative}
  .sec-head::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:-14px;
    width:clamp(56px,7vw,92px);height:3px;border-radius:3px;background:var(--accent);
    transform:scaleX(0);transform-origin:center}
  @keyframes ruleDraw{to{transform:scaleX(1)}}
  html.anim-on .sec-head::after{animation:ruleDraw linear both;
    animation-timeline:view();animation-range:entry 15% entry 85%}

  /* video panels ease toward their resting size as they cross the viewport */
  @keyframes panelSettle{from{scale:.975}to{scale:1}}
  html.anim-on .vp{animation:panelSettle linear both;
    animation-timeline:view();animation-range:entry 5% entry 65%}

  /* the biomarker card lifts a little on the way past */
  @keyframes cardFloat{from{translate:0 14px}to{translate:0 -14px}}
  html.anim-on .hcard{animation:cardFloat linear both;
    animation-timeline:view();animation-range:cover 0% cover 100%}

  /* a light sweeps across the pricing panel as it enters */
  @keyframes panelSweep{from{background-position:-40% 0}to{background-position:140% 0}}
  html.anim-on .tier--hot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    border-radius:inherit;background:linear-gradient(105deg,transparent 42%,rgba(127,178,240,.16) 50%,transparent 58%);
    background-size:250% 100%;
    animation:panelSweep linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}
}

/* ---------- background motion control ----------
   Two jobs. It lets a reduce-motion visitor opt IN - the site owner runs
   reduce-motion at OS level and could never see the footage at all - and it gives
   everyone else a way to stop it, which WCAG 2.2.2 requires for motion that
   auto-plays for more than five seconds and which this site did not have. */
.motog{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  margin-inline-start:10px;font-family:inherit;font-size:.76rem;font-weight:600;
  color:var(--fg-2);background:color-mix(in srgb,var(--bg) 92%,transparent);
  border:1px solid var(--border-2);border-radius:999px;padding:5px 12px;
  cursor:pointer;transition:border-color .18s,color .18s}
.motog:hover{border-color:var(--accent);color:var(--fg)}
.motog:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.motog svg{flex-shrink:0;color:var(--accent)}

/* ---------- flag red, rationed ----------
   Four uses, by decision of the marketing review: the countdown digits, the
   struck $149, the "waived" stamp, and the single primary CTA per screen.
   Never a background field, never behind body text, never pure #FF0000. */
.anno__u b{color:var(--flag)}
.enroll s,.tier__enroll s{color:var(--flag);opacity:.85}
.enroll b{color:var(--flag)}
.tier--hot .btn--p{background:var(--flag);color:#fff;border-color:var(--flag)}
.tier--hot .btn--p:hover{background:#9C1B25}
:root[data-theme="dark"] .tier--hot .btn--p,
.tier--hot .btn--p{box-shadow:var(--shadow)}

/* ---------- the slogan band ----------
   Owner's call, 9 Oct. Stripes are CSS, not an image, so they recolour with the
   theme and cost nothing. Red stays rationed: it is the stripes and the rule,
   never the ground behind the words. */
.maha{background:var(--bg-3);border-block:1px solid var(--border);position:relative;z-index:2}
.maha__in{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding-block:11px;justify-content:center;text-align:center}
.maha__stripes{display:inline-block;width:34px;height:15px;flex-shrink:0;border-radius:2px;
  background:repeating-linear-gradient(180deg,
    var(--flag) 0 3px, transparent 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 14%,transparent)}
.maha__line{font-family:var(--font-h);font-weight:800;font-size:clamp(.92rem,1.5vw,1.08rem);
  letter-spacing:-.01em;color:var(--fg);text-transform:uppercase}
.maha__sub{font-size:.86rem;color:var(--fg-2)}
@media (max-width:539px){.maha__sub{width:100%}}

/* every stroke icon draws, not just the four that started as strokes */
html.anim-on .ico--line{overflow:visible}