/* ══════════════════════════════════════════════════════════════════
   KUVOS — "Trusted Signal"
   deep navy fields · high-contrast type · restrained Signal Blue
   actions · Electric Aqua network cues · modular evidence sections
   Clean Signal (white / cloud-blue) is retained for product UI only.
   ══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light only;
  --navy:#050D1C;          /* deepest field */
  --navy-2:#0A1830;        /* raised dark surface */
  --ink:#0A1424;           /* type on light */
  --signal:#1E5BFF;        /* restrained Signal Blue — primary action */
  --signal-d:#1240C8;
  --aqua:#19D3E8;          /* Electric Aqua — network cues */
  --aqua-soft:#E0FAFD;
  --cloud:#EFF5FC;
  --white:#FFFFFF;         /* surfaces and fills only */
  --cream:#F4F1E9;         /* type on dark — warmer than white against the photography */
  --lime:#8FCB2B;
  --coral:#FF6B5A;
  --muted:#57687F;
  --on-dark:#A9BCD6;
  --on-dark-2:#7C91AE;
  --navy-deep:#020814;     /* deepest ground: rail, marquee, footer, device bezel */
  --navy-3:#0E1B33;        /* watch band */
  --cloud-2:#E7EDF6;       /* companion-surface card art */
  --track:#DDE8F5;         /* inactive progress track inside product UI */
  --teal-d:#0A7684;        /* aqua text that must hold AA on white, cloud and aqua-soft */
  --aqua-lt:#5FE3F2;       /* aqua eyebrow on the navy CTA card */
  --gold:255,196,118;      /* retro warm light over section photography, rgb triplet */
  --lime-d:#4C7A0B;        /* lime text that must hold AA on light */
  --on-lime:#05121F;       /* type on a lime fill */
  --coral-bg:#FFF5F3;      /* attention row ground */
  --coral-bg-2:#FFE3DE;    /* attention chip ground */
  --coral-d:#B23F2E;       /* attention text that must hold AA on light */
  --muted-2:#627189;       /* tertiary type on light — AA on white and cloud */
  --on-dark-hi:#D6E4F5;    /* brightest body type on navy */
  --line:rgba(10,20,36,.10);
  --line-2:rgba(10,20,36,.06);
  --line-d:rgba(255,255,255,.13);
  --line-d2:rgba(255,255,255,.08);

  --shell:1240px;
  --gut:clamp(18px,5vw,52px);
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;

  --f:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-acc:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-mark:"Montserrat",var(--f);   /* the wordmark — kept separate so it can diverge again */

  --t-hero:clamp(2.2rem,7.2vw,4.8rem);
  --t-h2:clamp(1.75rem,5vw,3.2rem);
  --t-h3:clamp(1.04rem,2.4vw,1.28rem);
  --t-body:clamp(.98rem,1.7vw,1.06rem);
  --t-sm:.88rem; --t-xs:.76rem;

  /* Whoop-style motion: long, soft, transform+opacity only */
  --e:cubic-bezier(.16,.84,.44,1);
  --e-out:cubic-bezier(.22,1,.36,1);
  --sh-s:0 2px 10px rgba(5,13,28,.05);
  --sh-m:0 18px 44px -22px rgba(5,13,28,.32);
  --sh-l:0 44px 100px -44px rgba(5,13,28,.55);
}
@media (prefers-color-scheme:dark){html,body{background:var(--white)!important;color:var(--ink)!important}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f);font-size:var(--t-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.038em;line-height:1.05;color:var(--ink)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:6px}
::selection{background:var(--signal);color:var(--cream)}
em,.acc{font-family:var(--f-acc);font-style:italic;font-weight:400;letter-spacing:-.012em}

.sprite{position:absolute;width:0;height:0}
.skip{position:fixed;left:var(--gut);top:8px;z-index:100;transform:translateY(-160%);
  background:var(--white);color:var(--ink);font-weight:800;font-size:var(--t-sm);
  padding:12px 20px;border-radius:100px;box-shadow:var(--sh-m);
  transition:transform .4s var(--e-out)}
.skip:focus-visible{transform:none}
#top:focus{outline:none}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:clamp(62px,10vw,136px)}
.cloud{background:var(--cloud)}
.lede{color:var(--muted);max-width:58ch;font-size:clamp(.98rem,1.9vw,1.12rem)}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:var(--t-xs);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--signal)}
/* On navy the eyebrow is aqua and the ambient glow behind it is also aqua, which
   measured ~1:1. A tight dark plate restores contrast without dimming the glow. */
.dark .eyebrow,.final .eyebrow,.hero .eyebrow{position:relative;isolation:isolate}
.dark .eyebrow::before,.final .eyebrow::before,.hero .eyebrow::before{content:"";
  position:absolute;inset:-6px -12px;z-index:-1;border-radius:100px;
  background:rgba(5,13,28,.82)}
.eyebrow::after{content:"";width:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--aqua),transparent)}
.lede.wide{max-width:72ch}
.eyebrow + h2{margin-top:18px}
.head h2{font-size:var(--t-h2);max-width:18ch}
.head p{margin-top:18px}

/* ── dark field ── */
.dark{background:var(--navy);color:var(--on-dark);position:relative;overflow:hidden}
.dark h2,.dark h3,.dark h4{color:var(--cream)}
.dark .lede,.dark p{color:var(--on-dark)}
.dark .eyebrow,.hero .eyebrow{color:var(--aqua)}
.dark>.shell{position:relative}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.5}
.g1{width:60vw;height:60vw;right:-20vw;top:-24vw;background:radial-gradient(circle,rgba(25,211,232,.30),transparent 66%)}
.g2{width:52vw;height:52vw;left:-18vw;bottom:-26vw;background:radial-gradient(circle,rgba(30,91,255,.34),transparent 66%)}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(5,13,28,.72);
  backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;
  transition:background .5s var(--e),border-color .5s var(--e)}
.hdr.stuck{background:rgba(5,13,28,.96);border-bottom-color:var(--line-d2)}
.hdr-in{display:flex;align-items:center;gap:14px;height:64px}
@media(min-width:700px){.hdr-in{height:76px}}
.logo{display:flex;align-items:center;gap:10px;min-width:0;min-height:42px}
.logo .ring{width:26px;height:26px;flex:0 0 auto}
/* The wordmark is drawn, not set: assets/brand/kuvos-wordmark.svg is Poppins Light
   converted to outlines, referenced once from the sprite as #wordmark. Sizing is by
   height so the lockup keeps its vertical rhythm as the mark scales. */
