/* ==========================================================================
   wga-public.css - the shared layer for the marketing pages.

   Loaded by index.html, for-individuals.html, business.html, universities.html
   and government.html. The signed-in application keeps its own wga-shell.css;
   nothing here is needed once somebody is inside a dashboard, and nothing there
   is needed to sell a course.

   Everything is expressed through custom properties so a page can adjust a
   value once instead of chasing hex codes, and so dark mode is a block of
   overrides rather than a second stylesheet. Dark mode is switched by the
   existing toggle in wga-ui.js, which puts `.dark-mode` on <body>.
   ========================================================================== */

/* ---------------------------------------------------------------- *
   1. Tokens
 * ---------------------------------------------------------------- */

:root {
  /* Brand */
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-line: #bfdbfe;
  --accent: #0ea5e9;

  /* Ink and surfaces */
  --ink: #0b1220;
  --ink-2: #334155;
  --muted: #5b6b82;
  --line: #e3e8f0;
  --line-strong: #cbd5e1;
  --bg: #ffffff;
  --surface: #f7f9fc;
  --surface-2: #ffffff;
  --surface-3: #eef3fb;

  /* Type scale, 1.25 ratio */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.9rem;
  --t-3xl: 2.4rem;
  --t-4xl: 3rem;
  --t-5xl: 3.75rem;

  /* Spacing, 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius and elevation */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px -24px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.06);

  --max: 1160px;
  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body.dark-mode {
  --ink: #eef4ff;
  --ink-2: #c8d5e6;
  --muted: #93a4bd;
  --line: #1e2a3d;
  --line-strong: #2c3b52;
  --bg: #070c15;
  --surface: #0d1522;
  --surface-2: #111b2b;
  --surface-3: #162234;
  --brand: #60a5fa;
  --brand-strong: #93c5fd;
  --brand-soft: #10233d;
  --brand-line: #1e3a5f;
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 52px -28px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------- *
   2. Base
 * ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* The `hidden` attribute is the whole mechanism for signed-in / signed-out
   controls, and `.btn { display: inline-flex }` out-specifies it. Without this
   a signed-in visitor sees "Sign in" next to "Sign out". */
[hidden] {
  display: none !important;
}

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

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 800;
}

p {
  margin: 0 0 var(--s-4);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  z-index: 200;
}

.skip-link:focus {
  left: var(--s-4);
  top: var(--s-4);
}

/* ---------------------------------------------------------------- *
   3. Buttons and small parts
 * ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: var(--t-sm);
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), border-color 0.16s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--brand-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-quiet {
  background: var(--surface-3);
  color: var(--ink);
}

.btn-lg {
  padding: 14px 26px;
  font-size: var(--t-base);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
  border: 1px solid var(--brand-line);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.pill-muted {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--muted);
}

.pill-new {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

body.dark-mode .pill-new {
  background: #052e21;
  border-color: #0b5c42;
  color: #6ee7b7;
}

.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}

.muted {
  color: var(--muted);
}

/* ---------------------------------------------------------------- *
   4. Header
 * ---------------------------------------------------------------- */

.pub-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.pub-header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.pub-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: none;
}

.pub-brand:hover {
  text-decoration: none;
}

.pub-brand img {
  height: 34px;
  width: auto;
}

.pub-brand span {
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pub-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-4);
  flex: 1 1 auto;
}

