/* 01-tokens.css */
/* ==========================================================================
   Josudan Foundation: design tokens
   --------------------------------------------------------------------------
   Copied unchanged from the African Greeneurs site (EARN Funnel repo,
   public/styles.css sections 1 to 9, October 2026), so both sites share one
   design system. Change a token there and copy it here, never one side only.

   Built on the official EARN corporate identity:
     EARN Blue   #00AFEF   giving, governance, partners, EARN touchpoints
     EARN Green  #a2bb55   programmes, youth, African Greeneurs touchpoints
     Black       #000000
     White       #FFFFFF
   Typeface: Arial only. No web fonts are loaded anywhere on this site.

   Rules
   - 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
     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.
   ========================================================================== */

/* ---------- 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);
}

/* ---------- Josudan Foundation additions (tokens only) ---------- */

/* Blue: giving, governance, partners and EARN touchpoints. The Foundation's
   default path, so Donate and every giving action read blue. */
:root,
.path-give {
  --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);
}

:root {
  /* Status colours stay inside the palette (brand rule: no other hues where
     avoidable). Errors are black and bold, with an icon and a heavy outline,
     so they never rely on colour. Success is green-800 on a green tint. */
  --danger: var(--ink-1000);
  --danger-bg: var(--ink-050);
  --danger-border: var(--ink-1000);

  /* Depth, as on the African Greeneurs site (its public/depth.css). */
  --frame: 0px;
  --ledge: 5px;
  --ledge-hover: 9px;
  --slab-shadow:
    0 var(--ledge) 0 var(--frame-line, var(--ink-300)),
    0 calc(var(--ledge) + 10px) 22px -6px rgba(0, 0, 0, .28),
    0 calc(var(--ledge) + 34px) 60px -22px rgba(0, 0, 0, .38);
  --slab-shadow-hover:
    0 var(--ledge-hover) 0 var(--frame-line, var(--ink-300)),
    0 calc(var(--ledge-hover) + 14px) 28px -6px rgba(0, 0, 0, .30),
    0 calc(var(--ledge-hover) + 46px) 80px -24px rgba(0, 0, 0, .42);
  --photo-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 18px 40px -14px rgba(0, 0, 0, .45);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);

  /* The brand bar: EARN Blue then EARN Green, a hard split, never a blend. */
  --brand-bar: linear-gradient(90deg, var(--earn-blue) 0 55%, var(--earn-green) 55% 100%);
}


/* 02-base.css */
/* ==========================================================================
   Base, page ground and layout
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

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; }
img { height: auto; }
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); }
p { margin: 0 0 var(--space-4); }
address { font-style: normal; }

: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: 100;
  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); }

/* Black framing at the sides on large screens, as on the AG site. */
@media (min-width: 1024px) {
  :root { --frame: 6px; }
  html { background: var(--earn-black); }
  body { margin-inline: var(--frame); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 48px rgba(0, 0, 0, .9); }
}
@media (min-width: 1280px) { :root { --frame: 12px; } }
@media (min-width: 1500px) {
  body { max-width: 1440px; margin-inline: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px 10px rgba(0, 0, 0, .95); }
}

/* Page ground: soft brand washes plus the faint EARN globe watermark. */
.page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--blue-050) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 480px at 6% 102%, var(--green-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. */
.globe-mark { position: relative; isolation: isolate; }
.globe-mark::after {
  content: "";
  position: absolute;
  top: var(--space-8);
  right: -12%;
  width: min(760px, 120vw);
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
  z-index: -1;
}

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

/* Sections: generous rhythm, a black rule between two plain sections. */
.section { position: relative; padding: var(--space-16) 0; }
@media (min-width: 1024px) { .section { padding: var(--space-20) 0; } }
.section--tight { padding: var(--space-12) 0; }
.section--alt { background: var(--color-surface-alt); border-block: var(--border-thin) solid var(--color-border); }
.section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  height: 2px;
  background: var(--earn-black);
}

/* Section heading: ALL CAPS title (four words at most) with the brand bar,
   then a longer Title Case subheading. */
.section-head { margin: 0 0 var(--space-8); }
.section-head h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: var(--space-4);
  background: var(--brand-bar);
  border-radius: var(--radius-pill);
}
.section-head__sub { margin: 0; max-width: 46ch; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-700); text-wrap: balance; }
.section-head__lead { margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--color-text-muted); }
.section-head--center { text-align: center; }
.section-head--center h2::before { margin-inline: auto; }
.section-head--center .section-head__sub, .section-head--center .section-head__lead { margin-inline: auto; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.section-head--split > div { max-width: var(--measure); }

.section-head--sub { margin-bottom: var(--space-6); }
.section-head__lead--flush { margin: 0; }



/* Body copy */
.lead { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-800); }
.lead--follow { margin: var(--space-6) 0 0; }
.copy p { max-width: var(--measure); color: var(--ink-700); }
.copy p:last-child { margin-bottom: 0; }
.copy h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.copy h3:first-child { margin-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); }
  .split--center { align-items: center; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .split--aside-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* 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) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  html { background: none; }
  body { margin: 0; max-width: none; box-shadow: none; }
  .earn-rule, .earnbar, .site-header, .footer-social, .btn { display: none !important; }
}

/* 03-components.css */
/* ==========================================================================
   Components: one style each, shared by every page. Same specs as the
   African Greeneurs site (buttons, eyebrows, tags, fields, slab cards).
   ========================================================================== */

/* ---------- 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);
}
.eyebrow--plain { padding: 0; background: none; border: 0; border-radius: 0; }

/* ---------- Buttons ----------
   Primary: the path accent (blue for giving, green for programmes) with a
   black label (8.6:1 on blue, 9.8:1 on green). Dark: black, white label.
   Secondary: white with a black outline. On-dark: outline on photos. */
.btn {
  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;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)), 0 10px 18px -8px rgba(0, 0, 0, .35);
  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--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn--give { background: var(--earn-blue); border-color: var(--earn-blue); color: var(--ink-1000); }
.btn--give:hover:not(:disabled) { background: var(--blue-400); border-color: var(--blue-400); color: var(--ink-1000); }
.btn--green { background: var(--earn-green); border-color: var(--earn-green); color: var(--ink-1000); }
.btn--green:hover:not(:disabled) { background: var(--green-400); border-color: var(--green-400); color: var(--ink-1000); }
.btn--dark { background: var(--ink-1000); border-color: var(--ink-1000); color: var(--paper); }
.btn--dark:hover:not(:disabled) { background: var(--ink-800); color: var(--paper); }
.btn--secondary { background: var(--paper); border-color: var(--frame-line, var(--ink-300)); color: var(--ink-1000); }
.btn--secondary:hover:not(:disabled) { background: var(--ink-050); color: var(--ink-1000); }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, .85); color: var(--paper); box-shadow: 0 3px 0 rgba(255, 255, 255, .35); }
.btn--on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: var(--paper); color: var(--paper); }

