/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./assets/scss/main.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Operation Outbreak — Colors & Type
 * Source: nji-oo-styleguide-onesheet-r1.pdf (MAR 2025)
 * Typefaces: Manrope (display/body), Geist Mono (eyebrow/section head/pull quote)
 */
/* Manrope + Geist Mono are self-hosted variable fonts (OFL) — see fonts/. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — Indigo */
  --oo-indigo: #5A65E5; /* primary brand */
  --oo-indigo-light: #7387F9; /* primary tint */
  --oo-indigo-deep: #3F4AD1; /* primary shade */
  /* Secondary — Coral */
  --oo-coral: #FF7171;
  --oo-coral-mid: #ED5D5D;
  --oo-coral-deep: #DB3A3A;
  /* Tertiary — Violet & Mint accents */
  --oo-violet: #865AFF;
  --oo-mint-light: #86F7B9;
  --oo-mint: #58DBA6;
  --oo-mint-deep: #2AAD9A;
  /* Neutrals — from black to white */
  --oo-ink: #0B090A; /* near-black */
  --oo-graphite: #1F2528; /* deep slate */
  --oo-charcoal: #3A3E3F; /* secondary text */
  --oo-mist: #D3D3D3; /* hairline / divider */
  --oo-fog: #EFEFEF; /* surface alt */
  --oo-white: #FCFCFC; /* page */
  /* ---------- SEMANTIC TOKENS ---------- */
  --bg: var(--oo-white);
  --bg-alt: var(--oo-fog);
  --bg-inverse: var(--oo-graphite);
  --fg: var(--oo-ink);
  --fg-muted: var(--oo-charcoal);
  --fg-subtle: #6B7174;
  --fg-on-dark: var(--oo-white);
  --border: var(--oo-mist);
  --border-strong: var(--oo-charcoal);
  --accent: var(--oo-indigo);
  --accent-hover: var(--oo-indigo-deep);
  --accent-soft: var(--oo-indigo-light);
  --danger: var(--oo-coral-deep);
  --warning: var(--oo-coral);
  --success: var(--oo-mint-deep);
  /* ---------- GRADIENTS (approved combos only) ---------- */
  --grad-indigo: linear-gradient(135deg, #7387F9 0%, #5A65E5 50%, #3F4AD1 100%); /* @kind color */
  --grad-coral: linear-gradient(135deg, #FF7171 0%, #ED5D5D 55%, #DB3A3A 100%); /* @kind color */
  --grad-violet: linear-gradient(135deg, #865AFF 0%, #3A3E3F 100%); /* @kind color */
  --grad-mint: linear-gradient(135deg, #86F7B9 0%, #58DBA6 50%, #2AAD9A 100%); /* @kind color */
  --grad-ink: linear-gradient(135deg, #3A3E3F 0%, #1F2528 100%); /* @kind color */
  /* ---------- TYPE ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Per styleguide:
     Headline      → Manrope Light       (weight 300)
     Subhead       → Manrope Regular     (weight 400)
     Body          → Manrope Regular     (weight 400)
     Micro         → Manrope Regular     (weight 400)
     Eyebrow       → Geist Mono Regular  (weight 400, uppercase, tracked)
     Section Head  → Geist Mono Bold     (weight 700, uppercase)
     Pull Quote    → Geist Mono Regular  (weight 400)                          */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  /* Sizes — calibrated for 16px base */
  --fs-headline: clamp(40px, 5.5vw, 72px); /* @kind font */
  --fs-subhead: clamp(22px, 2.2vw, 28px); /* @kind font */
  --fs-section: 14px;
  --fs-eyebrow: 12px;
  --fs-body: 16px;
  --fs-pull: 20px;
  --fs-micro: 12px;
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-loose: 1.7; /* @kind font */
  --tracking-tight: -0.02em; /* @kind font */
  --tracking-normal: 0em; /* @kind font */
  --tracking-wide: 0.08em; /* @kind font */
  --tracking-wider: 0.14em; /* @kind font */
  /* ---------- SPACE / RADII / SHADOW ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 9, 10, 0.06), 0 1px 1px rgba(11, 9, 10, 0.04);
  --shadow-2: 0 4px 14px rgba(11, 9, 10, 0.08), 0 2px 4px rgba(11, 9, 10, 0.04);
  --shadow-3: 0 14px 40px rgba(11, 9, 10, 0.12), 0 4px 10px rgba(11, 9, 10, 0.06);
  --shadow-glow: 0 8px 24px rgba(90, 101, 229, 0.32);
}

/* ---------- BASE ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
.oo-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-headline);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.oo-subhead {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.oo-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.oo-section {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-section);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.oo-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.oo-pull {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-pull);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.oo-micro {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Element-level mapping */
h1 {
  font: var(--fw-light) var(--fs-headline)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font: var(--fw-light) clamp(28px, 3vw, 40px)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font: var(--fw-regular) var(--fs-subhead)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
}

h4 {
  font: var(--fw-bold) var(--fs-section)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p {
  font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Operation Outbreak — site shell. Two audience arms (data-arm), one visual treatment. */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  overflow-x: clip;
}

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

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

a:hover {
  color: var(--arm-text);
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: var(--oo-white);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
}

/* text-safe accents: the brand tokens are tuned for fills and rules, not for 11px type on white */
html {
  --txt-mint:#1B7A6E;
  --txt-coral:#BE2F2B;
  --txt-violet:#6A3FE0;
  --txt-indigo:#3F4AD1;
}

/* ---------- arm identity ---------- */
html {
  --arm-alt:var(--oo-mint-deep);
  --arm-alt-tint:#DDF6EA;
  --arm-ink:var(--oo-white);
  --arm-ink-deep:var(--oo-white);
  --arm-text:var(--arm);
  --arm:#5A65E5;
  --arm-deep:#3F4AD1;
  --arm-soft:#7387F9;
  --arm-tint:#E0E4FF;
  --arm-grad:var(--grad-indigo);
  --arm-glow:0 8px 24px rgba(90,101,229,.32);
}

html[data-arm=edu] {
  --arm:#865AFF;
  --arm-ink:var(--oo-ink);
  --arm-ink-deep:var(--oo-white);
  --arm-text:#6A3FE0;
  --arm-deep:#6A3FE0;
  --arm-soft:#A98BFF;
  --arm-tint:#EDE6FF;
  --arm-grad:var(--grad-violet);
  --arm-glow:0 8px 24px rgba(134,90,255,.3);
}

html[data-arm=pro] [data-when=edu] {
  display: none !important;
}

html[data-arm=edu] [data-when=pro] {
  display: none !important;
}

/* ---------- ground + arm tokens ---------- */
html {
  --hero-bg:linear-gradient(180deg,#FCFCFC 0%,#F5F5F5 100%);
  --hero-solid:#FCFCFC;
  --hero-fg:var(--oo-ink);
  --hero-dim:var(--oo-charcoal);
  --hero-line:var(--oo-mist);
  --alt-bg:var(--oo-fog);
  --alt-fg:var(--oo-ink);
  --alt-dim:var(--oo-charcoal);
  --alt-line:var(--oo-mist);
  --card-r:14px;
  --card-sh:none;
  --net-mode:light;
}

html[data-arm=pro] {
  --arm:#6A3FE0;
  --arm-text:#6A3FE0;
  --arm-deep:#5A34C4;
  --arm-soft:#865AFF;
  --arm-tint:#EDE6FF;
  --arm-grad:var(--grad-violet);
  --arm-glow:none;
  --arm-alt:var(--oo-mint-deep);
  --arm-alt-tint:#DDF6EA;
}

html[data-arm=edu] {
  --arm:var(--oo-mint-deep);
  --arm-ink:var(--oo-ink);
  --arm-ink-deep:var(--oo-white);
  --arm-text:#1B7A6E;
  --arm-deep:#1B7A6E;
  --arm-soft:var(--oo-mint);
  --arm-tint:#DDF6EA;
  --arm-alt:#6A3FE0;
  --arm-alt-tint:#EDE6FF;
  --arm-grad:var(--grad-mint);
  --arm-glow:none;
}

.netzone {
  border-bottom: none;
}

/* accents are emphasis, not fields: the CTA band goes near-black with an accent rule */
.netzone canvas {
  opacity: 0.8;
}

/* ---------- type helpers ---------- */
.eyebrow {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.eyebrow b {
  font-weight: 700;
  color: var(--arm-text);
}

.h-xl {
  font: 300 clamp(40px, 5.4vw, 74px)/1.03 var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
}

.h-lg {
  font: 300 clamp(30px, 3.6vw, 46px)/1.08 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}

.h-md {
  font: 300 clamp(22px, 2.1vw, 28px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}

.h-sm {
  font: 600 17px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0;
}

.lead {
  font: 300 clamp(17px, 1.35vw, 20px)/1.55 var(--font-display);
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0;
}

.body {
  font: 400 15px/1.6 var(--font-body);
  color: var(--fg-muted);
  margin: 0;
}

.mono {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--arm-tint);
  color: var(--arm-deep);
}

.tag--live {
  background: #FFE2E2;
  color: var(--txt-coral);
}

.tag--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
/* ---------- brand lockup ---------- */
.lock {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lock .mark {
  height: 24px;
  width: auto;
}

.lock .globe {
  height: 30px;
  width: 30px;
}

.lock .rule {
  width: 1px;
  height: 34px;
  background: currentColor;
  opacity: 0.28;
}

.lock .affil {
  font: 400 9.5px/1.6 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.66;
  white-space: nowrap;
}

.lock .affil b {
  font-weight: 400;
  opacity: 1;
}

.lock--lg .mark {
  height: 38px;
}

.lock--lg .globe {
  height: 55px;
  width: 55px;
}

.lock--lg .rule {
  height: 52px;
}

.lock--lg .affil {
  font-size: 12px;
  letter-spacing: 0.15em;
}

.lock--lg {
  gap: 18px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font: 600 14px/1 var(--font-display);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none;
}

.btn--primary {
  background: var(--arm);
  color: var(--arm-ink);
  box-shadow: var(--arm-glow);
}

.btn--primary:hover {
  background: var(--arm-deep);
  color: var(--oo-white);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.btn--outline:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn--onDark {
  background: transparent;
  color: var(--oo-white);
  border-color: rgba(252, 252, 252, 0.5);
}

.btn--onDark:hover {
  background: var(--oo-white);
  color: var(--oo-ink);
}

.btn--light {
  background: var(--oo-white);
  color: var(--oo-ink);
}

.btn--light:hover {
  transform: translateY(-1px);
  color: var(--oo-ink);
}

.btn--sm {
  padding: 10px 16px;
  font-size: 13px;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 252, 252, 0.9);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.hdr .wrap {
  max-width: 1920px;
}

.hdr .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 1061px) {
  .hdr .inner {
    height: 74px;
    flex-wrap: nowrap;
  }
}
.hdr .inner > a:first-child {
  flex: 0 0 auto;
}

.hdr .armsw, .hdr .btn {
  flex: 0 0 auto;
}

.hdr .lock {
  min-width: 0;
}

.hdr .lock {
  gap: 12px;
}

.hdr .lock .mark {
  height: 27px;
}

.hdr .lock .globe {
  height: 43px;
  width: 43px;
}

.hdr .armsw button {
  min-height: 38px;
  padding: 10px 18px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
}

.hdr .lock {
  color: var(--oo-ink);
}

.hdr .spacer {
  flex: 1;
}

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

.nav {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.nav a {
  font: 500 14.5px/1 var(--font-display);
  white-space: nowrap;
  letter-spacing: -0.005em;
  color: var(--fg);
  padding: 8px 0;
  border-bottom: 1.5px solid transparent;
}

.nav a:hover {
  color: var(--arm-deep);
}

.nav a[aria-current=page] {
  color: var(--arm-deep);
  border-bottom-color: var(--arm);
}

.nav {
  overflow: visible;
}

.navgrp {
  position: relative;
  display: flex;
}

.navtop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px 0;
  font: 500 14px/1 var(--font-display);
  color: var(--fg);
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
}

.navtop:hover, .navgrp:hover .navtop, .navtop[aria-expanded=true] {
  color: var(--arm-deep);
}

.navtop .cv {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms;
}

.navtop[aria-expanded=true] .cv {
  transform: rotate(225deg) translateY(-2px);
}

.navmenu {
  position: absolute;
  top: calc(100% + 16px);
  left: -14px;
  min-width: 252px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms, transform 160ms, visibility 160ms;
  z-index: 50;
}

.navgrp:hover .navmenu, .navtop[aria-expanded=true] + .navmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.navmenu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font: 500 13.5px/1.3 var(--font-display);
  color: var(--fg-muted);
  white-space: nowrap;
  border: none;
}

.navmenu a:hover {
  background: var(--oo-fog);
  color: var(--arm-deep);
}

.armsw {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: linear-gradient(180deg, #E3E4E5, #EFEFEF 62%, #F5F5F6);
  border: 1px solid #D2D4D5;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 2px 4px rgba(11, 9, 10, 0.17), inset 0 5px 9px rgba(11, 9, 10, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.95), 0 1px 0 rgba(255, 255, 255, 0.85);
}

.armsw button {
  border: none;
  background: transparent;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oo-charcoal);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.armsw button {
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
  .armsw button {
    transition: none;
  }
  .armsw button[aria-pressed=true], .armsw button[aria-pressed=true]:active {
    transform: none;
  }
}
.armsw button[aria-pressed=false] {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.armsw button[aria-pressed=false]:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(11, 9, 10, 0.1);
}

.armsw button[aria-pressed=true] {
  background: var(--arm-deep);
  color: var(--arm-ink-deep);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 46%, rgba(0, 0, 0, 0.15));
  box-shadow: 0 1px 1px rgba(11, 9, 10, 0.16), 0 2px 4px rgba(11, 9, 10, 0.2), 0 6px 12px -2px rgba(11, 9, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34);
  transform: translateY(-0.5px);
}

.armsw button[aria-pressed=true]:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(11, 9, 10, 0.12), inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

/* audience-agnostic pages keep the slot, so its absence never reads as an oversight */
.armsw--all {
  padding: 3px;
  cursor: default;
}

.armsw--all span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(115deg, #166257 0%, #33608F 52%, #6A3FE0 100%);
  box-shadow: 0 1px 1px rgba(11, 9, 10, 0.16), 0 2px 4px rgba(11, 9, 10, 0.2), 0 6px 12px -2px rgba(11, 9, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 3px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.36);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oo-white);
  white-space: nowrap;
}

.armsw--dark {
  background: linear-gradient(180deg, rgba(11, 9, 10, 0.36), rgba(11, 9, 10, 0.14));
  border-color: rgba(252, 252, 252, 0.2);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42), inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.armsw--dark button[aria-pressed=false] {
  color: rgba(252, 252, 252, 0.72);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.armsw--dark {
  background: linear-gradient(180deg, #E3E4E5, #EFEFEF 62%, #F5F5F6);
  border-color: #D2D4D5;
}

.armsw--dark button[aria-pressed=false] {
  color: var(--oo-charcoal);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.hdrcta {
  display: flex;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

.hdrcta .btn {
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .hdrcta {
    gap: 6px;
  }
  .hdrcta .btn {
    padding: 9px 12px;
    font-size: 12px;
  }
}
.burger {
  display: none;
  border: 1px solid var(--border);
  background: none;
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- hero ---------- */
.netzone {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-fg);
}

.netzone canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

.netzone > section:not(.ctaband) {
  position: relative;
  z-index: 1;
  background: transparent;
}

.netzone > section.ctaband {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-fg);
  overflow: hidden;
  isolation: isolate;
}

.netzone .hero {
  overflow: visible;
  isolation: auto;
}

.hero .lead a, .hero .body a {
  color: var(--hero-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hero .lead a:hover, .hero .body a:hover {
  color: var(--hero-fg);
  text-decoration-thickness: 2px;
}

.hero .btn--onDark {
  color: var(--hero-fg);
  border-color: var(--hero-line);
}

.hero .btn--onDark:hover {
  background: var(--hero-fg);
  color: var(--hero-solid);
  border-color: var(--hero-fg);
}

.hero .inner {
  padding-top: 96px;
  position: relative;
}

.hero .eyebrow {
  color: var(--hero-dim);
}

.hero .eyebrow b {
  color: var(--hero-fg);
}

.hero .h-xl {
  margin: 18px 0 20px;
  max-width: 19ch;
  color: var(--hero-fg);
}

.hero .h-xl em {
  font-style: italic;
  color: var(--arm-soft);
}

.hero .lead {
  color: var(--hero-dim);
  max-width: 52ch;
}

.hero .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero .grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.heroart {
  position: relative;
  margin-top: 8px;
}

.heroart .frame {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 32px;
  overflow: hidden;
  background: var(--grad-ink);
  box-shadow: 0 30px 70px rgba(11, 9, 10, 0.34);
}

.heroart .frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.heroart .frame--render {
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 34px 34px 0;
}

.heroart .frame--render img {
  width: auto;
  max-width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom;
     object-position: bottom;
  filter: drop-shadow(0 22px 44px rgba(11, 9, 10, 0.5));
}

.heroart .frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: var(--grad-coral);
}

/* an embedded player fills the frame, so the brand accent would sit on the footage */
.heroart .frame--embed::after {
  content: none;
}

.heroart--phones {
  position: relative;
  aspect-ratio: 1/1;
}

.heroart--phones .ph {
  position: absolute;
  width: 56%;
  height: auto;
  filter: drop-shadow(0 34px 60px rgba(11, 9, 10, 0.55));
}

.heroart--phones .ph-a {
  left: -8%;
  top: -2%;
  width: 66%;
  transform: rotate(-8deg);
  z-index: 1;
}

.heroart--phones .ph-b {
  right: 11%;
  bottom: 2%;
  width: 66%;
  transform: rotate(7deg);
  z-index: 2;
}

.heroart--phones .ph {
  filter: drop-shadow(0 28px 50px rgba(11, 9, 10, 0.28));
}

.heroart--phones .btnet {
  position: absolute;
  inset: -14% -12%;
  width: 124%;
  height: 128%;
  z-index: 0;
  pointer-events: none;
}

.heroart--phones .chip {
  left: 2%;
  bottom: 4%;
}

.heroart .chip {
  position: absolute;
  z-index: 5;
  left: 20px;
  bottom: 26px;
  background: rgba(11, 9, 10, 0.74);
  color: var(--oo-white);
  border: 1px solid rgba(252, 252, 252, 0.22);
  backdrop-filter: blur(6px);
}

/* ---------- arm doors (the tab) ---------- */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 56px 0 0;
  padding-bottom: 56px;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 22px 24px;
  border-radius: var(--card-r);
  border: 1.5px solid var(--hero-line);
  background: rgba(252, 252, 252, 0.05);
  color: var(--hero-fg);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.door {
  background: rgba(252, 252, 252, 0.7);
}

.door:hover {
  border-color: var(--hero-fg);
}

.door .k {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.door .t {
  font: 300 clamp(22px, 2vw, 28px)/1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.door .d {
  font: 400 13px/1.5 var(--font-body);
  opacity: 0.7;
  max-width: 34ch;
}

.door[aria-selected=true] {
  border-color: var(--arm);
  background: var(--arm);
  color: var(--arm-ink);
  box-shadow: var(--arm-glow);
}

.door[aria-selected=true] {
  background: var(--arm);
  color: var(--arm-ink);
}

.door[aria-selected=true] .k, .door[aria-selected=true] .d {
  opacity: 0.9;
}

.door .go {
  margin-top: 6px;
  font: 600 13px/1 var(--font-display);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 200ms;
}

.door[aria-selected=true] .go {
  opacity: 1;
  transform: none;
}

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hero-line);
  padding: 28px 0 36px;
}

.stats .n {
  font: 300 clamp(30px, 3.2vw, 44px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--hero-fg);
}

.stats .l {
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-dim);
  margin-top: 8px;
}

.sec .stats {
  border-top-color: var(--border);
}

.sec .stats .n {
  color: var(--fg);
}

.sec .stats .l {
  color: var(--fg-subtle);
}

/* ---------- sections ---------- */
.sec {
  padding: 96px 0;
  background: var(--bg);
  color: var(--fg);
}

.sec--alt {
  background: var(--alt-bg);
  color: var(--alt-fg);
}

.sec--alt .body, .sec--alt .lead {
  color: var(--alt-dim);
}

.sec--alt .eyebrow {
  color: var(--alt-dim);
}

.sec--dark {
  background: var(--oo-graphite);
  color: var(--oo-white);
}

.sec--dark .body, .sec--dark .lead {
  color: rgba(252, 252, 252, 0.72);
}

.sec--dark .eyebrow {
  color: rgba(252, 252, 252, 0.6);
}

.sechead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 44px;
}

/* Simulations' #what has a lead beside the heading; TTX shares the id with the
   heading alone, so :has(.lead) keeps the two-column split off TTX. */
#what .sechead:has(.lead) {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  align-items: start;
  -moz-column-gap: clamp(28px, 4vw, 64px);
       column-gap: clamp(28px, 4vw, 64px);
  row-gap: 16px;
}

#what .sechead:has(.lead) > div:first-child {
  grid-row: 1/span 2;
}

#what .sechead:has(.lead) > .lead {
  max-width: 64ch;
  margin-top: 0;
}

@media (max-width: 860px) {
  #what .sechead:has(.lead) {
    grid-template-columns: 1fr;
  }
  #what .sechead:has(.lead) > div:first-child {
    grid-row: auto;
  }
}
#what .sechead > div:first-child {
  flex-basis: auto;
  max-width: min(760px, 92%);
}

#what .h-lg {
  text-wrap: balance;
}

#series .sechead {
  align-items: flex-start;
}

#series .sechead .lead {
  margin-top: 0;
}

.sechead > div:first-child {
  flex: 1 1 clamp(300px, 36%, 440px);
  min-width: 0;
}

.sechead > .lead {
  flex: 1 1 46%;
  min-width: 0;
}

.sechead .h-lg {
  max-width: 24ch;
}

.sechead .lead {
  margin-top: 14px;
}

/* ---------- mission · continues the hero's dark ground, no seam ---------- */
.mission {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-fg);
  padding: 96px 0 104px;
}

.netzone .mission {
  overflow: visible;
  isolation: auto;
  background: transparent;
}

.mission .wrap {
  position: relative;
  z-index: 2;
}

.mission-rule {
  width: 132px;
  height: 3px;
  margin-bottom: 30px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--oo-mint) 0%, #3FB8C9 46%, var(--arm-soft) 100%);
}

.mission-rule i {
  display: none;
}

.mission .eyebrow {
  display: block;
  margin-bottom: 26px;
  color: var(--hero-dim);
}

.m-lead {
  font: 400 13px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hero-dim);
  max-width: 52ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.m-lead b {
  font-weight: 700;
  color: var(--hero-fg);
}

.m-lead b.nowrap {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .m-lead b.nowrap {
    white-space: normal;
  }
}
.m-big {
  font: 300 clamp(30px, 5vw, 66px)/1.08 var(--font-display);
  letter-spacing: -0.034em;
  color: var(--hero-fg);
  max-width: none;
  margin: 0;
  text-wrap: pretty;
}

.m-big em {
  font-style: normal;
  color: var(--arm-soft);
}

.m-sub {
  font: 300 clamp(16px, 1.4vw, 21px)/1.55 var(--font-display);
  color: var(--hero-dim);
  max-width: 58ch;
  margin: 40px 0 0;
  text-wrap: pretty;
}

.m-sub b {
  font-weight: 500;
  color: var(--hero-fg);
}

@media (max-width: 1100px) {
  .mission {
    padding: 72px 0 78px;
  }
  .m-big {
    line-height: 1.12;
  }
}
@media (max-width: 700px) {
  .mission {
    padding: 52px 0 62px;
  }
  .m-lead {
    font-size: 11.5px;
    letter-spacing: 0.05em;
    margin-bottom: 26px;
  }
  .m-big {
    font-size: 29px;
    line-height: 1.16;
    letter-spacing: -0.026em;
  }
  .m-sub {
    font-size: 16px;
    margin-top: 28px;
  }
}
/* ---------- cards ---------- */
.cards {
  display: grid;
  gap: 16px;
}

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

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

@media (max-width: 1100px) {
  .cards--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .cards--4 {
    grid-template-columns: 1fr;
  }
}
.cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: var(--card-r);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-sh);
}

.card .k {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arm-text);
}

.card .body {
  font-size: 14px;
}

.card ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card li {
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--fg-muted);
}

.sec--alt .card, .sec--dark .card {
  background: rgba(252, 252, 252, 0.05);
  border-color: var(--alt-line);
  color: inherit;
  box-shadow: none;
}

.sec--alt .card {
  background: var(--oo-white);
  border-color: var(--border);
}

.sec--alt .card li, .sec--dark .card li, .sec--alt .card .body, .sec--dark .card .body {
  color: inherit;
  opacity: 0.78;
}

.card--feature {
  background: var(--arm);
  border-color: var(--arm);
  color: var(--arm-ink);
  box-shadow: var(--arm-glow);
}

.card--feature .k, .card--feature .body, .card--feature li {
  color: var(--arm-ink);
  opacity: 0.92;
}

.card--img {
  padding: 0;
  overflow: hidden;
}

.card--img .pic {
  aspect-ratio: 16/10;
  background: var(--oo-fog);
  overflow: hidden;
}

.card--img .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.card--img .txt {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card .arrow {
  margin-top: auto;
  font: 600 13px/1 var(--font-display);
  color: var(--arm-text);
}

.sec--dark .card .arrow {
  color: var(--arm-soft);
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--alt-line);
}

.step {
  padding: 30px 28px 0 0;
  border-right: 1px solid var(--alt-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step:last-child {
  border-right: none;
}

.step:not(:first-child) {
  padding-left: 28px;
}

.step .n {
  font: 700 12px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-deep);
}

.sec .step .n {
  color: var(--arm-text);
}

.sec--dark .step .n {
  color: var(--arm-soft);
}

/* ---------- level compare ---------- */
.levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.level {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--card-r);
  border: 1px solid var(--border);
  background: var(--bg);
}

.level--2 {
  border-color: var(--arm);
  box-shadow: var(--card-sh);
}

.level .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.level .lvl {
  font-size: 0.52em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-subtle);
  vertical-align: baseline;
}

.level .price {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.level ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.level li {
  font: 400 14.5px/1.5 var(--font-body);
  color: var(--fg-muted);
}

.level .foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--arm-tint);
  color: var(--arm-deep);
  font: 400 12.5px/1.5 var(--font-body);
}

/* ---------- tools ---------- */
.tool {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 44px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid rgba(252, 252, 252, 0.14);
}

.tool:first-of-type {
  border-top: none;
}

.tool .shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(252, 252, 252, 0.16);
  background: #0B090A;
}

.tool .shot img {
  width: 100%;
}

.tool--flip .txt {
  order: 2;
}

/* ---------- cta band ---------- */
.ctaband {
  background: var(--arm-deep);
  color: var(--oo-white);
}

.ctaband .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- forms ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1/-1;
}

.field label {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oo-charcoal);
}

.sec--alt .field label, .sec--dark .field label {
  color: var(--alt-dim);
}

.sec--dark .field label {
  color: rgba(252, 252, 252, 0.78);
}

.field input, .field select, .field textarea {
  font: 400 15px/1.4 var(--font-body);
  color: var(--fg);
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--oo-white);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--arm);
  box-shadow: 0 0 0 3px var(--arm-tint);
}

.picks {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}

.pick {
  text-align: left;
  padding: 20px;
  border-radius: var(--card-r);
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pick:hover {
  border-color: var(--fg);
}

.pick[aria-pressed=true] {
  border-color: var(--arm);
  background: var(--arm-tint);
}

.pick .k {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arm-deep);
}

