/* ============================= FONTS =============================
   Self-hosted so the site loads on a slow connection with no third-party
   request and no font 404. Latin and latin-ext are split so a patient on a
   metered connection only downloads the range their language needs. */
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dmserifdisplay-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dmserifdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dmserifdisplay-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dmserifdisplay-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================= TOKENS ============================= */
:root{
  --bg:#EFF3E8;
  --surface:#F9FBF4;
  --surface-2:#E6EED7;      /* mist */
  --ink:#1F3D2A;            /* forest */
  --ink-soft:#4a614f;
  --accent:#3E6E38;
  --accent-ink:#ffffff;
  --pistachio:#AFCB80;
  --pine:#2E6B4B;
  --fern:#4C7A3A;
  --leaf:#6FA043;
  --evergreen:#12271A;
  --sage:#CBDBB0;
  --mist:#E6EED7;
  --hairline:#DBE3CF;
  --mark-ring:var(--ink);
  --mark-pulse:var(--pistachio);

  --alert:#B4432B;          /* semantic escalation red, NOT the accent */
  --alert-bg:#fbe9e4;
  --alert-ink:#8a2f1c;

  --shadow:0 1px 2px rgba(18,39,26,.05), 0 18px 40px -24px rgba(18,39,26,.28);
  --shadow-sm:0 1px 2px rgba(18,39,26,.06);

  --maxw:1140px;
  --pad:clamp(20px,5vw,40px);
  --radius:18px;
  --radius-sm:12px;

  --step--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.075rem);
  --step-1:clamp(1.35rem,1.2rem + .6vw,1.6rem);
  --step-2:clamp(1.85rem,1.5rem + 1.4vw,2.6rem);
  --step-3:clamp(2.5rem,1.9rem + 2.9vw,4.4rem);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1611;
    --surface:#16211A;
    --surface-2:#1c2a22;
    --ink:#E7F0DC;
    --ink-soft:#a9bda6;
    --accent:#A6D177;
    --accent-ink:#0E1611;
    --pistachio:#AFCB80;
    --sage:#3a5233;
    --mist:#1c2a22;
    --hairline:#243026;
    --mark-ring:var(--ink);
    --mark-pulse:var(--accent);
    --alert:#F0A38C;
    --alert-bg:#2a1712;
    --alert-ink:#F3B7A2;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -26px rgba(0,0,0,.7);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
/* explicit toggle wins in both directions */
:root[data-theme="light"]{
  --bg:#EFF3E8;--surface:#F9FBF4;--surface-2:#E6EED7;--ink:#1F3D2A;--ink-soft:#4a614f;
  --accent:#3E6E38;--accent-ink:#ffffff;--pistachio:#AFCB80;--sage:#CBDBB0;--mist:#E6EED7;
  --hairline:#DBE3CF;--mark-ring:var(--ink);--mark-pulse:var(--pistachio);
  --alert:#B4432B;--alert-bg:#fbe9e4;--alert-ink:#8a2f1c;
  --shadow:0 1px 2px rgba(18,39,26,.05), 0 18px 40px -24px rgba(18,39,26,.28);
  --shadow-sm:0 1px 2px rgba(18,39,26,.06);
}
:root[data-theme="dark"]{
  --bg:#0E1611;--surface:#16211A;--surface-2:#1c2a22;--ink:#E7F0DC;--ink-soft:#a9bda6;
  --accent:#A6D177;--accent-ink:#0E1611;--pistachio:#AFCB80;--sage:#3a5233;--mist:#1c2a22;
  --hairline:#243026;--mark-ring:var(--ink);--mark-pulse:var(--accent);
  --alert:#F0A38C;--alert-bg:#2a1712;--alert-ink:#F3B7A2;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -26px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* ============================= BASE ============================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.06;
  letter-spacing:-.01em;text-wrap:balance;margin:0}
em{font-family:'DM Serif Display',Georgia,serif;font-style:italic}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--pistachio);color:var(--evergreen)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);margin:0 0 .9rem}
.section{padding-block:clamp(56px,8vw,104px)}
.lead{color:var(--ink-soft);font-size:var(--step-1);line-height:1.4;max-width:34ch}
.muted{color:var(--ink-soft)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:inherit;font-size:var(--step--1);
  font-weight:600;letter-spacing:.01em;padding:.72em 1.25em;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .16s ease,
  background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--pine)}
