@font-face{font-family:"Albert Sans";src:url(/fonts/albert-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;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:"Albert Sans";src:url(/fonts/albert-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;src:url(/fonts/jost-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;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:Jost;src:url(/fonts/jost-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Studio (light) and Obsidian (dark): the app's own tokens (app/src/core/theme/tokens.ts). */
:root{
  --bg:#E6E9ED;--top:#F3F4F6;--ink:#0F1012;--soft:#474B52;--muted:#5E626A;
  --line:rgba(15,16,18,.08);--glass:rgba(255,255,255,.55);--rim:rgba(255,255,255,.78);
  --on-ink:#FFFFFF;--shadow:rgba(40,48,60,.45);--track:rgba(15,16,18,.2);--danger:#B3372F;
  --mist-a:#FFFFFF;--mist-b:#CDD2D9;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --gutter:clamp(16px,4.2vw,60px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A0A0B;--top:#2A2C30;--ink:#F2F3F4;--soft:#B6B9BF;--muted:#8E9198;
  --line:rgba(255,255,255,.08);--glass:rgba(255,255,255,.055);--rim:rgba(255,255,255,.17);
  --on-ink:#0B0B0C;--shadow:#000;--track:rgba(255,255,255,.22);--danger:#E0675F;
  --mist-a:#3A3D42;--mist-b:#151618;
}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Albert Sans",system-ui,sans-serif;font-size:17px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(70% 50% at 82% 0,var(--mist-a) 0,transparent 70%),radial-gradient(60% 40% at 0 60%,var(--mist-b) 0,transparent 70%),linear-gradient(180deg,var(--top),var(--bg) 60%);
  background-color:var(--bg);background-attachment:fixed;overflow-x:hidden}
::selection{background:var(--ink);color:var(--on-ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.num{font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.caps{font-family:Jost,sans-serif;font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:10;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:999px}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:block;width:150px;color:var(--ink)}
.logo svg{display:block;width:100%;height:auto}
.nav ul{display:flex;gap:32px;list-style:none;font-size:15px;color:var(--soft)}
.nav ul a{text-decoration:none}.nav ul a:hover{color:var(--ink)}
.lang{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.24em;text-decoration:none;color:var(--muted);padding:10px 4px}
.lang:hover{color:var(--ink)}
@media (max-width:860px){.nav ul{display:none}.logo{width:124px}}

/* Hero: the day strip */
.hero{min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(24px,5vh,56px)}
h1{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(52px,6.2vw,88px);line-height:.95;letter-spacing:-.01em}
.lede{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:var(--soft);max-width:46ch;line-height:1.45}
.hero-form{flex:none;width:min(440px,100%)}
@media (max-width:980px){.hero-head{flex-direction:column;align-items:flex-start;gap:28px}}

.strip{display:flex;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,7vh,72px);padding:0 var(--gutter);justify-content:center;flex:1}
.slot{flex:0 1 300px;min-width:0}
.slot figcaption{display:flex;align-items:baseline;gap:12px}
.slot .num{font-size:clamp(34px,3vw,44px)}
.thread{position:relative;margin-top:10px;padding-top:12px;font-size:14px;line-height:1.4;color:var(--soft);min-height:calc(2.8em + 12px)}
.thread span{display:block}
/* Desktop: the hero ends mid-screen and the phones dissolve under the edge instead of being clipped. */
@media (min-width:861px){
  .hero{height:100svh;min-height:760px;max-height:1100px}
  .strip{min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent)}
}
.phone{margin-top:14px;border-radius:clamp(30px,3vw,44px);overflow:hidden;border:1px solid var(--line);box-shadow:0 50px 80px -50px var(--shadow),0 0 0 6px var(--glass);background:var(--bg)}
@media (prefers-reduced-motion:no-preference){
  .slot{animation:rise 1.1s var(--ease) both}
  .slot{animation-delay:.4s}.slot:nth-child(2){animation-delay:.48s}.slot:nth-child(3){animation-delay:.56s}.slot:nth-child(4){animation-delay:.64s}
}
@keyframes rise{from{transform:translateY(64px)}}
@media (max-width:860px){
  .strip{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:28px;scrollbar-width:none;margin-left:0;margin-right:0}
  .strip::-webkit-scrollbar{display:none}
  .slot{flex:0 0 72%;scroll-snap-align:center}
  .hero{min-height:auto}
}

/* Waitlist form */
.wl-row{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--glass);border:1px solid var(--rim);box-shadow:0 18px 40px -24px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.wl-row:focus-within{border-color:var(--ink)}
.wl input[type=email]{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:0 16px;outline:0}
.wl input::placeholder{color:var(--muted)}
.btn{flex:none;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:inherit;font-size:15px;font-weight:600;padding:14px 22px;cursor:pointer;transition:transform .16s var(--ease),opacity .16s}
.btn:hover{opacity:.88}.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.5;cursor:default}
.wl label.agree{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
.wl input[type=checkbox]{flex:none;-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:1px;border-radius:5px;border:1.5px solid var(--muted);background:var(--glass);display:grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.wl input[type=checkbox]::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-ink);border-bottom:2px solid var(--on-ink);transform:translateY(-1px) rotate(-45deg) scale(.6);opacity:0;transition:transform .15s var(--ease-out),opacity .15s var(--ease-out)}
.wl input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
.wl input[type=checkbox]:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1);opacity:1}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl .status{margin-top:8px;font-size:14px;color:var(--soft)}
.wl .status:empty{margin:0}
.wl .status.err{color:var(--danger)}
.soon{margin-top:10px;font-size:13px;color:var(--muted)}

/* Sections */
section{padding:clamp(88px,12vw,160px) 0 0}
h2{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.005em;max-width:16ch}
.intro{margin-top:18px;font-size:clamp(17px,1.4vw,19px);color:var(--soft);max-width:56ch}

/* Check-in */
.checkin{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(36px,5vw,64px)}
@media (max-width:900px){.checkin{grid-template-columns:1fr;gap:20px}.score{order:-1}.score .num{font-size:clamp(110px,34vw,150px)}.score .why{display:none}}
.panel{padding:clamp(22px,3vw,36px);border-radius:30px;background:var(--glass);border:1px solid var(--line);border-top-color:var(--rim);box-shadow:0 40px 80px -48px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.q+.q{margin-top:28px}
fieldset.q{border:0;min-width:0}
.q legend,.q .row label{font-size:16px;font-weight:500}
.q .row{display:flex;justify-content:space-between;align-items:baseline}
.q output{font-weight:300;font-size:24px;font-variant-numeric:tabular-nums}
.q input[type=range]{width:100%;margin-top:14px;height:28px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.q input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--track)}
.q input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--track)}
.q input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:var(--ink);border:3px solid var(--rim);box-shadow:0 6px 14px -4px var(--shadow)}
.q input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--rim);box-shadow:0 6px 14px -4px var(--shadow)}
.q input[type=range]:focus-visible{outline:none}
.q input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:3px}
.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label span{display:flex;align-items:center;justify-content:center;height:46px;border-radius:14px;border:1px solid var(--line);font-size:15px;color:var(--soft);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.seg .ends{grid-column:1/-1;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:2px}
.score{text-align:center}
.score .num{font-weight:100;font-size:clamp(150px,22vw,300px);letter-spacing:-.06em;margin-top:6px}
.score .band{font-size:clamp(18px,1.6vw,21px);margin-top:8px}
.score .why{font-size:14px;color:var(--muted);margin:14px auto 0;max-width:44ch}
.why-m{display:none;font-size:14px;color:var(--muted);margin-top:16px}
@media (max-width:900px){.why-m{display:block}}

/* What is inside: one spec sheet, area by area */
.spec{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.area{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3.5vw,44px) 0;border-bottom:1px solid var(--line)}
.area h3{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(26px,2.4vw,34px);letter-spacing:.02em}
.area .num{font-size:clamp(56px,6vw,88px);margin-top:10px}
.area .num small{font-family:"Albert Sans";font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:8px}
.area ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;align-content:start}
.area li{font-size:16px;color:var(--soft);padding-top:12px;border-top:1px solid var(--line)}
.area li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media (max-width:760px){.area{grid-template-columns:1fr}.area ul{grid-template-columns:1fr}}

/* Privacy */
.facts{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.facts p{font-size:16px;color:var(--soft);border-top:1px solid var(--ink);padding-top:16px}
.facts b{display:block;font-size:19px;color:var(--ink);font-weight:600;margin-bottom:6px}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

/* FAQ */
.faq{margin-top:clamp(32px,4vw,56px);max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(18px,1.5vw,20px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 24px;color:var(--soft);max-width:66ch}

/* Close */
.close{text-align:center;padding-bottom:clamp(88px,12vw,160px)}
.close h2{margin:0 auto;max-width:none}
.close .intro{margin:18px auto 0}
.close .wl{max-width:460px;margin:32px auto 0;text-align:left}

/* Legal pages (generated by build-legal.mjs) */
.doc{max-width:72ch;padding:clamp(32px,6vw,72px) 0 clamp(64px,8vw,120px)}
.doc h1{font-size:clamp(36px,5vw,60px);line-height:1.05;margin-bottom:24px}
.doc h2{font-family:"Albert Sans",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;margin:48px 0 12px;max-width:none}
.doc p,.doc li,.doc td,.doc th{font-size:16px;color:var(--soft)}
.doc p+p{margin-top:12px}
.doc b{color:var(--ink)}
.doc ul,.doc ol{padding-left:20px;display:grid;gap:8px;margin-top:12px}
.doc table{width:100%;border-collapse:collapse;margin-top:16px}
.doc th{text-align:left;color:var(--ink);font-weight:600}
.doc th,.doc td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}

footer{border-top:1px solid var(--line);padding:40px 0 56px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:12px 28px}
footer .src{flex-basis:100%;font-size:13px}

/* 404 */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px}
.nf .num{font-size:clamp(120px,22vw,260px);font-weight:100}
.nf h1{font-size:clamp(36px,5vw,64px)}
.nf .btn{display:inline-block;text-decoration:none;margin-right:16px}

/* Until the waitlist and legal pages go live (January 2027) the forms stay in the markup, hidden. */
[hidden]{display:none!important}
.launch{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(22px,2vw,28px);letter-spacing:.01em;color:var(--soft);padding-bottom:6px}

/* ---------- Motion ----------
   One authored moment: the day line draws under the times, 7:10 to 21:00, a dot lights at each moment and its line
   appears. Everything else repeats one material idea (hairlines draw, headings rise out of a mask) once, on first view.
   Content is visible by default: the hidden start states only apply under html.motion, which app.js sets when the
   visitor has not asked for reduced motion. */

/* The day line: one hairline segment per moment, reaching across the gap to the next. */
.thread::before{content:"";position:absolute;left:0;top:0;height:1px;right:calc(-1 * clamp(16px,2vw,28px));background:var(--ink);opacity:.28;transform-origin:left}
.slot:last-child .thread::before{right:0}
.thread::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .thread::before{animation:draw .52s var(--ease-in-out) both}
  .thread::after{animation:dot .32s var(--ease-out) both}
  .thread span{animation:say .45s var(--ease-out) both}
  .slot:nth-child(1) .thread::before,.slot:nth-child(1) .thread::after{animation-delay:1.3s}
  .slot:nth-child(2) .thread::before,.slot:nth-child(2) .thread::after{animation-delay:1.72s}
  .slot:nth-child(3) .thread::before,.slot:nth-child(3) .thread::after{animation-delay:2.14s}
  .slot:nth-child(4) .thread::before,.slot:nth-child(4) .thread::after{animation-delay:2.56s}
  .slot:nth-child(1) .thread span{animation-delay:1.48s}
  .slot:nth-child(2) .thread span{animation-delay:1.9s}
  .slot:nth-child(3) .thread span{animation-delay:2.32s}
  .slot:nth-child(4) .thread span{animation-delay:2.74s}
  .hero-head>div,.launch{animation:lift .9s var(--ease-out) both}
  .launch{animation-delay:.12s}
}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes dot{from{transform:scale(.4);opacity:0}}
@keyframes say{from{opacity:0;transform:translateY(4px)}}
@keyframes lift{from{opacity:0;transform:translateY(14px)}}



/* Hairlines draw from the left: spec rows and the privacy facts. */
.area{position:relative;border-bottom:0}
.area::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left}
.facts p{position:relative;border-top:0}
.facts p::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left}
.motion .area::after,.motion .facts p::before{transition:transform .9s var(--ease-in-out) .15s}
.motion .area:not(.in)::after,.motion .facts p:not(.in)::before{transform:scaleX(0)}

/* Feedback */
.seg label span{transition:background .2s,color .2s,border-color .2s,transform .12s var(--ease-out)}
.seg label:active span{transform:scale(.95)}
.q input[type=range]::-webkit-slider-thumb{transition:transform .15s var(--ease-out)}
.q input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
@media (hover:hover) and (pointer:fine){
  .nav ul a,.faq summary span,footer a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease-out),color .2s}
  .nav ul a:hover,footer a:hover{background-size:100% 1px}
  footer a{text-decoration:none}
}
.faq details[open] p{animation:open .3s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .faq details[open] p{animation:fade .2s ease}
  @keyframes fade{from{opacity:0}}
}

/* ---------- Opening, like the app ----------
   The wordmark signs itself (two pen swings, then the letters, same timing as Wordmark.tsx) and the bloom draws in
   and breathes (bloom.js). */
.sign path{stroke-dasharray:1;stroke-dashoffset:0}
.sign .fl{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sign .fl{animation:swing .9s cubic-bezier(.16,1,.3,1) both}
  .sign .fl:nth-child(2){animation-delay:.09s}
  .sign g+g path{animation:ink 1.1s cubic-bezier(.16,1,.3,1) both}
  .sign g+g path:nth-child(1){animation-delay:.22s}.sign g+g path:nth-child(2){animation-delay:.33s}
  .sign g+g path:nth-child(3){animation-delay:.44s}.sign g+g path:nth-child(4){animation-delay:.55s}
  .sign g+g path:nth-child(5){animation-delay:.66s}.sign g+g path:nth-child(6){animation-delay:.77s}
  .bloom-hero path{animation:ink 1.1s cubic-bezier(.16,1,.3,1) .3s both}
}
@keyframes ink{from{stroke-dashoffset:1}}
@keyframes swing{0%{stroke-dashoffset:1;opacity:1}55%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}

.bloom{display:block;color:var(--ink);overflow:visible}
.bloom path{stroke-dasharray:1;stroke-dashoffset:0}
.launch-wrap{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.bloom-hero{flex:none;width:clamp(64px,7vw,96px);height:auto}
.bloom-hero path{stroke-width:3.4}

/* ---------- The story: scroll pours the bloom into each part of the day ----------
   Without JavaScript it is a plain list; with it (html.story-on) the stage sticks while the track scrolls past. */
.story{padding:0;margin-top:clamp(88px,12vw,160px)}
.story-stage{max-width:1320px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.bloom-story{width:clamp(160px,28vh,300px);height:auto}
.bloom-story path{stroke-width:1.5}
.story-steps{margin-top:clamp(20px,3vh,36px)}
.step+.step{margin-top:36px}
.step h3{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.005em}
.step p{margin-top:14px;font-size:clamp(17px,1.4vw,20px);color:var(--soft);max-width:40ch}
.story-dots,.story-phone{display:none}

.story-on .story{height:500vh}
.story-on .story-stage{position:sticky;top:0;height:100svh}
.story-on .story-steps{position:relative;min-height:13em}
.story-on .step{position:absolute;left:0;top:0;margin:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.story-on .step.on{opacity:1;transform:none;pointer-events:auto}
.story-on .story-dots{display:flex;gap:clamp(12px,2vw,28px);list-style:none;margin-top:8px}
.story-dots li{flex:1;max-width:140px;padding-top:12px;position:relative;font-family:Jost,sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.story-dots li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--track);transform-origin:left;transition:background .3s}
.story-dots li.on{color:var(--ink)}
.story-dots li.on::before{background:var(--ink)}
.story-on .story-phone{display:block;position:relative;justify-self:center;width:min(340px,36vh);aspect-ratio:780/1688;border-radius:clamp(30px,3vw,44px)}
.story-phone picture{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-out)}
.story-phone picture.on{opacity:1}
.story-phone img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.story-on .step{transform:none}}
@media (max-width:860px){
  .story-stage{grid-template-columns:1fr}
  .story-on .story{height:400vh}
  .story-on .story-stage{align-content:center;gap:18px}
  .story-on .story-steps{min-height:9.5em}
  .step h3{font-size:34px}
  .step p{font-size:16px;margin-top:8px}
  .story-on .story-phone{width:calc(38svh / 2.164);border-radius:24px}
  .bloom-story{width:clamp(90px,13svh,130px)}
  .story-dots li{font-size:11px;letter-spacing:.12em}
}

/* ---------- Scroll-linked exit of the hero (native scroll timelines, off the main thread) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) and (min-width:861px) {
    .hero-head{animation:hero-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .strip{animation:strip-out linear both;animation-timeline:view();animation-range:exit -10% exit 90%}
  }
}
@keyframes hero-out{to{opacity:.15;transform:translateY(-60px)}}
@keyframes strip-out{to{opacity:.4;transform:scale(.93)}}

/* ---------- Floating glass bar once the hero is gone (app.js clones the nav into it) ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line);transform:translateY(-101%);transition:transform .4s var(--ease-out)}
.topbar.on{transform:none}
.topbar .nav{height:60px}
.topbar .logo{width:112px}
@media (prefers-reduced-motion:reduce){.topbar{transform:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}.topbar.on{opacity:1;visibility:visible}}
@media (prefers-reduced-transparency:reduce){.topbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
main section{scroll-margin-top:72px}

/* ---------- Page to page: a crossfade, the logo stays put ---------- */
@view-transition{navigation:auto}
.logo{view-transition-name:logo}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}