/* AI Literacy Lab — learner platform stylesheet
   Self-contained. No external CSS. No JS. */

:root {
  --paper: #ffffff;
  --paper-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #4a4a4f;
  --accent: #065f46;
  --accent-ink: #ffffff;
  --mint: #34d399;
  --tint: #dceee5;
  --border: #e3e3e6;
  --deep: #101b16;
  --deep-ink: #f4f1ea;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --radius: 12px;
  --wrap: 1140px;
  --pad-y: 96px;
  --pad-y-tight: 56px;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

.section {
  padding: var(--pad-y) 0;
}

.section--alt {
  background: var(--paper-alt);
}

.section--tight {
  padding: var(--pad-y-tight) 0;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--ink);
}

.section-lede {
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 40px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.brand-logo {
  height: 32px;
  width: auto;
}

.brand-word {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover { color: var(--accent); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-menu { display: none; }

.nav-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
}

.nav-menu summary::-webkit-details-marker { display: none; }

.nav-menu[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.nav-menu ul {
  position: absolute;
  right: 24px;
  margin: 0;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  list-style: none;
  min-width: 220px;
  box-shadow: var(--shadow);
}

.nav-menu li a {
  display: block;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}

.nav-menu li a:hover { background: var(--paper-alt); }

.nav-cta { margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-solid:hover { background: #044a36; border-color: #044a36; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--paper-alt); }

.btn-muted {
  background: #e5e7e6;
  color: var(--ink);
  border-color: #d2d5d3;
}
.btn-muted:hover { background: #d9dcda; border-color: #c6cac7; }

.btn-cta {
  background: var(--mint);
  color: var(--deep);
  border-color: var(--mint);
}
.btn-cta:hover { background: #2bbf8a; border-color: #2bbf8a; }

/* Hero */
.hero {
  padding: 72px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 16px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin: 0 0 28px;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
}

/* Trust strip */
.trust {
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--border);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.trust-list li {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Course grid */
.course-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.course-thumb {
  background: var(--tint);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.course-thumb img {
  height: 56px;
  width: auto;
  opacity: 0.85;
}

.course-thumb--cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
}

.course-thumb--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.course-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Chips sit on ONE line under the cover image. .course-body is a flex COLUMN,
   so without this wrapper each chip becomes its own row. The three labels come
   to 362px at the default chip size against a 298px card, so the sizing below
   is scoped to this row only — chips elsewhere on the site keep their size. */
.course-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

.course-chips .chip {
  align-self: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 3px 7px;
}

.chip {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
}

.chip--muted {
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--border);
  text-transform: none;
  letter-spacing: 0.02em;
}

.chip--lifecycle {
  background: #dff7ed;
  color: #065f46;
}

.chip--recent {
  background: #dbeafe;
  color: #1d4ed8;
}

.course-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 4px 0 0;
  color: var(--ink);
}

.course-meta {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin: 0;
}

.course-desc {
  color: var(--ink-2);
  margin: 8px 0 0;
  flex: 1;
}

.course-link {
  margin-top: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.course-link:hover { text-decoration: underline; }

.course-card--placeholder {
  background: var(--paper);
  border-style: dashed;
}

.course-card--placeholder .course-thumb {
  opacity: 0.65;
}

.course-card--placeholder .course-thumb--cover { opacity: 1; }

/* Steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.step-number {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.step-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--ink);
}

.step-body {
  margin: 0;
  color: var(--ink-2);
}

/* Feature grid */
.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.feature-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--ink);
}

.feature-body {
  margin: 0;
  color: var(--ink-2);
}

/* CTA band */
.cta-band {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 80px 0;
}

.cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--deep-ink);
}

.cta-sub {
  color: var(--deep-ink);
  opacity: 0.82;
  max-width: 52ch;
  margin: 0 0 12px;
}

/* Footer */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 40px 0 32px;
  margin-top: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-logo {
  height: 28px;
  width: auto;
}

.footer-tag {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-links a:hover { color: var(--accent); }

.footer-copy {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}

/* Contact page */
.contact-main { padding-top: 16px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}

.contact-copy h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink);
}

.contact-email {
  margin-top: 12px;
}

.contact-aside {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.aside-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 16px;
  color: var(--ink);
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aside-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aside-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
}

.aside-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.aside-list a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 960px) {
  .hero { padding: 48px 0 64px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-stage { order: 2; }
  .lab-slot { aspect-ratio: 16 / 10; }
  :root { --pad-y: 56px; }
  .course-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .nav-links, .nav-actions { display: none; }
  .nav-menu { display: block; position: relative; }
  .brand-word { font-size: 1rem; }
  .header-inner { min-height: 64px; }
  .cta-band { padding: 56px 0; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .trust-list { justify-content: flex-start; }
  .trust-list li { width: 100%; text-align: center; }
}

/* ─── Social enterprise + who-makes-this (27 Jul 2026) ─────────────── */
.mission-grid,
.who-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;      /* the panel sits against the middle of the copy */
}
.who-grid { grid-template-columns: 0.75fr 1.25fr; }
.mission-lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
}
.mission-body { color: var(--ink); margin-bottom: 26px; }   /* match the lede above it */
.mission-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mission-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px;
  border-top: 1px solid var(--border);
}
.mission-list li:first-child { border-top: 0; }
.mission-list strong { display: block; font-size: 0.98rem; margin-bottom: 4px; }
.mission-list span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.mission-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tint); position: relative; margin-top: 1px;
}
.mission-tick::before {
  content: ""; position: absolute;
  left: 7px; top: 4px; width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.who-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--border);
}
.who-body { color: var(--ink-2); margin-bottom: 22px; }
.who-creds { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.who-creds li {
  border-left: 3px solid var(--tint);
  padding-left: 14px;
}
.who-creds strong { display: block; font-size: 0.98rem; line-height: 1.4; }
.who-creds span { color: var(--ink-2); font-size: 0.9rem; }
.who-link { font-weight: 600; }

@media (max-width: 860px) {
  .mission-grid, .who-grid { grid-template-columns: 1fr; gap: 32px; }
  .who-portrait { max-width: 320px; }
}

.mission-copy .kicker,
.who-copy .kicker {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}

/* ─── Two paths + FAQ (27 Jul 2026) ──────────────────────────────── */
.path-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px;
}
.path-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 32px 30px; display: flex; flex-direction: column;
}
.path-card--community { background: var(--paper-alt); }
.path-title {
  font-family: var(--font-serif);
  font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px;
}
.path-body { color: var(--ink-2); margin-bottom: 18px; }
.path-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.path-list li {
  position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--ink);
}
.path-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}
.path-card .btn { align-self: flex-start; margin-top: auto; }

