/* ==========================================================================
   Inno AI — shared stylesheet (v2 design system)
   Premium, minimal, spacious. Palette + type from build-plan.md.
   Plain CSS, no build step. Custom properties in :root for one-place theming.
   ========================================================================== */

/* ---------- Fonts (self-hosted Inter, latin) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-800.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette — credible blue primary, purple accent */
  --color-bg: #ffffff;
  --color-primary: #0b1f3a;     /* deep navy — brand ink for headings/footer */
  --color-primary-700: #10294d;
  --color-blue: #3157e8;        /* primary accent = innovation blue (links, buttons) */
  --color-blue-700: #2846c9;    /* darker blue for hover */
  --color-purple: #6c55f5;      /* secondary AI-purple accent (hover states, badges, gradients) */
  --color-success: #10b981;
  --color-grey: #eef4ff;        /* light blue section bg */
  --color-ink: #1e1b2e;         /* near-black ink, faintly purple */
  --color-body: #4b5563;        /* muted body text */
  --color-muted: #666e7c;   /* AA-compliant on --color-grey */
  --color-border: #e6e4f0;
  --color-border-strong: #d6d1e6;

  /* Homepage preview tokens — warm paper background + mono utility face.
     Accent stays the existing brand blue. Additive; other pages unaffected. */
  --color-paper: #f7f8fa;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Accent gradients (used sparingly) */
  --grad-brand: linear-gradient(120deg, #3157e8 0%, #3157e8 100%);
  --grad-soft: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
  --grad-hero: radial-gradient(1200px 600px at 15% -10%, rgba(49, 87, 232, 0.12), transparent 60%),
               radial-gradient(1000px 500px at 100% 0%, rgba(49, 87, 232, 0.10), transparent 55%);

  /* Type */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

  /* Spacing / layout */
  --max-width: 1160px;
  --max-narrow: 760px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 3px rgba(11, 31, 58, 0.05);
  --shadow: 0 10px 30px rgba(11, 31, 58, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 31, 58, 0.14);
  --ring: 0 0 0 3px rgba(49, 87, 232, 0.35);

  --section-y: clamp(64px, 8vw, 112px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1.0625rem;
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--color-primary);
  line-height: 1.1;
  margin: 0 0 0.4em;
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
}

h1 { font-size: clamp(2.25rem, 5vw + 0.5rem, 4rem); letter-spacing: var(--tracking-tighter); }
h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1vw + 0.9rem, 1.5rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* There is deliberately no `a:visited` rule. It scores (0,1,1), which outranks
   every single-class colour rule on the site - .btn-primary, .btn-ghost-light,
   .skip-link, .logo - so `a:visited { color: inherit }` silently repainted
   those with the surrounding text colour once a visitor had been to the page
   they point at: navy-on-blue Enrol buttons, and a skip link the same colour as
   its own background. It also flattened visited body links to plain body text,
   removing the only thing marking them as links.
   The browser's default purple needs no rule to suppress it - the `a` rule
   above already beats the UA stylesheet's `a:visited`, because cascade origin
   is settled before specificity. */

img, svg { max-width: 100%; display: block; }

strong { color: var(--color-ink); font-weight: 700; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* ---------- Skip link (a11y) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }

section { padding: var(--section-y) 0; }
.section-grey { background: var(--color-grey); }
.section-tight { padding: clamp(40px, 5vw, 72px) 0; }

