/* ==========================================================================
   EARN International / African Greeneurs: site design system
   --------------------------------------------------------------------------
   Built on the official EARN corporate identity:
     EARN Blue   #00AFEF  (Pantone 306C)   corporate + partner touchpoints
     EARN Green  #a2bb55  (Pantone 382U)   African Greeneurs + training
     Black       #000000
     White       #FFFFFF
   Typeface: Arial, as the EARN CI mandates for all electronic applications.
   No web fonts are loaded anywhere on this site.

   Rules
   - Every colour, size, space, radius, shadow and duration below is a token.
     Components use tokens only; never hardcode a new value in a component.
   - No hues outside the EARN palette. Neutrals are tints of black.
   - EARN Blue and EARN Green fail AA as text on white (2.5:1 and 2.2:1), so
     brand text uses the -700 blue / -800 green shades. The original hues are
     used as fills (with black text, 8.4:1 and 9.8:1), borders and accents.
   - Arial ships in two weights (400, 700). Hierarchy comes from size,
     letter-spacing, case and colour, not from weights that do not exist.
   ========================================================================== */

/* ---------- 1. Primitive tokens ---------- */
:root {
  /* Brand */
  --earn-blue: #00AFEF;
  --earn-green: #a2bb55;
  --earn-black: #000000;
  --earn-white: #ffffff;

  /* Blue ramp (derived from EARN Blue) */
  --blue-900: #00354a;
  --blue-800: #00506e;
  --blue-700: #006f97;   /* 5.6:1 on white: smallest blue for text */
  --blue-600: #008fc4;
  --blue-500: #00AFEF;
  --blue-400: #38c3f3;
  --blue-300: #7ad7f7;
  --blue-200: #b5e8fb;
  --blue-100: #ddf4fd;
  --blue-050: #f0fafe;

  /* Green ramp (derived from EARN Green) */
  --green-900: #3c471f;
  --green-800: #55642c;  /* 6.5:1 on white: smallest green for text */
  --green-700: #6f8339;  /* 4.2:1: large text and non-text only */
  --green-600: #89a246;
  --green-500: #a2bb55;
  --green-400: #b5c979;
  --green-300: #c8d89d;
  --green-200: #dbe6c1;
  --green-100: #edf2e0;
  --green-050: #f7faf1;

  /* Neutrals (tints of EARN Black) */
  --ink-1000: #000000;
  --ink-900: #111111;
  --ink-800: #1f1f1f;
  --ink-700: #3a3a3a;
  --ink-600: #555555;    /* 7.5:1 */
  --ink-500: #6b6b6b;    /* 5.3:1: smallest grey for text */
  --ink-400: #949494;    /* decorative only */
  --ink-300: #c4c4c4;
  --ink-200: #e3e3e3;
  --ink-100: #f2f2f2;
  --ink-050: #f8f8f8;
  --paper: #ffffff;

  /* Error: the one hue outside the palette, kept restrained and secondary. */
  --red-700: #b3261e;
  --red-100: #fbeeed;
  --red-200: #f1c9c6;

  /* ---------- 2. Semantic tokens ---------- */
  --color-heading: var(--ink-1000);
  --color-text: var(--ink-800);
  --color-text-muted: var(--ink-600);
  --color-text-subtle: var(--ink-500);
  --color-surface: var(--paper);
  --color-surface-alt: var(--ink-050);
  --color-surface-sunk: var(--ink-100);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-900);
  --text-green: var(--green-800);
  --text-blue: var(--blue-700);
  --focus-ring: var(--blue-700);
  --scrim: 0, 0, 0; /* EARN Black, as an rgb triplet for media scrims */

  --success-fg: var(--green-800);
  --success-bg: var(--green-100);
  --success-border: var(--green-300);
  --notice-fg: var(--blue-800);
  --notice-bg: var(--blue-050);
  --notice-border: var(--blue-200);
  --danger: var(--red-700);
  --danger-bg: var(--red-100);
  --danger-border: var(--red-200);

  /* ---------- 3. Typography ---------- */
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font: var(--font-sans); /* legacy alias */

  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale (1rem = 16px) */
  --text-2xs: 0.6875rem;  /* 11: dev flags only */
  --text-xs: 0.75rem;     /* 12: eyebrows, badges */
  --text-sm: 0.875rem;    /* 14: meta, helper, tags */
  --text-md: 1rem;        /* 16: body, inputs */
  --text-lg: 1.125rem;    /* 18: lead, card titles */
  --text-xl: 1.375rem;    /* 22: section subheads */
  --text-2xl: 1.75rem;    /* 28: small display */
  --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);   /* 32 to 44: page titles */
  --text-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);   /* 40 to 68: hero display */

  --leading-none: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.03em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.06em;
  --tracking-eyebrow: 0.16em;

  --measure: 62ch;
  --measure-narrow: 44ch;

  /* ---------- 4. Space (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- 5. Shape ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;     /* fields, small cards */
  --radius-lg: 16px;     /* cards, tiles */
  --radius-xl: 24px;     /* feature panels */
  --radius-pill: 999px;  /* buttons, chips, badges, tags */
  --border-thin: 1px;
  --border-base: 2px;

  /* Legacy aliases used by the application and sponsor flows */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --r-pill: var(--radius-pill);

  /* ---------- 6. Elevation (shadows are tints of EARN Black) ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 22px 48px -12px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .05);
  --shadow-up: 0 -8px 24px -8px rgba(0, 0, 0, .14);
  --shadow-chip: var(--shadow-xs);

  /* ---------- 7. Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-emphasis: cubic-bezier(.2, .8, .2, 1);

  /* ---------- 8. Layout ---------- */
  --wrap-narrow: 680px;  /* forms, prose */
  --wrap: 1040px;        /* landing */
  --wrap-wide: 1240px;   /* storefront, course pages */
  --gutter: 16px;
  --topbar-h: 64px;
  --z-raised: 1;
  --z-sticky: 30;
  --z-overlay: 50;

  /* ---------- 9. Path accent (overridden per path) ---------- */
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-on: var(--ink-1000);          /* text on an --accent fill */
  --accent-text: var(--green-800);       /* accent-coloured text on white */
  --accent-strong: var(--green-800);
  --accent-deep: var(--green-900);
  --accent-tint: var(--green-100);
  --accent-tint-soft: var(--green-050);
  --accent-border: var(--green-300);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --topbar-h: 72px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 32px; }
}