.faq-list { display: grid; gap: 4px; margin-top: 30px; max-width: 860px; }
.faq-item {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
}
.faq-q { font-size: 1.08rem; margin-bottom: 8px; }
.faq-a { color: var(--ink-2); margin: 0; }

@media (max-width: 860px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ─── Narrow-screen safety (27 Jul 2026) ──────────────────────────────
   Grid items default to min-width:auto, so a long word in a large serif
   pushes its column wider than the container and eats the right-hand
   gutter. These three rules keep every side margin honest down to 320px. */
.hero-grid > *,
.path-grid > *,
.mission-grid > *,
.who-grid > *,
.course-grid > *,
.feature-grid > *,
.steps > * { min-width: 0; }

h1, h2, h3, .section-title, .path-title, .faq-q, .course-title {
  overflow-wrap: break-word;
}

@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .hero h1 { font-size: 2.05rem; }
}

/* ─── FAQ as a centred accordion (27 Jul 2026) ───────────────────────
   Native <details>, so keyboard and screen-reader behaviour comes free. */
#faq .section-title { text-align: center; }
.faq-list { margin-left: auto; margin-right: auto; gap: 10px; }
.faq-item { padding: 0; }
.faq-item .faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px 26px; margin: 0;
  font-size: 1.05rem; font-weight: 600;
}
.faq-item .faq-q::-webkit-details-marker { display: none; }
.faq-item .faq-q::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item .faq-a {
  padding: 0 26px 22px; margin: 0;
  text-align: center;
  max-width: 68ch; margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-q::after { transition: none; }
}