.pub-nav a,
.pub-nav button.navlink {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pub-nav a:hover,
.pub-nav button.navlink:hover {
  background: var(--surface-3);
  color: var(--ink);
  text-decoration: none;
}

.pub-nav a[aria-current='page'],
.pub-nav button.navlink[aria-expanded='true'] {
  color: var(--brand);
  background: var(--brand-soft);
}

.pub-header-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.icon-btn {
  appearance: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}

.icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.menu-btn {
  display: none;
}

/* Mega menu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8) 0;
  display: none;
}

.mega.open {
  display: block;
  animation: megaIn 0.16s var(--ease);
}

@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
}

.mega h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--s-3);
  font-weight: 750;
}

.mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.mega li a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 550;
}

.mega li a:hover {
  background: var(--surface-3);
  color: var(--brand);
  text-decoration: none;
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 55;
  background: var(--bg);
  padding: var(--s-5) var(--s-5) var(--s-12);
  overflow-y: auto;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
}

.mobile-nav .mobile-group {
  margin-top: var(--s-6);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 750;
}

/* ---------------------------------------------------------------- *
   5. Hero
 * ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-20) 0 var(--s-16);
  background:
    radial-gradient(900px 420px at 12% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(700px 380px at 92% 6%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-16);
  align-items: center;
}

.hero-title {
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
  max-width: 19ch;
}

.hero-title em {
  font-style: normal;
  color: var(--brand);
}

.hero-lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 34em;
  margin-bottom: var(--s-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.hero-note {
  font-size: var(--t-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- *
   5c. Slidebar - the three highlights under the hero

   Replaces the static certificate panel. It is a grid rather than a stack of
   absolutely positioned slides: every slide occupies the same cell, so the
   container is as tall as the tallest one and no text is ever clipped at a
   narrow width.

   Inactive slides are `visibility: hidden` so their links stay out of the tab
   order, and the visibility change is delayed until the fade has finished -
   otherwise the outgoing slide vanishes instead of cross-fading.
   * ---------------------------------------------------------------- */

.slidebar {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8) var(--s-8) var(--s-6);
  max-width: 860px;
  margin: 0 auto;
}

.slidebar-track {
  display: grid;
}

.slidebar-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.slidebar-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

/* The About slide trades the 220px icon column for photographs, so it asks for
   more of the row. Below 720px the single-column rule further down wins and the
   image simply sits on top of the copy. */
.slidebar-slide--about {
  /* Was 0.95fr / 1.05fr. The posters are portrait, so at the old split each one
     rendered 176px wide and its lettering was unreadable. 1.15fr gives the pair
     57% of the row; the copy column still holds the paragraph at this width. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

/* Both About images are portrait posters with lettering close to their edges.
   They are shown as a pair, each in full. This rule used to force a 1400/788
   landscape box with object-fit: cover, which cropped a 848x1260 poster to its
   middle third and cut the artwork in half. */
.about-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px;
}

.about-media img {
  display: block;
  width: 100%;
  /* The markup carries the real width/height so the box is reserved before the
     file arrives; height:auto keeps those attributes from squashing it. */
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

/* Still its own class because the markup uses it, but no longer an overlay: an
   inset covering 40% of a poster hides exactly the part that says what it is. */
.about-media .about-media-inset {
  position: static;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.slide-copy h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-2);
}

.slide-copy p {
  color: var(--ink-2);
  font-size: var(--t-sm);
  margin-bottom: var(--s-3);
}

.slide-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--ink) !important;
  font-size: var(--t-sm);
}

.slide-copy strong {
  color: var(--ink);
}

.slide-facts {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.slide-facts li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.slide-facts li::before {
  content: '\2713';
  color: var(--brand);
  font-weight: 800;
  line-height: 1.4;
  flex: none;
}

.slide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 750;
}

/* ---- Slide visuals: built from CSS, never from a borrowed photograph ---- */

.slide-visual {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.mini-cert {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface-2));
  box-shadow: var(--shadow-sm);
}

.mini-cert-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.mini-cert-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 750;
}

