/* ============================================================
   FIRST LIGHT — minecraftsa.co.za
   Vanilla CSS design system. No external assets, no web fonts.
   Shared by index.html, privacy.html, terms.html.
   ============================================================ */

:root {
  /* stage darks */
  --ink-0: #05080f;
  --ink-1: #0a1020;
  --ink-2: #101a30;
  /* text */
  --paper: #eef3fb;
  --mist: #8b9bb4;
  /* accents */
  --emerald: #3ddc74;
  --emerald-deep: #127a3f;
  --amber: #ffb454;
  --cyan: #5ad7ff;
  /* type stacks */
  --display: -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* pixel-stepped corners: two 4px notches per corner (the brand: radius 0 everywhere) */
  --notch: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
  );
  /* larger 8px steps (arcade cabinet) */
  --notch-lg: polygon(
    0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
    calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
    100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px),
    calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
    16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
  );
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; background: var(--ink-0); }
body {
  font-family: var(--display);
  background: transparent;
  color: var(--paper);
  font-size: 1.06rem;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: var(--emerald); }
::selection { background: var(--emerald-deep); color: var(--paper); }

/* ============ SKY CROSSFADER (index only; fixed, behind everything) ============ */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-layer { position: absolute; inset: 0; will-change: opacity; }
.sky-night {
  opacity: 1;
  background:
    radial-gradient(1200px 420px at 50% 104%, rgba(26, 36, 51, 0.9), transparent 70%),
    linear-gradient(180deg, #05080f 0%, #060b16 55%, #0a1220 100%);
}
.sky-cavern {
  opacity: 0;
  background:
    radial-gradient(1100px 560px at 50% 108%, rgba(255, 180, 84, 0.16), transparent 65%),
    radial-gradient(700px 320px at 22% 100%, rgba(255, 180, 84, 0.07), transparent 70%),
    linear-gradient(180deg, #030509 0%, #04060b 100%);
}
.sky-dawn {
  opacity: 0;
  background:
    radial-gradient(1200px 540px at 50% 102%, rgba(255, 158, 100, 0.30), rgba(255, 210, 125, 0.10) 45%, transparent 72%),
    linear-gradient(180deg, #05080f 0%, #0a0f1c 100%);
}
/* starfields: two inline-SVG tiles drifting at different parallax rates (transform only) */
.stars { position: absolute; inset: -340px -340px -340px -340px; background-repeat: repeat; }
.stars-a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23cfe3ff'%3E%3Crect x='10' y='30' width='2' height='2'/%3E%3Crect x='60' y='12' width='2' height='2'/%3E%3Crect x='110' y='80' width='2' height='2'/%3E%3Crect x='150' y='40' width='2' height='2'/%3E%3Crect x='200' y='120' width='2' height='2'/%3E%3Crect x='30' y='160' width='2' height='2'/%3E%3Crect x='90' y='200' width='2' height='2'/%3E%3Crect x='170' y='180' width='2' height='2'/%3E%3Crect x='220' y='60' width='2' height='2'/%3E%3Crect x='50' y='90' width='2' height='2'/%3E%3Crect x='130' y='140' width='2' height='2'/%3E%3Crect x='20' y='220' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.55;
  animation: driftA 180s linear infinite;
}
.stars-b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%239fd8ff'%3E%3Crect x='40' y='50' width='3' height='3'/%3E%3Crect x='160' y='20' width='3' height='3'/%3E%3Crect x='260' y='140' width='3' height='3'/%3E%3Crect x='90' y='230' width='3' height='3'/%3E%3Crect x='220' y='280' width='3' height='3'/%3E%3Crect x='300' y='60' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.35;
  animation: driftB 260s linear infinite;
}
@keyframes driftA { to { transform: translate3d(-240px, 240px, 0); } }
@keyframes driftB { to { transform: translate3d(-320px, 320px, 0); } }

/* ============ NAV (fixed chrome; backdrop-filter allowed here ONLY) ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 5vw;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(5, 8, 15, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: var(--paper); }
.logo span { color: var(--emerald); }
.nav-cta {
  display: inline-block;
  border: 1px solid var(--emerald);
  color: var(--emerald);
  background: transparent;
  text-decoration: none;
  padding: 0.45rem 1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: var(--notch);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: rgba(61, 220, 116, 0.14); }
.nav-cta:active { transform: translateY(2px); }

/* ============ Y-LEVEL DEPTH GAUGE ============ */
.ygauge {
  position: fixed; right: 12px; top: 50%; z-index: 40;
  transform: translateY(-50%);
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--mist);
  background: var(--ink-1);
  padding: 0.45rem 0.7rem;
  clip-path: var(--notch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

/* ============ VOXEL SLAB (the one surface primitive) ============ */
.slab { position: relative; z-index: 0; background: transparent; }
.slab::before { /* hard extrusion block */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: #05080f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  clip-path: var(--notch);
  transform: translate(8px, 8px);
}
.slab::after { /* face + rim light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink-1);
  clip-path: var(--notch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* stepping-on-a-block press (features) */
.slab-press { transition: transform 0.13s ease-out; }
.slab-press::before { transition: transform 0.13s ease-out; }
.slab-press:hover, .slab-press:focus-visible { transform: translate(4px, 4px); }
.slab-press:hover::before, .slab-press:focus-visible::before { transform: translate(4px, 4px); }

/* ============ EYEBROWS / TITLES / TEXT ============ */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  display: flex; align-items: center; gap: 0.65rem;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.eyebrow-sq { width: 10px; height: 10px; background: var(--emerald); flex: 0 0 auto; }
.dawn-sq { background: #ff9e64; }
.chapter-cavern .eyebrow-sq { background: var(--amber); }
.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 0.9rem;
}
.section-sub { text-align: center; color: var(--mist); max-width: 640px; margin: 0 auto 3.5rem; }

/* ============ SECTIONS ============ */
section, .final-cta { position: relative; contain: layout style; }
.chapter { padding: clamp(6rem, 14vh, 12.5rem) 5vw; }
.chapter-inner { max-width: 1120px; margin: 0 auto; position: relative; }
.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* volumetric light per band */
.glow-emerald::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 480px at 50% 0%, rgba(61, 220, 116, 0.12), transparent 70%);
}
.glow-amber::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 100%, rgba(255, 180, 84, 0.12), transparent 70%);
}

