/* ==========================================================================
   Talyzo.in — shared stylesheet
   Sections:
     1. Design tokens (:root)
     2. Reset & base
     3. Typography helpers
     4. Layout primitives (.container, .section, grids)
     5. Section theme classes (color-rule enforcement)
     6. Buttons
     7. Header / nav
     8. Hero
     9. Cards & components (features, steps, adventures, crew, letters, courses)
    10. Lead magnet & forms
    11. Pricing
    12. Final CTA
    13. Footer
    14. Lead page (mini-adventure.html) & stub pages
    15. Motion (reveal, bob, float) + reduced-motion
    16. Responsive breakpoints (768 / 1024 / 1440)
   Color rules are structural: cyan only appears inside .section--dark /
   .section--gradient; amber CTAs always carry navy text; adventure accents
   live only on .adventure-card.
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */
:root {
  /* core palette */
  --cyan: #00D4FF;          /* dark backgrounds only */
  --amber: #FFB800;         /* primary CTA fill (navy text on it) */
  --amber-deep: #946A00;    /* amber legible AS TEXT on light bg — 4.59:1 on cream, 4.86:1 on
                               white, both clear WCAG AA. (--amber itself is only 1.64:1 on
                               cream: it is a fill colour, never a text colour.) */
  --purple: #6C3CE1;        /* secondary buttons, headings, accents */
  --navy: #0F0F2E;          /* dark sections + body text on light */
  --cream: #FFF8E7;         /* light bg + text on dark */
  --light-purple: #F5F0FF;  /* secondary light bg */
  --ink: #0F0F2E;           /* body text on light */
  --ink-soft: #3A3A55;      /* muted text on light */
  --on-dark: #FFF8E7;       /* body text on dark */
  --on-dark-soft: #C7C7DA;  /* muted text on dark */

  /* adventure accents (ONLY on .adventure-card) */
  --teal: #00BFA5;
  --pink: #E040FB;
  --green: #43A047;
  --soft-red: #EF5350;

  /* surfaces & shape */
  --radius-sm: 16px;
  --radius: 20px;
  --radius-lg: 24px;
  --pill: 999px;
  --shadow-soft: 0 12px 32px rgba(15, 15, 46, .12);
  --shadow-lift: 0 20px 44px rgba(15, 15, 46, .18);
  --shadow-dark: 0 12px 40px rgba(0, 0, 0, .35);

  /* rhythm */
  --container: 1200px;
  --container-wide: 1320px;
  --section-pad: clamp(56px, 9vw, 104px);
  --gap: clamp(18px, 3vw, 32px);

  /* type */
  --font-head: 'Fredoka', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Nunito Sans', system-ui, 'Segoe UI', sans-serif;

  /* motion */
  --ease-lift: cubic-bezier(.2, .7, .3, 1);
  --header-h: 70px;
}

