/* ZI2 Kids — stage layer.
   The structural and motion system behind a modern product page: full-bleed chapters that
   alternate ground, a pinned chapter whose media holds while the words advance, a scrubbed
   sequence driven by scroll position, snapping card rails, tile pairs and reveal-on-enter.
   Brand values stay in tokens.css; nothing here names a colour. */

:root {
  --ease-stage: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.6, 1);
  --t-fast: 220ms;
  --t-mid: 460ms;
  --t-slow: 820ms;

  --stage-wide: 1240px;
  --stage-read: 740px;
  --stage-gut: clamp(18px, 4vw, 32px);
  --tile-r: clamp(18px, 2.2vw, 28px);
  --tile-gap: clamp(12px, 1.4vw, 20px);
  --chapter-pad: clamp(72px, 11vh, 148px);

  --nav-h: 73px; /* replaced at runtime from the real bar, see stage.js */
  --rise: 28px;
  --tap: 44px;
}

/* ---------- chapters: the full-bleed stacked sections ---------- */
.chapter {
  position: relative;
  padding: var(--chapter-pad) var(--stage-gut);
  overflow: clip;
}
.stage-in { max-width: var(--stage-wide); margin: 0 auto; width: 100%; }
.chapter.read > .stage-in { max-width: var(--stage-read); }
.chapter.dark { background: var(--night); color: var(--night-ink); }
.chapter.dark .lede, .chapter.dark .kicker { color: color-mix(in srgb, var(--night-ink) 78%, transparent); }
.chapter.tint { background: var(--surface-2); }
.chapter.flush { padding-top: 0; }

/* ---------- the type voice: big, tight, centred ---------- */
/* A ch max-width here would resolve against THIS element's 16px font, not the 90px headline
   inside it, which crushes the headline to one word a line. Measure the wrapper in px and let
   the headline carry its own measure in ch, where the unit means what it says. */
.stage-head { text-align: center; margin: 0 auto clamp(26px, 4vh, 52px); max-width: 920px; }
.stage-head.wide { max-width: 1060px; }
.kicker {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: var(--sp-3);
}
.chapter.dark .kicker { color: var(--accent); }
.stage-h {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.022em;
  margin: 0 auto; max-width: 17ch; text-wrap: balance;
}
.stage-h.xl { font-size: var(--fs-4xl); letter-spacing: -0.028em; max-width: 15ch; }
.lede {
  font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-soft);
  margin: var(--sp-4) auto 0; max-width: 46ch;
}

/* ---------- reveal on enter ---------- */
/* Only hide a reveal when the script that un-hides it is running. A page that borrows this
   stylesheet without stage.js, or a visit where the script fails, must still show its text:
   a privacy policy that depends on JavaScript to be readable is a broken privacy policy. */
html.anim [data-rise] {
  opacity: 0; transform: translate3d(0, var(--rise), 0);
  transition: opacity var(--t-slow) var(--ease-stage), transform var(--t-slow) var(--ease-stage);
  transition-delay: var(--rise-d, 0ms);
}
html.anim [data-rise].seen { opacity: 1; transform: none; }

/* ---------- tiles ---------- */
.slabs { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .slabs.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .slabs.three { grid-template-columns: repeat(3, 1fr); } }
.slab {
  position: relative; border-radius: var(--tile-r); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; min-height: 320px;
  transition: transform var(--t-mid) var(--ease-stage), box-shadow var(--t-mid) var(--ease-stage);
}
.chapter.dark .slab { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.slab:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.slab-copy { padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 38px) 0; text-align: center; }
.slab-h {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.018em;
  font-size: var(--fs-xl); line-height: var(--lh-head); margin: 0 0 var(--sp-3);
}
.slab-sub { color: var(--ink-soft); font-size: var(--fs-md); margin: 0; }
.chapter.dark .slab-sub { color: color-mix(in srgb, var(--night-ink) 72%, transparent); }
.slab-art { margin-top: auto; padding-top: clamp(20px, 3vw, 34px); }
.slab-art img { display: block; width: 100%; height: auto; }
.slab.bleed .slab-art { padding-top: 0; }
.slab-links { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }

/* ---------- the chevron link ---------- */
.go {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap, 44px);
  font-size: var(--fs-md); font-weight: 600; color: var(--accent-deep); text-decoration: none;
}
.chapter.dark .go { color: var(--accent); }
.go::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-stage);
}
.go:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