/* Green: African Greeneurs / training touchpoints */
.path-applicant,
.path-training {
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-on: var(--ink-1000);
  --accent-text: var(--green-800);
  --accent-strong: var(--green-800);
  --accent-deep: var(--green-900);
  --accent-tint: var(--green-100);
  --accent-tint-soft: var(--green-050);
  --accent-border: var(--green-300);
}

/* Blue: EARN International / corporate + partner touchpoints */
.path-sponsor,
.path-corporate {
  --accent: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-on: var(--ink-1000);
  --accent-text: var(--blue-700);
  --accent-strong: var(--blue-700);
  --accent-deep: var(--blue-900);
  --accent-tint: var(--blue-100);
  --accent-tint-soft: var(--blue-050);
  --accent-border: var(--blue-300);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--space-4)); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4 { color: var(--color-heading); font-weight: var(--weight-bold); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.visually-hidden {
  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: var(--space-4);
  top: -100px;
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-1000);
  color: var(--paper);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--paper); }

/* Placeholder flag: values EARN has not confirmed. Only visible on local and
   preview deployments (html.is-dev), never on the live site. */
.tbc-flag { display: none; }
html.is-dev .tbc-flag {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-1);
  padding: 1px 5px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-thin) dashed var(--ink-1000);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Brand furniture: rule, top bar, page ground, breadcrumb, footer
   ========================================================================== */

/* The corporate line motif: blue over green. */
.earn-rule {
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--earn-blue) 0%, var(--earn-blue) 55%,
    var(--earn-green) 55%, var(--earn-green) 100%);
}

/* EARN strip, header, navigation: see "Site chrome" below. */

/* Page ground: soft brand washes plus the faint EARN globe watermark. */
.page {
  position: relative;
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--green-050) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 480px at 6% 102%, var(--blue-050) 0%, rgba(255, 255, 255, 0) 60%),
    var(--paper);
  overflow: hidden;
}

/* Decorative, so it lives in CSS rather than as an <img> needing alt text. */
.page::before {
  content: "";
  position: absolute;
  top: var(--space-10);
  left: 50%;
  width: min(940px, 150vw);
  aspect-ratio: 627 / 470;
  transform: translateX(-50%);
  background: url("/brand/earn-globe.png") center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-12);
}
.wrap--hub { max-width: var(--wrap); }
.wrap--wide { max-width: var(--wrap-wide); }