.mini-seal {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--brand), var(--accent));
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.mini-cert-name {
  margin: 0 0 2px;
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mini-cert-course {
  margin: 0 0 var(--s-3);
  font-size: 11.5px;
  color: var(--muted);
}

.mini-cert-code {
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.mini-cards {
  width: 100%;
  display: grid;
  gap: 8px;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.mini-card .wga-course-cover {
  aspect-ratio: 16 / 5;
}

.mini-card .wga-course-cover > span {
  font-size: 16px;
  letter-spacing: 0.12em;
}

.mini-card-label {
  display: block;
  padding: 6px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mini-verify {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.mini-verify-label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 750;
  margin-bottom: 6px;
}

.mini-verify-field {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface);
  margin-bottom: var(--s-3);
}

.mini-verify-result {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #047857;
}

.mini-verify-result::before {
  content: '\2713';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 10px;
}

body.dark-mode .mini-verify-result {
  color: #6ee7b7;
}

body.dark-mode .mini-verify-result::before {
  background: #052e21;
  border-color: #0b5c42;
}

/* ---- Dots ---- */

.slidebar-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s-6);
}

.slidebar-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}

.slidebar-dot:hover {
  background: var(--muted);
}

.slidebar-dot.is-active {
  width: 26px;
  background: var(--brand);
}

.slidebar-dot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .slidebar {
    padding: var(--s-5);
  }

  .slidebar-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }

  .slide-visual {
    min-height: 0;
  }

  .mini-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mini-card-label {
    font-size: 9px;
    padding: 5px 6px;
  }
}

/* ---------------------------------------------------------------- *
   5b. Media hero - the homepage only

   `.hero` on its own stays the two-column arrangement the audience pages use.
   This modifier turns it into a full-bleed backdrop with the copy centred over
   it, so changing the homepage cannot change /business.html.
   * ---------------------------------------------------------------- */

.hero--media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: var(--s-20) 0 var(--s-16);
  overflow: hidden;
  text-align: center;
  color: #fff;
  /* The gradient is the floor, not a nicety: it is what a visitor sees if the
     poster fails and the video never loads. */
  background: linear-gradient(135deg, #0b1c3f, #1d4ed8);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The video is the hero; the photograph is what shows when it cannot.
   Hidden by default so a working video is the only thing on screen, and it is
   only fetched when the script decides it is needed - see .is-fallback below. */
.hero-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.hero-bg.is-fallback .hero-poster {
  opacity: 1;
  visibility: visible;
}

.hero-video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Only once there are pixels to show, so the swap is never a flash of black. */
.hero-video.is-playing {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 20, 0.58) 0%, rgba(4, 10, 20, 0.62) 45%, rgba(4, 10, 20, 0.9) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(4, 10, 20, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero--media .eyebrow {
  color: #dbeafe;
}

.hero--media .hero-title {
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  max-width: 20ch;
}

.hero--media .hero-lede {
  margin-left: auto;
  margin-right: auto;
  color: #e2e8f0;
  font-size: var(--t-md);
  max-width: 46ch;
}

.hero--media .hero-actions {
  justify-content: center;
}

.hero--media .hero-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.hero--media .hero-actions .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hero--media .hero-note {
  justify-content: center;
  color: #cbd5e1;
}

.hero--media .hero-note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The certificate panel overlaps the bottom of the hero, which is why the
   scrim darkens towards the bottom: the two surfaces meet rather than cut. */
/* The certificate panel used to sit here. It is now the first slide of the
   slidebar below, so the overlap is set on the band rather than on a card. */
.hero-panel {
  position: relative;
  z-index: 2;
  margin-top: -110px;
  padding-bottom: var(--s-12);
}

/* ---------------------------------------------------------------- *
   5d. Page header

   The same band at the top of every public page except the homepage, which has
   the video hero. One photograph, one overlay, one type scale - the identity is
   the treatment, not a different image per page.
   * ---------------------------------------------------------------- */

.page-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 300px;
  padding: var(--s-16) 0;
  color: #fff;
  /* The gradient is the floor: if the photograph never arrives, the band is
     still legible rather than white text on white. */
  background: linear-gradient(135deg, #0b1c3f, #1d4ed8);
}

.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(4, 10, 20, 0.84) 0%,
    rgba(4, 10, 20, 0.62) 45%,
    rgba(4, 10, 20, 0.34) 100%
  );
}

