/* ==========================================================================
   PropsHub marketing site — assets/site.css
   Styles the generator output of templates/base.mjs + templates/blocks.mjs
   (see content/en/home.json for the shape). Evolves the token system already
   shipped in the repo-root styles.css (the Manager SPA / legacy site) — same
   palette, same film-slate visual grammar (mono slug strip, F.01 numbering,
   dark chrome) — extended with a type scale, an 8px spacing scale, full dark
   mode, and the WCAG AA fixes required by docs/marketing/review/E-design-ux.md
   (§4) and docs/marketing/review/CONSOLIDATED-DECISIONS.md (§E2).

   This file does NOT touch /styles.css — it is a new, independent stylesheet
   for the new templated site (site/ output), per CLAUDE.md's deploy allow-list.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (v3.37.7)
   --------------------------------------------------------------------------
   Variable-weight, latin-subset woff2 files fetched directly from Google
   Fonts' own CDN (fonts.gstatic.com) and committed here — self-hosted at
   request time, not proxied through Google on every page load. Both are
   SIL Open Font License, free to redistribute. One file per family covers
   the whole weight range via `font-weight: 100 900`, so no per-weight static
   files are needed. font-display:swap avoids a blocking invisible-text flash;
   the system-font stack in --font/--mono is still the fallback while the
   file loads or if it fails.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens — light mode (default)
   --------------------------------------------------------------------------
   Carried over verbatim from /styles.css: --accent, --header-bg, the eight
   department colors, --radius, font stacks. Two tokens change VALUE for
   accessibility (see the WCAG block below) but keep their original name so
   nothing that depends on them silently breaks: --green and --amber remain
   defined for non-text/decorative use exactly as before; new *-text
   companions are added for anywhere real text sits on top of a color.
   -------------------------------------------------------------------------- */
