/* HuddleTable — Warm Editorial Ledger. Tokens first; dark mode redefines them. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --bg:#F6F4F0; --card:#FFFFFF; --ink:#1C1B19; --ink2:#5A5651; --line:#E7E3DC;
  --accent:#2563EB; --accent-ink:#FFFFFF; --seat:#2563EB; --amber:#D98A1C; --amber-bg:#FBF1E2;
  --shadow:0 1px 2px rgba(28,27,25,.06),0 12px 32px -12px rgba(28,27,25,.18);
  --disc:#ECE7E0; --disc-edge:#D9D3CA;
  --display:"Inter",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --r:10px; --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --card:#1C1B19; --ink:#F4F1EC; --ink2:#B5AFA6; --line:#2E2C29;
    --accent:#5B8CFF; --accent-ink:#0B0B0A; --seat:#5B8CFF; --amber:#E9A23B; --amber-bg:#2A2116;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
    --disc:#24221F; --disc-edge:#34312D; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121110; --card:#1C1B19; --ink:#F4F1EC; --ink2:#B5AFA6; --line:#2E2C29;
  --accent:#5B8CFF; --accent-ink:#0B0B0A; --seat:#5B8CFF; --amber:#E9A23B; --amber-bg:#2A2116;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
  --disc:#24221F; --disc-edge:#34312D; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:.85em 1.3em;font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .18s,filter .18s;white-space:nowrap}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn--sm{padding:.6em 1em;font-size:.9rem}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.link{background:none;border:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{width:28px;height:28px} .mark .ink{fill:var(--ink)}
.wordmark{font:700 1.2rem/1 "Inter",var(--body);letter-spacing:-.035em;color:var(--ink)}
.nav__links{display:flex;gap:24px;margin-left:auto}
.nav__links a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:.95rem}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:10px}
.theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center}
.theme span{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:760px){.nav__links{display:none}.nav__cta{margin-left:auto}}

/* shared section bits */
section{padding:clamp(72px,10vw,128px) 0}
.num{font:600 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:1.2em;padding-top:14px;border-top:1px solid var(--line);display:inline-block}
.answer{max-width:62ch;color:var(--ink2);font-size:1.08rem}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .8rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.dot--live{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.amber-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;margin-right:6px;animation:pulse 2s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* hero */
.hero{padding-top:clamp(40px,7vw,96px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{margin-top:.4em}
.lede{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--ink2);max-width:52ch}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}

.waitlist{margin-top:28px;max-width:520px}
.waitlist__row{display:flex;gap:8px;background:var(--card);padding:6px;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line)}
.waitlist input[type=email]{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:0 12px}
.waitlist input:focus{outline:none}
.waitlist__row:focus-within{box-shadow:var(--shadow),0 0 0 2px var(--accent)}
.waitlist__msg{min-height:1.4em;margin:10px 2px 0;font-size:.95rem}
.waitlist__msg.is-err{color:#B42318} :root[data-theme=dark] .waitlist__msg.is-err{color:#FF8A80}
.waitlist__msg.is-ok{color:var(--ink)}
.fine{font-size:.85rem;color:var(--ink2);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:440px){.waitlist__row{flex-direction:column}.waitlist input[type=email]{padding:12px}}

/* 3D table (signature). Seats on r38 ring of a 100-unit box => 38% radius. */
.table3d{--size:min(460px,78vw);contain:layout;--tilt:56deg;--rz:0deg;--px:0deg;--py:0deg;display:grid;place-items:center;height:calc(var(--size)*.86);perspective:2600px}
.table3d__stage{width:var(--size);height:var(--size);transform-style:preserve-3d;transform:rotateX(calc(var(--tilt) + var(--py))) rotateY(var(--px)) scale(var(--sc,1));will-change:transform}
.table3d__disc{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateZ(var(--rz));will-change:transform}
.table3d__top{position:absolute;inset:28%;border-radius:50%;background:var(--ink);transform:translateZ(0)}
.seat{position:absolute;left:50%;top:50%;width:16%;transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateZ(var(--a)) translateY(calc(var(--size)*-.38)) rotateZ(calc(-1*var(--a) - var(--rz))) rotateX(calc(-1*(var(--tilt) + var(--py)))) translateZ(calc(var(--size)*.12));text-align:center}
.seat img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--card);box-shadow:0 0 0 3px var(--bg),0 10px 22px -8px rgba(0,0,0,.45)}
.seat span{display:inline-block;margin-top:4px;font:600 clamp(.64rem,1.6vw,.76rem)/1 var(--body);background:var(--card);color:var(--ink);padding:3px 7px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.seat--lead img{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--seat),0 0 28px 4px color-mix(in srgb,var(--seat) 35%,transparent)}

