/* v11 scroll story: calm. Greys plus one green for done states. 44px headline, 17px body, weights 400/500. */
.story{--g:#1fae74;--hl:rgba(255,255,255,.09);position:relative;width:min(var(--w),calc(100% - 32px));margin:0 auto;padding:96px 0 96px 96px}
.story-h,.story-p{padding-right:96px}
.story-h{font-size:44px;line-height:48px;font-weight:500;letter-spacing:-.88px}
.story .lead2{font-size:17px;line-height:26px;color:var(--mut)}
.rail{position:absolute;left:12px;top:200px;bottom:120px;width:1px;background:var(--hl)}
.rail i{position:absolute;left:0;top:0;width:1px;height:var(--rp,0%);background:rgba(255,255,255,.5)}
.rail .rmark{position:absolute;left:14px;top:var(--rp,0%);transform:translateY(-50%);font:400 13px/16px xVf,Geist,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff;background:var(--bg);padding:2px 6px 2px 0;white-space:nowrap}
.ch{display:grid;grid-template-columns:420px 520px;justify-content:center;column-gap:96px;align-items:center;padding:90px 0}
.ch h2{font-size:44px;line-height:48px;font-weight:500;letter-spacing:-.88px}
.ch p{margin-top:16px;font-size:17px;line-height:26px;color:var(--mut);max-width:420px}
.ch .fine{margin-top:20px;color:#5c6360}
.ch-d{display:flex;justify-content:center}
.vz{width:100%;height:300px;padding:32px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:14px;overflow:hidden;font-size:17px;line-height:24px;color:var(--soft)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.row.fade2{color:var(--mut)}
.ck{width:20px;height:20px;flex:none;fill:none;stroke:var(--g);stroke-width:1.4}
.ck path{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;stroke-linejoin:round}
/* 11 split */
.vz .split{display:flex;flex-direction:column;gap:20px}
.vz .split .q{margin:0;color:#fff}
.vz .split .rows{display:flex;flex-direction:column;gap:6px}
.vz .split .row{padding:4px 0}.vz .split .row span{width:76px;color:var(--mut)}
.vz .split .row i{flex:1;height:2px;background:var(--hl);position:relative;display:block}
.vz .split .row i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);transform-origin:left}
.vz .split .ans{margin:0;display:flex;align-items:center;gap:10px;color:#fff;max-width:none;font-size:17px;line-height:24px}
/* 13 desk */
.desk{position:relative;height:calc(100% + 64px);margin:-32px;padding:32px;display:flex;flex-direction:column;gap:12px}
.dsk{display:block;flex:none;height:6px;border-radius:3px;background:var(--hl)}
.btn2{margin-top:6px;align-self:flex-start;padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.2);color:#fff}
.cur{position:absolute;left:150px;top:128px;width:20px;height:20px;fill:#fff;stroke:var(--bg);stroke-width:.8}
.ntc{position:absolute;left:32px;bottom:28px;margin:0;padding:0;border:0;background:none;border-radius:0;display:flex;align-items:center;gap:10px;color:var(--mut);max-width:none;font-size:17px;line-height:24px}
.ntc b{width:6px;height:6px;border-radius:50%;background:#fff}
/* 15 request */
.req{display:flex;flex-direction:column;gap:24px}
.req .q{margin:0;color:#fff;max-width:340px}
.bt{display:grid;height:44px}.bt>*{grid-area:1/1;display:flex;align-items:center;gap:12px}
.b1,.b2{padding:10px 20px;border-radius:8px;line-height:24px}
.b1{background:#fff;color:#0a0a0a;font-weight:500}.b2{border:1px solid rgba(255,255,255,.2);color:var(--soft)}
.okm{color:var(--g);opacity:0}
/* 17 second opinion */
.row[data-i]::before{content:attr(data-i);width:28px;height:28px;border-radius:50%;background:var(--pill);display:grid;place-items:center;font-weight:500;font-size:15px;color:var(--soft);flex:none}
.vz>.row:not(.fade2):not(.new){justify-content:flex-start;gap:14px}
.vz>.row span{flex:1}
.vz>.ans{margin:8px 0 0;padding-top:16px;border-top:1px solid var(--hl);display:flex;align-items:center;gap:10px;color:#fff;max-width:none;font-size:17px;line-height:24px}
/* 20 skills */
.row.new{color:#fff}.row.new span{flex:1}
/* 23 lock */
.mach{width:200px;margin:auto;stroke:#6b726e;stroke-width:1.5}
.mach .lb,.mach .sh{stroke:#fff;stroke-width:1.6}
.mach .lb{fill:var(--card)}
.mach .sh{transform-box:fill-box}
/* motion plays once on entry; base state = final frame (reduced motion) */
.ch.arm:not(.on) .a,.ch.arm:not(.on) .ck{opacity:0}
.ch.arm:not(.on) .cur{opacity:0}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes show{from{opacity:0}to{opacity:1}}
@keyframes hide{from{opacity:1}to{opacity:0}}
@keyframes dim{from{opacity:1}to{opacity:.4}}
@keyframes move{from{transform:translate(110px,90px)}to{transform:none}}
@keyframes press{0%,100%{background:transparent}40%,70%{background:rgba(255,255,255,.14)}}
@keyframes shut{from{transform:translateY(-5px)}to{transform:none}}
@keyframes lg{to{stroke:var(--g)}}
.ch.on .a{animation:up .7s var(--ease) both;animation-delay:var(--d)}
.ch.on .ck{animation:show .01s linear both,draw 0s both;animation-delay:var(--d)}
.ch.on .ck path{animation:draw .6s var(--ease) both;animation-delay:var(--d)}
.ch.on .vz .split .row i::after{animation:fill 1.6s var(--ease) both;animation-delay:var(--d)}
.ch.on .vz .split .rows{animation:dim .6s var(--ease) 3.8s both}
.ch.on .cur{animation:move 1.6s var(--ease) .6s both}
.ch.on .btn2{animation:press .5s var(--ease) 2.3s both}
.ch.on .btns{animation:hide .5s var(--ease) 2.8s forwards}
.ch.on .okm{animation:show .6s var(--ease) 3.2s forwards}
.ch.on .okm .ck{animation:none;opacity:1}.ch.on .okm .ck path{animation:draw .6s var(--ease) 3.4s both}
.ch.on .mach .lp{animation:draw 1.6s var(--ease) both}
.ch.on .mach .sh{animation:shut .8s var(--ease) 1.4s both}
.ch.on .mach .lb,.ch.on .mach .sh{animation-name:lg}
.ch.on .mach .sh{animation:shut .8s var(--ease) 1.4s both,lg .6s var(--ease) 2.2s forwards}
.ch.on .mach .lb{animation:lg .6s var(--ease) 2.2s forwards}
.mach .lp{stroke-dasharray:1;stroke-dashoffset:0}
/* chats: apps strip only */
.ch.chats{grid-template-columns:1fr;row-gap:48px;padding:90px 0;text-align:center}
.ch.chats .ch-t p{margin-left:auto;margin-right:auto}
.marq{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marq-set{display:flex;gap:48px;padding-right:48px;flex:none}
.ap{display:inline-flex;align-items:center;gap:12px;font-size:17px;line-height:24px;color:var(--mut);white-space:nowrap}
.ap svg{width:22px;height:22px;flex:none;color:var(--mut)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.marq-track{animation:none}.marq-set[aria-hidden=true]{display:none}}
.story .mid-cta{margin-top:40px;text-align:center}
@media(max-width:1100px){.ch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}.ch.chats{grid-template-columns:1fr}}
@media(max-width:860px){
.story{padding:72px 0 72px 36px}.story-h,.story-p{padding-right:0}
.story-h,.ch h2{font-size:30px;line-height:34px;letter-spacing:-.6px}
.rail{left:6px;top:150px;bottom:100px}
.rail .rmark{left:10px;writing-mode:vertical-rl;padding:8px 2px;font-size:11px;line-height:14px}
.ch{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:48px 0}
.ch.chats{padding:48px 0;row-gap:32px}
.ch p,.vz,.ap,.ntc,.vz .split .ans,.vz>.ans{font-size:16px;line-height:24px}
.vz{height:280px;padding:24px}.desk{margin:-24px;padding:24px}.ntc{left:24px}
.marq{margin-left:-36px;margin-right:-16px}
.cur{left:120px}
}