/* 2. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 600; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
.section--dark :focus-visible, .site-header :focus-visible { outline-color: var(--cyan); }

/* 3. TYPOGRAPHY HELPERS ==================================================== */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--purple);
}
.section--dark .eyebrow, .section--gradient .eyebrow { color: var(--cyan); }
.lead { font-size: clamp(1.02rem, 2.2vw, 1.22rem); }
.muted { color: var(--ink-soft); }
.section--dark .muted, .section--gradient .muted { color: var(--on-dark-soft); }
.center { text-align: center; }
.max-narrow { max-width: 760px; margin-inline: auto; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 1.6em; }
section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* 4. LAYOUT PRIMITIVES ===================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 40px);
}
.section { padding-block: var(--section-pad); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { margin-top: .35em; }
.section-head .lead { margin-top: .7em; }
/* A .section-head that carries the PAGE title uses <h1> (play.html — every page
   needs exactly one h1, and that one had none at all). It keeps the h2's size
   and spacing on purpose: the element's rank changed, the design did not. Colour
   comes from the .section--light/.section--lp rules further down. */
.section-head h1 { margin-top: .35em; font-size: clamp(1.7rem, 4.4vw, 2.7rem); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* 5. SECTION THEME CLASSES (color-rule enforcement) ======================== */
.section--light { background: var(--cream); color: var(--ink); }
.section--lp { background: var(--light-purple); color: var(--ink); }
.section--dark { background: var(--navy); color: var(--on-dark); }
.section--gradient {
  background: linear-gradient(155deg, var(--navy) 0%, #1a1350 48%, var(--purple) 130%);
  color: var(--on-dark);
}
.section--dark h1, .section--gradient h1,
.section--dark h2, .section--gradient h2,
.section--dark h3, .section--gradient h3 { color: var(--cream); }
.section--light .section-head h1, .section--lp .section-head h1,
.section--light h2, .section--lp h2 { color: var(--purple); }

/* faint math graph-paper texture on the light sections (soft depth, not clutter) */
.section--light, .section--lp {
  background-image:
    linear-gradient(rgba(15, 15, 46, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 46, .04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* soft organic wave dividers on the dark bands */
.section--dark { position: relative; overflow: hidden; }
.section--dark > .container { position: relative; z-index: 2; }
.section-wave { position: absolute; left: 0; width: 100%; height: clamp(24px, 3.5vw, 46px); z-index: 1; display: block; pointer-events: none; }
.section-wave path { fill: var(--cream); }
.section-wave--top { top: -1px; transform: scaleY(-1); }
.section-wave--bottom { bottom: -1px; }

/* 6. BUTTONS =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  padding: .92em 1.7em;
  border-radius: var(--pill);
  transition: transform .25s var(--ease-lift), box-shadow .25s var(--ease-lift), background-color .2s;
  will-change: transform;
}
.btn-primary { background: var(--amber); color: var(--navy); box-shadow: 0 8px 22px rgba(255, 184, 0, .32); }
.btn-primary:hover { background: #ffc733; }
.btn-secondary { background: var(--purple); color: #fff; box-shadow: 0 8px 22px rgba(108, 60, 225, .28); }
.btn-secondary:hover { background: #7d50e8; }
.btn-ghost { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); }
.btn-ghost:hover { background: rgba(0, 212, 255, .12); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-lg { font-size: 1.12rem; padding: 1.05em 2.1em; }

/* 7. HEADER / NAV ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 32px; width: auto; }
.site-header.scrolled { box-shadow: var(--shadow-dark); }

/* transparent-over-hero on the homepage, solid once scrolled */
body.home .site-header { background: transparent; }
body.home .site-header.scrolled { background: var(--navy); }

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
}
.hamburger span { display: block; height: 2.5px; width: 100%; background: var(--cream); border-radius: 2px; transition: transform .25s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.nav-links a {
  font-weight: 700;
  font-size: .98rem;
  color: var(--on-dark);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--cyan); border-color: var(--cyan); }
.nav-cta { white-space: nowrap; }

/* default (no-JS, mobile): nav is visible & stacked so every link is reachable */
@media (max-width: 767px) {
  .primary-nav { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; padding: 8px 0 18px; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding: 12px 4px; border-bottom: 1px solid rgba(199, 199, 218, .18); }
  .nav-cta { margin-top: 10px; }
}

/* JS enhancement: collapse the mobile menu behind the hamburger */
html.js-enabled .hamburger { display: inline-flex; }
@media (max-width: 767px) {
  html.js-enabled .header-inner { flex-wrap: wrap; }
  html.js-enabled .primary-nav {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: max-height .32s var(--ease-lift), opacity .25s, padding .25s;
  }
  html.js-enabled .primary-nav.open { max-height: 460px; opacity: 1; padding: 4px 0 18px; }
}

/* 8. HERO ================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, #1a1350 46%, #3a1f7a 100%);
  color: var(--on-dark);
  /* pull content up under the transparent header */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(28px, 6vw, 72px));
  padding-bottom: clamp(40px, 8vw, 96px);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hero h1 { color: var(--cream); }
/* The brand tagline moved from <h1> to a kicker so the H1 could carry the search
   keyword — but it stays the hero's emotional lead, so it is styled up, not down:
   amber, Fredoka, sat right above the headline. */
.hero-kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  letter-spacing: .01em;
  color: var(--amber);
  margin-top: 0;
  margin-bottom: .4em;
  text-shadow: 0 2px 14px rgba(255, 184, 0, .28);
}
.hero-content p { margin-top: 1em; max-width: 52ch; }
.hero-kicker { margin-top: 0; }
.hero-sub { font-size: clamp(1.02rem, 2.2vw, 1.22rem); color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.7em; }
.hero-mascot { justify-self: center; }
.hero-mascot img { width: min(82vw, 420px); height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .4)); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  padding: .5em 1.1em;
  border-radius: var(--pill);
  background: rgba(0, 212, 255, .12);
  color: var(--cyan);
  border: 1px solid rgba(0, 212, 255, .4);
  margin-top: 1.6em;
}
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.pills .pill { margin-top: 0; }
.pill--amber { background: rgba(255, 184, 0, .14); color: var(--amber); border-color: rgba(255, 184, 0, .45); }

/* hero decoration: twinkling 5-point stars + a couple of soft depth orbs */
.stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* soft glow orbs — kept low and to the edges, just for depth */
.orb { position: absolute; border-radius: 50%; opacity: .3; filter: blur(2px); animation: drift 12s ease-in-out infinite; }
.orb--cyan { background: radial-gradient(circle, var(--cyan), transparent 70%); }
.orb--amber { background: radial-gradient(circle, var(--amber), transparent 70%); }
.orb.o1 { width: 150px; height: 150px; top: 14%; right: 7%; }
.orb.o2 { width: 90px; height: 90px; bottom: 12%; left: 5%; animation-delay: 1.6s; }

/* twinkling five-point stars (echo the Talyzo logo + mascot sparkle) */
.spark {
  position: absolute;
  width: var(--s, 16px);
  height: var(--s, 16px);
  background: var(--c, var(--cyan));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .8;
  filter: drop-shadow(0 0 5px var(--c, var(--cyan)));
  animation: twinkle 3.4s ease-in-out infinite;
}
.spark--amber { --c: var(--amber); }
.spark--cream { --c: var(--cream); }
.spark.k1 { --s: 20px; top: 13%; left: 8%;  animation-delay: 0s; }
.spark.k2 { --s: 12px; top: 12%; left: 52%; animation-delay: .7s; }
.spark.k3 { --s: 22px; top: 30%; right: 33%; animation-delay: 1.2s; }
.spark.k4 { --s: 11px; top: 58%; right: 38%; animation-delay: .4s; }
.spark.k5 { --s: 16px; top: 24%; right: 13%; animation-delay: 1.0s; }
.spark.k6 { --s: 13px; top: 72%; right: 19%; animation-delay: 1.9s; }
.spark.k7 { --s: 9px;  top: 80%; left: 46%; animation-delay: .5s; }

/* ringed planet — a defined version of the glow orb, ties to "13 worlds" */
.planet { position: absolute; border-radius: 50%; opacity: .55; animation: drift 16s ease-in-out infinite; }
.planet::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 170%; height: 48%;
  transform: translate(-50%, -50%) rotate(-24deg);
  border: 2px solid var(--ring, rgba(0, 212, 255, .5));
  border-radius: 50%;
}
.planet.p1 {
  width: 74px; height: 74px; top: 15%; right: 9%;
  background: radial-gradient(circle at 34% 30%, #7b66f0, #43368f 58%, #271f57);
  box-shadow: 0 0 26px rgba(123, 102, 240, .35);
  --ring: rgba(0, 212, 255, .5);
}

/* faint outline math operators */
.glyph {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--c, var(--cyan));
  opacity: .4;
  animation: floaty 7.5s ease-in-out infinite;
}
.glyph--amber { --c: var(--amber); }
.glyph--cream { --c: var(--cream); }
.glyph.g1 { font-size: 2.3rem; top: 10%; left: 38%;  animation-delay: 0s; }
.glyph.g2 { font-size: 1.8rem; top: 19%; right: 30%; animation-delay: 1.2s; }
.glyph.g3 { font-size: 2.6rem; top: 63%; right: 40%; animation-delay: .6s; }
.glyph.g4 { font-size: 2rem;   top: 82%; left: 55%;  animation-delay: 1.8s; }

@media (max-width: 767px) {
  .spark.k4, .spark.k6, .glyph.g3, .glyph.g4 { display: none; }  /* thin out on small screens */
}

/* 9. CARDS & COMPONENTS ==================================================== */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 3vw, 32px);
  height: 100%;
}
.card--hover { transition: transform .28s var(--ease-lift), box-shadow .28s var(--ease-lift); }
.card--hover:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lift); }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 1.7rem;
  border-radius: 16px;
  background: var(--light-purple);
  margin-bottom: 16px;
}
.feature-card { display: flex; flex-direction: column; justify-content: flex-start; }
.feature-card h3 { margin-bottom: .4em; }
.feature-card p { color: var(--ink-soft); }