/* problem */
.cards3{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative}
.card:nth-child(2){transform:translateY(28px)} .card:nth-child(3){transform:translateY(56px)}
.card p{color:var(--ink2);margin:0}
.card__n{font:700 2.4rem/1 var(--display);color:var(--line);display:block;margin-bottom:14px}
@media (max-width:860px){.cards3{grid-template-columns:1fr}.card:nth-child(n){transform:none}}

/* how: pinned story */
.how{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.how__track{height:320vh;position:relative}
.how__sticky{position:sticky;top:64px;min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.steps li{padding:14px 18px;border-left:2px solid var(--line);transition:border-color .3s}
.steps li:not(.is-on) h3{color:var(--ink2)}
.steps li.is-on{opacity:1;border-color:var(--accent)}
.steps h3{margin:.2em 0 .2em}.steps p{margin:0;color:var(--ink2);font-size:.98rem}
.steps__k{font:600 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.story{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
.story__table{position:absolute;inset:0}
.story__disc{position:absolute;inset:30%;border-radius:50%;background:var(--ink)}
.story__seat{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;object-fit:cover;left:42.5%;top:42.5%;opacity:0;transform:scale(.6);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s,left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 3px var(--card),0 8px 18px -8px rgba(0,0,0,.4)}
.story[data-s] .story__seat{opacity:1;transform:none}
.story[data-s] .s0{left:42.5%;top:4.5%;box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--seat)}
.story[data-s] .s1{left:78.6%;top:30.8%}
.story[data-s] .s2{left:64.8%;top:73.2%}
.story[data-s] .s3{left:20.2%;top:73.2%}
.story[data-s] .s4{left:6.4%;top:30.8%}
.story__goal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:44%;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;font:600 .85rem/1.3 var(--body);text-align:center;opacity:0;transition:opacity .4s,transform .4s;box-shadow:var(--shadow)}
.story[data-s="2"] .story__goal,.story[data-s="3"] .story__goal{opacity:1;transform:translate(-50%,-50%)}
.chip{position:absolute;left:50%;top:50%;font:600 .74rem/1 var(--body);background:var(--accent);color:var(--accent-ink);padding:6px 10px;border-radius:99px;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .3s}
.story[data-s="2"] .chip,.story[data-s="3"] .chip{opacity:1}
.story[data-s="2"] .c1,.story[data-s="3"] .c1{transform:translate(-110%,-280%)}
.story[data-s="2"] .c2,.story[data-s="3"] .c2{transform:translate(20%,-200%)}
.story[data-s="2"] .c3,.story[data-s="3"] .c3{transform:translate(-10%,240%)}
.story__ok{position:absolute;right:-4%;bottom:-2%;width:62%;background:var(--amber-bg);border:1px solid var(--amber);border-radius:10px;padding:12px 14px;font-size:.88rem;line-height:1.4;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;box-shadow:var(--shadow)}
.story[data-s="3"] .story__ok{opacity:1;transform:none}
@media (max-width:860px){
  .how__track{height:auto}
  .how__sticky{position:static;grid-template-columns:1fr;min-height:0;padding-top:72px;padding-bottom:72px}
  .story{max-width:360px}
}

/* app mock + devices */
.demo-note{display:block;margin-top:.4em;font-size:.9rem;color:var(--ink2);font-style:normal}
.devices{overflow-x:clip;position:relative;margin-top:48px;display:grid;grid-template-columns:1fr;perspective:1400px;padding-bottom:20px}
.laptop{margin:0;width:min(940px,100%);transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transform-style:preserve-3d;will-change:transform}
.laptop__screen{display:grid;grid-template-columns:190px 1fr;background:var(--bg);border:10px solid #1C1B19;border-radius:14px 14px 4px 4px;aspect-ratio:16/10;overflow:hidden;font-size:.86rem}
.laptop__base{height:14px;margin:0 -4%;background:linear-gradient(#D7D2CA,#B9B3A9);border-radius:0 0 14px 14px}
:root[data-theme=dark] .laptop__base{background:linear-gradient(#3A3733,#24221F)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .laptop__base{background:linear-gradient(#3A3733,#24221F)}}
.mock-side{border-right:1px solid var(--line);padding:16px 12px;background:var(--card)}
.mock-side__h{font:600 .68rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin:14px 0 8px}
.mock-side__t{margin:0 0 4px;padding:6px 8px;border-radius:6px;color:var(--ink2)}
.mock-side__t.is-on{background:var(--bg);color:var(--ink);font-weight:600}
.badge{background:var(--amber);color:#1C1B19;border-radius:99px;padding:1px 6px;margin-left:4px}
.mock-thread{display:flex;flex-direction:column;min-width:0}
.mock-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.mock-head small{display:block;color:var(--ink2);font-size:.75rem}
.faces{display:flex}
.faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card);margin-left:-6px}
.faces img:first-child{margin-left:0}
.faces img.lead{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--seat)}
.msgs{padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.msg{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.msg img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.msg b{display:block;font-size:.78rem}
.msg--you{align-self:flex-end;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:10px 10px 2px 10px;display:block;max-width:70%}
.msg--you b{color:inherit;opacity:.8}
.msg--result{animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.okcard{border:1px solid var(--amber);background:var(--amber-bg);border-radius:10px;padding:12px 14px;max-width:420px;transition:opacity .3s}
.okcard__k{font:600 .72rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px;display:flex;align-items:center}
.okcard__t{font-weight:600;margin:0 0 2px}
.okcard__by{font-size:.78rem;color:var(--ink2);margin:0 0 10px}
.okcard__btns{display:flex;gap:8px}
.okcard.is-done{opacity:.55}.okcard.is-done .okcard__btns{display:none}
.okcard--sm{padding:10px 12px}.okcard--sm .okcard__t{font-size:.85rem}
.phone{position:absolute;right:0;bottom:-30px;margin:0;width:200px;transform:translateY(var(--py2,0px));will-change:transform}
.phone__screen{background:var(--bg);border:8px solid #1C1B19;border-radius:28px;aspect-ratio:9/19;overflow:hidden;font-size:.74rem;display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.phone .msg{padding:0 10px}
.phone .okcard{margin:0 10px}
.mock-head--sm{padding:22px 10px 8px;font-size:.8rem;flex-direction:column;align-items:flex-start}
.mock-head--sm .faces img{width:22px;height:22px}
.demo-reset{margin-top:44px;font-size:.92rem}
@media (max-width:900px){.phone{display:none}}
@media (max-width:640px){
  .laptop__screen{grid-template-columns:1fr;aspect-ratio:auto;border-width:6px}
  .mock-side{display:none}
  .laptop__base{height:10px}
}

/* safety */
.safety__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.ledger h3{margin:0;font-size:1.05rem}.ledger p{margin:0;color:var(--ink2)}
@media (max-width:860px){.safety__grid{grid-template-columns:1fr;gap:24px}.ledger li{grid-template-columns:1fr;gap:4px}}

/* works with marquee */
.works{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.works__h{font-size:1rem;font-family:var(--body);font-weight:600;color:var(--ink2);letter-spacing:0;margin-bottom:20px}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__row{list-style:none;margin:0;padding:0;display:flex;gap:64px;padding-right:64px;flex:none;animation:marq 32s linear infinite}
.marquee__row li{font:600 clamp(1.4rem,3vw,2.2rem)/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
@keyframes marq{to{transform:translateX(-100%)}}

/* standup */
.standup__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.recap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;transform:rotate(-1deg)}
.recap header{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px}
.recap header small{margin-left:auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);border:1px solid var(--line);padding:3px 8px;border-radius:99px}
.recap__body{white-space:pre-line;margin:0;min-height:7.5em;color:var(--ink)}
.recap__body.is-typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:2px;animation:pulse 1s steps(1) infinite}
@media (max-width:860px){.standup__grid{grid-template-columns:1fr;gap:28px}}

/* faq */
.faq__list{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.faq__list article{padding:22px 0;border-top:1px solid var(--line)}
.faq__list p{color:var(--ink2);margin:0}
@media (max-width:860px){.faq__list{grid-template-columns:1fr}}

/* close */
.close{background:var(--ink);color:var(--bg)}
.close__in{max-width:720px}
.close h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.close p{color:color-mix(in srgb,var(--bg) 75%,var(--ink))}
.close .waitlist__row{background:var(--bg);border-color:transparent}
.close .waitlist__msg.is-ok{color:var(--bg)}
.close .waitlist__msg.is-err{color:#FFB4A9}

/* footer */
.foot{padding:28px 0;font-size:.9rem;color:var(--ink2)}
.foot__in{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot p{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 20px}
.foot a{color:var(--ink2)}
.foot__by{margin-left:auto!important;font-size:.8rem}

/* simple pages */
.doc{max-width:720px;padding:64px var(--gutter)}
.doc .draft{background:var(--amber-bg);border:1px solid var(--amber);border-radius:8px;padding:12px 16px}

/* reduced motion: complete, static, final states */
/* signature motion: seats orbit the table (transform/opacity only; off under reduced motion via the block below) */
.mark__seats{transform-box:view-box;transform-origin:50px 53.6px;animation:ht-orbit .9s cubic-bezier(.4,0,.2,1) .15s 1}
.brand:hover .mark__seats,.brand:focus-visible .mark__seats{animation:ht-orbit2 .9s cubic-bezier(.4,0,.2,1) 1}
@keyframes ht-orbit{to{transform:rotate(360deg)}}
@keyframes ht-orbit2{to{transform:rotate(360deg)}}
.seat span small{display:block;margin-top:1px;font-weight:500;font-size:.78em;line-height:1;color:var(--ink2)}
.seat span:has(small){padding:2px 7px}
.msg b .vendor{font-weight:500;color:var(--ink2);font-size:.92em}
.marquee__row li.is-soon{color:var(--ink2);font-weight:500}
.works__sub{margin:10px 0 0;color:var(--ink2);max-width:60ch}
.works__tm{margin:18px auto 0;font-size:.78rem;color:var(--ink2)}
.joined{margin:0 0 20px;display:flex;align-items:center;gap:14px}
.joined__mark{width:72px;height:72px;flex:0 0 auto}.joined__mark .ink{fill:var(--ink)}
.joined__you{fill:var(--ink);stroke:var(--seat);stroke-width:3}
.joined figcaption{font-weight:600}
.joined.is-drop .joined__you{animation:ht-drop .5s cubic-bezier(.2,.8,.2,1) .25s both}
.joined.is-drop figcaption{animation:ht-fade .4s ease .55s both}
@keyframes ht-drop{from{transform:translateY(-26px);opacity:0}}
@keyframes ht-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .table3d{--rz:0deg!important;--px:0deg!important;--py:0deg!important}
  .how__track{height:auto}.how__sticky{position:static;min-height:0;padding-top:96px;padding-bottom:96px}
  .steps li{opacity:1}
  .story .story__seat{opacity:1;transform:none}
  .story .s0{left:42.5%;top:4.5%}.story .s1{left:78.6%;top:30.8%}.story .s2{left:64.8%;top:73.2%}.story .s3{left:20.2%;top:73.2%}.story .s4{left:6.4%;top:30.8%}
  .story .story__goal{opacity:1;transform:translate(-50%,-50%)}
  .story .chip{opacity:1}.story .c1{transform:translate(-110%,-280%)}.story .c2{transform:translate(20%,-200%)}.story .c3{transform:translate(-10%,240%)}
  .story .story__ok{opacity:1;transform:none}
  .laptop,.phone{transform:none!important}
  .marquee{flex-wrap:wrap;mask-image:none}.marquee__row{flex:1 1 100%;flex-wrap:wrap;gap:16px 40px;padding:0 var(--gutter)}.marquee__row[aria-hidden]{display:none}
}

/* who-it's-for + definition */
.who{font-size:.95rem;color:var(--ink2);margin:14px 0 0}
.who b{color:var(--ink)}
.define{padding:clamp(40px,6vw,72px) 0 0}
.define__p{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:68ch;margin:0;color:var(--ink)}
.define__p b{font-weight:700}
/* mid-page CTA after safety */
.midcta{padding:0 0 clamp(56px,8vw,96px)}
.midcta__in{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr minmax(280px,520px);gap:20px 40px;align-items:center}
.midcta h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 .3em}
.midcta p{margin:0;color:var(--ink2)}
.midcta .waitlist{margin-top:0}
@media (max-width:860px){.midcta__in{grid-template-columns:1fr}}
/* sticky mobile CTA (appears after hero, dismissible) */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
.stick p{margin:0;font-size:.9rem;font-weight:600;flex:1;min-width:0}
.stick .btn{flex:none}
.stick__x{flex:none;width:40px;height:40px;border:0;background:transparent;color:var(--ink2);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:8px}
@media (max-width:760px){.stick{display:flex}.stick.is-on{transform:none}body.has-stick{padding-bottom:72px}}
/* thanks qualifier */
.qual{margin-top:28px;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--card)}
.qual legend{font-weight:600;padding:0 4px}
.qual__opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.qual__opts label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;font-size:.95rem}
.qual__opts input{accent-color:var(--accent)}
.crumbs{font-size:.9rem;color:var(--ink2);margin-bottom:24px}
.crumbs ol{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:6px}
.doc nav.more{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem}
@media (max-width:600px){.table3d{--size:min(460px,88vw);--tilt:46deg}.seat span{font-size:.62rem;padding:3px 6px}}
@media (max-width:400px){.nav__in{gap:10px}.nav__cta{gap:6px}.nav .btn--sm{padding:.55em .75em;font-size:.84rem}.wordmark{font-size:1.05rem}.brand{gap:7px}.mark{width:24px;height:24px}}
.doc .updated{color:var(--ink2);font-size:.9rem;margin-top:-8px}
.doc ul{padding-left:1.2em}
/* v8: pains, keep, real shots, compat table, starters */
.pains{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px}
.pains .card:nth-child(even){transform:translateY(24px)}
@media (max-width:760px){.pains{grid-template-columns:1fr}.pains .card:nth-child(n){transform:none}}
.keep{margin:56px 0 0;max-width:62ch;font-size:1.08rem;padding-left:16px;border-left:3px solid var(--accent)}
.phone__screen--shot{padding:0;gap:0;display:block}
.phone__screen--shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot-label{font:600 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:8px;text-align:center}
.shot{margin:40px 0 0;max-width:900px}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.shot .shot-label{text-align:left}
.compat{margin-top:40px}
.compat h3{margin:0 0 .4em}
.compat__note{color:var(--ink2);max-width:66ch;margin:0 0 16px}
.compat__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.compat table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:480px}
.compat th,.compat td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.compat thead th{font:600 .72rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.compat tbody tr:last-child>*{border-bottom:0}
.compat td{color:var(--ink2)}
.tag{display:inline-block;font:600 .78rem/1.2 var(--body);padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.tag--ok{border-color:var(--accent)}
.tag--beta{background:var(--amber-bg)}
.starters{border-top:1px solid var(--line)}
.starters__list{list-style:none;padding:0;margin:28px 0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.starters__list{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.starters__list{grid-template-columns:1fr}}
.starters__list li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:4px;transition:border-color .2s,transform .2s}
.starters__list li:hover{border-color:var(--ink2);transform:translateY(-2px)}
.starters__list b{font-weight:650;letter-spacing:-.01em}.starters__list span{color:var(--ink2);font-size:.93rem;line-height:1.45}
.dfy{margin:28px 0 0;font-size:1.05rem}
.dfy a{color:var(--accent);font-weight:600}

.lost{padding-top:12vh}.lost__empty{fill:none;stroke:var(--ink2);stroke-width:2;stroke-dasharray:3 3}

/* ===== Motion pass v12: table depth, seat life, cards, buttons, progress (transform/opacity only) ===== */
/* Table thickness: same-hue darker slices under the solid top, plus a soft contact shadow. Reads as one disc. */
.table3d__edge{position:absolute;inset:28%;border-radius:50%;background:color-mix(in srgb,var(--ink) 72%,#000);transform:translateZ(calc(var(--z)*-2.2px))}
.table3d__shadow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,.12) 62%,transparent);transform:translateZ(-34px);filter:blur(6px)}
:root[data-theme="dark"] .table3d__edge{background:color-mix(in srgb,var(--ink) 74%,#000)}
:root[data-theme="dark"] .table3d__shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.3) 62%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .table3d__shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.3) 62%,transparent)}}
/* Seats: float toward cursor (translate), bob (transform anim), lift on hover (scale) — separate properties compose */
.seat img,.seat span{translate:var(--fx,0) var(--fy,0);transition:scale .3s cubic-bezier(.2,.8,.2,1),translate .5s cubic-bezier(.2,.8,.2,1)}
.seat img{animation:ht-bob 5.2s ease-in-out infinite;animation-delay:calc(var(--a) / 72deg * -1.1s)}
@keyframes ht-bob{50%{transform:translateY(-4px)}}
.seat span{transition:scale .3s,background-color .3s,color .3s,border-color .3s}
.seat--lead::before{content:"";position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;margin-left:-75%;margin-top:-25%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--seat) 45%,transparent),transparent);translate:var(--gx,0) var(--gy,0);pointer-events:none;z-index:-1;opacity:.9}
@media (hover:hover){
  .seat:hover img{scale:1.12}
  .seat:hover span{scale:1.06;background:var(--seat);color:#fff;border-color:var(--seat)}
  .seat:hover span small{color:rgba(255,255,255,.82)}
}
/* Scroll progress */
.ht-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Cards: hover lift, tilt, accent border glow, cursor spotlight, number micro-motion */
.pains,.cards3,.starters ul,.starters ol{perspective:1100px}
.card{overflow:hidden;transition:translate .35s cubic-bezier(.2,.8,.2,1),rotate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px var(--accent),0 10px 34px -12px color-mix(in srgb,var(--accent) 55%,transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.card::after{content:"";position:absolute;left:0;top:0;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 13%,transparent),transparent);transform:translate(var(--mx,50%),var(--my,50%));opacity:0;transition:opacity .35s;pointer-events:none}
.card__n{transition:translate .35s cubic-bezier(.2,.8,.2,1),color .35s}
.card>*{position:relative;z-index:1}
@media (hover:hover){
  .card:hover{translate:0 -5px}
  .card:hover::before,.card:hover::after{opacity:1}
  .card:hover .card__n{translate:4px -2px;color:var(--accent)}
}
.btn{transition:transform .18s,filter .18s,translate .35s cubic-bezier(.2,.8,.2,1)}
.btn.is-mag{transition:transform .18s,filter .18s,translate .12s linear}
/* Stacked cards (desktop only; phone keeps the plain grid) */
.pains.is-stack{display:block;padding-bottom:8vh}
.pains.is-stack .card{position:sticky;top:calc(96px + var(--i)*16px);min-height:200px;margin:0 0 6vh;transform:none!important;scale:var(--ks,1);opacity:var(--ko,1);transform-origin:50% 0;box-shadow:0 18px 40px -26px rgba(0,0,0,.35)}
.pains.is-stack .card.reveal:not(.is-visible){opacity:0}
@media (prefers-reduced-motion:reduce){
  .seat img,.seat span,.card,.card::after{animation:none!important;translate:none!important;rotate:none!important}
  .seat--lead::before{translate:none}.ht-progress{display:none}
}