/* ============================================================
   BASELINE — metabolic assessment funnel
   Design system: CLINICAL EDITORIAL (shared with the Moopar
   Method proposal). Printed paper, hairline rules, one red
   accent, one jade for what has already moved.
   Every legacy token name below still resolves, so the inline
   styles in index.html keep working untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Surfaces */
  --paper:#f2f0ea; --sheet:#fbfaf6; --fog:#e7e5de; --stone:#d6d3ca;
  --night:#131313; --night2:#1b1b1a;
  /* Ink ramp */
  --ink:#131313; --ink2:#57544e; --ink3:#8c887f; --ink4:#b9b5ac;
  /* Hairlines */
  --hair:rgba(19,19,19,.12); --hair2:rgba(19,19,19,.24);
  --oh:rgba(242,240,234,.13); --oh2:rgba(242,240,234,.3);
  /* Accents — one red, one jade, one sun. Never more. */
  --red:#e02b16; --redv:#ff3a22; --red-deep:#a81b09;
  --blue:#1024d6; --jade:#00996b; --jade-v:#00c489; --sun:#e09400;

  /* ---- Legacy aliases (index.html inline styles depend on these) ---- */
  --ink-soft:#57544e;
  --muted:#57544e; --faint:#8c887f;
  --sand:#f2f0ea; --bone:#fbfaf6; --white:#ffffff;
  --line:rgba(19,19,19,.12); --line-strong:rgba(19,19,19,.24);
  --teal-900:#a81b09; --teal-700:#e02b16; --teal-500:#ff3a22;
  --teal-200:rgba(19,19,19,.24); --teal-050:rgba(224,43,22,.07);
  --green-600:#00996b; --green-500:#00c489; --green-050:rgba(0,153,107,.08);
  --watch:#e09400; --watch-050:rgba(224,148,0,.12);
  --high:#e02b16; --high-050:rgba(224,43,22,.08);
  --focus:#1024d6;

  /* Type */
  --font-display:'Archivo', Helvetica, Arial, sans-serif;
  --font-sans:'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Spacing */
  --gut:clamp(20px,4.6vw,72px);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Radii — the system is square. Only pills stay round. */
  --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:100px;

  /* Elevation — paper lift, never a glow */
  --e-1:0 1px 1px rgba(19,19,19,.03), 0 14px 28px -24px rgba(19,19,19,.3);
  --e-2:0 1px 1px rgba(19,19,19,.04), 0 22px 44px -30px rgba(19,19,19,.4);
  --e-3:0 1px 1px rgba(19,19,19,.05), 0 36px 64px -32px rgba(19,19,19,.52);

  /* Motion — slow, soft, precise */
  --E:cubic-bezier(.22,1,.32,1);
  --ease:cubic-bezier(.22,1,.32,1); --dur:260ms;
}

@media (prefers-reduced-motion: reduce){
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
  body.rv [data-rv]{opacity:1 !important; transform:none !important; filter:none !important;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
/* paper grain — printed, not rendered */
body::before{
  content:""; position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;}
/* author display rules (e.g. .path-node) outrank the UA sheet, so hidden
   has to be enforced here or a [hidden] node would still paint */
[hidden]{display:none !important;}
::selection{background:var(--ink); color:var(--paper);}
*:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}

.wrap{width:100%; max-width:1280px; margin:0 auto; padding-inline:var(--gut);}
.wrap-narrow{width:100%; max-width:720px; margin:0 auto; padding-inline:var(--gut);}
.serif{font-family:var(--font-display);}
.metric{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.04em;}

h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700;
  letter-spacing:-.035em; line-height:1; text-wrap:balance;}

/* ---------- View routing ---------- */
.view{display:none;}
.view.active{display:block;}

/* ---------- Scroll reveal ---------- */
/* armed by app.js only when IntersectionObserver exists, so a JS
   failure can never leave the page blank */
body.rv [data-rv]{opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity 1.05s var(--E), transform 1.05s var(--E), filter 1.05s var(--E);}
body.rv [data-rv].in{opacity:1; transform:none; filter:none;}
body.rv [data-rv="2"]{transition-delay:.08s;}
body.rv [data-rv="3"]{transition-delay:.16s;}
body.rv [data-rv="4"]{transition-delay:.24s;}

/* landing entrance — runs on every view activation, no JS */
@keyframes riseIn{from{opacity:0; transform:translateY(20px); filter:blur(5px);} to{opacity:1; transform:none; filter:none;}}
.view.active .ga-eyebrow,
.view.active .ga-head,
.view.active .ga-sub,
.view.active .ga-video,
.view.active .ga-ack,
.view.active .ga-cta{animation:riseIn .95s var(--E) both;}
.view.active .ga-head{animation-delay:.06s;}
.view.active .ga-sub{animation-delay:.12s;}
.view.active .ga-video{animation-delay:.1s;}
.view.active .ga-ack{animation-delay:.2s;}
.view.active .ga-cta{animation-delay:.26s;}
@media(prefers-reduced-motion:reduce){.view.active *{animation:none !important;}}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:.62rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink3);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:17px 30px; border-radius:var(--r-pill); border:1px solid transparent;
  font-family:var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.35;
  text-align:center; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .45s var(--E), color .45s var(--E),
    border-color .45s var(--E), transform .3s var(--E);
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--red); color:var(--paper);}
.btn-primary:active{background:var(--red-deep); transform:scale(.98);}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-secondary:hover{background:var(--ink); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--ink); padding:10px 6px; letter-spacing:.1em;}
.btn-ghost:hover{color:var(--red);}
.btn-lg{font-size:.78rem; padding:19px 34px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn.nudge{animation:btnNudge 2.4s var(--E) infinite;}
@keyframes btnNudge{
  0%,100%{box-shadow:0 0 0 0 rgba(224,43,22,0);}
  55%{box-shadow:0 0 0 8px rgba(224,43,22,0);}
  12%{box-shadow:0 0 0 0 rgba(224,43,22,.32);}
}
@media(prefers-reduced-motion:reduce){.btn.nudge{animation:none;}}
.lucide{width:1em; height:1em; stroke-width:2; vertical-align:-2px; flex:none;}

/* ---------- Read progress + edge mark ---------- */
.read-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:90; pointer-events:none;}
.read-progress i{display:block; height:100%; width:0; background:var(--red);}
.edge{
  position:fixed; top:50%; left:16px; z-index:40; pointer-events:none;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--font-display); font-weight:600; font-size:.62rem;
  letter-spacing:.44em; text-transform:uppercase; color:var(--ink4); white-space:nowrap;
}
@media(max-width:1240px){.edge{display:none;}}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:80; background:transparent;
  border-bottom:1px solid transparent;
  transition:background .6s var(--E), border-color .6s var(--E), backdrop-filter .6s var(--E);}
.nav.stuck{background:rgba(242,240,234,.9); backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%); border-bottom-color:var(--hair);}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0;}
.brand .brand-logo{height:30px; width:auto; display:block; flex:none;}
.brand .wm{font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); line-height:1; white-space:nowrap;}
.nav-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.nav-right .tag{font-family:var(--font-display); font-weight:700; font-size:.56rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--red); line-height:1;}
.nav .secure{font-family:var(--font-mono); font-size:.64rem; color:var(--ink3);
  display:inline-flex; align-items:center; gap:7px;}
.nav .secure .lucide{color:var(--ink3); width:13px; height:13px;}

/* ============================================================
   LANDING  (stage: RELIEF · one fear-acknowledgment line)
   ============================================================ */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,60px);}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; column-gap:clamp(32px,4vw,64px); row-gap:0;
  align-items:center;
  grid-template-areas:
    "eyebrow video"
    "head    video"
    "sub     video"
    "ack     video"
    "cta     video";}
/* the qualifier line. It is the first thing he reads, and it has one job:
   he recognises himself in it before the headline asks him anything. */
.ga-eyebrow{grid-area:eyebrow; align-self:end; display:flex; align-items:center; gap:12px;
  width:100%; padding-top:14px; border-top:1px solid var(--ink);
  font-size:.7rem; letter-spacing:.2em; color:var(--ink); font-weight:700;}
.ga-eyebrow::before{content:""; flex:none; width:9px; height:9px; background:var(--red);}
.ga-head{grid-area:head;}
.ga-sub{grid-area:sub;}
.ga-video{grid-area:video; align-self:center;}
.ga-ack{grid-area:ack;}
.ga-cta{grid-area:cta; align-self:start;}
.hero h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.1rem,1.05rem+4.4vw,4rem); line-height:.95;
  letter-spacing:-.05em; margin:22px 0 0; color:var(--ink); text-wrap:balance;}
