/* President Predicto landing page: briefing-room look. Own stylesheet (not shared with Poop Pen / Mr. Predicto).
   Fonts: Alfa Slab One, Barlow Condensed, Barlow (SIL OFL 1.1, self-hosted, licenses in assets/fonts/). */
@font-face { font-family: "Alfa Slab One"; src: url("../assets/fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #0B1F4D; --navy-2: #13295F; --ink: #0A1633; --blue: #1E3A8A; --red: #B22234; --red-2: #D7263D;
  --white: #FFFFFF; --paper: #F6F3EA; --gold: #D9B45A; --gold-2: #F2C14E; --muted: #4A5675;
  --yes: #1F9D55; --no: #C62828; --maybe: #E0A100;
  --slab: "Alfa Slab One", "Rockwell", Georgia, serif;
  --cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --r: 14px; --wrap: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.draft-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #FFE066; color: #5a4300; font: 800 10px/1.4 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 14px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.kicker-light { color: var(--gold-2); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 0 0 rgba(215,38,61,.7); animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(215,38,61,0); } 100% { box-shadow: 0 0 0 0 rgba(215,38,61,0); } }
.sec-h { font: 400 clamp(30px, 6.4vw, 48px)/1.05 var(--slab); color: var(--navy); letter-spacing: -.01em; }
.sec-sub { margin: 8px 0 22px; color: var(--muted); font-size: 17px; }
section { padding: 56px 0; }

/* ---------- masthead + ticker ---------- */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; box-shadow: 0 2px 0 var(--red); }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-height: 44px; }
.brand-seal { width: 40px; height: 40px; }
.brand-word { font: 800 19px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.brand-word b { color: var(--gold-2); font-weight: 800; }
.mast-buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; background: var(--red); color: #fff; text-decoration: none; font: 800 15px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ticker { display: flex; align-items: stretch; height: 34px; background: #fff; color: var(--navy); border-bottom: 3px solid var(--navy); overflow: hidden; }
.ticker-flag { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--red); color: #fff; font: 800 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.ticker-win { flex: 1; overflow: hidden; position: relative; }
.ticker-run { display: flex; width: max-content; margin: 0; height: 100%; align-items: center; animation: tick 38s linear infinite; font: 800 15px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ticker-run span { display: inline-flex; align-items: center; }
.ticker-run > span::after, .tk-dup > span::after { content: "\2605"; color: var(--red); margin: 0 18px; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker-draft { align-self: center; margin-right: 8px; }

/* ---------- hero ---------- */
.hero { padding: 18px 0 26px; background:
  linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 60%, var(--paper) 100%),
  repeating-linear-gradient(90deg, #F8F6EF 0 22px, #F1EDE1 22px 44px); }
.hero-grid { display: grid; gap: 14px; }
.hero h1 { font: 400 clamp(31px, 8.6vw, 58px)/1.02 var(--slab); color: var(--navy); letter-spacing: -.01em; }
.hero-sub { margin: 10px 0 0; font-size: 17px; color: var(--muted); max-width: 34em; }
.buybox-desk { display: none; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.price { font: 400 34px/1 var(--slab); color: var(--navy); }
.prime { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px 4px 6px; border-radius: 6px; background: #0A78AA; color: #fff; font: 800 15px/1 var(--body); font-style: italic; letter-spacing: .01em; }
.prime svg { width: 16px; height: 16px; fill: #fff; }
.prime[hidden] { display: none; }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--muted); }
.rating b { color: var(--ink); }
.stars { position: relative; display: inline-block; color: #d6d0c0; letter-spacing: 1px; font-size: 17px; line-height: 1; }
.stars::before { content: "★★★★★"; position: absolute; inset: 0; width: calc(var(--r, 5) / 5 * 100%); overflow: hidden; color: #F59E0B; white-space: nowrap; }
.btn-buy { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; padding: 14px 24px; border-radius: 12px; border: 0; background: var(--red); color: #fff; text-decoration: none; font: 800 22px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 5px 0 #7d1422, 0 12px 24px rgba(178,34,52,.28); transition: transform .12s, box-shadow .12s; }
.btn-buy svg { width: 22px; height: 22px; }
.btn-buy:hover { background: var(--red-2); }
.btn-buy:active { transform: translateY(4px); box-shadow: 0 1px 0 #7d1422, 0 4px 10px rgba(178,34,52,.25); }
.btn-buy:focus-visible, .stage-btn:focus-visible, .mast-buy:focus-visible, summary:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.btn-buy-light { background: #fff; color: var(--red); box-shadow: 0 5px 0 #c9c3b3, 0 12px 24px rgba(0,0,0,.25); }
.btn-buy-light:hover { background: #fff7f7; }
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 0; padding: 0; font: 600 15px/1.2 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.trust li::before { content: "\2605"; color: var(--red); margin-right: 5px; }

/* ---------- briefing stage ---------- */
.hero-stage { min-width: 0; }
.brief-stage { position: relative; aspect-ratio: 5 / 4.4; border-radius: 16px; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 4px var(--navy), 0 0 0 7px var(--gold), 0 18px 40px rgba(11,31,77,.35); isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.room { position: absolute; inset: 0 0 64px 0; background:
  radial-gradient(ellipse at 62% 38%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, rgba(0,0,0,0) 3px 26px, rgba(255,255,255,.05) 26px 30px, rgba(0,0,0,0) 30px 52px),
  linear-gradient(180deg, #2A55B8 0%, #1C3E91 60%, #15306F 100%); }
.has-plate .room { background: var(--plate) center / cover no-repeat; }
.has-plate .bunting, .has-plate .plaque, .has-plate .floor { display: none; }
.bunting { position: absolute; top: 0; left: 0; width: 100%; height: 13%; }
.plaque { position: absolute; left: 9%; top: 18%; width: 24%; transition: opacity .3s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(180deg, #0D1B42, #08122E); box-shadow: 0 -2px 0 rgba(255,255,255,.08); }
.press { position: absolute; left: 3%; bottom: 64px; width: 33%; height: calc(84% - 54px); opacity: 0; transform: translateX(-110%); transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .2s; z-index: 2; pointer-events: none; }
.press.in { opacity: 1; transform: none; }
.press svg, .press .press-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.press .sil { overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.press.react-yes svg, .press.react-yes .press-art { animation: hop .5s ease-out 2; }
.press.react-no { transform: translateX(-14%) rotate(-6deg); filter: grayscale(.5) brightness(.85); transition: transform .8s ease-in, filter .6s; }
.press.react-maybe svg, .press.react-maybe .press-art { animation: wobble .6s ease-in-out 2; }
.press.react-yes .sil-arm-r { transform: rotate(-38deg); transform-origin: 140px 134px; transition: transform .25s; }
.press.react-no .sil-mouth { d: path("M92 88 Q102 80 112 88"); }
.press.react-yes .sil-mouth { d: path("M90 82 Q102 96 114 82"); }
@keyframes hop { 40% { transform: translateY(-9%); } }
@keyframes wobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.sil-sweat { animation: sweat 1.4s ease-in infinite; }
@keyframes sweat { to { transform: translateY(14px); opacity: 0; } }

.bubble { position: absolute; left: 3%; top: 3%; max-width: 56%; padding: 9px 12px 10px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.25); font: 600 15px/1.25 var(--body); opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: 20% 100%; transition: opacity .2s, transform .25s; z-index: 4; pointer-events: none; }
.bubble.in { opacity: 1; transform: none; }
.bubble::after { content: ""; position: absolute; left: 22%; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble b { display: block; font: 800 12px/1.1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; }
.ph-voice { display: block; margin-top: 5px; font: 600 10px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #8a6d00; background: #FFF3B0; border-radius: 4px; padding: 2px 5px; width: max-content; max-width: 100%; }
.ph-voice[hidden] { display: none; }
[data-phase="answer"] .bubble { opacity: .0; transform: translateY(-6px); }

.podium { position: absolute; left: 41%; right: 6%; bottom: 64px; height: 58%; z-index: 3; pointer-events: none; }
.podium-body { position: absolute; left: 6%; right: 6%; bottom: 0; height: 66%; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); background:
  linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,0) 18%, rgba(255,255,255,.08) 50%, rgba(0,0,0,0) 82%, rgba(0,0,0,.3)),
  repeating-linear-gradient(90deg, #6E4325 0 7px, #744829 7px 13px), #6E4325; }
.has-podium .podium-body { background: var(--podium) center bottom / contain no-repeat; clip-path: none; }
.has-podium .podium-seal, .has-podium .podium-top { display: none; }
.podium-top { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(180deg, #8A5A34, #4E2F19); }
.podium-seal { position: absolute; left: 50%; top: 46%; width: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.mic { position: absolute; left: 6%; bottom: 60%; width: 16%; height: 30%; }
.orb-wrap { position: absolute; left: 33%; bottom: 62%; width: 46%; aspect-ratio: 1; }
.orb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .12s; }
.orb.on { opacity: 1; }
.orb-glow { position: absolute; inset: -30%; border-radius: 50%; opacity: 0; transition: opacity .2s, background .2s; }
[data-glow="red"] .orb-glow { opacity: 1; background: radial-gradient(circle, rgba(255,60,60,.65), rgba(255,60,60,0) 62%); }
[data-glow="blue"] .orb-glow { opacity: 1; background: radial-gradient(circle, rgba(110,160,255,.7), rgba(110,160,255,0) 62%); }
[data-glow="green"] .orb-glow { opacity: 1; background: radial-gradient(circle, rgba(80,230,120,.6), rgba(80,230,120,0) 62%); }

.lower-third { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: stretch; background: #fff; border-top: 4px solid var(--red); z-index: 5; pointer-events: none; }
.lt-tag { flex: none; display: flex; align-items: center; justify-content: center; min-width: 84px; padding: 0 10px; background: var(--navy); color: #fff; font: 800 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.lower-third[data-cat="yes"] .lt-tag { background: var(--yes); font-size: 24px; }
.lower-third[data-cat="no"] .lt-tag { background: var(--no); font-size: 24px; }
.lower-third[data-cat="maybe"] .lt-tag { background: var(--maybe); color: var(--ink); font-size: 22px; }
.lt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 12px; color: var(--navy); font: 800 17px/1.1 var(--cond); letter-spacing: .02em; }
.lt-txt b { font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.lt-txt span { font-weight: 600; color: var(--muted); font-size: 15px; }
.lt-txt q { font: 400 16px/1.15 var(--slab); color: var(--ink); quotes: "\201C" "\201D"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-txt .lt-by { font: 800 11px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-top: 3px; }
.lt-wait::after { content: "..."; animation: dots 1s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } }

.stamp { position: absolute; left: 4%; top: 30%; z-index: 6; padding: 6px 12px; border: 4px solid currentColor; border-radius: 8px; font: 800 clamp(16px, 4.6vw, 24px)/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.9); opacity: 0; transform: rotate(-10deg) scale(1.6); pointer-events: none; }
.stamp.in { opacity: 1; transform: rotate(-10deg) scale(1); transition: transform .22s cubic-bezier(.2,.9,.3,1.4), opacity .1s; }
.stamp-yes { color: var(--yes); } .stamp-no { color: var(--no); } .stamp-maybe { color: #9a6c00; }

.tapme { position: absolute; right: 4%; top: 14%; z-index: 6; display: grid; place-items: center; width: 92px; height: 92px; pointer-events: none; color: var(--navy); font: 800 19px/1 var(--cond); letter-spacing: .04em; text-align: center; animation: burst 1.2s ease-in-out infinite; }
.tapme::before { content: ""; position: absolute; inset: 0; background: var(--gold-2); clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 100% 66%, 79% 72%, 82% 93%, 61% 84%, 50% 100%, 39% 84%, 18% 93%, 21% 72%, 0 66%, 14% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%); filter: drop-shadow(0 3px 0 var(--red)); }
.tapme span { position: relative; transform: rotate(-8deg); }
.tapme.gone { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; animation: none; }
@keyframes burst { 50% { transform: scale(1.1) rotate(4deg); } }
.ph-art { position: absolute; right: 8px; bottom: 72px; z-index: 6; padding: 3px 7px; border-radius: 4px; background: rgba(255,224,102,.95); color: #5a4300; font: 800 10px/1.2 var(--cond); letter-spacing: .1em; pointer-events: none; }
.stage-btn { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 16px; }
.puffs { position: absolute; left: 66%; top: 32%; z-index: 7; pointer-events: none; }
.puff { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 2px; background: var(--c, #fff); color: var(--gold-2); font-size: 18px; line-height: 10px; animation: puff 1s ease-out forwards; }
.puff:not(:empty) { background: none; }
@keyframes puff { to { transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(200deg); opacity: 0; } }
.demo-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; font: 600 15px/1.2 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.demo-hint svg { width: 18px; height: 18px; fill: currentColor; }
.demo-count { color: var(--muted); }
.demo-count:empty { display: none; }
.demo-note { margin-top: 10px; text-align: center; font-size: 14px; color: var(--muted); }
.buybox-mob { margin-top: 6px; }
.buybox-mob .price-row { justify-content: center; }

/* ---------- fact sheet ---------- */
.facts { background: var(--navy); color: #fff; }
.facts-grid { display: grid; gap: 24px; }
.release { position: relative; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 26px 20px 30px; box-shadow: 0 0 0 1px #d8d2c2, 8px 8px 0 var(--red); }
.release::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 24px, #fff 24px 48px, var(--blue) 48px 72px); border-radius: 6px 6px 0 0; }
.release-kicker { margin: 4px 0 6px; font: 800 13px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.release h2 { font: 400 clamp(28px, 6vw, 40px)/1.05 var(--slab); color: var(--navy); margin-bottom: 14px; }
.fact-list { margin: 0; padding: 0; list-style: none; counter-reset: f; }
.fact-list li { position: relative; padding: 10px 0 10px 40px; border-top: 1px dashed #cfc8b6; font-size: 16.5px; }
.fact-list li::before { counter-increment: f; content: counter(f); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 15px/1 var(--cond); }
.release-stamp { position: absolute; right: 14px; top: 16px; padding: 4px 10px; border: 3px solid var(--red); border-radius: 6px; color: var(--red); font: 800 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; transform: rotate(8deg); opacity: .85; }
.facts-photo { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px var(--gold); align-self: center; }

/* ---------- photos ---------- */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #e1dccd; aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- band ---------- */
.band { padding: 34px 0; background: var(--red); color: #fff; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 28px); }
.band-in { display: grid; gap: 16px; justify-items: center; text-align: center; }
.band-h { margin: 0; font: 400 clamp(26px, 6vw, 42px)/1.08 var(--slab); }
.band .btn-buy { max-width: 420px; }

/* ---------- how ---------- */
.how-grid { display: grid; gap: 22px; align-items: center; }
.how-photo { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 8px 8px 0 var(--navy); }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.step { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 0 0 1px #e1dccd; }
.step-ic { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.step-ic svg { width: 26px; height: 26px; }
.step-ic b { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font: 800 13px/22px var(--cond); text-align: center; }
.step strong { display: block; font: 800 20px/1.1 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.step span span { color: var(--muted); font-size: 15.5px; }
.steps-note { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- reviews ---------- */
.reviews { background: #fff; }
.approval { display: grid; gap: 16px; align-items: center; padding: 18px; border-radius: 14px; background: var(--navy); color: #fff; margin-bottom: 18px; }
.approval-score { display: grid; justify-items: center; gap: 4px; text-align: center; font: 600 15px/1.2 var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.approval-score b { font: 400 54px/1 var(--slab); }
.approval .stars { font-size: 22px; color: rgba(255,255,255,.25); }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hist li { display: grid; grid-template-columns: 54px 1fr 40px; gap: 10px; align-items: center; font: 600 15px/1 var(--cond); letter-spacing: .03em; }
.hist .bar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.hist .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red-2), var(--gold-2)); border-radius: 6px; }
.hist b { text-align: right; }
.reviews-featured, .review-grid { display: grid; gap: 12px; }
.reviews-featured { margin-bottom: 12px; }
.review { margin: 0; padding: 16px 16px 14px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px #e1dccd; }
.review-big { background: #fff; box-shadow: 0 0 0 2px var(--navy), 6px 6px 0 var(--red); }
.review-title { margin: 6px 0 2px; font: 800 19px/1.15 var(--cond); letter-spacing: .02em; color: var(--navy); }
.review blockquote { margin: 0; font-size: 16.5px; }
.review-big blockquote { font: 400 22px/1.25 var(--slab); color: var(--ink); }
.review blockquote.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-more { min-height: 44px; border: 0; background: none; padding: 0; color: var(--blue); font-weight: 600; cursor: pointer; }
.review figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.review-name { font-weight: 600; color: var(--ink); }
.review-vp { color: #B12704; font-weight: 600; }

/* ---------- gifts ---------- */
.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gift { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #e1dccd; display: flex; flex-direction: column; }
.gift-media { aspect-ratio: 1; display: grid; place-items: center; padding: 14%; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%), var(--navy); }
.gift[data-bg="red"] .gift-media { background-color: var(--red); background-image: radial-gradient(circle at 50% 45%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, rgba(255,255,255,0) 10px 20px); }
.gift[data-bg="blue"] .gift-media { background-color: var(--blue); }
.gift[data-bg="green"] .gift-media { background-color: #164A3A; }
.gift[data-bg="white"] .gift-media { background: radial-gradient(circle, #fff, #ECE7DA); }
.gift-media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.gift-media--photo { padding: 0; position: relative; overflow: hidden; }
.gift-media--photo img { object-fit: cover; filter: none; }
.gift-media .rights-tag { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 2px 5px; }
.gift-txt { padding: 12px 12px 14px; }
.gift h3 { font: 800 19px/1.1 var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.gift p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- faq ---------- */
.faq-wrap { max-width: 820px; }
.faq-list { margin-top: 18px; display: grid; gap: 10px; }
.faq-item { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px #e1dccd; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; font: 800 19px/1.2 var(--cond); letter-spacing: .02em; color: var(--navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); }
.plus::before, .plus::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: #fff; transition: transform .2s; }
.plus::after { transform: rotate(90deg); }
.faq-item[open] .plus::after { transform: none; }
.faq-a { padding: 0 16px 14px; color: var(--muted); }
.faq-a p { margin: 0; }

/* ---------- final ---------- */
.final { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 50%, rgba(110,160,255,.35), rgba(110,160,255,0) 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 3px, rgba(255,255,255,0) 3px 30px); pointer-events: none; }
.final-in { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; }
.final-orb { width: min(62vw, 300px); filter: drop-shadow(0 0 40px rgba(110,160,255,.6)); }
.final h2 { font: 400 clamp(34px, 8vw, 60px)/1.02 var(--slab); }
.final-sub { margin: 10px 0 16px; font-size: 17px; color: #c9d3ee; }
.price-row-light { justify-content: center; }
.price-row-light .price { color: #fff; }
.final .btn-buy { max-width: 440px; margin: 0 auto; }
.price-note { margin: 12px 0 0; font-size: 13px; color: #9fb0da; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #b9c3dd; padding: 34px 0 110px; text-align: center; font-size: 14px; }
.foot-in { display: grid; justify-items: center; gap: 6px; }
.foot p { margin: 0; }
.foot-seal { width: 64px; height: 64px; }
.foot-brand { font: 800 18px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.foot a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal { font-size: 12px; color: #8592b3; }

/* ---------- sticky ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--navy); border-top: 3px solid var(--red); transform: translateY(110%); transition: transform .25s; }
.sticky.show { transform: none; }
.sticky-thumb { width: 44px; height: 44px; object-fit: contain; flex: none; }
.sticky-info { flex: 1; min-width: 0; display: grid; color: #fff; font: 600 15px/1.2 var(--cond); letter-spacing: .03em; }
.sticky-info b { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prime-sm { padding: 1px 6px; font-size: 12px; }
.btn-sticky { width: auto; flex: none; min-height: 50px; padding: 10px 18px; font-size: 18px; box-shadow: 0 3px 0 #7d1422; }

/* confetti on buy */
.confetti { position: fixed; z-index: 100; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; color: var(--gold-2); font-size: 16px; line-height: 9px; animation: conf .9s ease-out forwards; }
@keyframes conf { to { transform: translate(var(--x), var(--y)) rotate(var(--rot)); opacity: 0; } }

/* reveals */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease var(--d, 0ms), transform .5s ease var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- breakpoints ---------- */
@media (max-width: 380px) {
  .brand-word { font-size: 16px; }
  .mast-buy { padding: 0 12px; font-size: 14px; }
  .bubble { font-size: 13px; max-width: 64%; }
  .lt-txt q { font-size: 15px; }
  .tapme { width: 80px; height: 80px; font-size: 17px; }
}
@media (max-width: 599px) {
  /* keep the hopeful's face visible under the bubble on phones */
  .press { height: calc(70% - 54px); left: 2%; }
  .bubble { padding: 7px 10px 8px; font-size: 13.5px; top: 2.5%; max-width: 62%; }
  .bubble b { font-size: 11px; }
  .ph-voice { font-size: 9px !important; }
}
@media (min-width: 600px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); }
  .gift-grid { grid-template-columns: repeat(4, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-featured { grid-template-columns: 1fr 1fr; }
  .approval { grid-template-columns: 200px 1fr; padding: 22px 28px; }
  .brief-stage { aspect-ratio: 16 / 11; }
  .bubble { font-size: 17px; max-width: 48%; }
  .lower-third, .lt-txt { min-height: 72px; }
  .lower-third { height: 72px; } .room { bottom: 72px; } .press, .podium { bottom: 72px; } .ph-art { bottom: 80px; }
  .lt-txt q { font-size: 19px; }
  .btn-buy { max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 900px) {
  section { padding: 80px 0; }
  .hero { padding: 36px 0 40px; }
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
  .buybox-desk { display: block; margin-top: 24px; }
  .buybox-desk .btn-buy { margin-left: 0; }
  .buybox-desk .trust { justify-content: flex-start; }
  .buybox-mob { display: none; }
  .facts-grid { grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
  .release { padding: 34px 34px 36px; }
  .how-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
  .final-in { grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: 48px; }
  .final .btn-buy, .price-row-light { margin-left: 0; justify-content: flex-start; }
  .sticky { display: none; }
  .foot { padding-bottom: 40px; }
  .tapme { width: 110px; height: 110px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ticker-run { transform: none; flex-wrap: nowrap; }
  .tk-dup { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
[data-phase="ask"] .plaque, [data-phase="think"] .plaque, [data-phase="answer"] .plaque { opacity: .35; }

/* critique pass 1 fixes */
.stage-btn:focus-visible { outline-offset: -5px; }
.ticker:hover .ticker-run, .ticker:focus-within .ticker-run { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; padding-left: 14px; } .tk-dup { display: none; } }

/* voice line playing: the hopeful's mouth flaps and the bubble gets an on-air dot */
@keyframes flap { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(2.2); } }
.press.talking .sil-mouth { transform-box: fill-box; transform-origin: center; animation: flap .22s ease-in-out infinite; }
[data-stage]:has(.press.talking) .bubble b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .press.talking .sil-mouth, [data-stage]:has(.press.talking) .bubble b::after { animation: none; } }

/* ---------- UGC wall: newsroom "field reports" ---------- */
.ugc { padding: 46px 0 40px; background: linear-gradient(180deg, var(--navy) 0, var(--navy) 62%, var(--paper) 62%); color: #fff; overflow: hidden; }
.ugc .kicker { color: var(--gold-2); }
.ugc-h { color: #fff; margin: 0; }
.ugc-sub { color: #C9D3EA; margin-bottom: 18px; }
.ugc-stats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--red-2); border-bottom: 1px solid rgba(255,255,255,.18); }
.ugc-stat { padding: 12px 10px; border-right: 1px solid rgba(255,255,255,.14); min-width: 0; }
.ugc-stat:nth-child(2n) { border-right: 0; }
.ugc-stat b { display: block; font: 400 clamp(26px, 7vw, 38px)/1 var(--slab); color: var(--gold-2); }
.ugc-stat span { display: block; margin-top: 4px; font: 700 13px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #E6ECF8; }
.reel-shell { position: relative; max-width: var(--wrap); margin: 0 auto; }
.reel { list-style: none; margin: 0; padding: 4px 18px 14px; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reel::-webkit-scrollbar { display: none; }
.reel:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.reel-card { flex: 0 0 auto; width: min(62vw, 240px); scroll-snap-align: start; }
.reel-tap { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #0d1a3a; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.08); color: #fff; text-align: left; }
.reel-tap:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.reel-card.loud .reel-tap { box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 3px var(--red-2); }
.reel-tap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0d1a3a; }
.reel-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 10px; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); pointer-events: none; }
.reel-plat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(10,22,51,.78); font: 800 12px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.reel-plat svg { width: 14px; height: 14px; }
.reel-bot { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 52px 12px 12px; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); pointer-events: none; }
.reel-handle { display: block; font: 800 16px/1.15 var(--cond); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-meta { display: block; margin-top: 2px; font: 600 13px/1.2 var(--body); color: #E6ECF8; }
.reel-snd { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,22,51,.8); border: 2px solid rgba(255,255,255,.7); pointer-events: none; }
.reel-snd svg { width: 20px; height: 20px; }
.loud .reel-snd { background: var(--red-2); border-color: #fff; }
.rights-tag { display: inline-block; padding: 3px 6px; border-radius: 4px; background: #FFE066; color: #5a4300; font: 800 10px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.reel-nav { display: none; }
.ugc-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.ugc-lower { display: grid; gap: 26px; margin-top: 24px; color: var(--ink); }
.ugc-h3 { margin: 0 0 10px; font: 800 18px/1.1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); border-left: 5px solid var(--red); padding-left: 10px; }
.ugc-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ugc-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e6e1d3; }
.ugc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ugc-photo .rights-tag { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 2px 5px; }
.ugc-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ugc-quote { position: relative; margin: 0; padding: 14px 14px 12px 16px; background: #fff; border-radius: 10px; border-left: 5px solid var(--blue); box-shadow: 0 2px 8px rgba(10,22,51,.08); }
.ugc-quote blockquote { margin: 0; font: 400 18px/1.25 var(--slab); color: var(--navy); padding-right: 70px; }
.ugc-quote cite { display: block; margin-top: 6px; font: 700 13px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.ugc-quote .rights-tag { position: absolute; top: 10px; right: 10px; }
@media (min-width: 600px) {
  .ugc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ugc-stat:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.14); }
  .ugc-stat:last-child { border-right: 0; }
  .reel-card { width: 230px; }
}
@media (min-width: 900px) {
  .ugc { padding: 64px 0 56px; }
  .reel-nav { display: grid; place-items: center; position: absolute; top: calc(50% - 30px); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: var(--red); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
  .reel-nav svg { width: 22px; height: 22px; }
  .reel-nav.prev { left: 2px; } .reel-nav.next { right: 2px; }
  .reel-nav:disabled { opacity: 0; pointer-events: none; }
  .ugc-lower { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.ugc { background: var(--navy); }
.ugc > .wrap > .ugc-note { color: #AFC0E3; }
.ugc-lower { background: var(--paper); border-radius: 16px; padding: 18px 14px; border-top: 5px solid var(--red); }
@media (min-width: 900px) { .ugc-lower { padding: 24px; } }
@media (min-width: 900px) { .reel { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); } }
.ugc-seen { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; background: var(--red); color: #fff; font: 800 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; width: max-content; max-width: 100%; border-radius: 6px 6px 0 0; }
.ugc-seen svg { width: 15px; height: 15px; }

/* ===== v3: real briefing room art (plate + podium + toy + 6 cutouts). Overrides the placeholder room above. ===== */
.brief-stage, .brief-stage[data-phase] { aspect-ratio: auto; }
.room { position: relative; inset: auto; aspect-ratio: 15 / 11; overflow: hidden; background: #13306b; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lower-third { position: relative; }
.press, .press.in, .press.react-no { left: 25.85%; bottom: 3.2%; width: auto; height: 76%; aspect-ratio: 1040 / 1800; opacity: 1; transform: none; filter: none; transition: none; z-index: 2; }
.press::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3.2%; height: 3.2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0)); opacity: 0; transition: opacity .35s; }
.press.in::before { opacity: 1; }
.press.in.leaving::before { opacity: 0; }
.fig { position: absolute; inset: 0; transform-origin: 50% 95%; will-change: transform; }
.fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 95%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.fig.enter { animation: figIn .7s cubic-bezier(.25,.8,.35,1) both; }
.fig.leave { animation: figOut .42s ease-in both; }
.press.talking .fig.cur img { animation: figTalk .42s ease-in-out infinite alternate; }
.press.react-yes .fig.cur { animation: figYes .46s ease-out 2; }
.press.react-no .fig.cur { animation: figNo .9s ease-in-out both; }
.press.react-no .fig.cur img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)) brightness(.86) saturate(.8); transition: filter .6s; }
.press.react-maybe .fig.cur { animation: figMaybe 1.1s ease-in-out both; }
@keyframes figIn { 0% { transform: translateX(-75%); opacity: 0; } 20% { opacity: 1; } 25% { transform: translate(-55%, -1.6%); } 50% { transform: translate(-30%, 0); } 75% { transform: translate(-8%, -1.2%); } 90% { transform: translate(2%, 0); } 100% { transform: none; opacity: 1; } }
@keyframes figOut { 0% { transform: none; opacity: 1; } 35% { transform: translate(-20%, -1.2%) scaleX(-1); } 100% { transform: translate(-90%, 0) scaleX(-1); opacity: 0; } }
@keyframes figTalk { from { transform: none; } to { transform: translateY(-.5%) scaleY(1.008); } }
@keyframes figYes { 0%, 100% { transform: none; } 40% { transform: translateY(-5%) scale(1.02); } 70% { transform: translateY(.4%) scaleY(.985); } }
@keyframes figNo { 0% { transform: none; } 12% { transform: translateX(-2.5%); } 24% { transform: translateX(2.5%); } 36% { transform: translateX(-2%); } 48% { transform: translateX(1.5%); } 100% { transform: translate(-4%, 1%) rotate(-3deg); } }
@keyframes figMaybe { 0% { transform: none; } 25% { transform: rotate(3.5deg); } 50% { transform: rotate(-3deg); } 75% { transform: rotate(2.5deg); } 100% { transform: rotate(1.5deg); } }
.podium { left: 51%; right: auto; bottom: 4.6%; width: auto; height: 66%; aspect-ratio: 1200 / 1400; z-index: 3; }
.podium-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.orb-wrap { left: 40.9%; bottom: 75.1%; width: 34.2%; z-index: 2; }
.orb-shadow { position: absolute; left: 4%; right: 4%; bottom: -5%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.25) 60%, rgba(0,0,0,0)); }
.bubble { left: 3%; top: 2.5%; max-width: 70%; z-index: 4; border: 2px solid var(--navy); }
.bubble::after { left: auto; right: 28%; }
.stamp { left: 4%; top: 5%; }
.puffs { left: 75%; top: 36%; }
.tapme { right: 2%; top: 3%; }
@media (min-width: 600px) {
  .room { aspect-ratio: 16 / 10; }
  .press, .press.in, .press.react-no { left: 33.15%; }
  .podium { left: 56%; }
  .bubble { max-width: 54%; }
  .bubble::after { right: 18%; }
  .puffs { left: 76%; }
}
@media (prefers-reduced-motion: reduce) {
  .fig.enter, .fig.leave, .press.talking .fig.cur img, .press.react-yes .fig.cur, .press.react-no .fig.cur, .press.react-maybe .fig.cur { animation: none; }
  .fig.leave { display: none; }
}

/* v3 steering: the podium is the locked toy-podium cutout (real toy baked on the flat top, its own contact shadow).
   The lit orb layers sit exactly on the baked ball (ball box 458,222 357x357 in the 1200x1600 art); the off state shows the baked toy. */
.podium { bottom: 4%; height: 75.4%; aspect-ratio: 1200 / 1600; }
.orb-wrap { left: 38.17%; top: 13.88%; bottom: auto; width: 29.75%; }
.orb { clip-path: inset(-2% -2% 8% -2%); }
.orb[data-orb="off"] { visibility: hidden; }
/* phones: the bubble sits right of the plaque column so it can never land on THE BRIEFING ROOM, tail points back at the hopeful */
@media (max-width: 599px) {
  .bubble { left: 32%; right: 2%; max-width: none; top: 2%; }
  .bubble::after { left: 9%; right: auto; }
}

/* ===== v4: 12 hopefuls, 1040x1800 cutouts (same scale + foot line as v3, just wider; box re-centered on the same spot),
   answer poses swap in (data-pose), text fallback with a read bar for hopefuls without a voice yet, lineup of head chips ===== */
.read-bar { display: none; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(19,48,107,.14); overflow: hidden; }
.read-bar::after { content: ""; display: block; height: 100%; background: var(--red); transform-origin: left center; transform: scaleX(0); }
.bubble.reading .read-bar { display: block; }
.bubble.reading .read-bar::after { animation: readFill var(--read, 3000ms) linear forwards; }
@keyframes readFill { to { transform: scaleX(1); } }
[data-stage]:has(.press.reading) .bubble b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: blink 1s steps(2) infinite; }
.press.reading .fig.cur img { animation: figTalk .6s ease-in-out infinite alternate; }
.lineup { list-style: none; margin: 10px -4px 0; padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 46px; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
.lineup::-webkit-scrollbar { display: none; }
.lineup .chip { scroll-snap-align: center; }
.lineup .chip { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2b4f9c, #13306b 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.18); transition: transform .25s, opacity .25s, box-shadow .25s, filter .25s; }
.lineup .chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.lineup .chip.done:not(.on) { opacity: .45; filter: grayscale(.6); }
.lineup .chip.on { transform: scale(1.08); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--red), 0 3px 8px rgba(0,0,0,.25); z-index: 1; }
.lineup .chip.next:not(.on)::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 22%; height: 22%; border-radius: 50%; background: #FFD23F; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 600px) { .lineup { margin: 10px 0 0; grid-auto-flow: row; grid-template-columns: repeat(12, 1fr); grid-auto-columns: auto; gap: 7px; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) {
  .press.reading .fig.cur img, [data-stage]:has(.press.reading) .bubble b::after { animation: none; }
  .bubble.reading .read-bar::after { animation-timing-function: steps(4, end); }
  .lineup .chip { transition: none; }
}

/* ===== v4.2 ===== */
/* Ball blemish fix: the lit orbs now sit exactly on the baked toy ball in the podium art (ball 464-815 x 216-571 in the
   1200x1600 art, box padded ~2px so no white rim shows) and are no longer clipped. The old box sat 7px low / 3px left and
   was cut flat at 8% from the bottom, which exposed a white crescent of the baked ball under every lit color.
   Swaps are hard cuts: the red/blue and green art put the emblem in different spots, so any crossfade showed a doubled
   emblem and label mid-swap (the "crossover"). The glow behind still fades, so the flicker reads as a swirl. */
.orb-wrap { left: 38.375%; top: 13.375%; width: 29.833%; }
.orb, .orb:not(.on) { clip-path: none; transition: none; }
/* Stats: two stats as one 720px block hung off the 'As seen on' tab, each stat centered in its half */
.ugc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 0 24px; border-bottom: 1px solid rgba(255,255,255,.18); }
.ugc-stat { padding: 16px 12px 14px; text-align: center; border-right: 1px solid rgba(255,255,255,.18); }
.ugc-stat:last-child { border-right: 0; }
.ugc-stat b { font-size: clamp(36px, 10vw, 56px); }
.ugc-stat span { margin-top: 6px; font-size: 13px; }
@media (min-width: 600px) {
  .ugc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ugc-stat { padding: 20px 24px 18px; }
  .ugc-stat:nth-child(2n) { border-right: 0; }
  .ugc-stat span { font-size: 15px; }
}
/* Lineup chips are buttons, plus a Skip control */
.lineup .chip-btn { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lineup .chip:focus-within { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--gold-2, #F2C14E), 0 3px 8px rgba(0,0,0,.25); }
.lineup .chip-btn:focus-visible { outline: none; }
.lineup .chip::after { pointer-events: none; }
@media (hover: hover) { .lineup .chip:not(.on):hover { transform: scale(1.06); opacity: 1; filter: none; } }
.skip-btn { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 8px 16px; min-height: 44px; border: 2px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 700 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.skip-btn svg { width: 12px; height: 12px; fill: currentColor; }
.skip-btn:hover { background: var(--navy); color: #fff; }
.skip-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ===== Variant B (Oct 24 2026): 16:9 hero video on top, big Amazon button, product strip; the briefing stage moves below ===== */
.hv { padding: 0 0 22px; }
.hv-stage { background: var(--navy); }
.hv-box { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0B1F4D; isolation: isolate; }
.hv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0B1F4D; }
.hv-snd { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 16px 0 12px; border: 3px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 800 17px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent; }
.hv-snd svg { width: 24px; height: 24px; flex: none; color: var(--red); }
.hv-snd.on { background: var(--red); border-color: #fff; color: #fff; }
.hv-snd.on svg { color: #fff; }
.hv-snd:not(.on)::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255,255,255,.75); animation: hvPing 1.8s ease-out infinite; pointer-events: none; }
@keyframes hvPing { 70%, 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.hv-pause { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(10,22,51,.72); color: #fff; cursor: pointer; }
.hv-pause svg { width: 20px; height: 20px; }
.hv-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0 0 0 6px; border: 4px solid #fff; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.hv-play[hidden] { display: none; }
.hv-play svg { width: 40px; height: 40px; }
.hv-snd:focus-visible, .hv-pause:focus-visible, .hv-play:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }

.hv-buy { display: grid; gap: 14px; padding-top: 14px; }
.btn-big { min-height: 66px; padding: 14px 22px; border: 3px solid var(--navy); background: #FFB800; color: var(--navy); font-size: 27px; letter-spacing: .06em; box-shadow: 0 6px 0 var(--navy), 0 14px 28px rgba(11,31,77,.28); }
.btn-big svg { width: 28px; height: 28px; }
.btn-big:hover { background: #FFC83D; }
.btn-big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--navy), 0 4px 10px rgba(11,31,77,.25); }
.btn-big:focus-visible { outline-color: var(--red); }

.prod { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e1dccd, 0 8px 22px rgba(11,31,77,.08); }
.prod-shot { position: relative; margin: 0; align-self: start; }
.prod-box { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(11,31,77,.22)); }
.prod-orb { position: absolute; right: -10px; bottom: -6px; width: 46%; height: auto; filter: drop-shadow(0 0 12px rgba(110,160,255,.75)); }
.prod-name { font: 400 26px/1.02 var(--slab); color: var(--navy); letter-spacing: -.01em; }
.prod-line { margin: 5px 0 8px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.prod .price-row { margin: 0; gap: 6px 10px; }
.prod .price { font-size: 30px; }
.prod .rating { font-size: 14px; }
.prod .trust { grid-column: 1 / -1; justify-content: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d8d2c2; }

/* the briefing stage, now its own section */
.hero { padding-top: 34px; }
.stage-h { font: 400 clamp(30px, 7.6vw, 52px)/1.04 var(--slab); color: var(--navy); letter-spacing: -.01em; }
.stage-buy { margin-top: 4px; }

@media (max-width: 380px) {
  .prod { grid-template-columns: 104px minmax(0, 1fr); padding: 10px 12px 12px; }
  .prod-name { font-size: 23px; }
  .btn-big { font-size: 24px; }
}
@media (min-width: 600px) {
  .hv-stage { padding: 18px 18px 0; background: linear-gradient(180deg, var(--navy) 0, var(--navy) 72%, var(--paper) 72%); }
  .hv-box { max-width: min(1240px, calc((100svh - 250px) * 16 / 9)); min-width: min(100%, 560px); margin: 0 auto; border-radius: 14px; box-shadow: 0 0 0 3px var(--gold), 0 18px 44px rgba(11,31,77,.4); }
  .hv-snd { left: 16px; bottom: 16px; min-height: 52px; padding: 0 20px 0 14px; font-size: 19px; }
  .hv-pause { right: 16px; bottom: 16px; }
  .hv-buy { padding-top: 20px; max-width: 1240px; }
  .btn-big { min-height: 74px; font-size: 29px; max-width: 520px; }
  .prod { grid-template-columns: 170px minmax(0, 1fr); gap: 6px 22px; padding: 16px 22px; }
  .prod-name { font-size: 34px; }
  .prod-line { font-size: 17px; }
}
@media (min-width: 900px) {
  .hv-buy { grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); grid-template-areas: "prod cta"; gap: 28px; align-items: start; padding-top: 22px; }
  .hv-cta { grid-area: cta; }
  .prod { grid-area: prod; grid-template-columns: 150px minmax(0, 1fr); }
  .prod .trust { grid-column: 2; margin-top: 4px; padding-top: 8px; }
  .btn-big { max-width: none; margin: 0; min-height: 78px; font-size: 30px; }
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-areas: "copy stage" "buy stage"; grid-template-rows: auto 1fr; align-items: start; }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-stage { grid-area: stage; }
  .stage-buy { grid-area: buy; margin-top: 18px; }
  .stage-buy .btn-buy { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hv-snd::after { animation: none; display: none; } }
.prod .rating { white-space: nowrap; }