/* ===========================================================================
   LEGACY COMPATIBILITY — re-skins old per-page class names with the new
   design system. Loaded AFTER site.css so it can refine specific surfaces.
   =========================================================================== */

/* Legacy palette aliases — many inline styles across blog posts and a few
   subject pages still reference the old palette variables. Map each to a
   new design-system token so old markup renders correctly without
   rewriting every inline style. */
:root {
  --navy: var(--plum);
  --navy-mid: var(--plum-mid);
  --teal: var(--cyan-deep);
  --teal-light: var(--cyan);
  --teal-pale: var(--bg-alt);
  --orange: #F59E0B;
  --white: #FFFFFF;
  --off-white: var(--bg);
  --gray-200: var(--line);
  --text: var(--ink);
  --text-light: var(--ink-soft);
}

/* ── Old urgency strip → new announce ── */
.urgency-strip {
  background: var(--grad-cyan) !important;
  color: white !important;
  text-align: center;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  height: auto !important;
}
.urgency-strip strong { font-weight: 700; }
.urgency-strip span { opacity: 1; font-weight: 400; }

/* ── Breadcrumb ── */
.breadcrumb {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 24px !important;
  font-size: 12px !important;
  color: var(--ink-mute) !important;
  text-align: center;
}
.breadcrumb a { color: var(--ink-soft) !important; transition: color .2s; }
.breadcrumb a:hover { color: var(--plum) !important; }
.breadcrumb span { margin: 0 6px; opacity: .5; }

/* ── Old nav (subject pages) → reskin to match site-nav ── */
body > nav:not(.site-nav) {
  position: sticky !important;
  top: 0; z-index: 100;
  background: rgba(251,249,254,.92) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  padding: 0 !important;
  height: auto !important;
  display: block !important;
  transition: border-color .25s var(--ease);
}
/* The homepage's <nav><ul class="nav-menu"> sits INSIDE <header class="site-nav">
   and is already styled correctly by site.css. We do nothing to it here.
   The selectors below scope strictly to "body > nav:not(.site-nav)" — direct
   children of body only — so the homepage's nested nav is untouched. */

body > nav:not(.site-nav) {
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 100%;
}
body > nav:not(.site-nav)::before { content: ''; }
body > nav:not(.site-nav) .nav-logo img { height: 110px !important; width: auto !important; }
@media (max-width: 600px) { body > nav:not(.site-nav) .nav-logo img { height: 80px !important; } }
body > nav:not(.site-nav) .nav-cta,
body > nav:not(.site-nav) .mob-cta {
  background: var(--cyan) !important;
  color: white !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transition: all .2s var(--ease) !important;
  box-shadow: 0 8px 22px rgba(36,168,228,.32);
}
body > nav:not(.site-nav) .nav-cta:hover,
body > nav:not(.site-nav) .mob-cta:hover {
  background: var(--cyan-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(36,168,228,.42) !important;
}
body > nav:not(.site-nav) .nav-links-desk a {
  color: var(--ink-soft) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color .2s var(--ease) !important;
  position: relative;
  padding: 6px 0 !important;
}
body > nav:not(.site-nav) .nav-links-desk a:hover { color: var(--plum) !important; }

body > nav:not(.site-nav) .hamburger {
  width: 42px; height: 42px;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
}
body > nav:not(.site-nav) .hamburger span { background: var(--plum) !important; }

.mobile-menu {
  background: rgba(251,249,254,.98) !important;
  backdrop-filter: blur(20px);
  border-bottom-color: var(--line) !important;
}
.mobile-menu a {
  color: var(--ink) !important;
  border-bottom-color: var(--line-soft) !important;
  font-size: 15px !important;
  padding: 14px 0 !important;
}
.mobile-menu a.m-cta,
.mobile-menu a.mob-cta-link {
  color: white !important;
  background: var(--plum) !important;
  border: none !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  margin-top: 12px !important;
  padding: 14px !important;
  box-shadow: var(--shadow-plum);
}

/* ── Hero (subject/region/curriculum pages) ── */
.hero {
  background: var(--surface-dark) !important;
  color: var(--ink-on-dark) !important;
  padding: clamp(60px, 9vw, 110px) 24px clamp(60px, 9vw, 100px) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-aurora);
  animation: aurora 18s ease-in-out infinite alternate;
  opacity: .85;
  width: auto !important; height: auto !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: 0 !important;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(36,168,228,.18), transparent 70%),
    linear-gradient(180deg, rgba(31,20,48,0) 0%, rgba(31,20,48,.55) 100%);
  width: auto !important; height: auto !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: 0 !important;
}
.hero-badge {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: rgba(36,168,228,.12) !important;
  border: 1px solid rgba(36,168,228,.32) !important;
  color: #7DD3FC !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  text-transform: none !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 22px !important;
  animation: fadeUp .5s ease both;
}
.hero h1 {
  font-family: var(--font-display) !important;
  color: white !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  max-width: 880px;
  margin: 0 auto 22px !important;
}
.hero h1 span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.hero-sub {
  font-size: clamp(15px, 1.7vw, 18px) !important;
  color: rgba(255,255,255,.78) !important;
  max-width: 640px !important;
  margin: 0 auto 18px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
.hero-sub a, .hero-online-pill, .hero-scarcity, .hero-regions { color: #7DD3FC; }
.hero-online-pill {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 12px !important; font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
}
.hero-scarcity {
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 12px !important;
}
.hero-regions {
  font-size: 13px !important;
  color: rgba(255,255,255,.78) !important;
  margin-bottom: 30px !important;
  letter-spacing: .02em;
  max-width: 760px;
  margin-left: auto !important; margin-right: auto !important;
  line-height: 1.8;
}
.hero-regions a { color: #7DD3FC !important; transition: color .2s; text-decoration: none; }
.hero-regions a:hover { color: white !important; }
.hero-btns {
  display: flex !important;
  gap: 12px !important;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.btn-primary {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: var(--cyan) !important;
  color: white !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .2s var(--ease) !important;
  box-shadow: var(--shadow-cyan) !important;
  border: none !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--cyan-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(36,168,228,.45) !important;
}
.btn-secondary {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  color: white !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s var(--ease) !important;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.32) !important;
}

/* Hero stats */
.hero-stats {
  display: flex !important;
  justify-content: center !important;
  gap: clamp(24px, 4vw, 56px) !important;
  margin-top: 48px !important;
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.6vw, 42px) !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #7DD3FC 0%, #C9BCD8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  line-height: 1 !important;
  display: block;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 11px !important;
  color: rgba(255,255,255,.55) !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  display: block;
}

/* ── About strip ── */
.about-strip {
  background: var(--surface-dark) !important;
  padding: clamp(48px, 7vw, 72px) 24px !important;
  color: var(--ink-on-dark);
}
.about-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 36px !important;
}
@media (max-width: 760px) { .about-inner { grid-template-columns: 1fr !important; gap: 28px !important; } }
.about-item-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: #7DD3FC !important;
  margin-bottom: 10px !important;
}
.about-item p {
  font-size: 15px !important;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.7 !important;
}
.about-item a { color: #7DD3FC !important; font-weight: 600; transition: opacity .2s; }
.about-item a:hover { opacity: .8; }
.trust-urgency {
  text-align: center;
  font-size: 13px !important;
  color: rgba(255,255,255,.4) !important;
  font-style: normal;
  margin-top: 32px !important;
}

/* ── Section base ── */
/* NOTE: do NOT set a background here — that overrides .bg-darker /
   .bg-plum / .bg-lavender modifiers because legacy.css loads after
   site.css. Background is the section's own responsibility. */
.section {
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.section-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
}
.section-label {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--cyan-deep) !important;
  margin-bottom: 14px !important;
}
.section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 16px !important;
}
.section-title span {
  color: var(--cyan-deep) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.section-body {
  font-size: clamp(15px, 1.6vw, 18px) !important;
  color: var(--ink-soft) !important;
  line-height: 1.7 !important;
  max-width: 64ch !important;
}
.section-body a { color: var(--cyan-deep) !important; font-weight: 600; border-bottom: 1px solid currentColor; }

/* Dark process section */
.process {
  background: var(--surface-dark) !important;
  color: var(--ink-on-dark);
}
.process .section-label { color: #7DD3FC !important; }
.process .section-title { color: white !important; }
.process .section-title span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.process .section-body { color: rgba(255,255,255,.65) !important; }

/* ── Boards grid (subject pages) ── */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 44px !important;
}
.board-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--cyan) !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.board-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}
.board-card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--cyan-deep) !important;
  margin-bottom: 10px !important;
}
.board-card h3 {
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
}
.board-card ul { list-style: none; padding: 0; }
.board-card ul li {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  display: flex; gap: 8px; align-items: flex-start;
}
.board-card ul li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.board-card ul li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  display: inline-block; margin-top: 7px; flex-shrink: 0;
}