/* numbered steps */
.step { position: relative; padding-top: 8px; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(108, 60, 225, .3);
}
.step h3 { margin-bottom: .35em; }
.step p { color: var(--ink-soft); }
.how-mascot { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.how-mascot img { width: min(58vw, 280px); margin-inline: auto; }

/* adventures grid (dark section) */
.adventures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
.adventure-card {
  --ac: var(--cyan);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(158deg, color-mix(in srgb, var(--ac) 20%, transparent), color-mix(in srgb, var(--ac) 6%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--ac) 42%, transparent);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 24px);
  transition: transform .26s var(--ease-lift), box-shadow .26s var(--ease-lift), border-color .26s, background .26s;
  height: 100%;
}
.adventure-card:hover {
  transform: translateY(-6px);
  border-color: var(--ac);
  background: linear-gradient(158deg, color-mix(in srgb, var(--ac) 30%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
  box-shadow: 0 0 0 1px var(--ac), 0 18px 40px color-mix(in srgb, var(--ac) 32%, transparent);
}
.adv-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: color-mix(in srgb, var(--ac) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 34%, transparent);
  font-size: 1.55rem; line-height: 1; margin-bottom: 9px;
}
.adv-index {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ac) 68%, var(--cream));
  margin-top: 2px;
}
.adv-name { font-family: var(--font-head); font-weight: 700; color: var(--cream); margin-top: 1px; font-size: 1.1rem; line-height: 1.15; }
.adv-goal { color: var(--on-dark-soft); font-size: .82rem; line-height: 1.35; margin-top: 6px; }
.adv-fig {
  position: absolute; right: 12px; bottom: -10px; z-index: -1; pointer-events: none;
  font-family: var(--font-head); font-weight: 700; font-size: 3.6rem; line-height: 1;
  color: color-mix(in srgb, var(--ac) 24%, transparent);
}
.adv-start {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: .62rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); background: color-mix(in srgb, var(--ac) 88%, white);
  padding: 4px 9px; border-radius: var(--pill);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ac) 40%, transparent);
}
.theme-tag {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
  color: color-mix(in srgb, var(--ac) 52%, var(--cream));
  font-size: .75rem;
  font-weight: 700;
}
.theme-tag::before {
  content: "Science";
  margin-right: 6px;
  padding-right: 7px;
  border-right: 1px solid color-mix(in srgb, var(--ac) 32%, transparent);
  font-size: .82em;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
/* theme-matched accent per world (World 1 → 13) */
.adventure-card:nth-child(1)  { --ac: #4CAF50; } /* Plants & Animals — green   */
.adventure-card:nth-child(2)  { --ac: #FF5A5F; } /* Food — warm red            */
.adventure-card:nth-child(3)  { --ac: #E256E0; } /* Insects — magenta          */
.adventure-card:nth-child(4)  { --ac: #FFB300; } /* Festivals — gold           */
.adventure-card:nth-child(5)  { --ac: #35D08A; } /* Garden — fresh green        */
.adventure-card:nth-child(6)  { --ac: #FF9F43; } /* Transport — orange         */
.adventure-card:nth-child(7)  { --ac: #5B9CFF; } /* Space — blue               */
.adventure-card:nth-child(8)  { --ac: #FF7A66; } /* Community — coral          */
.adventure-card:nth-child(9)  { --ac: #D2925C; } /* Housing — terracotta       */
.adventure-card:nth-child(10) { --ac: #22D3EE; } /* Air, Water & Rocks — aqua  */
.adventure-card:nth-child(11) { --ac: #2BC4A8; } /* Good Habits — teal         */
.adventure-card:nth-child(12) { --ac: #A97BFF; } /* Folktales — violet         */
.adventure-card:nth-child(13) { --ac: #FF5C7A; } /* Human Body — rose          */

/* Class 2 — available now (live course card + expandable worlds) */
.class2-live {
  max-width: 780px;
  margin-inline: auto;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.class2-cover {
  aspect-ratio: 2 / 1;
  background: linear-gradient(160deg, #eaf3ff, #fff);
}
/* The cover is now a <picture> (WebP + PNG fallback). The global rule gives
   picture `height: auto`, which would leave the img's `height: 100%` resolving
   against nothing and break the 2/1 crop — so the wrapper is told to fill the
   aspect-ratio box, and the img crops inside it exactly as before. */
.class2-cover picture { width: 100%; height: 100%; }
.class2-cover img { width: 100%; height: 100%; object-fit: cover; }
.class2-panel {
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.class2-panel .btn { margin-top: 6px; }
.class2-note { color: var(--ink-soft); font-size: .86rem; }
.class2-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 2px; }
.price-now { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; color: var(--ink); line-height: 1; }
.price-was { font-size: 1.1rem; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.price-save { align-self: center; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #1b7a3d; background: #e4f6ea; padding: 5px 11px; border-radius: var(--pill); }

/* expandable "13 worlds" disclosure (sits inside the dark Class 2 section) */
.worlds-reveal { margin-top: clamp(30px, 5vw, 52px); }
.worlds-heading { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: clamp(1.2rem, 3vw, 1.6rem); text-align: center; }
.worlds-intro { max-width: 820px; margin: .5em auto clamp(18px, 2.8vw, 26px); text-align: center; }
/* JS collapses the grid to the first 3 worlds; no-JS shows all 13 */
.adventures-grid.is-collapsed .adventure-card:nth-child(n+4) { display: none; }
.worlds-toggle-wrap { margin-top: clamp(20px, 3vw, 30px); text-align: center; }
.worlds-toggle-btn { cursor: pointer; }
/* center the lone 13th world in the 3-column layout */
@media (min-width: 768px) { .adventures-grid .adventure-card:nth-child(13) { grid-column: 2; } }

/* Olympiad trust strip (under hero) + coverage section */
.olympiad-strip { background: var(--light-purple); border-top: 1px solid #e7e0f7; border-bottom: 1px solid #e7e0f7; }
.olympiad-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 13px 0; text-align: center; }
.olympiad-strip__lead { font-family: var(--font-head); font-weight: 600; color: var(--purple); font-size: .95rem; }
.olympiad-strip__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.olympiad-strip__names b { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .03em; color: var(--ink); background: #fff; border: 1px solid #e0d8f2; border-radius: var(--pill); padding: 4px 11px; }
.olympiad-strip__inner:hover .olympiad-strip__lead { text-decoration: underline; }

.olympiad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 18px); margin-bottom: clamp(30px, 4.5vw, 50px); }
.olympiad-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; min-height: 96px;
  padding: clamp(16px, 2.4vw, 22px);
  background: #fff; border: 1.5px solid #e7e0f7; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: transform .22s var(--ease-lift), box-shadow .22s var(--ease-lift), border-color .22s;
}
.olympiad-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-lift); }
.oly-acr { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.12rem, 2.6vw, 1.4rem); color: var(--purple); }
.oly-name { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; }
.oly-name:empty { display: none; }
.olympiad-benefits { margin-top: clamp(6px, 1.5vw, 12px); }
.olympiad-disclaimer { text-align: center; color: var(--ink-soft); font-size: .8rem; max-width: 840px; margin: clamp(28px, 4vw, 42px) auto 0; line-height: 1.5; }
@media (min-width: 768px) { .olympiad-grid { grid-template-columns: repeat(3, 1fr); } }

/* meet the crew */
.crew-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.character-card { overflow: hidden; text-align: center; padding: 0; }
.char-media { background: #fff; aspect-ratio: 16 / 10; overflow: hidden; }
.char-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.char-media--mascot { display: grid; place-items: center; background: linear-gradient(160deg, #efe7ff, #fff); padding: 18px; }
.char-media--mascot img { width: auto; max-height: 180px; object-fit: contain; }
.char-body { padding: 22px clamp(18px, 3vw, 26px) 28px; }
.char-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.char-name span { font-size: .92rem; font-weight: 600; color: var(--purple); }
.char-bio { color: var(--ink-soft); margin-top: .45em; }

/* TALYZO letter blocks */
.letters-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 26px); }
.letter-block {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.letter {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--amber);
  flex: none;
}
.letter-word { font-family: var(--font-head); font-weight: 600; color: var(--cream); font-size: 1.18rem; }
.letter-line { color: var(--on-dark-soft); margin-top: .3em; font-size: .96rem; }

/* course preview cards */
.course-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.course-card { display: flex; flex-direction: column; gap: 6px; }
.course-emoji { font-size: 1.6rem; }
.course-card h3 { font-size: 1.08rem; }
.course-card p { color: var(--ink-soft); font-size: .96rem; flex: 1; }
.course-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: var(--purple);
  margin-top: 6px;
}
.course-link:hover { color: #8a5cff; }

/* classes catalog — Class 2 live, others coming soon */
.classes-wrap { display: grid; gap: 24px; max-width: 720px; margin-inline: auto; }
.class-card--live {
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(26px, 4vw, 42px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.class-badge {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--amber);
  padding: 5px 15px;
  border-radius: var(--pill);
  box-shadow: 0 6px 16px rgba(255, 184, 0, .4);
}
.class-num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--purple); line-height: 1; }
.class-meta { color: var(--ink-soft); max-width: 46ch; }
.class-card--live .btn { margin-top: 6px; }

.classes-soon { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.class-chip {
  text-align: center;
  font-family: var(--font-head);
  background: #fff;
  border: 1.5px dashed #d6cdee;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 12px 20px;
  min-width: 96px;
}
.class-chip b { display: block; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.class-chip span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--purple); margin-top: 3px; }
a.class-chip { transition: transform .2s var(--ease-lift), box-shadow .2s; }
a.class-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.class-chip--live { border-style: solid; border-color: var(--amber); background: #fffdf4; }
.class-chip--live b { color: var(--navy); }
.class-chip--live span { color: #a15c00; }

/* 10. LEAD MAGNET & FORMS ================================================== */
.lead-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.lead-list { margin-top: 1.3em; display: grid; gap: 10px; }
.lead-list li { position: relative; padding-left: 30px; color: var(--ink); }
.lead-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(24px, 3.5vw, 38px); }
.form-card h3 { margin-bottom: 1.1em; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.form-field input, .form-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #d9d4ea;
  border-radius: 14px;
  background: #fcfbff;
  transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, .15);
}
/* immediate, on-brand error feedback once a field has been interacted with */
.form-field input:user-invalid, .form-field textarea:user-invalid {
  border-color: var(--soft-red);
  box-shadow: 0 0 0 3px rgba(239, 83, 80, .18);
}
.form-note { font-size: .84rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.form-embed { display: flex; flex-direction: column; align-items: center; }
.form-embed iframe { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }

/* 11. PRICING ============================================================== */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: stretch; max-width: 680px; margin-inline: auto; }
.tier-card .class2-price { margin: .15em 0 1.1em; }
.tier-card { display: flex; flex-direction: column; text-align: center; position: relative; }
.tier-card--popular { border: 2px solid var(--amber); box-shadow: var(--shadow-lift); }
.ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--pill);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255, 184, 0, .4);
}
.tier-name { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; margin-bottom: .4em; }
.tier-value { color: var(--ink-soft); flex: 1; margin-bottom: 1.3em; }
.tier-sub { font-family: var(--font-head); font-weight: 700; color: var(--purple); font-size: .95rem; margin: -.4em 0 1.1em; }
.tier-feats { flex: 1; margin: 0 auto 1.4em; max-width: 17em; text-align: left; }
.pricing-note { text-align: center; color: var(--ink-soft); margin-top: 26px; font-size: .94rem; }

/* FAQ accordion */
.faq-list { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1.5px solid #e7e0f7; border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; transition: background-color .25s var(--ease-lift), border-color .25s var(--ease-lift); }
/* open answer: a very soft indigo wash so a parent sees exactly which one is expanded
   (brand tokens only — same --light-purple fill + purple border used elsewhere) */
.faq-item[open] { background: var(--light-purple); border-color: rgba(108, 60, 225, .28); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(15px, 2.4vw, 21px) clamp(18px, 3vw, 24px);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--purple);
  border-bottom: 2.5px solid var(--purple);
  transform: rotate(45deg);
  transition: transform .25s var(--ease-lift);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item summary:hover { color: var(--purple); }
.faq-answer { padding: 0 clamp(18px, 3vw, 24px) clamp(15px, 2.4vw, 20px); }
.faq-answer p { color: var(--ink-soft); }
.faq-answer a { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* 12. FINAL CTA =========================================================== */
.cta-final { text-align: center; position: relative; overflow: hidden; }
.cta-final h2 { color: var(--cream); }
.cta-final p { margin-top: .8em; }
.cta-final .btn { margin-top: 1.8em; }
.cta-mascot { margin: 26px auto 0; }
.cta-mascot img { width: min(75vw, 360px); margin-inline: auto; }

/* 13. FOOTER ============================================================== */
.site-footer { background: var(--navy); color: var(--on-dark); padding-block: clamp(48px, 7vw, 80px) 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
.footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--on-dark-soft); max-width: 32ch; }
.footer-col h4 { font-family: var(--font-head); font-weight: 600; color: var(--cream); font-size: 1rem; margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--cyan); font-size: .96rem; transition: color .2s; }
.footer-col a:hover { color: var(--amber); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 16px;
  padding: .55em 1em;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--on-dark-soft);
  font-size: .85rem;
  font-weight: 600;
}
.footer-muted-link { color: var(--on-dark-soft) !important; cursor: default; }
/* badge variant for light/cream surfaces (the dark .badge is for the footer) */
.badge--light { background: var(--light-purple); color: var(--purple); border-color: rgba(108, 60, 225, .28); }
/* (.app-soon removed with the "Android app coming soon" footer badge — the class
   had no other user. The app is still announced on download-app.html and in the
   homepage FAQ.) */

/* Social row (footer brand column) ---------------------------------------- */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;                       /* comfortable tap target, still compact */
  border-radius: 50%;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease-lift);
}
.footer-social a:hover {
  color: var(--navy);
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-2px);
}
.footer-social svg { display: block; }

/* floating WhatsApp contact button (fixed; on every page) */
.wa-float {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
  transition: transform .2s var(--ease-lift), box-shadow .2s;
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(37, 211, 102, .55); }
/* Reaching the button ends the attention pulse, so its animated box-shadow never
   suppresses the hover/focus shadow above. */
.wa-float:hover, .wa-float:focus-visible { animation: none; }
/* Hidden only while the fullscreen demo overlay is open (so the green button never
   floats on top of the game). Otherwise the button stays visible at all times. */
body.demo-fs-open .wa-float { opacity: 0; pointer-events: none; visibility: hidden; }

/* CSS-only hover/focus tooltip, sitting to the LEFT of the right-anchored button.
   Visible text comes from data-tip (attr()) so a screen reader announces only the
   existing aria-label — never a duplicate. .wa-float is position:fixed, so it is
   the containing block for these absolutely-positioned pseudo-elements (and being
   absolute keeps them out of the button's flex flow, so the icon stays centred). */
.wa-float::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 14px);                    /* to the LEFT of the button */
  top: 50%;
  transform: translateY(-50%) translateX(8px); /* start nudged right, slide left in */
  white-space: nowrap;                         /* stay on one clean line */
  max-width: min(15rem, calc(100vw - 92px));   /* never overflow the viewport */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .6em .95em;
  border-radius: var(--pill);
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.1;
  box-shadow: 0 8px 22px rgba(15, 15, 46, .28);
  opacity: 0;
  pointer-events: none;                        /* tooltip never eats the tap */
  transition: opacity .22s var(--ease-lift), transform .22s var(--ease-lift);
}
/* little caret pointing at the button */
.wa-float::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  border: 6px solid transparent;
  border-left-color: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease-lift), transform .22s var(--ease-lift);
}
.wa-float:hover::after,
.wa-float:focus-visible::after,
.wa-float:hover::before,
.wa-float:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);   /* fade + slide in */
}