.sent {
  padding: 18px 20px;
  border-radius: var(--card-r);
  background: #DDF6EA;
  color: #1B6B5E;
  font: 400 14.5px/1.5 var(--font-body);
}

.sent .gform_confirmation_message {
  color: inherit;
}

/* ---------- deployment table ---------- */
.rows {
  border-top: 1px solid var(--border);
}

.rowline {
  display: grid;
  grid-template-columns: 0.55fr 1.3fr 0.8fr 0.6fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.rowline .y {
  font: 400 12px/1.6 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.rowline .w {
  font: 400 16px/1.4 var(--font-display);
  color: var(--fg);
}

.rowline .m {
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--fg-muted);
}

.rowline .c {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arm-deep);
}

.rowline--cmp {
  grid-template-columns: 0.9fr 1fr 1fr;
}

.rowline--head {
  border-bottom-width: 1.5px;
}

.rowline--head span {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}

.hero--sub .inner {
  padding-top: 76px;
  padding-bottom: 76px;
}

.qa {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 28px;
}

.qa:last-child {
  border-bottom: 1px solid var(--border);
}

@media (max-width: 1100px) {
  .qa {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* ---------- resources · textbook chapters ---------- */
.chapgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.chap {
  position: relative;
  display: block;
  aspect-ratio: 1979/2560;
  overflow: hidden;
  border-radius: var(--card-r);
  border: 1px solid var(--border);
  background: var(--oo-fog);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
}

.chap:hover {
  border-color: var(--arm);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 9, 10, 0.22);
}

.chap .cimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chap:hover .cimg {
  transform: scale(1.045);
}

.chap .cplate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 64px 18px 17px;
  background: linear-gradient(180deg, rgba(11, 9, 10, 0) 0%, rgba(11, 9, 10, 0.62) 42%, rgba(11, 9, 10, 0.92) 100%);
}

.chap .cn {
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.72);
}

.chap .ct {
  font: 600 15.5px/1.24 var(--font-display);
  letter-spacing: -0.012em;
  color: #FCFCFC;
  text-wrap: pretty;
}

/* ---------- resources · lesson library ---------- */
.lessontool {
  border: 1px solid var(--alt-line);
  border-radius: var(--card-r);
  background: var(--bg);
  overflow: hidden;
}

.lfilters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.lsearch input {
  width: 100%;
  font: 400 15px/1.4 var(--font-body);
  color: var(--fg);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--oo-white);
}

.lsearch input:focus {
  outline: none;
  border-color: var(--arm);
  box-shadow: 0 0 0 3px var(--arm-tint);
}

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

.lftop .lsearch {
  flex: 1 1 320px;
  min-width: 0;
}

.lsort {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.lsort label {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.lsort select {
  font: 400 13.5px/1.4 var(--font-body);
  color: var(--fg);
  padding: 11px 32px 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--oo-white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6063' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/11px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.lsort select:focus {
  outline: none;
  border-color: var(--arm);
  box-shadow: 0 0 0 3px var(--arm-tint);
}

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

.lseg {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--oo-white);
}

.segbtn {
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  padding: 9px 15px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  min-height: 36px;
}

.segbtn + .segbtn {
  border-left: 1px solid var(--border);
}

.segbtn:hover {
  background: var(--oo-fog);
  color: var(--fg);
}

.segbtn[aria-pressed=true] {
  background: var(--arm-deep);
  color: var(--oo-white);
}

.lseg--tiny .segbtn {
  padding: 7px 11px;
  font-size: 10px;
  min-height: 32px;
}

.lmatch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lmatch > span {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.lapplied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.lapplbl {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.lappills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.lappill {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--arm-deep);
  background: var(--arm-tint);
  color: var(--arm-deep);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font: 500 11px/1 var(--font-body);
  cursor: pointer;
  transition: background 0.14s;
}

.lappill i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
}

.lappill:hover {
  background: var(--oo-white);
}

.lappill:hover i {
  opacity: 1;
}

.lclearall {
  border: 0;
  background: none;
  color: var(--fg-muted);
  padding: 6px 2px;
  font: 500 11.5px/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lclearall:hover {
  color: var(--fg);
}

.ltagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tagchip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tagchip:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.tagchip[aria-pressed=true] {
  background: var(--arm-deep);
  border-color: var(--arm-deep);
  color: var(--oo-white);
}

.lcount {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.lcount b {
  color: var(--fg);
  font-weight: 700;
}

.ltable {
  background: var(--bg);
}

.lhead, .lrow {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1fr 0.9fr 1fr;
  gap: 22px;
  padding: 16px 24px;
  align-items: start;
}

.lhead {
  border-bottom: 1.5px solid var(--border);
}

.lhead span {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.lrow {
  border-bottom: 1px solid var(--border);
}

.lrow:last-of-type {
  border-bottom: none;
}

.lrow[hidden] {
  display: none;
}

.lrow:hover {
  background: var(--oo-fog);
}

.lc-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lcode {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--arm-text);
}

.ltitle {
  font: 500 15px/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
}

.ltitle:hover {
  color: var(--arm-deep);
  text-decoration: underline;
}

.ltopic {
  font: 400 12px/1.45 var(--font-body);
  color: var(--fg-subtle);
}

.lcc a, .lact a {
  font: 400 13.5px/1.45 var(--font-body);
  color: var(--arm-deep);
}

.lcc a:hover, .lact a:hover {
  text-decoration: underline;
}

.ldash {
  color: var(--oo-mist);
}

.ltags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ttag {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oo-charcoal);
  background: var(--oo-fog);
  border: 1px solid var(--border);
  padding: 5px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.lngss {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ncode {
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  border: 1px solid var(--border);
  padding: 5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.ncode:hover {
  border-color: var(--arm);
  color: var(--arm-deep);
}

.lempty {
  padding: 34px 24px;
  font: 400 15px/1.5 var(--font-body);
  color: var(--fg-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.lreset {
  border: 1px solid var(--fg);
  background: none;
  color: var(--fg);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-display);
  cursor: pointer;
}

.lreset:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ---------- resources · crash course ---------- */
.epgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ep {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 20px 20px;
  border: 1px solid var(--alt-line);
  border-radius: var(--card-r);
  background: rgba(252, 252, 252, 0.05);
  color: var(--oo-white);
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ep:hover {
  border-color: var(--arm-soft);
  transform: translateY(-2px);
  background: rgba(252, 252, 252, 0.09);
  color: var(--oo-white);
}

/* the YouTube still leads the card: full-bleed to the card edges, 16:9, with the play
   mark only appearing on hover so the grid stays quiet at rest */
.ethumb {
  position: relative;
  display: block;
  margin: 0 -20px 11px;
  border-radius: var(--card-r) var(--card-r) 0 0;
  overflow: hidden;
  background: var(--oo-fog);
  aspect-ratio: 16/9;
}

.ethumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.eplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 9, 10, 0.58);
  color: var(--oo-white);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eplay svg {
  width: 22px;
  height: 22px;
}

.ep:hover .eplay, .ep:focus-visible .eplay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ep .en {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--arm-soft);
}

.ep .et {
  font: 500 15px/1.32 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--oo-white);
  text-wrap: pretty;
}

.ep .eg {
  margin-top: auto;
  padding-top: 6px;
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.72);
}

.ep, .ep .et {
  color: var(--oo-ink);
}

.ep {
  background: var(--oo-white);
  border-color: var(--border);
}

.ep .eg {
  color: var(--fg-subtle);
}

.ep .en {
  color: var(--arm-deep);
}

.ep:hover {
  color: var(--oo-ink);
  border-color: var(--arm-deep);
}

@media (max-width: 1180px) {
  .chapgrid, .epgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1100px) {
  .lhead {
    display: none;
  }
  .lrow {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 22px;
  }
  .lcc::before, .lact::before, .ltags::before, .lngss::before {
    display: block;
    margin-bottom: 6px;
    font: 700 9.5px/1 var(--font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-subtle);
  }
  .lcc::before {
    content: "Crash Course";
  }
  .lact::before {
    content: "In-class activity";
  }
  .ltags::before {
    content: "Tags";
  }
  .lngss::before {
    content: "NGSS";
  }
  .ltags, .lngss {
    display: block;
  }
  .ltags .ttag, .lngss .ncode {
    display: inline-block;
    margin: 0 4px 4px 0;
  }
}
@media (max-width: 700px) {
  .chapgrid, .epgrid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ep {
    padding: 0 16px 16px;
  }
  .ethumb {
    margin: 0 -16px 9px;
  }
  .chap .cplate {
    padding: 52px 13px 13px;
  }
  .chap .ct {
    font-size: 13px;
  }
  .ep .et {
    font-size: 14px;
  }
  .lfilters {
    padding: 18px;
  }
  .lrow {
    padding: 18px;
  }
}
/* ---------- newsroom ---------- */
.rlead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--card-sh);
  margin-bottom: 44px;
  text-decoration: none;
}

.rlead .pic {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--oo-fog);
}

.rlead .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rlead:hover .pic img {
  transform: scale(1.03);
}

.rlead .txt {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.rlead .body {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--fg-muted);
}

.rlead .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rlead .d, .rrow .d {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.rlead .h-md {
  font-weight: 400;
  color: var(--fg);
  text-wrap: pretty;
}

.rlead:hover .h-md {
  color: var(--arm-deep);
}

.rlead .g, .rrow .g {
  font: 500 13px/1 var(--font-display);
  color: var(--arm-deep);
  white-space: nowrap;
}

.rrow {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 26px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.rrow .thumb {
  width: 132px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--oo-fog);
}

.rrow .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.rrow .col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rrow .t {
  font: 400 20px/1.3 var(--font-display);
  letter-spacing: -0.016em;
  color: var(--fg);
  text-wrap: pretty;
}

.rrow:hover .t {
  color: var(--arm-deep);
}

.rrow .s {
  font: 400 14px/1.6 var(--font-body);
  color: var(--fg-muted);
  max-width: 64ch;
}

.rrow .g {
  align-self: center;
}

@media (max-width: 940px) {
  .rlead {
    grid-template-columns: 1fr;
  }
  .rlead .txt {
    padding: 26px 24px 30px;
  }
  .rrow {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rrow .thumb {
    width: 100%;
    max-width: 280px;
  }
  .rrow .g {
    align-self: start;
  }
}
.rlist {
  border-top: 1px solid var(--border);
}

.subwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.subform {
  align-content: start;
}

.subnote {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subnote .card {
  padding: 20px 22px;
  gap: 8px;
}

@media (max-width: 940px) {
  .subwrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* ---------- press coverage ---------- */
.cvrgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cvr {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--bg);
  color: var(--fg);
  transition: border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cvr:hover {
  border-color: var(--arm);
  transform: translateY(-2px);
  color: var(--fg);
}

.cvr .logo {
  height: 18px;
  width: auto;
  max-width: 112px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left top;
     object-position: left top;
  align-self: flex-start;
}

.cvr .hl {
  font: 400 19px/1.3 var(--font-display);
  letter-spacing: -0.016em;
  color: var(--fg);
  text-wrap: pretty;
}

.cvr .meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 10.5px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.cvr .go {
  font: 600 12.5px/1 var(--font-display);
  color: var(--arm-text);
}

.awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.award {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--bg);
}

.award img {
  height: 38px;
  width: auto;
  max-width: 150px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  margin-bottom: 6px;
}

.award .ay {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.13em;
  color: var(--arm-text);
}

.award .an {
  font: 600 16px/1.3 var(--font-display);
  color: var(--fg);
}

.award .ad {
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--fg-muted);
}

.mlist {
  border-top: 1px solid var(--border);
}

.mrow {
  display: grid;
  grid-template-columns: 0.62fr 0.38fr 1.5fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}

.mrow:hover {
  color: var(--fg);
}

.mrow--head span {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg);
}

.mrow .o {
  font: 500 14.5px/1.4 var(--font-display);
  color: var(--fg);
}

.mrow .d {
  font: 400 11.5px/1.5 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.mrow .t {
  font: 400 14.5px/1.5 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.mrow .g {
  font: 600 14px/1 var(--font-display);
  color: var(--arm-text);
  opacity: 0;
  transition: opacity 160ms;
}

.mrow:hover .g {
  opacity: 1;
}

.mrow:hover .o, .mrow:hover .t {
  color: var(--arm-deep);
}

@media (max-width: 1100px) {
  .cvrgrid, .awards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 800px) {
  .cvrgrid, .awards {
    grid-template-columns: 1fr;
  }
  .mrow {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 18px 0;
  }
  .mrow--head {
    display: none;
  }
  .mrow .g {
    opacity: 1;
  }
}
/* ---------- press quotes, team, logos ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: var(--card-r);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-sh);
}

.quote .logo {
  height: 19px;
  width: auto;
  max-width: 118px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left top;
     object-position: left top;
  align-self: flex-start;
}

.quote .q {
  font: 400 14.5px/1.55 var(--font-mono);
  color: var(--fg);
  margin: 0;
}

.quote .who {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quote .who .n {
  font: 600 14px/1.3 var(--font-display);
  color: var(--fg);
}

.quote .who .o {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.logorow {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: center;
}

.logorow img {
  height: auto;
  max-height: 34px;
  max-width: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.member .pic {
  aspect-ratio: 1/1;
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--oo-fog);
}

.member .n {
  margin-top: 14px;
  font: 600 15px/1.3 var(--font-display);
  color: var(--fg);
}

.member .r {
  font: 400 10.5px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-top: 4px;
}

.member .b {
  font: 400 13px/1.55 var(--font-body);
  color: var(--fg-muted);
  margin-top: 9px;
}

.rowline--tl {
  grid-template-columns: 0.3fr 1fr;
}

/* story arc: four staged node-link panels on a spine */
.arc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 22px;
  border-top: 1px solid var(--border);
}

.stage {
  padding: 0 22px 0 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.stage:last-child {
  border-right: none;
  padding-right: 0;
}

.stage:not(:first-child) {
  padding-left: 22px;
}

.dgwrap {
  position: relative;
  margin: -1px 0 20px;
  padding-top: 26px;
}

.dgwrap::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arm);
  box-shadow: 0 0 0 4px var(--bg);
}

.dg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--oo-fog);
  border-radius: 12px;
}

.dg {
  background: #EFEFEF;
}

.dgcap {
  display: block;
  margin-top: 10px;
  font: 400 11px/1.45 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.arc--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 0 18px;
}

.arc--5 .stage {
  padding-right: 18px;
}

.arc--5 .stage:not(:first-child) {
  padding-left: 18px;
}

.stage .sy {
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--arm-text);
  margin-bottom: 7px;
}

.stage .sn {
  font: 600 16px/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 9px;
}

.stage .body {
  font-size: 14px;
}

.dgkey {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.dgkey span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.dgkey i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dgkey i.sq {
  border-radius: 1px;
}

@media (max-width: 1180px) {
  .arc--5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .arc--5 .stage:nth-child(3n) {
    border-right: none;
    padding-right: 0;
  }
  .arc--5 .stage:nth-child(n+4) {
    border-top: 1px solid var(--border);
    padding-top: 26px;
    margin-top: 26px;
  }
}
@media (max-width: 940px) {
  .arc, .arc--5 {
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .arc--5 .stage:nth-child(3n) {
    border-right: 1px solid var(--border);
    padding-right: 18px;
  }
  .arc--5 .stage:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }
  .arc--5 .stage:nth-child(n+3) {
    border-top: 1px solid var(--border);
    padding-top: 26px;
    margin-top: 26px;
  }
  .stage {
    padding: 0 18px 30px 0;
  }
  .stage:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }
  .stage:nth-child(n+3) {
    border-top: 1px solid var(--border);
    padding-top: 26px;
  }
}
@media (max-width: 700px) {
  .arc, .arc--5 {
    grid-template-columns: 1fr;
  }
  .arc--5 .stage:nth-child(3n) {
    border-right: none;
    padding-right: 0;
  }
  .stage, .stage:not(:first-child) {
    padding: 0 0 30px;
    border-right: none;
  }
  .stage:not(:first-child) {
    border-top: 1px solid var(--border);
    padding-top: 26px;
  }
  .dgkey {
    gap: 10px 20px;
  }
}
@media (max-width: 1100px) {
  .quotes {
    grid-template-columns: 1fr;
  }
  .team {
    grid-template-columns: 1fr 1fr;
  }
  .logorow {
    gap: 24px;
  }
}
.pullout {
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
}

.pullout p {
  font: 400 clamp(17px, 1.5vw, 21px)/1.5 var(--font-mono);
  color: var(--fg);
  margin: 0;
  max-width: 74ch;
  text-wrap: pretty;
}

/* ---------- funders: lead partner carries the weight ---------- */
.funders {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.lead-funder, .also-funders {
  display: flex;
  flex-direction: column;
  padding: 38px 40px;
  border-radius: var(--card-r);
  background: var(--oo-white);
  border: 1px solid var(--border);
}

.lead-funder {
  gap: 26px;
}

.lead-funder .k, .also-funders .k {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-text);
}

.lead-funder img {
  height: 88px;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

.lead-funder .body {
  color: var(--fg-muted);
  max-width: 58ch;
  margin: 0;
}

.also-funders {
  gap: 20px;
  justify-content: flex-start;
}

.also-funders .k {
  color: var(--fg-subtle);
}

.also-funders ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.also-funders li {
  font: 400 17px/1.3 var(--font-display);
  color: var(--fg);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.also-funders li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 1100px) {
  .funders {
    grid-template-columns: 1fr;
  }
  .lead-funder img {
    height: 70px;
  }
}
@media (max-width: 700px) {
  .lead-funder, .also-funders {
    padding: 26px;
  }
  .lead-funder img {
    height: 56px;
  }
}
/* ---------- partner / collaborator logo tiles ---------- */
.cologos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  margin-top: 4px;
}

.cologos img {
  max-width: 210px;
  max-height: 44px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

/* ---------- footer ---------- */
.ftr {
  background: var(--oo-graphite);
  color: var(--oo-white);
  padding: 64px 0 26px;
}

.ftrtop {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(252, 252, 252, 0.16);
}

.fcol {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.fcol--sub {
  gap: 14px;
}

.fcol--sub .body {
  color: rgba(252, 252, 252, 0.82);
  max-width: 40ch;
  margin: 0;
}

.fapps .eyebrow {
  color: rgba(252, 252, 252, 0.6);
  margin-bottom: 10px;
  display: block;
}

.fapps .badges {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fapps .badges img {
  height: 40px;
  width: auto;
  display: block;
}

.fsub {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.fsub input {
  flex: 1 1 220px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(252, 252, 252, 0.28);
  background: rgba(252, 252, 252, 0.06);
  color: var(--oo-white);
  font: 400 15px/1 var(--font-body);
}

.fsub input::-moz-placeholder {
  color: rgba(252, 252, 252, 0.5);
}

.fsub input::placeholder {
  color: rgba(252, 252, 252, 0.5);
}

.fsub input:focus-visible {
  outline: 2px solid var(--oo-white);
  outline-offset: 2px;
}

.fsub .sent {
  flex: 1 1 100%;
  font: 400 13px/1.5 var(--font-mono);
  color: #1B6B5E;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ftrbot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 26px;
}

.flinks, .fnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.flinks a, .fnav a {
  font: 400 13px/1.4 var(--font-body);
  color: rgba(252, 252, 252, 0.78);
  text-decoration: none;
}

.flinks a:hover, .fnav a:hover {
  color: var(--oo-white);
  text-decoration: underline;
}

.fcopy {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  color: rgba(252, 252, 252, 0.55);
}

@media (max-width: 940px) {
  .ftrtop {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/* ---------- store badges · official vector artwork from the live site ---------- */
.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.storebadge {
  display: block;
  line-height: 0;
  border-radius: 7px;
  transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.storebadge img {
  height: 42px;
  width: auto;
  display: block;
}

.storebadge:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.ftr .bot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(252, 252, 252, 0.16);
  font: 400 10.5px/1.6 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.5);
}

.ftr .bot .botlinks {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.ftr .bot a {
  font: inherit;
  color: rgba(252, 252, 252, 0.55);
}

.ftr .bot a:hover {
  color: var(--oo-white);
}

/* ---------- reveal ---------- */
/* .rev is inert: content visibility is never gated on script, scroll position or
   animation state. Motion here is confined to hover and the hero canvas. */
.rev, .rev.in {
  opacity: 1;
  transform: none;
}

/* ---------- responsive · widest first, mobile last ---------- */
@media (max-width: 1500px) {
  .nav {
    gap: 16px;
  }
  .nav a, .navtop {
    font-size: 13.5px;
  }
}
@media (max-width: 1160px) and (min-width: 1061px) {
  .nav {
    gap: 11px;
  }
  .nav a, .navtop {
    font-size: 12px;
  }
  .hdrcta .btn {
    padding: 8px 11px;
    font-size: 11px;
  }
}
/* the homepage header also carries the arm switch, so it needs more room */
@media (max-width: 1340px) and (min-width: 1061px) {
  .hdr .inner {
    gap: 12px;
  }
  .nav {
    gap: 12px;
  }
  .nav a {
    font-size: 12.5px;
  }
  .hdr .armsw button {
    padding: 9px 13px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 1019px) and (min-width: 820px) {
  .hdr .lock {
    gap: 10px;
  }
}
@media (max-width: 900px) {
  .hero .grid, .tool, .doors, .levels, .cards--3, .cards--2, .picks, .form, .steps {
    grid-template-columns: 1fr;
  }
  .heroart {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .step {
    border-right: none;
    border-bottom: 1px solid var(--alt-line);
    padding: 24px 0;
  }
  .step:not(:first-child) {
    padding-left: 0;
  }
  .sec {
    padding: 64px 0;
  }
  .tool--flip .txt {
    order: 0;
  }
  .sechead {
    flex-direction: column;
    align-items: flex-start;
  }
  .rowline {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ftrtop {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 700px) {
  .wrap {
    padding: 0 20px;
  }
  .hdr .inner {
    padding: 12px 20px;
    gap: 12px;
    row-gap: 14px;
  }
  .hdr .btn {
    display: none;
  }
  .hdr .lock .mark {
    height: 24px;
  }
  .hdr .lock .globe {
    height: 38px;
    width: 38px;
  }
  .armsw {
    order: 2;
    width: 100%;
  }
  .hdr .armsw button {
    flex: 1;
    min-height: 46px;
    padding: 14px 8px;
    font-size: 11px;
  }
  /* the agnostic pill is a span, so the flex rule above never reached it and it sat
     stranded at the left of the full-width track */
  .hdr .armsw--all span {
    flex: 1;
    justify-content: center;
    min-height: 46px;
  }
  .armsw button {
    min-height: 46px;
  }
}
@media (max-width: 700px) and (max-width: 340px) {
  .hdr .armsw {
    flex-wrap: wrap;
  }
  .hdr .armsw button {
    flex: 1 1 100%;
  }
}
@media (max-width: 700px) {
  .nav a {
    padding: 12px 0;
  }
  .btn {
    min-height: 46px;
  }
  .burger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px 14px;
  }
  .hero .inner {
    padding-top: 44px;
  }
  .hero .h-xl {
    margin: 14px 0 16px;
  }
  .h-xl {
    font-size: clamp(34px, 9vw, 44px);
  }
  .hero .row, .ctaband .row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero .row > span, .ctaband .row > span {
    display: block;
  }
  .hero .row .btn, .ctaband .row .btn, .level .foot .btn {
    width: 100%;
    justify-content: center;
  }
  .heroart {
    display: block;
    width: 290px;
    max-width: 100%;
    margin: 30px auto 0;
  }
  .heroart--phones .chip {
    left: 0;
    bottom: 0;
  }
  .doors {
    margin-top: 36px;
    padding-bottom: 40px;
    gap: 10px;
  }
  .door {
    padding: 18px 20px;
  }
  .stats {
    padding: 24px 0 30px;
  }
  .stats .n {
    font-size: 30px;
  }
  .sec {
    padding: 52px 0;
  }
  .sechead {
    margin-bottom: 30px;
  }
  .card, .quote {
    padding: 22px;
  }
  .level {
    padding: 24px;
  }
  .tool {
    padding: 26px 0;
    gap: 26px;
  }
  .team {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .ftr {
    padding: 56px 0 24px;
  }
  .ftrtop {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ftr .bot {
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
  }
  .qa {
    padding: 18px 0;
  }
}
.form--narrow {
  max-width: 720px;
}

/* ---------- homepage: fits one viewport ---------- */
.home {
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.6vh, 34px);
  padding: clamp(22px, 3.4vh, 46px) 0;
}

.home .hgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.home .h-xl {
  max-width: 26ch;
  margin: 0;
}

.home .lead {
  font-size: clamp(15px, 1.25vw, 19px);
  max-width: 46ch;
  margin-top: clamp(12px, 1.8vh, 20px);
}

.home .heroart--phones {
  aspect-ratio: auto;
  min-height: clamp(300px, 42vh, 430px);
  width: min(100%, 440px);
  margin: 0 auto;
  pointer-events: none;
  overflow: visible;
  align-self: start;
}

.home .heroart--phones .ph {
  pointer-events: none;
}

#main.onescreen {
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#main.onescreen .netzone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#main.onescreen .home {
  flex: 1 1 auto;
}

#main.onescreen .homeband {
  flex: 0 0 auto;
}

@media (max-width: 940px) {
  #main.onescreen {
    height: auto;
    overflow: visible;
  }
}
.home {
  min-height: 0;
}

.hstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(16px, 2.4vh, 26px) 0;
  border-top: 1px solid var(--hero-line);
  border-bottom: 1px solid var(--hero-line);
}

.hstats .n {
  font: 300 clamp(24px, 3vw, 42px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--hero-fg);
}

.hstats .l {
  font: 400 clamp(10px, 0.72vw, 10.5px)/1.35 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-dim);
  margin-top: 6px;
}

@media (max-width: 940px) {
  .home {
    padding: 44px 0;
  }
  .hstats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-height: 420px) {
  .home .heroart--phones {
    min-height: 240px;
  }
}
/* ---------- donate ---------- */
.dbox {
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--bg);
}

.dbox iframe, .dbox dbox-widget {
  display: block;
  width: 100%;
  border: 0;
}

.dbox dbox-widget {
  max-width: none !important;
  max-inline-size: none !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
}

.daddr {
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 2px solid var(--arm);
  background: var(--oo-fog);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: 400 14.5px/1.6 var(--font-mono);
  color: var(--fg);
}

.tbd {
  padding: 1px 7px;
  border-radius: 4px;
  background: #FFE2E2;
  color: #B32020;
  font-size: 0.9em;
}

.qa .body a {
  text-decoration: underline;
}

/* ---------- about: story chapters ---------- */
.story {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 52px);
}

.schap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
}

.schap .stxt {
  order: 2;
}

.schap .spic {
  order: 1;
}

.schap .sk {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-bottom: 12px;
}

.schap .h-md {
  margin-bottom: 12px;
}

.schap .arrow {
  display: inline-block;
  margin-top: 16px;
}

.spic {
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
}

.spic img {
  width: 100%;
  height: auto;
  display: block;
}

.story .spic img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}

.spic--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.spic--duo {
  grid-template-columns: 0.77fr 1.78fr;
}

.spic--duo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.spic--duo img + img {
  border-left: 1px solid var(--border);
}

@media (max-width: 940px) {
  .schap {
    grid-template-columns: 1fr;
  }
}
/* first section on a page with no hero */
.sec--first {
  padding-top: clamp(52px, 7vh, 86px);
}

/* story: numbered chapter separators */
.story {
  position: relative;
}

.story .schap {
  position: relative;
  padding-top: clamp(26px, 3.4vh, 44px);
}

.story .schap + .schap {
  border-top: none;
}

.story .schap .sk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.story .schap .sk::after {
  content: "";
  width: clamp(24px, 4vw, 58px);
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.story .schap.c1 .sk {
  color: var(--txt-mint);
}

.story .schap.c2 .sk {
  color: var(--txt-indigo);
}

.story .schap.c3 .sk {
  color: var(--txt-coral);
}

.story .schap.c4 .sk {
  color: var(--txt-violet);
}

.story .spic {
  background: transparent;
}

/* ---------- simulations: what-is + stages ---------- */
.whatgrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(26px, 3.6vw, 56px);
  align-items: center;
}

.wpic {
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
}

.wpic img {
  width: 100%;
  display: block;
}

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

.wlist li {
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--fg-muted);
  padding-left: 20px;
  border-left: 2px solid var(--arm);
}