:root[data-theme="dark"] .btn-primary:hover{background:var(--leaf)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ============================= NAV ============================= */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:66px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand .mark{width:56px;height:31px;display:block}
.brand .mark .ring{stroke:var(--mark-ring)}
.brand .mark .mark-pulse{stroke:var(--mark-pulse)}
.brand .word{font-family:'DM Serif Display',serif;font-size:1.5rem;letter-spacing:-.01em}
.nav-links{display:flex;gap:1.4rem;align-items:center}
.nav-links a{text-decoration:none;font-size:var(--step--1);font-weight:500;color:var(--ink-soft);
  transition:color .18s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--accent);font-weight:600}
.nav-burger{display:none;width:38px;height:38px;place-items:center;border-radius:999px;
  border:1.5px solid var(--hairline);background:transparent;color:var(--ink);cursor:pointer;flex:none;
  transition:border-color .2s,color .2s}
.nav-burger:hover{border-color:var(--accent);color:var(--accent)}
.nav-burger svg{width:20px;height:20px}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.tgl{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;border:1.5px solid var(--hairline);
  background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:border-color .2s,color .2s}
.tgl:hover{border-color:var(--accent);color:var(--accent)}
.tgl svg{width:17px;height:17px}
.tgl .moon{display:none}
:root[data-theme="dark"] .tgl .sun{display:none}
:root[data-theme="dark"] .tgl .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tgl .sun{display:none}
  :root:not([data-theme="light"]) .tgl .moon{display:block}
}
@media (max-width:900px){
  .nav-burger{display:grid}
  .nav-links{position:absolute;top:66px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--hairline);
    padding:6px var(--pad) 12px;box-shadow:var(--shadow)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:.8rem 0;border-bottom:1px solid var(--hairline)}
  .nav-links a:last-child{border-bottom:0}
}
@media (max-width:520px){.nav .btn-deck{display:none}}

/* ============================= HERO ============================= */
.hero{position:relative;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(48px,7vw,88px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{font-size:var(--step-3);margin-bottom:1.1rem}
.hero .sub{max-width:46ch;color:var(--ink-soft);font-size:var(--step-1);line-height:1.42;margin-bottom:1.9rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-note{margin-top:1.5rem;display:flex;align-items:center;gap:.55rem;font-size:var(--step--1);
  color:var(--ink-soft)}
.hero-note .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 22%,transparent)}
.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:999px;
  border:1px solid var(--hairline);background:var(--surface);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:1.5rem}
.tag .lv{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* consultation card visual */
.consult{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;position:relative}
.consult-head{display:flex;align-items:center;gap:.7rem;padding-bottom:14px;border-bottom:1px solid var(--hairline);
  margin-bottom:16px}
.consult-head .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:'DM Serif Display',serif;font-size:1.05rem;flex:none}
.consult-head .who{font-weight:600;font-size:var(--step--1)}
.consult-head .st{margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:.4rem}
.consult-head .st .lv{width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.q{font-family:'DM Serif Display',serif;font-size:1.28rem;line-height:1.2;margin:0 0 6px}
.q .n{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;display:block;margin-bottom:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:14px}
.chip{padding:.42rem .8rem;border-radius:999px;border:1px solid var(--hairline);background:var(--bg);
  font-size:var(--step--1);font-weight:500;transition:background .18s,border-color .18s}
.chip.sel{background:var(--sage);border-color:transparent;color:var(--evergreen)}
:root[data-theme="dark"] .chip.sel{color:var(--ink)}
.handover{margin-top:16px;padding:13px 15px;border-radius:var(--radius-sm);background:var(--mist);
  border:1px dashed var(--hairline);display:flex;gap:.7rem;align-items:flex-start}
.handover .ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--surface);
  border:1px solid var(--hairline);display:grid;place-items:center}
.handover .ic svg{width:15px;height:15px;stroke:var(--accent)}
.handover .tx{font-size:var(--step--1);line-height:1.45}
.handover .tx b{color:var(--ink)}
.handover code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;background:var(--surface);
  padding:.08em .4em;border-radius:5px;border:1px solid var(--hairline);color:var(--accent)}
