/* ============================================================
   Prepare Little Patients — Design Tokens
   Palette: Sunshine Clinic (coral / turquoise / sunny yellow / lavender)
   Display: Fredoka · Body: Karla
   ============================================================ */

:root {
  --coral: #ff5c3d;
  --coral-dark: #e14526;
  --coral-tint: #ffdccf;

  --turquoise: #0dbfae;
  --turquoise-dark: #0a8f83;
  --turquoise-tint: #c9f5ef;

  --sunny: #ffc233;
  --sunny-dark: #e0a000;
  --sunny-tint: #ffedb8;

  --lavender: #9b6bf5;
  --lavender-dark: #7742e0;
  --lavender-tint: #e6d9ff;

  --grass: #4ec97a;
  --grass-dark: #2ea058;
  --grass-tint: #d3f5df;

  --bubblegum: #ff6fa8;
  --bubblegum-dark: #e4498a;
  --bubblegum-tint: #ffdcec;

  --sky: #3ea8e0;
  --sky-dark: #1f80b8;
  --sky-tint: #d9f0fc;

  --navy: #201f3d;
  --navy-soft: #55547a;
  --cream: #fffaf1;
  --paper: #ffffff;
  --line: rgba(32, 31, 61, 0.14);

  --font-display: "Fredoka", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Karla", -apple-system, "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 10px 30px -12px rgba(32, 31, 61, 0.25);
  --shadow-pop: 0 16px 40px -16px rgba(32, 31, 61, 0.35);

  --wrap: 1160px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; color: var(--navy); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral-dark);
}

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-top: 10px;
  line-height: 1.15;
}
.section-head p {
  margin-top: 14px;
  font-size: 18px;
  color: var(--navy-soft);
}
.section-head.center { margin-inline: auto; text-align: center; }

section { position: relative; padding-block: 96px; overflow: hidden; }
section.tight { padding-block: 76px; }

/* First section on a subpage sits right under the topbar — needs far less top air than the 76-96px used between sections lower on the page. Scoped to .tight so it doesn't touch the homepage hero, which has its own tuned padding. */
#main > section.tight:first-child { padding-top: 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) scale(1.03) rotate(-0.5deg); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(255, 92, 61, 0.55);
}
.btn-primary:hover { background: var(--coral-dark); }
.btn-secondary {
  background: var(--navy);
  color: #fff;
}
.btn-secondary:hover { background: #34335c; }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.btn-ghost:hover { background: rgba(255,255,255,0.28); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.75; }
.btn-block { width: 100%; }

/* ---------- App shell + horizontal top nav ---------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Swipe page transition (opt-in via a.swipe-nav, wired in script.js) ----------
   The whole page slides out to the right and fades, then script.js navigates
   to the link's href once the animation finishes — a lightweight stand-in for
   a real cross-document transition on a static, build-free site. */
body.swipe-out {
  overflow: hidden;
}
body.swipe-out .app-shell {
  animation: swipe-out-right 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes swipe-out-right {
  to { transform: translateX(100%); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  body.swipe-out .app-shell { animation: none; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 250, 241, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.15;
  color: var(--navy);
  flex-shrink: 0;
}
.topbar .brand img { height: 38px; width: auto; flex-shrink: 0; }

/* Logo easter egg — Sally wiggles and puffs a few hearts when clicked,
   reusing her signature move from Meet the Crew, scaled down for the nav. */
.brand-logo-wrap {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.brand-hearts {
  position: absolute;
  left: 52%;
  top: 55%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.brand-mini-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
}
.brand-mini-heart svg { width: 100%; height: 100%; display: block; }
.brand-mini-heart:nth-child(1) { color: var(--coral);     left: 0;   --bdrift: 6px; }
.brand-mini-heart:nth-child(2) { color: var(--bubblegum); left: -6px; --bdrift: -14px; }
.brand-mini-heart:nth-child(3) { color: var(--lavender);  left: 6px;  --bdrift: 14px; }

.brand.is-clicked .brand-mini-heart:nth-child(1) { animation: brand-heart-puff 900ms ease-out; }
.brand.is-clicked .brand-mini-heart:nth-child(2) { animation: brand-heart-puff 900ms ease-out 90ms; }
.brand.is-clicked .brand-mini-heart:nth-child(3) { animation: brand-heart-puff 900ms ease-out 180ms; }
@keyframes brand-heart-puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  15%  { opacity: 1; transform: translate(0, -4px) scale(1); }
  100% { opacity: 0; transform: translate(var(--bdrift, 10px), -46px) scale(0.6); }
}

.brand-img.brand-wiggle {
  animation: crew-wiggle 0.6s ease-in-out 1;
  transform-origin: 50% 85%;
}

@media (prefers-reduced-motion: reduce) {
  .brand-img.brand-wiggle { animation: none; }
  .brand.is-clicked .brand-mini-heart { animation: none; opacity: 0; }
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.topbar-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--navy-soft);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar-nav a:hover { background: var(--cream); color: var(--navy); }
.topbar-nav a.active { color: var(--navy); background: var(--cream); }
.topbar-nav a .ic {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-nav a .ic svg { width: 14px; height: 14px; transition: fill 0.15s ease, stroke 0.15s ease; }

/* Rainbow icon accents — one hue per destination */
.topbar-nav a:nth-child(1) .ic { color: var(--coral); }
.topbar-nav a:nth-child(2) .ic { color: var(--sunny-dark); }
.topbar-nav a:nth-child(3) .ic { color: var(--bubblegum); }
.topbar-nav a:nth-child(4) .ic { color: var(--turquoise-dark); }
.topbar-nav a:nth-child(5) .ic { color: var(--sky-dark); }
.topbar-nav a:nth-child(6) .ic { color: var(--grass-dark); }
.topbar-nav a:nth-child(7) .ic { color: var(--lavender); }
.topbar-nav a:nth-child(8) .ic { color: var(--lavender-dark); }

/* Active page: the icon glyph itself fills in solid with its hue,
   instead of just being an outline — a clear "you are here" marker. */
.topbar-nav a.active .ic svg {
  fill: currentColor;
  stroke: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* "Menu" dropdown trigger — a labeled chevron, not a hamburger.
   Hidden by default; the narrow-screen media query reveals it. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.menu-toggle .chev {
  display: flex;
  transition: transform 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

@media (max-width: 1060px) {
  .topbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
    padding: 10px;
  }
  .topbar-nav.open { display: flex; }
  .topbar-nav a { padding: 12px 14px; font-size: 15px; }
  .menu-toggle { display: flex; }
}

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Divider blobs ---------- */
.divider { display: block; width: 100%; height: 70px; }
.divider svg { width: 100%; height: 100%; display: block; }
.divider.flip { transform: rotate(180deg); }

/* Crayon scribble divider: layered textured strokes draw in every time the
   boundary scrolls into view (repeatable — see script.js crayonObserver) */
.crayon-divider { position: relative; }
.crayon-scribble { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crayon-line {
  fill: none;
  stroke: url(#crayonGradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.crayon-line-under { stroke-width: 12; opacity: 0.32; }
.crayon-line-mid { stroke-width: 8; opacity: 0.55; }
.crayon-line-top { stroke-width: 4.5; opacity: 0.95; }

.crayon-scribble.in-view .crayon-line-under { animation: intro-draw 1.2s ease-out forwards; }
.crayon-scribble.in-view .crayon-line-mid { animation: intro-draw 1.2s ease-out 0.08s forwards; }
.crayon-scribble.in-view .crayon-line-top { animation: intro-draw 1.2s ease-out 0.16s forwards; }

@media (prefers-reduced-motion: reduce) {
  .crayon-line { stroke-dashoffset: 0; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 15% 20%, var(--sunny-tint) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, var(--turquoise-tint) 0%, transparent 40%),
    var(--cream);
  padding-top: 84px;
  padding-bottom: 40px;
  overflow: visible;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  position: relative;
}
/* Let the ticker clip instead of stretching the grid column wider than the page */
.hero-copy { min-width: 0; }
.marquee { max-width: 100%; }
.hero-copy h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.08;
  margin-top: 16px;
}
.hero-copy h1 .accent { color: var(--coral); }

/* Generic headline accent-word utilities, one per hue */
.accent-coral { color: var(--coral); }
.accent-turquoise { color: var(--turquoise-dark); }
.accent-sunny { color: var(--sunny-dark); }
.accent-grass { color: var(--grass-dark); }
.accent-lavender { color: var(--lavender-dark); }
.accent-bubblegum { color: var(--bubblegum-dark); }
.hero-copy p.lead {
  margin-top: 22px;
  font-size: 19px;
  color: var(--navy-soft);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-barrier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--navy-soft);
}
.hero-barrier svg { flex: none; color: var(--grass-dark); }
.hero-barrier strong { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
/* ---------- Hero "who we work with" ticker ---------- */
.partners { margin-top: 30px; }
.partners-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 12px;
}
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: #f0eff4;
  border: 1px solid rgba(32, 31, 61, 0.1);
  border-radius: 12px;
  padding: 11px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.partner-logo:hover,
.partner-logo:focus-visible {
  background: #e7e6ef;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.partner-logo:hover .logo-name,
.partner-logo:focus-visible .logo-name { color: var(--navy); }
.partner-logo .logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #c3c2cf;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-logo .logo-mark svg { width: 17px; height: 17px; }
.partner-logo .logo-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #8b8a9c;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.hero-art .blob-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-art .blob-bg svg { width: 100%; height: 100%; }

/* Scattered "colored-in" activity-page cluster — each card is a button that opens the lightbox.
   The outer button keeps its float animation + base tilt (via --tilt, read inside the
   keyframes); the hover "pop forward and grow" effect lives entirely on the inner
   wrapper + z-index, so it never fights the running animation. */
.page-card {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 1;
  cursor: zoom-in;
  font: inherit;
}
.page-card:hover,
.page-card:focus-visible {
  z-index: 50;
}

.page-card-inner {
  display: block;
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 18px 34px -14px rgba(32, 31, 61, 0.32);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.page-card:hover .page-card-inner,
.page-card:focus-visible .page-card-inner {
  transform: scale(1.35);
  box-shadow: 0 30px 55px -16px rgba(32, 31, 61, 0.5);
}

.page-card img { display: block; width: 100%; border-radius: 11px; }

.page-card-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(32, 31, 61, 0.4);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-card:hover .page-card-zoom,
.page-card:focus-visible .page-card-zoom {
  opacity: 1;
  transform: scale(1);
}
.page-card.card-appendix {
  --tilt: -6deg;
  width: 38%;
  top: 16%;
  left: 33%;
  z-index: 2;
  animation: float-slow 6.5s ease-in-out infinite;
}
.page-card.card-ear {
  --tilt: 8deg;
  width: 30%;
  top: 8%;
  right: 6%;
  animation: float-slow 5.5s ease-in-out infinite 0.5s;
}
.page-card.card-tonsils {
  --tilt: -4deg;
  width: 30%;
  bottom: 10%;
  left: 24%;
  animation: float-slow 6s ease-in-out infinite 1s;
}
.page-card.card-recovery {
  --tilt: -8deg;
  width: 30%;
  top: 0%;
  left: 6%;
  animation: float-slow 7s ease-in-out infinite 0.3s;
}
.page-card.card-maze {
  --tilt: 6deg;
  width: 30%;
  bottom: 0%;
  right: 0%;
  animation: float-slow 6.8s ease-in-out infinite 0.8s;
}

.hero-art .mascot-main {
  position: absolute;
  z-index: 3;
  width: 20%;
  top: 38%;
  left: -6%;
  filter: drop-shadow(0 16px 22px rgba(32,31,61,0.2));
  animation: float-slow 6s ease-in-out infinite;
}
.hero-art .mascot-side {
  position: absolute;
  z-index: 4;
  width: 18%;
  filter: drop-shadow(0 12px 16px rgba(32,31,61,0.18));
}
/* Inset from the right rather than hanging off it — sitting flush with the art
   frame left no room to grow into, so his enlarged self ran past the screen
   edge on narrower laptops. */
.hero-art .mascot-side.appendix { right: 7%; top: 40%; animation: float-slow 5s ease-in-out infinite 0.4s; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--tilt, 0deg) - 2deg)); }
}

/* ---------- Landing character hover interactions ----------
   The wrapper (.character, also .mascot-main / .mascot-side) keeps its absolute
   position + gentle float. The inner .character-anim carries the signature hover
   animation, so it never fights the float's transform. */
/* The homepage mascots are <a> elements (they link to their bio), so strip the
   link chrome and let the existing character styles carry the look. */
.character { cursor: pointer; outline-offset: 6px; text-decoration: none; color: inherit; }
.character-anim {
  display: block;
  position: relative;
  z-index: 1;
  will-change: transform;
  transition: transform 0.3s ease-out;
}
.character-anim img { display: block; width: 100%; }
/* Grow toward the page interior so the giant character never pushes past the
   viewport edge and creates a horizontal scrollbar. */
.mascot-main .character-anim { transform-origin: center center; }
.mascot-side.appendix .character-anim { transform-origin: right center; }

/* Both characters balloon to 5x on hover / focus / tap */
/* Zoom is kept modest on purpose: the characters sit around the rim of the
   hero collage, so a large multiplier pushed them past the section edge (and
   the viewport) where they were sliced off. 2.6x reads clearly while staying
   inside the frame — see the per-character caps below for the widest ones. */
.character:hover .character-anim,
.character:focus-visible .character-anim,
.character.is-tapped .character-anim { transform: scale(2.6); }
/* Alex is the tallest artwork and sits nearest the right edge, so he needs a
   gentler multiplier to clear both the screen edge and the hero's bottom on
   smaller laptops. */
.mascot-side.appendix:hover .character-anim,
.mascot-side.appendix:focus-visible .character-anim,
.mascot-side.appendix.is-tapped .character-anim { transform: scale(2.25); }
/* Iris & Seymour and Tina & Tony are the widest artwork, so they get a
   slightly smaller multiplier to stay clear of the edges. */
.crew-iris:hover .character-anim,
.crew-iris:focus-visible .character-anim,
.crew-iris.is-tapped .character-anim,
.crew-tonsils:hover .character-anim,
.crew-tonsils:focus-visible .character-anim,
.crew-tonsils.is-tapped .character-anim { transform: scale(1.9); }

/* Lift the active character above its neighbors (but below the sticky nav) */
.character:hover, .character:focus-visible, .character.is-tapped { z-index: 60; }

/* Shared label pill — identical for every character, centered UNDER it,
   in a big rounded kid-friendly face. Sits above the artwork so the enlarged
   character can't hide the name. */
.character-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  z-index: 3;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  border: 3px solid var(--sunny);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.character:hover .character-label,
.character:focus-visible .character-label,
.character.is-tapped .character-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Alex sits against the right edge, so right-anchor his label instead of
   centering it — a centered pill would spill past the viewport. */
.mascot-side.appendix .character-label {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}
.mascot-side.appendix.character:hover .character-label,
.mascot-side.appendix.character:focus-visible .character-label,
.mascot-side.appendix.character.is-tapped .character-label {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .character-anim { transition: none; }
}

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.confetti span {
  position: absolute;
  opacity: 0.55;
  animation: drift 9s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(12deg); }
}

/* ---------- For Kids callout ---------- */
.parents-kids-callout {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--sunny-tint);
  border: 2px solid var(--sunny);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 48px;
}
.parents-kids-callout-icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--sunny-dark);
}
.parents-kids-callout-icon svg { width: 30px; height: 30px; }
.parents-kids-callout-body h3 { font-size: 19px; margin-bottom: 6px; }
.parents-kids-callout-body p { color: var(--navy-soft); font-size: 15px; margin-bottom: 14px; }
@media (max-width: 640px) {
  .parents-kids-callout { flex-direction: column; align-items: flex-start; }
}

/* ---------- Value props ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.value-card {
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  border-top: 5px solid transparent;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.value-card:hover, .value-card:focus-visible {
  transform: translateY(-8px) scale(1.045);
  box-shadow: var(--shadow-pop);
}
.value-card .icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.value-card .icon svg { width: 26px; height: 26px; }
.value-card h3 { font-size: 18px; margin-bottom: 8px; transition: font-size 0.25s ease; }
.value-card p { color: var(--navy-soft); font-size: 15px; transition: font-size 0.25s ease; }
.value-card:hover h3, .value-card:focus-visible h3 { font-size: 20px; }
.value-card:hover p, .value-card:focus-visible p { font-size: 16px; }
.value-card:nth-child(1) { border-top-color: var(--coral); }
.value-card:nth-child(1) .icon { background: var(--coral-tint); color: var(--coral-dark); }
.value-card:nth-child(2) { border-top-color: var(--turquoise); }
.value-card:nth-child(2) .icon { background: var(--turquoise-tint); color: var(--turquoise-dark); }
.value-card:nth-child(3) { border-top-color: var(--sunny); }
.value-card:nth-child(3) .icon { background: var(--sunny-tint); color: var(--sunny-dark); }
.value-card:nth-child(4) { border-top-color: var(--grass); }
.value-card:nth-child(4) .icon { background: var(--grass-tint); color: var(--grass-dark); }

/* ---------- Value / Mission section ---------- */
.value-section { background: var(--turquoise-tint); }

/* "Why we exist" reads as a section title here rather than a small kicker, so
   it's scaled well past the shared .eyebrow size. Scoped to this section so the
   eyebrows on every other page keep their original small-label treatment. */
.value-section .eyebrow {
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: 0.05em;   /* the shared 0.09em tracking is tuned for 13px */
  margin-bottom: 8px;
}

/* Floating crew on the homepage — Tina & Tony, Echo, and the eye twins tucked
   into this section's side margins. They reuse .character, so the hover/focus
   enlargement matches Sally and Alex exactly. overflow is opened up so the
   grown character isn't sliced off at the section edge; the characters sit far
   enough inside that nothing spills past the viewport. */
/* The rest of the crew joins Sally and Alex around the edge of the hero
   collage, so all five read as one bundle. Each keeps .character, so the
   enlarge-on-hover and click-through behave identically. */
.hero-art .mascot-side.crew-tonsils {
  width: 19%;
  left: 2%;
  bottom: 1%;
  --tilt: -4deg;
  animation: float-slow 6s ease-in-out infinite 0.9s;
}
.hero-art .mascot-side.crew-echo {
  width: 14%;
  left: -5%;
  top: 6%;
  --tilt: 5deg;
  animation: float-slow 5.4s ease-in-out infinite 0.4s;
}
.hero-art .mascot-side.crew-iris {
  width: 20%;
  right: 9%;      /* kept well inside the right edge: this artwork is the widest,
                     so at rest it's fine but enlarged it would clear the screen */
  top: -3%;
  --tilt: -3deg;
  animation: float-slow 6.4s ease-in-out infinite 1.3s;
}
/* Name tags for the right-hand characters grow leftward so they can't push
   past the viewport edge and create a horizontal scrollbar. */
.mascot-side.crew-iris .character-label,
.mascot-side.appendix .character-label {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}
.mascot-side.crew-iris.character:hover .character-label,
.mascot-side.crew-iris.character:focus-visible .character-label,
.mascot-side.crew-iris.character.is-tapped .character-label,
.mascot-side.appendix.character:hover .character-label,
.mascot-side.appendix.character:focus-visible .character-label,
.mascot-side.appendix.character.is-tapped .character-label {
  transform: translate(0, 0);
}

/* ---------- Activity Books ---------- */
.books-section { background: var(--sunny-tint); }
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.book-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px dashed var(--line);
  border-top: 6px solid var(--coral);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.book-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow-card); }