.section-header {
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.section-header.left { margin-left: 0; text-align: left; }
.section-header p { font-size: 1.125rem; color: var(--color-muted); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 16px;
}
.eyebrow.on-dark { color: #c4b5fd; }

.lede {
  font-size: clamp(1.1rem, 1vw + 0.9rem, 1.3rem);
  color: var(--color-body);
  max-width: 60ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(49, 87, 232, 0.28);
}
.btn-primary:hover { background: var(--color-blue-700); color: #fff; }

.btn-dark { background: var(--color-primary); color: #fff; }
.btn-dark:hover { background: var(--color-primary-700); color: #fff; }

.btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-primary); background: var(--color-grey); }

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.btn-lg { padding: 1.05em 1.9em; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* Stripe payment-link buttons: hidden until payment-links.js supplies a URL,
   so an unconfigured product never renders a dead "Pay now". */
.pay-btn,
.pay-note { display: none; }
.pay-btn.pay-ready { display: inline-flex; }
.pay-btn.pay-ready.btn-block { display: flex; }
.pay-note.pay-ready { display: block; }

.pay-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
  text-align: center;
}
.pay-note svg {
  width: 13px; height: 13px;
  vertical-align: -2px; margin-right: 5px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
/* Checkout opens in a new tab (see initPayButtons), so the button says so.
   .btn already supplies the gap, hence no margin here. */
.pay-btn .pay-ext {
  width: 14px; height: 14px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
}

.pay-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* Compact buy card used in the enrol page pricing grid */
.checkout-card { display: flex; flex-direction: column; }
.checkout-card h3 { font-size: 1.05rem; margin: 0 0 10px; }
.checkout-card .co-price {
  font-size: 1.75rem; font-weight: 800;
  color: var(--color-primary); letter-spacing: var(--tracking-tight);
  margin: 0;
}
.checkout-card .co-meta { font-size: 0.85rem; color: var(--color-muted); margin: 2px 0 12px; }
.checkout-card .co-desc { font-size: 0.92rem; margin: 0 0 18px; }
.checkout-card .pay-group { margin-top: auto; }
/* Buttons are nowrap by default, which forces these narrow cards wider than
   their grid track between 860–1024px. Let the label wrap instead. */
.checkout-card .btn {
  white-space: normal;
  padding-left: 1em; padding-right: 1em;
  font-size: 0.95rem; line-height: 1.25;
  text-align: center;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.logo:hover { text-decoration: none; }
.logo-icon { width: 84px; height: 84px; display: block; }
.logo-text span { color: var(--color-blue); }
.site-footer .logo-text span { color: #7d97ff; }  /* AA on navy footer */

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li { display: flex; align-items: center; }
.nav-links a:not(.btn) {
  color: var(--color-ink);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:not(.btn):hover { color: var(--color-primary); background: var(--color-grey); text-decoration: none; }
.nav-links a.active:not(.btn) { color: var(--color-primary); font-weight: 600; }
.nav-links .nav-cta { margin-left: 8px; }
.nav-links .lang-switch {
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  margin-left: 4px;
}
.nav-links .lang-switch:hover { border-color: var(--color-primary); background: var(--color-grey); }

/* Dropdown ("Our programs") */
.has-dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.dropdown-toggle .caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 120;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.dropdown li { display: block; }
.dropdown a:not(.btn) {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-body);
  white-space: nowrap;
}
.dropdown a:not(.btn):hover { background: var(--color-grey); color: var(--color-primary); text-decoration: none; }

/* Programs dropdown — one product brand + its levels, then Coming Soon items */
.dropdown-programs { min-width: 304px; }
.dropdown-programs .dd-parent {
  font-weight: 700;
  color: var(--color-primary);
}
.dropdown-programs .dd-levels {
  list-style: none;
  margin: 0 0 0 14px;
  padding: 0 0 0 10px;
  border-left: 2px solid transparent;
}
.dropdown-programs .dd-levels a:not(.btn) {
  font-size: 0.9rem;
  padding: 7px 10px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.dropdown-programs .dd-lvl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-blue);
  flex: 0 0 auto;
}
.dropdown-programs .dd-divider {
  height: 1px;
  background: transparent;
  margin: 8px 6px;
  padding: 0;
}
.dropdown-programs .dd-soon {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-grey);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 7vw, 96px);
  background: var(--grad-hero), var(--color-bg);
  overflow: hidden;
}
.hero-inner { max-width: 820px; }
.hero.center { text-align: center; }
.hero.center .hero-inner { margin: 0 auto; }
.hero.center .lede { margin-left: auto; margin-right: auto; }
.hero h1 { margin-bottom: 0.3em; }
.hero .lede { margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero.center .hero-actions { justify-content: center; }

/* Page hero (interior pages) — full-bleed gradient banner, matches home hero */
.page-hero {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 76px);
  background: var(--grad-hero), var(--grad-brand);
  color: #fff;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0.12), rgba(11,31,58,0.32));
  z-index: 1;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero .lede { margin-top: 8px; color: rgba(255,255,255,0.92); }
.page-hero .eyebrow { color: #c4b5fd; }
.page-hero .muted { color: rgba(255,255,255,0.72); }
/* Button pairing tuned for the dark banner (white primary + ghost secondary) */
.page-hero .btn-primary { background: #fff; color: var(--color-primary); box-shadow: var(--shadow); }
.page-hero .btn-primary:hover { background: var(--color-grey); color: var(--color-primary); }
.page-hero .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.45); }
.page-hero .btn-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.6); }

/* ---------- Home full-bleed hero banner ---------- */
.home-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--grad-brand);
  color: #fff;
  overflow: hidden;
}
.home-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.home-hero-bg.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .home-hero-bg { transition: none; }
}
.home-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0.15), rgba(11,31,58,0.35));
  z-index: 1;
}
.home-hero .container { position: relative; z-index: 2; }
.hero-bg-nav {
  position: absolute;
  right: 20px; bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero-bg-nav-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(11, 31, 58, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-bg-nav-btn:hover { background: rgba(11, 31, 58, 0.55); border-color: #fff; }
.hero-bg-nav-btn svg { width: 18px; height: 18px; }
.home-hero-text { max-width: 980px; }
.home-hero h1 { color: #fff; margin-bottom: 0.35em; }
.home-hero p {
  font-size: clamp(1.15rem, 1.2vw + 0.95rem, 1.5rem);
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.5;
  max-width: 64ch;
  margin-bottom: 34px;
}
.home-hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.home-hero .hero-photo-note {
  position: absolute;
  right: 16px; bottom: 12px;
  z-index: 2;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Home feature tiles (3 image items) ---------- */
.card.feature-tile {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}
.feature-tile .tile-media {
  background: transparent;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px 20px;
}
.feature-tile .tile-media .media-circle {
  width: clamp(260px, 25vw, 360px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.feature-tile .tile-body { padding: 8px 4px 0; display: flex; flex-direction: column; flex: 1; text-align: center; }
.feature-tile h3 { margin-bottom: 8px; }
.feature-tile p { color: var(--color-body); }
.feature-tile .card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 18px;
  padding: 0.9em 1.8em;
  background: rgba(49, 87, 232, 0.1);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  transition: background 0.2s ease;
}
.feature-tile .card-link:hover { background: rgba(49, 87, 232, 0.18); text-decoration: none; }

/* ==========================================================================
   Homepage sections modelled on an external reference site's real DOM
   measurements (structure/spacing only) — colours, fonts, copy and all
   placeholder media are Inno AI's own, using the site's existing
   .media-placeholder convention throughout for visual consistency.
   ========================================================================== */

/* ---------- Shared uppercase display heading ---------- */
.heading-caps { text-transform: uppercase; letter-spacing: 0.05em; }
.on-purple { color: var(--color-blue); }

/* Brand-styled heading: matches the nav logo's colour split (ink "Inno" + purple "AI"), normal case */
.brand-heading { text-transform: none; color: var(--color-ink); }
.brand-heading .brand-ai { color: var(--color-blue); }

/* ---------- Section 1: circle row ---------- */
.circle-row { gap: 72px; }

/* Illustrated pathway panels.
   Stands in for photography we have no licensed right to publish. Deliberately
   graphic rather than a .media-placeholder dashed box: this ships to the public,
   so it has to read as a design decision, not a missing asset. Swap back to an
   <img> once licensed imagery exists (INNO-94). */
.tile-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 95% at 22% 0%, rgba(108, 85, 245, 0.18), transparent 64%),
    linear-gradient(135deg, rgba(49, 87, 232, 0.09), rgba(108, 85, 245, 0.17));
  border-bottom: 1px solid var(--color-border);
}
.tile-art svg {
  width: 46%;
  max-width: 178px;
  height: auto;
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-art .node { fill: rgba(255, 255, 255, 0.9); }
.tile-art .dot { fill: var(--color-blue); stroke: none; }

/* The scrim exists to hold text legible over a photograph. With an illustrated
   panel there is neither photo nor overlaid text, so it would only muddy it. */
.page-home .circle-row .tile-media.is-art::after { content: none; }
.circle-row .feature-tile .tile-media { padding: 0 0 20px; }
.circle-row .feature-tile .tile-media.is-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.circle-row .feature-tile .tile-media.is-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.circle-row .feature-tile:nth-child(3) .tile-media.is-art img { object-position: 100% center; }
@media (max-width: 760px) {
  .circle-row { grid-template-columns: 1fr; }
  .circle-row .feature-tile .media-circle { max-width: 280px; margin: 0 auto; }
}

/* ---------- Section 2: video + "At Inno AI" (measured: true 50/50 split, 24px column padding) ---------- */
.video-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.video-mission-grid > * { min-width: 0; }
.video-media-placeholder { aspect-ratio: 16 / 9; min-height: 0; width: 100%; max-width: 100%; }
/* YouTube facade: a local poster that paints with the page. The real iframe
   (and the ~1 MB YouTube player) is only inserted on click — see initVideoFacades(). */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9; min-height: 0; width: 100%; max-width: 100%;
  display: block; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-grey);
}
.video-facade-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-facade-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--color-blue);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.28);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-facade-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-facade:hover .video-facade-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-facade:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }
@media (max-width: 480px) {
  .video-facade-play { width: 56px; height: 56px; }
  .video-facade-play svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-facade-play { transition: none; }
}
.mission-copy h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.mission-copy p { font-size: 1.05rem; }
@media (max-width: 860px) {
  .video-mission-grid { grid-template-columns: 1fr; }
}