/* ---------- a pinned chapter: media holds, words advance ---------- */
.pin { position: relative; }
.pin-stage {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); display: grid; place-items: center; overflow: clip;
}
.pin-art { position: relative; width: min(100%, 980px); aspect-ratio: 16 / 10; }
.pin-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--tile-r); opacity: 0;
  transition: opacity var(--t-slow) var(--ease-stage), transform var(--t-slow) var(--ease-stage);
  transform: scale(1.04);
}
.pin-art img.on { opacity: 1; transform: none; }
.pin-beats { position: relative; }
.pin-beat { min-height: 92vh; display: grid; align-items: center; }
.pin-beat .beat-card {
  max-width: 420px; background: var(--surface); border-radius: var(--tile-r);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-3);
}
.chapter.dark .pin-beat .beat-card { background: color-mix(in srgb, var(--night) 72%, var(--night-ink) 10%); }

/* ---------- scrubbed sequence ---------- */
/* 80vh a step is what the four-frame sequence has always been. A longer sequence can ask
   for a tighter step, but changing the default would re-pace every page that already uses it. */
.scrub { position: relative; height: calc(var(--scrub-steps, 4) * var(--scrub-step, 80vh)); }
.scrub.tight { --scrub-step: 60vh; }
.scrub-stage {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: clip; padding-bottom: clamp(10px, 2vh, 24px);
}
.scrub-frame {
  width: min(92vw, 1060px); aspect-ratio: 16 / 9; border-radius: var(--tile-r);
  overflow: hidden; position: relative; box-shadow: var(--shadow-3);
}
.scrub-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.scrub-frame img.on { opacity: 1; }
/* Each step needs a resting state or they all paint at once. They are taken out of flow and
   stacked on one spot, and the caption sits UNDER the frame where it is readable whatever the
   picture behind it is doing. */
.scrub-cap {
  position: relative; margin: clamp(18px, 3vh, 30px) auto 0;
  width: min(90vw, 44ch); min-height: 3.2em; text-align: center;
}
.scrub-cap p {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  font-size: var(--fs-lg); line-height: 1.4; color: var(--ink-soft);
  transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease-stage), transform var(--t-mid) var(--ease-stage);
}
.scrub-cap p.on { opacity: 1; transform: none; }

/* ---------- snapping rail ---------- */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px);
  gap: var(--tile-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--stage-gut) clamp(18px, 3vh, 30px);
  margin-inline: calc(var(--stage-gut) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; }
.rail-card {
  border-radius: var(--tile-r); overflow: hidden; position: relative;
  min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2.6vw, 30px); color: var(--night-ink);
  background: var(--night); isolation: isolate;
}
.rail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--t-slow) var(--ease-stage);
}
.rail-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 88%, transparent) 12%, color-mix(in srgb, var(--night) 10%, transparent) 62%);
}
.rail-card:hover img { transform: scale(1.045); }
.rail-card-k { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.rail-card-h { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: var(--lh-head); margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -0.018em; }
.rail-card-s { font-size: var(--fs-sm); color: var(--night-ink); opacity: 0.92; margin: 0; }
.rail-nav { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.rail-dot {
  width: var(--tap, 44px); height: var(--tap, 44px); border: none; padding: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.rail-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
  transition: background var(--t-fast) var(--ease-stage), transform var(--t-fast) var(--ease-stage);
}
.rail-dot[aria-current="true"]::before { background: var(--accent-deep); transform: scale(1.35); }
.rail-nav { margin-top: 0; }

/* ---------- comparison pair ---------- */
.versus { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .versus { grid-template-columns: 1fr 1fr; } }
.vs-card { border-radius: var(--tile-r); padding: clamp(26px, 3vw, 42px); background: var(--surface); box-shadow: var(--shadow-2); }
.vs-card.lead { box-shadow: var(--glow), var(--shadow-3); }
.vs-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); letter-spacing: -0.02em; line-height: 1; }
.vs-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.vs-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); }
.vs-list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--accent-deep); }