/* Arriving from a character's "view the playbook" link (e.g. #appendectomy) calls out that card */
.book-card:target { border-style: solid; box-shadow: var(--shadow-pop); animation: target-pop 0.6s ease; }
@keyframes target-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.book-card.hue-turquoise { border-top-color: var(--turquoise); }
.book-card.hue-grass { border-top-color: var(--grass); }
.book-card.hue-lavender { border-top-color: var(--lavender); }
.book-card .badge { background: var(--turquoise-dark); }
.book-card.hue-turquoise .badge { background: var(--coral-dark); }
.book-card.hue-grass .badge { background: var(--lavender-dark); }
.book-card .thumb {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  cursor: zoom-in;
  background: #fff;
  border-bottom: 2px dashed var(--line);
}
.book-card .thumb img {
  /* thumbnails are cropped to the upright half of the sheet, so centre them —
     anchoring to the top used to show the panels that are rotated for folding */
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 0.4s ease;
}
.book-card:hover .thumb img { transform: scale(1.05); }
.book-card .badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--turquoise);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.book-card .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.book-card h3 { font-size: 20px; }
.book-card p { color: var(--navy-soft); font-size: 14.5px; flex: 1; }
.book-card .actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.book-card.coming-soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  border-color: var(--coral);
  padding: 30px 20px;
  min-height: 100%;
}
.book-card.coming-soon .icon-pencil { font-size: 34px; margin-bottom: 10px; }
.book-card.coming-soon h3 { font-size: 19px; margin-bottom: 8px; }
.book-card.coming-soon p { color: var(--navy-soft); font-size: 14.5px; margin-bottom: 14px; }

/* Shared honeypot field (anti-spam) used by any form's hidden trap input */
.hp-field { position: absolute; left: -9999px; }
.form-success {
  margin-top: 14px;
  background: var(--turquoise-tint);
  color: var(--turquoise-dark);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  display: none;
}
.form-success.show { display: block; }

/* ---------- Meet the Crew: character showcase ---------- */
.crew-section { background: var(--cream); }

/* Selector grid — the default view: big tappable tiles, no bio text yet.
   Flex rather than grid so an odd tile on the last row centres itself. */