.page-header-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.page-header h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  color: #fff;
  margin-bottom: var(--s-2);
  max-width: 22ch;
}

.page-header p {
  margin: 0;
  color: #dce5f2;
  font-size: var(--t-md);
  max-width: 56ch;
}

.page-header .eyebrow {
  color: #bfd7ff;
}

.page-header h1 em {
  font-style: normal;
  color: #a9c8ff;
}

/* The band carries the page's calls to action, because below it there is only
   content. The ghost button is an ink-on-white control by default, so it is
   inverted here rather than restyled per page. */
.page-header .hero-actions {
  margin: var(--s-8) 0 0;
}

.page-header .hero-note {
  margin-top: var(--s-5);
  color: #c9d5e6;
}

.page-header .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.page-header .btn-ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* An address has no spaces to break at, and the partnership address is 33
   characters - wider than a 375px column once the container padding is taken
   off. Without this it pushed the whole page 4px wider than the viewport. */
a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- *
   6. Trust strip and figures
 * ---------------------------------------------------------------- */

.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-6) 0;
}

.trust-item {
  text-align: center;
  padding: 0 var(--s-3);
  border-left: 1px solid var(--line);
}

.trust-item:first-child {
  border-left: 0;
}

.trust-num {
  display: block;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 2px;
}

.trust-label {
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ---------------------------------------------------------------- *
   7. Sections
 * ---------------------------------------------------------------- */

.section {
  padding: var(--s-20) 0;
}

.section-tight {
  padding: var(--s-16) 0;
}

.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 44rem;
  margin-bottom: var(--s-10);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-title {
  font-size: clamp(1.6rem, 2.6vw, var(--t-3xl));
  margin-bottom: var(--s-3);
}

.section-lede {
  color: var(--ink-2);
  font-size: var(--t-md);
  margin: 0;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}

/* Filter tabs */
.tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 650;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.tab[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

body.dark-mode .tab[aria-selected='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: #06101f;
}

/* ---------------------------------------------------------------- *
   8. Course card (the one implementation, shared by every page)
 * ---------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wga-course-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  height: 100%;
}

.wga-course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.wga-course-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-3);
}

/* A course without a photograph gets a gradient cover and its initials in large
   type. It reads as a design, not as a missing image. */
.wga-course-cover {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #1e3a8a, #2563eb 55%, #0ea5e9);
  position: relative;
  overflow: hidden;
}

.wga-course-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.24), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, 0.22), transparent 65%);
  pointer-events: none;
}

.wga-course-cover > span {
  position: relative;
  z-index: 1;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(7, 12, 21, 0.28);
}

