/* ============================================================
   maths-pages.css — shared base for Modern Age Coders maths
   landing pages. Theme-neutral. Each page sets a body theme
   class (e.g. .mp-sat) that overrides the --mp-* custom
   properties below to get a distinct palette + hero treatment.
   No page-specific colours live in this file.
   ============================================================ */

/* ---------- design tokens (overridden per page) ---------- */
:root {
  --mp-bg: #ffffff;
  --mp-bg-alt: #f6f7fb;
  --mp-ink: #14161d;
  --mp-ink-soft: #3a3f4d;
  --mp-muted: #6b7180;
  --mp-line: #e6e8ef;
  --mp-surface: #ffffff;

  --mp-accent: #2b59ff;        /* primary brand accent  */
  --mp-accent-2: #ff5a5f;      /* secondary / highlight  */
  --mp-accent-soft: #eaf0ff;   /* tinted fill            */
  --mp-on-accent: #ffffff;

  --mp-hero-bg: #0e1430;       /* hero canvas            */
  --mp-hero-ink: #f4f6ff;
  --mp-hero-muted: #aab3d6;

  --mp-radius: 16px;
  --mp-radius-sm: 10px;
  --mp-maxw: 1140px;
  --mp-gap: clamp(1rem, 2.5vw, 2rem);

  --mp-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --mp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mp-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --mp-shadow: 0 1px 2px rgba(16,20,40,.04), 0 12px 30px rgba(16,20,40,.07);
  --mp-shadow-lg: 0 30px 60px rgba(16,20,40,.12);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mp-bg);
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--mp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--mp-font-head); font-weight: 600; line-height: 1.12; color: var(--mp-ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
p { margin: 0 0 1.1em; color: var(--mp-ink-soft); }
strong { color: var(--mp-ink); font-weight: 650; }
ul, ol { color: var(--mp-ink-soft); }

/* ---------- layout ---------- */
.mp-wrap { width: 100%; max-width: var(--mp-maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.mp-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.mp-section--alt { background: var(--mp-bg-alt); }
.mp-eyebrow {
  display: inline-block; font-family: var(--mp-font-mono); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mp-accent);
  margin-bottom: .9rem;
}
.mp-lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); color: var(--mp-ink-soft); max-width: 60ch; }
.mp-section > .mp-wrap > h2 { max-width: 22ch; }

/* ---------- top nav ---------- */
.mp-nav { position: sticky; top: 0; z-index: 900; background: color-mix(in srgb, var(--mp-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--mp-line); }
.mp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.mp-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mp-font-head); font-weight: 600; color: var(--mp-ink); }
.mp-brand:hover { text-decoration: none; }
.mp-brand sup { color: var(--mp-accent); font-family: var(--mp-font-mono); font-size: .6em; }
.mp-nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.mp-nav-links a { color: var(--mp-ink-soft); font-weight: 500; font-size: .95rem; }
.mp-nav-links a:hover { color: var(--mp-accent); text-decoration: none; }
@media (max-width: 820px) { .mp-nav-links { display: none; } }

/* ---------- buttons ---------- */
.mp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem; cursor: pointer; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-family: var(--mp-font-body); }
.mp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mp-btn-primary { background: var(--mp-accent); color: var(--mp-on-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--mp-accent) 35%, transparent); }
.mp-btn-primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--mp-accent) 45%, transparent); }
.mp-btn-ghost { background: transparent; color: var(--mp-ink); border-color: var(--mp-line); }
.mp-btn-ghost:hover { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-btn-lg { padding: 1.05rem 2rem; font-size: 1.08rem; }

/* ---------- hero (base scaffold; per-page themes restyle) ---------- */
.mp-hero { background: var(--mp-hero-bg); color: var(--mp-hero-ink); position: relative; overflow: hidden; }
.mp-hero .mp-wrap { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; z-index: 2; }
.mp-hero h1 { color: var(--mp-hero-ink); max-width: 18ch; }
.mp-hero .mp-lede { color: var(--mp-hero-muted); }
.mp-hero strong, .mp-cta-band strong { color: var(--mp-hero-ink); font-weight: 650; }
.mp-hero .grad { color: var(--mp-accent-2); }
.mp-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--mp-hero-ink) 12%, transparent); color: var(--mp-hero-ink); font-size: .82rem; font-weight: 500; margin-bottom: 1.4rem; }
.mp-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.25); }
.mp-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------- trust strip ---------- */
.mp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: color-mix(in srgb, var(--mp-hero-ink) 14%, transparent); border-radius: var(--mp-radius); overflow: hidden; margin-top: 2.6rem; }
.mp-trust .item { background: color-mix(in srgb, var(--mp-hero-bg) 92%, #000); padding: 1.1rem 1.2rem; }
.mp-trust .v { display: block; font-family: var(--mp-font-head); font-size: 1.5rem; color: var(--mp-hero-ink); }
.mp-trust .v .u { font-size: .65em; color: var(--mp-hero-muted); }
.mp-trust .l { font-size: .8rem; color: var(--mp-hero-muted); line-height: 1.4; }
@media (max-width: 720px) { .mp-trust { grid-template-columns: repeat(2, 1fr); } }

/* ---------- generic cards / grids ---------- */
.mp-grid { display: grid; gap: var(--mp-gap); }
.mp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mp-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .mp-grid-3, .mp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mp-grid-2, .mp-grid-3, .mp-grid-4 { grid-template-columns: 1fr; } }
.mp-card { background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: clamp(1.3rem, 2.4vw, 1.9rem); box-shadow: var(--mp-shadow); }
.mp-card h3 { margin-bottom: .4rem; }
.mp-card p:last-child { margin-bottom: 0; }

/* ---------- numbered method steps ---------- */
.mp-steps { counter-reset: step; display: grid; gap: 1.1rem; }
.mp-step { position: relative; padding: 1.3rem 1.4rem 1.3rem 4.2rem; background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); }
.mp-step::before { counter-increment: step; content: counter(step); position: absolute; left: 1.2rem; top: 1.25rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--mp-accent-soft); color: var(--mp-accent); font-family: var(--mp-font-mono); font-weight: 600; }
.mp-step h3 { margin-bottom: .25rem; }
.mp-step p:last-child { margin-bottom: 0; }