.crew-select-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 8px;
}
.crew-select-grid[hidden] { display: none; }
.crew-tile {
  flex: 0 1 calc(50% - 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 24px 28px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.crew-tile:hover, .crew-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}
.crew-tile:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: 2px; }
.crew-tile-art {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  margin-bottom: 16px;
}
.crew-tile-art img { max-width: 82%; max-height: 82%; filter: drop-shadow(0 10px 14px rgba(32,31,61,0.14)); }
.crew-tile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  text-align: center;
}
.crew-tile-role {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 6px;
}
.crew-tile.crew-sally .crew-tile-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--turquoise-tint) 100%); }
.crew-tile.crew-sally .crew-tile-role { color: var(--turquoise-dark); }
.crew-tile.crew-alex .crew-tile-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--coral-tint) 100%); }
.crew-tile.crew-alex .crew-tile-role { color: var(--coral-dark); }
.crew-tile.crew-tonsils .crew-tile-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--bubblegum-tint) 100%); }
.crew-tile.crew-tonsils .crew-tile-role { color: var(--bubblegum-dark); }
.crew-tile.crew-echo .crew-tile-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--sky-tint) 100%); }
.crew-tile.crew-echo .crew-tile-role { color: var(--sky-dark); }
.crew-tile.crew-iris .crew-tile-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--lavender-tint) 100%); }
.crew-tile.crew-iris .crew-tile-role { color: var(--lavender-dark); }

/* Mode controls */
.crew-mode-toggle {
  display: inline-flex;
  margin-top: 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.crew-mode-toggle:hover, .crew-mode-toggle:focus-visible { color: var(--coral-dark); }
.crew-detail-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.crew-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-soft);
  padding: 0;
  text-decoration: none;
}
.crew-back-link:hover, .crew-back-link:focus-visible { color: var(--coral); }
/* The display rule above outranks the [hidden] attribute's UA default, so
   hiding this button from script needs saying explicitly. */
.crew-back-link[hidden] { display: none; }
/* Only one exit icon shows at a time — script.js flips .to-kids to match
   whichever page the reader arrived from. */
.exit-icon-kids { display: none; }
.crew-home-link.to-kids .exit-icon-home { display: none; }
.crew-home-link.to-kids .exit-icon-kids { display: inline; }

/* Detail view — one bio (or all four) shown large */
.crew-detail-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.crew-detail-list[hidden] { display: none; }
.crew-panel-hidden { display: none !important; }
.crew-row {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 52px;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 40px 48px;
}
/* order:2 makes .crew-art the second item CSS Grid auto-places — so the
   reversed row's track sizes must swap too, or the "narrow" track
   goes to crew-copy and crew-art inflates to fill the 1fr track instead. */
.crew-row.reverse { grid-template-columns: 1fr 400px; }
.crew-row.reverse .crew-art { order: 2; }
.crew-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.crew-art img {
  max-width: 82%;
  max-height: 82%;
  filter: drop-shadow(0 10px 14px rgba(32,31,61,0.14));
}
.crew-art .crew-sticker {
  position: absolute;
  bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--navy);
  padding: 6px 16px;
  border-radius: 999px;
  transform: rotate(-4deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}
.crew-role {
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crew-copy h3 {
  font-size: clamp(30px, 3.6vw, 42px);
  margin-top: 10px;
}
.crew-copy p { margin-top: 14px; color: var(--navy-soft); font-size: 19px; line-height: 1.6; }
.crew-copy .crew-fact {
  margin-top: 16px;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  padding-left: 14px;
  border-left: 4px solid currentColor;
}

/* Each character card links to its playbook — display:contents keeps the <a>
   out of the .crew-list flex flow so .crew-row still lays out exactly as before */
.crew-row-link { display: contents; text-decoration: none; color: inherit; }
.crew-row-link .crew-row { transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }
.crew-row-link:hover .crew-row, .crew-row-link:focus-visible .crew-row {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}
.crew-row-link:focus-visible .crew-row { outline: 3px solid var(--turquoise-dark); outline-offset: 2px; }

/* Per-character palettes */
.crew-sally .crew-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--turquoise-tint) 100%); }
.crew-sally .crew-role, .crew-sally .crew-fact { color: var(--turquoise-dark); }
.crew-alex .crew-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--coral-tint) 100%); }
.crew-alex .crew-role, .crew-alex .crew-fact { color: var(--coral-dark); }
.crew-tonsils .crew-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--bubblegum-tint) 100%); }
.crew-tonsils .crew-role, .crew-tonsils .crew-fact { color: var(--bubblegum-dark); }
.crew-echo .crew-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--sky-tint) 100%); }
.crew-echo .crew-role, .crew-echo .crew-fact { color: var(--sky-dark); }
.crew-iris .crew-art { background: radial-gradient(circle at 50% 45%, #fff 0%, var(--lavender-tint) 100%); }
.crew-iris .crew-role, .crew-iris .crew-fact { color: var(--lavender-dark); }

/* Per-character name fonts — each picked to match their personality:
   Sally = warm & huggable, Alex = bold & adventurous, Tina & Tony =
   bubbly twin energy, Echo = bouncy and rhythmic. */
.crew-sally .crew-copy h3 { font-family: "Baloo 2", var(--font-display); font-weight: 700; }
.crew-alex .crew-copy h3 { font-family: "Luckiest Guy", var(--font-display); font-weight: 400; letter-spacing: 0.02em; }
.crew-tonsils .crew-copy h3 { font-family: "Bubblegum Sans", var(--font-display); font-weight: 400; }
.crew-echo .crew-copy h3 { font-family: "Sniglet", var(--font-display); font-weight: 800; }
.crew-iris .crew-copy h3 { font-family: "Chewy", var(--font-display); font-weight: 400; }

/* ---------- Meet the Crew: ambient character animations ---------- */

/* Sally — gentle continuous wiggle */
.crew-anim-wiggle {
  animation: crew-wiggle 3.2s ease-in-out infinite;
  transform-origin: 50% 85%;
}
@keyframes crew-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(4deg); }
}

/* Sally — hearts puffing from her chest, floating up and fading away */
.heart-burst {
  position: absolute;
  left: 51%;
  top: 60%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mini-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  opacity: 0;
  animation: heart-puff 3.6s ease-out infinite;
}
.mini-heart svg { width: 100%; height: 100%; display: block; }
.mini-heart:nth-child(1) { animation-delay: 0s;    color: var(--coral);      left: 0px;   --drift: 20px; }
.mini-heart:nth-child(2) { animation-delay: 0.9s;  color: var(--bubblegum);  left: -10px; --drift: -30px; }
.mini-heart:nth-child(3) { animation-delay: 1.8s;  color: var(--lavender);   left: 10px;  --drift: 32px; }
.mini-heart:nth-child(4) { animation-delay: 2.7s;  color: var(--coral-dark); left: -4px;  --drift: -18px; }
@keyframes heart-puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12%  { opacity: 1; transform: translate(0, -10px) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift, 14px), -230px) scale(0.7); }
}

/* Alex — flies a loop around his circle while waving */
.alex-orbit {
  position: relative;
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: alex-orbit 7s linear infinite;
}
.crew-alex .crew-art img { max-width: 100%; max-height: 100%; }
.alex-wave {
  animation: alex-wave 1.1s ease-in-out infinite;
  transform-origin: 30% 70%;
}
@keyframes alex-orbit {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(26px, -20px); }
  25%   { transform: translate(34px, 0px); }
  37.5% { transform: translate(26px, 20px); }
  50%   { transform: translate(0, 28px); }
  62.5% { transform: translate(-26px, 20px); }
  75%   { transform: translate(-34px, 0px); }
  87.5% { transform: translate(-26px, -20px); }
  100%  { transform: translate(0, 0); }
}
@keyframes alex-wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-12deg); }
}

/* Tina & Tony — a synchronized joyful bounce */
.crew-anim-bounce {
  animation: crew-bounce 1.6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes crew-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(3deg); }
}

/* Echo — beats his drum, with sound rings pulsing outward */
.crew-anim-beat {
  animation: echo-beat 1.05s ease-in-out infinite;
  transform-origin: center;
}
@keyframes echo-beat {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.09) rotate(-2deg); }
  30%  { transform: scale(0.98) rotate(1deg); }
  45%  { transform: scale(1.04) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.beat-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.beat-ring {
  position: absolute;
  width: 60%;
  height: 60%;
  border: 2px solid var(--sky);
  border-radius: 50%;
  opacity: 0;
  animation: beat-ring 2.1s ease-out infinite;
}
.beat-ring:nth-child(2) { animation-delay: 1.05s; }
@keyframes beat-ring {
  0%   { transform: scale(0.7); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Iris & Seymour — Seymour's eyeball rolls around wildly.
   The artwork ships with his iris empty, so the only pupil on screen is this
   one. The SVG must line up with the PNG exactly or the pupil drifts off the
   eye, hence sizing .eye-stage (not the img) and letting the img fill it: the
   overlay then shares the image's box, and the viewBox maps 1:1 to its pixels.
   Seymour's iris sits at 511.5,165.5 with an inner radius of 62, so a 34px
   pupil can travel 24px from centre and still clear the ring. */
.eye-stage {
  position: relative;
  display: block;
  width: 82%;
  line-height: 0;
}
.eye-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}
.eye-roll {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.eye-roll-pupil {
  animation: seymour-roll 2.6s ease-in-out infinite;
}
@keyframes seymour-roll {
  0%   { transform: translate(511px, 166px); }
  10%  { transform: translate(531px, 154px); }
  20%  { transform: translate(530px, 179px); }
  30%  { transform: translate(509px, 189px); }
  40%  { transform: translate(490px, 176px); }
  50%  { transform: translate(495px, 152px); }
  60%  { transform: translate(519px, 143px); }
  70%  { transform: translate(534px, 168px); }
  80%  { transform: translate(513px, 190px); }
  90%  { transform: translate(491px, 158px); }
  100% { transform: translate(511px, 166px); }
}

@media (prefers-reduced-motion: reduce) {
  .crew-anim-wiggle,
  .alex-wave,
  .alex-orbit,
  .crew-anim-beat,
  .crew-anim-bounce { animation: none; }
  .mini-heart, .beat-ring { animation: none; opacity: 0; }
  /* Park the pupil off to one side, the way the artwork drew Seymour. */
  .eye-roll-pupil { animation: none; transform: translate(534px, 168px); }
}

/* ---------- For Hospitals ---------- */
.hospitals-section { background: var(--navy); color: #fff; }
.hospitals-section .section-head p { color: rgba(255,255,255,0.72); }
.hospitals-section .eyebrow { color: var(--sunny); }
.hospitals-section h2 { color: #fff; }
.hosp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.hosp-benefits li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.hosp-benefits li:first-child { padding-top: 0; }
.hosp-benefits .num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--sunny);
  font-size: 15px;
  min-width: 26px;
}
.hosp-benefits li:nth-child(1) .num { color: var(--sunny); }
.hosp-benefits li:nth-child(2) .num { color: var(--turquoise); }
.hosp-benefits li:nth-child(3) .num { color: var(--bubblegum); }
.hosp-benefits li:nth-child(4) .num { color: var(--grass); }
.hosp-benefits h4 { color: #fff; font-size: 16.5px; margin-bottom: 4px; }
.hosp-benefits p { color: rgba(255,255,255,0.68); font-size: 14.5px; }

.hosp-form {
  background: #fff;
  color: var(--navy);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-pop);
}
.hosp-form h3 { font-size: 20px; margin-bottom: 6px; }
.hosp-form > p { color: var(--navy-soft); font-size: 14.5px; margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--navy);
}
.field input, .field textarea, .field select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: var(--cream);
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--turquoise);
}
.field textarea { resize: vertical; min-height: 90px; }