/* ── Pain cards ── */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 36px !important;
}
.pain-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--plum-soft) !important;
  border-radius: var(--radius) !important;
  padding: 22px 24px !important;
  font-size: 15px !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
  font-style: normal;
  position: relative;
  transition: border-left-color .25s var(--ease), transform .25s var(--ease);
}
.pain-card::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--plum-soft);
  opacity: .3;
  position: absolute;
  top: 0; left: 12px;
  line-height: 1;
}
.pain-card:hover { border-left-color: var(--cyan) !important; transform: translateY(-2px); }

/* ── Syllabus grid ── */
.syllabus-section { background: var(--bg-alt) !important; }
.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 36px !important;
}
.syl-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  transition: box-shadow .25s var(--ease);
}
.syl-card:hover { box-shadow: var(--shadow); }
.syl-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--plum) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--bg-alt) !important;
}
.syl-card ul { list-style: none; padding: 0; }
.syl-card ul li {
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  padding: 6px 0 !important;
  display: flex; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.syl-card ul li:last-child { border-bottom: none; }
.syl-card ul li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0; margin-top: 9px;
}

/* ── Steps grid (process / framework) ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 44px !important;
}
/* Default (light background) — used by region & subject pages */
.step-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--plum-soft) !important;
}
.step-num {
  width: 44px !important;
  height: 44px !important;
  background: var(--grad-cyan) !important;
  color: white !important;
  border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 22px rgba(36,168,228,.32);
}
.step-card h3 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
  line-height: 1.3;
}
.step-card p {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
}
.step-card a { color: var(--cyan-deep) !important; border-bottom: 1px solid currentColor; }