/* ============ REVEALS (transform/opacity only; additive — never hides without JS) ============ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal,
  .js .reveal-kids > * { opacity: 0; transform: translateY(24px); }
  .js .reveal.slab::before,
  .js .reveal-kids > .slab::before { transform: translate(0, 0); }
  .js .reveal.in-view,
  .js .reveal-kids.in-view > * {
    opacity: 1; transform: none;
    transition: opacity 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
  }
  .js .reveal.in-view.slab::before,
  .js .reveal-kids.in-view > .slab::before {
    transform: translate(8px, 8px);
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
  }
  .js .reveal-kids.in-view > *:nth-child(2), .js .reveal-kids.in-view > *:nth-child(2)::before { transition-delay: 0.07s; }
  .js .reveal-kids.in-view > *:nth-child(3), .js .reveal-kids.in-view > *:nth-child(3)::before { transition-delay: 0.14s; }
  .js .reveal-kids.in-view > *:nth-child(4), .js .reveal-kids.in-view > *:nth-child(4)::before { transition-delay: 0.21s; }
  .js .reveal-kids.in-view > *:nth-child(5), .js .reveal-kids.in-view > *:nth-child(5)::before { transition-delay: 0.28s; }
  .js .reveal-kids.in-view > *:nth-child(6), .js .reveal-kids.in-view > *:nth-child(6)::before { transition-delay: 0.35s; }
  .js .reveal-kids.in-view > *:nth-child(7), .js .reveal-kids.in-view > *:nth-child(7)::before { transition-delay: 0.42s; }
  .js .reveal-kids.in-view > *:nth-child(8), .js .reveal-kids.in-view > *:nth-child(8)::before { transition-delay: 0.49s; }
}

/* ============ HERO — THE BLACK-BOX THEATRE ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: calc(56px + 4.5vh) 5vw 0;
  overflow: hidden;
}
/* god rays: hero only, capped 6% opacity, behind all text */
.sky-rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ray {
  position: absolute; top: -20%; left: 50%; width: 46vw; height: 90vh;
  background: conic-gradient(from 178deg at 50% 0%, transparent 0deg, rgba(61, 220, 116, 0.85) 2deg, transparent 5deg);
  mix-blend-mode: screen;
  opacity: 0.05;
}
.ray-a { transform: translateX(-78%) rotate(-8deg); }
.ray-b { transform: translateX(-16%) rotate(8deg); opacity: 0.04; }
/* SVG noise tile kills gradient banding */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
}
.hero-stage {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}
#hero-canvas { display: block; width: 100%; height: 100%; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: var(--ink-0); opacity: 0; pointer-events: none; }
.hero-spec {
  position: absolute; top: 0; left: 0; width: 320px; height: 320px; z-index: 1;
  background: radial-gradient(circle, rgba(238, 243, 251, 1), transparent 60%);
  opacity: 0.06; pointer-events: none;
  transform: translate3d(-400px, -400px, 0);
}
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mist);
  background: var(--ink-1);
  padding: 0.45rem 0.9rem;
  clip-path: var(--notch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
}
.dot { width: 9px; height: 9px; background: var(--emerald); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 1.1rem;
}
.h1-mask { display: block; overflow: hidden; padding: 0.04em 0.1em; }
.h1-line { display: inline-block; }
.grad {
  background: linear-gradient(120deg, var(--emerald), #6ecf55);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .js .h1-line { transform: translateY(110%); }
  .js.raise .h1-line { transform: none; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) 0.25s; }
  .js.raise .h1-mask:nth-of-type(2) .h1-line { transition-delay: 0.37s; }
  .js .subtitle, .js .hero .hint, .js .badge { opacity: 0; }
  .js.raise .subtitle, .js.raise .hero .hint, .js.raise .badge { opacity: 1; transition: opacity 0.9s ease 1s; }
  .js.raise .badge { transition-delay: 0.1s; }
}
.subtitle { color: var(--mist); max-width: 640px; font-size: clamp(1rem, 2.2vw, 1.2rem); margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
.hint { color: var(--mist); font-size: 0.85rem; font-family: var(--mono); margin-top: 1.1rem; text-shadow: 0 1px 8px var(--ink-0), 0 0 14px var(--ink-0); }

/* ============ IP BEACON SLAB (built once, instanced twice) ============ */
.beacon { position: relative; display: inline-block; }
.beam {
  position: absolute;
  width: 96px;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 116, 0.55) 50%, transparent);
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  opacity: 0;
  z-index: 0;
}
.beam.on { transform: scaleY(1); opacity: 0.85; transition: transform 0.5s ease, opacity 0.3s ease; }
.beam::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(140, 255, 180, 0.9) 50%, transparent);
  opacity: 0;
}
.beam.pulse::after { animation: beamPulse 0.5s ease; }
@keyframes beamPulse { 30% { opacity: 1; } 100% { opacity: 0; } }