/* ---------- About ---------- */
.about-section { background: var(--grass-tint); }
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 54px;
  align-items: center;
}
.about-photo { position: relative; }
.about-photo img {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-card);
}
.about-photo .sticker {
  position: absolute;
  bottom: -18px; left: -18px;
  width: 84px; height: 84px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  padding: 12px;
}
.about-copy p { color: var(--navy-soft); margin-top: 16px; font-size: 16.5px; }
.about-copy p:first-of-type { margin-top: 18px; }
.about-quote {
  margin-top: 22px;
  padding-left: 18px;
  border-left: 4px solid var(--coral);
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--navy);
}
.about-copy .name-role { margin-top: 24px; }
.about-copy .name-role strong { display: block; font-family: var(--font-display); font-size: 17px; }
.about-copy .name-role span { color: var(--navy-soft); font-size: 14px; }

/* ---------- For Parents ---------- */
.parents-section { background: var(--sky-tint); }

.subsection-head { max-width: 640px; margin-top: 64px; margin-bottom: 26px; }
.section-head + .subsection-head { margin-top: 0; }
.subsection-head h3 { font-size: clamp(22px, 2.6vw, 27px); }
.subsection-head p { margin-top: 10px; color: var(--navy-soft); font-size: 16px; }

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.value-card { text-decoration: none; color: inherit; display: block; }
.value-card .link-cue {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--sky-dark);
}

/* Horizontal timeline — click a step to drop down its checklist */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
  max-width: 900px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--line);
  z-index: 0;
}
.timeline-step {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.timeline-step summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.timeline-step summary::-webkit-details-marker { display: none; }
.timeline-step summary:hover { background: var(--cream); }
.timeline-step summary:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: -3px; }
.step-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.step-node svg { width: 18px; height: 18px; }
.timeline-step:nth-child(2) .step-node { background: var(--turquoise); }
.timeline-step:nth-child(3) .step-node { background: var(--lavender); }
.step-label { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--navy); }
.step-sub { font-size: 13px; color: var(--navy-soft); }
.timeline-step .chev { display: flex; margin-top: 2px; color: var(--navy-soft); transition: transform 0.2s ease; }
.timeline-step[open] .chev { transform: rotate(180deg); }
.timeline-step[open] summary { background: var(--cream); }

.step-checklist {
  padding: 2px 18px 18px;
  border-top: 1px solid var(--line);
}
.step-checklist .check-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.step-checklist .check-item:last-child { border-bottom: none; padding-bottom: 2px; }
.step-checklist .check-item p { color: var(--navy-soft); font-size: 14px; text-align: left; }
.check-item .check-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grass-tint);
  color: var(--grass-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.check-item strong { color: var(--navy); }

@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
}

.disclaimer {
  background: var(--sunny-tint);
  border-left: 4px solid var(--sunny-dark);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--navy-soft);
  max-width: 760px;
}
.disclaimer strong { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq-section { background: var(--cream); }
.faq-list {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.15s ease, background 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--sky-tint); }
.faq-item summary:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: -3px; }
.faq-item summary .chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sky-dark);
  transition: transform 0.25s ease;
}
.faq-item[open] summary { color: var(--sky-dark); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-answer {
  padding: 0 22px 22px;
  color: var(--navy-soft);
  font-size: 15.5px;
  line-height: 1.65;
}
.faq-answer a { color: var(--sky-dark); font-weight: 700; }
.faq-answer strong { color: var(--navy); }

/* ---------- Research ---------- */
.research-section { background: var(--cream); }
.research-intro { max-width: 760px; }
.research-intro p { margin-top: 14px; color: var(--navy-soft); font-size: 16.5px; }

.research-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}

.study-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.study-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  border-left: 5px solid var(--turquoise);
}
.study-card:nth-child(2) { border-left-color: var(--coral); }
.study-card:nth-child(3) { border-left-color: var(--lavender); }
.study-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise-dark);
}
.study-card:nth-child(2) .study-eyebrow { color: var(--coral-dark); }
.study-card:nth-child(3) .study-eyebrow { color: var(--lavender-dark); }

.study-quote {
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy);
}
.study-quote::before { content: "\201C"; }
.study-quote::after { content: "\201D"; }

/* The eye-catching bit: a marker-highlight treatment on the key phrase,
   set in the display face so it visually breaks from the body text. */
.quote-hl {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  background: linear-gradient(to bottom, transparent 58%, var(--sunny-tint) 58%);
  padding: 0 2px;
}
.study-card:nth-child(2) .quote-hl { background-image: linear-gradient(to bottom, transparent 58%, var(--coral-tint) 58%); }
.study-card:nth-child(3) .quote-hl { background-image: linear-gradient(to bottom, transparent 58%, var(--lavender-tint) 58%); }

.study-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--navy-soft);
}
.study-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--turquoise-dark);
  text-decoration: none;
  white-space: nowrap;
}
.study-link:hover { text-decoration: underline; }
.study-card:nth-child(2) .study-link { color: var(--coral-dark); }
.study-card:nth-child(3) .study-link { color: var(--lavender-dark); }

.research-connect {
  position: sticky;
  top: 90px;
  background: var(--turquoise-tint);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.research-connect h3 { font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.research-connect p { margin-top: 10px; color: var(--navy-soft); font-size: 14.5px; line-height: 1.55; }
.research-connect p + p { margin-top: 12px; }

@media (max-width: 900px) {
  .research-grid { grid-template-columns: 1fr; }
  .research-connect { position: static; order: -1; }
}

/* ---------- Reviews ---------- */
.reviews-section { background: var(--cream); }
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
}
.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
  scroll-margin-top: 30px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.review-card:target {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-tint), var(--shadow-pop);
  transform: translateY(-2px);
}
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.review-logo {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 11px;
  background: #c3c2cf;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-logo svg { width: 24px; height: 24px; }
.review-org {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
}
/* Individual reviewers (no organization) get a small role/title line under
   their name instead — same slot, just a second line. */
.review-role {
  font-size: 13.5px;
  color: var(--navy-soft);
  margin-top: 1px;
}
.review-stars {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  color: var(--sunny);
}
.review-stars .star-off { color: #d9d8e0; }
.review-quote {
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-soft);
}
.review-quote::before { content: "\201C"; }
.review-quote::after { content: "\201D"; }

/* ---------- Donate ---------- */
.donate-section {
  background: linear-gradient(135deg, var(--turquoise) 0%, var(--lavender) 55%, var(--coral) 100%);
  color: #fff;
  text-align: center;
}
.donate-section .section-head { margin-inline: auto; }
.donate-section .eyebrow { color: rgba(255,255,255,0.9); }
.donate-section h2 { color: #fff; }
.donate-section p { color: rgba(255,255,255,0.92); }
.donate-actions { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.donate-note { font-size: 13.5px; color: rgba(255,255,255,0.85); max-width: 46ch; }

/* ---------- Footer ---------- */
footer { background: var(--navy); color: rgba(255,255,255,0.8); padding-block: 60px 30px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 18px; color: #fff; margin-bottom: 14px; }
/* White circle badge so the mascot reads clearly against the dark footer. */
.footer-brand img {
  height: 44px;
  width: 44px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-grid p { font-size: 14.5px; color: rgba(255,255,255,0.6); max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,0.65); font-size: 14.5px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--sunny); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
}
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.15s ease;
}
.social-icons a:hover { background: var(--coral); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(32, 31, 61, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(90vw, 820px);
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.lightbox-close {
  position: absolute;
  top: 24px; right: 28px;
  background: #fff;
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  color: var(--navy);
}

/* ---------- Page intro animations (icon reveals on load) ---------- */
.page-intro-icon { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.page-intro-icon svg { display: block; overflow: visible; }
.intro-svg { width: 84px; height: auto; overflow: visible; }

@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-pop {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-fill { to { opacity: 1; } }
@keyframes intro-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes star-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Research: document + magnifying glass draws itself in */
.research-intro-svg { color: var(--turquoise-dark); }
.research-intro-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 0.9s ease forwards; }
.research-intro-svg circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 0.7s ease 0.55s forwards; }
.research-intro-svg .glass-handle { animation: intro-draw 0.4s ease 1.15s forwards; }

/* About: a textured, hand-drawn heart outline draws itself in */
.about-heart-line {
  fill: none;
  stroke: url(#aboutCrayonGradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.about-heart-line-under { stroke-width: 4.2; opacity: 0.32; animation: intro-draw 1s ease-out forwards; }
.about-heart-line-mid { stroke-width: 2.8; opacity: 0.55; animation: intro-draw 1s ease-out 0.08s forwards; }
.about-heart-line-top { stroke-width: 1.6; opacity: 0.95; animation: intro-draw 1s ease-out 0.16s forwards; }

/* Donate: heart outline draws, fills in, gives two gentle pulses */
.donate-intro-svg { color: var(--coral); }
.donate-heart-outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 1s ease forwards; }
.donate-heart-fill { opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-fill 0.4s ease 0.95s forwards, intro-pulse 0.7s ease 1.5s 2; }

/* Reviews: a little cluster of stars pop in */
.reviews-intro-stars svg { color: var(--sunny-dark); opacity: 0; animation: star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.reviews-intro-stars svg:nth-child(1) { animation-delay: 0.05s; }
.reviews-intro-stars svg:nth-child(2) { animation-delay: 0.2s; }
.reviews-intro-stars svg:nth-child(3) { animation-delay: 0.35s; }

/* Pocket Learning Playbooks: an open book draws itself in */
.books-intro-svg { color: var(--sunny-dark); }
.books-intro-book { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 0.9s ease forwards; }

/* For Parents: a parent & child draw in, a heart pops between them */
.parents-intro-svg { color: var(--sky-dark); }
.parents-intro-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 0.9s ease forwards; }
.parents-intro-heart { opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards; }

/* For Hospitals: the building draws in, the medical cross beats twice */
.hosp-intro-svg { color: var(--sunny-dark); }
.hosp-intro-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 0.85s ease forwards; }
.hosp-intro-cross {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform-box: fill-box; transform-origin: center;
  animation: intro-draw 0.35s ease 0.75s forwards, intro-pulse 0.6s ease 1.3s 2;
}

@media (prefers-reduced-motion: reduce) {
  .research-intro-svg path, .research-intro-svg circle, .about-heart-line, .donate-heart-outline,
  .books-intro-book, .parents-intro-line, .hosp-intro-line, .hosp-intro-cross {
    stroke-dashoffset: 0; animation: none;
  }
  .donate-heart-fill, .reviews-intro-stars svg,
  .parents-intro-heart { opacity: 1; animation: none; transform: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   For Kids — landing page + Sound & Sight Explorer game
   Deliberately bigger, brighter and simpler than the rest of the
   site: larger type, bigger tap targets, a sunnier background.
   ============================================================ */
.kids-page {
  background: linear-gradient(180deg, var(--sky-tint) 0%, var(--paper) 45%);
}
.kids-eyebrow { color: var(--bubblegum-dark); }
.kids-h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-top: 10px;
}
.kids-lead {
  font-size: 18px;
  max-width: 640px;
  margin-inline: auto;
}

.kids-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-soft);
  text-decoration: none;
  margin-bottom: 18px;
}
.kids-back-link:hover { color: var(--navy); }
.kids-game-topbar .kids-back-link {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  gap: 10px;
  padding: 8px 20px 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--line);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.kids-game-topbar .kids-back-link:hover {
  border-color: var(--bubblegum);
  transform: translateX(-3px);
}
.kids-game-topbar .kids-back-link svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ---------- Game page: wide layout, room dominates ---------- */
.wrap-wide { max-width: 1500px; }
.kids-game-topbar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
}
.kids-game-topbar .kids-back-link { margin-bottom: 0; }
.kids-game-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--navy);
  margin: 0;
}

