@font-face{font-family:"Inter Black";src:url("/app/Inter-Black.otf") format("opentype");font-weight:900;font-display:swap}
:root{
  --ink:#0b0c0e;--ink2:#121418;--line:#262a31;--paper:#efe9dc;--mute:#9a9fa8;--tape:#ff5a36;--tape2:#ffb199;--amber:#f2c14e;--mint:#7fd1ae;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--paper);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid #9cc7ff;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:20}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,48px);background:linear-gradient(#0b0c0ee6,#0b0c0e00)}
.brand{font:600 19px var(--serif);text-decoration:none;display:flex;align-items:center;gap:10px}
.reel{width:20px;height:20px;border-radius:50%;background:conic-gradient(from 210deg,var(--tape) 0 62%,transparent 62% 70%,var(--paper) 70%);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav nav{display:flex;gap:clamp(6px,2vw,22px);align-items:center;font-size:15px}
.nav nav a{text-decoration:none;color:var(--mute);padding:8px 2px}.nav nav a:hover{color:var(--paper)}
.nav .cta{color:#1a0b06;background:var(--tape);padding:9px 16px;border-radius:99px;font-weight:650}.nav .cta:hover{color:#1a0b06;filter:brightness(1.08)}
@media (max-width:760px){.nav nav a:not(.cta){display:none}}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:99px;border:1px solid #3a3f48;text-decoration:none;font-weight:650;background:#ffffff08}
.btn:hover{border-color:var(--paper)}.btn.go{background:var(--tape);border-color:var(--tape);color:#1a0b06}.btn.go:hover{filter:brightness(1.08)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px clamp(16px,6vw,96px) clamp(48px,9vh,110px);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90vmax 60vmax at 82% 8%,#ff5a3626,transparent 60%),
  radial-gradient(70vmax 50vmax at 0% 100%,#7fd1ae14,transparent 60%),
  repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 64px)}
.slate{display:flex;gap:10px 26px;flex-wrap:wrap;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 26px}
.slate span+span::before{content:"/";margin-right:26px;color:#3a3f48}
h1{font:600 clamp(44px,9.2vw,132px)/.96 var(--serif);letter-spacing:-.025em;margin:0;text-wrap:balance}
h1 em{font-style:italic;color:var(--tape2)}
.strike{position:relative;color:var(--mute)}
.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:.075em;background:var(--tape);transform-origin:left;animation:slash 1.1s .5s cubic-bezier(.7,0,.2,1) both}
@keyframes slash{from{transform:scaleX(0)}}
.dek{max-width:58ch;font-size:clamp(17px,2.1vw,21px);color:#cfc9bd;margin:28px 0 0}

.room{height:420vh;position:relative}
.pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:74px clamp(12px,4vw,64px) 18px;gap:14px}
.room-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
h2{font:600 clamp(30px,5vw,60px)/1.04 var(--serif);letter-spacing:-.018em;margin:0;text-wrap:balance}
.tabs,.stages{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;background:var(--ink2)}
.tabs button,.stages button{font:600 14px var(--sans);color:var(--mute);background:none;border:0;border-radius:99px;padding:9px 16px;min-height:42px;cursor:pointer}
.tabs button[aria-pressed=true],.stages button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.deck{background:linear-gradient(#15181d,#0f1114);border:1px solid var(--line);border-radius:18px;padding:clamp(12px,2vw,22px);box-shadow:0 40px 120px -40px #000,inset 0 1px 0 #ffffff0d;display:flex;flex-direction:column;gap:12px;min-height:0}
.readout{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.readout>div{background:#0b0c0e;border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0}
.k{display:block;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.v{display:block;font:600 clamp(14px,2vw,19px) var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.readout{grid-template-columns:repeat(2,1fr)}}
.stagewrap{position:relative;border-radius:12px;overflow:hidden;background:#07080a;border:1px solid var(--line);flex:1;min-height:150px;max-height:44svh}
#timeline{display:block;width:100%;height:100%;touch-action:pan-y;cursor:pointer}
.caption{font:italic clamp(16px,2.4vw,24px)/1.3 var(--serif);min-height:1.4em;margin:0;text-align:center;color:#ddd6c8}
.transport{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hint{margin:0;color:var(--mute);font-size:14px}
.fine{font-size:13px;color:#7d828b;margin:0}
@media (max-width:620px){.stages button{padding:8px 10px;font-size:13px}.pin{padding-top:64px}}

.band{padding:clamp(72px,12vw,150px) clamp(16px,6vw,96px);border-top:1px solid var(--line);position:relative}
.kicker{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tape2);margin:0 0 18px}
.band h2{max-width:20ch}
.lead{max-width:64ch;color:#cfc9bd;margin:22px 0 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;margin-top:44px}
.mode-card,.ticket{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,36px);background:linear-gradient(160deg,#171a1f,#0e1013)}
.mode-card.alt{background:linear-gradient(160deg,#21140f,#0e1013);border-color:#4a2a1f}
.tag{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
h3{font:600 clamp(22px,2.6vw,30px)/1.15 var(--serif);margin:0 0 10px}
.mode-card ul{margin:18px 0 0;padding:0;list-style:none}
.mode-card li{padding:10px 0 10px 26px;border-top:1px solid var(--line);position:relative;color:#d8d2c5}
.mode-card li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:3px;background:var(--tape)}
.flow{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border-top:2px solid var(--paper)}
.flow li{padding:22px 20px 8px 0;position:relative}
.flow li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--tape)}
.n{font:600 13px var(--mono);color:var(--mute);letter-spacing:.1em}
.flow h3{margin-top:6px;font-size:24px}.flow p{color:#bdb7ab;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:0;margin:40px 0 20px;border-top:1px solid var(--line)}
.stats div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.stats dt{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.stats dd{margin:6px 0 0;font:600 clamp(18px,2vw,22px)/1.25 var(--serif)}
.amount{font:600 clamp(54px,8vw,96px)/1 var(--serif);margin:0 0 14px;letter-spacing:-.03em}
.amount small{font:500 16px var(--sans);color:var(--mute);letter-spacing:0}
.ticket{position:relative}.ticket .btn{margin-top:12px}
.ticket.ghost{background:none;border-style:dashed;color:var(--mute)}.ticket.ghost .amount{color:#5d626b}
.ledger{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 36px}
.ledger li{border-top:1px solid var(--line);padding:22px 0}
.ledger h3{font-size:21px}.ledger p{margin:0;color:#bdb7ab}
.faq{margin-top:36px;max-width:820px}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font:600 clamp(18px,2.2vw,22px) var(--serif);padding:20px 34px 20px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 26px var(--sans);color:var(--tape)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;color:#cfc9bd;max-width:66ch}
.closer{padding:clamp(90px,16vw,200px) clamp(16px,6vw,96px);text-align:center;border-top:1px solid var(--line);background:radial-gradient(60vmax 40vmax at 50% 110%,#ff5a3630,transparent 65%)}
.closer h2{margin:0 auto;max-width:18ch}.closer p{color:#cfc9bd}.closer .actions{justify-content:center}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:26px clamp(16px,6vw,96px);border-top:1px solid var(--line);color:var(--mute);font-size:14px}

.rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reel,.strike::after{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .room{height:auto}.pin{position:static;height:auto;padding-top:90px}
  .stagewrap{height:260px;flex:none}
}

/* ---------- hero field ---------- */
.hero{min-height:0;height:230vh;padding:0;display:block}
.hero::before{display:none}
.hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:110px clamp(16px,6vw,96px) clamp(84px,13vh,150px);isolation:isolate;
  background:radial-gradient(120vmax 70vmax at 80% -10%,#ff5a3622,transparent 60%),radial-gradient(90vmax 60vmax at -10% 110%,#7fd1ae12,transparent 60%),var(--ink)}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:calc(.55 + var(--p,0)*.45)}
.hero-pin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b0c0ef2 0,#0b0c0ecc 38%,#0b0c0e00 78%),linear-gradient(0deg,#0b0c0e 0,#0b0c0e00 26%);opacity:calc(1 - (var(--p,0) - .2)*1.6);pointer-events:none}
.hero-copy{transform:translateY(calc(var(--p,0)*-22vh));opacity:calc(1 - (var(--p,0) - .14)*4.2);will-change:transform,opacity}
.h-line{display:block}
.h-line.two{color:#cfc9bd}
.h-line.two em{color:var(--tape);font-style:italic;position:relative;white-space:nowrap}
.h-line.two em::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.07em;background:var(--tape);transform-origin:left;animation:slash 1.1s .6s cubic-bezier(.7,0,.2,1) both}
.hero h1{font-size:clamp(38px,6.4vw,96px)}
.scan{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);bottom:clamp(22px,4vh,44px);display:flex;align-items:center;gap:16px;font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.scan-bar{flex:1;height:2px;background:#ffffff1f;position:relative;overflow:hidden}
.scan-bar i{position:absolute;inset:0;background:var(--tape);transform-origin:left;transform:scaleX(var(--p,0))}
.scan-v{color:var(--paper);white-space:nowrap}
@media (max-width:560px){.scan-k{display:none}}

/* ---------- stance: amplify, not replace ---------- */
.stance{height:330vh;position:relative;border-top:1px solid var(--line)}
.stance-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:84px clamp(16px,6vw,96px) 24px;gap:clamp(14px,3vh,34px);
  background:radial-gradient(80vmax 50vmax at 50% 120%,#ff5a361f,transparent 62%)}
.mega{font:600 clamp(40px,9.4vw,150px)/.95 var(--serif);letter-spacing:-.03em;max-width:none;margin:0}
.w{display:inline-block;opacity:clamp(.1,calc((var(--p,0) - var(--at))*14),1);transform:translateY(calc(clamp(0,calc(1 - (var(--p,0) - var(--at))*14),1)*.35em));will-change:opacity,transform}
.w.amp{color:var(--tape2)}
.w.amp:nth-of-type(6){font-style:italic;color:var(--tape)}
.cutword{position:relative;color:var(--mute)}
.cutword::after{content:"";position:absolute;left:-3%;right:-3%;top:54%;height:.08em;background:var(--tape);transform-origin:left;transform:scaleX(clamp(0,calc((var(--p,0) - .2)*9),1))}
.belt{position:relative;height:clamp(150px,26vh,230px);margin:34px calc(clamp(16px,6vw,96px)*-1) 0;opacity:clamp(0,calc((var(--p,0) - .36)*8),1);perspective:1200px}
.belt::before,.belt::after{content:"";position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,#ffffff2e 0 14px,transparent 14px 28px)}
.belt::before{top:0}.belt::after{bottom:0}
.belt-track{position:absolute;top:50%;left:50%;display:flex;gap:18px;transform:translate3d(calc(18vw - var(--q,0)*var(--belt-w,2000px)),-50%,0) rotateX(8deg);will-change:transform}
.chip{flex:none;width:clamp(190px,24vw,270px);border:1px solid #6a5520;background:#1b170c;border-radius:14px;padding:14px 16px;transition:background .35s,border-color .35s,transform .35s cubic-bezier(.2,.9,.3,1.4)}
.chip small{display:block;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.chip b{display:block;font:600 clamp(16px,1.7vw,20px)/1.2 var(--serif);margin:6px 0 4px}
.chip i{display:block;font:500 13px var(--sans);font-style:normal;color:var(--mute);min-height:1.3em}
.chip.cut{border-color:var(--tape);background:#2a130c;transform:translateY(-10px)}.chip.cut small{color:var(--tape)}
.chip.keep{border-color:#2f5a4a;background:#0f1d18;transform:translateY(10px)}.chip.keep small{color:var(--mint)}
.belt-gate{position:absolute;left:50%;top:-14px;bottom:-14px;width:2px;background:linear-gradient(var(--tape),#ff5a3600);z-index:2;box-shadow:0 0 34px 6px #ff5a3655}
.belt-gate span{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tape)}
.belt-side{position:absolute;bottom:-46px;font-size:13px;color:var(--mute);display:grid}
.belt-side b{color:var(--paper);font:600 14px var(--sans)}
.belt-side.left{left:clamp(16px,6vw,96px)}.belt-side.right{right:clamp(16px,6vw,96px);text-align:right}
.belt-count{margin:44px 0 0;text-align:center;color:var(--mute);font-size:13px;letter-spacing:.06em;opacity:clamp(0,calc((var(--p,0) - .4)*8),1)}
.duo{border-top:0;padding-top:clamp(40px,7vw,90px)}
.duo .cols{margin-top:0}
.role{border-left:2px solid var(--line);padding:6px 0 6px clamp(18px,3vw,34px)}
.role.warm{border-color:var(--tape)}
.role p:last-child{color:#cfc9bd;margin:0}
.duo .lead{font:italic clamp(20px,2.6vw,30px)/1.35 var(--serif);color:var(--paper);max-width:34ch;margin-top:clamp(36px,6vw,70px)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:clamp(18px,3vw,34px) 0}
.marquee-in{display:flex;gap:.6em;white-space:nowrap;font:600 clamp(64px,15vw,230px)/.9 var(--serif);letter-spacing:-.03em;will-change:transform}
.marquee-in span{color:transparent;-webkit-text-stroke:1.5px #3a3f48}
.marquee-in span:nth-child(3n+2){color:var(--tape);-webkit-text-stroke:0;font-style:italic}

/* ---------- workflow film strip ---------- */
.strip{height:360vh;position:relative;border-top:1px solid var(--line)}
.strip-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);padding:84px 0 30px}
.strip-head{padding:0 clamp(16px,6vw,96px)}
.reel-track{list-style:none;margin:0;padding:26px clamp(16px,6vw,96px);display:flex;gap:clamp(14px,2vw,26px);width:max-content;transform:translate3d(calc(var(--p,0)*-1*(100% - 100vw)),0,0);will-change:transform;
  background:repeating-linear-gradient(90deg,#ffffff14 0 16px,transparent 16px 34px) 0 6px/auto 8px repeat-x,repeating-linear-gradient(90deg,#ffffff14 0 16px,transparent 16px 34px) 0 calc(100% - 6px)/auto 8px repeat-x,#101216}
.reel-track li{flex:none;width:min(78vw,430px);min-height:min(48vh,360px);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,3vw,32px);background:linear-gradient(165deg,#191c22,#0c0d10);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.reel-track .n{position:absolute;top:-.14em;right:.06em;font:600 clamp(110px,17vw,210px)/1 var(--serif);color:transparent;-webkit-text-stroke:1.5px #343842;letter-spacing:-.04em}
.reel-track li:nth-child(3){border-color:var(--tape);background:linear-gradient(165deg,#2a160f,#0c0d10)}
.reel-track li:nth-child(3) .n{-webkit-text-stroke-color:var(--tape)}
.reel-track h3{font-size:clamp(26px,3.4vw,40px)}.reel-track p{margin:0;color:#c6c0b3}

/* ---------- tilt cards ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;transform-style:preserve-3d}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#ffffff14,transparent 60%)}
.mode-card{position:relative}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto}.hero-pin{position:relative;height:auto;min-height:100svh}
  .hero-copy{transform:none;opacity:1}.h-line.two em::after{animation:none}
  .stance{height:auto}.stance-pin{position:static;height:auto;overflow:visible;padding-top:110px;padding-bottom:70px}
  .w{opacity:1;transform:none}.cutword::after{transform:none}
  .belt{opacity:1;height:auto;margin:0;perspective:none}.belt::before,.belt::after,.belt-gate,.belt-side{display:none}
  .belt-track{position:static;transform:none;flex-wrap:wrap}.belt-count{opacity:1}
  .strip{height:auto}.strip-pin{position:static;height:auto;overflow:visible}
  .reel-track{transform:none;width:auto;flex-wrap:wrap}.reel-track li{width:min(100%,430px);min-height:240px}
  .tilt{transform:none}
}

@media (max-width:620px){.belt-side span{display:none}.belt-side b{font-size:12px}.belt-count{font-size:11.5px}}

.ticket.incl ul{list-style:none;margin:0;padding:0}.ticket.incl li{padding:11px 0 11px 26px;border-top:1px solid var(--line);position:relative;color:#d8d2c5}.ticket.incl li:first-child{border-top:0}.ticket.incl li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:3px;background:var(--tape)}

.vs{margin-top:44px;border-top:2px solid var(--paper)}
.vs-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.25fr;gap:0;border-bottom:1px solid var(--line)}
.vs-row>span{padding:18px 16px 18px 0;color:#a9a399}
.vs-row>span:first-child{color:var(--paper);font:600 clamp(16px,1.6vw,19px) var(--serif)}
.vs-head>span{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:14px;padding-bottom:14px}
.vs .us{color:var(--paper);font-weight:650;background:linear-gradient(90deg,#ff5a3622,#ff5a3608);padding-left:16px;border-left:2px solid var(--tape)}
.vs-head .us{color:var(--tape)}
@media (max-width:760px){
  .vs-head{display:none}.vs-row{grid-template-columns:1fr;padding:16px 0}
  .vs-row>span{padding:3px 0}.vs-row>span:nth-child(2)::before{content:"Automatic AI editors: ";color:#6f747d}.vs-row>span:nth-child(3)::before{content:"Yourself: ";color:#6f747d}
  .vs .us{margin-top:8px;padding:10px 12px}.vs .us::before{content:"Cut & Publish: ";color:var(--tape)}
}

/* ---- the fear */
.fear h2{max-width:22ch}
.fear .punch{margin-top:38px;font:600 clamp(22px,2.6vw,32px)/1.3 var(--serif);color:var(--paper);max-width:34ch;border-left:3px solid var(--tape);padding-left:18px}

/* ---- editing room showcase */
.er{height:300vh;position:relative;border-top:1px solid var(--line)}
.er-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,5vw,80px);align-items:center;padding:84px clamp(16px,6vw,96px) 40px;overflow:hidden}
.er-copy h2{font-size:clamp(32px,4.4vw,58px);max-width:15ch}
.er-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;counter-reset:s}
.er-steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;opacity:.42;transition:opacity .4s,border-color .4s,background .4s}
.er-steps li::before{content:"0" counter(s);grid-row:span 2;font:600 13px var(--mono);color:var(--mute);padding-top:3px}
.er-steps li b{font:600 18px var(--serif)}.er-steps li span{color:#bdb7aa;font-size:15px}
.er-steps li.on{opacity:1;border-color:var(--tape);background:linear-gradient(90deg,#ff5a3618,transparent)}
.er-steps li.on::before{color:var(--tape)}
.er-device{display:grid;justify-items:center;gap:18px}
.er-frame{position:relative;height:min(56svh,520px);aspect-ratio:16/9;max-width:100%;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px -30px #000,0 0 0 1px #ffffff18;transition:aspect-ratio .7s cubic-bezier(.7,0,.2,1),height .7s}
.er[data-step="0"] .er-frame,.er[data-step="1"] .er-frame{height:auto;width:min(100%,520px)}
.er[data-step="2"] .er-frame,.er[data-step="3"] .er-frame{aspect-ratio:9/16}
.er-pic{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#2c2f5a,#121327 60%,#0a0b14)}
.er-pic i{position:absolute;border-radius:50%;filter:blur(2px)}
.er-pic .s1{width:44%;aspect-ratio:1;left:28%;top:24%;background:radial-gradient(circle at 40% 35%,#f4c7a3,#c98a62 60%,#7b4d36)}
.er-pic .s2{width:70%;height:42%;left:15%;bottom:-8%;border-radius:40% 40% 0 0;background:linear-gradient(#ff5a36,#b23a1f)}
.er-pic .s3{width:18%;aspect-ratio:1;right:8%;top:10%;background:#f2c14e55;filter:blur(18px)}
.er-cap{position:absolute;left:6%;right:6%;top:58%;margin:0;text-align:center;font:900 clamp(18px,2.4vw,30px)/1.1 "Inter Black",var(--sans);color:#fff;-webkit-text-stroke:.14em #000;paint-order:stroke fill;opacity:0;transition:opacity .4s}
.er[data-step="3"] .er-cap{opacity:1}
.er-cap span.hot{color:#ffd400}
.er-tl{position:relative;display:flex;gap:4px;width:min(100%,460px);height:34px}
.er-tl b{flex:1;border-radius:6px;background:#2a2d34;border:1px solid #3a3e47;transition:transform .6s cubic-bezier(.7,0,.2,1),flex .6s,opacity .5s}
.er-tl .b2{flex:.5}.er-tl .b4{flex:1.4}
.er[data-step="0"] .er-tl b{background:repeating-linear-gradient(90deg,#2a2d34 0 6px,#33373f 6px 8px)}
.er-x{position:absolute;top:-6px;bottom:-6px;width:3px;background:var(--tape);border-radius:2px;opacity:0;transition:opacity .4s}
.er-x.x1{left:19%}.er-x.x2{left:56%}
.er[data-step="0"] .er-x{opacity:1}
.er:not([data-step="0"]) .er-tl .b2{flex:0;opacity:0;border-width:0}
.er:not([data-step="0"]) .er-tl .b4{order:-1;background:#ff5a3640;border-color:var(--tape)}
.er-fine{position:absolute;bottom:14px;right:clamp(16px,6vw,96px);margin:0}
@media (max-width:820px){
  .er{height:340vh}
  .er-pin{grid-template-columns:1fr;align-content:center;gap:16px;padding-top:76px}
  .er-copy .lead{display:none}
  .er-steps{margin-top:12px;gap:6px}.er-steps li{padding:8px 12px}.er-steps li span{display:none}
  .er-frame{height:min(38svh,340px)}
}
@media (prefers-reduced-motion:reduce){
  .er{height:auto}.er-pin{position:static;height:auto}
  .er-frame,.er-tl b,.er-steps li,.er-cap{transition:none}
}