/* ---------- accordion ---------- */
.ask { border-top: 1px solid var(--line); }
.ask summary {
  list-style: none; cursor: pointer; padding: var(--sp-4) 0; display: flex;
  justify-content: space-between; gap: var(--sp-4); align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease-stage);
}
.ask[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.ask p { margin: 0 0 var(--sp-4); color: var(--ink-soft); max-width: 62ch; }

/* ---------- sticky nav behaviour ---------- */
/* The header stays with the reader. This is the whole rule, not a fragment: folding the old
   component layer in, a partial `.nav` here was mistaken for the full one and the structural
   half (sticky, z-index, padding, safe-area) was dropped. */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav, 60);
  padding: var(--sp-3) var(--stage-gut);
  padding-top: calc(var(--sp-3) + var(--safe-t, 0px));
  background: color-mix(in srgb, var(--sky-1) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-stage), border-color var(--t-mid) var(--ease-stage),
              box-shadow var(--t-mid) var(--ease-stage);
}
.nav.lifted { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--line); }

/* ---------- honour a reduced-motion preference completely ---------- */
@media (prefers-reduced-motion: reduce) {
  html.anim [data-rise] { opacity: 1; transform: none; transition: none; }
  .pin-stage, .scrub-stage { position: static; height: auto; }
  .scrub { height: auto; }
  .pin-art img, .scrub-frame img { opacity: 1; transform: none; transition: none; position: relative; }
  .pin-art { aspect-ratio: auto; }
  .pin-art img + img, .scrub-frame img + img { display: none; }
  .rail-card:hover img, .slab:hover { transform: none; }
}

/* ---------- hero: the opening chapter ---------- */
.hero-stage { padding-top: clamp(96px, 14vh, 170px); text-align: center; }
.hero-art {
  margin: clamp(30px, 5vh, 62px) auto 0; max-width: 1100px;
  border-radius: var(--tile-r); overflow: hidden; box-shadow: var(--shadow-3);
}
.hero-art img { display: block; width: 100%; height: auto; }
.hero-foot { margin: var(--sp-5) auto 0; color: var(--ink-faint); font-size: var(--fs-sm); max-width: 48ch; }
.hero-stage .slab-links { margin-top: var(--sp-5); }

/* A pinned chapter carries its own full-height stage, so the usual chapter padding under it
   only adds emptiness between the art and whatever comes next. */
.chapter.pin { padding-bottom: 0; }
.chapter .scrub { margin-bottom: calc(var(--chapter-pad) * -0.5); }
.rail-wrap { margin-bottom: calc(var(--chapter-pad) * -0.35); }