/* ---------- Hero: big bouncy title + mascot + confetti ---------- */
.kids-hero { position: relative; padding-top: 8px; margin-bottom: 12px; }
.kids-hero-confetti { z-index: 0; }
.kids-hero-mascot {
  position: absolute;
  top: -14px;
  right: 4%;
  width: 92px;
  z-index: 2;
  filter: drop-shadow(0 12px 18px rgba(32, 31, 61, 0.22));
  animation: float-slow 5s ease-in-out infinite;
}
.kids-hero-mascot img { display: block; width: 100%; }
.kids-hero-copy { position: relative; z-index: 1; margin-bottom: 0; }

.kids-hero-title {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  font-size: clamp(52px, 9vw, 100px);
  line-height: 1;
  margin: 4px 0 8px;
}
.kt-word { display: inline-flex; }
.kt-letter {
  display: inline-block;
  animation: kt-bounce 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes kt-bounce {
  0%, 55%, 100% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(-0.16em) rotate(-4deg); }
}
@media (max-width: 700px) {
  .kids-hero-mascot { width: 68px; top: -6px; }
}

/* ---------- Mini crew strip ---------- */
.kids-crew-strip {
  margin-top: 44px;
  margin-bottom: 8px;
  text-align: center;
}
.kids-crew-label {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 56px);
  color: var(--navy);
  margin-bottom: 30px;
}
/* "hi" waves like a hand — pivots from the bottom, with a pause between waves */
.kids-crew-wave {
  display: inline-block;
  transform-origin: 50% 90%;
  color: var(--coral);
  animation: kids-wave 2.6s ease-in-out infinite;
}
@keyframes kids-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-14deg); }
  72% { transform: rotate(12deg); }
  78% { transform: rotate(-10deg); }
  84% { transform: rotate(8deg); }
  90% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-crew-wave { animation: none; }
}
.kids-crew-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px 40px;
  flex-wrap: wrap;
}
.kids-crew-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.kids-crew-pic {
  position: relative;
  width: clamp(120px, 12vw, 156px);
  height: clamp(120px, 12vw, 156px);
  border-radius: 50%;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -10px rgba(32, 31, 61, 0.28);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.kids-crew-pic img { width: 100%; height: 100%; object-fit: contain; }
.kids-crew-avatar:hover .kids-crew-pic,
.kids-crew-avatar:focus-visible .kids-crew-pic {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 16px 26px -10px rgba(32, 31, 61, 0.36);
}

/* Hovering an avatar plays that character's signature animation — the same
   keyframes their bio uses on Meet the Crew, so they move consistently
   wherever they appear. Idle by default so the strip isn't a wall of motion. */
.kids-crew-pic img { transform-origin: 50% 85%; }
.av-sally:hover .kids-crew-pic img,
.av-sally:focus-visible .kids-crew-pic img { animation: crew-wiggle 3.2s ease-in-out infinite; }
.av-alex:hover .kids-crew-pic img,
.av-alex:focus-visible .kids-crew-pic img { animation: alex-wave 1.1s ease-in-out infinite; }
.av-tonsils:hover .kids-crew-pic img,
.av-tonsils:focus-visible .kids-crew-pic img { animation: crew-bounce 1.6s ease-in-out infinite; }
.av-echo:hover .kids-crew-pic img,
.av-echo:focus-visible .kids-crew-pic img { animation: echo-beat 1.05s ease-in-out infinite; transform-origin: center; }

/* Iris & Seymour: the pupil is a separate SVG layer, so it rolls rather than
   the whole picture moving. Parked off to one side until hovered. */
.kids-eye-roll {
  position: absolute;
  /* Must match the img's box exactly (the pic's content box, inside its 12px
     padding) — then object-fit:contain and preserveAspectRatio="meet" centre
     the artwork identically. Sized explicitly because an SVG with an intrinsic
     aspect ratio collapses to it rather than stretching to its insets. */
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
}
.kids-eye-pupil { transform: translate(534px, 168px); }
.av-iris:hover .kids-eye-pupil,
.av-iris:focus-visible .kids-eye-pupil { animation: seymour-roll 2.6s ease-in-out infinite; }

/* Sally's puffing hearts and Echo's beat rings, same as their bios. The bio
   versions travel in absolute px sized for a ~400px portrait, so the hearts
   get their own scaled keyframes here; the rings scale proportionally and
   reuse beat-ring as-is. All idle until hover. */
.kc-hearts {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.kc-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  opacity: 0;
}
.kc-heart svg { width: 100%; height: 100%; display: block; }
.kc-heart:nth-child(1) { animation-delay: 0s;   color: var(--coral);      left: 0px;  --kdrift: 7px; }
.kc-heart:nth-child(2) { animation-delay: 0.9s; color: var(--bubblegum);  left: -5px; --kdrift: -10px; }
.kc-heart:nth-child(3) { animation-delay: 1.8s; color: var(--lavender);   left: 5px;  --kdrift: 11px; }
.kc-heart:nth-child(4) { animation-delay: 2.7s; color: var(--coral-dark); left: -2px; --kdrift: -6px; }
.av-sally:hover .kc-heart,
.av-sally:focus-visible .kc-heart { animation: kc-heart-puff 3.6s ease-out infinite; }
/* Re-declared after the shorthand above, which would otherwise reset the
   per-heart delays to 0 and puff all four in unison. */
.av-sally:hover .kc-heart:nth-child(1),
.av-sally:focus-visible .kc-heart:nth-child(1) { animation-delay: 0s; }
.av-sally:hover .kc-heart:nth-child(2),
.av-sally:focus-visible .kc-heart:nth-child(2) { animation-delay: 0.9s; }
.av-sally:hover .kc-heart:nth-child(3),
.av-sally:focus-visible .kc-heart:nth-child(3) { animation-delay: 1.8s; }
.av-sally:hover .kc-heart:nth-child(4),
.av-sally:focus-visible .kc-heart:nth-child(4) { animation-delay: 2.7s; }
@keyframes kc-heart-puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12%  { opacity: 1; transform: translate(0, -4px) scale(1); }
  100% { opacity: 0; transform: translate(var(--kdrift, 6px), -72px) scale(0.7); }
}

.kc-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.kc-ring {
  position: absolute;
  width: 60%;
  height: 60%;
  border: 2px solid var(--sky);
  border-radius: 50%;
  opacity: 0;
}
.kc-ring:nth-child(2) { animation-delay: 1.05s; }
.av-echo:hover .kc-ring,
.av-echo:focus-visible .kc-ring { animation: beat-ring 2.1s ease-out infinite; }
/* Same reason as the hearts: the shorthand resets the offset that makes the
   second ring trail the first. */
.av-echo:hover .kc-ring:nth-child(2),
.av-echo:focus-visible .kc-ring:nth-child(2) { animation-delay: 1.05s; }

/* Alex drifts in a slow orbit while he waves — the orbit is on the wrapper so
   it never fights the wave transform on the image itself. */
.kc-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-alex .kids-crew-pic img { transform-origin: 30% 70%; }
.av-alex:hover .kc-orbit,
.av-alex:focus-visible .kc-orbit { animation: kc-orbit 7s linear infinite; }
@keyframes kc-orbit {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(6px, -5px); }
  25%   { transform: translate(8px, 0); }
  37.5% { transform: translate(6px, 5px); }
  50%   { transform: translate(0, 7px); }
  62.5% { transform: translate(-6px, 5px); }
  75%   { transform: translate(-8px, 0); }
  87.5% { transform: translate(-6px, -5px); }
  100%  { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kids-crew-avatar:hover .kids-crew-pic img,
  .kids-crew-avatar:focus-visible .kids-crew-pic img,
  .av-iris:hover .kids-eye-pupil,
  .av-iris:focus-visible .kids-eye-pupil,
  .av-alex:hover .kc-orbit,
  .av-alex:focus-visible .kc-orbit { animation: none; }
  .av-sally:hover .kc-heart,
  .av-sally:focus-visible .kc-heart,
  .av-echo:hover .kc-ring,
  .av-echo:focus-visible .kc-ring { animation: none; opacity: 0; }
}
.kids-crew-name {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--navy);
}
.kids-crew-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--coral);
  text-decoration: none;
  margin-left: 10px;
}
.kids-crew-more svg { transition: transform 0.2s ease; }
.kids-crew-more:hover svg,
.kids-crew-more:focus-visible svg { transform: translateX(3px); }

/* ---------- Activity cards ---------- */
/* ---------- Game cards ----------
   Each card leads with a real picture of that game's board rather than an
   abstract icon, because a five-year-old picks a game by recognising it, not
   by reading its name. Every card carries its own accent colour through
   --card-accent, so the four read as four different things at a glance. */
.kids-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.kids-activity-card {
  --card-accent: var(--bubblegum);
  --card-tint: var(--bubblegum-tint);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: 3px solid var(--card-accent);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 5px 0 var(--card-accent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.kids-activity-card:hover, a.kids-activity-card:focus-visible {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 11px 0 var(--card-accent), var(--shadow-pop);
}
a.kids-activity-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* The board shot. Tinted backdrop so a mostly-white board still reads as a
   picture rather than as a hole in the card. */
.kids-activity-shot {
  display: block;
  background: var(--card-tint);
  border-bottom: 3px solid var(--card-accent);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.kids-activity-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
a.kids-activity-card:hover .kids-activity-shot img { transform: scale(1.04); }

.kids-activity-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  text-align: left;
}
/* The entire card is one link — there is no separate button to aim at, so the
   pointer and the hover lift have to advertise that the whole thing is live. */
a.kids-activity-card { cursor: pointer; }
.kids-activity-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--navy);
}
.kids-activity-desc { color: var(--navy-soft); font-size: 15px; line-height: 1.45; }

/* "More games coming soon" — same shape, deliberately quieter. */
.kids-activity-soon {
  border-style: dashed;
  border-color: var(--line);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 26px;
  opacity: 0.8;
}
.kids-activity-soon .kids-activity-body { text-align: center; align-items: center; padding: 0; }
.kids-activity-soon .kids-activity-art {
  width: 74px; height: 74px; margin: 0 auto 10px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-soft); background: var(--sky-tint); border-radius: 50%;
}
.kids-activity-soon .kids-activity-art svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .kids-activity-card, .kids-activity-shot img { transition: none; }
  a.kids-activity-card:hover, a.kids-activity-card:focus-visible { transform: none; }
  a.kids-activity-card:hover .kids-activity-shot img { transform: none; }
}