.ip-slab {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 1.2rem 1.6rem 1rem;
  max-width: calc(100vw - 2.5rem);
}
.ip-slab::after { background: rgba(8, 13, 26, 0.92); }
.ip-line { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; justify-content: center; }
.ip-code, .ip-box code {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  color: var(--emerald);
  letter-spacing: 0.02em;
}
.ip-code { display: inline-block; min-width: 22ch; text-align: left; }
.cursor {
  font-family: var(--mono);
  color: var(--emerald);
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  animation: blink 1.1s steps(2, jump-none) infinite;
}
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } }
.copy-btn {
  border: none; cursor: pointer;
  background: var(--emerald);
  color: #04220e;
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  clip-path: var(--notch);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, background-color 0.15s ease;
}
.copy-btn:hover, .copy-btn:focus-visible { background: #5ce88c; }
.copy-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); }
.copy-btn.flash { animation: btnFlash 0.4s ease; }
@keyframes btnFlash { 0% { background: #b6ffd0; } 100% { background: var(--emerald); } }
html:not(.js) .copy-btn { display: none; }
.ip-caption { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
/* hero instance: materializes on top of the beam once the pedestal lands */
@media (prefers-reduced-motion: no-preference) {
  .js #hero-beacon .ip-slab { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  .js #hero-beacon.lit .ip-slab {
    opacity: 1; transform: none; filter: none;
    transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
  }
}
/* legacy .ip-box kept for safety (no longer in markup) */
.ip-box { display: inline-flex; align-items: center; gap: 0.75rem; }

/* ============ CHAPTER 01 — THE OVERWORLD ============ */
.overworld-grid {
  display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.editorial {
  font-size: 1.3rem; line-height: 1.8; color: var(--paper);
  text-align: left; max-width: 640px; margin: 0; flex: 1 1 380px;
}
.city { box-shadow: inset 0 -6px 0 rgba(61, 220, 116, 0.45); }
.sa-map { width: min(340px, 82vw); height: auto; flex: 0 0 auto; }
.sa-map .mc-base { fill: var(--ink-2); }
.sa-map .mc-trace { stroke: rgba(61, 220, 116, 0.22); stroke-width: 0.75; }
.sa-map .mc-city { fill: var(--emerald); animation: cityPulse 2.6s ease-in-out infinite; }
.sa-map .mc-pta { animation-delay: 0.5s; }
.sa-map .mc-dbn { animation-delay: 1s; }
.sa-map .mc-cpt { animation-delay: 1.5s; }
.sa-map .mc-server { fill: #9dffbf; }
@keyframes cityPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ============ AD SLOTS — deliberately the flattest elements on the page.
   No bevels, no notches, no glow, no hover. Quiet intermission bands.
   Fixed min-heights (zero CLS) + generous isolation from interactive UI. ============ */
.ad-slot {
  max-width: none;
  margin: 0;
  padding: 3.5rem 5vw;
  text-align: center;
  background: var(--ink-0);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ad-slot__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.8rem;
}
.ad-slot__placeholder {
  max-width: 728px;
  margin: 0 auto;
  min-height: 90px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.ad-slot__placeholder::before { content: "Ad slot reserved — pending AdSense approval"; }

/* ============ CHAPTER 02 — WHY PLAY HERE ============ */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1120px;
  margin: 0 auto;
}
.card { padding: 2rem 1.9rem; }
.card .glyph { width: 40px; height: 40px; color: var(--emerald); display: block; margin-bottom: 1.1rem; }
.card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.card p { color: var(--mist); font-size: 0.97rem; }

/* ============ CHAPTER 03 — THE CAVERN (arcade) ============ */
.chapter-cavern { padding-left: 0; padding-right: 0; }
.chapter-cavern .chapter-inner { padding: 0 5vw; }
.chapter-cavern .section-sub { color: var(--mist); }
.arcade-cabinet {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px;
  background: var(--ink-2);
  clip-path: var(--notch-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.28);
}
.arcade-marquee {
  font-family: var(--mono); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.45em; text-indent: 0.45em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: center;
  padding: 0.55rem 0 0.65rem;
}
.arcade-cabinet.shake { animation: cabShake 0.4s linear; }
@keyframes cabShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(3px, -2px); }
  40% { transform: translate(-3px, 2px); }
  60% { transform: translate(2px, 3px); }
  80% { transform: translate(-2px, -3px); }
}
.arcade-hint { text-align: center; color: var(--mist); font-family: var(--mono); font-size: 0.78rem; margin: 0.9rem auto 0; max-width: 560px; }

/* Block Runner chrome (game canvas + logic untouched; --br-* re-pointed to cavern palette) */
.br-container, .br-container * { box-sizing: border-box; }
.br-container {
  --br-bg: #0d1117;
  --br-accent: var(--amber);
  --br-grass: #6bbb3c;
  --br-dirt: #7a5230;
  --br-text: #f2e7d4;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--mono);
  color: var(--br-text);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.br-container:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.br-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #060a14;
  border: 1px solid rgba(255, 180, 84, 0.25);
  border-bottom: none;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.br-hud-item { color: var(--mist); }
.br-hud-value { color: var(--br-accent); font-weight: 700; margin-left: 6px; }
.br-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 270;
  background: var(--br-bg);
  border: 1px solid rgba(255, 180, 84, 0.25);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.br-canvas { display: block; width: 100%; height: 100%; }
/* static CRT scanlines — never animated */
.br-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 4px);
  opacity: 0.04;
}

/* ============ CHAPTER 04 — THE ARCHIVE (FAQ ledger) ============ */
.faq-section { padding: clamp(6rem, 14vh, 12.5rem) 5vw; }
#faq-heading {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 3.5rem;
}
.faq-ledger { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.2rem; }
.faq-item { padding: 1.7rem 1.9rem 1.7rem 5.2rem; }
.faq-item:nth-of-type(odd) { margin-right: 24px; }
.faq-item:nth-of-type(even) { margin-left: 24px; }
.ghost-num {
  position: absolute; left: 0.9rem; top: 0.9rem; z-index: 0;
  font-family: var(--mono); font-weight: 700; font-size: 3rem; line-height: 1;
  color: var(--paper); opacity: 0.08;
  pointer-events: none;
}
.faq-item h3 { position: relative; font-size: 1.15rem; font-weight: 700; color: var(--paper); margin-bottom: 0.5rem; }
.faq-item p { position: relative; color: var(--mist); font-size: 0.97rem; }
.faq-item strong { color: var(--emerald); font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; }