.breadcrumb {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) 0;
  font-size: var(--text-sm);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-subtle); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-400); }
.breadcrumb a { color: var(--color-text-muted); font-weight: var(--weight-bold); text-decoration: none; padding: var(--space-2) 0; }
.breadcrumb a:hover { color: var(--ink-1000); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--color-text-subtle); }

/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: var(--border-thin) solid var(--accent-border);
  border-radius: var(--radius-pill);
}

/* ---------- Buttons ----------
   Primary: brand fill, black label (8.4:1 blue, 9.8:1 green).
   Dark: black fill, white label, for the single strongest action on a
   neutral ground. Secondary: outline. Quiet: text-only. */
.btn,
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: var(--border-base) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn--block, form .btn, form .btn-primary { width: 100%; }

.btn--primary,
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--accent-on);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--dark {
  background: var(--ink-1000);
  color: var(--paper);
}
.btn--dark:hover:not(:disabled) { background: var(--ink-800); color: var(--paper); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--secondary,
.btn-secondary {
  background: var(--paper);
  color: var(--ink-1000);
  border-color: var(--ink-1000);
}
.btn--secondary:hover:not(:disabled),
.btn-secondary:hover { background: var(--ink-050); color: var(--ink-1000); transform: translateY(-1px); }

.btn--on-dark { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .7); }
.btn--on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, .12); color: var(--paper); border-color: var(--paper); }

.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: var(--text-md); }

.btn:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn:disabled, .btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Legacy .btn-secondary sits inline on the thank-you screens */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: var(--space-2) var(--space-1) 0;
  padding: var(--space-3) var(--space-6);
  border: var(--border-base) solid var(--ink-1000);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.btn-back {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: none;
  border: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.btn-back:hover { color: var(--ink-1000); background: var(--color-surface-sunk); }

/* Text link with an arrow, for secondary routes */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
}
.link-arrow:hover { color: var(--ink-1000); text-decoration-color: var(--ink-1000); }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Spinner */
.spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn-label { opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Badges (status) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid transparent;
}
.badge--new,
.badge--early-bird { background: var(--earn-green); color: var(--ink-1000); }
.badge--sold-out { background: var(--ink-1000); color: var(--paper); }
.badge--waitlist { background: var(--paper); color: var(--ink-1000); border-color: var(--ink-1000); }
.badge--coming-soon { background: var(--green-100); color: var(--green-900); border-color: var(--green-300); }
.badge--corporate { background: var(--earn-blue); color: var(--ink-1000); }

/* ---------- Tags (facts: duration, delivery mode) ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  color: var(--ink-800);
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}
.tag svg { width: 13px; height: 13px; flex: 0 0 auto; }
.tag--on-media {
  color: var(--paper);
  background: rgba(var(--scrim), .42);
  border-color: rgba(255, 255, 255, .38);
}

/* ---------- Filter chips (toggle buttons) ---------- */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  white-space: nowrap;
  color: var(--ink-800);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.chip-toggle:hover { border-color: var(--ink-1000); }
.chip-toggle[aria-pressed="true"] { background: var(--ink-1000); border-color: var(--ink-1000); color: var(--paper); }

/* ---------- Section heading ---------- */
.section-head { margin: 0 0 var(--space-6); }
.section-head h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.section-head p { margin: var(--space-2) 0 0; color: var(--color-text-muted); max-width: var(--measure); }
.section-head__rule {
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 0 var(--space-4);
  background: linear-gradient(90deg, var(--earn-blue) 0 55%, var(--earn-green) 55% 100%);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Hero (shared by every page)
   ========================================================================== */
.hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
}
@media (min-width: 768px) { .hero { padding: var(--space-12) 0 var(--space-8); } }

/* The African Greeneurs logo: same position (centred, top of the page body)
   and proportions on every page. */
.hero__logo { height: 72px; width: auto; margin: 0 auto var(--space-5); }
@media (min-width: 768px) { .hero__logo { height: 88px; margin-bottom: var(--space-6); } }

.hero .hero__eyebrow {
  display: inline-block;
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: var(--border-thin) solid var(--accent-border);
  border-radius: var(--radius-pill);
}

.hero h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.hero--display h1 { font-size: var(--text-4xl); line-height: var(--leading-none); margin-bottom: var(--space-4); }
@media (min-width: 768px) {
  .hero--display { padding: var(--space-10) 0 var(--space-7); }
  .hero--display .hero__logo { height: 76px; margin-bottom: var(--space-5); }
}