/* ---------- Game bar: progress + mute ---------- */
.kids-game-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 760px;
  margin: 32px auto 0;
  flex-wrap: wrap;
}
.kids-progress { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 220px; }
.kids-progress-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy); }
.kids-progress-track {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--sky-tint);
  overflow: hidden;
}
.kids-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--sunny), var(--turquoise));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.kids-mute-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  min-height: 44px;
}
.kids-mute-btn:hover { border-color: var(--sky-dark); }
.kids-mute-btn .mute-icon-off { display: none; }
.kids-mute-btn.is-muted .mute-icon-on { display: none; }
.kids-mute-btn.is-muted .mute-icon-off { display: flex; }
.kids-mute-btn.is-muted { color: var(--navy-soft); }

/* ---------- Room scene: one big coloring-book illustration with hidden, tappable items ----------
   The room is the star of this page — the explanation sits beside it (not
   below), sized to its own content rather than stretching to match. */
.kids-game-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 6px auto 0;
}

/* This element carries the sizing (from the flex row), so .room-scene can just
   fill it at 100% width. Capping the height budget HERE — rather than putting a
   definite height on .room-scene — is what lets the scene stay exactly 3:2.
   max-width math: content box = width - 24px (10px padding + 2px border, x2);
   68vh tall => 68vh*1.5 wide; the 1104px cap corresponds to a 720px height. */
.room-illustration {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  max-width: min(1104px, calc(68vh * 3 / 2 + 24px));
  display: flex;
  justify-content: center;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
}

/* Locks this box to the illustration's true 1536:1024 (3:2) proportions,
   independent of the flex layout around it, so the outline image, every
   color patch, and the full-color reveal — all absolutely positioned to
   fill this exact box — are guaranteed to line up pixel-for-pixel instead
   of each resolving their own (potentially mismatched) auto height.
   Sized by HEIGHT (capped to a share of the viewport) rather than width, so
   the room stays big without pushing the progress bar or explanation below
   the fold — width just follows from the 3:2 ratio. */
.room-scene {
  position: relative;
  /* WIDTH is the only definite dimension (100% of the parent, which the flex
     row has already sized); height is derived purely from aspect-ratio. So the
     box is mathematically guaranteed to stay exactly 3:2 at every viewport.
     Giving the scene BOTH a definite height and a max-width would let the two
     fight — max-width wins on narrow screens and silently breaks the ratio,
     squishing the art out from under the percentage-based hit targets. */
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 8px);
}

/* Every layer fills this one box identically: same containing block, same
   inset, same object-fit — so their rendered boxes are byte-identical rather
   than merely similar. Nothing can peek out at the edges. */
.room-outline { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }

/* The colored room sits on top of the outline (which is fully opaque, so
   nothing shows through) and is invisible until every item has been found.
   By design this is the ONLY place color appears: tapping an individual item
   lights its glow but never colors it in, so the full-color room stays a
   one-time finale rather than something assembled piece by piece. */
.room-color-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.room-color-full.show { opacity: 1; }

/* ---------- "You already found this" glow ----------
   A flat color layer masked to a soft halo around one object's silhouette.
   The halo mask has a transparent interior (see source-files/tools-generate-masks.py), so
   this rings the object and never covers the artwork. Sized exactly like the
   color layers above — same box, same 100% 100% mask — so it stays registered
   with the art at every screen size. */
.room-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--glow-color);
  -webkit-mask-image: var(--glow-mask);
          mask-image: var(--glow-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* Steady state: present enough to clearly mark the item as done, soft enough
   that seven of them lit at once never turns the room into a light show. */
.room-glow.show { opacity: 0.5; }
/* A brighter flash the moment it's tapped, settling back to the steady value
   (the keyframe's end value matches .show, so the handoff is seamless). */
.room-glow.just-found { animation: room-glow-flash 0.75s ease-out; }
@keyframes room-glow-flash {
  0% { opacity: 0; }
  22% { opacity: 0.95; }
  100% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .room-glow { transition: none; }
  .room-glow.just-found { animation: none; }
}

/* Invisible, real <button> hit targets layered over the illustration — sized
   generously (well over the 44x44px minimum) so small kids and touch/switch
   users can tap comfortably without needing pixel-perfect accuracy. */
.room-item {
  position: absolute;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  margin: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.room-item:hover, .room-item:focus-visible { background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); }
.room-item:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: 2px; }
.room-item.discovered { cursor: default; }
.room-item.discovered:hover, .room-item.discovered:focus-visible { background: transparent; box-shadow: none; }

@keyframes note-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-7px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
}

/* ---------- Explanation panel: sits beside the room, sized to its own content ---------- */
.kids-explanation {
  flex: 0 1 340px;
  min-width: 240px;
  align-self: center;
  background: var(--paper);
  border: 2px solid var(--sky-tint);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  text-align: center;
}
.kids-explanation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--sky-dark);
  margin-bottom: 6px;
}
.kids-explanation-text { font-size: 20px; color: var(--navy); line-height: 1.4; }
@media (max-width: 900px) {
  .kids-game-layout { flex-direction: column; }
  /* Column layout flips the main axis, so the row-layout `flex` shorthands
     above would start sizing HEIGHT and leave width to max-content (which
     overflows the screen). Reset both children to explicit full width. */
  .room-illustration { flex: none; width: 100%; max-width: 100%; }
  .kids-explanation { flex: none; width: 100%; max-width: 560px; }
}

/* ---------- Celebration banner ---------- */
.kids-celebration {
  display: none;
  max-width: 480px;
  margin: 24px auto 0;
  text-align: center;
  background: var(--sunny-tint);
  border: 2px solid var(--sunny);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}
.kids-celebration.show { display: block; animation: intro-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kids-celebration-burst { display: inline-flex; gap: 4px; margin-bottom: 6px; }
.kids-celebration-burst svg { animation: note-bounce 1.4s ease infinite; }
.kids-celebration-burst svg:nth-child(2) { animation-delay: 0.15s; }
.kids-celebration-burst svg:nth-child(3) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .kids-celebration.show, .kids-celebration-burst svg {
    animation: none;
  }
}

/* ---------- Completion confetti: full-viewport burst of falling pieces ---------- */
.confetti-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -24px;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.9);
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(112vh) rotate(600deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { display: none; }
}

@media (max-width: 900px) {
  .kids-activity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kids-game-bar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   OR Relay: Supply Dash — sorting game (second For Kids game)
   Reuses .kids-page, .kids-game-topbar, .kids-game-bar,
   .kids-mute-btn, .kids-back-link, .kids-celebration and
   .confetti-burst as-is from Sound & Sight Explorer above.
   Everything below is new and scoped with a .dash- prefix so it
   can't collide with that game's .room-*/.kids-explanation rules.
   ============================================================ */
.dash-instructions { text-align: center; color: var(--navy-soft); font-size: 15.5px; max-width: 620px; margin: 4px auto 22px; }

/* ---------- Score + toolbar (speed picker + mute) ---------- */
.dash-score { display: flex; align-items: center; }
.dash-score-text { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy); }
.dash-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.dash-difficulty {
  display: inline-flex;
  gap: 4px;
  background: var(--sky-tint);
  border-radius: 999px;
  padding: 4px;
}
.dash-diff-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--navy-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-diff-btn:hover { color: var(--navy); }
.dash-diff-btn:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: 2px; }
.dash-diff-btn.is-active { background: var(--paper); color: var(--sky-dark); box-shadow: var(--shadow-card); }

/* ---------- Lanes ---------- */
.dash-layout { margin-top: 20px; }
.dash-lanes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.dash-lane {
  position: relative;
  height: 96px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dash-lane::before {
  /* Faint conveyor-belt hint so an empty lane still reads as "in motion." */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 34px);
  opacity: 0.5;
}

/* ---------- Items travelling along a lane ----------
   No visible text — each item is just its colored graphic (see ITEMS.icon in
   supply-dash-game.js), sized to fill most of the card. The accessible name
   lives entirely in the button's aria-label, set when the item is spawned. */
.dash-item {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  padding: 8px;
  box-shadow: var(--shadow-card);
  touch-action: none;
  z-index: 2;
}
.dash-item-icon { width: 100%; height: 100%; color: var(--navy); }
.dash-item-icon svg { width: 100%; height: 100%; }
/* Two items use photo cut-outs rather than an icon, so they need containing
   rather than stretching. */
.dash-item-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.dash-item:hover, .dash-item:focus-visible { border-color: var(--turquoise-dark); transform: translate(0, -50%) scale(1.06); }
.dash-item:focus-visible { outline: 3px solid var(--turquoise-dark); outline-offset: 2px; }
.dash-item.is-selected {
  border-color: var(--sunny-dark);
  background: var(--sunny-tint);
  box-shadow: var(--shadow-pop);
  transform: translate(0, -50%) scale(1.1);
}
.dash-item.is-dragging {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: var(--shadow-pop);
}
.dash-item.is-correct {
  animation: dash-item-yay 0.5s ease forwards;
  pointer-events: none;
}
.dash-item.is-wrong { animation: dash-item-wobble 0.5s ease; }

@keyframes dash-item-yay {
  0% { transform: translate(0, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(0, -50%) scale(0.3); opacity: 0; }
}
@keyframes dash-item-wobble {
  0%, 100% { transform: translate(0, -50%) rotate(0deg); }
  25% { transform: translate(0, -50%) rotate(-6deg); }
  75% { transform: translate(0, -50%) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-item.is-correct { animation-duration: 0.001ms; }
  .dash-item.is-wrong { animation: none; }
}

/* ---------- Sterile Spray: a friendly, clearly non-medical obstacle ----------
   A soft bubbly sweep — never anything sharp/needle-like — that pauses
   sorting in its lane until double-tapped (or, for keyboard/switch users,
   activated once) away. */
.dash-spray {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 120px;
  left: -140px;
  border-radius: 999px;
  border: 2px dashed var(--lavender);
  background: radial-gradient(circle at 30% 30%, rgba(155, 107, 245, 0.25), rgba(155, 107, 245, 0.08) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  animation: dash-spray-sweep linear forwards;
}
.dash-spray-icon { width: 34px; height: 34px; color: var(--lavender-dark); animation: dash-spray-sparkle 1.1s ease-in-out infinite; }
@keyframes dash-spray-sweep { from { left: -140px; } to { left: 100%; } }
@keyframes dash-spray-sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .dash-spray { animation-duration: 6s; }
  .dash-spray-icon { animation: none; }
}
.dash-lane.has-spray .dash-item { opacity: 0.45; }

/* ---------- Bins ---------- */
.dash-bins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dash-bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: var(--radius-lg);
  border: 3px solid var(--bin-color);
  background: var(--bin-tint);
  color: var(--bin-dark);
  cursor: pointer;
  min-height: 108px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-bin:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.dash-bin:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dash-bin-icon { width: 34px; height: 34px; }
.dash-bin-icon svg { width: 100%; height: 100%; }
.dash-bin-label { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; text-align: center; }

/* While an item is selected, the bins visibly invite a tap — this is also
   what a keyboard/switch user sees after picking an item with Enter/Space. */
.dash-bin.is-open-target { animation: dash-bin-invite 1s ease-in-out infinite; }
@keyframes dash-bin-invite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dash-bin.is-open-target { animation: none; } }

.dash-bin.is-correct-flash { animation: dash-bin-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dash-bin-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.dash-bin.is-wrong-flash { animation: dash-bin-shake 0.4s ease; }
@keyframes dash-bin-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .dash-bin.is-correct-flash, .dash-bin.is-wrong-flash { animation: none; }
}

/* ---------- Fact toast: a brief, non-blocking "did you know" bubble ---------- */
.dash-fact-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  max-width: 90vw;
  width: 420px;
  background: var(--paper);
  border: 2px solid var(--sunny);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  box-shadow: var(--shadow-pop);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dash-fact-toast.show { opacity: 1; transform: translate(-50%, 0); }

.dash-finish-row { display: flex; justify-content: center; margin-top: 22px; }

/* ---------- How to Play ---------- */
.dash-howto-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  min-height: 44px;
}
.dash-howto-btn:hover, .dash-howto-btn:focus-visible { border-color: var(--sky-dark); }