/* ============ CHAPTER 05 — THE PATH ============ */
.steps-wrap { position: relative; max-width: 1120px; margin: 0 auto; }
.path-line { position: absolute; left: 4%; right: 4%; top: 50%; width: 92%; height: 12px; margin-top: -6px; color: var(--emerald-deep); z-index: -1; }
.path-draw { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .path-draw { stroke-dashoffset: 100; transition: stroke-dashoffset 0.9s ease 0.25s; }
  .js .path-sec.in-view .path-draw, .js .in-view .path-draw { stroke-dashoffset: 0; }
}
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.step { padding: 2rem 1.8rem; }
.step .ghost-num {
  left: auto; right: 0.6rem; top: -0.5rem;
  font-size: clamp(4rem, 6vw, 7rem); font-weight: 900; font-family: var(--display);
  opacity: 0.1;
}
.step h3 { position: relative; font-weight: 800; font-size: 1.2rem; margin-bottom: 0.45rem; }
.step p { position: relative; color: var(--mist); font-size: 0.95rem; }
.step code { color: var(--emerald); font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; }
.copy-mini { margin-top: 0.9rem; padding: 0.5rem 0.9rem; font-size: 0.72rem; position: relative; }
.path-connector { display: none; }

/* ============ FIRST LIGHT — FINAL CTA ============ */
.final-cta {
  position: relative;
  text-align: center;
  padding: clamp(6rem, 14vh, 12.5rem) 5vw clamp(9rem, 16vh, 14rem);
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1000px 460px at 50% 100%, rgba(255, 158, 100, 0.18), rgba(255, 210, 125, 0.06) 50%, transparent 75%);
}
.final-cta h2 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 1rem;
}
.cta-sub { color: var(--mist); margin: 0 auto 3rem; max-width: 560px; }
.final-cta .beacon .beam {
  left: 50%; top: auto; bottom: 55%;
  height: 230px; width: 130px;
  margin-left: -65px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 120, 0.45) 50%, transparent);
}
.final-cta .beam.on,
html:not(.js) .final-cta .beam,
.final-cta .in-view .beam { transform: scaleY(1); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .js .final-cta .beam { transition: transform 0.7s ease 0.5s, opacity 0.4s ease 0.5s; }
}
/* pixel-art horizon silhouette (pure box-shadow voxel skyline) */
.dawn-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; overflow: hidden; pointer-events: none; }
.dawn-horizon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #030509; }
.skyline {
  position: absolute; left: 50%; bottom: 0;
  width: 8px; height: 8px; background: #030509;
  box-shadow: -352px 0px 0 0 #030509,-344px 0px 0 0 #030509,-336px 0px 0 0 #030509,-336px -8px 0 0 #030509,-328px 0px 0 0 #030509,-328px -8px 0 0 #030509,-328px -16px 0 0 #030509,-320px 0px 0 0 #030509,-320px -8px 0 0 #030509,-320px -16px 0 0 #030509,-320px -24px 0 0 #030509,-312px 0px 0 0 #030509,-312px -8px 0 0 #030509,-312px -16px 0 0 #030509,-312px -24px 0 0 #030509,-304px 0px 0 0 #030509,-304px -8px 0 0 #030509,-304px -16px 0 0 #030509,-304px -24px 0 0 #030509,-296px 0px 0 0 #030509,-296px -8px 0 0 #030509,-296px -16px 0 0 #030509,-288px 0px 0 0 #030509,-288px -8px 0 0 #030509,-288px -16px 0 0 #030509,-288px -24px 0 0 #030509,-280px 0px 0 0 #030509,-280px -8px 0 0 #030509,-280px -16px 0 0 #030509,-280px -24px 0 0 #030509,-272px 0px 0 0 #030509,-272px -8px 0 0 #030509,-272px -16px 0 0 #030509,-264px 0px 0 0 #030509,-264px -8px 0 0 #030509,-264px -16px 0 0 #030509,-264px -24px 0 0 #030509,-256px 0px 0 0 #030509,-256px -8px 0 0 #030509,-256px -16px 0 0 #030509,-256px -24px 0 0 #030509,-248px 0px 0 0 #030509,-248px -8px 0 0 #030509,-248px -16px 0 0 #030509,-248px -24px 0 0 #030509,-240px 0px 0 0 #030509,-240px -8px 0 0 #030509,-240px -16px 0 0 #030509,-232px 0px 0 0 #030509,-232px -8px 0 0 #030509,-224px 0px 0 0 #030509,-216px 0px 0 0 #030509,-208px 0px 0 0 #030509,-208px -8px 0 0 #030509,-200px 0px 0 0 #030509,-200px -8px 0 0 #030509,-200px -16px 0 0 #030509,-200px -24px 0 0 #030509,-200px -32px 0 0 #030509,-192px 0px 0 0 #030509,-192px -8px 0 0 #030509,-192px -16px 0 0 #030509,-192px -24px 0 0 #030509,-184px 0px 0 0 #030509,-184px -8px 0 0 #030509,-184px -16px 0 0 #030509,-184px -24px 0 0 #030509,-176px 0px 0 0 #030509,-176px -8px 0 0 #030509,-176px -16px 0 0 #030509,-168px 0px 0 0 #030509,-168px -8px 0 0 #030509,-168px -16px 0 0 #030509,-168px -24px 0 0 #030509,-160px 0px 0 0 #030509,-160px -8px 0 0 #030509,-160px -16px 0 0 #030509,-160px -24px 0 0 #030509,-152px 0px 0 0 #030509,-152px -8px 0 0 #030509,-152px -16px 0 0 #030509,-152px -24px 0 0 #030509,-152px -32px 0 0 #030509,-144px 0px 0 0 #030509,-144px -8px 0 0 #030509,-144px -16px 0 0 #030509,-144px -24px 0 0 #030509,-136px 0px 0 0 #030509,-136px -8px 0 0 #030509,-136px -16px 0 0 #030509,-128px 0px 0 0 #030509,-128px -8px 0 0 #030509,-120px 0px 0 0 #030509,-112px 0px 0 0 #030509,-104px 0px 0 0 #030509,-104px -8px 0 0 #030509,-96px 0px 0 0 #030509,-96px -8px 0 0 #030509,-96px -16px 0 0 #030509,-88px 0px 0 0 #030509,-88px -8px 0 0 #030509,-80px 0px 0 0 #030509,-72px 0px 0 0 #030509,-64px 0px 0 0 #030509,-64px -8px 0 0 #030509,-56px 0px 0 0 #030509,-56px -8px 0 0 #030509,-56px -16px 0 0 #030509,-48px 0px 0 0 #030509,-48px -8px 0 0 #030509,-48px -16px 0 0 #030509,-40px 0px 0 0 #030509,-40px -8px 0 0 #030509,-40px -16px 0 0 #030509,-32px 0px 0 0 #030509,-32px -8px 0 0 #030509,-32px -16px 0 0 #030509,-32px -24px 0 0 #030509,-24px 0px 0 0 #030509,-24px -8px 0 0 #030509,-24px -16px 0 0 #030509,-24px -24px 0 0 #030509,-16px 0px 0 0 #030509,-16px -8px 0 0 #030509,-16px -16px 0 0 #030509,-16px -24px 0 0 #030509,-8px 0px 0 0 #030509,-8px -8px 0 0 #030509,-8px -16px 0 0 #030509,-8px -24px 0 0 #030509,0px 0px 0 0 #030509,0px -8px 0 0 #030509,0px -16px 0 0 #030509,0px -24px 0 0 #030509,0px -32px 0 0 #030509,8px 0px 0 0 #030509,8px -8px 0 0 #030509,8px -16px 0 0 #030509,8px -24px 0 0 #030509,16px 0px 0 0 #030509,16px -8px 0 0 #030509,16px -16px 0 0 #030509,16px -24px 0 0 #030509,24px 0px 0 0 #030509,24px -8px 0 0 #030509,24px -16px 0 0 #030509,24px -24px 0 0 #030509,32px 0px 0 0 #030509,32px -8px 0 0 #030509,32px -16px 0 0 #030509,40px 0px 0 0 #030509,40px -8px 0 0 #030509,40px -16px 0 0 #030509,48px 0px 0 0 #030509,48px -8px 0 0 #030509,48px -16px 0 0 #030509,48px -24px 0 0 #030509,48px -32px 0 0 #030509,56px 0px 0 0 #030509,56px -8px 0 0 #030509,56px -16px 0 0 #030509,56px -24px 0 0 #030509,64px 0px 0 0 #030509,64px -8px 0 0 #030509,64px -16px 0 0 #030509,64px -24px 0 0 #030509,72px 0px 0 0 #030509,72px -8px 0 0 #030509,72px -16px 0 0 #030509,72px -24px 0 0 #030509,80px 0px 0 0 #030509,80px -8px 0 0 #030509,80px -16px 0 0 #030509,80px -24px 0 0 #030509,88px 0px 0 0 #030509,88px -8px 0 0 #030509,88px -16px 0 0 #030509,88px -24px 0 0 #030509,96px 0px 0 0 #030509,96px -8px 0 0 #030509,96px -16px 0 0 #030509,96px -24px 0 0 #030509,96px -32px 0 0 #030509,104px 0px 0 0 #030509,104px -8px 0 0 #030509,104px -16px 0 0 #030509,104px -24px 0 0 #030509,112px 0px 0 0 #030509,112px -8px 0 0 #030509,112px -16px 0 0 #030509,112px -24px 0 0 #030509,120px 0px 0 0 #030509,120px -8px 0 0 #030509,120px -16px 0 0 #030509,120px -24px 0 0 #030509,128px 0px 0 0 #030509,128px -8px 0 0 #030509,128px -16px 0 0 #030509,128px -24px 0 0 #030509,136px 0px 0 0 #030509,136px -8px 0 0 #030509,136px -16px 0 0 #030509,136px -24px 0 0 #030509,144px 0px 0 0 #030509,144px -8px 0 0 #030509,144px -16px 0 0 #030509,144px -24px 0 0 #030509,152px 0px 0 0 #030509,152px -8px 0 0 #030509,152px -16px 0 0 #030509,152px -24px 0 0 #030509,160px 0px 0 0 #030509,160px -8px 0 0 #030509,160px -16px 0 0 #030509,168px 0px 0 0 #030509,168px -8px 0 0 #030509,168px -16px 0 0 #030509,176px 0px 0 0 #030509,176px -8px 0 0 #030509,176px -16px 0 0 #030509,176px -24px 0 0 #030509,184px 0px 0 0 #030509,184px -8px 0 0 #030509,184px -16px 0 0 #030509,184px -24px 0 0 #030509,192px 0px 0 0 #030509,192px -8px 0 0 #030509,192px -16px 0 0 #030509,192px -24px 0 0 #030509,200px 0px 0 0 #030509,200px -8px 0 0 #030509,200px -16px 0 0 #030509,200px -24px 0 0 #030509,208px 0px 0 0 #030509,208px -8px 0 0 #030509,208px -16px 0 0 #030509,208px -24px 0 0 #030509,216px 0px 0 0 #030509,216px -8px 0 0 #030509,216px -16px 0 0 #030509,224px 0px 0 0 #030509,224px -8px 0 0 #030509,224px -16px 0 0 #030509,232px 0px 0 0 #030509,232px -8px 0 0 #030509,240px 0px 0 0 #030509,240px -8px 0 0 #030509,240px -16px 0 0 #030509,240px -24px 0 0 #030509,240px -32px 0 0 #030509,248px 0px 0 0 #030509,248px -8px 0 0 #030509,248px -16px 0 0 #030509,248px -24px 0 0 #030509,248px -32px 0 0 #030509,256px 0px 0 0 #030509,256px -8px 0 0 #030509,256px -16px 0 0 #030509,256px -24px 0 0 #030509,256px -32px 0 0 #030509,264px 0px 0 0 #030509,264px -8px 0 0 #030509,264px -16px 0 0 #030509,264px -24px 0 0 #030509,264px -32px 0 0 #030509,272px 0px 0 0 #030509,272px -8px 0 0 #030509,272px -16px 0 0 #030509,272px -24px 0 0 #030509,280px 0px 0 0 #030509,280px -8px 0 0 #030509,280px -16px 0 0 #030509,280px -24px 0 0 #030509,288px 0px 0 0 #030509,288px -8px 0 0 #030509,288px -16px 0 0 #030509,288px -24px 0 0 #030509,296px 0px 0 0 #030509,296px -8px 0 0 #030509,296px -16px 0 0 #030509,296px -24px 0 0 #030509,304px 0px 0 0 #030509,304px -8px 0 0 #030509,304px -16px 0 0 #030509,312px 0px 0 0 #030509,312px -8px 0 0 #030509,312px -16px 0 0 #030509,320px 0px 0 0 #030509,320px -8px 0 0 #030509,320px -16px 0 0 #030509,328px 0px 0 0 #030509,328px -8px 0 0 #030509,328px -16px 0 0 #030509,328px -24px 0 0 #030509,336px 0px 0 0 #030509,336px -8px 0 0 #030509,336px -16px 0 0 #030509,344px 0px 0 0 #030509,344px -8px 0 0 #030509,344px -16px 0 0 #030509,352px 0px 0 0 #030509,352px -8px 0 0 #030509,352px -16px 0 0 #030509,352px -24px 0 0 #030509,352px -32px 0 0 #030509;
}