.logo-txt .wm{display:block;height:17px;width:auto;fill:var(--cream)}
.logo-txt small{display:none;font-family:var(--f-mark);font-size:.47rem;letter-spacing:.17em;
  color:var(--on-dark-2);font-weight:500;margin-top:5px;white-space:nowrap}
@media(min-width:560px){.logo .ring{width:31px;height:31px}.logo-txt .wm{height:19px}.logo-txt small{display:block}}
.nav{display:none;gap:26px;margin-inline:auto;font-size:var(--t-sm);font-weight:700;color:var(--on-dark-hi)}
.nav a{position:relative;padding-block:6px;transition:color .3s}
.nav a:hover{color:var(--cream)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:2px;
  background:var(--aqua);transition:right .5s var(--e)}
.nav a:hover::after,.nav a.on::after{right:0}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hdr-cta{display:none}
@media(min-width:680px){.hdr-cta{display:inline-flex}}
.burger{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-d);color:var(--cream);flex:0 0 auto;transition:background .3s}
.burger:hover{background:rgba(255,255,255,.08)}
@media(min-width:1060px){.nav{display:flex}.burger{display:none}}
.scrollbar{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--aqua),var(--signal))}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;
  padding-inline:26px;border-radius:100px;font-weight:800;font-size:.92rem;letter-spacing:-.01em;
  white-space:nowrap;max-width:100%;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e),background .4s var(--e),
             color .4s var(--e),border-color .4s var(--e)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn-p{background:var(--signal);color:var(--cream);box-shadow:0 16px 34px -16px rgba(30,91,255,.9)}
.btn-p:hover{background:var(--signal-d);box-shadow:0 24px 46px -16px rgba(30,91,255,.95)}
.btn-o{border:1px solid var(--line-d);color:var(--cream)}
.btn-o:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4)}
.btn-g{border:1px solid var(--line);background:var(--white);color:var(--ink);box-shadow:var(--sh-s)}
.btn-g:hover{border-color:var(--signal)}
.btn-w{background:var(--white);color:var(--navy)}
.btn-sm{height:42px;padding-inline:19px;font-size:.82rem}
.btn-full{width:100%}

/* ── hero ── */
.hero{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark);
  padding-block:clamp(40px,7vw,92px) clamp(58px,9vw,120px)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.32}
.gh1{width:72vw;height:72vw;right:-24vw;top:-30vw;background:radial-gradient(circle,rgba(25,211,232,.34),transparent 64%);
  animation:dr1 30s ease-in-out infinite}
.gh2{width:64vw;height:64vw;left:-22vw;top:18vw;background:radial-gradient(circle,rgba(30,91,255,.40),transparent 64%);
  animation:dr2 38s ease-in-out infinite}
@keyframes dr1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vw,4vw,0) scale(1.14)}}
@keyframes dr2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(5vw,-4vw,0) scale(.94)}}
/* fine grid — the "data-led" texture */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 80%)}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(40px,6vw,60px);align-items:center}
@media(min-width:1060px){.hero-grid{grid-template-columns:1.04fr .96fr}}
.hero h1{font-size:var(--t-hero);letter-spacing:-.048em;margin-top:18px;color:var(--cream)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:block;transform:translateY(112%);animation:up 1.15s var(--e-out) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.2s}
@keyframes up{to{transform:none}}
.hero-sub{margin-top:22px;max-width:52ch;color:var(--on-dark);opacity:0;animation:fi 1.1s .55s var(--e) forwards}
@keyframes fi{to{opacity:1}}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;opacity:0;animation:fi 1.1s .7s var(--e) forwards}
.trustline{margin-top:26px;font-size:var(--t-xs);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-dark-2);opacity:0;animation:fi 1.1s .85s var(--e) forwards}
.trustline span{color:var(--aqua)}

/* ── three-surface stage ── */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;
  opacity:0;animation:fi 1.2s .4s var(--e) forwards}
.tv{width:100%;max-width:480px;background:var(--white);border-radius:var(--r-l);overflow:hidden;order:2;
  box-shadow:var(--sh-l);border:1px solid rgba(255,255,255,.10)}
.tv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line-2);font-size:var(--t-xs);color:var(--muted);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 10px;
  font-size:.66rem;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  background:var(--aqua-soft);color:var(--teal-d)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:blip 2.4s var(--e) infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.65)}}
.tv-body{padding:clamp(18px,3.4vw,28px)}
.tv-title{margin:0;font-weight:800;letter-spacing:-.038em;line-height:1.05;
  font-size:clamp(1.18rem,3vw,1.52rem);color:var(--ink)}
.tv-body p{color:var(--muted);font-size:var(--t-sm);margin-top:8px}
.tvprog{display:flex;gap:6px;margin-top:18px}
.tvprog i{height:6px;flex:1;border-radius:4px;background:var(--track);overflow:hidden;position:relative}
.tvprog i.on::after{content:"";position:absolute;inset:0;background:var(--aqua);
  transform:scaleX(0);transform-origin:left;animation:fill 1.1s var(--e-out) forwards}
