:root {
  --navy: #282972;
  --navy-dark: #1B1C50;
  --teal: #0F7B8A;
  --amber: #F37130;
  --amber-dark: #B84C18;
  /* Text sitting ON a wash of its own hue (2026-08-31). --teal and
     --amber-dark are sized for white; on a 10-16% wash of themselves the
     ground lifts and they land at 4.36 and 4.35, just under AA for the
     10-15px labels that use them. These two are the same hues taken far
     enough down to clear 4.5 there (5.4 and 5.2). Use them for text on a
     tinted block; keep --teal / --amber-dark for text on white. */
  --teal-on-wash: #0D6B79;
  --amber-on-wash: #A44415;
  /* Fourth module accent (2026-08-20). Cognitive navy, Spelling teal and
     Maths amber were the whole palette; General Knowledge was inheriting
     navy, so two subjects read as one on every colour-coded card. Chosen
     dark enough to carry white text and to pass contrast on white. */
  --violet: #9C3587;
  --bg-light: #F7F7FA;
  --bg-card: #FFFFFF;
  --text-dark: #1D1D2B;
  --text-muted: #5F5F75;
  --border: #E4E4EC;
  --shadow: 0 12px 30px rgba(40, 41, 114, 0.08);
  --shadow-lg: 0 20px 45px rgba(40, 41, 114, 0.16);
  --radius: 16px;
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  --gradient-amber: linear-gradient(135deg, #FFA268 0%, var(--amber) 55%, var(--amber-dark) 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin: 0 0 0.5em;
  line-height: 1.25;
}

p { margin: 0 0 1em; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

a { text-decoration: none; color: inherit; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }
.steps .step.reveal:nth-child(1) { transition-delay: 0s; }
.steps .step.reveal:nth-child(2) { transition-delay: 0.08s; }
.steps .step.reveal:nth-child(3) { transition-delay: 0.16s; }
.steps .step.reveal:nth-child(4) { transition-delay: 0.24s; }
.feature-grid .feature-card.reveal:nth-child(1) { transition-delay: 0s; }
.feature-grid .feature-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.feature-grid .feature-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.feature-grid .feature-card.reveal:nth-child(4) { transition-delay: 0.24s; }
.standard-grid .standard-card.reveal:nth-child(1) { transition-delay: 0s; }
.standard-grid .standard-card.reveal:nth-child(2) { transition-delay: 0.06s; }
.standard-grid .standard-card.reveal:nth-child(3) { transition-delay: 0.12s; }
.standard-grid .standard-card.reveal:nth-child(4) { transition-delay: 0.18s; }
.standard-grid .standard-card.reveal:nth-child(5) { transition-delay: 0.24s; }
.standard-grid .standard-card.reveal:nth-child(6) { transition-delay: 0.3s; }
.standard-grid .standard-card.reveal:nth-child(7) { transition-delay: 0.36s; }
.standard-grid .standard-card.reveal:nth-child(8) { transition-delay: 0.42s; }
.domain-grid .domain-card.reveal:nth-child(1) { transition-delay: 0s; }
.domain-grid .domain-card.reveal:nth-child(2) { transition-delay: 0.06s; }
.domain-grid .domain-card.reveal:nth-child(3) { transition-delay: 0.12s; }
.domain-grid .domain-card.reveal:nth-child(4) { transition-delay: 0.18s; }
.domain-grid .domain-card.reveal:nth-child(5) { transition-delay: 0.24s; }
.domain-grid .domain-card.reveal:nth-child(6) { transition-delay: 0.3s; }
.takeaway-grid .takeaway-card.reveal:nth-child(1) { transition-delay: 0s; }
.takeaway-grid .takeaway-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.takeaway-grid .takeaway-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.takeaway-grid .takeaway-card.reveal:nth-child(4) { transition-delay: 0.24s; }
.stats-inner .stat.reveal:nth-child(1) { transition-delay: 0s; }
.stats-inner .stat.reveal:nth-child(2) { transition-delay: 0.08s; }
.stats-inner .stat.reveal:nth-child(3) { transition-delay: 0.16s; }
.stats-inner .stat.reveal:nth-child(4) { transition-delay: 0.24s; }
/* Free trial banner (2026-08-22). Sits ABOVE the paid grid rather than as a
   fifth card: it is not a plan you choose between, it is the thing to do
   first, and as a card among four it would have read as the cheapest option
   rather than the obvious starting point. */
.pricing-trial {
  /* Matches .pricing-grid-4 exactly. At 760 it sat 330px narrower than the
     cards it introduces, and two different centred widths stacked on each
     other read as a mistake rather than a hierarchy. */
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 22px 26px;
  border: 2px solid var(--teal);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(15, 123, 138, 0.08), rgba(15, 123, 138, 0.02) 70%), var(--bg-card);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing-trial-main { flex: 1; min-width: 260px; }
.pricing-trial-badge {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.pricing-trial h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 6px;
}
.pricing-trial p { margin: 0; color: var(--text-dark); font-size: 15.5px; }
.pricing-trial .btn { background: var(--teal); box-shadow: 0 8px 20px rgba(15, 123, 138, 0.32); }
@media (max-width: 620px) {
  .pricing-trial { padding: 20px; gap: 16px; }
  .pricing-trial .btn { width: 100%; justify-content: center; }
}

.pricing-grid .pricing-card.reveal:nth-child(1) { transition-delay: 0s; }
.pricing-grid .pricing-card.reveal:nth-child(2) { transition-delay: 0.1s; }
.pricing-grid .pricing-card.reveal:nth-child(3) { transition-delay: 0.2s; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
  /* <button> doesn't inherit the body line-height the way <a> does, so
     without this an <a class="btn"> and a <button class="btn"> sitting
     side by side render 6px apart in height (2026-08-13). Matches the
     inherited value, so anchor buttons are unchanged and only <button>
     grows into line. */
  line-height: 1.6;
}

.btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.btn:hover .btn-icon { transform: translateX(3px); }

.btn-primary {
  background: var(--gradient-amber);
  color: var(--navy-dark);
  box-shadow: 0 10px 24px rgba(243, 113, 48, 0.35);
}
.btn-primary:hover {
  box-shadow: 0 14px 30px rgba(243, 113, 48, 0.45);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-ghost:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-teal {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn-outline-teal:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-amber {
  background: transparent;
  border-color: var(--amber-dark);
  color: var(--amber-dark);
}
.btn-outline-amber:hover {
  background: var(--amber-dark);
  color: #fff;
  transform: translateY(-2px);
}

.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Matches --bg-light. The recolour pass swept the six brand colours and
     their rgba() forms, but this is a NEUTRAL in rgba form - it matched no
     brand value, so it kept the pre-rebrand #F7F9FA and left the sticky
     header two points cooler than the page it floats over. */
  background: rgba(247, 247, 250, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Measured 2026-08-20, after a report of the nav colliding with the login
   buttons at 1425px. At that width the three groups came to 1225px inside
   1172px of usable container, and `justify-content: space-between` with no
   gap means that shortfall does not scroll -- the groups simply butt into
   each other. "Contact" ended at x=892 and "Student login" began at x=892.

   The header has outgrown its original budget. The comment further down
   this file recorded 1114px when Student login was added in August; it is
   1225px now. Four action buttons and seven nav links do not fit in 1220,
   and no reasonable tightening gets there -- the tightest combination
   still measured 1179 against 1172. So the container itself widens.

   `gap` is the load-bearing part: it makes a collision impossible rather
   than merely unlikely. If the content ever outgrows the room again, the
   groups push apart and the overflow becomes visible instead of silently
   overlapping the text. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
  max-width: 1320px;
}

/* Column, not a row: the lockup already carries the name, so the tagline
   reads as a line UNDER the logo rather than a second thing beside it.
   align-items:flex-start keeps it on the logo's left edge and stops the
   image being stretched by the default stretch value. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
}

.brand-icon { width: 38px; height: 38px; display: block; }
/* The wordmark is part of the logo file now, so the header carries the real
   lockup instead of rebuilding the name out of two coloured spans. The old
   split-span version was invisible to a name search and survived the rename
   on all 28 pages because of it. */
.brand-lockup { height: 38px; width: auto; display: block; flex: none; }
.brand-word-group { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-word { color: var(--navy); }
.brand-word-accent { color: var(--teal); }
.brand-tagline {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--navy);
  white-space: nowrap;
}
/* Two-tone, matching how the hero already sets this same phrase. The header
   accent is --amber-dark, NOT the brand orange: at 10.5px this is small text,
   and #F37130 lands at 2.76:1 on the header ground. #B84C18 gives 4.87:1.
   The footer CAN use the bright orange - on --navy-dark it reaches 5.43:1. */
.brand-tagline-accent { color: var(--amber-dark); }
.footer-brand .brand-tagline { color: #F2F2F8; }
.footer-brand .brand-tagline-accent { color: var(--amber); }
@media (max-width: 720px) {
  .brand-tagline { display: none; }
}

.main-nav {
  display: flex;
  /* 16, not 24. Six gaps at 24px was 48px the header no longer has. */
  gap: 16px;
}

.main-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transition: right 0.2s ease;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a:hover::after { right: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Four buttons are the single biggest item in the header (459px of it).
   Trimming their side padding at all widths buys back 34 of those. */
.header-actions .btn { padding-left: 14px; padding-right: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

/* Hero */
/* --- Cinematic hero (2026-08-22) --------------------------------------
   The hero PINS while the page scrolls, and the first section rises over it
   like a card being laid on top. Its content scales down and fades as it
   goes, so the transition is the hero receding rather than simply being
   covered.

   It stays stuck for the whole page rather than only its own height, which
   is deliberate and cheaper than the usual tall-wrapper trick: everything
   after it is opaque, so from .foundation onward the hero is simply never
   seen again. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  padding: 88px 0 110px;
  overflow: hidden;
}
/* A STICKY ELEMENT WITH A z-index MAKES A STACKING CONTEXT, and positioned
   boxes paint above non-positioned ones. Without this every static section
   after the hero would render BEHIND the pinned hero and the page would
   appear to stop after the first screen. Every following section has to be
   positioned and lifted, not just .foundation. */
main > section:not(.hero) { position: relative; z-index: 1; }

.hero-inner {
  /* transform-origin at the top so the headline shrinks toward the header
     rather than toward the middle of the screen, which reads as falling
     away rather than as the whole block sliding up. */
  transform-origin: 50% 20%;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  /* No pinning at all. Content that stays put while the page moves under it
     is a vestibular trigger, and the fade would leave the hero half-visible
     with no scroll to finish it. */
  .hero { position: relative; }
  .hero-inner { transform: none !important; opacity: 1 !important; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 420px at 85% 8%, rgba(15, 123, 138, 0.10), transparent 60%),
    radial-gradient(480px 380px at 8% 92%, rgba(243, 113, 48, 0.10), transparent 60%),
    var(--bg-light);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(40, 41, 114, 0.09) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}

/* Top-aligned, not centred (2026-08-14). The copy column runs ~700px and
   the timeline card ~510px, so centring the shorter one left a ~120px
   void at the TOP RIGHT — the first place the eye lands, and the reason
   the hero read as unfinished. Aligning the two columns at the top puts
   the card's edge level with the eyebrow and moves the slack to the
   bottom, where the hero's own 110px padding and the blobs absorb it. */
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.eyebrow.center { text-align: center; }

.hero h1 {
  font-size: 46px;
  color: var(--navy-dark);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.hero h1 .highlight {
  position: relative;
  color: var(--teal);
  white-space: nowrap;
}
.hero h1 .highlight::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -4px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q 25 0 50 10 T 100 10 T 150 10 T 200 10' fill='none' stroke='%23F37130' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 90px 10px;
}

.hero-tagline {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
}
.hero-tagline-accent { color: var(--amber); }

.hero-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin: 28px 0 32px;
  flex-wrap: wrap;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}
.hero-points .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 0 30px;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  animation: float 7s ease-in-out infinite;
}
.hero-blob-1 {
  width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, #DDF2F5, #C7E9EE);
  top: -30px; right: 0;
}
.hero-blob-2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle at 30% 30%, #FDEBE0, #FBD9C6);
  bottom: -20px; left: -10px;
  animation-delay: -3s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-dark);
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip-dot-teal { background: var(--teal); }
.chip-dot-amber { background: var(--amber); }
.chip-dot-navy { background: var(--navy); }

.chip-1 { top: 2%;  left: -8%;  animation-delay: -0.5s; }
.chip-4 { top: 2%;  right: -8%; animation-delay: -1.2s; }
.chip-6 { top: 44%; left: -12%; animation-delay: -5.5s; }
.chip-2 { top: 44%; right: -12%; animation-delay: -2s; }
.chip-3 { top: 86%; left: -8%;  animation-delay: -3.5s; }
.chip-5 { top: 86%; right: -8%; animation-delay: -4.5s; }

/* Hero timeline card (2026-08-10 landing redesign) — replaces the old
   3-tile module quick-links (moved to the new Foundation section + the
   existing header nav, so nothing here duplicated a navigation path
   that already existed). Shows WHERE these skills resurface over time,
   the concrete "future prospects" thread the hero now opens with. */
.hero-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  padding: 30px;
}
.hero-card-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  background: rgba(15, 123, 138, 0.1);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.hero-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.hero-timeline { position: relative; padding-left: 24px; margin: 0; }
.hero-timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--teal), var(--amber)); border-radius: 2px;
}
.hero-timeline-item { position: relative; padding-bottom: 24px; }
.hero-timeline-item:last-child { padding-bottom: 0; }
.hero-timeline-item::before {
  content: ""; position: absolute; left: -24px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 3px solid var(--teal);
}
.hero-timeline-item.now::before { border-color: var(--amber); background: var(--amber); }
.hero-timeline-age { font-size: 11.5px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.03em; }
.hero-timeline-item.now .hero-timeline-age { color: var(--amber-dark); }
.hero-timeline-item h4 { font-family: 'Poppins', sans-serif; margin: 4px 0 4px; font-size: 15px; color: var(--navy-dark); }
.hero-timeline-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* Stats band */
.stats-band {
  background: var(--gradient-brand);
  padding: 56px 0;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 38px;
  color: #fff;
  margin: 0 0 4px;
}
.stat-label {
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
  margin: 0;
  font-weight: 500;
}