/* One gradient per subject, so courses in a subject look related. */
.wga-course-cover.tone-technology {
  background: linear-gradient(140deg, #0c4a6e, #0284c7 55%, #22d3ee);
}

.wga-course-cover.tone-business-management {
  background: linear-gradient(140deg, #7c2d12, #ea580c 55%, #fbbf24);
}

.wga-course-cover.tone-data-analytics {
  background: linear-gradient(140deg, #3b0764, #7c3aed 55%, #c084fc);
}

.wga-course-cover.tone-design {
  background: linear-gradient(140deg, #831843, #db2777 55%, #f9a8d4);
}

.wga-course-cover.tone-digital-skills {
  background: linear-gradient(140deg, #064e3b, #059669 55%, #34d399);
}

.wga-course-cover.tone-health-care {
  background: linear-gradient(140deg, #7f1d1d, #dc2626 55%, #fb923c);
}

.wga-course-cover.tone-education {
  background: linear-gradient(140deg, #1e3a8a, #4f46e5 55%, #818cf8);
}

.wga-course-cover.tone-agriculture {
  background: linear-gradient(140deg, #14532d, #16a34a 55%, #a3e635);
}

.wga-course-cover.tone-trades-vocational {
  background: linear-gradient(140deg, #292524, #57534e 55%, #a8a29e);
}

.wga-course-cover.tone-finance-accounting {
  background: linear-gradient(140deg, #134e4a, #0d9488 55%, #5eead4);
}

.wga-course-cover.tone-language {
  background: linear-gradient(140deg, #4c1d95, #7e22ce 55%, #e879f9);
}

.wga-course-cover.tone-professional-development {
  background: linear-gradient(140deg, #0f172a, #334155 55%, #64748b);
}

.thumb-wrap {
  position: relative;
  border-bottom: 1px solid var(--line);
  display: block;
}

.thumb-wrap .wga-pill {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.thumb-wrap .wga-pill-cat {
  top: 10px;
  left: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-color: color-mix(in srgb, var(--bg) 60%, var(--line));
  color: var(--ink);
}

.thumb-wrap .wga-pill-level {
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.62);
  border-color: transparent;
  color: #fff;
  text-transform: capitalize;
}

.thumb-wrap .wga-pill-cred {
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.72);
  border-color: transparent;
  color: #fff;
}

.card-locked {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: capitalize;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  border: 0;
}

.wga-course-glyph {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand) 65%, var(--ink));
  text-transform: uppercase;
}

.wga-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-strong);
  font-size: var(--t-xs);
  font-weight: 650;
}

.wga-pill-new {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

body.dark-mode .wga-pill-new {
  background: #052e21;
  border-color: #0b5c42;
  color: #6ee7b7;
}

.wga-pill-rating {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

body.dark-mode .wga-pill-rating {
  background: #2a1e05;
  border-color: #78350f;
  color: #fcd34d;
}

.wga-course-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1 1 auto;
}

.wga-course-tags {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.wga-course-note {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.wga-course-title {
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 750;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wga-course-title a {
  color: var(--ink);
}

.wga-course-title a:hover {
  color: var(--brand);
  text-decoration: none;
}

.wga-course-summary {
  color: var(--muted);
  font-size: var(--t-sm);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wga-course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.wga-course-facts {
  margin-right: auto;
}

.wga-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

.wga-course-price {
  font-weight: 800;
  font-size: var(--t-md);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.wga-course-price.is-free {
  color: #047857;
}

body.dark-mode .wga-course-price.is-free {
  color: #6ee7b7;
}

.wga-course-instructor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.wga-course-instructor-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16ch;
}

/* Initials stand in for an instructor photograph nobody has supplied. */
.wga-card-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.wga-progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: var(--s-2);
}

.wga-progress > span {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* ---------------------------------------------------------------- *
   9. Value cards, steps, comparison
 * ---------------------------------------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.value-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.value-card h3 {
  font-size: var(--t-lg);
  margin: var(--s-4) 0 var(--s-2);
}

.value-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.value-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 19px;
  border: 1px solid var(--brand-line);
}

/* ---------------------------------------------------------------- *
   9b. Why choose Wuteve

   Scoped to `.why` so the brand palette asked for here (navy 073778,
   royal 1479E8, gold D9AD42, ink 172B4D, pale EEF5FF) cannot leak into
   the rest of the marketing pages. Text colours are the ones that change
   in dark mode; the navy surface of the learning-formats card does not.
 * ---------------------------------------------------------------- */

.why {
  --why-deep: #073778;
  --why-royal: #1479e8;
  --why-gold: #d9ad42;
  --why-heading: #073778;
  --why-body: #172b4d;
  --why-pale: #eef5ff;
  --why-line: rgba(7, 55, 120, 0.14);
}

body.dark-mode .why {
  --why-royal: #8ab8f5;
  --why-heading: #eef4ff;
  --why-body: #cdd9ea;
  --why-pale: rgba(20, 121, 232, 0.16);
  --why-line: rgba(148, 180, 226, 0.22);
}

.why-head {
  max-width: 50rem;
  margin-bottom: var(--s-12);
}

.why-sub {
  margin: 0 0 var(--s-4);
  font-size: var(--t-lg);
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--why-heading);
}

.why-intro {
  margin: 0;
  font-size: var(--t-md);
  color: var(--why-body);
}

.why-grid {
  gap: var(--s-5);
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6);
  border-color: var(--why-line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--why-royal);
  box-shadow: var(--shadow-md);
}

.why-card h3 {
  margin: 0;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
  color: var(--why-heading);
}

.why-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--why-body);
}

.why-card a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.why-card a:hover {
  color: var(--why-royal);
}

.why-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--why-line);
  background: var(--why-pale);
  color: var(--why-deep);
}

.why-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

body.dark-mode .why-icon {
  color: var(--why-royal);
}

/* The one value proposition that names how the academy teaches. It is a
   deliberate contrast block, not another white card. */
.why-card--formats {
  background: var(--why-deep);
  border-color: var(--why-deep);
}

body.dark-mode .why-card--formats {
  border-color: rgba(255, 255, 255, 0.18);
}

.why-card--formats h3 {
  color: #ffffff;
}

.why-card--formats p {
  color: rgba(255, 255, 255, 0.84);
}

.why-card--formats .why-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--why-gold);
}

.why-formats {
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.why-formats li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.why-formats li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--why-gold);
}

.why-closing {
  margin-top: var(--s-12);
}

.why-closing-inner {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-10) var(--s-6);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--why-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* A gold rule rather than a gold headline: gold text on a pale surface
   does not reach a readable contrast ratio. */
.why-closing-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--why-gold);
}