.btn--lg { min-height: 60px; padding-inline: var(--space-8); font-size: var(--text-md); }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); box-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 8px 14px -8px rgba(0, 0, 0, .3); }
.btn--block { width: 100%; }
.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.btn--lg .btn__icon { width: 20px; height: 20px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 var(--frame-line, var(--ink-300)), 0 16px 24px -10px rgba(0, 0, 0, .4); }
  .btn--on-dark:hover:not(:disabled) { box-shadow: 0 5px 0 rgba(255, 255, 255, .45); }
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--frame-line, var(--ink-300)), 0 4px 8px -4px rgba(0, 0, 0, .3); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 479px) { .btn-row > .btn { width: 100%; } }

/* Spinner for buttons that submit */
.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__icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 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; flex: 0 0 auto; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Badges and tags ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  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: 14px; height: 14px; flex: 0 0 auto; }
.tag--blue { color: var(--ink-1000); background: var(--blue-100); border-color: var(--blue-300); }
.tag--green { color: var(--ink-1000); background: var(--green-100); border-color: var(--green-300); }
.tag--dark { color: var(--paper); background: var(--ink-1000); border-color: var(--ink-1000); }

/* Chips: a list of short facts (what support unlocks) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-pill);
}
.chips svg { width: 16px; height: 16px; color: var(--accent-text); }

/* ---------- Placeholder chip ----------
   A value nobody has confirmed (config/site.js PH). Always visibly marked
   "To be confirmed": never a plausible-looking value. On local and preview
   hosts (html.is-dev) it also names what is missing. */
.ph {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-thin) dashed var(--frame-line, var(--ink-300));
  border-radius: var(--radius-xs);
  flex-wrap: wrap;
  max-width: 100%;
}
.ph__what { display: none; text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
html.is-dev .ph__what { display: inline; }
html.is-dev .ph__what::before { content: "("; }
html.is-dev .ph__what::after { content: ")"; }

/* ---------- Icon tile ---------- */
.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--ink-1000);
  background: var(--accent);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300));
}
.icon-tile svg { width: 24px; height: 24px; }
.card > .icon-tile { margin-bottom: var(--space-5); }
.icon-tile--blue { background: var(--blue-200); }
.icon-tile--green { background: var(--green-200); }
.icon-tile--dark { background: var(--ink-1000); color: var(--earn-green); }

/* ---------- Cards: raised slabs with a black ledge ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.card--blue { border-top: 6px solid var(--blue-300); }
.card--green { border-top: 6px solid var(--green-300); }
.card--link { transition: transform var(--dur-3) var(--ease-out-soft), box-shadow var(--dur-3) var(--ease-out-soft); }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover { transform: translateY(-4px); box-shadow: var(--slab-shadow-hover); }
}
.card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }
.card p { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.card p:last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--space-2); }
/* A whole-card link: the title's link stretches over the card. */
.card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__cover { color: var(--ink-1000); text-decoration: none; }
.card__cover:hover { color: var(--ink-1000); text-decoration: underline; }
.card__cover:focus-visible { outline: none; }
.card:has(.card__cover:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A card that presents a logo, centred */
.card--logo { align-items: center; justify-content: center; padding: var(--space-10); }
.card--logo img { max-width: 260px; }

/* Photos framed in black */
.frame { overflow: hidden; border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--photo-shadow); background: var(--ink-100); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--photo { aspect-ratio: 4 / 3; }

/* ---------- Background video ----------
   A muted loop laid over its poster photo; it fades in once playing. The
   pause button (WCAG 2.2.2) sits in the corner, black on white. */
.vid { position: relative; width: 100%; height: 100%; overflow: hidden; }
.vid > picture, .vid > img, .vid > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.vid video.is-playing { opacity: 1; }
.vid__toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--frame-line, var(--ink-300));
  cursor: pointer;
  opacity: .9;
  transition: opacity var(--dur-2) var(--ease-out);
}
.vid__toggle:hover, .vid__toggle:focus-visible { opacity: 1; }
.vid__toggle[hidden] { display: none; }
.vid__toggle svg { width: 18px; height: 18px; }
.vid__toggle .vid__play { display: none; }
.vid__toggle.is-paused .vid__play { display: block; }
.vid__toggle.is-paused .vid__pause { display: none; }
/* A page hero's button sits above the scrim, in the corner of the hero. */
.vid__toggle--hero { right: var(--gutter); bottom: var(--space-4); }

/* ---------- Notices ---------- */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  background: var(--accent-tint-soft);
  border: var(--border-thin) solid var(--accent-border);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-md);
}
.notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-text); }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--space-2); }
.notice a { color: var(--ink-1000); font-weight: var(--weight-bold); }
.notice--green { background: var(--green-050); border-color: var(--green-300); border-left-color: var(--green-300); }
.notice--green svg { color: var(--green-800); }
.notice[hidden] { display: none; }

/* ---------- Disclosure (board biographies) ---------- */
.disclosure { border-top: var(--border-thin) solid var(--color-border); }
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-1000);
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.disclosure[open] summary svg { transform: rotate(180deg); }
.disclosure summary .when-open { display: none; }
.disclosure[open] summary .when-open { display: inline; }
.disclosure[open] summary .when-closed { display: none; }
.disclosure__body { padding: 0 0 var(--space-2); }
.disclosure__body p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); }

/* ---------- Definition lists (registration, banking) ---------- */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-700); }
.facts dd { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-1000); overflow-wrap: anywhere; }
@media (max-width: 420px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Forms ---------- */
.form-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-top: 6px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
@media (min-width: 560px) { .form-card { padding: var(--space-8) var(--space-8) var(--space-8); } }
.form-card__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.form-card__intro { margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }

.field { margin: 0 0 var(--space-5); border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.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="url"], 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(--earn-blue); 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: 132px; 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); }

/* Checkboxes and radios: a large, tappable row */
.check { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; cursor: pointer; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-800); }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink-1000); cursor: pointer; }
.check a { color: var(--ink-1000); font-weight: var(--weight-bold); }
.field > label.check { display: flex; margin: 0; font-weight: var(--weight-regular); color: var(--ink-800); }
.check-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.check-list .check, .provider-list .check { padding: var(--space-3) var(--space-4); border: var(--border-base) solid var(--color-border); border-radius: var(--radius-md); }
.check-list .check:hover, .provider-list .check:hover { border-color: var(--ink-500); }
.check-list .check:has(input:checked), .provider-list .check:has(input:checked) { border-color: var(--earn-blue); background: var(--accent-tint-soft); }
.consent { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-border); }

/* Choice chips (amounts, frequency): radio buttons styled as pills */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.choice:hover span { border-color: var(--ink-500); }
.choice input:checked + span { background: var(--accent); border-color: var(--earn-blue); box-shadow: 0 3px 0 var(--earn-blue); }
.choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Segmented toggle (once-off or monthly) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); 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: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-700); 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(--ink-1000); color: var(--paper); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.money { position: relative; }
.money__symbol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: var(--weight-bold); color: var(--ink-1000); pointer-events: none; }
.money input { padding-left: 34px; font-weight: var(--weight-bold); }

/* Errors: black, bold, an icon, a heavy outline. Never colour alone. */
.field-error { display: none; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--danger); }
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  color: var(--paper);
  background: var(--ink-1000);
  border-radius: 50%;
}
.field.has-error .field-error { display: flex; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--ink-1000); border-width: 3px; background: var(--danger-bg); }
.field.has-error .check-list, .field.has-error .choice-grid, .field.has-error > .check { outline: 3px solid var(--ink-1000); outline-offset: 6px; border-radius: var(--radius-sm); }