/* Dark-background variant — used inside any dark band */
.process .step-card,
.process-section .step-card,
.bg-plum .step-card,
.bg-darker .step-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.process .step-card:hover,
.process-section .step-card:hover,
.bg-plum .step-card:hover,
.bg-darker .step-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-4px);
  box-shadow: none !important;
}
.process .step-card h3,
.process-section .step-card h3,
.bg-plum .step-card h3,
.bg-darker .step-card h3 { color: white !important; }
.process .step-card p,
.process-section .step-card p,
.bg-plum .step-card p,
.bg-darker .step-card p { color: rgba(255,255,255,.78) !important; }
.process .step-card a,
.process-section .step-card a,
.bg-plum .step-card a,
.bg-darker .step-card a { color: #7DD3FC !important; }

/* ── Windows / Timeline ── */
.windows-section {
  background: var(--bg-alt) !important;
}
.windows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 44px !important;
}
.window-card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--cyan) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.window-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.window-card.urgent {
  border-top-color: #F59E0B !important;
  background: linear-gradient(180deg, #FFFBEB 0%, var(--surface) 60%) !important;
}
.window-date {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
  line-height: 1.2;
}
.window-status {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
  background: rgba(36,168,228,.10) !important;
  color: var(--cyan-deep) !important;
}
.window-card.urgent .window-status { background: rgba(245,158,11,.12) !important; color: #B45309 !important; }
.window-desc {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
}
.window-cta {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin-top: 16px !important;
  color: var(--cyan-deep) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: gap .2s var(--ease);
}
.window-cta:hover { gap: 10px; }

/* ── FAQ ── */
.faq-section { background: var(--bg) !important; }
.faq-list {
  margin-top: 40px !important;
  display: flex; flex-direction: column;
  gap: 12px !important;
  max-width: 880px;
}
.faq-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item.open {
  border-color: var(--plum-soft) !important;
  box-shadow: var(--shadow);
}
.faq-q {
  width: 100%; text-align: left;
  background: none !important;
  border: none !important;
  padding: 22px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-sans) !important;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--plum) !important; }
.faq-chevron {
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--cyan) !important;
  transition: transform .25s var(--ease);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--plum) !important; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner {
  padding: 0 24px 22px !important;
  font-size: 15px !important;
  color: var(--ink-soft) !important;
  line-height: 1.7 !important;
}
.faq-a-inner a { color: var(--cyan-deep) !important; font-weight: 500; border-bottom: 1px solid currentColor; }

/* ── CTA section ── */
.cta-section {
  background: var(--grad-cta) !important;
  color: white;
  text-align: center;
  padding: clamp(64px, 9vw, 110px) 24px !important;
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-aurora); opacity: .4;
  animation: aurora 18s ease-in-out infinite alternate;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section .section-label,
.cta-section .section-label[style*="teal"] {
  color: #7DD3FC !important;
}
.cta-section .section-title {
  color: white !important;
  max-width: 720px; margin: 0 auto 18px !important;
}
.cta-section .section-title span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.cta-section .section-body,
.cta-section .cta-body {
  color: rgba(255,255,255,.78) !important;
  margin: 0 auto 36px !important;
  text-align: center !important;
  max-width: 640px;
  font-size: 16px !important;
}
.cta-section .btn-primary {
  background: white !important;
  color: var(--plum) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  padding: 16px 30px !important;
}
.cta-section .btn-primary:hover {
  background: white !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}
.next-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px !important;
  max-width: 760px;
  margin: 0 auto 36px !important;
}
@media (max-width: 700px) {
  .next-steps { grid-template-columns: 1fr; }
}
.next-step {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  display: flex !important;
  gap: 12px;
  text-align: left !important;
  align-items: flex-start;
  max-width: none !important;
}
.next-step::after { display: none !important; }
.next-step-num {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--cyan) !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0 !important;
}
.next-step-text {
  font-size: 13px !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.5 !important;
}
.next-step-text strong {
  display: block;
  color: white !important;
  font-size: 14px !important;
  margin-bottom: 3px !important;
  font-weight: 600;
}
.pricing-signal {
  margin-top: 22px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
}

/* ── Honesty close strip ── */
.honesty-close {
  background: var(--bg) !important;
  padding: 48px 24px !important;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.honesty-close p {
  max-width: 720px; margin: 0 auto;
  font-size: 16px !important;
  color: var(--ink-soft) !important;
  line-height: 1.7 !important;
  font-style: normal;
}

/* ── Old footer (subject pages — single row) ── */
footer:not(.site-footer) {
  background: var(--surface-darker) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 48px 24px 36px !important;
  text-align: center;
  color: rgba(255,255,255,.5);
}
footer:not(.site-footer) .footer-logo {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 22px;
}
footer:not(.site-footer) .footer-logo img { height: 60px !important; width: auto !important; }
footer:not(.site-footer) .footer-logo span {
  font-family: var(--font-display) !important;
  color: white !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
footer:not(.site-footer) .footer-links {
  display: flex !important;
  justify-content: center !important;
  gap: 6px 22px !important;
  margin-bottom: 22px;
  flex-wrap: wrap;
  max-width: 980px;
  margin-left: auto !important; margin-right: auto !important;
}
footer:not(.site-footer) .footer-links a {
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
  transition: color .2s var(--ease) !important;
}
footer:not(.site-footer) .footer-links a:hover { color: #7DD3FC !important; }
footer:not(.site-footer) .footer-copy {
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Floating WhatsApp ── */
.wa-float {
  position: fixed; bottom: 22px; right: 22px;
  z-index: 998;
  width: 58px; height: 58px;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: white !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37,211,102,.45) !important;
  transition: transform .25s var(--ease-snap), box-shadow .25s var(--ease) !important;
  text-decoration: none !important;
}
.wa-float:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 16px 36px rgba(37,211,102,.55) !important;
}
.wa-float::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.35);
  animation: wa-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}

/* ── Region-page specific (where applicable) ── */
.cta-body { color: var(--ink-soft); }
.cta-section .cta-body { color: rgba(255,255,255,.78) !important; }