/* The mobile menu's link colour was beating the button's own (`.nav-menu li a`
   is more specific than `.btn-solid`), so the solid CTA rendered dark-on-green
   and failed contrast. Buttons keep their own scheme inside the menu. */
.nav-menu li a.btn-solid { color: var(--accent-ink); }
.nav-menu li a.btn-ghost { color: var(--ink); }
.nav-menu li a.btn { display: inline-flex; }

/* The dropdown was pinned to right:24px on the page, so it drifted out of
   line with the Menu button whenever the gutter changed (18px under 400px).
   Anchor it to the button itself instead, so the right edges always align. */
.nav-menu { position: relative; }
.nav-menu ul { right: 0; left: auto; }

/* ─── Courses carousel (28 Jul 2026) ──────────────────────────────────
   Arrows flank the rail rather than sitting above it. Native scrolling
   with snap underneath, so touch and keyboard work without the buttons. */
.scroller-head {
  display: flex; align-items: center; justify-content: flex-end;
  margin: -18px 0 14px;
}
.scroller-all { font-weight: 600; }

.scroller-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
}

.scroller-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--paper);
  color: var(--ink); font-size: 18px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
}
.scroller-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.scroller-btn:disabled { opacity: .35; cursor: default; }
.scroller-btn--prev { justify-self: start; }
.scroller-btn--next { justify-self: end; }

.course-scroller {
  display: flex;
  min-width: 0;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding-bottom: 4px;
  /* the arrows are the control here, so the bar itself is hidden. Scrolling
     still works by wheel, trackpad, touch and keyboard. */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* old Edge */
}
.course-scroller::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
.course-scroller > .course-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (max-width: 860px) {
  .scroller-shell { display: block; }
  .course-scroller > .course-card { flex-basis: 78vw; }
  .scroller-btn { display: none; }     /* touch users swipe */
}
/* the kicker was only styled inside the hero, so page intros rendered it as
   plain body text; make it the same eyebrow everywhere */
.kicker {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
/* wider cards so the courses rail has somewhere to scroll even with a
   small catalogue; the arrows are live rather than permanently greyed */
.course-scroller > .course-card { flex-basis: 360px; }

/* The 360px carousel card was appended AFTER the mobile rule, so it won on
   source order and forced the page wider than the phone (the footer then
   stretched to the expanded viewport, which is what showed). Re-assert the
   mobile size last so narrow screens get a card that fits. */
@media (max-width: 860px) {
  .course-scroller > .course-card { flex-basis: 78vw; }
}

/* Two more footer links were added tonight and the row does not wrap, so on a
   phone the footer laid out ~440px wide and stretched the whole document past
   the viewport. Wrap the row and let the grid collapse cleanly. */
.footer-links { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 18px; }
  .footer-links { gap: 14px; }
  .footer-brand { align-items: flex-start; }
}

/* ─── Neutral palette, site-wide (28 Jul 2026) ────────────────────────
   Jamie: text #1d1d1f, page stays white, and anywhere there are cards the
   cards are white on a #f5f5f7 band. Rather than tagging every section by
   hand across nine pages, any section that CONTAINS a card grid takes the
   band. :has() is unsupported on a few old browsers, where the section
   simply stays white: a graceful loss, not a broken layout. */
.section:has(.course-grid),
.section:has(.feature-grid),
.section:has(.path-grid),
.section:has(.steps),
.section:has(.faq-list),
.section:has(.mission-list),
.section:has(.tile-grid),
.section:has(.video-grid),
.section:has(.cat-grid) {
  background: var(--paper-alt);
}
/* the cards themselves stay white against it */
.course-card, .feature-card, .path-card, .faq-item, .tile, .video-card,
.mission-list, .step, .cat-card { background: var(--paper); }
.path-card--community { background: var(--paper); }