.hero .sub{font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.5; color:var(--ink);
  font-weight:500; letter-spacing:-.012em; margin:18px 0 0; max-width:31ch;}
.hero .ack{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:22px 0 0; max-width:46ch;
  padding-left:16px; border-left:2px solid var(--red); font-style:normal;}
.hero-cta{display:flex; gap:14px; margin-top:28px; align-items:center; flex-wrap:wrap;}
.hero-cta .micro{font-size:.86rem; color:var(--ink3);}
.reassure{display:flex; gap:22px; margin-top:26px; flex-wrap:wrap;}
.reassure span{display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink2);}
.reassure .lucide{color:var(--jade);}

/* video frames */
.hero-video-frame{position:relative; overflow:hidden; border:0; background:var(--night);
  aspect-ratio:16/9; box-shadow:0 40px 80px -48px rgba(19,19,19,.6);}
.video{position:relative; overflow:hidden; border:0; background:var(--night);
  box-shadow:var(--e-2); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;}
.video video, .video iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;}
.video .play{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:14px; color:var(--paper); text-align:center; padding:24px;}
.video .play-btn{width:74px; height:74px; border-radius:50%; background:var(--redv);
  color:var(--paper); display:flex; align-items:center; justify-content:center;
  transition:transform .6s var(--E);}
.video:hover .play-btn{transform:scale(1.08);}
.video .play-btn .lucide{width:26px; height:26px; margin-left:3px;}
.video .cap{font-family:var(--font-display); font-weight:600; font-size:.58rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(242,240,234,.55);}

/* trust strip — three cards, each with a red rule that draws itself in
   on reveal and runs the full width on hover */
.trust{background:var(--fog); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.trust-in{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,16px);
  margin:clamp(28px,4vw,44px) auto; max-width:900px; justify-content:center;}
.stat{position:relative; text-align:center; background:var(--sheet); border:1px solid var(--hair);
  border-radius:0; padding:clamp(16px,2.2vw,24px) clamp(14px,2vw,22px); box-shadow:var(--e-1);
  transition:transform .6s var(--E), box-shadow .6s var(--E), border-color .5s var(--E);}
.stat::before{content:""; position:absolute; left:50%; top:-1px; width:0; height:2px;
  background:var(--red); transform:translateX(-50%); transition:width .9s var(--E);}
.trust.in .stat::before{width:28px;}
.trust.in .stat:nth-child(2)::before{transition-delay:.12s;}
.trust.in .stat:nth-child(3)::before{transition-delay:.24s;}
.stat:hover{transform:translateY(-3px); border-color:var(--hair2); box-shadow:var(--e-2);}
.stat:hover::before{width:calc(100% + 2px); transition-delay:0s;}
.stat .n,.stat .l{display:block;}
/* if the reveal layer never armed, the rule still shows */
body:not(.rv) .stat::before{width:28px;}
@media(prefers-reduced-motion:reduce){
  .stat::before{width:28px;}
  .stat:hover{transform:none;}
}
.stat .n{font-family:var(--font-mono); font-weight:500; font-size:clamp(1.05rem,2.4vw,1.7rem);
  font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:-.05em; line-height:1;}
.stat .l{font-family:var(--font-display); font-weight:600; font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3); margin-top:10px; line-height:1.4;}

/* ============================================================
   QUESTIONNAIRE  (stage: CONTROL · agency-building)
   ============================================================ */
.assess{min-height:calc(100vh - 66px); display:flex; flex-direction:column;}
.progress{background:var(--paper); border-bottom:1px solid var(--hair); position:sticky; top:66px; z-index:40;}
.progress-in{padding:16px 0 14px;}
.progress-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px;}
.progress-step{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink3);}
.progress-back{background:none; border:0; color:var(--ink); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; padding:4px 2px;}
.progress-back:hover{color:var(--red);}
.progress-track{height:2px; background:var(--hair2); overflow:hidden;}
.progress-fill{height:100%; background:var(--red); width:0; transition:width .9s var(--E);}

.q-stage{flex:1; display:flex; align-items:flex-start; padding:clamp(28px,4.4vw,56px) 0 clamp(48px,7vw,96px);}
@media(min-width:900px){.q-stage{align-items:center;}}
.q-card{max-width:680px; margin:0 auto; width:100%;}
.q-screen{display:none;}
.q-screen.active{display:block; animation:riseIn .8s var(--E) both;}
.q-eyebrow{display:flex; align-items:center; gap:14px; padding-top:13px;
  border-top:1px solid var(--ink); font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  margin-bottom:clamp(20px,3vw,30px);}
.q-title{font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,1.1rem+1.8vw,2.3rem); line-height:1.05; letter-spacing:-.04em;
  margin:0; color:var(--ink); text-wrap:balance;}
.q-help{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:14px 0 0; max-width:54ch;}

.opts{display:flex; flex-direction:column; gap:10px; margin-top:clamp(24px,3.4vw,34px);}
.opt{position:relative; display:flex; align-items:center; gap:14px;
  padding:17px 20px; background:var(--sheet); border:1px solid var(--hair);
  border-radius:0; cursor:pointer; width:100%; text-align:left;
  font-family:var(--font-sans); font-size:1rem; font-weight:500; line-height:1.35; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .45s var(--E), background .45s var(--E), box-shadow .6s var(--E);}
.opt::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .55s var(--E);}
.opt:hover{border-color:var(--hair2); box-shadow:var(--e-1);}
.opt .mark{width:22px; height:22px; border-radius:0; border:1px solid var(--hair2);
  flex:0 0 22px; display:flex; align-items:center; justify-content:center;
  transition:background .4s var(--E), border-color .4s var(--E);}
.opt.check .mark{border-radius:0;}
.opt .mark .lucide{width:14px; height:14px; color:var(--paper); opacity:0;}
.opt.selected{border-color:var(--ink); background:var(--paper);}
.opt.selected::before{transform:scaleY(1);}
.opt.selected .mark{border-color:var(--ink); background:var(--ink);}
.opt.selected .mark .lucide{opacity:1;}
.opt .sub{display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:0;
  color:var(--ink3); margin-top:5px;}

/* conditional follow-ups inside a step (insulin type · DKA history) */
.sub-q{margin-top:clamp(22px,3vw,30px); padding-top:clamp(18px,2.4vw,24px); border-top:1px solid var(--hair);}
.sub-q-title{display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.1rem); letter-spacing:-.02em; line-height:1.25; color:var(--ink);}
.opts-sub{margin-top:14px; gap:8px;}
.opts-sub .opt{padding:14px 18px; font-size:.94rem;}
#insulin-hint{color:var(--red); min-height:20px;}

/* precision (optional numbers) */
.precision{margin-top:26px; background:var(--sheet); border:1px solid var(--hair);
  border-radius:0; padding:clamp(20px,2.6vw,26px);}
.precision .badge{font-family:var(--font-display); font-weight:700; font-size:.54rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--jade); background:transparent;
  padding:0; border-radius:0; display:inline-block;}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px;}
.field label{display:block; font-family:var(--font-display); font-weight:600; font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px;}
.field .unit{color:var(--ink3); font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:0; text-transform:none;}
.field input{width:100%; font-family:var(--font-mono); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--hair2); border-radius:0;
  padding:13px 14px; transition:border-color .4s var(--E);}
.field input:focus{border-color:var(--ink); outline:none;}
.field input::placeholder{color:var(--ink4);}

.q-actions{display:flex; align-items:center; gap:16px; margin-top:clamp(26px,3.4vw,34px); flex-wrap:wrap;}
.q-actions .skip{background:none; border:0; color:var(--ink3); cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--hair2);}
.q-actions .skip:hover{color:var(--ink);}

/* contact capture (peak curiosity) */
.capture{max-width:580px; margin:0 auto; text-align:left;}
.capture .lock{width:44px; height:44px; border-radius:0; background:var(--sheet);
  border:1px solid var(--hair2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px;}
.capture .lock .lucide{width:20px; height:20px;}
.capture h2{font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,1.1rem+1.7vw,2.2rem); line-height:1.05; letter-spacing:-.04em;
  margin:0; color:var(--ink); text-wrap:balance;}
.capture p{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:14px 0 0; max-width:46ch;}
.capture .form{margin-top:28px; text-align:left;}
.capture .form .field-row label{display:block; font-family:var(--font-display); font-weight:600;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px;}
.capture .form .field-row{margin-bottom:16px;}
.capture .form input.text{width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--hair2); border-radius:0;
  padding:14px 16px; transition:border-color .4s var(--E);}