.tvprog i.on:nth-child(2)::after{animation-delay:.22s}
@keyframes fill{to{transform:scaleX(1)}}
.tv-cta{margin-top:20px}
.remote{margin-top:16px;font-size:var(--t-xs);color:var(--muted);display:flex;align-items:center;gap:8px}
.phone{order:1;width:min(226px,60%);background:var(--navy-deep);border-radius:28px;padding:7px;
  box-shadow:var(--sh-l);margin-bottom:-24px;margin-right:-36%;z-index:2;
  animation:float 11s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.phone-in{background:var(--white);border-radius:22px;overflow:hidden}
.phone-top{display:flex;justify-content:space-between;padding:9px 13px 3px;font-size:.56rem;
  font-weight:800;color:var(--ink)}
.phone-pad{padding:5px 13px 14px}
.ph-title{margin:0;font-weight:800;line-height:1.1;font-size:.9rem;letter-spacing:-.03em;color:var(--ink)}
.prog{display:flex;align-items:center;gap:9px;margin:11px 0}
.prog .track{stroke:var(--track)}
.prog .arc{stroke:var(--aqua)}
.prog b{font-size:.7rem;display:block;line-height:1.2;color:var(--ink)}
.prog small{font-size:.56rem;color:var(--muted);line-height:1.25;display:block}
.mini{border:1px solid var(--line);border-radius:var(--r-s);padding:10px}
.mini span{font-size:.52rem;font-weight:800;color:var(--teal-d);letter-spacing:.07em}
.mini b{display:block;font-size:.72rem;margin-top:3px;letter-spacing:-.02em;color:var(--ink)}
.mini em{font-family:var(--f);font-style:normal;font-size:.56rem;color:var(--muted);display:block;margin-top:2px}
.mini-btn{margin-top:9px;background:var(--signal);color:var(--cream);border-radius:100px;text-align:center;
  font-size:.6rem;font-weight:800;padding:8px}
.mini-btn.ghost{background:var(--white);color:var(--ink);border:1px solid var(--line);margin-top:6px}
.next{margin-top:9px;font-size:.56rem;color:var(--muted)}
.next b{color:var(--ink)}
.watch{order:3;width:130px;margin-top:-12px;margin-left:-52%;z-index:3;
  animation:float 12s ease-in-out 1.6s infinite}
.watch-band{background:var(--navy-3);border-radius:26px;padding:14px 7px;box-shadow:var(--sh-m)}
.watch-face{background:var(--navy-deep);border:1px solid var(--line-d);border-radius:18px;padding:11px 9px;text-align:center}
.watch-face span{font-size:.49rem;font-weight:800;letter-spacing:.08em;color:var(--aqua)}
.watch-face b{display:block;font-size:.61rem;color:var(--cream);margin-top:5px;line-height:1.25}
.watch-face .tap{margin-top:8px;background:var(--lime);color:var(--on-lime);border-radius:100px;
  font-size:.51rem;font-weight:800;padding:5px}
/* Electric Aqua network cue between surfaces */
.cue{position:absolute;inset:0;pointer-events:none;z-index:1;display:none}
.cue path{fill:none;stroke:var(--aqua);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:5 9;opacity:.7;animation:travel 2.6s linear infinite}
@keyframes travel{to{stroke-dashoffset:-56}}
.tag{align-self:flex-start;order:0;z-index:4;background:rgba(255,255,255,.07);border:1px solid var(--line-d);
  border-radius:14px;padding:9px 13px;font-size:.7rem;font-weight:800;color:var(--cream);margin-bottom:12px;
  backdrop-filter:blur(8px)}
.tag small{display:block;color:var(--on-dark-2);font-weight:500;font-size:.63rem;margin-top:2px}
/* Devices layer only once the stage column is wide enough to hold them without
   covering TV copy; below this they stack (bible §12.4). */
@media(min-width:1180px){
  .stage{display:block;min-height:560px;padding-top:26px}
  .tv{max-width:420px}
  .tv-body{padding-right:120px}
  .phone{position:absolute;right:-28px;bottom:-28px;width:190px;margin:0;animation-delay:.9s}
  .watch{position:absolute;left:4px;bottom:-4px;width:116px;margin:0}
  .tag{position:absolute;left:-6px;top:-10px;margin:0}
  .cue{display:block}
}

/* ── marquee ── */
.mq{border-block:1px solid var(--line-d2);background:var(--navy-deep);overflow:hidden;padding-block:18px}
.mq-row{display:flex;width:max-content;animation:slide 34s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-i{display:inline-flex;align-items:center;gap:11px;padding-inline:28px;font-weight:800;
  font-size:clamp(.9rem,2.2vw,1.1rem);letter-spacing:-.025em;white-space:nowrap;color:var(--cream)}
.mq-i svg{color:var(--aqua);flex:0 0 auto}

/* ── evidence module (the modular grey-white block) ── */
.mod{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,3.4vw,34px)}
.mod.dk{background:rgba(255,255,255,.045);border-color:var(--line-d)}
.split{display:grid;gap:clamp(34px,6vw,64px);align-items:center;margin-top:clamp(28px,4vw,48px)}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr}.split.flip>*:first-child{order:2}}

/* ── buyer tabs ── */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:30px;padding-bottom:4px}
.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid var(--line);background:var(--white);border-radius:100px;padding:11px 18px;
  font-size:var(--t-sm);font-weight:700;color:var(--muted);white-space:nowrap;
  transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.tab.on{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tab.sec{border-style:dashed}
#buyerPanel:focus{outline:none}
.buyer{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,4vw,40px);box-shadow:var(--sh-m);display:grid;gap:24px}
@media(min-width:880px){.buyer{grid-template-columns:1fr 1.1fr;align-items:center;gap:44px}}
.buyer .kind{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.buyer .kind.s{color:var(--muted)}
.buyer h3{font-size:clamp(1.22rem,3.2vw,1.7rem);margin-top:12px}
.buyer p{color:var(--muted);margin-top:14px}
.bvis{background:var(--cloud);border-radius:var(--r-m);padding:20px;display:grid;gap:10px}
.brow{display:flex;align-items:flex-start;gap:12px;background:var(--white);border-radius:var(--r-s);padding:13px 14px;
  font-size:var(--t-sm);font-weight:700;box-shadow:var(--sh-s)}
.brow i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--aqua-soft);color:var(--teal-d)}
.brow span{color:var(--muted);font-weight:500;font-size:var(--t-xs);display:block;margin-top:2px}
.swap{animation:swapin .6s var(--e-out)}
@keyframes swapin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── gap stats ── */
.gap-grid{display:grid;gap:14px;margin-top:clamp(30px,4vw,48px)}
@media(min-width:820px){.gap-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.gapc{border:1px solid var(--line-d);border-radius:var(--r-l);padding:24px;background:rgba(255,255,255,.04)}
.gapc b{display:block;font-size:1.02rem;color:var(--cream);letter-spacing:-.025em}
.gapc p{margin-top:10px;font-size:var(--t-sm);color:var(--on-dark)}
.gapc span{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--aqua)}
.refline{margin-top:22px;font-size:var(--t-xs);color:var(--on-dark-2);max-width:80ch}

/* ── surfaces ── */
.surf{display:grid;gap:16px;margin-top:clamp(32px,5vw,52px)}
@media(min-width:920px){.surf{grid-template-columns:1.12fr 1.12fr .86fr;gap:18px}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .6s var(--e-out),box-shadow .6s var(--e),border-color .5s var(--e)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:rgba(30,91,255,.35)}
.card-art{aspect-ratio:16/10;background:linear-gradient(155deg,var(--cloud),var(--white));display:grid;
  place-items:center;border-bottom:1px solid var(--line-2)}