.wlist b {
  color: var(--fg);
  font-weight: 600;
}

.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.stage--flip .stxt {
  order: 2;
}

.stage .sk {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.stage .sk::after {
  content: "";
  width: clamp(24px, 4vw, 58px);
  height: 1px;
  background: var(--arm);
  opacity: 0.55;
}

.stage .h-lg {
  margin-bottom: 16px;
}

@media (max-width: 940px) {
  .whatgrid, .stage {
    grid-template-columns: 1fr;
  }
  .stage--flip .stxt {
    order: 0;
  }
}
/* a page that serves one audience shows the pill, not a choice */
.armsw--locked {
  cursor: default;
}

.armsw--locked button {
  pointer-events: none;
  background: var(--arm-deep);
  color: var(--arm-ink-deep);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 46%, rgba(0, 0, 0, 0.15));
  box-shadow: 0 1px 1px rgba(11, 9, 10, 0.16), 0 2px 4px rgba(11, 9, 10, 0.2), 0 6px 12px -2px rgba(11, 9, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34);
}

/* ---------- about: mission lead ---------- */
.missionlead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.mpic {
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
}

.mpic img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

@media (max-width: 940px) {
  .missionlead {
    grid-template-columns: 1fr;
  }
}
/* ---------- about: mission + story panes ---------- */
.missionblock {
  max-width: 60ch;
}

.missionblock .h-xl {
  margin: 14px 0 24px;
}

.m-lead {
  font: 300 clamp(19px, 1.7vw, 26px)/1.5 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* enhanced / more-interactive pane reads as a distinct offer */
.sec--enh {
  background: color-mix(in oklch, var(--arm) 8%, var(--bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- team roster (Staff module) ---------- */
.tmgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 38px 32px;
}

.tm {
  display: flex;
  flex-direction: column;
}

.tmpic {
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--oo-fog);
  border: 1px solid var(--border);
  aspect-ratio: 1/1;
  margin-bottom: 16px;
}

.tmpic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.tmpic image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

.tmname {
  font: 600 20px/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.tmrole {
  font: 700 10.5px/1.5 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-top: 6px;
  text-wrap: balance;
}

.tmbio {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--fg-muted);
  margin: 12px 0 0;
}

.cofs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cof {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--bg);
  font: 600 19px/1.3 var(--font-display);
  letter-spacing: -0.01em;
}

@media (max-width: 1000px) {
  .tmgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cofs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tmgrid {
    grid-template-columns: 1fr;
  }
}
/* ---------- press + newsroom lists ---------- */
.rlist {
  border-top: 1px solid var(--border);
}

#media .rrow, #coverage .rrow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.rrow--link {
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
}

.rrow--link:hover {
  background: var(--oo-fog);
}

.rdate {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.rbody .h-md {
  margin: 0;
}

.routlet {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-top: 10px;
}

@media (max-width: 780px) {
  .rrow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* ---------- homepage: everything on the dark graphic ---------- */
.home {
  padding: clamp(30px, 5vh, 64px) 0 clamp(22px, 3vh, 36px);
}

.home .hgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.home .htxt {
  min-width: 0;
}

.home .h-xl {
  margin: 0;
}

.home .lead {
  margin-top: clamp(14px, 2vh, 22px);
  max-width: 56ch;
}

.home .heroart--phones {
  margin: 0;
  width: min(100%, 420px);
  max-height: none;
  justify-self: end;
  align-self: start;
}

.home .hstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(46px, 7vh, 86px);
  padding-top: clamp(30px, 4vh, 44px);
  border-top: 1px solid var(--hero-line);
  border-bottom: none;
}

.homedoors {
  background: var(--hero-bg);
  color: var(--hero-fg);
  padding: 0 0 clamp(34px, 5vh, 64px);
  position: relative;
  z-index: 2;
}

.homedoors .doors {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 900px) {
  .home .hgrid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .home .heroart--phones {
    justify-self: center;
    width: min(100%, 340px);
    margin-bottom: 14px;
  }
  .home .hstats {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 44px;
    padding-top: 32px;
  }
  .homedoors .doors {
    grid-template-columns: 1fr;
  }
  .homedoors .door .d {
    max-width: none;
  }
}
/* ---------- footer menu ---------- */
.fmenu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 34px;
  padding-top: 0;
  border-top: none;
}

.fmenu h2 {
  font: 400 10.5px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.5);
  margin: 0 0 14px;
}

.fmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fmenu a {
  font: 400 13.5px/1.4 var(--font-body);
  color: rgba(252, 252, 252, 0.82);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fmenu a:hover {
  color: var(--oo-white);
  text-decoration: underline;
}

@media (max-width: 940px) {
  .fmenu {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
    margin-top: 38px;
  }
}
@media (max-width: 520px) {
  .fmenu {
    grid-template-columns: 1fr;
  }
}
/* mission lead reads as prose, not a mono label */
.missionblock .m-lead {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- about: mission with a visual ---------- */
.missiongrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.missionblock {
  max-width: 56ch;
}

.missionpic {
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
  aspect-ratio: 4/3;
}

.missionpic image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 940px) {
  .missiongrid {
    grid-template-columns: 1fr;
  }
}
/* the phone pair reads as one image plate */
/* ---------- homepage audience doors ---------- */
.homedoors .doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  padding: 0;
}

.homedoors .door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid transparent;
  border-radius: var(--card-r);
  color: var(--oo-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.homedoors .door[data-arm-set=edu] {
  background: #DDF6EA;
  border-color: #B4E3D8;
}

.homedoors .door[data-arm-set=pro] {
  background: #EDE6FF;
  border-color: #D6C8FF;
}

.homedoors .door[data-arm-set=edu]:hover {
  background: #C9EBE2;
  border-color: #8FD6C6;
  transform: translateY(-2px);
}

.homedoors .door[data-arm-set=pro]:hover {
  background: #E2D6FF;
  border-color: #B99BFF;
  transform: translateY(-2px);
}

.homedoors .door .t {
  font: 600 clamp(19px, 1.7vw, 25px)/1.2 var(--font-display);
  letter-spacing: -0.015em;
}

.homedoors .door .d {
  font: 400 clamp(13.5px, 1vw, 15px)/1.6 var(--font-body);
  color: var(--fg-muted);
  max-width: none;
  flex: 1;
}

.homedoors .door {
  position: relative;
  overflow: hidden;
}

.homedoors .door .go {
  display: none;
}

.homedoors .door[aria-selected=true] .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 0;
  background: none;
  font: 700 italic 14.5px/1.4 var(--font-display);
  letter-spacing: -0.005em;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--oo-white);
}

/* ---------- app store badges · built in the site's own button vocabulary ---------- */
.fbadges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sbadge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(252, 252, 252, 0.34);
  background: transparent;
  color: var(--oo-white);
  text-decoration: none;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sbadge:hover {
  background: var(--oo-white);
  color: var(--oo-ink);
  border-color: var(--oo-white);
  transform: translateY(-1px);
}

.sbadge .gl {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.sbt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.sbk {
  font: 400 8.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.66;
}

.sbn {
  font: 600 14px/1 var(--font-display);
  letter-spacing: -0.01em;
}

/* ---------- about: alternating grounds ---------- */
.missionpic {
  background: var(--oo-white);
}

/* ---------- get involved: alternating accent per block ---------- */
html[data-arm=edu] .stage .sk {
  color: var(--arm-deep);
}

html[data-arm=edu] section:nth-of-type(even) .stage .sk {
  color: var(--txt-violet);
}

.hero .row {
  flex-wrap: wrap;
  gap: 10px;
}

.hero .row .btn {
  white-space: nowrap;
}

/* ---------- partner logo wall ---------- */
.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 80px);
}

.pcol .h-lg {
  margin: 0 0 32px;
}

.plogos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 36px;
  align-items: center;
  justify-items: center;
}

.plogos img {
  max-width: 100%;
  max-height: 74px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.2s, opacity 0.2s;
}

.plogos img:hover {
  filter: none;
  opacity: 1;
}

.plogos image-slot {
  display: block;
  width: 100%;
  aspect-ratio: 5/2;
}

@media (max-width: 900px) {
  .pgrid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}
@media (max-width: 560px) {
  .plogos {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
/* ---------- about: story on the tinted ground ---------- */
/* mission on a lighter tint than the standard alt ground */
#mission.sec--alt {
  background: linear-gradient(180deg, #FCFCFC 0%, #F2F2F2 100%);
}

#mission.sec--alt .missionpic {
  background: var(--oo-white);
  border-color: var(--border);
}

/* hero whose text column is a headline alone: centre it against the media */
.hero--single .grid {
  align-items: center;
}

.hero--single .grid > div:first-child > .h-xl {
  margin-block: 0;
}

.hero--single {
  padding-top: clamp(38px, 5vh, 64px);
  padding-bottom: clamp(38px, 5vh, 64px);
}

/* ---------- quick start: numbered steps ---------- */
.qsteps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.qstep {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.qn {
  font: 400 26px/1 var(--font-mono);
  color: var(--arm-deep);
  padding-top: 2px;
}

.qbody .h-sm {
  margin: 0 0 8px;
}

.qnote {
  margin: 10px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--arm);
  font: 400 14px/1.6 var(--font-body);
  color: var(--fg-subtle);
}

@media (max-width: 640px) {
  .qstep {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* ---------- homepage: phones drop below the top edge, still clear of the stats rule ---------- */
.home .heroart--phones {
  min-height: clamp(340px, 48vh, 500px);
  z-index: 3;
}

.home .h-xl {
  max-width: 30ch;
}

.home .h-xl .l2 {
  display: block;
  margin-top: 0.12em;
  color: var(--hero-dim);
}

@media (max-width: 900px) {
  .home .heroart--phones {
    transform: none;
  }
}
/* ---------- bento tiles: enhanced simulation, contact asks ---------- */
/* ---------- deployment card with a thumbnail ---------- */
.card--pic .cthumb {
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--oo-fog);
  margin-bottom: 18px;
}

.card--pic .cthumb image-slot, .card--pic .cthumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---------- contact: the ask bento ---------- */
@media (max-width: 900px) {
  .askbento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .askbento {
    grid-template-columns: 1fr;
  }
}
.vhfield {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* the footer lockup keeps its vertical rule on the graphite ground */
.ftr .lock .rule {
  display: block;
  align-self: center;
  opacity: 0.42;
}

@media (max-width: 700px) {
  .ftr .lock--lg {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ftr .lock--lg .affil {
    white-space: normal;
    flex: 1 1 100%;
  }
  .ftr .lock--lg .rule {
    display: none;
  }
}
/* homepage phones: one locked pair, oversized, hanging past the stats rule */
.home .heroart--phones {
  position: relative;
  overflow: visible;
  z-index: 3;
}

.home .heroart--phones .ph {
  width: 66%;
  height: auto;
}

.home .heroart--phones .ph-a {
  left: -4%;
  top: 2%;
  transform: rotate(-8deg);
}

.home .heroart--phones .ph-b {
  right: -2%;
  top: 10%;
  bottom: auto;
  transform: rotate(7deg);
}

.home .hstats {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .home .heroart--phones {
    min-height: clamp(260px, 38vh, 360px);
  }
  .home .heroart--phones .ph {
    width: 64%;
  }
  .home .heroart--phones .ph-b {
    top: 12%;
  }
}
/* ---- 2 · LOGO: globe tight to the wordmark, footer rule restored ---- */
.lock {
  gap: 9px;
}

.lock--lg {
  gap: 12px;
}

.hdr .lock {
  gap: 8px;
}

.lock .rule {
  margin-left: 5px;
}

.ftr .lock--lg .rule {
  display: block;
  align-self: center;
  height: 52px;
  opacity: 0.42;
}

.ftr .lock--lg {
  flex-wrap: nowrap;
  gap: 12px;
}

.ftr .lock--lg .affil {
  white-space: normal;
  flex: 0 1 auto;
}

@media (max-width: 700px) {
  .ftr .lock--lg {
    flex-wrap: wrap;
  }
  .ftr .lock--lg .affil {
    flex: 1 1 100%;
  }
  .ftr .lock--lg .rule {
    display: none;
  }
}
/* ---- 3 · door mission line ---- */
/* ---------- image carousel ---------- */
.carousel {
  min-width: 0;
}

.cslides {
  position: relative;
  border-radius: var(--card-r);
  overflow: hidden;
  background: none;
  aspect-ratio: 4/3;
}

.cslide {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9%;
  right: 9%;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
  z-index: 2;
}

.cslide[data-prev], .cslide[data-next] {
  opacity: 0.34;
  z-index: 1;
  pointer-events: none;
}

.cslide[data-prev] {
  transform: translateX(-46%) scale(0.9);
}

.cslide[data-next] {
  transform: translateX(46%) scale(0.9);
}

.cslide[data-prev] figcaption, .cslide[data-next] figcaption {
  display: none;
}

.cslide[data-on] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 3;
}

.cslide img, .cslide image-slot {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.cnav .cbtn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.cnav .cbtn:hover {
  border-color: var(--arm);
  background: var(--oo-fog);
}

.sec--enh .cslide {
  border-color: rgba(252, 252, 252, 0.18);
  background: rgba(252, 252, 252, 0.06);
}

.sec--enh .cnav .cbtn {
  border-color: rgba(252, 252, 252, 0.28);
  background: transparent;
  color: var(--alt-fg);
}

/* bento tiles sit level once the sub copy is gone */
.askbento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 38px;
}

.pick--ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 104px;
  justify-content: center;
  text-align: left;
  padding: 20px 22px;
}

.pick--ask .pre {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.pick--ask .act {
  font: 600 clamp(15px, 1.15vw, 18px)/1.3 var(--font-display);
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .askbento {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .askbento {
    grid-template-columns: 1fr;
  }
}
/* per-arm section shading: alternation holds in either arm */
html[data-arm=pro] .sec[data-shade~=pro], html[data-arm=edu] .sec[data-shade~=edu] {
  background: var(--alt-bg);
  color: var(--alt-fg);
}

html[data-arm=pro] .sec[data-shade~=pro] .lead, html[data-arm=edu] .sec[data-shade~=edu] .lead,
html[data-arm=pro] .sec[data-shade~=pro] .body, html[data-arm=edu] .sec[data-shade~=edu] .body {
  color: var(--alt-dim);
}

html[data-arm=pro] .sec[data-shade~=pro] .card, html[data-arm=edu] .sec[data-shade~=edu] .card {
  background: var(--oo-white);
  border-color: var(--border);
}

/* the mission sits under the arm lead, set apart but part of the same column */
.home .lead--mission {
  margin-top: clamp(10px, 1.4vh, 14px);
  max-width: 52ch;
}

/* per-arm media side: alternation holds down either arm's own sequence */
html[data-arm=pro] .stage[data-flip~=pro] .stxt, html[data-arm=edu] .stage[data-flip~=edu] .stxt {
  order: 2;
}

html[data-arm=pro] .stage[data-flip~=pro] .spic, html[data-arm=edu] .stage[data-flip~=edu] .spic,
html[data-arm=pro] .stage[data-flip~=pro] .carousel, html[data-arm=edu] .stage[data-flip~=edu] .carousel {
  order: 1;
}

@media (max-width: 940px) {
  .stage[data-flip] .stxt, .stage[data-flip] .spic, .stage[data-flip] .carousel {
    order: 0;
  }
}
/* ---------- selected state resolves from the arm, not from aria (no first-paint flash) ---------- */
html[data-arm=pro] .armsw button[data-arm-set=edu], html[data-arm=edu] .armsw button[data-arm-set=pro] {
  background: linear-gradient(180deg, #FFF, #F1F1F2);
  background-image: linear-gradient(180deg, #FFF, #F1F1F2);
  box-shadow: 0 1px 2px rgba(11, 9, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--oo-charcoal);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-arm=pro] .armsw--dark button[data-arm-set=edu], html[data-arm=edu] .armsw--dark button[data-arm-set=pro] {
  color: var(--oo-charcoal);
}

html[data-arm=pro] .armsw button[data-arm-set=pro], html[data-arm=edu] .armsw button[data-arm-set=edu] {
  background: var(--arm-deep);
  color: var(--arm-ink-deep);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 46%, rgba(0, 0, 0, 0.15));
  box-shadow: 0 3px 7px rgba(11, 9, 10, 0.3), 0 1px 2px rgba(11, 9, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.24);
  text-shadow: none;
  transform: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  transform: translateY(-0.5px) scale(1.01);
}

html[data-arm=pro] .door[data-arm-set=edu], html[data-arm=edu] .door[data-arm-set=pro] {
  background: var(--bg);
  color: var(--fg);
  box-shadow: none;
}

html[data-arm=edu] .homedoors .door[data-arm-set=pro] {
  background: #EDE6FF;
  border-color: #D6C8FF;
  color: var(--oo-ink);
  box-shadow: none;
}

html[data-arm=pro] .homedoors .door[data-arm-set=edu] {
  background: #DDF6EA;
  border-color: #B4E3D8;
  color: var(--oo-ink);
  box-shadow: none;
}

html[data-arm=edu] .homedoors .door[data-arm-set=edu] {
  background: #1B7A6E;
  border-color: #1B7A6E;
  color: var(--oo-white);
  box-shadow: var(--arm-glow);
}

html[data-arm=pro] .homedoors .door[data-arm-set=pro] {
  background: #5A34C4;
  border-color: #5A34C4;
  color: var(--oo-white);
  box-shadow: var(--arm-glow);
}

html[data-arm=edu] .homedoors .door[data-arm-set=edu] .t, html[data-arm=pro] .homedoors .door[data-arm-set=pro] .t {
  color: var(--oo-white);
}

html[data-arm=edu] .homedoors .door[data-arm-set=edu] .d, html[data-arm=pro] .homedoors .door[data-arm-set=pro] .d {
  color: rgba(252, 252, 252, 0.88);
}

html[data-arm=pro] .homedoors .door[data-arm-set=edu] .go, html[data-arm=edu] .homedoors .door[data-arm-set=pro] .go {
  display: none;
}

html[data-arm=edu] .homedoors .door[data-arm-set=edu] .go, html[data-arm=pro] .homedoors .door[data-arm-set=pro] .go {
  display: inline-flex;
}

/* sechead stacks at the same width the stage and whatgrid do */
@media (max-width: 940px) {
  .sechead {
    flex-direction: column;
    align-items: flex-start;
  }
  .sechead > div:first-child, .sechead > .lead {
    flex: 1 1 auto;
  }
}
/* carousel: neighbours stay solid and are shaded back, so the front slide reads clearly */
.cslide[data-prev], .cslide[data-next] {
  opacity: 0.34;
}

.cslide[data-on] {
  background: var(--oo-white);
}

.sec--enh .cslide[data-on] {
  background: var(--alt-bg);
}

/* ---------- competition: mission module resources ---------- */
.opvid {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(252, 252, 252, 0.2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #FCFCFC;
  transition: border-color 0.16s, background 0.16s;
}

.opvid:hover {
  border-color: var(--arm);
  background: rgba(252, 252, 252, 0.05);
}

.opvid .vic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--arm-soft);
}

.opvid .vic svg {
  width: 100%;
  height: 100%;
}

.opvid .vtx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 400 13px/1.45 var(--font-body);
  color: rgba(252, 252, 252, 0.72);
}

.opvid .vtx b {
  font: 600 15px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: #FCFCFC;
}

.opdel {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-left: 2px solid var(--arm);
  background: rgba(252, 252, 252, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.opdel .mono {
  display: block;
  margin-bottom: 10px;
}

.opdel ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opdel li {
  font: 400 14.5px/1.5 var(--font-body);
  color: rgba(252, 252, 252, 0.78);
}

.op--locked .opvid {
  border-color: rgba(252, 252, 252, 0.14);
}

/* ---------- competition: now-open callout ---------- */
.opnow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  padding: 18px 22px;
  border: 1px solid var(--arm);
  border-radius: var(--radius-md);
  background: rgba(88, 219, 166, 0.1);
  text-decoration: none;
  color: #FCFCFC;
  transition: background 0.16s;
}

.opnow:hover {
  background: rgba(88, 219, 166, 0.18);
}

.opnow .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arm);
  box-shadow: 0 0 0 5px rgba(88, 219, 166, 0.22);
}

.opnow .ont {
  flex: 1;
  font: 400 15px/1.55 var(--font-body);
  color: rgba(252, 252, 252, 0.82);
}

.opnow .ont b {
  color: #FCFCFC;
  font-weight: 600;
}

.opnow .onx {
  flex: 0 0 auto;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--arm);
}

@media (max-width: 700px) {
  .opnow {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
/* unlock interaction */
.opvid[data-unlock] {
  flex-wrap: wrap;
}

.opvid .vsub {
  display: block;
  font: 400 13px/1.45 var(--font-body);
  color: rgba(252, 252, 252, 0.66);
}

.opvid .vplay {
  display: flex;
  flex: 1 1 100%;
  text-decoration: none;
  color: inherit;
}

.opvid[data-open] {
  border-color: var(--arm);
  background: rgba(88, 219, 166, 0.08);
}

.opvid[data-open] .vic {
  color: var(--arm);
}

/* competition hero: stats sit directly under the copy, no divider */
.hero--mission .stats {
  border-top: 1px solid var(--hero-line);
  margin-top: 34px;
  padding-top: 34px;
}

.hero--mission .row {
  margin-bottom: 0;
}

/* ---------- one continuous ground for the whole page ----------
   A single field is painted on <body>, fixed to the viewport, with three orbs on
   different scroll multipliers. Sections are transparent, so nothing restarts at a
   boundary and the parallax reads as one plane from top to bottom. */
:root {
  --sy:0px;
}

body {
  position: relative;
  background: linear-gradient(158deg, color-mix(in oklab, var(--arm-tint) 74%, #FCFCFC) 0%, #FCFCFC 42%, #FCFCFC 62%, color-mix(in oklab, var(--arm-alt-tint) 68%, #FCFCFC) 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(40vw 40vw at 50% 50%, color-mix(in oklab, var(--arm) 22%, transparent) 0%, transparent 64%), radial-gradient(32vw 32vw at 50% 50%, color-mix(in oklab, var(--arm-alt) 20%, transparent) 0%, transparent 66%), radial-gradient(60vw 60vw at 50% 50%, color-mix(in oklab, var(--arm-alt) 10%, transparent) 0%, transparent 72%);
  background-size: 82vw 82vw, 64vw 64vw, 120vw 120vw;
  background-position: calc(-16vw + var(--sy) * -0.14) calc(-10vh + var(--sy) * 0.26), calc(72vw + var(--sy) * 0.09) calc(46vh + var(--sy) * -0.17), calc(24vw + var(--sy) * 0.04) calc(6vh + var(--sy) * 0.08);
}

/* sections carry no ground of their own — the page field shows through unbroken */
.sec, .hero--sub, .netzone, .homedoors {
  background: transparent;
}

.sec--alt {
  background: transparent;
}

.sec::after, .hero--sub::after, .netzone::before {
  content: none;
}

.sec + .sec::before {
  content: none;
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  :root {
    --sy:0px !important;
  }
  body::before {
    position: absolute;
  }
}
.sec--first .wrap, .hero--sub .wrap {
  position: relative;
  z-index: 1;
}

.story .schap {
  position: relative;
  z-index: 1;
}

.sec--dark {
  background: var(--grad-ink);
}

.sec--enh {
  background: transparent;
}

.sec--enh .cslide {
  border-color: var(--border);
  background: var(--oo-fog);
}

.sec--enh .cnav .cbtn {
  border-color: var(--border);
  background: var(--bg);
  color: var(--fg);
}

.sec--enh .cslide[data-prev]::after, .sec--enh .cslide[data-next]::after {
  background: rgba(11, 9, 10, 0.55);
}

.netzone canvas {
  z-index: 0;
}

.netzone > section:not(.ctaband) {
  position: relative;
  z-index: 1;
  background: transparent;
}

.netzone > section.ctaband {
  position: relative;
  z-index: 1;
}

/* no light band paints its own ground — the body field is the only one */
.sec--alt, html[data-arm=pro] .sec[data-shade~=pro], html[data-arm=edu] .sec[data-shade~=edu] {
  background: transparent;
}

html[data-arm=pro] .sec[data-shade~=pro] .card, html[data-arm=edu] .sec[data-shade~=edu] .card {
  background: var(--oo-white);
  border-color: var(--border);
}

/* homepage headline: styleguide Headline role — Manrope Light, opened up */
.home .h-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 4.1vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: none;
  white-space: normal;
}

.home .h-xl::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--arm), var(--arm-alt));
}

@media (max-width: 940px) {
  .home .h-xl {
    max-width: none;
  }
}
/* the operative verb carries the arm's own colour */
.home .h-xl b {
  font-weight: 500;
  color: var(--arm-text);
}

/* home: Who we are paired with the metrics, inside the dark graphic */
.hwho {
  border-top-color: var(--border) !important;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(26px, 4vh, 48px);
  padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid var(--hero-line);
  align-items: start;
}

.hwho .sk {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-bottom: 12px;
}

.hwho .h-md {
  color: var(--hero-fg);
  margin: 0 0 12px;
  max-width: 30ch;
}

.hwho .body {
  color: var(--hero-dim);
  max-width: 58ch;
  margin: 0;
}

.hwho .hstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  border: none;
  align-content: start;
}

.hwho {
  align-items: start;
}

.hwho .hstats {
  margin-top: 23px;
}

.hwho .btn {
  margin-top: 20px;
}

.door .go i {
  font-style: normal;
  transition: transform 0.18s;
}

.door:hover .go i {
  transform: translateX(3px);
  display: inline-block;
}

@media (max-width: 940px) {
  .hwho {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
/* About is audience-agnostic: both accents in the ground, and a distinct closing band */
/* even horizontal rhythm on the story chapters */
.story .schap .stxt {
  padding-right: clamp(0px, 2vw, 28px);
}

/* ---------- Explore: offering cards with imagery ---------- */
.hero--explore {
  padding-bottom: clamp(40px, 5vh, 72px);
}

.sec--offer {
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--oo-fog) 70%, transparent);
}

.ocards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(18px, 2.4vw, 28px);
}

.ocard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s;
}

.ocard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* min-height:auto would let a tall image's intrinsic size override the ratio, so cards
   carrying differently-proportioned photos ended up different heights */
.opic {
  aspect-ratio: 16/10;
  min-height: 0;
  background: var(--oo-fog);
  border-bottom: 1px solid var(--border);
}

/* a video poster frame is composed wider than a photograph, so its subject reads smaller
   in the same box — this crops in to match the photographic cards beside it */
.opic--zoom {
  overflow: hidden;
}

.opic--zoom img {
  transform: scale(1.42);
  transform-origin: 50% 44%;
}

.opic image-slot, .opic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.otxt {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
}

.otxt .k {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arm-deep);
  margin-bottom: 12px;
}