.capture .form input.text:focus{border-color:var(--ink); outline:none;}
.capture .form input.text::placeholder{color:var(--ink4);}
.phone{display:flex; gap:10px;}
.phone .cc{font-family:var(--font-mono); font-size:1rem; background:var(--white);
  border:1px solid var(--hair2); border-radius:0; padding:14px; color:var(--ink2);
  display:flex; align-items:center;}
.phone .cc-select{font-family:var(--font-mono); font-size:.92rem; background:var(--white);
  border:1px solid var(--hair2); border-radius:0; padding:14px 8px; color:var(--ink2);
  max-width:132px; cursor:pointer; appearance:menulist;}
.phone .cc-select:focus{border-color:var(--ink); outline:none;}
.phone input{flex:1; min-width:0; font-family:var(--font-mono); font-size:1rem; letter-spacing:.02em;
  background:var(--white); border:1px solid var(--hair2); border-radius:0; padding:14px 16px; color:var(--ink);}
.phone input:focus{border-color:var(--ink); outline:none;}
.capture .consent{display:flex; gap:10px; align-items:flex-start; margin-top:18px;
  font-size:.82rem; color:var(--ink2); line-height:1.55;}
.capture .consent input{margin-top:3px; accent-color:var(--ink);}
.capture .err{color:var(--red); font-size:.86rem; margin-top:10px; min-height:20px;}
.capture .btn{width:100%; justify-content:center; margin-top:22px;}
.capture .whatsapp-note{display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--font-mono); font-size:.66rem; color:var(--ink3);}
.capture .whatsapp-note .lucide{color:var(--ink3); width:13px; height:13px;}

/* ============================================================
   RESULT  (stage: HOPE → CERTAINTY)
   ============================================================ */
.result{padding:clamp(36px,5vw,64px) 0 clamp(56px,8vw,96px);}
.verdict{max-width:760px; margin:0 auto; text-align:left;}
.verdict .badge{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  padding:8px 0; border-radius:0; margin-bottom:18px; color:var(--ink3);
  border-top:1px solid var(--ink); width:100%;}
.verdict .badge.green{color:var(--jade); background:transparent;}
.verdict .badge.amber{color:var(--sun); background:transparent;}
.verdict .badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.verdict h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.85rem,1.05rem+3.4vw,3.4rem); line-height:.96; letter-spacing:-.048em;
  margin:0; color:var(--ink); text-wrap:balance;}
.verdict-support{font-size:1rem; line-height:1.66; color:var(--ink2);
  margin:20px 0 0; max-width:54ch; text-wrap:pretty;}
#possibility-wrap{text-align:left !important;}
#possibility-band{font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem,2.2vw,1.5rem); letter-spacing:-.03em; line-height:1.15;
  color:var(--ink); max-width:24ch;}
#salt-line{font-style:normal !important; color:var(--ink2) !important;
  padding-left:16px; border-left:2px solid var(--red); margin-inline:0 !important;}
#personal-paragraph{margin-inline:0 !important;}

/* ---- 2 · THE 90-DAY PATH (centerpiece) ---- */
.path{max-width:960px; margin:clamp(44px,6vw,72px) auto 0;}
.path-eyebrow{display:flex; align-items:center; gap:14px; text-align:left;
  padding-top:13px; border-top:1px solid var(--ink); color:var(--ink);
  font-size:.6rem; letter-spacing:.24em; margin-bottom:clamp(18px,2.4vw,26px);}
.path-eyebrow::before{content:"02"; font-family:var(--font-mono); font-weight:500;
  font-size:.66rem; letter-spacing:0; color:var(--red);}
.path-title{font-family:var(--font-display); font-weight:700; text-align:left;
  font-size:clamp(1.35rem,1.05rem+1.4vw,2.1rem); line-height:1.05; letter-spacing:-.04em;
  text-transform:uppercase; margin:0 0 clamp(30px,4vw,44px); color:var(--ink); text-wrap:balance;}
.path-track{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);}
.path-track.has-five{grid-template-columns:repeat(6,1fr);}
.path-node{position:relative;}
.node-rail{position:relative; height:30px; display:flex; align-items:center; justify-content:center;}
.node-rail::before, .node-rail::after{content:""; position:absolute; top:50%;
  transform:translateY(-50%); height:1px; width:calc(50% + 1px); background:var(--hair2);}
.node-rail::before{left:0;}
.node-rail::after{right:0;}
.path-node:first-child .node-rail::before{display:none;}
.path-node:last-child .node-rail::after{display:none;}
.path-node.is-here .node-rail::after{background:var(--red);}
.node-dot{position:relative; z-index:2; width:14px; height:14px; border-radius:0;
  background:var(--paper); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center; transition:none;}
.path-node.is-here .node-dot{border-color:var(--ink); background:var(--ink);
  box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--hair);}
.path-node.is-done .node-dot{border-color:var(--jade); background:var(--jade);}
.path-node.is-end .node-dot{width:24px; height:24px; border-color:var(--ink); background:var(--paper);}
.path-node.is-end .node-dot .lucide{width:13px; height:13px; color:var(--ink);}
.node-body{display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  text-align:left; margin-top:14px; padding:0 14px 0 0;}
.node-label{font-family:var(--font-display); font-weight:700; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); line-height:1.35;}
.node-sub{font-family:var(--font-mono); font-size:.62rem; line-height:1.5; color:var(--ink3); max-width:19ch;}
.path-node.is-done .node-label{color:var(--ink3);}
.path-node.is-done .node-sub{color:var(--ink4);}
.here-tag{margin-top:10px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper); background:var(--ink);
  border:0; border-radius:0; padding:6px 10px;}
.here-tag .lucide{width:11px; height:11px;}

/* ---- 3 · PROOF (one) ---- */
/* the founder-video wrapper carries an inline margin in index.html,
   so the air below the proof block is set from this side */
.proof-one{max-width:680px; margin:clamp(44px,6vw,72px) auto clamp(40px,5vw,64px);}
.proof-one-eyebrow{display:flex; align-items:center; gap:14px; text-align:left;
  padding-top:13px; border-top:1px solid var(--ink); color:var(--ink);
  font-size:.6rem; letter-spacing:.24em; margin-bottom:clamp(18px,2.4vw,26px);}
.proof-one-eyebrow::before{content:"03"; font-family:var(--font-mono); font-weight:500;
  font-size:.66rem; letter-spacing:0; color:var(--red);}
.proof-one-card{position:relative; background:var(--sheet); border:1px solid var(--hair2);
  border-radius:0; padding:clamp(22px,3vw,32px); box-shadow:var(--e-2);}
.proof-one-card::before{content:""; position:absolute; left:-1px; top:-1px; width:32px; height:2px; background:var(--red);}
.ba{display:flex; align-items:center; justify-content:flex-start; gap:clamp(18px,4vw,34px);}
.ba-col{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.ba-lbl{font-family:var(--font-display); font-weight:700; font-size:.52rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3);}
.ba-col.is-after .ba-lbl{color:var(--jade);}
.ba-val{font-family:var(--font-mono); font-weight:500; font-size:clamp(2rem,7vw,3rem);
  line-height:.9; letter-spacing:-.06em; color:var(--ink);}
.ba-col.is-after .ba-val{color:var(--jade);}
.ba-arrow{color:var(--ink4); display:flex;}
.ba-arrow .lucide{width:24px; height:24px;}
.proof-lab{margin-top:24px; border:1px dashed var(--hair2); border-radius:0;
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--ink3); background:var(--paper); text-align:center; padding:22px; font-size:.8rem;}
.proof-lab .lucide{width:24px; height:24px;}
.proof-lab-img{width:100%; display:block; border-radius:0; margin-top:24px; border:1px solid var(--hair);}
.proof-quote{font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,2vw,1.2rem);
  line-height:1.3; color:var(--ink); margin:24px 0 0; padding-left:16px;
  border-left:2px solid var(--red); letter-spacing:-.025em; text-wrap:pretty;}
.proof-who{font-family:var(--font-mono); font-size:.68rem; color:var(--ink3); margin-top:12px;}

/* ---- secondary CTA (mid) ---- */
.cta-mid{max-width:680px; margin:36px auto 0; text-align:left;}
.cta-mid-sub{font-family:var(--font-mono); font-size:.66rem; color:var(--ink3); margin:14px 0 0;}

/* ---- 4 · video caption ---- */
.video-cap{text-align:left; font-family:var(--font-mono); font-size:.66rem;
  color:var(--ink3); margin:14px 0 0;}