/* Tasteful, finite attention pulse on load — an expanding green ring layered over the
   button's own shadow. Motion is opt-in: it runs only when the user allows motion. */
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-pulse 2.2s var(--ease-lift) 1s 3; }   /* 1s delay, 3 rings, then rests */
  @keyframes wa-pulse {
    0%   { box-shadow: 0 8px 22px rgba(37, 211, 102, .45), 0 0 0 0    rgba(37, 211, 102, .45); }
    70%  { box-shadow: 0 8px 22px rgba(37, 211, 102, .45), 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 22px rgba(37, 211, 102, .45), 0 0 0 0    rgba(37, 211, 102, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::after,
  .wa-float::before { transition: opacity .18s; }        /* keep a gentle fade, drop the slide */
  .wa-float:hover::after,
  .wa-float:focus-visible::after,
  .wa-float:hover::before,
  .wa-float:focus-visible::before { transform: translateY(-50%); }
}
/* keep the fixed WhatsApp button clear of page-bottom footer content on small phones */
@media (max-width: 560px) { .site-footer { padding-bottom: 88px; } }
.footer-bottom {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  color: var(--on-dark-soft);
  font-size: .9rem;
}

/* 14. LEAD PAGE (mini-adventure.html) & STUBS ============================== */
/* minimal header variant */
.site-header--minimal .header-inner { justify-content: space-between; }

.lp-hero { background: var(--light-purple); }
.lp-hero .hero-inner { grid-template-columns: 1fr; }
.lp-hero h1 { color: var(--purple); }
.lp-hero p { color: var(--ink); margin-top: 1em; max-width: 54ch; }
.lp-mascot img { width: min(70vw, 320px); margin-inline: auto; }

/* Mini-Adventure comic preview (lead-magnet hero + homepage teaser) — framed and
   very slightly tilted so it reads like a page lifted out of the book. */
.lp-preview { display: flex; justify-content: center; }
.mini-preview {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--radius-lg);
  border: 5px solid #fff;
  background: #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.5deg);
  transition: transform .3s var(--ease-lift);
}
.mini-preview:hover { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .mini-preview { transform: none; transition: none; }
}

.whats-inside .check-list { display: grid; gap: 14px; max-width: 640px; margin-inline: auto; }
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
}
.check-item .tick {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
}
.trust-line { text-align: center; color: var(--ink-soft); margin-top: 28px; }