/* ---------- media grid: a picture with a caption under it ---------- */
.shots { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 680px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .shots.three { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; border-radius: var(--tile-r); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-2); scroll-snap-align: center; }
.chapter.dark .shot { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.shot figcaption { padding: var(--sp-4) clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 24px); }
.shot b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin-bottom: var(--sp-2); }
.shot span { display: block; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.chapter.dark .shot span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

/* ---------- filter pills ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: clamp(22px, 3vh, 34px); }
.chip {
  min-height: var(--tap, 44px); padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease-stage), border-color var(--t-fast) var(--ease-stage);
}
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

/* ---------- a number worth reading ---------- */
.stats { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr 1fr; }
@media (min-width: 880px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: clamp(20px, 2.6vw, 30px) var(--sp-3); border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.chapter.dark .stat { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.chapter.dark .stat span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

/* ---------- an icon, a heading and a short answer ---------- */
.notes { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .notes.three { grid-template-columns: repeat(3, 1fr); } }
.note { padding: clamp(22px, 2.8vw, 32px); border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.chapter.dark .note { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.note .mark { display: block; width: 38px; height: 38px; color: var(--accent-deep); margin-bottom: var(--sp-3); }
.chapter.dark .note .mark { color: var(--accent); }
.note h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin: 0 0 var(--sp-2); }
.note p { color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.55; margin: 0; }
.chapter.dark .note p { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

/* ---------- the catalogue: every game, nothing hidden ---------- */
.catalogue { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 680px) { .catalogue { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .catalogue { grid-template-columns: repeat(3, 1fr); } }
.entry { padding: 0 0 var(--sp-4); overflow: hidden; border-radius: calc(var(--tile-r) * 0.6); background: var(--surface); box-shadow: var(--shadow-1); }
.entry[hidden] { display: none; }
.entry .k { display: block; font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.entry b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; margin: var(--sp-1) 0 var(--sp-2); }
.entry span { display: block; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }


/* ---------- chrome: nav, buttons, footer and the page furniture that every
   page shares. Folded in from the old component layer so there is one stylesheet, not
   two vocabularies describing the same site. ---------- */
.nav.stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--sky-1) 92%, transparent); }
.nav-in { display: flex; align-items: center; gap: var(--sp-4); }
.brand { white-space: nowrap; min-height: var(--tap); display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: none; gap: var(--sp-4); align-items: center; }
.nav-links a { text-decoration: none; font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; padding: var(--sp-2) 0; position: relative; display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; transition: right var(--dur-2) var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-tools { display: flex; align-items: center; gap: var(--sp-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow), var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); transform: translateY(-2px); }
/* On a dark chapter the ghost button was ink on near-black, about 1.1 to 1. Every control that
   can sit on either ground needs the other ground spelled out. */
.chapter.dark .btn-ghost { color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 42%, transparent); }
.chapter.dark .btn-ghost:hover { background: color-mix(in srgb, var(--night-ink) 12%, transparent); }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--ink); display: inline-grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { border-color: var(--line-strong); }
.lang { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); height: var(--tap); min-height: var(--tap); padding: 0 var(--sp-3); }
.hero { padding: var(--sp-7) 0 var(--sp-5); }
.hero h1 { margin-top: var(--sp-4); }
.hero .lede { margin-top: var(--sp-4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-faint); }
.sun { color: var(--accent-deep); position: relative; white-space: nowrap; isolation: isolate; }
.sun::after { content: ""; position: absolute; left: -1.5%; right: -1.5%; bottom: -0.1em; height: 0.17em; background: color-mix(in srgb, var(--accent) 58%, transparent); border-radius: var(--r-pill); z-index: -1; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.proof { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.proof-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); padding: var(--sp-5) 0; }
section { padding: var(--sp-7) 0; }
.card .mark { width: 42px; height: 42px; color: var(--accent-deep); margin-bottom: var(--sp-4); }
.band-img { position: relative; border-radius: var(--r-4); overflow: hidden; box-shadow: var(--shadow-3); }
.band-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.band-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) var(--sp-5) var(--sp-5); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--night) 86%, transparent)); color: var(--night-ink); }
.band-cap h3 { font-size: var(--fs-xl); }
.band-cap p { font-size: var(--fs-md); opacity: 0.92; margin-top: var(--sp-2); max-width: 46ch; }
.tile .k { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.plan.lead { border-color: var(--accent); box-shadow: var(--glow); }
.plan .tag { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.plan .amt { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .amt small { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0; }
.plan .btn { margin-top: auto; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: var(--sp-4) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(45deg); flex: none; transition: transform var(--dur-1) var(--ease); }
details[open] summary::after { transform: rotate(-135deg); }
details p { padding-bottom: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-sm); max-width: var(--measure-wide); }
.cta { text-align: center; padding: var(--sp-8) 0; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta p { margin: var(--sp-4) auto 0; max-width: var(--measure-wide); color: var(--ink-soft); font-size: var(--fs-lg); }
.cta .hero-cta { justify-content: center; }
.foot { border-top: 1px solid var(--line); padding: var(--sp-6) 0 calc(var(--sp-6) + var(--safe-b)); font-size: var(--fs-sm); color: var(--ink-faint); }
.foot-grid { display: grid; gap: var(--sp-5); }
.foot h4 { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.foot a { text-decoration: none; display: block; padding: var(--sp-1) 0; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 639px) {
  .nav-tools .btn, .nav-tools #ground { display: none; }
  .squad figure:nth-child(n) { margin-left: 0; }
}
@media (min-width: 680px) {
  .proof-in { grid-template-columns: repeat(5, 1fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .day { grid-template-columns: 7rem 1fr; }
}
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav .icon-btn.burger { display: none; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--sp-7); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .band-cap { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
  .safe { grid-template-columns: repeat(2, 1fr); }
}

/* The same note, written as a list. One component, two markup shapes: an <li> carrying an icon
   and a <b>/<span> pair gets the card, the mark sizing and a heading that is actually a block.
   Without this the heading ran straight into its own body text. */
.notes { list-style: none; padding: 0; }
.notes > li {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: clamp(22px, 2.8vw, 32px); border-radius: var(--tile-r);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.chapter.dark .notes > li { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.notes > li > svg { flex: 0 0 auto; width: 34px; height: 34px; color: var(--accent-deep); }
.chapter.dark .notes > li > svg { color: var(--accent); }
.notes > li b {
  display: block; font-family: var(--font-display); font-size: var(--fs-lg);
  letter-spacing: -0.014em; margin-bottom: var(--sp-2);
}
.notes > li span { display: block; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.55; }
.chapter.dark .notes > li span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

/* ---------- mega menu ----------
   One panel under the sticky header. On a narrow screen it stops being a panel and becomes
   the menu itself: a full-height sheet of stacked groups, because a three-column drop-down
   on a phone is a three-column drop-down nobody can use. */
.mega-top {
  border: none; background: none; cursor: pointer; font: inherit;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-soft); min-height: var(--tap); padding: var(--sp-2) 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.mega-top::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease-stage);
}
.mega-top[aria-expanded="true"] { color: var(--ink); }
.mega-top[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

.mega {
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: calc(var(--z-nav, 50) - 1);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-stage), transform var(--t-mid) var(--ease-stage);
}
.mega[hidden] { display: none; }
.mega.open { opacity: 1; transform: none; pointer-events: auto; }
.mega-in { display: grid; gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3vw, 40px) var(--stage-gut); }
@media (min-width: 900px) { .mega-in { grid-template-columns: repeat(3, 1fr); } }
.mega-col { display: none; }
.mega-col.show { display: block; }
@media (min-width: 900px) { .mega-col { display: block; } }
.mega-col h3 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: -0.014em; margin: 0 0 var(--sp-2);
}
.mega-col > p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); max-width: 34ch; }
.mega-links { display: grid; gap: 2px; }
.mega-links a {
  min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1); border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: var(--fs-md); font-weight: 600;
  transition: background var(--t-fast) var(--ease-stage);
}
.mega-links a:hover { background: var(--surface-2); }
.mega-feature { display: block; margin-top: var(--sp-4); border-radius: var(--tile-r); overflow: hidden; position: relative; text-decoration: none; }
.mega-feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mega-feature span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-4) var(--sp-3);
  color: var(--night-ink); font-family: var(--font-display); font-weight: 700;
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 90%, transparent), transparent);
}