/* path → vertical on smaller screens */
@media(max-width:820px){
  .path-track, .path-track.has-five{grid-template-columns:1fr;}
  .path-node{display:grid; grid-template-columns:30px 1fr; gap:16px; align-items:start;}
  .node-rail{height:auto; width:30px; align-self:stretch; justify-content:flex-start;}
  .node-rail::after{display:none;}
  .node-rail::before{top:0; bottom:0; left:50%; transform:translateX(-50%);
    height:auto; width:1px; background:var(--hair2);}
  .path-node:first-child .node-rail::before{display:block; top:13px;}
  .path-node:last-child .node-rail::before{display:block; bottom:auto; height:13px;}
  .path-node.is-here .node-rail::after{display:none;}
  .node-dot{position:absolute; top:7px; left:50%; transform:translateX(-50%);}
  .node-body{text-align:left; align-items:flex-start; margin-top:0; padding:0 0 26px;}
  .node-sub{max-width:none;}
}

/* mechanism (belief-shift) */
.mechanism{max-width:720px; margin:48px auto 0; background:var(--sheet);
  border:1px solid var(--hair); border-radius:0; padding:clamp(26px,3.4vw,38px); box-shadow:var(--e-1);}
.mechanism .eyebrow{margin-bottom:14px;}
.mechanism h2{font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.15;
  letter-spacing:-.035em; text-transform:uppercase; margin:0 0 14px; color:var(--ink);}
.mechanism p{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:0 0 14px;}
.mechanism p:last-child{margin-bottom:0;}
.mechanism .keyline{color:var(--red); font-weight:600;}

/* proof — Bonnie's testimonial */
.proof{max-width:720px; margin:32px auto 0;}
.proof-card{background:var(--sheet); border:1px solid var(--hair2); border-radius:0;
  overflow:hidden; box-shadow:var(--e-2);}
.proof-img{width:100%; display:block; border-bottom:1px solid var(--hair);}
.result-video-wrap{max-width:720px; margin:clamp(40px,5vw,64px) auto 0;}
.result-video{aspect-ratio:16/9;}
.proof-video{position:relative; aspect-ratio:16/9; background:var(--night);
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
.proof-video video, .proof-video iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;}
.proof-video .play-btn{position:relative; z-index:2; width:62px; height:62px; border-radius:50%;
  background:var(--redv); color:var(--paper); display:flex; align-items:center;
  justify-content:center; transition:transform .6s var(--E);}
.proof-video:hover .play-btn{transform:scale(1.08);}
.proof-video .play-btn .lucide{width:24px; height:24px; margin-left:3px;}
.proof-body{padding:24px 28px;}
.proof-body .who{display:flex; align-items:center; gap:14px;}
.proof-body .avatar{width:44px; height:44px; border-radius:0; background:var(--fog);
  border:1px solid var(--hair); flex:0 0 44px;}
.proof-body .nm{font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);}
.proof-body .meta{font-family:var(--font-mono); font-size:.66rem; color:var(--ink3);}
.proof-body blockquote{font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  line-height:1.3; color:var(--ink); margin:18px 0 0; letter-spacing:-.025em;}

/* payment → booking */
.pay-section{max-width:720px; margin:clamp(40px,5vw,64px) auto 0; scroll-margin-top:90px;}
.pay-card{position:relative; background:var(--sheet); border:1px solid var(--hair2);
  border-radius:0; padding:clamp(24px,3.4vw,40px); box-shadow:var(--e-2);}
.pay-card::before{content:""; position:absolute; left:-1px; top:-1px; width:36px; height:2px; background:var(--red);}
.pay-card .eyebrow{display:flex; align-items:center; gap:14px; color:var(--ink);
  font-size:.6rem; letter-spacing:.24em; margin-bottom:14px;}
.pay-card .eyebrow::before{content:"04"; font-family:var(--font-mono); font-weight:500;
  font-size:.66rem; letter-spacing:0; color:var(--red);}
.pay-title{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,1.05rem+1.6vw,2.1rem); line-height:1; letter-spacing:-.045em;
  margin:0 0 14px; color:var(--ink);}
.pay-sub{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:0;}
.pay-form{margin-top:24px;}
.pay-form .field-row{margin-bottom:16px;}
.pay-form label{display:block; font-family:var(--font-display); font-weight:600; font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px;}
.pay-form .text{width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--hair2); border-radius:0;
  padding:14px 16px; transition:border-color .4s var(--E);}
.pay-form .phone{display:flex; gap:10px;}
.pay-form .phone .cc{font-family:var(--font-mono); font-size:1rem; background:var(--white);
  border:1px solid var(--hair2); border-radius:0; padding:14px; color:var(--ink2);
  display:flex; align-items:center;}
.pay-form .phone input{flex:1; min-width:0; font-family:var(--font-mono); font-size:1rem;
  background:var(--white); border:1px solid var(--hair2); border-radius:0;
  padding:14px 16px; color:var(--ink); transition:border-color .4s var(--E);}
.pay-form .text:focus, .pay-form .phone input:focus{border-color:var(--ink); outline:none;}
.pay-form .text::placeholder, .pay-form .phone input::placeholder{color:var(--ink4);}
.pay-form #pay-btn{width:100%; justify-content:center; margin-top:10px;}
.pay-fine{font-family:var(--font-mono); font-size:.68rem; color:var(--ink3); text-align:center; margin:16px 0 0;}
.pay-err{color:var(--red); font-size:.86rem; margin:2px 0 0; min-height:20px;}
.pay-retry{color:var(--ink2); font-size:.88rem; line-height:1.55; text-align:center; margin-top:14px;}
#pay-sub-five{margin:0 0 16px; font-size:.9rem; color:var(--ink2);}

/* his-data recap + the steps */
.pay-recap{font-size:.92rem; line-height:1.66; color:var(--ink2); background:var(--paper);
  border:0; border-left:2px solid var(--ink); border-radius:0; padding:14px 18px; margin:0 0 20px;}
.pay-steps{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--hair);}
.pay-steps li{font-size:.9rem; line-height:1.5; color:var(--ink2);
  padding:13px 0; border-bottom:1px solid var(--hair);}

/* reward beat — confirmation + calendar */
.success-line{display:flex; align-items:center; gap:14px; font-family:var(--font-display);
  font-weight:700; font-size:clamp(.95rem,2vw,1.15rem); line-height:1.3; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--paper); background:var(--jade);
  border:0; border-radius:0; padding:20px 22px;}
.success-line .lucide{color:var(--paper); flex:0 0 auto; width:22px; height:22px;}
.cal-embed{margin-top:22px; min-height:560px; border:1px solid var(--hair2);
  border-radius:0; overflow:hidden; background:var(--white);}

/* app handoff (Part 2) + WhatsApp step + success stories */
#app-handoff{margin-top:36px; padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--ink);
  scroll-margin-top:88px;}
#app-handoff .path-title{margin-bottom:10px;}
.handoff-sub{font-size:.95rem; line-height:1.66; color:var(--ink2); margin:0 0 22px; max-width:46ch;}
#whatsapp-step{margin-top:36px; background:var(--sheet); border:1px solid var(--hair2);
  border-radius:0; padding:clamp(24px,3vw,32px); text-align:left; scroll-margin-top:88px;
  box-shadow:var(--e-1); position:relative;}
#whatsapp-step::before{content:""; position:absolute; left:-1px; top:-1px; width:32px; height:2px; background:var(--jade);}
.wa-buttons{display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:20px;}
.wa-btn{display:flex; flex-direction:column; align-items:center; gap:3px;
  background:#25D366; color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.3;
  border-radius:var(--r-pill); padding:15px 26px; text-decoration:none; text-align:center;
  transition:background .4s var(--E), transform .3s var(--E);}
.wa-btn:hover{background:#1EBE57;}
.wa-btn:active{transform:scale(.98);}
.wa-btn .wa-main{display:inline-flex; align-items:center; gap:8px;}
.wa-btn .wa-main .lucide{width:16px; height:16px;}
.wa-btn .wa-sub{font-family:var(--font-mono); font-size:.62rem; letter-spacing:0;
  text-transform:none; opacity:.92; font-weight:400;}
#success-stories{margin-top:44px; border-top:1px solid var(--ink); padding-top:clamp(24px,3vw,32px);}
#success-stories .story{margin-top:26px;}
#success-stories .story-label{font-family:var(--font-display); font-weight:700; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink3); text-align:left; margin:0 0 12px;}

/* CTA band */
.cta-band{max-width:720px; margin:40px auto 0; background:var(--night); color:var(--paper);
  border-radius:0; padding:clamp(34px,4.4vw,52px); text-align:left; box-shadow:var(--e-3);}
.cta-band .eyebrow{color:rgba(242,240,234,.46);}
.cta-band h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,1.1rem+2vw,2.6rem); line-height:1; letter-spacing:-.045em;
  margin:14px 0 0; color:var(--paper);}