.card:nth-child(3) .card-art{background:linear-gradient(155deg,var(--cloud-2),var(--white))}
.card-art svg{color:var(--signal)}
.card:nth-child(3) .card-art svg{color:var(--muted)}
.card-body{padding:22px}
.card-body .role{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--signal)}
.card:nth-child(3) .card-body .role{color:var(--muted)}
.card-body h3{font-size:var(--t-h3);margin-top:10px}
.card-body p{color:var(--muted);font-size:var(--t-sm);margin-top:10px}
/* ── the three-surface network diagram ── */
.net{width:100%;max-width:840px;margin:clamp(28px,4.5vw,48px) auto clamp(20px,3vw,32px);display:block;overflow:visible}
.net-core{fill:var(--navy);stroke:var(--aqua);stroke-width:1.5}
.net-core-t{fill:var(--cream);font-weight:800;font-size:21px;letter-spacing:-.03em;text-anchor:middle}
.net-link{stroke:var(--line);stroke-width:1.6;fill:none}
.net-link.primary{stroke:rgba(30,91,255,.55)}
.net-link.companion{stroke:var(--line);stroke-dasharray:5 7}
.net-head{fill:rgba(30,91,255,.55)}
.net-disc{fill:var(--cream);stroke:var(--line);stroke-width:1.5}
.net-icon{fill:none;stroke:var(--signal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.net-label{fill:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.025em;text-anchor:middle}
.net-sub{fill:var(--muted);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-anchor:middle}
.net-node.companion .net-disc{stroke-dasharray:5 6}
.net-node.companion .net-icon{stroke:var(--muted)}


.a11y{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,4vw,32px);background:var(--white)}
.a11y b{font-size:clamp(1.02rem,2.6vw,1.28rem);letter-spacing:-.03em;display:block;margin-bottom:10px}
.a11y p{color:var(--muted);font-size:var(--t-sm)}
.a11y-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.a11y-row span{border:1px solid var(--line);border-radius:100px;padding:7px 14px;font-size:var(--t-xs);font-weight:700}

/* ── controls / flow ── */
.flow{margin-top:clamp(32px,5vw,52px);display:grid;gap:14px}
@media(min-width:960px){.flow{grid-template-columns:1fr 1fr 1.42fr 1fr 1fr;gap:10px}}
.node{position:relative;border:1px solid var(--line-d);border-radius:var(--r-m);padding:18px 16px;
  background:linear-gradient(rgba(5,13,28,.72),rgba(5,13,28,.72)),rgba(255,255,255,.04);
  opacity:.32;
  transition:opacity .9s var(--e),transform .9s var(--e-out),border-color .9s var(--e),background .9s var(--e)}
.node.lit{opacity:1;transform:translateY(-4px);border-color:rgba(25,211,232,.55);
  background:linear-gradient(rgba(5,13,28,.70),rgba(5,13,28,.70)),rgba(255,255,255,.075)}
/* Human authorization must visually dominate the AI steps (bible §3). */
.node.auth{background:rgba(25,211,232,.10);border-color:rgba(25,211,232,.45);padding:22px 20px}
.node.auth span{display:inline-flex;align-items:center;gap:7px;color:var(--aqua)}
.node.auth b{font-size:1.2rem;margin-top:10px}
.node.auth p{font-size:var(--t-sm)}
.node.auth.lit{transform:translateY(-10px);border-color:var(--aqua);
  background:rgba(25,211,232,.15);box-shadow:0 24px 60px -28px rgba(25,211,232,.75)}
.node span{font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--on-dark-2);text-transform:uppercase}
.node.guard span{color:var(--aqua)}
.node b{display:block;margin-top:8px;font-size:.98rem;letter-spacing:-.025em;color:var(--cream)}
.node p{margin-top:6px;font-size:var(--t-xs);color:var(--on-dark)}
.node::after{content:"";position:absolute;left:50%;bottom:-14px;width:2px;height:14px;
  background:var(--line-d);transform:translateX(-50%)}
.node:last-child::after{display:none}
@media(min-width:960px){.node::after{left:auto;right:-10px;bottom:auto;top:50%;width:10px;height:2px;transform:translateY(-50%)}}

#controls .split{margin-top:clamp(46px,7vw,86px)}
.split h2{margin-top:16px;font-size:clamp(1.5rem,4vw,2.4rem);max-width:20ch}
.split .lede{margin-top:20px}

/* ── the care-plan flywheel ── */
.wheel{width:100%;max-width:820px;margin:clamp(30px,5vw,54px) auto 0;display:block;overflow:visible}
.wheel-orbit{fill:none;stroke:var(--line-d);stroke-width:1}
.wheel-arc{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-linecap:round}
.wheel-arc.lit{stroke:rgba(25,211,232,.75)}
.wheel-arrowhead{fill:rgba(255,255,255,.34)}
.wheel-arc.lit+.wheel-arc{}
.wheel-core{fill:rgba(5,13,28,.92);stroke:var(--aqua);stroke-width:1.5}
.wheel-core-t{fill:var(--cream);font-weight:800;font-size:22px;letter-spacing:-.03em;text-anchor:middle}
.wheel-core-s{fill:var(--aqua);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;text-anchor:middle}
.wheel-disc{fill:rgba(5,13,28,.94);stroke:var(--line-d);stroke-width:1.5}
.wheel-num{fill:var(--on-dark);font-weight:800;font-size:15px;text-anchor:middle}
.wheel-label{fill:var(--cream);font-weight:700;font-size:16px;letter-spacing:-.02em;text-anchor:middle}
.wheel-sub{fill:var(--on-dark);font-size:13px;font-weight:500}
.wheel-node.guard .wheel-disc{stroke:rgba(25,211,232,.45)}
.wheel-node.guard .wheel-num{fill:var(--aqua)}
/* Human authorization has to dominate the rest of the loop (bible §3) */
.wheel-node.auth .wheel-disc{fill:rgba(25,211,232,.14);stroke:var(--aqua);stroke-width:2.5}
.wheel-node.auth .wheel-label{font-size:15px;font-weight:800}
.wheel-node.auth .wheel-num{fill:var(--aqua)}
.wheel-node.auth .wheel-sub{fill:var(--aqua)}