/* the hero mark keeps no background of its own */
.lab-slot { background: transparent; }

/* two grey bands running together read as one: keep a hairline between them */
.section:has(.course-grid) + .section:has(.feature-grid),
.section + .section { border-top: 1px solid var(--border); }
.section + .cta-band, .cta-band + .section { border-top: 0; }

/* pills: grey fill, dark text (28 Jul 2026) */
.trust-list li {
  background: var(--paper-alt);
  color: var(--ink);
  border-color: var(--border);
}
.chip, .chip--muted {
  background: var(--paper-alt);
  color: var(--ink);
}

/* Jamie, 28 Jul: invert those two — white section, grey cards. Applies to
   the courses rail, the courses page grid and the feature cards. */
.section:has(.course-grid),
.section:has(.feature-grid) { background: var(--paper); }
.course-card, .feature-card { background: var(--paper-alt); }
.course-card .course-thumb { background: #ececf0; }   /* a shade down so the thumb still reads */

/* Courses moved above Two ways in, so the bands swap to keep alternating:
   courses takes the grey band with white cards, Two ways in takes white
   with grey cards. Why it holds up stays white-with-grey-cards. */
.section:has(.course-grid) { background: var(--paper-alt); }
.course-card { background: var(--paper); }
.course-card .course-thumb { background: #ececf0; }
.section:has(.path-grid) { background: var(--paper); }
.path-card, .path-card--community { background: var(--paper-alt); }

/* Course cards sit on the grey band and their thumbnail is also grey, so the
   card edge was disappearing. Lift them with a real shadow plus a white ring,
   and give the thumbnail a hairline so the image area separates from the card. */
.course-card {
  border-color: transparent;
  box-shadow: 0 0 0 1px #ffffff, 0 2px 4px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .09);
}
.course-card--placeholder { box-shadow: 0 0 0 1px #ffffff, 0 2px 8px rgba(0, 0, 0, .05); }
.course-card .course-thumb { border-bottom: 1px solid var(--border); }
/* ─────────────────────────────────────────────────────────
   Contact page — 7/5 split, booking card, text rail
   28 Jul 2026
   ───────────────────────────────────────────────────────── */

/* intro block */
.contact-intro {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.contact-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 8px 0 18px;
  color: var(--ink);
}
.contact-lede {
  font-size: 1.06rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 auto 8px;
  max-width: 56ch;
}
.contact-reassure {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 56ch;
}

/* 7/5 split */
.contact-stage {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}

/* form column */
.contact-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.contact-h2-sub {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.contact-form-mount {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  min-height: 220px;
}
.form-fallback {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 16px 0 0;
}

/* booking card */
.contact-book-card {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 96px;
}
.book-card-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 8px;
}
.book-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.book-card-person {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}
.book-card-photo {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.book-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.2;
}
.book-card-line {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.book-card-body {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 22px;
}
.book-card-cta {
  width: 100%;
  padding: 14px 18px;
}

/* text rail */
.contact-rail {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-top: 24px;
}
.rail-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 56px;
}
.rail-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-key {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 500;
}
.rail-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.rail-list a:hover { text-decoration: underline; }

/* booking modal (28 Jul 2026) */
body.book-modal-open { overflow: hidden; }

.book-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.book-modal[hidden] { display: none; }

.book-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 27, 22, 0.55);
  backdrop-filter: blur(2px);
}

.book-modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: book-modal-in 180ms ease-out;
}
@keyframes book-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.book-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.book-modal__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  color: var(--ink);
}

.book-modal__close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.book-modal__close:hover { background: var(--paper-alt); }
.book-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.book-modal__body {
  padding: 0;
  overflow: auto;
  flex: 1;
}

