:root{
    /* ── Brand (unchanged hues — these are referenced inline in markup/JS) ── */
    --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%);
    --scv-grad-warm:linear-gradient(120deg,#e85454,#f0846f);
    --scv-grad-cool:linear-gradient(120deg,#6bb5f0,#4a9ee8);

    /* ── Cool, navy-tinted neutral ramp (premium ink vs. warm google-grey) ── */
    --g50:#f7f9fc; --g100:#eef2f8; --g200:#e3e9f3; --g300:#d3dbe9; --g400:#abb5c9;
    --g500:#838da3; --g600:#5f6a82; --g700:#454f66; --g800:#2b3450; --g900:#151d33;

    /* ── Surfaces, strokes, light ── */
    --surface:#ffffff;
    --stroke:#e4eaf3;
    --stroke-soft:#eef2f9;
    --shadow-rgb:24 34 66;                 /* navy shadow base */
    --glow-coral:rgba(232,84,84,.55);
    --glow-blue:rgba(74,158,232,.55);
    --glow-teal:rgba(0,194,184,.5);
  }
  html,body{margin:0;height:100%;}
  body{
    background:
      radial-gradient(1200px 760px at 8% -10%, #fde7e4 0%, transparent 52%),
      radial-gradient(1200px 860px at 110% 114%, #dfecfd 0%, transparent 52%),
      radial-gradient(900px 600px at 50% 120%, #eaf0fb 0%, transparent 60%),
      #eef2f9;
    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;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .scv-wrap{ width:100%; max-width:980px; }

  .scv-stage{
    position:relative; width:100%; aspect-ratio:16/12; overflow:hidden;
    border-radius:0;
    /* dimensional canvas: soft top-light settling into cool shade */
    background:
      radial-gradient(150% 90% at 50% -14%, #ffffff 0%, #f7f9fd 40%, #eef2f9 100%);
    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; }
  /* edge vignette — adds focus + dimension without darkening the friendly palette */
  .scv-stage::after{
    content:""; position:absolute; inset:0; z-index:8; pointer-events:none; mix-blend-mode:multiply;
    background:radial-gradient(135% 115% at 50% 40%, transparent 55%, rgba(22,29,51,.045) 80%, rgba(22,29,51,.13) 100%);
  }

  /* ambient — soft studio lighting */
  .scv-amb{ position:absolute; inset:-12%; pointer-events:none; z-index:0; }
  .scv-blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; mix-blend-mode:multiply; }
  .scv-blob.b1{ width:48cqw; height:48cqw; left:-8cqw; top:-12cqw; background:radial-gradient(circle,#f7a99c,#e85454 70%); animation:scv-drift1 16s ease-in-out infinite; }
  .scv-blob.b2{ width:52cqw; height:52cqw; right:-13cqw; bottom:-15cqw; background:radial-gradient(circle,#9fcdf6,#4a9ee8 70%); animation:scv-drift2 19s ease-in-out infinite; }
  .scv-blob.b3{ width:32cqw; height:32cqw; right:22cqw; top:-7cqw; background:radial-gradient(circle,#bfe0fb,#6bb5f0 75%); opacity:.34; 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:.045; 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,.12), transparent 60%); }
  .scv-stage.tense .scv-tint{ opacity:1; }
  .scv-sweep{ position:absolute; top:-10%; bottom:-10%; width:30cqw; left:-44cqw; z-index:7; pointer-events:none;
    background:var(--scv-grad); filter:blur(2px) saturate(1.15); transform:skewX(-12deg); opacity:0;
    box-shadow:0 0 14cqw 4cqw rgba(120,150,230,.35); }
  .scv-stage.sweep .scv-sweep{ animation:scv-bigSweep 1.05s cubic-bezier(.5,0,.2,1) forwards; }
  @keyframes scv-bigSweep{ 0%{left:-44cqw; opacity:0;} 12%{opacity:.95;} 88%{opacity:.95;} 100%{left:124cqw; 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,.7); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3); border-bottom:1px solid rgba(228,234,243,.9); }
  .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:#069b93; background:linear-gradient(180deg,#e9faf8,#def6f3);
    padding:.7cqw 1.4cqw; border-radius:99px; white-space:nowrap; border:1px solid rgba(0,194,184,.22); box-shadow:0 .3cqw .8cqw -.3cqw rgba(0,150,140,.3), inset 0 .12cqw 0 rgba(255,255,255,.8); }

  /* shared bits */
  .scv-eyebrow{ font-family:'DM Mono',monospace; font-size:1.55cqw; letter-spacing:.3em; text-transform:uppercase; color:var(--scv-blue); }
  .scv-title{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.028em; line-height:.98; color:var(--g900); }
  .scv-grad-text{ background:var(--scv-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 .3cqw 1.4cqw rgba(120,140,220,.18)); }
  .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; }
  /* typewriter caret (scene 4 title) */
  .car{ display:inline-block; width:.1em; height:.92em; margin-left:.06em; transform:translateY(.1em); border-radius:1px; background:var(--scv-blue); box-shadow:0 0 1.2cqw rgba(74,158,232,.6); }

  .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:var(--surface); border:1px solid var(--stroke); border-radius:1.7cqw;
    box-shadow:0 1.4cqw 2cqw -1.4cqw rgba(var(--shadow-rgb),.18), 0 14cqw 34cqw -16cqw rgba(var(--shadow-rgb),.5), inset 0 .14cqw 0 rgba(255,255,255,.9);
    overflow:hidden; display:flex; flex-direction:column; }
  .scv-win-hd{ display:flex; align-items:center; gap:1cqw; padding:1.2cqw 1.5cqw; border-bottom:1px solid var(--stroke); background:linear-gradient(180deg,#fbfcff,#f4f7fc); }
  .scv-win-hd .fold{ font-weight:700; font-size:1.85cqw; color:var(--g900); letter-spacing:-.01em; }
  .scv-win-hd .uc{ margin-left:auto; font-family:'DM Mono',monospace; font-size:1.45cqw; font-weight:500; color:#fff; background:linear-gradient(180deg,#ee5a5a,#e23d3d);
    padding:.45cqw 1.2cqw; border-radius:99px; box-shadow:0 .5cqw 1.2cqw -.3cqw var(--glow-coral), inset 0 .14cqw 0 rgba(255,255,255,.35); }
  .scv-win-bd{ padding:.85cqw; display:flex; flex-direction:column; gap:.6cqw; overflow:hidden; flex:1; }
  .scv-wrow{ display:flex; align-items:center; gap:1cqw; background:var(--surface); border:1px solid var(--stroke); border-radius:1.1cqw; padding:.78cqw 1.15cqw; flex:0 0 auto;
    box-shadow:0 .35cqw 1cqw -.7cqw rgba(var(--shadow-rgb),.4); }
  .scv-wrow .bar{ width:.5cqw; height:2.6cqw; border-radius:99px; background:var(--g300); flex:0 0 auto; transition:background .4s; }
  .scv-wrow .av{ width:2.5cqw; height:2.5cqw; 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);
    position:relative; overflow:hidden; box-shadow:inset 0 .18cqw .25cqw rgba(255,255,255,.5), inset 0 -.22cqw .35cqw rgba(0,0,0,.16), 0 .4cqw .7cqw -.25cqw rgba(20,30,60,.4); }
  .scv-wrow .av::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(157deg, rgba(255,255,255,.32), rgba(255,255,255,0) 52%); pointer-events:none; }
  .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; font-variant-numeric:tabular-nums; }
  .scv-wrow .udot{ width:.82cqw; height:.82cqw; border-radius:50%; background:var(--scv-blue); flex:0 0 auto;
    box-shadow:0 0 0 .12cqw rgba(74,158,232,.16), 0 0 .9cqw rgba(74,158,232,.75); }
  @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 .eyeb{ }
  .s1-count .big{ font-family:'Syne',sans-serif; font-weight:800; font-size:13.5cqw; line-height:.86; letter-spacing:-.04em;
    color:var(--scv-red); font-variant-numeric:tabular-nums; text-shadow:0 .5cqw 3.2cqw rgba(232,68,68,.4), 0 .2cqw .6cqw rgba(232,68,68,.25); }
  .s1-count .lab{ font-size:2.1cqw; color:var(--g700); margin-top:.7cqw; max-width:30cqw; line-height:1.25; }
  .s1-win{ position:absolute; right:var(--pad); top:5cqw; bottom:2cqw; width:48cqw; z-index:2; }
  /* the chaos reads as living colour — each unread carries a brand-gradient accent + glowing dot */
  #scv-s1 .scv-wrow .bar{ background:var(--scv-grad); opacity:.9; }

  /* ═══ 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:var(--surface); border:1px solid var(--stroke); border-radius:1.4cqw; padding:1.2cqw 1.5cqw;
    box-shadow:0 1cqw 1.6cqw -1.2cqw rgba(var(--shadow-rgb),.3), 0 10cqw 24cqw -16cqw rgba(var(--shadow-rgb),.45), inset 0 .14cqw 0 rgba(255,255,255,.9);
    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:.42; filter:grayscale(.72) blur(.3px); transform:scale(.93) translateY(1.2cqw); }
  .s2-missed .av{ width:3cqw; height:3cqw; border-radius:50%; background:linear-gradient(150deg,#9a52d8,#7a28c2); color:#fff; font-weight:700; font-size:1.4cqw; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    box-shadow:inset 0 .2cqw .3cqw rgba(255,255,255,.45), 0 .4cqw .8cqw -.3cqw rgba(80,30,140,.5); }
  .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; box-shadow:0 0 .9cqw rgba(74,158,232,.7); }
  .s2-missed .mbadge{ position:absolute; right:1.4cqw; top:50%; transform:translateY(-50%); font-family:'DM Mono',monospace; font-size:1.3cqw; font-weight:500; letter-spacing:.06em;
    color:#fff; background:linear-gradient(180deg,#ee5a5a,#e23d3d); padding:.45cqw 1.15cqw; border-radius:99px; opacity:0; transition:opacity .4s ease;
    box-shadow:0 .5cqw 1.4cqw -.3cqw var(--glow-coral), inset 0 .14cqw 0 rgba(255,255,255,.3); }
  .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:.55cqw; background:var(--g200); border-radius:99px; }
  .s2-prog{ position:absolute; left:2.5%; top:1.2cqw; height:.55cqw; width:0; background:linear-gradient(90deg,#5aa6ea,#4a9ee8); border-radius:99px; transition:width 1.2s ease; box-shadow:0 0 1cqw rgba(74,158,232,.5); }
  .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.5cqw; height:2.5cqw; border-radius:50%; background:#fff; border:.34cqw solid var(--g300); transition:all .4s ease; box-shadow:0 .3cqw .8cqw -.4cqw rgba(var(--shadow-rgb),.5); }
  .s2-timeline.fill .s2-step.done .s2-node{ background:var(--scv-blue); border-color:var(--scv-blue); box-shadow:0 0 1.4cqw rgba(74,158,232,.6); }
  .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,.55), 0 0 1.2cqw rgba(232,68,68,.6);} 70%{box-shadow:0 0 0 1.8cqw rgba(232,68,68,0), 0 0 1.2cqw rgba(232,68,68,.6);} 100%{box-shadow:0 0 0 0 rgba(232,68,68,0), 0 0 1.2cqw rgba(232,68,68,.6);} }
  .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.7cqw; left:50%; transform:translateX(-50%) scale(.7); font-family:'DM Mono',monospace; font-size:1.15cqw; letter-spacing:.06em;
    color:#fff; background:linear-gradient(180deg,#ee5a5a,#e23d3d); padding:.32cqw .95cqw; border-radius:99px; white-space:nowrap; opacity:0; transition:opacity .4s ease, transform .4s cubic-bezier(.18,1.3,.3,1);
    box-shadow:0 .5cqw 1.3cqw -.3cqw var(--glow-coral); }
  .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:.85cqw; }
  .s2-bub{ max-width:58%; background:linear-gradient(180deg,#fff,#fbf4f3); border:1px solid #f3e0dc; border-radius:1.5cqw 1.5cqw .35cqw 1.5cqw; padding:1cqw 1.35cqw; font-size:1.55cqw; color:var(--g800); line-height:1.3;
    box-shadow:0 .8cqw 1.8cqw -1.2cqw rgba(180,70,60,.35); 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(--scv-orange); margin-bottom:.25cqw; font-weight:700; }

  /* ═══ 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:-32%; border-radius:50%; background:radial-gradient(circle, rgba(240,138,128,.5) 0%, rgba(120,160,235,.32) 45%, transparent 72%); filter:blur(7px); opacity:1; }
  .s3-logo img{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1cqw 2.2cqw rgba(40,60,120,.28)); }
  @keyframes scv-breathe{ 0%,100%{transform:scale(1); opacity:.85;} 50%{transform:scale(1.07); opacity:1;} }
  .scv-scene.active .s3-intro:not(.gone) .s3-logo .ring{ animation:scv-breathe 3.4s ease-in-out infinite; }
  .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:.6cqw;
    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:.18em; 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; }
  .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; }
  .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; }
  @keyframes s3-udot-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(74,158,232,.55), 0 0 .9cqw rgba(74,158,232,.7); } 50%{ box-shadow:0 0 0 .7cqw rgba(74,158,232,0), 0 0 .9cqw rgba(74,158,232,.7); } }
  .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:.75cqw; }
  .s4-row{ display:flex; align-items:center; gap:1.1cqw; background:var(--surface); border:1px solid var(--stroke); border-radius:1.15cqw; padding:.95cqw 1.35cqw;
    box-shadow:0 .5cqw 1.4cqw -.9cqw rgba(var(--shadow-rgb),.4), inset 0 .12cqw 0 rgba(255,255,255,.85); 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.9cqw; border-radius:99px; background:var(--g300); flex:0 0 auto; transition:background .45s ease; }
  .s4-row .av{ width:2.8cqw; height:2.8cqw; 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;
    position:relative; overflow:hidden; box-shadow:inset 0 .18cqw .25cqw rgba(255,255,255,.5), inset 0 -.22cqw .35cqw rgba(0,0,0,.16), 0 .4cqw .7cqw -.25cqw rgba(20,30,60,.4); }
  .s4-row .av::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(157deg, rgba(255,255,255,.32), rgba(255,255,255,0) 52%); pointer-events:none; }
  .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:700; padding:.4cqw 1.05cqw; 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; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  .s4-list.labeled .s4-chip{ opacity:1; transform:none; }
  .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.014)} 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; font-variant-numeric:tabular-nums; }
  /* 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 .3cqw rgba(74,158,232,.35), 0 6cqw 18cqw -10cqw rgba(74,158,232,.6), inset 0 .12cqw 0 rgba(255,255,255,.85); }
  /* Smart Sort sweep — 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,.6) 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:var(--surface); border:1px solid rgba(74,158,232,.55);
    border-radius:1.25cqw; padding:1.05cqw 1.35cqw; box-shadow:0 1cqw 1.6cqw -1cqw rgba(74,158,232,.4), 0 9cqw 24cqw -12cqw rgba(74,158,232,.6), inset 0 .12cqw 0 rgba(255,255,255,.9); 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(-.5cqw)} }
  .s4-toast .rc{ width:3cqw; height:3cqw; border-radius:.95cqw; background:linear-gradient(150deg,#5aa6ea,#4a9ee8); display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 .5cqw 1.2cqw -.3cqw var(--glow-blue), inset 0 .2cqw .3cqw rgba(255,255,255,.4); }
  .s4-toast .rc svg{ width:1.9cqw; height:1.9cqw; color:#fff; }
  .s4-toast .rt{ font-size:1.45cqw; color:var(--g900); font-weight:700; }
  .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:var(--surface); border:1px solid var(--stroke); border-radius:1.6cqw; padding:1.7cqw; box-shadow:0 1.2cqw 2cqw -1.4cqw rgba(var(--shadow-rgb),.3), 0 10cqw 26cqw -16cqw rgba(var(--shadow-rgb),.5), inset 0 .14cqw 0 rgba(255,255,255,.9);
    display:flex; flex-direction:column; gap:1.15cqw; 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:linear-gradient(150deg,#f4937f,#ee6a56); color:#fff; font-weight:700; font-size:1.4cqw; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    box-shadow:inset 0 .2cqw .3cqw rgba(255,255,255,.5), 0 .4cqw .8cqw -.3cqw rgba(190,70,50,.5); }
  .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); font-variant-numeric:tabular-nums; }
  .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:700; color:#c4543f; background:linear-gradient(180deg,#fef0eb,#fde7df);
    padding:.7cqw 1.25cqw; border-radius:99px; opacity:0; transform:scale(.7); transition:opacity .4s ease, transform .45s cubic-bezier(.18,1.3,.3,1); border:1px solid rgba(232,84,84,.2); box-shadow:inset 0 .12cqw 0 rgba(255,255,255,.7); }
  .s5-assignee.show{ opacity:1; transform:none; }
  .s5-assignee .av{ width:2.2cqw; height:2.2cqw; border-radius:50%; background:linear-gradient(150deg,#f4937f,#ee6a56); color:#fff; font-size:1.15cqw; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 .3cqw .6cqw -.2cqw rgba(190,70,50,.5); }
  .s5-collab{ background:linear-gradient(180deg,#f8fafe,#f3f6fc); border:1px solid var(--stroke); border-radius:1.6cqw; padding:1.5cqw; display:flex; flex-direction:column; gap:1cqw;
    box-shadow:inset 0 .14cqw 0 rgba(255,255,255,.8); }
  .s5-collab .ch{ display:flex; align-items:center; gap:.7cqw; font-family:'DM Mono',monospace; font-size:1.3cqw; letter-spacing:.14em; 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:var(--surface); border:1px solid var(--stroke); border-radius:.35cqw 1.3cqw 1.3cqw 1.3cqw; padding:.88cqw 1.15cqw; line-height:1.35;
    box-shadow:0 .6cqw 1.4cqw -1cqw rgba(var(--shadow-rgb),.4); }
  .s5-msg.me .bub{ background:linear-gradient(180deg,#eef5fd,#e3effb); border-color:#cfe3fa; color:var(--g900); border-radius:1.3cqw 1.3cqw .35cqw 1.3cqw; }
  .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:700; color:#069b93; background:linear-gradient(180deg,#e9faf8,#dcf5f1); padding:.7cqw 1.5cqw; border-radius:99px;
    border:1px solid rgba(0,194,184,.25); box-shadow:0 .6cqw 1.6cqw -.6cqw var(--glow-teal), inset 0 .14cqw 0 rgba(255,255,255,.8); }
  .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:-34%; border-radius:50%; background:radial-gradient(circle, rgba(240,138,128,.5) 0%, rgba(120,160,235,.32) 45%, transparent 72%); filter:blur(7px); opacity:1; }
  .s6-logo img{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1cqw 2.2cqw rgba(40,60,120,.28)); }
  #scv-s6 .word{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em; font-size:6.8cqw; }
  #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.25cqw;
    color:#fff; background:var(--scv-grad); border:none; border-radius:99px; padding:1.35cqw 2.8cqw; cursor:pointer;
    box-shadow:0 1cqw 2cqw -.6cqw rgba(232,84,84,.55), 0 10cqw 28cqw -10cqw rgba(74,158,232,.6), inset 0 .2cqw 0 rgba(255,255,255,.3); position:relative; transition:transform .2s ease, box-shadow .2s ease; }
  .scv-cta:hover{ transform:translateY(-.3cqw); box-shadow:0 1.4cqw 2.4cqw -.6cqw rgba(232,84,84,.6), 0 14cqw 34cqw -10cqw rgba(74,158,232,.7), inset 0 .2cqw 0 rgba(255,255,255,.35); }
  .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,.8); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.85);
    padding:1cqw 1.9cqw; border-radius:1.5cqw; box-shadow:0 1cqw 1.6cqw -1cqw rgba(var(--shadow-rgb),.25), 0 8cqw 24cqw -14cqw rgba(var(--shadow-rgb),.4); 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,.94), rgba(255,255,255,.6) 70%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .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, transform .15s; }
  .scv-cbtn:hover{ background:rgba(40,52,80,.08); color:var(--g900); transform:translateY(-.1cqw); }
  .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; font-variant-numeric:tabular-nums; }
  .scv-track{ position:relative; flex:1; height:.7cqw; background:var(--g200); border-radius:99px; box-shadow:inset 0 .08cqw .2cqw rgba(var(--shadow-rgb),.15); }
  .scv-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--scv-grad); border-radius:99px; box-shadow:0 0 1.2cqw rgba(120,150,230,.45); }
  .scv-fill::after{ content:''; position:absolute; right:-.6cqw; top:50%; width:1.6cqw; height:1.6cqw; transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 .32cqw var(--scv-blue), 0 3cqw 6cqw -2cqw rgba(0,0,0,.4), 0 0 1.2cqw rgba(74,158,232,.6); }
  .scv-tick{ position:absolute; top:50%; width:.32cqw; height:.32cqw; transform:translate(-50%,-50%); border-radius:50%; background:#fff; opacity:.85; }

  /* 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(950px 640px at 14% -4%, rgba(248,140,128,.26), transparent 52%), radial-gradient(950px 720px at 100% 108%, rgba(107,181,240,.28), transparent 52%), radial-gradient(700px 520px at 50% 116%, rgba(120,150,230,.14), transparent 60%), #f1f4fb;
    backdrop-filter:blur(3px); transition:opacity .5s ease, visibility .5s; }
  .scv-poster::before{ content:""; position:absolute; left:50%; top:42%; width:46cqw; height:46cqw; transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(circle, rgba(240,138,128,.3) 0%, rgba(120,160,235,.18) 42%, transparent 68%); filter:blur(8px); }
  .scv-poster.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .scv-poster .pwrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.2cqw; text-align:center; }
  .scv-poster img{ width:11.5cqw; height:11.5cqw; object-fit:contain; filter:drop-shadow(0 1.4cqw 2.6cqw rgba(40,60,120,.3)); }
  .scv-poster .pword{ font-family:'Syne',sans-serif; font-weight:800; font-size:5.6cqw; letter-spacing:-.032em; }
  .scv-poster .ptag{ font-size:2.1cqw; color:var(--g700); 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:9.4cqw; height:9.4cqw; border-radius:50%; border:none; cursor:pointer; background:var(--scv-grad); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 1.4cqw 2.4cqw -.8cqw rgba(232,84,84,.5), 0 14cqw 34cqw -10cqw rgba(74,158,232,.6), inset 0 .25cqw 0 rgba(255,255,255,.35); transition:transform .2s; position:relative; }
  .scv-playbig:hover{ transform:scale(1.06); }
  .scv-playbig svg{ width:3.9cqw; height:3.9cqw; margin-left:.5cqw; filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.2)); }
  .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:.2em; 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 ═══ explainer fills viewport with letterboxing.
     100dvh 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;
    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,.9); color:var(--g900); display:flex; align-items:center; justify-content:center;
    box-shadow:0 1.2cqw 2.4cqw -.8cqw rgba(var(--shadow-rgb),.55), inset 0 .14cqw 0 rgba(255,255,255,.9); 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,.scv-sweep,
    .s2-timeline.stall .s2-step.stall .s2-node,
    .s3-dash.show .scv-wrow.unread .udot,
    .s4-toast.show,
    .scv-scene.active .s3-intro:not(.gone) .s3-logo .ring{ animation:none !important; }
  }