.pulse-line{margin-top:18px;height:34px;width:100%;display:block}
.pulse-line path{fill:none;stroke:var(--mark-pulse);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ============================= LOGO STRIP / marquee of trust terms ============================= */
.terms{border-block:1px solid var(--hairline);background:var(--surface)}
.terms-in{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;padding-block:20px;align-items:center;
  font-size:var(--step--1);color:var(--ink-soft)}
.terms-in .lb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink);
  margin-right:.4rem}
.terms-in span.t{display:inline-flex;align-items:center;gap:.5rem}
.terms-in span.t::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pistachio)}

/* ============================= PROBLEM / STATS ============================= */
.sec-head{max-width:56ch}
.sec-head h2{font-size:var(--step-2);margin-bottom:1rem}
.sec-head p{color:var(--ink-soft);font-size:var(--step-1);line-height:1.42}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;margin-top:2.6rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);padding:26px 22px}
.stat .num{font-family:'DM Serif Display',serif;font-size:clamp(2.1rem,1.6rem+1.6vw,3rem);
  line-height:1;color:var(--ink);letter-spacing:-.01em}
.stat .num small{font-size:.44em;color:var(--accent);font-family:'DM Sans',sans-serif;font-weight:700}
.stat .lb{margin-top:.7rem;font-size:var(--step--1);color:var(--ink-soft);line-height:1.4}
.fignote{margin-top:1.4rem;font-size:.82rem;color:var(--ink-soft)}

/* ============================= HOW IT WORKS ============================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem;
  counter-reset:step}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:26px;position:relative;box-shadow:var(--shadow-sm)}
.step .k{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.step .k .no{counter-increment:step;font-family:'DM Serif Display',serif;font-size:1rem;
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;flex:none}
.step .k .no::before{content:counter(step,decimal-leading-zero)}
.step .k .flow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.step h3{font-size:var(--step-1);margin-bottom:.6rem}
.step p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
.step .ex{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline);font-size:.86rem;
  color:var(--ink)}
.step .ex b{color:var(--accent)}

/* ============================= SAFETY ============================= */
.safety{background:var(--evergreen);color:#EFF3E8;border-radius:calc(var(--radius) + 6px);
  padding:clamp(28px,4vw,52px);position:relative;overflow:hidden}
