/* ═══════════════════════════════════════════════════════════════════════════
   StatBlockFit: the whole site's stylesheet. GENERATED by scripts/build-site.mjs.

   ONE FILE, LINKED BY EVERY PAGE, written by the same script that writes the
   pages so the two cannot drift (#28). The colour values are the app's own
   StatBlockRPG skin from design-tokens.js, repeated here as custom properties
   because a static page cannot import a CommonJS module (#367).

   ONE INLINE SCRIPT AND NO EXTERNAL REQUEST: the pointer light and the
   floating bar read the --mx/--my/--lit and data-scroll that the page's one
   inline script writes; the mobile menu is a <details>, the rest of the
   motion is CSS, the type is the system stack (the app defers custom fonts
   too, so character comes from weight, case and tracking).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #030305;
  --base: #07080C;
  --surface: #0E0F15;
  --elevated: #15161E;
  --overlay: #1C1D27;

  --border-subtle: #1B1C26;
  --border: #282A38;
  --border-strong: #3A3D4F;

  --text-primary: #F2F4FF;
  --text-secondary: #A6ABC6;
  --text-tertiary: #7F859C;
  --text-inverse: #07080C;

  --pulse: #10B981;
  --pulse-glow: #6EE7B7;
  --pulse-faint: #08211B;
  --bone: #F5F3EF;
  --bone-pressed: #DAD6CE;

  --cyan: #2BE4FF;
  --magenta: #FF3DAE;
  --amber: #FFB020;

  --str: #F2453D;
  --dex: #A3E635;
  --con: #FFC53D;
  --int: #4C9AFF;
  --wis: #B18AFF;
  --cha: #FF6BAA;

  --glass: rgba(21, 22, 30, 0.58);
  --glass-strong: rgba(21, 22, 30, 0.78);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.06);

  --text-hero: #CFD3E6;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 18px;
  --wrap: 72rem;
  /* The motion curves: a fast start that settles softly (an object arriving), and a symmetric one for a thing that passes through. Scroll-driven animations map scroll PROGRESS through them, so the reveal completes early in its range and the last third is the settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* main takes every spare pixel, so the footer is pushed to the foot of the viewport on a page shorter than it. */
main { flex: 1 0 auto; display: block; }
footer { flex: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pulse-glow); text-decoration: none; }
a:hover { text-decoration: underline; }
/* No border-radius here: the outline follows the element's own corners, and a 4px radius would square off every pill. */
a:focus-visible, summary:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.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; }
address { font-style: normal; }
h1, h2, .h2--xl, .face__title { text-wrap: balance; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* The skip link: off-screen until a keyboard reaches it, then a pill over the top bar. */
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--bone); color: var(--text-inverse); font-weight: 700; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.eyebrow--pulse { color: var(--pulse); }
h2.eyebrow { max-width: none; line-height: 1.4; color: var(--pulse); }
.kicker {
  margin: 0 0 0.5rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--pulse);
}
h1, h2, h3 { color: #fff; }
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
h1.display {
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 60px rgba(16,185,129,0.25);
}
h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 24ch;
}
h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--text-secondary);
  max-width: 56ch;
}
.lede--hero { color: var(--text-hero); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 40ch; }
.avail { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--text-secondary); letter-spacing: 0.01em; }
.section-lede { margin: 1.1rem 0 0; color: var(--text-secondary); max-width: 58ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.65; }
.note { margin: 1.75rem 0 0; font-size: 0.86rem; color: var(--text-tertiary); max-width: 70ch; }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  white-space: nowrap;
}
.pill:hover { text-decoration: none; transform: translateY(-1px); }
.pill--solid { background: var(--bone); color: var(--text-inverse); box-shadow: 0 10px 30px rgba(245,243,239,0.12); }
.pill--solid:hover { background: #fff; }
.pill--solid small { font-weight: 600; color: #5A5750; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.1em; }
.pill--glass {
  position: relative; isolation: isolate;
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pill--glass:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.42); }
.pill--sm { padding: 0.6rem 1.1rem; font-size: 0.84rem; }
.pill[aria-disabled="true"] { cursor: default; opacity: 0.85; transform: none; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ── Glass ────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.03)), var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0,0,0,0.25);
}
/*
 * THE LIGHT UNDER THE GLASS. The script writes the pointer's position into
 * --mx/--my on each surface and --lit while it is near; the ::before is a soft
 * radial light at that point and the ::after is the 1px edge lit from the same
 * point (a gradient border, cut to the border by two masks). Both sit UNDER
 * the content (z-index -1 inside the surface's own stacking context) and both
 * rest at zero, so a page with no pointer, no script or reduced motion is the
 * plain glass. The transitions use the site's own curves (#818).
 */
.glass::before, .store::before, .pill--glass::before, .topbar__in::before, .fact::before, .step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), rgba(110,231,183,0.05) 34%, transparent 64%);
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass::after, .store::after, .pill--glass::after, .topbar__in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.7), rgba(110,231,183,0.22) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass > * { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .glass::before, .glass::after, .store::before, .store::after, .pill--glass::before, .pill--glass::after, .topbar__in::before, .topbar__in::after, .fact::before, .step::before { display: none; }
}
.card { padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* The card's INDEX, drawn large and faint top right; counted per grid so every page numbers its own run. */
.grid { counter-reset: card; }
.grid > .card { counter-increment: card; }
.card__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.card__n { position: absolute; right: 0.6rem; top: -0.35rem; font-size: 4.6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); user-select: none; transition: -webkit-text-stroke-color 420ms var(--ease-out); }
.grid > .card .card__n::before { content: counter(card, decimal-leading-zero); }
@media (hover: hover) { .grid > .card:hover .card__n { -webkit-text-stroke-color: rgba(110,231,183,0.3); } }
/* and a three-across grid breathes: the middle card sits lower on a wide screen */
@media (min-width: 900px) { .grid--3 > .card:nth-child(3n + 2) { margin-top: 2.2rem; } .grid--3 > .card:nth-child(3n) { margin-top: 1.1rem; } }
.card p, .card li { margin: 0; color: var(--text-secondary); font-size: 0.96rem; }
.card ul { margin: 0.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.card .pill { align-self: flex-start; margin-top: 0.7rem; }
.card--quiet { background: var(--glass-strong); }
.card--quiet p { color: var(--text-secondary); }
.chip {
  display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--pulse-glow); background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.35);
}
.chip--free { color: var(--amber); background: rgba(255,176,32,0.12); border-color: rgba(255,176,32,0.35); }