/* ---------- Section 3: "Enrolment now open" — 5-level learning path ---------- */
.enrolment-heading { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 40px); text-align: center; }
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 auto; width: min(280px, 78vw); scroll-snap-align: start; display: flex; }
.carousel-item > * { flex: 1 1 auto; min-width: 0; }
.carousel-controls { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: #fff; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.carousel-btn:hover { background: var(--color-grey); border-color: var(--color-blue); color: var(--color-blue); }
.carousel-btn svg { width: 20px; height: 20px; }

/* ---------- Section 4: "Our Story" ---------- */
.story-intro { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 48px); text-align: center; }
.story-intro .lede { max-width: 68ch; }
.story-intro h2 { margin-bottom: 14px; }
.story-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Section 5: "My blog" filters + single card ---------- */
.blog-filters {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  margin: 0 0 clamp(32px, 5vw, 48px);
}
.blog-filter-btn {
  background: none; border: none; cursor: pointer; font: inherit;
  font-weight: 600; font-size: 0.95rem; color: var(--color-muted);
  padding: 6px 2px; position: relative;
}
.blog-filter-btn.active { color: var(--color-blue); }
.blog-filter-btn.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--color-blue); border-radius: 2px;
}
.blog-single { max-width: 340px; margin: 0 auto; padding: 0; overflow: hidden; }
.blog-single .blog-media { min-height: 0; aspect-ratio: 4 / 3; border-radius: 0; border-width: 0 0 2px; }
.blog-single .blog-body { padding: 22px 24px 26px; text-align: center; }
.blog-single h3 { font-size: 1.25rem; }
.blog-single .card-link { color: var(--color-blue); font-weight: 700; }