.hero__sub {
  margin: 0 auto var(--space-2) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--ink-1000) !important;
}

.hero p {
  margin: 0 auto;
  max-width: var(--measure-narrow);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}
@media (min-width: 768px) { .hero p { font-size: var(--text-lg); } }

.hero__tagline {
  margin: var(--space-5) auto 0 !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--text-blue) !important;
}

/* ==========================================================================
   Learning / Earning / Owning strip
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-2);
  background: rgba(162, 187, 85, .12); /* EARN Green, translucent so the globe shows through */
  border: var(--border-thin) solid rgba(162, 187, 85, .40);
  border-radius: var(--radius-lg);
  text-align: center;
}
.pillars__item { padding: 0 var(--space-3); color: var(--ink-800); }
.pillars__item + .pillars__item { border-left: var(--border-thin) solid rgba(111, 131, 57, .30); }

.pillars__value {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-green);
}
.pillars__label {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .pillars { padding: var(--space-4); margin-bottom: var(--space-6); }
  .pillars__value { font-size: var(--text-lg); }
  .pillars__label { font-size: var(--text-sm); }
}
@media (max-width: 479px) {
  .pillars__label { display: none; }
  .pillars { padding: var(--space-4) var(--space-2); margin-bottom: var(--space-6); }
}

/* ==========================================================================
   Landing: three paths
   ========================================================================== */
.paths {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-10);
}
@media (min-width: 880px) {
  .paths {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-5);
  }
  .path-card--featured { grid-row: 1 / span 2; }
}

.path-card {
  --card-accent: var(--earn-green);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.path-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--card-accent);
  z-index: 2;
}
.path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--card-accent); color: inherit; }
.path-card:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }

.path-card--corporate { --card-accent: var(--earn-blue); }

.path-card__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
@media (min-width: 768px) { .path-card__body { padding: var(--space-7) var(--space-7) var(--space-6); } }

.path-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-800);
}
.path-card--corporate .path-card__icon { background: var(--blue-100); color: var(--blue-700); }
.path-card__icon svg { width: 26px; height: 26px; }

.path-card__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink-1000);
}
.path-card__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-md); line-height: var(--leading-normal); }

.path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-1000);
}
.path-card__cta svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.path-card:hover .path-card__cta svg { transform: translateX(4px); }
.path-card__cta-line { border-bottom: 2px solid var(--card-accent); padding-bottom: 2px; }

/* Featured: Short Courses. Larger, media-led, green, "New". */
.path-card--featured { border-color: var(--green-300); }
.path-card__media {
  position: relative;
  aspect-ratio: 2 / 1;
  background: var(--green-900);
  overflow: hidden;
}
.path-card__media img {
  object-position: 50% 62%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.path-card--featured:hover .path-card__media img { transform: scale(1.03); }
.path-card__badge { align-self: flex-start; margin-bottom: var(--space-1); }

.path-card--featured .path-card__title { font-size: var(--text-2xl); }
/* Desktop: the pitch and button come first so they sit above the fold;
   the media fills the rest of the tall card beneath them. */
@media (min-width: 880px) {
  .path-card--featured .path-card__media { order: 2; aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; }
  .path-card--featured .path-card__body { order: 1; flex: 0 0 auto; }
  .path-card--featured .path-card__title { font-size: var(--text-3xl); }
}

.path-card__cta--button {
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  min-height: 48px;
  background: var(--earn-green);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-2) var(--ease-out);
}
.path-card--featured:hover .path-card__cta--button { background: var(--green-600); }

/* "More of what we do": deliberately quieter than the path cards. */
.learn-more { margin: var(--space-8) 0 var(--space-1); text-align: center; }
.learn-more__label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.learn-more__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.learn-more__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.learn-more__icon { width: 15px; height: 15px; flex: 0 0 auto; }
.learn-more__link--green { color: var(--green-800); background: var(--green-050); border-color: var(--green-200); }
.learn-more__link--green:hover { color: var(--green-900); background: var(--green-100); border-color: var(--green-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.learn-more__link--blue { color: var(--blue-800); background: var(--blue-050); border-color: var(--blue-200); }
.learn-more__link--blue:hover { color: var(--blue-900); background: var(--blue-100); border-color: var(--blue-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Forms (Agripreneur application + Partner/Sponsor enquiry)
   ========================================================================== */
.progress-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }

.progress-badge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  box-shadow: 0 0 0 5px var(--accent-tint);
}

.progress { flex: 1 1 auto; display: flex; gap: 6px; }
.progress__segment { flex: 1 1 0; height: 7px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.progress__segment-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--earn-blue));
  transition: width var(--dur-3) var(--ease-out);
}