.otxt .h-md {
  margin: 0 0 10px;
}

.otxt .body {
  margin: 0 0 20px;
}

.otxt .btn {
  margin-top: auto;
}

.ctaband--slim {
  padding: clamp(26px, 3.4vh, 40px) 0;
}

.slimband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.slimband .h-md, .slimband .body {
  color: var(--hero-fg);
}

.slimband .body {
  color: var(--hero-dim);
}

@media (max-width: 640px) {
  .slimband {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* even vertical rhythm on the stage sections, and the core list top-aligns */
.stage {
  align-items: center;
}

.wlist {
  justify-content: flex-start;
  align-self: start;
}

.sec .stage .stxt {
  align-self: center;
}

/* Contact: "Help me…" once, above an icon bento */
.asklead {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}

.pick--ask {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

.pick--ask .ai {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--arm-tint);
  color: var(--arm-deep);
  flex: 0 0 auto;
}

.pick--ask .ai svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pick--ask[aria-pressed=true] .ai {
  background: var(--arm);
  color: var(--arm-ink);
}

.pick--ask .act {
  font-weight: 600;
}

/* Ambassadors: even rhythm and consistent media treatment */
body[data-lock-arm] .sec {
  padding-top: clamp(52px, 6.5vh, 88px);
  padding-bottom: clamp(52px, 6.5vh, 88px);
}

body[data-lock-arm] .stage {
  gap: clamp(30px, 4vw, 68px);
}

body[data-lock-arm] .spic img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

body[data-lock-arm] .wlist {
  gap: 16px;
}

/* Story chapters: solid cards with a colour edge, wherever the module is used */
.story {
  gap: clamp(20px, 2.6vh, 30px);
}

.story .schap {
  background: var(--oo-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--card-r);
  padding: clamp(28px, 3.4vh, 44px) clamp(26px, 3vw, 44px);
  box-shadow: var(--shadow-1);
}

.story .schap.c1 {
  border-left-color: var(--oo-mint-deep);
}

.story .schap.c2 {
  border-left-color: var(--oo-indigo, #3F4AD1);
}

.story .schap.c3 {
  border-left-color: var(--oo-coral-deep);
}

.story .schap.c4 {
  border-left-color: var(--oo-violet);
}

.story .spic {
  background: var(--oo-fog);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}

.missionpic, .sec--now .spic {
  background: var(--oo-white);
  box-shadow: var(--shadow-2);
}

/* homepage: What we offer head above the audience doors */
.sechead--doors {
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  padding-top: clamp(24px, 3.4vh, 40px);
  border-top: 1px solid var(--hero-line);
}

.sechead--doors .eyebrow {
  color: var(--arm-deep);
  display: inline-block;
}

.sechead--doors .h-md {
  color: var(--hero-fg);
  margin: 8px 0 0;
  max-width: 26ch;
}

/* solid arm-coloured buttons, one per audience */
.btn--arm {
  color: var(--oo-white);
  border: 1px solid transparent;
}

.btn--arm:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.btn--arm-edu {
  background: #1B7A6E;
}

.btn--arm-pro {
  background: #5A34C4;
}

/* matches the pressed arm switch: deep arm fill with the same gradient sheen and inset */
.btn--arm3d {
  background: linear-gradient(115deg, #166257 0%, #33608F 52%, #6A3FE0 100%);
  color: var(--oo-white);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(11, 9, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn--arm3d:hover {
  filter: brightness(1.06);
}

.btn--arm3d:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(11, 9, 10, 0.12), inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .btn--arm3d {
    transition: none;
  }
  .btn--arm3d:active {
    transform: none;
  }
}
.daddr {
  background: transparent;
}

.card {
  border-color: var(--border);
}

/* Our Team: white card per person */
.tm {
  background: var(--oo-white);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.18s, transform 0.18s;
}

.tm:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.tmpic {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.tmname {
  padding: 20px 22px 0;
}

.tmrole {
  padding: 0 22px;
}

.tmbio {
  padding: 0 22px 22px;
  margin-top: 10px;
}

.cof {
  background: var(--oo-white);
  box-shadow: var(--shadow-1);
}

.sec--offer {
  border-top: none;
}

.ocard {
  background: var(--oo-white);
}

/* closing band: white on deep violet */
.ctaband--slim {
  background: #3B1F86;
}

.ctaband--slim .h-md {
  color: var(--oo-white);
}

.ctaband--slim .body {
  color: rgba(252, 252, 252, 0.82);
}

.ctaband--slim .btn--light {
  background: var(--oo-white);
  color: #3B1F86;
  border-color: transparent;
}

.ctaband--slim .btn--light:hover {
  filter: brightness(0.96);
}

/* ---------- one field + rule breaks, from ACF page_theme not the slug ----------
   Arm pages (data-aud) use the active arm. Audience-agnostic pages (no data-aud)
   use a fixed mint→violet pair. */
body:is([data-theme=field], [data-theme=home]) .sec:not(.sec--dark):not(.sec--enh),
body:is([data-theme=field], [data-theme=home]) .sec--alt:not(.sec--dark),
body:is([data-theme=field], [data-theme=home]) .hero--sub,
body:is([data-theme=field], [data-theme=home]) .sec--first {
  background: transparent;
}

body:is([data-theme=field], [data-theme=home]) .sec--dark, .sec--dark {
  --alt-bg:#1A1D21;
  --alt-fg:var(--oo-white);
  --alt-dim:rgba(252,252,252,.74);
  --alt-line:rgba(252,252,252,.16);
  background: linear-gradient(152deg, #20242A 0%, #1A1D21 44%, #181B1F 68%, #1E2129 100%);
  color: var(--oo-white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body:is([data-theme=field], [data-theme=home]) .sec--dark::after, .sec--dark::after {
  content: "";
  position: absolute;
  inset: -30% -12%;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
  background-image: radial-gradient(42vw 42vw at 18% 12%, color-mix(in oklab, var(--o1, var(--arm)) 26%, transparent) 0%, transparent 66%), radial-gradient(50vw 50vw at 84% 82%, color-mix(in oklab, var(--o2, var(--arm)) 24%, transparent) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  body:is([data-theme=field], [data-theme=home]) .sec--dark::after, .sec--dark::after {
    background-attachment: scroll, scroll;
  }
}
body:is([data-theme=field], [data-theme=home]) .sec--enh:not(.sec--dark) {
  background: transparent;
}

body:is([data-theme=field], [data-theme=home]) .sec {
  position: relative;
}

body:is([data-theme=field], [data-theme=home]) .sec + .sec::before,
body:is([data-theme=field], [data-theme=home]) .hero--sub + .sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 100% - 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o1) 55%, transparent) 24%, color-mix(in oklab, var(--o2) 55%, transparent) 76%, transparent);
}

body:is([data-theme=field], [data-theme=home]) .sec--dark + .sec::before,
body:is([data-theme=field], [data-theme=home]) .sec--enh + .sec::before,
body:is([data-theme=field], [data-theme=home]) .sec + .sec--dark::before,
body:is([data-theme=field], [data-theme=home]) .sec + .sec--enh::before {
  content: none;
}

body:is([data-theme=field], [data-theme=home]) .card, body:is([data-theme=field], [data-theme=home]) .ocard, body:is([data-theme=field], [data-theme=home]) .qa, body:is([data-theme=field], [data-theme=home]) .step, body:is([data-theme=field], [data-theme=home]) .cslide, body:is([data-theme=field], [data-theme=home]) .tm {
  background: var(--oo-white);
}

body:is([data-theme=field], [data-theme=home]) .spic, body:is([data-theme=field], [data-theme=home]) .wpic, body:is([data-theme=field], [data-theme=home]) .missionpic {
  background: var(--oo-fog);
}

/* Simulations: each step reads as a white panel on the field */
#build .stage, #experience .stage, #review .stage {
  background: var(--oo-white);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  gap: 0;
  align-items: stretch;
}

#build .stage .stxt, #experience .stage .stxt, #review .stage .stxt {
  padding: clamp(30px, 3.6vh, 48px) clamp(28px, 3vw, 46px);
  align-self: center;
}

#build .stage .spic, #experience .stage .spic, #review .stage .spic {
  border: none;
  border-radius: 0;
  background: var(--oo-fog);
}

#build .spic img, #experience .spic img, #review .spic img, #build .spic image-slot, #experience .spic image-slot, #review .spic image-slot {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

#experience .stage--flip .stxt {
  order: 2;
}

#experience .stage--flip .spic {
  order: 1;
}

@media (max-width: 940px) {
  #build .spic, #experience .spic, #review .spic {
    min-height: 240px;
  }
  #experience .stage--flip .stxt {
    order: 0;
  }
}
/* ---------- page field, resolved through props so source order is unambiguous ----------
   Arm-specific pages carry their own accent only; audience-agnostic pages carry both. */
body:is([data-theme=field], [data-theme=home]) {
  --f1:color-mix(in oklab,var(--arm-tint) 88%,#FCFCFC);
  --f2:color-mix(in oklab,var(--arm-tint) 66%,#FCFCFC);
  --o1:var(--arm);
  --o2:var(--arm);
}

body:is([data-theme=field], [data-theme=home]):not([data-aud]) {
  --f1:#DDF6EA;
  --f2:#EDE6FF;
  --o1:var(--oo-mint-deep);
  --o2:var(--oo-violet);
}

body:is([data-theme=field], [data-theme=home]) {
  background: linear-gradient(152deg, var(--f1) 0%, #FBFAFE 42%, #FBFAFE 62%, var(--f2) 100%);
  background-attachment: fixed;
}

body:is([data-theme=field], [data-theme=home])::before {
  background-image: radial-gradient(38vw 38vw at 50% 50%, color-mix(in oklab, var(--o1) 26%, transparent) 0%, transparent 64%), radial-gradient(34vw 34vw at 50% 50%, color-mix(in oklab, var(--o2) 26%, transparent) 0%, transparent 66%), radial-gradient(62vw 62vw at 50% 50%, color-mix(in oklab, var(--o2) 12%, transparent) 0%, transparent 74%);
}

#enhanced .stage, .sec--enh .stage {
  background: transparent;
  border: none;
  box-shadow: none;
  gap: clamp(28px, 4vw, 64px);
}

#enhanced .stage .stxt, .sec--enh .stage .stxt {
  padding: 0;
}

#enhanced .spic, .sec--enh .spic {
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
}

/* Simulations: How-it-works flows straight into the three steps with no rules between,
   then a single rule before the enhanced / tabletop close. */
#build + .sec::before,
#experience + .sec::before,
#review + .sec::before {
  content: none;
}

#build, #experience, #review {
  padding-top: clamp(12px, 1.6vh, 20px);
  padding-bottom: clamp(12px, 1.6vh, 20px);
}

#review {
  padding-bottom: clamp(46px, 5.5vh, 74px);
}

.sec--enh {
  position: relative;
  padding-top: clamp(48px, 6vh, 80px);
}

.sec--enh::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 100% - 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o1) 55%, transparent) 24%, color-mix(in oklab, var(--o2) 55%, transparent) 76%, transparent);
}

.sec--enh + .sec--enh::before {
  content: none;
}

/* no rule between the core description and How it works */
#what + .sec::before {
  content: none;
}

/* the enhanced / tabletop close sits on the field, not a slab */
.sec--enh:not(.sec--dark) {
  background: transparent;
}

/* shorter centred divider before the enhanced close, and less air above How it works */
.sec--enh::before {
  width: min(360px, 42%);
}

#what {
  padding-bottom: clamp(20px, 2.4vh, 32px);
}

/* TTX deployments table sits on the field */
.rows, .rowline {
  background: transparent;
}

/* TTX past deployments read as items on the field, not white tiles */
.card--pic {
  background: transparent;
  border-color: color-mix(in oklab, var(--arm) 26%, var(--border));
  box-shadow: none;
}

.card--pic .cthumb {
  background: var(--oo-fog);
}

/* core description flows straight into the first step */
#what {
  padding-bottom: clamp(14px, 1.8vh, 24px);
}

#build {
  padding-top: clamp(14px, 1.8vh, 24px);
}

/* educator-locked pages show a static educator pill, not the agnostic "For all" */
.armsw--lock span {
  background: linear-gradient(115deg, #166257 0%, #1B7A6E 100%);
}

/* ---------- audience switch: read as a control, not a label ----------
   The inactive side previously had no surface, so the pair read as static text
   saying "for educators". Both options now sit on a raised pill, the track is
   larger and higher-contrast, and a standing label names what it controls. */
.armsw {
  padding: 5px;
  gap: 5px;
  border-color: #C6C9CB;
  box-shadow: inset 0 2px 5px rgba(11, 9, 10, 0.13), 0 1px 0 rgba(255, 255, 255, 0.9);
}

.armsw button {
  padding: 10px 18px;
  font-size: 11.5px;
  letter-spacing: 0.11em;
}

.armsw button[aria-pressed=false] {
  background: linear-gradient(180deg, #FFF, #F1F1F2);
  color: var(--oo-charcoal);
  box-shadow: 0 1px 2px rgba(11, 9, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.armsw button[aria-pressed=false]:hover {
  background: linear-gradient(180deg, #FFF, #FAFAFB);
  box-shadow: 0 2px 5px rgba(11, 9, 10, 0.16), inset 0 1px 0 #FFF;
  transform: translateY(-1px);
}

.armsw button[aria-pressed=true] {
  box-shadow: 0 2px 5px rgba(11, 9, 10, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* first visit only: a brief ring so the control is noticed once, then never again */
html[data-arm-new] .armsw {
  animation: armring 2.6s ease-out 2;
}

@keyframes armring {
  0%, 100% {
    box-shadow: inset 0 2px 5px rgba(11, 9, 10, 0.13), 0 0 0 0 color-mix(in oklab, var(--arm) 0%, transparent);
  }
  18% {
    box-shadow: inset 0 2px 5px rgba(11, 9, 10, 0.13), 0 0 0 6px color-mix(in oklab, var(--arm) 26%, transparent);
  }
  46% {
    box-shadow: inset 0 2px 5px rgba(11, 9, 10, 0.13), 0 0 0 12px color-mix(in oklab, var(--arm) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-arm-new] .armsw {
    animation: none;
  }
}
/* burger range: the nav is hidden but logo + switch + CTAs + burger must still fit one row */
/* nav and switch must never overlap: the row compresses gaps before anything collides */
.hdr .inner {
  flex-wrap: nowrap;
}

.nav {
  min-width: 0;
  flex-shrink: 1;
}

@media (max-width: 1500px) and (min-width: 1061px) {
  .hdr .inner {
    gap: 12px;
  }
  .nav {
    gap: 16px;
  }
}
/* audience switch keeps clear of the nav */
.hdr .armsw {
  margin-left: 26px;
  position: relative;
  flex: 0 0 auto;
}

.hdr .armsw::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--border);
}

@media (max-width: 1500px) and (min-width: 1061px) {
  .hdr .armsw {
    margin-left: 20px;
  }
  .hdr .armsw::before {
    left: -11px;
  }
}
/* ---------- first-visit audience prompt ----------
   Not a modal: the doors already on the page become the choice. A standing line names
   the decision and the pair lifts, so choosing is the natural first action. */
html[data-arm-ask] .doors .door {
  animation: askrise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

html[data-arm-ask] .doors .door:nth-child(2) {
  animation-delay: 0.07s;
}

html[data-arm-ask] .doorwrap {
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--arm) 32%, transparent);
  animation: askglow 2.8s ease-out 2 0.5s;
  border-radius: var(--card-r);
}

@keyframes askin {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes askrise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes askglow {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--arm) 0%, transparent);
  }
  22% {
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--arm) 24%, transparent);
  }
  55% {
    box-shadow: 0 0 0 11px color-mix(in oklab, var(--arm) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-arm-ask] .armask, html[data-arm-ask] .doors .door, html[data-arm-ask] .doorwrap {
    animation: none;
  }
}
.home .h-xl {
  max-width: none;
  text-wrap: balance;
}

/* footer affiliation: exactly the two authored lines, never three */
.ftr .lock .affil {
  max-width: none;
  width: -moz-max-content;
  width: max-content;
  text-wrap: nowrap;
}

.ftr .lock {
  flex-wrap: nowrap;
}

@media (max-width: 700px) {
  .ftr .lock .affil {
    width: auto;
    text-wrap: balance;
  }
}
/* first-visit chooser, inside the hero so the decision is in the first screen */
.heroask {
  display: none;
  margin-top: clamp(18px, 2.4vh, 28px);
  padding-top: clamp(16px, 2vh, 22px);
  border-top: 1px solid var(--hero-line);
}

html[data-arm-ask] .heroask {
  display: block;
  animation: askin 0.5s ease-out both;
}

.heroask-q {
  display: block;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-dim);
  margin-bottom: 12px;
}

.heroask-b {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.heroask-n {
  display: block;
  margin-top: 10px;
  font: 400 12px/1.5 var(--font-body);
  color: var(--hero-dim);
  opacity: 0.8;
}

.btn--sm {
  padding: 10px 16px;
  font-size: 13px;
}

@media (max-width: 560px) {
  .heroask-b .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
/* switch depth: the track recedes, the active pill sits proud of it, and the
   inactive pill sinks back so the pair reads as two planes rather than one */
.armsw {
  background: linear-gradient(180deg, #D5D7D9, #E6E7E8 58%, #EDEEEF);
  border-color: #BFC3C6;
  box-shadow: inset 0 3px 7px rgba(11, 9, 10, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-arm=pro] .armsw button[data-arm-set=edu], html[data-arm=edu] .armsw button[data-arm-set=pro], .armsw button[aria-pressed=false] {
  background: linear-gradient(180deg, #F2F3F4, #E4E6E7);
  background-image: linear-gradient(180deg, #F2F3F4, #E4E6E7);
  color: #575D61;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 2px rgba(11, 9, 10, 0.12), 0 1px 1px rgba(11, 9, 10, 0.06);
  transform: scale(0.975);
}

html[data-arm=pro] .armsw button[data-arm-set=edu]:hover, html[data-arm=edu] .armsw button[data-arm-set=pro]:hover, .armsw button[aria-pressed=false]:hover {
  background: linear-gradient(180deg, #FFF, #EFF0F1);
  color: var(--oo-charcoal);
  box-shadow: inset 0 1px 0 #FFF, 0 2px 4px rgba(11, 9, 10, 0.14);
  transform: scale(1);
}

.armsw button[aria-pressed=true] {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow: 0 3px 7px rgba(11, 9, 10, 0.3), 0 1px 2px rgba(11, 9, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.24);
  transform: translateY(-0.5px) scale(1.01);
}

.armsw button {
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.armsw button[aria-pressed=true]:active {
  transform: translateY(0.5px) scale(1);
  box-shadow: 0 1px 3px rgba(11, 9, 10, 0.26), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* header globe carries the footer lockup's relationship to the rule (55:52) */
.hdr .lock .mark {
  height: 27px;
}

.hdr .lock .globe {
  height: 43px;
  width: 43px;
}

/* the footer lockup keeps its separating rule at every width above the wrap point */
.ftr .lock--lg .rule {
  display: block !important;
  align-self: center;
  width: 1px;
  height: 52px;
  background: currentColor;
  opacity: 0.42;
  margin-left: 5px;
  flex: 0 0 auto;
}

/* lead funder outscales its peers */
.plogos img.lead-logo {
  max-height: 132px;
  grid-column: 1/-1;
  opacity: 0.86;
}

.plogos img.lead-logo:hover {
  opacity: 1;
}

/* co-founders on one line */
.cofs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cof {
  white-space: nowrap;
  text-align: center;
  font-size: clamp(14px, 1.25vw, 19px);
  padding: 20px 14px;
}

@media (max-width: 1000px) {
  .cofs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cof {
    font-size: clamp(12px, 1.6vw, 15px);
    padding: 16px 8px;
  }
}
@media (max-width: 640px) {
  .cofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cof {
    font-size: 14px;
  }
}
/* story chapter: the two phones as one overlapping object on a tinted plate */
.spic--phones {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, color-mix(in oklab, var(--oo-mint-deep) 10%, #F7F8F9), color-mix(in oklab, var(--oo-violet) 10%, #F7F8F9));
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
}

.spic--phones .ph {
  position: absolute;
  width: 38%;
  height: auto;
  aspect-ratio: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(11, 9, 10, 0.26));
}

.spic--phones .ph-a {
  left: 14%;
  top: 12%;
  transform: rotate(-8deg);
  z-index: 1;
}

.spic--phones .ph-b {
  right: 13%;
  top: 22%;
  transform: rotate(7deg);
  z-index: 2;
}

@media (max-width: 640px) {
  .spic--phones .ph {
    width: 42%;
  }
}
/* image credit line inside a story plate */
.story .spic {
  position: relative;
}

.picred {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 8px;
  background: linear-gradient(180deg, rgba(11, 9, 10, 0), rgba(11, 9, 10, 0.72));
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* three-up chooser, each with a supporting line */
.askbento--three {
  grid-template-columns: repeat(3, 1fr);
}

.askbento--three .pick--ask {
  align-items: flex-start;
  gap: 12px;
  padding: 24px 24px 26px;
}

.asub {
  display: block;
  font: 400 13px/1.5 var(--font-body);
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
  font-weight: 400;
}

.pick--ask[aria-pressed=true] .asub {
  color: color-mix(in oklab, var(--arm-ink) 76%, transparent);
}

@media (max-width: 860px) {
  .askbento--three {
    grid-template-columns: 1fr;
  }
}
/* competition FAQ sits on the field */
body[data-theme=competition] .qa {
  background: transparent;
}

/* six-group nav: distribute across the space between logo and controls */
.hdr .inner > a:first-child {
  flex: 0 0 auto;
}

.nav {
  flex: 1 1 auto;
  justify-content: space-evenly;
  gap: 8px;
  min-width: 0;
}

.nav > a, .nav .navgrp {
  flex: 0 0 auto;
}

@media (max-width: 1500px) and (min-width: 1061px) {
  .nav {
    gap: 6px;
  }
  .nav a, .navtop {
    font-size: 13px;
  }
}
@media (max-width: 1240px) and (min-width: 1061px) {
  .nav a, .navtop {
    font-size: 12.5px;
  }
}
/* ---------- homepage: mission + metrics ---------- */
.misgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.mistxt .lead + .lead {
  margin-top: 16px;
}

.misstats .n {
  font: 300 clamp(30px, 3.4vw, 46px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--fg);
}

.misstats .l {
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 8px;
}

/* homepage story with a four-up thumbnail cluster */
.storygrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}

/* media quotes */
.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.qcard {
  margin: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--oo-white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
}

.qcard blockquote {
  margin: 0 0 22px;
  font: 300 clamp(15px, 1.15vw, 17px)/1.55 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
}

.qcard figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.qwho {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.qlogo {
  height: 20px;
  width: auto;
  max-width: 130px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right center;
     object-position: right center;
  filter: grayscale(1);
  opacity: 0.8;
  margin-left: auto;
}

/* funders: Moore leads */
.fundrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vh, 38px);
  align-items: center;
}

.fund {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vh, 30px);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--oo-white);
}

.fund img {
  max-height: 74px;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.fund--lead {
  grid-column: 1/-1;
}

.fund--lead img {
  max-height: 132px;
}

.fundname {
  font: 400 15px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-align: center;
}

.fundrow {
  grid-template-columns: 1fr 1fr;
}

.fund--lead {
  grid-column: 1/-1;
  padding: clamp(30px, 4vh, 52px);
}

@media (max-width: 940px) {
  .misgrid, .storygrid {
    grid-template-columns: 1fr;
  }
}
/* partner + collaborator logo grid */
.plogos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

/* 13 collaborators in two rows: 7 then 6. Tighter cells and padding buy the extra column. */
.plogos--collab {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  justify-items: stretch;
}

.plogos--collab .plogo {
  min-height: 80px;
  padding: 12px 10px;
}

.plogos--collab .plogo img {
  max-height: 38px;
}

@media (max-width: 1100px) {
  .plogos--collab {
    gap: 6px;
  }
  .plogos--collab .plogo {
    padding: 10px 6px;
  }
  .plogos--collab .plogo img {
    max-height: 32px;
  }
}
@media (max-width: 860px) {
  .plogos--collab {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .plogos--collab {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .plogos--collab {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.plogo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: #FFF;
}

.plogo img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.82;
}

.plogo--todo {
  border-style: dashed;
  background: transparent;
}

.plogo--todo span {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-align: center;
}

/* FAQ: comfortable inset on question and answer alike */
.qa {
  padding-left: clamp(20px, 2.2vw, 34px);
  padding-right: clamp(20px, 2.2vw, 34px);
}

.qa .h-md, .qa .body {
  padding-right: 0;
}

@media (max-width: 640px) {
  .qa {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ---------- Contact: information panel + form ---------- */
.cgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.cinfo .h-lg {
  margin: 0 0 26px;
}

.cway {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.cway .h-sm {
  margin: 0 0 8px;
}

.cway .body {
  margin: 0;
}

.cmails {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 18px;
}

.cmails .k {
  display: block;
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}

.cmails a {
  font: 500 15px/1.4 var(--font-body);
  color: var(--arm-deep);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cmails a:hover {
  text-decoration: underline;
}

.cform {
  background: var(--oo-white);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: var(--shadow-1);
}

.whobento {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pick--who {
  flex: 0 0 auto;
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 0;
  text-align: left;
  padding: 11px 16px;
  min-height: 0;
}

.pick--who .act {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
}

@media (max-width: 940px) {
  .cgrid {
    grid-template-columns: 1fr;
  }
}
.cgrid > *, .cinfo, .cway, .cmails {
  min-width: 0;
}

.cinfo .h-lg, .cway .h-sm, .cway .body {
  overflow-wrap: anywhere;
}

/* ---------- accordions ---------- */
.acc {
  border-top: 1px solid var(--border);
}

.accrow {
  border-bottom: 1px solid var(--border);
}

.accrow summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2vh, 24px) clamp(18px, 2vw, 28px);
  font: 500 clamp(16px, 1.3vw, 19px)/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color 0.16s;
}

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

.accrow summary:hover {
  color: var(--arm-deep);
}

.accrow summary .cv {
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex: 0 0 auto;
  margin-right: 2px;
}

.accrow[open] summary .cv {
  transform: rotate(-135deg);
}

.accbody {
  padding: 0 clamp(18px, 2vw, 28px) clamp(20px, 2.4vh, 28px);
  font: 400 15px/1.65 var(--font-body);
  color: var(--fg-muted);
  max-width: 74ch;
}

.accbody p + p {
  margin-top: 14px;
}

.accbody a {
  color: var(--arm-deep);
  text-decoration: underline;
}

/* nav compresses before it overflows, and collapses ahead of the break point */
.nav > a, .nav .navgrp {
  flex: 0 1 auto;
  min-width: 0;
}

.nav a, .navtop {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1360px) and (min-width: 1061px) {
  .hdr .inner {
    gap: 8px;
  }
  .nav {
    gap: 2px;
  }
  .nav a, .navtop {
    font-size: 12px;
    letter-spacing: -0.01em;
  }
  .hdr .armsw {
    margin-left: 14px;
  }
  .hdr .armsw::before {
    left: -8px;
  }
}
/* 3 · the four thumbnails share one ratio, so the grid reads as a composed block */
/* stacked paragraphs in any text column separate consistently */
.stxt p.lead + p.lead, .stxt p.body + p.body, .stxt p.lead + p.body, .stxt p.body + p.lead,
.mistxt p.lead + p.lead, .storytxt p.lead + p.lead, .cinfo p.body + p.body {
  margin-top: 16px;
}

/* ---------- collapsed navigation: one breakpoint governs the whole panel ---------- */
@media (max-width: 1320px) {
  .hdr .inner {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 0;
  }
  .burger {
    display: inline-flex;
    order: 3;
    margin-left: auto;
  }
  .hdr .armsw {
    order: 2;
    margin-left: 0;
  }
  .hdr .armsw::before {
    content: none;
  }
  .hdr .armsw button {
    padding: 9px 12px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .hdr .armsw {
    padding: 4px;
    gap: 4px;
  }
  .nav {
    display: none;
  }
  .nav.open {
    display: flex;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 0 12px;
    border-top: 1px solid var(--border);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.open > a {
    padding: 13px 2px;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  /* dropdowns become stacked disclosure groups, never floating panels */
  .nav.open .navgrp {
    display: block;
    width: 100%;
    position: static;
    border-bottom: 1px solid var(--border);
  }
  .nav.open .navtop {
    width: 100%;
    justify-content: space-between;
    padding: 13px 2px;
    min-height: 48px;
    font-size: 15px;
    border-bottom: none;
  }
  .nav.open .navtop .cv {
    display: inline-block;
    width: 8px;
    height: 8px;
  }
  .nav.open .navmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    display: none;
    padding: 0 0 10px 14px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .nav.open .navtop[aria-expanded=true] + .navmenu {
    display: flex;
  }
  .nav.open .navgrp:hover .navmenu {
    display: none;
  }
  .nav.open .navtop[aria-expanded=true]:hover + .navmenu, .nav.open .navgrp:hover .navtop[aria-expanded=true] + .navmenu {
    display: flex;
  }
  .nav.open .navmenu a {
    padding: 11px 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: normal;
    font-size: 14px;
  }
  .hdrcta {
    order: 5;
    width: 100%;
    display: none;
    gap: 8px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
  }
  .nav.open ~ .hdrcta {
    display: flex;
  }
  .hdrcta .btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 46px;
    font-size: 12px;
  }
}
@media (max-width: 560px) {
  .hdr .inner {
    gap: 8px;
  }
  .hdr .armsw button {
    padding: 8px 9px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  .hdrcta {
    flex-wrap: wrap;
  }
  .hdrcta .btn {
    flex: 1 1 100%;
  }
}
/* ---------- homepage round-three refinements ---------- */
/* gradient rule between the hero and the mission, and before the quotes */
#mission, #coverage {
  position: relative;
}

#mission::before, #coverage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 100% - 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o1) 60%, transparent) 24%, color-mix(in oklab, var(--o2) 60%, transparent) 76%, transparent);
}

/* vertical distribution: copy and metrics share a baseline and breathe evenly */
.misgrid {
  align-items: center;
}

.mistxt .h-lg {
  margin: 14px 0 18px;
}

.misstats {
  padding-top: 0;
  row-gap: clamp(24px, 3vh, 38px);
}

.storygrid {
  align-items: center;
}

.storytxt .h-lg {
  margin: 14px 0 18px;
}

.storytxt .btn {
  margin-top: 26px;
}

/* one square composite instead of four thumbnails */
.storyquad {
  aspect-ratio: 1/1;
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
  box-shadow: var(--shadow-1);
  position: relative;
}

.storyquad image-slot, .storyquad img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.storyquad::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(252, 252, 252, 0.5) calc(50% - 0.5px), rgba(252, 252, 252, 0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(252, 252, 252, 0.5) calc(50% - 0.5px), rgba(252, 252, 252, 0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* technology block opening the What we offer band */
.techlead {
  margin-bottom: clamp(34px, 4.4vh, 58px);
  padding-bottom: clamp(30px, 4vh, 50px);
  border-bottom: 1px solid var(--hero-line);
}

.techlead .stage {
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.techlead .h-lg, .techlead .eyebrow {
  color: var(--hero-fg);
}

.techlead .eyebrow {
  color: var(--arm-deep);
}

.techlead .lead {
  color: var(--hero-dim);
}

.techlead .spic {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--card-r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.techlead .spic img {
  display: block;
  width: 100%;
}

/* quote cards: logo, name, quote, action */
.qcard {
  gap: 0;
}

.qcard .qlogo {
  height: 22px;
  width: auto;
  max-width: 132px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  filter: grayscale(1);
  opacity: 0.85;
  margin: 0 0 16px;
}

.qcard .qwho {
  font: 700 11px/1.4 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 14px;
}

.qcard blockquote {
  margin: 0 0 22px;
}

.qmore {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
}

.qcard blockquote:has(+ .qmore), .qcard blockquote + .qmore {
  margin-top: 0;
}

.qcard > blockquote {
  margin-bottom: 26px;
}

/* funders: wordmark peers sit on the field in black */
.fund--word {
  background: transparent;
  border: none;
  padding: clamp(14px, 2vh, 22px) 8px;
  justify-content: center;
}

.fund--word .fundname {
  font: 400 clamp(15px, 1.4vw, 19px)/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--oo-ink);
  text-align: center;
}

@media (max-width: 940px) {
  .quadwrap {
    width: 100%;
    max-width: 440px;
    justify-self: center;
  }
}
/* a placeholder-only media box must never shrink to nothing */
.storyquad, .spic, .missionpic, .opic, .cthumb {
  min-width: 0;
}

.storyquad image-slot, .spic image-slot, .missionpic image-slot, .opic image-slot, .cthumb image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

/* labeled placeholders read as gaps, not finished states */
.qmore--todo {
  border-style: dashed;
  color: var(--fg-subtle);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.fund--todo {
  background: transparent;
  border: 1px dashed var(--border);
}

.fund--todo span {
  font: 400 11.5px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-align: center;
}

.collabhead {
  margin-top: clamp(34px, 4.6vh, 60px);
  padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* even vertical rhythm across the homepage stack */
body[data-theme=home] .sec {
  padding-top: clamp(52px, 6.6vh, 88px);
  padding-bottom: clamp(52px, 6.6vh, 88px);
}

body[data-theme=home] .sechead {
  margin-bottom: clamp(26px, 3.4vh, 42px);
}

.homedoors {
  padding-top: clamp(44px, 5.6vh, 74px);
}

.techlead {
  margin-bottom: clamp(38px, 4.8vh, 62px);
  padding-bottom: clamp(34px, 4.4vh, 54px);
}

/* door selection: deeper tint and a stronger edge — the text colour never changes */
.homedoors .door[data-arm-set=edu][aria-selected=true] {
  background: #BCE6DB;
  border-color: #1B7A6E;
  box-shadow: inset 0 0 0 1px #1B7A6E, 0 6px 18px rgba(27, 122, 110, 0.18);
}

.homedoors .door[data-arm-set=pro][aria-selected=true] {
  background: #DACCFF;
  border-color: #5A34C4;
  box-shadow: inset 0 0 0 1px #5A34C4, 0 6px 18px rgba(90, 52, 196, 0.18);
}

.homedoors .door[aria-selected=true] .t, .homedoors .door[aria-selected=true] .d {
  color: inherit;
}

.homedoors .door[aria-selected=true] .d {
  color: var(--fg-muted);
}

.homedoors .door[data-arm-set=edu][aria-selected=true] .go {
  color: #166257;
}

.homedoors .door[data-arm-set=pro][aria-selected=true] .go {
  color: #4A2AA6;
}

/* Contact chips: selection is neutral, not arm-coloured */
.pick--who[aria-pressed=true],
.pick--ask[aria-pressed=true] {
  background: var(--oo-ink);
  border-color: var(--oo-ink);
  color: var(--oo-white);
  box-shadow: 0 2px 6px rgba(11, 9, 10, 0.22);
}

.pick--who[aria-pressed=true] .ai,
.pick--ask[aria-pressed=true] .ai {
  background: rgba(255, 255, 255, 0.16);
  color: var(--oo-white);
}

.pick--who:hover, .pick--ask:hover {
  border-color: var(--oo-ink);
}

/* the offer band opens with its own heading and a rule separating it from Who we are */
.homedoors {
  position: relative;
}

.homedoors::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 100% - 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o1) 60%, transparent) 24%, color-mix(in oklab, var(--o2) 60%, transparent) 76%, transparent);
}

.techlead {
  border-bottom: 1px solid var(--hero-line);
}

/* selected doors: all text white on the solid fill */
.homedoors .door[aria-selected=true],
.homedoors .door[aria-selected=true] .t,
.homedoors .door[aria-selected=true] .d,
.homedoors .door[aria-selected=true] .go,
.homedoors .door[data-arm-set=edu][aria-selected=true] .go,
.homedoors .door[data-arm-set=pro][aria-selected=true] .go {
  color: var(--oo-white);
}

.homedoors .door[aria-selected=true] .d {
  color: rgba(252, 252, 252, 0.94);
}

.homedoors .door[aria-selected=true] .go {
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* offer band: the heading leads, then the technology copy, evenly spaced */
.techlead .h-lg {
  margin: 0 0 20px;
}

.techlead .stage {
  align-items: start;
}

.techlead .spic {
  margin-top: 4px;
}

.techlead {
  margin-bottom: clamp(40px, 5vh, 66px);
  padding-bottom: clamp(38px, 4.8vh, 60px);
}

.homedoors .doors {
  margin-top: clamp(22px, 2.8vh, 34px);
}

.sechead--doors {
  padding-top: 0;
  border-top: none;
  margin-bottom: clamp(16px, 2vh, 24px);
}

/* technology block flows straight into the boxes, evenly spaced */
.techlead {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: clamp(34px, 4.4vh, 56px);
}

.homedoors .doors {
  margin-top: 0;
}

.homedoors {
  padding-bottom: clamp(52px, 6.6vh, 88px);
}

.techlead .h-lg, .techlead .lead {
  color: var(--fg);
}

.techlead .lead {
  color: var(--fg-muted);
}

/* doors: hover changes elevation and edge only, never the fill or the text */
.homedoors .door[data-arm-set=edu]:hover, .homedoors .door[data-arm-set=pro]:hover {
  background: inherit;
}

.homedoors .door[data-arm-set=edu]:not([aria-selected=true]):hover {
  background: var(--oo-white);
  border-color: #1B7A6E;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.homedoors .door[data-arm-set=pro]:not([aria-selected=true]):hover {
  background: var(--oo-white);
  border-color: #5A34C4;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.homedoors .door[aria-selected=true]:hover {
  transform: translateY(-2px);
}

.netzone {
  overflow: visible;
}

.netzone canvas.net {
  height: 100%;
}

/* Explore hero: the educator video keeps its own 16:9 frame, so nothing is letterboxed */
.heroart[data-when=edu] .frame--video {
  aspect-ratio: 16/9;
  height: auto;
}

html[data-arm=edu] .hero--explore .grid {
  grid-template-columns: 1.02fr 0.98fr;
}

/* Explore hero: the verb carries the arm colour */
.hero--explore .h-xl b {
  font-weight: 500;
  color: var(--arm-deep);
}

/* Contact hero: cap the reading measure so the dot guard follows the copy, not the wrap */
.hero .htxt {
  max-width: 56ch;
}

.hero .htxt .h-xl {
  max-width: 18ch;
}

.hero .htxt .lead {
  max-width: 52ch;
}

/* the lockup yields before it can collide with the switch */
.hdr .inner > a:first-child {
  min-width: 0;
  flex: 0 1 auto;
}

.hdr .lock {
  min-width: 0;
}

/* the timeline now opens the section directly, so it needs its own top breathing room */
#story {
  padding-top: clamp(40px, 5vh, 66px);
}

.story {
  margin-top: 0;
}

.hero--single {
  padding-bottom: clamp(34px, 4.4vh, 56px);
}

/* partners take the whole section once collaborators are folded into "Who we work with" */
.pgrid--solo {
  grid-template-columns: 1fr;
}

.pgrid--solo .pcol {
  max-width: 640px;
}

.pgrid--solo .plogos {
  justify-items: start;
}

/* two-column hero with a media plate beside the copy */
.hero .grid.grid--single, .grid--single {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: center;
}

@media (max-width: 940px) {
  .grid--single {
    grid-template-columns: 1fr;
  }
  .teamquad {
    max-width: 460px;
  }
}
/* the co-founders heading holds one line, scaling down rather than wrapping */
.sechead h2[style*=nowrap] {
  font-size: clamp(22px, 3vw, 42px);
}

@media (max-width: 700px) {
  .sechead h2[style*=nowrap] {
    white-space: normal !important;
    font-size: clamp(24px, 6vw, 34px);
  }
}
/* the ways-to-train cards sit under the section above, with no head of their own */
/* dropdown panels are always opaque, whatever the header ground is doing */
.hdr .navmenu {
  background: #FCFCFC;
  backdrop-filter: none;
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.18), 0 2px 6px rgba(11, 9, 10, 0.1);
}

@media (max-width: 1320px) {
  .hdr .nav.open .navmenu {
    background: transparent;
    box-shadow: none;
  }
}
/* funding partners centre in their section */
.pgrid--solo {
  justify-items: center;
}

.pgrid--solo .pcol {
  max-width: 640px;
  text-align: center;
}

.pgrid--solo .plogos {
  justify-items: center;
  justify-content: center;
}

/* the educator closing band takes the mint accent, the professional one keeps violet */
html[data-arm=edu] .ctaband--slim {
  background: #12564C;
}

html[data-arm=edu] .ctaband--slim .btn--light {
  color: #12564C;
}

/* a sechead whose right column holds stacked leads keeps them separated */
.sechead > div > p.lead + p.lead {
  margin-top: 16px;
}

/* the open menu lives inside the header, so the header must go fully opaque while it is
   showing — a 90% translucent ground let page content read through the panel */
@media (max-width: 1320px) {
  .hdr:has(.nav.open) {
    background: #FCFCFC;
    backdrop-filter: none;
    box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16);
  }
  .hdr .nav.open {
    background: #FCFCFC;
  }
  .hdr .nav.open ~ .hdrcta {
    background: #FCFCFC;
  }
}
/* the opaque ground must span the viewport, not the padded wrap the nav sits inside */
@media (max-width: 1320px) {
  .hdr .nav.open, .hdr .nav.open ~ .hdrcta {
    background: transparent;
  }
  .hdr:has(.nav.open) {
    background: #FCFCFC;
    backdrop-filter: none;
    box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16);
  }
}
/* ---------- open menu: opaque, full-bleed, immune to the scroll-state ground ----------
   Driven by a class the script sets, so it does not depend on :has() and cannot lose a
   specificity race with the transparent-at-top header treatment. */
.hdr.hdr--menu {
  background: #FCFCFC !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16);
}

.hdr.hdr--menu .nav.open, .hdr.hdr--menu .hdrcta {
  background: transparent;
}

.hdr.hdr--menu .navmenu {
  background: transparent;
  box-shadow: none;
}

/* TTX three-up steps read on the field, not as white tiles */
.steps, .step {
  background: transparent;
}

/* core simulation: three labelled beats rather than one run of prose */
/* enhanced / tabletop close: divider matches the content measure, like every other rule */
/* the enhanced / tabletop close is separated by a rule on the content measure, not a
   viewport-wide border on the section box (which also doubled with the previous one) */
.sec--enh {
  border-top: none !important;
  border-bottom: none !important;
}

.sec--enh > .wrap {
  position: relative;
  padding-top: clamp(40px, 5vh, 68px);
}

.sec--enh > .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o1) 55%, transparent) 24%, color-mix(in oklab, var(--o2) 55%, transparent) 76%, transparent);
}

.sec--enh + .sec--enh > .wrap::before {
  content: "";
}

/* Defect 2 — an empty slot inside the dark .frame inherited ink-coloured placeholder text */
.hero .frame image-slot {
  --slot-fg:rgba(252,252,252,.86);
  color: rgba(252, 252, 252, 0.86);
}

.hero .frame image-slot::part(placeholder), .hero .frame image-slot a {
  color: rgba(252, 252, 252, 0.86);
}

.hero .frame:has(image-slot) {
  background: linear-gradient(135deg, #3A3E3F 0%, #1F2528 100%);
}

/* core simulation: imagery beside a tight prose block, no second numbered sequence */
.coreflow {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
  margin-bottom: clamp(30px, 4vh, 48px);
}

.corepics {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

.cpic {
  border-radius: var(--card-r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--oo-fog);
  aspect-ratio: 16/10;
}

.cpic image-slot, .cpic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.coretxt p.body + p.body {
  margin-top: 16px;
}

.whatgrid--solo {
  grid-template-columns: 1fr;
}

.whatgrid--solo .wlist {
  max-width: none;
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: clamp(24px, 3vw, 44px);
       column-gap: clamp(24px, 3vw, 44px);
}

.whatgrid--solo .wlist li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 14px;
}

@media (max-width: 940px) {
  .coreflow {
    grid-template-columns: 1fr;
  }
  .whatgrid--solo .wlist {
    -moz-columns: 1;
         columns: 1;
  }
}
.corepics:has(.cpic:only-child) .cpic {
  aspect-ratio: 4/3;
}

.corepics--arm .cpic {
  aspect-ratio: 4/3;
}

/* the four attributes read as a list beside the image, not a two-column block */
.coreflow .coretxt .wlist {
  -moz-columns: 1;
       columns: 1;
  max-width: none;
  gap: 0;
}

.coreflow .coretxt .wlist li {
  margin-bottom: 16px;
}

.coreflow .coretxt .wlist li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   HEADER — single authoritative block. Supersedes the accumulated patches above.
   Three rules govern everything: the lockup never resizes, the nav is either
   fully laid out or fully collapsed, and an open menu is always opaque.
   ========================================================================== */
/* --- 1. lockup: one size at every width, so it never jumps --- */
.hdr .lock {
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}

.hdr .lock .mark {
  height: 27px;
}

.hdr .lock .globe {
  height: 43px;
  width: 43px;
}

/* --- 2. nav: laid out above 1320px, collapsed below. No cramped middle state. --- */
@media (min-width: 1321px) {
  .hdr .inner {
    height: 74px;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .nav > a, .nav .navgrp {
    flex: 0 0 auto;
  }
  .nav a, .navtop {
    font-size: 13px;
    letter-spacing: -0.005em;
    overflow: visible;
    text-overflow: clip;
  }
  .hdr .armsw {
    margin-left: 18px;
    flex: 0 0 auto;
  }
  .burger {
    display: none;
  }
}
@media (max-width: 1320px) {
  .hdr .inner {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav {
    display: none;
  }
  .burger {
    display: inline-flex;
    order: 3;
    margin-left: auto;
  }
  .hdr .armsw {
    order: 2;
    margin-left: 0;
  }
  .hdr .armsw::before {
    content: none;
  }
  .hdrcta {
    display: none;
  }
}
/* --- 3. open menu: opaque ground spanning the header, panel stacked and readable --- */
.hdr.hdr--menu {
  background: #FCFCFC !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 44px rgba(11, 9, 10, 0.18);
}

@media (max-width: 1320px) {
  .hdr .nav.open {
    display: flex;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 0 14px;
    border-top: 1px solid var(--border);
    background: transparent;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hdr .nav.open > a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 14px 2px;
    font-size: 15.5px;
    border-bottom: 1px solid var(--border);
  }
  .hdr .nav.open .navgrp {
    display: block;
    width: 100%;
    position: static;
    border-bottom: 1px solid var(--border);
  }
  .hdr .nav.open .navtop {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    padding: 14px 2px;
    font-size: 15.5px;
    border: none;
  }
  .hdr .nav.open .navmenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    min-width: 0;
    padding: 0 0 10px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hdr .nav.open .navtop[aria-expanded=true] + .navmenu {
    display: flex;
  }
  .hdr .nav.open .navgrp:hover .navmenu {
    display: none;
  }
  .hdr .nav.open .navtop[aria-expanded=true] + .navmenu {
    display: flex;
  }
  .hdr .nav.open .navmenu a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 10px;
    font-size: 14.5px;
    white-space: normal;
  }
  .hdr .nav.open ~ .hdrcta {
    display: flex;
    order: 5;
    width: 100%;
    gap: 8px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
    background: transparent;
  }
  .hdr .nav.open ~ .hdrcta .btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 48px;
    font-size: 12.5px;
  }
}
/* FAQ rows sit on the field rather than white plates */
.qa, .acc, .accrow {
  background: transparent;
}

/* ---------- press: awards + media ---------- */
.awgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}

.awcard {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid rgba(252, 252, 252, 0.16);
  border-radius: var(--card-r);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
}

.awcard img {
  height: 44px;
  width: auto;
  max-width: 170px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  margin-bottom: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.awname {
  font: 400 clamp(17px, 1.3vw, 19px)/1.34 var(--font-display);
  letter-spacing: -0.014em;
  color: var(--oo-white);
  text-wrap: pretty;
}

.awyear {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.66);
  margin-top: 8px;
}

.awdesc {
  font: 400 14.5px/1.6 var(--font-body);
  color: rgba(252, 252, 252, 0.82);
  margin: 14px 0 0;
}

.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.mcard {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--oo-white);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s;
}

.mcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.mlogo {
  height: 24px;
  width: auto;
  max-width: 150px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  filter: grayscale(1);
  opacity: 0.85;
  margin-bottom: 16px;
}

.mdate {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}

.mquote {
  font: 400 clamp(17px, 1.3vw, 19px)/1.34 var(--font-display);
  letter-spacing: -0.014em;
  color: var(--fg);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.mgo {
  margin-top: auto;
  font: 500 13px/1 var(--font-display);
  color: var(--arm-deep);
}

.mcard:hover .mgo {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .awgrid {
    grid-template-columns: 1fr;
  }
}
/* newsroom release rows: thumbnail, text, and action on one aligned baseline */
.rrow {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 0 28px;
  align-items: center;
  padding: 24px 0;
}

.rrow .thumb {
  width: 132px;
  aspect-ratio: 4/3;
  align-self: center;
}

.rrow .col {
  gap: 6px;
}

.rrow .col .k {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.rrow .s {
  max-width: 70ch;
  margin: 0;
}

.rrow .g {
  align-self: center;
  justify-self: end;
}

@media (max-width: 940px) {
  .rrow {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .rrow .g {
    justify-self: start;
  }
}
/* labeled logo placeholders on the press page, matching the Our Team convention */
.logo--todo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--fg-subtle);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  filter: none !important;
  opacity: 1;
}

.awcard .logo--todo {
  color: rgba(252, 252, 252, 0.66);
  border-color: rgba(252, 252, 252, 0.28);
  height: auto;
  min-height: 44px;
  max-width: 200px;
  margin-bottom: 22px;
}

.mcard .logo--todo {
  height: auto;
  min-height: 24px;
  max-width: 190px;
  margin-bottom: 16px;
}

/* the white-out filter suits monochrome marks only; apply it per-image, not blanket */
.awcard img {
  filter: none;
  opacity: 1;
  background: var(--oo-white);
  border-radius: 10px;
  padding: 8px 12px;
  box-sizing: content-box;
}

.awcard img.awlogo--stack {
  height: 58px;
  max-width: 132px;
}

/* press: featured coverage rows */
.flist {
  border-top: 1px solid var(--border);
}

.frow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 0 28px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.16s;
}

.frow:hover {
  background: color-mix(in oklab, var(--oo-fog) 60%, transparent);
}

.fdate {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.fbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ftitle {
  font: 400 clamp(16px, 1.35vw, 20px)/1.35 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}

.flogo {
  height: 20px;
  width: auto;
  max-width: 132px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  filter: grayscale(1);
  opacity: 0.82;
}

.fgo {
  font: 500 12.5px/1 var(--font-display);
  color: var(--arm-deep);
  white-space: nowrap;
}

.frow:hover .fgo {
  text-decoration: underline;
}

.fbody .logo--todo {
  align-self: flex-start;
  height: auto;
}

@media (max-width: 860px) {
  .frow {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .fgo {
    justify-self: start;
  }
}
/* mission as the homepage's statement block */
#mission {
  padding-top: clamp(38px, 5vh, 64px);
  padding-bottom: clamp(46px, 6vh, 80px);
}

#mission .misgrid {
  grid-template-columns: 1fr;
  gap: clamp(46px, 6vh, 84px);
}

#mission .mistxt {
  max-width: none;
}

#mission .eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--arm-deep);
}

#mission .h-lg {
  font: 300 clamp(36px, 5.2vw, 72px)/1.03 var(--font-display);
  letter-spacing: -0.035em;
  margin: 22px 0 clamp(26px, 3vh, 42px);
  max-width: 19ch;
  text-wrap: balance;
}

#mission .mistxt .lead {
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.6;
  max-width: 62ch;
  color: var(--fg-muted);
}

#mission .mistxt .lead + .lead {
  margin-top: 18px;
}

/* figures: one hairline band under the statement */
.misstats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 40px);
  padding-top: clamp(30px, 4vh, 50px);
  border-top: 1px solid var(--border);
}

/* The figures read as flat lozenges when they are a border and two strings, so each one
   is built like the rest of the system's raised surfaces: a hairline, a paper-edge inner
   ring, an inset top highlight, and a soft ground shadow. A short arm-coloured tick
   separates the numeral from its label so the pill reads as one composed unit.
   Horizontal padding clears the 999px curve — at this height it eats ~50px per end, which
   is what was crowding the longest label against the edge. */