.book-modal__body .calendly-inline-widget {
  width: 100%;
  min-width: 0;
  height: min(640px, calc(100vh - 200px));
}

.book-modal__note {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0;
  padding: 12px 24px 18px;
  text-align: center;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .book-modal { padding: 0; }
  .book-modal__panel { max-height: 100vh; height: 100vh; border-radius: 0; }
  .book-modal__body .calendly-inline-widget { height: calc(100vh - 140px); }
  .rail-list { grid-template-columns: 1fr; gap: 16px; }
  .contact-book-card .book-card-cta { padding: 12px 18px; }
}

@media (max-width: 960px) {
  .contact-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  .contact-book-card {
    position: static;
    padding: 24px;
  }
  .contact-intro { margin-bottom: 40px; }
}

/* ─────────────────────────────────────────────────────────
   A.L.L. section — equity band, sits above #mission
   White outer / paper-alt inner panel, 5/7 grid, scene on right
   28 Jul 2026
   ───────────────────────────────────────────────────────── */

.all-section {
  padding: 96px 0;
  background: var(--paper);
}
.all-section .wrap {
  background: var(--paper-alt);
  border-radius: 18px;
  padding: 56px 64px;
}
.all-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
.all-copy { max-width: 480px; }
.all-mark {
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, 8vw, 5.6rem);
  line-height: 0.95;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.all-h {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.all-lead {
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 24px;
}
.all-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.all-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.all-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--mint);
  border-radius: 1px;
}
.all-closing {
  font-size: 0.95rem;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}
.all-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}
.all-stage canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 960px) {
  .all-section { padding: 64px 0; }
  .all-section .wrap { padding: 40px 32px; }
  .all-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .all-section .wrap { padding: 32px 22px; }
  .all-list { grid-template-columns: 1fr; }
}

/* Scholarship page and paired community-card actions — 28 Jul 2026 */
.path-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.path-actions .btn { margin-top: 0; }
.path-actions .btn-ghost { background: var(--paper); }
.path-actions .btn-ghost:hover { background: #fbfbfc; }

.scholarship-page-hero .hero-grid { align-items: stretch; }
.scholarship-page-hero .hero-copy { align-self: center; }
.scholarship-page-hero .lede { margin-bottom: 16px; }
.scholarship-page-hero .scholarship-lede--strong {
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 28px;
}
.scholarship-action-note {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: .86rem;
}
.scholarship-expectation {
  justify-content: center;
  padding: 36px;
}
.scholarship-expectation .chip {
  margin-bottom: 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .09em;
}
.scholarship-expectation .path-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin: 0 0 14px;
}
.scholarship-expectation .path-list { margin-bottom: 0; }
.section.scholarship-funding { background: var(--paper); }
.scholarship-funding .mission-list { background: var(--paper-alt); }

.scholarship-modal__panel { max-width: 760px; }
.scholarship-modal__eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.scholarship-modal__body { padding: 0 24px 24px; }
.scholarship-modal__intro {
  margin: 0 -24px 24px;
  padding: 18px 24px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--border);
}
.scholarship-modal__intro p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.55;
}
.scholarship-form-mount { min-height: 420px; }
.scholarship-modal .form-fallback { margin: 18px 0 0; }
.scholarship-modal .book-modal__note {
  margin: 24px -24px -24px;
  padding: 14px 24px 18px;
}
@media (max-width: 640px) {
  .path-actions { align-items: stretch; }
  .path-actions .btn { justify-content: center; width: 100%; }
  .scholarship-expectation { padding: 28px 24px; }
  .scholarship-modal__body { padding-right: 18px; padding-left: 18px; }
  .scholarship-modal__intro { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
  .scholarship-modal .book-modal__note { margin-right: -18px; margin-left: -18px; }
}

@media (min-width: 961px) {
  .contact-book-card { align-self: center; }
}

/* ─── "Learn more" links on the homepage feature cards (29 Jul 2026) ───
   Each card now points at its section of standards.html. The card becomes a
   flex column so the link sits on the baseline of every card in the row
   regardless of how long the body copy runs. */
.feature-card {
  display: flex;
  flex-direction: column;
}
.feature-card .feature-body { margin-bottom: 18px; }
.feature-more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.feature-more:hover { border-bottom-width: 2px; text-decoration: none; }
.feature-more .feature-more-arrow { display: inline-block; margin-left: 6px; }
.feature-more:hover .feature-more-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .feature-more .feature-more-arrow { transition: transform .15s ease; }
}