/* ---------- Section 6: downloads bar (measured: ~780px centred bar) ---------- */
.download-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px 28px;
}
.download-bar .db-label { font-weight: 600; color: var(--color-primary); font-size: 1rem; }
.download-bar .db-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-blue); font-weight: 700;
}
.download-bar .db-link svg { width: 18px; height: 18px; }
.download-bar .db-link:hover { color: var(--color-blue-700); text-decoration: underline; }
@media (max-width: 560px) {
  .download-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Section 7: partner school logos ---------- */
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; }
.partner-logo {
  width: 100px; height: 64px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 8px;
  filter: grayscale(65%); opacity: 0.9;
}

/* ==========================================================================
   Homepage redesign preview — scoped to body.page-home only.
   New layout system (warm paper backgrounds, "datasheet" program cards, mono
   spec tags) with blue kept as the accent colour. The full-bleed hero banner
   and the site nav/footer are intentionally left untouched. Not yet rolled
   out to the other 15 pages — they keep the current look until approved.
   ========================================================================== */
.page-home .eyebrow { color: var(--color-blue); }
.page-home .brand-heading .brand-ai { color: var(--color-blue); }
.page-home .section-grey { background: var(--color-paper); }

/* Section 1 — program cards restyled as datasheets (was: circle photo tiles) */
.page-home .circle-row { gap: 28px; }
.page-home .circle-row .feature-tile {
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}
.page-home .circle-row .tile-media { padding: 0; justify-content: stretch; }
.page-home .circle-row .tile-media .media-circle {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.page-home .circle-row .tile-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0) 55%, rgba(11, 31, 58, 0.55) 100%);
}
.page-home .circle-row .tile-body { text-align: left; padding: 20px 22px 24px; }
.page-home .spec-row { margin: 0 0 6px; }
.page-home .spec-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.page-home .circle-row .feature-tile .card-link {
  align-self: flex-start;
  margin-top: auto;
  padding: 16px 0 0;
  background: none;
  color: var(--color-blue-700);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.page-home .circle-row .feature-tile .card-link:hover { color: var(--color-blue); text-decoration: underline; }

/* Section 3 — the AI Scientist learning path: 5 progressive levels */

.level-path { gap: 18px; }
.level-path .level-row { align-items: stretch; padding: 24px 26px; }
.level-path .level-row .level-num {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 1.3rem;
}
.level-path .level-body { min-width: 0; }
.level-path .level-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 14px;
}
.level-path .level-title { min-width: 0; }
.level-path .level-title h3 { margin: 0 0 3px; font-size: 1.2rem; }
.level-path .level-tagline { margin: 0; font-size: 0.95rem; color: var(--color-muted); }
.level-path .level-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  text-align: right;
}
.level-path .level-price {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-blue);
  letter-spacing: var(--tracking-tight);
}
.level-path .level-price-enquiry {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.level-path .level-duration {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Module strip — real photo where we have one, numbered tile where we don't */
.level-path .module-strip {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 14px;
}
.level-path .module-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.level-path .mt-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-grey);
  border: 1px solid var(--color-border);
}
.level-path .mt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.level-path .mt-thumb-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-blue);
  opacity: 0.75;
}
.level-path .mt-cap {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--color-body);
}
.level-path .mt-cap b {
  font-family: var(--font-mono);
  color: var(--color-blue);
  margin-right: 4px;
}