/* Lead-magnet area (mini-adventure.html): Brevo-hosted form widget + WhatsApp CTA. */
.lead-form-wrap { max-width: 540px; width: 100%; margin-inline: auto; }
.lead-embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

/* WhatsApp alternative */
.lead-form__alt { display: grid; gap: 12px; margin-top: 18px; text-align: center; }
.lead-form__or {
  color: var(--ink-soft); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.lead-form__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  border-radius: var(--pill);
  background: #25D366; color: #fff;
  font-family: var(--font-head); font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .3);
  transition: transform .2s var(--ease-lift), box-shadow .2s;
}
.lead-form__wa:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 211, 102, .42); }
.lead-form__wa svg { flex: none; }

.stub { min-height: 56vh; display: grid; place-items: center; text-align: center; }
.stub-inner { max-width: 640px; }
.stub-inner h1 { color: var(--purple); }
.stub-inner p { margin-top: 1em; color: var(--ink-soft); }
.stub-inner .stub-form { margin-top: 2em; text-align: left; }
.faq { text-align: left; margin-top: 1.8em; display: grid; gap: 16px; }
.faq dt { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.faq dd { color: var(--ink-soft); margin-top: 4px; }
.back-home {
  display: inline-block;
  margin-top: 2em;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--purple);
}
.back-home:hover { color: #8a5cff; }
.inline-link { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* long-form content pages (about, policies, support, marketing) */
.page { background: var(--cream); }
.page-inner { max-width: 760px; margin-inline: auto; padding-block: clamp(44px, 7vw, 84px); }
.prose { color: #26263c; }
.prose h1 { color: var(--purple); }
.prose h2 { color: var(--purple); font-size: clamp(1.3rem, 2.8vw, 1.6rem); margin-top: 1.8em; }
.prose h3 { color: var(--ink); font-size: 1.12rem; margin-top: 1.35em; }
.prose p { margin-top: 1em; }
.prose ul, .prose ol { margin-top: 1em; padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--purple); }
.prose a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #8a5cff; }
/* A .btn inside .prose is a button, not body text — it must keep its own fill and
   label colour, never the purple-underline link styling above. Without this an
   amber CTA renders as underlined purple text, and a purple secondary button
   renders purple-on-purple (its label vanishes). Specificity (0,2,1) beats the
   .prose a rule (0,1,1). */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: var(--navy); }
.prose a.btn-secondary { color: #fff; }
.prose a.btn-ghost { color: var(--cyan); }
.prose a.btn:hover { color: var(--navy); }
.prose a.btn-secondary:hover { color: #fff; }
.prose a.btn-ghost:hover { color: var(--cyan); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .lead { color: var(--ink); font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
.prose .updated { color: var(--ink-soft); font-size: .92rem; margin-top: .3em; }
.prose hr { border: 0; border-top: 1px solid #e7dfcd; margin: 2.2em 0; }
.prose .page-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
.prose .form-card { margin-top: 1.4em; }
.prose .contact-meta { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 20px 24px; margin-top: 1.4em; }
.prose .contact-meta p { margin-top: .2em; }
/* Pre-purchase WhatsApp nudge (support / contact) — a soft indigo callout that
   uses the same tokens as the FAQ open-state, so it reads as part of the system. */
.prose .pre-purchase {
  background: var(--light-purple);
  border: 1px solid rgba(108, 60, 225, .28);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

/* 15. MOTION ============================================================== */
/* Reveal hides content only when JS is active, so no-JS users always see it. */
html.js-enabled .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-lift), transform .7s var(--ease-lift); }
html.js-enabled .reveal.is-visible { opacity: 1; transform: none; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); opacity: .3; }
  50% { transform: translate(10px, -18px); opacity: .5; }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(18deg); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .35; }
  50% { transform: translateY(-12px) rotate(6deg); opacity: .55; }
}
.bob { animation: bob 4.5s ease-in-out infinite; }
.bob--slow { animation-duration: 6s; }

/* mascot hover micro-animations — characters react when engaged */
@keyframes wiggle {
  0%   { transform: rotate(0) scale(1); }
  22%  { transform: rotate(-6deg) scale(1.05); }
  50%  { transform: rotate(5deg) scale(1.05); }
  74%  { transform: rotate(-3deg) scale(1.03); }
  100% { transform: rotate(0) scale(1); }
}
.char-media img { transition: transform .45s var(--ease-lift); }
.character-card:hover img.bob,
.hero-mascot:hover img,
.cta-mascot:hover img { animation: wiggle .8s ease-in-out; }
.character-card:hover .char-media img:not(.bob) { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .spark { opacity: .7; animation: none; }
  .orb, .planet, .glyph { animation: none; }
  .character-card:hover img, .hero-mascot:hover img, .cta-mascot:hover img { animation: none; transform: none; }
}

/* 16. RESPONSIVE BREAKPOINTS ============================================== */
@media (min-width: 768px) {
  body { font-size: 17px; }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .adventures-grid { grid-template-columns: repeat(3, 1fr); }
  .crew-grid { grid-template-columns: repeat(3, 1fr); }
  .letters-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .lead-grid { grid-template-columns: 1.05fr .95fr; }
  .hero-inner { grid-template-columns: 1.1fr .9fr; }
  .lp-hero .hero-inner { grid-template-columns: 1fr .8fr; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

  /* desktop nav: always visible row, no hamburger */
  html.js-enabled .hamburger,
  .hamburger { display: none; }
  .primary-nav,
  html.js-enabled .primary-nav {
    flex-direction: row;
    flex-basis: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 0;
  }
  .nav-links { flex-direction: row; }
  .nav-links a { border-bottom: 2px solid transparent; padding: 6px 2px; }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .letters-grid { grid-template-columns: repeat(3, 1fr); }
  .course-grid { grid-template-columns: repeat(3, 1fr); }
  .adventures-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
  :root { --container: var(--container-wide); }
}

/* 20. LIVE DEMO LOOPS (homepage · #how-it-works) ============================
   Each demo is a whole game laid out at ~1000px wide. We never let the iframe
   reflow — below ~880px these games drop into 1000-1400px-tall phone layouts
   that no homepage card can show. Instead the iframe's internal viewport is
   pinned to the demo's native size (data-w/data-h on each tab) and the ELEMENT
   is scaled to whatever width the page has. fitDemoLoop() in js/main.js sets
   the scale; the aspect-ratio box reserves the exact height so nothing jumps.
   Sizes differ per demo and that is intended:
     lesson    1000x1000  (tall: question + scene + hint + 4 options)
     sunflower 1000x640   (landscape 3-column)
     cricket    760x760   (square: a portrait phone game) */
.demo-loop { margin-top: clamp(30px, 4.5vw, 52px); }
.demo-loop__head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(14px, 2vw, 20px); }
.demo-loop__head h3 { margin-bottom: .3em; }

/* --- tabs: advertise all three, play one --- */
.demo-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 860px;
  margin: 0 auto clamp(14px, 2vw, 20px);
}
@media (min-width: 720px) { .demo-tabs { grid-template-columns: repeat(3, 1fr); } }
/* On a phone, three stacked cards cost ~270px before you even reach the demo.
   Keep them in one row and drop the sublabel — at this width the name plus the
   demo itself carry the message, and getting to the demo matters more. */
@media (max-width: 719px) {
  .demo-tabs { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .demo-tab { padding: 8px 4px; }
  .demo-tab__s { display: none; }
  .demo-tab__t { font-size: .8rem; }
  .demo-tab__ico { font-size: 20px; }
}
.demo-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 3px solid transparent;
  box-shadow: 0 3px 0 rgba(15, 15, 46, .10);
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--ease-lift), border-color .18s, box-shadow .18s;
  min-height: 44px;                       /* stays a comfortable tap target */
}
.demo-tab:hover { transform: translateY(-2px); }
.demo-tab__ico { font-size: 24px; line-height: 1.1; }
.demo-tab__t { font-family: var(--font-head); font-size: .98rem; color: var(--purple); line-height: 1.15; }
.demo-tab__s { font-size: .74rem; color: var(--ink-soft); font-weight: 700; line-height: 1.2; }
.demo-tab.is-active {
  border-color: var(--amber);
  box-shadow: 0 4px 0 var(--amber-deep), 0 8px 18px rgba(255, 184, 0, .22);
  transform: translateY(-2px);
}
.demo-tab.is-active .demo-tab__t { color: var(--navy); }

