/* Animated feature previews (2026-10-03): a phone that plays the app's screens. Scroll mode pins the phone while
   the steps scroll past; auto mode cycles by itself. Phones show drawn samples, always labeled. */
.story{margin-top:72px;overflow-x:clip}
.story .st-grid{display:grid;gap:0}
@media (min-width:860px){.story .st-grid{grid-template-columns:1fr 340px;gap:64px}}
.st-steps{position:relative}
.st-step{display:flex;flex-direction:column;justify-content:center;padding:22px 0 22px 26px;opacity:.28;transition:opacity .5s,transform .6s var(--ease);transform:translateX(-8px);cursor:pointer}
.st-step.on{opacity:1;transform:none}
.story[data-mode=scroll] .st-step{min-height:44vh}
.story[data-mode=auto] .st-step{min-height:0;padding-top:16px;padding-bottom:16px}
.st-step .st-num{font:800 12px var(--body);letter-spacing:.14em;color:var(--teal);margin-bottom:8px;text-transform:uppercase}
.st-step h2{font-size:clamp(28px,5.5vw,44px);line-height:1;letter-spacing:-.03em}
.st-step p{margin-top:10px;color:var(--muted);font-size:17px;max-width:30ch}
.st-steps::before,.st-steps::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px}
.st-steps::before{background:#1c2638}
.st-steps::after{background:linear-gradient(180deg,var(--teal),#86F2E6);transform-origin:top;transform:scaleY(var(--sp,0));box-shadow:0 0 12px var(--teal)}
.st-pin{position:relative;display:grid;place-items:center}
.story[data-mode=scroll] .st-pin{position:sticky;top:76px;align-self:start;height:calc(100vh - 100px);min-height:560px}
.st-pin::before{content:"";position:absolute;width:min(420px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(79,209,197,.26),transparent 68%)}
.st-phone{position:relative;width:272px;height:560px;border-radius:44px;border:9px solid #1d2636;background:#0b111c;overflow:hidden;box-shadow:0 40px 70px -20px #000,0 0 0 1px #2c374a;flex:none}
.st-phone::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:99px;background:#000;z-index:9;pointer-events:none}
.st-tag{position:absolute;z-index:8;left:50%;bottom:8px;transform:translateX(-50%);font:800 8px var(--body);letter-spacing:.14em;color:#8fa0bd;background:rgba(10,15,24,.85);padding:3px 8px;border-radius:99px;pointer-events:none}
.st-scr{position:absolute;inset:0;padding:48px 14px 28px;background:linear-gradient(180deg,#16202f,#0b111c);opacity:0;transform:translateY(22px) scale(.97);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none;color:var(--text);overflow:hidden}
.st-scr.on{opacity:1;transform:none}
.st-scr h4{font:800 20px var(--display);margin:0 0 3px}.st-scr small{color:var(--muted);font-size:11px}
.st-scr .r{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.st-scr .r b{font-weight:600}.st-scr .r span{color:var(--muted);font-size:11px}
.st-scr .k{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.st-scr .k div{background:var(--ink-3);border-radius:14px;padding:10px}.st-scr .k b{display:block;font:800 24px var(--display)}.st-scr .k span{font-size:10px;color:var(--muted)}
.st-scr .cen{text-align:center;color:var(--muted);font-size:12px}
.st-scr .chip{display:inline-block;background:rgba(79,209,197,.16);color:#86F2E6;border-radius:99px;padding:4px 10px;font:700 10px var(--body)}
.st-scr .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.st-scr .btns div{text-align:center;border-radius:99px;padding:11px;font:700 12px var(--body);background:#1A2333}.st-scr .btns .y{background:var(--teal);color:var(--teal-ink)}
/* rally up card */
.st-card{position:absolute;inset:0}.st-card .ph{position:absolute;inset:0 0 200px;background:url(covers/cover-bars_07.webp) center/cover;filter:grayscale(1) contrast(1.15)}
.st-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(224,64,95,.45),transparent 42%,#0A0F18)}
.st-card .in{position:absolute;left:0;right:0;bottom:0;padding:0 14px 28px}.st-card h3{font:800 26px/.98 var(--display);margin:0;letter-spacing:-.02em}
.st-card .cnt{display:flex;gap:6px;margin-top:9px}.st-card .cnt span{background:rgba(255,255,255,.1);border-radius:10px;padding:6px 8px;font:600 11px var(--body)}
.st-card .tp{position:absolute;top:50px;left:14px;font:700 9px var(--body);letter-spacing:.12em;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:99px}
.st-card .why{margin-top:9px;font-size:11px;color:#97A3B8}
.on .st-card .y{animation:st-tap 2.6s 1s infinite}
@keyframes st-tap{0%,70%,100%{transform:scale(1)}80%{transform:scale(.93)}90%{transform:scale(1.04)}}
/* chat */
.bub{max-width:80%;padding:9px 12px;border-radius:16px;font-size:12px;margin-top:8px;background:var(--ink-3);opacity:0;transform:translateY(10px) scale(.96);transition:all .5s var(--ease)}
.bub.me{margin-left:auto;background:var(--teal);color:var(--teal-ink);font-weight:600}.bub b{display:block;font-size:10px;color:#86F2E6;margin-bottom:2px}.bub.me b{display:none}
.on .bub{opacity:1;transform:none;transition-delay:calc(var(--i)*650ms + 300ms)}
.quick{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}.quick span{border:1px solid var(--line);border-radius:99px;padding:6px 10px;font:600 11px var(--body)}
/* bars, rows that arrive */
.st-bars{display:flex;align-items:flex-end;gap:6px;height:90px;margin:12px 0 6px}.st-bars i{flex:1;background:linear-gradient(180deg,var(--teal),#1f7a73);border-radius:5px 5px 2px 2px;transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease);transition-delay:calc(var(--i)*70ms)}.on .st-bars i{transform:scaleY(1)}
.seq>*{opacity:0;transform:translateX(16px);transition:all .55s var(--ease);transition-delay:calc(var(--i)*220ms + 200ms)}.on .seq>*{opacity:1;transform:none}
.person{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.av2{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--body);color:#fff;flex:none}
.person em{margin-left:auto;font-style:normal;font:700 10px var(--body);border:1px solid rgba(79,209,197,.5);color:#86F2E6;border-radius:99px;padding:4px 9px;position:relative}
.person em::after{content:"Requested";position:absolute;inset:-1px;border-radius:99px;background:var(--teal);color:var(--teal-ink);display:grid;place-items:center;opacity:0;transition:opacity .4s 2.4s}.on .person em::after{opacity:1}
.here-card{margin-top:12px;border-radius:18px;background:linear-gradient(160deg,#103a36,#0f1a28);border:1px solid rgba(79,209,197,.35);padding:14px}
.here-card .big{font:800 22px var(--display)}.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--here);margin-right:7px;animation:st-pulse 1.6s infinite}
@keyframes st-pulse{0%{box-shadow:0 0 0 0 rgba(63,207,142,.6)}100%{box-shadow:0 0 0 10px rgba(63,207,142,0)}}
.sheet{margin-top:16px;border-radius:20px;background:var(--ink-3);padding:6px 14px}
.warn{margin-top:14px;border-radius:16px;padding:12px;background:rgba(255,90,122,.12);border:1px solid rgba(255,90,122,.4);font:700 13px var(--body);color:#FF8FA6;text-align:center}
.on .warn{animation:st-warn 2.4s 1s infinite}@keyframes st-warn{50%{box-shadow:0 0 0 8px rgba(255,90,122,.15)}}
.club{margin-top:14px;border-radius:20px;padding:16px;background:linear-gradient(160deg,#17130a,#0b0b10);border:1px solid rgba(232,200,120,.45);position:relative;overflow:hidden}
.club::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-20deg);animation:st-shine 3.6s infinite}@keyframes st-shine{0%,50%{left:-60%}100%{left:130%}}
.club .no{font:800 34px var(--display);color:#E8C878}
/* toasts around the phone */
.st-toast{position:absolute;z-index:12;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:rgba(26,35,51,.78);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);font:700 13px var(--body);box-shadow:0 18px 30px -12px #000;opacity:0;transform:translateY(24px) scale(.85);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.3,1.5,.5,1);pointer-events:none;white-space:nowrap}
.st-toast.on{opacity:1;transform:none;animation:st-bob 4s ease-in-out infinite}.st-toast.b{transition-delay:.25s}.st-toast i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
@keyframes st-bob{50%{translate:0 -7px}}.st-toast.a{left:-12px;top:130px}.st-toast.b{right:-12px;top:400px}
/* phones: the phone first, the steps become tabs, one step's text at a time */
@media (max-width:859px){
  .st-toast{display:none}.st-pin{order:-1;margin-bottom:6px}.story[data-mode=scroll] .st-pin{position:relative;top:auto;height:auto;min-height:0}
  .st-steps{display:flex;flex-wrap:wrap;gap:8px;padding:0}.st-steps::before,.st-steps::after{display:none}
  .st-step,.story[data-mode] .st-step{min-height:0;padding:0;opacity:1;transform:none;display:none;width:100%;order:2}
  .st-step.on{display:flex}
  .st-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -20px 0;padding:0 20px}.st-tabs::-webkit-scrollbar{display:none}
  .st-tabs button{flex:none;appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 14px var(--body);padding:9px 14px;border-radius:99px}
  .st-tabs button.on{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
}
@media (min-width:860px){.st-tabs{display:none}}
@media (prefers-reduced-motion:reduce){.st-scr,.bub,.seq>*,.st-bars i{transition-duration:.01s!important;transition-delay:0s!important}.st-toast.on{animation:none}.st-card .y,.warn,.club::after,.pulse{animation:none!important}}

/* your view / guest view */
.st-view{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:14;display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(26,35,51,.8);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 26px -12px #000}
.st-view button{appearance:none;border:0;background:transparent;color:var(--muted);font:700 13px var(--body);padding:8px 16px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.st-view button.on{background:var(--teal);color:var(--teal-ink)}
.story[data-guest] .st-pin{min-height:640px;padding-bottom:30px}
.story[data-guest][data-mode=scroll] .st-pin{height:calc(100vh - 100px);min-height:640px}
.st-scr .bigc{text-align:center;margin-top:12px}.st-scr .bigc b{font:800 74px/1 var(--display);letter-spacing:-.04em}
.st-scr .door{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}.st-scr .door div{border-radius:18px;padding:20px 0;text-align:center;font:800 22px var(--display);background:var(--ink-3)}.st-scr .door .in{background:var(--teal);color:var(--teal-ink)}
.st-scr .line{margin-top:9px;background:var(--ink-3);border-radius:14px;padding:10px 12px;font-size:12px;display:flex;justify-content:space-between}.st-scr .line b{color:var(--here)}
.st-scr .tg{display:inline-block;width:38px;height:22px;border-radius:99px;background:var(--teal);position:relative}.st-scr .tg::after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.st-scr .price{font:800 15px var(--display);color:var(--teal)}
.st-scr .chip.amber{background:rgba(255,181,71,.18);color:#FFB547}
.st-scr .bc{margin-top:10px;border-radius:18px;overflow:hidden;background:#0A0F18;border:1px solid var(--line)}.st-scr .bc .p{height:86px;background:url(covers/cover-bars_07.webp) center/cover;filter:grayscale(1) contrast(1.15)}.st-scr .bc .x{padding:10px}
@media (max-width:859px){.st-view{position:relative;left:auto;bottom:auto;transform:none;margin-top:12px}.story[data-guest] .st-pin{min-height:0;padding-bottom:0}}