/* Retakio for product intros: "Cut list". Dark screening room, amber.
   Shares the sample-app + form styles from /site.css. */
:root{
  --sc-canvas:#0E0F12; --sc-surface:#191B20; --sc-ink:#F1ECE4; --sc-ink-soft:#ACA79F;
  --sc-accent:#F3A13A; --sc-accent-ink:#1A1206;
  --sc-font-display:"Bricolage Grotesque",system-ui,sans-serif; --sc-font-text:"Geist",system-ui,sans-serif;
  --sc-shadow-color:230 20% 2%;
  --line:#2A2D34; --bar-h:68px;
}
body.intros{background:var(--sc-canvas);color:var(--sc-ink);letter-spacing:.004em}
.intros .display{font-weight:800;letter-spacing:-.03em;line-height:1}
.intros h1,.intros h2{color:var(--sc-ink)}
.intros .lede{color:var(--sc-ink-soft);line-height:1.55}
.kicker{font:600 13px/1 var(--sc-font-text);color:var(--sc-accent);margin:0 0 16px;letter-spacing:.01em}
.note-s{font:500 13px/1.45 var(--sc-font-text);color:#8E8A84;margin:10px 0 0}

/* bar with the running time: the page's signature readout */
.ibar{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,3.4vw,44px);
  background:color-mix(in oklab,var(--sc-canvas) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.intros .mark{color:var(--sc-ink)}
.runtime{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sc-font-text);color:var(--sc-ink-soft)}
.rt-time{font-variant-numeric:tabular-nums;color:var(--sc-ink);font-size:15px;min-width:3.2em}
.rt-bar{width:clamp(80px,14vw,180px);height:4px;border-radius:2px;background:#2B2E35;overflow:hidden}
.rt-bar i{display:block;height:100%;width:100%;background:var(--sc-accent);transform-origin:0 50%;transform:scaleX(1)}
.ibtn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font:600 15px/1 var(--sc-font-text);padding:14px 18px;white-space:nowrap;text-decoration:none;cursor:pointer;border:0;transition:transform .14s var(--sc-ease-out),border-color .15s,background-color .15s}
.ibtn:active{transform:scale(.97)}
.ibtn--line{border:1px solid #3A3D45;color:var(--sc-ink);padding:11px 15px;font-size:14px}
.ibtn--line:hover{border-color:var(--sc-accent)}
.ibtn--amber{background:var(--sc-accent);color:var(--sc-accent-ink)}
.ibtn--amber:hover{background:#FFB457}
.intros .join{border-radius:12px;background:#15171B;box-shadow:inset 0 0 0 1px #33363E}
.intros .join input[type=email]{color:var(--sc-ink)}
.intros .join input[type=email]::placeholder{color:#7F7B75}
.intros .join:focus-within{box-shadow:inset 0 0 0 1px var(--sc-accent)}
.intros .form-msg{color:var(--sc-ink-soft)}
.intros .form-msg.ok{color:#7FE0A8}
.intros .form-msg.err{color:#FF9C88}

/* 1 · hero planes */
.ihero .stage{overflow:hidden}
.ihero .copy{position:absolute;z-index:6;left:clamp(16px,4vw,56px);top:calc(var(--bar-h) + clamp(16px,5vh,56px));max-width:min(34rem,40vw)}
.ihero h1{font-size:clamp(2.3rem,4.6vw,4.2rem);margin:0 0 18px}
.ihero h1 span{color:var(--sc-accent)}
.ihero .lede{max-width:31rem;margin:0 0 24px}
.raw{position:absolute;z-index:1;right:3vw;top:calc(var(--bar-h) + 4vh);width:min(34vw,500px);border-radius:10px;overflow:hidden;
  transform:translate3d(calc(var(--sc-p,0)*-5vw),calc(var(--sc-p,0)*-26px),0) rotate(calc(4deg - var(--sc-p,0)*2deg)) scale(calc(1 - var(--sc-p,0)*.12));
  filter:grayscale(.85) brightness(calc(.6 - var(--sc-p,0)*.2)) blur(calc(var(--sc-p,0)*3px));box-shadow:0 30px 60px -20px #000;will-change:transform}
.raw .lbl{position:absolute;left:10px;top:10px;z-index:2;font:600 11.5px var(--sc-font-text);background:rgba(0,0,0,.62);color:#eee;padding:5px 8px;border-radius:6px}
.rawshot{position:relative;aspect-ratio:16/10;background:#EEF1F4}
.rawshot .sb{position:absolute;left:0;top:0;bottom:0;width:22%;background:#DFE5EB}
.rawshot .bt{position:absolute;right:7%;top:8%;width:20%;height:7%;border-radius:4px;background:#151A21}
.rawshot .ln{position:absolute;left:28%;right:8%;height:5%;border-radius:4px;background:#D9DFE6}
.rawshot svg{position:absolute;inset:0;width:100%;height:100%}
.iplayer{position:absolute;z-index:3;left:calc(42vw + 20px);bottom:9vh;width:min(52vw,840px);will-change:transform;
  transform:translate3d(0,calc(var(--sc-p,0)*-5vh),0) scale(calc(.92 + var(--sc-p,0)*.1));transform-origin:50% 100%}
.iscreen{position:relative;aspect-ratio:640/420;border-radius:14px;overflow:hidden;background:#F4F6F8;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #2A2D33,0 40px 90px -30px #000,0 12px 24px -10px #000}
.iscreen .win{border-radius:0;box-shadow:none}
.ictrl{display:flex;align-items:center;gap:12px;padding:12px 4px 0;font:500 12.5px var(--sc-font-text);color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.ip{width:30px;height:30px;border-radius:50%;background:var(--sc-ink);display:grid;place-items:center}
.ip svg{width:12px;height:12px}
.itrack{flex:1;height:4px;border-radius:2px;background:#30333A;overflow:hidden}
.itrack i{display:block;height:100%;width:0;background:var(--sc-accent)}
.ivoice{display:flex;align-items:center;gap:6px;color:var(--sc-ink)}
.ivoice svg{width:15px;height:15px}
.chips{position:absolute;z-index:5;left:0;bottom:2.2vh;display:flex;gap:10px;padding-left:4vw;white-space:nowrap;will-change:transform;transform:translate3d(calc(var(--sc-p,0)*-24vw),0,0)}
.chips span{font:600 12.5px var(--sc-font-text);color:var(--sc-ink);background:rgba(25,27,32,.92);border:1px solid #2E3138;padding:8px 12px;border-radius:999px}
.chips span.am{border-color:var(--sc-accent);color:var(--sc-accent)}

/* 2 · plain */
.plain{padding-block:clamp(6rem,12vw,10rem) clamp(4rem,8vw,7rem)}
.plain h2{font-size:var(--sc-t-2xl);max-width:20ch;margin-bottom:20px}
.plain .lede{max-width:40rem}

/* 3 · the cut list */
.cut .stage{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar-h) + 10px) clamp(16px,4vw,56px) 28px;gap:clamp(18px,3.5vh,40px)}
.cut-head h2{font-size:var(--sc-t-2xl);max-width:22ch}
.tl{display:flex;height:clamp(54px,9vh,84px);border-radius:10px;overflow:hidden;background:#15171B;box-shadow:inset 0 0 0 1px #2A2D34}
.tl i{display:block;height:100%;min-width:0;flex-basis:0;position:relative}
.tl i.k{background:linear-gradient(#E9E4DC,#D6D0C6);border-right:1px solid #0E0F12}
.tl i.c{background:repeating-linear-gradient(135deg,#3A3226 0 6px,#2C261D 6px 12px);border-right:1px solid #0E0F12}
.tl i.c.hot{background:repeating-linear-gradient(135deg,#F3A13A 0 6px,#C77A1C 6px 12px)}
.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.reasons li{padding:14px 14px 16px;border-radius:12px;background:#15171B;box-shadow:inset 0 0 0 1px #2A2D34;display:flex;flex-direction:column;gap:6px;transition:box-shadow .2s,opacity .2s}
.reasons b{font:600 14.5px/1.3 var(--sc-font-text);color:var(--sc-ink)}
.reasons span{font:600 13px var(--sc-font-text);color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.reasons li.hot{box-shadow:inset 0 0 0 1.5px var(--sc-accent)}
.reasons li.hot span{color:var(--sc-accent)}
.reasons li.gone b{text-decoration:line-through;text-decoration-color:var(--sc-accent);color:var(--sc-ink-soft)}
.reasons li.gone span::after{content:" cut"}
.left{margin:0;font:500 var(--sc-t-lg)/1.4 var(--sc-font-text);color:var(--sc-ink-soft);opacity:0;transition:opacity .3s}
.left b{color:var(--sc-accent);font-variant-numeric:tabular-nums}
.left.show{opacity:1}

/* 4 · added */
.added{padding-block:clamp(5rem,10vw,9rem)}
.added .sc-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.added h2{font-size:var(--sc-t-2xl)}
.titlecard{margin:0}
.tc-in{aspect-ratio:16/9;border-radius:16px;background:radial-gradient(120% 120% at 20% 10%,#2A2F38 0%,#14171C 60%);padding:clamp(20px,5%,48px);display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 0 0 1px #2A2D33,0 30px 70px -30px #000}
.tc-k{font:600 13px var(--sc-font-text);color:var(--sc-accent);margin:0 0 10px}
.tc-h{font:800 clamp(1.5rem,3vw,2.6rem)/1.02 var(--sc-font-display);letter-spacing:-.03em;color:#F6F2EC;margin:0 0 16px;max-width:16ch}
.tc-f{font:500 13px var(--sc-font-text);color:#A9A49C;margin:0}
.titlecard figcaption{font:500 13px var(--sc-font-text);color:#8E8A84;margin-top:12px}
.adds{list-style:none;margin:var(--sc-5) 0 0;padding:0}
.adds li{padding:14px 0;border-top:1px solid var(--line);color:var(--sc-ink-soft);font-size:15.5px;line-height:1.45}
.adds li:last-child{border-bottom:1px solid var(--line)}
.adds b{display:block;color:var(--sc-ink);font-weight:600;font-size:16.5px;margin-bottom:2px}

/* 5 · shapes rail */
.srail{gap:clamp(20px,3vw,40px);padding:0 clamp(16px,4vw,56px);align-items:center;height:100%}
.s-lead{flex:0 0 min(26rem,80vw)}
.s-lead h2{font-size:var(--sc-t-2xl);margin-bottom:14px}
.sf{margin:0;flex:none}
.sfr{position:relative;border-radius:14px;overflow:hidden;background:#F4F6F8;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #2A2D33,0 30px 60px -28px #000}
.sfr .win{border-radius:0;box-shadow:none}
.sf--wide .sfr{width:clamp(300px,40vw,620px);aspect-ratio:16/9}
.sf--sq .sfr{width:clamp(240px,28vw,420px);aspect-ratio:1}
.sf--tall .sfr{height:clamp(320px,62vh,600px);aspect-ratio:9/16}
.sf figcaption{margin-top:12px;font:500 14px/1.4 var(--sc-font-text);color:var(--sc-ink-soft)}
.sf figcaption b{color:var(--sc-ink);margin-right:8px}
.s-note{flex:0 0 min(18rem,70vw);font:700 var(--sc-t-xl)/1.15 var(--sc-font-display);letter-spacing:-.02em;color:var(--sc-ink);margin:0;padding-right:clamp(16px,4vw,56px)}

/* 6 · voice */
.voice{padding-block:clamp(5rem,10vw,9rem)}
.voice .sc-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.voice h2{font-size:var(--sc-t-2xl);margin-bottom:16px}
.editor{background:var(--sc-surface);border-radius:18px;padding:20px;box-shadow:inset 0 1px 0 #2A2D34,0 30px 60px -30px #000}
.editor label{display:block;font:600 13px var(--sc-font-text);color:var(--sc-ink-soft);margin-bottom:8px}
.editor input{width:100%;height:48px;border-radius:10px;border:1px solid #34373F;background:#111316;color:var(--sc-ink);font:500 16px var(--sc-font-text);padding:0 14px}
.editor input:focus{outline:none;border-color:var(--sc-accent)}
.preview{margin-top:14px}
.pv-frame{position:relative;aspect-ratio:16/8;border-radius:12px;background:linear-gradient(160deg,#E9EDF1,#D7DEE6);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.pv-cap{background:rgba(14,15,18,.9);color:#fff;font:500 15px/1.35 var(--sc-font-text);padding:9px 14px;border-radius:9px;max-width:92%;text-align:center}
.vpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vpick button{font:600 13px/1 var(--sc-font-text);border:1px solid #3A3D45;background:transparent;color:var(--sc-ink);padding:9px 12px;border-radius:999px;cursor:pointer}
.vpick button[aria-pressed=true]{background:var(--sc-ink);color:var(--sc-canvas);border-color:var(--sc-ink)}

/* 7 · close */
.iclose .stage{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar-h) + 10px) clamp(16px,4vw,56px) 0}
.final{max-width:44rem}
.final h2{font-size:var(--sc-t-3xl);margin-bottom:16px}
.final .lede{margin-bottom:24px}
.ifoot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:20px clamp(16px,4vw,56px) 24px;border-top:1px solid var(--line);font:500 13.5px/1.4 var(--sc-font-text);color:var(--sc-ink-soft)}
.ifoot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ifoot nav span{color:var(--sc-ink);margin-left:8px}
.ifoot a{color:var(--sc-ink-soft);text-decoration:none}
.ifoot a:hover,.ifoot a[aria-current]{color:var(--sc-ink)}

@media (max-width:860px){
  :root{--bar-h:60px}
  .ibar .ibtn--line{display:none}
  .rt-bar{width:60px}
  .ihero .copy{right:16px;left:16px;max-width:none}
  .ihero h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .ihero .lede{font-size:1rem;margin-bottom:16px}
  .raw{width:60vw;right:-8vw;top:auto;bottom:36vh}
  .iplayer{width:92vw;left:4vw;bottom:9vh;transform:translate3d(0,calc(var(--sc-p,0)*-3vh),0) scale(calc(.95 + var(--sc-p,0)*.05))}
  .reasons{grid-template-columns:minmax(0,1fr)}
  .reasons li{flex-direction:row;justify-content:space-between;padding:10px 12px}
  .added .sc-wrap,.voice .sc-wrap{grid-template-columns:minmax(0,1fr)}
  .final h2{font-size:var(--sc-t-2xl)}
  .intros .join{flex-direction:column;border-radius:14px}
  .intros .join input[type=email]{height:46px}
}
@media (max-width:860px) and (max-height:760px){ .raw{display:none} .ihero .lede{display:none} }
@media (prefers-reduced-motion:reduce){ .raw,.iplayer,.chips{transform:none!important} .iplayer{left:auto;right:4vw} }