/* The stage is COMPACT by default and expands on request. Left at native size the
   lesson alone is a 1000x1000 square, which swamps the page and breaks the rhythm
   of the other sections. Capped, the loop still reads as alive and real while
   scrolling past; anyone who wants to read it hits "Watch full size".
   fitDemoLoop() in js/main.js sizes the box directly (width AND height) rather
   than using aspect-ratio, because the cap has to apply to the HEIGHT. */
/* A restrained tilt. Measured, not guessed: a rotateY() on the iframe stays crisp
   (the browser re-rasterises rather than smearing a bitmap — verified at 1x DPR
   and -16deg, the harsh case), and perspective grows the near edge as it shrinks
   the far one, so the layout footprint moves by only a few px.
   At -10deg / perspective 1800 the far edge renders ~3.4% smaller and the near
   edge ~3.5% larger — a ~7% spread across the device. Enough to read as a physical
   object, still well short of the -16deg "device mockup" angle that would announce
   "marketing screenshot" about a demo whose whole job is being live.
   It stands up FLAT when expanded: tilt is for glancing, flat is for reading. */
.demo-loop__stage {
  display: flex;
  justify-content: center;
  perspective: 1800px;
}
.demo-loop__device { transform: rotateY(-10deg); }
.demo-loop__stage.is-expanded .demo-loop__device { transform: none; }

/* No tilt where it can only cost: on a phone the demo is already small, and a
   reader who asked for reduced motion gets no animated straightening either. */
@media (max-width: 719px) {
  .demo-loop__device,
  .demo-loop__stage.is-expanded .demo-loop__device { transform: none; }
}

/* Device bezel. Uses the brand navy so the demo reads as a tablet sitting on the
   cream section rather than as an iframe that failed to fill its box. The camera
   dot is what actually sells it — without it this is just a dark border.

   Depth comes from LIGHTING, not from a 3D transform. A rotateY() tilt was tested
   and does work (it stays crisp — the browser re-rasterises the iframe rather than
   smearing a bitmap), but it was rejected on purpose: a tilted device is the visual
   grammar of a *screenshot*, and this section's whole job is "this is the real
   thing, running". Tilting also foreshortens the text, which costs most on the
   lesson tab — already the least legible of the three at 0.43 scale. Lighting buys
   the same "physical object" read at zero legibility cost. */
.demo-loop__device {
  --bezel-pad: 14px;
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: var(--bezel-pad);
  border-radius: 28px;
  /* Lit from the top-left. A single flat fill reads as a border; a gradient across
     that diagonal is what makes the eye see a solid object. */
  background: linear-gradient(150deg, #4a4a72 0%, #26264a 42%, #14142c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),     /* top rim catches the light */
    inset 0 -2px 3px rgba(0, 0, 0, .55),        /* bottom edge falls into shade */
    0 8px 10px -6px rgba(15, 15, 46, .28),      /* tight contact shadow — grounds it */
    0 30px 52px -14px rgba(15, 15, 46, .42);    /* soft lift off the page */
  transition: transform .35s var(--ease-lift);
}
@media (prefers-reduced-motion: reduce) {
  .demo-loop__device { transition: none; }
}
/* camera */
.demo-loop__device::before {
  content: "";
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0a0a18;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  z-index: 2;
}
/* Screen sheen. Sits over the demo, so it MUST NOT eat pointer events — the
   "tap to play it yourself" link inside the iframe has to stay clickable.
   Deliberately weak: this is a glass hint, not a smudge over the maths. */
.demo-loop__device::after {
  content: "";
  position: absolute;
  inset: var(--bezel-pad);
  border-radius: 12px;                          /* matches .demo-loop__box */
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .10) 0%,
    rgba(255, 255, 255, .03) 20%,
    rgba(255, 255, 255, 0) 44%);
}
@media (max-width: 520px) {
  .demo-loop__device { --bezel-pad: 8px; border-radius: 18px; }
  .demo-loop__device::before { top: 2px; width: 4px; height: 4px; }
}