.guardrails{list-style:none;margin:clamp(26px,4vw,44px) auto 0;padding:0;max-width:760px;
  display:grid;gap:12px}
.guardrails li{padding:16px 20px;border:1px solid var(--line-d);border-radius:var(--r-m);
  background:rgba(5,13,28,.55);font-size:var(--t-sm);color:var(--on-dark)}
.guardrails b{color:var(--cream);display:block;margin-bottom:4px;letter-spacing:-.02em}
@media(min-width:860px){.guardrails{grid-template-columns:repeat(3,1fr)}}

/* Narrow screens get a vertical variant of each diagram. SVG text scales with the
   viewBox, so the wide circular layout rendered its labels at 6.2px on a 390px
   phone — measured. A 420-unit viewBox scales at ~0.84 instead of ~0.39, which
   more than doubles the rendered size at the same nominal value. */
.wheel-tall,.net-tall{display:none}
@media(max-width:900px){
  .wheel,.net{display:none}
  .wheel-tall,.net-tall{display:block;width:100%;max-width:430px;margin-inline:auto}
  .wheel-tall{margin-block:clamp(26px,5vw,40px) 0}
  .net-tall{margin-block:clamp(24px,4vw,36px) clamp(18px,3vw,28px)}
}
.wheel-label.tall{font-size:15px;text-anchor:middle}

.wheel-num.tall{font-size:13px}
.wheel-core-t.tall{font-size:16px}
.wheel-core-s.tall{font-size:10px}

.net-label.tall{font-size:17px;text-anchor:middle}

.net-core-t.tall{font-size:16px}

/* ── reviewer screen ── */
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:15px 18px;background:var(--cloud);border-bottom:1px solid var(--line-2)}
.rev-top b{font-size:var(--t-sm);color:var(--ink)}
.rev-top span{font-size:var(--t-xs);color:var(--muted)}
.field{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(10px)}
.field.in{opacity:1;transform:none;transition:opacity .6s var(--e),transform .6s var(--e-out)}
.field .k{flex:1;min-width:0}
.field .k b{display:block;font-size:.94rem;letter-spacing:-.02em;color:var(--ink)}
.field .k small{color:var(--muted);font-size:var(--t-xs)}
.srcchip{font-size:.62rem;font-weight:800;background:var(--cloud);color:var(--muted);
  border-radius:100px;padding:5px 10px;white-space:nowrap;flex:0 0 auto}
.field.flag{background:var(--coral-bg)}
.field.flag .srcchip{background:var(--coral-bg-2);color:var(--coral-d)}
.flagnote{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;
  color:var(--coral-d);margin-top:7px}
.lockbar{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--navy);color:var(--cream)}
.lockbar svg{color:var(--aqua);flex:0 0 auto}
.lockbar b{font-size:.92rem;display:block}
.lockbar small{color:var(--on-dark-2);font-size:var(--t-xs)}
.lockbar .who{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--aqua);white-space:nowrap}
.authed{padding:16px 18px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:var(--t-xs);color:var(--muted)}
.authed b{color:var(--ink)}
.warn{margin-top:20px;font-size:var(--t-sm);color:var(--on-dark);display:flex;gap:10px}
.warn svg{color:var(--aqua);flex:0 0 auto;margin-top:3px}

/* ── receipt ── */
.receipt{border:1px solid var(--line-d);border-radius:var(--r-l);background:rgba(255,255,255,.045);
  overflow:hidden}
.receipt-top{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-d2)}
.receipt-top svg{color:var(--aqua);flex:0 0 auto}
.receipt-top b{color:var(--cream);font-size:.94rem}
.receipt-top .sig{margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.08em;
  color:var(--lime);text-transform:uppercase}
.rrow{display:flex;justify-content:space-between;gap:14px;padding:11px 18px;font-size:var(--t-xs);
  border-bottom:1px solid var(--line-d2)}
.rrow span{color:var(--on-dark-2)}
.rrow b{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.rnote{padding:15px 18px;font-size:var(--t-xs);color:var(--on-dark);line-height:1.65}
.rnote b{color:var(--cream)}

/* ── tables ── */
.tbl-wrap{margin-top:clamp(28px,4vw,44px);overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--white)}
.tbl-wrap.dk{border-color:var(--line-d);background:rgba(255,255,255,.04)}
table{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
th,td{padding:16px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:var(--t-sm)}
.dk th,.dk td{border-color:var(--line-d2);color:var(--on-dark)}
thead th{background:var(--cloud);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.dk thead th{background:rgba(255,255,255,.05);color:var(--aqua)}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dk tbody td:first-child{color:var(--cream)}
.chipx{display:inline-flex;align-items:center;gap:6px;background:var(--cloud);border-radius:100px;
  padding:5px 11px;font-size:var(--t-xs);font-weight:700;white-space:nowrap;color:var(--ink)}
.dk .chipx{background:rgba(25,211,232,.14);color:var(--aqua)}
td .m{color:var(--muted)}
.dk td .m{color:var(--on-dark)}

.oad{margin-top:24px;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:800;letter-spacing:-.04em}

/* ── care circle ── */
.circle-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-m);padding:20px}
.who2{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--cream);
  background:linear-gradient(140deg,var(--aqua),var(--signal));flex:0 0 auto}
.who2 b{display:block;font-size:.94rem;letter-spacing:-.02em}
.who2 small{color:var(--muted);font-size:var(--t-xs)}
.who2 .st{margin-left:auto;font-size:var(--t-xs);color:var(--lime-d);font-weight:800;display:inline-flex;align-items:center;gap:6px}
.who2 .st i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.msg{margin-top:13px;background:var(--cloud);border-radius:16px;border-top-left-radius:5px;padding:13px 15px;
  opacity:0;transform:translateY(14px)}
.msg.in{opacity:1;transform:none;transition:opacity .75s var(--e),transform .75s var(--e-out)}
.msg.warnmsg{background:var(--coral-bg)}
.msg small{font-size:.58rem;font-weight:800;letter-spacing:.08em;color:var(--teal-d);text-transform:uppercase}
.msg.warnmsg small{color:var(--coral-d)}
.msg b{display:block;margin-top:5px;font-size:.93rem;letter-spacing:-.02em}
.msg p{color:var(--muted);font-size:var(--t-sm);margin-top:3px}
.msg time{display:block;margin-top:7px;font-size:.6rem;color:var(--muted-2)}
.privacy{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:var(--t-sm);
  font-weight:800;letter-spacing:-.02em;display:flex;gap:9px;align-items:center}