/* ── Collapsibles compat (mobile only as per old behavior) ── */
.toggle-btn {
  display: none;
  align-items: center; gap: 6px;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cyan-deep) !important;
  background: rgba(36,168,228,.08) !important;
  border: 1px solid rgba(36,168,228,.22) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s var(--ease) !important;
  flex-shrink: 0; margin-top: 6px;
}
.toggle-btn svg { width: 12px !important; height: 12px !important; transition: transform .25s var(--ease) !important; }
.sec-collapsible.open .toggle-btn svg { transform: rotate(180deg); }
.sec-collapsible.open .toggle-btn {
  border-color: var(--plum) !important;
  color: var(--plum) !important;
  background: var(--bg-alt) !important;
}
.toggle-btn .lbl-more { display: inline; }
.toggle-btn .lbl-less { display: none; }
.sec-collapsible.open .toggle-btn .lbl-more { display: none; }
.sec-collapsible.open .toggle-btn .lbl-less { display: inline; }
/* Desktop: sections stay fully open. Mobile: secondary sections fold
   (small screens have real space constraints, desktop doesn't). */
.sec-peek { display: none; }
.sec-body { display: block; overflow: visible; max-height: none; opacity: 1; }
.sec-toggle {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
@media (max-width: 768px) {
  .sec-toggle { cursor: pointer; user-select: none; padding-bottom: 4px; }
  .toggle-btn { display: inline-flex !important; }
  .sec-peek {
    display: block; overflow: hidden; max-height: 64px;
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    pointer-events: none; margin-top: 12px;
  }
  .sec-collapsible.open .sec-peek { display: none; }
  .sec-body {
    overflow: hidden; max-height: 0 !important; opacity: 0;
    transition: max-height .55s var(--ease), opacity .3s var(--ease);
  }
  .sec-collapsible.open .sec-body { max-height: 6000px !important; opacity: 1; overflow: visible; }
  .process .toggle-btn, .testimonials .toggle-btn, .uni-section .toggle-btn, .homeschool-section .toggle-btn {
    color: #7DD3FC !important;
    background: rgba(36,168,228,.10) !important;
    border-color: rgba(36,168,228,.30) !important;
  }
  .process .sec-collapsible.open .toggle-btn,
  .testimonials .sec-collapsible.open .toggle-btn,
  .homeschool-section .sec-collapsible.open .toggle-btn {
    color: #7DD3FC !important;
    background: rgba(36,168,228,.18) !important;
    border-color: #7DD3FC !important;
  }
}

/* ── Blog post / article page ── */
.blog-hero {
  background: var(--grad-cta) !important;
  color: white;
  padding: clamp(60px, 8vw, 100px) 24px clamp(48px, 7vw, 72px) !important;
  position: relative; overflow: hidden;
}
.blog-hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-aurora); opacity: .55;
  animation: aurora 20s ease-in-out infinite alternate;
}
.blog-hero > * { position: relative; z-index: 1; }
.blog-hero-inner { max-width: 760px !important; margin: 0 auto !important; }
.blog-tag {
  display: inline-block;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 20px !important;
}
.blog-hero h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  margin-bottom: 18px !important;
  color: white !important;
}
.blog-hero h1 span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.blog-hero p {
  font-size: 17px !important;
  color: rgba(255,255,255,.82) !important;
  line-height: 1.6 !important;
  max-width: 60ch;
}
.blog-meta {
  font-size: 13px !important;
  color: rgba(255,255,255,.6) !important;
  margin-top: 18px !important;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.blog-body, .article-body-wrap {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 80px) 24px !important;
  background: var(--bg);
}
.blog-body h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 2em 0 .8em !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.blog-body h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 2.2vw, 23px) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 1.6em 0 .6em !important;
  line-height: 1.3 !important;
}
.blog-body p {
  font-size: 17px !important;
  color: var(--ink) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.2em !important;
}
.blog-body p strong { color: var(--ink) !important; font-weight: 600 !important; }
/* In-article text links — but NOT inline-styled button-style links
   (those have their own background + color and should keep them). */
.blog-body a:not([style*="background"]) {
  color: var(--cyan-deep) !important;
  border-bottom: 1px solid currentColor !important;
  transition: color .2s var(--ease) !important;
}
.blog-body a:not([style*="background"]):hover { color: var(--plum) !important; }
/* Buttons styled with inline backgrounds keep their own colour (usually white)
   and no underline. */
.blog-body a[style*="background"] {
  border-bottom: none !important;
}
.blog-body ul, .blog-body ol { padding-left: 1.5em !important; margin-bottom: 1.2em !important; }
.blog-body li {
  font-size: 17px !important;
  color: var(--ink) !important;
  line-height: 1.75 !important;
  margin-bottom: .5em !important;
}
.blog-body li strong { color: var(--ink) !important; font-weight: 600; }
.callout {
  background: var(--bg-alt) !important;
  border-left: 4px solid var(--cyan) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 20px 24px !important;
  margin: 2em 0 !important;
}
.callout p { margin-bottom: 0 !important; color: var(--ink) !important; }
.callout strong { color: var(--plum) !important; font-weight: 700 !important; }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0 !important;
  font-size: 15px !important;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.comparison-table th {
  background: var(--plum) !important;
  color: white !important;
  padding: 14px 18px !important;
  text-align: left;
  font-weight: 600 !important;
  letter-spacing: .01em;
}
.comparison-table td {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}
.comparison-table tr:nth-child(even) td { background: var(--bg-alt) !important; }
.comparison-table td:first-child { font-weight: 600 !important; color: var(--ink) !important; }
.cta-box {
  background: var(--grad-cta) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  text-align: center;
  margin: 3em 0 !important;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-aurora); opacity: .3;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h3 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  color: white !important;
  margin-bottom: 12px !important;
  font-weight: 600;
}
.cta-box p {
  color: rgba(255,255,255,.78) !important;
  margin-bottom: 22px !important;
  font-size: 15px !important;
}
.cta-box a {
  background: white !important;
  color: var(--plum) !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: inline-block;
  border: none !important;
  border-bottom: none !important;
  transition: all .2s var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.cta-box a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  color: var(--plum) !important;
}
.hero-img-placeholder {
  width: 100%; height: 220px !important;
  background: var(--bg-alt) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 24px !important;
  color: var(--plum) !important;
  position: relative; overflow: hidden;
}
.hero-img-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(36,168,228,.20), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(167,139,202,.25), transparent 50%);
}
.hero-img-placeholder > * { position: relative; z-index: 1; }

