/* Dizzi video waitlist (dizzipline.app/video). Oct 29 2026 redesign: bold type, one accent (orange), no decoration. */
:root{
  --bg:#0b0e1f; --panel:#121631; --panel-2:#181d3d; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#f5f3fb; --muted:#a3a6c4; --dim:#7a7d9c;
  --orange:#ff7a1f; --orange-hi:#ff8f40; --on-orange:#1a0a00;
  --ok:#4ade9a; --err:#ff7070;
  --r:20px;
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2{margin:0;font-weight:800;letter-spacing:-.045em;line-height:.98}
h2{font-size:clamp(34px,6vw,60px)}
.center{text-align:center}
.wrap{width:min(1140px,100% - 40px);margin:0 auto}
section{padding:72px 0}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:var(--on-orange);padding:10px 14px;border-radius:10px;z-index:10;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:2.5px solid var(--orange-hi);outline-offset:3px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:14px;border:0;cursor:pointer;
  background:var(--orange);color:var(--on-orange);font:800 17px/1 var(--font);letter-spacing:-.01em;text-decoration:none;transition:background .18s ease,transform .12s ease}
.btn:hover{background:var(--orange-hi)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.btn-block{width:100%;min-height:56px;font-size:18px}
.chip{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--text);font:700 15px var(--font);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.chip:hover{border-color:var(--orange);background:rgba(255,122,31,.08)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand img{width:26px;height:auto}

/* hero */
/* Oct 29 (fastwork-style): centered hero, tilted format cards drifting on both sides (desktop),
   a moving strip of the same cards on phones. */
.hero{position:relative;padding:8px 0 48px;text-align:center;overflow:hidden}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(760px,100% - 40px);margin:0 auto}
h1{font-size:clamp(54px,12vw,112px);letter-spacing:-.055em;line-height:.95;margin-top:36px}
/* h1 em{font-family:"Caveat","Bricolage Grotesque",cursive;font-style:normal;font-weight:700;letter-spacing:-.01em;color:var(--orange);font-size:1.22em;line-height:.6;display:inline-block;transform:rotate(-4deg) translateY(.04em);padding:0 .06em} (Oct 29: replaced by the animated "viral." below) */
/* "viral." - written by a flame outline, then filled with fire (like the Dizzi AI logo intro) */
.viral{position:relative;display:inline-block;font-style:normal;transform:rotate(-4deg);margin-left:.08em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.viral-svg{display:inline-block;overflow:visible}
.viral .vs path{fill:none;stroke:#ff8a2a;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 10px rgba(255,138,42,.9));animation:vTrace var(--t) ease-in-out var(--d) forwards,vEdge .6s ease var(--fill) forwards}
.viral .vf{opacity:0;animation:vFill .6s ease var(--fill) forwards}
.viral-svg{animation:vGlow .9s ease var(--fill) forwards}
@keyframes vTrace{to{stroke-dashoffset:0}}
@keyframes vEdge{to{stroke:#c2410c;stroke-width:6;filter:none}}
@keyframes vFill{to{opacity:1}}
@keyframes vGlow{to{filter:drop-shadow(0 0 22px rgba(255,110,20,.5))}}
/* embers drifting up after the word lights up */
.ember{position:absolute;left:var(--x);bottom:30%;width:6px;height:6px;border-radius:50%;background:#ffb347;box-shadow:0 0 8px 2px rgba(255,140,40,.7);opacity:0;
  animation:ember 2.8s ease-out calc(var(--fill) + .4s + var(--k)) infinite}
@keyframes ember{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(10px,-90px) scale(.3)}}
@media (prefers-reduced-motion:reduce){
  .viral .vs path{stroke-dashoffset:0;stroke:#c2410c;stroke-width:6;filter:none;animation:none}
  .viral .vf{opacity:1;animation:none}
  .viral-svg{filter:drop-shadow(0 0 22px rgba(255,110,20,.5));animation:none}
  .ember{display:none}
}
.sub{font-size:clamp(18px,2.2vw,22px);line-height:1.4;color:var(--muted);margin:24px 0 28px;max-width:30ch}
.btn-lg{min-height:62px;padding:0 38px;font-size:19px;border-radius:999px}
.tiles{display:flex;gap:10px;justify-content:center;margin:0 0 30px}
.tile{width:108px;padding:14px 8px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;gap:4px}
.tile b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tile:first-child b{color:var(--orange)}
.tile span{font-size:13px;color:var(--muted);font-weight:600;line-height:1.2}
.tiles-note{margin:0;color:var(--muted);font-weight:600}

/* format cards: shared look */
.rc,.fc{border-radius:22px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;border:1px solid var(--line-2);position:relative;overflow:hidden}
.rc span,.fc-k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.rc b,.fc b{font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1}
.rc::after,.fc::after{content:"";position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center/14px no-repeat}
.rc-a{background:linear-gradient(170deg,#ff8a2a,#e14d0b);color:#1a0a00;border-color:transparent}
.rc-b{background:linear-gradient(170deg,#1d2350,#121631);color:var(--text)}
.rc-c{background:#f5f3fb;color:#0b0e1f;border-color:transparent}
.rc-d{background:linear-gradient(170deg,#2a1d4f,#151a35);color:var(--text)}
.rc-c::after{background-color:rgba(11,14,31,.85)}
/* Nov 2: video cards (real clips). The clip fills the card; the label sits on a dark fade at the bottom. */
.vc{background:#0b0e1f;padding:0;justify-content:flex-end;border-color:rgba(255,255,255,.14)}
.vc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vc::after{display:none}
.vc .fc-f{position:relative;z-index:1;align-self:flex-start;margin:0 0 10px 10px;padding:4px 10px 4px 4px;border-radius:999px;color:#fff;opacity:1;font-size:12px;white-space:nowrap;background:rgba(5,7,18,.72);backdrop-filter:blur(6px)}
.vc .fc-f img{width:18px;height:18px}
/* "Made from dizzipline.app" on top, the format below: it is a real app's video, not a template */
.vc .fc-f > span{display:flex;flex-direction:column;line-height:1.15}
.vc .fc-f small{font-size:9px;font-weight:700;opacity:.75;letter-spacing:.01em}
.vc .fc-f{border-radius:12px;padding:5px 10px 5px 5px}
.rc .vc-app{position:relative;z-index:1;align-self:flex-start;margin:0 0 8px 8px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:0;text-transform:none;opacity:1;color:#fff;background:rgba(5,7,18,.75);white-space:nowrap}

/* phones: moving strip */
.reel{overflow:hidden;padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.reel-track{list-style:none;margin:0;padding:0;display:flex;gap:14px;width:max-content;animation:reel 34s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-50% - 7px))}}
.rc{flex:none;width:112px;aspect-ratio:9/16;padding:12px;border-radius:18px}
.rc b{font-size:17px}
.rc::after{width:22px;height:22px;right:10px;top:10px;background-size:12px}

/* desktop: tilted cards on both sides, drifting slowly */
.float{display:none}
.fc{width:200px;aspect-ratio:9/16;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.fc-f{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;opacity:.85}
.fc-f img{width:22px;height:22px;border-radius:50%;object-fit:contain;background:rgba(0,0,0,.25);padding:2px}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (min-width:1100px){
  .reel{display:none}
  .hero{min-height:min(860px,100vh);display:flex;align-items:center;padding:0 0 40px}
  .hero-copy{margin-top:-20px}
  .float{display:block;position:absolute;top:0;bottom:0;width:340px;z-index:1;pointer-events:none}
  .float-l{left:max(8px,calc(50% - 720px))}
  .float-r{right:max(8px,calc(50% - 720px))}
  .fc{position:absolute;animation:drift 7s ease-in-out infinite}
  /* Nov 2: smaller cards, less overlap, none cut off at the bottom (was: 200px wide, tops at 20/300/560px) */
  .fc.vc{width:170px}
  .t1{left:20px;top:40px;rotate:-6deg}
  .t2{left:175px;top:200px;rotate:4deg;animation-delay:-2s}
  .t3{left:20px;top:390px;rotate:-3deg;animation-delay:-4s}
  .t4{right:20px;top:60px;rotate:6deg;animation-delay:-1s}
  .t5{right:175px;top:220px;rotate:-5deg;animation-delay:-3s}
  .t6{right:20px;top:410px;rotate:3deg;animation-delay:-5s}
  h1{margin-top:0}
}
@media (max-width:600px){
  h1{font-size:clamp(44px,12.5vw,60px);margin-top:22px}
  .sub{margin:16px 0 20px;font-size:18px}
  .tiles{margin-bottom:22px;gap:8px}
  .tile{width:96px;padding:10px 6px}
  .tile b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.reel-track,.fc{animation:none}.reel{overflow-x:auto}}

/* founding perks + form */
.join-sec{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}

.join{position:relative;padding-top:64px;width:100%;max-width:460px;justify-self:center}
.peek{position:absolute;top:0;left:50%;transform:translateX(-50%);width:104px;height:auto;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.card{position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:24px;padding:42px 22px 22px}

/* form */
.field{margin-bottom:12px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:#dcdcee}
.field label small{color:var(--dim);font-weight:500}
.field input{width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:500 16px var(--font);transition:border-color .18s ease,box-shadow .18s ease}
.field input::placeholder{color:#62658a}
.field input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,31,.22)}
.field input[aria-invalid=true]{border-color:var(--err)}
.add-desc{background:none;border:0;padding:4px 0;margin:-2px 0 14px;color:var(--muted);font:600 14px var(--font);cursor:pointer;min-height:32px}
.add-desc:hover{color:var(--text)}
.err{color:var(--err);font-size:14px;margin:6px 0 0}
.err:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:15px;color:#d6d7ea;cursor:pointer;line-height:1.35}
.check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--orange);cursor:pointer}
.check-err{margin:-4px 0 10px 30px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-err,.closed{border-radius:12px;padding:10px 14px;font-size:15px;margin:0 0 14px}
.form-err{background:rgba(255,112,112,.1);border:1px solid rgba(255,112,112,.35);color:#ffc9c9}
.form-err:empty{display:none}
.closed{background:rgba(255,122,31,.1);border:1px solid rgba(255,122,31,.35);color:#ffd2b0;font-weight:700;text-align:center}
#wlSubmit{margin-top:8px}
.fine{margin:12px 0 0;text-align:center;font-size:13px;color:var(--dim)}
.fine a{color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(26,10,0,.3);border-top-color:var(--on-orange);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* success */
.done{text-align:center;outline:none}
.done-k{margin:0;color:var(--muted);font-weight:600}
.pos{margin:2px 0 8px;font-size:clamp(64px,14vw,96px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--orange)}
.badge{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,122,31,.45);color:var(--orange-hi);font-size:13px;font-weight:800;letter-spacing:.02em}
.done-sub{margin:0 0 16px;color:var(--muted);font-size:15px}
.reflink{display:flex;gap:8px}
.reflink input{flex:1;min-width:0;min-height:50px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:600 14px var(--font)}
.shares{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.copied{margin:10px 0 0;min-height:21px;color:var(--ok);font-size:14px}
.refs{margin:4px 0 0;color:var(--muted);font-size:14px}
.refs:empty{display:none}

/* teaser */
.stage{display:grid;grid-template-columns:1fr;justify-items:center;gap:22px;margin-top:44px}
.teaser .phone{margin:40px auto 0}
.phone{position:relative;width:min(290px,76vw);aspect-ratio:9/16;border-radius:36px;padding:9px;background:#04050c;border:1px solid var(--line-2)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:28px;background:var(--panel-2);display:block}
.ph{position:absolute;inset:9px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--panel-2)}
.ph img{width:42%;height:auto}
.ph b{font-size:18px;color:var(--muted)}
.phone.has-video .ph{display:none}
.formats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.formats li{padding:12px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.formats-l li:first-child,.formats-r li:last-child{border-color:rgba(255,122,31,.5);color:var(--orange-hi)}
.platforms{margin:26px 0 0;text-align:center;color:var(--dim);font-weight:600;letter-spacing:.04em}

/* how it works */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.steps li{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.steps span{font-size:15px;font-weight:800;color:var(--orange);letter-spacing:0}

/* founding */
.founding{text-align:center}
.founding h2{font-size:clamp(36px,6vw,64px)}
.spots{margin:12px 0 0;color:var(--muted);font-weight:600}
.spots b{color:var(--orange)}
.perks{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.perks li{display:flex;align-items:baseline;gap:14px;padding:16px 20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-align:left}
.perks b{font-size:clamp(36px,5vw,48px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--orange);min-width:2.6em}
.perks span{color:var(--muted);font-weight:600}

/* next */
.next{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.next img{width:120px;height:auto}
.next h2{font-size:clamp(32px,5vw,52px)}
.next p{margin:12px auto 0;color:var(--muted);font-size:18px;max-width:34ch}

/* faq */
.faq{max-width:720px;margin:36px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-weight:700;font-size:19px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:26px;font-weight:400;color:var(--orange);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--muted)}
.faq a{color:var(--text)}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding:28px 0 44px;border-top:1px solid var(--line);margin-top:24px;color:var(--dim);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}

@media (min-width:700px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{flex-direction:column;align-items:flex-start;gap:28px;padding:28px;min-height:190px}
  .perks{grid-template-columns:repeat(3,1fr)}
  .next{flex-direction:row;text-align:left;gap:36px;justify-content:center}
  .next img{width:150px}
  .next p{margin-left:0}
}
@media (min-width:960px){
  section{padding:96px 0}
  .hero{padding:16px 0 56px}
  .rc{width:200px}
  .rc b{font-size:28px}
  .join-sec{grid-template-columns:1fr 1fr;gap:72px}
  .founding{text-align:left}
  .join{justify-self:end}
  .stage{grid-template-columns:1fr auto 1fr;align-items:center;gap:36px}
  .formats{flex-direction:column;gap:14px}
  .formats-l{align-items:flex-end}
  .formats-r{align-items:flex-start}
  .formats li{font-size:20px;padding:16px 22px}
  .formats-l li:nth-child(2){margin-right:40px}
  .formats-r li:nth-child(1){margin-left:40px}
  /* .founding{padding:56px 48px} (Oct 29: founding is no longer a boxed card) */
}
@media (max-width:959px){ .phone{order:-1} .formats li{font-size:16px;padding:10px 14px} }
/* Oct 29: next to the form the perks read best as rows */
.join-sec .perks{grid-template-columns:1fr;max-width:460px}
.join-sec .perks li{align-items:center}
@media (min-width:960px){.join-sec .perks{margin-left:0}}
@media (max-width:959px){.join-sec .perks{margin-left:auto;margin-right:auto}}

/* ===== Oct 29: scroll animations =====
   Sections slide up and fade in as they come on screen (children one after another), the hero cards
   move at different speeds while scrolling, and the teaser phone tilts up flat as it arrives.
   Only with JavaScript on (html.js) and never for "reduce motion". */
html.js .rv{opacity:0;transform:translateY(46px) scale(.98);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
html.js .rv.in{opacity:1;transform:none}
html.js h2.rv{transform:translateY(60px);clip-path:inset(0 0 100% 0);transition:opacity .7s ease var(--rd,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--rd,0s),clip-path .9s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
html.js h2.rv.in{transform:none;clip-path:inset(0 0 -20% 0)}
.float{will-change:transform}
.teaser .phone{transform-origin:50% 100%;will-change:transform}
@media (prefers-reduced-motion:reduce){html.js .rv,html.js h2.rv{opacity:1;transform:none;clip-path:none;transition:none}}

/* ===== Oct 29 (Apple-style) ===== */
/* no visible scrollbar (scrolling still works: wheel, trackpad, touch, keyboard) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* hero: the headline shrinks and fades a little as you start scrolling (set by waitlist.js) */
.hero-copy{transform-origin:50% 30%;will-change:transform,opacity}

/* --- pinned "How it works" story --- */
.story{position:relative;padding:0}
.story-pin{min-height:100vh;display:flex;align-items:center;padding:60px 0}
html.js:not(.rm) .story{height:340vh}
html.js:not(.rm) .story-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:0;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;justify-items:center;width:min(1140px,100% - 40px)}
.story-text{text-align:center}
.story-text h2{font-size:clamp(30px,5vw,56px)}
.story-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.story-steps li{font-size:clamp(20px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#3a3e63;transition:color .45s ease,transform .45s ease}
.story-steps li span{font-size:.45em;letter-spacing:0;margin-right:.6em;vertical-align:.35em;color:inherit}
.story-steps li.on{color:var(--text)}
.story-steps li.on span{color:var(--orange)}
.story-bar{width:180px;height:3px;border-radius:3px;background:var(--line-2);margin:22px auto 0;overflow:hidden}
.story-bar i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}

.story-phone{width:min(250px,58vw);margin:0;will-change:transform;transform-origin:50% 50%}
.scr{position:absolute;inset:9px;border-radius:28px;background:var(--panel-2);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.story[data-step="0"] .scr0,.story[data-step="1"] .scr1,.story[data-step="2"] .scr2{opacity:1;transform:none}
html:not(.js) .scr2,html.rm .scr2{opacity:1;transform:none}
.scr > b{font-size:20px;letter-spacing:-.02em}
.scr0 img{width:40px;height:auto}
.fake-input{width:100%;height:46px;border-radius:12px;border:1px solid var(--orange);background:var(--bg);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--text);overflow:hidden;white-space:nowrap}
.typed{display:inline-block;overflow:hidden;border-right:2px solid var(--orange);width:0;animation:none}
.story[data-step="0"] .typed{animation:type 1.6s steps(19) .3s forwards,caret .8s step-end infinite}
html:not(.js) .typed,html.rm .typed{width:auto;border-right:0}
@keyframes type{to{width:19ch}}
@keyframes caret{50%{border-color:transparent}}
.fake-btn{width:100%;height:46px;border-radius:12px;background:var(--orange);color:var(--on-orange);display:grid;place-items:center;font-weight:800;font-size:15px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.mini-grid .rc{width:auto;aspect-ratio:3/4;padding:9px;border-radius:12px}
.mini-grid .rc b{font-size:13px}
.mini-grid .rc span{font-size:8px}
.mini-grid .rc::after{display:none}
.mini-grid .sel{outline:3px solid var(--text);outline-offset:2px}
.scr2 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr2 .ph{position:static;background:none;inset:auto;gap:14px}
.thumbs{display:flex;gap:8px}
.thumbs i{width:52px;aspect-ratio:9/16;border-radius:10px;display:block}
.story[data-step="2"] .thumbs i{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.story[data-step="2"] .thumbs i:nth-child(2){animation-delay:.12s}
.story[data-step="2"] .thumbs i:nth-child(3){animation-delay:.24s}
@keyframes pop{from{transform:scale(.4) translateY(20px);opacity:0}}
.scr2 .ph span{color:var(--muted);font-size:13px;font-weight:600}

@media (min-width:900px){
  .story-grid{grid-template-columns:1fr 1fr;gap:60px}
  .story-text{text-align:left;justify-self:start}
  .story-bar{margin-left:0}
  .story-phone{width:min(300px,26vw)}
}
@media (max-width:600px){ .story-steps li{font-size:19px} }

/* --- statement: words light up one by one as you scroll --- */
.statement{padding:22vh 0}
.lit{margin:0 auto;max-width:15ch;font-size:clamp(40px,7.5vw,96px);font-weight:800;letter-spacing:-.05em;line-height:1;text-align:center}
.lit em{font-style:normal}
html.js:not(.rm) .lit .w{color:#262a4a;transition:color .25s ease}
html.js:not(.rm) .lit .w.on{color:var(--text)}
html.js:not(.rm) .lit em .w.on{color:var(--orange)}
.lit em{color:var(--orange)}

/* the older scroll reveal stays off inside the story (the story has its own motion) */
.story .rv{opacity:1!important;transform:none!important;clip-path:none!important}
.phone:not(.has-video) .scr2 video{display:none}

/* Nov 2: "Pick a format" and "3 videos ready" show real clips (was: plain colored blocks) */
.mini-grid .vc{padding:0;aspect-ratio:9/14;background:#0b0e1f}
.mini-grid .vc img,.mini-grid .vc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mini-grid .vc b{position:relative;z-index:1;margin:0 6px 6px;padding:3px 7px;border-radius:999px;font-size:10px;letter-spacing:0;white-space:nowrap;color:#fff;background:rgba(5,7,18,.75);align-self:flex-start}
.mini-grid .vc:not(.sel){opacity:.6}
.thumbs i{position:relative;width:72px;overflow:hidden;background:#0b0e1f;border:1px solid rgba(255,255,255,.14)}
.phone:not(.has-video) .scr2 .thumbs video{display:block}