/* the sheet form, used wherever the three columns will not fit */
@media (max-width: 899px) {
  .mega { top: var(--nav-h); bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mega-in { grid-template-columns: 1fr; padding-bottom: calc(var(--sp-7) + var(--safe-b, 0px)); }
  .mega-feature { display: none; }
}


/* Every link in the footer is something a thumb has to hit, and the small header button is
   no smaller a target for being visually compact. Found at 31px on a phone by the template
   verifier, which checks four widths rather than one. */
.foot-grid a, .foot a {
  display: inline-flex; align-items: center; min-height: var(--tap, 44px);
}
.btn.btn-sm { min-height: var(--tap, 44px); }


/* Each catalogue card leads with the place the game happens. */
.entry-art { display: block; }
.entry-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.entry .k, .entry b, .entry span:not(.entry-art), .entry p { padding-inline: var(--sp-4); }
.entry .k { margin-top: var(--sp-3); }

/* The seven guides. Each one is a face a child already knows from the games. */
.guides { display: grid; gap: var(--tile-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .guides { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .guides { grid-template-columns: repeat(7, 1fr); } }
.guide { text-align: center; padding: var(--sp-4) var(--sp-3) var(--sp-4);
  border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.guide img { display: block; width: 72px; height: 72px; margin: 0 auto var(--sp-3);
  border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.guide b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2;
  letter-spacing: -0.012em; }
.guide-branch { display: block; margin: 2px 0 var(--sp-2); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.guide p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }


/* An inline <svg> carrying no width or height falls back to 300x150. One missing rule then
   turns a tick into a billboard, which is exactly what happened on the pricing page when a
   merge dropped the rule that sized it. `:where()` keeps this at zero specificity so any
   component rule still wins, and nothing can ever render at the default size again. */
:where(.chapter, .nav, footer) :where(svg:not([width])) { width: 1.15em; height: 1.15em; }

/* ---------- ported from the retired component layer ----------
   These rules styled the INSIDE of a plan card and a stat tile. The merge dropped them
   because their selectors named `.plan` and `.tile`, classes that had already been renamed,
   so an audit keyed on the old names could not see them. Price, plan label and list all
   fell back to body text. Compare renamed selectors, not original ones. */
.vs-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.vs-card .tag {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.vs-card .amt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.vs-card .amt small {
  font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm);
  color: var(--ink-faint); letter-spacing: 0;
}
.vs-card ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.vs-card li {
  font-size: var(--fs-md); color: var(--ink-soft);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
}
.vs-card li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-deep); }
.vs-card .btn { margin-top: auto; align-self: flex-start; }

.stat .k, .entry .k {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.stat b, .entry b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; margin: var(--sp-1) 0 var(--sp-2); }
.stat p, .entry p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }