@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/fonts/dm-sans-latin-ext-wght.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:normal;font-display:swap;font-weight:100 1000;src:url(/fonts/dm-sans-latin-wght.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}

:root{
  --ink:#1D1D1F;--ink2:#515154;--ink3:#5C5C62;--acc:#4B44D6;--band:#E5484D;--a2:#0E9F8E;--a3:#D98300;
  --fig:#17171A;--ridge:#1D1D1F;--paper:#FFFFFF;
  --glass:rgb(255 255 255 / .58);--gs:rgb(255 255 255 / .8);--edge:rgb(255 255 255 / .9);--hair:rgb(0 0 0 / .07);
  --shadow:0 20px 60px rgb(60 40 120 / .14),0 2px 6px rgb(0 0 0 / .05);
  --sky-top:#E9B8C9;--sky-mid:#FFD6C2;--sky-low:#FBE7B5;--sun:#FFF3D6;
}
*{box-sizing:border-box}
html{background:var(--sky-low)}
body{margin:0;background:var(--sky-low);color:var(--ink);font:15px/1.4 'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.g{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);box-shadow:var(--shadow)}
@media (prefers-reduced-transparency:reduce){.g{background:var(--gs);-webkit-backdrop-filter:none;backdrop-filter:none}}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- the story: a tall track with one sticky stage ---------- */
.story{position:relative;height:1100vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 58%,var(--sky-low) 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11%;pointer-events:none;background:linear-gradient(180deg,transparent,var(--sky-low))}
.copy{position:absolute;left:0;right:0;top:clamp(56px,11svh,120px);display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 20px;text-align:center;pointer-events:none}
.heads{position:relative;display:grid;justify-items:center}
.heads h1,.heads h2{grid-area:1/1;margin:0;max-width:14ch;font-size:clamp(30px,min(6.4vw,11svh),78px);font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--ink);text-wrap:balance}
.heads h2{opacity:0}
.sub{margin:-6px 0 0;max-width:36ch;font-size:clamp(15px,1.6vw,18px);line-height:1.4;color:var(--ink2);opacity:0;text-wrap:balance}
.chev{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media (prefers-reduced-motion:reduce){.chev{display:none}}

/* chapters: one big line on the sky at a time; classes, so a half-finished scroll still shows crisp text */
.chap{position:absolute;left:0;right:0;top:clamp(56px,10svh,110px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.chap.on{opacity:1;transform:none}
.chap .big{margin:0;max-width:20ch;font-size:clamp(24px,min(4.4vw,7.4svh),54px);font-weight:700;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.chap .small{margin:0;max-width:36ch;font-size:clamp(14px,min(1.7vw,2.6svh),20px);line-height:1.35;color:var(--ink2);text-wrap:balance}
.chap .small em{font-style:normal;color:var(--ink);font-weight:600}
.heads h1{transition:opacity .5s}.heads h1.off{opacity:0}
.heads h2{transition:opacity .5s}.heads h2.on{opacity:1}
.go{pointer-events:auto;transition:opacity .5s}.go.off{opacity:0;pointer-events:none}
.sub{transition:opacity .5s}.sub.on{opacity:1}
.chev{transition:opacity .4s}.chev.off{opacity:0}

/* bubbles: dialogue and product moments, pinned to the figure that speaks */
#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.bub .in{position:absolute;left:var(--lx,0);bottom:16px;background:var(--gs);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:var(--ink);opacity:0;transform:scale(.55);transform-origin:var(--tx,50%) 100%;transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .25s}
.bub.dn .in{bottom:auto;top:16px;transform-origin:var(--tx,50%) 0}
.bub.on .in{opacity:1;transform:none}
.bub.dim.on .in{opacity:.3}
.bub .in::after{content:"";position:absolute;left:calc(var(--tx,50%) - 10px);bottom:-10px;border:10px solid transparent;border-bottom:0;border-top:12px solid var(--gs);filter:drop-shadow(0 3px 3px rgb(0 0 0 / .08))}
.bub.dn .in::after{bottom:auto;top:-10px;border-top:0;border-bottom:12px solid var(--gs);filter:drop-shadow(0 -3px 3px rgb(0 0 0 / .06))}
@keyframes blink{50%{opacity:0}}
.tag .in,.toast .in{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.tag .in i,.toast .in i{width:9px;height:9px;border-radius:50%}
@keyframes blink{50%{opacity:0}}

/* ---------- three blocks ---------- */
.blocks{position:relative;padding:clamp(40px,8vw,96px) 20px;background:linear-gradient(180deg,var(--sky-low),color-mix(in srgb,var(--sky-low) 70%,var(--sky-mid)))}
.blocks .wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border-radius:28px;padding:18px 18px 24px;display:flex;flex-direction:column;gap:16px}
.card svg{width:100%;height:auto;display:block;border-radius:18px;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 70%,var(--sky-low))}
.card .more{margin:-6px 6px 0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.card p{margin:0 6px;font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
@media (max-width:820px){.blocks .wrap{grid-template-columns:1fr;max-width:460px}}


/* reduced motion: one still scene, crowd already present */
.still .story{height:100vh;height:100svh}
.still .stage{position:relative}
/* ---------- the app's tokens (DESIGN.md): DM Sans to 600, ink button, 8/6/14px corners, near-solid surfaces, nothing loops ---------- */
:root{--on-ink:#fff;--gs:rgb(255 255 255 / .92)}
.heads h1,.heads h2{font-weight:600;letter-spacing:-.035em;font-size:clamp(32px,min(6vw,10.5svh),72px)}
.chap .big{font-weight:600;letter-spacing:-.03em}
.card p{font-weight:600;letter-spacing:-.02em}
.copy{top:clamp(84px,12svh,128px)}
.chap{top:clamp(84px,11svh,118px)}
.capsule{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:2;height:44px;padding:0 16px 0 12px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);background:var(--gs);border:1px solid var(--edge);box-shadow:var(--shadow)}
.capsule svg{width:16px;height:22px;color:var(--fig);--band:#E5484D}
.chev{animation:bob 1.8s ease-in-out 3;border-radius:12px;background:var(--gs);border:1px solid var(--edge);box-shadow:var(--shadow)}
.ask{position:relative;margin-top:12px;width:min(440px,calc(100vw - 40px));min-height:46px;padding:11px 14px;display:flex;align-items:center;gap:9px;border-radius:12px;background:var(--gs);border:1px solid var(--edge);box-shadow:var(--shadow);font-size:15px;font-weight:500;text-align:left;color:var(--ink)}
.ask::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top:10px solid var(--gs)}
.ask svg{flex:none;width:16px;height:16px;color:var(--ink3)}
.ask i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.ask .caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--ink);animation:blink 1s steps(1) infinite}
.bub .in{border-radius:14px;-webkit-backdrop-filter:none;backdrop-filter:none}
.tag .in,.toast .in{border-radius:6px;padding:5px 9px;font-size:12px;font-weight:500;gap:7px}
.tag .in i,.toast .in i{width:8px;height:8px}
#bTap .in{width:min(320px,calc(100vw - 24px));padding:14px}
#bTap .who{display:flex;align-items:center;gap:6px;margin-bottom:8px}
#bTap .mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:600}
#bTap .m0{background:linear-gradient(135deg,#C04A2C,#A93A2F)}#bTap .m1{background:linear-gradient(135deg,#237F4C,#1E6F55)}
#bTap .you{width:auto;padding:0 9px;border-radius:12px;background:linear-gradient(135deg,#6A4DF0,#2E6BDB)}
#bTap .ar{color:var(--ink3);font-size:12px}
#bTap b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
#bTap small{display:block;font-size:12px;color:var(--ink2);margin:1px 0 9px}
#bTap .chips{display:flex;gap:5px;margin-bottom:11px}
#bTap .chips span{padding:3px 7px;border-radius:6px;background:rgb(24 112 61 / .12);color:#18703D;font-size:11.5px;font-weight:500}
#bTap .act{position:relative}
#bTap .btns,#bTap .line{transition:opacity .25s}
#bTap .btns{display:flex;gap:6px}
#bTap .btns span{flex:1;text-align:center;padding:7px 4px;border-radius:8px;background:var(--hair);font-size:12.5px;font-weight:500}
#bTap .btns span:first-child{flex:1.7;background:var(--ink);color:var(--on-ink);font-weight:600;transition:transform .18s}
#bTap.press .btns span:first-child{transform:scale(.94)}
#bTap .line{margin:8px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.35}
#bTap .done{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity .25s;font-size:13px;font-weight:600}
#bTap.fin .btns,#bTap.fin .line{opacity:0}#bTap.fin .done{opacity:1}
#bHide .in{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:nowrap}
#bHide .in span{display:inline-flex;align-items:center;gap:6px}
#bHide svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bHide .in .h2,#bHide.done .in .h1{display:none}#bHide.done .in .h2{display:inline-flex}
#bHide.press .h1{transform:scale(.92)}
#cursor{position:absolute;left:0;top:0;pointer-events:none;opacity:0;will-change:transform;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .3))}
.card{border-radius:16px}.card.g{background:var(--gs);-webkit-backdrop-filter:none;backdrop-filter:none}.card svg{border-radius:10px}

@media (prefers-color-scheme:dark){:root{--ink:#F5F5F7;--ink2:#C7C7CC;--ink3:#A1A1A8;--acc:#9C9CFF;--a2:#4FD1BD;--a3:#F2B24A;--fig:#EDEBFF;--ridge:#05050A;--paper:#2B2B38; --glass:rgb(40 40 52 / .52);--gs:rgb(40 40 52 / .85);--edge:rgb(255 255 255 / .14);--hair:rgb(255 255 255 / .08); --shadow:0 20px 60px rgb(0 0 0 / .45);--sky-top:#0A0A0F;--sky-mid:#2B1E6B;--sky-low:#3A1F2E;--sun:#6B3F5E;--on-ink:#0A0A0F;--gs:rgb(30 30 40 / .94)}#bTap .chips span{color:#4CD07D;background:rgb(76 208 125 / .14)}}
.foot{max-width:1080px;margin:clamp(28px,5vw,56px) auto 0;padding-top:20px;border-top:1px solid var(--hair);text-align:center;font-size:12.5px;color:var(--ink3)}
.foot p{margin:0 0 10px;line-height:1.5}
.foot a{color:var(--ink3);margin:0 9px;text-decoration:none}.foot a:hover{color:var(--ink)}

/* asking to join the beta (decision 176): the button, and a small form in a dialog; without a script the button is a link to the plain form */
[hidden]{display:none !important}
.ra{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:8px;background:var(--ink);color:var(--on-ink);font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgb(0 0 0 / .18)}
.ra:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
dialog.rq{padding:0;border:1px solid var(--edge);border-radius:14px;background:var(--gs);color:var(--ink);box-shadow:var(--shadow);width:min(380px,calc(100vw - 32px))}
dialog.rq::backdrop{background:rgb(10 10 15 / .38)}
.rq form,.rq .rq-done{display:grid;gap:12px;padding:20px}
.rq h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.rq p{margin:0;font-size:13px;line-height:1.45;color:var(--ink2)}
.rq label{display:grid;gap:5px;font-size:12px;font-weight:500;color:var(--ink2)}
.rq input{box-sizing:border-box;width:100%;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--edge);background:var(--paper);color:var(--ink);font:inherit;font-size:14px}
.rq input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.rq .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rq .row{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.rq button{height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--edge);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rq button.ink{background:var(--ink);color:var(--on-ink);border-color:transparent}
.rq .err{color:#b03520}
.rq .fine{font-size:11.5px;color:var(--ink3)}.rq .fine a{color:var(--ink3)}
@media (prefers-color-scheme:dark){.rq .err{color:#ff7a66}}

/* what were inline styles */
.s1{position:absolute}
.s2{stroke:var(--band,#E5484D)}
.s3{stop-color:var(--ridge)}
.s4{stop-color:var(--sky-low)}
.s5{stop-color:var(--sun)}
.s6{fill:var(--sun)}
.s7{stroke:var(--ridge)}
.s8{fill:var(--ridge);opacity:0}
.s9{opacity:0}
.s10{color:var(--fig)}
.s11{background:var(--acc)}
.s12{background:var(--a2)}
.s13{background:var(--a3)}