/* ── Top bar: frosted glass, fixed, edge to edge ──────────────────────────── */
/*
 * THE FLOATING BAR (2026-09-18, #820). Detached from the top edge as a glass
 * capsule, it rides the scroll: past the top it tightens, on the way down it
 * lifts out of the way, on the way up it returns, on a spring curve. The
 * direction comes from the script's data-scroll on <html>; with no script (or
 * reduced motion) the bar simply stays, which is the resting state.
 */
.topbar {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 50;
  padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
  pointer-events: none;
  transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out);
}
/* Hidden means hidden: visibility follows the slide so the invisible links leave the tab order and hit testing (WCAG 2.4.7), and the bar returns for keyboard focus or an open menu. */
html[data-scroll="down"] .topbar { transform: translateY(calc(-100% - 24px)); opacity: 0; visibility: hidden; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out), visibility 0s 640ms; }
html[data-scroll="down"] .topbar:focus-within { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
html[data-scroll="down"] .topbar:has(details[open]) { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
.topbar__in {
  pointer-events: auto;
  position: relative; isolation: isolate;
  width: min(100%, 80rem); margin-inline: auto;
  min-height: 60px; padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  display: flex; align-items: center; gap: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.03)), rgba(7, 8, 12, 0.62);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: min-height 420ms var(--ease-out), background 420ms var(--ease-out), box-shadow 420ms var(--ease-out), width 420ms var(--ease-out);
}
html[data-scrolled="1"] .topbar__in { min-height: 54px; width: min(100%, 72rem); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 50%, rgba(255,255,255,0.025)), rgba(7, 8, 12, 0.8); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
.topbar__in > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-primary); font-weight: 800; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 0 10px rgba(16,185,129,0.45)); }
.brand__name { font-size: 1.05rem; }
.navlinks { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.navlink {
  color: var(--text-secondary); font-weight: 600; font-size: 0.93rem;
  padding: 0.5rem 0.8rem; border-radius: 999px;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.navlink:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.navlink[aria-current] { color: #fff; background: rgba(255,255,255,0.09); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* The mobile menu: a <details>, so it needs no script. */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; }
@media (forced-colors: active) { .menu > summary span { background: CanvasText; } }
/* Print, or Save as PDF: the legal pages on paper, black on white, with the chrome and the motion gone. */
@media print {
  html, body, .legal, .band, .cine, .band--raise { background: #fff !important; color: #000 !important; }
  h1, h2, h3, p, li, address, th, td, .legal p, .legal li, .legal address, .lede, .lede--hero, .eyebrow { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .topbar, .foot, .skip, .hero__bg, .cine__bg, .band__bg, .menu, .stores, .store, .pill, .hero__cue { display: none !important; }
  .cine, .band, .legal { padding: 0; margin: 0; border: 0; box-shadow: none; }
  .legal { max-width: none; }
  .legal th, .legal td { border-color: #999; }
  * { animation: none !important; transition: none !important; }
}
.menu__sheet {
  position: absolute; right: 0; top: 52px; min-width: 14rem;
  display: grid; gap: 0.15rem; padding: 0.6rem;
  background: rgba(14,15,21,0.92); border: 1px solid var(--glass-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.menu__sheet .navlink { display: block; }
.menu__sheet .navlink--cta { color: var(--pulse-glow); }

/* ── Cinematic bands ─────────────────────────────────────────────────────── */
.cine {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: 64px;
  background: linear-gradient(to bottom, var(--void) 0%, var(--void) 70%, var(--base) 100%);
}
.cine--hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.cine--sub { min-height: 52svh; display: flex; flex-direction: column; justify-content: center; }
.cine--sub h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.cine--sub .lede { color: var(--text-hero); font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
/* THE GHOST WORD: the page's own eyebrow at display scale, sitting behind the title and running off the edge. Scale contrast, not decoration: the word is the page's. */
.ghost { position: absolute; right: -0.15em; top: 45%; transform: translateY(-50%); z-index: -1; font-size: clamp(6rem, 22vw, 20rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.10); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); }
.cine--neon .ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
.cine--bone .ghost { -webkit-text-stroke-color: rgba(245,243,239,0.12); }
.cine__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cine__bg::after {
  /* the vignette, so the edges fall away and the text sits in the dark */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.55), rgba(3,3,5,0) 28%, rgba(3,3,5,0) 60%, var(--base) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.7) 100%);
}
.floorgrid {
  position: absolute; left: -20%; right: -20%; bottom: -8%; height: 70%;
  background-image:
    linear-gradient(rgba(43,228,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,228,255,0.20) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.9;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
}
.bloom { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 1; }
.bloom--a { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -18vw; bottom: -20vw; background: radial-gradient(circle, rgba(16,185,129,0.42), rgba(16,185,129,0) 65%); }
.bloom--b { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -12vw; top: -14vw; background: radial-gradient(circle, rgba(76,154,255,0.36), rgba(76,154,255,0) 65%); }
.bloom--c { width: 55vw; height: 55vw; max-width: 800px; max-height: 800px; right: -20vw; top: -25vw; background: radial-gradient(circle, rgba(177,138,255,0.20), rgba(177,138,255,0) 65%); }
.cine--neon .bloom--a { background: radial-gradient(circle, rgba(43,228,255,0.28), rgba(43,228,255,0) 65%); }
.cine--neon .bloom--b { background: radial-gradient(circle, rgba(255,61,174,0.22), rgba(255,61,174,0) 65%); }
.cine--bone .bloom--a { background: radial-gradient(circle, rgba(245,243,239,0.14), rgba(245,243,239,0) 65%); }
.cine--bone .bloom--b { background: radial-gradient(circle, rgba(16,185,129,0.22), rgba(16,185,129,0) 65%); }
.scan {
  position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
}
.watermark {
  position: absolute; right: -4%; top: 4%; width: min(78vh, 56vw); aspect-ratio: 1;
  color: var(--cyan); opacity: 0.22;
  filter: drop-shadow(0 0 24px rgba(43,228,255,0.35));
  animation: drift 540s linear infinite;
}
.watermark svg { width: 100%; height: 100%; }
@keyframes drift { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

.cine__body { position: relative; z-index: 1; padding: 5rem 0 4rem; }
.cine__body--hero {
  display: grid; align-items: end; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 4.5rem 0 5rem;
}
.hero__text { max-width: 44rem; }
/* A sub-page hero with the paper-doll showcase beside its copy: the figure is the game's actual art, lit by its own accent's glow. */
.cine__body--art { display: grid; align-items: center; gap: 2.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cine__art { margin: 0; justify-self: center; width: min(100%, 24rem); display: grid; gap: 0.6rem; justify-items: center; filter: drop-shadow(0 0 32px rgba(43,228,255,0.28)); }
.cine__art img { width: 100%; height: auto; display: block; }
.cine__art figcaption { font-size: 0.8rem; color: var(--text-secondary); text-align: center; max-width: 30ch; }

/* The floating card, bottom right, overlapping the hero's lower edge. */
.hero__card {
  justify-self: end; width: min(100%, 26rem);
  padding: 1.35rem 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transform: translateY(1.5rem);
}
.hero__cardhead { display: flex; align-items: center; justify-content: space-between; }
.hero__cardhead .kicker { margin: 0; }
.hero__cardbody { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; }
.hero__cardnote { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.hero__card .pill { align-self: flex-start; }

/* ── Content bands ───────────────────────────────────────────────────────── */
.band { position: relative; padding: clamp(6rem, 9vw, 9rem) 0; }
.band--raise { padding-top: 0; margin-top: -3.5rem; z-index: 2; }
.band--raise > .wrap > :first-child { padding-top: 5.5rem; }
.band--raise > .wrap > .grid:first-child, .band--raise > .wrap > .grid--editions { padding-top: 0; }
.band--deep { background: var(--void); overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -1; }
.grid { display: grid; gap: 1.1rem; margin-top: 2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); align-items: center; }
.steps { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; color: var(--text-secondary); }
.steps b { color: var(--text-primary); }

/* Editions */
.edition { padding: 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.edition__head { display: flex; align-items: center; justify-content: space-between; }
.edition__head .kicker { margin: 0; }
.edition ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; color: var(--text-secondary); }
.edition .cta { margin-top: auto; padding-top: 1rem; }
.edition--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.12); }

/* Media */
.gallery { display: grid; gap: 0.9rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gallery--brand { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.tile { padding: 0.75rem; margin: 0; display: grid; gap: 0.5rem; justify-items: center; }
.tile img { width: 100%; height: auto; image-rendering: auto; }
.tile figcaption { font-size: 0.78rem; color: var(--text-secondary); text-align: center; }
.tile--dark { background: rgba(3,3,5,0.7); }
.tile--light { background: rgba(245,243,239,0.92); }
.tile--light figcaption a { color: #0B5E48; }
.tile--wide { grid-column: span 2; }

/* ── Legal ────────────────────────────────────────────────────────────────── */
.legal { max-width: 52rem; margin: 5.5rem auto 0; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 3rem; background: var(--glass-strong); }
.band--raise > .wrap > .legal:first-child { padding-top: 2.5rem; }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-secondary); }
.legal ul { padding-left: 1.2rem; }
.legal .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.legal table { width: 100%; min-width: 30rem; border-collapse: collapse; margin: 0; font-size: 0.92rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border: 1px solid var(--border-subtle); }
.legal th { background: rgba(255,255,255,0.04); color: var(--text-primary); font-weight: 700; }
.legal td { color: var(--text-secondary); }
.legal address { color: var(--text-secondary); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-subtle); background: var(--void); padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; color: var(--text-tertiary); font-size: 0.9rem; }
.foot__in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: grid; gap: 2.5rem; }
.foot__cols { display: grid; gap: 2rem; grid-template-columns: 1.6fr repeat(3, 1fr); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--border-subtle); }
.foot h3 { margin: 0 0 0.7rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-secondary); }
.foot__cols a { display: block; color: var(--text-secondary); padding: 0.22rem 0; transition: color 160ms var(--ease-out); }
.foot__cols a:hover { color: #fff; text-decoration: none; }
.foot__cols .brand { display: inline-flex; padding: 0; }
.foot__blurb { margin: 0.8rem 0 0; max-width: 34ch; }
.foot__blurb a { display: inline; padding: 0; color: var(--pulse-glow); }
.foot address { font-style: normal; line-height: 1.7; margin-top: 0.6rem; color: var(--text-tertiary); }
.foot__copy { margin: 0; font-size: 0.82rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTION (2026-09-17): scroll-driven, in CSS.

   The reveals, the hero's fade-out, the chapters' pinned media and their
   phones' own scroll are all driven by the scroll position through CSS
   scroll-driven animations (animation-timeline: view() and scroll()),
   which every evergreen browser ships. Everything is wrapped in @supports so
   a browser without them renders every element's NATURAL state, which is the
   finished one for a reveal, a wipe and a fill, and the resting one for the
   switch (its knob on StatBlockPro): the page is complete on day one and
   gains its choreography where the engine is there. prefers-reduced-motion
   switches all of it off. The top bar's hide-and-return and the pointer's
   light are the two things the page's one inline script drives (#820); the
   features marquee is a plain CSS animation with a pause.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes rv-in { from { opacity: 0; transform: translateY(48px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes hero-out { to { opacity: 0; transform: translateY(-6vh) scale(0.96); } }
@keyframes hero-bg-hide { to { visibility: hidden; } }
@keyframes step-through {
  0% { opacity: 0; transform: translateY(56px); }
  24% { opacity: 1; transform: none; }
  76% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes wipe-in { from { clip-path: inset(22% 10% 10% 10% round 44px); opacity: 0.5; transform: translateY(24px); } to { clip-path: inset(-40% -40% -60% -40% round 40px); opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ap-ring { from { stroke-dashoffset: 249px; } }
@keyframes ap-radar { from { transform: scale(0.06); opacity: 0; } }
/* -100% is the body's own height and 100cqh the view's, less the 90px tab bar over it (9 + 23 + 3 + 12 + 8 and the 34px home inset): the last button ends where the app's own bottom padding puts it. */
@keyframes ap-scroll { to { transform: translateY(calc(-100% + 100cqh - 90px)); } }
@keyframes knob { from { transform: translateX(0); } to { transform: translateX(calc(100% + 0.5rem)); } }
@keyframes track { from { background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; } to { background: rgba(43,228,255,0.22); box-shadow: 0 0 0 1px rgba(43,228,255,0.6) inset, 0 0 40px rgba(43,228,255,0.35); } }
@keyframes label-pro { from { color: #fff; } to { color: var(--text-tertiary); } }
@keyframes label-rpg { from { color: var(--text-tertiary); } to { color: var(--cyan); text-shadow: 0 0 18px rgba(43,228,255,0.6); } }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@keyframes sweep-run { from { transform: translateX(-60%) skewX(-18deg); } to { transform: translateX(160%) skewX(-18deg); } }
@keyframes grid-run { to { background-position: 0 64px; } }
@keyframes cue { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.9; } 50% { transform: translateY(8px) rotate(45deg); opacity: 0.4; } }

@supports (animation-timeline: view()) {
  /* backwards, not both: the finished state IS the natural state, and holding it would pin transform: none over a card's hover lift. cover rather than entry, so a one-line eyebrow reveals over the same scroll distance as a card (an entry range is only as long as the subject is tall). */
  .rv { animation: rv-in var(--ease-out) backwards; animation-timeline: view(); animation-range: cover 0% cover 30%; }
  .rv--late { animation-range: cover 4% cover 34%; }
  .rv--later { animation-range: cover 8% cover 38%; }
  .rv--latest { animation-range: cover 12% cover 42%; }
  /* A reveal yields to keyboard focus: a link tabbed to inside a block not yet in view must not land faded or invisible. */
  .rv:focus-within, .step:focus-within, .wipe:focus-within { animation: none; }
  /* The hero sits under the curtain for the rest of the page; its grid and blooms stop painting once it is covered. */
  .hero__bg { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 100svh 101svh; }
    .hero__inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
  /* Only the LINKS leave the tab order once the curtain has covered them; the heading stays in the accessibility tree. */
  .hero__inner .stores { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 90svh 91svh; }
  .step { animation: step-through var(--ease-inout) both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  /* The chapter's media is sticky, so nothing inside it can key on its own view(): every animation in a chapter reads the CHAPTER's timeline. cover 0% is the chapter's top at the bottom of the screen; the device pins at about cover 23% of a three-step chapter. */
  .chapter { view-timeline: --chapter block; }
  .wipe { animation: wipe-in var(--ease-out) backwards; animation-timeline: --chapter; animation-range: cover 2% cover 20%; }
  .chapter .ap-fill { animation: fill var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-fill--y { animation: fill-y var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-ring__fill { animation: ap-ring var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-radar__poly { animation: ap-radar var(--ease-spring) both; animation-timeline: --chapter; animation-range: cover 12% cover 30%; }
  /* The phone's screen is taller than the phone and SCROLLS as the chapter does, one step ahead of the reader's eye. */
  .chapter .ap-scroll { animation: ap-scroll linear both; animation-timeline: --chapter; animation-range: cover 30% cover 92%; }
  @media (max-width: 980px) {
    .step { animation-name: rv-in; animation-range: entry 8% entry 48%; }
    .device { view-timeline: --device block; }
    .wipe { animation-timeline: --device; animation-range: entry 0% entry 60%; }
    .chapter .ap-fill, .chapter .ap-fill--y, .chapter .ap-ring__fill, .chapter .ap-radar__poly { animation-timeline: --device; animation-range: entry 20% entry 90%; }
    /* The phone is fully in view for a short stretch on a phone; it shows its top there and scrolls its screen as it leaves. */
    .chapter .ap-scroll { animation-timeline: --device; animation-range: exit 0% exit 85%; }
  }
  .switch { view-timeline: --switch block; }
  .toggle__knob { animation: knob var(--ease-spring) both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__track { animation: track linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--pro { animation: label-pro linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--rpg { animation: label-rpg linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  /* The ticker rides the scroll: it travels half its width (one copy) while it crosses the viewport, so it moves exactly as fast as the reader does and stops when they do. */
  .ticker__track { animation: ticker-run linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* ── Hero: pinned, the next section slides over it (the curtain) ─────────── */
.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: max(100svh, 34rem);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate;
  background: var(--void);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.6), rgba(3,3,5,0) 26%, rgba(3,3,5,0) 62%, var(--void) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.72) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 6rem 0 5rem; transform-origin: 50% 40%; will-change: transform, opacity; }
.hero__inner .display { margin-top: 0.2rem; }
.hero .lede--hero { max-width: 34ch; }
.floorgrid--live { animation: grid-run 4s linear infinite; }
.sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 45%, rgba(43,228,255,0.07) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-60%) skewX(-18deg);
  animation: sweep-run 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: screen;
}
.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 1;
  width: 40px; height: 40px; margin-left: -20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
}
.hero__cue:hover { text-decoration: none; border-color: rgba(255,255,255,0.5); }
.hero__cue span { width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: cue 2.2s var(--ease-inout) infinite; }

/* The store buttons: two platforms, honest states. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.store {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1.1rem 0.75rem 1rem; border-radius: 999px;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 32px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  text-decoration: none;
}
/* The sheen: a diagonal light that crosses the pill on hover. */
.store { isolation: isolate; }
/* The sheen crosses the pill as a moving background layer under the light (the pseudo-elements are the light's now). */
.store { background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)); background-size: 300% 100%, 100% 100%; background-position: 130% 0, 0 0; transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-position 700ms var(--ease-inout); }
.store:hover, .face:hover { text-decoration: none; }
@media (hover: hover) { .store:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18); } }
.store:focus-visible {
  text-decoration: none; transform: translateY(-2px);
  border-color: rgba(16,185,129,0.55);
 
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18);
}
@media (hover: hover) { .store:hover { background-position: -30% 0, 0 0; } }
.store:focus-visible { background-position: -30% 0, 0 0; }
.store:active { transform: translateY(0); transition-duration: 80ms; }
.store:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.store__glyph { color: var(--pulse-glow); flex: none; }
.store__arrow { color: var(--text-tertiary); flex: none; margin-left: 0.1rem; transition: transform 260ms var(--ease-out), color 260ms var(--ease-out); }
@media (hover: hover) { .store:hover .store__arrow { transform: translateX(3px); color: var(--pulse-glow); } }
.store:focus-visible .store__arrow { transform: translateX(3px); color: var(--pulse-glow); }
.store__text { display: grid; line-height: 1.15; text-align: left; }
/* The label is primary rather than secondary since #820: the pointer's light lifts the ground under it and secondary fell under 4.5:1 there. */
.store__text small { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-primary); font-weight: 700; }
.store__text b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* The curtain: everything after the hero, on its own layer, so it slides over the pinned hero. */
.curtain { position: relative; z-index: 2; background: var(--base); box-shadow: 0 -40px 100px rgba(0,0,0,0.6); border-radius: 28px 28px 0 0; }
.band--first { padding-top: clamp(6.5rem, 9vw, 8.5rem); }

/* A viewport shorter than the hero (a landscape phone, a docked devtools) would pin a box whose foot nobody can scroll to; there the hero scrolls like any block and the curtain simply follows. */
@media (max-height: 40rem) {
  .hero { position: relative; }
  .hero__inner, .hero__inner .stores, .hero__bg { animation: none; }
}

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.ticker { overflow: clip; border-bottom: 1px solid var(--border-subtle); border-radius: 28px 28px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; padding: 1.1rem 0; }
.ticker__item { white-space: nowrap; padding: 0 1.4rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); position: relative; }
.ticker__item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 10px var(--pulse); }

/* ── Type additions ───────────────────────────────────────────────────────── */
.h2--xl { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 20ch; }

/* ── The two faces ───────────────────────────────────────────────────────── */
.faces { display: grid; gap: 1.1rem; margin-top: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.face { display: grid; gap: 0.4rem; padding: 2.4rem 2.2rem 2.5rem; min-height: 19rem; align-content: end; color: var(--text-primary); transition: transform 520ms var(--ease-spring), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.face::before { z-index: 0; }
/* the face's own word, huge and cut by the card's edge */
.face .face__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.face .face__ghost { position: absolute; right: -0.2em; top: -0.35em; font-size: 9rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); pointer-events: none; transition: transform 700ms var(--ease-spring), -webkit-text-stroke-color 420ms var(--ease-out); }
.face--rpg .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
@media (hover: hover) { .face:hover .face__ghost { transform: translate(-0.08em, 0.06em) rotate(-4deg); -webkit-text-stroke-color: rgba(110,231,183,0.32); } .face--rpg:hover .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.36); } }
@media (hover: hover) { .face:hover { text-decoration: none; transform: translateY(-6px); border-color: rgba(255,255,255,0.24); box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); } }
.face .kicker { margin: 0 0 0.3rem; }
.face--rpg .kicker { color: var(--cyan); }
.face__title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.face__line { color: var(--text-secondary); font-size: 1rem; max-width: 34ch; }
.face__more { margin-top: 0.9rem; font-weight: 700; font-size: 0.9rem; color: var(--pulse-glow); }
.face--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.14); }
.face--rpg .face__more { color: var(--cyan); }

/* ── Chapters: pinned media, text that scrolls through ───────────────────── */
.chapter { position: relative; padding: 4rem 0 3rem; }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.chapter__grid--flip .chapter__media { order: 2; }
.chapter__media { position: sticky; top: 4rem; height: calc(100svh - 4rem); display: flex; align-items: center; justify-content: center; }
/* The phone is 414 x 868 at its own scale (the app's 390 x 844 screen in a 12px bezel) and is zoomed as a whole, never narrowed, so nothing inside it reflows; zoom is layout-affecting, so the sticky box still centres it. */
@media (min-width: 981px) and (max-height: 52rem) { .device { --dz: 0.81; } }
@media (min-width: 981px) and (max-height: 47rem) { .device { --dz: 0.72; } }
@media (min-width: 981px) and (max-height: 42rem) { .device { --dz: 0.63; } }
.chapter__steps { display: grid; }
/* position and isolation: the step's light (its ::before, z-index -1) must sit inside the step, not behind the page (#820). */
.step { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.step h2 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 16ch; }
.step .section-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.step .kicker { margin-bottom: 0.9rem; }

/* The device: a frame drawn in CSS, holding the app's own screen at a phone's own 390pt width, zoomed as a whole. */
.device {
  --dz: 0.9;
  width: 414px; max-width: 100%; aspect-ratio: 414 / 868; border-radius: 40px; zoom: var(--dz);
  padding: 12px; background: linear-gradient(160deg, #2A2C3A, #0B0C12 60%);
  box-shadow: 0 60px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 2px rgba(0,0,0,0.9);
  position: relative; isolation: isolate;
}
.device::before { content: ""; position: absolute; top: 12px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 0 0 14px 14px; background: #06070B; z-index: 3; }
/* The bezel catches the pointer's light like every other surface; the mask keeps it off the screen. */
.device::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 12px; pointer-events: none; z-index: 2;
  /* The frame is zoomed, so the pointer's page-space offset is divided back into the frame's own space. */
  background: radial-gradient(360px circle at calc(var(--mx, 50%) / var(--dz)) calc(var(--my, 50%) / var(--dz)), rgba(255,255,255,0.28), rgba(255,255,255,0.06) 40%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .device::after { display: none; } }

/* ── The app's screen: its palette as custom properties, its ramp, its shape language ── */
.ap {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; display: flex; flex-direction: column;
  background: var(--ap-base); color: var(--ap-t1);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ap * { box-sizing: border-box; margin: 0; }
.ap b { font-weight: 800; }
.ap-status { position: absolute; top: 0; left: 0; right: 0; height: 47px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 15px; font-weight: 600; line-height: 1; }
.ap-status svg { display: block; }
/* ForgeLight: one radial bloom of the brand at the top centre, 260px tall, at full width. The SVG gradient is declared in the ELLIPSE's bounding box (cy 0%, r 70%), so its centre sits at the box's top, 240px above the screen, and the visible edge carries about 1% of the brand; the mask is the ellipse itself. */
.ap-bloom { position: absolute; top: 0; left: 0; right: 0; height: 260px; pointer-events: none; background: radial-gradient(126% 280px at 50% -240px, color-mix(in srgb, var(--ap-pulse) 14%, transparent), color-mix(in srgb, var(--ap-pulse) 4%, transparent) 55%, transparent 100%); -webkit-mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); }
/* Screen.tsx: the header is fixed above a ScrollView; the view clips the body that scrolls beneath it. */
.ap-head { position: relative; flex: none; padding: 55px 20px 12px; }
.ap-view { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.ap-scroll { position: relative; padding: 0 20px; will-change: transform; }
.ap-body { display: grid; gap: 14px; padding: 4px 0 74px; }
.ap-eyebrow { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-pulse); margin-bottom: 5.25px; }
.ap-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ap-title { flex: 1; min-width: 0; font-size: 30px; line-height: 34px; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ap-t1); }
.ap-icons { display: flex; align-items: center; gap: 4px; }
.ap-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.ap-icon svg { display: block; }
.ap-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ap-t3); }
.ap-rule { display: block; margin-top: 12px; width: 100%; height: auto; }
.ap-back { display: flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px 0; margin: 0 0 4px -4px; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-power { text-align: right; }
.ap-power b { display: block; font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-t1); }
.ap-power span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* SectionLabel: the eyebrow, a hairline that takes the rest of the row, an optional right slot. */
.ap-label { display: flex; align-items: center; gap: 12px; }
.ap-label > span:first-child { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-label > i { flex: 1; height: 1px; background: var(--ap-bsub); }
.ap-label__r { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
/*
 * Panel: the notched rectangle. The element is clipped to the notch polygon
 * and painted in the STROKE colour; its ::before is the same polygon inset by
 * the stroke width in the FILL colour (a cut edge inset by s sits 0.586s
 * closer, which is what --ni is); its ::after is the corner hairline from
 * (5, n+7) to (n+7, 5), a 1px line of (n+2)*sqrt2 turned 45 degrees.
 */
.ap-panel {
  position: relative; --n: 14px; --sw: 1px; --ni: calc(var(--n) - 0.586 * var(--sw));
  --fill: var(--ap-surface); --stroke: var(--ap-b); --rule: var(--ap-bstrong); --rule-o: 0.55;
  background: var(--stroke);
  clip-path: polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));
}
.ap-panel::before { content: ""; position: absolute; inset: var(--sw); background: var(--fill); clip-path: polygon(var(--ni) 0, 100% 0, 100% calc(100% - var(--ni)), calc(100% - var(--ni)) 100%, 0 100%, 0 var(--ni)); }
.ap-panel::after { content: ""; position: absolute; height: 1px; width: calc((var(--n) + 2px) * 1.4142); left: calc((var(--n) + 12px) / 2 - (var(--n) + 2px) * 0.7071); top: calc((var(--n) + 12px) / 2 - 0.5px); transform: rotate(-45deg); background: var(--rule); opacity: var(--rule-o); pointer-events: none; }
.ap-panel > * { position: relative; }
/* A toned panel: a 1.5px outline at 90% of the tone, the hairline in the tone at 80%, a 9% tint when tinted. */
.ap-panel[style*="--tone"] { --sw: 1.5px; --stroke: color-mix(in srgb, var(--tone) 90%, var(--ap-base)); --rule: var(--tone); --rule-o: 0.8; }
.ap-card { padding: 16px; }
/* StatusStrip: the flame, the streak line, the load-state line. */
.ap-strip { display: flex; align-items: center; gap: 12px; padding: 12.25px; }
.ap-strip__g { display: grid; }
.ap-strip b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap-strip span:not(.ap-strip__g) { display: block; margin-top: 2px; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
/* HexRing: a flat-top hexagon, the fill drawn from the top-left vertex clockwise by dash offset. */
.ap-ringrow { display: flex; justify-content: space-around; }
.ap-ringbox { position: relative; width: 92px; text-align: center; }
.ap-ring { display: block; }
.ap-ring__track { fill: none; stroke: var(--ap-inset); stroke-width: 7; stroke-linejoin: miter; }
.ap-ring__fill { fill: none; stroke-width: 7; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 249 249; stroke-dashoffset: calc((1 - var(--v)) * 249px); }
.ap-ring__c { position: absolute; top: 0; left: 0; width: 92px; height: 92px; display: grid; place-content: center; }
.ap-ring__c b { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
.ap-ring__c span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-cap { margin-top: 8px; }
.ap-cap b { display: block; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t1); }
.ap-cap span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* The rows inside the Today card that open with a hairline. */
.ap-sep { margin-top: 16px; border-top: 1px solid var(--ap-bsub); padding-top: 12.25px; }
.ap-k { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-2xs { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-2xs-note { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-note { display: block; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap-note--mt { margin-top: 8px; }
.ap-fig { display: block; font-family: "Courier New", Courier, monospace; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-unit { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-mono-sm { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; color: var(--ap-t1); }
.ap-mono-2xs { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-burn { display: flex; align-items: center; gap: 12px; }
.ap-burn > svg { flex: none; }
.ap-burn__c { flex: 1; min-width: 0; }
.ap-burn__n { text-align: right; }
.ap-macro { margin-top: 16px; }
.ap-row2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-row2--h { margin-bottom: 8px; }
.ap-sep .ap-row2--h { margin-bottom: 5.25px; }
.ap-macro__p { display: grid; gap: 4px; }
.ap-macro__p b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap-cols { display: flex; gap: 12px; margin-top: 12px; }
.ap-cols > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
/* Meter: a squared bar; the fill's leading edge is cut at 45 degrees; quarter ticks over it; a 1px outline. */
.ap-meter { position: relative; display: block; height: var(--h, 8px); background: var(--ap-inset); }
.ap-meter__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: var(--c); clip-path: polygon(0 0, calc(100% - var(--h) * 0.6) 0, 100% 100%, 0 100%); }
.ap-meter::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--ap-bsub); background: linear-gradient(var(--ap-base), var(--ap-base)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 75% 0 / 1px 100% no-repeat; opacity: 0.9; }
.ap-notes { margin-top: 16px; display: grid; gap: 4px; }
/* HydrationCard: its own label and a panel nested inside the Today card, abutting the notes. */
.ap-hyd { display: grid; gap: 8px; }
.ap-hyd__panel { --n: 12px; }
.ap-hyd__in { display: flex; align-items: center; gap: 16px; padding: 12px; }
.ap-hyd__in > svg { flex: none; }
.ap-hyd__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-hyd__total { display: flex; align-items: baseline; gap: 5.25px; }
.ap-hyd__total b { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ap-t1); }
.ap-hyd__total span { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-hyd__caf { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-qa { display: flex; gap: 8px; }
.ap-qa > span { flex: 1; min-width: 0; text-align: center; padding: 8px 12px; border: 1px solid var(--ap-b); font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-qa > .ap-qa--on { border-color: color-mix(in srgb, var(--ap-pulse) 55%, transparent); background: color-mix(in srgb, var(--ap-pulse) 12%, transparent); color: var(--ap-pulse); }
/* LoadGauge: a linear bar with a hard threshold tick at its far end; never a ring (#227). */
.ap-gauge { position: relative; display: block; height: 10px; background: var(--ap-inset); }
.ap-gauge__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: color-mix(in srgb, var(--ap-t2) 85%, transparent); }
.ap-gauge::after { content: ""; position: absolute; right: 0; top: -1px; bottom: -1px; width: 1.5px; background: var(--ap-warn); }
.ap-focus { display: flex; align-items: flex-start; gap: 5.25px; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap-focus > i { flex: none; width: 4px; height: 4px; margin-top: 6px; background: var(--ap-t2); }
/* Button: a notched fill with a 1.5px outline and no hairline; the label uppercase, a note under it at 65%. */
.ap-btns { margin-top: 4px; display: grid; gap: 8.75px; }
.ap-btns--sheet { margin-top: 8px; }
.ap-btn { --n: 12px; --sw: 1.5px; --rule-o: 0; padding: 14px 20px; text-align: center; }
.ap-btn::after { display: none; }
.ap-btn b { display: block; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.ap-btn span { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; letter-spacing: 0.4px; opacity: 0.65; }
.ap-btn--compact { --n: 8px; padding: 9px 14px; }
.ap-btn--compact b { font-size: 13px; line-height: 18px; }
.ap-btn--pulse { --fill: var(--ap-pulse); --stroke: var(--ap-glow); color: var(--ap-tinv); }
.ap-btn--secondary { --fill: var(--ap-elev); --stroke: var(--ap-bstrong); color: var(--ap-t1); }
.ap-btn--primary { --fill: var(--ap-bone); --stroke: var(--ap-bone); color: var(--ap-tinv); }
.ap-doors { display: flex; gap: 8px; }
.ap-doors > .ap-btn { flex: 1; min-width: 0; }
/* The tab bar: five slots on the surface, a 2px rail and a 6% wash over the focused one, the home indicator under it. */
.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; padding-bottom: 34px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap-tab { position: relative; flex: 1; display: grid; justify-items: center; padding: 9px 0 8px; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ap-t3); }
.ap-tab svg { width: 23px; height: 23px; margin-bottom: 3px; }
.ap-tab--on { color: var(--ap-pulse); font-weight: 800; background: color-mix(in srgb, var(--ap-pulse) 6%, transparent); }
.ap-tab--on::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ap-pulse); }
.ap-tabs::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ap-t1); }
/* ── The character sheet's own pieces ── */
.ap-orig { --n: 16px; --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-surface)); }
.ap-orig__row { display: flex; align-items: center; gap: 12px; padding: 16px; }
/* the paper doll's square canvas at the card's HEIGHT, cropping only its empty side margins, which is how AvatarRenderer draws it in the sheet's 112 x 122 */
.ap-orig__row > img { flex: none; width: 112px; height: 122px; object-fit: cover; display: block; }
.ap-orig__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-orig__arch { display: block; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-orig__lc { display: flex; gap: 16px; }
.ap-orig__lc > div { flex: 1; min-width: 0; }
.ap-orig__lc b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; }
.ap-orig__btn { padding: 0 16px 16px; }
.ap-radar { position: relative; width: 264px; margin: 0 auto; }
.ap-radar > svg { display: block; }
.ap-radar__poly { transform-box: view-box; transform-origin: 132px 132px; }
.ap-radar__max { position: absolute; left: 0; right: 0; top: 116px; text-align: center; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-t3); }
.ap-legend { margin-top: 4px; display: flex; justify-content: center; gap: 16px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-legend > span { display: flex; align-items: center; gap: 5.25px; }
.ap-legend i { width: 14px; height: 2px; }
/* The stat table: three 49px right-aligned columns (w-14 at NativeWind's 14px rem). */
.ap-tbl__h { display: flex; align-items: center; padding-bottom: 8px; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-tbl__h .ap-tbl__stat { flex: 1; }
.ap-tbl__c { width: 49px; text-align: right; font-family: "Courier New", Courier, monospace; }
.ap-tbl__h .ap-tbl__c { font-family: inherit; }
.ap-tbl__c--pulse { color: var(--ap-pulse); }
.ap-tbl__r { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--ap-bsub); }
.ap-tbl__r .ap-tbl__stat { flex: 1; display: flex; align-items: center; gap: 8px; }
.ap-tbl__stat i { width: 3px; height: 16px; background: var(--tone); }
.ap-tbl__stat b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--tone); }
.ap-tbl__base { font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap-tbl__buff { font-size: 14px; line-height: 20px; color: var(--ap-pulse); }
.ap-tbl__zero { font-size: 14px; line-height: 20px; color: var(--ap-tdis); }
.ap-tbl__total { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-tbl__note { margin-top: 12px; }
/* The record: six cells, three to a row. */
.ap-rec { display: flex; flex-wrap: wrap; }
.ap-rec > div { width: 33.333%; padding: 8px 0; min-width: 0; }
.ap-rec__v { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap-rec__n { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-scrap { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ap-scrap > svg { display: block; }
/* The loadout: two rows of five tiles; an empty slot is an inset panel, a worn item's notch depth and pip count encode its rarity (§9.3). */
/* The two rows are siblings of the ScrollView in the app, so the screen's 14px rhythm separates them; 8px is the gap WITHIN a row. */
.ap-grid { display: grid; gap: 14px; }
.ap-grid__row { display: flex; gap: 8px; }
.ap-tile { flex: 1; min-width: 0; --n: 7px; --fill: var(--ap-inset); display: grid; justify-items: center; gap: 5.25px; padding: 12px 8px; }
.ap-tile > svg { display: block; }
.ap-tile__slot { font-size: 10px; line-height: 12px; height: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap-tile--worn { --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-elev)); }
.ap-tile__name { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap-tile__meta { display: flex; align-items: center; gap: 5.25px; }
.ap-pips { display: flex; gap: 3px; }
.ap-pips i { width: 4px; height: 4px; background: var(--ap-b); opacity: 0.55; }
.ap-pips i.on { background: var(--tone); opacity: 1; }
.ap-tile__slot--tone { color: var(--tone); }
.ap-grid__note { margin-top: -4px; }
.chapter .ap-fill { transform-origin: 0 50%; }
.chapter .ap-fill--y { transform-box: fill-box; transform-origin: 50% 100%; }

/* ── The switch ──────────────────────────────────────────────────────────── */
.switch { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--base) 0%, var(--void) 18%, var(--void) 82%, var(--base) 100%); padding: clamp(8rem, 12vw, 11rem) 0; }
.switch__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.band--download .band__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
.switch__bg { position: absolute; inset: 0; z-index: -1; }
.switch__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; justify-self: center; width: min(100%, 30rem); }
.toggle__label { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(0.95rem, 1.6vw, 1.2rem); color: var(--text-tertiary); white-space: nowrap; }
.toggle__label--pro { color: #fff; }
.toggle__track { position: relative; height: 3.4rem; border-radius: 999px; background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; padding: 0.4rem; }
.toggle__knob { position: absolute; top: 0.4rem; left: 0.4rem; bottom: 0.4rem; width: calc(50% - 0.65rem); border-radius: 999px; background: linear-gradient(180deg, #fff, var(--bone)); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }

/* ── The marquee (2026-09-18, #820): one line per feature, on a loop ─────── */
/*
 * Two copies of the row, the second hidden from assistive technology, slide
 * left by exactly one row's width and repeat, so the loop is seamless. It
 * holds still under the pointer and under keyboard focus (the region is
 * focusable), and under prefers-reduced-motion it does not move at all and
 * scrolls by hand instead. #817 had taken the auto-started marquee OUT of the
 * facts ticker for WCAG 2.2.2; this one is the user's explicit ask, and the
 * pause on hover and focus plus the reduced-motion stop are the mechanism
 * 2.2.2 requires. The speed is set by the row's length so every card gets the
 * same seconds on screen whatever the catalog counts become.
 */
.band--reel { padding-bottom: 3rem; }
.marquee { position: relative; margin-top: 2rem; padding: 1rem 0 1.6rem; display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 1rem; padding-right: 1rem; flex: none; width: max-content; animation: marquee var(--marquee-s, 90s) linear infinite; will-change: transform; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee:focus-visible .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee:focus-visible { outline: 2px solid var(--pulse); outline-offset: -3px; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}
.reel__hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--text-tertiary); }
.reelcard { flex: 0 0 auto; width: min(80vw, 20rem); min-height: 15rem; scroll-snap-align: start; padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 420ms var(--ease-spring); }
@media (hover: hover) { .reelcard:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); transform: translateY(-6px); } }
.reelcard h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.reelcard p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.reelcard .kicker { margin: 0 0 0.4rem; }
.reelcard--rpg .kicker { color: var(--cyan); }
.reelcard--both .kicker { color: var(--amber); }

/* ── The numbers ─────────────────────────────────────────────────────────── */
.band--facts { padding-top: 3rem; background: linear-gradient(180deg, var(--base) 0%, var(--void) 70%, var(--base) 100%); }
.facts { display: grid; gap: 1rem; margin-top: 2.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { position: relative; isolation: isolate; display: grid; align-content: start; gap: 0.2rem; padding: 1.6rem 1.4rem; border-radius: var(--radius); background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); }
.fact__n { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(16,185,129,0.25); font-variant-numeric: tabular-nums; }
.fact__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--pulse); margin-top: 0.3rem; }
.fact__sub { font-size: 0.86rem; color: var(--text-secondary); }

/* ── Download ────────────────────────────────────────────────────────────── */
/* overflow: CLIP, never hidden, on any box whose children reveal on view(): hidden makes a scroll container and view() would measure against a box that never scrolls. */
.band--download { background: linear-gradient(to bottom, var(--base) 0%, var(--void) 14%, var(--void) 100%); overflow: clip; isolation: isolate; padding: clamp(7rem, 11vw, 10rem) 0; }
.band--download .band__bg .floorgrid { opacity: 0.5; }
.download { text-align: center; display: grid; justify-items: center; }
.download .h2--xl { max-width: 30ch; }
.download .section-lede { max-width: 46ch; }
.download .stores { justify-content: center; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cine__body--hero { grid-template-columns: 1fr; align-items: end; }
  .cine__body--art { grid-template-columns: 1fr; }
  .cine__art { width: min(100%, 18rem); }
  .hero__card { justify-self: start; transform: none; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .chapter__grid { grid-template-columns: 1fr; gap: 2rem; }
  .chapter__grid--flip .chapter__media { order: 0; }
  .chapter__media { position: static; height: auto; padding-top: 3rem; }
  .step { min-height: 0; padding: 1.5rem 0; }
  .switch { padding: 5rem 0; }
  .switch__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .navlinks { display: none; }
  .menu { display: block; }
  .topbar__right .pill { display: none; }
  .cine--hero { min-height: auto; }
  .cine__body--hero { padding: 6rem 0 3.5rem; }
  .hero__cardbody { grid-template-columns: 6rem 1fr; }
  .tile--wide { grid-column: span 1; }
  .foot__cols { grid-template-columns: 1fr; }
  .band { padding: 4.5rem 0; }
  .band--raise { padding-top: 0; }
  .hero { min-height: 0; }
  .hero__inner { padding: 7rem 0 5.5rem; }
  .hero__cue { display: none; }
  .stores { gap: 0.6rem; }
  .store { padding: 0.65rem 0.95rem 0.65rem 0.85rem; }
  .curtain { border-radius: 20px 20px 0 0; }
  .ticker { border-radius: 20px 20px 0 0; }
  .band--first { padding-top: 4.5rem; }
  .device { --dz: 0.72; }
  .toggle { gap: 0.8rem; }
  .toggle__track { height: 2.8rem; }
  .band--download { padding: 5rem 0; }
  .fact__n { font-size: 2.2rem; }
  .toggle { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; width: min(100%, 16rem); }
  .toggle__track { width: 100%; }
  .reelcard { width: 74vw; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .fact { padding: 1.2rem 1rem; }
  .fact__sub { font-size: 0.8rem; }
}
/*
 * Reduced motion switches EVERY animation off, scroll-driven ones included,
 * and each keyframe above is written so its natural state is the finished
 * one: a reveal is visible, the hero is opaque, the top bar is translucent,
 * the knob rests on StatBlockPro. Nothing waits for a scroll that never
 * animates.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero { position: relative; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { width: auto; flex-wrap: wrap; row-gap: 0.4rem; }
  .ticker__track .ticker__item:nth-child(n + 13) { display: none; }
}