/* Levels 4–5 — topic chips instead of numbered modules */
.level-path .level-topics {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.level-path .level-topics li {
  background: var(--color-grey);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 0.82rem;
  color: var(--color-body);
}
.level-path .level-row-enquiry { background: var(--color-paper); }
.level-path .level-row-enquiry .level-num { background: var(--color-border-strong); color: #fff; }

.level-path .level-build { margin: 0 0 12px; font-size: 0.9rem; color: var(--color-body); }
.level-path .level-build .lb-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-right: 8px;
}
.level-path .level-foot {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.level-path .level-chip {
  background: rgba(49, 87, 232, 0.1);
  color: var(--color-blue-700);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.level-path .level-foot .card-link {
  color: var(--color-blue-700);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-home .path-cta { text-align: center; margin-top: clamp(28px, 4vw, 40px); }
.page-home .path-cta-note { color: var(--color-body); margin-bottom: 18px; }
.page-home .path-cta .hero-actions { justify-content: center; }

/* Section 3 carousel — 5 level-overview cards, paged 3-at-a-time on desktop */
.page-home .level-carousel .carousel-btn:hover { border-color: var(--color-blue); color: var(--color-blue-700); }
.page-home .level-carousel .carousel-track { scroll-behavior: smooth; }
.page-home .level-overview {
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-home .level-overview .lo-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.page-home .level-overview .lo-photo.media-placeholder { aspect-ratio: 1 / 1; min-height: 0; padding: 18px; }
.page-home .level-overview .lo-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.page-home .level-overview .lo-num {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 5.5px 13px;
  border-radius: var(--radius-pill);
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.page-home .level-overview .lo-title { font-size: 1.05rem; margin: 0; }
.page-home .level-overview .lo-tagline { margin: 0; font-size: 0.87rem; color: var(--color-muted); }
.page-home .level-overview .lo-meta {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-blue-700);
  font-weight: 600;
}
.page-home .level-overview .lo-desc { margin: 0; font-size: 0.85rem; color: var(--color-body); flex-grow: 1; }
.page-home .level-overview .card-link {
  margin-top: 7px;
  color: var(--color-blue-700);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 761px) {
  .page-home .level-carousel .carousel-item { width: calc((100% - 40px) / 3); }
}
@media (max-width: 760px) {
  .page-home .level-carousel .carousel-track { overflow-x: auto; scroll-snap-type: x mandatory; }
}

@media (max-width: 620px) {
  .level-path .level-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 18px; }
  .level-path .level-row .level-num { width: 44px; height: 44px; font-size: 1.1rem; }
  .level-path .level-meta { align-items: flex-start; text-align: left; }
  .level-path .module-strip { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
}

/* Section 5 — blog filters/link accents */
.page-home .blog-filter-btn.active { color: var(--color-blue-700); }
.page-home .blog-filter-btn.active::after { background: var(--color-blue); }
.page-home .blog-single .card-link { color: var(--color-blue-700); }

/* Section 6 — downloads bar, mono label */
.page-home .download-bar .db-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}
.page-home .download-bar .db-link { color: var(--color-blue-700); }
.page-home .download-bar .db-link:hover { color: var(--color-blue); }

/* ---------- Trust bar ---------- */
.trust-bar { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: #fff; }
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.trust-item svg { width: 26px; height: 26px; color: var(--color-blue); stroke: currentColor; }

/* ---------- Generic grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Cards (base) ---------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--color-border-strong); }

/* Icon feature card */
.feature-card .feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(49,87,232,0.12), rgba(108,85,245,0.12));
  color: var(--color-blue);
  margin-bottom: 18px;
}
.feature-card .feature-icon svg { width: 26px; height: 26px; stroke: currentColor; }
.feature-card ul { margin: 8px 0 0; padding: 0; list-style: none; }
.feature-card ul li { padding: 6px 0 6px 26px; position: relative; color: var(--color-body); }
.feature-card ul li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 14px; height: 14px;
  background: var(--color-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Badges / tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.age-badge { background: rgba(49, 87, 232, 0.1); color: var(--color-blue-700); }
.badge-purple { background: rgba(108, 85, 245, 0.1); color: var(--color-purple); }
.badge-amber { background: rgba(245, 158, 11, 0.1); color: #b45309; } /* was #F59E0B - 2.15:1, unreadable at 12px */
.badge-success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.badge-grey { background: var(--color-grey); color: var(--color-muted); border: 1px solid var(--color-border); }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-list li {
  font-size: 0.8rem; font-weight: 500;
  padding: 5px 10px; border-radius: 8px;
  background: var(--color-grey); color: var(--color-body);
  border: 1px solid var(--color-border);
}

/* ---------- Program card ---------- */
.program-card { position: relative; overflow: hidden; padding: 0; }
.program-card .program-media {
  height: 148px;
  background: var(--grad-brand);
  position: relative;
  display: flex; align-items: flex-end;
  padding: 16px;
}
.program-card .program-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-card .program-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0) 45%, rgba(11,31,58,0.55) 100%);
}
.program-card .program-media .badge { position: relative; z-index: 1; background: rgba(255,255,255,0.9); color: var(--color-primary); }
.program-card .program-media .media-note {
  position: absolute; top: 10px; left: 16px; right: 16px; z-index: 1;
  font-size: 0.72rem; color: rgba(255,255,255,0.85);
}
.program-card .program-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.program-card h3 { margin-bottom: 8px; }
.program-card .tagline { margin: 0 0 4px; font-size: 0.88rem; color: var(--color-muted); }
.program-card .program-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.85rem; color: var(--color-muted); font-weight: 500;
  margin: 4px 0 14px;
}
.program-card .program-meta span { display: inline-flex; align-items: center; gap: 6px; }
.program-card .price { font-weight: 800; color: var(--color-primary); font-size: 1.15rem; }
.program-card .price small { font-weight: 500; color: var(--color-muted); font-size: 0.8rem; }
.program-card .summary { margin: 10px 0 0; font-size: 0.88rem; color: var(--color-body); }
.program-card .card-link { margin-top: auto; padding-top: 16px; font-weight: 600; }

/* ---------- Pricing card ---------- */
.pricing-card { text-align: center; align-items: center; }
.pricing-card.featured { border-color: var(--color-blue); box-shadow: var(--shadow); position: relative; }
.pricing-card.featured::before {
  content: "Most popular";
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--color-blue); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: var(--radius-pill);
}
.pricing-card .price-figure { font-size: 2.5rem; font-weight: 800; color: var(--color-primary); letter-spacing: var(--tracking-tight); }
.pricing-card .price-figure small { font-size: 0.95rem; font-weight: 500; color: var(--color-muted); }
.pricing-card ul { list-style: none; padding: 0; margin: 18px 0 24px; text-align: left; width: 100%; }
.pricing-card ul li { padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--color-border); }
.pricing-card ul li:first-child { border-top: none; }
.pricing-card ul li::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 15px; height: 15px;
  background: var(--color-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Project card ---------- */
.project-card { padding: 0; overflow: hidden; }
.project-card .project-media {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.project-card .project-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.project-card .project-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.project-card .project-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.project-card h3 { margin: 0; font-size: 1.2rem; }
.project-card .project-summary {
  margin: 0; color: var(--color-body); font-size: 0.95rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; min-height: calc(1.65em * 3);
}
.project-card .tag-list { min-height: 42px; align-content: flex-start; }
.project-card .card-link { margin-top: auto; font-weight: 600; }

/* ---------- Media placeholder (honest, to-source imagery) ---------- */
.media-placeholder {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(49,87,232,0.03) 0 12px, rgba(108,85,245,0.03) 12px 24px);
  min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 24px; color: var(--color-muted);
}
.media-placeholder .mp-icon { width: 34px; height: 34px; opacity: 0.6; }
.media-placeholder .mp-label { font-size: 0.85rem; font-weight: 600; color: var(--color-body); }
.media-placeholder .mp-sub { font-size: 0.78rem; }

/* Larger illustrative icon used inside placeholder boxes (fixed size, never grows) */
.media-placeholder .mp-icon-lg {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  color: var(--color-blue);
  opacity: 0.55;
}
/* Play button badge inside the video placeholder (fixed circle, cannot overflow) */
.mp-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  overflow: hidden;
}
.mp-play svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* Inline placeholder note for copy TBD */
.placeholder-note {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  color: #92600a; background: #fef3c7; border: 1px solid #fde68a;
  padding: 2px 8px; border-radius: 6px;
}