/* ============ FOOTER — BEDROCK ============ */
footer {
  position: relative;
  text-align: center;
  background: #030509;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 4.5rem 5vw 3rem;
  margin-top: -1px;
  clip-path: polygon(0.0% 6px,2.5% 6px,2.5% 6px,5.0% 6px,5.0% 12px,7.5% 12px,7.5% 6px,10.0% 6px,10.0% 0px,12.5% 0px,12.5% 6px,15.0% 6px,15.0% 0px,17.5% 0px,17.5% 6px,20.0% 6px,20.0% 12px,22.5% 12px,22.5% 6px,25.0% 6px,25.0% 0px,27.5% 0px,27.5% 12px,30.0% 12px,30.0% 12px,32.5% 12px,32.5% 0px,35.0% 0px,35.0% 0px,37.5% 0px,37.5% 6px,40.0% 6px,40.0% 6px,42.5% 6px,42.5% 6px,45.0% 6px,45.0% 0px,47.5% 0px,47.5% 6px,50.0% 6px,50.0% 12px,52.5% 12px,52.5% 0px,55.0% 0px,55.0% 6px,57.5% 6px,57.5% 0px,60.0% 0px,60.0% 0px,62.5% 0px,62.5% 0px,65.0% 0px,65.0% 0px,67.5% 0px,67.5% 12px,70.0% 12px,70.0% 6px,72.5% 6px,72.5% 0px,75.0% 0px,75.0% 0px,77.5% 0px,77.5% 12px,80.0% 12px,80.0% 6px,82.5% 6px,82.5% 12px,85.0% 12px,85.0% 0px,87.5% 0px,87.5% 6px,90.0% 6px,90.0% 0px,92.5% 0px,92.5% 0px,95.0% 0px,95.0% 6px,97.5% 6px,97.5% 6px,100.0% 6px,100% 100%,0% 100%);
}
footer a { color: var(--mist); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--emerald); }
.footer-links { margin-top: 0.75rem; display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; font-size: 0.8rem; }
.footer-links span { color: rgba(255, 255, 255, 0.15); }