.privacy svg{color:var(--signal);flex:0 0 auto}

/* ── rhythm ── */
.rhythm{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,3.6vw,30px);box-shadow:var(--sh-m)}
.rh-top{display:flex;align-items:center;gap:14px}
.rh-top b{font-size:2.1rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.rh-top span{color:var(--muted);font-size:var(--t-sm)}
.rh-pill{margin-left:auto;font-size:var(--t-xs);font-weight:800;background:rgba(143,203,43,.16);
  color:var(--lime-d);border-radius:100px;padding:6px 12px;white-space:nowrap}
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:24px}
.day{text-align:center}
.day .bar{height:74px;border-radius:var(--r-s);background:var(--cloud);position:relative;overflow:hidden}
.day .fill{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:11px;
  background:linear-gradient(180deg,var(--aqua),var(--signal));transition:height 1.3s var(--e-out)}
.day.today .bar{box-shadow:0 0 0 3px rgba(25,211,232,.28)}
.day small{display:block;margin-top:8px;font-size:.62rem;font-weight:800;color:var(--muted);letter-spacing:.05em}
.day.today small{color:var(--ink)}
.swap-note{margin-top:20px;padding:16px 18px;border-radius:var(--r-m);background:var(--cloud)}
.swap-note s{color:var(--muted-2);font-size:var(--t-xs);font-weight:700}
.swap-note b{display:block;margin-top:6px;font-size:1rem;letter-spacing:-.025em}

/* ── principles ── */
.principles{display:grid;gap:12px;margin-top:clamp(30px,4vw,48px)}
@media(min-width:720px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.principles{grid-template-columns:repeat(5,1fr)}}
.pr{background:rgba(255,255,255,.045);border:1px solid var(--line-d);border-radius:var(--r-m);padding:20px}
.pr b{display:block;font-size:1rem;letter-spacing:-.025em;color:var(--cream)}
.pr p{margin-top:8px;font-size:var(--t-xs);color:var(--on-dark)}
.pr svg{color:var(--aqua);margin-bottom:14px}

#evidence .head h2{max-width:22ch}
.sub-h{margin-top:clamp(40px,6vw,70px);font-size:clamp(1.25rem,3.2vw,1.75rem)}
.sub-h + .metrics{margin-top:18px}
.sub-h + .lede{margin-top:12px}

/* ── metrics + stats ── */
.metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.metrics span{border:1px solid var(--line-d);border-radius:100px;padding:8px 15px;
  font-size:var(--t-xs);font-weight:700;color:var(--cream)}
.stats{display:grid;gap:16px;margin-top:clamp(28px,4vw,44px)}
@media(min-width:780px){.stats{grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,3.4vw,32px)}
.stat span{font-size:var(--t-sm);font-weight:800;color:var(--signal)}
.stat b{display:block;font-size:clamp(2.5rem,8vw,3.9rem);font-weight:800;letter-spacing:-.05em;
  line-height:1;margin-top:10px;font-variant-numeric:tabular-nums}
.stat small{display:block;color:var(--muted);font-size:var(--t-sm);margin-top:12px}
.delta{text-align:center;font-weight:800}
.delta b{color:var(--coral);font-size:1.35rem;letter-spacing:-.03em}
.delta small{display:block;color:var(--muted);font-size:var(--t-xs);font-weight:600}
.statrow{display:grid;gap:12px;margin-top:16px}
@media(min-width:760px){.statrow{grid-template-columns:repeat(2,1fr)}}
.sr{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px;font-size:var(--t-sm)}
.sr b{color:var(--ink)}
.sr span{color:var(--muted)}
.src-note{margin-top:20px;font-size:var(--t-xs);color:var(--muted);max-width:84ch;line-height:1.7}

/* ── proof ── */
.proof{display:grid;gap:10px;margin-top:clamp(28px,4vw,44px)}
.proof-row{display:grid;gap:6px;border:1px solid var(--line-d);border-radius:var(--r-m);padding:18px 20px;
  background:rgba(255,255,255,.04)}
@media(min-width:800px){.proof-row{grid-template-columns:1fr 1fr;gap:24px;align-items:center}}
.proof-row b{font-size:.98rem;letter-spacing:-.02em;color:var(--cream)}
.proof-row span{color:var(--on-dark);font-size:var(--t-sm);display:flex;gap:9px;align-items:flex-start}
.proof-row span svg{color:var(--aqua);flex:0 0 auto;margin-top:3px}

#safety .head h2{max-width:24ch}
#safety .refline{margin-top:28px}

/* ── founder ── */
.founder{background:var(--cloud);border-radius:var(--r-xl);padding:clamp(26px,5vw,56px);display:grid;gap:26px}
@media(min-width:920px){.founder{grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}}
.founder h2{margin-top:16px;font-size:clamp(1.55rem,4.4vw,2.5rem)}
.founder .lede{margin-top:20px}
.fbadges{display:grid;gap:10px}
.fb{background:var(--white);border-radius:var(--r-m);padding:16px 18px;display:flex;gap:12px;align-items:center;
  box-shadow:var(--sh-s);font-size:var(--t-sm);font-weight:700}
.fb i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--aqua-soft);color:var(--teal-d)}
.ftrust{margin-top:24px;font-size:var(--t-xs);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--signal)}

/* ── faq ── */
.faq{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q-btn{width:100%;display:flex;align-items:center;gap:18px;justify-content:space-between;padding:22px 0;
  text-align:left;font-size:clamp(1rem,2.2vw,1.14rem);font-weight:800;letter-spacing:-.028em}
.q-btn svg{flex:0 0 auto;color:var(--signal);transition:transform .55s var(--e-out)}
.q.open .q-btn svg{transform:rotate(180deg)}
.q-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)}
.q.open .q-body{grid-template-rows:1fr}
.q-body>div{overflow:hidden;visibility:hidden;transition:visibility .55s}
.q.open .q-body>div{visibility:visible}
.q-body p{color:var(--muted);font-size:var(--t-sm);max-width:72ch;padding-bottom:24px}