.progress-label {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.form-card {
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-4) var(--space-5);
  overflow: hidden;
}
@media (min-width: 560px) { .form-card { padding: var(--space-7) var(--space-6) var(--space-6); } }

.step { display: none; }
.step.is-active { display: block; animation: stepIn var(--dur-3) var(--ease-out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.step-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-base) solid var(--color-surface-sunk);
}
.step-heading__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.step-heading h2 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* :last-child, not :last-of-type: the form mixes <div class="field"> and
   <fieldset class="field">. min-width:0 lets a <fieldset> shrink in a grid. */
.field { margin: 0 0 var(--space-6); border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field > legend,
.field__label {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-900);
}
.field .optional { font-weight: var(--weight-regular); color: var(--color-text-subtle); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) 14px;
  font-family: inherit;
  font-size: var(--text-md); /* 16px stops iOS zooming on focus */
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-500); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-500); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink-1000);
  box-shadow: 0 0 0 4px var(--accent-tint), 0 0 0 5px var(--accent);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 42px;
}
textarea { min-height: 140px; resize: vertical; line-height: var(--leading-normal); }

.helper { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-subtle); }
.char-count { margin: var(--space-1) 0 0; text-align: right; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

.field-error { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--danger); display: none; }
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 4px var(--danger-bg); }
.field.has-error .chip-grid,
.field.has-error .checkbox-field { border-radius: var(--radius-md); outline: 2px solid var(--danger-border); outline-offset: 6px; }

/* Segmented toggle (e.g. SA ID / Passport) */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: var(--space-1);
  background: var(--color-surface-sunk);
  border-radius: var(--radius-pill);
}
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.segmented input:checked + span { background: var(--paper); color: var(--ink-1000); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ---------- Chips: one tap, no typing ---------- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-grid--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.chip-grid--wide { display: grid; grid-template-columns: 1fr; gap: 9px; }

/* Grid items default to min-width:auto, which pushes the right-hand column
   past the card edge on narrow screens. min-width:0 lets the label wrap. */
.chip { position: relative; display: block; min-width: 0; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.chip span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px var(--space-4);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--ink-700);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: break-word;
  box-shadow: var(--shadow-chip);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.chip span::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: var(--border-base) solid var(--ink-400);
  border-radius: 6px;
  background: var(--paper);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.chip--radio span::before { border-radius: 50%; }
.chip span:hover { border-color: var(--accent-border); background: var(--accent-tint-soft); }

.chip input:checked + span {
  border-color: var(--accent-strong);
  background: var(--accent-tint);
  color: var(--ink-1000);
}
.chip input:checked + span::before {
  border-color: var(--ink-1000);
  background: var(--ink-1000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.chip--compact span { min-height: 44px; padding: 9px 14px; }
.chip--compact span::before { width: 17px; height: 17px; }

.chip-group { margin: 0 0 var(--space-5); }
.chip-group:last-child { margin-bottom: 0; }
.chip-group__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-blue);
}
.chip-group__title::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--color-surface-sunk); border-radius: 2px; }

.multi-hint { margin: 0 0 14px; font-size: var(--text-sm); color: var(--color-text-subtle); }
.multi-hint strong { color: var(--accent-strong); font-weight: var(--weight-bold); }

.conditional[hidden] { display: none; }
.subform-divider { margin: var(--space-7) 0 var(--space-6); border: 0; border-top: var(--border-base) dashed var(--color-border); }

/* Consent rows */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px;
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.checkbox-field:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-tint-soft); }
.checkbox-field + .checkbox-field { margin-top: 10px; }
.checkbox-field input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink-1000); cursor: pointer; }
.checkbox-field label { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); cursor: pointer; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.btn-row { margin-top: var(--space-6); }

/* Messages */
.form-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--space-4);
  padding: 14px var(--space-4);
  background: var(--danger-bg);
  border: var(--border-base) solid var(--danger-border);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.form-error.is-visible { display: flex; }
.form-error .icon { flex: 0 0 auto; margin-top: 2px; }