:root {
  /* surfaces / text / borders — unchanged from /styles.css */
  --surface-0: #ffffff; --surface-1: #f5f6f8; --surface-2: #eceef2; --surface-3: #dde0e8;
  --border: #d1d5de; --border-s: #bbc0ce;
  --text-hi: #111827; --text-md: #374151; --text-lo: #5b6271;

  /* --text-ph (WCAG FIX, review E2 / §4.1): the original #9ca3af measured
     2.54:1 on white — fails even the 3:1 non-text floor by a wide margin.
     Darkened to #6b7280. Computed (WCAG relative-luminance formula):
       #6b7280 on #ffffff  -> 4.83:1  (passes AA large-text/UI, 3:1 floor, with room)
       #6b7280 on #f5f6f8  -> 4.47:1  (passes 3:1 non-text; just UNDER 4.5:1 for
                                        body text — so this token stays restricted
                                        to non-text UI: dots, icon glyphs, borders,
                                        placeholder-style hints — never body text.
                                        Anywhere a similar tone is needed for real
                                        text, use --text-lo instead, which is
                                        already AA-safe: 6.12:1 / 5.66:1.)
  */
  --text-ph: #6b7280;

  --accent: #1d4ed8; --accent-lt: #eff3ff; --accent-bd: #bfceff;
  /* #1d4ed8 on #ffffff -> 6.70:1 (verified against review E §4 table; AA pass) */

  --c-props: #1d4ed8;  --c-props-lt: #eff3ff;
  --c-veh: #b91c1c;    --c-veh-lt: #fff1f2;
  --c-anim: #15803d;   --c-anim-lt: #f0fdf4;
  --c-sfx: #b45309;    --c-sfx-lt: #fffbeb;
  --c-roles: #6d28d9;  --c-roles-lt: #f5f3ff;
  --c-costume: #0e7490;--c-costume-lt: #ecfeff;
  --c-stunt: #be185d;  --c-stunt-lt: #fdf2f8;
  --c-vfx: #4338ca;    --c-vfx-lt: #eef2ff;

  /* --green / --amber (WCAG FIX, review E2 / §4.1, CRITICAL):
     #16a34a on #ffffff measured 3.30:1 — fails AA (4.5:1) as text. Kept, at
     its original bright value, but restricted to NON-TEXT fills (dots,
     left-border accents, chip backgrounds paired with a dark label, icon
     glyphs at ≥3:1 context) — never as text color directly on a light
     surface. #d97706 fails the same way (computed 3.19:1 on white).
     For anywhere text needs to read "positive"/"warning", use the new
     *-text companions below, which reuse existing darker palette entries
     (no new hues invented) and clear 4.5:1 on BOTH light surfaces:
       --green-text (#15803d, i.e. --c-anim):
         on #ffffff -> 5.02:1   |   on #f5f6f8 -> 4.64:1   (both pass AA)
       --amber-text (#b45309, i.e. --c-sfx):
         on #ffffff -> 5.02:1   |   on #f5f6f8 -> 4.64:1   (both pass AA)
     (Computed via the standard WCAG relative-luminance formula; the
     near-identical ratios are not a coincidence — both source hues sit at
     almost the same perceptual lightness, ~L 0.159, which is what clears the
     4.5:1 floor against the site's two light surfaces, L 1.0 / L 0.921.)
  */
  --green: #16a34a; --green-text: #15803d;
  --red: #dc2626;   /* 4.83:1 on #ffffff — passes, no headroom: do not lighten further */
  --amber: #d97706; --amber-text: #b45309;

  --header-bg: #1e2b3c; --header-text: #e2e8f0;
  /* header-text on header-bg -> 11.62:1 (verified). --brand-sep below fixed
     from the failing #64748b (3.01:1 on header-bg) to match --brand-tag's
     #94a3b8, which measures 5.59:1 on header-bg (verified, AA pass). */
  --brand-tag: #94a3b8; --brand-sep: #94a3b8;

  --shadow-sm: 0 1px 3px rgba(17,24,39,.06);
  --shadow-md: 0 4px 12px rgba(17,24,39,.08);
  --shadow-lg: 0 10px 32px rgba(17,24,39,.12);
  --radius: 6px; --radius-lg: 12px; --radius-pill: 999px;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- modular type scale (new, ~1.25 ratio off a 15px base) ------------ */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 25px; --fs-3xl: 31px; --fs-4xl: 39px;

  /* --- 8px spacing scale (new) ------------------------------------------ */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;
  --sp-6: 40px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 96px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   3. Dark mode — full token set, not a media-query afterthought.
   Mirrored two ways: OS preference (prefers-color-scheme) and an explicit
   in-page toggle (:root[data-theme]) — the toggle always wins when present.
   Chosen so every text/surface pair clears 4.5:1 the same way the light set
   does. Two pairs verified in full below; the remaining tint colors
   (department accents, red/amber-dark) sit at the same target lightness
   (L ≈ 0.45–0.60) against the same dark surfaces (L ≈ 0.007–0.02) and were
   computed with the identical formula — all land between 8:1–11:1, far past
   the 4.5:1 floor, so only the tightest two pairs are shown in full to avoid
   repeating sixteen near-identical derivations.
     #f3f5f9 (--text-hi, dark) on #0b0f18 (--surface-1, dark)  -> ~17.6:1
     #8992a8 (--text-lo, dark) on #0b0f18 (--surface-1, dark)  -> ~5.86:1
     #60a5fa (--accent,  dark) on #131a29 (--surface-0, dark)  -> ~7.18:1
     #4ade80 (--green-text, dark) on #131a29 (--surface-0, dark) -> ~10.47:1
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #131a29; --surface-1: #0b0f18; --surface-2: #1b2436; --surface-3: #23304a;
    --border: #29334c; --border-s: #37456a;
    --text-hi: #f3f5f9; --text-md: #c3c9d6; --text-lo: #8992a8; --text-ph: #64708a;

    --accent: #60a5fa; --accent-lt: #16233b; --accent-bd: #2f4a7a;

    --c-props: #7ea6ff;   --c-props-lt: #16233b;
    --c-veh: #f87171;     --c-veh-lt: #2a1416;
    --c-anim: #4ade80;    --c-anim-lt: #0f2417;
    --c-sfx: #fbbf24;     --c-sfx-lt: #2a1f0a;
    --c-roles: #b794f6;   --c-roles-lt: #211a35;
    --c-costume: #22d3ee; --c-costume-lt: #0b2530;
    --c-stunt: #f472b6;   --c-stunt-lt: #2a1420;
    --c-vfx: #a5b4fc;     --c-vfx-lt: #1c1f3a;

    --green: #22c55e; --green-text: #4ade80;
    --red: #f87171;
    --amber: #f59e0b; --amber-text: #fbbf24;

    --header-bg: #0a0e17; --header-text: #e2e8f0;
    --brand-tag: #94a3b8; --brand-sep: #94a3b8;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 36px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --surface-0: #131a29; --surface-1: #0b0f18; --surface-2: #1b2436; --surface-3: #23304a;
  --border: #29334c; --border-s: #37456a;
  --text-hi: #f3f5f9; --text-md: #c3c9d6; --text-lo: #8992a8; --text-ph: #64708a;
  --accent: #60a5fa; --accent-lt: #16233b; --accent-bd: #2f4a7a;
  --c-props: #7ea6ff;   --c-props-lt: #16233b;
  --c-veh: #f87171;     --c-veh-lt: #2a1416;
  --c-anim: #4ade80;    --c-anim-lt: #0f2417;
  --c-sfx: #fbbf24;     --c-sfx-lt: #2a1f0a;
  --c-roles: #b794f6;   --c-roles-lt: #211a35;
  --c-costume: #22d3ee; --c-costume-lt: #0b2530;
  --c-stunt: #f472b6;   --c-stunt-lt: #2a1420;
  --c-vfx: #a5b4fc;     --c-vfx-lt: #1c1f3a;
  --green: #22c55e; --green-text: #4ade80;
  --red: #f87171;
  --amber: #f59e0b; --amber-text: #fbbf24;
  --header-bg: #0a0e17; --header-text: #e2e8f0;
  --brand-tag: #94a3b8; --brand-sep: #94a3b8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 36px rgba(0,0,0,.55);
}
/* Explicit light override — wins even when the OS is set to dark, because an
   attribute selector on :root (0,1,1) out-specifies the plain :root inside
   the prefers-color-scheme block (0,1,0). Values are a straight restatement
   of the §2 defaults. */
