:root {
  --red: #fe0000; --red-ink: #d40000; --ink: #0e0e10; --paper: #ffffff; --muted: #9a9ca5;
  --green: #22c55e; --yellow: #ffd60a; --panel: rgba(14, 14, 16, 0.92); --line: rgba(255, 255, 255, 0.12);
  --f-head: 'Montserrat', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05060a; color: #fff; font-family: var(--f-body); overflow: hidden; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
[hidden] { display: none !important; }

.btn { font: 700 15px var(--f-head); letter-spacing: .02em; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff;
  padding: 12px 18px; border-radius: 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: rgba(255,255,255,.12); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: var(--red-ink); }
.btn.big { padding: 16px 24px; font-size: 17px; width: 100%; }
.kicker { font: 800 12px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.lead { color: #d4d5da; line-height: 1.5; margin: 0 0 18px; }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
h1, h2 { font-family: var(--f-head); margin: 0 0 12px; letter-spacing: -.02em; }

.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; z-index: 10;
  background: radial-gradient(circle at 30% 20%, rgba(254,0,0,.10), transparent 50%), rgba(5,6,10,.78); backdrop-filter: blur(6px); }
.screen.dim { background: rgba(0,0,0,.55); backdrop-filter: none; }

.home-card, .intro-card, .final-card { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.brand { display: flex; align-items: center; gap: 8px; font: 800 13px var(--f-head); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 22px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.home-card h1 { font-size: clamp(40px, 8vw, 64px); line-height: .95; font-weight: 900; }
.home-card h1 em { font-style: normal; color: var(--red); }
.habits { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.habits li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.habits .n { font: 900 22px var(--f-head); color: var(--red); }
.habits b { font-family: var(--f-head); display: block; margin-bottom: 2px; }
.habits span { color: #c3c5cc; font-size: 14px; }
.habits .soon { color: var(--muted); font-size: 12px; }

.example { display: grid; gap: 16px; margin: 6px 0 20px; }
.example-art { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #0b1226; }
.example-art svg { display: block; width: 100%; height: auto; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #e4e5e9; line-height: 1.45; }
.steps b { color: #fff; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.chip { background: var(--red); font: 800 12px var(--f-head); text-transform: uppercase; letter-spacing: .12em; padding: 7px 11px; border-radius: 999px; }
.hud-step { font: 700 13px var(--f-head); color: #fff; opacity: .85; }
.icon-btn { margin-left: auto; pointer-events: auto; background: rgba(0,0,0,.45); border: 1px solid var(--line); color: #fff; border-radius: 10px; width: 40px; height: 40px; cursor: pointer; font-size: 18px; }
.hud-pro { position: absolute; top: 62px; left: 16px; background: rgba(0,0,0,.55); border-left: 3px solid var(--green); padding: 8px 12px; border-radius: 8px; font: 700 13px var(--f-head); }
.decide-head { position: absolute; top: 9%; left: 16px; right: 16px; display: grid; justify-items: center; gap: 14px; }
.prompt { max-width: 820px; text-align: center; font: 900 clamp(22px, 4.2vw, 42px)/1.05 var(--f-head); text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.timer { width: min(420px, 70vw); height: 8px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; }
.opts { position: absolute; inset: 0; }
.opt { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; border: 0; background: none; padding: 0; color: #fff; display: grid; justify-items: center; gap: 6px; }
.opt .ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(254,0,0,.92); border: 3px solid #fff; font: 900 24px var(--f-head);
  box-shadow: 0 0 0 6px rgba(254,0,0,.25), 0 8px 24px rgba(0,0,0,.5); animation: pop .25s ease-out; }
.opt .lbl { background: rgba(0,0,0,.75); padding: 6px 10px; border-radius: 8px; font: 700 14px var(--f-head); white-space: nowrap; }
.opt:hover .ring { background: #fff; color: var(--red); }
.opt.edge .ring { background: rgba(254,0,0,.6); }
@keyframes pop { from { transform: scale(.6); opacity: .7; } to { transform: scale(1); opacity: 1; } }

.count-wrap { text-align: center; }
.count-line { font: 800 18px var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0; }
.count { font: 900 min(36vw, 220px) var(--f-head); color: var(--red); line-height: 1; text-shadow: 0 8px 40px rgba(0,0,0,.6); }

.q-card { width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.q-progress { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.q-text { font: 800 22px var(--f-head); line-height: 1.25; margin: 0 0 16px; }
.q-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.q-opts .btn { padding: 16px 10px; font-size: 16px; }
.q-opts .btn.right { background: var(--green); border-color: var(--green); }
.q-opts .btn.wrong { background: var(--red); border-color: var(--red); }

.result-card { width: min(1100px, 100%); display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.result-board { position: relative; min-height: 340px; background: #1f3b24; }
.result-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.result-text { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.verdict { font: 900 30px var(--f-head); margin: 0; text-transform: uppercase; letter-spacing: -.01em; }
.verdict.good { color: var(--green); } .verdict.bad { color: var(--red); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs .col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.vs .col.pro { border-color: rgba(34,197,94,.5); }
.vs .who { font: 800 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vs .what { font: 700 15px var(--f-head); margin: 4px 0; }
.vs .time { font: 900 26px var(--f-head); }
.vs .col.pro .time { color: var(--green); }
.why { margin: 0; color: #d9dade; line-height: 1.5; }
.lesson { margin: 0; padding: 12px 14px; border-left: 3px solid var(--red); background: rgba(254,0,0,.08); border-radius: 8px; font-weight: 600; line-height: 1.45; }
.r-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.r-actions .btn { flex: 1 1 auto; }

.clip-card { width: min(960px, 100%); display: grid; gap: 12px; }
.clip-card video { width: 100%; border-radius: 14px; background: #000; max-height: 72vh; }
.clip-cap { margin: 0; color: #d4d5da; }

.f-rows { display: grid; gap: 10px; margin: 0 0 20px; }
.f-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.f-row h3 { margin: 0 0 8px; font: 800 15px var(--f-head); }
.bar { display: grid; grid-template-columns: 54px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; margin: 4px 0; }
.bar .track { display: block; height: 10px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: var(--red); border-radius: 99px; }
.bar.pro .fill { background: var(--green); }
#f-score { font-size: 64px; font-weight: 900; color: var(--red); }
.final-card .btn + .btn { margin-top: 10px; width: 100%; }

.loading { position: fixed; inset: 0; display: grid; place-items: center; background: #05060a; z-index: 50; font: 700 15px var(--f-head); color: #fff; }

@media (max-width: 820px) {
  .result-card { grid-template-columns: 1fr; }
  .result-board { min-height: 260px; }
  .home-card, .intro-card, .final-card, .q-card { padding: 20px; }
}
.ex-line { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,214,10,.08); border: 1px solid rgba(255,214,10,.3); color: #f5e7a8; font-size: 14px; line-height: 1.45; }
.threat { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(254,0,0,.9); color: #fff; font: 900 18px var(--f-head);
  padding: 12px 16px; border-radius: 12px; box-shadow: 0 0 30px rgba(254,0,0,.6); animation: throb .5s ease-in-out infinite alternate; }
.threat.left { left: 12px; } .threat.right { right: 12px; } .threat.behind { left: 50%; top: auto; bottom: 24px; transform: translateX(-50%); }
@keyframes throb { from { opacity: .75; } to { opacity: 1; } }
.vs .tl { color: var(--muted); font-size: 12px; margin-top: 2px; }
#clip { background: rgba(0,0,0,.94); }

/* sign-up before the score */
.su-card h2 { font: 900 clamp(24px, 4vw, 32px)/1.1 var(--f-head); }
.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 8px; }
.field { display: grid; gap: 6px; font: 700 13px var(--f-head); color: #d4d5da; }
.field.wide { grid-column: 1 / -1; }
.field small { font: 400 12px var(--f-body); color: var(--muted); }
.input { width: 100%; font: 500 16px var(--f-body); color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--red); }
select.input option { color: #000; }
.phone-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; }
.su-err { color: #ff6b6b; min-height: 20px; margin: 0 0 8px; font-size: 14px; }
.su-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; cursor: pointer; font-size: 14px; line-height: 1.45; color: #d4d5da; }
.su-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.su-consent input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 520px) { .su-grid { grid-template-columns: 1fr; } }

/* ======================= v3 (10 Nov review call) ======================= */
:root { --blue: #2f7bff; --them: #ff3b3b; --opt: #ffd60a; }

/* landing */
.screen.landing { display: block; place-items: unset; padding: 0; backdrop-filter: none;
  background: linear-gradient(90deg, rgba(5,6,10,.97) 0%, rgba(5,6,10,.9) 44%, rgba(5,6,10,.25) 72%, rgba(5,6,10,0) 100%); }
.land { width: min(580px, 100%); padding: 22px 28px 48px; display: grid; gap: 26px; }
.land-top { display: flex; align-items: center; }
.wordmark { font: 600 18px var(--f-head); letter-spacing: -.01em; }
.wordmark b { font-weight: 900; }
.land-hero h1 { font: 900 clamp(38px, 6.2vw, 62px)/.98 var(--f-head); margin: 0 0 14px; }
.land-hero h1 em { font-style: normal; color: var(--red); display: block; }
.land-hero .lead { font-size: 17px; max-width: 30em; }
.land-cta .btn.big { font-size: 18px; box-shadow: 0 10px 40px rgba(254,0,0,.35); }
.btn-sub { font-weight: 600; opacity: .8; }
.land-h { font: 800 15px var(--f-head); letter-spacing: .02em; margin: 0 0 12px; color: #fff; }
.land-go { margin-top: 4px; }
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.role { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 6px 9px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1.5px solid var(--line); color: #fff; font-family: var(--f-head); }
.role svg { width: 100%; max-width: 92px; height: auto; display: block; }
.pi-pitch { fill: #1d4d2a; stroke: rgba(255,255,255,.5); stroke-width: 1.2; }
.pi-line { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.pi-spot { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.role-n { font-weight: 900; font-size: 15px; }
.role-l { font-weight: 600; font-size: 11px; color: #b9bbc3; line-height: 1.2; }
.role:hover { border-color: rgba(255,255,255,.35); }
.role.on { border-color: var(--red); background: rgba(254,0,0,.12); box-shadow: 0 0 0 3px rgba(254,0,0,.18); }
.role.on .pi-spot { fill: var(--red); }
.habits .cnt { display: inline-block; margin-top: 4px; font: 700 11px var(--f-head); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.key { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; }
.key-i { display: inline-flex; align-items: center; gap: 8px; }
.key.mini { font-size: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.kdot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; border: 2px solid #fff; }
.kdot.us { background: var(--blue); } .kdot.them { background: var(--them); }
.kdot.opt { background: var(--opt); color: #0e0e10; font: 900 10px var(--f-head); width: 20px; height: 20px; }
@media (max-width: 760px) {
  .screen.landing { background: linear-gradient(180deg, rgba(5,6,10,0) 0, rgba(5,6,10,.55) 30vh, rgba(5,6,10,.96) 46vh, rgba(5,6,10,.98) 100%); }
  .land { padding: 16px 16px 40px; gap: 22px; }
  .land-hero { padding-top: 24vh; }
  .roles { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .role-l { font-size: 10px; }
}
@media (max-width: 380px) { .roles { grid-template-columns: repeat(3, 1fr); } }
.device-card .btn + .btn { margin-top: 10px; }

/* decision: yellow markers on the pitch + a tap bar at the bottom */
.opt .ring { background: var(--opt); color: #0e0e10; border-color: #0e0e10; width: 48px; height: 48px; font-size: 22px;
  box-shadow: 0 0 0 6px rgba(255,214,10,.28), 0 8px 24px rgba(0,0,0,.5); }
.opt:hover .ring { background: #fff; color: #0e0e10; }
.opt.edge .ring { background: rgba(255,214,10,.75); }
.opt.edge[data-dir="l"] .ring::before { content: '◀'; position: absolute; left: -20px; font-size: 14px; color: var(--opt); }
.opt.edge[data-dir="r"] .ring::after { content: '▶'; position: absolute; right: -20px; font-size: 14px; color: var(--opt); }
.opt .ring { position: relative; }
.opt-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); width: min(980px, calc(100% - 24px));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; pointer-events: auto; }
.opt-pill { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px; color: #fff;
  background: rgba(10,10,14,.86); border: 2px solid rgba(255,214,10,.55); font: 700 15px/1.2 var(--f-head); backdrop-filter: blur(4px); animation: pop .2s ease-out; }
.opt-pill kbd { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--opt); color: #0e0e10; font: 900 17px var(--f-head); }
.opt-pill:hover, .opt-pill:focus-visible { border-color: var(--opt); background: rgba(40,36,10,.92); }
.timer { position: relative; height: 10px; }
.tsec { position: absolute; right: -54px; top: 50%; transform: translateY(-50%); font: 900 20px var(--f-head); color: #fff; min-width: 44px; }
@media (max-width: 700px) {
  .opt-bar { grid-template-columns: 1fr; gap: 6px; }
  .opt-pill { padding: 10px 12px; font-size: 14px; }
  .opt-pill kbd { width: 30px; height: 30px; }
  .tsec { right: auto; left: 50%; top: 18px; transform: translateX(-50%); font-size: 18px; }
  .decide-head { top: 70px; }
}

/* scanning: the radar */
.q-card { text-align: center; }
.q-text { margin-bottom: 4px; }
.q-hint { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.radar { width: min(330px, 78vw); margin: 0 auto; }
.radar-svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-svg .rim { fill: #12301c; stroke: rgba(255,255,255,.35); stroke-width: 2; }
.radar-svg .ring { fill: none; stroke: rgba(255,255,255,.15); stroke-dasharray: 4 5; pointer-events: none; }
.radar-svg .zone path { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.35); stroke-width: 1.5; transition: fill .15s; }
.radar-svg .zone text { fill: #fff; font: 800 15px var(--f-head); text-anchor: middle; pointer-events: none; }
.radar-svg .zone { cursor: pointer; outline: none; }
.radar-svg:not(.done) .zone:hover path, .radar-svg .zone:focus-visible path { fill: rgba(255,214,10,.28); }
.radar-svg .zone.right path { fill: rgba(34,197,94,.55); }
.radar-svg .zone.wrong path { fill: rgba(255,255,255,.22); }
.radar-svg .zone.wrong text { text-decoration: line-through; }
.radar-svg.done .zone { pointer-events: none; }
.radar-svg.reveal .zone text { opacity: .35; }
.radar-svg .you circle { fill: #fff; } .radar-svg .you path { fill: #fff; }
.radar-svg .you text { fill: #0e0e10; font: 900 8px var(--f-head); text-anchor: middle; }
.radar-svg .dot { stroke: #fff; stroke-width: 2; animation: pop .3s ease-out; }
.q-explain { min-height: 44px; margin: 10px 0 0; font-weight: 600; line-height: 1.4; }

/* split screen: the pro's eyes (3D) next to the real clip, two 16:9 panes (side by side, or stacked on a phone) */
:root { --pw: 50vw; --ph: min(calc(50vw * 9 / 16), calc(100vh - 120px)); }
body.split { background: #000; }
body.split #world { width: var(--pw); height: var(--ph); top: calc(50vh - var(--ph) / 2); left: 0; }
.compare { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.cmp-head { position: absolute; left: 12px; bottom: calc(50vh + var(--ph) / 2 + 10px); width: calc(100vw - 24px); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmp-tag { font: 800 12px var(--f-head); letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.14); }
.cmp-tag.pov { background: var(--green); color: #05230f; }
.cmp-line { font: 900 22px var(--f-head); }
.cmp-line.good { color: #6ee7a0; } .cmp-line.bad { color: #fff; }
.cmp-clip { position: absolute; left: 50vw; top: calc(50vh - var(--ph) / 2); width: var(--pw); height: var(--ph); background: #000; }
.cmp-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-clip .cmp-tag { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(0,0,0,.65); }
.cmp-skip { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); pointer-events: auto; }
@media (orientation: portrait) {
  :root { --pw: 100vw; --ph: min(calc(100vw * 9 / 16), calc(50vh - 56px)); }
  body.split #world { top: calc(50vh - var(--ph)); }
  .cmp-head { top: auto; bottom: calc(50vh + var(--ph) + 10px); }
  .cmp-clip { left: 0; top: 50vh; }
}

/* result card */
.r-tag { align-self: flex-start; font: 800 11px var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: #0e0e10; background: var(--opt); padding: 4px 8px; border-radius: 6px; }
.why { font-size: 16px; }
.board-key { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; font: 600 12px var(--f-body); background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 8px; }
.board-key span { display: inline-flex; align-items: center; gap: 6px; }
.kd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1.5px solid #fff; }
.kd.us { background: var(--blue); } .kd.them { background: var(--them); } .kd.pro { width: 16px; height: 4px; border: 0; border-radius: 2px; background: var(--green); }
.opt-tag { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
#question.revealed .q-hint { visibility: hidden; }
.timer { overflow: visible; background: none; }
.timer::before { content: ''; position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,.18); }
.timer i { position: relative; border-radius: 99px; }
.tsec, .tsec[id] { right: auto; left: 50%; top: 18px; transform: translateX(-50%); font: 900 30px var(--f-head); text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,.7); }

/* landscape phone: keep the prompt clear of the top bar, smaller prompt and seconds */
@media (max-height: 450px) {
  .decide-head { top: 58px; gap: 8px; }
  .prompt { font-size: 20px; }
  .tsec, .tsec[id] { font-size: 20px; top: 12px; }
  .opt-bar { grid-template-columns: repeat(3, 1fr); }
  .opt-pill { padding: 8px 10px; font-size: 13px; }
}
.q-text:focus { outline: none; }