:root{
    --scv-coral:#e85454; --scv-peach:#f09080; --scv-cyan:#6bb5f0; --scv-blue:#4a9ee8;
    --scv-red:#e84444; --scv-orange:#f07a6a; --scv-teal:#00c2b8; --scv-purple:#8430ce;
    --scv-grad:linear-gradient(120deg,#e85454 0%,#f09080 34%,#6bb5f0 70%,#4a9ee8 100%);
    --g50:#f8f9fa; --g100:#f1f3f4; --g200:#e8eaed; --g300:#dadce0; --g400:#bdc1c6;
    --g500:#9aa0a6; --g600:#80868b; --g700:#5f6368; --g800:#3c4043; --g900:#202124;
  }
  html,body{margin:0;height:100%;}
  body{
    background:
      radial-gradient(1100px 700px at 12% -8%, #fdeceb 0%, transparent 55%),
      radial-gradient(1100px 800px at 108% 112%, #e7f1fd 0%, transparent 55%),
      #f4f6fb;
    font-family:'DM Sans',sans-serif; color:var(--g900);
    display:flex; align-items:center; justify-content:center; min-height:100vh; padding:0; box-sizing:border-box;
  }
  .scv-wrap{ width:100%; max-width:980px; }

  .scv-stage{
    position:relative; width:100%; aspect-ratio:16/12; overflow:hidden;
    border-radius:0; background:#fbfcfe;
    box-shadow:none;
    container-type:size; user-select:none;
    --pad:5.4cqw; --ctrlh:5.6cqw; --capband:11.4cqw; --bottomzone:17cqw;
  }
  .scv-stage *{ box-sizing:border-box; }

  /* ambient */
  .scv-amb{ position:absolute; inset:-12%; pointer-events:none; z-index:0; }
  .scv-blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.42; mix-blend-mode:multiply; }
  .scv-blob.b1{ width:46cqw; height:46cqw; left:-8cqw; top:-10cqw; background:radial-gradient(circle,#f7a99c,#e85454 70%); animation:scv-drift1 16s ease-in-out infinite; }
  .scv-blob.b2{ width:50cqw; height:50cqw; right:-12cqw; bottom:-14cqw; background:radial-gradient(circle,#9fcdf6,#4a9ee8 70%); animation:scv-drift2 19s ease-in-out infinite; }
  .scv-blob.b3{ width:30cqw; height:30cqw; right:24cqw; top:-6cqw; background:radial-gradient(circle,#bfe0fb,#6bb5f0 75%); opacity:.3; animation:scv-drift1 22s ease-in-out infinite reverse; }
  @keyframes scv-drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(5cqw,3cqw) scale(1.08);} }
  @keyframes scv-drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6cqw,-3cqw) scale(1.1);} }
  .scv-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .scv-tint{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity 1.1s ease;
    background:radial-gradient(120% 120% at 50% 0%, rgba(232,68,68,.10), transparent 60%); }
  .scv-stage.tense .scv-tint{ opacity:1; }
  .scv-sweep{ position:absolute; top:-10%; bottom:-10%; width:28cqw; left:-40cqw; z-index:7; pointer-events:none;
    background:var(--scv-grad); filter:blur(2px); transform:skewX(-12deg); opacity:0; }
  .scv-stage.sweep .scv-sweep{ animation:scv-bigSweep 1.05s cubic-bezier(.5,0,.2,1) forwards; }
  @keyframes scv-bigSweep{ 0%{left:-40cqw; opacity:0;} 12%{opacity:.95;} 88%{opacity:.95;} 100%{left:120cqw; opacity:0;} }

  /* scenes */
  .scv-scene{ position:absolute; top:0; left:0; right:0; bottom:var(--bottomzone); overflow:hidden; z-index:5;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease, visibility .6s; padding:var(--pad); display:flex; }
  .scv-scene.active{ opacity:1; visibility:visible; }
  .scv-stage.is-paused .scv-amb *, .scv-stage.is-paused .scv-scene.active *{ animation-play-state:paused !important; }

  /* app chrome */
  .scv-chrome{ position:absolute; top:0; left:0; right:0; z-index:6; height:5cqw; display:flex; align-items:center;
    justify-content:flex-end; padding:0 var(--pad); opacity:0; transform:translateY(-100%); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1);
    background:rgba(255,255,255,.72); backdrop-filter:blur(8px); border-bottom:1px solid var(--g200); }
  .scv-stage.chromed .scv-chrome{ opacity:1; transform:none; }
  .scv-chrome img{ width:5.4cqw; height:5.4cqw; object-fit:contain; }
  .scv-chrome .nm{ font-weight:700; font-size:2.5cqw; letter-spacing:-.02em; }
  .scv-chrome .tg{ font-size:1.55cqw; color:var(--scv-cyan); font-style:italic; margin-left:.4cqw; white-space:nowrap; }
  .scv-chrome .pill{ margin-left:auto; font-family:'DM Mono',monospace; font-size:1.5cqw; color:var(--scv-teal); background:#e2f7f5; padding:.7cqw 1.4cqw; border-radius:99px; white-space:nowrap; }

  /* shared bits */
  .scv-eyebrow{ font-family:'DM Mono',monospace; font-size:1.55cqw; letter-spacing:.28em; text-transform:uppercase; color:var(--scv-blue); }
  .scv-title{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.025em; line-height:.98; color:var(--g900); }
  .scv-grad-text{ background:var(--scv-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .scv-word{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em; }
  .scv-tagline{ font-style:italic; color:var(--scv-cyan); font-weight:500; }

  .scv-scene.active .u1{ animation:scv-rise .7s .05s both cubic-bezier(.2,.9,.25,1); }
  .scv-scene.active .u2{ animation:scv-rise .7s .18s both cubic-bezier(.2,.9,.25,1); }
  .scv-scene.active .u3{ animation:scv-rise .7s .32s both cubic-bezier(.2,.9,.25,1); }
  .scv-scene.active .u4{ animation:scv-rise .7s .46s both cubic-bezier(.2,.9,.25,1); }
  @keyframes scv-rise{ from{opacity:0; transform:translateY(2.4cqw);} to{opacity:1; transform:none;} }

  /* reusable email window */
  .scv-win{ background:#fff; border:1px solid var(--g200); border-radius:1.6cqw; box-shadow:0 14cqw 32cqw -18cqw rgba(30,40,80,.45);
    overflow:hidden; display:flex; flex-direction:column; }
  .scv-win-hd{ display:flex; align-items:center; gap:1cqw; padding:1.1cqw 1.4cqw; border-bottom:1px solid var(--g200); background:var(--g50); }
  .scv-win-hd .fold{ font-weight:700; font-size:1.8cqw; color:var(--g900); }
  .scv-win-hd .uc{ margin-left:auto; font-family:'DM Mono',monospace; font-size:1.45cqw; font-weight:500; color:#fff; background:var(--scv-red); padding:.4cqw 1.1cqw; border-radius:99px; }
  .scv-win-bd{ padding:.8cqw; display:flex; flex-direction:column; gap:.55cqw; overflow:hidden; flex:1; }
  .scv-wrow{ display:flex; align-items:center; gap:1cqw; background:#fff; border:1px solid var(--g200); border-radius:1cqw; padding:.75cqw 1.1cqw; flex:0 0 auto; }
  .scv-wrow .bar{ width:.5cqw; height:2.4cqw; border-radius:99px; background:var(--g300); flex:0 0 auto; transition:background .4s; }
  .scv-wrow .av{ width:2.4cqw; height:2.4cqw; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.15cqw; background:var(--g400); }
  .scv-wrow .frm{ width:12cqw; flex:0 0 auto; font-size:1.4cqw; font-weight:600; color:var(--g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scv-wrow.unread .frm{ font-weight:700; color:var(--g900); }
  .scv-wrow .sub{ flex:1; font-size:1.4cqw; color:var(--g700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scv-wrow.unread .sub{ color:var(--g900); }
  .scv-wrow .tm{ font-family:'DM Mono',monospace; font-size:1.2cqw; color:var(--g500); flex:0 0 auto; }
  .scv-wrow .udot{ width:.8cqw; height:.8cqw; border-radius:50%; background:var(--scv-blue); flex:0 0 auto; }
  @keyframes scv-floodin{ from{opacity:0; transform:translateY(-2.2cqw);} to{opacity:1; transform:none;} }
  .scv-wrow.flood-in{ animation:scv-floodin .42s both cubic-bezier(.2,.9,.3,1); }

  /* ═══ SCENE 1 — flood ═══ */
  #scv-s1{ }
  .s1-count{ position:absolute; left:var(--pad); top:50%; transform:translateY(-54%); width:34cqw; z-index:3; }
  .s1-count .big{ font-family:'Syne',sans-serif; font-weight:800; font-size:13cqw; color:var(--scv-red); line-height:.9; letter-spacing:-.03em; }
  .s1-count .lab{ font-size:2.1cqw; color:var(--g700); margin-top:.6cqw; max-width:30cqw; line-height:1.25; }
  .s1-win{ position:absolute; right:var(--pad); top:5cqw; bottom:2cqw; width:48cqw; z-index:2; }

  /* ═══ SCENE 2 — the cost ═══ */
  #scv-s2{ flex-direction:column; align-items:center; }
  .s2-eye{ position:absolute; top:5.5cqw; left:50%; transform:translateX(-50%); z-index:4; }
  .s2-stack{ position:absolute; left:0; right:0; top:11cqw; bottom:2cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqw; padding:0 var(--pad); }
  .s2-missed{ position:relative; width:62cqw; display:flex; align-items:center; gap:1.2cqw; background:#fff; border:1px solid var(--g200); border-radius:1.3cqw; padding:1.15cqw 1.4cqw;
    box-shadow:0 8cqw 20cqw -14cqw rgba(30,40,80,.35); opacity:0; transform:translateY(-1.6cqw); transition:all .55s cubic-bezier(.2,.9,.25,1); }
  .s2-missed.show{ opacity:1; transform:none; }
  .s2-missed.lost{ opacity:.4; filter:grayscale(.7) blur(.3px); transform:scale(.93) translateY(1.2cqw); }
  .s2-missed .av{ width:3cqw; height:3cqw; border-radius:50%; background:var(--scv-purple); color:#fff; font-weight:700; font-size:1.4cqw; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .s2-missed .frm{ font-size:1.5cqw; font-weight:700; color:var(--g900); }
  .s2-missed .sub{ font-size:1.45cqw; color:var(--g700); }
  .s2-missed .udot{ width:.9cqw; height:.9cqw; border-radius:50%; background:var(--scv-blue); margin-left:auto; flex:0 0 auto; }
  .s2-missed .mbadge{ position:absolute; right:1.3cqw; top:50%; transform:translateY(-50%); font-family:'DM Mono',monospace; font-size:1.3cqw; font-weight:500; letter-spacing:.05em;
    color:#fff; background:var(--scv-red); padding:.45cqw 1.1cqw; border-radius:99px; opacity:0; transition:opacity .4s ease; }
  .s2-missed.lost .mbadge{ opacity:1; }
  .s2-missed.lost .udot{ display:none; }

  .s2-timeline{ width:76cqw; }
  .s2-tl-row{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; }
  .s2-track{ position:absolute; left:2.5%; right:2.5%; top:1.2cqw; height:.5cqw; background:var(--g200); border-radius:99px; }
  .s2-prog{ position:absolute; left:2.5%; top:1.2cqw; height:.5cqw; width:0; background:var(--scv-blue); border-radius:99px; transition:width 1.2s ease; }
  .s2-timeline.fill .s2-prog{ width:48%; }
  .s2-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.7cqw; width:18%; }
  .s2-node{ width:2.4cqw; height:2.4cqw; border-radius:50%; background:#fff; border:.32cqw solid var(--g300); transition:all .4s ease; }
  .s2-timeline.fill .s2-step.done .s2-node{ background:var(--scv-blue); border-color:var(--scv-blue); }
  .s2-timeline.stall .s2-step.stall .s2-node{ background:var(--scv-red); border-color:var(--scv-red); animation:scv-pulseRed 1.3s ease-out infinite; }
  @keyframes scv-pulseRed{ 0%{box-shadow:0 0 0 0 rgba(232,68,68,.5);} 70%{box-shadow:0 0 0 1.6cqw rgba(232,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(232,68,68,0);} }
  .s2-lab{ font-size:1.3cqw; color:var(--g600); text-align:center; }
  .s2-timeline.fill .s2-step.done .s2-lab{ color:var(--g800); font-weight:600; }
  .s2-timeline.stall .s2-step.stall .s2-lab{ color:var(--scv-red); font-weight:700; }
  .s2-stag{ position:absolute; top:-2.6cqw; left:50%; transform:translateX(-50%) scale(.7); font-family:'DM Mono',monospace; font-size:1.15cqw; letter-spacing:.06em;
    color:#fff; background:var(--scv-red); padding:.3cqw .9cqw; border-radius:99px; white-space:nowrap; opacity:0; transition:opacity .4s ease, transform .4s cubic-bezier(.18,1.3,.3,1); }
  .s2-timeline.stall .s2-step.stall .s2-stag{ opacity:1; transform:translateX(-50%) scale(1); }

  .s2-bubs{ width:76cqw; display:flex; flex-direction:column; align-items:flex-end; gap:.8cqw; }
  .s2-bub{ max-width:58%; background:var(--g100); border-radius:1.4cqw 1.4cqw .3cqw 1.4cqw; padding:1cqw 1.3cqw; font-size:1.55cqw; color:var(--g800); line-height:1.3;
    opacity:0; transform:translateY(1cqw) scale(.96); transition:opacity .4s ease, transform .45s cubic-bezier(.18,1.2,.3,1); }
  .s2-bub.show{ opacity:1; transform:none; }
  .s2-bub .who{ font-size:1.15cqw; color:var(--g500); margin-bottom:.25cqw; font-weight:600; }

  /* ═══ SCENE 3 — introducing ═══ */
  #scv-s3{ }
  .s3-intro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8cqw; z-index:4;
    transition:opacity .6s ease, transform .6s ease; }
  .s3-intro.gone{ opacity:0; transform:translateY(-3cqw) scale(.95); pointer-events:none; }
  .s3-logo{ position:relative; width:15cqw; height:15cqw; display:flex; align-items:center; justify-content:center; }
  .s3-logo .ring{ position:absolute; inset:-10%; border-radius:50%; background:#fff; filter:blur(8px); opacity:.95; }
  .s3-logo img{ position:relative; width:100%; height:100%; object-fit:contain; }
  @keyframes scv-breathe{ 0%,100%{transform:scale(1); opacity:.42;} 50%{transform:scale(1.06); opacity:.62;} }
  .scv-scene.active .s3-intro:not(.gone) .s3-logo{ animation:scv-pop .9s both cubic-bezier(.18,1.2,.3,1); }
  @keyframes scv-pop{ from{opacity:0; transform:scale(.6) rotate(-8deg);} to{opacity:1; transform:none;} }
  .s3-intro .word{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em; font-size:7cqw; }
  .s3-intro .tag{ font-size:2.6cqw; }
  .s3-dash{ position:absolute; left:var(--pad); right:var(--pad); top:7cqw; bottom:2cqw; z-index:2; display:flex; flex-direction:column; gap:.55cqw;
    opacity:0; transform:translateY(2.2cqw); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.25,1); }
  .s3-dash.show{ opacity:1; transform:none; }
  .s3-grp{ font-family:'DM Mono',monospace; font-size:1.25cqw; letter-spacing:.16em; text-transform:uppercase; color:var(--g500); padding:.3cqw 0 0; display:flex; align-items:center; gap:.6cqw; }
  .s3-grp svg{ width:1.5cqw; height:1.5cqw; }
  .s3-dash .scv-wrow{ opacity:0; transform:translateX(2cqw); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
  .s3-dash.show .scv-wrow{ opacity:1; transform:none; }
  /* group headers also fade+slide in (so they participate in the cascade) */
  .s3-dash .s3-grp{ opacity:0; transform:translateX(2cqw); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
  .s3-dash.show .s3-grp{ opacity:1; transform:none; }
  /* staggered cascade — 10 children, ~.27s gap; last item visible ~+3.0s after show, well inside scene 3's window */
  .s3-dash.show > *:nth-child(1) { transition-delay:0.05s; }
  .s3-dash.show > *:nth-child(2) { transition-delay:0.32s; }
  .s3-dash.show > *:nth-child(3) { transition-delay:0.59s; }
  .s3-dash.show > *:nth-child(4) { transition-delay:0.86s; }
  .s3-dash.show > *:nth-child(5) { transition-delay:1.13s; }
  .s3-dash.show > *:nth-child(6) { transition-delay:1.40s; }
  .s3-dash.show > *:nth-child(7) { transition-delay:1.67s; }
  .s3-dash.show > *:nth-child(8) { transition-delay:1.94s; }
  .s3-dash.show > *:nth-child(9) { transition-delay:2.21s; }
  .s3-dash.show > *:nth-child(10){ transition-delay:2.48s; }
  /* continuous notification-dot pulse so the priority section stays alive after reveal */
  @keyframes s3-udot-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(74,158,232,.55); } 50%{ box-shadow:0 0 0 .6cqw rgba(74,158,232,0); } }
  .s3-dash.show .scv-wrow.unread .udot{ animation:s3-udot-pulse 2.1s ease-out infinite; }

  /* ═══ SCENE 4 — features ═══ */
  #scv-s4{ }
  .s4-head{ position:absolute; top:7cqw; left:var(--pad); z-index:3; }
  .s4-head .scv-title{ font-size:4cqw; }
  .s4-list{ position:absolute; left:var(--pad); right:var(--pad); top:17cqw; bottom:2cqw; z-index:2; display:flex; flex-direction:column; gap:.7cqw; }
  .s4-row{ display:flex; align-items:center; gap:1.1cqw; background:#fff; border:1px solid var(--g200); border-radius:1.1cqw; padding:.9cqw 1.3cqw;
    box-shadow:0 4cqw 12cqw -10cqw rgba(30,40,80,.25); opacity:0; transition:transform .7s cubic-bezier(.2,.9,.25,1), opacity .5s ease, box-shadow .4s, border-color .4s; }
  .s4-list.show .s4-row{ opacity:1; transform:translateX(var(--ofx,0)) rotate(var(--ofr,0)); }
  .s4-list.sorted .s4-row{ transform:none; }
  .s4-row .bar{ width:.55cqw; height:2.8cqw; border-radius:99px; background:var(--g300); flex:0 0 auto; transition:background .45s ease; }
  .s4-row .av{ width:2.7cqw; height:2.7cqw; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.25cqw; background:var(--g400); transition:background .45s; }
  .s4-row .frm{ width:13cqw; flex:0 0 auto; font-size:1.5cqw; font-weight:600; color:var(--g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s4-row .sub{ flex:1; font-size:1.5cqw; color:var(--g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s4-chip{ font-size:1.25cqw; font-weight:600; padding:.35cqw 1cqw; border-radius:99px; flex:0 0 auto; opacity:0; transform:scale(.7);
    transition:opacity .4s ease, transform .4s cubic-bezier(.18,1.3,.3,1); white-space:nowrap; }
  .s4-list.labeled .s4-chip{ opacity:1; transform:none; }
  /* per-row lit state — replaces global .labeled trigger, lets each row light up independently in narration order */
  .s4-row.lit .s4-chip{ opacity:1; transform:none; }
  .s4-row.pchip .s4-chip{ opacity:.55; transform:scale(.94); }
  .s4-row.lit{ animation:s4-pop .55s ease-out; }
  @keyframes s4-pop{ 0%{transform:none} 35%{transform:scale(1.012)} 100%{transform:none} }
  .s4-row .tm{ font-family:'DM Mono',monospace; font-size:1.25cqw; color:var(--g500); flex:0 0 auto; width:6cqw; text-align:right; }
  /* label colours */
  .lbl-doc  .s4-chip{ color:#c4543f; background:#fdeee9; }   .s4-list.labeled .lbl-doc  .bar, .s4-list.labeled .lbl-doc  .av,  .s4-row.lit.lbl-doc  .bar, .s4-row.lit.lbl-doc  .av{ background:var(--scv-orange); }
  .lbl-cus  .s4-chip{ color:var(--scv-red); background:#fdecec; } .s4-list.labeled .lbl-cus .bar, .s4-list.labeled .lbl-cus .av, .s4-row.lit.lbl-cus .bar, .s4-row.lit.lbl-cus .av{ background:var(--scv-red); }
  .lbl-del  .s4-chip{ color:#069b93; background:#e2f7f5; }   .s4-list.labeled .lbl-del  .bar, .s4-list.labeled .lbl-del  .av,  .s4-row.lit.lbl-del  .bar, .s4-row.lit.lbl-del  .av{ background:var(--scv-teal); }
  .lbl-inv  .s4-chip{ color:var(--scv-purple); background:#f1e6fb; } .s4-list.labeled .lbl-inv .bar, .s4-list.labeled .lbl-inv .av, .s4-row.lit.lbl-inv .bar, .s4-row.lit.lbl-inv .av{ background:var(--scv-purple); }
  .lbl-rate .s4-chip{ color:var(--scv-blue); background:#e9f3fd; } .s4-list.labeled .lbl-rate .bar, .s4-list.labeled .lbl-rate .av, .s4-row.lit.lbl-rate .bar, .s4-row.lit.lbl-rate .av{ background:var(--scv-blue); }
  .s4-row.remind{ border-color:var(--scv-blue); box-shadow:0 0 0 .28cqw rgba(74,158,232,.45), 0 6cqw 16cqw -10cqw rgba(74,158,232,.45); }
  /* Smart Sort sweep — page-loader inspired light bar travelling down the list */
  .s4-list{ overflow:hidden; }
  .s4-list::after{ content:""; position:absolute; left:-2cqw; right:-2cqw; top:-3cqw; height:3.5cqw; background:linear-gradient(90deg, transparent, rgba(74,158,232,.55) 50%, transparent); opacity:0; pointer-events:none; filter:blur(.7cqw); z-index:9; }
  .s4-list.sweep::after{ animation:s4-sweep 1.35s cubic-bezier(.4,.0,.2,1) forwards; }
  @keyframes s4-sweep{ 0%{top:-3cqw;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:100%;opacity:0} }
  .s4-toast{ position:absolute; right:var(--pad); bottom:6cqw; z-index:5; display:flex; align-items:center; gap:1cqw; background:#fff; border:1px solid var(--scv-blue);
    border-radius:1.2cqw; padding:1cqw 1.3cqw; box-shadow:0 8cqw 20cqw -12cqw rgba(74,158,232,.55); opacity:0; transform:translateY(1.4cqw) scale(.96);
    transition:opacity .45s ease, transform .5s cubic-bezier(.18,1.2,.3,1); }
  .s4-toast.show{ opacity:1; transform:none; animation:s4-toast-float 3.2s ease-in-out infinite .6s; }
  @keyframes s4-toast-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.45cqw)} }
  .s4-toast .rc{ width:3cqw; height:3cqw; border-radius:.9cqw; background:var(--scv-blue); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .s4-toast .rc svg{ width:1.9cqw; height:1.9cqw; color:#fff; }
  .s4-toast .rt{ font-size:1.45cqw; color:var(--g900); font-weight:600; }
  .s4-toast .rt small{ display:block; font-weight:400; color:var(--g600); font-size:1.25cqw; }

  /* ═══ SCENE 5 — team ═══ */
  #scv-s5{ }
  .s5-head{ position:absolute; top:7cqw; left:var(--pad); z-index:3; }
  .s5-head .scv-title{ font-size:4cqw; }
  .s5-cols{ position:absolute; left:var(--pad); right:var(--pad); top:17cqw; bottom:2cqw; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:1.8cqw; }
  .s5-email{ background:#fff; border:1px solid var(--g200); border-radius:1.5cqw; padding:1.6cqw; box-shadow:0 10cqw 24cqw -16cqw rgba(30,40,80,.4);
    display:flex; flex-direction:column; gap:1.1cqw; opacity:0; transform:translateY(2cqw); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.9,.25,1); }
  .s5-email.show{ opacity:1; transform:none; }
  .s5-email .erow{ display:flex; align-items:center; gap:1cqw; }
  .s5-email .av{ width:3.2cqw; height:3.2cqw; border-radius:50%; background:var(--scv-orange); color:#fff; font-weight:700; font-size:1.4cqw; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .s5-email .frm{ font-size:1.6cqw; font-weight:700; color:var(--g900); }
  .s5-email .tm{ margin-left:auto; font-family:'DM Mono',monospace; font-size:1.25cqw; color:var(--g500); }
  .s5-email .subj{ font-size:1.8cqw; font-weight:700; color:var(--g900); letter-spacing:-.01em; }
  .s5-email .body{ font-size:1.45cqw; color:var(--g600); line-height:1.4; }
  .s5-assignee{ display:inline-flex; align-items:center; gap:.8cqw; align-self:flex-start; font-size:1.45cqw; font-weight:600; color:#c4543f; background:#fdeee9;
    padding:.7cqw 1.2cqw; border-radius:99px; opacity:0; transform:scale(.7); transition:opacity .4s ease, transform .45s cubic-bezier(.18,1.3,.3,1); }
  .s5-assignee.show{ opacity:1; transform:none; }
  .s5-assignee .av{ width:2.2cqw; height:2.2cqw; border-radius:50%; background:var(--scv-orange); color:#fff; font-size:1.15cqw; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .s5-collab{ background:var(--g50); border:1px solid var(--g200); border-radius:1.5cqw; padding:1.4cqw; display:flex; flex-direction:column; gap:1cqw; }
  .s5-collab .ch{ display:flex; align-items:center; gap:.7cqw; font-family:'DM Mono',monospace; font-size:1.3cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--g600); }
  .s5-collab .ch svg{ width:1.7cqw; height:1.7cqw; color:var(--scv-teal); }
  .s5-msg{ display:flex; flex-direction:column; gap:.2cqw; opacity:0; transform:translateY(.9cqw); transition:opacity .4s ease, transform .45s cubic-bezier(.18,1.2,.3,1); }
  .s5-msg.show{ opacity:1; transform:none; }
  .s5-msg .who{ font-size:1.2cqw; font-weight:700; color:var(--g700); }
  .s5-msg .bub{ font-size:1.45cqw; color:var(--g800); background:#fff; border:1px solid var(--g200); border-radius:.3cqw 1.2cqw 1.2cqw 1.2cqw; padding:.85cqw 1.1cqw; line-height:1.35; }
  .s5-msg.me .bub{ background:#e9f3fd; border-color:#d2e7fb; color:var(--g900); border-radius:1.2cqw 1.2cqw .3cqw 1.2cqw; }
  .s5-msg.me{ align-items:flex-end; }
  .s5-msg.me .who{ color:var(--scv-blue); }
  .s5-msg .bub b{ color:var(--scv-blue); }

  /* ═══ SCENE 6 — close ═══ */
  #scv-s6{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.4cqw; }
  .s6-clear{ display:inline-flex; align-items:center; gap:.8cqw; font-size:1.7cqw; font-weight:600; color:#069b93; background:#e2f7f5; padding:.7cqw 1.4cqw; border-radius:99px; }
  .s6-clear svg{ width:1.9cqw; height:1.9cqw; }
  .s6-logo{ position:relative; width:12cqw; height:12cqw; display:flex; align-items:center; justify-content:center; margin-top:.4cqw; }
  .s6-logo .ring{ position:absolute; inset:-10%; border-radius:50%; background:#fff; filter:blur(8px); opacity:.95; }
  .s6-logo img{ position:relative; width:100%; height:100%; object-fit:contain; }
  #scv-s6 .word{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em; font-size:6.6cqw; }
  #scv-s6 .tag{ font-size:2.6cqw; }
  .scv-cta{ display:inline-flex; align-items:center; gap:1cqw; margin-top:.6cqw; font-family:'DM Sans',sans-serif; font-weight:700; font-size:2.2cqw;
    color:#fff; background:var(--scv-grad); border:none; border-radius:99px; padding:1.3cqw 2.7cqw; cursor:pointer; box-shadow:0 10cqw 26cqw -12cqw rgba(232,84,84,.6); position:relative; }
  .scv-cta::after{ content:''; position:absolute; inset:0; border-radius:99px; animation:scv-pulse 2.2s ease-out infinite; }
  @keyframes scv-pulse{ 0%{box-shadow:0 0 0 0 rgba(74,158,232,.45);} 70%{box-shadow:0 0 0 3cqw rgba(74,158,232,0);} 100%{box-shadow:0 0 0 0 rgba(74,158,232,0);} }
  .scv-cta svg{ width:2.1cqw; height:2.1cqw; }
  #scv-s6 .foot{ font-size:1.7cqw; color:var(--g600); margin-top:.3cqw; }

  /* caption */
  .scv-caption{ position:absolute; left:50%; bottom:calc(var(--ctrlh) + 1.2cqw); z-index:9; transform:translate(-50%,1cqw); max-width:84cqw; text-align:center;
    font-size:1.95cqw; font-weight:500; color:var(--g900); line-height:1.28;
    background:rgba(255,255,255,.66); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.7);
    padding:1cqw 1.8cqw; border-radius:1.4cqw; box-shadow:0 8cqw 22cqw -14cqw rgba(30,40,80,.35); opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
  .scv-caption.show{ opacity:1; transform:translate(-50%,0); }

  /* controls */
  .scv-ctrl{ position:absolute; left:0; right:0; bottom:0; z-index:11; height:5.6cqw; display:flex; align-items:center; gap:1.6cqw; padding:0 2.4cqw;
    background:linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.55) 70%, transparent); backdrop-filter:blur(4px); }
  .scv-cbtn{ width:3.6cqw; height:3.6cqw; border:none; background:transparent; border-radius:50%; cursor:pointer; color:var(--g800); display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, color .15s; }
  .scv-cbtn:hover{ background:rgba(0,0,0,.06); color:var(--g900); }
  .scv-cbtn svg{ width:2.1cqw; height:2.1cqw; }
  .scv-cbtn.play svg{ width:2.5cqw; height:2.5cqw; }
  .scv-time{ font-family:'DM Mono',monospace; font-size:1.45cqw; color:var(--g600); flex:0 0 auto; width:9cqw; }
  .scv-track{ position:relative; flex:1; height:.65cqw; background:var(--g200); border-radius:99px; }
  .scv-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--scv-grad); border-radius:99px; }
  .scv-fill::after{ content:''; position:absolute; right:-.6cqw; top:50%; width:1.5cqw; height:1.5cqw; transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 .3cqw var(--scv-blue), 0 3cqw 6cqw -2cqw rgba(0,0,0,.4); }
  .scv-tick{ position:absolute; top:50%; width:.3cqw; height:.3cqw; transform:translate(-50%,-50%); border-radius:50%; background:#fff; opacity:.8; }

  /* poster */
  .scv-poster{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqw;
    background:radial-gradient(900px 600px at 16% 0%, rgba(248,140,128,.18), transparent 55%), radial-gradient(900px 700px at 100% 110%, rgba(107,181,240,.2), transparent 55%), rgba(251,252,254,.7);
    backdrop-filter:blur(3px); transition:opacity .5s ease, visibility .5s; }
  .scv-poster.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .scv-poster .pwrap{ display:flex; flex-direction:column; align-items:center; gap:1.2cqw; text-align:center; }
  .scv-poster img{ width:11cqw; height:11cqw; object-fit:contain; filter:drop-shadow(0 8cqw 18cqw rgba(30,40,80,.25)); }
  .scv-poster .pword{ font-family:'Syne',sans-serif; font-weight:800; font-size:5.4cqw; letter-spacing:-.03em; }
  .scv-poster .ptag{ font-size:2.1cqw; color:var(--g600); max-width:56cqw; line-height:1.35; }
  .scv-poster .ptag i{ color:var(--scv-cyan); font-style:italic; font-weight:500; }
  .scv-playbig{ margin-top:1cqw; width:9cqw; height:9cqw; border-radius:50%; border:none; cursor:pointer; background:var(--scv-grad); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14cqw 32cqw -12cqw rgba(232,84,84,.6); transition:transform .2s; position:relative; }
  .scv-playbig:hover{ transform:scale(1.06); }
  .scv-playbig svg{ width:3.8cqw; height:3.8cqw; margin-left:.5cqw; }
  .scv-playbig::after{ content:''; position:absolute; inset:0; border-radius:50%; animation:scv-pulse 2.4s ease-out infinite; }
  .scv-poster .plen{ font-family:'DM Mono',monospace; font-size:1.5cqw; letter-spacing:.18em; text-transform:uppercase; color:var(--g500); margin-top:.4cqw; }

  .scv-replay-c{ position:absolute; inset:0; z-index:15; display:none; align-items:center; justify-content:center; }
  .scv-stage.is-ended .scv-replay-c{ display:flex; }

  /* ═══ FULLSCREEN MODE ═══ when triggered by play(), explainer fills the viewport with letterboxing.
     Use 100dvh (dynamic viewport height) so mobile URL bars don't eat the layout; falls back to 100vh. */
  body.fs-active{ padding:0 !important; background:#000 !important; }
  body.fs-active .scv-wrap{
    max-width:none !important;
    width:100vw !important;
    height:100vh !important;       /* fallback for older browsers */
    height:100dvh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  body.fs-active .scv-stage{
    width: min(100vw, calc(100vh * 4 / 3)) !important;
    width: min(100vw, calc(100dvh * 4 / 3)) !important;
    max-width: min(100vw, calc(100dvh * 4 / 3)) !important;
    margin: 0 !important;
    aspect-ratio: 16/12 !important;
  }
  .scv-replay-btn{ width:7cqw; height:7cqw; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.85); color:var(--g900); display:flex; align-items:center; justify-content:center; box-shadow:0 12cqw 28cqw -12cqw rgba(30,40,80,.5); transition:transform .2s; }
  .scv-replay-btn:hover{ transform:scale(1.08); }
  .scv-replay-btn svg{ width:3cqw; height:3cqw; }



  @media (prefers-reduced-motion: reduce){
    .scv-blob,.scv-cta::after,.scv-playbig::after,.s2-timeline.stall .s2-step.stall .s2-node{ animation:none !important; }
  }