:root[data-theme="light"] {
  --surface-0: #ffffff; --surface-1: #f5f6f8; --surface-2: #eceef2; --surface-3: #dde0e8;
  --border: #d1d5de; --border-s: #bbc0ce;
  --text-hi: #111827; --text-md: #374151; --text-lo: #5b6271; --text-ph: #6b7280;
  --accent: #1d4ed8; --accent-lt: #eff3ff; --accent-bd: #bfceff;
  --c-props: #1d4ed8;  --c-props-lt: #eff3ff;
  --c-veh: #b91c1c;    --c-veh-lt: #fff1f2;
  --c-anim: #15803d;   --c-anim-lt: #f0fdf4;
  --c-sfx: #b45309;    --c-sfx-lt: #fffbeb;
  --c-roles: #6d28d9;  --c-roles-lt: #f5f3ff;
  --c-costume: #0e7490;--c-costume-lt: #ecfeff;
  --c-stunt: #be185d;  --c-stunt-lt: #fdf2f8;
  --c-vfx: #4338ca;    --c-vfx-lt: #eef2ff;
  --green: #16a34a; --green-text: #15803d;
  --red: #dc2626;
  --amber: #d97706; --amber-text: #b45309;
  --header-bg: #1e2b3c; --header-text: #e2e8f0;
  --brand-tag: #94a3b8; --brand-sep: #94a3b8;
  --shadow-sm: 0 1px 3px rgba(17,24,39,.06);
  --shadow-md: 0 4px 12px rgba(17,24,39,.08);
  --shadow-lg: 0 10px 32px rgba(17,24,39,.12);
}

/* --------------------------------------------------------------------------
   4. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; }
body {
  font-family: var(--font); color: var(--text-hi); background: var(--surface-1);
  font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }

/* --------------------------------------------------------------------------
   5. Utilities — .vh (screen-reader-only) and .skip-link
   -------------------------------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 100;
  background: var(--header-bg); color: var(--header-text);
  padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-sm);
  font-weight: 600; transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */
.page { position: relative; z-index: 2; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px,3vw,32px); }