/* ---------- Timeline (learning journey) ---------- */
.timeline { position: relative; max-width: 860px; margin: 0 auto; padding-left: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--color-blue), var(--color-purple));
}
.timeline-item { position: relative; padding: 0 0 40px 64px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-node {
  position: absolute; left: 8px; top: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; color: var(--color-blue);
  z-index: 1;
}
.timeline-item .stage-years { color: var(--color-purple); font-weight: 700; font-size: 0.85rem; }
.timeline-item h3 { margin: 2px 0 8px; }
.timeline-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.timeline-card .stage-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.timeline-card .stage-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; }
.timeline-card .stage-meta dd { margin: 2px 0 0; font-size: 0.9rem; color: var(--color-body); }

/* ---------- Level ladder (Foundations) ---------- */
.ladder { display: grid; gap: 14px; counter-reset: level; }
.ladder-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.ladder-item .level-num {
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem;
}
.ladder-item h3 { margin: 0 0 4px; font-size: 1.15rem; }
.ladder-item p { margin: 0; font-size: 0.95rem; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px;
}
.testimonial blockquote { margin: 0; font-size: 1.05rem; color: var(--color-ink); line-height: 1.6; }
.testimonial .attribution { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-grey); border: 1px solid var(--color-border); flex: 0 0 auto; }
.testimonial .attribution cite { font-style: normal; font-weight: 700; color: var(--color-primary); }
.testimonial .attribution span { display: block; font-size: 0.82rem; color: var(--color-muted); }