/* Blog index card (.blog-card / .blog-grid in blog/) */
.blog-section { background: var(--bg) !important; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 36px !important;
}
.blog-card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  text-decoration: none !important;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-img {
  height: 160px !important;
  background: var(--bg-alt) !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 44px !important;
  position: relative; overflow: hidden;
  color: var(--plum) !important;
}
.blog-img::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(36,168,228,.20), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(167,139,202,.25), transparent 50%);
}
.blog-img > * { position: relative; z-index: 1; }
.blog-body { padding: 22px !important; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.blog-body p { font-size: 15px !important; }
.blog-tag {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase;
  color: var(--cyan-deep) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.blog-title {
  font-family: var(--font-display) !important;
  font-size: 19px !important; font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.blog-card:hover .blog-title { color: var(--plum) !important; }
.blog-excerpt {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  line-height: 1.6 !important;
  flex: 1;
}
.blog-more {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cyan-deep) !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px !important;
  transition: gap .2s var(--ease);
}
.blog-card:hover .blog-more { gap: 10px; }

/* Hide old fadeUp animations (we use reveal) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Body padding for mobile sticky CTA, only when we add it */
.has-mobile-cta { padding-bottom: 76px; }
@media (min-width: 920px) { .has-mobile-cta { padding-bottom: 0; } }

/* ===========================================================================
   ADDITIONAL LEGACY MAPPINGS — curriculum + region pages
   =========================================================================== */

/* ── City story (2-col text + signals sidebar) ── */
.city-story {
  background: var(--bg) !important;
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.city-story-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 56px !important;
  align-items: start;
}
@media (max-width: 880px) {
  .city-story-inner { grid-template-columns: 1fr; gap: 36px !important; }
}
.city-story-text h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 22px !important;
}

/* ── "Why Velocity" / "What Makes This Work" — dark band + 4-card grid ── */
.why-city {
  background: var(--surface-dark) !important;
  color: var(--ink-on-dark);
  padding: clamp(56px, 8vw, 96px) 24px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.why-city::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-aurora);
  opacity: .25;
}
.why-city-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  position: relative;
}
.why-city-inner > .section-label {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: #7DD3FC !important;
  margin-bottom: 12px !important;
}
.why-city-inner > h2,
.why-city-inner > .section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.8vw, 42px) !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em;
  margin-bottom: 40px !important;
  max-width: 760px;
}
.why-city-inner > h2 span,
.why-city-inner > .section-title span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
/* The 4-card grid inside .why-city */
.why-city .why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 0 !important;
}
.why-city .why-card {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 28px !important;
}
.why-city .why-card:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(125,211,252,.30) !important;
  transform: translateY(-3px);
  box-shadow: none !important;
}
.why-city .why-card h3 { color: white !important; }
.why-city .why-card p { color: rgba(255,255,255,.78) !important; }
.why-city .why-icon {
  background: rgba(36,168,228,.18) !important;
  color: #7DD3FC !important;
}
.why-city .why-card:hover .why-icon {
  background: var(--cyan) !important;
  color: white !important;
}
.city-story-text h2 span { color: var(--cyan-deep) !important; font-style: normal !important; font-weight: 700 !important; }
.city-story-text > p, .why-city-inner > p {
  font-size: 16px !important;
  color: var(--ink-soft) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.2em !important;
}
.city-story-text p strong { color: var(--ink) !important; font-weight: 600; }
.city-story-text a, .why-city-inner a { color: var(--cyan-deep) !important; border-bottom: 1px solid currentColor; font-weight: 500; }

/* signals card on the right (city-signals / signal blocks) */
.city-signals {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  display: flex; flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 90px;
}
@media (max-width: 880px) { .city-signals { position: static; } }
.signal {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line-soft);
}
.signal:last-child { border-bottom: none; padding-bottom: 0; }
.signal:first-child { padding-top: 0; }
.signal-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--cyan-deep) !important;
  margin-bottom: 4px !important;
  display: block;
}
.signal-val {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  line-height: 1.55 !important;
}

/* ── Popular subjects grid (curriculum pages) ── */
.popular-subjects {
  background: var(--bg-alt) !important;
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.pop-subj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 36px !important;
}
.pop-subj-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 22px 24px !important;
  display: flex; flex-direction: column;
  gap: 6px;
  text-decoration: none !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pop-subj-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--cyan) !important;
}
.pop-subj-name {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.pop-subj-card:hover .pop-subj-name { color: var(--plum) !important; }
.pop-subj-boards {
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 8px;
}
.pop-subj-arrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cyan-deep) !important;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s var(--ease);
}
.pop-subj-card:hover .pop-subj-arrow { gap: 10px; }