.cta-band p{color:rgba(242,240,234,.64); font-size:.95rem; line-height:1.66; margin:16px 0 28px; max-width:46ch;}
.cta-band .btn-primary{background:var(--paper); color:var(--ink);}
.cta-band .btn-primary:hover{background:var(--redv); color:var(--paper);}
.cta-band .fine{margin-top:18px; font-family:var(--font-mono); font-size:.66rem;
  color:rgba(242,240,234,.4); display:inline-flex; align-items:center; gap:8px;}
.cta-band .fine .lucide{width:14px; height:14px;}

/* sent confirmation */
.sent-toast{max-width:720px; margin:20px auto 0; background:var(--sheet);
  border:1px solid var(--jade); border-radius:0; padding:16px 22px;
  display:flex; align-items:center; gap:12px; font-size:.92rem; color:var(--ink2);}
.sent-toast .lucide{color:var(--jade); flex:0 0 auto;}

/* ---------- Footer ---------- */
.footer{background:var(--night); color:var(--paper); padding:clamp(48px,6vw,72px) 0 28px;
  margin-top:clamp(56px,7vw,88px);}
.footer-col{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.footer-logo{height:44px; width:auto; display:block; opacity:.8; margin-bottom:10px;}
.footer .wm{font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,3.4vw,2.2rem);
  letter-spacing:-.04em; text-transform:uppercase; color:var(--paper); line-height:1;}
.footer .ftag{font-family:var(--font-display); font-weight:600; font-size:.58rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(242,240,234,.4);}
.footer .fine{font-size:.8rem; color:rgba(242,240,234,.55); line-height:1.75; max-width:62ch;
  margin:10px auto 0; padding-top:20px; border-top:1px solid var(--oh); width:100%;}
.footer .copy{font-family:var(--font-mono); font-size:.62rem; color:rgba(242,240,234,.34); margin-top:6px;}
.footer a{color:rgba(242,240,234,.62); text-decoration:none;}
.footer a:hover{color:var(--paper);}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr; column-gap:0;
    grid-template-areas:"eyebrow" "head" "sub" "video" "ack" "cta";}
  .ga-eyebrow{align-self:auto;}
  .ga-video{margin-top:24px;}
  .fields{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .btn{width:100%;}
  .hero-cta{gap:12px;}
  .hero-cta .micro{width:100%; text-align:center;}
  .nav .secure span{display:none;}
  .brand .wm{font-size:.72rem;}
  .brand .brand-logo{height:26px;}
  .nav-right{flex-direction:row; align-items:center; gap:10px;}
  .trust-in{gap:8px;}
  .ba{flex-wrap:wrap; gap:16px;}
  .phone{gap:8px;}
  .phone .cc-select{max-width:112px; padding-inline:6px; font-size:.82rem;}
  .phone input{min-width:0;}
}
@media(max-width:380px){
  .hero h1{font-size:1.95rem;}
  .btn{font-size:.68rem; letter-spacing:.1em; padding:16px 20px;}
  .btn-lg{font-size:.7rem; padding:17px 20px;}
  .stat .n{font-size:1rem;}
}

/* ============================================================
   RESULT PAGE v2 — one path: verdict → 90-day number → how fast
   does your body respond → 5-Day Proof → Day 6 call.
   Light page, one dark "monitor" card carrying the numbers.
   Accent roles: --teal-* = possibility, --green-* = confirmation.
   Everything below is scoped to .r2-*.
   ============================================================ */

/* ---------- 1 · HERO (light, same surface as the landing) ---------- */
.r2-hero{padding:clamp(20px,3.4vw,44px) 0 clamp(24px,3.4vw,40px);}
.r2-hero-in{max-width:760px; margin-inline:auto;}
.r2-eyebrow{display:flex; align-items:center; gap:12px; width:100%;
  padding-top:13px; border-top:1px solid var(--ink); color:var(--ink);
  font-size:.58rem; letter-spacing:.22em;}
.r2-eyebrow::before{content:""; flex:none; width:8px; height:8px; background:var(--teal-700);}
.r2-head{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.45rem,1.05rem+2.4vw,2.6rem); line-height:1.02; letter-spacing:-.045em;
  margin:clamp(14px,2vw,20px) 0 0; color:var(--ink); text-wrap:balance;}
.r2-name{display:block; color:var(--teal-700);}
.r2-support{font-size:clamp(.94rem,1.5vw,1.02rem); line-height:1.6; color:var(--ink2);
  margin:clamp(10px,1.6vw,16px) 0 0; max-width:50ch;}

/* ---------- 2 · MONITOR CARD (the only dark surface) ---------- */
/* A matte instrument face: layered low-contrast gradients, no glow, no gloss.
   The sweep is the only thing that moves, and it moves slowly. */
.r2-monitor{position:relative; margin:clamp(18px,2.6vw,28px) 0 0; border-radius:var(--r-xl);
  box-shadow:var(--e-2); padding:28px 24px; color:rgba(255,255,255,.92); overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 92% 100%, rgba(0,196,137,.07) 0%, rgba(0,196,137,0) 62%),
    linear-gradient(168deg, #1d1d1b 0%, #161615 46%, #101010 100%);
  border:1px solid rgba(255,255,255,.07);}

/* the horizon rule: a fixed hairline the sweep crosses, so the movement
   reads as an instrument scanning rather than a loading bar */
.r2-monitor::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;}

/* the sweep itself */
.r2-monitor::after{content:""; position:absolute; left:-20%; right:-20%; top:-40%; height:40%;
  pointer-events:none; opacity:.55;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.035) 45%,
    rgba(0,196,137,.055) 62%,
    rgba(255,255,255,0) 100%);
  animation:rmSweep 7.5s linear infinite;}
@keyframes rmSweep{
  0%{transform:translateY(0);}
  100%{transform:translateY(350%);}
}
@media(prefers-reduced-motion:reduce){
  .r2-monitor::after{animation:none; opacity:0;}
}
@media(min-width:720px){.r2-monitor{padding:40px;}}

.r2-nums{display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;}
.r2-num{display:flex; flex-direction:column; align-items:center; gap:6px;}
.r2-num-lbl{font-family:var(--font-display); font-weight:700; font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.6);}
.r2-num-val{font-variant-numeric:tabular-nums; line-height:.92; letter-spacing:-.05em;
  color:rgba(255,255,255,.92);}
/* his number today: the one that needs to move */
.r2-num.is-today .r2-num-val{font-size:clamp(34px,9.6vw,58px); color:var(--redv);}
/* where it can get to: the only jade on the page, and the biggest thing on it */
.r2-num.is-target .r2-num-val{font-size:clamp(50px,15vw,92px); color:var(--jade-v);}

/* a live indicator beside the target label, the way a monitor shows it is on */
.r2-num.is-target .r2-num-lbl{position:relative; padding-left:14px;}
.r2-num.is-target .r2-num-lbl::before{content:""; position:absolute; left:0; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--jade-v);
  animation:rmLive 2.6s ease-in-out infinite;}
@keyframes rmLive{0%,100%{opacity:.35;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .r2-num.is-target .r2-num-lbl::before{animation:none; opacity:1;}
}
@media(min-width:720px){
  .r2-num.is-target .r2-num-lbl{padding-left:0; padding-right:14px;}
  .r2-num.is-target .r2-num-lbl::before{left:auto; right:0;}
}
/* a value that is words rather than digits ("Below 5.7%") belongs in the
   display face, not the numeral face, and needs to fit on one line */
.r2-num-val.is-text{font-family:var(--font-display); font-weight:800; letter-spacing:-.04em;}
.r2-num.is-today .r2-num-val.is-text{font-size:clamp(24px,6.6vw,40px);}
.r2-num.is-target .r2-num-val.is-text{font-size:clamp(34px,10vw,60px);}

/* the link between the two numbers: a rail that draws, a pill, a chevron */
.r2-link{display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 0 10px; position:relative;}
.r2-rail{position:relative; width:2px; height:40px; background:rgba(255,255,255,.12); display:block;}
.r2-rail-fill{position:absolute; inset:0; display:block; background:var(--jade-v);
  transform:scaleY(0); transform-origin:top; transition:transform .9s var(--E);}
.r2-monitor.is-drawn .r2-rail-fill{transform:scaleY(1);}
.r2-pill{font-family:var(--font-display); font-weight:700; font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.2);
  padding:5px 11px; border-radius:var(--r-pill); opacity:0; transition:opacity .5s var(--E);}
.r2-monitor.is-drawn .r2-pill{opacity:1;}
.r2-chev{display:flex; color:rgba(255,255,255,.35);}
.r2-chev .lucide{width:18px; height:18px;}

@media(min-width:720px){
  .r2-nums{flex-direction:row; justify-content:space-between; gap:clamp(16px,3vw,32px);}
  .r2-num{align-items:flex-start; text-align:left;}
  .r2-num.is-target{align-items:flex-end; text-align:right;}
  .r2-link{flex-direction:row; flex:1; padding:0; align-self:center; gap:12px;}
  .r2-rail{width:100%; min-width:40px; height:2px;}
  .r2-rail-fill{transform:scaleX(0); transform-origin:left;}
  .r2-monitor.is-drawn .r2-rail-fill{transform:scaleX(1);}
  .r2-chev{transform:rotate(-90deg);}
}

/* ============================================================
   THE COLUMN — one vertical instrument.

   Read like a lab report: the reference ranges down the left, his own two
   readings down the right. Higher is up, so the only direction of travel
   on this block is down — which is the direction the copy asks for.

   Everything is positioned by percentage of the track, so a reading and
   its mark can never drift apart at any width.
   ============================================================ */
.r2-col{margin:clamp(6px,1.4vw,14px) 0 0;}
/* The zone names and the reference numbers are positioned out of flow, so
   they add no width of their own: the left column has to be reserved for
   them explicitly or they hang off the edge of a phone. */
.col-grid{display:grid; grid-template-columns:clamp(66px,18vw,100px) 10px minmax(0,1fr);
  gap:0 clamp(10px,2.2vw,18px); align-items:stretch;
  height:clamp(330px,66vw,440px);}

/* the track itself */
.col-track{grid-column:2; position:relative; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); overflow:visible;}
.col-zone{position:absolute; left:0; right:0; border-radius:var(--r-pill);}
.col-zone-d{background:rgba(255,255,255,.07);}
.col-zone-p{background:rgba(255,255,255,.12);}
.col-zone-n{background:rgba(0,196,137,.16);}

/* the zone names, to the left of the track, each beside its own band */
.col-zone-lbl{position:absolute; right:calc(100% + clamp(26px,7vw,34px)); transform:translateY(-50%);
  font-family:var(--font-display); font-weight:700; font-size:.5rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42); text-align:right;
  width:clamp(40px,11vw,66px); line-height:1.2;}
.col-zone-lbl-n{color:rgba(0,196,137,.62);}

/* the two reference lines a lab report prints */
.col-ref{position:absolute; left:-5px; right:-5px; height:1px; transform:translateY(-50%);
  background:rgba(255,255,255,.28);}
.col-ref-n{position:absolute; right:calc(100% + 6px); top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,.5);}

/* The instrument renders finished. .is-armed is added by its own builder
   only when something is guaranteed to remove it again, so no missing class
   and no stalled frame can leave this block blank on the one screen that
   has to land. */

/* the range he could reach */
.col-band{position:absolute; left:-2px; right:-2px; border-radius:var(--r-pill);
  background:var(--jade-v); opacity:.9; transition:opacity .8s var(--E);}
.col-grid.is-armed .col-band{opacity:0;}

/* the drop: from where he is, down to the middle of that range */
.col-drop{position:absolute; left:50%; width:2px; transform:translateX(-50%);}
.col-drop-line{position:absolute; inset:0; display:block; border-radius:2px;
  background:linear-gradient(180deg, var(--redv) 0%, var(--jade-v) 100%);
  transform:scaleY(1); transform-origin:top; transition:transform 1s var(--E);}
.col-grid.is-armed .col-drop-line{transform:scaleY(0);}

/* the travelling reading: the recursive beat. It runs the drop again and
   again, so the block keeps restating the one thing it is there to say. */
.col-drop-dot{position:absolute; left:50%; top:0; width:7px; height:7px; margin-left:-3.5px;
  margin-top:-3.5px; border-radius:50%; background:var(--jade-v); display:block; opacity:0;
  animation:colTravel 4.6s var(--E) infinite 1.2s;}
.col-grid.is-armed .col-drop-dot{animation:none;}
@keyframes colTravel{
  0%{top:0%; opacity:0;}
  12%{opacity:1;}
  62%{top:100%; opacity:1;}
  78%{top:100%; opacity:0;}
  100%{top:0%; opacity:0;}
}

/* the two marks on the track */
.col-mark{position:absolute; left:50%; width:15px; height:15px; margin-left:-7.5px;
  margin-top:-7.5px; border-radius:50%; border:2px solid var(--night);}
.col-mark-today{background:var(--redv); z-index:3;}
.col-mark-target{background:var(--jade-v); z-index:2;}

/* the live pulse on his own reading, the way a monitor shows it is reading */
.col-mark-today::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--redv); opacity:0; animation:colPulse 2.8s var(--E) infinite;}
@keyframes colPulse{
  0%{transform:scale(.7); opacity:.75;}
  70%{transform:scale(1.5); opacity:0;}
  100%{transform:scale(1.5); opacity:0;}
}

/* the scan: one slow pass down the instrument, on a long loop */
.col-scan{position:absolute; left:-14px; right:-14px; top:0; height:16%; display:block;
  pointer-events:none; border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 100%);
  opacity:.5; animation:colScan 9s linear infinite;}
@keyframes colScan{
  0%{transform:translateY(-120%);}
  100%{transform:translateY(760%);}
}

/* the readings */
.col-reads{grid-column:3; position:relative;}
.col-read{position:absolute; left:0; transform:translateY(-50%); display:flex;
  flex-direction:column; gap:2px; max-width:100%;}
.col-read-lbl{font-family:var(--font-display); font-weight:700; font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap;}
.col-read-val{font-variant-numeric:tabular-nums; line-height:.95; letter-spacing:-.05em;
  white-space:nowrap;}
.col-read-today .col-read-lbl{color:rgba(255,255,255,.72);}
.col-read-today .col-read-val{font-size:clamp(30px,7.4vw,46px); color:var(--redv);}
.col-read-target .col-read-lbl{color:rgba(0,196,137,.8);}
.col-read-target .col-read-val{font-size:clamp(38px,10.4vw,68px); color:var(--jade-v);}
/* a value that is words, not digits, sets in the display face */
.col-read-val.is-text{font-family:var(--font-display); font-weight:800; letter-spacing:-.04em;}
.col-read-today .col-read-val.is-text{font-size:clamp(20px,5vw,30px);}
.col-read-target .col-read-val.is-text{font-size:clamp(26px,6.6vw,42px);}
.col-over{font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.55);}

.col-unit{margin:clamp(14px,2.2vw,20px) 0 0; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.35);}

@media(prefers-reduced-motion:reduce){
  .col-drop-dot,.col-scan{animation:none !important;}
  .col-mark-today::after{animation:none; opacity:0;}
  .col-drop-line{transform:scaleY(1) !important;}
  .col-band{opacity:.9 !important;}
  .col-drop-dot{opacity:0;}
}

/* ---------- 3 · SCALE (superseded by the column, kept for the reject view) ---------- */

.r2-scale{margin:clamp(20px,3vw,30px) auto 0; max-width:560px;}
.r2-scale svg{width:100%; height:auto; display:block; overflow:visible;}
.r2-zone-1{fill:rgba(255,255,255,.06);}
.r2-zone-2{fill:rgba(255,255,255,.09);}
.r2-zone-3{fill:rgba(255,255,255,.12);}
.r2-zone-label{font-family:var(--font-display); font-weight:600; font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; fill:rgba(255,255,255,.45);}
.r2-tick-label{font-family:var(--font-mono); font-weight:400; font-size:9px;
  fill:rgba(255,255,255,.55);}
.r2-today-mark{fill:var(--redv);}
.r2-today-text{font-family:var(--font-display); font-weight:700; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase; fill:rgba(255,255,255,.7);}
.r2-target-zone{fill:var(--jade-v); opacity:0; transition:opacity .8s var(--E);}
.r2-monitor.is-scaled .r2-target-zone{opacity:.32;}
.r2-trail{stroke:var(--jade-v); stroke-width:1; opacity:.28; stroke-dasharray:3 3;}
.r2-travel{fill:var(--jade-v); transition:transform .8s var(--E);}