/* ---------- worked-example callout ---------- */
.mp-worked { border: 1px solid var(--mp-line); border-left: 4px solid var(--mp-accent); border-radius: var(--mp-radius); background: var(--mp-bg-alt); padding: clamp(1.4rem, 3vw, 2.2rem); }
.mp-worked .tag { font-family: var(--mp-font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-accent); }
.mp-worked .mp-math { font-family: var(--mp-font-mono); background: var(--mp-surface); border: 1px dashed var(--mp-line); border-radius: var(--mp-radius-sm); padding: .9rem 1.1rem; margin: 1rem 0; overflow-x: auto; color: var(--mp-ink); }

/* ---------- comparison table ---------- */
.mp-compare { width: 100%; border-collapse: collapse; background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); overflow: hidden; }
.mp-compare th, .mp-compare td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--mp-line); font-size: .95rem; }
.mp-compare thead th { background: var(--mp-bg-alt); font-family: var(--mp-font-head); font-weight: 600; }
.mp-compare tbody th { font-weight: 600; color: var(--mp-ink); }
.mp-compare .us { color: var(--mp-accent); font-weight: 600; }
.mp-compare tr:last-child td, .mp-compare tr:last-child th { border-bottom: 0; }
.mp-table-scroll { overflow-x: auto; }

/* ---------- FAQ accordion ---------- */
.mp-faq { display: grid; gap: .7rem; }
.mp-faq details { border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-surface); }
.mp-faq summary { cursor: pointer; list-style: none; padding: 1.05rem 1.2rem; font-weight: 600; color: var(--mp-ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after { content: "+"; font-family: var(--mp-font-mono); color: var(--mp-accent); font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.mp-faq details[open] summary::after { transform: rotate(45deg); }
.mp-faq .a { padding: 0 1.2rem 1.15rem; color: var(--mp-ink-soft); }
.mp-faq .a p:last-child { margin-bottom: 0; }

/* ---------- pricing ---------- */
.mp-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mp-gap); }
@media (max-width: 620px) { .mp-price-grid { grid-template-columns: 1fr; } }
.mp-price { border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: 1.8rem; background: var(--mp-surface); }
.mp-price.is-feature { border-color: var(--mp-accent); box-shadow: var(--mp-shadow-lg); position: relative; }
.mp-price .amt { font-family: var(--mp-font-head); font-size: 2.6rem; color: var(--mp-ink); line-height: 1; }
.mp-price .amt span { font-size: .85rem; color: var(--mp-muted); font-family: var(--mp-font-body); }
.mp-price ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.mp-price li { padding-left: 1.6rem; position: relative; }
.mp-price li::before { content: "→"; position: absolute; left: 0; color: var(--mp-accent); }

/* ---------- CTA band ---------- */
.mp-cta-band { background: var(--mp-hero-bg); color: var(--mp-hero-ink); border-radius: var(--mp-radius); padding: clamp(2rem, 5vw, 3.4rem); text-align: center; }
.mp-cta-band h2 { color: var(--mp-hero-ink); }
.mp-cta-band p { color: var(--mp-hero-muted); max-width: 54ch; margin-inline: auto; }
.mp-cta-band .mp-cta-row { justify-content: center; }

/* ---------- internal link cards ---------- */
.mp-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .mp-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mp-links { grid-template-columns: 1fr; } }
.mp-link-card { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-surface); color: var(--mp-ink); transition: border-color .15s ease, transform .15s ease; }
.mp-link-card:hover { border-color: var(--mp-accent); transform: translateY(-2px); text-decoration: none; }
.mp-link-card .k { font-family: var(--mp-font-mono); font-size: .74rem; color: var(--mp-muted); text-transform: uppercase; letter-spacing: .1em; }
.mp-link-card .t { font-weight: 600; }