.bt {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: clamp(13px, 1.5vh, 17px) clamp(17px, 1.8vw, 26px);
  border: 1px solid var(--border);
  border-radius: 20px 4px 20px 4px;
  background: rgba(252, 252, 252, 0.82);
  box-shadow: 0 1px 2px rgba(15, 23, 26, 0.05), 0 10px 26px -12px rgba(15, 23, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(252, 252, 252, 0.75);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bt:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 3px rgba(15, 23, 26, 0.06), 0 18px 34px -14px rgba(15, 23, 26, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(252, 252, 252, 0.8);
}

.misstats .l::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  margin: 0 auto 10px;
  background: var(--arm);
  opacity: 0.6;
}

.bt--hero .l::before {
  background: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bt {
    transition: none;
  }
  .bt:hover {
    transform: none;
  }
}
.misstats .n {
  font: 400 clamp(30px, 3.4vw, 50px)/0.9 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.bt--hero {
  background: var(--arm-deep);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(11, 9, 10, 0.2), 0 14px 30px -14px rgba(11, 9, 10, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.bt--hero:hover {
  box-shadow: 0 2px 4px rgba(11, 9, 10, 0.22), 0 22px 40px -16px rgba(11, 9, 10, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html[data-arm=edu] .bt--hero {
  background-image: linear-gradient(118deg, #0D3F39 0%, #155F55 55%, #1B7A6E 100%);
}

html[data-arm=pro] .bt--hero {
  background-image: linear-gradient(118deg, #4C2FA6 0%, #5A34C4 55%, #6A3FE0 100%);
}

.bt--hero .n, .bt--hero .l {
  color: var(--oo-white);
}

.misstats .l {
  margin-top: 0;
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
}

/* letter-spacing is applied after the final character too, so each layout box carries
   trailing space the ink does not: the numeral (negative tracking) drifts right, the mono
   label (positive tracking) drifts left — ~1.4px apart, which reads as a right lean.
   Cancel the trailing space so the centred boxes and the painted glyphs share an axis. */
.misstats .n {
  margin-right: 0.04em;
}

.misstats .l {
  margin-right: -0.14em;
}

/* tabular figures pad short numbers to the widest glyph run, pushing 18/26 off-centre */
.bt--short .n {
  font-variant-numeric: normal;
}

@media (max-width: 900px) {
  .misstats {
    row-gap: clamp(12px, 1.6vh, 18px);
  }
}
.frow--todo {
  cursor: default;
}

.frow--todo:hover {
  background: transparent;
}

.fgo--todo {
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--fg-subtle);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}

.qflag {
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  border: 1px dashed var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  margin-left: 8px;
  white-space: nowrap;
}

/* ---------- funding partners: Moore leads, two peers beneath ---------- */
.fundgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  width: min(720px, 90vw);
  margin: clamp(6px, 1vh, 14px) auto 0;
}

.fundgrid img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.28s ease;
  background: var(--oo-white);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-1);
}

.fundgrid img[alt^=Gordon] {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: none;
  padding: clamp(16px, 2vw, 24px) clamp(22px, 2.8vw, 34px);
}

.fundgrid img:not([alt^=Gordon]) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: clamp(46px, 4.8vw, 62px);
  max-height: none;
  box-sizing: content-box;
  padding: clamp(18px, 2.2vw, 26px);
}

@media (max-width: 560px) {
  .fundgrid {
    width: min(340px, 88vw);
  }
  .fundgrid img:not([alt^=Gordon]) {
    flex: 0 0 100%;
  }
}
.fundgrid img:hover, .fundgrid img:focus-visible {
  filter: none;
}

@media (hover: none) {
  .fundgrid img {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fundgrid img {
    transition: none;
  }
}
.qcard .qwho--by {
  font-weight: 700;
  color: var(--fg);
}

/* ---------- Our Team: the role sits on its own text, with no reserved second line ---------- */
.tmgrid {
  grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
}

/* tracking is eased just enough that the longest single-line title clears the 306px column */
.tmrole {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: normal;
  text-wrap: balance;
  min-height: 0;
}

@media (max-width: 1000px) {
  .tmgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .tmgrid {
    grid-template-columns: 1fr;
  }
}
.rrow .g, .rlead .g, .frow .fgo {
  font-size: 15px;
}

/* card icons on the Explore bentos */
.card--ico {
  display: flex;
  flex-direction: column;
}

.cico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--arm-tint);
  color: var(--arm-deep);
  margin-bottom: 16px;
  flex: 0 0 auto;
}

.cico svg {
  width: 21px;
  height: 21px;
}

/* who it serves: a table, so two bento blocks never stack */
.wtable {
  border-top: 1px solid var(--border);
}

.wrow {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(20px, 2.4vh, 28px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

/* the last row closes the table; a rule beneath it would float unattached */
.wrow:last-child {
  border-bottom: 0;
}

.wk {
  font: 600 clamp(16px, 1.25vw, 19px)/1.35 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}

.wv {
  font: 400 15.5px/1.62 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .wrow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* QR countermeasure callout: the physical prop gets its own block */
.qrnote {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(22px, 3vh, 32px);
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  background: var(--oo-white);
  box-shadow: var(--shadow-1);
}

.qrart {
  flex: 0 0 auto;
  width: clamp(74px, 7vw, 96px);
  color: var(--fg);
}

.qrart img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.qrtxt .k {
  display: block;
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}

.qrtxt .body {
  margin: 0;
}

@media (max-width: 560px) {
  .qrnote {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* step 03: the network fills the frame instead of sitting inside dead space */
#review .spic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

#review .spic {
  overflow: hidden;
  aspect-ratio: 4/3;
}

/* carousel controls: centred and larger */
.cnav {
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

.cnav .cbtn {
  width: 48px;
  height: 48px;
  font-size: 19px;
}

/* Conferences: the heading holds one line, breaking before "your event" if it cannot */
.nbr {
  white-space: nowrap;
}

@media (max-width: 760px) {
  h2.h-lg[style*=nowrap] {
    white-space: normal !important;
  }
}
/* Contact bento tiles use the brand faces, not the system stack */
.askbento .pick--ask, .askbento .pick--ask *, .whobento .pick--who, .whobento .pick--who * {
  font-family: var(--font-display);
}

.askbento .pick--ask .act, .whobento .pick--who .act {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* textbook attribution: reads as a link, not body copy */
.attrib {
  margin: 0;
  font: 400 14.5px/1.6 var(--font-body);
}

.attrib a:not(.btn) {
  color: var(--arm-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.attrib a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* closing band: two actions sit together on the right */
.bandacts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 760px) {
  .bandacts {
    width: 100%;
  }
  .bandacts .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.qrart {
  width: clamp(132px, 15vw, 196px);
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
}

.qrart image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

/* Our Team funders: same white-pill cards and proportions as the homepage wall */
/* funding partners: the homepage wall, verbatim — Moore leads, two peers beneath */
.pcol:has(.plogos--fund) {
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
}

.plogos--fund {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  width: min(720px, 90vw);
  max-width: none;
  margin: clamp(6px, 1vh, 14px) auto 0;
}

.plogos--fund img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.28s ease;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-1);
}

.plogos--fund img.lead-logo {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin-bottom: 0;
  padding: clamp(16px, 2vw, 24px) clamp(22px, 2.8vw, 34px);
}

.plogos-peers {
  display: contents;
}

.plogos--fund .plogos-peers img {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: clamp(46px, 4.8vw, 62px);
  max-height: none;
  box-sizing: content-box;
  padding: clamp(18px, 2.2vw, 26px);
}

.plogos--fund img:hover, .plogos--fund img:focus-visible {
  filter: none;
}

@media (hover: none) {
  .plogos--fund img {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plogos--fund img {
    transition: none;
  }
}
@media (max-width: 560px) {
  .plogos--fund {
    width: min(340px, 88vw);
  }
  .plogos--fund .plogos-peers img {
    flex: 0 0 100%;
  }
}
/* ---------- horizontal rail: snap-scrolling card track with arrows + dots ---------- */
.railwrap {
  position: relative;
  margin-top: clamp(26px, 3.4vh, 40px);
}

.rail {
  --cols:3;
  --gap:clamp(16px,1.6vw,22px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 3px 3px 6px;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  scroll-snap-align: start;
  min-width: 0;
}

.railnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

.railbtn {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font-size: 19px;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, opacity 0.16s;
}

.railbtn:hover {
  border-color: var(--arm);
  background: var(--oo-fog);
}

.railbtn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.railbtn[disabled]:hover {
  border-color: var(--border);
  background: var(--bg);
}

@media (max-width: 1100px) {
  .rail {
    --cols:2;
  }
}
@media (max-width: 700px) {
  .rail {
    --cols:1;
  }
}
/* ---------- press: coverage preview cards ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--oo-white);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.pcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--arm) 40%, var(--border));
}

.pcard-top {
  position: relative;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  background: var(--oo-fog);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: clamp(22px, 3vw, 38px);
}

.pcard-top img {
  max-width: 74%;
  max-height: 56%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.86;
}

.pcard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  flex: 1;
}

.pcard-date {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.pcard-title {
  font: 400 clamp(17px, 1.3vw, 19px)/1.34 var(--font-display);
  letter-spacing: -0.014em;
  color: var(--fg);
  text-wrap: pretty;
}

.pcard-go {
  margin-top: auto;
  padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);
  font: 500 13px/1 var(--font-display);
  color: var(--arm-deep);
}

.pcard:hover .pcard-go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pcard--todo {
  cursor: default;
}

.pcard--todo:hover {
  transform: none;
  box-shadow: var(--shadow-1);
  border-color: var(--border);
}

.pcard-top .logo--todo {
  max-width: none;
  height: auto;
}

/* ---------- newsroom: release cards in the rail ---------- */
.ncard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--oo-white);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.ncard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--arm) 40%, var(--border));
}

.ncard-pic {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--oo-fog);
  border-bottom: 1px solid var(--border);
}

.ncard-pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s;
}

.ncard:hover .ncard-pic img {
  transform: scale(1.04);
}

.ncard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  flex: 1;
}

.ncard-date {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ncard-title {
  font: 400 clamp(17px, 1.3vw, 19px)/1.34 var(--font-display);
  letter-spacing: -0.014em;
  color: var(--fg);
  text-wrap: pretty;
}

.ncard-ex {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ncard-go {
  margin-top: auto;
  padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);
  font: 500 13px/1 var(--font-display);
  color: var(--arm-deep);
}

.ncard:hover .ncard-go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- conferences: where it works, with imagery ---------- */
.wgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(26px, 3.4vh, 40px);
}

.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(280px, 32vh, 360px);
  border-radius: var(--card-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--oo-graphite);
}

.wcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
  transition: transform 0.5s;
}

.wcard:hover img {
  transform: scale(1.05);
}

.wcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 9, 10, 0.12) 0%, rgba(11, 9, 10, 0.52) 52%, rgba(11, 9, 10, 0.88) 100%);
}

.wcard-txt {
  padding: clamp(22px, 2.6vw, 32px);
}

.wcard .h-md {
  color: var(--oo-white);
  margin: 0 0 10px;
}

.wcard .body {
  color: rgba(252, 252, 252, 0.84);
  margin: 0;
}

.wcard-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--arm);
}

@media (max-width: 820px) {
  .wgrid {
    grid-template-columns: 1fr;
  }
}
/* quote rail: cards hold equal height and the tallest quote sets the measure */
.rail--q {
  --cols:3;
}

.rail--q .qcard {
  height: 100%;
}

@media (max-width: 1080px) {
  .rail--q {
    --cols:2;
  }
}
@media (max-width: 700px) {
  .rail--q {
    --cols:1;
  }
}
/* where it works: icon-led cards, on a tinted ground so the block has weight */
[data-shade] .card--ico {
  background: var(--oo-white);
  border-color: var(--border);
}

.card--ico .h-md {
  margin: 0 0 10px;
}

.card--ico .body {
  margin: 0;
}

.card--ico .cico {
  width: 42px;
  height: 42px;
}

.card--ico .cico svg {
  width: 22px;
  height: 22px;
}

/* newsroom releases as a grid — every release visible at once */
.ngrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(26px, 3.4vh, 40px);
}

.ngrid .ncard {
  height: 100%;
}

/* press featured coverage as a bento */
.pgridx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(26px, 3.4vh, 40px);
}

.pgridx > * {
  height: 100%;
}

/* media coverage rail */
.rail--m {
  --cols:4;
}

.rail--m .mcard {
  height: 100%;
}

@media (max-width: 1180px) {
  .rail--m {
    --cols:3;
  }
}
@media (max-width: 900px) {
  .rail--m {
    --cols:2;
  }
}
@media (max-width: 640px) {
  .rail--m {
    --cols:1;
  }
}
/* no rule on the story module itself */
#story.sec::before {
  content: none;
}

/* educator hero reserves a video: 16:9 frame with a play affordance */
.frame--video {
  position: relative;
  aspect-ratio: 16/9;
}

.frame--video image-slot, .frame--video video, .frame--video iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* embedded player: the provider owns playback and full-screen, so no local cursor or
   click handling — the frame only supplies the box and the card radius */
.frame--embed {
  overflow: hidden;
  background: #000;
}

.frame--embed iframe {
  border: 0;
  border-radius: inherit;
}

.frame--video video {
  -o-object-fit: cover;
     object-fit: cover;
  background: #0B090A;
  border-radius: inherit;
  cursor: pointer;
}

/* fullscreen: the frame crops to fill its 16:9 box in the page, but full-screen must show
   the whole picture and carry no card radius */
.frame--video video:fullscreen {
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  cursor: auto;
  background: #000;
}

.frame--video video:-webkit-full-screen {
  object-fit: contain;
  border-radius: 0;
  background: #000;
}

.vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 9, 10, 0.55);
  color: var(--oo-white);
  pointer-events: none;
}

.vplay svg {
  width: 34px;
  height: 34px;
}

/* ======================================================================
   Competition — mission treatment. Dark ground, tabbed cards, step
   accordions and a horizontal timeline, per the NJI prototype.
   Scoped entirely to body[data-theme="competition"].
   ====================================================================== */
html:has(body[data-theme=competition]) {
  background: #22272B;
}

body[data-theme=competition] {
  color: #FCFCFC;
  --mg:#22272B;
  --mcard:#15181B;
  --mline:rgba(252,252,252,.22);
  --mline-soft:rgba(252,252,252,.13);
  --mfg:#FCFCFC;
  --mdim:rgba(252,252,252,.78);
  --mfaint:rgba(252,252,252,.5);
  --mv:#7C5CFF;
  --mv-deep:#5A34C4;
  --mgreen:#58DBA6;
  background: var(--mg);
  background-attachment: scroll;
}

body[data-theme=competition]::before, body[data-theme=competition]::after {
  content: none;
}

body[data-theme=competition] a {
  color: var(--mfg);
}

body[data-theme=competition] a:hover {
  color: var(--mgreen);
}

/* header inverts so the light chrome does not butt against the dark hero */
body[data-theme=competition] .hdr {
  --mfg:#14181A;
  --mdim:rgba(20,24,26,.72);
  --mline:rgba(20,24,26,.18);
  --mline-soft:rgba(20,24,26,.10);
  --mcard:#FFFFFF;
  --mg:#DCE6EC;
  border-bottom-color: var(--mline-soft);
}

body[data-theme=competition] .hdr .navmenu a:hover {
  background: rgba(20, 24, 26, 0.06);
}

body[data-theme=competition] .hdr .navmenu {
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16), 0 2px 6px rgba(11, 9, 10, 0.08);
}

body[data-theme=competition] .hdr.hdr--menu {
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16);
}

body[data-theme=competition] .hdr .lock {
  color: var(--mfg);
}

body[data-theme=competition] .nav > a, body[data-theme=competition] .navtop {
  color: var(--mfg);
}

body[data-theme=competition] .nav > a:hover, body[data-theme=competition] .navtop:hover {
  color: var(--mfg);
}

body[data-theme=competition] .burger {
  color: var(--mfg);
  border-color: var(--mline);
}

body[data-theme=competition] .btn--outline {
  color: var(--mfg);
  border-color: var(--mline);
}

body[data-theme=competition] .btn--outline:hover {
  border-color: var(--mfg);
  background: rgba(252, 252, 252, 0.08);
}

/* the dropdown panel inverts with the rest of the header, rather than staying a white card */
body[data-theme=competition] .hdr .navmenu {
  background: var(--mcard);
  border-color: var(--mline);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* burger state: the global rule forces the open header white, but every item here is light ink */
body[data-theme=competition] .hdr.hdr--menu {
  background: var(--mg) !important;
  border-bottom-color: var(--mline-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body[data-theme=competition] .hdr.hdr--menu .nav.open {
  border-top-color: var(--mline-soft);
}

body[data-theme=competition] .hdr.hdr--menu .nav.open > a, body[data-theme=competition] .hdr.hdr--menu .nav.open .navgrp {
  border-bottom-color: var(--mline-soft);
}

body[data-theme=competition] .hdr.hdr--menu .hdrcta {
  border-top-color: var(--mline-soft);
}

body[data-theme=competition] .hdr .nav.open .navmenu {
  background: transparent;
  box-shadow: none;
}

body[data-theme=competition] .hdr .navmenu a {
  color: var(--mfg);
}

body[data-theme=competition] .hdr .navmenu a:hover {
  background: rgba(20, 24, 26, 0.08);
  color: var(--arm-deep);
}

body[data-theme=competition] .hdr .navmenu a[aria-current=page] {
  color: var(--mfg);
}

/* ---- hero: two vector halos, green left of centre into violet at the right.
   The falloff and the downward fade live in the SVG, so there is no raster blur to rescale. ---- */
.mhero {
  position: relative;
  overflow-x: clip;
  padding: clamp(96px, 15vh, 190px) 0 clamp(40px, 6vh, 72px);
}

.aurora {
  position: absolute;
  left: -4%;
  top: -16%;
  width: 108%;
  height: min(1180px, 230%);
  z-index: 0;
  pointer-events: none;
}

/* the halos drift on two long, unequal loops, so the pair never repeats a pose */
.aurora .hG, .aurora .hV {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .aurora .hG {
    animation: auDriftG 38s ease-in-out infinite;
  }
  .aurora .hV {
    animation: auDriftV 47s ease-in-out infinite;
  }
}
@keyframes auDriftG {
  0% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(190px, 70px) scale(1.08);
  }
  62% {
    transform: translate(-90px, 120px) scale(0.95);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes auDriftV {
  0% {
    transform: translate(0, 0) scale(1);
  }
  34% {
    transform: translate(-210px, 100px) scale(0.94);
  }
  68% {
    transform: translate(70px, -60px) scale(1.09);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
/* the title carried both the name and its descriptor at one weight, which read flat.
   They now separate: the name in the display face, the descriptor in the mono voice the
   rest of the page uses for labels, with the hero's own green-to-violet run between them. */
.mh1 {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.2vh, 28px);
  color: var(--mfg);
}

.mh1a {
  font: 200 clamp(42px, 7.6vw, 116px)/0.98 var(--font-display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.mh1r {
  display: block;
  width: clamp(180px, 26vw, 420px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2FE0A4, #2C7BE5 52%, #8B6BFF);
}

.mh1b {
  font: 400 clamp(12px, 1.5vw, 19px)/1.2 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, 0.82);
}

@media (max-width: 600px) {
  .mh1b {
    letter-spacing: 0.16em;
  }
}
/* ---- shared section rhythm ---- */
.msec {
  position: relative;
  padding: clamp(30px, 5vh, 58px) 0;
}

.msec--last {
  padding-bottom: clamp(56px, 9vh, 110px);
}

/* ---- tabbed card: label protrudes from the top-left corner ---- */
.tabcard {
  position: relative;
  margin-top: 19px;
  border: 1px solid var(--mline);
  border-radius: 22px;
  background: linear-gradient(158deg, rgba(252, 252, 252, 0.045), rgba(252, 252, 252, 0) 58%);
}

.tab {
  position: absolute;
  top: -19px;
  left: clamp(20px, 4vw, 62px);
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 9px 9px 0 0;
  font: 500 12.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}

.tab--v {
  background: #6A3FE0;
  color: #fff;
}

.tab--w {
  background: var(--mfg);
  color: #16191C;
}

.tcinner {
  border-radius: 21px;
  overflow: hidden;
}

.tcinner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--mcard);
}

.tcpad {
  position: relative;
  padding: clamp(30px, 4vw, 54px) clamp(26px, 3.4vw, 46px) clamp(44px, 5vw, 58px);
}

.tcmedia {
  position: relative;
  min-height: 100%;
}

.tcmedia .frame {
  height: 100%;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.tcmedia image-slot {
  min-height: clamp(320px, 44vh, 540px);
}

/* a still can be cropped to fill the split panel; a trailer cannot — it keeps its own 16:9
   and centres in the column instead of being stretched to the text's height. Keyed on the
   frame variant, not the tag, so it holds whether the trailer is a <video> or an embed:
   .tcmedia .frame{aspect-ratio:auto;height:100%} is (0,2,0) and would otherwise win. */
.tcmedia:has(.frame--video) {
  display: block;
  padding: 0;
}

.tcmedia:has(.frame--video) .frame--video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .tcinner--split {
    grid-template-columns: 1fr;
  }
  .tcmedia {
    order: -1;
  }
}
/* ---- type inside the mission cards ---- */
.mh2 {
  margin: 0 0 22px;
  font: 500 clamp(28px, 3.3vw, 44px)/1.12 var(--font-display);
  letter-spacing: -0.028em;
  color: var(--mfg);
}

.mh2--sm {
  font-size: clamp(26px, 2.9vw, 38px);
}

.mh3 {
  margin: 34px 0 8px;
  font: 500 clamp(20px, 2vw, 27px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--mfg);
}

.mbody {
  margin: 0;
  font: 400 15.5px/1.62 var(--font-body);
  color: var(--mdim);
  text-wrap: pretty;
}

.mbody--tight {
  margin-top: 14px;
}

.mnote {
  margin: 0;
  font: 400 14.5px/1.6 var(--font-body);
  color: #A98BFF;
}

.mnote a {
  color: var(--mfg);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mnote a:hover {
  color: var(--mgreen);
}

.omono, .opsoon, .opdec {
  display: block;
  font: 400 11.5px/1.5 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mfaint);
}

/* ---- form on the dark ground ---- */
.mform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.mfield--full {
  grid-column: 1/-1;
}

.mfield label,
form.mform .gfield_label {
  display: block;
  margin-bottom: 7px;
  font: 400 13.5px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mdim);
}

.mform input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 15px;
  border: 1px solid var(--mline);
  border-radius: 10px;
  background: transparent;
  color: var(--mfg);
  font: 400 15px/1 var(--font-body);
}

.mform input::-moz-placeholder {
  color: var(--mfaint);
}

.mform input::placeholder {
  color: var(--mfaint);
}

.mform input:focus-visible {
  outline: 2px solid var(--mgreen);
  outline-offset: 1px;
}

.minput {
  position: relative;
  display: block;
}

.minput input {
  padding-left: 46px;
}

.mic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--mfaint);
  pointer-events: none;
}

.mic svg {
  width: 100%;
  height: 100%;
}

.msent {
  font: 400 13.5px/1.6 var(--font-mono);
  color: var(--mgreen);
}

@media (max-width: 900px) {
  .mform {
    grid-template-columns: 1fr;
  }
}
/* ---- outlined mission button ---- */
.obtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--mfg);
  border-radius: 9px;
  background: transparent;
  color: var(--mfg);
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.obtn:hover {
  background: var(--mfg);
  color: #16191C;
}

.obtn--lg {
  min-height: 54px;
  padding: 0 30px;
  margin-top: 30px;
}

/* ---- timeline: horizontal track inside the card ---- */
.tctrack {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: clamp(34px, 4.4vw, 52px) 0;
  scrollbar-width: none;
}

.tctrack::-webkit-scrollbar {
  display: none;
}

.tcol {
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: start;
  padding: 0 clamp(24px, 3.4vw, 48px);
  border-left: 1px solid transparent;
}

.tcol + .tcol {
  border-left-color: var(--mline-soft);
}

.tdate {
  display: block;
  font: 400 14px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--mfaint);
}

.th {
  margin: 12px 0 16px;
  font: 500 clamp(22px, 2.2vw, 30px)/1.18 var(--font-display);
  letter-spacing: -0.022em;
  color: var(--mfg);
}

.tul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.tul li {
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--mdim);
}

.tul li + li {
  margin-top: 7px;
}

.tflag {
  display: inline-block;
  margin-top: 16px;
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--mfaint);
  border: 1px dashed var(--mline);
  border-radius: 6px;
  padding: 5px 9px;
}

.tnav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin-top: 22px;
  padding: 0 clamp(10px, 3vw, 58px);
}

.tarrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mfg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.16s, background 0.16s;
}

.tarrow:hover {
  background: rgba(252, 252, 252, 0.09);
}

.tarrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.ttrack {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--mline-soft);
}

.ttrack i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--mfg);
  transition: left 0.2s, width 0.2s;
}

/* ---- operation step cards ---- */
.opcard {
  margin-top: clamp(30px, 4vh, 46px);
  clip-path: inset(-30px 0 0 0 round 22px);
}

.opcard:first-of-type {
  margin-top: 19px;
}

.opinner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  padding: clamp(18px, 2.1vw, 26px) clamp(18px, 2.2vw, 30px);
  min-height: clamp(132px, 11.5vw, 164px);
  box-sizing: border-box;
}

.opcard--locked {
  border-color: var(--mline-soft);
}

.opmid {
  position: relative;
  text-align: center;
  isolation: isolate;
}

.opwm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: visible;
  color: var(--mfg);
}

/* Sized off card width (the header row is too short to size against) and placed on the
   design’s own horizontal fractions: Constellation on the title, Lumen left, Sentinel right. */
.opwm img {
  position: absolute;
  display: block;
  opacity: 0.2;
}

.opwm--con img {
  left: 51.8%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 20.5%;
  height: auto;
}

.opwm--lum img {
  left: 34.3%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 13%;
  height: auto;
}

.opwm--sen img {
  left: 64.4%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 13.5%;
  height: auto;
}

@media (max-width: 860px) {
  .opwm img {
    opacity: 0.14;
  }
}
.opre {
  display: block;
  font: 400 clamp(11px, 0.95vw, 13px)/1.3 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mdim);
}

.opname {
  margin: 2px 0 6px;
  font: 300 clamp(27px, 3.1vw, 44px)/1.05 var(--font-display);
  letter-spacing: -0.032em;
  color: var(--mfg);
}

.opcard--locked .opname {
  color: rgba(252, 252, 252, 0.7);
}

.opprize {
  display: block;
  font: 400 clamp(11.5px, 1vw, 14px)/1.4 var(--font-mono);
  letter-spacing: 0.09em;
  color: #A98BFF;
}

.opcard--locked .opprize {
  color: var(--mfaint);
}

.opright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.opdec {
  display: flex;
  align-items: center;
  gap: 10px;
}

.olock {
  width: 19px;
  height: 19px;
  color: var(--mfg);
}

.olock svg {
  width: 100%;
  height: 100%;
}

.osel {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-width: min(212px, 100%);
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--mfg);
  border-radius: 9px;
  background: transparent;
  color: var(--mfg);
  font: 400 16px/1 var(--font-body);
  cursor: pointer;
  transition: background 0.16s;
}

.osel:hover {
  background: rgba(252, 252, 252, 0.09);
}

.osel i {
  font-style: normal;
  font-size: 13px;
  transition: transform 0.2s;
}

.osel[aria-expanded=true] i {
  transform: rotate(180deg);
}

.opsoon {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 12.5px;
  color: var(--mdim);
}

.oclock {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 14px);
}

.ou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ou b {
  font: 400 clamp(20px, 2vw, 28px)/1 var(--font-display);
  color: var(--mfg);
  font-variant-numeric: tabular-nums;
}

.ou i {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mfaint);
  font-style: normal;
}

.os {
  font: 400 clamp(20px, 2.2vw, 30px)/1.2 var(--font-display);
  color: var(--mfaint);
}

@media (max-width: 760px) {
  .opinner {
    grid-template-columns: 1fr;
    text-align: left;
    min-height: 0;
  }
  .opright {
    align-items: flex-start;
  }
  .opmid {
    text-align: left;
  }
  .opwm--x {
    left: 0;
    transform: translateY(-50%);
    height: clamp(96px, 22vw, 124px);
  }
}
/* cipher block — scoped, and the old panel chrome reset off */
body[data-theme=competition] .cipher {
  position: relative;
  width: auto;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  overflow: visible;
}

body[data-theme=competition] .ccode {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  word-spacing: 0.09em;
  font: 400 7.5px/1.63 var(--font-mono);
  letter-spacing: 0.17em;
  color: #FCFCFC;
  opacity: 0.7;
  text-transform: uppercase;
  white-space: pre;
}

body[data-theme=competition] .ccode .cline {
  opacity: 1;
  color: inherit;
  white-space: pre;
}

body[data-theme=competition] .opcard--open .ccode {
  color: #FCFCFC;
  opacity: 0.7;
}

body[data-theme=competition] .cipher[data-decoded] .ccode {
  font-size: clamp(8px, 0.7vw, 9.6px);
  letter-spacing: 0.1em;
  gap: 6px;
  color: var(--mgreen);
}

body[data-theme=competition] .cipher[data-decoded] .cline {
  font-weight: 400;
}

/* header content sits above the mark, and no divider crosses it once revealed */
.opinner > :not(.opwm) {
  position: relative;
  z-index: 1;
}

/* expanded operation panel */
.oppanel {
  animation: opDrop 0.92s cubic-bezier(0.19, 0.92, 0.22, 1) both;
  border-top: 1px solid var(--mline-soft);
  padding: clamp(28px, 3.6vw, 46px) clamp(24px, 3vw, 44px) clamp(34px, 4.4vw, 54px);
}

.opsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px);
  align-items: start;
}