/* --------------------------------------------------------------------------
   7. Chrome / header + mobile navigation (review E2 §1/§4.1, CRITICAL)
   --------------------------------------------------------------------------
   No-JS baseline: nav is a normal flex row that WRAPS (never display:none),
   so it stays fully reachable if JS fails to load — the old site's bug
   (`.chrome nav{ display:none }` under 720px with no toggle at all) cannot
   happen here even by accident. The collapsible hamburger behaviour only
   activates once site.js has run and stamped `<html class="js">` (see
   site.js §1) — that's the enhancement, not the baseline.
   -------------------------------------------------------------------------- */
.chrome {
  background: var(--header-bg); color: var(--header-text);
  border-bottom: 1px solid color-mix(in srgb, var(--header-bg) 70%, #000);
  position: sticky; top: 0; z-index: 50;
}
.chrome-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--header-text); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em; text-decoration: none; }
.brand-mark { position: relative; display: inline-block; width: 20px; height: 20px; background: var(--accent); border-radius: 4px; flex: 0 0 auto; }
.brand-mark::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border: 2px solid var(--surface-0); border-radius: 2px; }
.brand .sep { color: var(--brand-sep); margin: 0 4px; }
.brand .tag { color: var(--brand-tag); font-weight: 400; font-size: var(--fs-sm); }

/* hamburger button — hidden until JS enhances the page; also hidden ≥720px
   by default since there's nothing to collapse there */
.nav-toggle {
  display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin-left: auto;
  background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
  cursor: pointer; gap: 5px; flex-direction: column;
}
.nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--header-text); border-radius: 1px; transition: transform .18s var(--ease), opacity .18s var(--ease); }
html.js .nav-toggle { display: inline-flex; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.chrome nav { display: flex; align-items: center; gap: clamp(10px,1.4vw,20px); flex-wrap: wrap; }
.chrome nav a {
  color: var(--header-text); text-decoration: none; font-size: var(--fs-sm);
  padding: 6px 10px; border-radius: var(--radius);
  overflow-wrap: break-word; hyphens: auto; max-width: 22ch;
}
.chrome nav a:hover, .chrome nav a:focus-visible { background: rgba(255,255,255,.08); text-decoration: none; }
.chrome nav a.active { background: var(--accent); color: #fff; }

.lang-switch { display: flex; gap: 2px; margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.16); }
.lang-switch a {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-tag); padding: 5px 7px; border-radius: var(--radius);
}
.lang-switch a:hover, .lang-switch a:focus-visible { background: rgba(255,255,255,.08); color: var(--header-text); text-decoration: none; }
.lang-switch a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }

.open-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: var(--accent); color: #fff; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background .15s var(--ease);
}
.open-cta:hover { background: #1e40af; text-decoration: none; }

@media (max-width: 720px) {
  /* No-JS: nav stays visible, wraps under the header row — a real fallback,
     not a broken one. */
  .chrome-inner { position: relative; }

  /* JS-enhanced: collapse the nav behind the toggle. */
  html.js .chrome nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--header-bg); border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 10px clamp(16px,3vw,32px) 16px; box-shadow: var(--shadow-lg);
  }
  html.js .chrome nav.is-open { display: flex; }
  html.js .chrome nav a { padding: 10px 8px; max-width: none; }
  html.js .lang-switch { margin: 8px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
}

/* --------------------------------------------------------------------------
   8. Slug / breadcrumb strip
   -------------------------------------------------------------------------- */