/* ── Schools section (region pages) ── */
.schools-section {
  background: var(--bg) !important;
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.schools-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
}
.schools-grid {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.school-pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  transition: all .2s var(--ease);
}
.school-pill:hover { border-color: var(--cyan); color: var(--cyan-deep); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ── "Why us" cards ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 44px !important;
}
.why-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-icon {
  width: 48px; height: 48px;
  background: var(--bg-alt) !important;
  color: var(--plum) !important;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px !important;
  margin-bottom: 18px !important;
  transition: all .3s var(--ease);
}
.why-card:hover .why-icon { background: var(--cyan) !important; color: white !important; transform: scale(1.06); }
.why-card h3 {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.why-card p {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
}

/* ── Homeschool section — works on EITHER light or dark backgrounds ── */
.homeschool-inner {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) { .homeschool-inner { grid-template-columns: 1fr; gap: 40px; } }

/* Light-bg default (Riyadh and most region/subject pages use a white parent) */
.homeschool-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(36,168,228,.10);
  border: 1px solid rgba(36,168,228,.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cyan-deep);
  margin-bottom: 18px;
}
.homeschool-text h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 3.6vw, 38px) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  margin-bottom: 18px !important;
  letter-spacing: -0.02em;
}
.homeschool-text h2 span {
  color: var(--cyan-deep) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.homeschool-text p {
  font-size: 16px !important;
  color: var(--ink-soft) !important;
  line-height: 1.7 !important;
  margin-bottom: 1em !important;
}
.homeschool-text a { color: var(--cyan-deep) !important; border-bottom: 1px solid currentColor; }
.homeschool-points { display: flex; flex-direction: column; gap: 14px; }
.homeschool-point {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.homeschool-point:hover { border-color: var(--plum-soft); transform: translateX(2px); }
.homeschool-point-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--grad-cyan);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.homeschool-point-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.homeschool-point-text strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; font-size: 15px; }

/* Dark-bg variant — used if a page wraps homeschool in .homeschool-section */
.homeschool-section {
  background: var(--surface-dark) !important;
  color: var(--ink-on-dark);
  padding: clamp(56px, 8vw, 96px) 24px !important;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.homeschool-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-aurora); opacity: .35;
}
.homeschool-section .homeschool-badge {
  background: rgba(36,168,228,.15);
  color: #7DD3FC;
}
.homeschool-section .homeschool-text h2 { color: white !important; }
.homeschool-section .homeschool-text h2 span { color: #7DD3FC !important; }
.homeschool-section .homeschool-text p { color: rgba(255,255,255,.78) !important; }
.homeschool-section .homeschool-text a { color: #7DD3FC !important; }
.homeschool-section .homeschool-point {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.homeschool-section .homeschool-point:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.homeschool-section .homeschool-point-text { color: rgba(255,255,255,.85); }
.homeschool-section .homeschool-point-text strong { color: white; }

/* ── process-section variant (separate from .process) ── */
.process-section {
  background: var(--surface-dark) !important;
  color: var(--ink-on-dark);
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.process-section .section-label { color: #7DD3FC !important; }
.process-section .section-title { color: white !important; }
.process-section .section-title span {
  color: #7DD3FC !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.process-section .section-body { color: rgba(255,255,255,.65) !important; }

/* ── hero-pill / hero-sub-secondary (curriculum pages) ── */
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  font-size: 12px; font-weight: 500;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hero-sub-secondary {
  font-size: 14px !important;
  color: rgba(255,255,255,.6) !important;
  margin-top: 8px !important;
  margin-bottom: 28px !important;
  max-width: 60ch;
  margin-left: auto !important; margin-right: auto !important;
  line-height: 1.6;
}

/* ── Generic fallback for naked sections (when no .section wrapper) ── */
section:not([class*="hero"]):not([class*="homeschool"]):not([class*="cta-"]):not([class*="city-story"]):not([class*="why-city"]):not([class*="schools-"]):not([class*="popular-"]):not([class*="process-"]) > h2:first-child,
section:not([class*="hero"]):not([class*="homeschool"]):not([class*="cta-"]):not([class*="city-story"]):not([class*="why-city"]):not([class*="schools-"]):not([class*="popular-"]):not([class*="process-"]) > .section-label:first-child {
  max-width: var(--container);
  padding-left: 24px; padding-right: 24px;
  margin-left: auto; margin-right: auto;
}

/* ── Comprehensive fallback for paragraphs that aren't in a known wrapper
       (so curriculum/region body text gets a comfortable max-width) ── */
section:not([class*="cta-"]) > p {
  max-width: var(--container-narrow);
  margin-left: auto; margin-right: auto;
  padding: 0 24px;
}

/* ── Related-content rails (blog posts, subject pages, region pages) ── */
.related-rail {
  background: var(--bg-alt);
  padding: clamp(48px, 7vw, 80px) 24px;
  border-top: 1px solid var(--line);
}
.related-rail .wrap { max-width: var(--container); margin: 0 auto; }
.related-head { margin-bottom: 32px; max-width: 680px; }
.related-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: 12px;
}
.related-h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.related-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--cyan);
}
.related-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}
.related-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.related-card:hover .related-title { color: var(--plum); }
.related-more {
  font-size: 13px; font-weight: 700;
  color: var(--cyan-deep);
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s var(--ease);
}
.related-card:hover .related-more { gap: 10px; }

/* ─────────────────────────────────────────────────────────────────────
   BLOG INDEX (new) — dark-top card pattern per reference design
   Cards: dark plum top with category pill + title; light bottom with
   excerpt + "Read Guide →" link.
   ───────────────────────────────────────────────────────────────────── */

/* The blog-index hero — keep the existing .blog-hero look but tune it */
.blog-hero { padding: clamp(72px, 9vw, 110px) 24px clamp(56px, 8vw, 84px) !important; }
.blog-hero-inner { max-width: 880px !important; text-align: center; }
.blog-hero .blog-tag {
  display: inline-block;
  background: rgba(36,168,228,.14) !important;
  border: 1px solid rgba(36,168,228,.35) !important;
  color: #7DD3FC !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 24px !important;
}

/* Blog index card grid — wider gap, max 3 cols */
.blog-section { background: var(--bg) !important; padding: clamp(48px, 6vw, 80px) 24px !important; }
.blog-section .blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  gap: 24px !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
}

/* New card style: two-tone with dark top */
.blog-section .blog-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-section .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(60,36,84,.18);
  border-color: var(--plum-soft) !important;
}
.blog-card-top {
  background: #0E0820;
  padding: 36px 32px 40px;
  position: relative;
  min-height: 230px;
  display: flex; flex-direction: column;
  gap: 22px;
  isolation: isolate;
}
.blog-card-top::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(36,168,228,.15), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(167,139,202,.13), transparent 60%);
  pointer-events: none;
}
.blog-card-cat {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
  color: #5FB3D9;
  background: transparent;
  border: 1.5px solid rgba(95,179,217,.55);
  padding: 7px 16px;
  border-radius: 999px;
}
.blog-card-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.blog-card-body {
  padding: 28px 30px 30px;
  display: flex; flex-direction: column;
  flex: 1;
  gap: 18px;
  background: var(--surface);
}
.blog-card-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.blog-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--cyan-deep);
  letter-spacing: -0.005em;
  margin-top: auto;
  transition: gap .25s var(--ease);
}
.blog-card-link svg { transition: transform .25s var(--ease); }
.blog-section .blog-card:hover .blog-card-link { gap: 12px; }
.blog-section .blog-card:hover .blog-card-link svg { transform: translateX(3px); }

