/* ============================================================
   Gigsup - joingigsup.com marketing site
   Brand kit: deep green #1C3524 · forest #396C48 · lime #CFFF81
   pink #FFB9B8 · paper #FAFBF7 · muted #6B7A6E · black #0B0B0B
   ============================================================ */

/* ---------- local brand fonts ---------- */
@font-face {
  font-family: 'Agrandir Grand';
  src: url('/marketing/fonts/AgrandirGrand.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TAN Nimbus';
  src: url('/marketing/fonts/TanNimbus.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('/marketing/fonts/DMSerifDisplay.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/marketing/fonts/ClashKit.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/marketing/fonts/MontKit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pinyon Script';
  src: url('/marketing/fonts/PinyonScript.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #CFFF81;
  --forest: #396C48;
  --forest-dark: #2A5237;
  --pink: #FFB9B8;
  --ink: #1C3524;
  --black: #0B0B0B;
  --cream: #F1F6EC;
  --paper: #FAFBF7;
  --muted: #6B7A6E;
  --border: #E3E7DE;

  /* --- surfaces. The marketing site runs dark; the student portal keeps
     its creamy paper (app.css owns those tokens separately). --- */
  --surface:    #14251B;
  --surface-2:  #182B20;
  --card:       #1E3327;
  --invert:     #0D1913;
  --text:       #EFF4EC;
  --text-muted: #9FB3A5;
  --line:       rgba(207, 255, 129, 0.14);
  --on-accent:  #1C3524;   /* text that sits on lime or pink */
  --accent-text: #CFFF81;  /* forest reads as an accent on cream, lime on dark */

  --font-display: 'Agrandir Grand', 'Clash Display', 'Montserrat', sans-serif;
  --font-script: 'TAN Nimbus', 'Clash Display', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-head: 'Clash Display', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --r-lg: 6px;
  --r-2xl: 8px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.42);

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Agrandir Grand ALL CAPS - the loudest voice: hero H1 + section titles */
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.1;
}

img { max-width: 100%; }
a { color: inherit; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--s-3);
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-text);
  margin-bottom: var(--s-2);
}
.eyebrow-lime { color: var(--lime); }

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

.section-head { text-align: center; max-width: 680px; margin: 0 auto var(--s-6); }
.section-head h2 { font-size: clamp(24px, 3.4vw, 36px); }
.section-sub { color: var(--text-muted); margin-top: var(--s-2); font-size: 17px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover {  box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* lime only pops on dark - use .btn-lime on dark surfaces only */
.btn-lime { background: var(--lime); color: var(--on-accent); }
.btn-lime:hover { background: #dcffa1; }

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

.btn-outline { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.btn-outline:hover { background: var(--forest); color: #fff; }

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-ghost {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  transition: background 0.15s ease;
}
.btn-ghost:hover { background: rgba(57, 108, 72, 0.08); }
.btn-ghost { white-space: nowrap; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 28, 21, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--s-3);
  height: 76px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* wordmark - TAN Nimbus lowercase, with ™ */
.wordmark {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 21px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .tm {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.42em;
  margin-left: 3px;
  margin-top: 1px;
  opacity: 0.7;
}
.wordmark-light { color: var(--lime); }

.nav-links {
  display: flex;
  gap: 2px;
  margin: 0 auto;
}
.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 9px 8px;
  border-radius: var(--r-pill);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(57, 108, 72, 0.08); color: var(--accent-text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}
.btn-nav { padding: 11px 22px; }

/* log-in dropdown */
.login-wrap { position: relative; }
.chev { font-size: 11px; margin-left: 2px; }
.login-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.login-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.12s ease;
}
.login-menu a:hover { background: rgba(207,255,129,.12); color: var(--lime); }
.menu-ico { font-size: 16px; }

/* burger (mobile) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--invert);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(207, 255, 129, 0.16), transparent 62%),
    radial-gradient(700px 420px at -12% 108%, rgba(255, 185, 184, 0.12), transparent 60%),
    var(--surface);
  padding: var(--s-7) 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-6);
  align-items: center;
}

/* H1 - Agrandir Grand, ALL CAPS */
.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 54px);
  letter-spacing: 0.01em;
  line-height: 1.04;
}
/* TAN Nimbus lowercase - the one warm decorative accent */
.hero-script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(16px, 2.2vw, 24px);
  color: var(--accent-text);
  margin-top: 14px;
  line-height: 1.4;
}
.hero-sub {
  margin-top: var(--s-3);
  font-size: 18px;
  color: var(--text-muted);
  max-width: 520px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* PLG pain-data stat chips */
.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-3);
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--invert);
  color: rgba(255, 255, 255, 0.86);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--shadow-sm);
}
.stat-chip b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.press-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-5);
}
.press-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.press-sep {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* ---------- logomarks - stylized HTML/CSS wordmarks (no trademark artwork) ---------- */
.lm {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
  transition: color 0.18s ease;
}
.lm:hover { color: var(--text); }
.lm b, .lm i, .lm em, .lm span, .lm small { line-height: 1; }

/* BC Business - DM Serif Display italic press masthead */
.lm-bcb {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.lm-bcb em { font-style: italic; font-weight: 400; margin-left: 1px; }
.lm-sm { font-size: 18px; }

/* SupeTank - spark glyph + stacked finalist mark */
.lm-supetank { gap: 9px; }
.st-spark {
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.st-stack { display: flex; flex-direction: column; gap: 4px; }
.st-stack b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.st-stack small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* --- hero visual: mock chat card --- */
.hero-visual { position: relative; min-height: 420px; }
.hero-blob {
  position: absolute;
  inset: 6% -4% 2% 4%;
  background: linear-gradient(135deg, var(--forest) 0%, var(--ink) 100%);
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  transform: rotate(-4deg);
}
.hero-blob::after {
  content: '';
  position: absolute;
  right: -14px;
  top: -18px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0.9;
}

.chat-card {
  position: relative;
  z-index: 2;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  max-width: 420px;
  margin: var(--s-4) auto;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--lime);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 1.2; }
.chat-status {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #57c26e;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 6px;
}

.chat-body { padding-top: var(--s-2); display: flex; flex-direction: column; gap: 12px; }
.bubble {
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 88%;
}
.bubble-agent {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.bubble-student {
  background: var(--forest);
  color: #fff;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}

/* voice waveform */
.voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(207, 255, 129, 0.35);
  border: 1px solid rgba(57, 108, 72, 0.18);
  border-radius: var(--r-pill);
  margin-top: 2px;
}
.voice-mic { font-size: 15px; }
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  flex: 1;
}
.waveform span {
  display: block;
  width: 4px;
  height: 30%;
  border-radius: 2px;
  background: var(--forest);
  animation: wave 1.1s ease-in-out infinite;
}
.waveform span:nth-child(2)  { animation-delay: 0.10s; }
.waveform span:nth-child(3)  { animation-delay: 0.20s; }
.waveform span:nth-child(4)  { animation-delay: 0.30s; }
.waveform span:nth-child(5)  { animation-delay: 0.40s; }
.waveform span:nth-child(6)  { animation-delay: 0.50s; }
.waveform span:nth-child(7)  { animation-delay: 0.60s; }
.waveform span:nth-child(8)  { animation-delay: 0.70s; }
.waveform span:nth-child(9)  { animation-delay: 0.80s; }
.waveform span:nth-child(10) { animation-delay: 0.90s; }
.waveform span:nth-child(11) { animation-delay: 1.00s; }
.waveform span:nth-child(12) { animation-delay: 1.10s; }
@keyframes wave {
  0%, 100% { height: 25%; }
  50% { height: 95%; }
}
.voice-hint { font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }

/* floating chips - dark chip so the lime pops */
.chat-chip {
  position: absolute;
  z-index: 3;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  color: var(--accent-text);
}
.chip-float-1 { top: -16px; right: -14px; background: var(--invert); border-color: transparent; color: var(--lime); }
.chip-float-2 { bottom: -14px; left: -10px; }

/* "Gigi + your agent team" cluster in the chat header */
.chat-id { min-width: 0; }
.agent-cluster { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.ac-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1.5px solid var(--surface);
  box-shadow: var(--shadow-sm);
  margin-left: -8px;
}
.ac-dot:first-child { margin-left: 0; }
.ac-more {
  margin-left: -8px;
  min-width: 26px; height: 26px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-head);
  background: var(--forest); color: var(--lime);
  border: 1.5px solid var(--surface);
}

/* ============================================================
   CAREER MARQUEE
   ============================================================ */
.marquee {
  background: var(--invert);
  overflow: hidden;
  padding: 15px 0;
  border-top: 1px solid rgba(207, 255, 129, 0.2);
  border-bottom: 1px solid rgba(207, 255, 129, 0.2);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 12px;
}
.marquee-group span {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--lime);
  letter-spacing: 0.02em;
}
.marquee-group i {
  font-style: normal;
  color: rgba(255, 185, 184, 0.75);
  margin: 0 14px;
  font-size: 13px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   SCROLL REVEAL (classes applied by JS - no-JS stays visible)
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rv-delay, 0s);
}
.rv.in { opacity: 1; transform: none; }

/* feature-card tilt (JS-driven) */
.feature-card.tilt {
  will-change: transform;
  transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--tl, 0px));
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* ============================================================
   HOW IT WORKS / CARDS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  
  box-shadow: var(--shadow-md);
  border-color: rgba(57, 108, 72, 0.3);
}

.step-card { position: relative; padding-top: var(--s-5); }
.step-num {
  position: absolute;
  top: -22px;
  left: var(--s-4);
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--invert);
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.step-card h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  margin-bottom: var(--s-1);
}
.step-card p { color: var(--text-muted); font-size: 15px; }
.grid-3 .step-card { margin-top: 22px; }

/* ---------- platform features ---------- */
.feature-card { padding: var(--s-3); }
.feature-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: var(--s-2);
}
.feature-card h3 { font-size: 17px; margin-bottom: 6px; }
.feature-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }

/* ============================================================
   PATHWAYS (dark)
   ============================================================ */
.section-dark {
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(207, 255, 129, 0.12), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(255, 185, 184, 0.1), transparent 60%),
    var(--forest-dark);
  color: #fff;
}
.section-dark .section-sub { color: rgba(255, 255, 255, 0.72); }

.pathway-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
}
.pathway-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-2xl);
  padding: var(--s-3);
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.pathway-chip:hover {
  background: rgba(207, 255, 129, 0.1);
  border-color: rgba(207, 255, 129, 0.5);
  
}
.pathway-ico { font-size: 26px; display: block; margin-bottom: var(--s-2); }
.pathway-chip h3 { font-size: 17px; margin-bottom: 6px; color: var(--lime); }
.pathway-chip p { font-size: 13px; color: rgba(255, 255, 255, 0.75); line-height: 1.55; }

.data-line {
  margin-top: var(--s-5);
  text-align: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
}
.data-line strong { color: var(--lime); font-weight: 700; }

/* ============================================================
   FOR SCHOOLS - three CTAs
   ============================================================ */
.school-cta-card { display: flex; flex-direction: column; align-items: flex-start; }
.school-cta-card h3 { font-size: 21px; margin-bottom: var(--s-1); }
.school-cta-card .cta-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-1);
}
.school-cta-card p { color: var(--text-muted); font-size: 14.5px; margin-bottom: var(--s-3); flex: 1; }

.portal-links {
  text-align: center;
  margin-top: var(--s-4);
  font-size: 13.5px;
  color: var(--text-muted);
}
.portal-links a { font-weight: 700; color: var(--accent-text); }

/* ============================================================
   MODAL (school forms)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(11, 11, 11, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}
.modal {
  position: relative;
  background: var(--card);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s-4);
}
.modal h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.modal-blurb { color: var(--text-muted); font-size: 14.5px; margin-bottom: var(--s-3); }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

/* ---------- form fields (shared) ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: 5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(57, 108, 72, 0.15);
}

.form-error {
  color: #B4322A;
  font-size: 13.5px;
  font-weight: 600;
  margin: 6px 0 10px;
}

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--forest);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.form-success .ok-ico {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}

/* ============================================================
   EMPLOYERS (dark ink section)
   ============================================================ */
.section-employers {
  background:
    radial-gradient(760px 420px at 92% -10%, rgba(207, 255, 129, 0.14), transparent 62%),
    radial-gradient(560px 380px at -8% 108%, rgba(255, 185, 184, 0.12), transparent 60%),
    var(--ink);
  color: #fff;
}
.section-employers .section-sub { color: rgba(255, 255, 255, 0.75); }

.employer-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-5);
  align-items: start;
}
.employer-pitch h2 { text-align: left; }
.employer-pitch p { color: rgba(255, 255, 255, 0.78); font-size: 15.5px; margin-top: var(--s-2); max-width: 440px; }
.employer-pitch strong { color: var(--lime); }

.price-flag {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-3);
  background: rgba(207, 255, 129, 0.1);
  border: 1px solid rgba(207, 255, 129, 0.45);
  border-radius: var(--r-lg);
  padding: 14px 18px;
}
.price-flag .pf-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  color: var(--lime);
  line-height: 1;
}
.price-flag .pf-line { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

.employer-points { list-style: none; margin-top: var(--s-3); display: flex; flex-direction: column; gap: 10px; }
.employer-points li {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
  padding-left: 26px;
  position: relative;
}
.employer-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--lime);
}

.employer-card {
  background: var(--card);
  color: var(--text);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-4);
}
.employer-card h3 { font-size: 19px; margin-bottom: var(--s-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* school picker */
.school-pick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.school-pick-head > span {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.pick-counter {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}
.pick-counter.full { background: var(--invert); color: var(--lime); border-color: var(--text); }

.school-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.school-box {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.school-box:hover { border-color: var(--accent-text); }
.school-box input { accent-color: var(--accent-text); width: 15px; height: 15px; flex: none; }
.school-box.checked { background: var(--forest); border-color: var(--accent-text); color: #fff; }
.school-box.maxed { opacity: 0.42; cursor: not-allowed; }

.school-box-all {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--invert);
  color: var(--lime);
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.school-box-all input { accent-color: var(--lime); width: 15px; height: 15px; flex: none; }

.employer-price-line {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 12px;
}

/* LIVE badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lime);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.live-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.employer-success { flex-direction: column; align-items: flex-start; }
.employer-success .es-head { display: flex; align-items: center; gap: 12px; }

/* ============================================================
   COACHING
   ============================================================ */
.coaching-wrap { max-width: 940px; }
.coaching-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  background:
    radial-gradient(420px 260px at 108% -20%, rgba(255, 185, 184, 0.22), transparent 66%),
    var(--card);
}
.coaching-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.coaching-copy h2 { font-size: clamp(20px, 2.8vw, 30px); margin-bottom: var(--s-2); }
.coaching-copy p { color: var(--text-muted); max-width: 460px; margin-bottom: var(--s-4); }
.coaching-copy strong { color: var(--text); }

.coach-circle {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--invert);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 6px solid var(--card);
  box-shadow: var(--shadow-md);
  transform: rotate(6deg);
}
.coach-price {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}
.coach-note {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pink);
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid { align-items: stretch; }
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card h3 { font-size: 22px; }
.price { margin: var(--s-2) 0 4px; display: flex; align-items: baseline; gap: 4px; }
.price-num { font-family: var(--font-head); font-size: 46px; font-weight: 700; line-height: 1; }
.price-per { color: var(--text-muted); font-weight: 600; font-size: 15px; }
.price-trial { font-size: 13px; font-weight: 700; color: var(--accent-text); margin-bottom: 4px; }

.price-list {
  list-style: none;
  margin: var(--s-3) 0 var(--s-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-list li {
  font-size: 14.5px;
  color: var(--text);
  padding-left: 26px;
  position: relative;
}
.price-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent-text);
}

.price-featured {
  border: 2px solid var(--forest);
  box-shadow: var(--shadow-md);
}
.price-featured:hover { border-color: var(--accent-text); }
.pop-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--invert);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* comparison table */
.compare-wrap {
  margin-top: var(--s-6);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare th, .compare td { padding: 14px 20px; text-align: center; }
.compare thead th {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid var(--line);
  background: var(--surface-2);
}
.compare thead th:first-child { border-top-left-radius: var(--r-2xl); }
.compare thead th:last-child { border-top-right-radius: var(--r-2xl); }
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
}
.compare tbody tr:not(:last-child) th,
.compare tbody tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
.compare tbody td { color: var(--accent-text); font-weight: 700; }
.compare .col-featured { background: rgba(207, 255, 129, 0.22); }
.compare tbody tr:hover th,
.compare tbody tr:hover td { background: rgba(57, 108, 72, 0.04); }
.compare tbody tr:hover .col-featured { background: rgba(207, 255, 129, 0.34); }

.pricing-trust {
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* ============================================================
   COMMUNITY STRIP - lime band, pull-quote serif
   ============================================================ */
.community-strip {
  background: var(--lime);
  padding: var(--s-5) 0;
  text-align: center;
}
.community-strip p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 400;
  color: var(--on-accent);
  max-width: 760px;
  margin: 0 auto;
}
.community-num {
  font-weight: 700;
  font-size: 1.3em;
  padding: 0 4px;
  font-style: normal;
  font-family: var(--font-head);
  color: var(--forest-dark);
}

/* ============================================================
   GIGSUP GRANTS - 5% commitment
   ============================================================ */
.grants { padding: var(--s-6) 0 var(--s-7); }
.grants-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--s-6);
  align-items: center;
}
.grants-copy h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  max-width: 15ch;
}
.grants-lede {
  font-size: 17px;
  color: var(--text-muted);
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
  max-width: 56ch;
}
.grants-lede strong { color: var(--text); font-weight: 700; }