/* ---------- footer ---------- */
.mp-footer { background: var(--mp-bg-alt); border-top: 1px solid var(--mp-line); padding-block: 2.6rem; color: var(--mp-muted); font-size: .9rem; }
.mp-footer a { color: var(--mp-ink-soft); }
.mp-footer .row { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; }
.mp-footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ---------- utilities ---------- */
.mp-stack > * + * { margin-top: 1.1rem; }
.mp-center { text-align: center; }
.mp-mt { margin-top: 2rem; }
.mp-prose-2 { columns: 2; column-gap: 2.4rem; }
@media (max-width: 760px) { .mp-prose-2 { columns: 1; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ============================================================
   PER-PAGE THEMES
   Each page sets <body class="mp-root mp-xxx"> and gets its own
   palette + one signature treatment so no two pages feel alike.
   ============================================================ */

/* --- mp-kids-us : warm coral + teal, soft & friendly (elementary) --- */
.mp-kids-us {
  --mp-accent: #ef5d4e; --mp-accent-2: #14b8a6; --mp-accent-soft: #fdeceb;
  --mp-hero-bg: #0d2f33; --mp-hero-ink: #f3fbfa; --mp-hero-muted: #9fc6c4;
  --mp-bg-alt: #fbf6f3; --mp-font-head: "Fraunces", Georgia, serif;
}
.mp-kids-us .mp-hero { background:
  radial-gradient(900px 460px at 88% -8%, #14b8a6 0%, transparent 55%),
  radial-gradient(700px 420px at 6% 110%, #ef5d4e 0%, transparent 50%),
  var(--mp-hero-bg); }
.mp-kids-us h1, .mp-kids-us h2 { letter-spacing: -.018em; }
.mp-kids-us .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-kids-us .mp-bond { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--mp-accent-soft); color:var(--mp-accent); font-family:var(--mp-font-mono); font-weight:600; }

/* --- mp-teens-us : indigo + lime, sharp & modern (middle/high) --- */
.mp-teens-us {
  --mp-accent: #5b5bf0; --mp-accent-2: #84cc16; --mp-accent-soft: #ecebfe;
  --mp-hero-bg: #11132e; --mp-hero-ink: #eef0ff; --mp-hero-muted: #a6abdb;
  --mp-bg-alt: #f5f6ff; --mp-ink: #16182a;
  --mp-font-head: "Space Grotesk", "Inter", sans-serif;
}
.mp-teens-us .mp-hero { background:
  linear-gradient(135deg, #11132e 0%, #1c1f4d 60%, #221a52 100%); }
.mp-teens-us .mp-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, transparent 0 7.5%, rgba(132,204,22,.06) 7.5% 7.6%, transparent 7.6%) repeat-x,
              linear-gradient(0deg, transparent 0 7.5%, rgba(91,91,240,.07) 7.5% 7.6%, transparent 7.6%) repeat-y;
  background-size: 64px 64px, 64px 64px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.mp-teens-us h1, .mp-teens-us h2, .mp-teens-us h3 { letter-spacing:-.02em; }
.mp-teens-us .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-teens-us .mp-step::before { border-radius:8px; }

/* --- mp-college-us : slate + amber, academic & grown-up (undergrad) --- */
.mp-college-us {
  --mp-accent: #b45309; --mp-accent-2: #475569; --mp-accent-soft: #fdf0dd;
  --mp-hero-bg: #1c2533; --mp-hero-ink: #f1f5f9; --mp-hero-muted: #9aa7ba;
  --mp-bg-alt: #f7f6f3; --mp-ink: #1a212e;
  --mp-font-head: "Newsreader", Georgia, serif;
}
.mp-college-us .mp-hero { background:
  linear-gradient(180deg, #1c2533 0%, #243044 100%); }
.mp-college-us .mp-hero::after { content:""; position:absolute; right:-6%; top:-20%; width:520px; height:520px; z-index:1;
  background: repeating-linear-gradient(45deg, rgba(180,83,9,.10) 0 2px, transparent 2px 22px);
  border-radius:50%; mask-image: radial-gradient(circle, #000 40%, transparent 70%); }
.mp-college-us h1 { font-weight:500; }
.mp-college-us .mp-worked { border-left-color: var(--mp-accent); }

/* --- mp-adults-us : emerald + copper, calm & professional (adults) --- */
.mp-adults-us {
  --mp-accent: #047857; --mp-accent-2: #b45309; --mp-accent-soft: #d9f3e8;
  --mp-hero-bg: #06302a; --mp-hero-ink: #effaf5; --mp-hero-muted: #93bfb1;
  --mp-bg-alt: #f4f8f6; --mp-ink: #11231e;
  --mp-font-head: "Sora", "Inter", sans-serif;
}
.mp-adults-us .mp-hero { background:
  radial-gradient(700px 520px at 92% 8%, #0b5347 0%, transparent 60%), var(--mp-hero-bg); }
.mp-adults-us h1, .mp-adults-us h2 { font-weight:600; letter-spacing:-.015em; }
.mp-adults-us .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-adults-us .mp-step::before { border-radius:6px; }

/* --- mp-sat : navy + red, sharp exam energy --- */
.mp-sat {
  --mp-accent: #1d4ed8; --mp-accent-2: #dc2626; --mp-accent-soft: #e4ecff;
  --mp-hero-bg: #0e1c40; --mp-hero-ink: #eef3ff; --mp-hero-muted: #97a6cf;
  --mp-bg-alt: #f4f6fb; --mp-ink: #131a2e;
  --mp-font-head: "Bricolage Grotesque", "Inter", sans-serif;
}
.mp-sat .mp-hero { background:
  linear-gradient(115deg, #0e1c40 0%, #14245a 55%, #2a1140 100%); }
.mp-sat .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background: radial-gradient(circle at 80% 20%, rgba(220,38,38,.25), transparent 40%); }
.mp-sat h1, .mp-sat h2 { letter-spacing:-.02em; font-weight:700; }
.mp-sat .mp-eyebrow { color: var(--mp-accent-2); }
.mp-sat .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-act : teal + orange, fast & energetic --- */
.mp-act {
  --mp-accent: #0d9488; --mp-accent-2: #ea580c; --mp-accent-soft: #d6f3ef;
  --mp-hero-bg: #062e2b; --mp-hero-ink: #ecfbf8; --mp-hero-muted: #8fc2bb;
  --mp-bg-alt: #f3faf8; --mp-ink: #0f2422;
  --mp-font-head: "Archivo", "Inter", sans-serif;
}
.mp-act .mp-hero { background:
  linear-gradient(125deg, #062e2b 0%, #0a3d39 50%, #3a1c08 110%); }
.mp-act .mp-hero::after { content:""; position:absolute; right:-4%; bottom:-30%; width:480px; height:480px; z-index:1;
  background: conic-gradient(from 200deg, rgba(234,88,12,.22), transparent 40%); border-radius:50%; filter:blur(8px); }
.mp-act h1, .mp-act h2 { letter-spacing:-.02em; font-weight:700; }
.mp-act .mp-eyebrow { color: var(--mp-accent-2); }
.mp-act .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-apcalc : royal blue + gold, academic prestige --- */
.mp-apcalc {
  --mp-accent: #1d4ed8; --mp-accent-2: #d97706; --mp-accent-soft: #e3ebff;
  --mp-hero-bg: #0a1733; --mp-hero-ink: #eef3ff; --mp-hero-muted: #94a4cd;
  --mp-bg-alt: #f6f7fb; --mp-ink: #111a2f;
  --mp-font-head: "Spectral", Georgia, serif;
}
.mp-apcalc .mp-hero { background:
  radial-gradient(800px 500px at 12% -10%, #18306e 0%, transparent 55%), var(--mp-hero-bg); }
.mp-apcalc .mp-hero::after { content:"∫"; position:absolute; right:4%; top:8%; z-index:1; font-family:var(--mp-font-head);
  font-size:24rem; line-height:.7; color:rgba(217,119,6,.10); pointer-events:none; }
.mp-apcalc h1 { font-weight:600; }
.mp-apcalc .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-apstats : plum + sky, data-driven --- */
.mp-apstats {
  --mp-accent: #7c3aed; --mp-accent-2: #0284c7; --mp-accent-soft: #efe7fe;
  --mp-hero-bg: #1a1138; --mp-hero-ink: #f4f0ff; --mp-hero-muted: #b3a8d6;
  --mp-bg-alt: #f7f5fc; --mp-ink: #1a142e;
  --mp-font-head: "Outfit", "Inter", sans-serif;
}
.mp-apstats .mp-hero { background:
  linear-gradient(150deg, #1a1138 0%, #271a55 55%, #0b3a55 120%); }
.mp-apstats .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(2,132,199,.10) 38px 40px),
              repeating-linear-gradient(0deg, transparent 0 38px, rgba(124,58,237,.10) 38px 40px);
  mask-image: linear-gradient(200deg, #000, transparent 65%); }
.mp-apstats h1, .mp-apstats h2 { letter-spacing:-.018em; font-weight:700; }
.mp-apstats .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-olympiad-us : black + gold, competition prestige --- */
.mp-olympiad-us {
  --mp-accent: #b8860b; --mp-accent-2: #c0392b; --mp-accent-soft: #f6ecd0;
  --mp-hero-bg: #0a0a0c; --mp-hero-ink: #faf6e9; --mp-hero-muted: #b9b09a;
  --mp-bg-alt: #faf8f2; --mp-ink: #17150f;
  --mp-font-head: "Cormorant Garamond", Georgia, serif;
}
.mp-olympiad-us .mp-hero { background:
  radial-gradient(700px 480px at 50% -20%, #2a230d 0%, transparent 60%), var(--mp-hero-bg); }
.mp-olympiad-us .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.6;
  background: radial-gradient(circle at 50% 0%, rgba(184,134,11,.18), transparent 45%); }
.mp-olympiad-us h1 { font-weight:600; font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); letter-spacing:0; }
.mp-olympiad-us h2 { font-weight:600; }
.mp-olympiad-us .mp-eyebrow { color: var(--mp-accent); }
.mp-olympiad-us .mp-worked { border-left-color: var(--mp-accent); }

/* --- mp-algebra : green + violet, balanced & structural --- */
.mp-algebra {
  --mp-accent: #16a34a; --mp-accent-2: #7c3aed; --mp-accent-soft: #dcf5e4;
  --mp-hero-bg: #11142a; --mp-hero-ink: #eef2ff; --mp-hero-muted: #9aa3c9;
  --mp-bg-alt: #f4f8f5; --mp-ink: #14182a;
  --mp-font-head: "Manrope", "Inter", sans-serif;
}
.mp-algebra .mp-hero { background:
  linear-gradient(120deg, #11142a 0%, #15243a 50%, #221945 115%); }
.mp-algebra .mp-hero::after { content:"="; position:absolute; right:5%; top:14%; z-index:1; font-family:var(--mp-font-head);
  font-weight:700; font-size:20rem; line-height:.6; color:rgba(124,58,237,.12); }
.mp-algebra h1, .mp-algebra h2 { letter-spacing:-.022em; font-weight:800; }
.mp-algebra .mp-worked { border-left-color: var(--mp-accent); }

/* --- mp-geometry : cyan + coral, geometric motifs --- */
.mp-geometry {
  --mp-accent: #0891b2; --mp-accent-2: #fb7185; --mp-accent-soft: #d5f1f7;
  --mp-hero-bg: #062630; --mp-hero-ink: #ecfbff; --mp-hero-muted: #8db9c4;
  --mp-bg-alt: #f2fafb; --mp-ink: #0f2128;
  --mp-font-head: "Lexend", "Inter", sans-serif;
}
.mp-geometry .mp-hero { background:
  linear-gradient(130deg, #062630 0%, #0a3744 60%, #3a1822 120%); }
.mp-geometry .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.55;
  background:
    linear-gradient(60deg, transparent 49.6%, rgba(8,145,178,.20) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(-60deg, transparent 49.6%, rgba(251,113,133,.16) 49.6% 50.4%, transparent 50.4%);
  background-size: 90px 156px; mask-image: radial-gradient(circle at 78% 30%, #000, transparent 62%); }
.mp-geometry h1, .mp-geometry h2 { letter-spacing:-.02em; font-weight:700; }
.mp-geometry .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-homeschool : sage + terracotta, warm & domestic --- */
.mp-homeschool {
  --mp-accent: #4f7a5f; --mp-accent-2: #c2683f; --mp-accent-soft: #e2efe5;
  --mp-hero-bg: #1d2b22; --mp-hero-ink: #f3f8f2; --mp-hero-muted: #a7c0ac;
  --mp-bg-alt: #f6f4ee; --mp-ink: #1c241d;
  --mp-font-head: "Bitter", Georgia, serif;
}
.mp-homeschool .mp-hero { background:
  radial-gradient(720px 520px at 88% 110%, #2f4a37 0%, transparent 58%),
  radial-gradient(620px 400px at 4% -10%, #6a3a26 0%, transparent 52%), var(--mp-hero-bg); }
.mp-homeschool h1, .mp-homeschool h2 { font-weight:600; letter-spacing:-.01em; }
.mp-homeschool .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-homeschool .mp-step::before { border-radius:8px; }

/* --- mp-kids-uk : blue + sunny yellow, bright & friendly (primary) --- */
.mp-kids-uk {
  --mp-accent: #2563eb; --mp-accent-2: #f59e0b; --mp-accent-soft: #e0eaff;
  --mp-hero-bg: #122253; --mp-hero-ink: #eef3ff; --mp-hero-muted: #a3b3e0;
  --mp-bg-alt: #f5f8ff; --mp-ink: #14213f;
  --mp-font-head: "Baloo 2", "Inter", sans-serif;
}
.mp-kids-uk .mp-hero { background:
  radial-gradient(720px 460px at 86% -6%, #f59e0b 0%, transparent 48%),
  radial-gradient(620px 420px at 4% 112%, #2563eb 0%, transparent 52%), var(--mp-hero-bg); }
.mp-kids-uk h1, .mp-kids-uk h2, .mp-kids-uk h3 { font-weight:700; letter-spacing:-.01em; }
.mp-kids-uk .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-kids-uk .mp-step::before { border-radius:50%; }

/* --- mp-teens-uk : deep purple + teal, modern secondary --- */
.mp-teens-uk {
  --mp-accent: #6d28d9; --mp-accent-2: #0d9488; --mp-accent-soft: #ece4fd;
  --mp-hero-bg: #19133b; --mp-hero-ink: #f1ecff; --mp-hero-muted: #ada3d4;
  --mp-bg-alt: #f6f4fd; --mp-ink: #181430;
  --mp-font-head: "Plus Jakarta Sans", "Inter", sans-serif;
}
.mp-teens-uk .mp-hero { background:
  linear-gradient(135deg, #19133b 0%, #241a52 55%, #0c3b39 120%); }
.mp-teens-uk .mp-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background: repeating-linear-gradient(135deg, transparent 0 30px, rgba(13,148,136,.07) 30px 31px),
              repeating-linear-gradient(45deg, transparent 0 30px, rgba(109,40,217,.08) 30px 31px);
  mask-image: linear-gradient(180deg, #000, transparent 72%); }
.mp-teens-uk h1, .mp-teens-uk h2 { letter-spacing:-.022em; font-weight:700; }
.mp-teens-uk .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-college-uk : charcoal + gold, sixth-form gravitas --- */
.mp-college-uk {
  --mp-accent: #b58a1b; --mp-accent-2: #475569; --mp-accent-soft: #f5edd6;
  --mp-hero-bg: #1b212e; --mp-hero-ink: #f1f4f8; --mp-hero-muted: #9aa6b8;
  --mp-bg-alt: #f6f6f3; --mp-ink: #1a1f29;
  --mp-font-head: "Lora", Georgia, serif;
}
.mp-college-uk .mp-hero { background:
  linear-gradient(180deg, #1b212e 0%, #232c3d 100%); }
.mp-college-uk .mp-hero::after { content:""; position:absolute; left:-5%; bottom:-25%; width:480px; height:480px; z-index:1;
  background: repeating-radial-gradient(circle, rgba(181,138,27,.10) 0 1px, transparent 1px 26px);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.mp-college-uk h1 { font-weight:600; }
.mp-college-uk .mp-worked { border-left-color: var(--mp-accent); }

/* --- mp-adults-uk : bronze + deep teal, calm & grown-up --- */
.mp-adults-uk {
  --mp-accent: #a65a1e; --mp-accent-2: #0f766e; --mp-accent-soft: #f6e7d6;
  --mp-hero-bg: #1e2826; --mp-hero-ink: #f1f6f4; --mp-hero-muted: #a3b6b1;
  --mp-bg-alt: #f7f4f0; --mp-ink: #1d2522;
  --mp-font-head: "Mulish", "Inter", sans-serif;
}
.mp-adults-uk .mp-hero { background:
  radial-gradient(700px 520px at 90% 6%, #18524b 0%, transparent 58%),
  radial-gradient(560px 380px at 6% 108%, #6a3a18 0%, transparent 54%), var(--mp-hero-bg); }
.mp-adults-uk h1, .mp-adults-uk h2 { font-weight:800; letter-spacing:-.018em; }
.mp-adults-uk .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-adults-uk .mp-step::before { border-radius:6px; }

/* --- mp-gcse : exam blue + green, clear & confident --- */
.mp-gcse {
  --mp-accent: #1d4ed8; --mp-accent-2: #059669; --mp-accent-soft: #e2ebff;
  --mp-hero-bg: #0c1d3c; --mp-hero-ink: #eef3ff; --mp-hero-muted: #97a8cd;
  --mp-bg-alt: #f4f7fc; --mp-ink: #111a30;
  --mp-font-head: "Onest", "Inter", sans-serif;
}
.mp-gcse .mp-hero { background:
  linear-gradient(125deg, #0c1d3c 0%, #123056 55%, #0a3d34 120%); }
.mp-gcse .mp-hero::after { content:""; position:absolute; right:-3%; top:-15%; width:460px; height:460px; z-index:1;
  background: conic-gradient(from 160deg, rgba(5,150,105,.18), transparent 42%); border-radius:50%; filter:blur(6px); }
.mp-gcse h1, .mp-gcse h2 { letter-spacing:-.022em; font-weight:700; }
.mp-gcse .mp-eyebrow { color: var(--mp-accent-2); }
.mp-gcse .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-alevel : deep teal + amber, advanced & assured --- */
.mp-alevel {
  --mp-accent: #0f766e; --mp-accent-2: #d97706; --mp-accent-soft: #d6f0ec;
  --mp-hero-bg: #06302c; --mp-hero-ink: #ecfbf7; --mp-hero-muted: #8dbdb4;
  --mp-bg-alt: #f3faf8; --mp-ink: #0f2421;
  --mp-font-head: "Hanken Grotesk", "Inter", sans-serif;
}
.mp-alevel .mp-hero { background:
  radial-gradient(820px 520px at 14% -12%, #0d5249 0%, transparent 56%), var(--mp-hero-bg); }
.mp-alevel .mp-hero::after { content:"∫"; position:absolute; right:5%; top:6%; z-index:1; font-family:"Lora",Georgia,serif;
  font-size:23rem; line-height:.7; color:rgba(217,119,6,.10); }
.mp-alevel h1, .mp-alevel h2 { letter-spacing:-.02em; font-weight:700; }
.mp-alevel .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-furthermaths : indigo + cyan, rigorous & high-level --- */
.mp-furthermaths {
  --mp-accent: #4338ca; --mp-accent-2: #0891b2; --mp-accent-soft: #e4e3fb;
  --mp-hero-bg: #100f38; --mp-hero-ink: #eeeefb; --mp-hero-muted: #a3a2d4;
  --mp-bg-alt: #f5f5fd; --mp-ink: #14132c;
  --mp-font-head: "Familjen Grotesk", "Inter", sans-serif;
}
.mp-furthermaths .mp-hero { background:
  linear-gradient(135deg, #100f38 0%, #1a1957 55%, #073746 120%); }
.mp-furthermaths .mp-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background: repeating-conic-gradient(from 0deg at 82% 26%, rgba(8,145,178,.10) 0 8deg, transparent 8deg 30deg);
  mask-image: radial-gradient(circle at 82% 26%, #000, transparent 46%); }
.mp-furthermaths h1, .mp-furthermaths h2 { letter-spacing:-.02em; font-weight:700; }
.mp-furthermaths .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-elevenplus : heritage navy + gold, traditional & trusted --- */
.mp-elevenplus {
  --mp-accent: #1e40af; --mp-accent-2: #b08200; --mp-accent-soft: #e3e9fb;
  --mp-hero-bg: #0e1a38; --mp-hero-ink: #eef2fb; --mp-hero-muted: #9aa8cc;
  --mp-bg-alt: #f6f5f0; --mp-ink: #131a2c;
  --mp-font-head: "EB Garamond", Georgia, serif;
}
.mp-elevenplus .mp-hero { background:
  linear-gradient(180deg, #0e1a38 0%, #152554 100%); }
.mp-elevenplus .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background: radial-gradient(circle at 50% 6%, rgba(176,130,0,.18), transparent 42%); }
.mp-elevenplus h1 { font-weight:600; font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4rem); }
.mp-elevenplus h2 { font-weight:600; }
.mp-elevenplus .mp-eyebrow { color: var(--mp-accent-2); }
.mp-elevenplus .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-ks2 : bright green + orange, lively primary (SATs) --- */
.mp-ks2 {
  --mp-accent: #15803d; --mp-accent-2: #ea580c; --mp-accent-soft: #dcf3e3;
  --mp-hero-bg: #0c2e1a; --mp-hero-ink: #effaf2; --mp-hero-muted: #9bc4a8;
  --mp-bg-alt: #f3faf4; --mp-ink: #122a1c;
  --mp-font-head: "Quicksand", "Inter", sans-serif;
}
.mp-ks2 .mp-hero { background:
  radial-gradient(700px 460px at 88% -6%, #ea580c 0%, transparent 46%),
  radial-gradient(640px 420px at 4% 110%, #15803d 0%, transparent 52%), var(--mp-hero-bg); }
.mp-ks2 h1, .mp-ks2 h2, .mp-ks2 h3 { font-weight:700; letter-spacing:-.01em; }
.mp-ks2 .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-ks2 .mp-step::before { border-radius:50%; }

/* --- mp-ks3 : azure + magenta, the bridge to GCSE --- */
.mp-ks3 {
  --mp-accent: #0284c7; --mp-accent-2: #db2777; --mp-accent-soft: #d7eefb;
  --mp-hero-bg: #0a1c33; --mp-hero-ink: #ecf5fc; --mp-hero-muted: #94aecb;
  --mp-bg-alt: #f3f8fc; --mp-ink: #102234;
  --mp-font-head: "Albert Sans", "Inter", sans-serif;
}
.mp-ks3 .mp-hero { background:
  linear-gradient(125deg, #0a1c33 0%, #0e2f52 55%, #3a1330 120%); }
.mp-ks3 .mp-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background: repeating-linear-gradient(60deg, transparent 0 26px, rgba(219,39,119,.07) 26px 27px),
              repeating-linear-gradient(-60deg, transparent 0 26px, rgba(2,132,199,.09) 26px 27px);
  mask-image: linear-gradient(200deg, #000, transparent 66%); }
.mp-ks3 h1, .mp-ks3 h2 { letter-spacing:-.02em; font-weight:700; }
.mp-ks3 .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-commonentrance : burgundy + cream, independent-school heritage --- */
.mp-commonentrance {
  --mp-accent: #9f1239; --mp-accent-2: #a16207; --mp-accent-soft: #f7e3e8;
  --mp-hero-bg: #2a0f1a; --mp-hero-ink: #faf2ee; --mp-hero-muted: #c4a3ab;
  --mp-bg-alt: #f8f4ee; --mp-ink: #281019;
  --mp-font-head: "Source Serif 4", Georgia, serif;
}
.mp-commonentrance .mp-hero { background:
  radial-gradient(760px 520px at 86% -10%, #5a1730 0%, transparent 58%), var(--mp-hero-bg); }
.mp-commonentrance .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background: radial-gradient(circle at 50% 4%, rgba(161,98,7,.16), transparent 40%); }
.mp-commonentrance h1 { font-weight:600; }
.mp-commonentrance h2 { font-weight:600; }
.mp-commonentrance .mp-eyebrow { color: var(--mp-accent-2); }
.mp-commonentrance .mp-worked { border-left-color: var(--mp-accent-2); }

/* --- mp-functionalskills : steel blue + lime, practical & accessible --- */
.mp-functionalskills {
  --mp-accent: #1e6091; --mp-accent-2: #4d7c0f; --mp-accent-soft: #dcebf5;
  --mp-hero-bg: #112230; --mp-hero-ink: #eef5fa; --mp-hero-muted: #93accb;
  --mp-bg-alt: #f4f8fb; --mp-ink: #122230;
  --mp-font-head: "Figtree", "Inter", sans-serif;
}
.mp-functionalskills .mp-hero { background:
  radial-gradient(720px 500px at 90% 4%, #1b4f76 0%, transparent 58%),
  radial-gradient(540px 380px at 4% 110%, #3f5f12 0%, transparent 54%), var(--mp-hero-bg); }
.mp-functionalskills h1, .mp-functionalskills h2 { font-weight:800; letter-spacing:-.018em; }
.mp-functionalskills .mp-worked { border-left-color: var(--mp-accent-2); }
.mp-functionalskills .mp-step::before { border-radius:6px; }

/* --- mp-ukmt : royal navy + gold, challenge prestige --- */
.mp-ukmt {
  --mp-accent: #c89211; --mp-accent-2: #1e40af; --mp-accent-soft: #f6ecd0;
  --mp-hero-bg: #0b1430; --mp-hero-ink: #f7f3e6; --mp-hero-muted: #b0b3c8;
  --mp-bg-alt: #faf8f1; --mp-ink: #11152a;
  --mp-font-head: "Playfair Display", Georgia, serif;
}
.mp-ukmt .mp-hero { background:
  radial-gradient(720px 480px at 50% -18%, #1c2a5e 0%, transparent 58%), var(--mp-hero-bg); }
.mp-ukmt .mp-hero::after { content:""; position:absolute; inset:0; z-index:1; opacity:.6;
  background: radial-gradient(circle at 50% 2%, rgba(200,146,17,.18), transparent 44%); }
.mp-ukmt h1 { font-weight:700; font-size: clamp(2.4rem, 1.5rem + 4vw, 4.3rem); }
.mp-ukmt h2 { font-weight:700; }
.mp-ukmt .mp-eyebrow { color: var(--mp-accent); }
.mp-ukmt .mp-worked { border-left-color: var(--mp-accent); }