/* ── final ── */
#pilot{padding-top:0}
.final{position:relative;overflow:hidden;text-align:center;background:var(--navy);
  border-radius:var(--r-xl);padding:clamp(44px,8vw,96px) clamp(20px,5vw,56px)}
.final::before{content:"";position:absolute;width:84vw;height:84vw;left:50%;top:-46%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(25,211,232,.30),transparent 62%);
  animation:pulse 12s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(1.16);opacity:.5}}
.final>*{position:relative}
.final .eyebrow{color:var(--aqua-lt)}
.final h2{color:var(--cream);font-size:var(--t-h2);max-width:none}
.final p{color:var(--on-dark);margin:18px auto 0;max-width:54ch}
.final .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.final .beta-note a{text-decoration:underline;text-underline-offset:.18em}
.final .closing{margin-top:26px;font-size:var(--t-xs);color:var(--on-dark-2)}

/* ── footer ── */
.ftr{padding-block:clamp(46px,7vw,80px) 30px;background:var(--navy-deep);color:var(--on-dark)}
.ftr-grid{display:grid;gap:30px}
@media(min-width:860px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr}}
.ftr .logo .ring{width:34px;height:34px}
.ftr .logo-txt .wm{height:21px}
.ftr h3{font-size:var(--t-xs);color:var(--on-dark-2);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:var(--t-sm)}
.ftr a{color:var(--on-dark-hi);transition:color .3s}
.ftr a:hover{color:var(--aqua)}
.ftr-tag{color:var(--on-dark-2);font-size:var(--t-sm);margin-top:14px;max-width:36ch}
.disclaimer{margin-top:38px;padding-top:24px;border-top:1px solid var(--line-d2);color:var(--on-dark-2);
  font-size:var(--t-xs);max-width:86ch;line-height:1.75}
.ftr-base{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:var(--t-xs);color:var(--on-dark-2)}

/* ── drawer ── */
.scrim{position:fixed;inset:0;background:rgba(2,8,20,.62);backdrop-filter:blur(5px);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .45s var(--e),visibility 0s linear .45s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .45s var(--e),visibility 0s}
.drawer{position:fixed;inset:0 0 auto 0;background:var(--navy);z-index:80;
  border-radius:0 0 var(--r-l) var(--r-l);padding:0 var(--gut) 26px;
  visibility:hidden;transform:translateY(-102%);
  transition:transform .62s var(--e-out),visibility 0s linear .62s;
  max-height:100dvh;overflow-y:auto;border-bottom:1px solid var(--line-d)}
.drawer.on{visibility:visible;transform:none;
  transition:transform .62s var(--e-out),visibility 0s}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:64px}
.drawer nav{display:grid;margin-top:6px}
.drawer nav a{padding:16px 0;border-bottom:1px solid var(--line-d2);font-size:1.34rem;font-weight:800;
  letter-spacing:-.035em;display:flex;justify-content:space-between;align-items:center;color:var(--cream)}
.drawer nav a svg{color:var(--aqua);flex:0 0 auto}
.drawer .btn{margin-top:22px}

/* ══════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — full-bleed photography behind the navy fields.
   Warm-graded stills sit under a navy scrim so the brand field still reads
   navy and type keeps its AA contrast. Only the dark sections carry one, so
   the navy/light alternation in bible §5 is untouched.
   ══════════════════════════════════════════════════════════════════ */
.sect-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sect-bg img{width:100%;height:100%;object-fit:cover;opacity:.66;
  transform:scale(1.06);transform-origin:center;
  animation:bgdrift 34s ease-in-out infinite}
/* the scrim is what keeps white type at AA over a photograph */
/* Weighted left, where the copy sits, and light on the right so the photograph
   is actually visible. Contrast is bought by the gradient under the type, not by
   flattening the whole image. */
.sect-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(5,13,28,.94) 0%,rgba(5,13,28,.86) 32%,
                             rgba(5,13,28,.55) 62%,rgba(5,13,28,.38) 100%),
             linear-gradient(180deg,rgba(5,13,28,.72),transparent 30%,rgba(5,13,28,.78))}
/* Retro golden bloom, laid over the scrim on screen blend so it adds light rather
   than tinting. Without this the navy scrim cancels the warm grade underneath. */
.sect-bg::before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(64% 78% at 78% 22%,rgba(var(--gold),.34),transparent 68%),
             radial-gradient(90% 60% at 96% 88%,rgba(var(--gold),.16),transparent 70%)}
@keyframes bgdrift{0%,100%{transform:scale(1.06) translate3d(0,0,0)}
  50%{transform:scale(1.13) translate3d(-1.2%,-1.4%,0)}}

/* the hero photograph sits beneath the existing glow layer */
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.70;
  transform:scale(1.06);animation:bgdrift 38s ease-in-out infinite}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(96deg,rgba(5,13,28,.95) 0%,rgba(5,13,28,.88) 30%,
                             rgba(5,13,28,.52) 66%,rgba(5,13,28,.32) 100%),
             linear-gradient(180deg,rgba(5,13,28,.62),transparent 34%,rgba(5,13,28,.82))}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(58% 72% at 82% 26%,rgba(var(--gold),.38),transparent 66%),
             radial-gradient(80% 56% at 98% 90%,rgba(var(--gold),.18),transparent 70%)}
.hero .glow{z-index:3}

/* the closing card carries one too */
.final .sect-bg img{opacity:.54}
/* the closing card is centre-aligned, so its scrim is radial rather than directional */
.final .sect-bg::after{
  background:radial-gradient(90% 76% at 50% 50%,rgba(5,13,28,.90),rgba(5,13,28,.66) 70%,rgba(5,13,28,.52)),
             linear-gradient(180deg,rgba(5,13,28,.60),transparent 40%,rgba(5,13,28,.72))}
.final .sect-bg::before{
  background:radial-gradient(70% 80% at 84% 18%,rgba(var(--gold),.30),transparent 66%)}

/* keep every section's own content above its photograph */
.dark>.shell,.hero-grid,.final>*{position:relative;z-index:2}

/* The directional scrim assumes a wide viewport, where copy sits on the dark left
   and the photograph breathes on the right. Below 900px the copy spans the full
   width and crosses the bright side, so the scrim goes even and heavier.
   Measured: without this, body copy drops to 2.98-4.28:1 at 390px. */
@media(max-width:900px){
  .sect-bg img{opacity:.46}
  .sect-bg::after{background:linear-gradient(180deg,rgba(5,13,28,.90),rgba(5,13,28,.84) 40%,rgba(5,13,28,.92))}
  .sect-bg::before{background:radial-gradient(70% 50% at 78% 12%,rgba(var(--gold),.26),transparent 70%)}
  .hero-bg img{opacity:.44}
  .hero-bg::after{background:linear-gradient(180deg,rgba(5,13,28,.88),rgba(5,13,28,.86) 45%,rgba(5,13,28,.94))}
  .hero-bg::before{background:radial-gradient(66% 44% at 82% 10%,rgba(var(--gold),.28),transparent 70%)}
  .final .sect-bg img{opacity:.40}
}

@media(prefers-reduced-motion:reduce){
  .sect-bg img,.hero-bg img{animation:none;transform:scale(1.04)}
}

/* ── 404 (reuses every token and component above) ── */
.nf{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark);
  display:flex;align-items:center;min-height:calc(100dvh - 64px);
  padding-block:clamp(56px,10vw,120px)}
.nf-in{position:relative;z-index:1}
.nf h1{color:var(--cream);font-size:var(--t-hero);letter-spacing:-.048em;margin-top:18px;max-width:14ch}
.nf .lede{color:var(--on-dark);margin-top:22px}
.nf-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:28px;
  border-top:1px solid var(--line-d2)}
.nf-nav a{border:1px solid var(--line-d);border-radius:100px;padding:10px 17px;
  font-size:var(--t-sm);font-weight:700;color:var(--cream);
  transition:background .4s var(--e),border-color .4s var(--e)}
.nf-nav a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4)}
@media(min-width:700px){.nf{min-height:calc(100dvh - 76px)}}

/* ── legal pages ── */
.legal-hdr{position:relative;background:var(--navy);border-bottom:1px solid var(--line-d2)}
.legal-hdr .hdr-in{justify-content:space-between}
.legal-wordmark{width:auto;height:20px;filter:brightness(0) invert(1)}
.legal-hdr .home-link{color:var(--on-dark-hi);font-size:var(--t-sm);font-weight:700;
  min-height:42px;display:inline-flex;align-items:center;gap:8px}
.legal-hdr .home-link:hover{color:var(--aqua)}
.legal-hero{background:var(--navy);color:var(--on-dark);padding-block:clamp(58px,9vw,112px)}
.legal-hero h1{color:var(--cream);font-size:var(--t-hero);margin-top:18px;max-width:12ch}
.legal-hero p{color:var(--on-dark);max-width:62ch;margin-top:20px}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--t-sm)}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-block:clamp(48px,8vw,96px)}
.legal-nav{align-self:start}
.legal-nav strong{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:12px}
.legal-nav ol{margin:0;padding-left:20px;display:grid;gap:9px;font-size:var(--t-sm)}
.legal-nav a{color:var(--signal);font-weight:700}
.legal-copy{min-width:0;max-width:76ch;overflow-wrap:anywhere}
.legal-copy section{scroll-margin-top:24px;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.legal-copy section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal-copy h2{font-size:clamp(1.35rem,3vw,1.8rem);margin-bottom:14px}
.legal-copy h3{font-size:1rem;letter-spacing:-.015em;margin:22px 0 8px}
.legal-copy p,.legal-copy li{color:var(--muted)}
.legal-copy p+p{margin-top:12px}
.legal-copy ul{margin:12px 0 0;padding-left:22px;display:grid;gap:8px}
.legal-copy a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.legal-note{background:var(--cloud);border-left:3px solid var(--signal);padding:18px 20px;
  border-radius:0 var(--r-s) var(--r-s) 0}
.legal-note strong{color:var(--ink)}
@media(min-width:900px){.legal-layout{grid-template-columns:220px minmax(0,1fr)}.legal-nav{position:sticky;top:28px}}

/* ── reveal (Whoop-smooth: long, soft, no bounce) ── */
.rv{opacity:0;transform:translateY(32px)}
.rv.in{opacity:1;transform:none;
  transition:opacity 1.05s var(--e),transform 1.05s var(--e-out)}
.rv-1.in{transition-delay:.1s} .rv-2.in{transition-delay:.2s} .rv-3.in{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv,.node,.field,.msg{opacity:1;transform:none}
}

/* ── print: a clean white document, for PDF export and deck screenshots ── */
@media print{
  html,body{background:var(--white);color:var(--ink)}
  .hdr,.scrollbar,.drawer,.scrim,.skip,.mq,.glow,.cue,.hero-bg,.sect-bg,.final::before{display:none!important}
  .dark,.hero,.final,.ftr{background:var(--white)!important;color:var(--ink)!important}
  .dark h2,.dark h3,.dark h4,.hero h1,.final h2,.node b,.gapc b,.pr b,.proof-row b,
  .receipt-top b,.rrow b,.rnote b,.metrics span,.dk tbody td:first-child,.logo-txt b{color:var(--ink)!important}
  .dark p,.dark .lede,.hero-sub,.final p,.node p,.gapc p,.pr p,.refline,.rnote,
  .proof-row span,.dk th,.dk td{color:var(--muted)!important}
  .dark .eyebrow,.final .eyebrow{color:var(--signal)!important}
  .gapc,.node,.pr,.proof-row,.receipt,.tbl-wrap.dk,.metrics span,.final{
    background:var(--white)!important;border-color:var(--line)!important}
  .dark .lockbar{background:var(--cloud)!important;color:var(--ink)!important}
  .dark .lockbar small{color:var(--muted)!important}
  .btn{border:1px solid var(--line)!important;background:none!important;color:var(--ink)!important;
    box-shadow:none!important}
  .rv,.node,.field,.msg{opacity:1!important;transform:none!important}
  .q-body{grid-template-rows:1fr!important}
  .q-body>div{visibility:visible!important}
  .tbl-wrap{overflow:visible!important}
  table{min-width:0!important}
  .sect{padding-block:24px!important}
  .legal-hdr,.legal-hero,.legal-hero h1,.legal-hero p{background:var(--white)!important;color:var(--ink)!important}
  .legal-nav{display:none}.legal-layout{display:block;padding-block:24px!important}
  .legal-copy section{break-inside:avoid}
  .flow,.rev,.receipt,.circle-card,.rhythm,.founder,.stat,.gapc,.card,.pr{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:var(--muted)}
}