/* Override the older legacy.css blog-img / blog-tag stuff so these new
   cards aren't accidentally restyled by the older selectors. */
.blog-section .blog-card .blog-img,
.blog-section .blog-card .blog-body { all: revert; }

/* Optional filter bar for the blog index */
.blog-filter {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto 40px;
  padding: 0 24px;
}
.blog-filter-btn {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.blog-filter-btn:hover { color: var(--plum); border-color: var(--plum-soft); }
.blog-filter-btn.active {
  background: var(--plum);
  color: white;
  border-color: var(--plum);
}

@media (max-width: 600px) {
  .blog-card-top { padding: 28px 24px 32px; min-height: 180px; }
  .blog-card-title { font-size: 20px; }
  .blog-card-body { padding: 24px; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile-only section collapse (sections with data-collapse="mobile")
   Desktop: fully expanded, toggle button hidden.
   Mobile: section body collapses to a peek + Read More button.
   ───────────────────────────────────────────────────────────────────── */
.mobile-collapse-toggle { display: none; }

@media (max-width: 768px) {
  section[data-collapse="mobile"] {
    position: relative;
    max-height: 260px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    padding-bottom: 60px !important;
    transition: max-height .5s var(--ease);
  }
  section[data-collapse="mobile"].mobile-collapse-open {
    max-height: 8000px !important;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: clamp(56px, 8vw, 96px) !important;
  }
  .mobile-collapse-toggle {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex !important; align-items: center; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--cyan);
    color: var(--cyan-deep);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(36,168,228,.20);
    z-index: 3;
    white-space: nowrap;
  }
  /* On dark sections, invert the button for legibility */
  section.homeschool-section[data-collapse="mobile"] .mobile-collapse-toggle,
  section.process-section[data-collapse="mobile"] .mobile-collapse-toggle,
  section.why-city[data-collapse="mobile"] .mobile-collapse-toggle {
    background: rgba(36,168,228,.16);
    border-color: rgba(36,168,228,.45);
    color: #7DD3FC;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  .mobile-collapse-toggle svg { transition: transform .25s var(--ease); }
  section[data-collapse="mobile"].mobile-collapse-open .mobile-collapse-toggle svg { transform: rotate(180deg); }
  .mobile-collapse-toggle .lbl-less { display: none; }
  section[data-collapse="mobile"].mobile-collapse-open .mobile-collapse-toggle .lbl-more { display: none; }
  section[data-collapse="mobile"].mobile-collapse-open .mobile-collapse-toggle .lbl-less { display: inline; }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE QC FIXES — final pass for ≤480px screens
   ───────────────────────────────────────────────────────────────────── */

/* Prevent horizontal overflow on every section */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, table { max-width: 100%; }

@media (max-width: 500px) {
  /* Make sure no section is wider than the viewport */
  section, .section, header, footer, nav, .hero, .cta-block, .cta-section,
  .blog-section, .blog-hero, .schools-section, .homeschool-section,
  .process-section, .why-city, .city-story, .popular-subjects,
  .related-rail, .honesty-close, .footer-bottom, .footer-top,
  .matcher, .matcher-grid, .hero-stats, .hero-actions, .hero-btns,
  .hero-grid, .nav-inner, .mobile-cta {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Hero stats: stack 2x2 with content fitting */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .hero-stats .stat {
    min-width: 0 !important;
    text-align: center;
  }
}

/* Allow long words to break instead of overflowing the viewport */
h1, h2, h3, h4, .hero h1, .section-title, .blog-card-title, .blog-hero h1 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 500px) {
  /* Matcher: stack form fields one per row so labels are never truncated */
  .matcher-grid { grid-template-columns: 1fr !important; }
  .matcher { padding: 22px !important; }
  .matcher select, .matcher .multi {
    font-size: 15px !important;
    padding: 14px 38px 14px 14px !important;
  }
  .matcher-cta {
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* Hero stats: 2×2 grid (was 4 in a row) */
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-stats { gap: 18px !important; }
  .hero-stats .stat { flex: 1 0 calc(50% - 12px); min-width: 0; }

  /* Hero buttons full-width on narrow screens */
  .hero-actions, .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .hero-btns a { width: 100%; justify-content: center; }

  /* Announcement bar: allow wrapping */
  .announce, .urgency-strip {
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.35;
    padding: 10px 14px !important;
  }

  /* Mobile sticky CTA bar: ensure both buttons fit and the right one isn't clipped */
  .mobile-cta { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  .mobile-cta .btn { flex: 1 1 0; min-width: 0; padding: 11px 8px !important; font-size: 12.5px !important; }
  .mobile-cta .btn .wa-dot { display: none; }   /* save space on tiny screens */

  /* Nav: prevent logo + brand text wrapping */
  .nav-brand-text { display: none !important; }
  .nav-brand img { height: 64px !important; }
  body > nav:not(.site-nav) .nav-logo img { height: 64px !important; }

  /* Nav inner padding tighter on mobile */
  .nav-inner, body > nav:not(.site-nav) { padding: 8px 12px !important; gap: 8px !important; max-width: 100vw !important; }
  .nav-actions { gap: 6px; min-width: 0; }
  .nav-actions .btn-sm,
  body > nav:not(.site-nav) .nav-cta,
  body > nav:not(.site-nav) .mob-cta {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
  /* Drop the green pulsing dot inside CTA on tiny screens to save width */
  .nav-actions .btn .wa-dot,
  body > nav:not(.site-nav) .nav-cta .wa-dot { display: none; }
  /* Make sure the nav can't extend past the viewport */
  .site-nav, .nav-inner { overflow: hidden; }

  /* Tutor / testi cards: shrink slightly so the next card peeks */
  .tutor-card, .testi-card { flex: 0 0 82vw !important; padding: 20px !important; }

  /* Steps grid: full-width single column */
  .steps, .steps-grid, .feature-grid { grid-template-columns: 1fr !important; }

  /* Section padding tighter at narrow viewports */
  .section, section.section { padding: 48px 16px !important; }
  .hero { padding: 60px 16px 60px !important; }
  .wrap, .wrap-narrow { padding-left: 16px; padding-right: 16px; }
  .section-inner { padding: 0 !important; }

  /* Hero H1 size tuning + safe wrap */
  .hero h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.12 !important;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .hero-sub { font-size: 14px !important; max-width: 100%; }
  .hero h1 br { display: none; }   /* let it wrap naturally */

  /* City-story / two-col on mobile: single column */
  .city-story-inner, .why-city-inner, .homeschool-inner, .two-col {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .city-signals { position: static !important; }

  /* Pill grids: smaller pills + tighter gap */
  .pill-grid { gap: 6px; }
  .pill { font-size: 13px; padding: 9px 14px; }

  /* Blog hero title: smaller font + safe word wrap */
  .blog-hero h1, .article h1 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }

  /* Footer cols: stack 1 column */
  .footer-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-brand img { height: 72px !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Floating WA: smaller so it doesn't eat half the screen.
     Hide if a chat widget is also present (avoid two stacked bubbles). */
  .wa-float { width: 48px !important; height: 48px !important; bottom: 84px !important; right: 12px !important; }
  .wa-float svg { width: 22px !important; height: 22px !important; }

  /* Chat-widget bubble (chat-widget.js) sits right above mobile-cta */
  iframe#vta-chat-bubble,
  .vta-chat-bubble,
  #chat-widget,
  [class*="chat-bubble"],
  [id*="chat-widget"] {
    bottom: 84px !important;
    right: 12px !important;
    z-index: 100 !important;
  }
  /* When both wa-float and chat-widget are present, stagger them */
  body:has(.wa-float) #chat-widget,
  body:has(.wa-float) [class*="chat-bubble"] {
    bottom: 144px !important;
  }

  /* H2 titles on mobile — tighter so they don't dominate the viewport */
  h1, h2, .h-1, .h-2, .section-title, .related-h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.15 !important;
  }
  .hero h1 { font-size: clamp(24px, 7.5vw, 34px) !important; }

  /* Tables in blog body: horizontal scroll instead of overflow */
  .article-body table, .blog-body table, .comparison-table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero matcher trust items: single column */
  .hero-trust { width: 100%; }
  .hero-trust-item { flex-direction: row; gap: 8px; align-items: baseline; }
}

/* Even tighter for ≤375px (iPhone SE) */
@media (max-width: 380px) {
  .hero h1 { font-size: 26px !important; }
  .nav-brand img, body > nav:not(.site-nav) .nav-logo img { height: 56px !important; }
  .mobile-cta .btn { font-size: 12px !important; padding: 10px 10px !important; }
  .section, section.section { padding: 40px 14px !important; }
  .hero { padding: 48px 14px !important; }
  .matcher { padding: 18px !important; }
}