/* Form message: success and error states after submitting */
.form-msg { display: none; margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-normal); border-radius: var(--radius-md); }
.form-msg.is-error { display: block; color: var(--ink-1000); background: var(--danger-bg); border: 3px solid var(--ink-1000); }
.form-msg.is-success { display: block; color: var(--success-fg); background: var(--success-bg); border: 2px solid var(--success-border); }
.form-success { text-align: center; padding: var(--space-6) 0 var(--space-2); }
.form-success__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); color: var(--ink-1000); background: var(--green-200); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)); }
.form-success__icon svg { width: 30px; height: 30px; }
.form-success h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); text-transform: uppercase; }
.form-success p { margin: 0 auto var(--space-4); max-width: 44ch; color: var(--ink-700); }
.form-success[hidden] { display: none; }

/* Honeypot: off screen for people, still in the form for bots. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-fine { margin: var(--space-4) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-subtle); text-align: center; }
.form-fine a { color: var(--ink-800); }

/* 04-chrome.css */
/* ==========================================================================
   Site chrome: brand bar, EARN strip, header and navigation, footer.
   Same furniture as the African Greeneurs site, so the two sites visibly
   belong together; the Josudan logo and blue giving actions make it the
   Foundation's own.
   ========================================================================== */

/* The corporate line motif: blue then green. */
.earn-rule { height: 6px; width: 100%; background: var(--brand-bar); }

/* ---------- EARN strip ---------- */
.earnbar { background: var(--color-surface-alt); border-bottom: 1px solid var(--frame-line, var(--ink-300)); }
.earnbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 4px var(--gutter);
}
.earnbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-height: 36px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-800);
  text-decoration: none;
}
.earnbar__brand img { height: 16px; width: auto; }
.earnbar__brand:hover { color: var(--ink-1000); text-decoration: underline; }
.earnbar__trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  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(--blue-700);
  text-decoration: none;
}
.earnbar__trust svg { width: 16px; height: 16px; flex: 0 0 auto; }
.earnbar__trust:hover { color: var(--ink-1000); text-decoration: underline; }
/* Phones: the EARN mark alone (its words stay for screen readers). */
@media (max-width: 767px) {
  .earnbar__brand span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .earnbar__brand { min-height: 44px; }
  .earnbar__trust { min-height: 44px; font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  border-bottom: 2px solid var(--frame-line, var(--ink-300));
  transition: box-shadow var(--dur-2) var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); }
}
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 14px 30px -12px rgba(0, 0, 0, .45); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 8px var(--gutter);
  min-height: 68px;
}
.site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; min-height: 44px; border-radius: var(--radius-xs); }
.site-header__logo img { height: 52px; width: auto; }
@media (min-width: 1100px) { .site-header__inner { min-height: 88px; gap: var(--space-4); } .site-header__logo img { height: 70px; } }
@media (max-width: 359px) { .site-header__logo img { height: 40px; } .site-header__inner { gap: var(--space-2); } }

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

/* Desktop navigation with three dropdowns */
.site-nav { display: none; }
@media (min-width: 1100px) {
  .site-nav { display: block; }
  .site-nav > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .site-nav__link,
  .site-nav__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    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;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .site-nav__toggle svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
  .site-nav__link::after,
  .site-nav__toggle::after {
    content: "";
    position: absolute;
    left: var(--space-3); right: var(--space-3); bottom: 6px;
    height: 3px;
    background: var(--earn-blue);
    border-radius: var(--radius-pill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .site-nav__link:hover, .site-nav__toggle:hover { color: var(--ink-1000); background: var(--color-surface-alt); }
  .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after,
  .site-nav__toggle.is-current::after, .site-nav__toggle:hover::after { transform: scaleX(1); }
  .site-nav__link[aria-current="page"], .site-nav__toggle.is-current { color: var(--ink-1000); }

  .nav-group { position: relative; }
  .subnav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 2;
    min-width: 280px;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--paper);
    border: var(--border-base) solid var(--frame-line, var(--ink-300));
    border-top: 5px solid var(--blue-300);
    border-radius: var(--radius-md);
    box-shadow: var(--slab-shadow);
  }
  /* A bridge so the pointer can travel from the toggle into the menu. */
  .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-group.is-open .subnav { display: block; animation: menuIn var(--dur-2) var(--ease-out); }
  .nav-group.is-open .site-nav__toggle svg { transform: rotate(180deg); }
  html:not(.js) .nav-group:focus-within .subnav, html:not(.js) .nav-group:hover .subnav { display: block; }
  .subnav a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--ink-1000);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .subnav a small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
  .subnav a:hover { background: var(--blue-050); }
  .subnav a[aria-current="page"] { background: var(--blue-100); }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.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(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
  cursor: pointer;
}
.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: 1100px) { .menu-btn { display: none; } }

/* Mobile menu: grouped, everything one tap away */
.mobile-nav {
  border-top: var(--border-thin) solid var(--color-border);
  padding: var(--space-2) var(--gutter) var(--space-6);
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  background: var(--paper);
  animation: menuIn var(--dur-2) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__group { padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); }
.mobile-nav__group--single { padding: var(--space-1) 0; }
.mobile-nav__group h2 { margin: 0 0 var(--space-1); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-700); }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-1000); text-decoration: none; }
.mobile-nav a[aria-current="page"]::before { content: ""; width: 4px; height: 22px; margin-right: var(--space-3); background: var(--earn-blue); border-radius: var(--radius-pill); }
.mobile-nav__cta { margin-top: var(--space-5); }
.mobile-nav__contact { margin: var(--space-4) 0 0; font-size: var(--text-sm); text-align: center; line-height: 2; }
.mobile-nav__contact a { display: inline; min-height: 0; font-size: var(--text-sm); color: var(--ink-800); text-decoration: underline; }
html.menu-open { overflow: hidden; }
@media (min-width: 1100px) { .mobile-nav { display: none !important; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { 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; }
.page-hero--photo + .breadcrumb, .breadcrumb--over { position: absolute; z-index: 2; left: 0; right: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: var(--z-raised);
  overflow: hidden;
  background: var(--color-surface-alt);
  border-top: 4px solid var(--frame-line, var(--ink-300));
  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) 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.15fr 2.2fr 1.25fr; gap: var(--space-10); } }
.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); white-space: nowrap; }
.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-4); }
.footer-brand__logo img { height: 84px; width: auto; }
.footer-brand p { margin: 0 0 var(--space-5); max-width: 32ch; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-900); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 559px) { .footer-nav { grid-template-columns: 1fr 1fr; } }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 6px 0; font-weight: var(--weight-bold); text-decoration: none; line-height: var(--leading-snug); }
.footer-nav a:hover { text-decoration: underline; }
.footer-contact address, .footer-contact p { margin: 0 0 var(--space-3); line-height: var(--leading-normal); }
.footer-reg { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-strong); }
.footer-reg .facts > div { padding: 6px 0; grid-template-columns: auto 1fr; border: 0; }
.footer-reg .facts dt, .footer-reg .facts dd { font-size: var(--text-xs); }
.footer-reg .facts dt { white-space: nowrap; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  padding: var(--space-6) 0;
  border-top: 2px solid var(--frame-line, var(--ink-300));
}
.footer-social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: var(--border-thin) solid var(--frame-line, var(--ink-300)); color: var(--ink-1000); }
.footer-social a:hover { background: var(--ink-1000); color: var(--paper); }
.footer-social svg { width: 18px; height: 18px; }
.footer-social__note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* The EARN lockup: EARN logo, "Part of the EARN ecosystem", EARN's line. */
.earn-lockup { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.earn-lockup img { height: 32px; width: auto; }
.earn-lockup__text { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: 2px solid var(--frame-line, var(--ink-300)); line-height: var(--leading-snug); }
.earn-lockup__text strong { font-size: var(--text-sm); color: var(--ink-1000); }
.earn-lockup__text em { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--blue-700); }
a.earn-lockup:hover strong { text-decoration: underline; }
@media (max-width: 400px) { .earn-lockup { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .earn-lockup__text { padding-left: 0; border-left: 0; } }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 32px; font-weight: var(--weight-bold); }
.footer-legal li:last-child { color: var(--color-text-subtle); }

/* The footer closes on a black band with the Foundation's line. */
.site-footer__band {
  position: relative;
  margin: 0;
  padding: var(--space-4) var(--gutter);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--paper);
  background: var(--earn-black);
  border-top: 3px solid var(--green-300);
}

/* 05-record.css */
/* ==========================================================================
   Proven track record (scripts/templates/record.js): a black band like the
   impact band, with green headline figures, the cohorts as white cards in
   order, and market access. The cohort funded through the Foundation gets a
   blue ring (blue = giving and partner touchpoints). Mobile first.
   ========================================================================== */

.record { background: var(--earn-black); color: var(--paper); border-top: 4px solid var(--blue-300); border-bottom: 4px solid var(--green-300); }
.record .section-head h2, .record .section-head__sub { color: var(--paper); }
.record .section-head__lead { color: rgba(255, 255, 255, .86); }
.record :focus-visible { outline-color: var(--paper); }

/* Headline figures: the funding figure leads on its own row (twice as wide
   on desktop), the other four sit two by two. */
.record__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.record__figures li { padding-top: var(--space-4); border-top: 2px solid rgba(255, 255, 255, .5); }
.record__figures li:first-child { grid-column: 1 / -1; }
.record__value { display: block; font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3.25rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--earn-green); }
.record__label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }
@media (max-width: 479px) { .record__label { font-size: var(--text-xs); } }
@media (min-width: 1024px) {
  .record__figures { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .record__figures li:first-child { grid-column: span 2; }
}

/* Cohorts, oldest first */
.record__subhead { margin: 0 0 var(--space-6); font-size: var(--text-lg); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }
.record__cohorts { gap: var(--space-8) var(--space-6); }
@media (min-width: 640px) { .record__cohorts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .record__cohorts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cohort .tag-list { margin-bottom: var(--space-4); }
.cohort__facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-block: var(--border-thin) solid var(--color-border); }
.cohort__facts div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); }
.cohort__facts dt { padding-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-600); }
.cohort__facts dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-900); }
.cohort--foundation { outline: 3px solid var(--blue-300); outline-offset: 5px; }

/* Market access, links and source */
.record__foot { display: grid; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 2px solid rgba(255, 255, 255, .5); }
@media (min-width: 880px) { .record__foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--space-10); } }
.record__market { display: flex; align-items: flex-start; gap: var(--space-4); }
.record__market .icon-tile { flex: 0 0 auto; }
.record__market h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--paper); }
.record__market p { margin: 0; max-width: var(--measure); color: rgba(255, 255, 255, .86); }
.record__links { display: grid; gap: var(--space-1); justify-items: start; }
.record .link-arrow { color: var(--paper); text-decoration-color: var(--earn-green); }
.record .link-arrow:hover { color: var(--blue-200); text-decoration-color: var(--blue-200); }
.record__source { margin: var(--space-8) 0 0; font-size: var(--text-xs); color: rgba(255, 255, 255, .72); }

/* 05-sections.css */
/* ==========================================================================
   Page sections. Tokens and components only; no new values.
   ========================================================================== */

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  overflow: hidden;
  color: var(--paper);
  background: var(--ink-1000);
}
@media (max-width: 767px) { .hero { min-height: 600px; } }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim measured against the photo's brightest areas (white table cloth,
   greenhouse roof) so every line of hero text holds AA at 390 and 1440px. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(var(--scrim), .94) 0%, rgba(var(--scrim), .84) 45%, rgba(var(--scrim), .66) 75%, rgba(var(--scrim), .55) 100%);
}
@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .62) 42%, rgba(var(--scrim), .4) 78%, rgba(var(--scrim), .45) 100%),
      linear-gradient(to right, rgba(var(--scrim), .8) 0%, rgba(var(--scrim), .58) 42%, rgba(var(--scrim), 0) 74%);
  }
}
.hero__inner { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-20) var(--gutter) var(--space-10); }
@media (min-width: 1024px) { .hero__inner { padding-bottom: var(--space-16); } }
.hero__eyebrow { 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(--paper); }
.hero h1 {
  margin: 0 0 var(--space-5);
  max-width: 12ch;
  font-size: clamp(2.75rem, 1.3rem + 6vw, 5.75rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .55);
}
.hero h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: var(--space-5); background: var(--brand-bar); border-radius: var(--radius-pill); }
/* The long home headline (8 words, approved by the client as an exception
   to the four-word cap): a smaller size, two lines on wide screens. */
.hero h1.hero__title--long { max-width: none; font-size: clamp(2.25rem, 1rem + 3.5vw, 4rem); line-height: 1.02; }
.hero__br { display: none; }
@media (min-width: 900px) { .hero__br { display: inline; } }
.hero__story { margin: 0 0 var(--space-6); max-width: 62ch; font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, .95); }
.hero__story strong { color: var(--paper); }
@media (min-width: 768px) { .hero__story { font-size: var(--text-lg); line-height: var(--leading-normal); } }
.hero__sub { margin: 0 0 var(--space-6); max-width: 34ch; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--paper); text-wrap: balance; }
@media (min-width: 768px) { .hero__sub { font-size: var(--text-xl); } }
.hero .btn-row { gap: var(--space-3); }
@media (max-width: 479px) { .hero .btn-row .btn { width: 100%; } }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  max-width: 640px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, .94);
  border-top: var(--border-thin) solid rgba(255, 255, 255, .3);
}
.hero__trust svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--earn-blue); }
.hero__trust a { color: var(--paper); }
.hero__trust a:hover { color: var(--blue-200); }

/* Entrance: rare, first-impression motion (as on the AG site). */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bar-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__inner > *, .page-hero__inner > * { animation: rise-in var(--dur-4) var(--ease-out) both; }
.hero__inner > :nth-child(2), .page-hero__inner > :nth-child(2) { animation-delay: 70ms; }
.hero__inner > :nth-child(3), .page-hero__inner > :nth-child(3) { animation-delay: 140ms; }
.hero__inner > :nth-child(4), .page-hero__inner > :nth-child(4) { animation-delay: 210ms; }
.hero__inner > :nth-child(n+5), .page-hero__inner > :nth-child(n+5) { animation-delay: 280ms; }
.hero h1::after, .page-hero h1::after { animation: bar-draw var(--dur-4) var(--ease-out) 420ms both; }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > *, .page-hero__inner > *, .hero h1::after, .page-hero h1::after { animation: none; }
}

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero__inner { position: relative; width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-12); }
.page-hero .breadcrumb { padding: 0 0 var(--space-8); max-width: none; }
.page-hero__eyebrow { 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(--accent-text); }
.page-hero h1 {
  margin: 0 0 var(--space-5);
  max-width: 16ch;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.page-hero h1::after { content: ""; display: block; width: 64px; height: 5px; margin-top: var(--space-4); background: var(--brand-bar); border-radius: var(--radius-pill); }
.page-hero__sub { margin: 0 0 var(--space-3); max-width: 40ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); text-wrap: balance; }
.page-hero__lead { margin: 0 0 var(--space-6); max-width: 58ch; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-text-muted); }
.page-hero__lead:last-child { margin-bottom: 0; }
.page-hero .btn-row { margin-top: var(--space-2); }

.page-hero--plain {
  background:
    radial-gradient(900px 420px at 90% -10%, var(--blue-050) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(700px 380px at 0% 110%, var(--green-050) 0%, rgba(255, 255, 255, 0) 60%),
    var(--paper);
  border-bottom: 2px solid var(--frame-line, var(--ink-300));
}
.page-hero--plain::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -30px;
  width: 600px;
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 767px) { .page-hero--plain::before { width: 360px; right: -140px; } }

.page-hero--photo { display: flex; align-items: flex-end; min-height: 500px; color: var(--paper); background: var(--ink-1000); border-bottom: 4px solid var(--frame-line, var(--ink-300)); }
@media (max-width: 767px) { .page-hero--photo { min-height: 520px; } }
.page-hero--photo .page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero--photo .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(var(--scrim), .92) 0%, rgba(var(--scrim), .76) 45%, rgba(var(--scrim), .5) 100%); }
@media (min-width: 768px) {
  .page-hero--photo .page-hero__scrim {
    background:
      linear-gradient(to top, rgba(var(--scrim), .88) 0%, rgba(var(--scrim), .6) 50%, rgba(var(--scrim), .56) 100%),
      linear-gradient(to right, rgba(var(--scrim), .78) 0%, rgba(var(--scrim), .5) 48%, rgba(var(--scrim), 0) 78%);
  }
}
.page-hero--photo .page-hero__inner { padding-top: var(--space-16); }
/* Video heroes (laptops up): the text sits on the left, so the scrim is
   strong there and light on the right, where the people in the clip are.
   Measured against frames across the whole loop, not just the poster. */
@media (min-width: 768px) {
  .page-hero--video .page-hero__scrim {
    background:
      linear-gradient(to right, rgba(var(--scrim), .86) 0%, rgba(var(--scrim), .74) 45%, rgba(var(--scrim), .25) 76%, rgba(var(--scrim), .1) 100%),
      linear-gradient(to top, rgba(var(--scrim), .45) 0%, rgba(var(--scrim), 0) 40%);
  }
}
.page-hero--photo h1, .page-hero--photo .page-hero__sub { color: var(--paper); }
.page-hero--photo h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .55); }
.page-hero--photo .page-hero__eyebrow { color: var(--paper); }
.page-hero--photo .page-hero__lead { color: rgba(255, 255, 255, .92); }
.page-hero--photo .breadcrumb li, .page-hero--photo .breadcrumb a { color: rgba(255, 255, 255, .9); }
.page-hero--photo .breadcrumb a:hover { color: var(--paper); }
.page-hero--photo .breadcrumb li + li::before { color: rgba(255, 255, 255, .6); }

/* Sub-page tabs (the three leadership pages) */
.subpages { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.subpages a {
  display: inline-flex;
  flex-direction: column;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--ink-1000);
  text-decoration: none;
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
}
.subpages a small { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--color-text-muted); }
.subpages a:hover { background: var(--blue-050); }
.subpages a[aria-current="page"] { background: var(--earn-blue); box-shadow: 0 3px 0 var(--earn-blue); }
.subpages a[aria-current="page"] small { color: var(--ink-900); }
.subpages-bar { padding: var(--space-5) 0; background: var(--color-surface-alt); border-bottom: var(--border-thin) solid var(--color-border); }

/* ---------- How your support works: the five-step flow ---------- */
.flow { position: relative; display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); }
/* The track: a vertical line on phones, horizontal from 1024px. */
.flow__step::before { content: ""; position: absolute; left: 26px; top: 56px; bottom: calc(-1 * var(--space-5)); width: 4px; background: var(--ink-1000); }
.flow__step:last-child::before { display: none; }
.flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--step-colour, var(--blue-200));
  border: 4px solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300));
}
.flow__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-top: 6px solid var(--step-colour, var(--blue-300));
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.flow__who { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--step-text, var(--blue-700)); }
.flow__card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }
.flow__card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.flow__card .link-arrow { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); }
.flow__list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.flow__list li { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug); background: var(--color-surface-alt); border: var(--border-thin) solid var(--color-border); border-left: 4px solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-sm); }
.flow__list strong { font-size: var(--text-sm); color: var(--ink-1000); }
.flow__list span { color: var(--ink-600); }
.flow__step--blue { --step-colour: var(--blue-300); --step-text: var(--blue-700); }
.flow__step--green { --step-colour: var(--green-300); --step-text: var(--green-800); }
.flow__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: var(--space-3); padding: 6px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); background: var(--blue-100); border: var(--border-thin) solid var(--blue-300); border-radius: var(--radius-sm); }
.flow__badge svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-700); }

@media (min-width: 1100px) {
  /* Step 4 (the ecosystem) carries four entries, so it gets a wider column
     and lists them two by two; the cards then share one height. */
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-4); }
  .flow__list { grid-template-columns: 1fr 1fr; }
  .flow__step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-4); }
  .flow__step::before { left: 56px; right: calc(-1 * var(--space-4)); top: 26px; bottom: auto; width: auto; height: 4px; }
  .flow__node { margin: 0; }
}

/* What support unlocks */
.unlocks { display: grid; gap: var(--space-4); align-items: center; margin-top: var(--space-10); padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .unlocks { grid-template-columns: auto 1fr; gap: var(--space-8); padding: var(--space-6) var(--space-8); } }
.unlocks h3 { margin: 0; font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* ---------- Impact figures (rendered only when verified) ---------- */
.impact { background: var(--earn-black); color: var(--paper); border-top: 4px solid var(--blue-300); border-bottom: 4px solid var(--green-300); }
.impact .section-head h2 { color: var(--paper); }
.impact .section-head__sub { color: rgba(255, 255, 255, .86); }
.impact__grid { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.impact__grid li { padding-top: var(--space-4); border-top: 2px solid rgba(255, 255, 255, .5); }
.impact__value { display: block; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--earn-green); }
.impact__label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }

/* ---------- What we fund: programme cards ---------- */
.fund-card { padding: 0; overflow: hidden; }
.fund-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); background: var(--ink-100); }
.fund-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
@media (min-width: 640px) { .fund-card__media { aspect-ratio: 4 / 3; } }
@media (hover: hover) and (pointer: fine) { .fund-card:hover .fund-card__media img { transform: scale(1.04); } }
.fund-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-5); }
.fund-card .tag-list { margin-bottom: var(--space-3); }
.fund-card h3 { font-size: var(--text-lg); }
.fund-card__by { display: flex; align-items: center; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--green-800); border-top: var(--border-thin) solid var(--color-border); }
.fund-card .link-arrow { margin-top: var(--space-2); font-size: var(--text-sm); text-decoration-color: var(--earn-green); }
.fund-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-10); padding: var(--space-5) var(--space-6); background: var(--green-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--green-300); border-radius: var(--radius-lg); }
.fund-note p { margin: 0; max-width: 60ch; font-weight: var(--weight-bold); color: var(--ink-900); }

/* Short courses list (programmes page) */
.short-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .short-list { grid-template-columns: 1fr 1fr; } }
.short-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); }
.short-item img { width: 96px; height: 96px; object-fit: cover; border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-md); }
.short-item h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); line-height: var(--leading-snug); }
.short-item p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }

/* ---------- Statement band: a short, hopeful passage in large type ---------- */
.manifesto { background: var(--green-050); border-block: 2px solid var(--frame-line, var(--ink-300)); }
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .manifesto--media .manifesto__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } }
.manifesto .section-head { margin-bottom: var(--space-5); }
.manifesto__lead { margin: 0 0 var(--space-6); max-width: 44ch; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink-900); }
@media (min-width: 768px) { .manifesto__lead { font-size: var(--text-2xl); } }
.manifesto__lead strong { display: block; margin-top: var(--space-4); color: var(--green-800); }
.manifesto--center { text-align: center; }
.manifesto--center .section-head h2::before { margin-inline: auto; }
.manifesto--center .manifesto__lead { margin-inline: auto; max-width: 40ch; }
.manifesto--center .manifesto__lead strong { display: inline; margin: 0; }
.manifesto--center .btn-row { justify-content: center; }
.frame--wide { aspect-ratio: 16 / 9; }

/* ---------- Graduate stories (films) ---------- */
.story { padding: 0; overflow: hidden; }
.story__media { position: relative; aspect-ratio: 16 / 9; background: var(--ink-1000); border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); }
.story__play { position: absolute; inset: 0; display: block; color: var(--ink-1000); }
.story__play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.story__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: var(--ink-1000);
  background: var(--blue-200);
  border: 4px solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--frame-line, var(--ink-300)), 0 14px 30px -10px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.story__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.story__time { position: absolute; right: var(--space-3); bottom: var(--space-3); }
@media (hover: hover) and (pointer: fine) {
  .story__play:hover .story__btn { transform: translate(-50%, -50%) scale(1.08); background: var(--blue-400); }
  .story__play:hover img { transform: scale(1.03); }
}
.story__play:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -6px; border-radius: var(--radius-md); }
.story__media video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ink-1000); }
.story__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.story__body h3 { font-size: var(--text-lg); }

/* ---------- Mission and vision ---------- */
.statements { display: grid; gap: var(--space-5); }
.statement { padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--blue-300); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
.statement--green { border-left-color: var(--green-300); }
.statement h3 { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-700); }
.statement--green h3 { color: var(--green-800); }
.statement p { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); }
.statement p + p { margin-top: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--ink-700); }

.collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: var(--space-4); }
.collage .frame:first-child { grid-column: 1 / 6; aspect-ratio: 4 / 3; }
.collage .frame:nth-child(2) { grid-column: 3 / 7; margin-top: -22%; aspect-ratio: 16 / 9; }

/* ---------- Values ---------- */
.value { padding: var(--space-6); }
.value__num { display: block; margin-bottom: var(--space-5); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; color: var(--blue-700); }
.value:nth-child(even) .value__num { color: var(--green-800); }
.value h3 { font-size: var(--text-lg); }

/* ---------- Equal opportunity callout ---------- */
.callout { display: grid; overflow: hidden; background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
@media (min-width: 860px) { .callout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.callout__media { min-height: 260px; background: var(--ink-100); }
.callout__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 859px) { .callout__media { min-height: 0; aspect-ratio: 4 / 5; max-height: 560px; border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); } }
@media (min-width: 860px) { .callout__media { border-right: var(--border-base) solid var(--frame-line, var(--ink-300)); } }
.callout__body { position: relative; padding: var(--space-8) var(--space-6); background: var(--green-050); }
@media (min-width: 860px) { .callout__body { padding: var(--space-12) var(--space-10); } }
.callout__body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--green-200); }
.callout .section-head { margin-bottom: var(--space-5); }
.callout__text { margin: 0 0 var(--space-5); max-width: 46ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); }

/* ---------- The EARN ecosystem ---------- */
.eco-card { padding: 0; overflow: hidden; }
.eco-card__logo { display: grid; place-items: center; height: 132px; padding: var(--space-5); background: var(--paper); border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); }
.eco-card__logo img { width: auto; height: auto; max-height: 76px; max-width: min(200px, 80%); object-fit: contain; }
.eco-card__mono { display: grid; place-items: center; width: 84px; height: 84px; font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--ink-1000); border: 8px solid var(--frame-line, var(--ink-300)); border-radius: 50%; }
.eco-card__mono--blue { box-shadow: inset 0 0 0 4px var(--blue-300); }
.eco-card__mono--green { box-shadow: inset 0 0 0 4px var(--green-300); }
.eco-card__mono svg { width: 36px; height: 36px; }
.eco-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-5); border-top: 6px solid var(--blue-300); margin-top: -2px; }
.eco-card--green .eco-card__body { border-top-color: var(--green-300); }
.eco-card__kind { margin: 0 0 var(--space-2) !important; font-size: var(--text-xs) !important; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--blue-700) !important; }
.eco-card--green .eco-card__kind { color: var(--green-800) !important; }
.eco-card h3 { margin-bottom: var(--space-1); }
.eco-card__legal { margin: 0 0 var(--space-3) !important; font-size: var(--text-xs) !important; color: var(--color-text-subtle) !important; }
.eco-card .link-arrow { margin-top: auto; font-size: var(--text-sm); }

/* ---------- Get involved ---------- */
.involve-card { padding: var(--space-6); }
.involve-card .icon-tile { margin-bottom: var(--space-5); }
.involve-card h3 { font-size: var(--text-xl); }
.involve-card .link-arrow { margin-top: auto; }

/* ---------- Closing band ---------- */
.closing { padding: 0 0 var(--space-16); }
.closing__box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--paper);
  background: var(--earn-black);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-xl);
  box-shadow: 0 var(--ledge) 0 var(--blue-300), 0 30px 70px -20px rgba(0, 0, 0, .55);
}
@media (min-width: 768px) { .closing__box { padding: var(--space-16) var(--space-10); } }
.closing__box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--brand-bar); }
.closing__box::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 520px;
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .16;
  z-index: -1;
}
.closing h2 { margin: 0 0 var(--space-4); font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); line-height: var(--leading-none); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--paper); text-wrap: balance; }
.closing__sub { margin: 0 auto var(--space-3); max-width: 40ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--paper); }
.closing__text { margin: 0 auto var(--space-8); max-width: 56ch; font-size: var(--text-md); color: rgba(255, 255, 255, .88); }
.closing .btn-row { justify-content: center; }

/* ---------- Board ---------- */
.board-grid { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .board-grid { grid-template-columns: 1fr 1fr; } }
.board-card { padding: 0; overflow: hidden; }
.board-card__top { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5); }
@media (max-width: 479px) { .board-card__top { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); } .board-card h3 { font-size: var(--text-lg); } .board-card .disclosure { margin: 0 var(--space-4); } }
@media (min-width: 1100px) { .board-card__top { grid-template-columns: 148px minmax(0, 1fr); } }
.board-card__photo { aspect-ratio: 1; overflow: hidden; background: var(--ink-100); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-md); box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)); }
.board-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.monogram { display: grid; place-items: center; width: 100%; height: 100%; background: var(--green-050); }
.monogram span { display: grid; place-items: center; width: 74%; aspect-ratio: 1; font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--ink-1000); background: var(--paper); border: 10px solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--green-300), 0 0 0 4px var(--blue-300); }
.board-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-tight); }
.board-card__title { margin: 0 0 var(--space-3) !important; }
.board-card__summary { margin: 0 !important; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.board-card__summary span { display: block; }
.board-card .disclosure { margin: 0 var(--space-5); }
.board-card .disclosure__body { padding-bottom: var(--space-5); }

/* ---------- Governance ---------- */
.gov-panel { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-top: 8px solid var(--blue-300); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
@media (min-width: 900px) { .gov-panel { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); padding: var(--space-10); } }
.gov-panel__seal { display: grid; place-items: center; width: 96px; height: 96px; color: var(--ink-1000); background: var(--blue-200); border: 4px solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: 0 4px 0 var(--frame-line, var(--ink-300)); }
.gov-panel__seal svg { width: 44px; height: 44px; }
.gov-panel h3 { margin: 0 0 var(--space-1); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.gov-panel__legal { margin: 0 0 var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--blue-700); }
.gov-points { display: grid; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.gov-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-800); }
.gov-points svg { width: 22px; height: 22px; margin-top: 2px; color: var(--blue-700); }

.trust-strip { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); background: var(--blue-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--blue-300); border-radius: var(--radius-lg); }
@media (min-width: 860px) { .trust-strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); } }
.trust-strip p { margin: 0; font-weight: var(--weight-bold); color: var(--ink-1000); }
.trust-strip small { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--ink-700); }

/* ---------- Donate ---------- */
.give-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .give-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.give-aside { display: grid; gap: var(--space-6); }
.give-aside .card h3 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.give-step { margin: 0 0 var(--space-6); }
.field > legend.give-step__label, .give-step__label { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-1000); }
.give-step__num { display: grid; place-items: center; width: 28px; height: 28px; font-size: var(--text-xs); color: var(--paper); background: var(--ink-1000); border-radius: 50%; }
.give-summary { margin: var(--space-6) 0 var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--ink-1000); background: var(--blue-050); border: var(--border-thin) solid var(--blue-300); border-radius: var(--radius-md); }
.give-mode { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.provider-list { display: grid; gap: var(--space-2); }
.provider-list .check small { display: block; color: var(--color-text-muted); }
.provider-list .check[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink-700); }
.secure-note svg { width: 16px; height: 16px; color: var(--blue-700); }
.section18a { margin-top: var(--space-2); padding: var(--space-4); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); }
.section18a[hidden] { display: none; }
.section18a__fields { margin-top: var(--space-4); }
.section18a__fields[hidden] { display: none; }

/* A standalone page title (thank-you, 404) */
.display-title { margin: 0 0 var(--space-4); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; }

/* Thank-you states */
.thanks { max-width: 720px; margin: 0 auto; text-align: center; }
.thanks .form-success__icon { width: 80px; height: 80px; }
.thanks [data-state] { display: none; }
.thanks [data-state].is-active { display: block; }

/* ---------- Mentor: how it works ---------- */
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: steps; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); counter-increment: steps; }
.steps li::before { content: counter(steps, decimal-leading-zero); display: block; margin-bottom: var(--space-4); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; color: var(--green-800); }
.steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.steps p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }

.who-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.who-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); background: var(--paper); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); }
.who-list svg { width: 24px; height: 24px; color: var(--green-800); }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.contact-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.contact-list h3 { margin: 0 0 2px; font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-700); }
.contact-list p, .contact-list address { margin: 0; font-weight: var(--weight-bold); line-height: var(--leading-normal); color: var(--ink-1000); }
.contact-list a { color: var(--ink-1000); }
.map { overflow: hidden; aspect-ratio: 4 / 3; margin-top: var(--space-6); background: var(--ink-100); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--photo-shadow); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- The book ---------- */
.book-feature { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .book-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); } }
.book-feature__cover { padding: var(--space-6); background: var(--green-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
.book-feature__cover img { width: 100%; height: auto; border-radius: var(--radius-md); }
.book-title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.book-sub { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-800); }
.book-author { margin: 0 0 var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--green-800); }

/* ---------- Legal placeholder pages ---------- */
.prose { padding: var(--space-8) var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
@media (min-width: 640px) { .prose { padding: var(--space-10); } }
.prose h2 { margin: var(--space-8) 0 var(--space-2); 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); }

/* ---------- Not found ---------- */
.notfound { text-align: center; }
.notfound__code { display: block; margin: 0 0 var(--space-2); font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--ink-1000); -webkit-text-stroke: 0; }
.notfound .grid { margin-top: var(--space-10); text-align: left; }

/* Single-column defaults: a grid track never grows past its container, so a
   long word or chip wraps instead of pushing the layout off a phone screen. */
.callout, .flow, .impact__grid, .short-list, .statements, .board-grid, .steps, .who-list,
.contact-list, .gov-panel, .trust-strip, .unlocks, .book-feature, .give-aside { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .callout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .trust-strip { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (min-width: 900px) {
  .gov-panel { grid-template-columns: auto minmax(0, 1fr); }
  .unlocks { grid-template-columns: auto minmax(0, 1fr); }
  .book-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) { .short-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .board-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr) minmax(0, 1fr); } }

/* 06-utilities.css */
/* ==========================================================================
   Utilities: loaded last so they win over component defaults.
   Token steps only.
   ========================================================================== */
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-12 { margin-bottom: var(--space-12); }
.center-x { margin-inline: auto; }
.btn-row--center { justify-content: center; }

/* 07-frames.css */
/* ==========================================================================
   Light grey frames, no side frame, photos behind the black panels
   (user, 8 October 2026; the same changes as the African Greeneurs site).
   Loaded last (scripts/build.js bundles the numbered files in order), so it
   overrides the black edges in 03-components, 04-chrome and 05-sections.
   - Card, panel, menu and photo outlines and the page lines are light grey;
     the raised cards sit on a grey base instead of a black ledge. Coloured
     accent bars, buttons and small controls keep their colours.
   - No black frame around the page: it runs edge to edge.
   - The black sections and boxes show one of EARN's own photos, darkened by
     multiplying with --panel-tint so white text stays above 11:1 and green
     text above 5:1.
   ========================================================================== */