/* "Foundation" section (2026-08-10 landing redesign) — the sentiment
   core of the page: why Cognitive/Maths speed/Spelling matter for a
   child's future, not just this term's grades. Dark and focused,
   deliberately different from every white/light-grey section around it,
   so it reads as the one place the page pauses to make its real case
   rather than another feature list. Three rows, deliberately equal in
   shape (numbered 01/02/03, same heading/body structure) — no module
   gets more space or a bigger claim than the other two. */
.foundation { padding: 100px 0; background: var(--navy-dark); color: #fff; position: relative; overflow: hidden; }
.foundation::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(15, 123, 138, 0.35), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(243, 113, 48, 0.18), transparent 45%);
}
.foundation .container { position: relative; }
.foundation .eyebrow { color: var(--amber); }
.foundation h2 { font-size: 34px; color: #fff; max-width: 22ch; margin: 0 0 18px; }
.foundation-lead { font-size: 17px; color: rgba(255,255,255,0.78); max-width: 68ch; margin: 0 0 56px; }
.foundation-lead strong { color: #fff; }

.foundation-rows { display: flex; flex-direction: column; }
.foundation-row {
  display: grid; grid-template-columns: 64px 1fr 1.15fr; gap: 28px; align-items: start;
  padding: 34px 0; border-top: 1px solid rgba(255,255,255,0.14);
}
.foundation-rows .foundation-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.foundation-num { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.35); padding-top: 4px; }
.foundation-row h3 { font-family: 'Poppins', sans-serif; font-size: 21px; color: #fff; margin: 0 0 4px; }
.foundation-kicker { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.foundation-row.cog .foundation-kicker { color: #8FD6CE; }
.foundation-row.maths .foundation-kicker { color: #FFB07D; }
.foundation-row.spell .foundation-kicker { color: #9FC2FF; }
.foundation-row.gk .foundation-kicker { color: #C9B8F5; }
.foundation-row .body { font-size: 15.5px; color: rgba(255,255,255,0.72); margin: 0; }
.foundation-row .body strong { color: #fff; }

@media (max-width: 800px) {
  .foundation { padding: 72px 0; }
  .foundation h2 { font-size: 27px; }
  .foundation-row { grid-template-columns: 36px 1fr; }
  .foundation-row > :nth-child(3) { grid-column: 2; margin-top: 4px; }
}

/* Section shared */
section { padding: 96px 0; }

.section-title {
  font-size: 30px;
  color: var(--navy-dark);
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.section-title.center { text-align: center; }

.section-sub {
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 8px;
}
.section-sub.center { text-align: center; }

/* How it works */
.how-it-works { background: #fff; }

.steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.step {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 28px 22px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 18px;
}

.step h3 { font-size: 17px; color: var(--navy-dark); }
.step p { color: var(--text-muted); font-size: 14.5px; margin: 0; }
.step-sample-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
}
.step-sample-link:hover { color: var(--amber-dark); }

/* Standards */
.standard-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.standard-card {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 14px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.standard-card:nth-child(3n+2) { background: linear-gradient(135deg, var(--teal), var(--navy)); }
.standard-card:nth-child(3n+3) { background: linear-gradient(135deg, var(--navy-dark), var(--teal)); }
.standard-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.standard-ghost {
  position: absolute;
  top: -14px;
  right: 2px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 58px;
  color: rgba(255,255,255,0.12);
  line-height: 1;
}
.standard-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  position: relative;
}
.standard-caption {
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  position: relative;
}

/* Why us */
.why-us { background: #fff; }

.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  display: block;
  padding: 20px 18px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}
.feature-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
}
.feature-card:hover .feature-card-link { color: var(--amber-dark); }

.practice-science-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
}

.feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--bg-light);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-icon svg { width: 26px; height: 26px; }

.feature-card h3 { font-size: 17px; color: var(--navy-dark); }
.feature-card p { color: var(--text-muted); font-size: 14.5px; }

/* Brand story */
.brand-story {
  background: linear-gradient(120deg, rgba(15, 123, 138, 0.07), rgba(243, 113, 48, 0.08)), #fff;
}

.brand-story-inner {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 56px;
  align-items: center;
}

.brand-story-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.brand-story-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 41, 114, 0.14), transparent 70%);
}

.brand-story-icon {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(40, 41, 114, 0.2));
}

.brand-story-copy .eyebrow { margin-bottom: 10px; }
.brand-story-copy .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 32ch;
}
.brand-story-lead {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 60ch;
}

.brand-story-takeaway {
  margin-top: 28px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 60ch;
}
.brand-story-takeaway h3 {
  font-size: 15px;
  color: var(--navy-dark);
  margin-bottom: 14px;
}
.brand-story-takeaway ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-story-takeaway li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-dark);
}
.brand-story-takeaway .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Parent takeaways */
.parent-takeaways { background: #fff; }

.dimension-cloud {
  position: relative;
  max-width: 880px;
  height: 140px;
  margin: 44px auto 0;
}
.dim-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-dark);
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.dim-1 { left: 2%;  top: 8%;  animation-delay: -0.5s; }
.dim-3 { left: 36%; top: 8%;  animation-delay: -3s; }
.dim-5 { left: 70%; top: 8%;  animation-delay: -2.4s; }
.dim-6 { left: 2%;  top: 66%; animation-delay: -5.4s; }
.dim-4 { left: 36%; top: 66%; animation-delay: -4.2s; }
.dim-2 { left: 70%; top: 66%; animation-delay: -1.8s; }