.turnstile-fallback {
  display: none;
  margin: 10px 0 0;
  padding: var(--space-3) 14px;
  font-size: var(--text-sm);
  color: var(--notice-fg);
  background: var(--notice-bg);
  border: var(--border-thin) solid var(--notice-border);
  border-radius: var(--radius-md);
}
.turnstile-fallback.is-visible { display: block; }
#turnstile-container { margin-top: var(--space-5); }

/* Thank-you screens */
.thankyou {
  display: none;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.thankyou.is-active { display: block; animation: stepIn var(--dur-3) var(--ease-out) both; }
.thankyou__check {
  width: 74px; height: 74px;
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 0 0 9px var(--accent-tint);
}
.thankyou__check .icon { width: 36px; height: 36px; }
.thankyou h1 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.thankyou p { margin: 0 auto var(--space-5); max-width: 32em; color: var(--color-text-muted); }
.thankyou__next {
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  max-width: 34em;
  background: var(--color-surface-sunk);
  border-radius: var(--radius-md);
  text-align: left;
}
.thankyou__next h2 { margin: 0 0 10px; font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.thankyou__next ol { margin: 0; padding-left: var(--space-5); color: var(--ink-700); font-size: var(--text-sm); }
.thankyou__next li { margin-bottom: 6px; }

/* ==========================================================================
   Content pages
   ========================================================================== */
.prose {
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}
.prose h2 { margin: var(--space-7) 0 10px; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-700); }
.prose ul { padding-left: var(--space-5); }

/* ==========================================================================
   Responsive + preferences
   ========================================================================== */
@media (max-width: 560px) {
  .chip-grid--cols { grid-template-columns: 1fr 1fr; }
  .page::before { top: var(--space-5); width: 150vw; opacity: .05; }
}
@media (max-width: 380px) {
  .chip-grid--cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn-primary:hover:not(:disabled), .btn-secondary:hover,
  .path-card:hover, .learn-more__link:hover { transform: none !important; }
  .path-card--featured:hover .path-card__media img { transform: none; }
}

@media print {
  .btn, .btn-back, .earn-rule { display: none; }
  .page { background: var(--paper); }
}

/* ==========================================================================
   Site chrome: EARN strip, header, navigation, footer, sticky CTA bar
   ========================================================================== */

/* EARN strip: keeps the EARN mark and the descriptor on every page. */
.earnbar { background: var(--color-surface-alt); border-bottom: var(--border-thin) solid var(--color-border); }
.earnbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 6px var(--gutter);
}
.earnbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; color: var(--ink-800); text-decoration: none; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.earnbar__brand:hover { color: var(--ink-1000); text-decoration: underline; }
.earnbar__brand img { height: 16px; width: auto; }
.earnbar__meta {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: right;
  line-height: var(--leading-snug);
  color: var(--color-text-subtle);
}
.earnbar__meta span:first-child { color: var(--text-green); }
.earnbar__sep { margin: 0 var(--space-2); color: var(--ink-400); }
@media (max-width: 767px) {
  .earnbar__brand span { display: none; }
  .earnbar__meta { font-size: 0.625rem; letter-spacing: 0.02em; }
  .earnbar__meta span { display: block; }
  .earnbar__sep { display: none !important; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  border-bottom: var(--border-thin) solid var(--color-border);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 10px var(--gutter);
  min-height: 64px;
}
.site-header__logo { flex: 0 0 auto; margin-right: auto; border-radius: var(--radius-xs); }
.site-header__logo img { height: 38px; width: auto; }
@media (min-width: 1024px) { .site-header__inner { min-height: 76px; } .site-header__logo img { height: 46px; } }

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  .site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--ink-800);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: var(--space-3); right: var(--space-3); bottom: 6px;
    height: 3px;
    background: var(--earn-green);
    border-radius: var(--radius-pill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .site-nav a:hover { color: var(--ink-1000); background: var(--color-surface-alt); }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--ink-1000); }
}

.site-header__cta { flex: 0 0 auto; }
@media (max-width: 379px) { .site-header__cta { padding-left: var(--space-3); padding-right: var(--space-3); } }

