/* DungeonFlux product page.
   The brand mark sets the one rule for color: gilt is the story (the
   dungeon master), river-blue is the engine (dice, odds, legal moves).
   Nothing else on the page uses either. */

:root {
  --night: #08111f;
  --night-2: #0d1a2e;
  --night-3: #1a2a44;
  --gilt: #e6b45e;
  --gilt-hi: #fbe2a6;
  --gilt-lo: #9a6b2a;
  --flux: #7fd0f2;
  --flux-hi: #c9efff;
  --flux-lo: #2f7fae;
  --parchment: #f1e7d0;
  --mist: #b7c0cf;
  --ember: #ff8f4a;
  --blood: #e8705a;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --head: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 8vw, 112px);
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scrollbar-color: #6f5427 var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font: 400 clamp(18px, 0.3vw + 17px, 21px)/1.55 var(--serif);
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gilt-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff3d4; }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 3.2vw + 1rem, 4rem); color: #fbf1da; }
h3 { font-size: clamp(1.35rem, 0.6vw + 1.1rem, 1.75rem); color: #fbf1da; line-height: 1.15; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--gilt); color: #1c1204; }
.skip:focus { top: 12px; }
.fine { font-size: 0.9rem; color: var(--mist); }

/* The brand mark: gilt "Dungeon", river-blue "Flux", engraved. */
.mark { font-family: var(--head); font-weight: 700; letter-spacing: -0.015em; line-height: 0.95; text-decoration: none; display: inline-block; }
.mark-dungeon, .mark-flux { -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark-dungeon { background-image: linear-gradient(180deg, #fff1c4 0%, var(--gilt) 45%, var(--gilt-lo) 100%); }
.mark-flux { background-image: linear-gradient(180deg, #eafaff 0%, var(--flux) 45%, var(--flux-lo) 100%); }
.mark-small { font-size: 1.85rem; }
.mark-hero { font-size: clamp(3rem, 6.4vw, 6.4rem); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65)); }

/* Ornate frames: gilt for story surfaces, river-blue for engine surfaces.
   Corner filigree drawn once as an SVG, tinted by the frame's color. */
.frame-gilt, .frame-flux { position: relative; --frame: var(--gilt); }
.frame-flux { --frame: var(--flux); }
.frame-gilt::before, .frame-flux::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--frame) 70%, transparent);
  box-shadow: inset 0 0 0 5px rgba(8, 17, 31, 0.55), inset 0 0 0 6px color-mix(in srgb, var(--frame) 28%, transparent);
}
.frame-gilt::after, .frame-flux::after {
  content: ""; position: absolute; inset: -7px; z-index: 4; pointer-events: none;
  background-image: var(--c-tl), var(--c-tr), var(--c-bl), var(--c-br);
  background-position: top left, top right, bottom left, bottom right;
  background-size: 44px 44px; background-repeat: no-repeat;
}
.frame-gilt::after {
  --c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%23e6b45e' stroke='%23e6b45e'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='3.2' stroke='none'/%3E%3C/svg%3E");
  --c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%23e6b45e' stroke='%23e6b45e'%3E%3Cg transform='matrix(-1 0 0 1 44 0)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='3.2' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%23e6b45e' stroke='%23e6b45e'%3E%3Cg transform='matrix(1 0 0 -1 0 44)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='3.2' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%23e6b45e' stroke='%23e6b45e'%3E%3Cg transform='matrix(-1 0 0 -1 44 44)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='3.2' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.frame-flux::after {
  --c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%237fd0f2' stroke='%237fd0f2'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Crect x='11' y='11' width='6' height='6' transform='rotate(45 14 14)' stroke='none'/%3E%3C/svg%3E");
  --c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%237fd0f2' stroke='%237fd0f2'%3E%3Cg transform='matrix(-1 0 0 1 44 0)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Crect x='11' y='11' width='6' height='6' transform='rotate(45 14 14)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%237fd0f2' stroke='%237fd0f2'%3E%3Cg transform='matrix(1 0 0 -1 0 44)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Crect x='11' y='11' width='6' height='6' transform='rotate(45 14 14)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='%237fd0f2' stroke='%237fd0f2'%3E%3Cg transform='matrix(-1 0 0 -1 44 44)'%3E%3Cpath d='M3 41V14C3 8 8 3 14 3h27' fill='none' stroke-width='2'/%3E%3Cpath d='M9 41V18c0-5 4-9 9-9h23' fill='none' stroke-width='1'/%3E%3Crect x='11' y='11' width='6' height='6' transform='rotate(45 14 14)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Buttons: gilt = start playing; flux = an engine action (a roll); ghost = look first. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px;
  font: 600 0.84rem/1.15 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn-gilt {
  color: #241604;
  background: linear-gradient(180deg, #fbe2a6 0%, var(--gilt) 55%, #c98f3a 100%);
  border-color: #fff0c8;
  box-shadow: 0 0 0 3px rgba(8, 17, 31, 0.6), 0 0 0 4px rgba(230, 180, 94, 0.55), 0 10px 32px -8px rgba(230, 180, 94, 0.55);
}
.btn-gilt:hover { color: #241604; background: linear-gradient(180deg, #fff1cc 0%, #f1c677 55%, #d9a04a 100%); box-shadow: 0 0 0 3px rgba(8, 17, 31, 0.6), 0 0 0 4px rgba(251, 226, 166, 0.9), 0 12px 40px -6px rgba(230, 180, 94, 0.75); }
.btn-ghost { color: var(--parchment); background: rgba(8, 17, 31, 0.45); border-color: rgba(241, 231, 208, 0.45); }
.btn-ghost:hover { color: #fff; border-color: var(--gilt-hi); }
.btn-flux { color: #03243a; background: linear-gradient(180deg, var(--flux-hi) 0%, var(--flux) 60%, #4fa9d6 100%); border-color: #dff6ff; }
.btn-flux:hover { background: linear-gradient(180deg, #e6f8ff 0%, #a5e0f8 60%, #6cbde4 100%); }
.btn-flux[disabled] { opacity: 0.6; cursor: progress; }
.btn-small { min-height: 42px; padding: 8px 18px; font-size: 0.76rem; }
.btn-large { min-height: 58px; padding: 16px 40px; font-size: 0.92rem; }
.btn-block { width: 100%; }
.after { display: grid; gap: 4px; }
.btn-link { background: none; border: 0; padding: 10px; min-height: 44px; color: var(--flux); font: italic 500 1rem/1 var(--serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: center; }
.btn-link:hover { color: var(--flux-hi); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Top bar: invisible over the hero, solid once you scroll. */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color 240ms ease, border-color 240ms ease; border-bottom: 1px solid transparent; }
.bar.is-solid { background: rgba(8, 17, 31, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: rgba(230, 180, 94, 0.2); }
.bar-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; }
.bar .mark { transition: opacity 160ms ease; }
.bar:not(.is-solid) .mark { opacity: 0; pointer-events: none; }
.bar-nav a { color: var(--parchment); text-decoration: none; font: 500 0.74rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.bar-nav a:hover { opacity: 1; color: var(--gilt-hi); }

/* 1. Hero: copy on the left, the product on the right. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(760px, 100svh, 980px); display: grid; align-items: center; padding: 112px 0 clamp(72px, 8vw, 112px); }
.hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; animation: drift 40s ease-in-out infinite alternate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 15% 50%, rgba(8, 17, 31, 0.85) 0%, rgba(8, 17, 31, 0.35) 70%),
    linear-gradient(180deg, rgba(8, 17, 31, 0.6) 0%, rgba(8, 17, 31, 0.25) 30%, rgba(8, 17, 31, 0.45) 70%, var(--night) 100%);
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.hero-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.kicker { display: flex; align-items: center; gap: 14px; font: 600 0.8rem/1.3 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt); }
.kicker::after { content: ""; flex: 0 1 64px; height: 1px; background: linear-gradient(90deg, var(--gilt), transparent); }
.hero-lede { font-size: clamp(1.1rem, 0.3vw + 1rem, 1.3rem); max-width: 32rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.hero-fine { font-size: 0.95rem; color: var(--mist); max-width: 30rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.hero .cta-row { margin-top: 6px; align-items: center; }

/* The TV set and the phone in hand. */
.hero-product { margin: 24px 0 56px; position: relative; min-width: 0; }
.tv-set {
  position: relative; aspect-ratio: 1672 / 941; background: #000; border-radius: 3px;
  box-shadow: 0 0 0 10px #04070d, 0 0 0 11px rgba(183, 192, 207, 0.28), 0 50px 100px -30px rgba(0, 0, 0, 0.95), 0 0 140px -30px rgba(255, 143, 74, 0.4);
}
.tv-set-art { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

/* The dungeon master's narration, laid over the TV's own narration bar. */
.narration {
  position: absolute; left: 6%; right: 6%; top: 62%; bottom: -8%;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(12px, 2vw, 22px); align-items: center;
  padding: clamp(12px, 1.6vw, 20px) clamp(14px, 2.4vw, 28px);
  background: #0a1424;
  border: 1px solid rgba(230, 180, 94, 0.6);
  box-shadow: 0 0 0 4px rgba(8, 17, 31, 0.6), 0 0 0 5px rgba(230, 180, 94, 0.22), 0 24px 48px -16px rgba(0, 0, 0, 0.9);
}
.narration-avatar { width: clamp(56px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gilt), 0 0 24px rgba(255, 143, 74, 0.35); }
.narration-body { display: grid; gap: 6px; min-width: 0; transition: opacity 280ms ease; }
.narration-body.is-swapping, .narration-avatar.is-swapping { opacity: 0; }
.narration-avatar { transition: opacity 280ms ease; }
.narration-avatar[src$="vell-avatar.webp"] { object-position: 68% 24%; }
.narration-who { display: flex; align-items: center; gap: 14px; font: 600 0.72rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gilt); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.wave i { width: 2px; height: 100%; background: var(--gilt); border-radius: 1px; transform-origin: center; animation: speak 1.1s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -0.3s; } .wave i:nth-child(3n+1) { animation-delay: -0.7s; } .wave i:nth-child(4n) { animation-delay: -0.5s; } .wave i:nth-child(5n) { animation-delay: -0.9s; }
@keyframes speak { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.narration.is-done .wave i { animation: none; transform: scaleY(0.25); }
.narration-text { margin: 0; font: italic 400 clamp(1rem, 0.5vw + 0.85rem, 1.25rem)/1.42 var(--serif); color: var(--parchment); }
.narration-text .caret { display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--gilt); animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pocket {
  position: absolute; right: -3%; top: -9%; width: clamp(150px, 24%, 206px);
  display: grid; gap: 7px; padding: 30px 12px 14px;
  border-radius: 24px; background: linear-gradient(180deg, #11223a, #0a1526);
  border: 1px solid rgba(127, 208, 242, 0.4);
  box-shadow: 0 0 0 6px #03070e, 0 0 0 7px rgba(183, 192, 207, 0.3), 0 30px 60px -12px rgba(0, 0, 0, 0.95);
  rotate: 4deg;
}
.pocket::before { content: ""; position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 54px; height: 13px; border-radius: 8px; background: #03070e; }
.pocket-hero { font: 700 1.1rem/1.1 var(--head); text-align: center; }
.pocket-sub { font-size: 0.8rem; color: var(--mist); text-align: center; margin-top: -4px; }
.pocket-label { font: 600 0.62rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--flux); margin-top: 6px; }
.pocket-move { display: block; padding: 7px 9px; border: 1px solid rgba(127, 208, 242, 0.35); border-radius: 3px; font-size: 0.82rem; line-height: 1.2; color: var(--parchment); }
.pocket-move { transition: transform 160ms ease, box-shadow 160ms ease; }
.pocket-move.is-pressed { transform: scale(0.95); box-shadow: 0 0 0 3px rgba(127, 208, 242, 0.45), 0 0 24px rgba(127, 208, 242, 0.6); }
.pocket-move.is-lit { background: linear-gradient(180deg, var(--flux-hi), var(--flux)); color: #03243a; border-color: #dff6ff; font-weight: 600; }
.pocket-move.is-off { color: #7d889a; border-style: dashed; border-color: rgba(183, 192, 207, 0.25); }
.pocket-move em { display: block; font-size: 0.72rem; }

/* The phone beside the pinned TV in "One night at the table". */
.mini {
  position: absolute; z-index: 6; right: 0; bottom: 0; width: 176px;
  padding: 30px 12px 14px; border-radius: 24px;
  background: linear-gradient(180deg, #11223a, #0a1526);
  border: 1px solid rgba(127, 208, 242, 0.4);
  box-shadow: 0 0 0 6px #03070e, 0 0 0 7px rgba(183, 192, 207, 0.3), 0 30px 60px -12px rgba(0, 0, 0, 0.95);
}
.mini::before { content: ""; position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 54px; height: 13px; border-radius: 8px; background: #03070e; }
.mini-screen { display: none; gap: 7px; }
.mini-screen.is-on { display: grid; animation: fadein 300ms ease both; }
.mini-title { font: 700 1.1rem/1.15 var(--head); text-align: center; margin-bottom: 4px; }
.mini-field, .mini-row, .mini-move, .mini-chip { display: block; padding: 7px 9px; border: 1px solid rgba(183, 192, 207, 0.25); border-radius: 3px; font-size: 0.82rem; line-height: 1.2; }
.mini-field { color: var(--parchment); background: rgba(255, 255, 255, 0.04); }
.mini-row { border-color: transparent; padding-block: 3px; color: var(--mist); text-align: center; }
.mini-move, .mini-chip { border-color: rgba(127, 208, 242, 0.35); }
.mini-move b { float: right; font-weight: 600; }
.mini-move.is-lit, .mini-chip.is-lit { background: linear-gradient(180deg, var(--flux-hi), var(--flux)); color: #03243a; border-color: #dff6ff; font-weight: 600; }
.mini-btn { display: block; margin-top: 4px; padding: 8px; text-align: center; border-radius: 3px; font: 600 0.62rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #241604; background: linear-gradient(180deg, #fbe2a6, var(--gilt)); }
.mini-wait { display: block; margin-top: 6px; text-align: center; font-style: italic; font-size: 0.82rem; color: var(--gilt); }

/* Section heads */
.section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { color: var(--mist); font-size: 1.15rem; }
.section-head-center { justify-items: center; text-align: center; margin-inline: auto; }
.section-head .act, .next-head .act { display: flex; align-items: center; gap: 12px; font: 600 0.78rem/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gilt); }
.act::before, .act::after { content: ""; flex: none; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gilt)); }
.act::after { background: linear-gradient(90deg, var(--gilt), transparent); }
.act span::before, .act span::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--gilt); rotate: 45deg; vertical-align: 0.2em; margin: 0 10px; }

/* 2. One night at the table */
.night { padding-block: var(--section); background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.night-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.tv { position: sticky; top: 112px; padding: 0 40px 56px 0; }
.tv-frame { aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 9px #04070d, 0 0 0 10px rgba(183, 192, 207, 0.25), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(230, 180, 94, 0.35); }
.tv-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
.tv-shot.is-on { opacity: 1; }
.beats { list-style: none; margin: 0; padding: 0; counter-reset: beat; }
.beat { counter-increment: beat; display: grid; gap: 12px; padding: clamp(28px, 6vh, 64px) 0; min-height: 32vh; align-content: center; border-top: 1px solid rgba(230, 180, 94, 0.14); opacity: 0.75; transition: opacity 300ms ease; }
.beat:first-child { border-top: 0; }
.beat.is-on { opacity: 1; }
.beat-shot { display: none; }
.beat h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.6rem, 0.9vw + 1.2rem, 2.2rem); }
.beat h3::before { content: counter(beat); font: 600 1rem/1 var(--display); color: var(--night); background: var(--gilt); width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; translate: 0 -0.2em; }
.on-tv, .on-phone { position: relative; padding-left: 34px; color: var(--mist); }
.on-tv::before, .on-phone::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.on-tv::before { color: var(--gilt); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2' y='4' width='20' height='13' rx='1.5'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.on-phone::before { color: var(--flux); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
.on-tv strong, .on-phone strong { color: var(--parchment); }

/* 3. The stage: tap the phone, the die lands on the TV. */
.stage { padding-block: clamp(64px, 7vw, 104px); background: radial-gradient(80% 60% at 30% 40%, rgba(255, 143, 74, 0.1), transparent 70%), var(--night-2); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; align-items: start; }
.scene { aspect-ratio: 21 / 9; background: #000; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.95); }
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: filter 400ms ease; clip-path: inset(0); }
.scene.is-rolling .scene-art { filter: brightness(0.55) saturate(0.8); }
.die-drop { position: absolute; inset: 0; z-index: 2; clip-path: inset(0); display: grid; place-items: center; align-content: start; padding-top: 3.5%; gap: 10px; pointer-events: none; opacity: 0; }
.scene.is-rolling .die-drop, .scene.is-settled .die-drop { opacity: 1; }
.scene.is-settled .scene-art { filter: brightness(0.45) saturate(0.85); }
.d20 { width: clamp(84px, 9vw, 136px); overflow: visible; filter: drop-shadow(0 0 24px rgba(127, 208, 242, 0.55)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.8)); }
.d20-body { fill: #1f5f86; stroke: var(--flux-hi); stroke-width: 1.5; stroke-linejoin: round; }
.d20-face { fill: #3f98c7; stroke: var(--flux-hi); stroke-width: 1; stroke-linejoin: round; }
.d20-edges { fill: none; stroke: rgba(201, 239, 255, 0.55); stroke-width: 0.8; }
.d20-num { font: 700 20px/1 var(--display); fill: #fff; }
.scene.is-rolling .d20 { animation: tumble 700ms cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes tumble { 0% { transform: translateY(-140%) rotate(-260deg) scale(0.6); } 70% { transform: translateY(6%) rotate(12deg) scale(1.05); } 100% { transform: none; } }
.scene.is-hit .d20-body { fill: #2a7ea8; } .scene.is-hit .d20 { filter: drop-shadow(0 0 40px rgba(127, 208, 242, 0.95)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.8)); }
.scene.is-miss .d20-body { fill: #5a2a2a; stroke: #ffb9a8; } .scene.is-miss .d20-face { fill: #8c3b33; stroke: #ffb9a8; } .scene.is-miss .d20 { filter: drop-shadow(0 0 30px rgba(232, 112, 90, 0.7)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.8)); }
.die-verdict { display: grid; justify-items: center; gap: 6px; padding: 10px 22px; background: rgba(6, 12, 22, 0.85); border-top: 1px solid var(--flux); border-bottom: 1px solid var(--flux); font: 500 clamp(1.1rem, 1vw + 0.8rem, 1.5rem)/1 var(--serif); color: var(--parchment); font-variant-numeric: lining-nums; }
.die-verdict:empty { visibility: hidden; }
.die-verdict b { font: 700 clamp(0.9rem, 0.6vw + 0.75rem, 1.15rem)/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--flux-hi); }
.scene.is-miss .die-verdict { border-color: var(--blood); }
.scene.is-miss .die-verdict b { color: #ffc2b4; }
.subtitle {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(16px, 3vw, 32px); translate: -50% 0; width: min(88%, 720px);
  padding: 14px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.72), rgba(8, 14, 26, 0.9));
  border-top: 1px solid rgba(230, 180, 94, 0.55); border-bottom: 1px solid rgba(230, 180, 94, 0.55);
}
.subtitle-who { display: block; font: 600 0.7rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt); margin-bottom: 6px; }
.subtitle-text { font: italic 400 clamp(1rem, 0.5vw + 0.9rem, 1.25rem)/1.4 var(--serif); }
.subtitle.is-new { animation: fadein 500ms ease both; }
@keyframes fadein { from { opacity: 0; } }

.handset { margin: 72px 0 0 -40px; position: relative; z-index: 5; }
.handset-body {
  position: relative; display: grid; gap: 16px; padding: 44px 20px 24px;
  border-radius: 34px;
  background: linear-gradient(180deg, #11223a 0%, #0a1526 100%);
  border: 1px solid rgba(127, 208, 242, 0.35);
  box-shadow: 0 0 0 9px #03070e, 0 0 0 10px rgba(183, 192, 207, 0.3), 0 50px 90px -20px rgba(0, 0, 0, 0.95);
}
.handset-notch { position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 90px; height: 22px; border-radius: 12px; background: #03070e; }
.handset-hero { font: 700 1.25rem/1.2 var(--head); text-align: center; color: var(--parchment); }
.check { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(127, 208, 242, 0.45); background: rgba(127, 208, 242, 0.07); border-radius: var(--r); }
.check-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.check-name { font: 700 1.4rem/1 var(--head); color: var(--flux-hi); }
.check-odds { font-size: 1rem; color: var(--flux); font-variant-numeric: lining-nums; }
.check-math { font-size: 1rem; color: var(--mist); font-variant-numeric: lining-nums tabular-nums; }
.handset-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.handset-moves li { padding: 11px 14px; border: 1px solid rgba(183, 192, 207, 0.22); border-radius: var(--r); font-size: 1rem; color: var(--mist); }

/* 4. Fair play */
.fair { padding-block: var(--section); background: var(--night); }
.plaques { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.plaque { padding: clamp(32px, 4vw, 52px); display: grid; gap: 6px; align-content: start; }
.plaque-story { background: radial-gradient(120% 90% at 0% 0%, rgba(230, 180, 94, 0.14), transparent 60%), var(--night-2); }
.plaque-engine { background: radial-gradient(120% 90% at 100% 0%, rgba(127, 208, 242, 0.13), transparent 60%), var(--night-2); }
.plaque h3 { font-size: clamp(1.7rem, 1vw + 1.2rem, 2.3rem); display: flex; align-items: center; gap: 16px; }
.emblem { flex: none; width: 52px; height: 52px; }
.emblem-dm { border-radius: 50%; box-shadow: 0 0 0 2px var(--gilt); }
.emblem-d20 polygon { fill: #1f5f86; stroke: var(--flux-hi); stroke-width: 3; stroke-linejoin: round; }
.emblem-d20 path { fill: none; stroke: rgba(201, 239, 255, 0.6); stroke-width: 2; }
.plaque-story h3 { color: var(--gilt-hi); } .plaque-engine h3 { color: var(--flux-hi); }
.plaque-sub { font-style: italic; color: var(--mist); font-size: 1.1rem; margin-bottom: 18px; }
.plaque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plaque li { position: relative; padding-left: 26px; }
.plaque li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; rotate: 45deg; }
.plaque-story li::before { background: var(--gilt); } .plaque-engine li::before { background: var(--flux); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid rgba(230, 180, 94, 0.18); }
.promises > div { display: grid; gap: 10px; align-content: start; }
.glyph { width: 34px; height: 34px; fill: none; stroke: var(--gilt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.promises p { color: var(--mist); }

/* 5. Next */
.next { padding-block: var(--section); background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); overflow: hidden; }
.next-head { display: grid; gap: 18px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.next-head .act { grid-column: 1 / -1; }
.next-head h2, .next-head p { max-width: 38rem; }
.next-head p { color: var(--mist); font-size: 1.15rem; }
.next-head strong { color: var(--parchment); font-weight: 600; }
.reel { --edge: max(var(--gutter), (100vw - var(--wrap)) / 2); list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0 var(--edge) 16px; scroll-padding-inline: var(--edge); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 34vw, 480px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel:focus-visible { outline-offset: -2px; }
.reel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: clamp(32px, 4vw, 48px); }
.reel-nav + .reel { margin-top: 16px; }
.reel-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer; background: rgba(8, 17, 31, 0.6); border: 1px solid rgba(230, 180, 94, 0.5); border-radius: 50%; color: var(--gilt); transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
.reel-btn:hover { background: rgba(230, 180, 94, 0.14); border-color: var(--gilt-hi); color: var(--gilt-hi); }
.reel-btn[disabled] { opacity: 0.3; cursor: default; }
.reel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reel li { scroll-snap-align: start; position: relative; }
.reel img { aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid rgba(230, 180, 94, 0.3); }
.reel span { display: block; margin-top: 10px; font: 600 1.3rem/1.2 var(--head); color: var(--parchment); }
.next-foot { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: 12px; }
.follow { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--night); border: 1px solid rgba(241, 231, 208, 0.22); }
.follow h3 { margin-bottom: 8px; }
.follow p { color: var(--mist); max-width: 36rem; }
.follow-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* FAQ */
.faq { padding-block: var(--section); background: var(--night-2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.faq-side { position: sticky; top: 112px; display: grid; gap: 20px; justify-items: start; }
.needs { display: grid; gap: 12px; padding: 22px 24px; border: 1px solid rgba(230, 180, 94, 0.3); background: rgba(230, 180, 94, 0.05); width: 100%; max-width: 22rem; }
.needs-title { font: 600 0.74rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt); }
.needs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.needs li { position: relative; padding-left: 20px; color: var(--parchment); }
.needs li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; rotate: 45deg; background: var(--gilt); }
.faq-list { border-top: 1px solid rgba(230, 180, 94, 0.25); }
details { border-bottom: 1px solid rgba(230, 180, 94, 0.25); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font: 600 1.45rem/1.25 var(--head); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 500 1.6rem/1 var(--display); color: var(--gilt); transition: rotate 180ms ease; }
details[open] summary::after { rotate: 45deg; }
summary:hover { color: var(--gilt-hi); }
details p { padding: 0 4px 24px; color: var(--mist); max-width: 42rem; }

/* Closing */
.closing { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(120px, 16vw, 220px); }
.closing-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 70% at 50% 55%, rgba(8, 17, 31, 0.7), rgba(8, 17, 31, 0.25) 70%), linear-gradient(180deg, var(--night-2) 0%, transparent 25%, transparent 75%, var(--night) 100%); }
.closing-inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.closing-inner h2 { font-size: clamp(3rem, 5vw + 1rem, 6rem); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8); }
.closing-inner p { text-wrap: balance; font-size: 1.25rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); max-width: 32rem; }
.closing-inner .btn { margin-top: 12px; }

/* Footer */
.foot { padding-block: 44px 56px; background: var(--night); border-top: 1px solid rgba(230, 180, 94, 0.2); }
.foot-inner { display: grid; gap: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot-links a { color: var(--parchment); }
.foot .fine { max-width: 62rem; }

/* Wide tablet: the stage stacks the phone under the TV. */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 40rem; }
  .hero-product { margin: 32px 24px 56px 0; }
  .next-head { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .handset { margin: 32px auto 0; width: min(100%, 360px); }
  .scene { aspect-ratio: 16 / 10; }
  .scene-art { object-position: 70% 40%; }
  .die-drop { align-content: start; padding-top: 5%; }
  .d20 { width: clamp(84px, 13vw, 130px); }
}

/* Tablet: the pinned TV gives way to one image per beat. */
@media (max-width: 900px) {
  .bar-nav { display: none; }
  .bar-inner { justify-content: space-between; }
  .night-grid { grid-template-columns: 1fr; }
  .tv { display: none; }
  .follow { grid-template-columns: minmax(0, 1fr); }
  .beat { opacity: 1; min-height: 0; padding: 36px 0; }
  .beat-shot { display: block; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(230, 180, 94, 0.35); margin-bottom: 8px; }
  .plaques { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; max-width: 40rem; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 600px) {
  .hero { align-items: end; padding-top: 96px; }
  .hero::before { background: linear-gradient(180deg, rgba(8, 17, 31, 0.5) 0%, rgba(8, 17, 31, 0.35) 25%, rgba(8, 17, 31, 0.85) 55%, var(--night) 100%); }
  .cta-row .btn { flex: 1 1 100%; }
  .mark-hero { font-size: clamp(2.6rem, 14vw, 4rem); }
  .kicker::after { display: none; }
  .kicker { font-size: 0.68rem; letter-spacing: 0.14em; text-wrap: balance; }
  .tv-set { aspect-ratio: auto; }
  .tv-set-art { height: auto; aspect-ratio: 1672 / 600; object-position: 50% 0; }
  .hero-product { margin: 8px 0 0; }
  .narration { position: relative; inset: auto; margin: 0; align-items: start; box-shadow: none; border-top: 0; }
  .narration-avatar { width: 48px; }
  .pocket { display: none; }
  .follow-actions .btn { flex: 1 1 100%; }
  .scene { aspect-ratio: 4 / 5; }
  .scene-art { object-position: 82% 50%; }
  .subtitle { width: calc(100% - 24px); padding: 12px 14px; }
  .bar .btn-small { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art { animation: none; }
  .wave i { animation: none; transform: scaleY(0.5); }
  .tv-shot, .beat { transition: none; }
  .scene.is-rolling .d20 { animation: none; }
  .subtitle.is-new, .mini-screen.is-on { animation: none; }
}
.stage .section-head { margin-bottom: clamp(28px, 3vw, 40px); }