/* Marketing one-pager. "Go deeper": the rank ladder is the layers of the skin, so the page is built as a cross-section.
   Clinical teal family with the energy turned up: deep teal-ink hero, condensed heavy display type, one signal amber
   (the app's milestone gold) for calls to action, XP and the stake. System fonts only; no external requests. */
:root{
  --paper:#f1f5f4;--paper2:#e4eeec;--card:#fff;--ink:#071e22;--mute:#42575d;--line:#cbdad9;
  --teal:#0b5560;--teal-d:#073a42;--teal2:#dcefed;--aqua:#34c6b4;
  --deep:#041a1e;--deep2:#082a30;--on-deep:#eaf5f3;--on-deep-mute:#a9c6c2;
  --amber:#f2b230;--amber-d:#a87508;--on-amber:#071e22;
  --ok:#1b7a3d;--okbg:#e5f4ea;--bad:#b83226;--lock:#d5dedd;--lock-d:#b3c2c1;
  --display:"Avenir Next Condensed","Bahnschrift","DIN Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --body:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --maxw:1180px;--r:14px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#071417;--paper2:#0b1d21;--card:#0f2327;--ink:#e6f0ef;--mute:#a3b8b9;--line:#21393e;
  --teal:#5fc4cf;--teal-d:#2b8792;--teal2:#11343a;--aqua:#4fd6c5;
  --deep:#030f12;--on-deep:#eaf5f3;--on-deep-mute:#9dbcb8;
  --ok:#6fd48f;--okbg:#14301f;--bad:#ff8a7d;--lock:#22363a;--lock-d:#18292c}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--body);overflow-wrap:break-word}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--teal);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--amber);color:var(--on-amber);padding:10px 14px;border-radius:8px;z-index:20;font-weight:700}
.skip:focus{top:12px}

h1,h2,h3{margin:0;font-family:var(--display);font-stretch:condensed;font-weight:800;letter-spacing:-.01em;line-height:.95}
h2{font-size:clamp(2.4rem,8vw,4.6rem);max-width:16ch;margin-bottom:40px}
h3{font-size:clamp(1.6rem,4.6vw,2.1rem);line-height:1;margin-bottom:10px}
p{margin:0 0 14px}
.fine{font-size:.9rem;color:var(--mute)}

/* buttons: chunky, with the app's pressed-edge shadow */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:12px;background:var(--amber);color:var(--on-amber);font:800 1.05rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;box-shadow:0 5px 0 var(--amber-d);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 0 var(--amber-d)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--amber-d)}
.btn-lg{min-height:60px;padding:0 34px;font-size:1.15rem}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem;box-shadow:0 3px 0 var(--amber-d)}
.btn-block{display:flex;width:100%}