.grants-points {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  max-width: 56ch;
}
.grants-points li { display: flex; align-items: flex-start; gap: 14px; }
.gp-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 5px;
  background: var(--lime);
  border: 1px solid var(--line);
}
.grants-points b {
  display: block;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.grants-points p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

.grants-note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  max-width: 56ch;
}
.grants-note strong { color: var(--accent-text); font-weight: 700; }

.grants-visual { display: flex; justify-content: center; }
.grant-ring {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--forest) 0%, var(--ink) 100%);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  padding: 26px;
}
.ring-svg { width: 100%; height: 100%; display: block; }
.ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 12;
}
.ring-arc {
  fill: none;
  stroke: var(--lime);
  stroke-width: 12;
  stroke-linecap: round;
  /* r=58 → circumference ≈ 364.4; 5% ≈ 18.2 */
  stroke-dasharray: 18.2 346.2;
}
.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 18%;
}
.ring-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 58px);
  line-height: 1;
  color: var(--lime);
}
.ring-cap {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   SUPPORTED BY
   ============================================================ */
.supported { padding: var(--s-6) 0; text-align: center; }
.supported-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
/* monochrome logo wall - each mark its own typographic identity, one shared ink */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 60px;
  row-gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}
.logo-wall .lm { height: 32px; }
.wall-break { flex-basis: 100%; height: 0; }

/* Accelerate Okanagan - chevron + display lowercase + tracked caps */
.g-chev {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 10px;
}
.lm-ao b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.lm-ao .ao-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-left: 10px;
}

/* Spring - light display lowercase with a rising seed dot */
.lm-spring {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 0.01em;
  align-items: flex-start;
}
.g-seed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin: 1px 0 0 4px;
}

/* Movement 51 - tracked caps + bold numeral */
.lm-m51 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.lm-m51 b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0;
  margin-left: 6px;
  
}

/* NVIDIA Inception - bold geometric sans + light companion word */
.lm-nvi b {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
}
.lm-nvi span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  margin-left: 8px;
}

/* Virtual Trade Accelerator - stacked badge with hairline rule */
.lm-vta { flex-direction: column; align-items: center; gap: 5px; }
.vta-top {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vta-bot {
  align-self: stretch;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  border-top: 1px solid currentColor;
  padding-top: 4px;
}

/* NRC · IRAP - government-serif feel */
.lm-nrc {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.lm-nrc b { font-weight: 700; }
.lm-nrc .g-mid { font-style: normal; margin: 0 7px; opacity: 0.55; }

/* Mitacs - heavy lowercase sans with triangle accent */
.lm-mitacs {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.g-tri {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-bottom: 10px solid currentColor;
  margin-right: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--invert);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--s-6) 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: center;
}
.footer-brand p { font-size: 13px; margin-top: 6px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}
.footer-nav a {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}
.footer-nav a:hover { color: var(--lime); }
.footer-legal { text-align: right; font-size: 13px; }
.footer-legal a { color: rgba(255, 255, 255, 0.75); transition: color 0.15s ease; }
.footer-legal a:hover { color: var(--lime); }

/* ============================================================
   REDUCED MOTION - kill all dynamism
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .waveform span { animation: none; height: 55%; }
  .marquee-track { animation: none; }
  .live-badge::before { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .feature-card.tilt { transform: none; }
  .btn, .card, .pathway-chip, .agent-card { transition: none; }
}

/* The app shell has global heading/paragraph colors for portal pages. Keep
   generic marketing prose and card headings on the prototype's dark surface. */
.marketing-page {
  font-family: var(--font-body);
}
.marketing-page p {
  font-family: var(--font-body);
}
.marketing-page h1,
.marketing-page h2,
.marketing-page h3,
.marketing-page h4 {
  font-family: var(--font-head) !important;
  color: var(--text);
  letter-spacing: -0.01em;
}
.marketing-page .page-hero h1 {
  font-family: var(--font-display) !important;
}
.marketing-page .agent-card .agent-nim {
  font-family: var(--font-script) !important;
  color: var(--text) !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}
.marketing-page .agent-lead .agent-nim {
  color: #fff !important;
}
.marketing-page .ex-lab h4 {
  font-family: var(--font-display) !important;
}
.marketing-page .ws-h {
  font-family: var(--font-serif) !important;
}
.marketing-page .prose h2,
.marketing-page .info-card h3,
.marketing-page .ws-h { color: var(--text) !important; }
.marketing-page .ws-dark .ws-h { color: #fff !important; }
.marketing-page .prose p:not(.sig):not(.art-meta) { color: var(--text) !important; }

/* The application has a legacy global `.nav` flex shell and a wider
   `.container`. Restore the standalone prototype's full-width header and
   consistent 1140px inner rail on every marketing subpage. */
.marketing-page > .nav {
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
}
.marketing-page .nav-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--s-3);
}
.marketing-page .container {
  max-width: 1140px;
  padding-right: var(--s-3);
  padding-left: var(--s-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .pathway-chips { grid-template-columns: repeat(3, 1fr); }

  /* collapse nav links behind burger (8 links no longer fit) */
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    padding: var(--s-2) var(--s-3) var(--s-3);
    margin: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 12px; font-size: 16px; border-radius: 5px; }
}

