/* Reel Factory demo — the edit bay: warm paper, raspberry accent, condensed caption type. Light-only by design. */
:root{
  --ground:#F4F2EF; --card:#FFFFFF; --ink:#221F26; --ink2:#6E6772; --line:#E0DCD6;
  --accent:#C81E6E; --accent-ink:#FFFFFF; --accent-soft:#FAE7F0;
  --ok:#2E8A56; --ok-soft:#E5F2EB;
  --cut:#3B6FB2; --cut-soft:#E8EFF8;
  --shadow:0 1px 2px rgba(34,31,38,.07), 0 5px 16px rgba(34,31,38,.06);
  --disp:Bahnschrift, 'Arial Narrow', 'Segoe UI Semibold', sans-serif-condensed, sans-serif;
  --body:'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:'Cascadia Mono', Consolas, ui-monospace, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
body{
  margin:0 auto; background:var(--ground); color:var(--ink);
  font:15px/1.5 var(--body);
  padding:0 22px 40px; max-width:1220px;
}
button{font:inherit; cursor:pointer}
button, input{touch-action:manipulation}
h1, h2{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- header ---------- */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:26px 0 12px}
.eyebrow{font:600 12px var(--disp); letter-spacing:2.6px; text-transform:uppercase; color:var(--accent)}
.eyebrow em{font-style:normal; color:var(--ink2); letter-spacing:1.4px; margin-left:8px; text-transform:none; font-weight:400; font-family:var(--body); font-size:11.5px}
h1{font:700 clamp(26px,3.6vw,40px)/1.08 var(--disp); margin:4px 0 2px; letter-spacing:.4px; text-transform:uppercase}
#bizName{border-bottom:2px dashed transparent; padding-bottom:1px}
#bizName:hover{border-bottom-color:var(--line)}
#bizName:focus{outline:none; border-bottom-color:var(--accent)}
.sub{color:var(--ink2); font-size:13px}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card)}
.seg button{border:0; background:none; padding:8px 13px; color:var(--ink2); font-size:13.5px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.btn{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:9px 16px; font-weight:600; font-size:14px; color:var(--ink); box-shadow:var(--shadow); transition:transform .12s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.small{padding:6px 12px; font-size:12.5px}
.btn[disabled]{opacity:.5; cursor:default}

.tally{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:10px 18px; box-shadow:var(--shadow); text-align:right; margin-left:auto}
.tally-label{display:block; font:600 10.5px var(--body); letter-spacing:1.8px; text-transform:uppercase; color:var(--ink2)}
.tally b{font:700 30px/1.15 var(--disp); color:var(--accent); font-variant-numeric:tabular-nums}
.tally small{display:block; color:var(--ink2); font-size:11.5px}
.tally b.pop{animation:pop .35s var(--ease-out)}
@keyframes pop{40%{transform:scale(1.12)}}

/* ---------- ladder ---------- */
.ladder{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 16px; color:var(--ink2); font-size:12.5px}
.ladder .rung{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:2px 9px}
.ladder .arrow{color:var(--line)}

/* ---------- cockpit ---------- */
.cockpit{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start}
@media (max-width:960px){
  .cockpit{grid-template-columns:1fr}
  .phoneWrap{max-width:340px; margin-inline:auto; width:100%}
}

/* factory floor */
.lane-h{font:700 13px var(--disp); text-transform:uppercase; letter-spacing:1.6px; margin:14px 0 8px; color:var(--ink2)}
.lane-h span{color:var(--ink2); font-weight:400; font-family:var(--mono); font-size:11px}
.rawlist{display:flex; flex-wrap:wrap; gap:8px}
.raw{background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:8px 11px; font-size:12.5px; color:var(--ink2); animation:arrive .25s var(--ease-out)}
.raw b{display:block; color:var(--ink); font-size:13px; font-weight:600}
.raw .tag{font-family:var(--mono); font-size:10.5px}
.raw .tag.good{color:var(--ok)}
.raw .tag.bad{color:var(--accent)}
.raw.used{border-color:var(--ok); background:var(--ok-soft)}

.sheetlist{display:flex; flex-direction:column; gap:10px}
.sheet{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--cut); border-radius:10px; box-shadow:var(--shadow); padding:12px 15px; animation:arrive .25s var(--ease-out); cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit}
.sheet:hover{border-left-color:var(--accent)}
.sheet.delivered{border-left-color:var(--ok)}
.sheet h3{margin:0; font:700 16px var(--disp); letter-spacing:.3px}
.sheet h3 small{font:600 10.5px var(--body); letter-spacing:1.2px; text-transform:uppercase; margin-left:8px; vertical-align:middle}
.sheet.delivered h3 small{color:var(--ok)}
.sheet.cutting h3 small{color:var(--cut)}
.sheet .hook{color:var(--accent); font-weight:600; font-size:13.5px; margin:4px 0 2px}
.sheet .beats{margin:2px 0 0; padding:0; list-style:none; color:var(--ink2); font-size:12.8px}
.sheet .beats li{padding-left:16px; position:relative}
.sheet .beats li::before{content:"▸"; position:absolute; left:2px; color:var(--cut)}
.sheet .cta{color:var(--ink2); font-size:12px; margin-top:4px}
.sheet .playhint{font-family:var(--mono); font-size:10.5px; color:var(--accent); margin-top:6px; display:block}
.empty-hint{color:var(--ink2); font-size:13px; border:1px dashed var(--line); border-radius:10px; padding:14px; text-align:center}

.composer{margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow)}
.try-label{display:block; font:700 13px var(--disp); text-transform:uppercase; letter-spacing:1.4px; margin-bottom:8px}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px}
.chips:empty{margin:0}
.chip{border:1px solid var(--accent); color:var(--accent); background:none; border-radius:16px; padding:4px 13px; font-size:13px; font-weight:600; transition:transform .12s var(--ease-out)}
.chip:active{transform:scale(.95)}
.inputrow{display:flex; gap:8px}
#msgInput{flex:1; border:1px solid var(--line); border-radius:16px; padding:7px 13px; font:14px var(--body); background:var(--ground); color:var(--ink); min-width:0}
.send{width:34px; height:34px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:16px; font-weight:700; flex:none}