/* The hero's OWN breakpoint (2026-08-14), split out of the 1250px
   navigation one. 1080px is where the two-column layout actually runs
   out of room: the right column reaches exactly the card's 380px
   max-width there, and the left still clears the copy's 46ch cap. Above
   this the card sits beside the copy and fills the right side.

   Below it the hero stacks — and the copy is centred, because a 46ch
   cap inside a full-width row pins all the text to the left and leaves
   the other half of the row empty, which is the same void in a
   different guise. Centring makes the stack read as one deliberate
   column rather than a half-used two-column layout. */
/* The hamburger was unified with the hero stack at 1080 so the page would
   change shape once rather than twice, and that was the right call at the
   time. It is no longer possible: even fully tightened the header needs
   about 1231px, so between 1081 and 1240 it was overlapping its own text.
   Overlapping text is worse than a second breakpoint, so the nav collapses
   at 1240 while the hero still stacks at 1080.

   1240 rather than 1290 on purpose: 1280 is a very common laptop width and
   keeps its full nav at this figure. */
@media (max-width: 1240px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* WAS `.btn-primary, .btn-ghost { display: none }` - which hid REGISTER too,
     so below 1240px the header showed a hamburger and nothing else. On a
     1366px laptop with the window not maximised, a first-time visitor saw no
     way to sign up at all until they opened a menu whose first seven items are
     section links. The two things we most want pressed were the least
     reachable at exactly the widths where reach matters.
     The secondary logins still collapse into the menu; Login and Register do
     not, because a call to action that has to be discovered is not one. */
  .header-actions .btn-ghost[href="student-login.html"] { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 8px 14px; font-size: 13.5px; }
}