.menu-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--paper);
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--ink-1000); }
.menu-btn__bars { display: grid; gap: 4px; width: 18px; }
.menu-btn__bars span { display: block; height: 2px; background: var(--ink-1000); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mobile-nav {
  border-top: var(--border-thin) solid var(--color-border);
  padding: var(--space-3) var(--gutter) var(--space-6);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--paper);
  animation: menuIn var(--dur-2) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mobile-nav__list { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-border);
}
.mobile-nav__list a[aria-current="page"] { color: var(--text-green); }
.mobile-nav__list a[aria-current="page"]::before { content: ""; width: 4px; height: 24px; margin-right: var(--space-3); background: var(--earn-green); border-radius: var(--radius-pill); order: -1; }
.mobile-nav__contact { margin: var(--space-4) 0 0; font-size: var(--text-sm); text-align: center; line-height: 2; }
html.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* Footer: light ground, because the EARN and AG lockups are black type. */
.site-footer {
  position: relative;
  z-index: var(--z-raised);
  background: var(--color-surface-alt);
  border-top: var(--border-thin) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer__inner { max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-6); }
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.1fr 2fr 1fr 1.3fr; gap: var(--space-8); } }
.site-footer h2 { white-space: nowrap; }
.site-footer h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-1000);
}
.site-footer a { color: var(--ink-800); }
.site-footer a:hover { color: var(--ink-1000); }
.footer-brand__logo { display: inline-block; margin-bottom: var(--space-3); }
.footer-brand__logo img { height: 48px; width: auto; }
.footer-brand p { margin: 0 0 var(--space-4); max-width: 34ch; line-height: var(--leading-normal); color: var(--ink-700); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 6px 0; text-decoration: none; font-weight: var(--weight-bold); }
.footer-nav a:hover { text-decoration: underline; }
@media (max-width: 479px) { .footer-nav { grid-template-columns: 1fr 1fr; } }
.footer-contact p, .footer-contact address { margin: 0 0 var(--space-3); font-style: normal; line-height: var(--leading-normal); }
.footer-contact__hours { color: var(--color-text-subtle); }
.footer-news p { margin: 0 0 var(--space-3); line-height: var(--leading-normal); }
.footer-news__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.footer-news__row input { min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--text-md); }
.footer-news__consent { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug); cursor: pointer; }
.footer-news__consent input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--ink-1000); }
.footer-news__phone { margin-top: var(--space-3); }
.footer-news__phone label { display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.footer-news__phone input, .footer-news__phone select { min-height: 44px; }
.footer-news__fine { display: block; margin-top: 2px; color: var(--color-text-subtle); }
.footer-news__msg { min-height: 1.4em; margin: var(--space-2) 0 0 !important; font-weight: var(--weight-bold); color: var(--text-green); }
.footer-news__msg.is-error { color: var(--danger); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
}
.social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: var(--border-thin) solid var(--color-border); color: var(--ink-1000); }
.social a:hover { background: var(--ink-1000); color: var(--paper); }
.social svg { width: 18px; height: 18px; }
.social-todo { display: none; margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
html.is-dev .social-todo { display: block; }
.footer-earn { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: var(--weight-bold); }
.footer-earn img { height: 26px; width: auto; }
.footer-legal { margin: 0; color: var(--color-text-subtle); font-size: var(--text-xs); }
.site-footer__tagline {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--text-blue);
}

/* Sticky mobile CTA bar: every page except course pages and checkout. */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--ink-1000);
  color: var(--paper);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease-out);
}
.cta-bar.is-visible { transform: none; }
.cta-bar__text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.cta-bar__text strong { color: var(--earn-green); font-size: var(--text-md); }
@media (min-width: 1024px) { .cta-bar { display: none; } }
/* Fallback when the chatbot launcher can't be lifted (see /js/site.js): the
   bar makes room underneath its button, so the launcher never covers it. */
@media (max-width: 1023px) {
  html.chatbot-dock .cta-bar, html.chatbot-dock .book-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* While the chat is open it covers the page: slide the bar away until it closes. */
  html.chat-open .cta-bar, html.chat-open .book-bar { transform: translateY(110%) !important; }
}

/* Fade-up on scroll. Only hides content when JS is running to reveal it. */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* Site chrome always speaks for African Greeneurs (green), even on blue
   corporate pages, so "Book a Course" stays the same everywhere. */
.earnbar, .site-header, .mobile-nav, .site-footer, .cta-bar {
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-on: var(--ink-1000);
  --accent-text: var(--green-800);
  --accent-strong: var(--green-800);
  --accent-tint: var(--green-100);
  --accent-border: var(--green-300);
}

/* Touch targets: every tappable control is at least 44px on phones. */
.earnbar__brand { min-height: 44px; margin: -8px 0; }
.site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.segmented span { min-height: 44px; }