/* ─── standards.html ──────────────────────────────────────────────────
   The build standard behind every module, with the EU AI Act duty at the
   top. Homepage cards deep-link to #accessibility / #portability /
   #maintained, so every section needs to clear the sticky header. */
[id="eu-ai-act"], .standards-section, .standards-toc { scroll-margin-top: 88px; }

.standards-hero { padding-bottom: 64px; }
.standards-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 22ch;
}
.standards-hero-body { max-width: 58ch; color: var(--ink-2); }
.standards-hero-body p { margin: 0 0 16px; }

.standards-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 36px 0 32px;
}
.standards-panel {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.standards-panel--muted { background: var(--paper); }
.standards-panel-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}

.standards-list { list-style: none; margin: 0; padding: 0; }
.standards-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--ink-2);
}
.standards-list li:last-child { margin-bottom: 0; }
.standards-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.standards-list--open li::before {
  background: transparent;
  border: 2px solid var(--border);
  width: 10px;
  height: 10px;
  top: 0.58em;
}
.standards-list--wide li { padding-left: 28px; margin-bottom: 14px; }

.standards-toc {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 18px 0;
}
.standards-toc-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.standards-toc-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mint);
}
.standards-toc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
}
.standards-toc a {
  color: var(--deep-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, .35);
  padding-bottom: 2px;
  font-size: 0.95rem;
}
.standards-toc a:hover { border-bottom-color: var(--mint); }
.standards-toc a:focus-visible { outline-color: var(--mint); }

/* Rail on the left (eyebrow + heading), prose on the right. Capped at 55ch
   because DM Sans runs about 8.3px per average character against an 11.3px
   "0", so the ch unit reads far wider than the line actually measures: 74ch
   put 90 characters on a line. Measured, not eyeballed. */
.standards-block { display: grid; gap: 0; }
.standards-body { max-width: 55ch; }
.standards-body > :first-child { margin-top: 0; }
.standards-rail .section-title { margin-bottom: 0; }
@media (min-width: 961px) {
  .standards-block {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  .standards-rail { position: sticky; top: 104px; }
}
@media (max-width: 960px) {
  .standards-rail { margin-bottom: 20px; }
}
.standards-section .section-title { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.standards-lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin: 0 0 24px;
}
.standards-subhead {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 34px 0 10px;
  color: var(--ink);
}
/* Plain prose only. `.standards-body > p` unqualified beats .standards-lede
   and .standards-note on specificity and silently ate both their margins. */
.standards-body > p:not([class]) { color: var(--ink-2); margin: 0 0 14px; }

.standards-note {
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0 0;
  color: var(--ink-2);
}
.standards-note strong { color: var(--ink); }

@media (max-width: 860px) {
  .standards-split { grid-template-columns: 1fr; }
  .standards-hero { padding-bottom: 44px; }
}

/* Screen-reader-only text. Used to extend a repeated "Learn more" link into a
   name that makes sense out of context (WCAG 2.4.4), without four different
   visible link labels breaking the card grid's rhythm. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Nav breakpoint follows the nav's width (29 Jul 2026) ────────────
   Adding Standards made it five links plus two buttons, which stopped
   fitting above the old 720px burger breakpoint: the header wrapped from
   860px down and pushed the document 37px wider than the viewport at 760px.
   Only the desktop/burger swap moves up; the mobile block at 720px keeps
   owning brand-word size, header height and the CTA band. */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-menu { display: block; position: relative; }
}