/* ---------- 4 · line tag + footnote (light background) ---------- */
.r2-linetag{display:inline-flex; align-items:center; gap:9px; margin:clamp(14px,2vw,18px) 0 0;
  font-family:var(--font-display); font-weight:700; font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--teal-700); border:1px solid var(--teal-700);
  border-radius:var(--r-pill); padding:8px 14px; opacity:0; transition:opacity .5s var(--E);}
.r2-linetag.is-in{opacity:1;}
.r2-footnote{font-size:.78rem; line-height:1.6; color:var(--ink3); margin:14px 0 0; max-width:56ch;}

/* ---------- 5 · BRIDGE ---------- */
.r2-bridge{padding:clamp(40px,6vw,72px) 0; background:var(--bone);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); text-align:center;}
.r2-bridge-1{font-family:var(--font-display); font-weight:700; font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); margin:0;}
.r2-bridge-2{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,5.6vw,36px); line-height:1.08; letter-spacing:-.04em; color:var(--ink);
  margin:16px auto 0; max-width:22ch; text-wrap:balance;}

/* the fact, stated quietly */
.r2-bridge-small{font-family:var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink3); margin:0;}
/* and the line the whole page turns on */
.r2-bridge-big{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,8.2vw,72px); line-height:.98; letter-spacing:-.045em; color:var(--ink);
  margin:14px auto 0; max-width:16ch; text-wrap:balance;}
.r2-bridge-big::after{content:""; display:block; width:56px; height:3px; margin:clamp(18px,2.6vw,26px) auto 0;
  background:var(--red);}

/* ============================================================
   THE 90-DAY METABOLIC ROADMAP — the two-step product, drawn.
   One card, two panels, a rail between them. The rail is the point:
   step 2 sits on the far side of step 1.
   ============================================================ */
.r2-roadmap{padding:clamp(40px,6vw,76px) 0 0;}
.rm-card{background:var(--sheet); border:1px solid var(--hair); box-shadow:var(--e-2);
  overflow:hidden;}

/* the header reads like a product line on an invoice */
.rm-head{display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(16px,3vw,32px);
  padding:clamp(20px,3vw,30px) clamp(18px,2.6vw,34px);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #1d1d1b 0%, #131313 100%);
  color:rgba(255,255,255,.94); border-bottom:1px solid rgba(255,255,255,.08);}
.rm-eyebrow{display:block; font-family:var(--font-display); font-weight:700; font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.rm-product{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,3.4vw,30px); line-height:1.04; letter-spacing:-.035em;
  color:#fff; margin:10px 0 0; max-width:18ch;}
.rm-price{font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:clamp(26px,4.4vw,40px); letter-spacing:-.04em; line-height:1; color:var(--jade-v);
  flex:none;}

.rm-intro{margin:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,34px) 0;
  font-size:clamp(15px,1.7vw,17px); line-height:1.55; color:var(--ink2); max-width:46ch;}

/* the two steps */
.rm-steps{list-style:none; margin:clamp(18px,2.6vw,26px) 0 0; padding:0 clamp(18px,2.6vw,34px);
  display:grid; gap:0;}
.rm-step{min-width:0;}
.rm-step-card{height:100%; border:1px solid var(--hair); background:var(--paper);
  padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column;}
.rm-step-top{display:flex; align-items:baseline; gap:12px;}
.rm-step-n{font-family:var(--font-mono); font-weight:500; font-size:clamp(28px,4.6vw,40px);
  line-height:1; letter-spacing:-.05em; color:var(--ink4);}
.rm-step-when{font-family:var(--font-display); font-weight:700; font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);}
.rm-step-title{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,2.4vw,22px); line-height:1.1; letter-spacing:-.03em;
  color:var(--ink); margin:14px 0 0;}
.rm-step-body{font-size:clamp(15px,1.7vw,17px); line-height:1.5; color:var(--ink);
  font-weight:500; margin:8px 0 0;}
.rm-step-detail{font-size:14px; line-height:1.55; color:var(--ink2); margin:auto 0 0; padding-top:16px;}

/* the rail between them, with the day it turns on */
.rm-link{display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 0; flex-direction:column;}
.rm-link-rail{display:block; width:2px; height:34px;
  background:linear-gradient(180deg, var(--red) 0%, var(--jade-v) 100%);}
.rm-link-tag{font-family:var(--font-display); font-weight:700; font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink3);
  border:1px solid var(--hair); padding:5px 11px; border-radius:var(--r-pill);
  background:var(--sheet);}

/* the figures: five nights, and thirty minutes */
.rm-figure{margin:clamp(16px,2.2vw,22px) 0 0;}
.rm-figure-cap{display:block; font-family:var(--font-display); font-weight:600; font-size:.54rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin-top:12px;}

.rm-nights{display:flex; align-items:center; gap:0;}
.rm-night{display:flex; flex-direction:column; align-items:center; gap:7px; flex:none;}
.rm-night-dot{width:13px; height:13px; border-radius:50%; background:var(--sheet);
  border:2px solid var(--red); display:block;
  opacity:0; transform:scale(.6); transition:opacity .45s var(--E), transform .45s var(--E);
  transition-delay:calc(var(--i) * .11s);}
.rm-night-n{font-family:var(--font-mono); font-size:11px; color:var(--ink3); line-height:1;}
.rm-night-link{flex:1; height:2px; background:var(--hair); display:block; min-width:10px;
  margin-bottom:18px;}
#r2-roadmap.in .rm-night-dot{opacity:1; transform:scale(1);}
/* the fifth night is the one that earns the call */
.rm-night:last-of-type .rm-night-dot{background:var(--red); border-color:var(--red);}
body:not(.rv) .rm-night-dot{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  .rm-night-dot{opacity:1; transform:none; transition:none;}
}

.rm-dial{position:relative; width:88px; height:88px;}
.rm-dial svg{width:100%; height:100%; transform:rotate(-90deg);}
.rm-dial-track{fill:none; stroke:var(--hair); stroke-width:6;}
.rm-dial-fill{fill:none; stroke:var(--jade-v); stroke-width:6; stroke-linecap:butt;
  stroke-dasharray:239; stroke-dashoffset:239; transition:stroke-dashoffset 1.2s var(--E) .2s;}
#r2-roadmap.in .rm-dial-fill{stroke-dashoffset:60;}
body:not(.rv) .rm-dial-fill{stroke-dashoffset:60;}
@media(prefers-reduced-motion:reduce){
  .rm-dial-fill{stroke-dashoffset:60; transition:none;}
}
.rm-dial-n{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; font-size:26px; letter-spacing:-.04em;
  color:var(--ink); font-variant-numeric:tabular-nums;}

/* the one condition, stated plainly */
.rm-gate{margin:clamp(18px,2.4vw,24px) clamp(18px,2.6vw,34px) 0; padding-left:14px;
  border-left:2px solid var(--red);
  font-size:14px; line-height:1.55; color:var(--ink2); max-width:52ch;}

.rm-cta{padding:clamp(20px,3vw,28px) clamp(18px,2.6vw,34px) clamp(22px,3vw,32px);}
.rm-cta .btn{width:100%;}

@media(min-width:820px){
  .rm-steps{grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;}
  .rm-link{flex-direction:column; padding:0 clamp(14px,2vw,22px); justify-content:center;}
  .rm-link-rail{width:2px; height:64px;
    background:linear-gradient(180deg, var(--red) 0%, var(--jade-v) 100%);}
  .rm-cta .btn{width:auto; min-width:340px;}
  .rm-cta{display:flex; justify-content:center;}
}
@media(max-width:819px){
  .rm-steps{grid-template-columns:1fr;}
}

/* ---------- 6 · VIDEO ---------- */
.r2-video{padding:clamp(32px,5vw,56px) 0 0;}
.r2-video-frame{position:relative; margin-inline:auto; max-width:420px; background:var(--night);
  overflow:hidden; box-shadow:var(--e-2);}
@media(min-width:720px){.r2-video-frame{max-width:640px;}}
.r2-video-mount{width:100%;}
.r2-sound{position:absolute; left:14px; bottom:14px; z-index:3; display:inline-flex;
  align-items:center; gap:9px; min-height:44px; padding:10px 18px; cursor:pointer;
  background:var(--paper); color:var(--ink); border:0; border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:700; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; box-shadow:var(--e-2);
  transition:background .35s var(--E), color .35s var(--E);}
.r2-sound:hover{background:var(--teal-700); color:var(--paper);}
.r2-sound .lucide{width:16px; height:16px;}