/* ---------- Founder cards ---------- */
.founder-card { text-align: center; }
.founder-card .founder-photo {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--grad-brand); border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.founder-card h3 { margin-bottom: 2px; }
.founder-card .role { color: var(--color-blue); font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }

/* ---------- "Who's teaching" panel (About page) ---------- */
.teach-panel { background: #eef4ff; border-radius: var(--radius); padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 40px); }
.teach-panel .section-header h2 .accent-blue { color: var(--color-blue); }
.teach-panel .card { border-top: 4px solid var(--color-blue); }
.teach-panel .card:nth-child(2) { border-top-color: #0ea5e9; }
.teach-panel .card .teach-label {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-blue); margin-bottom: 12px;
}
.teach-panel .card:nth-child(2) .teach-label { color: #0369a1; } /* was #0ea5e9 - 2.77:1 on white, fails AA at 12px */
.teach-panel .card h3 { margin: 0 0 10px; }
.teach-panel .card p { margin: 0; color: var(--color-body); }

/* ---------- Roles & collaborations panel (Careers page) ---------- */
.role-card { border-top: 4px solid var(--color-blue); }
/* "Discuss a collaboration →" is nowrap by default (.btn), which below ~360px
   forces the card wider than its 1fr track and scrolls the page sideways.
   Same fix as .checkout-card: let the label wrap. */
.role-card .btn { white-space: normal; line-height: 1.25; }
.role-card.role-card-amber { border-top-color: #eba91b; }
.role-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-blue); margin-bottom: 12px;
}
.role-card-amber .role-label,
.role-label.role-label-amber { color: #92600a; } /* was #b9790a - 3.62:1 on white, fails AA at 12px */
.role-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm); padding: 24px 28px; margin-top: 20px;
}
.role-bar h3 { margin: 0 0 6px; }
.role-bar p { margin: 0; color: var(--color-body); max-width: 60ch; }
.role-meta {
  display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--color-blue); margin: 4px 0 14px;
}

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-size: 1.075rem; font-weight: 600; color: var(--color-primary);
  font-family: inherit;
}
.faq-question:hover { color: var(--color-blue); }
.faq-icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; transition: transform 0.25s ease; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.faq-icon::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.faq-icon::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: transform 0.25s ease; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 4px 22px; color: var(--color-body); max-width: 68ch; }

/* ---------- Immersion program: stage cards (on blue section) ---------- */
.stage-card { text-align: left; position: relative; }
.stage-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(49, 87, 232, 0.1); color: var(--color-blue);
  margin-bottom: 14px;
}
.stage-icon svg { width: 22px; height: 22px; }
.stage-card .stage-num {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--color-muted); letter-spacing: 0.04em;
}

/* ---------- Immersion program: six experience cards ---------- */
.exp-card { position: relative; }
.exp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
}
.exp-icon svg { width: 22px; height: 22px; }
.exp-num {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--color-muted); letter-spacing: 0.04em;
}
.exp-icon-1 { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.exp-icon-2 { background: rgba(49, 87, 232, 0.12); color: var(--color-blue); }
.exp-icon-3 { background: rgba(108, 85, 245, 0.14); color: var(--color-purple); }
.exp-icon-4 { background: rgba(234, 179, 8, 0.16); color: #92660a; }
.exp-icon-5 { background: rgba(236, 72, 153, 0.14); color: #be185d; }
.exp-icon-6 { background: rgba(16, 185, 129, 0.14); color: #047857; }

/* ---------- Immersion program: compliance callout ---------- */
.compliance-box {
  background: var(--color-grey); border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm); padding: 20px 24px; margin-top: 20px;
}
.compliance-box p { margin: 0; font-size: 0.92rem; color: var(--color-body); }
.compliance-box p + p { margin-top: 12px; }
.delivery-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-blue); color: #fff; margin-bottom: 16px;
}
.delivery-icon svg { width: 22px; height: 22px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary); background-image: var(--grad-brand); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: 28px; }

/* ---------- Split / media rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.reverse .split-media { order: 2; }

/* ---------- Stats row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.stat .stat-figure { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; color: var(--color-blue); letter-spacing: var(--tracking-tight); }
.stat .stat-label { font-size: 0.9rem; color: var(--color-muted); }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
.form-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.form-field { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field label { display: block; font-weight: 600; color: var(--color-primary); margin-bottom: 7px; font-size: 0.92rem; }
.form-field .req { color: var(--color-blue); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--color-ink); background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--color-blue); box-shadow: var(--ring);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-hint { font-size: 0.82rem; color: var(--color-muted); margin-top: 6px; }

.form-success { display: none; text-align: center; padding: 48px 32px; background: var(--color-grey); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.form-success.visible { display: block; }
.form-success .success-mark {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px;
  background: rgba(16,185,129,0.12); color: var(--color-success);
  display: flex; align-items: center; justify-content: center;
}
.form-card form.hidden { display: none; }

/* ---------- Segmented form tabs (Careers apply/partnership) ---------- */
.form-tabs { display: flex; gap: 4px; background: var(--color-grey); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 24px; }
.form-tab {
  flex: 1; text-align: center; padding: 11px 16px; border-radius: var(--radius-pill);
  border: none; background: transparent; color: var(--color-body); font-weight: 700;
  font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.form-tab[aria-selected="true"] { background: var(--color-blue); color: #fff; }
.form-panel { display: none; }
.form-panel.active { display: block; }

.contact-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-detail .cd-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: var(--color-grey); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-blue); }
.contact-detail h3, .contact-detail h4 { margin: 0 0 2px; }
.contact-detail p { margin: 0; font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.72); padding: clamp(48px, 6vw, 72px) 0 32px; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand .logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 34ch; font-size: 0.92rem; }
.footer-col h3, .footer-col h4 { color: #fff; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 0.85rem; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #fff; }
.footer-social a:hover { background: rgba(255,255,255,0.16); }
.footer-social svg { width: 18px; height: 18px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding: 12px 16px; gap: 12px;
  box-shadow: 0 -6px 24px rgba(11,31,58,0.08);
}
.sticky-cta .btn { flex: 1; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Safety net: if scripting is unavailable, never leave content hidden. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-sm > * + * { margin-top: 10px; }
.muted { color: var(--color-muted); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.lead-list { list-style: none; padding: 0; margin: 0; }
.lead-list li { position: relative; padding: 8px 0 8px 30px; }
.lead-list li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 16px;
  background: var(--color-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .trust-bar .container { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch;
    padding: 12px 16px 32px; gap: 4px;
    display: none;
    box-shadow: var(--shadow);
    /* 100vh on a phone is the viewport WITHOUT the browser's address bar and
       toolbar, so the panel runs on underneath them and the last item - the
       中文 switch - sits off-screen with no way to scroll to it. dvh is the
       height actually on screen; the vh line stays as the pre-dvh fallback. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px; font-size: 1rem; }
  .nav-links .nav-cta { margin: 8px 0 0; }
  .nav-links .btn { width: 100%; }
  /* Dropdown becomes a static, indented sublist on mobile */
  .has-dropdown { flex-direction: column; align-items: stretch; }
  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    min-width: 0; padding: 0 0 4px 12px; margin: 0;
    transition: none;
  }
  .dropdown a:not(.btn) { font-size: 0.95rem; padding: 10px 12px; }
  .dropdown-toggle .caret { display: none; }
}

@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 72px; }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}


/* ---------- Level detail pages (Level 1-5 of the AI Science Program) ---------- */
.level-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.level-stats li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

.module-detail-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.module-detail-card .md-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--grad-soft);
}
.module-detail-card span.md-thumb {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 2rem;
  color: var(--color-blue); opacity: 0.7;
}
.module-detail-card .md-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.module-detail-card .md-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue);
}
.module-detail-card h3 { margin: 6px 0 2px; font-size: 1.1rem; }
.module-detail-card .md-sub {
  margin: 0 0 8px; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-purple);
}
.module-detail-card .md-q { margin: 0; font-size: 0.93rem; color: var(--color-body); }
.module-detail-card .md-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 0.82rem; color: var(--color-muted); font-weight: 500;
  margin: 12px 0 0;
}
.module-detail-card .md-meta .price { font-weight: 800; color: var(--color-primary); }
.module-detail-card .card-link { margin-top: auto; padding-top: 16px; font-weight: 600; }

/* ---------- Catalogue carousels (Enrol page) — Levels and Modules share one card size ---------- */
/* Card width matches program-level-N pages' .grid-3 sizing as closely as a scrollable
   row allows: ~3 cards fully in view with a clear peek of the next one. */
.catalogue-carousel .carousel-item { width: 30%; }
@media (max-width: 860px) { .catalogue-carousel .carousel-item { width: 46%; } }
@media (max-width: 560px) { .catalogue-carousel .carousel-item { width: 88%; } }

#learning-paths, #modules { scroll-margin-top: 90px; }

.build-band {
  background: var(--grad-brand); color: #fff;
  border-radius: var(--radius); padding: 26px 30px; text-align: center;
}
.build-band .bb-label {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.85; margin-bottom: 8px;
}
.build-band .bb-items { margin: 0; font-size: 1.15rem; font-weight: 700; }

.lesson-card .lc-num {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue);
}
.lesson-card h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.lesson-card .lc-hours { margin: 0 0 8px; font-size: 0.85rem; color: var(--color-muted); }

.level-pager {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 8px;
}
.level-pager a {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-blue-700);
}