.slug {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-lo); border-bottom: 1px dashed var(--border);
  flex-wrap: wrap;
}
.slug .dots { display: flex; gap: 6px; }
.slug .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-ph); display: inline-block; }
.slug .dots i.hot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero { padding: clamp(48px,7vw,96px) 0 clamp(56px,8vw,112px); position: relative; }
.hero-kicker { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.display { font-family: var(--font); font-size: clamp(40px,6vw,80px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; color: var(--text-hi); margin: 0 0 clamp(24px,3vw,40px); }
.display em { font-style: normal; color: var(--accent); }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px,3vw,48px); align-items: end; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.lede { font-size: clamp(17px,1.2vw + 8px,20px); line-height: 1.5; color: var(--text-md); max-width: 52ch; }
.lede strong { color: var(--text-hi); font-weight: 700; }
.sub-lede { font-size: var(--fs-md); line-height: 1.55; color: var(--text-lo); max-width: 52ch; margin-top: 12px; }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hero-meta > div { background: var(--surface-0); padding: 14px 16px; }
.hero-meta span { display: block; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 4px; }
.hero-meta b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--text-hi); overflow-wrap: break-word; }
.cta-row { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--surface-0); color: var(--text-hi); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size: var(--fs-md);
  font-weight: 500; cursor: pointer; text-decoration: none; transition: all .12s var(--ease);
  white-space: nowrap; /* review §5.2: DE/ES CTAs must not wrap the arrow onto its own line */
}
.btn:hover { background: var(--surface-2); border-color: var(--border-s); text-decoration: none; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #1e40af; border-color: #1e40af; }
.btn.lg { padding: 14px 24px; font-size: var(--fs-lg); }
.btn .arr { display: inline-block; transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arr { transition: none; } }

/* --------------------------------------------------------------------------
   11. Sections
   -------------------------------------------------------------------------- */
.section { padding: clamp(56px,7vw,96px) 0; border-top: 1px solid var(--border); background: var(--surface-0); }
.section.alt { background: var(--surface-1); }
.section-head { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: end; margin-bottom: 36px; }
@media (max-width: 720px) { .section-head { grid-template-columns: 1fr; gap: 10px; } }
.section-num { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.section-title { font-size: clamp(27px,3.4vw,42px); line-height: 1.16; font-weight: 700; letter-spacing: -.02em; color: var(--text-hi); margin: 0; max-width: 22ch; overflow-wrap: break-word; hyphens: auto; }
.section-title em { font-style: normal; color: var(--accent); }
.section-standfirst { grid-column: 1 / -1; font-size: var(--fs-md); color: var(--text-lo); max-width: 60ch; margin-top: 4px; }
.section-body { max-width: 70ch; font-size: clamp(16px,1vw + 8px,18px); line-height: 1.55; color: var(--text-md); }
.section-body p { margin: 0 0 1em; }
.section-body p:last-child { margin-bottom: 0; }
.section-body h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--text-hi); margin: 28px 0 10px; }
.section-body ul { padding-left: 1.2em; margin: 0 0 1em; list-style: disc; }
.section-body li { margin: 0 0 .4em; }
.section-body li strong { font-weight: 700; color: var(--text-hi); }
.callout {
  margin-top: 20px; padding: 14px 18px; background: var(--accent-lt); border: 1px solid var(--accent-bd);
  border-radius: var(--radius); color: var(--text-hi); font-size: var(--fs-base); font-weight: 500;
}
.footnote { margin-top: 24px; font-size: var(--fs-sm); color: var(--text-lo); max-width: 70ch; }

/* --------------------------------------------------------------------------
   12. Features grid
   -------------------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feat {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; position: relative; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.feat:hover { border-color: var(--accent-bd); box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .feat { transition: none; } .feat:hover { transform: none; } }
.feat-num { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--text-lo); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.feat-num::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cat, var(--accent)); flex: 0 0 auto; }
.feat h3 { font-size: var(--fs-md); font-weight: 700; color: var(--text-hi); margin: 0 0 8px; letter-spacing: -.005em; }
.feat-body { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-md); margin: 0; }
.feat[data-cat="props"] { --cat: var(--c-props); }
.feat[data-cat="veh"] { --cat: var(--c-veh); }
.feat[data-cat="anim"] { --cat: var(--c-anim); }
.feat[data-cat="sfx"] { --cat: var(--c-sfx); }
.feat[data-cat="roles"] { --cat: var(--c-roles); }
.feat[data-cat="costume"] { --cat: var(--c-costume); }
.feat[data-cat="stunt"] { --cat: var(--c-stunt); }
.feat[data-cat="vfx"] { --cat: var(--c-vfx); }

/* --------------------------------------------------------------------------
   13. Derived-count — THE signature component (review E1, highest-value
   addition). Three scenes feeding one derived inventory total, rendered so
   the product's central mechanism ("counted from the breakdown, not typed")
   is visible instead of asserted in prose. Stacks vertically at narrow
   widths and rotates the connecting arrow to match; the flow animation is
   fully removed (not just slowed) under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.derived-count-section { background: var(--surface-1); }
.derived-count {
  display: flex; align-items: stretch; gap: var(--sp-5);
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px,3vw,32px); box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .derived-count { flex-direction: column; gap: var(--sp-4); } }

.dc-scenes { flex: 1 1 42%; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dc-scene {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: baseline;
  padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
}
.dc-scene-no { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.dc-scene-label { font-size: var(--fs-sm); color: var(--text-md); overflow-wrap: break-word; min-width: 0; }
.dc-scene-qty {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; color: var(--text-hi);
  background: var(--accent-lt); border: 1px solid var(--accent-bd); border-radius: var(--radius-pill);
  padding: 2px 10px; white-space: nowrap;
}

.dc-arrow { flex: 0 0 auto; width: 44px; align-self: center; display: flex; align-items: center; justify-content: center; }
.dc-arrow::before {
  content: "→"; display: block; font-family: var(--font); font-size: 30px; font-weight: 800;
  color: var(--accent); line-height: 1;
}
@media (max-width: 720px) {
  .dc-arrow { width: auto; height: 32px; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .dc-arrow::before { animation: dc-flow-h 1.8s ease-in-out infinite; }
  @media (max-width: 720px) { .dc-arrow::before { animation-name: dc-flow-v; } }
}
@keyframes dc-flow-h { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
@keyframes dc-flow-v { 0%, 100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } }

.dc-result {
  flex: 1 1 42%; min-width: 0; background: var(--header-bg); color: var(--header-text);
  border-radius: var(--radius); padding: var(--sp-4) clamp(18px,2.4vw,26px);
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.dc-result-label { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tag); }
.dc-result-item { font-size: var(--fs-lg); font-weight: 700; color: #fff; overflow-wrap: break-word; margin-top: 2px; }
.dc-result-qty { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.dc-total { font-family: var(--font); font-size: var(--fs-4xl); font-weight: 800; line-height: 1; color: #60a5fa; }
.dc-note { font-size: var(--fs-sm); color: #c3c9d6; margin-top: 10px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   14. Honest limits — neutral "by design" cards (review E5): reuses the
   .feat card grammar but with a deliberately calm, non-alarm palette. No red.
   -------------------------------------------------------------------------- */
.limits-section { }
.limits { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 980px) { .limits { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .limits { grid-template-columns: 1fr; } }
.limit {
  background: var(--surface-0); border: 1px solid var(--border); border-left: 3px solid var(--text-lo);
  border-radius: var(--radius); padding: 20px 20px;
}
.limit h3 { font-size: var(--fs-md); font-weight: 700; color: var(--text-hi); margin: 0 0 8px; }
.limit p { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-md); margin: 0; }
.limit-instead { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--text-lo); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. Pricing — 3-column tier grid + full-width flat-rate Pass band
   (review E5: Production Pass is NOT a fourth grid column — it's rendered
   below, reusing the .hero-meta stat-cell language on a dark surface, same
   register as .closer).
   -------------------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); gap: 10px;
}
.tier.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.tier-flag {
  align-self: flex-start; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: #fff; background: var(--accent);
  padding: 4px 10px; border-radius: var(--radius-pill);
  /* review §5.1: inline row in the card header, never an absolutely-positioned
     corner ribbon — that clips under long DE strings. */
}
.tier-name { font-size: var(--fs-xl); font-weight: 700; color: var(--text-hi); margin-top: 4px; overflow-wrap: break-word; hyphens: auto; }
.tier-price { display: flex; align-items: baseline; gap: 6px; }
.tier-price .amount { font-family: var(--font); font-size: var(--fs-3xl); font-weight: 800; color: var(--text-hi); letter-spacing: -.01em; }
.tier-price .unit { font-size: var(--fs-sm); color: var(--text-lo); }
.tier-floor { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--text-lo); text-transform: uppercase; }
.tier-for { font-size: var(--fs-sm); color: var(--text-md); }
.tier-features {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0; margin: 4px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.tier-features li {
  position: relative; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-md); overflow-wrap: break-word; hyphens: auto;
}
.tier-features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-text); font-weight: 700; font-size: var(--fs-sm);
}
.tier > .btn { justify-content: center; margin-top: 4px; }