/* ============ TOAST / ACHIEVEMENTS (one component, top-right) ============ */
.toast {
  position: fixed; top: 68px; right: 16px; z-index: 300;
  display: flex; align-items: flex-start; gap: 0.7rem;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--ink-1);
  padding: 0.85rem 1.1rem;
  clip-path: var(--notch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--mono);
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.35s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(0); opacity: 1; will-change: transform; }
.toast-check { width: 22px; height: 22px; flex: 0 0 auto; color: var(--emerald); margin-top: 2px; }
.toast-body { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; line-height: 1.45; }
.toast-body strong { color: var(--paper); font-size: 0.85rem; }
.toast-body span { color: var(--mist); }

/* ============ COOKIE BANNER (same consent contract, voxel slab, never game-styled) ============ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--ink-1);
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 1rem 5vw calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  transform: translateY(120%);
  transition: transform 0.3s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner__text { color: var(--mist); font-size: 0.85rem; max-width: 640px; flex: 1 1 320px; }
.cookie-banner__text a { color: var(--emerald); text-decoration: none; }
.cookie-banner__text a:hover { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-banner__btn {
  border: none; cursor: pointer;
  padding: 0.6rem 1.2rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  clip-path: var(--notch);
  transition: transform 0.1s ease, background-color 0.15s ease;
}
.cookie-banner__btn.accept { background: var(--emerald); color: #04220e; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
.cookie-banner__btn.accept:hover { background: #5ce88c; }
.cookie-banner__btn.accept:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); }

/* ============ LEGAL PAGES (privacy.html / terms.html share this sheet) ============ */
.legal-header {
  min-height: auto;
  padding: calc(56px + 4rem) 5vw 2.5rem;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}
