:root{color-scheme:dark;--ink:#121313;--panel:#1b1d1d;--paper:#f3f1eb;--muted:#b1b3af;--orange:#ff791f;--line:#393c3b;--sans:"Segoe UI",Arial,Helvetica,sans-serif;--mono:Consolas,"Liberation Mono",Menlo,monospace} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:6px}::selection{background:var(--orange);color:var(--ink)}.wrap{width:min(1280px,calc(100% - 48px));margin-inline:auto}.skip{position:absolute;top:-100px;inset-inline-start:16px;z-index:20;background:var(--orange);color:#121313;padding:12px}.skip:focus{top:12px}.header{min-height:100px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:26px;letter-spacing:-1.2px;min-height:44px}.brand svg{width:26px;height:26px;color:var(--orange)}.brand-dot{align-self:flex-start;font-size:10px;margin-top:9px;display:none}nav{display:flex;align-items:center;gap:34px}.nav-link{padding:12px 0;font-size:14px;color:#c9cbc6}.nav-link:hover{color:var(--orange)}.button{min-height:50px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--orange);border-radius:5px;background:var(--orange);color:#121313;padding:13px 21px;font-size:14px;font-weight:700;line-height:1.4;transition:background .2s,transform .2s}.button:hover{background:#ff9650;transform:translateY(-2px)}.button span[aria-hidden]{font-size:22px;line-height:1}.button.small{min-height:44px;padding:10px 16px}.eyebrow{font:11px/1.7 var(--mono);letter-spacing:1.4px;color:var(--muted)}.signal{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-block:0 1px;margin-inline:0 9px}.hero-heading{text-align:center;padding-top:54px}.hero-heading .eyebrow{margin:0 0 16px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6.7vw,96px);line-height:1.05;letter-spacing:-.065em;font-weight:650;margin-bottom:20px}h1 span{color:var(--orange)}.mobile-break{display:none}.intro{font-size:18px;color:#c4c7c2;max-width:610px;margin:0 auto}.hero-cta{margin-top:23px}.compatibility{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:26px;border-top:1px solid var(--line);font:11px var(--mono);color:var(--muted)}.compatibility p{margin:0;font-family:var(--sans);font-size:14px;color:var(--paper)}.compatibility p span{color:var(--muted)}.section{padding-block:100px}h2{font-size:clamp(34px,4.1vw,58px);font-weight:550;letter-spacing:-.055em;line-height:1.1;margin-bottom:25px}.section-lead>p:last-child,.boundaries>div>p:last-child,.access-inner>div>p:last-child{color:var(--muted);max-width:370px}.how{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;border-top:1px solid var(--line)}.steps{list-style:none;margin:0;padding:0}.steps li{display:grid;grid-template-columns:30px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid var(--line)}.steps li:first-child{padding-top:0}.step-no{font:12px var(--mono);color:var(--orange);padding-top:6px}h3{font-size:20px;font-weight:550;letter-spacing:-.4px;margin-bottom:12px}.steps p{font-size:15px;color:var(--muted);margin-bottom:16px}.step-detail{font:10px var(--mono);letter-spacing:1px;color:#d1d4cd}.step-detail span{color:var(--orange);padding:0 7px}.steps .small-note{font-size:13px;color:#d1d4cd;margin-bottom:0}code{display:block;overflow-wrap:anywhere;font:13px var(--mono);padding:13px 15px;border-left:2px solid var(--orange);background:#202321;color:#d7dbd2}.telegram-example{display:flex;gap:12px;align-items:center;background:#202321;padding:14px;border-radius:5px}.notification-mark{font-size:24px;color:var(--orange)}.telegram-example div>span{font:8px var(--mono);letter-spacing:1px;color:#bec4b8}.telegram-example p{font-size:12px;color:var(--paper);margin:5px 0 0}.proof{background:var(--paper);color:var(--ink)}.proof-inner{display:flex;align-items:center;gap:48px;padding-block:45px;flex-wrap:wrap}.proof .eyebrow{color:#343a34;flex:1;margin:0}.proof .eyebrow span{font-size:10px;letter-spacing:0}.proof-inner>p:not(.eyebrow){margin:0;display:flex;flex-direction:column}.proof strong{font-size:64px;line-height:1.1;letter-spacing:-4px;font-weight:550}.proof-inner>p>span{font:11px var(--mono)}.proof-slash{font-size:55px;color:#a4aaa1;font-weight:200}.proof small{flex-basis:100%;font-size:10px;color:#4b5148;margin-top:-20px}.boundaries{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;border-bottom:1px solid var(--line)}.boundaries h2 span{color:var(--muted)}.no-access{list-style:none;padding:0;margin:20px 0 0;align-self:center}.no-access li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}.no-access li span[aria-hidden]{font:24px/1 var(--mono);color:var(--orange)}.pricing-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}.pricing h2{font-size:clamp(44px,5vw,72px);margin-bottom:0}.pricing h2 span{color:var(--orange)}.pricing-copy{font-size:21px;max-width:390px;color:#d1d4cb}.access{background:#1e211e;border-block:1px solid #3f443c}.access-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}form{max-width:440px}label{display:block;font-size:13px;margin-bottom:9px}input{width:100%;min-height:54px;border:1px solid #6c7568;border-radius:4px;background:#151813;color:var(--paper);padding:12px 14px;outline-offset:4px}input::placeholder{color:#a7afa1}form .button{width:100%;margin-top:12px}.form-note{font-size:12px;color:#b1b9aa;margin:16px 0 0}.form-result{font-size:13px;color:#ffd7ad;min-height:44px;margin:10px 0 0}.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:35px}.footer .brand{font-size:22px}.footer p{font-size:12px;color:var(--muted);margin:0}.footer>span{font:9px var(--mono);letter-spacing:1px;color:var(--muted)} @media(min-width:1500px){.scene{height:510px}} @media(max-width:1000px){.wrap{width:calc(100% - 48px)}nav{gap:22px}.how,.boundaries,.pricing-inner,.access-inner{gap:40px}.scene{height:430px}.queue{left:7%;transform:rotateY(14deg) rotateZ(-5deg) scale(.85)}.alex{left:4%;transform:rotateY(15deg) rotateZ(-5deg) scale(.7)}.sam{right:1%;transform:rotateY(-17deg) rotateZ(6deg) scale(.7)}.dana{transform:translateX(-30%) rotateY(-9deg) scale(.87)}.state-tag{left:65%;top:25%}.compatibility{flex-wrap:wrap}.compatibility p{flex-basis:100%}.section{padding-block:75px}.proof-inner{gap:32px}} @media(max-width:700px){.wrap{width:calc(100% - 36px)}.header{min-height:80px;gap:12px}.brand{font-size:23px}.brand svg{width:23px;height:23px}nav{gap:0}.nav-link:not([href$="/login"]){display:none}.nav-link[href$="/login"]{margin-inline-end:12px;white-space:nowrap}.button.small{font-size:11px;padding:10px;gap:12px}.hero-heading{padding-top:38px}.hero-heading .eyebrow{font-size:8px;letter-spacing:1px}.mobile-break{display:block}h1{font-size:clamp(48px,12.5vw,80px);margin-bottom:18px}.intro{font-size:15px;max-width:350px}.hero-cta{margin-top:20px;min-height:46px}.demo-shell{margin-top:30px}.demo-top>.eyebrow{font-size:8px;letter-spacing:.5px}.text-button{font-size:10px;padding-left:0}.text-button span{margin-left:4px}.scene{height:365px}.queue{left:-2%;top:10%;transform:rotateY(14deg) rotateZ(-5deg) scale(.52);transform-origin:top left}.dana{left:50%;top:62%;transform:translateX(-50%) rotateY(-9deg) scale(.67);transform-origin:center bottom}.alex{left:-45px;top:65%;transform:rotateY(15deg) rotateZ(-5deg) scale(.43);transform-origin:center bottom}.sam{right:-44px;top:52%;transform:rotateY(-17deg) rotateZ(6deg) scale(.43);transform-origin:center bottom}.state-tag{left:auto;right:2%;top:10%;font-size:8px;padding:6px;letter-spacing:.4px}.scene-note{font-size:7px;bottom:4px}.demo-caption{padding-block:16px;gap:12px;min-height:100px}.demo-caption p{font-size:12px;max-width:320px}.caption-count{display:none}.compatibility{font-size:9px;gap:12px;padding-block:24px}.compatibility p{font-size:12px}.how,.boundaries,.pricing-inner,.access-inner{grid-template-columns:1fr;gap:35px}.section{padding-block:60px}.section-lead p:last-child{margin-bottom:0}.steps li{gap:13px;grid-template-columns:24px 1fr;padding-block:23px}.steps h3{font-size:19px}.steps p{font-size:14px}.step-detail{font-size:9px;letter-spacing:.6px}.step-detail span{padding:0 3px}.proof-inner{gap:20px;padding-block:30px}.proof .eyebrow{flex-basis:100%}.proof strong{font-size:60px}.proof small{margin-top:0}.proof-inner>p>span{font-size:10px}.boundaries{gap:0}.boundaries>div>p{margin-bottom:0}.no-access{margin-top:25px}.no-access li{font-size:14px;gap:14px}.pricing-inner{gap:20px}.pricing-copy{font-size:18px}.access h2{font-size:42px}.access-inner{gap:20px}.footer{flex-wrap:wrap;gap:14px;padding-block:28px}.footer p{font-size:11px}.footer>span{flex-basis:100%;font-size:8px}.footer .brand{font-size:20px}} @media(max-width:350px){.wrap{width:calc(100% - 28px)}.header .brand{font-size:21px;gap:6px}.header .brand svg{width:20px}.button.small{font-size:10px;gap:6px}.scene{height:350px}.dana{transform:translateX(-50%) rotateY(-9deg) scale(.6)}.alex{left:-55px;transform:rotateY(15deg) rotateZ(-5deg) scale(.37)}.sam{right:-55px;transform:rotateY(-17deg) rotateZ(6deg) scale(.37)}.queue{transform:rotateY(14deg) rotateZ(-5deg) scale(.46)}.state-tag{font-size:7px;right:0}.demo-top>.eyebrow{font-size:7px}.text-button{font-size:9px}.hero-heading .eyebrow{font-size:7px}.compatibility p{font-size:11px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}} /* Production rendered hero: live typography around the approved material language. */ [hidden]{display:none!important}.live-scene{display:block;width:100%;aspect-ratio:5/3;cursor:grab;touch-action:pan-y;outline-offset:-5px}.live-scene:active{cursor:grabbing}.live-scene:focus-visible{outline:2px solid var(--orange)}.is-live.render-stage{margin-top:8px}.is-live .render-caption{position:relative;bottom:auto;margin-top:-25px;padding-block:20px;pointer-events:none}.is-live .render-status{top:18%;left:auto;right:8%;pointer-events:none}.scene-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-block:8px;gap:12px}.scene-controls>span{font:10px var(--mono);color:var(--muted);letter-spacing:1px}.scene-controls>div{display:flex;gap:10px}.scene-controls button{min-height:44px;background:transparent;border:1px solid #5b6258;border-radius:4px;color:var(--paper);padding:10px 14px;font:12px var(--mono)}.scene-controls button:hover{border-color:var(--orange);color:var(--orange)}@media(max-width:700px){.is-live .render-caption{margin-top:0}.is-live .render-status{right:4%;top:5%;font-size:8px}.scene-controls{flex-wrap:wrap}.scene-controls>span{font-size:8px}.scene-controls button{font-size:10px;padding:8px 10px}.live-scene{aspect-ratio:1.2}} .header{border-bottom:0;min-height:94px}.header .brand{font-size:29px}.header .brand svg{display:none}.header .button{border-radius:9px}.rendered-hero{background:#121313;overflow:clip}.rendered-hero .hero-heading{position:relative;z-index:2;text-align:start;padding-top:35px;pointer-events:none}.hero-heading a{pointer-events:auto}.rendered-hero .hero-heading .eyebrow{margin-bottom:16px}.rendered-hero h1{font-size:clamp(48px,6.3vw,91px);letter-spacing:-.06em;margin-bottom:20px}.rendered-hero .intro{margin:0;max-width:680px;font-size:19px;line-height:1.5}.rendered-hero .hero-cta{margin-top:22px}.render-stage{position:relative;max-width:1600px;margin:-65px auto 0;isolation:isolate}.hero-art{display:block;width:100%;height:auto;aspect-ratio:3/2;mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 80%,transparent 100%)}.render-status{position:absolute;top:34%;left:65%;display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid #c77338;background:#191710ed;border-radius:7px;color:#ffac66;font:12px var(--mono);letter-spacing:.8px;transform:rotate(-4deg);box-shadow:0 8px 18px #0004}.render-status svg{width:17px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.render-caption{position:absolute;bottom:2%;left:0;right:0;display:flex;align-items:end;justify-content:space-between;gap:30px}.render-caption>span{font:10px/1.5 var(--mono);letter-spacing:1px;color:#bbc0b6}.render-caption p{margin:0;font-size:15px;color:#e5e6df}.render-caption .render-index{color:var(--orange)}.handoff-strip{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:26px;border-block:1px solid #393c3b;margin-top:20px}.handoff-strip>div{display:flex;align-items:center;gap:15px}.handoff-strip span{font:11px var(--mono);color:#b8bdb3}.handoff-strip p{margin:0;font-size:16px;color:#d4d9ce}.handoff-strip .active span,.handoff-strip .active p{color:#ff9b55}.handoff-strip>i{font:18px var(--mono);color:#b8bdb3}.rendered-hero .compatibility{border-top:0}.rendered-hero+.how{border-top:1px solid var(--line)} @media(min-width:1600px){.render-stage{margin-top:-95px}.render-status{top:34%}} @media(max-width:1000px){.rendered-hero .hero-heading{padding-top:25px}.render-stage{margin-top:-20px}.render-status{font-size:9px;padding:7px 10px;left:65%;top:30%}.render-caption{gap:15px}.render-caption p{font-size:13px}.render-caption>span{font-size:8px}.handoff-strip{gap:14px}.handoff-strip>div{gap:9px}.handoff-strip p{font-size:13px}} @media(max-width:700px){.header{min-height:76px}.header .brand{font-size:25px}.rendered-hero .hero-heading{padding-top:30px}.rendered-hero h1{font-size:clamp(49px,12vw,80px);max-width:500px;line-height:1.03}.rendered-hero h1 span{display:block}.rendered-hero .intro{font-size:16px;max-width:390px}.rendered-hero .hero-cta{margin-top:20px}.render-stage{margin-top:0}.hero-art{mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 86%,transparent 100%)}.render-status{font-size:7px;gap:4px;left:auto;right:3%;top:17%;padding:5px 7px;border-radius:4px;letter-spacing:0}.render-status svg{width:11px;height:13px}.render-caption{position:relative;bottom:auto;margin-top:0;display:block;padding-bottom:20px}.render-caption>span{font-size:8px}.render-caption p{font-size:13px;margin-top:10px}.render-caption .render-index{display:none}.handoff-strip{margin-top:0;gap:0;align-items:flex-start;padding-block:20px}.handoff-strip>div{display:block;width:31%}.handoff-strip>i{display:none}.handoff-strip p{font-size:11px;line-height:1.5;margin-top:6px}.handoff-strip span{font-size:10px}.rendered-hero .compatibility{padding-block:24px}} /* ========================================================================== MOTION (homepage) — added 2026-10-16, spec docs/PLAN-motion.md. One idea per section. Only transform / opacity / clip-path move, so nothing here can shift the layout (CLS). Classes like .is-tracked, .reveal, .in are added by home.js only: without JS every word on the page stays visible. prefers-reduced-motion: line 7 above switches every animation and transition off; home.js also skips the count-up, reveal and track. ========================================================================== */ /* ---- header: sticky; condenses after 40 px (home.js adds .is-condensed) ---- */ /* The box keeps its height (no layout change); it slides up 18 px and the content slides back down 9 px, so the visible band gets shorter. The dark band is a pseudo element whose shadow spreads it to the window edges without widening the page. */ html{scroll-padding-top:96px} .header{position:sticky;top:0;z-index:10;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .header::before{content:"";position:absolute;inset:0;z-index:-1;background:#121313f2;box-shadow:0 0 0 100vmax #121313f2;clip-path:inset(0 -100vmax);opacity:0;transition:opacity .3s} .header>*{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .header.is-condensed{transform:translateY(-18px)} .header.is-condensed>*{transform:translateY(9px)} .header.is-condensed::before{opacity:1} @media(prefers-reduced-motion:no-preference){ /* ---- hero: the headline lands once, "One task." then "One owner." (650 ms) ---- */ /* Pure CSS, runs on first paint: no class to wait for, ends fully visible. */ .rendered-hero h1{animation:tl-line .45s cubic-bezier(.2,.7,.2,1) both} .rendered-hero h1 span{display:inline-block;animation:tl-line .45s .2s cubic-bezier(.2,.7,.2,1) both} @keyframes tl-line{from{transform:translateY(.35em);clip-path:inset(-.3em -.3em 100% -.3em)}to{transform:none;clip-path:inset(-.3em)}} /* ---- how it works: a line draws down the steps, the lock moves to the active step ---- */ /* home.js sets --p (0..1, scroll progress) and moves .steps-lock; --lock-x is where the line sits: in the gap left of the list. */ .steps.is-tracked{position:relative;--lock-x:-40px} .steps.is-tracked::before,.steps.is-tracked::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:var(--lock-x);width:1px;background:var(--line)} .steps.is-tracked::after{background:var(--orange);transform-origin:top;transform:scaleY(var(--p,0))} .steps-lock{position:absolute;top:0;inset-inline-start:calc(var(--lock-x) - 11px);z-index:1;display:grid;place-items:center;width:23px;height:23px;border-radius:5px;background:var(--orange);color:#121313;transition:transform .45s cubic-bezier(.3,1.4,.5,1)} .steps-lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4} /* ---- proof: 0 -> 150 counts up once, then "0 duplicates" clicks shut ---- */ .proof strong{display:block;font-variant-numeric:tabular-nums} .proof .is-clicked strong{animation:tl-click .42s cubic-bezier(.3,1.6,.5,1)} @keyframes tl-click{0%{transform:scale(1.18)}55%{transform:scale(.94)}100%{transform:none}} /* ---- boundaries: the three "no" items rise in one after another ---- */ .no-access.reveal li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)} .no-access.reveal.in li{opacity:1;transform:none} .no-access.reveal.in li:nth-child(2){transition-delay:.12s} .no-access.reveal.in li:nth-child(3){transition-delay:.24s} /* ---- pricing: the free plan lifts a little and shows an orange edge on hover ---- */ .pricing-inner>div{position:relative;transition:transform .25s} .pricing-inner>div::before{content:"";position:absolute;inset-inline-start:-22px;top:0;bottom:0;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:bottom;transition:transform .3s} .pricing-inner>div:hover{transform:translateY(-4px)} .pricing-inner>div:hover::before{transform:scaleY(1)} /* ---- sign-up band: the arrow nudges toward where it goes ---- */ .signup-cta .button span[aria-hidden]{transition:transform .2s} .signup-cta .button:hover span[aria-hidden]{transform:translate(3px,-3px)} [dir=rtl] .signup-cta .button:hover span[aria-hidden]{transform:scaleX(-1) translate(3px,-3px)} } /* ---- hero: the WebGL swap (scene3d.js) must not move anything (CLS) ---- */ /* The live scene is a canvas 0.53 x its width tall (0.83 on phones), 8 px under the headline, with the caption in the flow under it and a 61 px control bar at the bottom. The fallback image gets exactly that box from the start: same margin, same height (cropped), caption already in the flow, the bar's space held. The caption keeps room for two lines because its text changes with each phase of the loop. index.html's