.opvid {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(140deg, #2C7BE5, #6A3FE0 55%, #1E8578);
}

button.opvid {
  cursor: pointer;
}

button.opvid:hover .opvplay, button.opvid:focus-visible .opvplay {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(11, 9, 10, 0.5);
}

.opvplay {
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* a poster whose video is not hosted yet: the play mark stays, dimmed, and says why */
.opvid--todo .opvplay {
  opacity: 0.45;
}

.opvflag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: rgba(11, 9, 10, 0.72);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(252, 252, 252, 0.86);
}

/* P4 · a faint graph-paper grid behind the requirement number and label */
.req::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(252, 252, 252, 0.05) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(252, 252, 252, 0.05) 0 1px, transparent 1px 20px);
}

.req > * {
  position: relative;
  z-index: 1;
}

.opvid {
  aspect-ratio: 16/9;
}

.opvplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 6vw, 80px);
  height: clamp(56px, 6vw, 80px);
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  pointer-events: none;
}

.opvplay svg {
  width: 52%;
  height: 52%;
}

.optxt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.opsum {
  margin: 0 0 20px;
  font: 400 clamp(21px, 2.1vw, 30px)/1.28 var(--font-display);
  letter-spacing: -0.022em;
  color: var(--mfg);
  text-wrap: pretty;
}

.optxt .mbody {
  margin-bottom: 24px;
}

.opdocs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 34px);
}

.opdocs + .opdocs {
  margin-top: 14px;
}

body[data-theme=competition] .opdocs a {
  font: 400 clamp(15px, 1.3vw, 18px)/1.5 var(--font-body);
  color: #A98BFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-theme=competition] .opdocs a:hover {
  color: var(--mgreen);
}

.oprule {
  width: 100%;
  height: 1px;
  margin: clamp(22px, 2.8vh, 34px) 0 20px;
  border: 0;
  background: var(--mline-soft);
}

.opready {
  margin: 10px 0 0;
}

body[data-theme=competition] .opready a {
  font: 400 clamp(15px, 1.35vw, 19px)/1.5 var(--font-body);
  color: #A98BFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-theme=competition] .opready a:hover {
  color: var(--mgreen);
}

/* deadline block, centred */
.opdue {
  margin-top: clamp(36px, 5vh, 68px);
  text-align: center;
}

.opdue .omono {
  margin-bottom: 14px;
}

.opdate {
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  font: 300 clamp(26px, 3.6vw, 50px)/1.1 var(--font-display);
  letter-spacing: -0.03em;
  color: #A98BFF;
}

.oclock--due {
  justify-content: center;
}

.oclock--due b {
  font-size: clamp(26px, 2.9vw, 40px);
}

/* requirements */
.opreq {
  margin-top: clamp(34px, 4.6vh, 62px);
  text-align: center;
}

.opreqh {
  text-transform: none;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  font: 400 clamp(21px, 2.1vw, 29px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--mfg);
}

.reqgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.req {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vh, 26px);
  min-height: clamp(150px, 17vh, 196px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 5px;
  background: linear-gradient(#15181B, #15181B) padding-box, linear-gradient(150deg, var(--mgreen), #6A3FE0) border-box;
  border: 1px solid transparent;
  background-image: repeating-linear-gradient(0deg, rgba(252, 252, 252, 0.045) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(252, 252, 252, 0.045) 0 1px, transparent 1px 18px), linear-gradient(#15181B, #15181B), linear-gradient(150deg, var(--mgreen), #6A3FE0);
  background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
}

.reqn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mline);
  border-radius: 50%;
  font: 400 13px/1 var(--font-mono);
  color: var(--mdim);
}

.reqt {
  font: 400 clamp(16px, 1.5vw, 21px)/1.34 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--mfg);
}

.reqt i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.76em;
  color: var(--mfaint);
}

.obtn--fill {
  margin-top: clamp(26px, 3.4vh, 42px);
  background: #6A3FE0;
  border-color: #6A3FE0;
  color: #fff;
}

.obtn--fill:hover {
  background: #7C5CFF;
  border-color: #7C5CFF;
  color: #fff;
}

/* open state: the select collapses to the outlined caret from the prototype */
.osel[aria-expanded=true] {
  min-width: 0;
  min-height: 0;
  gap: 0;
  border: 0;
  padding: 0;
  font-size: 0;
  border-radius: 0;
  background: transparent;
}

.osel[aria-expanded=true]:hover, .osel[aria-expanded=true]:focus-visible {
  background: transparent;
}

.osel[aria-expanded=true] i {
  font-size: 30px;
  color: var(--mfg);
  transform: rotate(180deg);
  line-height: 1;
}

.osel[aria-expanded=true]:hover i {
  color: var(--mgreen);
}

/* the label stays through the sequence: lock falls away, then the text resolves to white */
.olock {
  transition: transform 0.72s cubic-bezier(0.34, 0.06, 0.3, 1), opacity 0.6s ease;
}

.odtx {
  font: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  text-transform: uppercase;
  transition: color 0.32s ease, letter-spacing 0.32s ease;
}

.opdec.is-dropping .olock, .opdec.is-unlocked .olock {
  transform: translateY(15px) rotate(-9deg);
  opacity: 0;
}

.opdec.is-unlocked .odtx {
  color: var(--mfg);
  letter-spacing: 0.135em;
}

.opdec {
  transition: opacity 0.42s ease;
}

.opdec.is-gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .olock, .odtx {
    transition: none;
  }
}
@media (max-width: 900px) {
  .opsplit {
    grid-template-columns: 1fr;
  }
  .reqgrid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opvplay {
    transition: none;
  }
}
/* ---- mission essentials ---- */
.esshead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 clamp(24px, 3.2vh, 38px);
  font: 500 clamp(15px, 1.5vw, 21px)/1.35 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mfg);
}

.essarr {
  font-size: 1.3em;
  line-height: 1;
  color: var(--mfaint);
}

.essgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 26px);
}

.ess {
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(100deg, #3A3FD4 0%, #5A5EE8 46%, #9092F2 100%);
}

.essq {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  width: 100%;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.essico {
  flex: 0 0 auto;
  width: clamp(34px, 3vw, 42px);
  height: clamp(34px, 3vw, 42px);
  color: #fff;
}

.essico svg, .essico img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.esst {
  flex: 1;
  font: 400 clamp(17px, 1.6vw, 22px)/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: #fff;
}

.essp {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: #fff;
  transition: transform 0.2s;
}

.essp svg {
  width: 100%;
  height: 100%;
}

.essq[aria-expanded=true] .essp {
  transform: rotate(45deg);
}

.essa {
  display: none;
  padding: 0 clamp(20px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px);
}

.essa p {
  margin: 0;
  font: 400 15.5px/1.65 var(--font-body);
  color: rgba(255, 255, 255, 0.94);
  text-wrap: pretty;
}

.essq[aria-expanded=true] + .essa {
  display: block;
}

@media (max-width: 820px) {
  .essgrid {
    grid-template-columns: 1fr;
  }
}
/* ---- find other ways ---- */
.invgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 86px);
  align-items: center;
}

.invpic {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(252, 252, 252, 0.05);
}

.invpic img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/11;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 860px) {
  .invgrid {
    grid-template-columns: 1fr;
  }
}
/* footer keeps its own dark ground; drop the seam against the page */
body[data-theme=competition] .ftr {
  border-top: 1px solid var(--mline-soft);
}

/* homepage hero: the headline and lead carry the page, so scale both up */
.home .h-xl {
  font-size: clamp(38px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.home .lead {
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.58;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .home .h-xl {
    font-size: clamp(34px, 8.6vw, 52px);
  }
  .home .lead {
    font-size: clamp(16px, 4vw, 19px);
  }
}
/* newsletter block: label and eyebrow carry more weight */
#subscribe .eyebrow, #subscribe .field label {
  font-weight: 700;
}

/* coverage: single-column head, and the line is held to one row at every width —
   the display face measures 15.57x its font-size for this string, so 5.6vw always clears the wrap */
#coverage .sechead {
  display: block;
}

#coverage .sechead .h-lg {
  max-width: none;
  white-space: nowrap;
  font-size: min(46px, 5.6vw);
}

/* funders: the copy column tops align, rather than bottom-aligning as elsewhere */
#funders .sechead {
  align-items: flex-start;
}

#funders .sechead .lead {
  margin-top: 0;
}

/* funders: standard section head, logo wall centred beneath it */
#funders .fundgrid {
  margin-inline: auto;
  margin-top: clamp(30px, 4vh, 50px);
}

/* press carousel: the outlet mark reads at a glance */
.rail--q .qcard .qlogo {
  height: 34px;
  max-width: 190px;
  margin-bottom: 20px;
  opacity: 0.9;
}

@media (max-width: 700px) {
  .rail--q .qcard .qlogo {
    height: 28px;
    max-width: 160px;
  }
}
/* story milestones: headings carry more weight than the 300 default */
.schap .stxt .h-md {
  font-weight: 600;
}

/* Our Story: close the gap between the sub-hero and the first chapter */
.hero--single .inner {
  padding-bottom: clamp(18px, 2.2vh, 28px);
}

#story {
  padding-top: 0;
}

/* photos render at full fidelity at rest; hover lifts colour only, never sharpness —
   a rest-state blur reads as a low-resolution asset rather than as an effect */
.tmpic img, .spic img, .opic img, .pic img, .ncard-pic img, .frame img, .cslide img, .invpic img, .storyquad img, .cpic img, .qrart img, .chap .cimg {
  filter: saturate(0.94);
  transition: filter 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tmpic:hover img, .spic:hover img, .opic:hover img, .pic:hover img, .ncard-pic:hover img, .frame:hover img, .cslide:hover img, .invpic:hover img, .storyquad:hover img, .cpic:hover img, .qrart:hover img, .tm:hover .tmpic img, .chap:hover .cimg {
  filter: saturate(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .tmpic img, .spic img, .opic img, .pic img, .ncard-pic img, .frame img, .cslide img, .invpic img, .storyquad img, .cpic img, .qrart img, .chap .cimg {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tmpic img, .spic img, .opic img, .pic img, .ncard-pic img, .frame img, .cslide img, .invpic img, .storyquad img, .cpic img, .qrart img, .chap .cimg {
    filter: none;
    transition: none;
  }
}
/* ---------- eyebrow colour follows the page's audience ----------
   Arm-scoped pages take the arm's deep tone (violet / teal); audience-agnostic
   pages keep the neutral grey from the base rule. Kept at low specificity with
   :where() so the dark-ground overrides (footer, .sec--dark, .sec--alt) still win. */
body[data-aud=arm] :where(.eyebrow) {
  color: var(--arm-deep);
}

body[data-aud=arm] .hero :where(.eyebrow) {
  color: var(--arm-deep);
}

body[data-aud=arm] .hero :where(.eyebrow) b {
  color: var(--arm-deep);
}

/* .sec--alt is a transparent band now, not a dark one, so its eyebrow follows the arm too */
body[data-aud=arm] .sec--alt :where(.eyebrow) {
  color: var(--arm-deep);
}

/* the visualizer screenshot is dense — on hover the whole figure lifts and grows so the
   chart can be read, anchored at its right edge so it expands inward, never off-screen.
   The scale is per-breakpoint: it can only grow into space the layout actually has. */
/* The visualizer screenshot is dense, and scaling it inside its column only ever bought a
   few percent. Clicking it mirrors the figure into a body-level overlay instead: .picwrap
   sits inside .netzone (isolation:isolate) and carries the reveal layer's identity
   transform, either of which would trap a fixed child in a nested containing block and
   paint it under the sticky header. The overlay is a direct child of <body>. */
.picwrap {
  position: relative;
}

.picpop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(11, 9, 10, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: zoom-out;
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 300ms;
}

.picpop[data-on] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.picpop img {
  display: block;
  width: var(--popW, 80vw);
  height: auto;
  border-radius: var(--card-r);
  border: 1px solid rgba(252, 252, 252, 0.18);
  box-shadow: 0 40px 110px rgba(11, 9, 10, 0.5);
  transform: scale(0.965);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.picpop[data-on] img {
  transform: none;
}

.picpop .popclose {
  position: absolute;
  top: max(16px, 3vh);
  right: max(16px, 3vw);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(252, 252, 252, 0.4);
  background: transparent;
  color: var(--oo-white);
  font: 600 13px/1 var(--font-display);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.picpop .popclose:hover {
  background: var(--oo-white);
  color: var(--oo-ink);
  border-color: var(--oo-white);
}

@media (prefers-reduced-motion: reduce) {
  .picpop, .picpop img {
    transition: none;
  }
}
/* ======================================================================
   DARK HEADER — site-wide
   Every rule is scoped to .hdr, so page content is untouched. The header
   carries its own tokens rather than borrowing the competition page's, which
   are scoped to that body. Competition's own header rules are more specific
   and still win, keeping its slightly deeper tone.
   ====================================================================== */
.hdr {
  --hg:#E3E8EC;
  --hcard:#FFFFFF;
  --hfg:#14181A;
  --hdim:rgba(20,24,26,.72);
  --hline:rgba(20,24,26,.18);
  --hline-soft:rgba(20,24,26,.10);
  background: #E3E8EC;
  border-bottom-color: rgba(20, 24, 26, 0.1);
}

/* ---- the header carries the audience ----
   Pages that vary by arm take that arm's colour; pages that serve both take the two
   blended, so an audience-agnostic page reads as belonging to neither rather than
   defaulting to one. Keyed on the existing data-aud/data-arm signals — the toggle
   mechanism itself is untouched. Tints are deep enough that the nav ink stays legible:
   white measures 7.65 on the teal and 9.77 on the violet, dimmed ink 5.38 and 6.65. */
html[data-arm=edu] body[data-aud=arm] .hdr {
  --hg:#D3EBE2;
  --hcard:#FFFFFF;
  background: #D3EBE2;
}

html[data-arm=pro] body[data-aud=arm] .hdr {
  --hg:#E2DBFA;
  --hcard:#FFFFFF;
  background: #E2DBFA;
}

body:not([data-aud=arm]) .hdr {
  --hg:#DCE6EC;
  --hcard:#FFFFFF;
  background: linear-gradient(90deg, #D3EBE2 0%, #DEE4F2 52%, #E2DBFA 100%);
}

.hdr .lock {
  color: var(--hfg);
}

.hdr .nav > a, .hdr .navtop {
  color: var(--hfg);
}

.hdr .nav > a:hover, .hdr .navtop:hover {
  color: var(--hfg);
}

.hdr .nav > a[aria-current=page] {
  color: var(--hfg);
  border-bottom-color: var(--arm-soft);
}

.hdr .burger {
  color: var(--hfg);
  border-color: var(--hline);
}

.hdr .burger:hover {
  background: rgba(20, 24, 26, 0.06);
}

.hdr .btn--outline {
  color: var(--hfg);
  border-color: var(--hline);
}

.hdr .btn--outline:hover {
  background: rgba(20, 24, 26, 0.06);
  color: var(--hfg);
  border-color: var(--hfg);
}

.hdr .skip {
  color: var(--hfg);
}

/* dropdown panel inverts with the header rather than staying a white card */
.hdr .navmenu {
  background: var(--hcard);
  border-color: var(--hline);
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16), 0 2px 6px rgba(11, 9, 10, 0.08);
}

.hdr .navmenu a {
  color: var(--hfg);
}

.hdr .navmenu a:hover {
  background: rgba(20, 24, 26, 0.08);
  color: var(--arm-deep);
}

.hdr .navmenu a[aria-current=page] {
  color: var(--hfg);
}

/* the open burger menu is forced opaque white by an earlier rule */
.hdr.hdr--menu {
  background: var(--hg) !important;
  border-bottom-color: var(--hline-soft);
  box-shadow: 0 18px 40px rgba(11, 9, 10, 0.16);
}

.hdr.hdr--menu .nav.open {
  border-top-color: var(--hline-soft);
}

.hdr.hdr--menu .nav.open > a, .hdr.hdr--menu .nav.open .navgrp {
  border-bottom-color: var(--hline-soft);
}

.hdr.hdr--menu .hdrcta {
  border-top-color: var(--hline-soft);
}

.hdr .nav.open .navmenu {
  background: transparent;
  box-shadow: none;
}

/* the audience switch keeps its raised-pill construction, on a sunken dark track */
.hdr .armsw {
  background: linear-gradient(180deg, #14181B, #1D2225 58%, #252A2E);
  border-color: rgba(252, 252, 252, 0.16);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-arm=pro] .hdr .armsw button[data-arm-set=edu], html[data-arm=edu] .hdr .armsw button[data-arm-set=pro], .hdr .armsw button[aria-pressed=false] {
  background: linear-gradient(180deg, #3A4145, #2C3236);
  background-image: linear-gradient(180deg, #3A4145, #2C3236);
  color: rgba(252, 252, 252, 0.82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-arm=pro] .hdr .armsw button[data-arm-set=edu]:hover, html[data-arm=edu] .hdr .armsw button[data-arm-set=pro]:hover, .hdr .armsw button[aria-pressed=false]:hover {
  background: linear-gradient(180deg, #454D52, #343A3E);
  color: var(--hfg);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .hdr .armsw {
    background: linear-gradient(180deg, #14181B, #1D2225 58%, #252A2E);
  }
}
/* ---- video lightbox ----
   The player is cross-origin, so a click inside it cannot be intercepted. The inline frame
   is covered by its own trigger instead: Vimeo's thumbnail still shows through, and the
   click opens the same video large over a dimmed page. The overlay is appended to <body>,
   clear of .netzone's stacking context and above the sticky header. */
.frame--embed {
  position: relative;
}

.vopen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: rgba(11, 9, 10, 0.26);
  color: var(--oo-white);
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vopen:hover, .vopen:focus-visible {
  background: rgba(11, 9, 10, 0.44);
}

.vglyph {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(11, 9, 10, 0.6);
  border: 1.5px solid rgba(252, 252, 252, 0.5);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vglyph svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
}

.vopen:hover .vglyph, .vopen:focus-visible .vglyph {
  transform: scale(1.07);
  background: var(--arm-deep);
  border-color: var(--arm-deep);
}

.vidpop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 5vh 4vw;
  background: rgba(11, 9, 10, 0.74);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 280ms;
}

.vidpop[data-on] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.vstage {
  width: min(1280px, 92vw, 152.8888888889vh);
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 110px rgba(11, 9, 10, 0.6);
  transform: scale(0.97);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vidpop[data-on] .vstage {
  transform: none;
}

.vstage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.vidpop .popclose {
  position: absolute;
  top: max(16px, 3vh);
  right: max(16px, 3vw);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(252, 252, 252, 0.4);
  background: transparent;
  color: var(--oo-white);
  font: 600 13px/1 var(--font-display);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vidpop .popclose:hover {
  background: var(--oo-white);
  color: var(--oo-ink);
  border-color: var(--oo-white);
}

@media (prefers-reduced-motion: reduce) {
  .vidpop, .vstage, .vglyph, .vopen {
    transition: none;
  }
}
/* ---------- eyebrows: one weight across the family ---------- */
.eyebrow, .sk, .k, .tk, .kick, .tdate, .tmrole, .opre, .omono, .mh1b, .tab, .qrtxt .k, .cmails .k, .rrow .col .k, .card .k, .pick .k, .door .k, .otxt .k, .hwho .sk, .stage .sk, .schap .sk, .lead-funder .k, .also-funders .k {
  font-weight: 700;
}

/* Build step: the Outbreak Creator screenshot is a dense UI, so it shows whole rather than
   filling the panel by crop, and clicks through to the same overlay as the homepage figure. */
#build .stage {
  align-items: start;
}

#build .picwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: center;
}

/* the panel takes the screenshot's own proportions rather than stretching to the text
   column, so the card is no taller than the image it holds */
#build .picwrap .spic {
  aspect-ratio: 2180/1384;
  padding: 0;
  background: var(--oo-fog);
}

#build .spic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- mobile header ----------
   Three problems below the burger breakpoint: the affiliation was hidden outright, the
   burger sat alone on a third row, and the lockup, switch and burger each claimed a line.
   The header now reads as two rows — lockup with the burger opposite it, then the switch
   full width — and the affiliation returns, inline where it fits and stacked where it
   does not. */
@media (max-width: 700px) {
  /* two columns: the lockup and switch stack at the left, the burger holds the right
     and centres against the pair rather than riding the top row */
  .hdr .inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px 10px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .hdr .spacer {
    display: none;
  }
  .hdr .inner > a:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .hdr .lock {
    flex: 0 1 auto;
    min-width: 0;
    gap: 9px;
  }
  .hdr .lock .mark {
    height: 22px;
  }
  .hdr .lock .globe {
    height: 35px;
    width: 35px;
  }
  .hdr .armsw {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    padding: 4px;
    gap: 4px;
  }
  .hdr .armsw button {
    min-height: 44px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    padding: 12px 8px;
  }
  .burger {
    grid-column: 2;
    grid-row: 1/span 2;
    align-self: center;
    margin-left: 0;
    min-height: 42px;
    padding: 11px 12px;
    font-size: 10.5px;
  }
  /* the open panel and its buttons are flex children elsewhere; in this grid they need
     explicit full-width rows or they stay trapped in the lockup's column */
  .hdr .nav.open {
    grid-column: 1/-1;
    grid-row: 3;
    width: auto;
  }
  .hdr .nav.open ~ .hdrcta {
    grid-column: 1/-1;
    grid-row: 4;
    width: auto;
  }
  /* .hdr .btn{display:none} hides the header CTAs on mobile, which also emptied the row
     inside the open menu — the two actions belong there, so they come back with it */
  .hdr .nav.open ~ .hdrcta .btn {
    display: inline-flex;
  }
}
/* narrower than the lockup and affiliation can share: the line drops beneath the mark */
/* the footer lockup wraps on mobile: .ftr .lock{flex-wrap:nowrap} and the !important rule
   on the divider both landed after the earlier mobile overrides, which pinned the
   affiliation to one max-content line and pushed the page 24px past the viewport */
@media (max-width: 700px) {
  .ftr .lock--lg {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .ftr .lock--lg .affil {
    flex: 1 1 100%;
    width: auto;
    max-width: 100%;
    white-space: normal;
    text-wrap: pretty;
  }
  .ftr .lock--lg .rule {
    display: none !important;
  }
}
/* the hero phones are rotated inside a fixed 340px box, so on the narrowest phones the
   sick handset's corner cleared the viewport and put 4px of horizontal scroll on the page */
@media (max-width: 430px) {
  .home .heroart--phones {
    width: min(100%, 300px);
  }
}
/* ---------- Enhanced simulation: how the room divides ----------
   Everyone in the room sits inside the population field; the Family Units hub is at its
   centre and the seven work units orbit within the same circle, because holding a role
   does not remove you from the population. The roles carry three cluster colours. */
.unitmap {
  margin-top: clamp(34px, 4.5vh, 56px);
}

/* in the Enhanced section the diagram shares the right column with the carousel */
/* the diagram travels as the gallery's first slide, so it is height-constrained by the
   slide box rather than width-constrained by a column */
.cslide--dia {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: 22px 20px 0;
  background: var(--bg);
}

.cslide--dia .orbit {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: 0;
}

.cslide--dia figcaption {
  position: static;
  padding: 12px 0 16px;
  background: none;
  color: var(--fg-subtle);
  text-align: center;
}

.sec--enh .cslide--dia {
  background: var(--bg);
}

.cslide--dia .rlabel {
  width: clamp(122px, 13vw, 158px);
  font-size: clamp(13.5px, 1.05vw, 15px);
}

.cslide--dia .hubn {
  font-size: clamp(17px, 1.6vw, 20px);
}

.orbit {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.ospokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the hub: the general population, in the brand's neutral ink so the three role
   clusters carry the only colour in the figure */
.ohub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5%;
  background: linear-gradient(150deg, #2E363B, #1A2023);
  color: var(--oo-white);
  box-shadow: 0 14px 34px rgba(26, 32, 35, 0.26);
}

.hubic {
  display: grid;
  place-items: center;
  width: clamp(30px, 4.6vw, 42px);
  aspect-ratio: 1;
  color: var(--oo-white);
}

.hubic svg {
  width: 100%;
  height: 100%;
}

.hubn {
  margin-top: 8px;
  font: 300 clamp(14px, 1.7vw, 20px)/1.15 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* the ring: the node box IS the disc, so every disc sits exactly on the ring and the
   spokes can stop at one uniform radius short of it */
.rnodes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rnode {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 12%;
}

.rdisc {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rc);
  color: #FFFFFF;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--rc) 32%, transparent);
  border: 3px solid var(--bg);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rdisc svg {
  width: 52%;
  height: 52%;
}

.rnode:hover .rdisc {
  transform: scale(1.08);
}

/* labels sit radially outward — below the disc on the lower half, above it on the upper */
.rlabel {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: clamp(96px, 25vw, 136px);
  font: 500 clamp(11px, 1.05vw, 12.5px)/1.28 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: center;
  text-wrap: balance;
}

.rnode--up .rlabel {
  top: auto;
  bottom: calc(100% + 8px);
}

@media (prefers-reduced-motion: reduce) {
  .rdisc {
    transition: none;
  }
  .rnode:hover .rdisc {
    transform: none;
  }
}
/* below the ring's comfortable width the same content reads as a hub and a grid */
@media (max-width: 700px) {
  .orbit {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .ospokes {
    display: none;
  }
  .ohub {
    position: static;
    transform: none;
    width: min(210px, 60vw);
    padding: 22px;
  }
  .rnodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 22px 12px;
    width: 100%;
  }
  .rnode {
    position: static;
    transform: none;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .rdisc {
    width: 56px;
  }
  .rlabel {
    position: static;
    transform: none;
    width: auto;
  }
}
/* ---- internal note ----
   A build-time annotation for the team, never published. Deliberately unlike every other
   surface on the site so it cannot be mistaken for content. */
/* the diagram slide sizes its labels to the slide, not the viewport, so the ring holds
   together in a narrow gallery box as well as a wide one */
.cslide--dia {
  container-type: inline-size;
}

@container (max-width:620px) {
  .cslide--dia .rlabel {
    width: clamp(92px, 24cqw, 124px);
    font-size: clamp(12px, 2.9cqw, 13.5px);
    line-height: 1.25;
  }
  .cslide--dia .hubn {
    font-size: clamp(14px, 3.4cqw, 17px);
  }
}
/* the Enhanced stage splits evenly elsewhere, but this right column carries the ring
   diagram, which needs width more than the copy does — the copy reflows, the ring cannot */
@media (min-width: 940px) {
  .sec--enh .stage {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}
.stright .orbit {
  width: min(100%, 560px);
}

/* below ~1150px the two-column stage squeezes the ring past the point where seven outer
   labels fit — the stage stacks there instead, so the diagram keeps its full width */
@media (max-width: 1150px) {
  .sec--enh .stage {
    grid-template-columns: 1fr;
  }
  .sec--enh .stright {
    max-width: 640px;
  }
}
/* one label per node sits radially outward; a little more clearance keeps the wide ones
   off their neighbours' discs */
.cslide--dia .rlabel {
  top: calc(100% + 11px);
}

.cslide--dia .rnode--up .rlabel {
  top: auto;
  bottom: calc(100% + 11px);
}

@container (max-width:620px) {
  .cslide--dia .rlabel {
    width: clamp(84px, 19cqw, 104px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .eplay {
    transition: none;
  }
}
/* the lesson table shows five rows per page, with every page directly reachable */
.lpager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--border);
}

.pgnums {
  display: flex;
  gap: 6px;
}

.pgnum, .pgarrow {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--oo-white);
  color: var(--fg-muted);
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 160ms, color 160ms, background 160ms;
}

.pgnum:hover, .pgarrow:not(:disabled):hover {
  border-color: var(--arm-deep);
  color: var(--arm-deep);
}

.pgnum[aria-current=page] {
  background: var(--arm-deep);
  border-color: var(--arm-deep);
  color: var(--oo-white);
}

.pgarrow svg {
  width: 18px;
  height: 18px;
}

.pgarrow:disabled {
  opacity: 0.38;
  cursor: default;
}

@media (max-width: 560px) {
  .pgnum, .pgarrow {
    min-width: 34px;
    min-height: 34px;
    padding: 0 7px;
    font-size: 12px;
  }
  .lpager {
    gap: 4px;
  }
  .pgnums {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pgnum, .pgarrow {
    transition: none;
  }
}
/* the lockup sits on a white pill, so the header carries the mark as a discrete object
   rather than knocked out of the tinted bar. The wordmark switches to the black asset;
   .lock's currentColor no longer applies to it. */
.hdr .lock .mark {
  height: 27px;
}

.hdr .lock .globe {
  height: 43px;
  width: 43px;
}

@media (max-width: 700px) {
  .hdr .lock .mark {
    height: 22px;
  }
  .hdr .lock .globe {
    height: 35px;
    width: 35px;
  }
}
/* ---------- student organizations: the two ways in ----------
   Deep arm-coloured cards, because the programme icons are white artwork and only read
   on a dark ground — the same treatment the published page gives them. */
.joins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(30px, 4vh, 48px);
}

.join {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 2.8vw, 38px);
  border-radius: var(--card-r);
  background: var(--arm-deep);
  color: var(--oo-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-1);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.join:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(11, 9, 10, 0.45);
  color: var(--oo-white);
}

.joinico {
  display: block;
  width: 46px;
  height: 46px;
}

.joinico img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.joink {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oo-white);
}

.joinh {
  font: 300 clamp(20px, 1.9vw, 27px)/1.22 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.joingo {
  margin-top: auto;
  padding-top: 8px;
  font: 500 12.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oo-white);
}

@media (max-width: 760px) {
  .joins {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .join {
    transition: none;
  }
  .join:hover {
    transform: none;
  }
}
/* the media-quote card pairs a quote with a figcaption; the Club-member cards carry the
   name above the quote instead, so the gap the caption used to fill is dead space */
.qcard:not(:has(figcaption)) blockquote {
  margin-bottom: 0;
}

.ctaband--grad {
  background: linear-gradient(100deg, #0F4740 0%, #1B4E66 46%, #3B1F86 100%);
  padding: clamp(26px, 3.4vh, 40px) 0;
}

.ctaband--grad .slimband {
  align-items: center;
  gap: clamp(22px, 3vw, 54px);
}

.ctaband--grad .h-md {
  color: var(--oo-white);
}

.ctaband--grad .body {
  color: rgba(252, 252, 252, 0.84);
  max-width: 52ch;
}

.ctaband--grad .btn--light {
  background: var(--oo-white);
  color: #14181A;
  border-color: var(--oo-white);
}

.ctaband--grad .btn--onDark {
  color: var(--oo-white);
  border-color: rgba(252, 252, 252, 0.5);
}

.ctaband--grad .btn--onDark:hover {
  background: rgba(252, 252, 252, 0.12);
  border-color: var(--oo-white);
}

/* a single reading column for long-form Q&A */
.wrap--narrow {
  max-width: 920px;
}

/* FAQ rows carry the live page's own icon ahead of each question. The artwork is white
   line work on transparent, so it needs a dark disc to sit on. */
.faqico {
  flex: 0 0 auto;
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  border-radius: 50%;
  background: var(--oo-ink);
  padding: 7px;
  box-sizing: border-box;
  -o-object-fit: contain;
     object-fit: contain;
}

.acc .accrow summary:has(.faqico) {
  gap: clamp(14px, 1.6vw, 20px);
}

.acc .accrow summary:has(.faqico) > span {
  flex: 1;
}

@media (max-width: 560px) {
  .faqico {
    width: 34px;
    height: 34px;
    padding: 6px;
  }
}
/* a hero with no art: the copy fills the measure instead of holding a column open */
.hero .grid--single {
  grid-template-columns: 1fr;
}

/* ---- expand control ----
   The figure itself is no longer clickable: a labelled button below it opens the overlay,
   so the affordance is stated rather than discovered by hovering. It is hidden outright
   when the viewport has no room to pop into. */
.expandbtn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  align-self: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--arm-deep);
  border-radius: var(--radius-pill);
  background: var(--arm-deep);
  color: var(--oo-white);
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 9, 10, 0.28);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.expandbtn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.expandbtn:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--oo-white);
  transform: translateY(-2px);
}

.expandbtn:focus-visible {
  outline: 2px solid var(--oo-white);
  outline-offset: 3px;
}

.picwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.storyquad {
  min-width: 0;
}

@media (max-width: 940px) {
  .storyquad {
    width: 100%;
    max-width: 440px;
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .expandbtn {
    transition: none;
  }
  .expandbtn:hover {
    transform: none;
  }
}
/* ---------- competition: video covers + the preview gate indicator ---------- */
/* A fixed-ratio iframe cannot object-fit, so the cover is computed from container units:
   whichever of width/height is short gets scaled past 100% and the overflow is clipped. */
/* the briefings show the whole frame — nothing cropped, so no logo is lost */
.opvfit {
  position: absolute;
  inset: 0;
  background: #0B090A;
  border-radius: inherit;
}

.opvfit iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  display: block;
}

/* the trailer is the one deliberate crop: a strip down the middle of the frame, filling its box.
   A fixed-ratio iframe cannot object-fit, so the cover is computed from container units. */
.frame--crop {
  container-type: size;
}

.frame--crop iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 177.7778cqh);
  height: max(56.25cqw, 100cqh);
}

.opvid .opvplay {
  z-index: 2;
  background: rgba(11, 9, 10, 0.34);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .opvfit iframe, .frame--crop iframe {
    display: none;
  }
}
.gatebar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px dashed var(--mline-soft);
  border-radius: var(--radius-md);
  background: rgba(252, 252, 252, 0.04);
}

.gatepill {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(252, 252, 252, 0.34);
  background: transparent;
  color: rgba(252, 252, 252, 0.86);
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.13em;
}

.gatebar p {
  margin: 0;
  font: 400 13.5px/1.6 var(--font-body);
  color: rgba(252, 252, 252, 0.84);
  text-wrap: pretty;
}

.gatebar code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(252, 252, 252, 0.12);
  font: 400 12.5px/1.5 var(--font-mono);
  color: #FCFCFC;
}

body[data-gate=live] .gatebar {
  display: none;
}

@media (max-width: 640px) {
  .gatebar {
    flex-direction: column;
    gap: 10px;
  }
}
/* live phase: mint throughout — colour alone marks it, no rule */
.tcol--now .tdate, .tcol--now .th {
  color: var(--mgreen);
}

.tcol--now .tul li {
  color: var(--mgreen);
}

.tcol--now .tul li::marker {
  color: var(--mgreen);
}

/* finished phase: dimmed but still AA-legible on the module ground */
.tcol--done .tdate {
  color: rgba(252, 252, 252, 0.5);
}

.tcol--done .th {
  color: rgba(252, 252, 252, 0.62);
}

.tcol--done .tul li {
  color: rgba(252, 252, 252, 0.5);
}

.tcol--done .tul li::marker {
  color: rgba(252, 252, 252, 0.5);
}

@keyframes opDrop {
  from {
    opacity: 0;
    transform: translateY(-26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oppanel {
    animation: none;
  }
}
/* top-level nav labels are ink in every state; highlighting belongs to the panel items */
.hdr .nav > a,
.hdr .nav > a:hover,
.hdr .nav > a:focus,
.hdr .nav > a:active,
.hdr .nav > a[aria-current=page],
.hdr .navgrp > .navtop,
.hdr .navgrp > .navtop:hover,
.hdr .navgrp > .navtop:focus,
.hdr .navgrp > .navtop:active,
.hdr .navgrp:hover > .navtop,
.hdr .navgrp > .navtop[aria-expanded=true] {
  color: var(--hfg);
}

body[data-theme=competition] .hdr .nav > a,
body[data-theme=competition] .hdr .nav > a:hover,
body[data-theme=competition] .hdr .nav > a[aria-current=page],
body[data-theme=competition] .hdr .navgrp > .navtop,
body[data-theme=competition] .hdr .navgrp > .navtop:hover,
body[data-theme=competition] .hdr .navgrp:hover > .navtop,
body[data-theme=competition] .hdr .navgrp > .navtop[aria-expanded=true] {
  color: var(--mfg);
}

/* the active carousel slide is expandable; the flanking previews are not */
.cslide--can-pop[data-on] {
  cursor: zoom-in;
}

.cslide--can-pop[data-on]:focus-visible {
  outline: 2px solid var(--arm-deep);
  outline-offset: 3px;
}

/* mission-essentials marks: drawn inline, sized to the slot the bitmaps used */
.essart {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--mfg);
}

.essart svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media print {
  .hdr, .burger, .nav, .netzone canvas, .armsw, .heroask, .skip, .railbtn, .railnav, .expandbtn, .popnote {
    display: none !important;
  }
  .netzone, section, .hero, .mission, .ctaband {
    background: #fff !important;
    color: #000 !important;
  }
  .hero *, .mission *, .ctaband *, .sec--dark * {
    color: #000 !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href^=http]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
  .card, .qcard, .chap, .ep, .plogo {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    box-shadow: none !important;
  }
  h1, h2, h3 {
    -moz-column-break-after: avoid;
         break-after: avoid;
  }
  img {
    max-width: 100% !important;
  }
}
/* labelled image placeholder — replaces the drop-target component in the handoff build */
.imgtodo {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--card-r);
  background: var(--oo-fog);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: center;
}

/* Homepage motion layer. Every rule is gated on html.fx, which home-fx.js adds only
   when motion is welcome — without the script (or under prefers-reduced-motion) the
   page renders exactly as it did, with nothing hidden. */
/* the contact-ring overlay belongs to the motion layer alone, so it stays out of the
   document until home-fx.js has measured it against the real handset positions */
@media (prefers-reduced-motion: no-preference) {
  /* --- headline: words rise in sequence, the verb carries a live two-colour fill --- */
  .fx .home .h-xl .w {
    display: inline-block;
  }
  .fx .home.lit .h-xl .w {
    animation: fxRise 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 62ms);
  }
  @keyframes fxRise {
    from {
      opacity: 0;
      transform: translateY(0.44em) rotate(0.7deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* The sheen sweeps only through the deep register of both arms, so every stop in the
     travelling window clears 3:1 large-text contrast on the near-white hero ground
     (measured: 4.98 teal, 5.33 mid, 7.42 violet). --arm-soft is deliberately absent —
     at 1.69:1 it washed the largest word on the page out to near-invisible. */
  .fx .home .h-xl b {
    --fx1:#1B7A6E;
    --fx2:#2F6BA8;
    --fx3:#5A34C4;
  }
  html[data-arm=pro].fx .home .h-xl b {
    --fx1:#5A34C4;
    --fx2:#3F4AD1;
    --fx3:#1B7A6E;
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .fx .home .h-xl b {
      background: linear-gradient(100deg, var(--fx1) 0%, var(--fx2) 34%, var(--fx3) 62%, var(--fx1) 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: fxSheen 11s linear infinite;
    }
  }
  @keyframes fxSheen {
    to {
      background-position: 260% 0;
    }
  }
  .fx .home.lit .h-xl::after {
    animation: fxBar 1s cubic-bezier(0.2, 0.75, 0.2, 1) both;
    animation-delay: 0.46s;
  }
  @keyframes fxBar {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 64px;
      opacity: 1;
    }
  }
  .fx .home.lit .htxt .lead {
    animation: fxUp 0.74s cubic-bezier(0.2, 0.75, 0.2, 1) both;
    animation-delay: 0.4s;
  }
  .fx .home.lit .htxt .lead + .lead {
    animation-delay: 0.5s;
  }
  .fx .home.lit .heroask {
    animation: fxUp 0.74s cubic-bezier(0.2, 0.75, 0.2, 1) both;
    animation-delay: 0.62s;
  }
  @keyframes fxUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* --- phone pair: fixed in place. The handsets fade in and then hold; nothing tracks
     the cursor, so the composition is the same for everyone. --- */
  .fx .home.lit .heroart--phones .ph {
    animation: fxFade 0.95s ease both;
  }
  .fx .home.lit .heroart--phones .ph-a {
    animation-delay: 0.26s;
  }
  .fx .home.lit .heroart--phones .ph-b {
    animation-delay: 0.4s;
  }
  @keyframes fxFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .fx .heroart--phones .ph-b {
    filter: drop-shadow(0 0 30px rgba(206, 47, 47, 0.34)) drop-shadow(0 28px 50px rgba(11, 9, 10, 0.28));
  }
  /* --- marks orbiting the pair: bluetooth on the well side, virions on the sick side.
     Each sits in a small light chip so it stays legible wherever the contour puts it. --- */
  .txmk {
    display: none;
  }
  .fx .txmk {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    background: rgba(252, 252, 252, 0.94);
    border: 1px solid rgba(11, 9, 10, 0.07);
    box-shadow: 0 8px 20px rgba(11, 9, 10, 0.14);
  }
  .fx .txmk svg {
    display: block;
    width: 66%;
    height: 66%;
  }
  .fx .home.lit .txmk {
    animation-name: fxMk;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  @keyframes fxMk {
    0%, 100% {
      opacity: 0;
      transform: translateY(7px) scale(0.84);
    }
    16% {
      opacity: 1;
      transform: none;
    }
    64% {
      opacity: 1;
      transform: translateY(-10px);
    }
    84% {
      opacity: 0;
      transform: translateY(-17px) scale(0.94);
    }
  }
  /* one mark: a virion carrying the Bluetooth rune — the pathogen and the thing that
     carries it, in a single glyph */
  .fx .txmk {
    color: #CE2F2F;
  }
  .fx .bt1 {
    left: -7.5%;
    top: 10%;
    width: 36px;
    height: 36px;
    animation-delay: -0.4s;
  }
  .fx .bt2 {
    left: -4.5%;
    top: 55%;
    width: 29px;
    height: 29px;
    animation-delay: -3.9s;
  }
  .fx .vi1 {
    left: 32%;
    top: -10%;
    width: 38px;
    height: 38px;
    animation-delay: -2.1s;
  }
  .fx .vi2 {
    left: 94%;
    top: 80%;
    width: 31px;
    height: 31px;
    animation-delay: -5.2s;
  }
  .fx .vi3 {
    left: 66%;
    top: 103%;
    width: 26px;
    height: 26px;
    animation-delay: -6.4s;
  }
  /* the marks are placed against the two-column hero; below its stacking point the art moves under the copy */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .fx .txmk {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* --- doors: the arm's own colour pools under the cursor --- */
  .fx .door {
    position: relative;
    transition: transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.32s, border-color 0.2s;
  }
  .fx .door::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.38s;
    background: radial-gradient(320px 230px at var(--mx, 50%) var(--my, 50%), var(--fxw, rgba(134, 90, 255, 0.26)), transparent 72%);
  }
  .fx .door[data-arm-set=edu] {
    --fxw:rgba(42,173,154,.3);
  }
  .fx .door[data-arm-set=pro] {
    --fxw:rgba(134,90,255,.28);
  }
  .fx .door:hover::before {
    opacity: 1;
  }
  .fx .door:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(11, 9, 10, 0.15);
  }
  .fx .door > * {
    position: relative;
    z-index: 1;
  }
  .fx .door .go i {
    display: inline-block;
    transition: transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1);
  }
  .fx .door:hover .go {
    opacity: 0.9;
    transform: none;
  }
  .fx .door:hover .go i {
    transform: translateX(7px);
  }
  /* the stagger rides on .seen rather than an animation, so the resting state is a real
     style — a stalled frame loop snaps them visible instead of holding them hidden */
  .fx .misstats .bt {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition: opacity 0.62s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.62s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.32s;
    transition-delay: calc(var(--i, 0) * 85ms);
  }
  .fx .misstats.seen .bt {
    opacity: 1;
    transform: none;
  }
  .fx .misstats.seen .bt:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11, 9, 10, 0.1);
    transition-delay: 0s;
  }
  .fx .qcard {
    transition: transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.32s;
  }
  .fx .qcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 9, 10, 0.12);
  }
  /* --- section arrivals --- */
  .fx [data-fx] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.75, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .fx [data-fx].seen {
    opacity: 1;
    transform: none;
  }
  .fx .storyquad {
    transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.7s;
  }
  .fx .storyquad:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px rgba(11, 9, 10, 0.16);
  }
  .fx .techlead .spic {
    position: relative;
    overflow: hidden;
  }
  .fx .techlead .spic::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--arm), var(--arm-alt));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1);
    transition-delay: 0.25s;
  }
  .fx .techlead .spic.seen::after {
    transform: none;
  }
  /* hard stop: once the opening has had its time, every animated element is pinned to
     its end state, so a throttled or interrupted frame loop can never hide content */
  .fx .home.done .h-xl .w, .fx .home.done .htxt .lead, .fx .home.done .heroask, .fx .home.done .h-xl::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .fx .home.done .heroart--phones .ph {
    animation: none;
    opacity: 1;
  }
  .fx .home.done .txmk {
    animation-name: fxMk;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .fx .home.done .h-xl::after {
    width: 64px;
  }
  .fx .home.done .h-xl b {
    animation: fxSheen 11s linear infinite;
  }
}
:root {
  --color-off-black: var(--fg);
  --color-off-white: var(--fg-on-dark);
  --color-black: var(--oo-ink);
  --color-white: var(--oo-white);
  --color-transparent: transparent;
  --color-light-grey: var(--bg-alt);
  --color-dark-grey: var(--oo-graphite);
  --color-black-gradient: var(--grad-ink);
  --color-white-gradient: var(--oo-white);
  --color-black-white-gradient: var(--grad-ink);
}

.module[style*="--module-background-color"] {
  background: var(--module-background-color);
}

.module[style*="--module-font-color"] {
  color: var(--module-font-color);
}

.module[style*="--module-mobile-padding-top"], .hero[style*="--module-mobile-padding-top"], .home[style*="--module-mobile-padding-top"], .mhero[style*="--module-mobile-padding-top"] {
  padding-top: var(--module-mobile-padding-top);
}
.module[style*="--module-mobile-padding-bottom"], .hero[style*="--module-mobile-padding-bottom"], .home[style*="--module-mobile-padding-bottom"], .mhero[style*="--module-mobile-padding-bottom"] {
  padding-bottom: var(--module-mobile-padding-bottom);
}

@media only screen and (min-width: 768px) {
  .module[style*="--module-tablet-padding-top"], .hero[style*="--module-tablet-padding-top"], .home[style*="--module-tablet-padding-top"], .mhero[style*="--module-tablet-padding-top"] {
    padding-top: var(--module-tablet-padding-top);
  }
  .module[style*="--module-tablet-padding-bottom"], .hero[style*="--module-tablet-padding-bottom"], .home[style*="--module-tablet-padding-bottom"], .mhero[style*="--module-tablet-padding-bottom"] {
    padding-bottom: var(--module-tablet-padding-bottom);
  }
}
@media only screen and (min-width: 1025px) {
  .module[style*="--module-desktop-padding-top"], .hero[style*="--module-desktop-padding-top"], .home[style*="--module-desktop-padding-top"], .mhero[style*="--module-desktop-padding-top"] {
    padding-top: var(--module-desktop-padding-top);
  }
  .module[style*="--module-desktop-padding-bottom"], .hero[style*="--module-desktop-padding-bottom"], .home[style*="--module-desktop-padding-bottom"], .mhero[style*="--module-desktop-padding-bottom"] {
    padding-bottom: var(--module-desktop-padding-bottom);
  }
}
.module[style*="--module-mobile-margin-top"] {
  margin-top: var(--module-mobile-margin-top);
}

.module[style*="--module-mobile-margin-bottom"] {
  margin-bottom: var(--module-mobile-margin-bottom);
}

@media only screen and (min-width: 768px) {
  .module[style*="--module-tablet-margin-top"] {
    margin-top: var(--module-tablet-margin-top);
  }
  .module[style*="--module-tablet-margin-bottom"] {
    margin-bottom: var(--module-tablet-margin-bottom);
  }
}
@media only screen and (min-width: 1025px) {
  .module[style*="--module-desktop-margin-top"] {
    margin-top: var(--module-desktop-margin-top);
  }
  .module[style*="--module-desktop-margin-bottom"] {
    margin-bottom: var(--module-desktop-margin-bottom);
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.row:empty {
  display: none;
}

.sechead + .row {
  margin-top: 0;
}

.railwrap + .row {
  margin-top: 34px;
}

.eyebrow--spaced {
  margin: 56px 0 8px;
}

.cards--stacked {
  margin-top: 16px;
}

.sechead--nowrap h2 {
  max-width: none;
  white-space: nowrap;
}

.h-lg:has(.nbr) {
  max-width: none;
  text-wrap: nowrap;
}

.component-text.lead > p {
  font: 400 clamp(17px, 1.25vw, 19px)/1.55 var(--font-body);
  color: var(--fg-muted);
}

.ctaband .component-text > p {
  margin: 8px 0 0;
}

.ctaband h2 {
  margin: 0;
}

.opsealed {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}

button.vplay {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.ctaband--slim .btn--light:hover {
  background: #3b1f86;
  color: var(--oo-white);
  border-color: var(--oo-white);
  filter: none;
}

html[data-arm=edu] .ctaband--slim .btn--light:hover {
  background: #12564c;
  color: var(--oo-white);
  border-color: var(--oo-white);
}

.btn--primary:hover,
.btn--arm:hover,
.btn--arm3d:hover {
  background: #166257;
  background-image: none;
  color: var(--oo-white);
  filter: none;
}

.rail--q .qcard > blockquote {
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  canvas.net {
    display: none;
  }
}
img[alt="USA Today"].qlogo,
img[alt="USA Today"].mlogo {
  width: auto;
  height: 48px;
  max-width: 190px;
  max-height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.pcard-top img[alt="USA Today"] {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 72%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.rail--m .mcard {
  display: grid;
  grid-template-rows: 48px auto 1fr auto;
  align-items: start;
}

.rail--m .mcard .mlogo {
  align-self: center;
  justify-self: start;
  margin-bottom: 0;
}

.rail--m .mcard .mdate {
  margin-top: 16px;
}

img[alt="International Baccalaureate"].mlogo {
  height: 48px;
  width: 48px;
  max-width: 48px;
  max-height: 48px;
}

.rail--m .mcard .mgo {
  margin-top: 0;
}

.gatebar {
  display: none;
}

html[data-arm=pro] .h-xl .w:has([data-when=edu]),
html[data-arm=edu] .h-xl .w:has([data-when=pro]) {
  display: none !important;
}

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

body.admin-bar .hdr {
  top: 32px;
}
@media only screen and (max-width: 782px) {
  body.admin-bar .hdr {
    top: 46px;
  }
}

.component-text > *:first-child {
  margin-top: 0;
}
.component-text > *:last-child {
  margin-bottom: 0;
}
.component-text a:not(.btn) {
  color: var(--arm-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.component-text ul,
.component-text ol {
  margin: 14px 0;
  padding-left: 20px;
}
.component-text ul li,
.component-text ol li {
  font: 400 var(--fs-body)/var(--lh-normal) var(--font-body);
  margin-bottom: 6px;
}

.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

.aligncenter {
  display: block;
  margin: 0 auto 20px;
}

img.alignnone,
figure img {
  max-width: 100%;
  height: auto;
}

.module:empty {
  display: none;
}

.layout-password {
  padding: 180px 0 120px;
}
.layout-password .post-password-form-inner {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.layout-password input[type=password] {
  font: 400 15px/1.4 var(--font-body);
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--oo-white);
}

.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend,
.gform_wrapper .gfield_required_text {
  display: none;
}
.gform_wrapper form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gform_wrapper .gform-body,
.gform_wrapper .gform_body,
.gform_wrapper .gform_fields {
  display: contents;
}
.gform_wrapper .field,
.gform_wrapper .mfield {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.gform_wrapper .gfield_label {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oo-charcoal);
  margin: 0;
}
.gform_wrapper .gfield_required {
  display: none;
}
.gform_wrapper .lbl-plain {
  text-transform: none;
  letter-spacing: 0;
}
.gform_wrapper .ginput_container {
  margin: 0;
}
.gform_wrapper .ginput_container_date {
  position: relative;
  display: flex;
}
.gform_wrapper .ginput_container_date input {
  padding-right: 42px;
}
.gform_wrapper .gform-datepicker-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-subtle);
  cursor: pointer;
}
.gform_wrapper .gform-datepicker-toggle svg {
  width: 18px;
  height: 18px;
}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper input[type=date],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%;
  font: 400 15px/1.4 var(--font-body);
  color: var(--fg);
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--oo-white);
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--arm);
  box-shadow: 0 0 0 3px var(--arm-tint);
}
.gform_wrapper .gform_footer {
  display: contents;
  margin: 0;
  padding: 0;
}
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .gform_validation_errors {
  font: 400 13px/1.45 var(--font-body);
  color: var(--oo-coral-deep);
  background: none;
  border: 0;
  padding: 0;
  margin: 4px 0 0;
}
.gform_wrapper .gform_validation_errors h2 {
  font: 400 14px/1.45 var(--font-body);
  color: var(--oo-coral-deep);
}
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.gform_wrapper .gchoice {
  position: relative;
  flex: 0 0 auto;
}
.gform_wrapper .gchoice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}
.gform_wrapper .gchoice label {
  display: block;
  text-align: left;
  padding: 11px 16px;
  border-radius: var(--card-r);
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  font: 600 14px/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gform_wrapper .gchoice input:hover + label {
  border-color: var(--oo-ink);
}
.gform_wrapper .gchoice input:checked + label {
  border-color: var(--arm);
  background: var(--arm-tint);
}
.gform_wrapper .gchoice input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--arm-tint);
}
.gform_wrapper .gform_confirmation_message,
.gform_wrapper .gform_submission_error ~ .gform_confirmation_message {
  padding: 18px 20px;
  border-radius: var(--card-r);
  background: #ddf6ea;
  color: #1b6b5e;
  font: 400 14.5px/1.5 var(--font-body);
}

.fsub .gform_wrapper form,
.nlform .gform_wrapper form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.fsub .gform_wrapper {
  flex: 1 1 100%;
  min-width: 0;
}
.fsub .gform_wrapper form {
  align-items: center;
}
.fsub .gform_wrapper .field {
  flex: 1 1 200px;
}
.fsub .gform_wrapper .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.fsub .gform_wrapper .gform_footer {
  flex: 0 0 auto;
  grid-column: auto;
}
.fsub .gform_wrapper input[type=text],
.fsub .gform_wrapper input[type=email] {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(252, 252, 252, 0.28);
  background: rgba(252, 252, 252, 0.06);
  color: var(--oo-white);
  font: 400 15px/1 var(--font-body);
}
.fsub .gform_wrapper input::-moz-placeholder {
  color: rgba(252, 252, 252, 0.5);
}
.fsub .gform_wrapper input::placeholder {
  color: rgba(252, 252, 252, 0.5);
}
.fsub .gform_wrapper input:focus {
  border-color: rgba(252, 252, 252, 0.5);
  box-shadow: none;
  outline: 2px solid var(--oo-white);
  outline-offset: 2px;
}
.fsub .gform_wrapper .sent,
.fsub .gform_wrapper .gform_confirmation_message {
  color: #1b6b5e;
}

.sec--dark .gform_wrapper .gfield_label,
.sec--alt .gform_wrapper .gfield_label,
.msec .gform_wrapper .gfield_label,
.ftr .gform_wrapper .gfield_label {
  color: rgba(252, 252, 252, 0.78);
}

.gform_ajax_spinner {
  margin-left: 10px;
  width: 18px;
  height: 18px;
}

/*# sourceMappingURL=main.min.css.map*/