.demo-loop__box {
  position: relative;
  overflow: hidden;
  border-radius: 12px;               /* the screen inside the bezel */
  background: #EADFC8;               /* warm neutral — no white flash before load */
  transition: width .35s var(--ease-lift), height .35s var(--ease-lift);
  /* width/height are set by fitDemoLoop(); these are only a pre-JS fallback */
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1000 / 640;
  display: block;
}
.demo-loop__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 640px;                     /* both replaced per-demo by fitDemoLoop() */
  border: 0;
  display: block;
  transform-origin: 0 0;             /* scale() is applied from js/main.js */
}
.demo-loop__zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: var(--panel, #fff);
  border: 2px solid #e3d9c0;
  box-shadow: 0 2px 0 rgba(15, 15, 46, .08);
  font-family: var(--font-head);
  font-size: .86rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.demo-loop__zoom:hover { border-color: var(--amber); color: var(--navy); }
/* Required: the `hidden` attribute is only a UA `display:none`, so the author
   `display:inline-flex` above beats it and the button would still render after
   main.js sets .hidden = true. */
.demo-loop__zoom[hidden] { display: none; }
/* No-JS fallback: without a scale factor a 1000px frame would spill out of a
   narrow box. Shrink-to-fit keeps it contained. (main.js stamps .js-enabled on
   <html> before fitDemoLoop() runs, so there is no flash in between.) */
:root:not(.js-enabled) .demo-loop__frame { width: 100%; height: 100%; }

.demo-loop__cta { margin-top: clamp(18px, 2.6vw, 26px); }
.demo-loop__note { display: block; margin-top: .7em; font-size: .86rem; color: var(--ink-soft); }

/* Mobile: the inline preview is a 1000px layout scaled to ~0.34, so its text reads
   only as "something is alive here". Overlay it with a tap target that opens the demo
   full-screen, where the responsive game reflows to a readable phone layout. Hidden
   on desktop, where the demo is legible and "Watch full size" already exists. */
.demo-loop__tap { display: none; }
@media (max-width: 719px) {
  .demo-loop__tap {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-decoration: none; color: var(--cream); text-align: center;
    background: linear-gradient(180deg, rgba(15, 15, 46, .16), rgba(15, 15, 46, .46));
    border-radius: 12px;                         /* matches .demo-loop__box */
  }
  .demo-loop__tap-btn {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--amber); color: var(--navy);
    font-size: 1.55rem; padding-left: 4px;       /* optically centre the ▶ glyph */
    box-shadow: 0 8px 22px rgba(15, 15, 46, .4);
  }
  .demo-loop__tap-label {
    font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    background: rgba(15, 15, 46, .58); padding: 5px 13px; border-radius: var(--pill);
  }
}
/* Suppressed for demos that don't reflow to a legible phone layout (e.g. the lesson):
   opening them full-screen would render blank, so they keep the inline preview only. */
.demo-loop__tap--off { display: none !important; }

/* Fullscreen demo overlay (opened from the mobile tap target). Fixed above everything;
   the iframe fills the stage so the game sees a real phone viewport and reflows. */
.demo-fs {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column;
  background: var(--navy);
}
.demo-fs.is-open { display: flex; }
.demo-fs__bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) clamp(12px, 4vw, 20px) 10px;
  color: var(--cream);
}
.demo-fs__title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.demo-fs__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08);
  color: var(--cream); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background .2s;
}
.demo-fs__close:hover { background: rgba(255, 255, 255, .18); }
.demo-fs__stage { flex: 1; min-height: 0; background: #EADFC8; }
.demo-fs__frame { width: 100%; height: 100%; border: 0; display: block; }
body.demo-fs-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* The loop already renders a single static bloomed plant when the visitor asks
     for reduced motion — nothing to do here but keep the box from animating. */
  .demo-loop__box { box-shadow: none; }
}

/* 21. PLAY PAGE (play.html) ================================================ */
.play-card { display: flex; flex-direction: column; }
.play-card h3 { margin-bottom: .4em; }
.play-card > p { color: var(--ink-soft); }
/* Both label rules are scoped to .play-card (0,2,0) on purpose: the body-copy rule
   above is `.play-card > p` (0,1,1), and these labels ARE direct <p> children, so
   an unscoped .play-card__world (0,1,0) silently loses to it and every label
   renders as grey body text. */
.play-card .play-card__world {
  font-family: var(--font-head);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: .1em;
}
/* Cricket isn't part of any world — it's a bonus game that ships alongside the
   course. Colouring it differently stops it reading as "World 6". Uses the deep
   amber, not --amber: plain amber is a CTA *fill* (navy sits on it) and is only
   1.64:1 as text on cream. */
.play-card .play-card__world--bonus { color: var(--amber-deep); }
.play-card__list {
  list-style: none;
  padding: 0;
  margin: 1.1em 0 1.5em;
  display: flex;
  flex-direction: column;
  gap: .45em;
  font-size: .94rem;
  color: var(--ink-soft);
}
/* push every card's button to the same baseline, however long the copy runs */
.play-card .btn { margin-top: auto; }
.play-note { font-size: .9rem; }

/* 22. FOUNDER, TRUST & CTA MICROCOPY ======================================= */
/* Microcopy sitting directly under a primary CTA ("Free account, no card
   required."). Muted on light surfaces; lightened on the dark hero / gradient. */
.cta-microcopy { font-size: .85rem; margin-top: .85em; color: var(--ink-soft); }
.hero .cta-microcopy,
.section--gradient .cta-microcopy { color: var(--on-dark-soft); }

/* Compact founder note on the homepage — a single reassurance card just before
   the pricing block. Reuses the card tokens so it sits in the existing language. */
.founder-compact {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 1.5px solid #e7e0f7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 3.5vw, 34px);
}
.founder-compact p { color: var(--ink); font-size: 1.05rem; margin: 0; }
.founder-compact a {
  display: inline-block;
  margin-top: .9em;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--purple);
}
.founder-compact a:hover { color: #8a5cff; }

/* Full founder section on about.html (lives inside .prose). An amber left-rule
   sets it apart as the human story without inventing a new visual language. */
.prose .founder {
  margin-top: 1.8em;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.5vw, 32px);
  background: #fff;
  border: 1px solid #eadfcf;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.prose .founder h2 { margin-top: 0; }
.prose .founder-proof { margin-top: 1.1em; font-weight: 700; color: var(--purple); }

/* Honest risk-reversal ("Try everything before you pay") block + the commented-out
   testimonial markup, styled now so it renders correctly the moment real quotes go live. */
.trust { max-width: 760px; margin-inline: auto; text-align: center; }
.trust h2 { color: var(--purple); }
.trust > p { margin-top: .8em; }
.trust-list {
  display: grid;
  gap: 12px;
  max-width: 600px;
  margin: 1.4em auto 1.7em;
  text-align: left;
}
.trust-list li { position: relative; padding-left: 30px; color: var(--ink); }
.trust-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}
.testimonials { display: grid; gap: var(--gap); margin-top: 1.8em; text-align: left; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonials blockquote {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 3vw, 28px);
  border-top: 4px solid var(--amber);
}
.testimonials blockquote p { color: var(--ink); }
.testimonials cite {
  display: block;
  margin-top: 1em;
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--purple);
}

/* 23. PRICE BLOCK (dated offer + GST) ====================================== */
/* Newer, fuller price layout used on the Class 2 panel and the pricing card:
   ₹799 · incl. GST · ₹999 (was) · dated-offer badge, then terms + per-class note.
   .price-now / .price-was reuse the existing rules in section 9. */