@media (max-width: 900px) {
  .section { padding: var(--s-6) 0; }
  .hero { padding: var(--s-5) 0 var(--s-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-visual { min-height: 0; margin: 0 var(--s-2); }
  .chat-card { margin: var(--s-3) auto; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 .step-card { margin-top: 26px; }
  .grid-2 { grid-template-columns: 1fr; }
  .employer-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .grants-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .grants-copy h2 { max-width: none; }
  .grants-visual { order: -1; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-legal { text-align: center; }
}

@media (max-width: 680px) {
  .wall-break { display: none; }
  .logo-wall { column-gap: 36px; row-gap: 26px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pathway-chips { grid-template-columns: repeat(2, 1fr); }
  .coaching-card { grid-template-columns: 1fr; padding: var(--s-4); }
  .coaching-badge { justify-self: center; }
  .field-row { grid-template-columns: 1fr; }
  .grant-ring { width: min(240px, 62vw); padding: 20px; }
}

@media (max-width: 430px) {
  .container { padding: 0 var(--s-2); }
  .nav-inner { padding: 0 var(--s-2); gap: var(--s-2); }
  .btn-nav { padding: 10px 16px; font-size: 14px; }
  .login-toggle { padding: 10px 10px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-script { font-size: 16px; }
  .hero-ctas .btn { width: 100%; }
  .stat-chip { width: 100%; justify-content: flex-start; }
  .grid-4 { grid-template-columns: 1fr; }
  .pathway-chips { grid-template-columns: 1fr; }
  .chat-chip { display: none; }
  .hero-blob { inset: 4% 0 0 0; }
  .logo-wall { column-gap: 28px; row-gap: 24px; }
  .press-strip { gap: 10px 14px; }
  .compare th, .compare td { padding: 12px 12px; }
  .school-grid { grid-template-columns: 1fr; }
  .employer-card { padding: var(--s-3); }
  .modal { padding: var(--s-3); }
  .wordmark { font-size: 17px; }
}

/* ================= pricing v2: annual line, schools band, coaching note ================= */
.price-alt { font-size: 13px; font-weight: 600; color: var(--accent-text); margin-bottom: 10px; }
.price-alt strong { font-weight: 800; }

.school-band {
  display: flex; gap: 32px; align-items: center; margin-top: 26px; padding: 30px 34px;
  background: var(--forest-dark, #2A5237); border: 0;
}
.school-band .eyebrow { color: var(--lime, #CFFF81); }
.school-band h3 { color: #fff; font-size: 32px; margin-bottom: 8px; }
.school-per { font-size: 15px; font-weight: 600; color: var(--lime, #CFFF81); }
.school-band p { color: rgba(255,255,255,0.88); font-size: 14.5px; line-height: 1.6; }
.school-note { font-weight: 700; color: var(--lime, #CFFF81) !important; margin-top: 8px; }
.school-copy { flex: 1.6; }
.school-cta { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.school-pilot {
  background: rgba(207,255,129,0.14); border: 1px solid rgba(207,255,129,0.4); border-radius: 5px;
  padding: 12px 16px; color: #fff; font-size: 14px; line-height: 1.5;
}
.school-pilot strong { color: var(--lime, #CFFF81); }

.pricing-coach-note { text-align: center; margin-top: 22px; font-size: 14.5px; color: var(--text-muted); }
.pricing-coach-note a { font-weight: 700; }

@media (max-width: 860px) {
  .school-band { flex-direction: column; align-items: stretch; gap: 18px; }
}

/* ============================================================
   HERO - animated "morning walk to school" scene
   (pure CSS/SVG placeholder; swap .hero-scene for <video> later)
   ============================================================ */
.hero { padding-bottom: 232px; }
.hero .container { position: relative; z-index: 2; }

.hero-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 224px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
/* future real footage drops straight in */
.hero-scene-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* soft morning sun near the horizon */
.scene-sun {
  position: absolute;
  left: 12%; top: 26px;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF4C8, #FFE39A 60%, rgba(255,227,154,0) 72%);
  box-shadow: 0 0 46px 22px rgba(255, 227, 154, 0.55);
  z-index: 1;
  animation: sun-glow 6s ease-in-out infinite;
}
@keyframes sun-glow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* drifting clouds */
.scene-clouds { position: absolute; inset: 0; z-index: 2; }
.cloud {
  position: absolute;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(0.4px);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; bottom: 0;
  border-radius: 999px; background: inherit;
}
.cloud-1 { top: 24px; width: 70px; animation: cloud-drift 48s linear infinite; }
.cloud-1::before { left: 12px; width: 34px; height: 24px; }
.cloud-1::after  { left: 34px; width: 26px; height: 20px; }
.cloud-2 { top: 54px; width: 54px; opacity: .8; animation: cloud-drift 66s linear infinite; animation-delay: -20s; }
.cloud-2::before { left: 10px; width: 26px; height: 18px; }
.cloud-2::after  { left: 26px; width: 20px; height: 15px; }
.cloud-3 { top: 12px; width: 44px; opacity: .7; animation: cloud-drift 82s linear infinite; animation-delay: -50s; }
.cloud-3::before { left: 8px; width: 22px; height: 15px; }
@keyframes cloud-drift {
  from { transform: translateX(-90px); }
  to   { transform: translateX(102vw); }
}

/* scrolling skyline silhouette (seamless doubled track) */
.scene-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 34px;
  height: 116px;
  overflow: hidden;
  z-index: 3;
}
.skyline-track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: skyline-scroll 60s linear infinite;
}
.skyline-svg { width: 50%; height: 100%; flex: none; }
.sky-b { fill: #86AE93; }
.sky-flag { fill: var(--pink); }
.sky-win { fill: var(--lime); opacity: 0.85; }
@keyframes skyline-scroll { to { transform: translateX(-50%); } }

/* ground + sidewalk */
.scene-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px; z-index: 4;
  background: linear-gradient(#E9F3DE, #D9EBCB);
}
.scene-sidewalk {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30px; z-index: 5;
  background: linear-gradient(#ECEAE2, #E0DDD3);
  border-top: 2px solid rgba(28, 53, 36, 0.14);
}

/* walking student figures */
.walkers { position: absolute; inset: 0; z-index: 6; }
.walker {
  position: absolute;
  left: 0; bottom: var(--base, 12px);
  width: calc(84px * var(--scale, 1));
  animation: walk-across var(--dur, 16s) linear var(--delay, 0s) infinite;
}
.walker .figure { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes walk-across {
  from { transform: translateX(-14vw); }
  to   { transform: translateX(112vw); }
}

.figure .p-body { fill: var(--fig-body, var(--forest)); }
.figure .p-pack { fill: var(--fig-pack, var(--lime)); }
.figure .p-head { fill: #F3D7BC; }
.figure .p-hair { fill: var(--text); }
.figure .leg rect { fill: var(--text); }
.figure .arm rect { fill: var(--fig-body, var(--forest)); }

.fig-bob { animation: fig-bob 0.26s ease-in-out infinite; }
@keyframes fig-bob { 0%,100% { transform: translateY(0); } 50% {  } }

.walker .leg, .walker .arm { transform-box: fill-box; transform-origin: 50% 6%; }
.walker .leg-f { animation: swing-a 0.52s ease-in-out infinite; }
.walker .leg-b { animation: swing-b 0.52s ease-in-out infinite; }
.walker .arm   { animation: swing-b 0.52s ease-in-out infinite; }
@keyframes swing-a { 0%,100% { transform: rotate(24deg); } 50% { transform: rotate(-22deg); } }
@keyframes swing-b { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(24deg); } }

/* Gigi waving from the corner of the scene */
.scene-gigi {
  position: absolute;
  right: 3%; bottom: 22px;
  z-index: 7;
  width: 104px;
}
.scene-gigi .gigi { display: block; filter: drop-shadow(0 8px 14px rgba(28,53,36,0.16)); }

/* Gigi inside the chat-card header (replaces the plain "G") */
.chat-avatar { background: var(--surface-2); overflow: hidden; }
.chat-avatar .gigi { display: block; width: 40px; height: auto; margin-top: 2px; }

/* ============================================================
   THREE AUDIENCES
   ============================================================ */
.aud-head { position: relative; }
.aud-head-gigi {
  position: absolute;
  right: -8px; top: 50%;
  transform: translateY(-50%);
  width: 58px;
  line-height: 0;
}
.aud-head-gigi .gigi { display: block; }

.audience-grid { align-items: stretch; }
.audience-card {
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--line);
  position: relative;
  overflow: hidden;
}
.audience-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 200px at 100% 0%, var(--aud-wash, transparent), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.audience-card > * { position: relative; }
.audience-card:hover { border-color: var(--aud-accent, var(--forest)); }

.aud-lime   { --aud-accent: var(--forest);      --aud-wash: rgba(207, 255, 129, 0.5); }
.aud-lime   { border-top-color: var(--lime); }
.aud-pink   { --aud-accent: var(--pink);        --aud-wash: rgba(255, 185, 184, 0.42); }
.aud-pink   { border-top-color: var(--pink); }
.aud-forest { --aud-accent: var(--forest-dark); --aud-wash: rgba(57, 108, 72, 0.20); }
.aud-forest { border-top-color: var(--accent-text); }

.aud-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  background: var(--aud-wash, var(--surface-2));
  border: 1px solid rgba(28, 53, 36, 0.1);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-bottom: var(--s-2);
}
.aud-pain {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: var(--s-3);
}
.aud-list {
  list-style: none;
  margin: 0 0 var(--s-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aud-list li {
  font-size: 14px;
  color: var(--text-muted);
  padding-left: 24px;
  position: relative;
  line-height: 1.45;
}
.aud-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--aud-accent, var(--forest));
  box-shadow: inset 0 0 0 3px var(--card);
}

/* ============================================================
   TEAM OF AGENTS
   ============================================================ */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  align-items: stretch;
}

.agent-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.agent-card:hover {
  
  box-shadow: var(--shadow-md);
  border-color: rgba(57, 108, 72, 0.3);
}

.agent-ico {
  width: 46px; height: 46px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 14px;
  border: 1px solid rgba(28, 53, 36, 0.08);
}
.ico-lime   { background: rgba(207, 255, 129, 0.55); }
.ico-forest { background: rgba(57, 108, 72, 0.14); }
.ico-pink   { background: rgba(255, 185, 184, 0.45); }

.agent-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.05;
  font-size: 22px;
  margin-bottom: 3px;
}
.agent-role {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: 11px;
}
.agent-line {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Gigi - the lead / orchestrator card, spanning the row and accented */
.agent-lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  background: linear-gradient(140deg, var(--forest) 0%, var(--ink) 100%);
  border-color: transparent;
  color: #fff;
  overflow: hidden;
}
.agent-lead:hover { border-color: transparent; }
.agent-lead-mascot { flex-shrink: 0; width: 118px; line-height: 0; }
.agent-lead-mascot .gigi { display: block; width: 118px; height: auto; }
.agent-lead-body { display: flex; flex-direction: column; }
.agent-lead .agent-role { color: var(--lime); margin-bottom: 6px; }
.agent-lead .agent-name { color: #fff; font-size: clamp(28px, 4vw, 36px); }
.agent-lead .agent-line { color: rgba(255, 255, 255, 0.86); font-size: 15px; max-width: 62ch; }

.agents-foot {
  text-align: center;
  margin-top: var(--s-5);
  font-size: 15px;
  color: var(--text-muted);
}
.agents-foot strong { color: var(--accent-text); font-weight: 700; }

@media (max-width: 1020px) {
  .agent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .agent-lead { flex-direction: column; text-align: center; align-items: center; }
  .agent-lead-body { align-items: center; }
}
@media (max-width: 430px) {
  .agent-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION - freeze the scene
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cloud, .skyline-track, .scene-sun,
  .fig-bob, .walker .leg, .walker .arm { animation: none !important; }
  .walker { animation: none !important; }
  .walker.w1 { transform: translateX(10vw); }
  .walker.w2 { transform: translateX(30vw); }
  .walker.w3 { transform: translateX(50vw); }
  .walker.w4 { transform: translateX(68vw); }
  .walker.w5 { transform: translateX(86vw); }
}

/* ============================================================
   RESPONSIVE - scene scales/clips on smaller screens
   ============================================================ */
@media (max-width: 900px) {
  .hero { padding-bottom: 188px; }
  .hero-scene { height: 180px; }
  .scene-skyline { height: 92px; bottom: 30px; }
  .scene-ground { height: 50px; }
  .scene-sidewalk { height: 26px; }
  .walker.w1 { display: none; }         /* fewer figures on tablet */
  .scene-gigi { width: 84px; bottom: 18px; }
  .aud-head-gigi { display: none; }
}

@media (max-width: 430px) {
  .hero { padding-bottom: 150px; }
  .hero-scene { height: 144px; }
  .scene-sun { width: 46px; height: 46px; top: 14px; }
  .scene-skyline { height: 70px; bottom: 26px; }
  .scene-ground { height: 42px; }
  .scene-sidewalk { height: 22px; }
  .walker.w5 { display: none; }         /* keep it uncluttered - 2 figures */
  .walker { width: calc(72px * var(--scale, 1)); }
  .scene-gigi { width: 66px; bottom: 14px; right: 4%; }
}

/* ---- primary nav: top-level items with dropdowns ---- */
.nav-item-wrap { position: relative; }
.nav-top, .nav-top-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 9px 11px; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-top:hover, .nav-top-link:hover,
.nav-top[aria-expanded="true"] { background: rgba(57,108,72,.08); color: var(--accent-text); }
.nav-top .chev { font-size: 9px; opacity: .55; }
.nav-drop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 208px; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: var(--shadow-lg); padding: 7px;
  display: flex; flex-direction: column;
}
.nav-drop a {
  padding: 10px 13px; border-radius: 5px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.nav-drop a:hover { background: rgba(207,255,129,.12); color: var(--lime); }

@media (max-width: 1040px) {
  /* mobile: the burger panel stacks everything, dropdowns become inline groups */
  .nav-item-wrap { width: 100%; }
  .nav-top { width: 100%; justify-content: space-between; font-size: 16px; padding: 13px 12px; }
  .nav-top-link { width: 100%; font-size: 16px; padding: 13px 12px; }
  .nav-drop {
    position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: 0 0 6px 14px; padding: 2px 0;
  }
}

/* ---- logo wall: the real supporter set ---- */
.lm-acetech { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.lm-acetech b { font-weight: 800; }
.g-hex { width: 15px; height: 17px; margin-right: 7px; background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: .8; }
.lm-dmz { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.lm-dmz b { font-style: italic; }
.lm-m51 { font-family: var(--font-serif); font-size: 24px; }
.lm-m51 b { font-weight: 400; }
.lm-spring { font-family: var(--font-serif); font-size: 23px; letter-spacing: -.01em; }
.lm-webc .webc-stack { display: flex; flex-direction: column; align-items: center; line-height: .95;
  border: 1.5px solid currentColor; border-radius: 50%; padding: 9px 11px; }
.lm-webc b { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.lm-ao .ao-stack { display: flex; flex-direction: column; line-height: 1.05; }
.lm-ao .ao-stack b { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.lm-ao .ao-stack small { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .8; }

/* agent icons: lime line art on deep forest */
.agent-ico.ico-brand {
  background: linear-gradient(140deg, var(--forest) 0%, var(--ink) 100%);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-ico.ico-brand svg { width: 24px; height: 24px; }

/* ---- scale band: rolling counters + campus marquee ---- */
.scale-band { padding-bottom: 0; overflow: hidden; }
.live-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 880px; margin: 0 auto; text-align: center; }
.ls-num b {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; color: var(--on-accent);
  background: var(--lime); border-radius: 10px; padding: 2px 16px; min-width: 3.2ch;
  font-variant-numeric: tabular-nums;
}
.ls-label { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.campus-head { text-align: center; margin: 64px 0 30px; padding: 0 20px; }
.campus-chip { display: inline-block; background: var(--lime); color: var(--on-accent); font-size: 11.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 7px 16px; margin-bottom: 16px; }
.campus-head h2 { font-family: var(--font-head); font-size: clamp(26px, 3.6vw, 42px); color: var(--text); }
.campus-marquee { padding: 10px 0 56px; }
.campus-track { display: flex; gap: 14px; width: max-content; animation: campus-roll 55s linear infinite; }
.campus-marquee:hover .campus-track { animation-play-state: paused; }
@keyframes campus-roll { to { transform: translateX(-50%); } }
.campus-pill { display: inline-flex; align-items: center; gap: 10px; background: none;
  border: 0; box-shadow: none; padding: 6px 4px; color: var(--text-muted); font-size: 13px; }
.campus-pill img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; }
/* Crests come in both polarities - some black on transparent, some already
   light. A paper plate under each one is the only thing that reads for all of
   them on the dark ground. */
.campus-pill img { background: #FAFBF7; padding: 2px; border-radius: 50%; }
@media (max-width: 720px) { .live-stats { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .campus-track { animation: none; } }

/* supported-by: real org logos */
.sup-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 11.5px; letter-spacing: .04em; text-align: center; }
/* #15/#13: no plate, no tile. Screen blending melts each logo's own dark
   ground into the band; dark-mark logos get inverted first so every one of
   the eight reads as a light mark, never a white box. */
.sup-logo img { width: 46px; height: 46px; object-fit: contain; background: none; padding: 0;
  border-radius: 0; filter: grayscale(1); mix-blend-mode: screen; opacity: .92; }
.sup-logo img[src*="mitacs"], .sup-logo img[src*="/ao."],
.sup-logo img[src*="spring"], .sup-logo img[src*="nvidia"] {
  filter: grayscale(1) invert(1); }

/* brand line icons wherever emoji used to sit */
.gico { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); }
.gico svg { width: 1.15em; height: 1.15em; }
.feature-ico.gico, .pathway-ico.gico, .gp-ico.gico {
  width: 46px; height: 46px; border-radius: 12px; color: var(--lime);
  background: linear-gradient(140deg, var(--forest) 0%, var(--ink) 100%);
}
.feature-ico.gico svg, .pathway-ico.gico svg, .gp-ico.gico svg { width: 22px; height: 22px; }
.ac-dot.gico { color: var(--accent-text); }
.voice-mic.gico { color: var(--accent-text); }
.coach-bonus { background: rgba(207,255,129,.35); border: 1px solid var(--forest); border-radius: 8px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.55; margin: 12px 0 16px; }


/* ============================================================
   PATHWAYS CAROUSEL
   The five routes used to sit in a static grid at the middle of the
   page. They now run on a rail at the end of it, so the last thing a
   visitor sees is how many ways there are to do this.
   ============================================================ */
.pw-rail{overflow:hidden;padding:8px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pw-track{display:flex;gap:20px;width:max-content;padding:0 24px;
  animation:pwRun 46s linear infinite}
.pw-rail:hover .pw-track,.pw-rail:focus-within .pw-track{animation-play-state:paused}
@keyframes pwRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pw-track .pathway-chip{flex:0 0 300px;margin:0}
.pw-dots{display:flex;justify-content:center;gap:7px;margin-top:26px}
.pw-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.24);
  transition:background .3s ease,width .3s ease}
.pw-dots i.on{background:var(--lime,#CFFF81);width:22px;border-radius:99px}
@media (prefers-reduced-motion:reduce){
  .pw-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  /* the second chip set exists only to make the marquee loop seamless; in the
     static wrapped mode it reads as a redundant repeat, so it goes */
  .pw-track .pathway-chip:nth-child(n+6){display:none}
}
@media(max-width:640px){ .pw-track .pathway-chip{flex-basis:250px} }

/* the folded-in tools block inside the agents section */
.section-head-sub{margin-top:52px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12)}


/* ============================================================
   THE SCIENCE - the four shortfalls, and the architecture
   The page opened on assessment alone. The argument is broader:
   these tools start from what the institution needs.
   ============================================================ */
.why-four{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;
  margin:38px auto 0;text-align:left}
.wf{display:block;background: var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 18px 20px;text-decoration:none;color: var(--text);
  transition:border-color .25s ease,transform .25s ease}
.wf:hover{border-color: var(--accent-text);transform:translateY(-2px)}
.wf b{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.16em;
  color: var(--accent-text);margin-bottom:9px}
.wf span{display:block;font-family:var(--font-serif);font-weight:400;font-size:19px;margin-bottom:7px}
.wf em{font-style:normal;font-size:13px;line-height:1.6;color: var(--text-muted)}
@media(max-width:860px){.why-four{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-four{grid-template-columns:1fr}}

.explode{position:relative;width:100%;max-width:1180px;margin:0 auto}
.explode svg{width:100%;height:auto;display:block;overflow:visible}
/* the exploded platform, lifted from the science-isometric mockup */
.arch-band{background: var(--surface);color: var(--text);border-top:1px solid var(--line)}
.arch-band .arch-h{font-family:var(--font-serif);font-weight:400;font-size:28px;margin:10px 0 8px;color: var(--text)}
.arch-band .arch-sub{max-width:620px;color: var(--text-muted);font-size:15px;line-height:1.65;margin-bottom:6px}
.explode{position: relative; width: 100%; max-width: 1180px; margin: 0 auto;}
.explode svg{width: 100%; height: auto; display: block; overflow: visible;}
/* per review: the payload that travels up the stack is a CIRCLE and it
   flashes - in the mockup it was a square with a static glow */
.rise{position:absolute; left:50%; top:80.2%; width:15px; height:15px; margin:-7px 0 0 -7px;
  background:#CFFF81; border:1px solid #396C48; border-radius:50%;
  pointer-events:none; z-index:4;
  box-shadow:0 0 18px rgba(207,255,129,.9);
  animation:riseFlash 1s ease-in-out infinite}
@keyframes riseFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(207,255,129,.85), 0 0 18px rgba(207,255,129,.9); opacity:1}
  50%{box-shadow:0 0 0 10px rgba(207,255,129,0), 0 0 26px rgba(207,255,129,1); opacity:.72}
}
.pl-top{fill: #FFFFFF; stroke: #1C3524; stroke-width: 1.3;}
.pl-left{fill: #B7E86A;}
.pl-right{fill: #CFFF81;}
.pl-model .pl-top{fill: #EDF1EA; stroke: #A9B8AC;}
.pl-model .pl-left{fill: #BAC7BC;}
.plane{opacity: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.34,1.25,.64,1);}
.explode.in .plane{animation: planeIn .95s cubic-bezier(.19,1,.22,1) forwards;}
.explode.in .plane:nth-of-type(1){animation-delay: .1s;}
.explode.in .plane:nth-of-type(2){animation-delay: .3s;}
.explode.in .plane:nth-of-type(3){animation-delay: .5s;}
.explode.in .plane:nth-of-type(4){animation-delay: .7s;}
.explode.built .plane{animation: none; opacity: 1;}
.explode.walk .plane{opacity: .3;}
.explode.walk .plane.act{opacity: 1;}
.explode.walk .plane.act{transform: translate(var(--lx, -46px), var(--ly, -14px));}
.explode.walk .plane .art{transition: stroke .4s ease;}
.explode.walk .plane:not(.act) .art{stroke: #B7C4B9;}
.explode.walk .plane:not(.act) .ico-lab{fill: #A9B8AC;}
.explode.walk .plane:not(.act) .feed{stroke: #C6D2BE;}
.ex-lab{transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.2,.64,1);}
.explode.walk .ex-lab{opacity: .32;}
.explode.walk .ex-lab.act{opacity: 1;}
.explode.walk .ex-lab.act.left{transform: translateX(-10px);}
.explode.walk .ex-lab.act.right{transform: translateX(10px);}
.rise{opacity: 0;}
/* the payload rises the whole time the stack is standing, not only in the
   brief flow beat between walkthroughs (review: "the dot isn't moving up") */
.explode.built .rise{opacity:1; animation:riseUp 5.2s cubic-bezier(.45,0,.55,1) infinite, riseFlash 1s ease-in-out infinite}
.explode.walk .rise{opacity:.55}
.ex-scrub{display: flex; align-items: center; gap: 0; margin: 26px auto 0; width: min(560px, 92%);}
.ex-scrub button{flex: 1; background: none; border: 0; cursor: pointer; font: inherit; padding: 10px 0 0;
  border-top: 2px solid var(--line);
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #93A596;
  transition: color .3s ease, border-color .3s ease;}
.ex-scrub button.on{color: var(--lime); border-top-color: var(--lime);}
.ex-scrub button span{display: block; font-family: 'Agrandir Grand','Clash Display',sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; margin-top: 3px;}
.art{fill: none; stroke: #396C48; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
.art-a{stroke: #7A9C58;}
.shadow{fill: #1C3524; opacity: .08;}
.ico-lab{font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; fill: #1C3524; text-transform: uppercase;}
.feed{stroke: #A9C36B; stroke-width: 1.4; stroke-dasharray: 4 5; fill: none;}
.explode.in .feed{animation: feedFlow 2.2s linear infinite;}
.feed-lab{font-family: 'Montserrat', sans-serif; font-size: 12px; fill: var(--text-muted);}
.ex-lab{position: absolute; width: 300px;}
.ex-lab h4{font-family: var(--font-display); font-size: clamp(19px,2vw,27px); color: var(--text); letter-spacing: -.01em;}
.ex-lab .sub{font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px;}
.ex-lab p{font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-top: 8px;}
.ex-lab.right{text-align: left; padding-left: 20px;}
.ex-lab.left{text-align: right; padding-right: 20px;}


/* ============================================================
   HOMEPAGE - framed hero, the funnel, the pathfinder
   Per review: frame the hero; put the funnel straight after it and
   before the high-school / university / pivoter split; put the
   pathfinder after Discover / Match / Achieve.
   ============================================================ */
/* The frame is a single rounded border around the whole hero. The
   scene is a 224px band pinned to the BOTTOM of the hero - my first
   pass used inset, which fought its fixed height and dragged the
   illustration up behind the headline. It stays where it was; it is
   only pulled in so it sits inside the frame. */
.hero-framed{background: var(--surface)}
.hero-framed > .container,.hero-framed > .hero-inner{position:relative;z-index:2}
.hero-framed .hero-scene{
  left:22px;right:22px;bottom:22px;
  border-bottom-left-radius:22px;border-bottom-right-radius:22px}
.hero-framed::after{content:'';position:absolute;inset:22px;border-radius:30px;
  pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 8px rgba(241,246,236,.96), 0 24px 60px var(--line)}
@media(max-width:700px){
  .hero-framed::after{inset:10px;border-radius:20px;
    box-shadow:inset 0 0 0 5px rgba(241,246,236,.96)}
  .hero-framed .hero-scene{left:10px;right:10px;bottom:10px;
    border-bottom-left-radius:14px;border-bottom-right-radius:14px}
}

/* ---- the funnel ---- */
.fn-band{background: var(--surface)}
.fn-svg{display:block;width:min(1120px,96%);margin:6px auto 0;height:auto}
.fn-svg path{fill:none;stroke:rgba(207,255,129,.42);stroke-width:1.15;vector-effect:non-scaling-stroke}
.fn-ins path,.fn-outs path{stroke-dasharray:820;stroke-dashoffset:820;opacity:.42;
  animation:fnDraw 9s linear infinite}
.fn-ins path:nth-child(2){animation-delay:.1s}.fn-ins path:nth-child(3){animation-delay:.2s}
.fn-ins path:nth-child(4){animation-delay:.3s}.fn-ins path:nth-child(5){animation-delay:.4s}
.fn-ins path:nth-child(6){animation-delay:.5s}.fn-ins path:nth-child(7){animation-delay:.6s}
.fn-outs path{animation-delay:4.6s}
.fn-outs path:nth-child(2){animation-delay:4.7s}.fn-outs path:nth-child(3){animation-delay:4.8s}
@keyframes fnDraw{0%,6%{stroke-dashoffset:820}26%{stroke-dashoffset:0}
  92%{stroke-dashoffset:0;opacity:.42}100%{stroke-dashoffset:0;opacity:0}}
.fn-trunk,.fn-coil,.fn-stem{stroke-dasharray:440;stroke-dashoffset:440;
  animation:fnShort 9s linear infinite}
.fn-trunk{animation-delay:3.5s}.fn-coil{animation-delay:3.75s;opacity:.75}.fn-stem{animation-delay:4.35s}
@keyframes fnShort{0%,2%{stroke-dashoffset:440;opacity:0}5%{opacity:.8}
  18%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:.8}100%{opacity:0}}
.fn-dots circle{fill:var(--lime);opacity:0;animation:fnPop 9s ease infinite}
.fn-dots circle:nth-child(2){animation-delay:.1s}.fn-dots circle:nth-child(3){animation-delay:.2s}
.fn-dots circle:nth-child(4){animation-delay:.3s}.fn-dots circle:nth-child(5){animation-delay:.4s}
.fn-dots circle:nth-child(6){animation-delay:.5s}.fn-dots circle:nth-child(7){animation-delay:.6s}
@keyframes fnPop{0%,3%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
.fn-join{fill:var(--lime);opacity:0;animation:fnPop 9s ease infinite;animation-delay:3.3s}
.fn-lab text{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  fill: var(--text);text-anchor:middle;opacity:0;animation:fnFade 9s ease infinite}
.fn-lab text:nth-child(2){animation-delay:.1s}.fn-lab text:nth-child(3){animation-delay:.2s}
.fn-lab text:nth-child(4){animation-delay:.3s}.fn-lab text:nth-child(5){animation-delay:.4s}
.fn-lab text:nth-child(6){animation-delay:.5s}.fn-lab text:nth-child(7){animation-delay:.6s}
@keyframes fnFade{0%,3%{opacity:0}10%,90%{opacity:.85}100%{opacity:0}}
.fn-outlabels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  width:min(1120px,96%);margin:-10px auto 0;text-align:center}
.fn-outlabels b{display:block;font-family:var(--font-display),'Agrandir Grand',sans-serif;
  text-transform:uppercase;font-size:20px;color: var(--text)}
.fn-outlabels span{display:block;margin-top:4px;font-size:12.5px;color: var(--text-muted)}

/* ---- the pathfinder ---- */
.pf-band{background: var(--invert);color:#fff}
.pf-band h2,.pf-band .section-sub{color:#fff}
.pf-band .section-sub{opacity:.72}
.pf-svg{display:block;width:min(1080px,96%);margin:4px auto 0;height:auto}
.pf-svg path{fill:none;stroke-linecap:round}
.pf-noise path{stroke:rgba(255,255,255,.2);stroke-width:1.4;
  stroke-dasharray:1600;stroke-dashoffset:1600;animation:pfDraw 7s ease-in-out infinite}
.pf-noise path:nth-child(2){animation-delay:.12s}.pf-noise path:nth-child(3){animation-delay:.24s}
.pf-noise path:nth-child(4){animation-delay:.36s}.pf-noise path:nth-child(5){animation-delay:.48s}
@keyframes pfDraw{0%{stroke-dashoffset:1600;opacity:0}
  10%{opacity:.85}34%{stroke-dashoffset:0;opacity:.85}
  56%{opacity:.1}92%,100%{stroke-dashoffset:0;opacity:0}}
.pf-route{stroke:var(--lime,#CFFF81);stroke-width:3.4;stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:pfRoute 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes pfRoute{0%,30%{stroke-dashoffset:1600}58%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1600}}
.pf-bead{fill:var(--lime,#CFFF81);stroke: var(--text);stroke-width:2}
.pf-end{fill:var(--lime,#CFFF81);opacity:0;animation:pfEnd 7s ease infinite}
@keyframes pfEnd{0%,56%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
.pf-band .data-line{color:rgba(255,255,255,.6);text-align:center;margin-top:14px}

@media (prefers-reduced-motion:reduce){
  .fn-band *,.pf-band *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
}


/* ============================================================
   FEATURES - filter bar, per "Need to make this page dynamic"
   ============================================================ */
.ft-bar{position:relative;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;
  padding-bottom:14px;margin:0 auto 28px;width:max-content;max-width:100%}
.ft-tab{background:none;border:0;cursor:pointer;font-family:var(--font-body);
  font-size:13.5px;font-weight:600;color: var(--text-muted);padding:4px 2px;transition:color .25s ease}
.ft-tab:hover{color: var(--text)}
.ft-tab.on{color: var(--accent-text)}
.ft-tab em{font-style:normal;font-size:10.5px;font-weight:700;margin-left:5px;
  background:rgba(57,108,72,.1);color: var(--accent-text);border-radius:99px;padding:2px 7px}
.ft-tab.on em{background:var(--lime);color: var(--on-accent)}
.ft-ink{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--forest);
  border-radius:2px;transition:left .42s cubic-bezier(.2,.9,.25,1),width .42s cubic-bezier(.2,.9,.25,1)}
.info-card.ft-out{display:none}
@keyframes ftIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


/* ============================================================
   GIGI SECTION - the chat card lifted out of the hero
   Per review: "let's move this down to a section in the homepage on Gigi"
   ============================================================ */
.gigi-band{background: var(--invert);color:#fff}
.gigi-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--s-6,44px);align-items:center}
.gigi-band h2{color:#fff;margin:10px 0 12px}
.gigi-band .section-sub{color:rgba(255,255,255,.72)}
.gigi-pts{list-style:none;padding:0;margin:22px 0 0}
.gigi-pts li{padding:13px 0;border-top:1px solid rgba(255,255,255,.14)}
.gigi-pts b{display:block;font-family:var(--font-head),'Clash Display',sans-serif;
  font-weight:600;font-size:15px;color:var(--lime)}
.gigi-pts span{display:block;margin-top:3px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.66)}
.gigi-demo{position:relative}
.gigi-demo .chat-card{position:relative;top:auto;right:auto;bottom:auto;left:auto;
  margin:0 0 0 auto;max-width:520px}
@media(max-width:900px){
  .gigi-grid{grid-template-columns:1fr}
  .gigi-demo .chat-card{margin:0}
}

/* the hero lost its right-hand column when the Gigi chat moved to its
   own section - it reads as one column now, over the illustration */
.hero-single{position:relative;z-index:2}
.hero-single .hero-copy{max-width:760px}
.hero-single .hero-copy .hero-sub{max-width:640px}


/* the stat band, promoted out of the science page so any page can use it */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); max-width: 920px; margin: 34px auto; }
.stat-band div { padding: 22px 18px; border-left: 1px solid var(--line); }
.stat-band div:first-child { border-left: 0; }
.stat-band b { display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 32px; color: var(--accent-text); line-height: 1; }
.stat-band span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 7px; line-height: 1.45; }

/* ============================================================
   WHY SCHOOLS - per "Add this to why schools need us page"
   ============================================================ */
.ws-h{font-family:var(--font-serif);font-weight:400;font-size:28px;margin:0 0 10px}
.ws-sub{max-width:640px;color: var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:26px}
.ws-note,.ws-fine{max-width:640px;font-size:13.5px;line-height:1.7;color: var(--text-muted);margin-top:18px}
.ws-band b{font-variant-numeric:tabular-nums}
.ws-dark{background: var(--invert);color:#fff}
.ws-dark .ws-h{color:#fff}
.ws-dark .ws-sub,.ws-dark .ws-fine{color:rgba(255,255,255,.66)}
.ws-flow{display:flex;align-items:stretch;gap:0;margin-top:6px}
.ws-band-b{flex:1;border-radius:14px;padding:22px 20px;min-width:120px}
.ws-band-b.discover{background:rgba(207,255,129,.5);color: var(--text)}
.ws-band-b.match{background:rgba(255,255,255,.14)}
.ws-band-b.achieve{background:var(--lime);color: var(--on-accent)}
.ws-band-b b{display:block;font-family:var(--font-head),'Clash Display',sans-serif;
  font-size:34px;line-height:1}
.ws-band-b span{display:block;margin-top:6px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.ws-band-b em{display:block;margin-top:7px;font-style:normal;font-size:12.5px;
  line-height:1.5;opacity:.72}
.ws-arrow{flex:0 0 30px;align-self:center;height:2px;background:rgba(255,255,255,.3);position:relative}
.ws-arrow::after{content:'';position:absolute;right:0;top:-4px;border-left:8px solid rgba(255,255,255,.3);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.ws-cta{text-align:center}
.ws-cta .ws-sub{margin:0 auto 22px}
.ws-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:760px){.ws-flow{flex-direction:column;gap:10px}.ws-arrow{display:none}}


/* ============================================================
   GIGI RIDES ALONG - per "Gigi should be dynamic like the mockup"
   She changes mood and line with the section you are reading.
   ============================================================ */
.gg-rider{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.25,1)}
.gg-rider.on{opacity:1;transform:none}
.gg-said{max-width:280px;background: var(--card);color: var(--text);border:1px solid var(--line);
  border-radius:16px;padding:11px 15px;font-size:13px;line-height:1.5;
  box-shadow:0 14px 34px var(--line)}
.gg-said b{color: var(--accent-text)}
.gg-art{flex:none;width:74px;height:74px}
@media(max-width:820px){ .gg-rider{display:none} }
@media (prefers-reduced-motion:reduce){ .gg-rider{transition:none} }


/* ============================================================
   AGENT CONSTELLATION - per "this should go in the explaining
   agents section and Gigi… use the right words in the bubbles"
   Each bubble carries the exact job that agent does.
   ============================================================ */
.constellation{position:relative;width:min(880px,94%);aspect-ratio:1/.78;margin:26px auto 34px}
.cn-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cn-spoke{stroke:rgba(57,108,72,.32);stroke-width:.35;stroke-dasharray:60;stroke-dashoffset:60;
  animation:cnDraw 1s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes cnDraw{to{stroke-dashoffset:0}}
.cn-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:210px;text-align:center;z-index:2}
.cn-gigi{width:76px;height:76px;margin:0 auto 6px}
.cn-core b{display:block;font-family:var(--font-head),'Clash Display',sans-serif;
  font-size:19px;color: var(--text)}
.cn-core span{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color: var(--text-muted)}
.cn-node{position:absolute;transform:translate(-50%,-50%);width:168px;text-align:center;
  background: var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;
  box-shadow:0 8px 22px var(--line);
  opacity:0;animation:cnPop .6s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes cnPop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.cn-node b{display:block;font-family:var(--font-head),'Clash Display',sans-serif;
  font-size:13.5px;color: var(--accent-text)}
.cn-node span{display:block;margin-top:3px;font-size:11px;line-height:1.45;color: var(--text-muted)}
@media(max-width:820px){
  .constellation{display:none}   /* the roster below says the same thing on small screens */
}
@media (prefers-reduced-motion:reduce){
  .cn-node{opacity:1;animation:none}
  .cn-spoke{stroke-dashoffset:0;animation:none}
}


/* ============================================================
   HOMEPAGE MATCH DEMO - per "this is where we explain career
   matches… all career cards should have the visi emblem in them"
   and "the career matches should be swipe motion always"
   ============================================================ */
.hm-wrap{margin:34px auto 0;width:min(430px,92%);text-align:center}
.hm-stack{position:relative;height:262px}
.hm-card{position:absolute;inset:0;background: var(--card);border:1px solid var(--line);
  border-radius:20px;padding:20px 22px;text-align:left;cursor:grab;touch-action:pan-y;
  box-shadow:0 16px 40px var(--line);
  transform:scale(calc(1 - var(--i)*.04)) translateY(calc(var(--i)*10px));
  z-index:calc(10 - var(--i))}
.hm-card:first-child{z-index:11}
.hm-card:active{cursor:grabbing}
.hm-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,185,184,calc(var(--lean-l,0)*.55)),transparent 42%,
    transparent 58%,rgba(207,255,129,calc(var(--lean,0)*.6)))}
.hm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hm-fam{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color: var(--accent-text);background:rgba(57,108,72,.1);border-radius:99px;padding:5px 10px}
.hm-emblem{flex:none;width:54px;height:54px}
.hme-grid{fill:none;stroke:var(--line);stroke-width:1}
.hme-shape{fill:rgba(207,255,129,.6);stroke:var(--forest);stroke-width:1.6;stroke-linejoin:round}
.hm-card h3{font-family:var(--font-head),'Clash Display',sans-serif;font-size:21px;
  margin:14px 0 4px;color: var(--text)}
.hm-pay{font-size:13.5px;color: var(--text-muted);margin:0}
.hm-fit{margin-top:16px;padding-top:14px;border-top:1px solid rgba(28,53,36,.1)}
.hm-fit b{font-family:var(--font-head),'Clash Display',sans-serif;font-size:30px;color: var(--accent-text)}
.hm-fit span{display:block;font-size:11.5px;color: var(--text-muted);margin-top:2px}
.hm-tag{position:absolute;top:16px;font:800 11px 'Montserrat',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;border-radius:99px;padding:5px 11px;pointer-events:none}
.hm-tag.keep{right:16px;background:var(--lime);color: var(--on-accent);opacity:var(--lean,0);transform:rotate(8deg)}
.hm-tag.pass{left:16px;background:var(--pink);color:#8A2F2E;opacity:var(--lean-l,0);transform:rotate(-8deg)}
.hm-note{margin:20px auto 0;max-width:400px;font-size:12.5px;line-height:1.6;color: var(--text-muted)}
.hm-note b{color: var(--text)}
.hm-controls{display:flex;gap:12px;justify-content:center;margin-top:14px}
.hm-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background: var(--card);font-size:17px;cursor:pointer;color: var(--text-muted);
  transition:transform .15s ease,border-color .15s ease}
.hm-btn:hover{transform:translateY(-2px);border-color: var(--accent-text);color: var(--accent-text)}
.hm-btn.like:hover{background:var(--lime);border-color:var(--lime);color: var(--on-accent)}
@media (prefers-reduced-motion:reduce){ .hm-card{transition:none!important} }


/* ============================================================
   THE CAREER WALLET - per "make the wallet look more like a real
   wallet". Leather body, stitched edge, a real card slot, and the
   proof cards drop into it.
   ============================================================ */
.cw-wrap{display:grid;grid-template-columns:1fr .82fr;gap:44px;align-items:center;
  margin:8px 0 18px}
.cw{position:relative;width:min(420px,100%);aspect-ratio:1.62/1;margin:0 auto;
  perspective:900px}

/* the back panel of the wallet */
.cw-back{position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(160deg,#2F5C40 0%,#264933 52%,#1E3A29 100%);
  box-shadow:0 26px 50px -18px rgba(20,14,10,.6), inset 0 1px 0 rgba(255,255,255,.08)}

/* cards live between the two panels and drop in */
.cw-cards{position:absolute;inset:-4% 9% 26%;}
.cw-card{position:absolute;left:0;right:0;height:56px;border-radius:9px;
  background:linear-gradient(150deg,#FFFFFF,#EFF4EC);
  border:1px solid var(--line);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
  padding:9px 13px;display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-190px) rotate(-4deg);opacity:0}
.cw.go .cw-card{animation:cwDrop .85s cubic-bezier(.25,1.1,.4,1) forwards}
.cw-card b{font-family:var(--font-head),'Clash Display',sans-serif;font-size:13px;color: var(--text)}
.cw-card i{font-style:normal;font-size:10.5px;color: var(--text-muted);margin-top:2px}
.cw-card.c1{top:0;   animation-delay:.10s} .cw-card.c2{top:13px;animation-delay:.28s}
.cw-card.c3{top:26px;animation-delay:.46s} .cw-card.c4{top:39px;animation-delay:.64s}
.cw-card.c5{top:52px;animation-delay:.82s}
@keyframes cwDrop{
  0%{transform:translateY(-190px) rotate(-4deg);opacity:0}
  55%{opacity:1}
  100%{transform:translateY(0) rotate(0);opacity:1}
}

/* the front panel, with stitching and a slot cut into it */
.cw-front{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:14px;
  background:linear-gradient(165deg,#3F7650 0%,#2A5237 58%,#234630 100%);
  box-shadow:0 -8px 22px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  transform-origin:bottom center}
.cw.go .cw-front{animation:cwFold 1s cubic-bezier(.3,.9,.3,1) .95s both}
@keyframes cwFold{from{transform:rotateX(-16deg)}to{transform:rotateX(0)}}
.cw-stitch{position:absolute;inset:9px;border-radius:9px;
  border:1.5px dashed rgba(226,205,178,.42)}
.cw-slot{position:absolute;left:14%;right:14%;top:-7px;height:13px;border-radius:9px;
  background:linear-gradient(180deg,#1A1009,#2A1D16);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.cw-brand{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-size:23px;color:rgba(240,228,210,.9);letter-spacing:.02em}
.cw-brand i{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--lime);margin-left:2px;vertical-align:baseline}

.cw-read b{display:block;font-family:var(--font-display),'Agrandir Grand',sans-serif;
  font-size:64px;line-height:1;color: var(--accent-text)}
.cw-read > span{display:block;margin-top:6px;font-size:13px;font-weight:600;color: var(--text)}
.cw-read p{margin-top:14px;font-size:13.5px;line-height:1.7;color: var(--text-muted);max-width:38ch}

@media(max-width:820px){ .cw-wrap{grid-template-columns:1fr;gap:26px} }
@media (prefers-reduced-motion:reduce){
  .cw-card{transform:none;opacity:1;animation:none!important}
  .cw-front{animation:none!important}
}


/* ============================================================
   PRICING - the mockup treatment: monthly/annual toggle and the
   ladder rise, per "use this pricing on homepage"
   ============================================================ */
.pr-toggle{position:relative;display:flex;gap:6px;justify-content:center;margin:0 auto 26px;
  width:max-content;background:var(--line);border-radius:99px;padding:5px}
.pr-opt{position:relative;z-index:1;background:none;border:0;cursor:pointer;border-radius:99px;
  font-family:var(--font-body);font-size:13px;font-weight:600;color: var(--text-muted);
  padding:9px 18px;transition:color .25s ease;white-space:nowrap}
.pr-opt.on{color: var(--text)}
.pr-opt em{font-style:normal;font-size:10.5px;font-weight:700;margin-left:6px;
  color:var(--forest);background:var(--lime);border-radius:99px;padding:2px 7px}
.pr-ink{position:absolute;top:5px;bottom:5px;left:0;width:0;background: var(--card);border-radius:99px;
  box-shadow:0 2px 8px var(--line);
  transition:left .38s cubic-bezier(.2,.9,.25,1),width .38s cubic-bezier(.2,.9,.25,1)}
.pr-flip{opacity:0;transform:translateY(-6px);transition:opacity .13s ease,transform .13s ease}
.price-num,.price-per{display:inline-block;transition:opacity .16s ease,transform .16s ease}

/* the ladder: cards rise in, then the included lines tick down */
/* the cards are visible by default and only hidden once JS has said it
   will animate them - otherwise a throttled tab or a JS failure leaves
   the whole pricing block blank */
.pricing-grid.pr-anim .price-card{opacity:0;transform:translateY(26px)}
.pricing-grid.pr-anim.risen .price-card{animation:prRise .7s cubic-bezier(.2,.9,.25,1) forwards}
.pricing-grid.pr-anim.risen .price-card:nth-child(2){animation-delay:.12s}
.pricing-grid.pr-anim.risen .price-card:nth-child(3){animation-delay:.24s}
@keyframes prRise{to{opacity:1;transform:none}}
.pricing-grid.pr-anim .price-list li{opacity:0;transform:translateX(-8px)}
.pricing-grid.pr-anim.risen .price-list li{animation:prTick .4s ease forwards}
@keyframes prTick{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pricing-grid .price-card,.pricing-grid .price-list li{opacity:1;transform:none;animation:none}
}


/* ============================================================
   THE WALLET TIMELINE - per "I like this dynamic version of timeline"
   Scrub the years: the profile moves, the market moves, the match
   is recomputed in front of you.
   ============================================================ */
.tl-band{background: var(--invert);color:#fff}
.tl-band h2{color:#fff}
.tl-band .section-sub{color:rgba(255,255,255,.7)}
.tl-band .section-sub b{color:var(--lime)}

.tl-scrub{position:relative;display:flex;justify-content:center;gap:8px;
  width:max-content;max-width:100%;margin:0 auto 30px;flex-wrap:wrap;
  background:rgba(255,255,255,.06);border-radius:99px;padding:6px}
.tl-stop{position:relative;z-index:1;background:none;border:0;cursor:pointer;
  border-radius:99px;padding:10px 20px;text-align:center;color:rgba(255,255,255,.6);
  transition:color .25s ease}
.tl-stop b{display:block;font-family:var(--font-body);font-size:13px;font-weight:600}
.tl-stop span{display:block;font-size:10.5px;opacity:.72;margin-top:2px}
.tl-stop.on{color: var(--text)}
.tl-ink{position:absolute;top:6px;bottom:6px;left:0;width:0;background:var(--lime);
  border-radius:99px;
  transition:left .45s cubic-bezier(.2,.9,.25,1),width .45s cubic-bezier(.2,.9,.25,1)}

.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:940px;margin:0 auto}
.tl-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:22px 24px;text-align:center}
.tl-kick{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.tl-dia{width:196px;height:196px;display:block;margin:0 auto}
.tl-grid-l{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.tl-in{stroke:rgba(255,255,255,.12)}
.tl-prev{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.6;stroke-dasharray:4 4;
  transition:all .7s cubic-bezier(.3,.9,.3,1)}
.tl-now{fill:rgba(207,255,129,.3);stroke:var(--lime);stroke-width:2.2;stroke-linejoin:round;
  transition:all .7s cubic-bezier(.3,.9,.3,1)}
.tl-ax{display:flex;justify-content:space-between;max-width:210px;margin:8px auto 0;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.tl-fine{margin-top:12px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.5)}

.tl-bars{display:grid;gap:14px;margin-top:6px;text-align:left}
.tl-bar{display:grid;grid-template-columns:66px 1fr 34px;align-items:center;gap:10px}
.tl-bl{font-size:12px;color:rgba(255,255,255,.72)}
.tl-track{height:9px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.tl-track i{display:block;height:100%;width:0;border-radius:9px;background:var(--lime);
  transition:width .7s cubic-bezier(.3,.9,.3,1)}
.tl-bv{font-family:var(--font-head),'Clash Display',sans-serif;font-size:14px;
  color:#fff;text-align:right;font-variant-numeric:tabular-nums}

.tl-match{max-width:640px;margin:26px auto 0;text-align:center;font-size:15px;
  line-height:1.7;color:rgba(255,255,255,.8)}
.tl-match b{color:var(--lime)}

@media(max-width:820px){ .tl-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .tl-prev,.tl-now,.tl-track i,.tl-ink{transition:none}
}

/* ============================================================
   HERO · THE THREAD, THEN DO YOU
   The noise is typed at you as a conversation, the pen goes
   through it, and the answer is left standing. Runs once, not on
   a loop, because the headline and the CTAs have to stay put.
   ============================================================ */
.hero-thread{
  background:
    radial-gradient(820px 460px at 84% -14%, rgba(207,255,129,.16), transparent 62%),
    radial-gradient(660px 420px at -10% 106%, rgba(255,185,184,.12), transparent 60%),
    #14251B;
  color:#EFF4EC;
  padding:var(--s-7) 0 var(--s-7);
  min-height:min(92vh,860px);
  display:grid;
  align-items:center;
}
.hero-thread::after{
  content:'';position:absolute;inset:22px;border-radius:30px;
  border:1px solid rgba(207,255,129,.22);pointer-events:none;z-index:3;
}

/* --- the conversation --------------------------------------- */
.th-noise{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  pointer-events:none;opacity:0;
}
.th-thread{
  width:min(640px,80%);
  display:flex;flex-direction:column;gap:9px;
  transform:translateY(140px);
}
.th-msg{
  max-width:74%;padding:13px 19px;border-radius:21px;
  font-family:var(--font-body),Montserrat,sans-serif;font-weight:500;
  font-size:15.5px;line-height:1.36;
  opacity:0;transform:translateY(16px) scale(.9);
}
.th-in{align-self:flex-start;background:#2C3A31;color:#EFF4EC;
  border-bottom-left-radius:6px;transform-origin:left bottom}
.th-out{align-self:flex-end;background:var(--lime);color: var(--on-accent);
  border-bottom-right-radius:6px;transform-origin:right bottom}

/* The typing beat: a small dots pill first, which then collapses as the
   sentence grows out of it. Width and opacity only - nothing here animates
   `display`, which browsers handle inconsistently. */
.th-msg{position:relative;white-space:nowrap;overflow:hidden}
.th-dots{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;
  width:34px;overflow:hidden}
.th-dots s{width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.45;text-decoration:none;display:block;flex:0 0 auto}
.th-said{display:inline-block;vertical-align:middle;max-width:0;opacity:0;overflow:hidden}

/* --- the pen ------------------------------------------------ */
.th-slash{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;overflow:visible;opacity:0;
}
.th-pen{
  fill:none;stroke:var(--lime);stroke-width:13;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1420;stroke-dashoffset:1420;
  filter:drop-shadow(0 0 10px rgba(207,255,129,.4));
}

/* --- the answer --------------------------------------------- */
.hero-thread .hero-single{position:relative;z-index:4}
.th-say h1{font-size:clamp(64px,11vw,164px);line-height:.9;letter-spacing:-.02em;color:#fff}
.th-say .eyebrow{color:rgba(239,244,236,.62)}
.th-say .hero-script{color:var(--lime)}
.th-say .hero-sub{color:rgba(239,244,236,.82);max-width:62ch}
.th-say .hero-sub strong{color:var(--lime)}
.th-say .stat-chip{background:rgba(255,255,255,.06);border-color:rgba(207,255,129,.22);
  color:rgba(239,244,236,.86)}
.th-say .stat-chip b{color:var(--lime)}
.th-say .press-label{color:rgba(239,244,236,.5)}
.th-say .lm{color:#EFF4EC}
.th-say .press-sep{background:rgba(239,244,236,.24)}

/* ---- the sequence, only once JS has opted the hero in ------- */
.hero-thread.th-play .th-noise{animation:thNoise 5.6s linear forwards}
.hero-thread.th-play .th-thread{animation:thPush 5.6s cubic-bezier(.3,.7,.35,1) forwards}
.hero-thread.th-play .th-msg{animation:thPop 1s cubic-bezier(.2,1.25,.35,1) var(--d) forwards}
.hero-thread.th-play .th-dots{animation:thDots .8s cubic-bezier(.4,0,.2,1) var(--d) forwards}
.hero-thread.th-play .th-dots s{animation:thBlink .9s ease-in-out infinite}
.hero-thread.th-play .th-dots s:nth-child(2){animation-delay:.15s}
.hero-thread.th-play .th-dots s:nth-child(3){animation-delay:.3s}
.hero-thread.th-play .th-said{animation:thSaid .8s cubic-bezier(.4,0,.2,1) var(--d) forwards}
.hero-thread.th-play .th-slash{animation:thSlashOn 5.6s linear forwards}
.hero-thread.th-play .th-pen{animation:thPen 5.6s cubic-bezier(.55,0,.35,1) forwards}
.hero-thread.th-play .th-say{animation:thSay 5.6s var(--ease,cubic-bezier(.2,.7,.3,1)) forwards}

@keyframes thNoise{ 0%,74%{opacity:1} 86%,100%{opacity:0} }
@keyframes thPush{ 0%{transform:translateY(140px)} 78%,100%{transform:translateY(-46px)} }
@keyframes thPop{
  0%{opacity:0;transform:translateY(16px) scale(.9)}
  100%{opacity:1;transform:none} }
@keyframes thDots{ 0%,44%{width:34px;opacity:1} 62%,100%{width:0;opacity:0} }
@keyframes thSaid{ 0%,46%{max-width:0;opacity:0} 64%,100%{max-width:44ch;opacity:1} }
@keyframes thBlink{ 0%,100%{opacity:.28;transform:translateY(0)} 50%{opacity:.85;transform:translateY(-2px)} }
@keyframes thSlashOn{ 0%,60%{opacity:1} 92%,100%{opacity:0} }
@keyframes thPen{
  0%,64%{stroke-dashoffset:1420}
  80%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0} }
@keyframes thSay{
  0%,82%{opacity:0;transform:scale(.94)}
  96%,100%{opacity:1;transform:none} }

@media(max-width:900px){
  .hero-thread{min-height:auto;padding:var(--s-6) 0}
  .th-thread{width:88%}
  .th-msg{font-size:14px;padding:11px 15px}
  .hero-thread::after{inset:10px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
  .hero-thread .th-noise,.hero-thread .th-slash{display:none}
  .hero-thread.th-play .th-say{animation:none;opacity:1;transform:none}
}

/* ============================================================
   THE AISLE · D/M/A AS PRODUCTS ON A SHELF
   Three cans, one record behind all of them. Click a can and it
   steps forward; the detail under the shelf answers it. When
   Achieve is at the front, its features roll past on a belt:
   education carries course plan, admission plan and the skill
   gap analysis; job match ships with the gap analysis inside.
   ============================================================ */
.aisle{display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(14px,2.4vw,34px);padding:44px 0 22px;perspective:1400px}
.ai-can{position:relative;width:clamp(108px,11vw,150px);height:clamp(190px,20vw,264px);
  border-radius:16px;cursor:pointer;flex:none;border:0;padding:0;text-align:left;
  transform-origin:bottom center;
  box-shadow:0 14px 26px rgba(0,0,0,.4);filter:saturate(.85) brightness(.92);
  animation:aiFloat 5.4s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.2,.7,.25,1),box-shadow .6s,filter .6s}
.ai-can:nth-child(2){animation-delay:-1.8s}
.ai-can:nth-child(3){animation-delay:-3.6s}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ai-body{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--can)}
.ai-body::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.16) 0%,rgba(255,255,255,.34) 26%,rgba(255,255,255,.06) 52%,rgba(0,0,0,.14) 100%)}
.ai-body::after{content:'';position:absolute;left:0;right:0;top:0;height:16%;
  background:rgba(28,53,36,.14);border-bottom:1px solid rgba(28,53,36,.18)}
.ai-face{position:absolute;inset:0;z-index:2;padding:16px 13px 14px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ai-kick{position:absolute;top:5.5%;left:0;right:0;text-align:center;
  font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(28,53,36,.6)}
.ai-no{position:absolute;top:36%;left:13px;font-family:var(--font-display);
  font-size:40px;color:rgba(28,53,36,.12);line-height:1}
.ai-nm{font-family:var(--font-display);text-transform:uppercase;line-height:.96;
  font-size:clamp(15px,1.6vw,21px);letter-spacing:-.01em;color:var(--on-accent)}
.ai-sb{margin-top:5px;font-size:10px;color:rgba(28,53,36,.62);line-height:1.35}
.ai-can.front{animation:none;transform:translateY(-30px) scale(1.14);
  box-shadow:0 34px 52px rgba(0,0,0,.5);filter:none;z-index:5}
.ai-can.front .ai-body{box-shadow:inset 0 0 0 2px rgba(28,53,36,.5)}
.ai-line{height:2px;border-radius:99px;width:min(760px,88%);margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(207,255,129,.3) 14%,rgba(207,255,129,.3) 86%,transparent)}
.ai-detail{max-width:600px;margin:26px auto 0;text-align:center;min-height:118px}
.ai-detail .e{font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.ai-detail h3{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(22px,2.8vw,34px);letter-spacing:-.02em;line-height:1.02;color:var(--text)}
.ai-detail p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--text-muted)}

/* --- the Achieve belt ---------------------------------------- */
.ach-belt-wrap{margin-top:26px}
.ach-belt-kick{text-align:center;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.ach-belt{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ach-track{display:flex;gap:14px;width:max-content;
  animation:achRoll 30s linear infinite}
.ach-belt:hover .ach-track{animation-play-state:paused}
@keyframes achRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ach-tin{flex:none;width:196px;border-radius:12px;padding:15px 15px 13px;
  background:var(--tin);box-shadow:0 8px 18px rgba(0,0,0,.34);
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.ach-tin::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.1) 0%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.04) 60%,rgba(0,0,0,.1) 100%);
  pointer-events:none}
.ach-tin i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(28,53,36,.55)}
.ach-tin b{font-family:var(--font-head);font-size:15.5px;color:var(--on-accent);line-height:1.15}
.ach-tin em{font-style:normal;font-size:11px;color:rgba(28,53,36,.68);line-height:1.4}
@media(max-width:640px){
  .aisle{gap:10px;padding-top:30px}
  .ai-can.front{transform:translateY(-18px) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
  .ai-can,.ach-track{animation:none}
}

/* The funnel's three out-labels: grid items refuse to shrink below their
   min-content by default, which grew the whole grid past a phone viewport
   and gave the page a 49px sideways scroll. */
.fn-outlabels > div{min-width:0}
@media(max-width:640px){
  .fn-outlabels{gap:8px}
  .fn-outlabels b{font-size:13.5px}
  .fn-outlabels span{font-size:10.5px}
}
@media(max-width:640px){
  /* the login control + burger were 3px too wide for a 375 phone */
  .nav-inner{padding:0 12px;gap:10px}
  .nav-actions{gap:4px}
}

/* ============================================================
   THE THREE MOVES · pinned D/M/A explainer
   The section holds the screen while three panes take a beat
   each: who you are, what fits, how you get there. The rail on
   the left keeps count. Under 900px it un-pins and stacks.
   ============================================================ */
.moves-lead{padding-bottom:0}
.a-moves{position:relative;height:330vh;background:var(--invert)}
.a-moves-sticky{position:sticky;top:76px;height:calc(100vh - 76px);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:0 48px}
.mv-rail{position:absolute;left:48px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:5}
.mv-rail i{width:3px;height:44px;border-radius:9px;background:rgba(255,255,255,.16);
  display:block;transition:background .5s ease}
.mv-rail i.on{background:var(--lime)}
.mv-copy{position:relative;padding-left:44px;min-height:340px}
.mv-pane{position:absolute;inset:0;padding-left:44px;opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.mv-pane.on{opacity:1;transform:none;pointer-events:auto}
.mv-pane .no{font-family:var(--font-display);font-size:15px;color:var(--lime);letter-spacing:.1em}
.mv-pane h3{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,5.6vw,86px);line-height:.9;margin:12px 0 16px;color:#fff}
.mv-pane h3 em{font-style:normal;color:var(--forest)}
.mv-pane p{font-size:16.5px;line-height:1.66;color:rgba(255,255,255,.66);max-width:38ch}
.mv-pane .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.stk{display:inline-block;font-family:var(--font-body);font-weight:800;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
  transform:rotate(var(--rot,-3deg));white-space:nowrap}
.stk.ghost{background:transparent;color:var(--lime);border:2px solid var(--lime)}
.mv-stage{position:relative;height:430px}
.mv-vis{position:absolute;inset:0;opacity:0;transform:scale(.94) translateY(18px);
  transition:opacity .65s ease,transform .65s ease;display:grid;place-items:center}
.mv-vis.on{opacity:1;transform:none}
.mv-box{width:100%;max-width:430px;border-radius:24px;background:rgba(19,31,25,.9);
  border:1px solid rgba(207,255,129,.2);padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.mv-box h4{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-bottom:18px}
.radar{width:100%;height:230px}
.radar polygon.web{fill:none;stroke:rgba(255,255,255,.14)}
.radar polygon.you{fill:rgba(207,255,129,.24);stroke:var(--lime);stroke-width:2;
  transform-origin:50% 50%;transform:scale(0);transition:transform 1.2s ease .25s}
.mv-vis.on .radar polygon.you{transform:scale(1)}
.radar circle{fill:var(--lime)}
.fan{position:relative;height:230px;width:100%}
.fan .fc{position:absolute;left:50%;top:16px;width:132px;height:186px;margin-left:-66px;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
  transform:rotate(0) translateX(0);transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.fan .fc:nth-child(1){background:linear-gradient(150deg,#20402E,#3E7350)}
.fan .fc:nth-child(2){background:linear-gradient(150deg,#5A3E52,#C97B93)}
.fan .fc:nth-child(3){background:linear-gradient(150deg,#2A5237,#8FD3A0)}
.mv-vis.on .fan .fc:nth-child(1){transform:rotate(-16deg) translateX(-96px)}
.mv-vis.on .fan .fc:nth-child(3){transform:rotate(16deg) translateX(96px)}
.fan .fc b{font-family:var(--font-head);font-weight:600;font-size:13px;color:#fff;line-height:1.2}
.fan .fc i{font-style:normal;font-size:10px;color:rgba(255,255,255,.75)}
.fan .fc .pc{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;
  background:rgba(8,12,10,.72);color:var(--lime);padding:3px 8px;border-radius:999px}
.ladder{display:flex;flex-direction:column-reverse;gap:10px;height:230px;justify-content:flex-end}
.ladder .rung{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);font-size:12.5px;
  color:rgba(255,255,255,.66);opacity:0;transform:translateX(-16px);
  transition:opacity .55s ease,transform .55s ease}
.mv-vis.on .ladder .rung{opacity:1;transform:none}
.ladder .rung:nth-child(1){transition-delay:.15s}
.ladder .rung:nth-child(3){transition-delay:.45s}
.ladder .rung .d{width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  background:rgba(207,255,129,.16);color:var(--lime);display:grid;place-items:center;
  font-size:10px;font-weight:800}
.ladder .rung.hot{border-color:rgba(207,255,129,.45);color:#fff}
.ladder .rung.hot .d{background:var(--lime);color:#0C1410}

/* un-pinned fallback: short screens, phones, and reduced motion */
@media(max-width:900px){
  .a-moves{height:auto}
  .a-moves-sticky{position:static;height:auto;display:block;padding:34px 22px 44px}
  .mv-rail{display:none}
  .mv-copy{min-height:0;padding-left:0}
  .mv-pane{position:static;opacity:1;transform:none;pointer-events:auto;
    padding:0 0 30px;transition:none}
  .mv-stage{height:auto;display:grid;gap:16px}
  .mv-vis{position:static;opacity:1;transform:none}
  .mv-vis .fan .fc:nth-child(1){transform:rotate(-16deg) translateX(-72px)}
  .mv-vis .fan .fc:nth-child(3){transform:rotate(16deg) translateX(72px)}
  .mv-vis .ladder .rung{opacity:1;transform:none}
  .mv-vis .radar polygon.you{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .mv-pane,.mv-vis,.fan .fc,.ladder .rung,.radar polygon.you{transition:none}
}

/* ---- review round 2 · hero ---------------------------------- */
/* #1 centred, DO YOU in lime, coaching CTA as a pill */
.hero-thread .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-thread .hero-ctas,.hero-thread .stat-chips,.hero-thread .press-strip{justify-content:center}
.th-say h1{color:var(--lime)}
.hero-thread .btn-ghost.btn-lg{border-radius:999px;border:1.5px solid rgba(207,255,129,.55);
  color:var(--lime);padding-left:26px;padding-right:26px}
.hero-thread .btn-ghost.btn-lg:hover{background:rgba(207,255,129,.12)}

/* #2 the persistent corner banner with the wordmark under it */
.hero-banner{position:absolute;right:44px;bottom:40px;z-index:6;width:min(360px,38vw);
  background:rgba(13,25,19,.78);border:1px solid rgba(207,255,129,.28);border-radius:14px;
  padding:16px 18px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-banner p{font-size:12px;line-height:1.62;color:rgba(239,244,236,.82);margin:0}
.hero-banner strong{color:var(--lime)}
.hb-mark{display:block;margin-top:10px;font-family:var(--font-script),'TAN Nimbus',serif;
  font-size:17px;color:#fff;text-transform:lowercase}
.hb-mark i{font-style:normal;color:var(--pink)}
@media(max-width:900px){
  .hero-banner{position:static;width:auto;margin:26px 22px 0}
}

/* ---- review round 2 · funnel tiles + relocated aisle -------- */
.dma-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  width:min(1120px,96%);margin:2px auto 0}
.dma-tiles > .dma-tile{min-width:0}
.dma-tile{border-radius:14px;padding:18px 19px 16px;color:var(--on-accent)}
.dma-tile b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-size:17px;letter-spacing:.02em;margin-bottom:6px}
.dma-tile p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(28,53,36,.78)}
.t-discover{background:linear-gradient(160deg,#E4FFB0,#CFFF81)}
.t-match{background:linear-gradient(160deg,#FFD3D2,#FFB9B8)}
.t-achieve{background:linear-gradient(160deg,#DFF5D0,#B9E8A5)}
.fn-band .aisle{padding-top:34px}
/* the can face copy has to FIT: smaller, wrapping subline */
.ai-sb{white-space:normal;font-size:9px;line-height:1.35}
@media(max-width:760px){
  .dma-tiles{grid-template-columns:1fr}
}

/* ---- review round 2 · the walk-to-school scene, audiences ---- */
.aud-scene{position:relative;height:224px;overflow:hidden;border-radius:16px;
  margin:6px 0 26px;pointer-events:none;
  background:linear-gradient(180deg,#20402E 0%,#2A5237 70%)}
.aud-scene .scene-sun{position:absolute;right:9%;top:22px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#E4FFB0,var(--lime));
  box-shadow:0 0 44px rgba(207,255,129,.5)}
/* the old scene CSS keyed off .hero-scene - mirror the anchors it expects */
.aud-scene .scene-skyline,.aud-scene .scene-ground,.aud-scene .scene-sidewalk,
.aud-scene .walkers{position:absolute;left:0;right:0}

/* ---- review round 2 · agents ------------------------------- */
/* #5 each constellation node carries its agent's icon */
.cn-ico{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 5px;
  border-radius:8px;background:rgba(207,255,129,.12)}
.cn-ico svg{width:16px;height:16px;display:block}
/* #6 Gigi floats on a white circle at the core */
.cn-gigi-plate{width:96px;height:96px;border-radius:50%;background:#fff;
  display:grid;place-items:center;margin:0 auto 8px;
  box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 5px rgba(207,255,129,.25);
  animation:corePlate 3.4s ease-in-out infinite}
@keyframes corePlate{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cn-gigi-plate .gigi{width:72px!important;height:auto!important}
/* #8 the tools each agent drives, folded into its card */
.agent-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.agent-tools span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(207,255,129,.35);border-radius:99px;padding:3px 9px}
@media(prefers-reduced-motion:reduce){ .cn-gigi-plate{animation:none} }

/* ---- review round 2 · moves -------------------------------- */
/* #11 every fan card carries its VISI diamond */
.fc-dia{position:absolute;top:34px;left:50%;width:44px;height:44px;margin-left:-22px}
.fcd-grid{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4}
.fcd-shape{fill:rgba(207,255,129,.5);stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round}
/* #12 the match tile swipes on its own: the front card leans, flies right
   (kept), and the fan re-deals. One motion, looping. */
.mv-vis.on .fan .fc:nth-child(2){animation:fanSwipe 5.2s cubic-bezier(.45,0,.4,1) 1.4s infinite}
@keyframes fanSwipe{
  0%,18%{transform:translateX(0) rotate(0)}
  30%{transform:translateX(26px) rotate(7deg)}
  42%{transform:translateX(230px) rotate(22deg);opacity:0}
  43%{transform:translateX(-40px) rotate(-9deg);opacity:0}
  58%,100%{transform:translateX(0) rotate(0);opacity:1}}
@media(prefers-reduced-motion:reduce){ .mv-vis.on .fan .fc:nth-child(2){animation:none} }

/* ---- review round 2 · the pathways film -------------------- */
.pw-film{position:relative;margin:26px auto 30px;max-width:920px;border-radius:18px;
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pw-film video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;background:#0D1913}
.pw-film .aud-scene.pw-scene{height:280px;margin:0;border-radius:0}
.pw-film-cap{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;place-content:center;
  text-align:center;background:linear-gradient(180deg,rgba(13,25,19,.16),rgba(13,25,19,.5));
  pointer-events:none}
.pw-film-cap span{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(30px,4.6vw,56px);line-height:1;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.5)}
.pw-film-cap em{font-style:normal;font-family:var(--font-script),'TAN Nimbus',serif;
  text-transform:lowercase;font-size:clamp(16px,2vw,24px);color:var(--lime);margin-top:6px;display:block}

/* ---- review round 3 · homepage ------------------------------ */
/* #30 the banner speaks in the reference's voice */
.hero-banner{text-align:right}
.hb-kick{display:block;font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.hero-banner p{font-size:12.5px;line-height:1.66;color:rgba(239,244,236,.85)}
.hb-punch{display:block;margin-top:8px;font-family:var(--font-script),'TAN Nimbus',serif;
  text-transform:lowercase;font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--lime)}


/* #20 the funnel draws first, the tiles answer second */
.dma-tiles .dma-tile{opacity:0;transform:translateY(16px)}
.fn-band.fn-go .dma-tile{animation:dmaIn .6s cubic-bezier(.2,.9,.25,1) forwards}
.fn-band.fn-go .dma-tile:nth-child(1){animation-delay:4.4s}
.fn-band.fn-go .dma-tile:nth-child(2){animation-delay:4.6s}
.fn-band.fn-go .dma-tile:nth-child(3){animation-delay:4.8s}
@keyframes dmaIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .dma-tiles .dma-tile{opacity:1;transform:none;animation:none!important}}

/* #34 the audiences band takes the full screen */
.aud-full{min-height:100svh;display:grid;align-items:center}
.aud-full > .container{max-width:none;padding:0 4vw;width:100%}
.aud-full .aud-scene{height:30vh;min-height:200px}

/* #36 wallet band + #29 the wallet is forest, not brown, cards proud */
.wallet-band{background:var(--surface-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.wb-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.wb-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.wb-points span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);border:1.5px solid rgba(207,255,129,.4);border-radius:99px;padding:6px 13px}
@media(max-width:860px){.wb-grid{grid-template-columns:1fr}}

/* ---- review round 4 ---------------------------------------- */
/* #19 the diagonal strike lives with the chat, then leaves */
.th-slash{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;overflow:visible;opacity:0}
.th-strike{fill:none;stroke:var(--lime);stroke-width:13;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1420;stroke-dashoffset:1420;
  filter:drop-shadow(0 0 10px rgba(207,255,129,.4))}
.hero-thread.th-play .th-slash{animation:thSlashHold 5.6s linear forwards}
.hero-thread.th-play .th-strike{animation:thStrike 5.6s cubic-bezier(.55,0,.35,1) forwards}
@keyframes thSlashHold{0%,55%{opacity:0}58%,75%{opacity:1}86%,100%{opacity:0}}
@keyframes thStrike{0%,57%{stroke-dashoffset:1420}71%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* #20 the corner note loses its box and gains size */
.hero-banner{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;width:min(430px,44vw);bottom:120px}
.hero-banner p{font-size:15px;line-height:1.62}
.hb-kick{font-size:13px}
.hb-punch{font-size:clamp(30px,3.4vw,44px)}

/* #21/#22 the funnel is strictly two acts, run once */
.fn-ins path,.fn-outs path{animation:none;opacity:0}
.fn-dots circle,.fn-join{animation:none;opacity:0}
.fn-trunk,.fn-coil,.fn-stem{animation:none}
.fn-band.fn-go .fn-ins path{animation:fnDrawOnce 1.7s cubic-bezier(.4,0,.3,1) forwards}
.fn-band.fn-go .fn-ins path:nth-child(2){animation-delay:.08s}
.fn-band.fn-go .fn-ins path:nth-child(3){animation-delay:.16s}
.fn-band.fn-go .fn-ins path:nth-child(4){animation-delay:.24s}
.fn-band.fn-go .fn-ins path:nth-child(5){animation-delay:.32s}
.fn-band.fn-go .fn-ins path:nth-child(6){animation-delay:.4s}
.fn-band.fn-go .fn-ins path:nth-child(7){animation-delay:.48s}
.fn-band.fn-go .fn-dots circle{animation:fnDotOnce .5s ease forwards}
.fn-band.fn-go .fn-join{animation:fnDotOnce .5s ease 1.9s forwards}
.fn-band.fn-go .fn-trunk{animation:fnDrawOnce .5s cubic-bezier(.4,0,.3,1) 2.3s forwards}
.fn-band.fn-go .fn-coil{animation:fnDrawOnce 1s cubic-bezier(.4,0,.3,1) 2.6s forwards;opacity:0}
.fn-band.fn-go .fn-stem{animation:fnDrawOnce .4s cubic-bezier(.4,0,.3,1) 3.4s forwards}
.fn-band.fn-go .fn-outs path{animation:fnDrawOnce .9s cubic-bezier(.4,0,.3,1) 3.7s forwards}
.fn-band.fn-go .fn-outs path:nth-child(2){animation-delay:3.8s}
.fn-band.fn-go .fn-outs path:nth-child(3){animation-delay:3.9s}
@keyframes fnDrawOnce{from{stroke-dashoffset:820;opacity:0}12%{opacity:1}
  to{stroke-dashoffset:0;opacity:1}}
@keyframes fnDotOnce{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .fn-ins path,.fn-outs path,.fn-dots circle,.fn-join{animation:none!important;opacity:1;stroke-dashoffset:0}
  .fn-trunk,.fn-coil,.fn-stem{animation:none!important;stroke-dashoffset:0;opacity:1}}

/* #23 the moves title lives in the black */
.mv-head{grid-column:1 / -1;justify-self:center;text-align:center;z-index:6;
  padding:22px 0 6px;align-self:start}
.mv-head .eyebrow{color:rgba(207,255,129,.7)}
.mv-head h2{color:#fff;font-size:clamp(22px,3vw,38px)}

/* #24 the ladder climbs itself, rung by rung */
.mv-vis.on .ladder .rung{animation:rungCycle 6.4s ease infinite}
.mv-vis.on .ladder .rung:nth-child(1){animation-delay:0s}
.mv-vis.on .ladder .rung:nth-child(2){animation-delay:1.6s}
.mv-vis.on .ladder .rung:nth-child(3){animation-delay:3.2s}
.mv-vis.on .ladder .rung:nth-child(4){animation-delay:4.8s}
@keyframes rungCycle{
  0%,8%{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.05)}
  12%,22%{border-color:rgba(207,255,129,.55);background:rgba(207,255,129,.12);color:#fff}
  30%,100%{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.05)}}

/* #25 the walk scene runs edge to edge */
.aud-full .aud-scene{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}

/* #26 the overture: résumé, struck, replaced */
.cw-big{position:relative;transform:scale(1.12);transform-origin:center}
@media(max-width:640px){.cw-big{transform:none}}
.wx{position:absolute;inset:0;display:grid;place-items:center;z-index:6;
  opacity:0;pointer-events:none}
.wx-run .wx{animation:wxShow 2.6s ease forwards}
@keyframes wxShow{0%{opacity:0}8%,72%{opacity:1}92%,100%{opacity:0}}
.wx-paper{width:180px;height:230px;background:#FAFBF7;border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);padding:20px 18px;position:relative}
.wx-run .wx-paper{animation:wxPaper 2.6s cubic-bezier(.4,0,.5,1) forwards}
@keyframes wxPaper{0%{transform:translateY(16px)}12%,70%{transform:none}
  100%{transform:translateY(60px) rotate(9deg)}}
.wx-paper b{font-family:var(--font-head);font-size:14px;color:#1C3524}
.wx-paper i{display:block;height:7px;border-radius:3px;background:#D7DFD3;margin-top:12px}
.wx-x{position:absolute;width:150px;height:150px}
.wx-x path{fill:none;stroke:var(--pink);stroke-width:11;stroke-linecap:round;
  stroke-dasharray:130;stroke-dashoffset:130}
.wx-run .wx-x .x1{animation:wxX .3s cubic-bezier(.55,0,.4,1) .9s forwards}
.wx-run .wx-x .x2{animation:wxX .3s cubic-bezier(.55,0,.4,1) 1.15s forwards}
@keyframes wxX{to{stroke-dashoffset:0}}
.cw-big .cw{opacity:0;transform:scale(.9)}
.wx-run .cw{transition:opacity .6s ease 2.2s,transform .7s cubic-bezier(.2,1.1,.3,1) 2.2s;
  opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .wx{display:none}.cw-big .cw{opacity:1;transform:none}}

/* #28 constellation: icon beside the name, bigger everything */
.cn-ico{display:inline-grid;width:20px;height:20px;margin:0 7px 0 0;background:none;
  vertical-align:-4px}
.cn-ico svg{width:19px;height:19px}
.cn-node{text-align:center;font-size:13px;padding:13px 15px;min-width:150px}
.cn-node b{font-size:14.5px}
.cn-node span{font-size:11.5px;line-height:1.4}

/* #30 posting a role files a paper */
.file-card{position:relative;overflow:visible;border-radius:4px 14px 14px 14px}
.fc-tab{position:absolute;top:-24px;left:0;background:var(--lime);color:var(--on-accent);
  font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.12em;
  border-radius:8px 8px 0 0;padding:5px 16px 3px}
.fc-clip{position:absolute;top:-12px;right:26px;width:16px;height:34px;
  border:3px solid rgba(28,53,36,.5);border-bottom:0;border-radius:8px 8px 0 0}
.file-card form{position:relative}


/* #34 the queue rail */
.pw-queue{animation:none;width:max-content}
/* the thread keeps clear of the corner note on wide screens */
@media(min-width:901px){
  .hero-thread .th-noise{padding-right:24vw}
}

/* ---- review round 5 ---------------------------------------- */
/* (tvvekm) the hero sits higher */
.hero-thread{min-height:min(88vh,820px);padding:var(--s-5) 0;display:grid;align-items:center}
.hero-thread .hero-single{padding-top:0}

/* (gawnf8) the moves title gets its own air, panes never touch it */

.mv-pane h3{font-size:clamp(34px,4.6vw,68px)}

/* (8eq9qh) the scene truly full-bleed, no left gap */
.aud-full .aud-scene{width:100vw;position:relative;left:50%;right:auto;
  margin-left:-50vw;border-radius:0}

/* (fng0cj) constellation icon stacks above the name */
.cn-ico{display:block;margin:0 auto 6px;vertical-align:baseline}

/* (6fob6f) schools: out of the box, big number on the band */
.school-band.school-open{background:none;border:0;box-shadow:none;padding:34px 0;
  border-top:1px solid var(--line);border-radius:0}
.school-band.school-open:hover{transform:none;box-shadow:none}
.school-open .school-copy h3{font-size:clamp(40px,5vw,64px);color:var(--lime)}
.school-open .school-per{font-size:16px;color:var(--text-muted)}

/* (4b7odv) plan names in tan nimbus, lowercase */
.plan-nim{font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-weight:400;font-size:clamp(22px,2.2vw,30px);color:var(--lime);letter-spacing:0}

/* (6z4w44) coaching: open page, calendar right, $200 under */
.coaching-open{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.coaching-open .coaching-copy h2{font-size:clamp(26px,3.4vw,44px)}
.coach-cal{justify-self:end;width:min(380px,100%)}
.cal-card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:20px 22px;text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease}
.cal-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.cal-top{display:block;font-family:var(--font-head);font-weight:700;font-size:15px;
  color:var(--text);margin-bottom:12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid i{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid rgba(207,255,129,.1);font-style:normal}
.cal-grid i.on{background:var(--lime);color:var(--ink);display:grid;place-items:center;
  font:800 13px var(--font-body);animation:calPulse 2.4s ease-in-out infinite}
@keyframes calPulse{0%,100%{box-shadow:0 0 0 0 rgba(207,255,129,.45)}
  50%{box-shadow:0 0 0 9px rgba(207,255,129,0)}}
.cal-book{display:block;margin-top:14px;font:700 14px var(--font-body);color:var(--lime)}
.cal-price{margin-top:14px;text-align:center}
.cal-price b{font-family:var(--font-display);font-size:clamp(36px,4vw,54px);color:var(--text)}
.cal-price span{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
@media(max-width:860px){.coaching-open{grid-template-columns:1fr}.coach-cal{justify-self:stretch}}

/* (fqaya4) the employer form is paper */
.file-card{background:
  repeating-linear-gradient(180deg,transparent 0 30px,rgba(28,53,36,.05) 30px 31px),
  linear-gradient(180deg,#FCFDFA,#F4F8F0);
  color:var(--ink);transform:rotate(-.5deg);
  box-shadow:0 24px 50px rgba(0,0,0,.4)}
.file-card h3,.file-card label{color:var(--ink)}
.file-card input,.file-card textarea,.file-card select{background:#fff;color:var(--ink);
  border-color:rgba(28,53,36,.2)}

/* (sjia6p) the film owns the full width */
.pw-film{max-width:none;width:100vw;position:relative;left:50%;margin-left:-50vw;
  border-radius:0}
.pw-film video{aspect-ratio:64/27}

/* (h59qht) the g. closes the page, centred */
.foot-mark{text-align:center;font-family:var(--font-script),'TAN Nimbus',serif;
  font-size:44px;color:var(--lime);padding:34px 0 6px}
.foot-mark i{font-style:normal;color:var(--pink)}

/* (narrow pages) everything breathes to the screen it is on */
.container{max-width:min(1360px,94vw)}


/* ---- review round 6 ---------------------------------------- */
.grants-nim{font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-size:clamp(24px,2.4vw,34px);color:var(--lime);margin-bottom:6px}

/* #42 logos on one line */
.logo-wall{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(18px,3vw,44px);
  overflow-x:auto}
.sup-logo{flex-direction:row}

/* #43 the closing mark: white circle, lime dot */
.foot-mark{display:grid;place-items:center;padding:34px 0 6px;font-size:0}
.foot-mark::before{content:'g';display:grid;place-items:center;width:74px;height:74px;
  border-radius:50%;background:#fff;color:var(--ink);
  font:400 38px/1 var(--font-script),'TAN Nimbus',serif}
.foot-mark i{position:relative;left:-14px;top:16px;font-style:normal;font-size:34px;
  font-family:var(--font-script),'TAN Nimbus',serif;color:var(--lime)}

/* #38/#46 the wallet reads as a PORTFOLIO: label tab + clasp + g. mark */
.cw-front{overflow:visible}
.cw-front::before{content:'CAREER PORTFOLIO';position:absolute;top:-13px;left:18px;
  background:var(--lime);color:var(--ink);font:800 9px/1 var(--font-body);
  letter-spacing:.14em;border-radius:7px 7px 0 0;padding:7px 13px 5px}
.cw-front::after{content:'';position:absolute;right:22px;top:-9px;width:26px;height:18px;
  border:3px solid rgba(28,53,36,.55);border-bottom:0;border-radius:9px 9px 0 0}
.cw-gmark{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--font-script),'TAN Nimbus',serif;font-size:26px;color:rgba(255,255,255,.92)}
.cw-gmark i{font-style:normal;color:var(--lime)}

/* ---- review round 7 ---------------------------------------- */
/* #5 the corner note narrower and lower, clear of the CTAs */
.hero-banner{width:min(360px,36vw);bottom:64px}


/* #7/#8/#11 tan nimbus lowercase accents */
.tile-nim,.aud-nim,.gigi-nim{font-family:var(--font-script),'TAN Nimbus',serif;
  text-transform:lowercase;font-weight:400;letter-spacing:0}
.tile-nim{font-size:clamp(20px,2vw,26px)}
.aud-tag.aud-nim{background:none;color:var(--lime);font-size:19px;padding:0}
.gigi-nim{font-size:clamp(20px,2vw,26px);color:var(--lime);margin-bottom:6px}

/* #9 the o12 wallet, dropped in and counting */
.wal12{position:relative;width:100%;max-width:420px;margin-inline:auto;height:430px}
.wal-drop{position:absolute;inset:0 0 176px 0}
.wchip{position:absolute;left:50%;display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:11px;background:#fff;
  border:1px solid rgba(28,53,36,.14);box-shadow:0 8px 22px rgba(0,0,0,.3);
  font-family:var(--font-body);font-size:13px;color:var(--ink);white-space:nowrap;
  transform:translate(-50%,-66px) rotate(var(--r,0deg));opacity:0;
  animation:wal12Drop 9s cubic-bezier(.5,0,.5,1) infinite}
.wchip i{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--lime);color:var(--forest-dark);font-size:11px;font-weight:700;
  font-family:var(--font-head);font-style:normal}
@keyframes wal12Drop{
  0%{transform:translate(-50%,-66px) rotate(var(--r)) scale(.9);opacity:0}
  6%{opacity:1}
  22%{transform:translate(-50%,150px) rotate(0deg) scale(1);opacity:1}
  30%{transform:translate(-50%,200px) rotate(0deg) scale(.86);opacity:0}
  100%{transform:translate(-50%,200px) rotate(var(--r)) scale(.86);opacity:0}}
.wal-body{position:absolute;left:0;right:0;bottom:0;height:218px;border-radius:20px;
  background:var(--ink);overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.45);
  animation:wal12Bump 9s ease-in-out infinite}
@keyframes wal12Bump{0%,18%,100%{transform:translateY(0)}
  24%{transform:translateY(5px) scaleX(1.012)}30%{transform:translateY(0)}}
.wal-lip{position:absolute;top:0;left:0;right:0;height:46px;
  background:linear-gradient(var(--forest),var(--forest-dark));
  border-bottom:2px solid var(--lime);
  display:flex;align-items:center;gap:12px;padding:0 18px}
/* the g in the white circle, per the pin */
.wal-g{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;
  place-items:center;font:400 17px/1 var(--font-script),'TAN Nimbus',serif;color:var(--ink)}
.wal-g i{font-style:normal;color:var(--lime);margin-left:1px}
.wal-lip b{font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime);flex:1}
.wal-lip span{font-family:var(--font-head);font-size:12px;color:rgba(241,246,236,.6)}
.wal-rows{padding:58px 18px 0;display:grid;gap:8px}
.wal-rows p{display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:rgba(241,246,236,.82);
  padding-bottom:8px;border-bottom:1px solid rgba(207,255,129,.12);margin:0}
.wal-rows p em{font-style:normal;color:var(--lime);font-family:var(--font-head);font-size:11.5px}
.wal-count{position:absolute;right:18px;bottom:12px;text-align:right;
  font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--lime);line-height:1;margin:0}
.wal-count small{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:500;
  color:rgba(241,246,236,.5);letter-spacing:.06em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.wchip,.wal-body{animation:none}.wchip{opacity:0}}

/* #10 Gigi bigger, riding the card corner */
.gigi-band .gigi-chat-card,.gigi-band .chat-card{position:relative;overflow:visible}
#gigi-chat .gigi,.gigi-chat-mascot .gigi{width:150px!important;height:auto!important}
.gigi-corner{position:absolute;right:-34px;top:-52px;width:150px;z-index:3;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}

/* #12 the agents section breathes less */
.agents-section{padding-top:var(--s-5);padding-bottom:var(--s-5)}
.constellation{margin-top:10px;margin-bottom:14px}

/* #13 the scale band goes black like the marquee */
.scale-band{background:var(--invert)}

/* #14 the role ticker */
.tick-wrap{text-align:center;margin-bottom:26px}
.tick-sentence{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(34px,4.6vw,64px);line-height:1.1;color:var(--text);text-transform:none}
.tick-slot{display:inline-block;vertical-align:bottom;height:1.12em;overflow:hidden;
  position:relative;min-width:6ch;text-align:left}
.tick-reel{display:block;animation:reel 12s cubic-bezier(.76,0,.24,1) infinite}
.tick-reel span{display:block;height:1.12em;color:var(--lime);white-space:nowrap}
@keyframes reel{0%,13%{transform:translateY(0)}16%,29%{transform:translateY(-1.12em)}
  32%,45%{transform:translateY(-2.24em)}48%,61%{transform:translateY(-3.36em)}
  64%,77%{transform:translateY(-4.48em)}80%,93%{transform:translateY(-5.6em)}
  100%{transform:translateY(-6.72em)}}
.tick-strip{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.tick-strip em{font-style:normal;font-family:var(--font-body);font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(207,255,129,.3);
  color:var(--text-muted)}
@media(prefers-reduced-motion:reduce){.tick-reel{animation:none}}
@media(max-width:640px){
  /* phones: the corner Gigi tucks in, the ticker wraps inside the screen */
  .gigi-corner{right:2px;top:-40px;width:104px}
  .tick-sentence{font-size:clamp(26px,8vw,34px)}
  .tick-slot{min-width:0;max-width:88vw}
  .tick-reel span{white-space:normal;line-height:1.12em;overflow:hidden;text-overflow:ellipsis}
}


/* ============================================================
   THE THREE MOVES · definitive layout (round 8)
   Head is a real row. Both columns stretch; the copy column has
   real width even though its panes are absolute, and the stage
   sits beside it, never over it.
   ============================================================ */
.a-moves-sticky{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr;
  gap:0 44px;align-items:center;justify-items:stretch;padding:0 5vw;place-items:initial}
.mv-head{grid-column:1 / -1;position:static;align-self:start;justify-self:center;
  text-align:center;padding:24px 0 6px;z-index:6}
.mv-copy{position:relative;width:100%;max-width:560px;min-height:420px;
  justify-self:end;align-self:center;margin:0;padding:0}
.mv-pane{position:absolute;inset:0;padding:0 0 0 30px;opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.mv-pane.on{opacity:1;transform:none;pointer-events:auto}
.mv-pane h3{font-size:clamp(32px,4.2vw,60px)}
.mv-stage{position:relative;height:440px;width:100%;max-width:520px;
  justify-self:start;align-self:center;margin:0}
.mv-vis{position:absolute;inset:0}
.mv-box{max-width:500px;padding:28px;border-radius:26px}
.radar,.fan,.ladder{height:250px}
.fan .fc{width:140px;height:200px}
.mv-vis.on .fan .fc:nth-child(1){transform:rotate(-16deg) translateX(-104px)}
.mv-vis.on .fan .fc:nth-child(3){transform:rotate(16deg) translateX(104px)}
@media(max-width:900px){
  .a-moves-sticky{display:block;padding:34px 22px 44px}
  .mv-copy{min-height:0;max-width:none}
  .mv-pane{position:static;opacity:1;transform:none;pointer-events:auto;padding:0 0 30px}
  .mv-stage{height:auto;max-width:none}
  .mv-vis{position:static}
}

/* ---- review round 8 ---------------------------------------- */
/* #4 the portfolio label in tan nimbus */
.wal-nim{font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-weight:400;font-size:16px;letter-spacing:0;color:var(--lime)}
/* #18/#17 the real logo, white circle */
.wal-logo,.foot-logo{display:grid;place-items:center;background:#fff;border-radius:50%}
.wal-logo{width:32px;height:32px}
.wal-logo img{width:24px;height:auto;display:block}
.foot-logo{width:84px;height:84px;margin:0 auto}
.foot-logo img{width:62px;height:auto;display:block}
/* #5 gigi rides the LEFT corner */
.gigi-corner-left{right:auto;left:-34px;top:-52px}
@media(max-width:640px){.gigi-corner-left{left:2px;top:-40px}}
/* #9/#10 lowercase names in tan nimbus */
.agent-nim,.cn-nim{font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-weight:400;letter-spacing:0}
.agent-card .agent-nim{font-size:21px}
.cn-node .cn-nim{font-size:16px}
.cn-core .cn-nim{font-size:19px}
/* #6/#7 hover expands a node into the full card */
.cn-node,.cn-core{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.cn-full{display:none;text-align:left;margin-top:8px}
.cn-full i{display:block;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:5px}
.cn-full p{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.75);margin:0 0 7px}
.cn-full span{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lime);border:1px solid rgba(207,255,129,.35);
  border-radius:99px;padding:2px 7px;margin:0 3px 3px 0}
.cn-node:hover,.cn-node:focus-within,.cn-core:hover{transform:scale(1.06);z-index:30}
.cn-node:hover .cn-full,.cn-node:focus-within .cn-full,.cn-core:hover .cn-full{display:block}
.cn-node:hover,.cn-core:hover{background:var(--ink);border-color:rgba(207,255,129,.5);
  box-shadow:0 22px 50px rgba(0,0,0,.55);width:250px;max-width:none}
/* #13 the black disc: $200 inside, click to book */
.coach-disc{display:grid;place-content:center;text-align:center;gap:2px;
  width:250px;height:250px;border-radius:50%;background:var(--invert);
  border:1px solid rgba(207,255,129,.3);text-decoration:none;margin-left:auto;
  transition:transform .35s ease,box-shadow .35s ease}
.coach-disc:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 54px rgba(0,0,0,.5)}
.coach-disc b{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--lime)}
.coach-disc span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,244,236,.6)}
.coach-disc em{font-style:normal;margin-top:10px;font:700 13px var(--font-body);color:#fff;
  border-bottom:2px solid var(--lime);padding-bottom:2px;justify-self:center}
/* #15 the file tab: black with a lime underline */
.fc-tab{background:var(--ink);color:#fff;border-bottom:3px solid var(--lime)}
/* #16 names under the symbol-only marks */
.sup-named{flex-direction:column;gap:6px}
.sup-name{font-size:10.5px;letter-spacing:.06em;color:var(--text-muted)}

/* ---- round 9 (recovered pins) ------------------------------ */
.fcd-l{font:700 6px 'Montserrat',sans-serif;fill:rgba(255,255,255,.65);text-anchor:middle}
.agents-nim{font-family:var(--font-script),'TAN Nimbus',serif;text-transform:lowercase;
  font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:0;color:var(--lime)}
/* gigi overlays the left edge of her band */
.gigi-has-overlay{position:relative}
.gigi-overlay{position:absolute;left:-56px;top:-40px;width:190px;z-index:4;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.gigi-has-overlay .gigi-copy{padding-left:96px}
@media(max-width:900px){.gigi-overlay{left:-8px;top:-52px;width:120px}
  .gigi-has-overlay .gigi-copy{padding-left:0;padding-top:60px}}
/* the tile taglines from the reference */
.dma-tile em{display:block;font-style:italic;font-size:13px;font-weight:600;
  color:rgba(28,53,36,.85);margin:2px 0 7px}

/* ---- review round 10 --------------------------------------- */
/* (a3qs6c) agents title: agrandir grand, all caps */
.agents-caps{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(28px,3.4vw,46px);letter-spacing:-.01em;color:var(--text)}
/* (fyvb8n) core gigi spacing + every agent name in nimbus */
.cn-core .cn-gigi-plate{margin-bottom:12px}
.cn-core b,.cn-node b{font-family:var(--font-script),'TAN Nimbus',serif;
  text-transform:lowercase;font-weight:400;letter-spacing:0}
/* (upe1wi) the one gigi, bigger */
.gigi-overlay{width:240px;left:-64px;top:-56px}
.gigi-has-overlay .gigi-copy{padding-left:130px}
/* (tohmcu) the wallet: bigger, up a tad */
.wal12{max-width:460px;height:460px;margin-top:-26px}
.wal-logo{width:38px;height:38px}
.wal-logo img{width:29px}
/* (unrfx0) the centre plan rides higher */
.price-card.price-featured{transform:translateY(-16px)}
.price-card.price-featured:hover{transform:translateY(-20px)}
/* (40euc5) compare headers: agrandir caps (thead only; row labels stay) */
.compare thead th{font-family:var(--font-display);text-transform:uppercase;font-size:14px;
  letter-spacing:.04em;font-weight:400;color:var(--text)}
/* (npi5cn) coaching: bigger, centred */
.coaching-open{max-width:1060px;margin:0 auto;gap:64px}
.coaching-open .coaching-copy h2{font-size:clamp(30px,3.8vw,50px)}
.coaching-open .coaching-copy p{font-size:16px}
.coach-disc{width:280px;height:280px;justify-self:center;margin-left:0}
.coach-disc b{font-size:62px}
/* (u7ifvj) queue tiles arrive one by one */
.pw-enter .pathway-chip{opacity:0;transform:translateY(18px);
  animation:pwIn .55s cubic-bezier(.2,.9,.25,1) forwards}
.pw-enter .pathway-chip:nth-child(1){animation-delay:.05s}
.pw-enter .pathway-chip:nth-child(2){animation-delay:.2s}
.pw-enter .pathway-chip:nth-child(3){animation-delay:.35s}
.pw-enter .pathway-chip:nth-child(4){animation-delay:.5s}
.pw-enter .pathway-chip:nth-child(5){animation-delay:.65s}
@keyframes pwIn{to{opacity:1;transform:none}}
/* (gbnbjt) the closing mark: black g. on a lime disc, alone */
.foot-mark{display:grid;place-items:center;padding:34px 0 6px}
.foot-mark::before{content:none}
.foot-mark i{position:static;font-size:inherit}
.g-disc{width:96px;height:96px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;font:400 44px/1 var(--font-script),'TAN Nimbus',serif;
  color:#000;text-transform:lowercase}
.g-disc i{font-style:normal;color:#000;margin-left:2px}
/* (udfq6o) try a swipe + labeled varied emblems */
.try-swipe{font-family:var(--font-display);text-transform:uppercase;text-align:center;
  font-size:clamp(20px,2.4vw,30px);color:var(--text);margin:18px 0 4px}
.hme-l{font:700 6px 'Montserrat',sans-serif;fill:rgba(28,53,36,.6);text-anchor:middle}
/* the network band */
.network-band{background:var(--surface-2);border-top:1px solid var(--line)}
.net-grants{margin-top:14px;font-size:14px;color:var(--text-muted)}
.net-grid{display:grid;grid-template-columns:repeat(5,86px);gap:14px;justify-content:center;
  margin-top:34px}
.np{width:86px;height:86px;border-radius:50%;overflow:hidden;border:3px solid #fff;
  box-shadow:0 10px 26px rgba(0,0,0,.35);opacity:0;transform:scale(.5) translateY(20px)}
.np img{width:100%;height:100%;object-fit:cover;display:block}
.network-band.net-go .np{animation:npIn .6s cubic-bezier(.2,1.1,.3,1) calc(var(--i) * 70ms) forwards,
  npFloat 5s ease-in-out calc(var(--i) * -0.4s + 1.6s) infinite}
@keyframes npIn{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes npFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
@media(max-width:640px){.net-grid{grid-template-columns:repeat(4,72px);gap:10px}
  .np{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){
  .network-band .np{opacity:1;transform:none;animation:none}
  .pw-enter .pathway-chip{opacity:1;transform:none;animation:none}}

/* ================================================================
   Review round 5 - inner marketing pages
   ================================================================ */

/* pin (x6) · minimize green space. The section rhythm was 96px top and bottom
   on every band, which reads as dead green between blocks. */
.marketing-page .section { padding: 56px 0 !important; }
.marketing-page .page-hero { padding: 28px 0 20px !important; }
.marketing-page .page-hero .lede { margin-bottom: 0 !important; }
.marketing-page .section + .section { padding-top: 44px !important; }
@media (max-width: 860px) {
  .marketing-page .section { padding: 40px 0 !important; }
}

/* pin (x2) · these titles are not the brand kit. DM Serif is not a Gigsup face;
   the decorative role belongs to TAN Nimbus, always lowercase. */
.marketing-page .ws-h,
.marketing-page .lm-m51,
.marketing-page .lm-spring {
  font-family: var(--font-script) !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
}
/* pin · fix spacing for the section title */
.marketing-page .ws-h { margin: 0 0 18px !important; line-height: 1.12 !important; }

/* pin · too much lime on the features page, make the agent pills pink */
.marketing-page .agent-tools span {
  color: #3A1414 !important;
  background: var(--pink, #FFB9B8) !important;
  border-color: var(--pink, #FFB9B8) !important;
}

/* pin (x2) · logos bigger and in their own brand colours */
.marketing-page .logo-wall { gap: 34px !important; }
.marketing-page .sup-logo img,
.marketing-page .logo-wall img { height: 54px !important; width: auto !important;
  filter: none !important; opacity: 1 !important; }

/* pin · the signature is too big and should read handwritten */
.marketing-page .signature,
.marketing-page svg.signature,
.marketing-page .sig svg { max-width: 190px !important; height: auto !important; }
.marketing-page .sig-name { font-family: 'Pinyon Script', cursive !important;
  font-size: 30px !important; }
/* pin · name the diamond corners V I S I */
.marketing-page .vfd-ax { fill: rgba(239,244,236,.85); font-family: var(--font-display);
  font-size: 17px; letter-spacing: .04em; }

/* pin · the dot never actually moved: .explode.built .rise called @keyframes
   riseUp, which was not defined anywhere in the build. Define it, running
   bottom to top, and light each layer as the dot reaches it.
   Layers sit at 72, 50, 29 and 7 percent, so Data lights first and the agent
   team last. */
@keyframes riseUp {
  0%   { top: 88%; }
  100% { top: 6%; }
}
.marketing-page .explode.built .ex-lab {
  animation: exLight 5.2s cubic-bezier(.45,0,.55,1) infinite;
}
/* Data, bottom */
.marketing-page .explode.built .ex-lab:nth-of-type(4) { animation-delay: -5.2s; }
/* The instrument */
.marketing-page .explode.built .ex-lab:nth-of-type(3) { animation-delay: -3.9s; }
/* The living record */
.marketing-page .explode.built .ex-lab:nth-of-type(2) { animation-delay: -2.6s; }
/* The agent team, top */
.marketing-page .explode.built .ex-lab:nth-of-type(1) { animation-delay: -1.3s; }
@keyframes exLight {
  0%, 12%   { opacity: .38; }
  22%, 34%  { opacity: 1; }
  46%, 100% { opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-page .explode.built .rise { animation: none !important; top: 50% !important; }
  .marketing-page .explode.built .ex-lab { animation: none !important; opacity: 1 !important; }
}
/* pin · the signature reads as body text at full size. Pinyon Script is already
   loaded for the brand; the class in the markup is .sig-hand, not .sig-name. */
.marketing-page .sig-hand {
  font-family: 'Pinyon Script', cursive !important;
  font-size: 34px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
}

/* pin (x2) · colour scheme inconsistent with the rest of the site. The app sets
   data-theme="light" on the document, so --text resolved to dark ink while the
   marketing body stays dark forest. Headings and ledes were dark on dark.
   Sections that deliberately sit on a light panel keep their own colours. */
.marketing-page .page-hero h1,
.marketing-page > section:not(.on-light):not(.ws-dark) > .container > h2 {
  color: #EFF4EC !important;
}
.marketing-page .page-hero .eyebrow { color: var(--lime, #CFFF81) !important; }
.marketing-page .page-hero .lede { color: rgba(239,244,236,.78) !important; }