.legal-header h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.6rem; }
.legal-updated { color: var(--mist); font-family: var(--mono); font-size: 0.8rem; }
.legal-content { max-width: 780px; padding: 0 5vw 5rem; margin: 0 auto; }
.legal-content h2 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em;
  margin-top: 2.5rem; margin-bottom: 0.75rem;
  color: var(--emerald);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--paper); margin-bottom: 1rem; }
.legal-content p.muted { color: var(--mist); }
.legal-content ul { margin: 0 0 1rem 1.25rem; color: var(--paper); }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--emerald); }
.legal-content strong { color: var(--paper); }
.legal-content code { font-family: var(--mono); color: var(--emerald); }
.back-home { display: inline-block; margin-top: 1.5rem; color: var(--emerald); text-decoration: none; font-family: var(--mono); font-size: 0.85rem; }
.back-home:hover { text-decoration: underline; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .path-line { display: none; }
  .path-connector {
    display: block; position: absolute; left: 50%; top: 4%; bottom: 4%;
    width: 0; border-left: 2px dashed var(--emerald-deep); z-index: -1;
  }
}
@media (max-width: 719px) {
  .faq-item:nth-of-type(odd), .faq-item:nth-of-type(even) { margin-left: 0; margin-right: 0; }
}
@media (max-width: 699px) {
  .ygauge { display: none; }
}
@media (max-width: 479px) {
  .grid { grid-template-columns: 1fr; }
  .hero-stage { height: 50%; }
  .ip-slab { padding: 1rem 0.9rem 0.85rem; }
  .faq-item { padding-left: 4rem; }
  .ghost-num { font-size: 2.4rem; }
  .toast { top: 62px; right: 10px; }
}

/* ============ REDUCED MOTION: first-class path, not a patch ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .stars-a, .stars-b, .dot, .cursor, .mc-city { animation: none !important; }
  .cursor { opacity: 1; }
  .mc-city { opacity: 1; }
  .dot { opacity: 1; }
  .arcade-cabinet.shake { animation: none !important; }
  .hero-stage { will-change: auto; }
  .beam { transition: none; }
  .toast {
    transform: none;
    opacity: 0;
    transition: opacity 0.25s ease !important;
  }
  .toast.show { opacity: 1; }
}

/* ============ SITE NAV LINKS (added for content pages) ============ */
.nav-links {
  display: flex; align-items: center; gap: 1.5rem;
  margin-left: auto; margin-right: 1.5rem;
}
.nav-links a {
  color: var(--mist); text-decoration: none;
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--emerald); }
.nav-links a[aria-current="page"] { color: var(--paper); }
@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ============ DOC / ARTICLE PAGES ============ */
.doc-header {
  padding: calc(56px + 4rem) 5vw 2rem;
  max-width: 820px; margin: 0 auto; text-align: left;
}
.breadcrumb {
  font-family: var(--mono); font-size: 0.75rem; color: var(--mist);
  margin-bottom: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--mist); text-decoration: none; }
.breadcrumb a:hover { color: var(--emerald); }
.breadcrumb span { color: rgba(255,255,255,0.2); }
.doc-header h1 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 0.85rem;
}
.doc-standfirst { color: var(--mist); font-size: 1.08rem; line-height: 1.6; max-width: 700px; }
.doc-meta {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--mono); font-size: 0.75rem; color: var(--mist);
  display: flex; gap: 1.25rem; flex-wrap: wrap;
}