.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 2px 0 6px;
}
.price-tax { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.price-offer {
  flex-basis: 100%;
  justify-self: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1b7a3d;
  background: #e4f6ea;
  padding: 5px 12px;
  border-radius: var(--pill);
}
.price-terms { color: var(--ink-soft); font-size: .9rem; margin: .5em auto 0; max-width: 34em; text-align: center; }
.price-note { color: var(--ink-soft); font-size: .84rem; font-weight: 700; margin-top: .35em; text-align: center; }

/* 24. TOPIC CLUSTER, GAME LANDING & AUTHOR BYLINE ========================== */
/* Homepage: the single link under the 13-worlds grid to the syllabus hub. Sits
   on the dark Class 2 section, so it takes the cyan link colour. */
.link-more {
  display: inline-block;
  margin-top: clamp(18px, 3vw, 28px);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--cyan);
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.link-more:hover { border-color: var(--cyan); }

/* Breadcrumb trail on content pages (visible companion to the JSON-LD). */
.breadcrumb-nav { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.4em; }
.prose .breadcrumb-nav a { color: var(--purple); text-decoration: none; font-weight: 600; }
.prose .breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav .sep { margin: 0 .45em; color: var(--ink-soft); }

/* Author byline — E-E-A-T signal at the foot of every content page. Initials
   avatar, no photo needed. */
.author-byline {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 2.4em;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #eadfcf;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.author-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.author-byline p { margin-top: 0; }
.author-name { font-weight: 700; }
.author-name a { color: var(--purple); }
.author-role { color: var(--ink-soft); font-size: .9rem; margin-top: .15em; }

/* Topic hub — light card grid mirroring the homepage worlds grid, one card per
   topic. Cards are <a>, so the .prose link styles are neutralised on them. */
.topic-hub-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 1.8em; }
@media (min-width: 600px) { .topic-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .topic-hub-grid { grid-template-columns: repeat(3, 1fr); } }
.prose a.topic-hub-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  background: #fff;
  border: 1.5px solid #e7e0f7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px;
  transition: transform .2s var(--ease-lift), box-shadow .2s, border-color .2s;
}
.prose a.topic-hub-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-lift); }
.thc-num { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); }
.topic-hub-card h3 { margin: .15em 0 .35em; color: var(--ink); font-size: 1.08rem; }
.topic-hub-card p { color: var(--ink-soft); font-size: .92rem; margin-top: 0; }
.thc-theme { display: inline-block; margin-top: .7em; font-size: .72rem; font-weight: 700; color: var(--purple); background: var(--light-purple); border-radius: 8px; padding: 3px 9px; }

/* Worked example callout — question, hint, then explanation. */
.worked-example {
  background: #fff;
  border: 1px solid #e7e0f7;
  border-left: 4px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 1.1em;
}
.worked-example .we-q { font-weight: 700; color: var(--ink); margin-top: 0; }
.worked-example .we-label { font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--purple); }
.worked-example .we-hint { margin-top: .5em; }

/* Practice questions in a collapsible block. */
.prose details.practice {
  background: #fff;
  border: 1.5px solid #e7e0f7;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-top: 1.2em;
}
.prose details.practice[open] { border-color: rgba(108, 60, 225, .3); }
.prose details.practice summary {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--purple);
  cursor: pointer;
}
.prose details.practice ol { margin-top: 1em; }

/* Prev / next topic navigation. */
.topic-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 2.2em; flex-wrap: wrap; }
.prose .topic-nav a { color: var(--purple); text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: .92rem; max-width: 46%; }
.prose .topic-nav a:hover { text-decoration: underline; }
.topic-nav .tn-next { margin-left: auto; text-align: right; }

/* Game landing pages: a big obvious play button. */
.play-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.6em; }

/* ============================================================================
   LEARN + BLOG sections
   Cards reuse the same rhythm, radius and lift as .topic-hub-card so the new
   sections read as the same site, not a new visual language. Cards are <a>, so
   the .prose link styles are neutralised on them.
   ========================================================================== */

/* Learn hub — lesson cards carry a thumbnail above the text. */
.lesson-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 1.8em; }
@media (min-width: 600px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lesson-grid { grid-template-columns: repeat(3, 1fr); } }
.prose a.lesson-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  background: #fff;
  border: 1.5px solid #e7e0f7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 0 20px 20px;
  transition: transform .2s var(--ease-lift), box-shadow .2s, border-color .2s;
}
.prose a.lesson-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-lift); }
.lesson-card img {
  display: block;
  width: calc(100% + 40px);
  margin: 0 -20px 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--light-purple);
}
.lesson-card h3 { margin: 0 0 .3em; color: var(--ink); font-size: 1.08rem; }
.lesson-card p { color: var(--ink-soft); font-size: .92rem; margin-top: 0; }
.lesson-meta { display: inline-block; margin-top: .7em; font-size: .72rem; font-weight: 700; color: var(--purple); background: var(--light-purple); border-radius: 8px; padding: 3px 9px; }

/* The lesson's main illustration, sitting inside the article body. */
.prose .lesson-figure { margin: 1.6em 0; }
.prose .lesson-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1.5px solid #e7e0f7;
  box-shadow: var(--shadow-soft);
}

/* Highlight box — the one rule worth remembering on a lesson or story page.
   Amber left-rule on a warm tint, distinct from the purple worked-example. */
.prose .highlight-box {
  background: #fff9ec;
  border: 1px solid #f2e2bd;
  border-left: 4px solid #f0a92b;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 1.3em;
}
.prose .highlight-box p { margin-top: 0; }
.prose .highlight-box .hb-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b9781a;
  margin-bottom: .4em;
}

/* Blog — stream entry cards (two big cards) and post cards (a list). */
.stream-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 1.8em; }
@media (min-width: 640px) { .stream-grid { grid-template-columns: repeat(2, 1fr); } }
.prose a.stream-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  background: var(--light-purple);
  border: 1.5px solid #e0d5f7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px;
  transition: transform .2s var(--ease-lift), box-shadow .2s, border-color .2s;
}
.prose a.stream-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-lift); }
.stream-card h2 { margin: 0 0 .3em; color: var(--purple); font-size: 1.2rem; }
.stream-card p { color: var(--ink-soft); font-size: .95rem; margin-top: 0; }
.stream-card .sc-more { display: inline-block; margin-top: .8em; font-weight: 700; color: var(--purple); font-size: .9rem; }

.post-list { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 1.4em; }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
.prose a.post-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  background: #fff;
  border: 1.5px solid #e7e0f7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px;
  transition: transform .2s var(--ease-lift), box-shadow .2s, border-color .2s;
}
.prose a.post-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-lift); }
.post-card h3 { margin: 0 0 .35em; color: var(--ink); font-size: 1.08rem; }
.post-card p { color: var(--ink-soft); font-size: .92rem; margin-top: 0; }
.post-meta { display: inline-block; margin-top: .7em; font-size: .72rem; font-weight: 700; color: var(--purple); background: var(--light-purple); border-radius: 8px; padding: 3px 9px; }

/* Story-corner post reads as a story: a touch more generous line length is
   already handled by .prose; this just softens the paragraphs' rhythm. */
.prose .story p { font-size: 1.05rem; }