/* Below this the two remaining buttons plus the hamburger stop fitting beside
   the logo, so Login folds into the menu and only Register survives - if just
   one thing is visible on a phone it should be the one that starts an
   account, not the one for people who already have one. */
@media (max-width: 560px) {
  .header-actions .btn-ghost { display: none; }
  .header-actions .btn-sm { padding: 7px 12px; font-size: 13px; }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { min-height: 300px; margin-top: 24px; }
  .hero-copy { text-align: center; }
  .hero-sub,
  .hero-tagline { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  /* The bullets stay left-aligned to each other, but the block as a
     whole centres — a centred list with ragged bullets reads as broken. */
  .hero-points { align-items: center; }
  .hero-points li { text-align: left; }
}

@media (max-width: 960px) {
  .dimension-cloud {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 36px auto 0;
  }
  .dim-chip { position: static; }
}

.takeaway-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.takeaway-card {
  padding: 24px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.takeaway-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.takeaway-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(40, 41, 114, 0.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.takeaway-icon svg { width: 26px; height: 26px; }

.takeaway-grid .takeaway-card:nth-child(2) .takeaway-icon {
  background: rgba(15, 123, 138, 0.1);
  color: var(--teal);
}
.takeaway-grid .takeaway-card:nth-child(3) .takeaway-icon {
  background: rgba(243, 113, 48, 0.14);
  color: var(--amber-dark);
}
.takeaway-grid .takeaway-card:nth-child(4) .takeaway-icon {
  background: rgba(40, 41, 114, 0.08);
  color: var(--navy);
}

.takeaway-card h3 { font-size: 17px; color: var(--navy-dark); }
.takeaway-card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }

/* Science section */
.science {
  background: var(--bg-light);
}

.science .section-sub {
  max-width: 72ch;
}

.domain-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.domain-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.domain-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.domain-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(40, 41, 114, 0.08);
  color: var(--navy);
}
.domain-icon svg { width: 24px; height: 24px; }

.domain-grid .domain-card:nth-child(3n+2) .domain-icon {
  background: rgba(15, 123, 138, 0.1);
  color: var(--teal);
}
.domain-grid .domain-card:nth-child(3n+3) .domain-icon {
  background: rgba(243, 113, 48, 0.14);
  color: var(--amber-dark);
}

.domain-card h3 { font-size: 16.5px; color: var(--navy-dark); margin-bottom: 8px; }
.domain-def { color: var(--text-dark); font-size: 14px; margin-bottom: 10px; }
.domain-why { color: var(--text-muted); font-size: 13px; margin: 0; }
.domain-why span { font-weight: 600; color: var(--text-dark); }

.science-disclaimer {
  margin: 40px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* Module sections (Cognitive / Spelling / Maths) */
.module-section:nth-of-type(odd) { background: #fff; }
.module-section:nth-of-type(even) { background: var(--bg-light); }

/* --- Try a question (2026-08-23) -------------------------------------- */
/* Opaque, like every section after the hero - the hero pins behind the whole
   document, so a translucent section here would show it through. */
.try-question { padding: 90px 0; background: var(--bg-light); }
.try-question .section-sub { max-width: 620px; }

.tq-card {
  max-width: 660px;
  margin: 36px auto 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 32px 32px;
  box-shadow: 0 18px 44px rgba(40, 41, 114, 0.10);
}
.tq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tq-domain-chip {
  background: rgba(40, 41, 114, 0.09);
  color: var(--navy);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.tq-counter { color: var(--text-muted); font-size: 13px; }
.tq-prompt {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 18px;
  line-height: 1.4;
}
.tq-prompt:focus { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.tq-display {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px 12px;
  background: var(--bg-light);
  border-radius: 12px;
  margin-bottom: 22px;
}
.tq-blank { color: var(--amber-dark); }
.tq-glyph { font-size: 44px; line-height: 1; }

.tq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tq-option {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s, transform 0.18s;
}
.tq-option-glyph { font-size: 26px; }
.tq-option:hover:not(:disabled) { border-color: var(--navy); background: rgba(40, 41, 114, 0.04); transform: translateY(-2px); }
.tq-option:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.tq-option:disabled { cursor: default; }
/* Teal for the answer, not green: this palette has no green, and the four
   subject colours must keep meaning what they mean. */
.tq-option.is-correct { border-color: var(--teal); background: rgba(15, 123, 138, 0.10); color: var(--teal); }
/* --amber-dark, never brand orange - brand orange is 2.91:1 on white and
   cannot legally carry text. Same reason the palette has two oranges. */
.tq-option.is-wrong { border-color: var(--amber-dark); background: rgba(184, 76, 24, 0.07); color: var(--amber-dark); }

.tq-feedback { margin-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, margin-top 0.35s ease; }
.tq-feedback.is-shown { margin-top: 20px; max-height: 320px; }
.tq-feedback-head { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.tq-feedback.is-right .tq-feedback-head { color: var(--teal); }
.tq-feedback.is-close .tq-feedback-head { color: var(--amber-dark); }
.tq-feedback-body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); }
.tq-next { margin-top: 20px; }

.tq-footnote { max-width: 620px; margin: 26px auto 0; text-align: center; font-size: 14.5px; color: var(--text-muted); }
.tq-cta { margin-top: 26px; text-align: center; }
.tq-cta-secondary { display: block; margin-top: 14px; color: var(--teal); font-weight: 600; font-size: 15px; }

@media (max-width: 560px) {
  .try-question { padding: 66px 0; }
  .tq-card { padding: 24px 20px 26px; border-radius: 14px; }
  .tq-options { grid-template-columns: 1fr; }
  .tq-prompt { font-size: 18px; }
  .tq-display { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-option, .tq-feedback { transition: none; }
  .tq-option:hover:not(:disabled) { transform: none; }
}

/* --- Section recede, page-wide (2026-08-23) --------------------------- */
main > section:not(.hero) > .container { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  main > section:not(.hero) > .container {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

/* --- Section colour wash (2026-08-22) ---------------------------------
   Each module section settles into its own subject colour as it arrives.
   This is the effect asked for as "flash the page", built as ONE slow
   transition per section rather than anything that blinks: rapid flashing is
   a photosensitive seizure trigger and this product is used by children.

   It also earns its keep beyond decoration. Navy/teal/orange/plum are the
   same four colours the reports use for the four subjects, so scrolling the
   landing page teaches the coding a parent will later read a report in. */
.module-section {
  transition: background-color 0.85s cubic-bezier(.25,.6,.3,1);
}
/* Two classes each, so these beat the :nth-of-type(odd/even) defaults above
   on specificity as well as source order. */
.module-section.module-cognitive.washed { background-color: rgba(40, 41, 114, 0.085); }
.module-section.module-spelling.washed  { background-color: rgba(15, 123, 138, 0.10); }
.module-section.module-maths.washed     { background-color: rgba(243, 113, 48, 0.085); }
.module-section.module-gk.washed        { background-color: rgba(156, 53, 135, 0.075); }

/* A rule of the section's own colour along the top edge - the wash alone is
   soft by necessity (text has to stay readable on it), and this gives the
   arrival a hard edge to register against. */
.module-section { border-top: 3px solid transparent; }
.module-section.module-cognitive.washed { border-top-color: var(--navy); }
.module-section.module-spelling.washed  { border-top-color: var(--teal); }
.module-section.module-maths.washed     { border-top-color: var(--amber); }
.module-section.module-gk.washed        { border-top-color: var(--violet); }

/* GK had no eyebrow colour at all, having shipped without a module class. */
.module-gk .module-eyebrow { color: var(--violet); }

@media (prefers-reduced-motion: reduce) {
  /* The colour still arrives - a background changing is not a motion trigger
     and the coding is worth keeping - but it arrives instantly. */
  .module-section { transition: none; }
}

.module-eyebrow { font-weight: 700; }
.module-cognitive .module-eyebrow { color: var(--navy); }
.module-spelling .module-eyebrow { color: var(--teal); }
.module-maths .module-eyebrow { color: var(--amber-dark); }

.module-subhead {
  text-align: center;
  font-size: 19px;
  color: var(--navy-dark);
  margin: 56px 0 6px;
}
.module-section .standard-grid,
.module-section .domain-grid { margin-top: 24px; }

/* Module intro (2026-08-10 landing redesign) — a split layout that opens
   each of the 3 module sections identically (tag/heading/sub/age-strip/
   primary CTA on one side, a real "what we actually check" mini-grid on
   the other), so Cognitive/Spelling/Maths carry equal visual weight
   instead of Cognitive having a uniquely elaborate age-path with nothing
   comparable on the other two. Deep-dive content (steps, science panel,
   domain grid, chart) stays below, unchanged in kind, just no longer
   the first thing each section shows. */
.module-intro {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  margin-bottom: 8px;
}
.module-intro-copy .section-title { text-align: left; margin: 0 0 14px; max-width: none; }
.module-intro-copy .section-sub { text-align: left; margin: 0 0 26px; max-width: 46ch; }

.age-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.age-pill {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
  background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border);
}
.age-pill.edge { color: #fff; border-color: transparent; }
.module-cognitive .age-pill.edge { background: var(--navy); }
.module-spelling .age-pill.edge { background: var(--teal); }
.module-maths .age-pill.edge { background: var(--amber-dark); }

.module-intro-visual { background: var(--bg-light); border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
.skill-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill-mini {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; color: var(--navy-dark); text-align: center;
}
.skill-mini-full { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .module-intro { grid-template-columns: 1fr; }
}

.module-example {
  margin-top: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background: var(--bg-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: center;
}
.module-example-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.module-example-body { font-size: 15px; color: var(--navy-dark); margin: 0; }
.module-example-body strong { font-family: 'Poppins', sans-serif; }

/* Report-preview card — shows a real chart type (illustrative data) from
   the actual fluency report, so the sales page isn't promising something
   the product doesn't deliver. */
.module-preview {
  margin-top: 32px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 30px 26px;
  text-align: left;
}
.module-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.module-preview-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--navy-dark);
  margin: 0 0 14px;
}
.module-preview-chart { width: 100%; height: auto; overflow: visible; margin-bottom: 8px; }
.module-preview-caption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 20px;
}
.module-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.module-preview-stat strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: var(--navy-dark);
  margin-bottom: 4px;
}
.module-preview-stat span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* Exam-intro "what to expect" / "how to read the report" explainer —
   reused on the Maths intro, structured the same way regardless of page. */
.exam-intro-section {
  text-align: left;
  margin: 22px 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.exam-intro-section h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  color: var(--navy-dark);
  margin: 0 0 10px;
}
.exam-intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--text-dark);
  line-height: 1.5;
}
.exam-intro-list li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.exam-intro-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.quadrant-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quadrant-legend-item {
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.4;
}
.quadrant-legend-item strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  color: var(--navy-dark);
  margin-bottom: 3px;
}
.quadrant-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.quadrant-legend-item span { color: var(--text-muted); }
.quadrant-legend-fluent { background: rgba(15, 123, 138, 0.10); }
.quadrant-legend-fluent .quadrant-legend-dot { background: var(--teal); }
.quadrant-legend-impulsive { background: rgba(243, 113, 48, 0.10); }
.quadrant-legend-impulsive .quadrant-legend-dot { background: var(--amber-dark); }
.quadrant-legend-effortful { background: rgba(40, 41, 114, 0.05); }
.quadrant-legend-effortful .quadrant-legend-dot { background: var(--navy); }
.quadrant-legend-notyet { background: rgba(243, 113, 48, 0.14); }
.quadrant-legend-notyet .quadrant-legend-dot { background: var(--amber-dark); }

@media (max-width: 640px) {
  .quadrant-legend-grid { grid-template-columns: 1fr; }
  .module-preview-stats { grid-template-columns: 1fr; gap: 14px; }
  .module-preview { padding: 22px 20px 20px; }
}

.module-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

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

.science-panel {
  margin-top: 44px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 28px 30px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow);
}
.science-panel h3 { font-size: 17px; color: var(--navy-dark); margin-bottom: 10px; }
.science-panel p { color: var(--text-dark); font-size: 14.5px; }
.science-panel-cite {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
}
.science-panel-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tag-spelling { color: var(--teal); background: rgba(15, 123, 138, 0.1); }
.tag-maths { color: var(--amber-dark); background: rgba(243, 113, 48, 0.14); }
.tag-gk { color: var(--violet); background: rgba(156, 53, 135, 0.13); }
.tag-cognitive { color: var(--navy); background: rgba(40, 41, 114, 0.08); }

.module-spelling .science-panel { border-left-color: var(--teal); }
.module-maths .science-panel { border-left-color: var(--amber-dark); }

/* Pricing */
.pricing { background: #fff; }
.pricing-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pricing-card-featured {
  background: #fff;
  border: 2px solid var(--amber);
  box-shadow: var(--shadow-lg);
}
.pricing-badge {
  position: absolute;
  top: -13px;
  right: 24px;
  background: var(--gradient-amber);
  color: var(--navy-dark);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(243, 113, 48, 0.4);
}
.pricing-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; color: var(--text-muted); margin-bottom: 6px; }
.pricing-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  /* 34px against a 16px plan name made the figure shout over everything else
     on the card - a parent reads WHAT the plan is before what it costs, and
     at that ratio the price was the only thing the card said. */
  font-size: 26px;
  color: var(--navy-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pricing-period { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13.5px; color: var(--text-muted); }
.pricing-features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.pricing-features li {
  font-size: 14px;
  color: var(--text-dark);
  padding-left: 24px;
  position: relative;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}
.pricing-card-featured .pricing-features li::before { color: var(--amber-dark); }
.pricing-card .btn { align-self: flex-start; }

/* For students */
.students-section {
  background: linear-gradient(120deg, rgba(40, 41, 114, 0.05), rgba(15, 123, 138, 0.08)), #fff;
}
.students-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* CTA band */
.cta-band {
  position: relative;
  background: var(--gradient-brand);
  color: #fff;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 300px at 12% 20%, rgba(243, 113, 48, 0.18), transparent 65%),
    radial-gradient(420px 320px at 88% 85%, rgba(255,255,255,0.08), transparent 65%);
}
.cta-band-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cta-band h2 {
  color: #fff;
  font-size: 30px;
  max-width: 36ch;
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--navy-dark);
  color: #C9D3D9;
  padding-top: 64px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* align-items defaults to stretch on a column flex, which pulled the lockup
   image to the full column width and distorted it against its fixed height. */
.footer-brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-brand .brand-lockup { height: 42px; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-word-accent { color: var(--amber); }
.footer-brand p { color: #A9A9BE; font-size: 14px; margin-top: 4px; }

.footer-links, .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links h4, .footer-contact h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 0 0 4px;
}
.footer-links a, .footer-contact p {
  color: #A9A9BE;
  font-size: 14px;
  margin: 0;
}
.footer-links a:hover { color: var(--amber); }

.footer-bottom {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  color: #8A8AA0;
}
.footer-bottom p { margin: 0; }
.footer-credit { font-size: 12px; }
.footer-credit a { color: #8A8AA0; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--amber); }
.footer-admin-link {
  color: #8A8AA0;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-admin-link:hover { color: var(--amber); }

@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* Floating CTA */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--gradient-amber);
  color: var(--navy-dark);
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* The floating Register is fixed at z-index 60 and lives outside the header,
   so with the menu open it painted straight over the panel - covering
   Institution login and duplicating the card's own Register on top of it.
   Hidden while the menu is open rather than restacked: two Register buttons
   on screen at once is a worse answer than one. */
body.nav-open .floating-cta {
  opacity: 0;
  pointer-events: none;
}

.floating-cta.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.floating-cta .btn-icon { width: 15px; height: 15px; }
.floating-cta:hover { transform: translateY(-2px); }

/* Responsive */
/* Nav+header-actions' combined natural width measured at ~1119px (7 nav
   links + 3 header buttons, as of the "Student login" button added
   2026-08-09) in one test browser — real-world font substitution can
   render text wider than that, so this breakpoint carries a generous
   margin above the measurement rather than a tight one, and
   `.main-nav a` also gets `white-space: nowrap` (above) as a second,
   independent safeguard: even if this breakpoint's margin is ever wrong
   for someone's fonts/zoom, nowrap means the failure mode is a row that
   doesn't fit (which the breakpoint is meant to catch anyway), never a
   nav link wrapping mid-word. */
/* The 2026-08-14 band rule that used to live here (tighten between 1081
   and 1250) has gone. Its values are now the defaults above, and its
   CEILING was actively harmful: above 1250 the header ran untightened,
   which is exactly where it was overlapping. Its measurement -- 1114px of
   content -- was true when written and is 111px out of date. */
@media (max-width: 1300px) and (min-width: 1241px) {
  /* The last stretch before the hamburger, where the container is capped
     by the viewport rather than by max-width. */
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 14.5px; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 1250px) {
  .brand-story-inner { grid-template-columns: 1fr; text-align: center; }
  .brand-story-copy .section-title { text-align: center; margin-left: auto; margin-right: auto; }
  .brand-story-copy p:last-child { margin-left: auto; margin-right: auto; }
  /* The hero deliberately does NOT stack here — see the 1024px block
     below. 1250px is the NAVIGATION breakpoint (nav to hamburger), and
     the hero was bundled into it, so between 1024 and 1250 the hero
     collapsed to one column while the copy stayed capped at ~493px.
     That left ~620px of dead space to the right of the text — which is
     most laptop windows. */
  .float-chip { display: none; }
  .hero-tiles { max-width: 480px; margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .standard-grid { grid-template-columns: repeat(4, 1fr); }
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  .steps { grid-template-columns: 1fr; }
  .steps-3 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .standard-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-grid { grid-template-columns: 1fr; }
  .takeaway-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .science-panel { padding: 22px 20px; }
  section { padding: 64px 0; }
  .floating-cta { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 13.5px; }
}

/* Mobile nav open state */
/* A DROPDOWN CARD, NOT A FULL-WIDTH SHEET.
   Edge-to-edge rows are right on a phone and wrong on everything else: at
   1200px the same CSS produced eight bands a metre wide with the label
   stranded at the far left, which reads as a broken page rather than a menu.
   A panel anchored under the control that opened it is what a menu looks
   like, and it stays legible from 1240px down to a phone - where
   `min(300px, 100vw - 24px)` lets it go near-full-width because there it
   should. */
.main-nav.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 70px;
  left: auto;
  right: 12px;
  width: min(300px, calc(100vw - 24px));
  background: #fff;
  padding: 6px 0 0;
  gap: 0;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 20px 48px rgba(40, 41, 114, 0.18);
  /* Eight links plus four buttons come to ~680px, which overflows a laptop
     window in landscape and every phone - the last options simply ran off the
     bottom with nothing to scroll. The LINKS scroll and the buttons never do:
     the reserved 300px keeps the auth block on screen whatever happens above
     it, because a menu that hides Register to show "Why us" has its priorities
     backwards. script.js measures this element AFTER the class lands, so the
     buttons panel still positions itself against the constrained height. */
  /* 300px was 4px short: the buttons panel measures 234px, the card starts
     at 70px, and that left nothing for the bottom edge. 330 keeps ~26px of
     air below the card on the shortest viewport tested. */
  max-height: calc(100vh - 330px);
  min-height: 92px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.main-nav.open a {
  padding: 11px 16px;
  margin: 0 6px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text-dark);
}
.main-nav.open a:hover,
.main-nav.open a:focus-visible { background: var(--bg-light); color: var(--navy); }
/* The underline sweep is a desktop hover affordance; in a stacked list it
   draws a stray line under whichever row the finger last touched. */
.main-nav.open a::after { display: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-blob, .float-chip, .hero-card-bars span, .btn, .step, .feature-card, .standard-card, .floating-cta {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* Header actions (2026-08-18). The row mixed .btn and .btn-sm, so four
   pills sat at two different heights and read as broken rather than as a
   hierarchy. Every header button is now btn-sm; Register is set apart by
   COLOUR alone, which is the distinction that survives at any size.
   align-items: stretch rather than center so the pills share one height
   even if a label wraps to two lines at a narrow width. */
.header-actions {
  align-items: stretch;
  gap: 10px;
}
.header-actions .btn {
  align-items: center;
}

/* The route out of a sign-in page for someone who has no account yet.
   A real block, not a sentence: on this page it is the second most
   likely thing the visitor wants. */
.auth-alt-action {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(91, 107, 118, 0.16);
  text-align: center;
}
.auth-alt-action-label {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.auth-alt-action-note {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Mobile auth actions (2026-08-18). PRE-EXISTING BUG, found while fixing
   the header alignment: below 1080px every header button is display:none
   and the hamburger menu carries only the section anchors, so a phone
   visitor could not sign in OR register from the header at all.

   .header-actions is a SIBLING that follows #main-nav in the markup, so the
   open menu can reveal it with ~ without moving anything in the DOM and
   without touching the desktop layout. The buttons drop below the anchor
   links as a full-width stack, which is the order someone scanning a phone
   menu expects: navigate first, act second. */
/* Widened from 1080 to 1240 with the hamburger (2026-08-20). These two
   numbers MUST move together: the hamburger breakpoint hides the nav and
   the auth buttons, and this block is the only thing that gives the buttons
   back when the menu opens. Left at 1080 while the hamburger moved to 1240,
   every visitor between those widths would have had no way to sign in or
   register from the header at all — the exact failure the note above
   describes, reintroduced at a different width. */
@media (max-width: 1240px) {
  /* The lower half of the same card - same width, same right edge, rounded
     only at the bottom, so the two elements read as one panel with a rule
     across it rather than two cards with a seam. */
  .main-nav.open ~ .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: absolute;
    top: 70px;
    left: auto;
    right: 12px;
    width: min(300px, calc(100vw - 24px));
    padding: 10px 12px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 20px 48px rgba(40, 41, 114, 0.18);
    /* Sits directly under the open nav panel rather than overlapping it. */
    transform: translateY(var(--mobile-nav-height, 0px));
    /* Above the nav panel, so this one's opaque background clips the shadow
       the panel above would otherwise cast across it at the join. */
    z-index: 49;
  }
  .main-nav.open ~ .header-actions .btn-primary,
  .main-nav.open ~ .header-actions .btn-ghost {
    display: inline-flex;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }
  /* THE HAMBURGER WAS ENDING UP IN THE MIDDLE OF THE OPEN MENU. It lives
     inside .header-actions, which is translated down by the height of the
     open nav - so a fixed -60px offset only lifted it back by 60px while the
     panel had moved 300-400px. It landed level with the fifth or sixth link,
     floating at the right, looking like a stray icon rather than the control
     that opened the thing.
     position:fixed takes it out of that translated context entirely and
     anchors it to the viewport, where the sticky header already is - so it
     stays exactly where the finger last pressed it, at any nav length. */
  .main-nav.open ~ .header-actions .nav-toggle {
    position: absolute;
    /* position:fixed does NOT work here. .header-actions carries a
       transform, and a transformed ancestor becomes the containing block for
       fixed descendants - so `fixed` silently behaves like `absolute` against
       the very element we are trying to escape, and the toggle rode down with
       the panel exactly as before.
       So the offset is computed instead: the panel's top sits at
       76px + the nav's height, and the toggle wants to be ~24px down the
       header, which is (24 - 76 - navHeight) above its parent. --mobile-nav-
       height is measured by script.js on open, so this stays correct however
       many links the nav grows. */
    top: calc(-46px - var(--mobile-nav-height, 0px));
    right: 24px;
    z-index: 60;
  }
}

/* Disabled buttons (2026-08-18). PROJECT-WIDE GAP, found from a real
   report: the institution portal's Save logo button is disabled until a
   file is chosen, but looked identical to an active amber button --
   glow and all. A person clicks it, nothing happens, and the reasonable
   conclusion is that the feature is broken.

   Applies to every button in the app, not just that one, because every
   disabled button had the same problem. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  filter: grayscale(0.55);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
  filter: grayscale(0.55);
}

/* Landing page — the General Knowledge honesty block (2026-08-20).
   The one module whose obvious selling point is the claim we refuse to
   make, so the page says so before a parent pays. */
.gk-honesty {
  margin-top: 34px;
  border: 1px solid rgba(40, 41, 114, 0.14);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 26px 30px 28px;
}
.gk-honesty-title {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 18px; font-weight: 700; color: var(--navy-dark); margin: 0 0 4px;
}
.gk-honesty-grid {
  display: grid; gap: 22px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gk-honesty-h {
  font-size: 14px; font-weight: 700; color: var(--teal); margin: 0 0 7px;
}
.gk-honesty-p { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* Four tiers rather than three (2026-08-20). auto-fit rather than a fixed
   four columns: at 1100px four cards would be 250px each and the feature
   lists wrap to five lines, so they fold to two rows instead. */
/* THE CARDS WERE STACKING ONE PER ROW FROM 1250px DOWN, and the columns were
   not the reason. The 1250px block sets `.pricing-grid { max-width: 460px }`
   - written when this section had three cards and needed reining in - and
   .pricing-grid-4 overrode grid-template-columns but never that cap. auto-fit
   then did exactly as told: inside 460px, one 250px column is all that fits.
   The override has to clear the width too, or the columns it declares can
   never happen. */
.pricing-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}
/* One card alone on a second row looks like a mistake rather than a layout,
   so below the width where four fit, go to a deliberate 2x2. */
/* The trial banner tracks the grid's width at every step. Left at a fixed
   760px it overhung the 2x2 by 140px, so the thing meant to introduce the
   cards sat wider than all of them. */
@media (max-width: 1000px) {
  .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
  .pricing-trial { max-width: 620px; }
}
@media (max-width: 560px) {
  .pricing-grid-4 { grid-template-columns: 1fr; max-width: 420px; }
  .pricing-trial { max-width: 420px; }
}
.pricing-grid-4 .pricing-card.reveal:nth-child(4) { transition-delay: 0.3s; }

.pricing-monthly-note {
  text-align: center;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}


@media (max-width: 640px) {
}

/* ---- Account chip + dropdown --------------------------------------------
   Lives here, not in auth.css, because index.html carries this header too
   once a parent is signed in and does not load auth.css. Every page that
   uses it loads style.css. */
.profile-account {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-account-email {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Profile menu (header, top right) — consolidates account/admin actions
   that used to be separate buttons in the header row. */
.profile-menu { position: relative; }
.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
.profile-chip:hover { border-color: var(--teal); }
.profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.profile-chip .caret { font-size: 10px; color: var(--text-muted); }

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  z-index: 20;
}
.profile-dropdown.open { display: block; }
.profile-dropdown-email {
  padding: 10px 12px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  word-break: break-all;
}
.profile-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-dark);
  cursor: pointer;
}
.profile-dropdown-item:hover { background: var(--bg-light); }
.profile-dropdown-item.danger { color: #B3261E; }
.profile-dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }