*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --red-dark:#9B000C;
    --red-deep:#BF2026;
    --red-pale:#F9C0C7;
    --grad-linear:linear-gradient(135deg,#E50913 0%,#BF2026 100%);
    --grad-radial:radial-gradient(circle at 32% 30%,#BF2026 0%,#E50913 100%);
    --bg:#F5F5F5;--white:#fff;--dark:#000000;--dark2:#3D3D3D;
    --dark3:rgba(0,0,0,.55);--red:#E50913;--red2:#F9C0C7;
    --red-bg:rgba(229,9,19,.06);--red-border:rgba(229,9,19,.18);
    --border:rgba(0,0,0,.1);--border2:rgba(0,0,0,.18);
    --muted:rgba(0,0,0,.38);--green:#2f9e6d;--amber:#d68c0e;
  }
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--dark);font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;min-height:100vh}

  .nav{background:var(--white);border-bottom:1px solid var(--border);padding:18px 32px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between}
  .nav-brand{font-family:'Playfair Display',serif;font-weight:700;font-size:18px;color:var(--dark);letter-spacing:-0.01em}
  .nav-brand em{color:var(--red);font-style:normal}
  .nav-brand{display:inline-flex;align-items:center;gap:9px}
  .nav-brand img{height:34px;width:auto;display:block;flex-shrink:0}
  @media (max-width:560px){.nav-brand img{height:28px}}
  .nav-right{display:flex;align-items:center;gap:20px}
  .nav-tag{color:var(--dark3);font-size:12px;letter-spacing:.02em}
  .strike-wrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dark3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .strike-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.15);transition:background .3s}
  .strike-dot.on{background:var(--red);box-shadow:0 0 0 3px rgba(229,9,19,.15)}

  .prog-wrap{background:rgba(229,9,19,.1);height:3px;width:100%}
  .prog-fill{background:var(--red);height:100%;width:0;transition:width .5s ease}

  .pg{display:none;flex-direction:column;min-height:calc(100vh - 58px)}
  .pg.on{display:flex}
  .page-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px 72px}
  .inner{max-width:640px;width:100%}
  .inner-wide{max-width:760px;width:100%}

  .eyebrow{color:var(--red);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;text-align:center}
  h1.hero{color:var(--dark);font-family:'Playfair Display',serif;font-size:clamp(36px,6vw,56px);line-height:1.08;margin-bottom:18px;text-align:center;font-weight:700;letter-spacing:-0.015em}
  h1.hero em{color:var(--red);font-style:normal;font-weight:500}
  .hero-sub{color:var(--dark3);font-size:15px;line-height:1.75;margin:0 auto 32px;max-width:500px;text-align:center}

  .intro-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 28px}
  .intro-badge{align-items:center;background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:20px;color:var(--red);display:inline-flex;font-size:12px;font-weight:500;gap:6px;letter-spacing:.01em;padding:6px 14px}

  .brief-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 32px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.03)}

  .rules-card{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:12px;padding:24px 28px;margin-bottom:28px}
  .rules-card .rules-h{color:var(--red);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
  .rules-card .rule-row{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--border)}
  .rules-card .rule-row:first-of-type{border-top:none;padding-top:0}
  .rules-card .rule-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
  .rules-card .rule-body{flex:1}
  .rules-card .rule-h{font-size:14.5px;font-weight:700;color:var(--dark);margin-bottom:4px;letter-spacing:-0.005em}
  .rules-card .rule-t{font-size:13.5px;color:var(--dark2);line-height:1.65}
  .rules-card .rule-t strong{color:var(--dark);font-weight:700}
  .rules-card .rule-t em{color:var(--red);font-style:normal;font-weight:600}
  .brief-card p{margin-bottom:12px;color:var(--dark);font-size:14.5px;line-height:1.7}
  .brief-card p:last-of-type{margin-bottom:0}
  .brief-card strong{color:var(--dark);font-weight:600}
  .brief-card em{color:var(--red);font-style:normal}

  .cast{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
  .cast-card{display:flex;align-items:center;gap:10px;padding:8px 0}
  .cast-av{width:32px;height:32px;border-radius:50%;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:1.5px solid var(--red-border);flex-shrink:0}
  .cast-name{font-size:13px;font-weight:600;color:var(--dark);line-height:1.2}
  .cast-role{font-size:11px;color:var(--dark3);margin-top:2px}

  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
  .stat .n{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;color:var(--dark);display:block;line-height:1.1}
  .stat .n em{color:var(--red);font-style:normal}
  .stat .l{font-size:10.5px;color:var(--dark3);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-weight:500}

  .btn-red{background:var(--grad-linear);border:none;border-radius:14px;color:#fff;cursor:pointer;font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:15px;font-weight:700;height:54px;letter-spacing:.02em;padding:0 28px;transition:background .2s;align-items:center;display:inline-flex;gap:10px;justify-content:center;width:100%}
  .btn-red:hover{background:var(--red2)}
  .btn-red:disabled{background:var(--border2);cursor:not-allowed}
  .btn-ghost{background:none;border:1.5px solid var(--border2);border-radius:14px;color:var(--dark);cursor:pointer;font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:14px;font-weight:600;height:48px;padding:0 22px;transition:all .2s}
  .btn-ghost:hover{border-color:var(--dark);background:var(--white)}

  /* Lead capture */
  .lead-hero{font-size:clamp(32px,5vw,46px)}
  .lead-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 32px 26px;box-shadow:0 1px 4px rgba(0,0,0,.03)}
  .lead-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
  .lead-row-2 > .lead-field{flex:1 1 calc(50% - 8px);min-width:220px}
  .lead-row:not(.lead-row-2) > .lead-field{flex:1 1 100%}
  .lead-field{display:flex;flex-direction:column;gap:6px; margin-bottom: 0px !important;} 
  .lead-label{font-size:11px;font-weight:700;color:var(--dark3);text-transform:uppercase;letter-spacing:.08em}
  .lead-label .lead-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);font-size:10.5px;margin-left:4px}
  .lead-sub{font-size:12px;color:var(--dark3);font-style:italic;line-height:1.5;margin-top:-2px}
  .lead-field input, .lead-field textarea,
form.lead-card input[type=text], form.lead-card input[type=email], 
form.lead-card input[type=password], form.lead-card input[type=tel], form.lead-card input[type=number], form.lead-card input[type=file], form.lead-card input[type=search], form.lead-card select, 
form.lead-card textarea 
{
    font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:14.5px;color:var(--dark);
    background:#fafbfd;border:1.5px solid var(--border);border-radius:10px !important;
    padding:12px 14px;outline:none;transition:border .18s,background .18s;
    width:100%;resize:vertical;line-height:1.5;
  }
   form.lead-card .lead-field input:focus,  form.lead-card .lead-field textarea:focus{border-color:var(--red);background:var(--white); box-shadow:none}
  form.lead-card .lead-field input::placeholder, form.lead-card .lead-field textarea::placeholder{color: rgba(0,0,0,0.38) !important}
form.lead-card .lead-field input::placeholder {
	color: var(--gray-300);
}
  .lead-legal{font-size:11px;color:var(--dark3);line-height:1.5;margin:4px 0 18px}
  .lead-legal a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red-border)}
  .lead-actions{display:flex;gap:12px;align-items:center;justify-content:space-between}
  .lead-actions .btn-red{width:auto;flex:0 0 auto;min-width:240px}








  /* Sticky play-head (meters + timer together) */
  .play-head{position:sticky;top:58px;z-index:9;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.04)}
  .play-head.hidden{display:none}
  .meters-bar{background:var(--white);padding:12px 32px;display:flex;gap:28px;align-items:center;border-bottom:1px solid rgba(0,0,0,.06)}
  .meter{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
  .meter-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dark3);font-weight:700;white-space:nowrap}
  .meter-body{flex:1;min-width:0}
  .meter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
  .meter-val{font-family:'Playfair Display',serif;font-weight:700;font-size:16px;color:var(--dark);letter-spacing:-0.01em}
  .meter-val.pulse{animation:meterPulse .8s ease}
  @keyframes meterPulse{0%{transform:scale(1);color:var(--dark)}40%{transform:scale(1.12);color:var(--red)}100%{transform:scale(1);color:var(--dark)}}
  .meter-delta{font-size:10px;font-weight:600;letter-spacing:.04em}
  .meter-delta.up{color:var(--green)}
  .meter-delta.down{color:var(--red)}
  .meter-delta.flat{color:var(--muted)}
  .meter-bar{height:3px;background:rgba(0,0,0,.08);border-radius:2px;overflow:hidden;position:relative}
  .meter-bar .fill{height:100%;background:var(--dark);border-radius:2px;transition:width .6s ease,background .3s}
  .meter.low .meter-bar .fill,.meter.low .meter-val{color:var(--red)}
  .meter.low .meter-bar .fill{background:var(--red)}
  .meter.mid .meter-bar .fill{background:var(--amber)}

  /* Timer bar */
  .timer-wrap{background:var(--white);padding:10px 32px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .timer-prefix{font-size:10px;color:var(--dark3);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
  .timer-label{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--dark2);font-weight:700;letter-spacing:.04em;min-width:48px}
  .timer-label.hot{color:var(--red);animation:timerPulse 1s ease-in-out infinite}
  @keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.5}}
  .timer-bar-outer{flex:1;min-width:120px;height:4px;background:rgba(0,0,0,.08);border-radius:2px;overflow:hidden}
  .timer-bar-fill{height:100%;background:var(--red);width:100%;transition:width .95s linear}
  .timer-bar-fill.frozen{transition:none}
  .timer-hint{font-size:11px;color:var(--dark3);white-space:nowrap;letter-spacing:.01em}
  .timer-hint b{color:var(--red);font-weight:700}
  @media (max-width:780px){ .timer-hint{flex-basis:100%;white-space:normal;line-height:1.4;padding-top:4px} }

  .q-pips{display:flex;gap:6px;margin-bottom:22px}
  .q-pip{background:rgba(0,0,0,.1);border-radius:2px;flex:1;height:3px;transition:background .3s}
  .q-pip.on{background:var(--red)}
  .q-pip.strike{background:rgba(229,9,19,.35)}

  .q-part{color:var(--red);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
  .q-text{color:var(--dark);font-family:'Playfair Display',serif;font-size:clamp(22px,3.2vw,28px);line-height:1.3;margin-bottom:8px;font-weight:600;letter-spacing:-0.01em}
  .q-text em{color:var(--red);font-style:normal;font-weight:500}
  .q-prompt{color:var(--dark3);font-size:14px;margin-bottom:18px}
  .q-scenario{color:var(--dark);font-size:13.5px;line-height:1.7;margin-bottom:20px;padding:14px 16px;background:var(--white);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px}

  /* Voices panel */
  .voices{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:20px}
  .voices-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-weight:700;margin-bottom:12px}
  .voice{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
  .voice:first-of-type{border-top:none;padding-top:0}
  .voice:last-child{padding-bottom:0}
  .voice-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:1.5px solid;flex-shrink:0}
  .voice-av.cfo{background:rgba(214,140,14,.1);color:var(--amber);border-color:rgba(214,140,14,.3)}
  .voice-av.chro{background:rgba(47,158,109,.1);color:var(--green);border-color:rgba(47,158,109,.3)}
  .voice-av.cpo{background:rgba(0,0,0,.05);color:var(--dark);border-color:rgba(0,0,0,.2)}
  .voice-av.gc{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
  .voice-av.chair{background:var(--dark);color:#fff;border-color:var(--dark)}
  .voice-body{flex:1;min-width:0}
  .voice-name{font-size:13px;font-weight:600;color:var(--dark);line-height:1.2}
  .voice-role{font-size:11px;color:var(--dark3);margin-left:6px;font-weight:500}
  .voice-quote{font-size:13.5px;color:var(--dark);line-height:1.55;margin-top:3px;font-style:italic}
  .voice-quote::before{content:"\201C"}.voice-quote::after{content:"\201D"}

  .opts{display:flex;flex-direction:column;gap:10px}
  .opt{align-items:flex-start;background:var(--white);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.04);cursor:pointer;display:flex;gap:13px;padding:16px 18px;text-align:left;transition:all .18s;width:100%;font-family:'Mulish','Avenir Next','Avenir',sans-serif}
  .opt:hover{background:#fff8f8;border-color:var(--red-border)}
  .opt.sel{background:#fff0f0;border-color:var(--red);box-shadow:0 1px 8px rgba(229,9,19,.08)}
  .opt-ltr{align-items:center;border:1.5px solid var(--border2);border-radius:7px;color:var(--dark2);display:flex;flex-shrink:0;font-size:11px;font-weight:700;height:26px;justify-content:center;transition:all .18s;width:26px}
  .opt.sel .opt-ltr{background:var(--red);border-color:var(--red);color:#fff}
  .opt-main{color:var(--dark);font-size:14px;line-height:1.5;font-weight:500}
  .opt-sub{color:var(--dark3);font-size:12.5px;line-height:1.5;margin-top:4px;font-weight:400}
  .opt-align{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--dark3);margin-top:6px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
  .opt-align .tag{padding:2px 7px;border-radius:20px;background:rgba(0,0,0,.05);border:1px solid var(--border)}

  .q-nav-row{align-items:center;display:flex;justify-content:space-between;margin-top:26px;gap:16px}
  .btn-back{background:none;border:none;color:var(--muted);cursor:pointer;font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:13px;font-weight:500;padding:0;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
  .btn-back:hover{color:var(--dark3)}
  .btn-next{align-items:center;background:var(--red);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:14px;font-weight:700;gap:8px;height:46px;letter-spacing:.02em;padding:0 22px;transition:background .2s}
  .btn-next:hover{background:var(--red2)}
  .btn-next:disabled{background:var(--border2);cursor:not-allowed}

  .q-anim{animation:fadeUp .35s ease}
  @keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* Aftermath overlay */
  .aftermath{position:fixed;inset:0;background:rgba(20,22,40,.88);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px)}
  .aftermath.on{display:flex;animation:aftermathIn .3s ease}
  @keyframes aftermathIn{0%{opacity:0}to{opacity:1}}
  .aftermath-inner{max-width:560px;width:100%}
  .aftermath-label{color:#ff9a9d;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;text-align:center;animation:fadeUp .5s ease}
  .aftermath-card{background:var(--white);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:fadeUp .5s .1s ease both}
  .aftermath-bar{height:4px;background:var(--border);position:relative;overflow:hidden}
  .aftermath-bar .fill{height:100%;background:var(--red);width:100%;transform-origin:left;animation:aftermathBar 8s linear}
  @keyframes aftermathBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  .aftermath-skip{position:absolute;top:24px;right:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;letter-spacing:.04em}

  /* Aftermath sub-formats */
  .am-headline{padding:36px 32px 32px;background:var(--dark);color:#fff}
  .am-headline .source{font-family:'JetBrains Mono',monospace;font-size:11px;color:#ff9a9d;letter-spacing:.1em;margin-bottom:10px;text-transform:uppercase;font-weight:600}
  .am-headline .h{font-family:'Playfair Display',serif;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-0.01em}
  .am-headline .sub{color:rgba(255,255,255,.7);font-size:13px;margin-top:12px;line-height:1.6}

  .am-slack{padding:28px}
  .am-slack .chan{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dark3);font-weight:600;margin-bottom:16px}
  .am-slack .msg{display:flex;gap:12px;margin-bottom:14px}
  .am-slack .msg:last-child{margin-bottom:0}
  .am-slack .avi{width:36px;height:36px;border-radius:8px;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
  .am-slack .msg-body{flex:1}
  .am-slack .who{font-size:13px;font-weight:700;color:var(--dark)}
  .am-slack .when{font-size:11px;color:var(--muted);margin-left:8px;font-weight:500}
  .am-slack .text{font-size:13.5px;color:var(--dark);line-height:1.5;margin-top:2px}

  .am-text{padding:28px}
  .am-text .from{font-size:12px;color:var(--dark3);margin-bottom:14px;font-weight:500}
  .am-text .from strong{color:var(--dark);font-weight:700}
  .am-text .bubble{background:var(--red-bg);color:var(--dark);padding:14px 18px;border-radius:18px;border-bottom-left-radius:4px;font-size:14px;line-height:1.5;max-width:85%;margin-bottom:8px}
  .am-text .bubble.mine{background:var(--dark);color:#fff;margin-left:auto;border-bottom-left-radius:18px;border-bottom-right-radius:4px}

  .am-ticker{padding:28px;background:var(--dark);color:#fff}
  .am-ticker .ticker-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:#ff9a9d;letter-spacing:.1em;margin-bottom:12px;text-transform:uppercase;font-weight:600}
  .am-ticker .tick-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:'JetBrains Mono',monospace}
  .am-ticker .tick-row:last-child{border-bottom:none}
  .am-ticker .symbol{font-size:13px;font-weight:600}
  .am-ticker .price{font-size:15px;font-weight:600}
  .am-ticker .chg{font-size:12px;margin-left:10px}
  .am-ticker .chg.up{color:#7CD992}
  .am-ticker .chg.down{color:#ff6b66}

  .am-tweet{padding:28px}
  .am-tweet .tweet-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
  .am-tweet .tw-avi{width:36px;height:36px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
  .am-tweet .tw-name{font-size:14px;font-weight:700;color:var(--dark)}
  .am-tweet .tw-handle{font-size:12px;color:var(--muted)}
  .am-tweet .tw-text{font-size:14.5px;color:var(--dark);line-height:1.5;margin-bottom:12px}
  .am-tweet .tw-meta{font-size:11px;color:var(--muted);padding-top:10px;border-top:1px solid var(--border);font-family:'JetBrains Mono',monospace}

  .am-meters-delta{padding:14px 28px;background:#fafbfe;border-top:1px solid var(--border);display:flex;justify-content:space-around;gap:16px}
  .am-dm{display:flex;flex-direction:column;align-items:center;gap:2px}
  .am-dm-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
  .am-dm-val{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--dark)}
  .am-dm-val.up{color:var(--green)}
  .am-dm-val.down{color:var(--red)}
  .am-dm-val.flat{color:var(--muted)}

  /* Debrief */
  .result-hero{background:var(--dark);color:#fff;border-radius:20px;padding:48px 44px 44px;margin-bottom:28px;text-align:center}
  .result-hero .eyebrow{color:#ff6b73}
  .result-hero h2{font-family:'Playfair Display',serif;font-size:clamp(40px,6vw,56px);line-height:1.05;margin:0 0 14px;font-weight:700;letter-spacing:-0.02em}
  .result-hero h2 em{color:var(--red2);font-style:normal;font-weight:500}
  .result-hero p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 4px}
  .result-hero p.arch-tag{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:#ff9ca1;margin-bottom:14px}
  .result-strikes{display:inline-flex;gap:6px;margin-top:18px;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6)}
  .result-strikes .d{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
  .result-strikes .d.on{background:var(--red2)}

  .dims{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
  .dim{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px 22px 20px}
  .dim-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--dark3);font-weight:700;margin-bottom:12px}
  .dim-val{font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:var(--dark);margin-bottom:10px;line-height:1;letter-spacing:-0.02em}
  .dim-val em{color:var(--red);font-style:normal}
  .dim-bar{height:4px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden}
  .dim-bar .fill{height:100%;background:var(--red);border-radius:2px;transition:width .7s ease}

  .final-meters{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px 26px;margin-bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .fm{text-align:left}
  .fm-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--dark3);font-weight:700;margin-bottom:8px}
  .fm-val{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--dark);line-height:1;letter-spacing:-0.02em}
  .fm-val em{font-style:italic}
  .fm-val.up em{color:var(--green)}
  .fm-val.down em{color:var(--red)}
  .fm-chg{font-size:11px;font-weight:600;margin-top:6px;letter-spacing:.04em}
  .fm-chg.up{color:var(--green)}
  .fm-chg.down{color:var(--red)}
  .fm-chg.flat{color:var(--muted)}

  .panel{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 32px;margin-bottom:18px}
  .panel h3{font-family:'Mulish','Avenir Next','Avenir',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:14px}
  .panel p{color:var(--dark);font-size:14.5px;line-height:1.75;margin-bottom:10px}
  .panel p:last-child{margin-bottom:0}
  .panel ul{list-style:none;padding:0;margin:0}
  .panel li{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.65;color:var(--dark);display:flex;gap:12px}
  .panel li:last-child{border-bottom:none}

  .panel-cta{background:linear-gradient(135deg,#fff 0%,#fff 62%,rgba(229,9,19,.06) 100%);border-left:3px solid var(--red)}
  .panel-cta .cta-eyebrow{color:var(--red);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
  .panel-cta h3.cta-h{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--dark);text-transform:none;letter-spacing:-0.01em;margin-bottom:12px;line-height:1.25}
  .panel-cta h3.cta-h em{color:var(--red);font-style:normal;font-weight:500}
  .panel-cta .cta-body{color:var(--dark2);font-size:14.5px;line-height:1.75;margin-bottom:18px}
  .panel-cta .cta-body em{color:var(--red);font-style:normal}

  /* AI-generated debrief narrative panel */
  .panel-narrative{background:linear-gradient(135deg,#fff 0%,rgba(229,9,19,.02) 100%);border-left:3px solid var(--red)}
  .panel-narrative .ai-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--red);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
  .panel-narrative .ai-eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulseDot 1.4s infinite ease-in-out}
  .panel-narrative.done .ai-eyebrow .dot{animation:none;background:#7CD992}
  @keyframes pulseDot{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
  .panel-narrative h3{margin-bottom:14px}
  .panel-narrative .narrative-body{color:var(--dark2);font-size:15px;line-height:1.8;white-space:pre-wrap}
  .panel-narrative .narrative-body::after{content:"▋";margin-left:2px;color:var(--red);animation:caretBlink 1s infinite}
  .panel-narrative.done .narrative-body::after{display:none}
  @keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
  .panel-narrative .narrative-fallback{color:var(--muted);font-size:13px;font-style:italic;margin-top:10px}

  /* Dynamic-aftermath marker */
  .am-live-chip{position:absolute;top:24px;left:24px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#ff9a9d;font-size:10px;font-weight:700;padding:6px 10px;border-radius:6px;letter-spacing:.08em;text-transform:uppercase}
  .am-live-chip .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ff9a9d;animation:pulseDot 1.4s infinite ease-in-out}
  .cta-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
  .cta-opt{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 16px 14px;transition:border-color .2s,transform .15s}
  .cta-opt:hover{border-color:var(--red);transform:translateY(-1px)}
  .cta-opt .p-name{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.04em;margin-bottom:4px}
  .cta-opt .p-h{font-family:'Playfair Display',serif;font-size:15px;color:var(--dark);font-weight:600;line-height:1.3;margin-bottom:6px}
  .cta-opt .p-sub{font-size:12px;color:var(--dark3);line-height:1.5}
  .cta-link{color:var(--red);font-weight:600;font-size:14px;border-bottom:1px solid var(--red-border);padding-bottom:2px;text-decoration:none}
  .cta-link:hover{border-bottom-color:var(--red)}
  .btn-cta-dba{width:auto;min-width:280px;text-decoration:none;height:52px;font-size:14.5px;margin-top:4px}
  .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;align-items:center}
  .btn-cta-counsellor{width:auto;min-width:210px;text-decoration:none;height:52px;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
  .btn-cta-counsellor:hover{border-color:var(--red);color:var(--red)}
  @media (max-width:560px){.cta-actions{flex-direction:column;align-items:stretch}.btn-cta-dba,.btn-cta-counsellor{width:100%;min-width:0}}
  .panel li::before{content:"";display:block;flex-shrink:0;width:5px;height:5px;background:var(--red);border-radius:50%;margin-top:9px}

  .trace-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px 18px;font-size:13.5px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--border)}
  .trace-row:last-child{border-bottom:none}
  .trace-num{font-family:'Playfair Display',serif;font-weight:700;color:var(--red);font-size:15px;font-style:normal}
  .trace-what{color:var(--dark);font-weight:500}
  .trace-pick{color:var(--white);font-weight:700;font-size:12px;background:var(--red);border-radius:6px;padding:4px 10px;letter-spacing:.04em}
  .trace-pick.strike{background:var(--dark2);position:relative}
  .trace-pick.strike::after{content:"•";margin-left:4px}
  .trace-tag{font-size:10.5px;color:var(--dark3);font-weight:500;letter-spacing:.04em;text-transform:uppercase}

  .hidden{display:none!important}

  @media (max-width:680px){
    .nav{padding:14px 20px}
    .nav-right{gap:10px}
    .meters-bar{padding:10px 16px;gap:12px;overflow-x:auto}
    .meter-label{display:none}
    .timer-wrap{padding:8px 16px}
    .page-body{padding:28px 18px 60px}
    .brief-card{padding:22px 20px}
    .stats{grid-template-columns:repeat(3,1fr);gap:10px}
    .cast{grid-template-columns:1fr}
    .result-hero{padding:36px 24px}
    .dims{grid-template-columns:1fr}
    .panel{padding:22px 22px}
    .final-meters{grid-template-columns:1fr;gap:14px}
  }
  .cta-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
  .cta-modal[hidden]{display:none}
  .cta-modal-backdrop{position:absolute;inset:0;background:rgba(15,15,17,.62);backdrop-filter:blur(2px)}
  .cta-modal-box{position:relative;z-index:1;background:#fff;border-radius:18px;max-width:420px;width:100%;padding:36px 32px 30px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:ctaPop .22s ease-out}
  @keyframes ctaPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .cta-modal-tick{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--grad-radial);color:#fff;font-size:26px;line-height:52px;font-weight:700}
  .cta-modal-h{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--dark,#000000);margin:0 0 10px;letter-spacing:-.01em;text-transform:none}
  .cta-modal-p{font-family:'Mulish','Avenir Next',sans-serif;font-size:15px;line-height:1.7;color:var(--gray,#666);margin:0 0 24px}
  .cta-modal-close{width:auto;min-width:140px;height:46px;font-size:14px;cursor:pointer}
  /* ------------------------------------------------------------------
     MOBILE PASS
     One gutter for every surface (nav, page body, panels, cards) so the
     margins line up instead of each block choosing its own. Appended last
     so it wins over the earlier per-block rules.
  ------------------------------------------------------------------ */
  :root{
    --red-dark:#9B000C;
    --red-deep:#BF2026;
    --red-pale:#F9C0C7;
    --grad-linear:linear-gradient(135deg,#E50913 0%,#BF2026 100%);
    --grad-radial:radial-gradient(circle at 32% 30%,#BF2026 0%,#E50913 100%); --pad-x:32px }
  @media (max-width:760px){ :root{
    --red-dark:#9B000C;
    --red-deep:#BF2026;
    --red-pale:#F9C0C7;
    --grad-linear:linear-gradient(135deg,#E50913 0%,#BF2026 100%);
    --grad-radial:radial-gradient(circle at 32% 30%,#BF2026 0%,#E50913 100%); --pad-x:20px } }
  @media (max-width:420px){ :root{
    --red-dark:#9B000C;
    --red-deep:#BF2026;
    --red-pale:#F9C0C7;
    --grad-linear:linear-gradient(135deg,#E50913 0%,#BF2026 100%);
    --grad-radial:radial-gradient(circle at 32% 30%,#BF2026 0%,#E50913 100%); --pad-x:16px } }

  /* No overflow-x:hidden here: it would make body a scroll container and
     kill the sticky nav. The layout is measured to fit instead. */
  html,body{max-width:100%}
  .q-text,.q-scenario,.panel,.lead-card{overflow-wrap:break-word}

  @media (max-width:760px){
    .nav{padding-left:var(--pad-x);padding-right:var(--pad-x)}
    .page-body{padding-left:var(--pad-x);padding-right:var(--pad-x)}
    .panel{padding-left:var(--pad-x);padding-right:var(--pad-x)}
    .lead-card{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  }

  @media (max-width:560px){
    /* Form: one field per row, full width, no cramped side-by-side pairs. */
    .lead-row{flex-direction:column;gap:14px;margin-bottom:14px}
    .lead-field{width:100%;min-width:0}

    /* Primary actions go full width rather than squeezing onto one line. */
    .lead-actions{flex-direction:column;align-items:stretch;gap:10px}
    .lead-actions .btn-red{width:100%;min-width:0;flex:1 1 auto}
    .q-nav-row{flex-direction:column;align-items:stretch;gap:12px}
    .q-nav-row .btn-red,.q-nav-row .btn-ghost{width:100%}

    /* Labels keep their arrow on the same line. */
    .btn-red,.btn-ghost{white-space:nowrap;letter-spacing:.02em}

    .voices{padding:14px 15px}
    .q-scenario{padding:13px 14px}
  }
  /* ------------------------------------------------------------------
     ACCENT RAIL
     Replaces the flat full-height 3px left border. The rail is inset from
     the corners, has rounded caps, and fades down its length, so it reads
     as a deliberate detail rather than a default alert bar fighting the
     card radius.
  ------------------------------------------------------------------ */
  .rules-card,.q-scenario,.panel-cta,.panel-narrative,.aud-quote{
    position:relative;border-left:none;
  }
  .rules-card::before,.q-scenario::before,
  .panel-cta::before,.panel-narrative::before,.aud-quote::before{
    content:'';position:absolute;left:0;top:15px;bottom:15px;width:3px;
    border-radius:0 4px 4px 0;
    background:linear-gradient(180deg,var(--red) 0%,var(--red-deep) 38%,rgba(229,9,19,.06) 100%);
  }

  /* ------------------------------------------------------------------
     HOW THIS WORKS
     Was a stack of glyph chips in rounded squares, which is the generic
     feature-list pattern. Now a numbered brief: serif numerals in their
     own column, hairline rules between rows, and no decorative chrome.
     Matches the stepped treatment on the landing page.
  ------------------------------------------------------------------ */
  .rules-card{
    border-radius:14px;padding:24px 28px 20px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  .rules-h{margin-bottom:2px}
  .rules-card .rule-row{
    display:grid;grid-template-columns:34px 1fr;column-gap:18px;
    align-items:start;padding:17px 0;border-top:1px solid var(--border);
  }
  .rules-card .rule-row:first-of-type{border-top:none;padding-top:14px}
  .rules-card .rule-row:last-child{padding-bottom:4px}
  .rules-card .rule-icon{
    display:block;width:auto;height:auto;border-radius:0;background:none;
    font-family:'Playfair Display',serif;font-weight:700;font-size:19px;
    color:var(--red);line-height:1.35;letter-spacing:-0.02em;
  }
  .rules-card .rule-h{font-size:15px;font-weight:700;margin-bottom:5px}
  .rules-card .rule-t{font-size:13.5px;line-height:1.7}



  @media (max-width:560px){
    .rules-card{padding-left:var(--pad-x);padding-right:var(--pad-x)}
    .rules-card .rule-row{grid-template-columns:26px 1fr;column-gap:14px;padding:15px 0}
    .rules-card .rule-icon{font-size:16px}
  }
  /* Four or three stat columns collapse to about 65px each on a phone.
     Two columns keeps the figures legible. */
  @media (max-width:620px){
    .stats{grid-template-columns:repeat(2,1fr);gap:16px 14px}
  }
  /* Page gutter from the shared token at every width, not just on mobile. */
  .page-body{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  /* ------------------------------------------------------------------
     PLAY SCREEN: LESS CHROME ABOVE THE DECISION
     On a phone the nav, the meter strip and the timer row together took
     roughly half the screen before the question appeared. Everything here
     is redundancy, not information:
       - the sim name is already the page title
       - the three dots repeat what the 0/3 counter says
       - the timer hint repeats the rules card, every single round
     Meter labels also get a reserved height so the three values sit on one
     baseline instead of stepping where a label wraps.
  ------------------------------------------------------------------ */
  @media (max-width:620px){
    .nav{padding-top:12px;padding-bottom:12px}
    .nav-tag{display:none}
    .strike-dot{display:none}
    .strike-wrap{font-size:10.5px;letter-spacing:.03em}

    .meter{padding:11px 12px;gap:6px}
    .meter-label{font-size:8.5px;letter-spacing:.05em;line-height:1.25;min-height:2.5em}
    .meter-val{font-size:19px}
    .meter-delta{min-width:0;padding:2px 5px;font-size:10px}

    .timer-wrap{padding:9px var(--pad-x);gap:10px}
    .timer-hint{display:none}