/* ============================================================
   MM40 · The Protocol
   Dark system: matte black and charcoal, mostly gradients.
   Type in a soft, dreamy off-white that never glares.
   Colour lives in the accents and visuals: lime, teal, cyan,
   violet, pink, amber, coral. Each section carries its own
   accent (--acc) for labels, numbers and details.
   Same layout as before: giant condensed type, bracketed labels,
   hairline grids. Mobile-first (WhatsApp in-app browser).
   ============================================================ */
:root{
  /* surfaces */
  --bg0:#07080a; --bg1:#0c0e11; --bg2:#121418; --bg3:#191c21; --bg4:#21252b;
  /* type: never pure white */
  --ink:#e8e6df; --ink2:#b3b1aa; --ink3:#83827c; --ink4:#5d5c58;
  --head:#d6d6d3;                                 /* every headline: a very light grey */
  --hair:rgba(232,230,223,.08); --hair2:rgba(232,230,223,.15);
  /* accents */
  --lime:#c6f26b; --teal:#2ee6c5; --cyan:#4cc3ff; --violet:#9d7dff; --pink:#ff5c9d; --amber:#ffb84d; --coral:#ff6a4f;
  --jade:#3fe3a0; --red:var(--coral); --red-deep:#ff8a73; --focus:var(--cyan);
  --on:#0a0b0d;                                   /* text on a bright accent */
  --g-go:linear-gradient(100deg,#d4f77a 0%,#9cf08a 45%,#2ee6c5 100%);   /* primary: lime → teal */
  --g-hot:linear-gradient(100deg,#ff5c9d 0%,#ff8a4f 100%);              /* pink → coral */
  --g-cool:linear-gradient(100deg,#4cc3ff 0%,#9d7dff 100%);             /* cyan → violet */
  --acc:var(--lime);
  /* type */
  --font-display:'Archivo',Helvetica,Arial,sans-serif;
  --font-sans:'Instrument Sans',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4.4vw,56px);
  --pill:100px;
  --E:cubic-bezier(.22,1,.32,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;background:var(--bg0);color-scheme:dark}
body{margin:0;background:var(--bg0);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* matte grain, very faint */
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;color:var(--head)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:rgba(198,242,107,.3);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.metric{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.mute{color:var(--ink4)}
.display,.h3s,.mv h4,.plates-t{word-spacing:.06em}
/* coloured text fill, used on the big numerals */
.grad,.mv-n{-webkit-background-clip:text;background-clip:text}

/* ---------- type system ---------- */
.tiny{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);line-height:1.5}
.sec-h .tiny{color:var(--acc)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.display{font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(2.5rem,9.4vw,6.8rem);line-height:.92;letter-spacing:-.03em}
.lede{margin-top:14px;font-size:1.05rem;color:var(--ink2)}
.prose p{font-size:1.06rem;color:var(--ink2);max-width:58ch}
.prose p+p{margin-top:16px}
.prose .lead{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,3.2vw,1.65rem);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.pull{max-width:30ch;margin-top:clamp(40px,6vw,72px);font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,3.4vw,2rem);letter-spacing:-.025em;line-height:1.2}
.fn{margin-top:28px;font-size:.84rem;color:var(--ink3)}
.lnk{font-weight:600;color:var(--acc);text-underline-offset:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;border-radius:var(--pill);font:700 .95rem/1.2 var(--font-display);letter-spacing:.005em;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,box-shadow .3s,transform .3s var(--E),filter .2s}
.btn:hover{transform:translateY(-1px)}
.btn-a{background:var(--g-go);color:var(--on);box-shadow:0 14px 34px -16px rgba(150,240,140,.55)}
.btn-a:hover{filter:brightness(1.06);box-shadow:0 18px 40px -16px rgba(150,240,140,.7)}
.btn-a:disabled{background:rgba(232,230,223,.07);color:var(--ink4);box-shadow:none;cursor:not-allowed;transform:none;filter:none}
.btn-l{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair2)}
.btn-l:hover{background:rgba(232,230,223,.06);box-shadow:inset 0 0 0 1.5px var(--ink3)}
.btn-inv{background:var(--g-go);color:var(--on);box-shadow:0 14px 34px -16px rgba(150,240,140,.55)}
.btn-s{min-height:38px;padding:0 16px;font-size:.8rem}
.btn-w{width:100%}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px var(--gut);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--hair)}
.id{display:flex;align-items:center;gap:8px;text-decoration:none}
.id img{width:24px;height:24px;object-fit:contain}
.id b{font-family:var(--font-display);font-weight:800;font-stretch:85%;font-size:1rem;letter-spacing:.02em}
.top-m{display:none;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.top-m span{color:var(--lime)}
@media(min-width:760px){.top-m{display:block}}

/* ---------- sections: almost all gradient, a few plain ---------- */
.sec{position:relative;padding-block:clamp(80px,13vw,168px);background:linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%)}
.sec.white{background:radial-gradient(120% 70% at 50% 0%,#1a1d22 0%,var(--bg1) 55%,var(--bg0) 100%);border-top:1px solid var(--hair)}
.sec.dark{background:var(--bg0);color:var(--ink)}
.sec.dark .tiny{color:var(--ink3)}
.sec.dark .mute{color:var(--ink4)}
.sec-h{display:grid;gap:18px;margin-bottom:clamp(44px,7vw,96px)}
@media(min-width:960px){
  .sec-h{grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:start}
  .sec-h .tiny{padding-top:14px}
  .sec-h .display,.sec-h .lede{grid-column:2}
}
/* one accent per section */
#hero{--acc:var(--lime)}
#vsl{--acc:var(--cyan)}
#proof{--acc:var(--teal)}
#drain{--acc:var(--cyan)}
#questions{--acc:var(--pink)}
#eligibility{--acc:var(--lime)}

/* ============================================================
   S1 · HERO
   ============================================================ */
.hero{padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(64px,10vw,120px);background:
  radial-gradient(60% 50% at 85% 70%,rgba(46,230,197,.10) 0%,rgba(46,230,197,0) 70%),
  radial-gradient(50% 40% at 10% 15%,rgba(157,125,255,.10) 0%,rgba(157,125,255,0) 70%),
  linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%)}
.meta-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-bottom:14px;margin-bottom:clamp(36px,7vw,88px);border-bottom:1px solid var(--hair2)}
.h-sub{padding-left:20px;border-left:1px solid var(--hair2)}
.h-sub .sub{font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.55;color:var(--ink2)}
.h-list{list-style:none;margin:22px 0 0;padding:0}
.h-list li{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--hair);font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.h-list b{font-family:var(--font-mono);font-weight:500;font-size:.78rem;padding-top:2px}
.h-list li:nth-child(1) b{color:var(--lime)}
.h-list li:nth-child(2) b{color:var(--amber)}
.h-list li:nth-child(3) b{color:var(--cyan)}
.idq{max-width:760px;margin-top:clamp(56px,9vw,112px);padding-top:22px;border-top:1px solid var(--hair2)}
.idq-k{margin-bottom:22px}
.idq-q{margin:0;padding:0;border:0;min-width:0}
.idq-q+.idq-q{margin-top:26px}
.idq-q legend{padding:0;margin-bottom:12px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,2.6vw,1.3rem);letter-spacing:-.015em;line-height:1.3}
.idq-line{margin-top:26px;padding:18px 20px;border-left:3px solid var(--lime);border-radius:0 16px 16px 0;background:linear-gradient(90deg,rgba(198,242,107,.08),rgba(198,242,107,0) 80%),var(--bg2);font-size:1.04rem;line-height:1.55;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .6s var(--E),transform .6s var(--E)}
.idq-line.in{opacity:1;transform:none}

/* tap options (hero): outlined, the chosen one lights up */
.opts{display:grid;gap:8px}
@media(min-width:520px){.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.opts.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px 14px;border:0;border-radius:14px;background:rgba(232,230,223,.025);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink);font-family:var(--font-sans);font-weight:600;font-size:1rem;line-height:1.3;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,box-shadow .18s}
.opt:hover{background:rgba(232,230,223,.05);box-shadow:inset 0 0 0 1px var(--ink3)}
.opt[aria-pressed="true"]{background:var(--g-go);color:var(--on);box-shadow:0 10px 26px -14px rgba(150,240,140,.6)}

/* ============================================================
   S2 · VSL
   ============================================================ */
.vid,.cv-m{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:18px;box-shadow:0 0 0 1px var(--hair),0 40px 80px -40px rgba(0,0,0,.9)}
.vid iframe,.vid video,.cv-m iframe,.cv-m video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--bg2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;filter:grayscale(.35) contrast(1.05)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,0) 40%,rgba(7,8,10,.6))}
.ring{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:76px;height:76px;translate:-50% -50%;border-radius:50%;background:var(--g-go);color:var(--on);box-shadow:0 0 0 8px rgba(198,242,107,.12),0 16px 36px -10px rgba(46,230,197,.5);transition:transform .35s var(--E)}
.ring svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.poster:hover .ring{transform:scale(1.07)}