:root {
  --frame-line: var(--ink-300);
  --panel-tint: var(--ink-700);
  --slab-shadow:
    0 var(--ledge) 0 var(--frame-line),
    0 calc(var(--ledge) + 10px) 22px -6px rgba(0, 0, 0, .28),
    0 calc(var(--ledge) + 34px) 60px -22px rgba(0, 0, 0, .38);
  --slab-shadow-hover:
    0 var(--ledge-hover) 0 var(--frame-line),
    0 calc(var(--ledge-hover) + 14px) 28px -6px rgba(0, 0, 0, .30),
    0 calc(var(--ledge-hover) + 46px) 80px -24px rgba(0, 0, 0, .42);
}

/* ---------- No side frame ---------- */
html { background: none; }
body { margin-inline: 0; max-width: none; box-shadow: none; }

/* ---------- Grey outlines ---------- */
/* No accent bar: grey all round. */
.frame { border-color: var(--frame-line); }
/* A coloured top bar: the other three sides go grey. */
.card, .form-card, .flow__card, .subnav {
  border-left-color: var(--frame-line);
  border-right-color: var(--frame-line);
  border-bottom-color: var(--frame-line);
}
/* A coloured left bar: the other three sides go grey. */
.statement {
  border-top-color: var(--frame-line);
  border-right-color: var(--frame-line);
  border-bottom-color: var(--frame-line);
}
.short-item img { border-color: var(--frame-line); }

/* ---------- Grey page lines ---------- */
.earnbar { border-bottom-color: var(--frame-line); }
.site-header { border-bottom-color: var(--frame-line); }
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--frame-line), 0 14px 30px -12px rgba(0, 0, 0, .45); }
.site-footer, .footer-bottom { border-top-color: var(--frame-line); }
.section--rule::before { background: var(--frame-line); }
.page-hero--plain { border-bottom-color: var(--frame-line); }
.fund-card__media, .story__media { border-bottom-color: var(--frame-line); }
.manifesto { border-block-color: var(--frame-line); }

/* ---------- Photos behind the black panels ---------- */
.record, .impact, .closing__box, .site-footer__band {
  background-color: var(--panel-tint);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}
.record { background-image: url("/img/tomato-harvesting-800.webp"); }
.impact { background-image: url("/img/agripreneur-development-assessment-800.webp"); }
.closing__box { background-image: url("/img/greenhouse-basil-860.webp"); border-color: var(--panel-tint); }
.site-footer__band { background-image: url("/img/mission-field-800.webp"); }

/* ---------- Numbered steps ("How your support works") ---------- */
/* Markers alternate blue and green (scripts/templates/parts.js); the line
   joining them and their outline are grey, like the African Greeneurs site. */
.flow__step::before { background: var(--frame-line); }
.flow__node { border-color: var(--frame-line); box-shadow: 0 3px 0 var(--frame-line); }

/* ---------- "What your support unlocks": grey, and the chips scroll ---------- */
.unlocks { border-color: var(--frame-line); }
.unlocks > * { min-width: 0; }
.chips li { border-color: var(--frame-line); }
.unlocks__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
@media (min-width: 900px) { .unlocks__head { flex-direction: column; align-items: flex-start; } }
.unlocks__strip { display: flex; overflow: hidden; }
.unlocks__track {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding-right: var(--space-2); /* the same gap between the two copies as between chips */
  animation: unlocks-scroll 32s linear infinite;
}
.unlocks__strip:hover .unlocks__track, .unlocks__strip:focus-within .unlocks__track, .unlocks__strip.is-paused .unlocks__track { animation-play-state: paused; }
@keyframes unlocks-scroll { to { transform: translateX(-100%); } }
.marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.marquee-toggle:hover { border-color: var(--ink-600); }
.marquee-toggle__icon { width: 10px; height: 12px; border-left: 3px solid var(--ink-1000); border-right: 3px solid var(--ink-1000); }
.marquee-toggle[aria-pressed="true"] .marquee-toggle__icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink-1000); }
@media (prefers-reduced-motion: reduce) {
  .unlocks__track { flex-wrap: wrap; flex: 1 1 auto; animation: none; }
  .unlocks__track[aria-hidden="true"], .unlocks .marquee-toggle { display: none; }
}

/* "What your support unlocks", open layout (user, 8 Oct 2026): no box, the
   heading and pause button centred on top, the chips scrolling across the
   full width of the page. */
.unlocks { display: block; margin-top: var(--space-10); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.unlocks__head { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); text-align: center; }
@media (min-width: 900px) { .unlocks__head { flex-direction: column; align-items: center; } }
.unlocks__strip { margin-inline: calc(50% - 50vw); padding-block: var(--space-2); }

/* Softer step colours (user, 8 Oct 2026): light tints of EARN blue and green
   for the markers (200) and the cards' top bars (300); the numbers stay black. */
.flow__step--blue { --step-colour: var(--blue-300); }
.flow__step--green { --step-colour: var(--green-300); }
.flow__step--blue .flow__node { background: var(--blue-200); }
.flow__step--green .flow__node { background: var(--green-200); }

/* Faint decorative colour (user, 8 Oct 2026; the same on the African
   Greeneurs site): the page accent stays strong on buttons, but its
   decorative uses take a light tint that follows the page (green or blue). */
:root, .path-applicant, .path-training { --accent-faint: var(--green-300); --accent-fill: var(--green-200); }
.path-give { --accent-faint: var(--blue-300); --accent-fill: var(--blue-200); }
.form-card { border-top-color: var(--accent-faint); }
.notice:not([class*="notice--"]) { border-left-color: var(--accent-faint); }
.icon-tile:not([class*="icon-tile--"]) { background: var(--accent-fill); }
.link-arrow { text-decoration-color: var(--accent-faint); }

/* Faint buttons (user, 8 Oct 2026; the same on the African Greeneurs site):
   light tints of EARN blue and green with black text; the black button
   becomes pale grey. Hover takes the next tint up. */
.btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--ink-1000); }
.btn--primary:hover:not(:disabled) { background: var(--accent-faint); border-color: var(--accent-faint); color: var(--ink-1000); }
.btn--give { background: var(--blue-200); border-color: var(--blue-200); }
.btn--give:hover:not(:disabled) { background: var(--blue-300); border-color: var(--blue-300); }
.btn--green { background: var(--green-200); border-color: var(--green-200); }
.btn--green:hover:not(:disabled) { background: var(--green-300); border-color: var(--green-300); }
.btn--dark { background: var(--ink-100); border-color: var(--ink-100); color: var(--ink-1000); }
.btn--dark:hover:not(:disabled) { background: var(--ink-200); border-color: var(--ink-200); color: var(--ink-1000); }

/* Faint brand bar (top strip, heading underlines, closing box), as on the
   African Greeneurs site. */
:root { --brand-bar: linear-gradient(90deg, var(--blue-300) 0 55%, var(--green-300) 55% 100%); }