/* ---------- 7 · SIGNALS ---------- */
.r2-signals{padding:clamp(44px,6.4vw,80px) 0 0;}
.r2-h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem,1.05rem+1.6vw,2.1rem); line-height:1.06; letter-spacing:-.04em;
  margin:0; color:var(--ink); max-width:24ch; text-wrap:balance;}
.r2-sub{font-size:.95rem; line-height:1.6; color:var(--ink2); margin:12px 0 0;}
.r2-cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.6vw,16px);
  margin:clamp(22px,3vw,32px) 0 0;}
@media(max-width:359px){.r2-cards{grid-template-columns:1fr;}}
/* one line on desktop */
@media(min-width:900px){.r2-cards{grid-template-columns:repeat(4,1fr);}}
.r2-card{position:relative; background:var(--sheet); border:1px solid var(--hair);
  padding:clamp(16px,2.2vw,22px); box-shadow:var(--e-1);
  opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--E), transform .6s var(--E), border-color .4s var(--E);}
#r2-signals.in .r2-card{opacity:1; transform:none;}
#r2-signals.in .r2-card:nth-child(2){transition-delay:.06s;}
#r2-signals.in .r2-card:nth-child(3){transition-delay:.12s;}
#r2-signals.in .r2-card:nth-child(4){transition-delay:.18s;}
.r2-card:hover{border-color:var(--hair2);}
.r2-card-ico{width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--teal-050); color:var(--teal-700); margin-bottom:14px;}
.r2-card-ico .lucide{width:18px; height:18px;}
.r2-card h3{font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:-.02em; line-height:1.2; color:var(--ink); margin:0 0 7px;}
.r2-card p{font-size:.86rem; line-height:1.55; color:var(--ink2); margin:0;}

.r2-meter{margin:clamp(12px,1.8vw,18px) 0 0; background:var(--sheet); border:1px solid var(--hair);
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--e-1);
  opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--E), transform .6s var(--E);}
#r2-signals.in .r2-meter{opacity:1; transform:none; transition-delay:.24s;}
.r2-meter-head{display:flex; align-items:center; gap:12px;}
.r2-meter-head .r2-card-ico{margin-bottom:0;}
.r2-meter h3{font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:-.02em; color:var(--ink); margin:0;}
.r2-meter-body{font-size:.86rem; line-height:1.55; color:var(--ink2); margin:10px 0 0;}
.r2-graph{margin:18px 0 0;}
.r2-graph svg{width:100%; height:auto; display:block; overflow:visible;}
.r2-graph-axis{stroke:var(--hair2); stroke-width:1;}
.r2-curve-usual{fill:none; stroke:var(--ink4); stroke-width:2; stroke-linecap:round;}
.r2-curve-after{fill:none; stroke:var(--teal-700); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.6s var(--E);}
#r2-signals.in .r2-curve-after{stroke-dashoffset:0; transition-delay:.4s;}
.r2-key{display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0;
  font-family:var(--font-display); font-weight:600; font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3);}
.r2-key span{display:inline-flex; align-items:center; gap:9px;}
.r2-key i{width:16px; height:3px; flex:none; display:block;}
.r2-key .k-usual{background:var(--ink4);}
.r2-key .k-after{background:var(--teal-700);}
.r2-graph-note{font-family:var(--font-mono); font-size:.66rem; line-height:1.6;
  color:var(--ink3); margin:12px 0 0;}
#r2-signals-foot{margin-top:18px;}

/* ---------- 8 · STEPS ---------- */
.r2-steps{padding:clamp(44px,6.4vw,80px) 0 0;}
.r2-timeline{list-style:none; margin:clamp(22px,3vw,32px) 0 0; padding:0; max-width:560px;}
.r2-step{position:relative; display:grid; grid-template-columns:28px 1fr; gap:16px;
  padding-bottom:clamp(22px,3vw,30px);}
.r2-step:last-child{padding-bottom:0;}
.r2-step-rail{position:relative; display:flex; justify-content:center;}
.r2-step-rail::before{content:""; position:absolute; top:14px; bottom:-8px; left:50%;
  width:1px; background:var(--hair2); transform:translateX(-50%);}
.r2-step:last-child .r2-step-rail::before{display:none;}
.r2-step-dot{position:relative; z-index:1; width:12px; height:12px; margin-top:5px;
  border:1px solid var(--teal-700); background:var(--paper);}
.r2-step.is-end .r2-step-dot{background:var(--teal-700);}
.r2-step-when{display:block; font-family:var(--font-display); font-weight:700; font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal-700);}
.r2-step h3{font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:-.02em;
  line-height:1.25; color:var(--ink); margin:7px 0 6px;}
.r2-step p{font-size:.88rem; line-height:1.55; color:var(--ink2); margin:0;}

/* ---------- 9 · PROOF + OFFER ---------- */
.r2-proof{padding:clamp(44px,6.4vw,80px) 0 0;}
.r2-proof .proof-one{margin-block:0;}
.r2-offer{padding:clamp(40px,5.6vw,64px) 0 0;}
.r2-offer .pay-section{margin-top:0;}
.r2-price{font-size:clamp(2.2rem,7vw,3rem); line-height:1; letter-spacing:-.05em;
  color:var(--ink); margin:14px 0 0;}
.r2-includes{list-style:none; margin:clamp(18px,2.4vw,24px) 0 0; padding:0;
  border-top:1px solid var(--hair);}
.r2-includes li{display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--hair); font-size:.92rem; line-height:1.5; color:var(--ink2);}
.r2-includes .lucide{width:17px; height:17px; flex:none; color:var(--green-600); margin-top:3px;}
.r2-safety{display:flex; align-items:flex-start; gap:12px; margin:20px 0 0;
  padding:14px 16px; background:var(--paper); border-left:2px solid var(--teal-700);
  font-size:.86rem; line-height:1.55; color:var(--ink2);}
.r2-safety .lucide{width:18px; height:18px; flex:none; color:var(--teal-700); margin-top:2px;}
.r2-reassure{font-family:var(--font-mono); font-size:.68rem; color:var(--ink3);
  text-align:center; margin:14px 0 0;}
.r2-afterpay{font-size:.88rem; line-height:1.55; color:var(--ink2); text-align:center; margin:16px 0 0;}
.r2-credit{font-size:.82rem; line-height:1.55; color:var(--ink3); text-align:center; margin:8px 0 0;}
.r2-objection{font-size:.86rem; line-height:1.6; color:var(--ink3); font-style:italic;
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hair);}
.r2-legal{padding:clamp(28px,4vw,40px) 0 0;}
.r2-disclaimer{font-size:.76rem; line-height:1.65; color:var(--ink3);
  margin:0 auto; max-width:62ch; text-align:center;}

/* ---------- 10 · STICKY CTA (mobile only) ---------- */
.r2-sticky{position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background:rgba(242,240,234,.94); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--hair);
  transform:translateY(110%); transition:transform .5s var(--E);}
.r2-sticky.is-up{transform:none;}
.r2-sticky .btn{width:100%; min-height:52px;}
.r2-sticky.is-ready .btn{box-shadow:0 0 0 2px var(--teal-700);}
@media(min-width:720px){.r2-sticky{display:none !important;}}

/* ---------- 11 · REJECT (hero only) ---------- */
.r2-reject .r2-monitor,
.r2-reject .r2-linetag,
.r2-reject .r2-footnote{display:none;}
.r2-reject .r2-support{max-width:60ch;}

/* ---------- 12 · HERO ENTRANCE (one time, transform/opacity only) ---------- */
.r2-anim .r2-eyebrow,
.r2-anim .r2-head,
.r2-anim .r2-support,
.r2-anim .r2-footnote{opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--E), transform .45s var(--E);}
.r2-anim .r2-eyebrow.is-in,
.r2-anim .r2-head.is-in,
.r2-anim .r2-support.is-in,
.r2-anim .r2-footnote.is-in{opacity:1; transform:none;}
.r2-anim .r2-head{transition-duration:.5s;}

@media(prefers-reduced-motion:reduce){
  .r2-anim .r2-eyebrow,.r2-anim .r2-head,.r2-anim .r2-support,.r2-anim .r2-footnote{
    opacity:1 !important; transform:none !important;}
  .r2-rail-fill{transform:none !important;}
  .r2-pill,.r2-linetag{opacity:1 !important;}
  .r2-target-zone{opacity:.32 !important;}
  .r2-card,.r2-meter{opacity:1 !important; transform:none !important;}
  .r2-curve-after{stroke-dashoffset:0 !important;}
  .r2-sticky{transition:none;}
}