.why-closing-title {
  margin: 0 0 var(--s-2);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--why-heading);
}

.why-closing-slogan {
  margin: 0 0 var(--s-6);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--why-body);
}

.why-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.why-actions .btn {
  min-width: 190px;
}

@media (max-width: 560px) {
  .why-closing-inner {
    padding: var(--s-8) var(--s-5);
  }

  .why-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .why-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-card {
    transition: none;
  }

  .why-card:hover {
    transform: none;
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: var(--s-8);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  font-weight: 750;
}

.step h3 {
  font-size: var(--t-md);
  margin-bottom: var(--s-2);
}

.step p {
  color: var(--ink-2);
  font-size: var(--t-sm);
  margin: 0;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.compare th,
.compare td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  background: var(--surface-3);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 750;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare tbody th {
  font-weight: 700;
  color: var(--ink);
  width: 34%;
}

.compare td {
  color: var(--ink-2);
}

.compare-scroll {
  overflow-x: auto;
}

/* ---------------------------------------------------------------- *
   10. CTA band and forms
 * ---------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-12) var(--s-10);
  background: linear-gradient(135deg, #0b1c3f, #123a7a 55%, #1d4ed8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  flex-wrap: wrap;
}

.cta-band h2 {
  font-size: clamp(1.5rem, 2.6vw, var(--t-2xl));
  margin-bottom: var(--s-2);
}

.cta-band p {
  margin: 0;
  color: #cddffb;
  max-width: 42ch;
}

.cta-band .btn-primary {
  background: #fff;
  color: #123a7a;
}

.cta-band .btn-primary:hover {
  background: #e8f0fe;
}

.cta-band .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.cta-band .btn-ghost:hover {
  border-color: #fff;
  color: #fff;
}

.field {
  display: block;
  margin-bottom: var(--s-4);
}

.field > span {
  display: block;
  font-size: var(--t-sm);
  font-weight: 650;
  margin-bottom: 6px;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.field .hint {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
  font-weight: 450;
  margin-top: 5px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex: none;
}

.form-note {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: var(--s-3);
}

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  display: none;
}

.form-status.show {
  display: block;
}

.form-status.is-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.form-status.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

body.dark-mode .form-status.is-ok {
  background: #052e21;
  border-color: #0b5c42;
  color: #a7f3d0;
}

body.dark-mode .form-status.is-error {
  background: #2d0a0a;
  border-color: #7f1d1d;
  color: #fecaca;
}

.panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-md);
}

/* A panel that used to sit beside a hero and now stands on its own. */
.panel-solo {
  max-width: 820px;
  margin-inline: auto;
}

.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-12);
  align-items: start;
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.aside-list li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.aside-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  box-shadow: inset 0 0 0 4px var(--surface-2);
}

.notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.notice strong {
  color: var(--ink);
}

/* Tier table used on the business page */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.tier {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.tier.featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.tier h3 {
  font-size: var(--t-lg);
}

.tier .tier-seats {
  font-size: var(--t-sm);
  color: var(--muted);
}

.tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.tier li::before {
  content: '\2713';
  color: var(--brand);
  font-weight: 800;
  margin-right: 8px;
}

/* ---------------------------------------------------------------- *
   11. Newsletter and footer
 * ---------------------------------------------------------------- */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s-10);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: var(--s-10);
}

.newsletter h2 {
  font-size: var(--t-2xl);
  margin-bottom: var(--s-2);
}

.newsletter-form {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.newsletter-form input {
  flex: 1 1 220px;
  font: inherit;
  font-size: var(--t-sm);
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.newsletter-status {
  font-size: var(--t-sm);
  margin-top: var(--s-3);
  min-height: 1.2em;
  color: var(--muted);
}

.pub-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s-16) 0 var(--s-8);
  margin-top: var(--s-20);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--s-10);
}

.footer-grid > * {
  min-width: 0;
}

.footer-grid h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--s-4);
  font-weight: 750;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.footer-grid li {
  /* An email address is one long unbreakable token, and in a two-column footer
     it made the whole page wider than a phone screen. */
  overflow-wrap: anywhere;
}

.footer-grid a {
  color: var(--ink-2);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

.footer-grid a:hover {
  color: var(--brand);
}

.footer-about p {
  color: var(--muted);
  font-size: var(--t-sm);
  max-width: 32ch;
}

.footer-bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* ---------------------------------------------------------------- *
   12. Reveal on scroll, loading, utility
 * ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.shown {
  opacity: 1;
  transform: none;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-3), var(--surface), var(--surface-3));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-lg);
  min-height: 260px;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- *
   13. Loading screen - homepage only

   A brand moment, not a progress indicator for something the page is still
   fetching: the homepage renders its own content from the API, and this sits
   over it until that has had a moment to arrive. It lives in the markup rather
   than being injected, so it paints with the first frame instead of appearing
   after the thing it is meant to cover.
   * ---------------------------------------------------------------- */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  /* Fixed deep blue rather than var(--bg). The screen used to be white, so the
     map painted first and the hero's blue then appeared to slide over it - two
     looks of the same map within a second. Painting blue from the first frame
     means the map is only ever seen on blue, and the fade reveals a hero of the
     same family rather than a colour change. It is also identical in both
     themes, so nothing here depends on a token that flips. */
  background: linear-gradient(160deg, #1d4ed8 0%, #16306b 55%, #0b1220 100%);
  color: #eef4ff;
  transition: opacity 0.5s ease-out;
}

.loading-screen.is-hiding {
  opacity: 0;
}

/* The world map is the copy already in assets/img, not a request to a
   third-party host - it is 83 KB, it is ours, and it cannot go away.

   Inverted to render light, because it now sits on a deep blue background
   where the original dark strokes would disappear. */
.loading-screen-map {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/world-map.svg');
  background-size: cover;
  background-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.22;
  pointer-events: none;
}