.statusline{min-height:20px; color:var(--ink2); font-size:13px; margin:10px 2px 0}

/* ---------- phone / reel player ---------- */
.phoneCaption{margin:0 0 8px; text-align:center; font:600 12px var(--body); letter-spacing:1.6px; text-transform:uppercase; color:var(--ink2)}
.phone{background:#221F26; border-radius:26px; padding:10px; box-shadow:var(--shadow)}
.screen{position:relative; width:100%; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#141217}
.idlecard{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#8d8694; font-size:13px; padding:20px; line-height:1.6}
.slate{position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:18px 16px 74px; color:#fff}
.slate.v0{background:linear-gradient(160deg,#2A2430,#4A3040)}
.slate.v1{background:linear-gradient(160deg,#1F2A33,#2F4A44)}
.slate.v2{background:linear-gradient(160deg,#332A1F,#4A3A2A)}
.recdot{position:absolute; top:14px; right:14px; width:10px; height:10px; border-radius:50%; background:#E5544B; animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.cliptag{font:700 10px var(--mono); letter-spacing:2px; color:#ffffff99; border:1px solid #ffffff55; border-radius:4px; padding:1px 6px}
.cliplabel{font:600 15px var(--body); margin-top:6px; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.hookoverlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; background:rgba(10,8,12,.55); color:#fff; font:700 clamp(20px,7vw,26px)/1.25 var(--disp); text-transform:uppercase; letter-spacing:.5px}
.caption{position:absolute; left:12px; right:12px; bottom:34px; text-align:center; font:700 16px/1.3 var(--disp); text-transform:uppercase; color:#fff; text-shadow:0 2px 0 #000, 0 0 10px rgba(0,0,0,.55); animation:capPop .18s var(--ease-out)}
@keyframes capPop{from{transform:scale(.9); opacity:0}}
.ctacard{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; background:var(--accent); color:#fff; font:700 20px/1.35 var(--disp); text-transform:uppercase}
.progress{position:absolute; left:0; right:0; bottom:0; height:4px; background:#ffffff2e}
.progress span{display:block; height:100%; width:0; background:var(--accent)}
.progress span.run{transition:width linear}
.phonectl{display:flex; gap:8px; justify-content:center; margin-top:10px}
.demoNote{margin:8px 4px 0; text-align:center; color:var(--ink2); font-size:11.5px}

/* storyboard mode inside screen */
.storyboard{position:absolute; inset:0; overflow-y:auto; background:#141217; padding:12px; display:flex; flex-direction:column; gap:8px}
.frame{border:1px solid #3a3542; border-radius:8px; padding:9px 11px; color:#d9d4de; font-size:12px}
.frame b{display:block; font:700 12.5px var(--disp); text-transform:uppercase; letter-spacing:.4px; color:#fff}
.frame small{font-family:var(--mono); color:#8d8694}

/* flying chip */
.flychip{position:fixed; z-index:50; font:700 14px var(--mono); color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:2px 10px; pointer-events:none; transition:transform .5s var(--ease-io), opacity .5s; will-change:transform}

/* ---------- ROI ---------- */
.roi{background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 20px; margin-top:20px}
.roi h2{font:700 16px var(--disp); margin:0 0 12px; letter-spacing:.8px; text-transform:uppercase}
.roi-grid{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end}
.roi-grid label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink2); font-weight:600}
.roi-grid input{width:110px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:600 15px var(--mono); color:var(--ink); text-align:right; background:var(--ground)}
.roi-out{margin-left:auto; text-align:right}
.roi-out span{display:block; font:600 10.5px var(--body); letter-spacing:1.6px; text-transform:uppercase; color:var(--ink2)}
.roi-out b{font:700 32px/1.2 var(--disp); color:var(--accent); font-variant-numeric:tabular-nums}
.roi-out small{display:block; color:var(--ink2); font-size:12px}
.roi-src{margin:12px 0 0; color:var(--ink2); font-size:12.5px; max-width:72ch}
@media (max-width:700px){ .roi-out{margin-left:0; text-align:left} }

footer{margin-top:18px; color:var(--ink2); font-size:12.5px; text-align:center}
.linky{border:0; background:none; color:var(--accent); text-decoration:underline; padding:0; font-size:12.5px}

@keyframes arrive{from{opacity:0; transform:translateY(7px)}}

/* fast-forward + reduced motion */
body.fast *, body.fast{transition-duration:0s !important; animation:none !important}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0s !important; animation:none !important}
}