.doc-content { max-width: 820px; padding: 0 5vw 5rem; margin: 0 auto; }
.doc-content h2 {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em;
  margin-top: 3rem; margin-bottom: 0.85rem; color: var(--emerald);
  scroll-margin-top: 76px;
}
.doc-content h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--paper);
  margin-top: 1.9rem; margin-bottom: 0.5rem; scroll-margin-top: 76px;
}
.doc-content h2:first-child { margin-top: 0; }
.doc-content p { color: var(--paper); margin-bottom: 1.05rem; line-height: 1.72; }
.doc-content ul, .doc-content ol { margin: 0 0 1.15rem 1.35rem; color: var(--paper); }
.doc-content li { margin-bottom: 0.55rem; line-height: 1.65; }
.doc-content a { color: var(--emerald); }
.doc-content strong { color: var(--paper); font-weight: 700; }
.doc-content code {
  font-family: var(--mono); color: var(--emerald); font-size: 0.9em;
  background: rgba(61,220,116,0.08); padding: 0.12em 0.4em;
  border: 1px solid rgba(61,220,116,0.16);
}
.doc-content hr { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: 3rem 0; }

/* table of contents */
.toc {
  padding: 1.4rem 1.6rem; margin-bottom: 2.5rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  clip-path: var(--notch);
}
.toc p {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mist); margin-bottom: 0.75rem;
}
.toc ol { margin: 0 0 0 1.1rem; }
.toc li { margin-bottom: 0.3rem; font-size: 0.94rem; }

/* callout box */
.callout {
  padding: 1.25rem 1.5rem; margin: 1.75rem 0;
  border-left: 3px solid var(--emerald);
  background: rgba(61,220,116,0.06);
}
.callout.warn { border-left-color: var(--amber); background: rgba(255,180,84,0.07); }
.callout.info { border-left-color: var(--cyan); background: rgba(90,215,255,0.06); }
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 0.5rem !important;
}
.callout.warn .callout-title { color: var(--amber); }
.callout.info .callout-title { color: var(--cyan); }

/* numbered step list */
.doc-steps { list-style: none; margin: 1.5rem 0 1.75rem; counter-reset: dstep; }
.doc-steps > li {
  position: relative; padding-left: 3rem; margin-bottom: 1.35rem; counter-increment: dstep;
}
.doc-steps > li::before {
  content: counter(dstep); position: absolute; left: 0; top: -0.1rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--ink-0); background: var(--emerald); clip-path: var(--notch);
}

/* connection detail table */
.doc-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 1.75rem; font-size: 0.94rem; }
.doc-table th, .doc-table td {
  text-align: left; padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--paper);
}
.doc-table th {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mist); font-weight: 600;
}
.doc-table td code { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* guide index cards */
.guide-list { display: grid; gap: 1.25rem; margin: 2rem 0 0; }
.guide-card {
  display: block; padding: 1.6rem 1.75rem; text-decoration: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  clip-path: var(--notch);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.guide-card:hover, .guide-card:focus-visible {
  border-color: rgba(61,220,116,0.45); background: rgba(61,220,116,0.05);
}
.guide-card .guide-kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 0.5rem;
}
.guide-card h2 {
  font-size: 1.2rem; font-weight: 800; color: var(--paper);
  margin: 0 0 0.45rem; letter-spacing: -0.01em;
}
.guide-card p { color: var(--mist); font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* inline join CTA for article footers */
.doc-cta {
  margin-top: 3rem; padding: 1.9rem 1.75rem; text-align: center;
  border: 1px solid rgba(61,220,116,0.3); background: rgba(61,220,116,0.05);
  clip-path: var(--notch);
}
.doc-cta h2 { margin-top: 0 !important; margin-bottom: 0.6rem !important; }
.doc-cta code {
  display: inline-block; font-size: 1.05rem; padding: 0.5rem 0.9rem; margin: 0.4rem 0 0.9rem;
}
.doc-cta p:last-child { margin-bottom: 0; }

/* ============ KEY FACTS / ANSWER BLOCK (extractable summary) ============ */
.keyfacts {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid rgba(61, 220, 116, 0.28);
  background: rgba(61, 220, 116, 0.05);
  clip-path: var(--notch);
}
.keyfacts > p:first-child {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 0.9rem;
}
.keyfacts dl { margin: 0; }
.keyfacts dt {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--mist); margin-top: 0.9rem;
}
.keyfacts dt:first-of-type { margin-top: 0; }
.keyfacts dd { margin: 0.25rem 0 0; color: var(--paper); line-height: 1.6; }
.keyfacts dd code { font-size: 0.92em; }

/* ============ FAQ ON DOC PAGES ============ */
.faq-doc { margin-top: 1.5rem; }
.faq-doc details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
}
.faq-doc details[open] { background: rgba(255, 255, 255, 0.02); }
.faq-doc summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0.9rem;
  position: relative;
  font-weight: 700; color: var(--paper); font-size: 1.02rem;
  transition: color 0.15s ease;
}
.faq-doc summary::-webkit-details-marker { display: none; }
.faq-doc summary:hover, .faq-doc summary:focus-visible { color: var(--emerald); }
.faq-doc summary::after {
  content: "+"; position: absolute; right: 0.9rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.3rem; font-weight: 400;
  color: var(--emerald); line-height: 1;
}
.faq-doc details[open] summary::after { content: "−"; }
.faq-doc .faq-answer { padding: 0 0.9rem 1.25rem; }
.faq-doc .faq-answer p { margin-bottom: 0.8rem; color: var(--mist); }
.faq-doc .faq-answer p:last-child { margin-bottom: 0; }
.faq-doc .faq-answer a { color: var(--emerald); }
.faq-doc .faq-answer code {
  font-family: var(--mono); color: var(--emerald); font-size: 0.9em;
  background: rgba(61, 220, 116, 0.08); padding: 0.12em 0.4em;
  border: 1px solid rgba(61, 220, 116, 0.16);
}