/* ============================================================
   S3 · PROOF: lab cards, swipe on phones
   ============================================================ */
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
@media(min-width:600px){.cards{grid-auto-columns:46%}}
@media(min-width:1000px){.cards{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:0;padding-inline:0;overflow:visible;gap:12px}}
.pc{scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:linear-gradient(170deg,var(--bg3) 0%,var(--bg2) 60%,var(--bg1) 100%);box-shadow:inset 0 0 0 1px var(--hair),0 30px 60px -40px rgba(0,0,0,.9)}
.pc-lab{display:block;aspect-ratio:4/3;margin:8px 8px 0;border-radius:14px;background:#dcdad3;overflow:hidden}
.pc-lab img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter .5s,transform .8s var(--E)}
.pc-lab:hover img{filter:brightness(.98);transform:scale(1.03)}
.pc-lab.empty{display:grid;place-items:center;background:var(--bg3);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pc-x{display:flex;flex-direction:column;gap:4px;padding:18px 18px 22px}
.pc-who b{display:block;font-family:var(--font-display);font-weight:800;font-stretch:85%;font-size:1.6rem;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.pc-who span{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px;font-size:.84rem;color:var(--ink3)}
.pc-m{margin-top:16px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.pc-n{display:flex;align-items:baseline;gap:8px;font-size:1.2rem;color:var(--ink3)}
.pc-n i{font-style:normal}
.pc-n b{font-family:var(--font-display);font-weight:900;font-stretch:78%;font-size:3rem;letter-spacing:-.05em;line-height:1;background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-n small{font-size:.8rem;letter-spacing:0}
.pc-d{font-size:.86rem;color:var(--ink2)}
.pc-q{margin-top:10px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.ph{display:inline-block;padding:1px 8px;border:1.5px dashed var(--coral);border-radius:6px;font-family:var(--font-mono);font-size:.7rem;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--coral)}
.swipe{margin-top:14px;text-align:right}
@media(min-width:1000px){.swipe{display:none}}
.vids{display:grid;gap:12px;margin-top:40px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.vids{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.cv{margin:0}
.cv figcaption{margin-top:10px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}

/* ============================================================
   PATTERN BREAK · the moving word band
   ============================================================ */
.band{overflow:hidden;background:linear-gradient(90deg,#0b0c0f,#131519 50%,#0b0c0f);border-block:1px solid var(--hair);color:var(--ink);padding:clamp(14px,2.4vw,24px) 0;white-space:nowrap}
.band-t{display:inline-flex;animation:band 32s linear infinite}
.band-t span{font-family:var(--font-display);font-weight:800;font-stretch:78%;font-size:clamp(2rem,7vw,4.6rem);letter-spacing:-.035em;line-height:1;text-transform:uppercase}
.band-t i{font-style:normal;margin:0 .25em;color:var(--lime)}
.band-t i:nth-of-type(2){color:var(--teal)}
.band-t i:nth-of-type(3){color:var(--pink)}
.band-t i:nth-of-type(4){color:var(--violet)}
@keyframes band{to{transform:translateX(-50%)}}

/* ============================================================
   S4 · THE DRAIN METHOD: the sink, in colour
   ============================================================ */
#drain{background:radial-gradient(60% 40% at 15% 20%,rgba(76,195,255,.08) 0%,rgba(76,195,255,0) 70%),linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%)}
.drain-g{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.drain-g{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px}}
.sink-f{margin:0;padding:clamp(18px,3vw,36px);border-radius:24px;background:radial-gradient(90% 80% at 50% 30%,#1b2027 0%,var(--bg2) 60%,var(--bg1) 100%);box-shadow:inset 0 0 0 1px var(--hair),0 40px 80px -50px rgba(0,0,0,.9)}
.sink{display:block;width:100%;height:auto;overflow:visible}
.sink .ln{stroke:var(--hair2);stroke-width:1.5}
.sink .ln2{stroke:var(--hair2);stroke-width:1}
.sink .cab{fill:var(--bg3);stroke:var(--ink4);stroke-width:1.5}
.sink .ctr{fill:var(--bg4);stroke:var(--ink4);stroke-width:1.5}
.sink .basin{fill:#0e1216;stroke:var(--ink3);stroke-width:1.5}
.sink .water{fill:rgba(46,230,197,.22)}
.sink .wave{fill:none;stroke:var(--teal);stroke-width:1.4;animation:bob 2.4s ease-in-out infinite}
.sink .drain{fill:var(--ink4)}
.sink .clog{fill:var(--amber)}
.sink .tap{fill:none;stroke:var(--ink2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sink .tapb{fill:var(--ink3)}
.sink .stream,.sink .spill{fill:none;stroke:var(--cyan);stroke-width:4;stroke-linecap:round;stroke-dasharray:6 6;animation:flow .7s linear infinite}
.sink .spill{stroke:var(--pink);animation-duration:.9s}
.sink .puddle{fill:rgba(255,92,157,.3);transform-box:view-box;transform-origin:276px 215px;animation:pool 3s ease-in-out infinite}
.sink .mop{transform-box:view-box;transform-origin:322px 72px;animation:sway 4s ease-in-out infinite}
.sink .handle{stroke:var(--violet);stroke-width:3;stroke-linecap:round}
.sink .mophead{fill:rgba(157,125,255,.35);stroke:var(--violet);stroke-width:1.2}
.sink .lbl{font:500 8.5px var(--font-mono);fill:var(--ink2);letter-spacing:.02em}
@keyframes flow{to{stroke-dashoffset:-12}}
@keyframes bob{50%{transform:translateY(1.2px)}}
@keyframes pool{50%{transform:scaleX(1.08)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}

/* three moves: giant numerals in colour, alternating sides */
.seq-h{display:grid;gap:14px;margin-top:clamp(96px,14vw,180px);padding-top:22px;border-top:1px solid var(--hair2)}
.seq-h .tiny{color:var(--acc)}
.h3s{max-width:20ch;font-weight:800;font-stretch:84%;font-size:clamp(1.9rem,5.4vw,3.8rem);line-height:.95;letter-spacing:-.04em}
.moves{margin-top:clamp(40px,6vw,72px)}
.mv{display:grid;gap:18px;padding:clamp(36px,6vw,72px) 0;border-top:1px solid var(--hair)}
.mv:last-child{border-bottom:1px solid var(--hair)}
@media(min-width:860px){
  .mv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .mv.alt .mv-n{order:2;text-align:right}
}
.mv-n{font-family:var(--font-display);font-weight:900;font-stretch:72%;font-size:clamp(7rem,34vw,15rem);line-height:.78;letter-spacing:-.07em;color:transparent;background-image:var(--g-go)}
.mv:nth-child(1){--mv:var(--lime)}
.mv:nth-child(2){--mv:var(--amber)}
.mv:nth-child(3){--mv:var(--cyan)}
.mv:nth-child(2) .mv-n{background-image:linear-gradient(100deg,#ffd27a,#ff6a4f)}
.mv:nth-child(3) .mv-n{background-image:var(--g-cool)}
.mv.alt .mv-n{background-image:none;color:transparent;-webkit-text-stroke:2px var(--mv)}
.mv-x{min-width:0}
.mv-w{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mv,var(--acc))}
.mv h4{margin-top:10px;font-weight:800;font-stretch:84%;font-size:clamp(2rem,5vw,3.2rem);line-height:.95;letter-spacing:-.04em}
.mv h4 span{display:block;margin-top:6px;font-weight:700;font-stretch:100%;font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:-.015em;color:var(--ink3)}
.mv-b{max-width:56ch;margin-top:18px;font-size:1.04rem;color:var(--ink2)}
.mv-v{margin-top:22px;max-width:440px}

/* the plate: a raised slide */
.plates{margin-top:clamp(56px,8vw,96px);padding:clamp(24px,5vw,64px);border-radius:28px;background:radial-gradient(80% 70% at 50% 0%,#1d2026 0%,var(--bg2) 55%,var(--bg1) 100%);box-shadow:inset 0 0 0 1px var(--hair),0 50px 90px -60px rgba(0,0,0,.95);text-align:center}
.plates-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:clamp(28px,5vw,48px);text-align:left}
.plates-h .tiny{color:var(--amber)}
.plates-t{font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.9rem,5vw,3rem);line-height:.95;letter-spacing:-.04em}
.pl-row{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin:0 auto}
@media(max-width:479px){.pl-row{grid-template-columns:minmax(0,1fr)}}
.pl-k{margin-bottom:10px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pl-d{position:relative;width:100%;max-width:250px;margin:0 auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#22262c 0%,#15181c 70%);box-shadow:inset 0 0 0 1px var(--hair2),inset 0 0 0 10px #15181c,inset 0 0 0 11px var(--hair),0 30px 50px -30px rgba(0,0,0,.9)}
.pi{position:absolute;left:var(--px);top:var(--py);width:var(--ps);aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:rgba(46,230,197,.14);box-shadow:0 0 0 1.5px var(--teal);color:var(--ink);font:700 clamp(.62rem,2.6vw,.82rem)/1.1 var(--font-display);transition:left .9s var(--E),top .9s var(--E),width .9s var(--E),opacity .5s var(--E),scale .5s var(--E)}
.pi.g{background:linear-gradient(140deg,#ffd27a,#ff8a4f);box-shadow:none;color:var(--on)}
.plates[data-mode="rebuilt"] .pi{left:var(--rx,var(--px));top:var(--ry,var(--py));width:var(--rs,var(--ps));transition-delay:.25s}
.plates[data-mode="rebuilt"] .pi.g{opacity:0;scale:.5;transition-delay:0s}
.curve{display:block;width:100%;max-width:520px;margin:28px auto 0;overflow:visible}
.curve .base{stroke:var(--hair2);stroke-width:1}
.curve path{fill:none;stroke-width:2.6;stroke-linecap:round;transition:opacity .7s var(--E)}
.curve .spike{stroke:var(--pink);filter:drop-shadow(0 0 6px rgba(255,92,157,.45))}
.curve .flat{stroke:var(--lime);opacity:0;filter:drop-shadow(0 0 6px rgba(198,242,107,.45))}
.plates[data-mode="rebuilt"] .curve .spike{opacity:.15}
.plates[data-mode="rebuilt"] .curve .flat{opacity:1;transition-delay:.5s}
.plates .btn{margin-top:22px}
.cap{margin-top:14px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* ============================================================
   accordions: the 90 days and the questions
   ============================================================ */
.acc{border-bottom:1px solid var(--hair2)}
.acc details{border-top:1px solid var(--hair2)}
.acc summary{display:flex;align-items:center;gap:16px;min-height:72px;padding:18px 0;list-style:none;font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,3vw,1.6rem);letter-spacing:-.02em;line-height:1.25;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:padding .3s var(--E),color .2s}
.acc summary:hover{padding-left:8px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;margin-left:auto;padding-left:12px;font-family:var(--font-mono);font-weight:400;font-size:1.5rem;line-height:1;color:var(--acc)}
.acc details[open] summary::after{content:"–"}
.acc details p{max-width:62ch;padding:0 0 26px;font-size:1.04rem;color:var(--ink2)}
.pull{color:var(--ink)}

/* ============================================================
   S6 · SPLIT SCREEN: you get / you don't
   ============================================================ */

/* ============================================================
   S7 · SAFETY: a raised slide with an amber edge
   ============================================================ */

/* ============================================================
   S8 · PRICE: plain black, one lime glow
   ============================================================ */
#price .tiny:first-child{margin-bottom:22px;color:var(--acc)}
#price .btn{max-width:520px}

/* ============================================================
   S10 · ELIGIBILITY · the exclusive panel: dark glass, rounded
   ============================================================ */
#eligibility{background:radial-gradient(60% 50% at 70% 30%,rgba(198,242,107,.07) 0%,rgba(198,242,107,0) 70%),radial-gradient(50% 40% at 15% 80%,rgba(157,125,255,.08) 0%,rgba(157,125,255,0) 70%),linear-gradient(180deg,var(--bg1),var(--bg0))}
#eligibility .sec-h{margin-bottom:clamp(32px,5vw,56px)}
#eligibility .display{font-size:clamp(2.3rem,8vw,5.6rem)}
.el{max-width:720px;margin:0 auto;padding:8px;border-radius:34px;border:1px solid var(--hair2);background:linear-gradient(155deg,#1f2328 0%,#16191d 45%,#0f1114 100%);box-shadow:inset 0 1px 0 rgba(232,230,223,.07),0 1px 2px rgba(0,0,0,.4),0 50px 90px -46px rgba(0,0,0,.95)}
@media(min-width:960px){.el{margin:0 0 0 25%}}
.el-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px}
.el-t{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.12rem;letter-spacing:-.015em}
.el-t svg{width:18px;height:18px;fill:var(--lime);filter:drop-shadow(0 0 6px rgba(198,242,107,.5))}
.el-step{padding:5px 11px;border-radius:var(--pill);background:rgba(232,230,223,.06);font-family:var(--font-mono);font-size:.72rem;color:var(--ink2)}
.el-bar{height:3px;margin:0 14px;border-radius:3px;background:rgba(232,230,223,.07);overflow:hidden}
.el-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--g-go);box-shadow:0 0 10px rgba(150,240,140,.6);transition:width .4s var(--E)}
.el-body{margin:12px 0 0;padding:22px 14px 20px;border-radius:26px;background:linear-gradient(180deg,rgba(232,230,223,.045),rgba(232,230,223,.015));box-shadow:inset 0 0 0 1px var(--hair)}
@media(min-width:600px){.el{padding:10px}.el-top{padding:16px 18px 12px}.el-bar{margin:0 18px}.el-body{padding:28px 22px 24px}}
.el-s,.vd{animation:in .35s var(--E)}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.el-q{margin-bottom:16px;font-size:clamp(1.2rem,4.4vw,1.45rem);outline:none}
.el-q2{margin:24px 0 12px;font-size:1.05rem;letter-spacing:-.01em}
.el-hint{margin:-8px 0 14px;font-size:.88rem;color:var(--ink3)}
.el-next{margin-top:18px}
#eligibility .opts{gap:6px}
#eligibility .opt{justify-content:space-between;gap:12px;min-height:56px;padding:0 16px 0 18px;border-radius:18px;background:rgba(232,230,223,.03);box-shadow:inset 0 0 0 1px var(--hair);font-weight:500;text-align:left;transition:background .2s,color .2s,box-shadow .25s}
#eligibility .opt:hover{background:rgba(232,230,223,.06);box-shadow:inset 0 0 0 1px var(--hair2),0 10px 22px -14px rgba(0,0,0,.8)}
#eligibility .opt[aria-pressed="true"]{background:var(--g-go);color:var(--on);font-weight:600;box-shadow:0 12px 26px -14px rgba(150,240,140,.55)}
.opt-i{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink4);transition:background .2s,box-shadow .2s}
.opts.many .opt-i{border-radius:7px}
.opt[aria-pressed="true"] .opt-i{background:var(--on) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23c6f26b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
#eligibility .opts.grid .opt{padding:0 14px}
.el-sub{margin-top:6px;padding-top:4px}
.fld{display:block;margin-bottom:14px}
.fld>span:first-child{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:700;font-size:.86rem}
.fld input{width:100%;min-height:54px;padding:0 14px;border:0;border-radius:16px;background:rgba(232,230,223,.045);box-shadow:inset 0 0 0 1px var(--hair2);font:500 16px var(--font-sans);color:var(--ink)}
.fld input::placeholder{color:var(--ink4)}
.fld input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--lime),0 0 0 4px rgba(198,242,107,.12)}
.tel{display:flex}
.tel i{display:grid;place-items:center;flex:none;padding:0 14px;border-radius:16px 0 0 16px;background:rgba(232,230,223,.07);box-shadow:inset 0 0 0 1px var(--hair2);font-family:var(--font-mono);font-style:normal;font-size:.95rem;color:var(--ink2)}
.tel input{border-radius:0 16px 16px 0}
.chk{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:.95rem;line-height:1.45;color:var(--ink2);cursor:pointer}
.chk input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--lime)}
.el-err{min-height:1.4em;margin-top:10px;font-size:.9rem;font-weight:600;color:var(--red-deep)}
#eligibility .btn-a{background:var(--g-go);color:var(--on);box-shadow:0 14px 30px -14px rgba(150,240,140,.55)}
#eligibility .btn-a:disabled{background:rgba(232,230,223,.07);color:var(--ink4);box-shadow:none}
.vd p{margin-top:4px;color:var(--ink2)}
.sum{margin:6px 0 10px;border-top:1px solid var(--hair2)}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair)}
.sum dt{color:var(--ink3)}
.sum dd{margin:0;font-weight:600;text-align:right}
.sum dd small{display:block;font-weight:700;color:var(--jade)}
.vd .btn{margin-top:20px}
.secure{margin-top:10px;text-align:center;font-size:.82rem;color:var(--ink3)}
/* the live fit line, under the question */
.el-live{display:flex;gap:12px;align-items:flex-start;margin:8px 0 0;padding:15px 16px;border-radius:22px;background:rgba(232,230,223,.03);box-shadow:inset 0 0 0 1px var(--hair);font-size:.95rem;line-height:1.5;color:var(--ink2);transition:background .3s,box-shadow .3s}
.el-live p{animation:in .35s var(--E)}
.el-live b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
.el-live .dot{flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--ink4);transition:background .3s,box-shadow .3s}
.el-live.is-yes{background:rgba(63,227,160,.06);box-shadow:inset 0 0 0 1px rgba(63,227,160,.2)}
.el-live.is-yes .dot{background:var(--jade);box-shadow:0 0 0 4px rgba(63,227,160,.16),0 0 12px rgba(63,227,160,.6)}
.el-live.is-review{background:rgba(255,184,77,.06);box-shadow:inset 0 0 0 1px rgba(255,184,77,.2)}
.el-live.is-review .dot{background:var(--amber);box-shadow:0 0 0 4px rgba(255,184,77,.16),0 0 12px rgba(255,184,77,.6)}
.el-live.is-no{background:rgba(255,106,79,.07);box-shadow:inset 0 0 0 1px rgba(255,106,79,.25)}
.el-live.is-no .dot{background:var(--coral);box-shadow:0 0 0 4px rgba(255,106,79,.16),0 0 12px rgba(255,106,79,.6)}
.el-live.is-no b{color:var(--red-deep)}
.el-foot{padding:6px 6px 2px}
.el-foot:has(> .el-back[hidden]){display:none}
.el-back{min-height:40px;padding:0 14px;border:0;border-radius:var(--pill);background:none;font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--ink2);cursor:pointer;transition:background .2s}
.el-back:hover{background:rgba(232,230,223,.06);color:var(--ink)}

/* ---------- sticky bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gut) calc(10px + var(--safe-b));background:linear-gradient(180deg,rgba(7,8,10,0),rgba(7,8,10,.92) 40%);transform:translateY(110%);transition:transform .4s var(--E)}
.bar.on{transform:none}
.bar .btn{max-width:520px;margin:0 auto;display:flex;box-shadow:0 18px 40px -16px rgba(150,240,140,.5)}

/* ---------- footer: the giant mark fades into the black ---------- */
.ft{padding:clamp(56px,9vw,112px) 0 calc(104px + var(--safe-b));border-top:1px solid var(--hair);background:linear-gradient(180deg,var(--bg1),var(--bg0));overflow:hidden}
.ft-big{font-family:var(--font-display);font-weight:900;font-stretch:72%;font-size:clamp(7rem,36vw,26rem);line-height:.78;letter-spacing:-.035em;margin-left:-.04em;background-image:linear-gradient(180deg,#3a3e45 0%,#1a1c20 55%,rgba(12,14,17,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-d{max-width:60ch;margin-top:32px;font-size:.88rem;color:var(--ink3)}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:16px;border-top:1px solid var(--hair);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4)}
.ft-base nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ft-base a{color:var(--ink2);text-underline-offset:3px}
.ft-base a:hover{color:var(--lime)}

/* ---------- S11 thank-you ---------- */
.ty h1{font-size:clamp(3rem,13vw,7rem);font-stretch:78%;letter-spacing:-.05em;line-height:.9;margin-top:14px}
.ty-steps{list-style:none;max-width:680px;margin:40px 0 0;padding:0;counter-reset:s}
.ty-steps li{position:relative;padding:20px 0 20px 52px;border-top:1px solid var(--hair2);font-size:1.04rem;color:var(--ink2)}
.ty-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:18px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--g-go);color:var(--on);font-family:var(--font-mono);font-size:.86rem;font-weight:500}
.ty-steps b{font-family:var(--font-display);color:var(--ink)}
.ty .vid{max-width:680px;margin-top:32px}
.ty .btn{margin-top:32px}
.ft>.wrap>p:not([class]){font-size:.88rem;color:var(--ink3)}
.ft>.wrap>nav{display:flex;gap:18px;margin-top:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.ft>.wrap>nav a{color:var(--ink2)}

/* ---------- motion: blocks rise as they arrive ---------- */
html.rv-on .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--E),transform 1.1s var(--E)}
html.rv-on .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.rv-on .rv{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================================================
   S0 · THE OPENING SCREEN: headline + two questions, nothing else
   ============================================================ */
.gate{position:relative;display:flex;align-items:center;min-height:100svh;padding:clamp(36px,7vh,80px) 0;background:
  radial-gradient(60% 50% at 85% 15%,rgba(157,125,255,.13) 0%,rgba(157,125,255,0) 70%),
  radial-gradient(55% 45% at 5% 95%,rgba(46,230,197,.10) 0%,rgba(46,230,197,0) 70%),
  linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%);
  transition:opacity .6s var(--E),transform .6s var(--E)}
.gate.out{opacity:0;transform:translateY(-28px)}
.gate-w{display:grid;justify-items:center;gap:clamp(28px,5vh,48px);text-align:center}
.gate-h{max-width:none;font-family:var(--font-display);font-weight:700;font-stretch:88%;font-size:clamp(1.15rem,2.3vw,2rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink);animation:in .9s var(--E) both}
.gate-h span{display:block;color:var(--head)}
.gate-h span+span{margin-top:.15em;background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate .idq{width:100%;max-width:720px;margin:0;padding:0;border:0;text-align:left;animation:in .9s var(--E) .15s both}
@media(min-width:900px){.gate-h span{white-space:nowrap}}
.gate .idq-q legend{width:100%;margin-bottom:10px;text-align:center;font-family:var(--font-sans);font-weight:400;font-size:clamp(.98rem,1.5vw,1.08rem);letter-spacing:0;color:#fff}
.gate .opt{font-weight:400;color:#fff}
.gate .opt:hover{color:#fff}
.gate .opt[aria-pressed="true"]{font-weight:500;color:var(--on)}
.gate .idq-q+.idq-q{margin-top:22px}
.gate .opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:519px){
  .gate .opt{min-height:52px;padding:8px 8px;font-size:.9rem}
  .gate .idq-q legend{font-size:1.02rem}
}

/* ============================================================
   S1 · THE ENTRY SCREEN: MM40 in tall letters, the promise in round ones
   ============================================================ */
.entry{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 57px)}
.entry .wrap{position:relative;z-index:1}
.hero-ph{position:absolute;top:0;right:0;bottom:0;width:min(62%,760px);z-index:0;pointer-events:none}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1) contrast(1.15) brightness(.6);opacity:.5;-webkit-mask-image:radial-gradient(65% 70% at 60% 32%,#000 25%,transparent 75%);mask-image:radial-gradient(65% 70% at 60% 32%,#000 25%,transparent 75%)}
@media(max-width:700px){.hero-ph{width:100%}.hero-ph img{opacity:.32}}
.entry .meta-row{margin-bottom:clamp(28px,6vh,72px);border-bottom-color:var(--hair)}
.entry .eyebrow{color:var(--ink2);letter-spacing:.1em}
.mega{position:relative;margin-left:-.035em;font-family:var(--font-display);font-weight:800;font-stretch:62%;font-size:clamp(6.4rem,40.5vw,22.5rem);line-height:.8;letter-spacing:-.025em;background-image:linear-gradient(180deg,#f2f0e9 0%,#dedbd2 55%,#9f9c94 100%);-webkit-background-clip:text;background-clip:text;color:transparent;outline:none}
.entry-sub{max-width:40ch;margin-top:clamp(18px,3vw,30px);font-family:'Nunito',var(--font-sans);font-weight:700;font-size:clamp(1.05rem,2.5vw,2.05rem);line-height:1.22;letter-spacing:-.005em;color:var(--ink)}
.entry-vid{max-width:880px;margin-top:clamp(26px,4vw,44px)}
.entry-vid .vid{box-shadow:0 0 0 1px var(--hair),0 50px 90px -40px rgba(0,0,0,.95),0 0 80px -30px rgba(46,230,197,.25)}
.entry-for{max-width:46ch;margin-top:clamp(22px,3vw,32px);font-size:clamp(1rem,1.6vw,1.12rem);color:#fff}

/* entry screen: the photo stays still on the right; MM40, the promise and the video sit left and scroll over it */
.entry .hero-ph{left:0;right:0;width:auto;clip-path:inset(0)}   /* clips the pinned photo to this section */
.entry .hero-ph img{position:fixed;top:0;right:0;left:auto;width:min(60vw,860px);height:100vh;height:100svh;object-fit:cover;object-position:50% 10%;opacity:.5;-webkit-mask-image:radial-gradient(60% 62% at 52% 34%,#000 28%,transparent 76%);mask-image:radial-gradient(60% 62% at 52% 34%,#000 28%,transparent 76%)}
@media(min-width:900px){
  .entry .wrap{display:flex;flex-direction:column;align-items:flex-start}
  .entry .wrap>*{width:min(100%,700px)}
}
@media(max-width:899px){.entry .hero-ph img{width:100vw;opacity:.3}}

/* the drain section now opens straight on Metabolic Sequencing */
#drain .seq-h{margin-top:0;padding-top:0;border-top:0}
.plates .pl-row{margin-top:0}
/* section heads have no labels now: headings start at the left edge */
@media(min-width:960px){.sec-h{grid-template-columns:minmax(0,1fr)}.sec-h .display,.sec-h .lede{grid-column:auto}}

/* ============================================================
   S2 · THE PROBLEM: his reports in, his line drawn
   headline cream, small type white
   ============================================================ */
#problem{--acc:var(--coral);background:radial-gradient(55% 45% at 85% 70%,rgba(76,195,255,.08) 0%,rgba(76,195,255,0) 70%),linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 100%)}
#problem .display{color:var(--head);font-size:clamp(2.3rem,7vw,5.4rem)}
#problem .display .mute{color:var(--ink4)}
#problem .lede{max-width:44ch;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.45;color:#fff}
.pain-g{display:grid;gap:28px;align-items:start}
@media(min-width:1000px){.pain-g{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}}

/* the inputs */
.rep{padding:22px;border-radius:24px;background:linear-gradient(170deg,var(--bg3),var(--bg2) 60%,var(--bg1));box-shadow:inset 0 0 0 1px var(--hair)}
.rep-k{margin:0 0 12px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.rep-f+.rep-k{margin-top:22px}
.rep-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rf{display:block}
.rep-f+.rep-f{margin-top:10px}
.rf span{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rf input{width:100%;min-height:54px;padding:0 14px;border:0;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--hair2);font:500 1.3rem var(--font-mono);letter-spacing:-.02em;color:#fff;transition:box-shadow .2s}
.rf input::placeholder{color:var(--ink4)}
.rf input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--lime),0 0 0 4px rgba(198,242,107,.12)}
.rf input.bad{box-shadow:inset 0 0 0 2px var(--coral)}

/* the chart: dotted grid, hatched area, gradient line, pills */
.ch{min-width:0}
.ch-card{position:relative;height:clamp(300px,34vw,400px);border-radius:28px;background:radial-gradient(90% 70% at 85% 10%,rgba(46,230,197,.10) 0%,rgba(46,230,197,0) 60%),radial-gradient(70% 60% at 0% 100%,rgba(198,242,107,.07) 0%,rgba(198,242,107,0) 65%),linear-gradient(165deg,#1a1d22 0%,#111316 55%,#0a0b0d 100%);box-shadow:inset 0 0 0 1px var(--hair2),0 40px 80px -50px rgba(0,0,0,.95)}
@media(min-width:760px){.ch{padding-right:150px}}
.ch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:28px}
.ch-ln{fill:none;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(46,230,197,.35))}
.ch-tl{fill:none;stroke:rgba(232,230,223,.32);stroke-width:3.5;stroke-linecap:round}
.ch-mk{stroke:rgba(232,230,223,.28);stroke-width:1}
.ch-ld{fill:#fff;stroke:var(--cyan);stroke-width:4}
.ch-td{fill:#bdbbb4;stroke:rgba(232,230,223,.25);stroke-width:4}
.ch-tag{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:rgba(232,230,223,.06);font-size:.86rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tag i{flex:none;width:14px;height:12px;background:linear-gradient(var(--lime),var(--lime)) 0 100%/3px 50% no-repeat,linear-gradient(var(--lime),var(--lime)) 5px 100%/3px 75% no-repeat,linear-gradient(var(--lime),var(--lime)) 10px 100%/3px 100% no-repeat}
.ch-tag b{display:none;padding:2px 8px;border-radius:999px;background:rgba(255,184,77,.16);font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.ch-card.is-ex .ch-tag b{display:inline-block}
.ch-card.is-ex .ch-ln,.ch-card.is-ex .ch-tl{opacity:.55}
.ch-y{position:absolute;left:14px;top:0;bottom:0;z-index:1;pointer-events:none}
.ch-y span{position:absolute;left:0;translate:0 -50%;padding:6px 11px;border-radius:12px;background:rgba(232,230,223,.06);font-size:.78rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-call{position:absolute;top:0;bottom:0;right:0;width:0;z-index:2}
.co{position:absolute;left:calc(100% - 26px + 14px);translate:0 -50%;white-space:nowrap;transition:top .5s var(--E)}
.co small{position:absolute;left:4px;bottom:calc(100% + 6px);font-size:.7rem;color:rgba(255,255,255,.75)}
.co span{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:rgba(36,39,45,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--hair2),0 14px 30px -14px rgba(0,0,0,.9);font-size:1.15rem;font-variant-numeric:tabular-nums;color:#fff}
.co i{width:10px;height:10px;border-radius:50%}
.co-a i{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.co-t i{background:#e8e6df}
.ch-x{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;padding-left:min(92px,16%)}
.ch-x span{justify-self:center;padding:9px 16px;border-radius:999px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--hair);font-size:.82rem;color:#fff}
.ch-x span:first-child{justify-self:start;translate:-50% 0}
.ch-x span:last-child{justify-self:end;translate:50% 0}
@media(max-width:759px){
  .ch-card{height:300px}
  .ch-call{position:static;width:auto;display:flex;flex-wrap:wrap;gap:10px;margin-top:0}
  .ch-card .ch-call{position:absolute;inset:auto 14px 14px auto;width:auto;flex-direction:column;align-items:flex-end}
  .co{position:static;translate:none}
  .co small{display:none}
  .co span{padding:7px 12px;font-size:.95rem}
  .ch-x{padding-left:0}
  .ch-x span{padding:7px 10px;font-size:.74rem}
  .ch-x span:first-child,.ch-x span:last-child{translate:none}
}

/* the verdict */
.vd2{margin-top:26px}
.vd2-h{font-family:var(--font-display);font-weight:800;font-stretch:80%;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ink4)}
.vd2.is-stuck .vd2-h{background-image:var(--g-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.vd2.is-move .vd2-h{color:var(--teal)}
.vd2-l{max-width:46ch;margin-top:10px;font-size:1.05rem;line-height:1.5;color:#fff}

.entry-sub span{display:block}
.entry-sub span+span{background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent}

/* no header: the entry screen is the full first screen */
.entry{min-height:100svh}
/* the promise under MM40: same type as the problem headline */
.entry-sub{max-width:24ch;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-.03em}
.entry-sub span:first-child{color:var(--head)}
.entry-sub span+span{margin-top:.12em}
/* MM40 sits at chest height of the photo */
.entry .wrap{padding-top:clamp(120px,26vh,260px)}
@media(max-width:899px){
  .entry .wrap{padding-top:34svh;text-align:center;display:flex;flex-direction:column;align-items:center}
  .entry .mega{margin-left:0}
  .entry-sub,.entry-for{margin-inline:auto}
  .entry-vid{width:100%}
  /* the problem section, centred on phones */
  #problem .sec-h{text-align:center;justify-items:center}
  #problem .lede{margin-inline:auto}
  .rep-k{text-align:center}
  .vd2{text-align:center}
  .vd2-l{margin-inline:auto}
}

/* the hero headline is the one thing on the first screen */
.entry-h{max-width:15ch;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(2.6rem,6.6vw,5.8rem);line-height:.98;letter-spacing:-.035em;outline:none}
.entry-h span{display:block}
.entry-h span:first-child{color:var(--head)}
.entry-h span+span{margin-top:.14em;background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent}
.entry .entry-vid{margin-top:clamp(30px,4vw,48px)}
@media(max-width:899px){.entry-h{margin-inline:auto;max-width:13ch}}

/* report pills sit exactly under their points */
.ch-x{position:relative;display:block;height:38px;margin-top:14px;padding:0}
.ch-x span{position:absolute;top:0;translate:-50% 0}
.ch-x span:first-child,.ch-x span:last-child{justify-self:auto;translate:-50% 0}
.entry-h{max-width:17ch}

/* hero headline: small, two lines. Line one: off-white at the bottom rising to cream. Line two: light cream */
.entry-h{max-width:none;font-size:clamp(1.55rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.025em}
.entry-h span:first-child{background-image:linear-gradient(to top,#a8a091 0%,#d9d1c0 45%,#f7efdd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.entry-h span+span{margin-top:.08em;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f1eadb}
@media(min-width:900px){.entry-h span{white-space:nowrap}}
@media(max-width:899px){.entry-h{max-width:20ch}}
#problem .display .wh{color:#fff}
#problem .lede{max-width:none}
/* the hero headline may run wider than the 700px column, on its two lines */
.entry .wrap>.entry-h{width:auto;max-width:100%}
.entry-for{max-width:62ch}

/* ============================================================
   S3 · HIS REPORTS, DRAWN (used by the Solution stage below).
   They stack, line up, then the latest one opens up. coral = stuck, teal = what else
   ============================================================ */
.bx-vis{position:relative;min-height:0}
.bx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bx-tag{position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bx-slip{fill:#15181c;stroke:rgba(232,230,223,.14);stroke-width:1}
.bx-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:rgba(255,255,255,.55)}
.bx-n{font-family:var(--font-display);font-weight:800;font-stretch:84%;letter-spacing:-.03em;fill:var(--head);font-variant-numeric:tabular-nums}
.bx-hi{fill:rgba(255,106,79,.14);stroke:rgba(255,106,79,.55);stroke-width:1}
.bx-hit{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;fill:var(--coral)}
.bx-flat{fill:none;stroke:var(--coral);stroke-width:1.5;stroke-dasharray:3 5;stroke-opacity:.75}
.bx-th{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round}
.bx-th.med{stroke:rgba(232,230,223,.75)}
.bx-box{fill:rgba(12,14,17,.94);stroke:var(--teal);stroke-width:1}
.bx-box.med{stroke:rgba(232,230,223,.8)}
.bx-i{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:var(--teal)}
.bx-i.med{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;fill:var(--head)}
.bx-nm{font-family:var(--font-sans);font-weight:500;letter-spacing:-.005em;fill:var(--head)}
.bx-j{fill:var(--teal)}
.bx-j.med{fill:var(--head)}



/* ============================================================
   S4 · METABOLIC SEQUENCING: one picture that sticks while the page scrolls past it.
   Three scenes, one line each. coral = the burden, teal = the direction
   ============================================================ */
#drain{--acc:var(--teal);padding-bottom:clamp(24px,4vw,56px);background:radial-gradient(70% 45% at 85% 15%,rgba(46,230,197,.09) 0%,rgba(46,230,197,0) 70%),radial-gradient(60% 40% at 0% 70%,rgba(198,242,107,.05) 0%,rgba(198,242,107,0) 70%),linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 50%,var(--bg0) 100%)}
#drain .display{color:var(--head);font-size:clamp(1.9rem,4.4vw,3.8rem)}

/* the run: one screen of picture plus a short scroll per scene */
.mx-run{--len:62svh;position:relative;height:calc(100svh + 6 * var(--len))}
@media(min-width:960px){.mx-run{--len:70vh;height:calc(100vh + 6 * var(--len))}}
.mx-stage{position:sticky;top:0;height:100svh}
@media(min-width:960px){.mx-stage{height:100vh}}
.mx-in{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(12px,2.4svh,22px);height:100%;padding-block:max(18px,4svh) max(14px,3svh)}
@media(min-width:960px){
  .mx-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,4vw,64px);row-gap:28px;align-items:center;padding-block:5vh}
  .mx-hd{grid-column:1;grid-row:2}
  .mx-txt{grid-column:1;grid-row:3;align-self:start}
  .mx-in .mx-nav{grid-column:1;grid-row:4;justify-content:flex-start;margin-left:-4px}
  .mx-fig{grid-column:2;grid-row:1/-1;height:min(80vh,720px)}
}

/* the words: one line per scene, cross-fading in one place */
.mx-txt{list-style:none;margin:0;padding:0;display:grid}
.mx-t{grid-area:1/1;align-self:start;opacity:0;transform:translateY(14px);transition:opacity .5s var(--E),transform .8s var(--E)}
.mx-t.on{opacity:1;transform:none}
.mx-p{max-width:15ch;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.75rem,3.3vw,3rem);line-height:1;letter-spacing:-.035em;color:var(--head);text-wrap:balance}
.mx-p span{display:block;margin-top:.14em;background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent}
.mx-s{margin-top:14px;font-size:1rem;line-height:1.4;color:rgba(255,255,255,.82)}

/* the picture */
.mx-fig{position:relative;margin:0;min-height:0}
/* scene 0, the map, sits over the glucose picture and hands over to it */
.mx-map{position:absolute;inset:0;z-index:1;pointer-events:none}
.mx-fig canvas{opacity:0}
.mx-fig canvas{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}

/* where he is: three marks, tap to jump */
.mx-nav{display:flex;justify-content:center;gap:4px}
.mx-nav button{display:grid;place-items:center;min-width:32px;height:32px;padding:0 4px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mx-nav button::before{content:"";width:18px;height:3px;border-radius:3px;background:rgba(232,230,223,.22);transition:width .5s var(--E),background .4s}
.mx-nav button.on::before{width:34px;background:var(--teal);box-shadow:0 0 10px rgba(46,230,197,.6)}
.mx-nav button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* phones: centred, like the sections above */
@media(max-width:959px){
  .mx-hd,.mx-txt{text-align:center}
  .mx-p{margin-inline:auto}
  .mx-fig{margin-inline:calc(var(--gut) * -1)}
}

/* no script: the three lines, stacked; no picture */
html:not(.js) .mx-run{height:auto}
html:not(.js) .mx-stage{position:static;height:auto}
html:not(.js) .mx-t{grid-area:auto;margin-bottom:28px;opacity:1;transform:none}
html:not(.js) .mx-fig,html:not(.js) .mx-nav{display:none}
html:not(.js) .mx-t:empty{display:none}

/* ---------- sticky bar: the rupee sits tight to the number ---------- */

/* hero headline: both lines a very light grey. Not white, not cream, no gradient */
.entry-h span:first-child,.entry-h span+span{background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#d6d6d3}
.entry-cta{margin-top:clamp(22px,3vw,30px);min-width:min(100%,260px)}
.entry .wrap>.entry-cta{width:auto;padding:0 40px}

/* hero headline: big on desktop, a step up on phones; wraps naturally */
.entry-h{max-width:14em;font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
@media(min-width:900px){.entry-h span{white-space:normal}}
@media(max-width:899px){.entry-h{max-width:16ch}}
/* the hero button: quiet. A thin line, no fill, no glow */
.entry-cta{min-height:50px;padding:0 26px;gap:12px;background:transparent;color:#e2e2df;box-shadow:inset 0 0 0 1px rgba(226,226,223,.32);font-family:var(--font-sans);font-weight:500;font-size:.95rem;letter-spacing:.01em;transition:box-shadow .3s ease,color .3s ease,background .3s ease}
.entry-cta:hover{transform:none;background:rgba(226,226,223,.05);box-shadow:inset 0 0 0 1px rgba(226,226,223,.6);color:#fff}
.entry-cta .arw{width:16px;height:16px;transition:transform .3s var(--E)}
.entry-cta:hover .arw{transform:translateX(3px)}
.entry .wrap>.entry-cta{padding:0 26px}
@media(min-width:900px){.entry-h{max-width:11.5em}}
@media(min-width:900px){.entry .wrap>.entry-h{max-width:11.5em}}
/* hero headline: three lines, each kept whole on desktop */
.entry-h span+span{margin-top:0}
@media(min-width:900px){.entry .wrap>.entry-h{width:max-content;max-width:none;font-size:clamp(2.1rem,3.4vw,3.4rem)}.entry-h span{white-space:nowrap}}
@media(max-width:899px){.entry .wrap>.entry-h{max-width:18ch}}
/* S3 headline: the second half names the mistake, in the problem colour */
.rf input::placeholder{font-family:var(--font-sans);font-size:.88rem;letter-spacing:0;color:rgba(255,255,255,.38)}

/* S2 chart, clean: a thin line coloured by where each report sits, plain labels inside the card */
.ch-ln{stroke-width:2.5;filter:drop-shadow(0 0 5px rgba(255,255,255,.12))}
.ch-ld{fill:#fff;stroke-width:3}
.ch-mk{stroke:rgba(232,230,223,.12)}
.ch-tag{left:22px;top:20px;padding:0;border-radius:0;background:none;font-size:.86rem;color:rgba(255,255,255,.88)}
.ch-y{left:22px}
.ch-y span{padding:0;border-radius:0;background:none;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.co-a i{background:var(--tone,var(--teal));box-shadow:0 0 10px var(--tone,var(--teal))}
.ch-card .ch-x{position:absolute;left:0;right:0;bottom:14px;height:auto;margin:0;padding:0;z-index:1;pointer-events:none}
.ch-card .ch-x span,.ch-card .ch-x span:first-child,.ch-card .ch-x span:last-child{position:absolute;top:0;padding:0;border-radius:0;background:none;box-shadow:none;translate:-50% 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ch-card .ch-x span:last-child{translate:-100% 0}



/* ============================================================
   THE GUARANTEE: a signed document on the table. Teal is the only accent; no coral.
   The certificate fades in (.rv); the stamp presses down once, half a second later
   ============================================================ */
#guarantee{--acc:var(--teal);background:radial-gradient(50% 40% at 50% 62%,rgba(46,230,197,.07) 0%,rgba(46,230,197,0) 70%),linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%)}
#guarantee .sec-h{text-align:center;justify-items:center}
#guarantee .display{max-width:14em;margin-inline:auto;color:var(--head);font-size:clamp(2.3rem,7vw,5.4rem)}
.gt-go{display:block;margin-top:.06em;color:var(--teal)}
#guarantee .lede{max-width:40ch;margin-inline:auto;font-size:clamp(1.05rem,2vw,1.3rem);color:#fff}
.gt-doc{position:relative;width:min(100%,560px);margin:clamp(12px,3vw,32px) auto 0;padding:clamp(28px,5vw,48px) clamp(22px,5vw,48px) clamp(28px,4vw,42px);border-radius:6px;background:linear-gradient(180deg,#efece4,#e3dfd5);color:#2a2c30;box-shadow:0 40px 80px -36px rgba(0,0,0,.95)}
.gt-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#56585d}
.gt-t{margin-top:12px;padding-right:64px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1;letter-spacing:-.03em;color:#16181b}
.gt-b{margin-top:16px;font-size:1rem;line-height:1.55;color:#2a2c30}
.gt-k2{margin-top:26px;padding-top:18px;border-top:1px solid rgba(22,24,27,.15)}
.gt-l{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.gt-l li{position:relative;padding-left:18px;font-size:.98rem;line-height:1.45;color:#2a2c30}
.gt-l li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:#2a2c30}
.gt-s{margin-top:16px;font-size:.86rem;line-height:1.5;color:#505257}
.gt-sig{display:inline-block;min-width:200px;margin-top:32px;padding-top:8px;border-top:1px solid rgba(22,24,27,.35);font-family:var(--font-sans);font-style:italic;font-weight:500;font-size:1.5rem;letter-spacing:-.01em;color:#16181b}
/* the stamp: dark, so the teal reads on paper and off it */
.gt-stamp{position:absolute;top:-30px;right:-10px;display:grid;place-content:center;justify-items:center;gap:1px;width:clamp(96px,22vw,124px);aspect-ratio:1;border-radius:50%;background:#0c0e11;box-shadow:inset 0 0 0 2px var(--teal),inset 0 0 0 6px #0c0e11,inset 0 0 0 7px rgba(46,230,197,.6),0 10px 24px -8px rgba(0,0,0,.6);color:var(--teal);font-family:var(--font-mono);font-weight:500;font-size:clamp(.56rem,1.6vw,.66rem);letter-spacing:.1em;line-height:1.3;text-align:center;transform:rotate(-12deg)}
.gt-stamp b{font-size:1.2em;line-height:1}
.gt-doc.in .gt-stamp{animation:gtStamp .42s cubic-bezier(.2,.9,.3,1.15) .5s both}
@keyframes gtStamp{0%{opacity:0;transform:rotate(-12deg) scale(1.55)}70%{opacity:1;transform:rotate(-12deg) scale(.95)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.gt-end{margin-inline:auto;text-align:center}

/* the merged eligibility: who does what, and the notes under the check (kept from Safety and scope) */
.sf-c{display:block;margin-top:.06em;color:var(--coral)}
.sf-confirm{margin-top:14px;font-family:var(--font-mono);font-size:.74rem;line-height:1.5;color:rgba(255,255,255,.62)}
.sf-who{list-style:none;margin:clamp(64px,9vw,112px) 0 0;padding:0;max-width:820px}
.sf-who li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--hair)}
.sf-who li:last-child{border-bottom:1px solid var(--hair)}
@media(min-width:700px){.sf-who li{grid-template-columns:170px 1fr;gap:24px;align-items:baseline}}
.sf-who b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:-.02em;color:var(--teal)}
.sf-who span{font-size:1.02rem;line-height:1.45;color:var(--head)}
.sf-pre{max-width:70ch;margin-top:22px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.7)}
.sf-draft{margin-top:12px;font-size:.84rem;color:rgba(255,255,255,.6)}
.sf-end{margin-top:clamp(56px,8vw,96px)}

/* ============================================================
   S6 · YOUR 90 DAYS: the 90 days in one box on the left; the road on the right, built like an engine.
   Teal wires run from the box into a node on the road's edge. As he scrolls the node travels down
   and the week it reaches lights up. Teal only; no cards inside cards beyond the weeks themselves
   ============================================================ */
#roadmap{--acc:var(--teal);background:radial-gradient(55% 35% at 0% 30%,rgba(46,230,197,.06) 0%,rgba(46,230,197,0) 70%),linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 50%,var(--bg0) 100%)}
.rm-grid{position:relative;display:grid;gap:44px}
@media(min-width:960px){.rm-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(90px,9vw,140px);align-items:start}}
/* the box */
.rm-box{position:relative;z-index:1;padding:clamp(24px,3vw,36px);border-radius:24px;background:radial-gradient(90% 60% at 0% 0%,rgba(46,230,197,.08) 0%,rgba(46,230,197,0) 60%),linear-gradient(165deg,#16191d 0%,#0f1114 60%,#0b0c0f 100%);box-shadow:inset 0 0 0 1px rgba(46,230,197,.28),0 30px 70px -40px rgba(0,0,0,.95)}
@media(min-width:960px){.rm-box{position:sticky;top:max(24px,12vh)}}
.rm-h{color:var(--head);font-size:clamp(2.2rem,4vw,3.6rem)}
.rm-go{display:block;margin-top:.06em;color:var(--teal)}
.rm-band{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:clamp(26px,3vw,36px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--hair2)}
.rm-g{display:inline-flex;align-items:baseline;gap:12px}
.rm-n{display:inline-block;font-family:var(--font-display);font-weight:800;font-stretch:62%;font-size:56px;line-height:.9;letter-spacing:-.03em;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-sum .rm-n{font-size:66px}
@media(min-width:960px){.rm-n{font-size:68px}.rm-sum .rm-n{font-size:80px}}
.rm-l{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;color:var(--head)}
.rm-op{font-family:var(--font-sans);font-size:1.5rem;line-height:1;color:rgba(255,255,255,.45)}
/* the wires (wide screens only) */
.rm-wires{display:none}
@media(min-width:960px){.rm-wires{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}}
.rm-w{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(46,230,197,.55))}
.rm-w.f{stroke-width:1;stroke-dasharray:2 5;opacity:.5;filter:none}
.rm-w-dot{fill:var(--teal);filter:drop-shadow(0 0 6px rgba(46,230,197,.9))}
/* the road */
.rm-right{min-width:0}
@media(max-width:959px){.rm-right{position:relative}.rm-right::before{content:"";position:absolute;left:50%;top:-44px;height:36px;border-left:1.5px dashed rgba(46,230,197,.55)}}
.rm-eng{position:relative;padding:clamp(18px,2.4vw,26px);border-radius:24px;background:radial-gradient(circle at 1px 1px,rgba(46,230,197,.10) 1px,transparent 1.5px) 0 0/14px 14px,linear-gradient(170deg,#121518,#0b0d10);box-shadow:inset 0 0 0 1.5px rgba(46,230,197,.55),0 0 46px -14px rgba(46,230,197,.4)}
.rm-node{position:absolute;left:-9px;top:60px;width:18px;height:18px;border-radius:50%;background:#0b0d10;box-shadow:inset 0 0 0 4px var(--teal),0 0 16px rgba(46,230,197,.85);}
@media(max-width:959px){.rm-node{left:50%;top:-9px;translate:-50% 0}}
.rm-stops{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.rm-stop{position:relative;padding:18px 20px 20px;border-radius:16px;background:rgba(11,13,16,.92);box-shadow:inset 0 0 0 1px rgba(232,230,223,.1);transition:box-shadow .4s ease,background .4s ease}
.rm-stop.done{box-shadow:inset 0 0 0 1px rgba(46,230,197,.35)}
.rm-stop.on{background:linear-gradient(170deg,rgba(46,230,197,.08),rgba(11,13,16,.94) 60%);box-shadow:inset 0 0 0 1.5px var(--teal),0 0 30px -8px rgba(46,230,197,.55)}
/* the arrow between weeks */
.rm-stop:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-30px;height:24px;border-left:1.5px dashed rgba(46,230,197,.4)}
.rm-stop+.rm-stop::before{content:"";position:absolute;left:50%;top:-9px;width:7px;height:7px;border-right:1.5px solid rgba(46,230,197,.6);border-bottom:1.5px solid rgba(46,230,197,.6);translate:-50% 0;rotate:45deg}
.rm-wk{display:inline-block;padding:4px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(46,230,197,.5);font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--teal)}
.rm-stop.on .rm-wk{background:var(--teal);color:#071512}
.rm-out{margin-top:12px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:22px;line-height:1.1;letter-spacing:-.02em;color:var(--head);text-wrap:balance}
@media(min-width:760px){.rm-out{font-size:clamp(24px,2.2vw,30px)}}
.rm-last .rm-out{color:var(--teal)}
.rm-mv{margin-top:8px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.7)}
.rm-mv b{font-weight:600;color:var(--teal)}
@media(min-width:760px){.rm-mv{font-size:17px}}
.rm-end{margin-top:clamp(40px,6vw,64px)}

/* ============================================================
   S7 · THE INVESTMENT: the emptiest section on the page. One price, one line, one button.
   Left-aligned; the price fades in, the rest follows. No counting, no cards, no badges
   ============================================================ */
#eligibility{--acc:var(--teal);padding-block:clamp(120px,18vw,240px);background:radial-gradient(50% 30% at 15% 70%,rgba(46,230,197,.05) 0%,rgba(46,230,197,0) 70%),var(--bg0)}
.iv-price{font-family:var(--font-display);font-weight:800;font-stretch:66%;font-size:clamp(96px,22vw,220px);line-height:.86;letter-spacing:-.04em;color:var(--head);white-space:nowrap}
.iv-once{margin-top:clamp(18px,2.4vw,28px);font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;line-height:1.2;color:var(--head)}
.iv-pay{margin-top:clamp(80px,11vw,120px)}
.iv-btn{min-height:60px;width:100%;padding:0 34px;font-size:1.02rem}
@media(min-width:600px){.iv-btn{width:auto;min-width:320px}}
.iv-btn.is-off{opacity:.42;cursor:not-allowed;box-shadow:none;pointer-events:none}
.iv-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.iv-ph{margin-top:10px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--amber)}
.iv-sec{margin-top:12px;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.62)}
.iv-cohort{margin-top:clamp(32px,4.4vw,44px);font-size:.98rem;line-height:1.5;color:var(--head)}
.iv-next{margin-top:8px;max-width:56ch;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.62)}
.iv-g{display:inline-block;margin-top:clamp(24px,3vw,32px);font-size:.98rem}
/* the words and the button follow the price in */
html.rv-on #price .iv-once,html.rv-on #price .iv-pay{transition-delay:.35s}

/* the check, opened under the price. The card keeps its look; the live result is always on screen */
.ex{margin-top:clamp(96px,14vw,168px)}
.ex.open{animation:in .6s var(--E)}
.ex-h{margin-bottom:clamp(28px,4vw,44px)}
#eligibility .ex .display{color:var(--head);font-size:clamp(2.3rem,7vw,5.4rem);outline:none}
#eligibility .ex .lede{max-width:44ch;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.45;color:#fff}
#eligibility .el{margin:0}
.el-live{min-height:88px;align-items:center;padding:18px 20px;transition:background .3s,box-shadow .3s}
.el-live p{font-size:1rem;line-height:1.5;color:rgba(255,255,255,.86)}
.el-live b{margin-bottom:2px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.025em;line-height:1.1;color:var(--head)}
.el-live.is-no{background:rgba(255,106,79,.07);box-shadow:inset 0 0 0 1.5px var(--coral)}
.el-live.is-no b{color:var(--coral)}
.el-live.is-yes{background:rgba(46,230,197,.06);box-shadow:inset 0 0 0 1.5px rgba(46,230,197,.6)}
.el-live.is-yes b{color:var(--teal)}
.el-live.is-yes .dot{background:var(--teal);box-shadow:0 0 0 4px rgba(46,230,197,.16),0 0 12px rgba(46,230,197,.6)}
#eligibility .sf-confirm{margin-top:14px}
#eligibility .sf-who{margin-top:clamp(56px,8vw,88px)}

/* ============================================================
   ONE HEADLINE STYLE: every section headline in the same font, size and colour.
   The hero headline runs a step bigger than these
   ============================================================ */
:root{--h2:clamp(1.8rem,3.9vw,3.5rem)}
.display,#problem .display,#drain .display,#guarantee .display,#eligibility .display,#eligibility .ex .display,.rm-h{font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:var(--h2);line-height:.98;letter-spacing:-.03em;color:var(--head)}

/* ---------- S1 · the hero ---------- */
.entry-eb{margin-bottom:clamp(14px,2vw,22px)}
.entry .eyebrow{color:rgba(255,255,255,.62);letter-spacing:.16em}
/* a breath before the promise */
.entry-h span:nth-child(3){margin-top:.32em}
@media(min-width:900px){.entry .wrap>.entry-h{font-size:clamp(2rem,4.3vw,3.9rem)}}
/* the photo sits a little lower, the words lower still */
.entry .hero-ph img{transform:translateY(7vh)}
.entry .wrap{padding-top:clamp(160px,36vh,340px)}
/* phones: the headline fills the width, three lines, never more */
@media(max-width:899px){
  .entry .wrap{padding-top:46svh;padding-inline:16px}
  .entry .wrap>.entry-h{width:100%;max-width:none;font-stretch:72%;font-size:min(calc((100vw - 32px) / 11.4),3.2rem);letter-spacing:-.035em}
  .entry-h span{white-space:nowrap}
  .entry-for{max-width:36ch}
}

/* ---------- S2 · the inputs get a heading ---------- */
.rep-h{margin-bottom:14px;font-family:var(--font-sans);font-weight:400;font-size:.95rem;line-height:1.4;color:rgba(255,255,255,.72)}
/* the healthy range on the trend chart */
.ch-hr{fill:rgba(46,230,197,.09)}
.ch-hr-l{stroke:var(--teal);stroke-width:1;stroke-dasharray:4 4;stroke-opacity:.6}
.ch-hr-t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--teal)}
@media(max-width:899px){.rep-h{text-align:center}}

/* ---------- S3 · beat one is the one quiet line ---------- */

/* ---------- S4 · the solution, then Metabolic Sequencing held on the left ---------- */
/* The Problem, then The Solution: the heading and the line under it change once, from the mistake to the method */
#drain{padding-top:clamp(40px,6vw,80px)}
.mx-h{max-width:9em}
.mx-hd{display:grid}
.mx-kg{grid-area:1/1;align-self:start;opacity:0;transform:translateY(12px);transition:opacity .5s var(--E),transform .8s var(--E)}
.mx-kg.on{opacity:1;transform:none}
.mx-kh{max-width:13em;margin-top:clamp(10px,1.6vw,18px);font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.3rem,2.3vw,2.1rem);line-height:1.04;letter-spacing:-.025em;color:var(--head);text-wrap:balance}
.mx-kh .wrong{display:block;color:var(--coral)}
.mx-kg:last-child .mx-kh{color:var(--teal)}
@media(max-width:959px){.mx-h,.mx-kh{margin-inline:auto}}
html:not(.js) .mx-kg{grid-area:auto;opacity:1;transform:none}
/* report cards: which report it is sits where HbA1c was */
.bx-k{text-transform:uppercase}

/* ---------- S6 · the band, in cards ---------- */
.rm-band{align-items:stretch;gap:8px;border-top:0;padding-top:0}
.rm-g{display:flex;align-items:baseline;gap:14px;padding:14px 18px 16px;border-radius:16px;background:rgba(46,230,197,.04);box-shadow:inset 0 0 0 1px rgba(46,230,197,.28)}
.rm-sum{background:linear-gradient(160deg,rgba(46,230,197,.14),rgba(46,230,197,.03) 70%);box-shadow:inset 0 0 0 1.5px var(--teal),0 0 34px -12px rgba(46,230,197,.5)}
.rm-op{align-self:center;line-height:.8}

/* ---------- S6 · the end of the road: a real lab report, the result blank, an arrow drawn to it ---------- */
.rm-lab{position:relative;width:100%;margin-top:clamp(56px,8vw,88px);padding-top:84px}
@media(min-width:760px){.rm-lab{max-width:520px}}
.rm-arw-t{position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--teal)}
.rm-arw{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.rm-arw path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rm-arw-u{stroke:#0b0d10;stroke-width:6;stroke-opacity:.55}
.rm-arw-l,.rm-arw-h{stroke:var(--teal);stroke-width:2.6}
.rm-arw-l,.rm-arw-u.l{stroke-dasharray:1;stroke-dashoffset:1}
.rm-arw-h,.rm-arw-u.h{opacity:0}
.rm-lab.in .rm-arw-l,.rm-lab.in .rm-arw-u.l{animation:rmDraw 1.1s var(--E) .45s forwards}
.rm-lab.in .rm-arw-h,.rm-lab.in .rm-arw-u.h{animation:rmHead .3s ease 1.4s forwards}
.rm-lab.in .rm-arw g{animation:rmNudge 2.2s ease-in-out 1.9s infinite}
@keyframes rmDraw{to{stroke-dashoffset:0}}
@keyframes rmHead{to{opacity:1}}
@keyframes rmNudge{0%,100%{transform:none}50%{transform:translate(var(--nx,0),var(--ny,4px))}}
.rm-rep{position:relative;padding:22px clamp(16px,4vw,26px) 16px;border-radius:4px;background:linear-gradient(180deg,#f2f0ea,#e6e3db);color:#22252a;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.lab-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid #22252a}
.lab-hd b{font-family:var(--font-display);font-weight:800;font-stretch:90%;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:479px){.lab-hd b{font-size:.86rem}}
.lab-hd span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#6a6d72}
.lab-meta div:last-child{text-align:right}
.lab-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 4px;padding-bottom:12px;border-bottom:1px solid rgba(34,37,42,.2)}
.lab-meta dt{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#7a7d82}
.lab-meta dd{margin:2px 0 0;font-size:.84rem;font-weight:600;line-height:1.3}
.lab-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.86rem}
.lab-t th{padding:10px 4px 8px;border-bottom:1px solid rgba(34,37,42,.3);font-family:var(--font-mono);font-size:.58rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-align:left;color:#6a6d72}
.lab-t th:nth-child(1){width:40%}.lab-t th:nth-child(2){width:24%}.lab-t th:nth-child(3){width:12%}.lab-t th:nth-child(4){width:24%}
.lab-t td{padding:14px 4px 12px;vertical-align:top;font-family:var(--font-mono);font-size:.84rem;line-height:1.3;color:#22252a}
.lab-t td:first-child{font-family:var(--font-sans);font-weight:700;font-size:.95rem}
.lab-t td small{display:block;margin-top:3px;font-weight:400;font-size:.66rem;line-height:1.3;color:#6a6d72}
.lab-res{position:relative}
.lab-res .rm-blank{display:block;height:24px;margin-right:10px;border-bottom:2px solid #22252a;border-radius:2px}
.rm-lab.in .lab-res .rm-blank{animation:rmMark 2.2s ease-in-out 1.7s infinite}
@keyframes rmMark{0%,100%{background:rgba(46,230,197,0)}50%{background:rgba(46,230,197,.28)}}
.lab-ft{margin-top:8px;padding-top:10px;border-top:1px dashed rgba(34,37,42,.3);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#7a7d82}
@media(prefers-reduced-motion:reduce){.rm-arw-l,.rm-arw-u.l{stroke-dashoffset:0}.rm-arw-h,.rm-arw-u.h{opacity:1}}

/* ============================================================
   S2 · THE REALISATION: once he has typed his numbers.
   On the chart, the gap from his latest report down to healthy is measured.
   Under it, a track: the healthy zone, him, the distance between, and where his pace takes him
   ============================================================ */
.ch-gap-l{fill:none;stroke:var(--coral);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.ch-gap-t{fill:none;stroke:var(--coral);stroke-width:1.5}
.ch-gap-x{font-family:var(--font-sans);font-weight:600;font-size:12.5px;fill:var(--coral);paint-order:stroke;stroke:#111316;stroke-width:4px;stroke-linejoin:round}
.ch-gap.anim .ch-gap-l{animation:chGap .9s var(--E) .25s both}
.ch-gap.anim .ch-gap-t,.ch-gap.anim .ch-gap-x{animation:chGapIn .5s var(--E) .9s both}
@keyframes chGap{from{stroke-dashoffset:1}}
@keyframes chGapIn{from{opacity:0}}

.gp{max-width:520px;margin-top:20px}
.gp-tr{position:relative;height:10px;margin-top:38px;border-radius:10px;background:rgba(232,230,223,.08)}
.gp-ok{position:absolute;left:0;top:0;bottom:0;border-radius:10px 0 0 10px;background:linear-gradient(90deg,rgba(46,230,197,.2),rgba(46,230,197,.65))}
.gp-ok b{position:absolute;left:0;bottom:calc(100% + 9px);font-family:var(--font-mono);font-weight:500;font-size:.66rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.gp-run{position:absolute;top:50%;height:0}
.gp-run::before{content:"";position:absolute;left:0;right:0;top:-1px;border-top:2px dashed var(--coral);transform-origin:right}
.gp-run em{position:absolute;left:50%;top:14px;translate:-50% 0;font-family:var(--font-sans);font-style:normal;font-weight:600;font-size:.86rem;line-height:1;color:var(--coral);white-space:nowrap}
.gp-1{position:absolute;top:50%;width:10px;height:10px;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(232,230,223,.45)}
.gp-you{position:absolute;top:50%;z-index:1;width:16px;height:16px;translate:-50% -50%;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(255,106,79,.2),0 0 16px rgba(255,106,79,.7)}
.gp-you b{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;font-family:var(--font-sans);font-weight:600;font-size:.88rem;line-height:1;color:#fff;white-space:nowrap}
.gp.is-ok .gp-you{background:var(--teal);box-shadow:0 0 0 5px rgba(46,230,197,.2),0 0 16px rgba(46,230,197,.7)}
.gp-sc{position:relative;height:14px;margin-top:34px;font-family:var(--font-mono);font-size:.62rem;line-height:1;color:rgba(255,255,255,.42)}
.gp-sc span{position:absolute;top:0}
.gp-sc span:first-child{left:0}
.gp-sc span:nth-child(2){translate:-50% 0}
.gp-sc span:last-child{right:0}
.gp-pace{margin-top:14px;font-size:1.05rem;line-height:1.45;color:#fff}
.gp-pace b{font-weight:700;color:var(--coral)}
.vd2.is-move .gp-pace b,.gp.is-ok .gp-pace b{color:var(--teal)}
/* in order: he slides from his first report to his latest, the gap is measured, the pace lands */
.gp.anim .gp-you{animation:gpSlide 1.4s var(--E) .2s both}
.gp.anim .gp-run::before{animation:gpLine .9s var(--E) 1.3s both}
.gp.anim .gp-run em{animation:chGapIn .5s var(--E) 2s both}
.gp.anim .gp-pace{animation:in .6s var(--E) 2.4s both}
@keyframes gpSlide{from{left:var(--from)}}
@keyframes gpLine{from{transform:scaleX(0)}}
@media(max-width:899px){.gp{margin-inline:auto;text-align:center}}

@media(max-width:959px){.mx-map .bx-tag{left:16px}}
/* the stamp: "100 DAYS FREE" is a character longer; tighter on phones so it stays inside the ring */
@media(max-width:479px){.gt-stamp{letter-spacing:.04em}}

/* ============================================================
   S7 · ELIGIBILITY, straight onto the questions. No price block above it
   ============================================================ */
#eligibility{padding-block:clamp(80px,13vw,168px)}
#eligibility .ex{margin-top:0}
.el-go{display:block;margin-top:.06em;color:var(--teal)}
.ex-h .iv-cohort{margin-top:0;font-size:.95rem;color:rgba(255,255,255,.7)}

/* complications: the organ as a small coral label over what it is. One column, they read as a list */
.opts.many .opt{padding-block:10px}
.opt-l{display:flex;flex-direction:column;gap:3px;text-align:left;line-height:1.35}
.opt-l small{font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.opt[aria-pressed="true"] .opt-l small{color:var(--on);opacity:.65}
.el-q+.el-hint{margin:-4px 0 16px;padding-left:12px;border-left:2px solid var(--coral);font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.8)}

/* ============================================================
   S7 · THE LIVE SUITABILITY STATUS. Appears with his first answer and is rechecked on every tap:
   the ring fills with each criterion checked, the icon draws itself for the current state,
   a light sweeps across on every change, and one chip per criterion lights as it is checked.
   teal = meets the criteria, amber = clinical review, coral = not suitable
   ============================================================ */
.el-live.lv{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;min-height:0;padding:18px 20px 16px;--c:var(--teal);transition:background .4s,box-shadow .4s}
.el-live.lv.is-review{--c:var(--amber);background:rgba(255,184,77,.06);box-shadow:inset 0 0 0 1.5px rgba(255,184,77,.55)}
.el-live.lv.is-no{--c:var(--coral)}
.el-live.lv p{animation:none}
.lv-orb{position:relative;width:56px;height:56px;color:var(--c);transition:color .4s}
.lv-orb::before{content:"";position:absolute;inset:6px;border-radius:50%}
.lv-orb svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.lv-trk{fill:none;stroke:rgba(232,230,223,.1);stroke-width:3}
.lv-ring{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:24px 24px;transition:stroke-dashoffset .8s var(--E);filter:drop-shadow(0 0 5px currentColor)}
.lv-ic{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.lv-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:rgba(255,255,255,.55)}
.el-live.lv .lv-t{margin-top:3px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.025em;line-height:1.1;color:var(--c);transition:color .4s}
.el-live.lv .lv-d{margin-top:4px;font-size:.96rem;line-height:1.45;color:rgba(255,255,255,.82)}
.lv-c{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--hair)}
.lv-c li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(232,230,223,.03);box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:rgba(255,255,255,.42);transition:color .3s,background .3s,box-shadow .3s}
.lv-c i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(232,230,223,.22);transition:background .3s,box-shadow .3s}
.lv-c li.is-ok{color:var(--teal);background:rgba(46,230,197,.07);box-shadow:inset 0 0 0 1px rgba(46,230,197,.45)}
.lv-c li.is-ok i{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.lv-c li.is-review{color:var(--amber);background:rgba(255,184,77,.07);box-shadow:inset 0 0 0 1px rgba(255,184,77,.5)}
.lv-c li.is-review i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.lv-c li.is-no{color:var(--coral);background:rgba(255,106,79,.08);box-shadow:inset 0 0 0 1px rgba(255,106,79,.55)}
.lv-c li.is-no i{background:var(--coral);box-shadow:0 0 8px var(--coral)}
/* the sweep: a band of the state's colour passes over the panel on every recheck */
.el-live.lv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--c) 16%,transparent) 50%,transparent 65%);transform:translateX(-100%)}
.el-live.lv.lv-scan::after{animation:lvScan .9s var(--E)}
/* a new state: the icon draws itself, a ring of light leaves the orb, the words rise in */
.el-live.lv.lv-new .lv-ic{animation:lvDraw .6s var(--E) .1s both}
.el-live.lv.lv-new .lv-orb::before{animation:lvPulse 1.1s var(--E)}
.el-live.lv.lv-new .lv-t{animation:lvText .5s var(--E) both}
.el-live.lv.lv-new .lv-d{animation:lvText .5s var(--E) .08s both}
.el-live.lv.is-no.lv-new{animation:lvShake .45s ease}
.lv-c li.pop{animation:lvPop .45s cubic-bezier(.2,.9,.3,1.4)}
.el-live.lv.is-done .lv-ring{filter:drop-shadow(0 0 9px currentColor)}
@keyframes lvScan{to{transform:translateX(100%)}}
@keyframes lvDraw{from{stroke-dashoffset:1}}
@keyframes lvPulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}to{box-shadow:0 0 0 22px transparent}}
@keyframes lvText{from{opacity:0;transform:translateY(8px)}}
@keyframes lvPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}}
@keyframes lvShake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media(max-width:599px){.lv-orb{width:46px;height:46px}.el-live.lv{gap:6px 12px;padding:16px}}

/* ============================================================
   S3 · THE STACK: the protocol, built up through his latest report.
   His medication is the base layer; a layer a week lands on top, glows once it is in place,
   and the newest one is named under the stack with its mechanism of action
   ============================================================ */
.ly-p{fill:color-mix(in srgb,var(--ly) 10%,rgba(10,12,15,.6));stroke:var(--ly);stroke-width:1.3;stroke-linejoin:round;transition:filter .5s}
.ly-g{fill:none;stroke:var(--ly);stroke-width:.6;stroke-opacity:.3}
.ly.lit .ly-p{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--ly) 65%,transparent))}
.ly-w{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--ly)}
.ly-n{font-family:var(--font-sans);font-size:12px;font-weight:500;fill:var(--head)}
.ly-beam{filter:blur(1.5px)}
.mx-moa{position:absolute;left:50%;bottom:0;width:min(100% - 32px,540px);translate:-50% 0;text-align:center;opacity:0;transition:opacity .4s}
.mx-moa.on{opacity:1}
.mx-moa-k{font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ly,var(--teal))}
.mx-moa-t{margin-top:4px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.1;letter-spacing:-.02em;color:var(--head)}
.mx-moa-d{margin-top:6px;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.8)}
.mx-moa.flip p{animation:lvText .5s var(--E) both}
.mx-moa.flip .mx-moa-d{animation-delay:.06s}
/* the caption keeps its room even before the first layer lands, so the stack is sized around it */
.mx-moa{min-height:100px}
@media(max-width:559px){.mx-moa{min-height:138px}}

/* ============================================================
   THE FLOW: one screen at a time. 1 the gate, with the video opening under it · the "came down" exit · 2 the offer, eligibility above the price.
   html[data-scr] is set before first paint (index.html) and by app.js after
   ============================================================ */
html.js .scr{display:none}
html.js[data-scr="gate"] #gate,html.js[data-scr="came"] #came,html.js[data-scr="video"] #gate,html.js[data-scr="video"] #hero{display:flex}
html.js[data-scr="offer"] #offer{display:block}
/* the gate on screen: the video is already laid out at full size and buffering, behind the gate and fully transparent,
   so it can play the moment he answers. (Wistia only creates the video once its box is really on screen.) */
html.js[data-scr="gate"] #hero{display:flex;position:fixed;top:0;left:0;right:0;z-index:-1;opacity:0;pointer-events:none}
/* the gate answered: it shrinks to its content and the video opens right under it, on the same screen */
html.js[data-scr="video"] #gate{min-height:0;padding-bottom:0}
html.js[data-scr="video"] #hero{animation:in .9s var(--E)}
html.js[data-scr="gate"] .ft,html.js[data-scr="came"] .ft,html.js[data-scr="gate"] .bar,html.js[data-scr="came"] .bar{display:none}
html:not(.js) #gate,html:not(.js) #came,html:not(.js) #eligibility,html:not(.js) #offer,html:not(.js) .bar{display:none}

/* the "came down" exit: the gate's frame, one line, one button */
.came-p{max-width:40ch;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.55;color:var(--ink2)}
.came-back{min-height:44px;padding:0 12px;border:0;background:none;font-size:.95rem;cursor:pointer;text-decoration:underline}

/* Screen B: the headline and the video in the first view, on phones too */
.entry.vsl-scr{min-height:0}
.entry.vsl-scr .wrap{padding-top:clamp(28px,7vh,96px)}
.entry.vsl-scr .wrap>.entry-h{width:auto;max-width:22ch;font-stretch:84%;font-size:clamp(1.7rem,5.4vw,3.2rem);line-height:1.04;letter-spacing:-.03em}
.entry.vsl-scr .entry-for{margin-top:clamp(14px,2vw,22px)}
.vsl-g{margin-top:12px}
.entry.vsl-scr .entry-vid{margin-top:clamp(20px,3vw,32px)}
@media(max-width:899px){.entry.vsl-scr .wrap>.entry-h{max-width:20ch;font-size:clamp(1.6rem,7.4vw,2.6rem)}}
.vid{background-size:cover;background-position:center}
.vid .wistia_embed{position:absolute;inset:0;width:100%;height:100%}

.vsl-go{margin-top:16px}
.vsl-go .arw{width:18px;height:18px}
/* the unlock: one pulse, then still */
.vsl-go.pulse{animation:vslPulse 1.3s var(--E) 1}
@keyframes vslPulse{0%{box-shadow:0 0 0 0 rgba(198,242,107,.55)}70%{box-shadow:0 0 0 16px rgba(198,242,107,0)}100%{box-shadow:0 14px 34px -16px rgba(150,240,140,.55)}}

/* Screen C: the intro line under the headline; Back is always there */
#eligibility .ex .el-intro{max-width:46ch}

/* Screen D: the banner, the share button, the promise */
.ofr{padding-bottom:clamp(56px,9vw,112px)}
.ofr .fn{max-width:62ch}
/* the promise: Vishak on the right, in the dark, like the old hero */
#promise{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(92svh,860px);background:var(--bg0)}
#promise .wrap{position:relative;z-index:1}
.ofr .sec-h{margin:0;max-width:760px}
#ofrH{outline:none}
#promise .hero-ph img{object-position:50% 14%}
@media(max-width:899px){
  #promise{align-items:flex-end;min-height:0}
  #promise .hero-ph{left:0;bottom:auto;width:100%;height:62svh}
  #promise .hero-ph img{opacity:.36;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}
  #promise .wrap{padding-top:34svh}
}

#stack{--acc:var(--teal)}

.lead-n{font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.025em;line-height:1.05;color:var(--head)}
#lead .sf-who{margin-top:clamp(40px,6vw,72px)}

/* the price and the payment */
#join{--acc:var(--lime);background:radial-gradient(50% 30% at 15% 40%,rgba(198,242,107,.05) 0%,rgba(198,242,107,0) 70%),var(--bg0)}
#join .eyebrow{margin-bottom:22px}
.join-l{max-width:46ch}
.join-need{margin-top:clamp(40px,6vw,64px)}
.join-need .sf-pre{margin-top:8px}
.join-pay{max-width:560px;margin-top:clamp(32px,5vw,56px)}
.join-pay .iv-btn{margin-top:24px}

/* test switch, top right (local preview, ?test or ?preview only): 1 video · 2 eligibility · 3 offer */
.tsw{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;z-index:200;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(12,14,17,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--hair2),0 8px 20px -10px rgba(0,0,0,.9)}
.tsw button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;font:500 .78rem/1 var(--font-mono);color:rgba(255,255,255,.7);cursor:pointer;-webkit-tap-highlight-color:transparent}
.tsw button:hover{background:rgba(232,230,223,.08);color:#fff}
.tsw button[aria-pressed="true"]{background:var(--teal);color:#071512}
.tsw button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* the mechanism's three lines read as the process, not as headlines: numbered step panels in the body font */
.mx-proc{justify-self:start;max-width:27rem;padding:16px 20px 18px;border-radius:16px;background:linear-gradient(160deg,rgba(46,230,197,.12),rgba(46,230,197,.02) 72%);box-shadow:inset 0 0 0 1px rgba(46,230,197,.38),inset 3px 0 0 var(--teal);text-align:left}
.mx-k{margin-bottom:8px;font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.mx-proc .mx-p{max-width:none;font-family:var(--font-sans);font-weight:600;font-stretch:100%;font-size:clamp(1.12rem,1.8vw,1.4rem);line-height:1.3;letter-spacing:-.01em;color:#f3e9d2}
.mx-proc .mx-p span{margin-top:4px;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--teal)}
.mx-proc .mx-s{margin-top:8px;font-size:.95rem;color:rgba(255,255,255,.72)}
@media(max-width:959px){.mx-proc{justify-self:center;text-align:left}}

/* the roadmap box: three small cards, number on top, words underneath */
.rm-band{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px}
.rm-g{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px 16px}
.rm-n{font-size:40px;line-height:.9}
.rm-sum .rm-n{font-size:50px}
@media(min-width:960px){.rm-n{font-size:46px}.rm-sum .rm-n{font-size:58px}}
.rm-l{font-family:var(--font-sans);font-weight:600;font-size:.92rem;line-height:1.3;letter-spacing:0}
.rm-op{align-self:center;font-size:1.2rem}
.rm-eq,.rm-sum{grid-column:1/-1}
.rm-eq{justify-self:center}

/* the week outcomes: smaller, in the body font, highlighted */
.rm-out{width:fit-content;max-width:100%;margin-top:12px;padding:6px 12px;border-radius:9px;background:rgba(46,230,197,.1);box-shadow:inset 0 0 0 1px rgba(46,230,197,.28);font-family:var(--font-sans);font-weight:600;font-stretch:100%;font-size:17px;line-height:1.35;letter-spacing:-.005em;color:#f3e9d2}
@media(min-width:760px){.rm-out{font-size:19px}}
.rm-stop.on .rm-out{background:rgba(46,230,197,.18);box-shadow:inset 0 0 0 1px rgba(46,230,197,.5)}
.rm-last .rm-out{color:var(--teal)}

/* ============================================================
   INSIDE THE PROTOCOL: six deliverables as cards, each with its own picture.
   Dark glass, dot grid, thin wires, teal light. The last one (what he keeps) has the lit edge.
   Pictures come alive once the card arrives (.in); reduced motion keeps them still
   ============================================================ */
#stack{--acc:var(--teal);background:radial-gradient(60% 40% at 50% 0%,rgba(46,230,197,.07) 0%,rgba(46,230,197,0) 70%),radial-gradient(120% 70% at 50% 0%,#15181c 0%,var(--bg1) 55%,var(--bg0) 100%)}
.ip{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:ip}
@media(min-width:760px){.ip{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:16px}.ip-wide{grid-column:span 2}}
@media(min-width:1040px){.ip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ip-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:linear-gradient(170deg,#181b1f 0%,#111316 55%,#0c0e10 100%);box-shadow:inset 0 0 0 1px rgba(232,230,223,.08),inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.95);counter-increment:ip}
.ip-card[hidden]{display:none}
.ip-art{position:relative;height:200px;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(232,230,223,.07) 1px,transparent 1.4px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
@media(min-width:760px){.ip-art{height:220px}}
.ip-x{padding:6px 24px 26px}


.ip-x h3{margin-top:10px;font-family:var(--font-sans);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;line-height:1.25;color:#f3e9d2}
.ip-x p:not(.ip-k){margin-top:8px;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.66)}
/* the one he keeps: a lit edge */
.ip-hero{border:1.5px solid transparent;background:linear-gradient(170deg,#191c20 0%,#111316 55%,#0c0e10 100%) padding-box,conic-gradient(from 210deg at 50% 50%,#c6f26b,#2ee6c5,#4cc3ff,rgba(46,230,197,.15) 55%,rgba(46,230,197,.15) 80%,#c6f26b) border-box;box-shadow:0 0 60px -18px rgba(46,230,197,.45),0 30px 60px -40px rgba(0,0,0,.95)}
.ip-hero .ip-x h3{color:var(--teal)}
.ip-doc-k{display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* 01 · the baseline file: a stack of pages on a wire */
.ip-wire{position:absolute;top:50%;height:1px;width:32%;background:linear-gradient(90deg,transparent,rgba(46,230,197,.5))}
.ip-wire-l{left:0}
.ip-wire-r{right:0;transform:scaleX(-1)}
.ip-wire::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.ip-docs{position:absolute;left:50%;top:50%;width:156px;height:112px;translate:-50% -54%}
.ip-doc{position:absolute;inset:0;border-radius:12px;background:linear-gradient(165deg,#24282d,#16191c);box-shadow:inset 0 0 0 1px rgba(232,230,223,.1),0 16px 30px -14px rgba(0,0,0,.9)}
.ip-doc-b{transform:translate(14px,14px);opacity:.45}
.ip-doc-m{transform:translate(7px,7px);opacity:.7}
.ip-doc-f{padding:14px 14px 0;background:linear-gradient(165deg,#2a2f35,#1a1d21);box-shadow:inset 0 0 0 1px rgba(46,230,197,.35),0 0 30px -10px rgba(46,230,197,.4),0 16px 30px -14px rgba(0,0,0,.9)}
.ip-doc-t{display:block;margin-top:6px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:#f3e9d2}
.ip-doc-r{display:flex;gap:6px;margin-top:10px}
.ip-doc-r i{width:28px;height:9px;border-radius:5px;background:rgba(46,230,197,.18);box-shadow:inset 0 0 0 1px rgba(46,230,197,.35)}
.ip-doc-l{display:grid;gap:5px;margin-top:10px}
.ip-doc-l i{height:3px;border-radius:2px;background:rgba(232,230,223,.14)}
.ip-doc-l i+i{width:60%}
.ip-base.in .ip-doc-r i{animation:ipFill .5s var(--E) both}
.ip-base.in .ip-doc-r i:nth-child(2){animation-delay:.25s}
.ip-base.in .ip-doc-r i:nth-child(3){animation-delay:.5s}
@keyframes ipFill{from{background:rgba(46,230,197,0)}50%{background:var(--teal);box-shadow:0 0 10px var(--teal)}to{background:rgba(46,230,197,.18)}}

/* 02 · the glucose feedback loop: a reading, read in a loop */
.ip-ring{position:absolute;left:50%;top:48%;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 1px rgba(46,230,197,.25)}
.ip-ring-1{width:150px;height:150px}
.ip-ring-2{width:96px;height:96px;box-shadow:inset 0 0 0 1px rgba(232,230,223,.1)}
.ip-orbit{position:absolute;left:50%;top:48%;width:150px;height:150px;margin:-75px 0 0 -75px}
.ip-orbit i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
.ip-loop.in .ip-orbit{animation:ipSpin 6s linear infinite}
.ip-meter{position:absolute;left:50%;top:48%;width:44px;height:62px;translate:-50% -50%;border-radius:10px;background:linear-gradient(165deg,#2a2f35,#16191c);box-shadow:inset 0 0 0 1px rgba(232,230,223,.14)}
.ip-meter-s{position:absolute;left:7px;right:7px;top:8px;height:20px;border-radius:4px;background:rgba(46,230,197,.15);box-shadow:inset 0 0 0 1px rgba(46,230,197,.4)}
.ip-meter-b{position:absolute;left:50%;bottom:9px;width:12px;height:12px;margin-left:-6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(232,230,223,.25)}
@keyframes ipSpin{to{transform:rotate(360deg)}}

/* 03 · metabolic sequencing: three moves on one line, a pulse moving through them in order */
.ip-track{position:absolute;left:14%;right:14%;top:44%;height:1px;background:linear-gradient(90deg,rgba(46,230,197,.15),rgba(46,230,197,.55),rgba(46,230,197,.15))}
.ip-pulse{position:absolute;top:-3px;left:0;width:60px;height:7px;margin-left:-30px;border-radius:4px;background:radial-gradient(closest-side,#e9fff9,var(--teal) 40%,transparent);opacity:0}
.ip-seq.in .ip-pulse{animation:ipRun 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes ipRun{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.ip-node{position:absolute;top:44%;display:flex;flex-direction:column;align-items:center;gap:10px;translate:-50% -26px}
.ip-node.n1{left:14%}.ip-node.n2{left:50%}.ip-node.n3{left:86%}
.ip-node svg{width:52px;height:52px;padding:14px;border-radius:50%;background:linear-gradient(165deg,#262a30,#15181b);box-shadow:inset 0 0 0 1px rgba(232,230,223,.14),0 10px 24px -10px rgba(0,0,0,.9);fill:none;stroke:rgba(232,230,223,.75);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ip-node b{padding:3px 10px;border-radius:999px;background:rgba(12,14,17,.9);box-shadow:inset 0 0 0 1px rgba(232,230,223,.12);font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.75)}
.ip-seq.in .ip-node svg{animation:ipLit 4.5s ease infinite}
.ip-seq.in .ip-node.n1 svg{animation-delay:.15s}.ip-seq.in .ip-node.n2 svg{animation-delay:1.95s}.ip-seq.in .ip-node.n3 svg{animation-delay:3.75s}
@keyframes ipLit{0%,100%{box-shadow:inset 0 0 0 1px rgba(232,230,223,.14),0 10px 24px -10px rgba(0,0,0,.9);stroke:rgba(232,230,223,.75)}8%,30%{box-shadow:inset 0 0 0 1.5px var(--teal),0 0 26px -4px rgba(46,230,197,.7);stroke:var(--teal)}}
@media(max-width:520px){.ip-node svg{width:46px;height:46px;padding:12px}.ip-node b{font-size:.56rem;padding:3px 7px}.ip-track{left:16%;right:16%}.ip-node.n1{left:16%}.ip-node.n3{left:84%}}

/* 04 · the family kitchen fit: one table, one plate, everyone at it */
.ip-table{position:absolute;left:50%;top:48%;width:170px;height:170px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(46,230,197,.06),transparent);box-shadow:inset 0 0 0 1px rgba(232,230,223,.1)}
.ip-table-2{width:112px;height:112px;background:none;box-shadow:inset 0 0 0 1px rgba(46,230,197,.22)}
.ip-plate{position:absolute;left:50%;top:48%;translate:-50% -50%}
.ip-plate svg{display:block;width:58px;height:58px;padding:9px;border-radius:50%;background:linear-gradient(165deg,#2a2f35,#16191c);box-shadow:inset 0 0 0 1px rgba(46,230,197,.4),0 0 28px -6px rgba(46,230,197,.5);fill:none;stroke:var(--teal);stroke-width:1.3}
.ip-seat{position:absolute;left:50%;top:48%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:linear-gradient(165deg,#2a2f35,#16191c);box-shadow:inset 0 0 0 1px rgba(232,230,223,.18)}
.ip-seat.s1{transform:translate(-85px,0)}.ip-seat.s2{transform:translate(0,-85px)}.ip-seat.s3{transform:translate(85px,0)}
.ip-seat.you{width:auto;height:auto;margin:0;padding:3px 10px;translate:-50% -50%;transform:translate(0,85px);border-radius:999px;background:var(--teal);box-shadow:0 0 18px -2px rgba(46,230,197,.7);font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#071512}
.ip-kit.in .ip-table-2{animation:ipBreathe 4s ease-in-out infinite}
@keyframes ipBreathe{50%{box-shadow:inset 0 0 0 1px rgba(46,230,197,.5),0 0 30px -10px rgba(46,230,197,.5)}}

/* 05 · the adherence radar: a sweep every day, each check-in a ping */
.ip-scope{position:absolute;left:50%;top:47%;width:160px;height:160px;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 26px,rgba(46,230,197,.16) 26px 27px);box-shadow:inset 0 0 0 1px rgba(46,230,197,.3)}
.ip-scope::before,.ip-scope::after{content:"";position:absolute;background:rgba(46,230,197,.12)}
.ip-scope::before{left:50%;top:0;bottom:0;width:1px}
.ip-scope::after{top:50%;left:0;right:0;height:1px}
.ip-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(46,230,197,.4),rgba(46,230,197,0) 70deg,transparent);opacity:0}
.ip-radar.in .ip-sweep{opacity:1;animation:ipSpin 4s linear infinite}
.ip-ping{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);opacity:.25}
.ip-ping.p1{left:70%;top:24%}.ip-ping.p2{left:82%;top:58%}.ip-ping.p3{left:56%;top:80%}.ip-ping.p4{left:22%;top:66%}.ip-ping.p5{left:30%;top:28%}
.ip-radar.in .ip-ping{animation:ipPing 4s ease-out infinite}
.ip-radar.in .ip-ping.p1{animation-delay:.4s}.ip-radar.in .ip-ping.p2{animation-delay:1.2s}.ip-radar.in .ip-ping.p3{animation-delay:1.9s}.ip-radar.in .ip-ping.p4{animation-delay:2.7s}.ip-radar.in .ip-ping.p5{animation-delay:3.5s}
@keyframes ipPing{0%{opacity:1;transform:scale(1.6)}40%,100%{opacity:.25;transform:scale(1)}}
.ip-core{position:absolute;left:50%;top:50%;translate:-50% -50%}
.ip-core svg{display:block;width:40px;height:40px;padding:9px;border-radius:50%;background:linear-gradient(165deg,#2a2f35,#16191c);box-shadow:inset 0 0 0 1px rgba(46,230,197,.45);fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ip-chip{position:absolute;right:16px;top:18px;padding:4px 10px;border-radius:999px;background:rgba(12,14,17,.9);box-shadow:inset 0 0 0 1px rgba(46,230,197,.3);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* 06 · the day-100 evidence file: two reports, same lab, and a seal */
.ip-rep{position:absolute;top:50%;width:104px;height:120px;padding:14px 12px;translate:0 -54%;border-radius:8px;background:linear-gradient(180deg,#efece4,#ddd8cc);box-shadow:0 20px 34px -16px rgba(0,0,0,.95)}
.ip-rep b{display:block;margin-top:6px;font-family:var(--font-sans);font-weight:600;font-size:.82rem;color:#2a2c30}
.ip-rep .ip-doc-k{color:#56585d}
.ip-rep.r0{left:calc(50% - 128px);transform:rotate(-5deg);opacity:.82}
.ip-rep.r1{left:calc(50% + 24px);transform:rotate(3deg)}
.ip-val{display:block;height:20px;margin-top:22px;border-radius:4px;background:rgba(42,44,48,.16)}
.ip-blank{background:none;border-bottom:2px solid #2a2c30;border-radius:0}
.ip-arrow{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:1}
.ip-arrow svg{display:block;width:30px;height:30px;padding:6px;border-radius:50%;background:#0c0e11;box-shadow:inset 0 0 0 1px rgba(46,230,197,.5);fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ip-seal{position:absolute;left:calc(50% + 100px);top:calc(50% - 82px)}
.ip-seal svg{display:block;width:54px;height:54px;filter:drop-shadow(0 0 14px rgba(46,230,197,.55))}
.ip-seal-b{fill:#0c0e11;stroke:var(--teal);stroke-width:1.5}
.ip-seal-c{fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
html.rv-on .ip-ev .ip-seal{opacity:0;transform:scale(1.5) rotate(-20deg)}
html.rv-on .ip-ev.in .ip-seal{opacity:1;transform:none;transition:opacity .35s ease .9s,transform .5s cubic-bezier(.2,.9,.3,1.2) .9s}
html.rv-on .ip-ev .ip-seal-c{stroke-dashoffset:24}
html.rv-on .ip-ev.in .ip-seal-c{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease 1.4s}

/* cards arrive one after another */
html.rv-on .ip-card:nth-child(2){transition-delay:.08s}html.rv-on .ip-card:nth-child(3){transition-delay:.16s}
html.rv-on .ip-card:nth-child(4){transition-delay:.08s}html.rv-on .ip-card:nth-child(5){transition-delay:.16s}html.rv-on .ip-card:nth-child(6){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){html.rv-on .ip-ev .ip-seal{opacity:1;transform:none}html.rv-on .ip-ev .ip-seal-c{stroke-dashoffset:0}}

/* who's leading this: the portrait with four facts under it; the interview, name, sub-line and story beside it */
.ld{display:grid;gap:clamp(36px,5vw,56px)}
@media(min-width:960px){.ld{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.ld-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 8%;border-radius:24px;filter:grayscale(1) contrast(1.08);box-shadow:inset 0 0 0 1px var(--hair),0 40px 80px -40px rgba(0,0,0,.95)}
.ld-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:600px){.ld-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ld-facts li{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;border-radius:16px;background:linear-gradient(160deg,rgba(46,230,197,.08),rgba(46,230,197,.01) 70%);box-shadow:inset 0 0 0 1px rgba(46,230,197,.28)}
.ld-facts b{font-family:var(--font-display);font-weight:800;font-stretch:66%;font-size:clamp(2rem,3.4vw,2.5rem);line-height:.9;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.ld-facts span{font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.7)}
.ld-iv{margin:0 0 clamp(26px,3vw,36px)}
.ld-iv img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%;border-radius:20px;box-shadow:inset 0 0 0 1px var(--hair),0 30px 60px -36px rgba(0,0,0,.95)}
.ld-iv figcaption{margin-top:10px;font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.62)}
.ld-sub{margin-top:8px;font-size:1.05rem;line-height:1.45;color:var(--teal)}
.ld-body{max-width:62ch}
.ld-body p{margin-top:16px;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.84)}
.ld-body:empty{display:none}
/* a proof card's one-line story */
.pc-nt{margin-top:8px;font-size:.92rem;line-height:1.45;color:var(--ink)}

/* ============================================================
   SCREEN 1 · the headline, the subhead, then the two questions; the video under them once answered
   ============================================================ */
.gate-hd{display:grid;justify-items:center;gap:clamp(12px,2vh,20px)}
.gate-h span+span{background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--head)}
.gate-s{font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.45rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.025em;background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent;animation:in .9s var(--E) .08s both}
/* the video under the questions: no headline of its own */
.entry.vsl-scr .wrap{padding-top:clamp(20px,3vh,36px)}
.entry.vsl-scr .entry-vid{margin-top:0}
@media(min-width:900px){.entry.vsl-scr .wrap{align-items:center}}

/* the offer's promise: the citation, really small */
.fn-xs{margin-top:20px;max-width:70ch;font-size:.66rem;line-height:1.5;letter-spacing:.01em;color:rgba(255,255,255,.4)}
.fn-xs .lnk{font-weight:500;color:rgba(255,255,255,.5)}

/* ============================================================
   INSIDE THE PROTOCOL · a big number in the top corner of every card, and "Get Access »" at its foot
   ============================================================ */
.ip-card::before{content:counter(ip,decimal-leading-zero);position:absolute;top:14px;left:20px;z-index:2;font-family:var(--font-display);font-weight:800;font-stretch:78%;font-size:2.5rem;line-height:1;letter-spacing:-.04em;background-image:linear-gradient(180deg,#f3e9d2 0%,rgba(243,233,210,.35) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.ip-hero::before{background-image:var(--g-go)}
.ip-x{display:flex;flex-direction:column;flex:1}
.ip-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;padding-top:14px;font-family:var(--font-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;color:var(--teal);text-decoration:none}
.ip-go span{transition:transform .3s var(--E)}
.ip-go:hover span,.ip-go:focus-visible span{transform:translateX(3px)}
.ip-go:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ============================================================
   ELIGIBILITY · on the offer now, right above the price
   ============================================================ */
#eligibility{padding-block:clamp(80px,12vw,150px)}
#eligibility .ex{margin-top:0}
.vd-ok .vd-ic{display:block;width:52px;height:52px;margin-bottom:14px}
.vd-ok .vd-ic svg{width:100%;height:100%;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vd-ok .vd-ic circle{stroke:rgba(46,230,197,.35)}
.vd-ok .el-q{color:var(--teal)}

/* ============================================================
   THE PRICE · the whole protocol on one card above the number; the pay button shut until he is eligible
   ============================================================ */
.sm{max-width:640px;margin-bottom:clamp(48px,7vw,80px);padding:clamp(22px,4vw,34px);border-radius:24px;background:linear-gradient(170deg,#181b1f 0%,#111316 60%,#0c0e10 100%);box-shadow:inset 0 0 0 1px rgba(232,230,223,.08),0 30px 60px -40px rgba(0,0,0,.95)}
.sm-k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.sm-h{margin-top:10px;font-family:var(--font-display);font-weight:800;font-stretch:84%;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.02;letter-spacing:-.03em;color:var(--head)}
.sm-l{list-style:none;margin:18px 0 0;padding:0}
.sm-l li{position:relative;display:grid;gap:2px;padding:12px 0 12px 34px;border-top:1px solid rgba(232,230,223,.08)}
.sm-l li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:50%;background:rgba(46,230,197,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ee6c5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/14px no-repeat}
.sm-l b{font-family:var(--font-sans);font-weight:600;font-size:1rem;line-height:1.3;color:#f3e9d2}
.sm-l span{font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.55)}
.sm-l .sm-g b{color:var(--teal)}
.join-lock{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.7)}
.join-lock svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.join-lock .lnk{color:var(--teal);white-space:nowrap}
#join.is-locked .iv-btn{background:rgba(232,230,223,.07);color:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(232,230,223,.1);cursor:not-allowed}
.chk .lnk{color:var(--teal)}
/* screen 1 with the video open: one background from the headline to the button, no seam, no half-cut photo behind the video */
html.js[data-scr="video"] #gate{background:radial-gradient(60% 50% at 85% 15%,rgba(157,125,255,.13) 0%,rgba(157,125,255,0) 70%),var(--bg1)}
html.js[data-scr="video"] #hero{background:radial-gradient(55% 45% at 5% 80%,rgba(46,230,197,.10) 0%,rgba(46,230,197,0) 70%),linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%)}
#hero .hero-ph{display:none}
/* the footer disclaimer: one sentence per line */
.ft-d span{display:block}
.ft-d span+span{margin-top:4px}
/* ============================================================
   SCREEN 1 · the headline: big, tall and condensed. The promise line is lit with the brand gradient
   ============================================================ */
/* Exactly three lines, never wrapped. Each is sized to fill the headline's width: lines 1 and 2 share one size,
   line 3 (the promise) its own. The divisors are each line's measured width in em in Archivo 66%, plus ~3% to spare:
   line 2 is 13.57em at weight 900, line 3 is 23.41em at weight 800. Change the words and these numbers need re-measuring. */
.gate-big{width:100%;max-width:1180px;container-type:inline-size;font-family:var(--font-display);font-stretch:66%;line-height:1;letter-spacing:-.005em;word-spacing:.08em;text-transform:none}
.gate-big span{display:block;white-space:nowrap!important}
.gate-big .gb-a{font-weight:900;font-size:min(5.4rem,calc((100vw - 32px) / 14));font-size:min(5.4rem,calc(100cqw / 14));background-image:linear-gradient(180deg,#fbf3df 0%,#ece2ca 60%,#c9bfa6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate-big .gb-a+.gb-a{margin-top:.04em}
.gate-big .gb-b{margin-top:.5em;font-weight:800;font-size:min(3.1rem,calc((100vw - 32px) / 24.1));font-size:min(3.1rem,calc(100cqw / 24.1));background-image:var(--g-go);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(46,230,197,.25))}
.gate-w{gap:clamp(30px,5vh,52px)}

/* the video's own headline, above the player */
.vsl-hd{display:grid;gap:8px;margin-bottom:clamp(16px,2.4vw,24px);text-align:center;justify-items:center}
.vsl-h{max-width:24ch;font-family:var(--font-display);font-weight:800;font-stretch:76%;font-size:clamp(1.6rem,5.6vw,2.7rem);line-height:1.02;letter-spacing:-.025em;color:var(--head);outline:none;text-wrap:balance}
.vsl-s{max-width:44ch;font-size:clamp(.98rem,1.6vw,1.1rem);line-height:1.45;color:rgba(255,255,255,.78)}
html.js[data-scr="video"] #hero .wrap{padding-top:clamp(40px,6vh,72px)}
/* the roadmap: what runs under every week, as its own block above the stops */
.rm-every{display:flex;gap:12px;align-items:center;margin:0 0 22px;padding:14px 16px;border-radius:14px;background:linear-gradient(100deg,rgba(46,230,197,.16),rgba(46,230,197,.05));box-shadow:inset 0 0 0 1px rgba(46,230,197,.45),0 0 26px -10px rgba(46,230,197,.5);font-family:var(--font-sans);font-weight:600;font-size:16px;line-height:1.35;color:#f3e9d2}
.rm-every svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:760px){.rm-every{font-size:17px}}