.dash-howto-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 31, 61, 0.5);
}
.dash-howto-overlay.show { display: flex; }

.dash-howto-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 34px 32px 28px;
  animation: intro-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .dash-howto-modal { animation: none; }
}

.dash-howto-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--navy-soft);
  cursor: pointer;
}
.dash-howto-close:hover, .dash-howto-close:focus-visible { color: var(--navy); border-color: var(--coral); }

.dash-howto-heading {
  font-size: clamp(24px, 4vw, 30px);
  margin-top: 8px;
  margin-bottom: 12px;
}
.dash-howto-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--sky-dark);
  margin-top: 22px;
  margin-bottom: 6px;
}
.dash-howto-content p { color: var(--navy-soft); font-size: 15.5px; line-height: 1.55; }
.dash-howto-content p + h3 { margin-top: 20px; }

.dash-howto-list { margin: 6px 0 0; padding: 0; list-style: none; }
.dash-howto-list li {
  color: var(--navy-soft);
  font-size: 15.5px;
  line-height: 1.5;
  padding: 4px 0 4px 4px;
}
.dash-howto-list li strong { color: var(--navy); font-family: var(--font-display); }

.dash-howto-bins {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}
.dash-howto-bin {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bin-tint, var(--cream));
  border: 2px solid var(--bin-color, var(--line));
  border-radius: var(--radius-md);
  padding: 10px 16px;
}
.dash-howto-bin-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--bin-dark, var(--navy)); }
.dash-howto-bin-list { font-size: 14px; color: var(--navy-soft); }

.dash-howto-start { display: block; width: 100%; margin-top: 26px; }

@media (max-width: 700px) {
  .dash-howto-modal { padding: 28px 20px 22px; }
}

@media (max-width: 700px) {
  .dash-lane { height: 76px; }
  .dash-item { width: 62px; height: 62px; padding: 6px; }
  .dash-bins { gap: 8px; }
  .dash-bin { padding: 12px 6px; min-height: 92px; }
  .dash-bin-icon { width: 26px; height: 26px; }
  .dash-bin-label { font-size: 12px; }
  .dash-toolbar { width: 100%; justify-content: space-between; }
}
@media (max-width: 420px) {
  .dash-diff-btn span.dash-diff-label-full { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { min-height: 320px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .hosp-grid, .about-grid { grid-template-columns: 1fr; }
  .about-grid { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trio-grid { grid-template-columns: repeat(2, 1fr); }
  .crew-row, .crew-row.reverse { grid-template-columns: 1fr; gap: 8px; text-align: center; padding: 28px 24px; }
  .crew-row.reverse .crew-art { order: 0; }
  .crew-art { max-width: 260px; margin-inline: auto; }
  .crew-copy .crew-fact { border-left: none; padding-left: 0; }
  .crew-tile { flex-basis: 100%; }
}

@media (max-width: 720px) {
  .value-grid { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding-block: 64px; }
  .about-photo .sticker { display: none; }
  .trio-grid { grid-template-columns: 1fr; }
  /* Smaller label + left-anchor Sally so long names stay on a narrow screen */
  .hero-actions { flex-wrap: wrap; }
  .character-label { font-size: 16px; padding: 7px 14px; border-width: 2px; }
  .mascot-main .character-label { left: 0; right: auto; transform: translate(0, 8px); }
  .mascot-main.character:hover .character-label,
  .mascot-main.character:focus-visible .character-label,
  .mascot-main.character.is-tapped .character-label { transform: translate(0, 0); }
}


/* ---------- Playbooks: how to print & fold ----------
   The steps stay open so a parent can follow them while standing at a
   printer; only the troubleshooting collapses, reusing the .faq-item
   accordion from the For Hospitals page. */
.printfold-section { background: var(--cream); }
.printfold-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* align-items:start stops a short panel stretching to match a tall neighbour
     and leaving a big empty box — uneven bottoms are fine here. */
  align-items: start;
  gap: 22px;
  margin-top: 8px;
}
.printfold-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* An open panel is many times taller than a closed one, and a grid row is as
   tall as its tallest cell — so side-by-side it left a large dead space next to
   the short panel. Open panels take the full width instead; the closed ones
   stay tiled two-across. */
.printfold-card[open] { grid-column: 1 / -1; }
.printfold-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--turquoise-dark);
}
.printfold-card > summary::-webkit-details-marker { display: none; }
.printfold-card > summary:hover { background: var(--turquoise-tint); }
.printfold-card > summary:focus-visible {
  outline: 3px solid var(--turquoise-dark);
  outline-offset: -3px;
}
.printfold-card > summary .chev {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--turquoise-dark);
}
.printfold-card[open] > summary .chev { transform: rotate(180deg); }
.printfold-body { padding: 0 24px 24px; }
.printfold-card p { color: var(--navy-soft); font-size: 16px; }
.printfold-card p + p { margin-top: 10px; }

.printfold-list, .printfold-steps {
  margin: 0;
  padding-left: 22px;
  color: var(--navy-soft);
  font-size: 16px;
}
.printfold-list { list-style: disc; }
.printfold-steps { list-style: decimal; }
.printfold-list li, .printfold-steps li { margin-bottom: 9px; }
.printfold-list li::marker, .printfold-steps li::marker { color: var(--turquoise-dark); font-weight: 700; }
.printfold-steps strong { color: var(--navy); }

.printfold-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--turquoise-tint);
  border-radius: var(--radius-sm, 12px);
  font-size: 15px;
}

.printfold-trouble-title {
  font-size: 24px;
  margin: 40px 0 16px;
}
.printfold-contact {
  margin-top: 26px;
  font-size: 16.5px;
  color: var(--navy-soft);
}
.printfold-contact a { color: var(--coral); font-weight: 700; }

@media (max-width: 900px) {
  .printfold-grid { grid-template-columns: 1fr; }
}

/* Points from the playbook downloads to the print-and-fold guide further down,
   so a parent knows it's there without scrolling to find it. */
.jump-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--turquoise-tint);
  color: var(--turquoise-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.jump-link:hover, .jump-link:focus-visible {
  background: var(--turquoise);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Folding tutorial video ----------
   Filmed vertically but rotated to landscape — it's an overhead shot, so
   turning it loses nothing and the booklet still reads right-side up. */
.fold-video-wrap { margin: 0 0 20px; }
.fold-video-frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--navy);
}
.fold-video { display: block; width: 100%; height: auto; }
.fold-video-title {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--turquoise-dark);
}

/* ============================================================
   Meet the Tools — drag a hospital tool onto its name
   Reuses the shared game shell (.kids-game-topbar / .kids-game-bar /
   .kids-mute-btn / .kids-celebration / .confetti-burst) and the Supply Dash
   how-to dialog (.dash-howto-*) as-is. Only what's specific to this game
   lives here.
   ============================================================ */

/* Screen-reader-only announcements (the aria-live region). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tools-page { background: var(--cream); }

.tools-progress { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.tools-progress-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
}
.tools-progress-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.tools-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--sunny), var(--turquoise));
  transition: width 0.4s ease;
}

/* Two columns on wide screens, stacked on narrow ones. */
.tools-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
.tools-column, .tools-names {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* ---- Tool cards ---- */
.tool-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hit target never drops below 48px, per the accessibility brief. */
  min-height: 108px;
  padding: 12px;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: grab;
  touch-action: none;          /* the drag is ours, not the browser's scroll */
  font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tool-card:hover:not(:disabled) { border-color: var(--turquoise); transform: translateY(-2px); }
.tool-card:focus-visible { outline: 4px solid var(--sky-dark); outline-offset: 3px; }
.tool-card-art { display: block; width: 96px; height: 96px; }
.tool-card-art svg, .tool-card-art img { width: 100%; height: 100%; display: block; object-fit: contain; }

.tool-card.is-selected {
  border-color: var(--coral);
  box-shadow: 0 0 0 5px var(--coral-tint), var(--shadow-pop);
  transform: translateY(-3px) scale(1.03);
  cursor: grabbing;
}
.tool-card.is-dragging {
  z-index: 60;
  cursor: grabbing;
  box-shadow: var(--shadow-pop);
  transition: none;            /* follow the finger exactly */
}
.tool-card.is-matched {
  border-color: var(--grass);
  background: var(--grass-tint);
  cursor: default;
  opacity: 1;
}
.tool-card.is-wrong { animation: tool-drift-back 0.7s ease; }

/* ---- Name cards ---- */
.tool-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 108px;
  padding: 12px 16px;
  text-align: center;
  background: var(--paper);
  border: 3px dashed var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.tool-name:hover:not(:disabled) { border-color: var(--turquoise); }
.tool-name:focus-visible { outline: 4px solid var(--sky-dark); outline-offset: 3px; }
.tool-name-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--navy);
  line-height: 1.2;
}
/* Pronunciation hint stays clearly secondary to the name. */
.tool-name-say {
  font-size: 13px;
  color: var(--navy-soft);
  letter-spacing: 0.02em;
}
/* While a tool is picked up, the drop targets invite it in. */
.tools-names.is-awaiting .tool-name:not(:disabled) {
  border-color: var(--coral);
  background: var(--coral-tint);
}
.tool-name.is-matched {
  border-style: solid;
  border-color: var(--grass);
  background: var(--grass-tint);
  cursor: default;
}
.tool-name.is-nudge { animation: tool-nudge 0.5s ease; }

@keyframes tool-drift-back {
  0%   { transform: translateY(-6px) rotate(-2deg); }
  40%  { transform: translateY(0) rotate(2deg); }
  70%  { transform: translateY(-2px) rotate(-1deg); }
  100% { transform: none; }
}
@keyframes tool-nudge {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.03); }
}

/* ---- Fun fact ---- */
/* The fun fact is the whole point of the game — it is the reward for a match,
   and it is what a five-year-old is meant to read. It gets storybook-sized
   type, not caption-sized.

   It sits ABOVE the board, so it holds its space from the very first paint
   (showing a prompt until there's a fact to tell) rather than growing open and
   shoving the cards down under a kid's finger on every match. */
.tools-fact {
  /* Grid, not flex: the panel's markup is "<strong>Name</strong> fact text",
     and under flex the bare text node becomes a sibling flex item, squeezing
     the name into a narrow column beside it. Grid stacks them as rows, which
     is what the name-above-fact reading order needs. */
  display: grid;
  align-content: center;
  min-height: 140px;
  margin: 0 0 18px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--turquoise-tint);
  color: var(--navy-soft);
  font-size: 24px;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Before the first match, and it shouldn't shout — it's a signpost, not a fact. */