:root[data-theme="dark"] .safety{background:#0a1310;border:1px solid var(--hairline)}
.safety .eyebrow{color:var(--pistachio)}
.safety h2{font-size:var(--step-2);color:#F9FBF4;max-width:20ch}
.safety .stance{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
.stance-item{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(175,203,128,.28);font-weight:600;font-size:var(--step--1)}
.stance-item.can{border-color:rgba(175,203,128,.5)}
.stance-item .ic{width:18px;height:18px;flex:none}
.stance-item.can .ic{color:var(--pistachio)}
.stance-item.cannot .ic{color:#F0A38C}
.stance-item .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.4}
.safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2.4rem;
  background:rgba(175,203,128,.22);border-radius:var(--radius);overflow:hidden}
@media (max-width:760px){.safety-grid{grid-template-columns:1fr}}
.sf{background:var(--evergreen);padding:22px}
:root[data-theme="dark"] .sf{background:#0a1310}
.sf h4{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.2rem;margin:0 0 .5rem;color:#F9FBF4;
  display:flex;align-items:center;gap:.55rem}
.sf h4 .badge{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:.2em .5em;border-radius:5px;background:rgba(175,203,128,.16);color:var(--pistachio)}
.sf p{color:#c7d6b5;font-size:var(--step--1);line-height:1.5;margin:0}
.redflag{margin-top:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:rgba(180,67,43,.14);border:1px solid rgba(240,163,140,.4);border-radius:var(--radius);padding:18px 20px}
.redflag .em{flex:none;font-family:'DM Serif Display',serif;font-size:1.5rem;color:#F0A38C;
  display:flex;align-items:center;gap:.6rem}
.redflag .em .ring999{width:40px;height:40px;border-radius:50%;border:2px solid #F0A38C;display:grid;
  place-items:center;font-size:.9rem;letter-spacing:.02em}
.redflag p{font-size:var(--step--1);color:#f3d9cf;line-height:1.5;margin:0}
.redflag b{color:#fff}

/* ============================= EVIDENCE / SCORECARD ============================= */
.score{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:2.6rem}
@media (max-width:820px){.score{grid-template-columns:1fr;gap:32px}}
.scorecard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.scorecard .sc-top{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:14px;
  border-bottom:1px solid var(--hairline);margin-bottom:18px}
.scorecard .sc-top .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.scorecard .sc-top .g{font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--accent)}
.metric{margin-bottom:18px}
.metric:last-child{margin-bottom:0}
.metric .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.metric .row .nm{font-weight:600;font-size:var(--step--1)}
.metric .row .tg{font-size:.8rem;color:var(--ink-soft)}
.metric .row .tg b{color:var(--accent);font-variant-numeric:tabular-nums}
.bar{height:9px;border-radius:999px;background:var(--mist);overflow:hidden;position:relative}
.bar .fill{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,var(--fern),var(--leaf))}
:root[data-theme="dark"] .bar .fill{background:linear-gradient(90deg,var(--accent),var(--pistachio))}
.bar .mk{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.35}
.score .about h3{font-size:var(--step-1);margin-bottom:1rem}
.score .about p{color:var(--ink-soft);margin-bottom:1rem;font-size:var(--step-0)}
.score .about ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.score .about li{display:flex;gap:.6rem;font-size:var(--step--1)}
.score .about li svg{flex:none;width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.2;margin-top:2px}

/* ============================= TRUST / INTEROP ============================= */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
@media (max-width:820px){.trust-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px}
.tcard .ic{width:38px;height:38px;border-radius:10px;background:var(--mist);display:grid;place-items:center;margin-bottom:14px}
.tcard .ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.9}
.tcard h4{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.18rem;margin:0 0 .45rem}
.tcard p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.5;margin:0}
.tcard .pill{display:inline-block;margin-top:.9rem;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);background:var(--mist);padding:.28em .6em;border-radius:6px}

/* ============================= AUDIENCES ============================= */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media (max-width:820px){.aud{grid-template-columns:1fr}}
.acard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.acard .top{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.acard .top .ic{width:40px;height:40px;border-radius:11px;background:var(--accent);display:grid;place-items:center;flex:none}
.acard .top .ic svg{width:21px;height:21px;stroke:var(--accent-ink);fill:none;stroke-width:1.9}
.acard .top .lb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.acard h3{font-size:var(--step-1);margin-bottom:.7rem}
.acard ul{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.6rem}
.acard li{display:flex;gap:.55rem;font-size:var(--step--1);color:var(--ink-soft);line-height:1.45}
.acard li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-top:.6em}

/* ============================= ROADMAP ============================= */
.road{margin-top:2.8rem;display:grid;gap:0;position:relative}
.ritem{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-bottom:2rem;position:relative}
.ritem:last-child{padding-bottom:0}
.ritem .rail{display:flex;flex-direction:column;align-items:center}
.ritem .node{width:16px;height:16px;border-radius:50%;border:3px solid var(--accent);background:var(--bg);flex:none;z-index:1}
.ritem.done .node{background:var(--accent)}
.ritem .line{width:2px;flex:1;background:var(--hairline);margin-top:4px}
.ritem:last-child .line{display:none}
.ritem .body{padding-top:-2px}
.ritem .when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:.6rem}
.ritem .when .status{font-size:10px;padding:.2em .55em;border-radius:6px;background:var(--mist);color:var(--ink-soft);letter-spacing:.08em}
.ritem.done .when .status{background:var(--sage);color:var(--evergreen)}
:root[data-theme="dark"] .ritem.done .when .status{color:var(--ink)}
.ritem h3{font-size:var(--step-1);margin:.5rem 0 .4rem}
.ritem p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.5;max-width:60ch}

/* ============================= FOUNDERS ============================= */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
@media (max-width:700px){.founders{grid-template-columns:1fr}}
.fcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;
  display:flex;gap:1.2rem;align-items:flex-start}
.fcard>div{min-width:0}
.fcard .avatar{width:96px;height:96px;border-radius:50%;background:var(--pistachio);color:var(--evergreen);
  display:grid;place-items:center;font-family:'DM Serif Display',serif;font-size:2rem;flex:none;
  border:1px solid var(--hairline);object-fit:cover;object-position:center 22%}
.fcard .fh{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fcard h3{font-size:var(--step-1)}
.fcard .role{color:var(--accent);font-weight:600;font-size:var(--step--1);margin:.25rem 0 .7rem}
.fcard p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
.fcard .flead{color:var(--ink);font-weight:600;font-size:var(--step--1);margin:0 0 .55rem}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.95rem}
.fchip{font-size:.72rem;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);
  background:var(--mist);border:1px solid var(--hairline);border-radius:999px;padding:.3rem .62rem;white-space:nowrap;
  max-width:100%}
:root[data-theme="dark"] .fchip{background:var(--surface-2)}
/* on a phone the long chips (and the 96px avatar beside them) push the card
   past the viewport, so stack the card and let the chip text wrap */
@media (max-width:560px){
  .fcard{flex-direction:column;gap:1rem;padding:22px}
  .fcard .avatar{width:72px;height:72px;font-size:1.6rem}
  .fchip{white-space:normal}
}
.fcard .flink{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;text-decoration:none;
  font-size:var(--step--1);font-weight:600;color:var(--accent);transition:color .18s}
.fcard .flink:hover{color:var(--pine)}
:root[data-theme="dark"] .fcard .flink:hover{color:var(--pistachio)}
.fcard .flink svg{width:16px;height:16px;flex:none}

/* ============================= INVESTOR CTA ============================= */
.cta{background:var(--surface);border:1px solid var(--hairline);border-radius:calc(var(--radius) + 6px);
  padding:clamp(32px,5vw,64px);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta .eyebrow{margin-inline:auto}
.cta h2{font-size:var(--step-2);max-width:20ch;margin:0 auto 1rem}
.cta p{color:var(--ink-soft);max-width:52ch;margin:0 auto 2rem;font-size:var(--step-1);line-height:1.4}
.cta .hero-actions{justify-content:center}
.cta .pulse-line{max-width:280px;margin:2rem auto 0}

/* ============================= FOOTER ============================= */
.footer{border-top:1px solid var(--hairline);margin-top:clamp(56px,8vw,96px);padding-block:40px}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-grid .brand .word{font-size:1.3rem}
.foot-links{display:flex;gap:2.5rem;flex-wrap:wrap}
.foot-col h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem;font-weight:700}
.foot-col a{display:block;text-decoration:none;color:var(--ink);font-size:var(--step--1);margin-bottom:.5rem;
  transition:color .18s}
.foot-col a:hover{color:var(--accent)}
.disclaimer{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--hairline);display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.disclaimer p{font-size:.8rem;color:var(--ink-soft);max-width:70ch;line-height:1.5}
/* flex:0 1 auto + min-width:0 so the pill wraps inside a 390px viewport
   instead of forcing the page 17px wider than the screen */
.emergency{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:700;color:var(--alert);
  background:var(--alert-bg);border:1px solid color-mix(in srgb,var(--alert) 30%,transparent);
  padding:.5em .9em;border-radius:999px;flex:0 1 auto;min-width:0;max-width:100%;
  border-radius:22px;line-height:1.35}
.emergency .r{width:22px;height:22px;border-radius:50%;border:2px solid var(--alert);display:grid;place-items:center;font-size:.62rem}

/* ============================= REVEAL ============================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* pulse animation */
@keyframes trace{to{stroke-dashoffset:0}}
.pulse-anim path{stroke-dasharray:600;stroke-dashoffset:600;animation:trace 2.6s ease-out forwards}
@media (prefers-reduced-motion:reduce){.pulse-anim path{animation:none;stroke-dashoffset:0}}

/* ============================= MULTI-PAGE ADDITIONS ============================= */
/* anchor targets clear the sticky nav (and sub-nav on product) */
section[id]{scroll-margin-top:120px}

/* page intro header (Product / About) */
.page-hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(28px,4vw,44px)}
.page-hero .sec-head{max-width:64ch}
.page-hero h1{font-size:var(--step-3);margin-bottom:1.1rem}
.page-hero .lead{max-width:60ch}

/* in-page sub-nav (Product) */
.subnav{position:sticky;top:65px;z-index:40;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--hairline)}
.subnav-in{display:flex;gap:1.6rem;align-items:center;overflow-x:auto;padding-block:14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in .lb{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-soft);flex:none}
.subnav-in a{white-space:nowrap;text-decoration:none;font-size:var(--step--1);font-weight:600;
  color:var(--ink-soft);flex:none;transition:color .18s}
.subnav-in a:hover{color:var(--accent)}

/* home "what Doogie does" highlight strip */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media (max-width:820px){.hl{grid-template-columns:1fr}}
.hlcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm)}
.hlcard .ic{width:40px;height:40px;border-radius:11px;background:var(--mist);display:grid;
  place-items:center;margin-bottom:14px}
.hlcard .ic svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.9}
.hlcard h3{font-size:var(--step-1);margin-bottom:.55rem}
.hlcard p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55;margin:0}

/* about values (reuses card look) */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.6rem}
@media (max-width:1000px){.values{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.values{grid-template-columns:1fr}}
.vcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:26px}
.vcard .k{font-family:'DM Serif Display',serif;font-size:1rem;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;margin-bottom:14px}
.vcard h3{font-size:var(--step-1);margin-bottom:.55rem}
.vcard p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55;margin:0}

/* about mission story prose */
.story{max-width:64ch;margin-top:1.4rem}
.story p{color:var(--ink-soft);font-size:var(--step-0);line-height:1.6;margin-bottom:1.1rem}
.story p:last-child{margin-bottom:0}

/* ============================= WAITLIST: footer button, counter, modal ============================= */
/* footer link styled as a button so it matches sibling footer links */
.foot-link-btn{display:block;background:none;border:0;padding:0;margin:0 0 .5rem;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--ink);font-size:var(--step--1);font-weight:400;
  transition:color .18s}
.foot-link-btn:hover{color:var(--accent)}

/* live waitlist counter near the hero CTA */
.waitlist-count{margin-top:1rem;display:flex;align-items:center;gap:.55rem;font-size:var(--step--1);
  font-weight:600;color:var(--ink)}
.waitlist-count[hidden]{display:none}
.waitlist-count .wc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.waitlist-count b{color:var(--accent);font-variant-numeric:tabular-nums}

/* modal */
.wl-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:var(--pad);background:color-mix(in srgb,var(--evergreen) 62%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wl-overlay.open{display:flex}
.wl-modal{background:var(--surface);border:1px solid var(--hairline);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);width:100%;max-width:460px;max-height:calc(100dvh - 2 * var(--pad));
  overflow-y:auto;padding:clamp(24px,4vw,34px);position:relative}
.wl-close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
  border-radius:999px;border:1.5px solid var(--hairline);background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .2s,color .2s}
.wl-close:hover{border-color:var(--accent);color:var(--accent)}
.wl-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.wl-modal .eyebrow{margin-bottom:.6rem}
.wl-modal h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:var(--step-2);
  line-height:1.08;margin:0 0 .6rem;max-width:18ch}
.wl-intro{color:var(--ink-soft);font-size:var(--step--1);line-height:1.5;margin:0 0 1.4rem}
.wl-intro b{color:var(--accent);font-variant-numeric:tabular-nums}
.wl-field{display:block;margin-bottom:1rem}
.wl-field label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:.4rem}
.wl-field label .opt{font-weight:400;color:var(--ink-soft)}
.wl-field input,.wl-field select{width:100%;font-family:inherit;font-size:var(--step-0);color:var(--ink);
  background:var(--bg);border:1.5px solid var(--hairline);border-radius:var(--radius-sm);
  padding:.7em .85em;transition:border-color .2s}
.wl-field input:focus,.wl-field select:focus{outline:none;border-color:var(--accent)}
.wl-actions{margin-top:1.4rem}
.wl-actions .btn{width:100%;justify-content:center}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.wl-msg{margin-top:1rem;font-size:var(--step--1);line-height:1.5;border-radius:var(--radius-sm);padding:.8em 1em}
.wl-msg[hidden]{display:none}
.wl-msg.ok{background:var(--mist);border:1px solid var(--hairline);color:var(--ink)}
.wl-msg.err{background:var(--alert-bg);border:1px solid color-mix(in srgb,var(--alert) 34%,transparent);color:var(--alert-ink)}
.wl-success{text-align:center}
.wl-success .tick{width:56px;height:56px;border-radius:50%;background:var(--accent);display:grid;
  place-items:center;margin:0 auto 1.2rem}
.wl-success .tick svg{width:28px;height:28px;stroke:var(--accent-ink);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wl-success h2{margin-inline:auto}
.wl-success p{color:var(--ink-soft);font-size:var(--step-0);line-height:1.5;margin:.4rem auto 0;max-width:34ch}
@media (prefers-reduced-motion:reduce){.wl-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* The advisor card spans both columns: two founders sit side by side and the
   advisor sits below, so the distinction reads in the layout, not just the
   role line. Also avoids a lone half-width third card beside empty space. */
.fcard--advisor{grid-column:1/-1}
@media (max-width:700px){.fcard--advisor{grid-column:auto}}
.sec-head .sec-lead{color:var(--ink-soft);font-size:var(--step--1);margin-top:.5rem}

/* ---- What we are building next ---------------------------------------- */
/* The roadmap flag is deliberately loud. This is a clinical product, so a
   visitor who believes an unbuilt feature exists is a safety problem rather
   than a marketing win. It reads as a statement, not a disclaimer. */
.roadmap-flag{margin-top:1rem;padding:.7rem 1rem;border-left:3px solid var(--accent);
  background:var(--surface-2);border-radius:8px;color:var(--ink);
  font-size:var(--step--1);max-width:64ch}
.nextgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.2rem;
  align-items:start;margin-top:2.4rem}
@media (max-width:860px){.nextgrid{grid-template-columns:1fr}}
.pedfig{margin:0;background:var(--bg);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.4rem 1.4rem 1rem}
.pedfig svg{width:100%;height:auto;display:block;overflow:visible}
.pedfig figcaption{margin-top:1rem;color:var(--ink-soft);
  font-size:calc(var(--step--1) * .95);line-height:1.55}
/* Card treatment, matching .hlcard exactly. The type sizes were already right;
   what was wrong was that these sat as bare text beside a framed diagram, while
   every other heading-and-paragraph cluster on the site lives inside a card.
   Background is --bg rather than --surface because this section's ground is
   --surface, the same reason .pedfig uses --bg. */
.nextcopy{display:flex;flex-direction:column;gap:1.2rem}
.nextcopy article{background:var(--bg);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.5rem 1.6rem}
.nextcopy h3{font-size:var(--step-1);margin-bottom:.55rem}
.nextcopy p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55;margin:0}

/* A pedigree does not survive being scaled to a phone: at 390px the whole
   diagram is ~180px tall and the labels become unreadable. Wide diagrams
   scroll inside their own container rather than shrink, which keeps the
   symbols and the age-at-onset labels legible. The page itself never scrolls
   sideways. */
@media (max-width:700px){
  .pedfig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pedfig svg{min-width:430px}
  .pedfig figcaption{position:sticky;left:0}
}

/* ---- Sections with a hard-coded dark ground --------------------------- */
/* The differentiation section paints its own evergreen background, so it does
   NOT follow the theme. Using a theme token for its text was the bug: in dark
   mode --surface-2 becomes #1c2a22 and --sage becomes #3a5233, so the copy went
   dark-on-dark and vanished entirely. --pistachio survives because it happens
   to hold the same value in both themes, which is luck rather than design.
   These values are fixed, because the ground they sit on is fixed. */
.on-dark{--on-dark-body:#D8E5C9;--on-dark-head:#ffffff}
.on-dark h2,.on-dark h3{color:var(--on-dark-head)}
.on-dark p{color:var(--on-dark-body)}
.on-dark .eyebrow{color:var(--pistachio)}
.on-dark .hlcard{background:transparent;border-color:rgba(255,255,255,.16)}