/* Where west Africa sits on the map, marking home. */
.loading-screen-pulse {
  position: absolute;
  left: 45.5%;
  top: 46%;
  width: 26vmin;
  height: 26vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 60%, transparent), transparent 68%);
  animation: loadingPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* A ring turns around the emblem rather than the emblem turning: the crest is
   the brand mark and spinning it reads as a mistake. */
.loading-screen-logo {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  /* White chip, not var(--bg): the emblem is navy and needs a light disc
     behind it now that the background is blue in both themes. */
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  padding: 14px;
}

.loading-screen-logo img {
  width: 100%;
  height: auto;
}

.loading-screen-logo::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--brand);
  animation: loadingSpin 1.6s linear infinite;
}

.loading-screen-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #eef4ff;
}

@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loadingPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.55;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 0.9;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wga-course-card:hover {
    transform: none;
  }

  /* The screen still appears - it is the brand moment - but nothing moves. */
  .loading-screen-logo::after,
  .loading-screen-pulse {
    animation: none;
  }

  .loading-screen {
    transition: none;
  }

  .hero-video {
    transition: none;
  }

  /* The slides change without a cross-fade, and the script does not advance
     them on a timer: with reduced motion the dots are how you move. */
  .slidebar-slide,
  .slidebar-slide.is-active {
    transition: none;
  }

  .slidebar-dot {
    transition: none;
  }
}

/* ---------------------------------------------------------------- *
   13. Breakpoints - mobile first in spirit: the layout above is the
   desktop arrangement, and each block below removes columns as the
   viewport narrows. 980px is the tablet break, 720px the phone break.
 * ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  .card-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .pub-nav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  .hero {
    padding: var(--s-12) 0 var(--s-12);
  }

  .hero--media {
    min-height: 560px;
    padding: var(--s-16) 0 var(--s-12);
  }

  .hero-panel {
    margin-top: -70px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .card-grid,
  .card-grid-4,
  .value-grid,
  .steps,
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-layout,
  .newsletter,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 var(--s-4);
  }

  .hero--media {
    min-height: 500px;
    padding: var(--s-12) 0 var(--s-10);
  }

  .hero-panel {
    margin-top: var(--s-8);
    padding-bottom: var(--s-8);
  }

  .hero--media .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    max-width: none;
  }

  .page-header {
    min-height: 240px;
    padding: var(--s-12) 0;
  }

  .page-header h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
    max-width: none;
  }

  .section {
    padding: var(--s-12) 0;
  }

  .trust-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }

  .trust-item {
    border-left: 0;
  }

  .trust-item:nth-child(odd) {
    text-align: left;
  }

  .card-grid,
  .card-grid-4,
  .value-grid,
  .steps,
  .tiers,
  .field-row,
  .checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-band {
    padding: var(--s-8) var(--s-6);
    gap: var(--s-6);
  }

  .panel {
    padding: var(--s-6);
  }

  .newsletter {
    padding: var(--s-6);
  }

  .hero-title {
    letter-spacing: -0.02em;
  }

  .pub-brand span {
    font-size: var(--t-sm);
  }

  .pub-header-tools .label-when-wide {
    display: none;
  }

  /* Three account controls plus the menu button do not fit beside the wordmark
     on a 375px screen. The signed-in controls are in the drawer, so the header
     keeps only the theme toggle and the menu button once a session exists. */
  .pub-header-tools > [data-when-signed-in] {
    display: none;
  }

  .pub-header-tools {
    min-width: 0;
    gap: 6px;
  }

  .pub-header-tools .btn {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* Below about 560px the wordmark and four controls do not fit on one line, and
   the menu button ended up half outside the header - reachable, but only after
   the page scrolled sideways to show it. The create-account link is in the
   drawer, so the header keeps sign-in, the theme toggle and the menu button. */
@media (max-width: 560px) {
  .pub-header-tools > .btn-primary[data-when-signed-out] {
    display: none;
  }

  .pub-brand {
    gap: 8px;
  }

  .pub-brand img {
    height: 30px;
  }

  .pub-brand span {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
}