.tools-fact.is-hint {
  justify-items: center;
  background: var(--sunny-tint);
  color: var(--navy-soft);
  font-family: var(--font-display);
  text-align: center;
}
.tools-fact strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 28px;
}

/* ---- Celebration ---- */
.tools-celebration-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.tools-celebration-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 116px;
}
.tools-celebration-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy);
  text-align: center;
}
.tools-celebration-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.tools-howto-note {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--sunny-tint);
  border-radius: var(--radius-sm, 12px);
  font-size: 15.5px;
}

@media (max-width: 760px) {
  .tools-board { grid-template-columns: 1fr; gap: 18px; }
  .tool-card, .tool-name { min-height: 88px; }
  .tool-card-art { width: 72px; height: 72px; }
  /* Bigger type wraps to far more lines on a narrow screen, so the panel needs
     to reserve more height there to stay put as facts change length. 224px
     covers all but the two longest facts, measured at 380px wide; reserving
     for the very longest would eat a third of a phone screen before the game
     even starts, which is a worse trade than one small settle. */
  .tools-fact { font-size: 20px; min-height: 224px; }
  .tools-fact strong { font-size: 23px; }
}

/* A phone held sideways has plenty of width and almost no height, so keep the
   two columns there and trim the card height instead of stacking. */
@media (max-height: 500px) and (min-width: 560px) {
  .tools-board { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tools-column, .tools-names { gap: 10px; }
  .tool-card, .tool-name { min-height: 64px; }
  .tool-card-art { width: 48px; height: 48px; }
  .tool-card-label { font-size: 15px; }
  .tools-fact { font-size: 19px; min-height: 0; padding: 14px 18px; margin-bottom: 12px; }
  .tools-fact strong { font-size: 21px; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the matching feedback, drop the bouncing and drifting. */
  .tool-card, .tool-name, .tools-progress-fill, .tools-fact { transition: none; }
  .tool-card.is-wrong, .tool-name.is-nudge { animation: none; }
  .tool-card:hover:not(:disabled), .tool-card.is-selected { transform: none; }
}

/* ============================================================
   TOOL MEMORY  (tool-memory.html)
   ============================================================ */

.memory-diff-count {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.75;
}

/* The fact panel is the Meet the Tools panel with a shorter reserve — the
   board below it is the main event here, so it takes less of the screen. */
.memory-fact { min-height: 96px; }

/* ---- The board ----
   Cards are sized by the grid from the smaller viewport dimension, never in
   fixed pixels: --memory-cols is set by the JS (4 or 6), each cell is square
   via aspect-ratio, and the whole board is capped by both width and height so
   a 6x6 fits a phone without scrolling. */
.memory-board {
  /* The board is square (rows == cols), so its HEIGHT follows its width. That
     means fitting the screen vertically is a max-width problem:
       min(...)  — never wider than the design cap or the viewport
       - 100dvh  — minus the header above it, so the board fits what's left
       max(...)  — but never smaller than a 44px tap target per column, and if
                   the screen is too short for that, the floor wins and the
                   page scrolls rather than the cards becoming unhittable.
     --memory-chrome is the measured height of everything above the board. */
  --memory-chrome: 470px;
  --memory-floor: 212px;      /* 4 x 44px + 3 x 12px gap */
  display: grid;
  grid-template-columns: repeat(var(--memory-cols, 4), 1fr);
  gap: 12px;
  width: 100%;
  max-width: max(var(--memory-floor), min(1050px, 92vw, calc(100dvh - var(--memory-chrome))));
  margin: 0 auto;
}
.memory-board.is-large {
  --memory-floor: 314px;      /* 6 x 44px + 5 x 10px gap */
  gap: 10px;
  max-width: max(var(--memory-floor), min(1050px, 96vw, calc(100dvh - var(--memory-chrome))));
}

/* dvh is unsupported on older Safari; fall back to vh, which is close enough
   here because the toolbar never overlaps the board. */
@supports not (height: 100dvh) {
  .memory-board { max-width: max(var(--memory-floor), min(1050px, 92vw, calc(100vh - var(--memory-chrome)))); }
  .memory-board.is-large { max-width: max(var(--memory-floor), min(1050px, 96vw, calc(100vh - var(--memory-chrome)))); }
}

.memory-card {
  aspect-ratio: 1 / 1;
  min-width: 0;            /* let grid cells shrink below content width */
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  perspective: 700px;      /* gives the flip real depth */
  -webkit-tap-highlight-color: transparent;
}
.memory-card:focus-visible {
  outline: 3px solid var(--lavender);
  outline-offset: 3px;
}
.memory-card[disabled] { cursor: default; }

/* ---- The 3D flip ----
   A real rotateY on a preserve-3d layer with two back-to-back faces, rather
   than swapping images. Kept at 260ms: long enough to read as a turn, short
   enough that a child tapping quickly never waits on it. */
.memory-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.26s ease;
}
.memory-card.is-face-up .memory-card-inner { transform: rotateY(180deg); }

.memory-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 3px 0 rgba(32, 31, 61, 0.13);
}

/* Card back: Sally waving, on purple. She's the site's mascot and hosts this
   game's How to Play, so every face-down card is her — which also makes the
   board read as one object rather than 36 loose tiles. Her art is white with
   dark outlines, so it holds up against a saturated backdrop. */
.memory-card-back {
  background-color: var(--lavender);
  /* Two layers: Sally on top, a white disc beneath her. The disc is not
     decoration — her artwork is line art with a TRANSPARENT body, so straight
     onto purple she reads as a muddy silhouette. The footer solves it the same
     way, with the logo on a white circle. */
  background-image:
    url("images/logo.png"),
    radial-gradient(circle at 50% 52%, var(--paper) 0 41%, transparent 42%);
  background-repeat: no-repeat, no-repeat;
  background-position: center 52%, center;
  background-size: 58%, 100% 100%;
  border: 2px solid var(--navy);
}
.memory-card-front {
  background: var(--paper);
  border: 2px solid var(--navy);
  transform: rotateY(180deg);
  padding: 12%;
}
.memory-card-front svg,
.memory-card-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- A matched pair ----
   Not colour alone: the pair also dims and carries a check badge, so the
   state survives colour blindness and greyscale printing. */
.memory-card.is-matched .memory-card-front {
  background: var(--grass-tint);
  border-color: var(--grass-dark);
  opacity: 0.72;
}
.memory-card.is-matched .memory-card-inner { animation: memory-found 0.4s ease; }
.memory-card.is-matched .memory-card-front::after {
  content: "✓";
  position: absolute;
  top: 4%;
  right: 7%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 3.4vw, 18px);
  line-height: 1;
  color: var(--grass-dark);
}
@keyframes memory-found {
  0%   { transform: rotateY(180deg) scale(1); }
  45%  { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

.memory-moves {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy-soft);
}

/* ---- Narrow phones ----
   At 320px, six columns only clear a 44px tap target if the gaps and page
   padding tighten, so they do. The card ART shrinks (via the padding on the
   front face); the CARD itself does not go below a tappable size. */
@media (max-width: 560px), (max-height: 500px) {
  /* Gaps tighten here, so the 44px floors come down with them. A phone held
     sideways gets this treatment too: plenty of width, almost no height, and
     the full-size header would eat all of it. */
  .memory-board { gap: 8px; --memory-floor: 200px; }              /* 4 x 44 + 3 x 8 */

  /* Give the board the page's side padding back — 8px a side instead of 24px
     — so six columns can stay above a 44px tap target at 320px. */
  .memory-page .wrap { padding-inline: 8px; }

  /* The board has to be ON SCREEN, not just correctly sized. The shared game
     header stacks vertically below 560px — back link, title, progress, size
     picker, How to Play, mute, instructions — which on a 320x568 phone pushes
     the first row of cards past the fold. So on this page that header is
     compacted: the toolbar stays a wrapping row, and the instruction line is
     dropped because the How to Play dialog opens on entry and says the same
     thing in more detail. */
  .memory-page .kids-game-bar {
    flex-direction: row;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
  }
  .memory-page .kids-game-topbar { margin-bottom: 6px; gap: 4px 12px; }
  .memory-page .dash-instructions { display: none; }
  .memory-page .dash-toolbar { gap: 6px; }
  .memory-page .memory-diff-count { display: none; }
  .memory-page .kids-game-title { font-size: 19px; }
  .memory-page .kids-back-link { padding: 8px 14px; font-size: 15px; }
  .memory-page .kids-back-link svg { width: 20px; height: 20px; }
  .memory-page .tools-progress { flex: 1 1 100%; }
  .memory-fact { min-height: 64px; font-size: 16px; padding: 10px 14px; }
  .memory-fact strong { font-size: 18px; margin-bottom: 2px; }
  .memory-board { --memory-chrome: 330px; }

  /* At 320px this leaves (320 - 16 - 5x4) / 6 = 47px cards. The ART shrinks
     via the face padding; the CARD does not go below a tappable size. */
  .memory-board.is-large { gap: 4px; --memory-floor: 284px; }     /* 6 x 44 + 5 x 4 */
  .memory-board.is-large .memory-card-front { padding: 8%; }
}

/* ---- Short landscape ----
   Six rows cannot fit above a 44px tap target in a phone held sideways.
   Rather than shrink the cards below what a child can reliably hit, the board
   scrolls and the game bar stays put. 4x4 still fits, so only .is-large gets
   this treatment. */
@media (max-height: 500px) and (min-width: 560px) {
  .memory-board.is-large {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
    /* +4px so the scroll gutter above comes out of the board's width rather
       than out of the cards, which would put them under 44px. */
    --memory-floor: 288px;
  }
  .memory-fact { min-height: 0; padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Cross-fade instead of rotating, at the same timing — the card still reads
     as turning over, without the motion. */
  .memory-card-inner { transition: none; }
  .memory-card.is-face-up .memory-card-inner { transform: none; }
  .memory-card-face { backface-visibility: visible; transition: opacity 0.26s ease; }
  .memory-card-front { transform: none; opacity: 0; }
  .memory-card.is-face-up .memory-card-front { opacity: 1; }
  .memory-card.is-face-up .memory-card-back { opacity: 0; }
  .memory-card.is-matched .memory-card-inner { animation: none; }
  .memory-card.is-matched .memory-card-front { transform: none; }
}

/* ---- The stage: the fact panel, then the board ----
   The board comes first in the markup, so the panel is pulled above it here.
   The panel is the reward for a match and has to be where the child is
   already looking. */
.memory-stage { display: flex; flex-direction: column; }
.memory-stage .memory-fact { order: -1; }
.memory-stage .memory-board { margin-inline: auto; }

/* ---- Give the board the height back ----
   Every pixel above the board is a pixel the board cannot use: it is square
   and capped by the height left under the header, so trimming the chrome is
   the only way to make the tiles bigger while keeping all 36 on screen.
   The instruction line goes because How to Play opens on entry and says the
   same thing, in more detail, in Sally's voice. */
@media (min-height: 600px) {
  .memory-page .kids-game-topbar { margin-bottom: 6px; }
  .memory-page .kids-game-bar { margin-top: 12px; }
  .memory-page .dash-instructions { display: none; }
  .memory-page .memory-fact { min-height: 76px; margin-bottom: 12px; }
}