/* header: always deep, so it reads as one piece with the hero */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--deep) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 1.35rem/1 var(--display);font-stretch:condensed;color:var(--on-deep);text-decoration:none}
/* the brand gives way first on a narrow screen with a wide fallback font (it ellipsises); Sign in and Get started never shrink */
.brand{min-width:0}
.brand [data-brand-slot]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{display:inline-grid;gap:2px;width:18px;flex:none}
.mark i{display:block;height:4px;border-radius:2px;background:var(--aqua)}
.mark i:nth-child(2){background:#1e8f8a}
.mark i:nth-child(3){background:var(--amber)}
.top nav{display:flex;align-items:center;gap:4px;flex:none}
.top nav a:not(.btn){padding:8px 10px;color:var(--on-deep);text-decoration:none;font-size:.95rem;font-weight:600}
.top nav a:not(.btn):hover{color:var(--aqua)}
.top nav .sec{display:none}

/* hero */
.hero{background:radial-gradient(120% 80% at 85% 10%,#0b3b42 0,var(--deep) 60%);color:var(--on-deep);padding:48px 0 64px;overflow:hidden}
.hero-grid{display:grid;gap:40px}
h1{font-size:clamp(3.2rem,13.5vw,6.2rem);line-height:.9;letter-spacing:-.015em;max-width:11ch;text-wrap:balance}
h1 [data-headline]{display:none}
h1[data-show="a"] [data-headline="a"],h1[data-show="b"] [data-headline="b"],h1[data-show="c"] [data-headline="c"]{display:inline}
.lead{font-size:clamp(1.1rem,3.4vw,1.3rem);line-height:1.5;color:var(--on-deep-mute);max-width:46ch;margin:26px 0 0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:34px 0 16px}
.hero .link{color:var(--on-deep);font-weight:700}
.hero .link:hover{color:var(--aqua)}
.hero .fine{color:var(--on-deep-mute)}
.countdown{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 18px;line-height:1.35;border:1px solid rgba(242,178,48,.45);border-radius:12px;color:var(--on-deep);font-size:.95rem;max-width:44ch}
.countdown[hidden]{display:none}
.countdown b{flex:none;font:800 2.6rem/1 var(--display);font-stretch:condensed;color:var(--amber);font-variant-numeric:tabular-nums}
.hero-art{margin:0;justify-self:center;width:100%;max-width:500px}
.hero-art figcaption{margin-top:14px;font-size:.92rem;color:var(--on-deep-mute)}
.ladder{display:block;width:100%;height:auto;overflow:visible}

/* the cross-section: a tonal ramp from the bright surface down into the deep */
.l1{fill:#e3f3f0}.l2{fill:#bfe5df}.l3{fill:#8fd0c6}.l4{fill:#5fb8ad}.l5{fill:#2e8e88}.l6{fill:#1f6e6c}.l7{fill:#165557}.l8{fill:#0e3e43}
.tissue path,.tissue rect,.tissue circle{vector-effect:non-scaling-stroke}
.tx-corn{stroke:#a8d3cc;stroke-width:3;stroke-linecap:round;fill:none}
.tx-gran circle{fill:#5aa79c}
.tx-spin{stroke:#6db6ab;stroke-width:1.5}
.tx-bas rect{fill:#4aa497;stroke:#3a8c81;stroke-width:1}
.tx-bm{fill:none;stroke:var(--aqua);stroke-width:4;stroke-linecap:round}
.tx-pap{fill:none;stroke:#3d8e8a;stroke-width:3;stroke-linecap:round}
.tx-ret{fill:none;stroke:#23706f;stroke-width:3;stroke-linecap:round}
.tx-fat circle{fill:#11474c;stroke:#1f6264;stroke-width:2}
.labels text{font:700 22px var(--body);fill:var(--on-deep)}
.labels text.xp{font:600 16px var(--body);fill:var(--on-deep-mute);font-variant-numeric:tabular-nums}
.labels path{stroke:var(--on-deep-mute);stroke-width:2}
.lb8 text:not(.xp){fill:var(--amber)}
.lb8 path{stroke:var(--amber)}
.probe{transform:translateY(524px)}
.probe path{stroke:var(--amber);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.probe circle{fill:var(--amber);stroke:var(--deep);stroke-width:4}

/* numbers */
.numbers{background:var(--paper);padding:56px 0;border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;margin:0}
.facts div{display:flex;flex-direction:column}
/* the number is the term and comes first in the source, so a screen reader says "2,000 questions..." in the order shown */
.facts dt{margin:0;font:800 clamp(3.4rem,15vw,6rem)/.9 var(--display);font-stretch:condensed;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.facts dd{margin:10px 0 0;font-size:.98rem;line-height:1.4;color:var(--mute);max-width:26ch}

/* the stake */
.stake{background:var(--amber);color:var(--on-amber);padding:64px 0}
.stake h2{font-size:clamp(3rem,13vw,7rem);max-width:none;margin-bottom:28px;line-height:.9}
.stake h2 span{display:block}
.stake-copy{max-width:52ch;font-size:1.1rem}
.punch{font:800 clamp(1.9rem,6vw,2.6rem)/1 var(--display);font-stretch:condensed;margin-bottom:16px}
.strong{font-weight:800}
.stake a{color:inherit}

/* journey: a roadmap spine with five nodes, like the app's path */
.journey-sec{padding:80px 0}
.journey{list-style:none;margin:0;padding:0;position:relative}
.journey::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:4px;border-radius:2px;background:linear-gradient(var(--teal),var(--teal) 80%,var(--amber))}
.journey li{position:relative;display:grid;grid-template-columns:50px 1fr;column-gap:18px;padding-bottom:56px}
.journey li:last-child{padding-bottom:0}
.node{grid-row:1/3;position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;font:800 1.4rem/1 var(--display);box-shadow:0 5px 0 var(--teal-d)}
@media (prefers-color-scheme:dark){.node{color:#062024}}
.journey li:last-child .node{background:var(--amber);color:var(--on-amber);box-shadow:0 5px 0 var(--amber-d)}
.beat-copy{padding-top:8px}
.beat-copy p{color:var(--mute);max-width:46ch;margin:0}
.beat-art{margin-top:22px;max-width:420px}
.beat-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(7,30,34,.12))}

/* product-peek visuals (drawn from the app's UI: chunky nodes, Start pill, options, timer, bars) */
.v-frame{fill:var(--card);stroke:var(--line);stroke-width:2}
.v-acc,.v-accfill{fill:var(--teal)}
.v-accd{fill:var(--teal-d)}
.v-acc2{fill:var(--teal2)}
.v-accst{stroke:var(--teal);stroke-width:3}
.v-accst-only{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round}
.v-onacc{fill:#fff}
.v-onacc-st{fill:#fff}
@media (prefers-color-scheme:dark){.v-onacc,.v-onacc-st{fill:#062024}}
.v-check{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.v-check-w{fill:none;stroke:var(--card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-line{fill:var(--line)}
.v-lock{fill:var(--lock)}
.v-lockd{fill:var(--lock-d)}
.v-mutefill{fill:var(--mute)}
.v-mutest{fill:none;stroke:var(--mute);stroke-width:2.5}
.v-ink{fill:var(--ink)}
.v-inkfill{fill:var(--ink)}
.v-opt{fill:var(--card);stroke:var(--line);stroke-width:2}
.v-key{fill:none;stroke:var(--line);stroke-width:2}
.v-okbg{fill:var(--okbg)}.v-okst{stroke:var(--ok);stroke-width:2}
.v-ok,.v-okfill{fill:var(--ok)}
.v-badfill{fill:var(--bad)}
.v-track{fill:var(--paper2)}
.v-goldfill{fill:var(--amber)}
.v-goldst{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.v-goldst.thick{stroke-width:4}
.v-today{fill:var(--card);stroke:var(--amber);stroke-width:4}
.v-card2{fill:var(--paper2);stroke:var(--line);stroke-width:2}
.v-card3{fill:var(--card);stroke:var(--line);stroke-width:2}
.o6{opacity:.45}.o8{opacity:.8}
.v-pill{font:800 13px var(--body);fill:#fff}
@media (prefers-color-scheme:dark){.v-pill{fill:#062024}}
.v-pill-ink{font:800 13px var(--body);fill:var(--on-amber)}
.v-btn{font:800 14px var(--body);fill:#fff}
@media (prefers-color-scheme:dark){.v-btn{fill:#062024}}
.v-timer{font:800 25px var(--display);font-stretch:condensed;fill:var(--paper);font-variant-numeric:tabular-nums}
.v-small{font:700 13px var(--body);fill:var(--mute)}
.v-rank{font:800 19px var(--display);font-stretch:condensed;fill:var(--ink)}
.r1{fill:#bfe5df}.r2{fill:#8fd0c6}.r3{fill:#5fb8ad}.r4{fill:#2e8e88}

/* pricing */
.pricing{background:var(--paper2);padding:80px 0;border-block:1px solid var(--line)}
.price-grid{display:grid;gap:36px;align-items:center}
.price-pitch p{font-size:1.15rem;color:var(--mute);max-width:40ch}
.price-pitch h2{margin-bottom:20px}
.price-card{background:var(--deep);color:var(--on-deep);border-radius:22px;padding:34px 28px 28px;max-width:480px;width:100%;box-shadow:0 30px 60px -30px rgba(4,26,30,.55);position:relative;overflow:hidden}
.price-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#e3f3f0,#8fd0c6,#2e8e88,#0e3e43)}
.plan{font-weight:700;color:var(--aqua);margin-bottom:4px}
.price{margin:0}
.amt{font:800 clamp(4.4rem,20vw,6rem)/.95 var(--display);font-stretch:condensed;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.per{font-size:1.1rem;color:var(--on-deep-mute)}
.day{color:var(--on-deep-mute);margin-top:8px}
.plan-opt{padding:18px 0;border-top:1px solid rgba(255,255,255,.18)}
.plan-opt .amt{font-size:clamp(3rem,14vw,4.2rem)}
.plan-opt .best{margin:0 0 6px;font:700 .8rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-mute)}
.price-card .ticks{margin:20px 0 26px}
.price-card .fine{color:var(--on-deep-mute);margin:16px 0 0}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:7px 0 7px 30px}
.ticks li::before{content:"";position:absolute;left:3px;top:.8em;width:13px;height:7px;border-left:3px solid var(--aqua);border-bottom:3px solid var(--aqua);transform:rotate(-45deg)}

/* faq */
.faq-sec{padding:80px 0}
.faq-grid{display:grid;gap:8px}
.faq{border-top:2px solid var(--ink);max-width:760px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:14px 0;font-weight:700;font-size:1.1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:800 1.8rem/1 var(--display);color:var(--teal);flex:none;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin:0 0 20px;max-width:62ch}

/* closing */
.closing{background:var(--teal);color:#fff;padding:88px 0;text-align:left}
@media (prefers-color-scheme:dark){.closing{background:#0b4a53}}
.closing h2{font-size:clamp(3rem,12vw,6.6rem);max-width:12ch;margin-bottom:24px;line-height:.9}
.closing p{font-size:1.15rem;max-width:44ch;margin-bottom:30px;color:#d6efec}

footer{padding:40px 0 56px;background:var(--deep);color:var(--on-deep)}
.brand-foot{font:800 1.3rem/1 var(--display);font-stretch:condensed;margin-bottom:10px}
footer .fine{max-width:62ch;color:var(--on-deep-mute)}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 18px;padding:0}
.legal-links a{color:var(--on-deep);font-size:.92rem}
.legal-links a:hover{color:var(--aqua)}

/* legal pages (generated from docs/legal by scripts/static-dist.js): reading text, not display type */
.draft-banner{margin:0;padding:8px 20px;background:var(--bad);color:#fff;font-weight:800;text-align:center}
@media (prefers-color-scheme:dark){.draft-banner{background:#8f1d14}}
.legal{max-width:78ch;padding-top:40px;padding-bottom:64px}
.legal h1{font-size:clamp(2.2rem,7vw,3.4rem);max-width:none;line-height:1.02;margin-bottom:24px}
.legal h2{font-size:clamp(1.5rem,4vw,1.9rem);max-width:none;margin:40px 0 12px;line-height:1.1}
.legal h3,.legal h4{font-family:var(--body);font-size:1.1rem;font-weight:800;letter-spacing:0;line-height:1.3;margin:28px 0 8px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:24px}
.legal li{margin-bottom:6px}
.legal blockquote{margin:0 0 18px;padding:12px 16px;border-left:4px solid var(--amber);background:var(--card)}
.legal blockquote p:last-child{margin-bottom:0}
.legal code{font-size:.9em;overflow-wrap:anywhere}
.legal pre{overflow-x:auto;padding:12px;background:var(--card);border-radius:8px}
.legal hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:8px}
.legal table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card)}
.legal th,.legal td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere;min-width:8ch}
.legal th{background:var(--paper2)}
.legal-version{margin:-12px 0 24px;padding:10px 14px;border-left:4px solid var(--line);background:var(--card);font-size:.95rem}
.legal-history{list-style:none;padding-left:0}
.legal-history li{margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.legal-history h2{margin-top:0}

@media (min-width:700px){
  .top nav .sec{display:inline-block}
  .facts{grid-template-columns:repeat(4,1fr)}
  .numbers{padding:72px 0}
  .stake{padding:96px 0}
  .stake-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
  .stake h2{margin-bottom:0}
}
@media (min-width:960px){
  .hero{padding:72px 0 88px}
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}
  .journey-sec{padding:112px 0}
  /* desktop: the spine runs down the middle and the beats alternate either side of it */
  .journey::before{left:calc(50% - 2px)}
  .journey li{grid-template-columns:1fr 64px 1fr;column-gap:40px;padding-bottom:72px;align-items:center}
  .node{grid-row:1;grid-column:2;width:64px;height:64px;font-size:1.8rem;justify-self:center}
  .beat-copy{grid-row:1;grid-column:1;text-align:right;justify-self:end;padding:0}
  .beat-copy p{margin-left:auto}
  .beat-art{grid-row:1;grid-column:3;margin:0}
  .journey li:nth-child(even) .beat-copy{grid-column:3;text-align:left;justify-self:start}
  .journey li:nth-child(even) .beat-copy p{margin-left:0}
  .journey li:nth-child(even) .beat-art{grid-column:1;justify-self:end}
  .price-grid{grid-template-columns:1fr 1fr;gap:64px}
  .price-card{justify-self:end}
  .faq-grid{grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
  .closing{padding:128px 0}
  .closing-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end}
  .closing h2{margin-bottom:0;max-width:none}
}

/* one orchestrated moment: the probe steps down the skin, layer by layer, lighting each rank as it passes */
@media (prefers-reduced-motion:no-preference){
  .probe{animation:descend 4.2s cubic-bezier(.5,0,.2,1) .5s both}
  @keyframes descend{
    0%{transform:translateY(38px)}9%,12.5%{transform:translateY(38px)}
    16%,25%{transform:translateY(94px)}28.5%,37.5%{transform:translateY(154px)}41%,50%{transform:translateY(214px)}
    53.5%,62.5%{transform:translateY(266px)}66%,75%{transform:translateY(326px)}78.5%,87.5%{transform:translateY(410px)}91%,100%{transform:translateY(524px)}}
  .lb text:not(.xp){animation:lit .9s ease-out both}
  .lb1 text{animation-delay:.5s}.lb2 text{animation-delay:1.05s}.lb3 text{animation-delay:1.55s}.lb4 text{animation-delay:2.1s}
  .lb5 text{animation-delay:2.6s}.lb6 text{animation-delay:3.15s}.lb7 text{animation-delay:3.65s}
  .lb8 text:not(.xp){animation:lit-stay .6s ease-out 4.25s both}
  @keyframes lit{0%{fill:var(--on-deep)}30%{fill:var(--amber)}100%{fill:var(--on-deep)}}
  @keyframes lit-stay{from{fill:var(--on-deep)}to{fill:var(--amber)}}
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(n+4){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,summary::after{transition:none}}
/* footer links on the deep background: the light aqua (8.4:1), not the body link teal (2.1:1 there) */
footer a{color:var(--aqua)}
footer a:hover{color:var(--on-deep)}
/* the 404 page (site/404.html) */
.notfound .btn{margin:8px 0 18px}
.price-card .vat{margin:2px 0 0;font-size:.9rem;color:var(--on-deep-mute)}