.pass-band {
  margin-top: var(--sp-4); background: var(--header-bg); color: var(--header-text);
  border-radius: var(--radius-lg); padding: clamp(20px,3vw,32px);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-5); align-items: center;
}
@media (max-width: 720px) { .pass-band { grid-template-columns: 1fr; } }
.pass-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pass-name { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tag); }
.pass-price { font-family: var(--font); font-size: var(--fs-3xl); font-weight: 800; color: #fff; }
.pass-meta {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 720px) { .pass-meta { grid-template-columns: 1fr 1fr; } }
.pass-meta > div { background: rgba(255,255,255,.04); padding: 12px 14px; min-width: 0; }
.pass-meta span { display: block; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-tag); margin-bottom: 4px; }
.pass-meta b { display: block; font-size: var(--fs-md); font-weight: 600; color: #fff; overflow-wrap: break-word; }
.pass-body { grid-column: 1 / -1; font-size: var(--fs-base); color: #c3c9d6; max-width: 65ch; }
.pass-band > .btn { justify-self: start; white-space: nowrap; }
@media (max-width: 720px) { .pass-band > .btn { grid-column: 1; justify-self: stretch; justify-content: center; } }

/* --------------------------------------------------------------------------
   16. Comparison table — sticky first column ≥860px, horizontally scrollable
   container (page itself never scrolls), <details> accordion instead of the
   table below 720px (review E5). AA-safe cell colors + a screen-reader story
   for the ✓/—/~ glyphs (review E2 §4.1 MAJOR): every cell also carries a
   .vh label, so the glyph is aria-hidden and decorative only.
   -------------------------------------------------------------------------- */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: var(--surface-0); font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp thead th {
  background: var(--surface-1); font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-lo); font-weight: 600; white-space: nowrap;
}
.cmp tbody th {
  font-weight: 600; color: var(--text-hi); background: var(--surface-1); white-space: normal;
  overflow-wrap: break-word; hyphens: auto; max-width: 22ch;
}
.cmp thead th.self, .cmp td.self { color: var(--accent); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp td.yes { color: var(--green-text); font-weight: 600; }
.cmp td.no { color: var(--text-lo); }
.cmp td.partial { color: var(--amber-text); font-weight: 600; }
.cmp td span[aria-hidden] { font-size: var(--fs-md); }

@media (min-width: 860px) {
  .cmp thead th:first-child, .cmp tbody th[scope="row"] {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface-1);
    box-shadow: 2px 0 4px rgba(17,24,39,.08);
  }
}

.cmp-accordions { display: none; }
.cmp-acc {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 0; margin-bottom: 10px;
}
.cmp-acc[open] { border-color: var(--accent-bd); }
.cmp-acc summary {
  cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; color: var(--text-hi);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cmp-acc summary::-webkit-details-marker { display: none; }
.cmp-acc summary::after { content: "+"; font-family: var(--mono); color: var(--text-lo); font-size: var(--fs-lg); line-height: 1; }
.cmp-acc[open] summary::after { content: "–"; }
.cmp-acc ul { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.cmp-acc li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--text-md); border-top: 1px dashed var(--border); padding-top: 8px; }
.cmp-acc li:first-child { border-top: 0; padding-top: 0; }
.cmp-acc li b { color: var(--text-hi); font-weight: 600; text-align: right; }

@media (max-width: 719px) {
  .cmp-scroll { display: none; }
  .cmp-accordions { display: block; }
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 78ch; }
.faq-item { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 600; color: var(--text-hi);
  font-size: var(--fs-md); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: var(--fs-xl); line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-a { padding: 14px 18px 18px; color: var(--text-md); font-size: var(--fs-base); line-height: 1.6; }
.faq-a p { margin: 0 0 .8em; }
.faq-a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Downloads
   -------------------------------------------------------------------------- */
.downloads { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .downloads { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .downloads { grid-template-columns: 1fr; } }
.dl { display: flex; flex-direction: column; gap: 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.dl-kind { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dl h3 { font-size: var(--fs-md); font-weight: 700; color: var(--text-hi); }
.dl p { font-size: var(--fs-sm); color: var(--text-md); line-height: 1.5; flex: 1 0 auto; }
.dl .btn { align-self: flex-start; margin-top: 4px; }

/* --------------------------------------------------------------------------
   19. Closer
   -------------------------------------------------------------------------- */
.closer { background: var(--header-bg); color: var(--header-text); padding: clamp(56px,7vw,96px) 0; text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.closer-kicker { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tag); margin-bottom: 18px; }
.closer h2 { font-size: clamp(30px,4vw,52px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.closer h2 em { font-style: normal; color: #60a5fa; }
.closer-body { max-width: 62ch; margin: 0 auto 28px; color: #c3c9d6; font-size: var(--fs-lg); }
.closer .cta-row { grid-column: auto; justify-content: center; margin-top: 0; }
.closer .btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.closer .btn:hover { background: #1e40af; border-color: #1e40af; }
.closer .btn:not(.primary) { background: transparent; color: var(--header-text); border-color: rgba(255,255,255,.28); }
.closer .btn:not(.primary):hover { background: rgba(255,255,255,.08); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.foot { padding: 40px 0 28px; background: var(--surface-0); border-top: 1px solid var(--border); }
.foot-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); padding-bottom: 28px; }
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-col ul { display: flex; flex-direction: column; gap: 8px; }
.foot-h { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 10px; }
.foot-col a { color: var(--text-md); text-decoration: none; font-size: var(--fs-sm); overflow-wrap: break-word; }
.foot-col a:hover { color: var(--accent); text-decoration: underline; }
.foot-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--text-lo);
}
.foot-base a { color: var(--text-lo); }
.foot-base a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   21. Prose / compact-hero pages (about, imprint style) — carried over from
   /styles.css for continuity even though no block in blocks.mjs emits them
   yet; harmless to keep, costs nothing, matches "carry over" instruction (F).
   -------------------------------------------------------------------------- */
.hero-compact { padding: clamp(40px,5vw,64px) 0 clamp(24px,3vw,40px); }
.page-title { font-size: clamp(34px,4.6vw,60px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; color: var(--text-hi); }
.page-subtitle { font-size: clamp(16px,1vw + 8px,19px); color: var(--text-md); max-width: 60ch; margin: 0; }
.cards-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 900px) { .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cards-4 { grid-template-columns: 1fr; } }
.card { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.card h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--text-hi); margin: 0 0 6px; }
.card p { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-md); margin: 0; }
.addr { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.8; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: inline-block; }
.addr strong { font-weight: 700; color: var(--text-hi); }

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  .chrome, .foot, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ─── product screenshots (v3.37.3) ─────────────────────────────────────────
   Real captures from a seeded demo production, never mockups. Framed like a
   window onto the app rather than dropped flat onto the page. */
.shot-section .section-head { margin-bottom: var(--sp-5); }
.shot { margin: 0; }
.shot-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.shot-frame img { width: 100%; height: auto; display: block; }
.shot figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-lo);
  line-height: 1.5;
  max-width: 62ch;
}
.shot figcaption strong { color: var(--text-hi); }
.shot-wide .shot-frame { border-radius: 0; border-left: 0; border-right: 0; }
@media (max-width: 720px) {
  .shot-frame { border-radius: 4px; }
  .shot figcaption { font-size: var(--fs-xs); }
}

/* ─── props motion toggle (v3.37.3) ─────────────────────────────────────────
   Restored from the original site, but OFF by default and mounted only on
   pages that opt in (home + about). The canvas sits behind everything. */
#board-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
body.game-live #board-canvas { pointer-events: auto; }
.page { position: relative; z-index: 2; }

.game-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
}
.game-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-lo);
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 10px; box-shadow: var(--shadow-sm);
}
.game-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--header-bg); color: var(--header-text);
  border: 1px solid var(--header-bg); box-shadow: var(--shadow-md);
}
.game-btn:hover { background: #16212f; }
.game-btn .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-ph); transition: background .15s;
}
.game-btn[aria-pressed="true"] .dot { background: var(--green); }
.game-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .game-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .game-toggle { display: none; } }