/* local() is listed first so installed system copies resolve over http://.
   The file:// URLs remain as a fallback for direct file:// opening only. */
@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Light.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  /* Clean black world; white passages use the paper family. */
  --black: #000000;
  --elev: #0a0a0a;
  --paper: #f3f2ed;
  --paper-zone: #f2f1ec;
  --paper-ink: #101010;
  --ink: #f4f4f2;
  --muted: #a7a8ac;
  --dim: #6b6c70;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line-dark: rgba(0, 0, 0, 0.14);
  --line-dark-soft: rgba(0, 0, 0, 0.09);

  --font-sans: "Neue Montreal", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* 8px-based spacing scale. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Display scale — deliberately restrained; weight 300 does the talking. */
  --display-1: clamp(38px, 4.4vw, 72px);
  --display-2: clamp(28px, 3vw, 48px);
  --display-3: clamp(20px, 1.9vw, 28px);

  --section-top: clamp(80px, 9vw, 136px);
  --section-bottom: clamp(96px, 11vw, 168px);
  --cell-pad: clamp(var(--s5), 2vw, var(--s6));

  --r-panel: 24px;

  --page-gutter: clamp(24px, 4vw, 76px);
  --content: min(1480px, calc(100vw - (var(--page-gutter) * 2)));
  --nav-height: 58px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { position: relative; }
main, footer { position: relative; z-index: 1; }
.nav { position: relative; z-index: 60; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
h1, h2 { font-weight: 400; }
img, video { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ------------------------------------------------------------------ motion
   Titles get the slow Magic-style blur-up; everything else uses a fast,
   quiet rise. Classes are added by script.js only. */
.fx-title {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(12px);
  transition: opacity 820ms var(--ease), transform 820ms var(--ease), filter 820ms var(--ease);
  transition-delay: calc(var(--fx-d, 0) * 60ms);
}
.fx {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), filter 520ms var(--ease);
  transition-delay: calc(var(--fx-d, 0) * 45ms);
}
.fx.fx-in, .fx-title.fx-in { opacity: 1; transform: none; filter: none; }

/* Section label: short hairline tick + small tracked text. No dots. */
.sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  --accent: #b054de;
  margin-bottom: clamp(16px, 2.6vh, 28px);
  color: var(--dim);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
/* The label's line draws itself in when the section arrives (JS adds .lit),
   then breathes very slowly. Blue tip fading into the text colour. */
.sec-label::before {
  content: ""; width: 14px; height: 1px;
  background: linear-gradient(90deg, #5f7dff, currentColor 75%);
  opacity: .7;
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms cubic-bezier(.22, .7, .3, 1) 100ms;
}
.sec-label.lit::before { transform: scaleX(1); animation: label-breathe 6s ease-in-out 1.2s infinite; }
@keyframes label-breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sec-label::before { transform: scaleX(1); transition: none; }
  .sec-label.lit::before { animation: none; }
}


/* ----------------------------------------------------------------- nav pill
   Floating pill that morphs into the menu card (special.co pattern). */
.nav-pill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 0 var(--page-gutter);
  background: var(--paper);
  color: #0a0a0a;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.nav.menu-open .nav-pill { opacity: 0; pointer-events: none; transform: translateY(-6px); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--nav-ink); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; transition: opacity 160ms ease; }

.nav-signup { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; font-size: 15px; font-weight: 500; letter-spacing: .01em; transition: color 220ms ease; }

.brand-mark { display: block; width: 27px; color: var(--nav-ink, #0a0a0a); }

.brand-mark svg { transition: filter .3s ease; }
.brand-mark:hover svg { filter: drop-shadow(0 0 5px rgba(95,125,255,.55)); }
.brand-mark svg { display: block; width: 100%; height: auto; }
.pill-name { font-size: 17px; font-weight: 500; font-weight: 400; letter-spacing: -0.01em; color: #0a0a0a; }
.nav-menu-btn { display: none; gap: 4px; padding: 6px 2px; border: 0; background: transparent; cursor: pointer; }
.nav-menu-btn span { display: block; width: 15px; height: 1.5px; background: #0a0a0a; border-radius: 2px; transition: transform 240ms var(--ease); }
.nav-menu-btn:hover span:first-child { transform: translateY(-1px); }
.nav-menu-btn:hover span:last-child { transform: translateY(1px); }

.nav-panel {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 61;
  display: grid;
  gap: 4px;
  width: min(680px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 0;
  background: rgba(13, 13, 13, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.42, .2);
  transform-origin: top center;
  transition: opacity 220ms var(--ease), transform 380ms var(--ease), visibility 0s linear 380ms;
}
.nav-panel > * { opacity: 0; transition: opacity 200ms ease; }
.nav.menu-open .nav-panel { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); transition-delay: 0s; }
.nav.menu-open .nav-panel > * { opacity: 1; transition-delay: 140ms; }
.nav-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.nav-panel-head .pill-name { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--muted); border: 1px solid rgba(255,255,255,.14); border-radius: 0; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; transition: color 180ms ease, border-color 180ms ease; }
.nav-close:hover { color: var(--ink); border-color: rgba(255,255,255,.4); }
.nav-panel-body { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 10px; }
.nav-panel-links { position: relative; display: grid; align-content: start; padding: 6px; }
.nav-hl { position: absolute; left: 6px; right: 6px; background: rgba(255,255,255,.06); opacity: 0; pointer-events: none; transition: top 300ms var(--ease), height 300ms var(--ease), opacity 200ms ease; }
.nav-panel-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 12px; border-radius: 0; font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: #c9cacd; transition: background 160ms ease, color 160ms ease; }
.nav-panel-links a { position: relative; z-index: 1; }
.nav-panel-links a:hover, .nav-panel-links a.current { color: var(--ink); }
.nav-panel-links a.current { background: rgba(255,255,255,.04); }
.nav-panel-links a span { color: var(--dim); font-size: 11px; letter-spacing: .1em; }
.nav-panel-links a span { color: var(--dim); }
.nav-panel-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 0; transition: border-color 200ms ease; }
.nav-panel-card { animation: beam-spin 3.2s linear infinite; transition: border-color 200ms ease, box-shadow 500ms ease; }
.nav-panel-card::after {
  content: ""; position: absolute; inset: -1px; padding: 1px;
  background: conic-gradient(from var(--beam), rgba(237,64,179,.75), rgba(110,247,204,.75), rgba(120,150,255,.75), rgba(176,84,222,.75), rgba(237,64,179,.75));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 500ms ease; pointer-events: none;
}
.nav-panel-card:hover::after { opacity: .85; }
.nav-panel-card:hover { border-color: rgba(255,255,255,.24); box-shadow: 0 0 14px rgba(170,120,220,.2); }
.nav-panel-card .sec-label { margin-bottom: 2px; }
.nav-panel-card strong { max-width: 20ch; font-size: 17px; font-weight: 400; line-height: 1.3; }
.nav-panel-card .card-arrow { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0; background: var(--ink); color: #0a0a0a; font-size: 14px; }

/* ----------------------------------------------------------------- buttons */
.button, .footer-button, .form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms var(--ease), background 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.button span[aria-hidden], .footer-button span[aria-hidden] { transition: transform 200ms var(--ease); }
.button:hover span[aria-hidden], .footer-button:hover span[aria-hidden] { transform: translateX(3px); }
.button:hover, .footer-button:hover, .form-submit:hover { transform: translateY(-1px); }
.button:active, .footer-button:active, .form-submit:active { transform: translateY(0); }
.button-light { background: var(--ink); color: #0a0a0a; }
.button-light:hover { opacity: .9; }
.button-dark { background: rgba(255,255,255,.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.button-dark:hover { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }

/* Border beam: a multicolour light travels around the button border.
   On hover the whole ring fades into a moving multicolour glow. */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.beam { position: relative; border: 1px solid transparent; animation: beam-spin 3.2s linear infinite;
  box-shadow: 0 0 0 rgba(170,120,220,0); transition: box-shadow 500ms ease; }
.beam.button-dark {
  background:
    linear-gradient(#0c0c0c, #0c0c0c) padding-box,
    conic-gradient(from var(--beam), rgba(255,255,255,.14) 0deg 245deg, rgba(237,64,179,.5) 278deg, rgba(110,247,204,.7) 312deg, rgba(176,84,222,.95) 348deg, rgba(255,255,255,.14) 360deg) border-box;
}
.beam.button-light {
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    conic-gradient(from var(--beam), rgba(120,120,120,.5) 0deg 245deg, rgba(217,44,159,.6) 278deg, rgba(30,150,120,.75) 312deg, rgba(140,64,190,.95) 348deg, rgba(120,120,120,.5) 360deg) border-box;
}
.beam::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam), rgba(237,64,179,.85), rgba(110,247,204,.85), rgba(120,150,255,.85), rgba(176,84,222,.85), rgba(237,64,179,.85));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 500ms ease; pointer-events: none;
}
.beam:hover::after { opacity: .9; }
.beam:hover { box-shadow: 0 0 14px rgba(170,120,220,.22); }
.beam-alt { animation-delay: -1.6s; }
@keyframes beam-spin { to { --beam: 360deg; } }
/* Special-style square arrow button: no border, inverted plate. */
.arrow-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 0; background: var(--ink); color: #0a0a0a; font-size: 16px; transition: transform 200ms var(--ease); }
.arrow-btn:hover { transform: translate(2px, -2px); }

/* -------------------------------------------------------------------- hero
   Genesis-style headline across the top with a smaller subtext; below it a
   Scale-style panel holding the live research graph. As the tall section
   scrolls, the panel zooms out and separates into abstract frames. */
/* Scale-"Applications" register: the headline lifts out, then the panel tilts
   onto a receding plane and splits into translucent layers (behind AND in
   front on the same plane) laced with dashed connectors and binary ticks,
   while side text appears and fills grey→white. */
.hero { position: relative; height: 320dvh; background: var(--paper-zone); padding: 88px 12px 0; }
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: var(--black);
  border-radius: 10px 10px 0 0;
  will-change: margin, height, border-radius;
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 7vh, 84px) var(--page-gutter) clamp(16px, 2.4vh, 30px);
}
.hero-head { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; text-align: center; will-change: transform, opacity; }
.hero-title { max-width: none; font-size: clamp(24px, 3.4vw, 50px); font-weight: 400; line-height: 1.05; letter-spacing: -0.042em; }
.hero-title .dim { color: #5c5d63; }
.hero-summary { max-width: 480px; margin: 14px auto 0; color: var(--muted); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }

.hero-stage { position: static; flex: 1; min-height: 0; margin-top: 14px; }

/* Left side text that appears and fills as the panels spread. */
.stage-side { position: absolute; left: 0; top: 50%; z-index: 7; width: min(42%, 440px); transform: translateY(-50%); opacity: 0; will-change: opacity; }
.side-fill { max-width: 18ch; margin-top: 12px; font-size: clamp(22px, 2.4vw, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; }

/* The tilting layered stack. */
.stage-deck { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.deck-layer { position: absolute; inset: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.16); background: rgba(16,16,16,.88); opacity: 0; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.deck-panel { position: absolute; inset: 0; transform-origin: center; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: transparent; }
.split-stage .deck-panel { overflow: hidden; border-radius: 4px; background: #000; }
.deck-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-dither { display: block; }
.deck-decor { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.hero-landing { position: absolute; left: 50%; top: 50%; z-index: 8; width: min(780px, 88%); transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; will-change: opacity, transform, filter; }
.hero-landing .sec-label { justify-content: center; }
.hero-landing h2 { font-size: clamp(28px, 3.2vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.hero-landing-sub { max-width: 560px; margin: 18px auto 0; color: var(--muted); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; font-weight: 400; }
.deck-decor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck-bin { position: absolute; color: #63646a; font-size: 10px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.deck-tick { position: absolute; width: 7px; height: 7px; border-top: 1px solid rgba(244,244,242,.5); border-right: 1px solid rgba(244,244,242,.5); transform: rotate(45deg); }
.stage-label { position: absolute; top: 14px; left: 16px; z-index: 6; color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.stage-corner { position: absolute; z-index: 6; width: 12px; height: 12px; }
.stage-corner.tr { top: 12px; right: 12px; border-top: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); }
.stage-corner.bl { bottom: 12px; left: 12px; border-bottom: 1px solid rgba(255,255,255,.35); border-left: 1px solid rgba(255,255,255,.35); }
.dot-field { position: absolute; inset: 0; width: 100%; height: 100%; }

/* -------------------------------------------------------------- statement
   Pure text passage: letters fill grey→white on scroll. Text sits high in
   the section (not centred) so it reads as it enters, with little dead air.
   Sticky, so the white block scrolls up over it. */
.pre-statement { width: var(--content); margin: 0 auto; padding: var(--section-top) 0 clamp(64px, 8vw, 120px); }

.statement-section { position: sticky; top: 0; z-index: 0; overflow: clip; display: flex; flex-direction: column; justify-content: flex-start; min-height: 100dvh; padding: calc(var(--nav-height) + clamp(40px, 9vh, 90px)) var(--page-gutter) var(--s9); background: #040404; }
.statement-section .dot-field { z-index: 0; opacity: .45; }
.statement-inner { position: relative; z-index: 1; width: var(--content); margin-inline: auto; }
.fill-statement { will-change: opacity, transform, filter; max-width: 24ch; font-size: clamp(28px, 3.4vw, 56px); font-weight: 500; line-height: 1.08; letter-spacing: -0.045em; }
.fill-letter { color: #303134; transition: color 160ms linear; }
.fill-letter.lit { color: var(--ink); }

/* --------------------------------------------------------------- facts band
   Prime-Intellect register: hairlines, numbered cells, corner ticks. */
.facts-band { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--line-soft); background: #070707; }
.facts-band > div { position: relative; display: flex; flex-direction: column; min-height: 150px; padding: var(--cell-pad) var(--page-gutter); border-right: 1px solid var(--line-soft); transition: background 260ms ease; }
.facts-band > div:hover { background: #0c0c0c; }
.facts-band > div:hover b { color: var(--muted); }
.facts-band > div:last-child { border-right: 0; }
.facts-band span, .practical-grid span, .page-hero-note span { display: block; color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.facts-band b { position: absolute; right: var(--cell-pad); top: var(--cell-pad); color: #3c3d40; font-size: 11px; font-weight: 400; letter-spacing: .08em; transition: color 260ms ease; }
.facts-band strong, .practical-grid strong { display: block; margin-top: auto; padding-top: var(--s6); font-size: 16px; font-weight: 400; line-height: 1.35; }
.page-hero-note strong { display: block; font-size: 16px; font-weight: 400; line-height: 1.3; }

/* --------------------------------------------------------------- marquee
   Slow discipline ticker — a small living band that also states scope. */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line-soft); background: #050505; }
.marquee-track { display: inline-flex; align-items: center; gap: 0; padding: 20px 0; white-space: nowrap; will-change: transform; animation: marquee 42s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; color: #6d6e72; font-size: 12px; letter-spacing: .04em; text-transform: none; }
.marquee-track span::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 30px; border-radius: 50%; background: #3a3b3e; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- fig grid
   Prime-Intellect "engineering document" register on the white block: a
   2x2 of numbered figures, each with a FIG.N label over the image, a
   numbered heading, a description and an indexed sub-list. */
/* Filler slot base: swap for real diagrams/photos/film later. */
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px), #090909; }
.ph span { max-width: 80%; padding: 7px 12px; border: 1px dashed rgba(255,255,255,.28); color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; text-align: center; }

.research-block { background: var(--paper-zone); color: var(--paper-ink); padding: var(--section-top) var(--page-gutter) var(--s10); }
.research-inner { width: var(--content); margin-inline: auto; }
.research-block .pi-head b { color: #101010; }
.fig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: var(--s6); border: 1px solid var(--line-dark); background: rgba(0,0,0,.14); }
.fig-cell { display: flex; flex-direction: column; padding: 0; background: var(--paper-zone); transition: background 240ms ease; }
.fig-cell:hover { background: #edece7; }
/* the visual fills the top half of the cell, flush to its edges */
.fig-visual { position: relative; width: 100%; aspect-ratio: 2/1; overflow: hidden; border-bottom: 1px solid var(--line-dark); background: #e9e8e3; }
.fig-tag { position: absolute; top: 11px; left: 13px; z-index: 1; color: #6a6b70; font-size: 11px; letter-spacing: .04em; }
.research-block .ph { background: repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 14px), #e9e8e3; }
.research-block .ph span { border-color: rgba(0,0,0,.3); color: #77787d; }
.fig-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 22px 24px 26px; }
.fig-head { display: flex; align-items: baseline; gap: 12px; }
.fig-num { color: #9a9ba0; font-size: 14px; font-variant-numeric: tabular-nums; }
.fig-num { display: none; }
.fig-cell h3 { font-size: 22px; font-weight: 600; color: #101010; letter-spacing: -0.015em; }
.fig-body p { max-width: 52ch; color: #56575c; font-size: 15px; line-height: 1.55; }

/* One CTA system, sitewide: square, hairline, uppercase; beam on hover. */
.cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; transition: color 200ms ease, border-color 200ms ease; }
.research-block .cta { color: #101010; border-color: var(--line-dark); }
.beam-hover { position: relative; animation: beam-spin 3.2s linear infinite; transition: color 200ms ease, border-color 200ms ease, box-shadow 500ms ease; }
.beam-hover::after {
  content: ""; position: absolute; inset: -1px; padding: 1px;
  background: conic-gradient(from var(--beam), rgba(237,64,179,.75), rgba(110,247,204,.75), rgba(120,150,255,.75), rgba(176,84,222,.75), rgba(237,64,179,.75));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 500ms ease; pointer-events: none;
}
.beam-hover:hover::after { opacity: .85; }
.beam-hover:hover { box-shadow: 0 0 13px rgba(170,120,220,.2); }
.research-block .beam-hover::after {
  background: conic-gradient(from var(--beam), rgba(217,44,159,.6), rgba(20,150,120,.6), rgba(80,110,220,.6), rgba(140,64,190,.6), rgba(217,44,159,.6));
}
.research-block .beam-hover:hover { box-shadow: 0 0 13px rgba(140,80,190,.16); }

/* -------------------------------------------------------- teacher portal
   Registration, sign-in and account status. Dark shell, hairline fields. */
.auth-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); width: var(--content); margin-inline: auto; padding: calc(var(--nav-height) + clamp(48px, 8vh, 96px)) 0 var(--section-bottom); align-items: start; }
.auth-shell-narrow { grid-template-columns: .9fr .9fr; }
.auth-copy h1 { max-width: 20ch; font-size: clamp(28px, 3vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; }
.auth-copy > p { max-width: 46ch; margin-top: 18px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.auth-steps { display: grid; margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.auth-steps li { display: flex; gap: 0; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-steps span { display: none; }
.auth-note { margin-top: 24px; color: var(--dim); font-size: 13px; }
.auth-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-form { padding-top: 6px; }
.field-hint { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; font-style: normal; letter-spacing: .01em; }
.form-check { display: flex !important; align-items: flex-start; gap: 12px; margin-top: 4px; }
.form-check input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ink); }
.form-check span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.form-status[data-kind="error"] { color: #ff9d9d; }
.auth-actions { display: flex; gap: 14px; margin-top: 30px; }
.auth-actions .cta { align-self: flex-start; margin-top: 0; cursor: pointer; background: transparent; font-family: inherit; }
.account-facts { display: grid; gap: 0; margin: clamp(26px, 3.5vw, 40px) 0 0; border-top: 1px solid var(--line-soft); }
.account-facts div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.account-facts dt { color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.account-facts dd { margin: 0; font-size: 14px; text-align: right; }

/* ----------------------------------------------------------- pupil manager
   Approved-teacher area: entry list on the left, detail and add form right. */
.pupil-zone { width: var(--content); margin-inline: auto; padding-bottom: var(--section-bottom); }
.pupil-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line-soft); }
.pupil-head h2 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; letter-spacing: -0.03em; }
.pupil-lede { max-width: 56ch; margin-top: 12px; color: var(--dim); font-size: 13px; line-height: 1.6; }
.pupil-count { flex: 0 0 auto; color: var(--dim); font-size: 12px; letter-spacing: .03em; text-transform: none; }
.pupil-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px, 5vw, 76px); margin-top: 34px; align-items: start; }
.pupil-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pupil-item { border-bottom: 1px solid var(--line-soft); }
.pupil-item button { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; width: 100%; padding: 16px 0; border: 0; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: color 180ms ease; }
.pupil-item button:hover, .pupil-item.is-open button { color: var(--ink); }
.pupil-item i { grid-row: 1 / span 2; padding-top: 3px; color: var(--dim); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.pupil-item b { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; }
.pupil-item span { color: var(--dim); font-size: 13px; }
.pupil-empty { padding: 18px 0; color: var(--dim); font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.pupil-aside { display: grid; gap: clamp(34px, 4vw, 54px); }
.pupil-detail h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pupil-detail .account-facts { margin-top: 18px; }
.pupil-form .sec-label { margin-bottom: 0; }

.draft-flag { margin-bottom: 14px; padding: 10px 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .02em; }

.grant-zone { padding-top: 0; }
.grant-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.grant-item > div { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; }
.grant-item i { grid-row: 1 / span 2; padding-top: 3px; color: var(--dim); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.grant-item b { font-size: 15px; font-weight: 400; }
.grant-item span { color: var(--dim); font-size: 12px; }
.grant-status { flex: 0 0 auto; font-style: normal; font-size: 11px; letter-spacing: .03em; text-transform: none; color: var(--dim); }
.grant-status[data-state="approved"] { color: #6ef7cc; }
.grant-status[data-state="declined"] { color: #ff9d9d; }
.grant-status[data-state="reviewing"] { color: #8ba0ff; }
.pupil-form select { width: 100%; height: 48px; padding: 0 4px; color: var(--ink); border: 0; border-bottom: 1px solid rgba(255,255,255,.38); border-radius: 0; background: transparent; font: inherit; }
.pupil-form select option { background: #0c0c0c; }
.pupil-form input[type="file"] { padding: 12px 0; color: var(--muted); font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.2); }
.pupil-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 12px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0; font: inherit; font-size: 12px; cursor: pointer; }

/* ------------------------------------------------------------- entry route
   Students do not self-register: this block routes them to a teacher. */
.entry-route { width: var(--content); margin-inline: auto; padding: var(--section-top) 0 var(--section-bottom); }
.entry-route-copy { max-width: 760px; }
.entry-route h2 { font-size: clamp(26px, 3vw, 44px); font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; color: var(--paper-ink); }
.entry-route > .entry-route-copy > p { margin-top: 18px; max-width: 62ch; color: #56575c; font-size: 16px; line-height: 1.6; }
.entry-steps { display: grid; gap: 0; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark-soft); }
.entry-steps li { display: flex; gap: 0; padding: 18px 0; border-bottom: 1px solid var(--line-dark-soft); color: #3d3e42; font-size: 15px; line-height: 1.5; }
.entry-steps span { display: none; }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: clamp(28px, 3.4vw, 40px); }
.entry-route .text-link { color: #101010; }
.entry-note { margin-top: 26px; color: #6b6c70; font-size: 13px; }
.entry-note a { color: #101010; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- quote pair
   PI testimonial pattern in monochrome: one inverted card, one dark. */
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: var(--content); margin-inline: auto; padding-block: 0 var(--section-bottom); }
.quote-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s7); min-height: 300px; margin: 0; padding: clamp(24px, 2.4vw, 40px); border: 1px solid var(--line-soft); background: #0a0a0a; }
.quote-card blockquote { margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; letter-spacing: -0.012em; }
.quote-card figcaption { display: grid; gap: 3px; }
.q-name { font-size: 14px; }
.q-role { color: var(--dim); font-size: 12px; letter-spacing: .04em; text-transform: none; }
.quote-invert { border: 0; background: var(--paper); color: #101010; }
.quote-invert .q-role { color: #77787d; }

/* -------------------------------------------------------------- path list
   PsiQuantum "path to scaling": numbered list left, the active entry
   expands with its description and a thin marker; media right. */
.path-section { width: var(--content); margin-inline: auto; padding-block: var(--section-top) var(--section-bottom); }
.path-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 88px); align-items: start; margin-top: var(--s7); }
.path-list { display: grid; margin: 0; padding: 0; list-style: none; }
.path-item { border-top: 1px solid var(--line-soft); }
.path-item:last-child { border-bottom: 1px solid var(--line-soft); }
.path-item button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; color: var(--dim); border: 0; background: transparent; font-size: clamp(19px, 1.7vw, 24px); font-weight: 400; text-align: left; cursor: pointer; transition: color 240ms ease; }
.path-item button i { font-style: normal; font-size: 11px; letter-spacing: .08em; color: #45464a; }
.path-item button:hover { color: var(--muted); }
.path-item.active button { color: var(--ink); }
.path-item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.path-item.active .path-item-body { grid-template-rows: 1fr; }
.path-item-body > div { overflow: hidden; }
.path-item-body p { max-width: 40ch; padding: 0 0 20px 16px; border-left: 1px solid rgba(255,255,255,.4); color: var(--muted); font-size: 15px; line-height: 1.6; }
.path-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--elev); }
.path-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms var(--ease); }
.path-frame.active { opacity: 1; }
.path-frame img, .path-frame video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04) brightness(.9); }

/* ------------------------------------------------------ shared section bits */
.section-heading { max-width: 900px; }
.section-heading h2 { font-size: var(--display-2); line-height: .96; letter-spacing: -0.035em; }
.section-heading p { max-width: 62ch; margin-top: var(--s4); color: var(--muted); font-size: 16px; line-height: 1.55; }
.team-section, .involved-section, .outcome-matrix, .form-section { width: var(--content); margin-inline: auto; padding-block: var(--section-top) var(--section-bottom); }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: var(--s8); border-top: 1px solid var(--line); }
.team-grid article { display: flex; flex-direction: column; min-height: 200px; padding: var(--cell-pad) var(--cell-pad) var(--s6) 0; border-right: 1px solid var(--line-soft); }
.team-grid article + article { padding-left: var(--cell-pad); }
.team-grid article:nth-of-type(4) { border-right: 0; }
.team-grid h3 { font-size: 18px; font-weight: 400; }
.team-grid p { max-width: 32ch; margin-top: auto; padding-top: var(--s6); color: var(--muted); font-size: 14px; line-height: 1.55; }
.team-grid .team-adviser { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s3) clamp(var(--s6), 6vw, var(--s9)); min-height: 0; padding: var(--s5) 0; border-top: 1px solid var(--line); border-right: 0; }
.team-grid .team-adviser h3 { flex: 0 0 auto; }
.team-grid .team-adviser p { max-width: 60ch; margin-top: 0; padding-top: 0; }
.involved-section { padding-top: var(--s7); }
.involved-grid { display: grid; grid-template-columns: 1.3fr .7fr; margin-top: var(--s8); border: 1px solid var(--line); }
.route { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: var(--cell-pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 260ms ease; }
.route:nth-child(even) { border-right: 0; }
.route:nth-child(n+3) { border-bottom: 0; }
.route:hover { background: #0c0c0c; }
.route span { color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.route h3 { max-width: 520px; margin-top: auto; padding-top: var(--s7); font-size: clamp(20px, 1.9vw, 29px); font-weight: 400; letter-spacing: -0.02em; }
.route p { max-width: 44ch; margin-top: var(--s3); color: var(--muted); font-size: 15px; line-height: 1.55; }
.route b { position: absolute; right: var(--cell-pad); top: var(--cell-pad); font-size: 20px; font-weight: 400; transition: transform 220ms var(--ease); }
.route:hover b { transform: translateX(6px); }

/* --------------------------------------------------------------- light zone
   Full-bleed white passages with the Special rounded exit at the bottom. */
/* The white block scrolls up over the sticky statement above it (special.co
   pattern): rounded corners reveal the black behind at top, exit at bottom. */
/* Dark over-zone: scrolls over the pinned statement. Square edged. */
.light-zone { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); background: #060606; color: var(--ink); }

/* PI-style section header: one line, white lead + grey rest. */
.pi-head { max-width: 940px; font-size: clamp(20px, 1.8vw, 27px); font-weight: 400; line-height: 1.4; letter-spacing: -0.015em; }
.pi-head b { font-weight: 600; color: var(--ink); }
.pi-head span { color: var(--dim); }

/* PI-style people grid: photo-forward, minimal text. */
.people-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: var(--s6); border: 1px solid var(--line-soft); background: rgba(255,255,255,.07); }
.person { background: #070707; }
.person-photo { position: relative; aspect-ratio: 1; }
.person-meta { padding: 12px 14px 14px; }
.person-name { font-size: 14px; font-weight: 600; }
.person-role { margin-top: 2px; color: var(--dim); font-size: 12px; }

/* Standalone split scene: sticky panel that separates into layers on scroll.
   The panel holds a media filler until the real film/image is supplied. */
.split-scene { position: relative; height: 240vh; background: var(--black); }
.split-sticky { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; overflow: clip; padding: calc(var(--nav-height) + 10px) var(--page-gutter) 24px; perspective: 1600px; }
.split-stage { position: relative; width: min(860px, 86%); height: 50dvh; }
.split-copy { z-index: 7; max-width: 720px; margin-top: clamp(26px, 5vh, 52px); text-align: center; }
.split-fill { font-size: clamp(22px, 2.4vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
@keyframes lit-flash { 0% { color: #5f7dff; } 100% { color: var(--ink); } }
.fill-letter.flash.lit { animation: lit-flash 560ms ease-out; }
.statement-spacer { height: 92vh; pointer-events: none; }
.split-stage .deck-panel .ph { position: absolute; inset: 0; }

/* Paper + dark slab panels. */
.paper-panel { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--paper); color: var(--paper-ink); }
.paper-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 70% at 85% 6%, rgba(16,16,16,.06), transparent 62%), radial-gradient(46% 64% at 6% 98%, rgba(16,16,16,.05), transparent 58%); }
.paper-panel > * { position: relative; }
.paper-panel .sec-label { color: #77787d; }
.paper-panel .text-link { color: var(--paper-ink); }
.panel-dark { position: relative; overflow: hidden; border-radius: var(--r-panel); background: #0a0a0a; color: var(--ink); }
.panel-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 70% at 85% 6%, rgba(255,255,255,.045), transparent 62%), radial-gradient(46% 64% at 8% 96%, rgba(255,255,255,.035), transparent 58%); }
.panel-dark > * { position: relative; }
.panel-dark .sec-label { color: var(--muted); }

.cta-panel-wrap { width: var(--content); margin-inline: auto; padding-block: 0 var(--section-bottom); }
.cta-panel { display: flex; flex-direction: column; justify-content: center; min-height: 400px; padding: clamp(44px, 5.4vw, 88px) clamp(28px, 5vw, 88px); }
.cta-panel h2 { max-width: 720px; font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.03em; }
.cta-panel > p:not(.sec-label) { max-width: 56ch; margin-top: var(--s4); color: var(--muted); font-size: 16px; line-height: 1.55; }
.cta-panel .hero-actions { margin-top: var(--s6); }
.cta-panel .text-link { color: var(--ink); }

/* --------------------------------------------------------------- news strip */
.news-section { width: var(--content); margin-inline: auto; padding-block: 0 var(--section-bottom); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s7); }
.news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); background: var(--elev); transition: border-color 240ms ease; }
.news-card:hover { border-color: rgba(255,255,255,.2); }
.news-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--s4); padding: var(--s5); }
.news-meta { display: flex; gap: 14px; color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.news-card h3 { font-size: 18px; font-weight: 400; line-height: 1.3; }
.news-more { display: flex; justify-content: space-between; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------- page heroes */
.page-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,.55fr); min-height: 92dvh; overflow: hidden; padding: calc(var(--nav-height) + 6vh) var(--page-gutter) 7vh; border-bottom: 1px solid var(--line-soft); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.3)); }
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media .ph { position: absolute; inset: 0; display: block; }
.page-hero-media .ph span { position: absolute; right: 18px; bottom: 16px; }
.page-hero-media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0) contrast(1.1) brightness(.65) blur(5px); transform: scale(1.03); }
.page-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; max-width: 1050px; }
.page-hero-copy h1 { max-width: 18ch; font-size: var(--display-1); line-height: .98; letter-spacing: -0.035em; }
.page-hero-copy > p:not(.sec-label) { max-width: 620px; margin-top: 22px; color: #bfc0c3; font-size: clamp(16px,1.25vw,19px); line-height: 1.5; }
.page-hero-copy .button { align-self: flex-start; margin-top: 28px; }
.page-hero-note { align-self: end; display: grid; gap: 8px; padding: 24px 0 0 24px; border-top: 2px solid var(--ink); }
.page-hero-note strong { margin-top: 0; margin-bottom: 20px; }
.manifesto-section { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10vw; width: var(--content); margin-inline: auto; padding-block: var(--section-top) var(--section-bottom); }
.manifesto-lead { font-size: var(--display-2); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.manifesto-section > p:last-child { align-self: end; max-width: 58ch; color: var(--muted); font-size: 17px; line-height: 1.6; }

.day-glance { width: var(--content); margin-inline: auto; padding: clamp(44px, 5.4vw, 88px) clamp(28px, 5vw, 88px); }
.day-glance-wrap { padding-block: 0 var(--section-bottom); }
.day-glance h2 { font-size: var(--display-2); letter-spacing: -0.03em; }
.day-glance > p:not(.sec-label) { max-width: 700px; margin-top: 16px; color: #4e5054; font-size: 17px; line-height: 1.55; }
.sequence-rail { display: grid; grid-template-columns: repeat(4,1fr); margin-top: var(--s7); border-top: 1px solid rgba(10,10,10,.28); }
.sequence-rail span { padding-top: var(--s4); font-size: clamp(21px,2.6vw,38px); font-weight: 400; }

.finalist-section { display: grid; grid-template-columns: .34fr 1.3fr .6fr; gap: 5vw; align-items: start; padding: var(--section-top) var(--page-gutter) var(--section-bottom); border-bottom: 1px solid var(--line-soft); }
.finalist-label { color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.finalist-copy h2 { max-width: 900px; font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.03em; }
.finalist-copy p { max-width: 760px; margin-top: 26px; color: #aeafb3; font-size: 17px; line-height: 1.62; }
.finalist-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.finalist-list span { padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: #c2c3c6; font-size: 15px; }
.eligibility-section { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10vw; width: var(--content); margin-inline: auto; padding-block: var(--section-top) var(--section-bottom); }
.eligibility-section h2 { font-size: var(--display-2); letter-spacing: -0.03em; }
.eligibility-section > div:first-child p { max-width: 60ch; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.text-link { display: inline-flex; gap: 12px; margin-top: 24px; font-size: 15px; }
.practical-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.practical-grid > div { display: flex; flex-direction: column; min-height: 140px; padding: var(--cell-pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.practical-grid > div:nth-child(even) { border-right: 0; }

/* ------------------------------------------------------------ teacher cards */
.card-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 26vw, 380px); gap: var(--s4); margin-top: var(--s8); padding-bottom: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.card-rail::-webkit-scrollbar { height: 5px; }
.card-rail::-webkit-scrollbar-track { background: transparent; }
.card-rail::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255,255,255,.18); }
.rail-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: var(--s3); overflow: hidden; border: 1px solid var(--line-soft); background: #070707; scroll-snap-align: start; }
.rail-card-art { position: absolute; inset: 0; transition: transform 600ms var(--ease); }
.rail-card:hover .rail-card-art { transform: scale(1.04); }
.art-ticks { background-image: radial-gradient(46% 40% at 78% 18%, rgba(255,255,255,.06), transparent 62%), repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 24px); }
.art-contour { background-image: repeating-radial-gradient(circle at 82% 8%, transparent 0 24px, rgba(255,255,255,.1) 24px 25px); }
.art-grid { background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.4px), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px, 34px 34px, 34px 34px; }
.art-rings { background-image: radial-gradient(40% 36% at 20% 12%, rgba(255,255,255,.05), transparent 60%), repeating-radial-gradient(circle at 50% 118%, transparent 0 34px, rgba(255,255,255,.11) 34px 35px); }
.rail-plate { position: relative; padding: var(--s5); border: 1px solid rgba(255,255,255,.09); background: rgba(6,6,6,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rail-plate h3 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.rail-plate h3::before { content: ""; width: 1px; height: 14px; background: rgba(255,255,255,.6); }
.rail-plate p { margin-top: var(--s3); color: var(--muted); font-size: 14px; line-height: 1.55; }

.school-return-section { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 10vw; padding: var(--section-top) var(--page-gutter) var(--section-bottom); border-block: 1px solid var(--line-soft); }
.school-return-section > div:last-child h2, .burden-section h2, .credibility-section h2 { font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.03em; }
.school-return-section > div:last-child p, .burden-section p, .credibility-section p { margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.school-return-visual { position: relative; min-height: 460px; perspective: 1200px; }
.stack-sheet { position: absolute; inset: 8% 8%; display: flex; align-items: flex-end; padding: 24px; border: 1px solid rgba(255,255,255,.38); background: rgba(0,0,0,.35); transform: rotateX(58deg) rotateZ(-10deg); }
.stack-sheet:nth-child(1) { transform: translate3d(-7%,-6%,-100px) rotateX(58deg) rotateZ(-10deg); opacity: .48; }
.stack-sheet:nth-child(2) { transform: rotateX(58deg) rotateZ(-10deg); opacity: .72; }
.stack-sheet:nth-child(3) { transform: translate3d(8%,8%,100px) rotateX(58deg) rotateZ(-10deg); }
.stack-sheet span { font-size: 11px; letter-spacing: .03em; text-transform: none; }

.burden-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; width: var(--content); margin: var(--section-top) auto var(--section-bottom); padding: clamp(36px, 4.6vw, 72px); color: var(--ink); }
.burden-steps { border-top: 1px solid var(--line); }
.burden-steps span { display: block; padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: 16px; }

.credibility-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; width: var(--content); margin-inline: auto; padding-block: 0 var(--section-bottom); }

/* -------------------------------------------------------------------- forms */
.form-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9vw; }
.form-intro h2 { font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.03em; }
.form-intro p { max-width: 520px; margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.interest-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; align-content: start; }
.interest-form label { display: grid; gap: 9px; color: #b3b4b7; font-size: 13px; }
.interest-form input { width: 100%; height: 48px; padding: 0 4px; color: var(--ink); border: 0; border-bottom: 1px solid rgba(255,255,255,.38); border-radius: 0; background: transparent; }
.interest-form input:focus { border-bottom-color: var(--ink); outline: 0; }
.form-wide { grid-column: 1/-1; }
.form-submit { grid-column: 1/-1; justify-self: start; margin-top: 12px; background: var(--ink); color: var(--black); cursor: pointer; }
.form-status { grid-column: 1/-1; min-height: 1.4em; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ details */
.reference-hero { display: grid; grid-template-columns: 1.45fr .55fr; gap: 8vw; align-items: end; min-height: 66dvh; padding: calc(var(--nav-height) + 8vh) var(--page-gutter) 9vh; border-bottom: 1px solid var(--line-soft); }
.students-hero { position: relative; align-items: center; min-height: 66dvh; overflow: visible; }
.students-hero > div:first-child { position: relative; z-index: 2; }
.students-hero h1 { max-width: 24ch; font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -0.035em; }
.hero-lede { max-width: 48ch; margin-top: 16px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(26px, 3.4vw, 40px); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px; color: var(--dim); font-size: 13px; }
.tag-row span { position: relative; }
.tag-row span + span::before { content: ""; position: absolute; left: -15px; top: 50%; width: 4px; height: 1px; background: currentColor; opacity: .5; }
.students-hero .hero-side { position: absolute; inset: 0 calc(var(--page-gutter) * -1); z-index: 1; }
/* details: same full-bleed canvas layer, its own cross-grid register */
.details-hero { position: relative; overflow: visible; }
.details-hero > div:first-child, .details-hero > p { position: relative; z-index: 2; }
.details-hero .hero-side { position: absolute; inset: 0 calc(var(--page-gutter) * -1); z-index: 1; }
.mini-dither-wrap { position: absolute; inset: 0; }
.mini-dither-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reference-hero h1 { max-width: 20ch; font-size: var(--display-1); line-height: .98; letter-spacing: -0.035em; }
.reference-hero > p { max-width: 480px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.key-dates { padding: var(--section-top) var(--page-gutter) var(--section-bottom); }
.key-dates h2 { font-size: var(--display-2); letter-spacing: -0.03em; }
.date-track { display: grid; grid-template-columns: repeat(4,1fr); margin-top: var(--s7); border-top: 1px solid var(--line); }
.date-track div { position: relative; display: flex; flex-direction: column; min-height: 160px; padding: var(--cell-pad); border-right: 1px solid var(--line); }
.date-track div::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: currentColor; opacity: .3; }
.date-track div:last-child { border-right: 0; }
.date-track span { color: var(--dim); font-size: 11px; letter-spacing: .03em; text-transform: none; }
.date-track strong { display: block; margin-top: auto; padding-top: var(--s6); font-size: 17px; font-weight: 400; line-height: 1.3; }
.reference-layout { position: relative; display: grid; grid-template-columns: minmax(230px,20vw) 1fr; border-top: 1px solid var(--line); }
.reference-index { position: sticky; top: calc(var(--nav-height) + 20px); align-self: start; display: grid; gap: 15px; padding: 36px var(--page-gutter); }
.reference-index a { position: relative; color: var(--dim); font-size: 15px; transition: color 240ms ease, transform 320ms cubic-bezier(.22, .7, .3, 1); }
.reference-index a:hover { color: var(--muted); }
.reference-index a.active { color: var(--ink); transform: translateX(6px); }
/* a faint rail runs down the index; a glowing segment slides to the active
   link (positioned by the scrollspy), its core white, its tail blue */
.reference-index::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: calc(var(--page-gutter) - 14px); width: 1px; background: var(--line-soft); }
.index-marker {
  position: absolute; left: calc(var(--page-gutter) - 14.5px); width: 2px; height: 20px;
  background: linear-gradient(rgba(95, 125, 255, .95), #f4f4f2 55%, rgba(95, 125, 255, .35));
  box-shadow: 0 0 12px rgba(95, 125, 255, .55);
  opacity: 0;
  transition: top 480ms cubic-bezier(.3, .9, .3, 1), height 480ms cubic-bezier(.3, .9, .3, 1), opacity 300ms ease;
}
.index-marker.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .index-marker { transition: opacity 300ms ease; } .reference-index a { transition: color 240ms ease; } }
.reference-content { border-left: 1px solid var(--line); }
/* these are stacked reading sections, not full-bleed scenes — the global
   section rhythm left ~300px of dead air around a single paragraph */
.reference-section { scroll-margin-top: calc(var(--nav-height) + 24px); padding: clamp(46px, 5vw, 76px) var(--page-gutter) clamp(50px, 5.5vw, 84px); border-bottom: 1px solid var(--line); }
.reference-section > h2 { max-width: 980px; font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.03em; }
.reference-section > p { max-width: 72ch; margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.reference-columns, .criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7) clamp(var(--s7), 5vw, var(--s8)); margin-top: var(--s7); }
.reference-columns h3 { font-size: 20px; font-weight: 400; }
.reference-columns p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.criteria-grid { gap: 0; border: 1px solid var(--line); }
.criteria-grid span { display: flex; align-items: flex-end; min-height: 120px; padding: var(--cell-pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.35; }
.criteria-grid span:nth-child(even) { border-right: 0; }
.criteria-grid span:nth-last-child(-n+2) { border-bottom: 0; }
.schedule-list { max-width: 980px; margin-top: var(--s7); }
.schedule-list div { display: grid; grid-template-columns: 100px 1fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.schedule-list time { color: var(--dim); letter-spacing: .04em; }
.faq-list { margin-top: var(--s7); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 30px; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(18px,1.8vw,26px); font-weight: 400; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--muted); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 72ch; padding: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.dual-cta { display: grid; grid-template-columns: 1fr 1fr; }
.dual-cta > div { min-height: 400px; padding: clamp(48px,6vw,88px) var(--page-gutter); border-right: 1px solid var(--line); }
.dual-cta > div:last-child { border-right: 0; }
.dual-cta h2 { font-size: var(--display-2); letter-spacing: -0.03em; }
.dual-cta p { max-width: 480px; margin-top: 16px; color: var(--muted); font-size: 16px; }
.dual-cta .button { margin-top: 32px; }

/* ---------------------------------------------------------- footer (dark) */
.footer { background: #050505; color: var(--ink); border-top: 1px solid var(--line-soft); }
.footer-schematic { padding: clamp(28px, 3.6vw, 52px) var(--page-gutter) 0; }
.footer-schematic svg { display: block; width: 100%; height: auto; opacity: .8; filter: invert(1); }
.footer-cta { position: relative; display: flex; align-items: center; min-height: 520px; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.footer-cta-art { position: absolute; inset: 0; pointer-events: none; }
.footer-cta-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* scrim: calm ground under the copy, pattern breathing on the right */
.footer-cta-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .1) 80%); }
.footer-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 88px var(--page-gutter); }
.footer-copy h2 { max-width: 15ch; font-size: var(--display-2); line-height: 1.02; letter-spacing: -0.035em; }
.footer-copy p { max-width: 44ch; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 34px; }
/* hierarchy: one lit primary, one quiet arrow link */
.link-quiet { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; letter-spacing: -0.008em; transition: color 200ms ease; }
.link-quiet span[aria-hidden] { transition: transform 200ms var(--ease); }
.link-quiet:hover { color: var(--ink); }
.link-quiet:hover span[aria-hidden] { transform: translateX(3px); }
.footer-button { background: var(--ink); color: #0a0a0a; }
.footer-text-link { border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 15px; }
.line-panel { position: relative; overflow: hidden; border-left: 1px solid var(--line-soft); background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 110px 110px; }
.line-field { position: absolute; inset: -22px; }
.line-mark { --x:50%; --y:50%; --angle:-45deg; --line-alpha:.48; --line-scale:1; position: absolute; left: var(--x); top: var(--y); width: var(--line-length,21px); height: 2px; background: rgba(244,244,242,var(--line-alpha)); transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(var(--line-scale)); transform-origin: center;
  transition: transform 520ms cubic-bezier(.22,.7,.25,1), background-color 420ms ease; }

/* Bento link grid. */
.footer-bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.fb-cell { display: grid; gap: 8px; align-content: start; padding: clamp(28px, 3.4vw, 48px) var(--page-gutter); border-right: 1px solid var(--line-soft); }
.fb-cell:last-child { border-right: 0; }
.fb-cell h4 { margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.fb-cell a, .fb-cell span { width: fit-content; color: var(--muted); font-size: 13px; letter-spacing: .02em;  }
.fb-cell a:hover { color: var(--ink); }
.fb-brand { gap: 14px; }
.footer-brand { font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: .1em; }
.fb-brand p { max-width: 32ch; color: var(--dim); font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none; }

/* PI-style giant dim wordmark closing the page. */
.footer-giant { overflow: hidden; padding: clamp(20px, 3vw, 48px) var(--page-gutter) 0; border-top: 1px solid var(--line-soft); }
.footer-giant span { display: block; margin-bottom: -0.14em; color: #141414; font-size: clamp(120px, 24vw, 380px); font-weight: 600; line-height: .8; letter-spacing: -0.03em; user-select: none; }

/* -------------------------------------------------------------- breakpoints */
@media (max-width: 1100px) {
  .facts-band { grid-template-columns: repeat(3,1fr); }
  .facts-band > div:nth-child(3) { border-right: 0; }
  .facts-band > div:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid article:nth-of-type(even) { border-right: 0; }
  .team-grid article:nth-of-type(odd) { padding-left: 0; }
  .team-grid article:nth-of-type(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .light-zone .team-grid article:nth-of-type(-n+2) { border-bottom-color: var(--line-dark); }
  .team-grid .team-adviser { grid-column: 1 / -1; }
  .finalist-section { grid-template-columns: 180px 1fr; }
  .finalist-list { grid-column: 2; }
  .footer-cta { grid-template-columns: 1fr 1fr; }
  .footer-bento { grid-template-columns: 1fr 1fr; }
  .fb-cell { border-bottom: 1px solid rgba(0,0,0,.1); }
  .fb-cell:nth-child(even) { border-right: 0; }
  .hero-object { right: -16vw; width: min(62vw, 700px); opacity: .8; }
  .showcase-stage { grid-template-columns: 1fr; min-height: 0; }
  .showcase-media { aspect-ratio: 16/9; }
  .showcase-text { min-height: 300px; border-left: 0; border-top: 1px solid var(--line-soft); }
}

@media (max-width: 820px) {
  :root { --nav-height: 64px; }
  .nav-panel-body { grid-template-columns: 1fr; }

  .hero { padding-top: calc(var(--nav-height) + 40px); }
  .hero-object { top: 36%; right: -34vw; width: 120vw; opacity: .45; }
  .hero-main h1 { font-size: clamp(40px,10.5vw,60px); }

  .facts-band { grid-template-columns: 1fr 1fr; }
  .facts-band > div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .facts-band > div:nth-child(even) { border-right: 0; }

  .pre-statement { width: var(--content); margin: 0 auto; padding: var(--section-top) 0 clamp(64px, 8vw, 120px); }

.statement-section { min-height: 70dvh; }
  .fill-statement { font-size: clamp(26px,7vw,40px); }

  .showcase, .path-section, .team-section, .involved-section, .outcome-matrix, .form-section, .cta-panel-wrap, .news-section, .day-glance, .credibility-section, .burden-section { width: calc(100% - (var(--page-gutter) * 2)); }
  .showcase-tabs { grid-template-columns: 1fr 1fr; }
  .showcase-tabs button { border-bottom: 1px solid var(--line-soft); }
  .sc-panel { position: relative; inset: auto; display: none; padding: var(--s5); }
  .sc-panel.active { display: flex; min-height: 260px; }
  .path-layout { grid-template-columns: 1fr; }
  .path-media { order: -1; }

  .team-grid, .involved-grid, .news-grid { grid-template-columns: 1fr; }
  .team-grid article, .team-grid article + article { min-height: 0; padding: var(--s5) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .team-grid .team-adviser { grid-column: 1 / -1; flex-direction: column; padding: var(--s5) 0; }
  .team-grid p, .team-grid .team-adviser p { margin-top: var(--s3); padding-top: 0; }
  .route, .route:nth-child(even), .route:nth-child(n+3) { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .route:last-child { border-bottom: 0; }
  .route h3 { margin-top: var(--s6); padding-top: 0; }
  .facts-band strong, .practical-grid strong { padding-top: var(--s5); }
  .cta-panel { min-height: 0; }

  .page-hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-height) + 48px); }
  .page-hero-copy h1 { font-size: clamp(40px,10.5vw,60px); }
  .page-hero-note { margin-top: var(--s7); padding-left: 0; }
  .manifesto-section, .eligibility-section { grid-template-columns: 1fr; gap: 48px; }
  .burden-section { grid-template-columns: 1fr; gap: 44px; }
  .sequence-rail { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .card-rail { grid-auto-columns: min(84vw, 340px); }
  .finalist-section { grid-template-columns: 1fr; }
  .finalist-list { grid-column: auto; }
  .school-return-section, .credibility-section, .form-section { grid-template-columns: 1fr; }
  .auth-shell, .auth-shell-narrow { grid-template-columns: 1fr; gap: 44px; }
  .nav-links { margin-left: auto; gap: 12px; }
  .pupil-layout { grid-template-columns: 1fr; }
  .pupil-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .credibility-section { gap: 44px; }
  .school-return-visual { min-height: 360px; }
  .reference-hero { grid-template-columns: 1fr; min-height: 74dvh; }
  .date-track { grid-template-columns: 1fr 1fr; }
  .date-track div:nth-child(even) { border-right: 0; }
  .date-track div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .reference-layout { display: block; }
  .reference-index { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; padding: 16px var(--page-gutter); background: #000; border-bottom: 1px solid var(--line-soft); }
  .students-hero { min-height: 0; padding-bottom: 5vh; }
  .students-hero .hero-side, .details-hero .hero-side { display: none; }
  .reference-index a { flex: 0 0 auto; font-size: 14px; }
  .index-marker { display: none; }
  .reference-index a.active { transform: none; }
  .reference-content { border-left: 0; }
  .reference-columns, .criteria-grid { grid-template-columns: 1fr; }
  .criteria-grid span, .criteria-grid span:nth-child(even), .criteria-grid span:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .criteria-grid span:last-child { border-bottom: 0; }
  .dual-cta { grid-template-columns: 1fr; }
  .dual-cta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-cta { grid-template-columns: 1fr; }
  .footer-copy { min-height: 480px; }
  .line-panel { min-height: 420px; border-left: 0; border-top: 1px solid rgba(0,0,0,.14); }
  .footer-bento { grid-template-columns: 1fr; }
  .fb-cell { border-right: 0; }
}

@media (max-width: 520px) {
  .hero-main h1, .page-hero-copy h1, .reference-hero h1 { font-size: 38px; }
  .facts-band { grid-template-columns: 1fr; }
  .facts-band > div { min-height: 110px; border-right: 0; }
  .facts-band strong { margin-top: 20px; }
  .section-heading h2, .manifesto-lead, .finalist-copy h2, .reference-section > h2 { font-size: 30px; }
  .sequence-rail { grid-template-columns: 1fr; }
  .practical-grid, .date-track { grid-template-columns: 1fr; }
  .practical-grid > div, .date-track div { border-right: 0; border-bottom: 1px solid var(--line); }
  .interest-form { grid-template-columns: 1fr; }
  .interest-form label, .form-wide, .form-submit, .form-status { grid-column: 1; }
  .reference-columns { gap: 36px; }
  .schedule-list div { grid-template-columns: 76px 1fr; }
  .footer-copy h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fx, .fx-title { opacity: 1; transform: none; filter: none; transition: none; }
  .fill-letter { color: var(--ink); }
  /* Collapse the tall scroll-scene hero to a single static screen. */
  .hero { height: 100dvh; }
  .hero-sticky { position: relative; }
  .stage-frame { display: none; }
}

.dual-cta-single { grid-template-columns: 1fr; }
.dual-cta-single > div { max-width: 620px; }


/* ==================================================================== auth
   Split sign-in / sign-up (form left, live line field right) and the white
   account-creation page that follows. */
.auth-page { background: #000; }
.auth-split { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); min-height: 100dvh; }
.auth-pane { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px) clamp(28px, 5vw, 76px); }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.auth-brand .brand-mark { width: 22px; }
.auth-brand b { font-size: 21px; font-weight: 400; letter-spacing: -0.03em; }
.auth-body { display: flex; flex-direction: column; justify-content: center; flex: 1; max-width: 460px; padding: 40px 0; }
.auth-body h1 { font-size: clamp(24px, 2.2vw, 31px); font-weight: 500; letter-spacing: -0.035em; }
.auth-lede { margin-top: 12px; color: var(--dim); font-size: 14px; line-height: 1.55; }
.auth-fields { display: grid; margin-top: clamp(34px, 5vh, 60px); }
.auth-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line-soft); }
.auth-row:last-of-type { border-bottom: 1px solid var(--line-soft); }
.auth-row > span { color: var(--ink); font-size: 14px; letter-spacing: -0.01em; }
.auth-row input { width: 100%; height: 30px; padding: 0; color: var(--ink); border: 0; background: transparent; font: inherit; font-size: 14px; letter-spacing: -0.01em; }
.auth-row input::placeholder { color: #5b5c60; }
.auth-row input:focus { outline: 0; }
.auth-action { height: 52px; font-weight: 500; margin-top: clamp(34px, 5vh, 58px); border: 0; background: var(--ink); color: #000; font: inherit; font-size: 15px; letter-spacing: -0.01em; cursor: pointer; transition: opacity 180ms ease; }
.auth-action:hover { opacity: .88; }
.auth-action:disabled { opacity: .5; cursor: default; }
.auth-fields .form-status { margin-top: 14px; }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 13px; }
.auth-swap { margin: 0; }
.auth-swap a { color: var(--ink); }
.auth-foot-links { display: flex; gap: 20px; }
.auth-foot-links a { color: var(--dim); transition: color 160ms ease; }
.auth-foot-links a:hover { color: var(--ink); }
.auth-visual { position: relative; overflow: hidden; background: #060606; border-left: 1px solid var(--line-soft); }

/* ------------------------------------------------- account creation (light) */
body[data-page="auth"] .create-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); }
body[data-page="auth"] .create-bg .line-mark { background: rgba(0, 0, 0, calc(var(--line-alpha) * .5)); }
.create-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: clamp(20px, 3vw, 34px) clamp(24px, 4vw, 52px); }
.create-top .auth-brand { color: #0a0a0a; }
.create-logout { padding: 6px 2px; border: 0; background: transparent; color: #55565b; font: inherit; font-size: 14px; cursor: pointer; transition: color 160ms ease; }
.create-logout:hover { color: #0a0a0a; }
.create-card { position: relative; z-index: 2; width: min(880px, calc(100vw - 40px)); margin: clamp(10px, 3vh, 40px) auto clamp(60px, 10vh, 120px); padding: clamp(34px, 5vw, 68px); color: #0a0a0a;
  background: radial-gradient(120% 120% at 50% 50%, rgba(248,248,246,.97) 40%, rgba(248,248,246,.78) 78%, rgba(248,248,246,0) 100%); }
.create-card h1 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.035em; }
.create-lede { max-width: 54ch; margin-top: 14px; color: #55565b; font-size: 15px; line-height: 1.55; }
.create-email { margin-top: 10px; color: #55565b; font-size: 14px; }
.create-email b { color: #0a0a0a; font-weight: 400; }
.create-form { margin-top: clamp(32px, 4vw, 52px); }
.create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.create-wide { grid-column: 1 / -1; }
.create-grid label { display: grid; gap: 8px; color: #55565b; font-size: 13px; letter-spacing: -0.005em; }
.create-grid input { width: 100%; height: 44px; padding: 0 2px; color: #0a0a0a; border: 0; border-bottom: 1px solid rgba(0,0,0,.22); background: transparent; font: inherit; font-size: 15px; }
.create-grid input:focus { border-bottom-color: #0a0a0a; outline: 0; }
.create-grid .field-hint { color: #77787d; }
.create-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; color: #3d3e42; font-size: 13.5px; line-height: 1.5; }
.create-check input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: #0a0a0a; }
.create-check a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; }
.create-action { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; margin-top: clamp(30px, 4vw, 46px); padding: 0 20px; border: 0; background: #ebebe8; color: #0a0a0a; font: inherit; font-size: 15px; letter-spacing: -0.01em; cursor: pointer; transition: background 180ms ease; }
.create-action:hover { background: #0a0a0a; color: var(--paper); }
.create-action:disabled { opacity: .55; cursor: default; }
.create-form .form-status { margin-top: 16px; color: #55565b; }
.create-form .form-status[data-kind="error"] { color: #b3261e; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-visual { min-height: 260px; border-left: 0; border-top: 1px solid var(--line-soft); }
  .auth-row { grid-template-columns: 1fr; gap: 8px; }
  .create-grid { grid-template-columns: 1fr; }
}


/* ================================================================= nav mega
   Hovering the bar eases open a translucent grey panel: the hovered link
   stays white, its siblings drop back, and its page sections appear. */
.nav { --nav-ink: #0a0a0a; --nav-dim: #55565b; --nav-bg: var(--paper); --nav-fill: #0a0a0a; }
.nav.on-dark { --nav-bg: var(--paper); }
.nav-pill { color: var(--nav-ink); transition: transform 420ms var(--ease), opacity 300ms ease; }
.nav.nav-hidden .nav-pill { transform: translateY(-100%); }
.nav.nav-open .nav-pill { transform: none; }
/* the bar takes the tone of whatever sits under it */
.nav.on-dark { --nav-ink: #f4f4f2; --nav-dim: #9a9ba0; --nav-bg: #000; --nav-fill: #f4f4f2; }
.nav:not(.on-dark) { --nav-ink: #0a0a0a; --nav-dim: #55565b; --nav-bg: var(--paper); }
.nav-pill { background: var(--nav-bg); }
/* open: everything joins one dark translucent sheet */

.nav.nav-open .nav-pill { background: transparent; }
.pill-name, .brand-mark, .nav-menu-btn span { color: var(--nav-ink); }
.nav-menu-btn span { background: var(--nav-ink); }
.nav-links a { color: var(--nav-ink); }

.nav-signup { border-color: currentColor; color: var(--nav-ink) !important; }

/* the whole header sits on the translucent sheet while open */

.nav-mega {
  position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 59;
  height: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 380ms var(--ease), visibility 0s linear 380ms;
  pointer-events: none;
}
.nav.nav-open .nav-mega { visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.nav.nav-closing .nav-mega { visibility: visible; transform: translateY(-100%); transition-delay: 0s; }
.nav-mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: clamp(30px, 5vw, 90px); padding: clamp(26px, 3vw, 44px) var(--page-gutter) clamp(30px, 4vw, 52px); }
.nav-mega-cols { position: relative; display: block; }
.nav-mega-col { display: none; }
.nav-mega-col.is-active { display: block; animation: mega-col-in 340ms var(--ease) both; }
.nav-mega-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(24px, 4vw, 60px); }
@keyframes mega-col-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* hovering one section greys the others, then it settles white */
.nav-mega-links:hover a { color: #6d6e73; }
.nav-mega-links a:hover { color: var(--nav-ink); }
.nav-mega-head { margin: 0 0 14px; color: var(--nav-dim); font-size: 11px; letter-spacing: .05em; text-transform: none; }
.nav-mega-links { display: grid; gap: 9px; }
.nav-mega-links a { color: var(--nav-dim); font-size: 15px; letter-spacing: -0.012em; transition: color 220ms ease; }
.nav-mega-links a:hover { color: var(--nav-ink); }
@keyframes mega-flash { 0% { color: #5f7dff; } 100% { color: var(--nav-ink); } }
.nav-mega-art { position: relative; display: flex; flex-direction: column; gap: 12px; }
.nav-mega-field { position: relative; flex: 1; min-height: 150px; overflow: hidden; background: transparent; }
.nav-mega-caption { margin: 0; color: var(--nav-dim); font-size: 11px; letter-spacing: .04em; text-transform: none; }

/* cooler menu icon: staggered bars */
.nav-menu-btn { align-items: flex-end; }
.nav-menu-btn span:nth-child(1) { width: 16px; }
.nav-menu-btn span:nth-child(2) { width: 11px; }
.nav-menu-btn span:nth-child(3) { width: 14px; }
.nav-menu-btn:hover span:nth-child(2) { width: 16px; }
.nav-menu-btn:hover span:nth-child(3) { width: 16px; }
.nav-menu-btn span { transition: width 260ms var(--ease), transform 240ms var(--ease); }

/* teacher sign-up: fill wipes in from the left with a bright leading edge */
.nav-signup { position: relative; isolation: isolate; border: 1px solid transparent; animation: beam-spin 3.6s linear infinite;
  background: linear-gradient(var(--nav-bg), var(--nav-bg)) padding-box,
    linear-gradient(var(--nav-ink), var(--nav-ink)) border-box; }





@media (max-width: 900px) {
  .nav-mega { display: none; }
  .nav-mega-inner { grid-template-columns: 1fr; }
}


/* quiet hero buttons: no resting beam, only on hover */
.button-quiet { border: 1px solid var(--line); background: #0c0c0c; color: var(--ink); }
.button-quiet:hover { border-color: transparent; }

/* CTA panel: copy left with the button beneath it, visual right, tighter */
.cta-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(30px, 4vw, 54px); }
.cta-panel-copy h2 { max-width: 16ch; font-size: clamp(24px, 2.5vw, 38px); }
.cta-panel-copy > p { max-width: 46ch; }
.cta-panel-copy .hero-actions { justify-content: flex-start; margin-top: clamp(24px, 3vw, 34px); }
.cta-panel-art { position: relative; min-height: clamp(170px, 20vw, 250px); }

@media (max-width: 900px) {
  .cta-panel { grid-template-columns: 1fr; }
  .footer-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .footer-bento { grid-template-columns: 1fr; }
}


/* ================================================================ lab block
   Prime-Intellect register on the paper zone: banner with a live pattern,
   then a bordered 2x2 of figure cells with numbered notes. */
.lab-block { padding-block: clamp(60px, 7vw, 104px); }
.lab-banner { position: relative; overflow: hidden; padding: clamp(28px, 3.4vw, 46px); border: 1px solid var(--line-dark-soft); background: #101012; }
.lab-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-head { position: relative; z-index: 1; max-width: 22ch; }
.lab-head b { color: var(--ink); }
.lab-head span { color: #9a9ba0; }
.lab-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 30px); }
.lab-actions .cta { margin-top: 0; color: var(--ink); border-color: rgba(255,255,255,.24); }

.lab-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-dark-soft); border-top: 0; }
.lab-cell { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); border-right: 1px solid var(--line-dark-soft); border-bottom: 1px solid var(--line-dark-soft); }
.lab-cell:nth-child(even) { border-right: 0; }
.lab-cell:nth-last-child(-n+2) { border-bottom: 0; }
.lab-cell .fig-tag { position: static; color: #8b8c91; font-size: 11px; letter-spacing: .06em; }
.lab-visual { position: relative; aspect-ratio: 16 / 7; margin: 16px 0 22px; background: rgba(0,0,0,.035); }
.lab-title { display: flex; align-items: baseline; gap: 12px; }
.lab-title i { color: #9a9ba0; font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }
.lab-title h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; color: #101010; letter-spacing: -0.02em; }
.lab-body p { max-width: 46ch; margin-top: 10px; color: #56575c; font-size: 14.5px; line-height: 1.55; }
.lab-notes { display: grid; gap: 7px; margin: 20px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line-dark-soft); }
.lab-notes li { display: flex; gap: 12px; color: #3d3e42; font-size: 13.5px; line-height: 1.45; }
.lab-notes i { flex: 0 0 auto; color: #9a9ba0; font-style: normal; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .lab-grid { grid-template-columns: 1fr; }
  .lab-cell { border-right: 0; }
  .lab-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark-soft); }
  .lab-cell:last-child { border-bottom: 0; }
}

.fill-word { display: inline-block; will-change: opacity, transform, filter; }

.research-block .lab-banner .lab-head b { color: var(--ink); }
.research-block .lab-banner .lab-head span { color: #9a9ba0; }
.research-block .lab-banner .cta { color: var(--ink); border-color: rgba(255,255,255,.24); }
.research-block .lab-banner .beam-hover:hover { background: linear-gradient(#101012, #101012) padding-box,
  conic-gradient(from var(--beam), rgba(237,64,179,.6), rgba(110,247,204,.6), rgba(120,150,255,.6), rgba(176,84,222,.6), rgba(237,64,179,.6)) border-box; color: var(--ink); }

.button-hero { position: relative; background: #0c0c0c; color: var(--ink); transition: transform 240ms var(--ease); }
.button-hero span { display: inline-block; transition: transform 260ms var(--ease); }
.button-hero:hover { transform: none; }
.button-hero:hover span { transform: translateX(3px); }
.button-hero > * , .button-hero { font-size: 15px; }
.button-hero:hover { letter-spacing: -0.02em; }

/* --------------------------------------------------------- drill-down menu */
.nav-panel { display: flex; flex-direction: column; width: min(420px, calc(100vw - 20px)); padding: 0; background: rgba(16,16,19,.97); }
.drill-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.drill-top .brand-mark { width: 22px; color: var(--ink); }
.drill-body { position: relative; flex: 1; overflow-y: auto; max-height: min(62vh, 520px); }
.drill-pane { display: grid; }
.drill-pane[hidden] { display: none; }
.drill-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.drill-head b { font-size: 15px; font-weight: 500; }
.drill-back { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.drill-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--ink); font: inherit; font-size: 17px; letter-spacing: -0.02em; text-align: left; cursor: pointer; transition: background 180ms ease; }
.drill-row:hover { background: rgba(255,255,255,.05); }
.drill-row i { color: var(--dim); font-style: normal; font-size: 18px; }
.drill-overview { color: var(--muted); font-size: 15px; }
.drill-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.drill-foot .button { justify-content: center; }

/* burger only exists on small windows */
.nav-menu-btn { display: none; }
@media (max-width: 900px) {
  .nav-menu-btn { display: grid; }
}

.cta-panel-art .ph, .lab-visual .ph, .nav-mega-art .ph { position: absolute; inset: 0; }

.nav-links a[data-menu]::after { content: ""; width: 5px; height: 5px; margin-top: -2px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); transition: transform 300ms var(--ease); }
.nav-links a[data-menu]:hover::after, .nav-links a[data-menu].is-open::after { transform: rotate(-135deg); margin-top: 1px; }

/* hairline under the bar plus the bolder marker that slides between options */

.nav-underline { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0; pointer-events: none;
  transition: transform 420ms var(--ease), width 420ms var(--ease), opacity 260ms ease; }
.nav.nav-open .nav-underline { opacity: 1; }

/* mega: one column of full-width rows, art on the right */
.nav-mega-inner { display: block; padding: 0; }
.nav-mega-col { display: none; }
.nav-mega-col.is-active { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .6fr); gap: clamp(40px, 6vw, 96px);
  width: min(1100px, calc(100% - var(--page-gutter) * 2)); margin-inline: auto; justify-content: center;
  padding: clamp(26px, 3vw, 42px) 0 clamp(30px, 3.6vw, 48px); animation: mega-col-in 320ms var(--ease) both; }
.nav-mega-links { display: grid; grid-template-columns: 1fr; gap: 2px; }
.nav-mega-links a { display: grid; gap: 3px; padding: 9px 0; color: var(--nav-ink); transition: color 220ms ease, opacity 220ms ease; }
.nav-mega-links a b { font-size: clamp(21px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.nav-mega-links a span { color: var(--nav-dim); font-size: 13.5px; }
.nav-mega-links:hover a { color: #77787d; }
.nav-mega-links:hover a span { color: #56575c; }
.nav-mega-links a:hover { color: var(--nav-ink); }
.nav-mega-links a:hover span { color: var(--nav-dim); }
.nav-mega-art { display: flex; flex-direction: column; gap: 12px; }
.nav-mega-field { position: relative; flex: 1; min-height: 170px; overflow: hidden; background: transparent; }
.nav-mega-field .line-mark { width: var(--line-length, 13px); height: 1.6px; }

/* the small-screen menu is the same grey sheet, full width, easing down */
.nav-panel { position: fixed; top: var(--nav-height); left: 0; right: 0; width: auto; max-height: 0;
  overflow: hidden; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: rgba(17, 17, 20, .965); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0; visibility: hidden; transform: none;
  transition: max-height 460ms var(--ease), opacity 300ms var(--ease), visibility 0s linear 460ms; }
.nav.menu-open .nav-panel { max-height: min(76vh, 620px); opacity: 1; visibility: visible; transition-delay: 0s; }
.nav.menu-open .nav-pill { opacity: 1; transform: none; pointer-events: auto; }

.nav.menu-open .nav-pill { background: rgba(17, 17, 20, .965); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.drill-top { display: none; }
.drill-body { max-height: none; }
.drill-row { border-bottom: 0; font-size: 18px; }
.drill-pane { padding: 8px 0; }
.drill-foot { border-top: 0; padding: 10px var(--page-gutter) 22px; }
.drill-row, .drill-head { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* sign-up fill: slower and calmer */

.button-hero { animation: beam-spin 3.6s linear infinite;
  background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
    conic-gradient(from var(--beam), rgba(255,255,255,.1) 0deg 250deg, rgba(237,64,179,.75) 285deg, rgba(110,247,204,.9) 315deg, rgba(176,84,222,.95) 348deg, rgba(255,255,255,.1) 360deg) border-box; }
.button-hero:hover { animation-play-state: paused;
  background: linear-gradient(#111, #111) padding-box,
    linear-gradient(#f4f4f2, #f4f4f2) border-box; }


/* the chevron eases outward as well as turning */
.nav-links a[data-menu]::after { transition: transform 340ms var(--ease), margin 340ms var(--ease); }
.nav-links a[data-menu]:hover::after, .nav-links a[data-menu].is-open::after { transform: rotate(-135deg) translate(2px, 2px); }

.nav-signup { color: var(--nav-ink) !important; }
.nav:not(.on-dark) { --nav-bg-solid: var(--paper); }
.nav.on-dark { --nav-bg-solid: #0a0a0a; }
.nav.nav-open, .nav.menu-open { --nav-bg-solid: #111114; }

/* open state must win over the background-matching rules above */


/* the section you opened stays lit while you are inside the sheet */
.nav-links a[data-menu].is-open { color: var(--nav-ink) !important; }
.nav-mega-col { border: 0; }
.nav-mega-art { border: 0; }
/* sign-up stays legible on the open sheet */


/* ------------------------------------------------- auth pages, light shell
   Ornn register: white ground, black line pattern, content on a card whose
   edges fade into the field. */
.auth-light { background: var(--paper); }
.auth-light .auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.auth-light .auth-bg .line-mark { background: rgba(0, 0, 0, calc(var(--line-alpha) * .42)); }
.auth-light .auth-split { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.auth-light .auth-pane { width: min(760px, 100%); padding: clamp(26px, 4vw, 46px) clamp(26px, 5vw, 64px) clamp(40px, 6vw, 80px);
  background: radial-gradient(130% 120% at 50% 46%, rgba(243,242,237,.98) 42%, rgba(243,242,237,.82) 74%, rgba(243,242,237,0) 100%); }
.auth-light .auth-brand { color: #0a0a0a; }
.auth-light .auth-body { max-width: 520px; margin-inline: auto; }
.auth-light .auth-body h1 { color: #0a0a0a; }
.auth-light .auth-lede { color: #55565b; }
.auth-light .auth-row { border-color: rgba(0,0,0,.14); }
.auth-light .auth-row > span { color: #0a0a0a; }
.auth-light .auth-row input { color: #0a0a0a; }
.auth-light .auth-row input::placeholder { color: #8a8b90; }
.auth-light .auth-action { background: #0a0a0a; color: var(--paper); }
.auth-light .auth-foot { max-width: 520px; margin-inline: auto; width: 100%; border-color: rgba(0,0,0,.12); color: #55565b; }
.auth-light .auth-swap a, .auth-light .auth-foot-links a { color: #0a0a0a; }
.auth-light .auth-foot-links a:hover { color: #55565b; }

/* inline field errors instead of the browser tooltip */
.field-error { display: block; margin-top: 6px; color: #b3261e; font-size: 12.5px; letter-spacing: -0.005em; }
.auth-row.has-error { border-color: rgba(179,38,30,.55); }
.create-grid label.has-error input, .auth-row.has-error input { border-bottom-color: #b3261e; }
.form-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-left: 2px solid #b3261e; background: rgba(179,38,30,.06); color: #b3261e; font-size: 13.5px; }
.form-note::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; background: #b3261e; color: var(--paper); font-size: 11px; }

/* the padding-box layer must be opaque, otherwise the border layer shows
   through it and the button reads as a solid white slab */

.brand-mark svg { display: block; width: 100%; height: auto; }
.auth-brand .brand-mark, .drill-top .brand-mark, .create-top .brand-mark { color: currentColor; }
.nav-mega-filler { position: relative; flex: 1; min-height: 170px; }
.nav-mega-filler .ph { position: absolute; inset: 0; }
.nav-mega-filler .ph span { border-color: rgba(255,255,255,.22); color: #8a8b90; }

/* bar links always sit at full contrast with the bar; hover reads as a
   slight lift rather than a colour change, so nothing greys out */
.nav-links a { color: var(--nav-ink) !important; opacity: 1; }


/* thinner outline on the sign-up button */
.nav-signup { border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-ink) 42%, transparent);
  background-image: none; background-color: transparent; animation: none;
  transition: box-shadow 320ms var(--ease), background-color 320ms var(--ease); }

/* --------------------------------------------------------------- menu icon
   Four ticks in a 2x2 that rotate into a diamond and pull apart when open —
   echoes the stacked-panel mark. */
.nav-menu-btn { display: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; }
@media (max-width: 900px) { .nav-menu-btn { display: grid; } }
.menu-glyph { position: relative; display: block; width: 18px; height: 18px; }
.menu-glyph i { position: absolute; width: 7px; height: 1px; background: var(--nav-ink); transition: transform 420ms var(--ease), width 420ms var(--ease), opacity 300ms ease; }
.menu-glyph i:nth-child(1) { top: 4px; left: 0; }
.menu-glyph i:nth-child(2) { top: 4px; right: 0; }
.menu-glyph i:nth-child(3) { bottom: 4px; left: 0; }
.menu-glyph i:nth-child(4) { bottom: 4px; right: 0; }
.nav-menu-btn:hover .menu-glyph i { width: 8px; }

.nav.menu-open .menu-glyph i:nth-child(1) { transform: translate(3px, 3px); }
.nav.menu-open .menu-glyph i:nth-child(2) { transform: translate(-3px, 3px); }
.nav.menu-open .menu-glyph i:nth-child(3) { transform: translate(3px, -3px); }
.nav.menu-open .menu-glyph i:nth-child(4) { transform: translate(-3px, -3px); }

/* each row blurs up a beat after the one above it */
.nav-mega-links a { opacity: 0; filter: blur(6px); transform: translateY(8px); }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a { animation: mega-row-in 300ms var(--ease) both; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(1) { animation-delay: 20ms; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(2) { animation-delay: 55ms; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(3) { animation-delay: 90ms; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(4) { animation-delay: 125ms; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(5) { animation-delay: 160ms; }
.nav.nav-open .nav-mega-col.is-active .nav-mega-links a:nth-child(6) { animation-delay: 195ms; }
@keyframes mega-row-in { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }

@keyframes mega-row-out { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(6px); transform: translateY(8px); } }
/* rows leave bottom-first, mirroring the way they arrived */
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(1) { animation-delay: 50ms; }
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(2) { animation-delay: 40ms; }
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(3) { animation-delay: 30ms; }
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(4) { animation-delay: 20ms; }
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(5) { animation-delay: 10ms; }
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a:nth-child(6) { animation-delay: 0ms; }
/* the art fades with them, and the panel collapses back up afterwards */
.nav-mega-art { transition: opacity 130ms var(--ease); }
.nav.nav-closing .nav-mega-art { opacity: 0; }

/* the marker retracts to nothing rather than jumping away */
.nav.nav-closing .nav-underline { opacity: 0; transform: scaleX(.6); }

/* must come last: same specificity as the entry rule, so order decides */
.nav.nav-closing .nav-mega-col.is-active .nav-mega-links a { animation-name: mega-row-out; animation-duration: 90ms; }


/* ============================================================ nav surface
   One authoritative block. The sheet carries its own background; the bar
   simply matches it while open. Nothing here transitions colour, so the ink
   and the surface behind it always flip on the same frame — that mismatch
   was the black flash over the links. */
.nav-mega { background: rgba(17, 17, 20, .97); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
.nav.nav-open .nav-pill, .nav.nav-closing .nav-pill, .nav.menu-open .nav-pill {
  background: rgba(17, 17, 20, .97); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }

/* while retreating the sheet must not intercept the pointer */
.nav.nav-closing .nav-mega { pointer-events: none; }

/* -------------------------------------------------------- sign-up button
   Hairline that firms on hover. The label never changes colour. */
.nav-signup {
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-ink) 38%, transparent);
  background: transparent;
  color: var(--nav-ink) !important;
  animation: none;
  transition: box-shadow 260ms var(--ease);
}
.nav-signup:hover {
  box-shadow: inset 0 0 0 1px var(--nav-ink);
  background: transparent;
  color: var(--nav-ink) !important;
}


/* ================================================================== portal
   Teacher app: fixed sidebar, content column. Deliberately plain — this is a
   place to check a list and add a pupil, not a dashboard to admire. */
.portal { background: #0a0a0b; }
.portal-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; }

.portal-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; padding: 26px 18px; border-right: 1px solid var(--line-soft); background: #0d0d0f; }
.portal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.portal-brand .brand-mark { width: 22px; color: var(--ink); }
.portal-brand b { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.portal-nav { display: grid; gap: 2px; margin-top: 34px; }
.portal-nav button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--dim); font: inherit; font-size: 14.5px; letter-spacing: -0.008em; text-align: left; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.portal-nav button:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.portal-nav button.is-current { color: var(--ink); background: rgba(255,255,255,.07); }
.portal-nav i { color: var(--dim); font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.portal-side-foot { margin-top: auto; display: grid; gap: 10px; }
.portal-chip { margin: 0; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--muted); font-size: 12.5px; }
.portal-chip[data-state="approved"] { color: #8fe3c4; border-color: rgba(143,227,196,.3); }
.portal-chip[data-state="pending"] { color: #e3d08f; border-color: rgba(227,208,143,.3); }
.portal-signout { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: color 180ms ease, border-color 180ms ease; }
.portal-signout:hover { color: var(--ink); border-color: rgba(255,255,255,.28); }

.portal-main { padding: clamp(26px, 3.2vw, 46px) clamp(24px, 3.4vw, 56px) 80px; }
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.portal-head h1 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.03em; }
.portal-meta { margin-top: 8px; color: var(--dim); font-size: 14px; }
.portal-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 13px; transition: color 180ms ease, border-color 180ms ease; }
.portal-cta:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }


.portal-locked { margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(227,208,143,.24); border-radius: 3px; background: rgba(227,208,143,.05); }
.portal-locked h2 { font-size: 18px; font-weight: 500; }
.portal-locked p { max-width: 68ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.portal-panel { margin-top: clamp(26px, 3vw, 40px); }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-card { padding: 22px 24px 24px; border: 1px solid var(--line-soft); border-radius: 3px; background: #0d0d0f; }
.portal-card h2 { margin-bottom: 16px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.portal-card .cta { margin-top: 18px; }
.portal-body { max-width: 52ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.portal-note { margin-top: 14px; color: var(--dim); font-size: 12.5px; }
.portal-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.portal-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portal-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.portal-list li:last-child { border-bottom: 0; }
.portal-list span { color: var(--dim); font-size: 12.5px; }
.portal-list .portal-empty { color: var(--dim); font-size: 13.5px; }

.portal-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portal-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--dim); font-size: 14px; }
.portal-steps li:last-child { border-bottom: 0; }
.portal-steps i { width: 15px; height: 15px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }
.portal-steps li.is-done { color: var(--ink); }
.portal-steps li.is-done i { border-color: transparent; background: var(--ink); }

.portal-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.portal-section-head { margin-bottom: 18px; }
.portal-section-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.portal-section-head p { max-width: 60ch; margin-top: 7px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.portal-aside { display: grid; gap: 22px; }
.portal-aside .pupil-detail { padding: 20px 22px; border: 1px solid var(--line-soft); border-radius: 3px; background: #0d0d0f; }

.portal-form { display: grid; gap: 15px; padding: 20px 22px 22px; border: 1px solid var(--line-soft); border-radius: 3px; background: #0d0d0f; }
.portal-form label { display: grid; gap: 7px; color: var(--dim); font-size: 12.5px; }
.portal-form input, .portal-form select { width: 100%; height: 40px; padding: 0 2px; color: var(--ink); border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: transparent; font: inherit; font-size: 14px; }
.portal-form input:focus, .portal-form select:focus { border-bottom-color: var(--ink); outline: 0; }
.portal-form select option { background: #101013; }
.portal-form input[type="file"] { height: auto; padding: 9px 0; font-size: 12px; }
.portal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-form .form-check { display: flex; align-items: flex-start; gap: 10px; }
.portal-form .form-submit { justify-self: start; margin-top: 4px; }

@media (max-width: 1000px) {
  .portal-split { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .portal-nav { display: flex; flex-wrap: wrap; margin: 0; }
  .portal-side-foot { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; }
  .portal-head { flex-direction: column; }
}


/* ============================================== portal surfaces (override)
   Console layout: true black ground, one darker grey for every raised box,
   4px corners, hairlines, and a pill navbar centred in a top rail. This
   block is the last word on the portal — edit here rather than appending. */
.portal {
  background: #000;
  --p-panel: #17171b;   /* raised box — carries itself on fill, not outline */
  --p-inner: #24242a;   /* a box inside a box */
  --p-line: rgba(255, 255, 255, .07);  /* hairline, between rows only */
  --p-line-hi: rgba(255, 255, 255, .16);
  --p-r: 4px;           /* the only corner radius that is not a pill */
}
/* Capitals are set nowhere in the portal — the few inherited from the public
   site's label styles are unset here rather than left to be overridden. */
.portal .sec-label, .portal .account-facts dt { text-transform: none; letter-spacing: .01em; font-size: 12px; }

.portal-shell { display: flex; flex-direction: column; grid-template-columns: none; min-height: 100dvh; }
.portal-main { flex: 1; background: #000; padding: clamp(24px, 2.6vw, 38px) clamp(20px, 3vw, 46px) 64px; }

/* ---------------------------------------------------------------- top rail */
.portal-bar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 14px clamp(20px, 3vw, 46px);
  border-bottom: 1px solid var(--p-line);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: saturate(140%) blur(14px);
}
.portal-bar .portal-brand { justify-self: start; }
.portal-brand b { font-size: 16px; letter-spacing: -0.01em; text-transform: none; }

/* the pill: a track holding the four views */
.portal-nav {
  display: flex; gap: 2px; margin: 0; padding: 4px;
  border: 1px solid var(--p-line); border-radius: 999px; background: var(--p-panel);
}
.portal-nav button {
  width: auto; justify-content: center; padding: 7px 16px;
  border-radius: 999px; font-size: 13.5px; white-space: nowrap;
}
.portal-nav button:hover { background: rgba(255, 255, 255, .05); }
.portal-nav button.is-current { color: var(--ink); background: #26262c; }
.portal-nav i { margin-left: 6px; }
/* Pupils and Travel grants are disabled until the account is approved. They
   used to look identical to the live ones, which read as a broken navbar. */
.portal-nav button:disabled { color: #3d3e42; cursor: not-allowed; }
.portal-nav button:disabled:hover { background: transparent; }

.portal-bar-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.portal-chip, .portal-signout {
  margin: 0; padding: 7px 14px; border: 1px solid var(--p-line); border-radius: 999px;
  font-size: 12.5px; white-space: nowrap;
}
.portal-chip[data-state="approved"] { color: var(--ink); border-color: var(--p-line-hi); }
.portal-chip[data-state="pending"] { color: var(--muted); border-color: var(--p-line); }

/* ------------------------------------------------------------- raised boxes */
/* boxes carry themselves on fill — no outlines */
.portal-card,
.portal-form,
.portal-aside .pupil-detail,
.portal-locked,
.dtable { background: var(--p-panel); border: 0; border-radius: var(--p-r); }

.portal-head { padding-top: clamp(6px, 1vw, 14px); }
.portal-cta { border-radius: 999px; border-color: var(--p-line); }
.portal-cta:hover { border-color: var(--p-line-hi); }

/* ------------------------------------------------------- hero band
   One instrument per view, sitting directly on the black — no boxes.
   overview: timeline · pupils: consent tracker · grants: funding meter. */
.portal-hero { margin-top: clamp(26px, 3.2vw, 44px); min-height: 96px; }
.portal-hero[hidden] { display: none; }

/* overview — the journey to the conference */
.hero-journey { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; }
.journey { display: flex; flex: 1 1 560px; max-width: 860px; margin: 0; padding: 0; list-style: none; }
.journey li { position: relative; flex: 1; padding: 20px 20px 0 0; }
.journey li::before { content: ""; position: absolute; top: 3px; left: 14px; right: 8px; height: 1px; background: var(--p-line-hi); }
.journey li:last-child::before { right: 20px; }
.journey li i { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #3d3e42; }
.journey li.is-done i { background: #5f7dff; box-shadow: 0 0 10px rgba(95, 125, 255, .55); }
.journey li.is-now i { background: var(--ink); }
.journey b { display: block; font-size: 14px; font-weight: 400; color: var(--dim); letter-spacing: -0.01em; }
.journey li.is-done b, .journey li.is-now b { color: var(--ink); }
.journey span { display: block; margin-top: 3px; color: var(--dim); font-size: 12px; }
.journey-chips { display: flex; gap: 8px; padding-top: 12px; }
.hero-chip { padding: 8px 16px; border: 1px solid var(--p-line-hi); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
.hero-chip:hover { color: var(--ink); background: var(--p-inner); border-color: transparent; }
.hero-chip:disabled { color: #3d3e42; cursor: not-allowed; }
.hero-chip:disabled:hover { background: transparent; border-color: var(--p-line-hi); }

/* pupils — consent tracker, one cell per pupil */
.consent-lead, .funding-lead { display: flex; align-items: baseline; gap: 12px; }
.consent-lead strong, .funding-lead strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.02em; }
.consent-lead span, .funding-lead span { color: var(--dim); font-size: 13px; }
.consent-cells { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.consent-cell { width: 48px; height: 10px; border: 0; border-radius: 2px; background: var(--p-inner); cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.consent-cell.is-ok { background: #5f7dff; }
.consent-cell:hover { transform: translateY(-2px); background: var(--p-line-hi); }
.consent-cell.is-ok:hover { background: #7690ff; }
.consent-note { margin-top: 10px; color: var(--dim); font-size: 12.5px; }
.hero-facets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.facet { padding: 5px 12px; border: 1px solid var(--p-line); border-radius: 999px; color: var(--muted); font-size: 12px; }

/* grants — requested against estimated cost */
.funding-bar { height: 6px; max-width: 560px; margin-top: 16px; border-radius: 3px; background: var(--p-inner); overflow: hidden; }
.funding-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #39415f, #5f7dff); transition: width 420ms cubic-bezier(.4, 0, .2, 1); }

/* empty states earn a prompt, not a blank */
.hero-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.hero-empty p { max-width: 58ch; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* -------------------------------------------------- per-view line field
   The public site gives each section its own pattern (Students radial,
   Details grid). The portal borrows that vocabulary so the four views do
   not read as one page — faint, masked out downwards, never a texture you
   have to look past to read a number. */
.portal-main { position: relative; }
.portal-main > * { position: relative; }
.portal-main::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 340px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 92%);
  mask-image: linear-gradient(#000 30%, transparent 92%);
}
/* concentric circles were rejected — line fields only */
.portal-main[data-view="overview"]::before {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 30px);
}
.portal-main[data-view="pupils"]::before {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 34px);
}
.portal-main[data-view="grants"]::before {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 28px);
}
.portal-main[data-view="account"]::before {
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}
@media (prefers-reduced-motion: no-preference) {
  .portal-main::before { transition: opacity 240ms ease; }
}

.portal-grid { gap: 10px; }
.portal-locked { border-color: #3a3524; }

/* fewer hairlines: lists breathe on spacing instead of rules */
.portal-list li, .portal-steps li { border-bottom: 0; padding: 8px 0; }
.portal-card .account-facts { border-top: 0; }
.portal-card .account-facts div,
.portal-aside .account-facts div { border-bottom: 0; padding: 7px 0; }

/* --------------------------------------------------------------- data table */
.dtable { overflow: hidden; }
.dtable-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 22px 18px; }
.dtable-head h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.dtable-head p { max-width: 62ch; margin-top: 7px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.dtable-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.dtable-count { flex: 0 0 auto; padding: 6px 13px; border: 1px solid var(--p-line); border-radius: 999px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dbtn { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #000; font: inherit; font-size: 13px; cursor: pointer; transition: opacity 160ms ease; }
.dbtn:hover { opacity: .86; }
.dtable-scroll { overflow-x: auto; }
.dtable-grid { width: 100%; border-collapse: collapse; }
.dtable-grid th {
  padding: 11px 22px; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line);
  color: var(--dim); font-size: 12px; font-weight: 400; letter-spacing: .01em; text-transform: none;
  text-align: left; white-space: nowrap;
}
.dtable-grid td { padding: 16px 22px; border-bottom: 1px solid var(--p-line); color: var(--muted); font-size: 13.5px; vertical-align: middle; }
.dtable-grid tr:last-child td { border-bottom: 0; }
/* only the pupil rows open a detail panel, so only they invite a click */
.dtable-grid tbody tr { transition: background 160ms ease; }
[data-pupil-list] tr { cursor: pointer; }
[data-pupil-list] tr:hover, .dtable-grid tbody tr.is-open { background: rgba(255, 255, 255, .028); }
.dtable-grid tbody tr.is-open td:first-child { box-shadow: inset 2px 0 0 #5f7dff; }
.dtable-grid b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 400; letter-spacing: -0.01em; }
.dtable-grid small { display: block; margin-top: 3px; color: var(--dim); font-size: 12px; }
.dtable-grid .num { font-variant-numeric: tabular-nums; }
.dtable-empty td { padding: 26px 22px; color: var(--dim); font-size: 13px; text-align: left; }
.dtable-empty { cursor: default; }
.dtable-empty:hover { background: transparent !important; }

/* status pill — blue reads as settled, grey as waiting */
.dstatus { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid var(--p-line); border-radius: 999px; color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.dstatus::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
.dstatus[data-state="approved"], .dstatus[data-state="yes"] { color: var(--ink); border-color: var(--p-line-hi); }
.dstatus[data-state="approved"]::before, .dstatus[data-state="yes"]::before { background: #5f7dff; }
.dstatus[data-state="declined"] { color: #ff9d9d; border-color: rgba(255, 157, 157, .26); }
.dstatus[data-state="declined"]::before { background: #ff9d9d; }

/* the requested-against-cost bar */
.dbar { display: block; width: 132px; height: 3px; margin-top: 7px; background: var(--p-inner); }
.dbar i { display: block; height: 100%; background: var(--ink); transition: width 420ms cubic-bezier(.4, 0, .2, 1); }

/* the table wants the full width, so the detail and the form sit beneath it */
.portal-panel .portal-split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* detail and form sit side by side; a hidden detail lets the form keep half */
.portal-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 900px) { .portal-aside { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ forms */
.portal-form input, .portal-form select { border-bottom-color: var(--p-line-hi); }
.portal-form input:focus, .portal-form select:focus { border-bottom-color: var(--ink); }
/* `.portal-form input { width:100% }` was landing on the consent checkbox too
   and blowing it up to full width, pushing its label out of the panel. */
.portal-form .form-check { min-width: 0; }
.portal-form .form-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; }
.portal-form .form-check span { min-width: 0; }
.portal-form .form-submit { border-radius: 999px; }
/* The public site's CTA is uppercase and carries the conic beam. Neither
   belongs in the portal — the beam read as a stray magenta/cyan glow on a
   plain "Manage pupils" button. Quiet outline pill here instead. */
.portal-panel .cta, .portal-card .cta, .modal-card .cta {
  min-height: 38px; padding: 0 18px;
  border: 1px solid var(--p-line-hi); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 400; letter-spacing: .01em; text-transform: none;
  cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.portal-panel .cta:hover, .portal-card .cta:hover, .modal-card .cta:hover {
  color: var(--ink); border-color: transparent; background: var(--p-inner); box-shadow: none;
}

/* =================================================== new-application modal
   Opens over a blurred page. Fields here are filled boxes rather than the
   underlines used inline, because the panel is lighter and needs the edges. */
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; overflow: visible; }
.modal::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(14px) saturate(120%); }
.modal[open] { animation: modal-in 260ms cubic-bezier(.2, .7, .3, 1) both; }
.modal[open]::backdrop { animation: fade-in 220ms ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card { padding: 26px 26px 28px; border-radius: 14px; background: var(--p-panel); color: var(--ink); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.modal-head h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.modal-head p { margin-top: 6px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.modal-close { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 999px; background: var(--p-inner); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.modal-close:hover { color: var(--ink); background: #2f2f36; }

/* view stage: the facts, then remove on the left and edit on the right */
.modal-card .account-facts { margin: 0; border-top: 0; }
.modal-card .account-facts div { padding: 11px 0; border-bottom: 1px solid var(--p-line); }
.modal-card .account-facts div:last-child { border-bottom: 0; }
.modal-card .account-facts dd { max-width: 60%; text-align: right; }
.modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.modal-actions .cta { margin-top: 0; }

.modal-form { padding: 0; background: transparent; gap: 14px; }
.modal-form label { gap: 6px; color: var(--muted); font-size: 12.5px; }
.modal-form input, .modal-form select {
  height: 44px; padding: 0 13px;
  border: 1px solid var(--p-line-hi); border-radius: 8px; background: #101013;
  color: var(--ink); font-size: 14px;
  transition: border-color 160ms ease;
}
.modal-form input::placeholder { color: #55565b; }
.modal-form input:focus, .modal-form select:focus { border-color: #5f7dff; outline: 0; }
.modal-form input[type="file"] { height: auto; padding: 11px 13px; font-size: 12px; }
.modal-form .form-submit {
  justify-self: stretch; width: 100%; height: 46px; margin-top: 6px;
  border: 0; border-radius: 999px; background: var(--ink); color: #000;
  font-size: 14px; text-align: center;
}
.modal-form .form-submit:hover { transform: none; opacity: .88; }

/* ------------------------------------------------- submit confirmation
   A scanning ring that turns over in 3D, then resolves into a green tick.
   Purely a progress cue — the row only appears once the insert returns. */
.modal-done { display: grid; justify-items: center; padding: 38px 0 32px; }
/* `display: grid` would otherwise beat the hidden attribute and show both */
.modal-stage[hidden] { display: none; }
.scan { width: 76px; height: 76px; position: relative; perspective: 300px; }
.scan svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.scan-ring circle { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 168 122; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
.scan-ring { transform-style: preserve-3d; animation: scan-turn 1.15s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes scan-turn {
  0%   { transform: rotateY(0deg) rotateZ(0deg); }
  50%  { transform: rotateY(180deg) rotateZ(180deg); }
  100% { transform: rotateY(360deg) rotateZ(360deg); }
}
.scan-tick { opacity: 0; }
.scan-tick circle { stroke: #3ddc91; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
.scan-tick path { stroke: #3ddc91; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 72; stroke-dashoffset: 72; }

.scan.is-done .scan-ring { animation: none; opacity: 0; transition: opacity 200ms ease; }
.scan.is-done .scan-tick { opacity: 1; }
.scan.is-done .scan-tick circle { animation: draw-ring 460ms cubic-bezier(.4, 0, .2, 1) forwards; }
.scan.is-done .scan-tick path { animation: draw-tick 320ms cubic-bezier(.4, 0, .2, 1) 320ms forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }

.scan-label { margin-top: 20px; color: var(--muted); font-size: 14px; }
.scan.is-done ~ .scan-label { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
  .scan-ring { animation: none; }
  .scan.is-done .scan-tick circle, .scan.is-done .scan-tick path { animation: none; stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------ status strip */
.portal-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 16px clamp(20px, 3vw, 46px);
  border-top: 1px solid var(--p-line);
  color: var(--dim); font-size: 12px; letter-spacing: .01em; text-transform: none;
}

@media (max-width: 1080px) {
  .portal-bar { grid-template-columns: auto 1fr; row-gap: 12px; }
  .portal-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
  .portal-bar-end { grid-row: 1; grid-column: 2; }
}
@media (max-width: 900px) {
  .dtable-head { flex-direction: column; }
}


/* ==================================================== zapier/ramp panels
   Square-edged black cards: a large art cell carrying a strips canvas with
   a caption pinned bottom-left, and a narrower text cell beside it. On the
   paper zone the black pops; on black pages the cells sit one step up. */
.zr-section { width: var(--content); margin-inline: auto; padding: var(--section-top) 0 var(--section-bottom); }
.zr { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 6px; }
.zr-main { position: relative; min-height: clamp(340px, 42vw, 520px); background: #050506; overflow: hidden; }
.zr-main canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zr-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 3vw, 34px); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.zr-caption h2, .zr-caption h3 { max-width: 20ch; margin-top: 12px; font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); }
.zr-side { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 40px); background: #0a0a0b; color: var(--ink); }
.zr-tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; letter-spacing: .02em; }
.zr-caption .zr-tag { background: rgba(0, 0, 0, .55); }
.zr-side h3 { margin-top: 16px; font-size: clamp(20px, 1.9vw, 27px); font-weight: 500; letter-spacing: -0.025em; }
.zr-side > p { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.zr-steps { counter-reset: zr; display: grid; gap: 0; width: 100%; margin: 20px 0 0; padding: 0; list-style: none; }
.zr-steps li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13.5px; line-height: 1.5; counter-increment: zr; }
.zr-steps li::before { content: "0" counter(zr); position: absolute; left: 0; top: 13px; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.zr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.zr-note { margin-top: 16px; color: var(--dim); font-size: 12.5px; }
.zr-note a, .zr-side .zr-link { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.zr-link { margin-top: auto; padding-top: 20px; font-size: 13.5px; }
.zr-link:hover, .zr-note a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .zr { grid-template-columns: 1fr; }
  .zr-main { min-height: 300px; }
}

/* -------------------------------------------------------- day: in order
   The running order as a numbered grid. Dark-native; used on students
   and teachers. */
.day-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); margin: clamp(30px, 4vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.day-steps li { padding: 20px 0 26px; border-bottom: 1px solid var(--line-soft); }
.day-steps i { font-style: normal; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.day-steps b { display: block; margin-top: 8px; font-size: 16px; font-weight: 400; letter-spacing: -0.01em; }
.day-steps span { display: block; margin-top: 6px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.day-note { margin-top: 18px; color: var(--dim); font-size: 12.5px; }
@media (max-width: 760px) { .day-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- side ambience
   Students and teachers only. Deliberately kept OFF the hero and OFF the
   sticky index rail — it starts below the fold and inset past the sidebar
   column, so it only ever sits behind the reading column and the outer
   right margin. */
[data-page="students"] main, [data-page="teachers"] main { position: relative; }
[data-page="students"] main > *, [data-page="teachers"] main > * { position: relative; z-index: 1; }
[data-page="students"] main::before, [data-page="teachers"] main::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 74dvh; bottom: 0; left: max(230px, 20vw); right: 0;
  background:
    radial-gradient(58% 26% at 100% 10%, rgba(164, 98, 240, .26), transparent 68%),
    radial-gradient(50% 22% at 0% 36%, rgba(130, 102, 248, .19), transparent 68%),
    radial-gradient(60% 28% at 100% 64%, rgba(164, 98, 240, .20), transparent 68%),
    radial-gradient(48% 24% at 0% 90%, rgba(130, 102, 248, .16), transparent 68%);
}
@media (max-width: 900px) {
  [data-page="students"] main::before, [data-page="teachers"] main::before { top: 62dvh; left: 0; opacity: .6; }
}

/* ------------------------------------------------------------- runsheet
   The running order as a real table: period / number / session / detail on
   four aligned columns. `display: contents` on the row lets every cell join
   the parent grid, so the columns line up down the whole sheet. One markup
   block, reused verbatim on students, teachers and details. */
.runsheet {
  display: grid;
  grid-template-columns: 54px 40px minmax(160px, .8fr) minmax(0, 1.55fr);
  /* no column-gap: the cell borders must meet so each row rule is one
     continuous hairline rather than four segments */
  column-gap: 0;
  margin: clamp(26px, 3.2vw, 40px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.runsheet li { display: contents; }
.runsheet li > * { padding: 15px clamp(14px, 2.2vw, 32px) 15px 0; border-bottom: 1px solid var(--line-soft); }
.runsheet li > *:last-child { padding-right: 0; }
.runsheet .rs-p { color: var(--dim); font-size: 12px; font-style: normal; letter-spacing: .06em; }
.runsheet .rs-n { color: var(--dim); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.runsheet b { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; }
.runsheet span { max-width: 64ch; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.runsheet .rs-break b { color: var(--muted); }
.day-note { margin-top: 18px; color: var(--dim); font-size: 12.5px; }
@media (max-width: 760px) {
  .runsheet { display: block; border-top: 1px solid var(--line); }
  .runsheet li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .runsheet li > * { padding: 0; border-bottom: 0; }
  .runsheet .rs-p:not(:empty) { grid-column: 1 / -1; margin-bottom: 6px; }
  .runsheet b, .runsheet span { grid-column: 2; }
  .runsheet span { margin-top: 5px; }
}

/* --------------------------------------------------------- legal prose
   Privacy: one column, no index rail. */
.legal-prose { width: var(--content); margin-inline: auto; padding: clamp(34px, 4.5vw, 56px) 0 var(--section-bottom); border-top: 1px solid var(--line); }
.legal-prose p { max-width: 74ch; margin-top: 22px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.legal-prose p:first-child { margin-top: 0; }
.legal-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------- inline figures
   Styling for the four SVG figures on the home page. WITHOUT THIS BLOCK the
   SVGs fall back to browser defaults — solid black fills, 16px text — and
   the figures render as unreadable blobs. That regression shipped once,
   because a neighbouring block was rewritten by slicing between two comment
   anchors and this section sat inside the slice. If you cut styles.css by
   index, re-check the home page figures afterwards.

   Rules: no invented data, no arrows, square corners only. */
.lab-visual { background: #08080a; color: #a8b6e8; }
.dgm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dgm .ln, .dgm .ln-b { fill: none; vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: 1; }
.dgm .ln { opacity: .22; }
.dgm .ln-b { opacity: .5; }
.dgm .halo { fill: currentColor; opacity: .045; stroke: currentColor; stroke-opacity: .12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dgm .dot { fill: currentColor; opacity: .55; }
.dgm .dot-hot { fill: #5f7dff; }
.dgm .node { fill: #e8ecfb; opacity: .75; }
.dgm .node-hot { fill: #5f7dff; }
.dgm .fill-soft { fill: currentColor; opacity: .16; }
.dgm .seg { fill: currentColor; opacity: .2; }
.dgm .seg-soft { fill: currentColor; opacity: .08; }
.dgm .seg-hot { fill: #5f7dff; opacity: .55; }
.dgm .card { fill: #101118; stroke: currentColor; stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dgm .card-sh { fill: #000; opacity: .5; }
.dgm .lb { fill: currentColor; opacity: .85; font-size: 7.5px; letter-spacing: .006em; }
.dgm .lb.sm { font-size: 6.2px; }
.dgm .lb.dim { opacity: .45; }
.dgm .lb.b { opacity: 1; }
.dgm .lb.hot-t { fill: #7d93ff; opacity: 1; }
.cat-frame { color: #9fb0e8; }

/* --------------------------------------------------------------- photos
   Real imagery in the category stage and the nav dropdown thumbnails. The
   sources are ~1800px JPEGs, converted down from 2-3MB PNGs (17MB total to
   1.5MB). These frames crop rather than fit, so object-fit does the work
   and nothing is letterboxed. */
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-frame .frame-img { filter: saturate(.92) contrast(1.02); }
/* the caption sits over the lower third, so darken only that band */
.cat-copy { background: linear-gradient(transparent, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .9)); }
.nav-mega-filler { position: relative; overflow: hidden; }

/* -------------------------------------------------- category tab panel
   One stage, four categories. Tabs sit under the stage; the active tab
   carries a 2px beam-coloured line on its TOP edge only, sliding between
   tabs. Reuses the data-showcase tab engine. */
.cat-panel { margin-top: clamp(28px, 4vw, 40px); background: #0a0a0b; }
.cat-stage { position: relative; min-height: clamp(300px, 38vw, 460px); overflow: hidden; }
.cat-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms ease; }
.cat-frame.active { opacity: 1; }
.cat-frame .ph { position: absolute; inset: 0; }
.cat-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 3vw, 34px); background: linear-gradient(transparent, rgba(0, 0, 0, .84)); pointer-events: none; }
.cat-cap { display: none; }
.cat-cap.active { display: block; animation: cat-in 420ms ease both; }
@keyframes cat-in { from { opacity: 0; transform: translateY(8px); } }
.cat-cap h3 { font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.cat-cap p { max-width: 56ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.cat-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); background: #050506; }
.cat-tabs button { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 20px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--dim); font: inherit; font-size: 14px; letter-spacing: -0.008em; text-align: left; cursor: pointer; transition: color 220ms ease, background 220ms ease; }
.cat-tabs button:first-of-type { border-left: 0; }
.cat-tabs button i { font-style: normal; font-size: 11px; color: var(--dim); }
.cat-tabs button:hover { color: var(--muted); }
.cat-tabs button.active { color: var(--ink); background: #0a0a0b; }
.cat-beam {
  position: absolute; top: -1px; left: 0; z-index: 2; height: 2px; width: 0;
  background: linear-gradient(90deg, rgba(237, 64, 179, .9), rgba(110, 247, 204, .9), rgba(120, 150, 255, .9), rgba(176, 84, 222, .9), rgba(237, 64, 179, .9));
  background-size: 300% 100%;
  animation: cat-beam-slide 3.2s linear infinite;
  transition: left 420ms cubic-bezier(.4, 0, .2, 1), width 420ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes cat-beam-slide { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .cat-beam { animation: none; } }
@media (max-width: 860px) {
  .cat-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tabs button:nth-child(odd of button) { border-left: 0; }
}

/* -------------------------------------------------- statement timeline
   Under the date headline: a line that fills as the statement scrubs,
   lighting each milestone as it passes. */
.state-timeline { max-width: 760px; margin-top: clamp(38px, 5vw, 64px); }
.tl-track { position: relative; height: 1px; background: rgba(255, 255, 255, .14); }
.tl-fill { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0; background: linear-gradient(90deg, rgba(95, 125, 255, .9), #f4f4f2); box-shadow: 0 0 12px rgba(95, 125, 255, .35); }
.tl-nodes { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 0 0; list-style: none; }
.tl-nodes li { position: relative; color: #45464b; transition: color 320ms ease; }
.tl-nodes li::before { content: ""; position: absolute; left: 1px; top: -19px; width: 5px; height: 5px; border-radius: 50%; background: #45464b; transition: background 320ms ease, box-shadow 320ms ease; }
.tl-nodes li:last-child { text-align: right; }
.tl-nodes li:last-child::before { left: auto; right: 1px; }
.tl-nodes b { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.tl-nodes span { display: block; margin-top: 3px; font-size: 12px; opacity: .85; }
.tl-nodes li.lit { color: var(--ink); }
.tl-nodes li.lit::before { background: #5f7dff; box-shadow: 0 0 10px rgba(95, 125, 255, .6); }
@media (max-width: 640px) { .tl-nodes b { font-size: 12px; } .tl-nodes span { display: none; } }

/* ---------------------------------------------------- bursary statement */
.bursary-line { max-width: 21ch; font-size: clamp(28px, 3.6vw, 54px); font-weight: 500; line-height: 1.06; letter-spacing: -0.04em; }
.bursary-after { max-width: 58ch; margin-top: clamp(20px, 2.6vw, 30px); color: var(--muted); font-size: 16px; line-height: 1.6; }

/* -------------------------------------------------- nav: hero release
   On the home page the bar is not pinned through the hero — it sits in the
   page and scrolls away like content, then re-attaches as a fixed bar once
   the dot field owns the screen. Tone is frozen while released (see
   paintNavTone in script.js) so it never flickers between light and dark. */
.nav.nav-static .nav-pill { position: absolute; transform: none; }
.nav.nav-static .nav-pill { transition: none; }

/* ------------------------------------------------- nav: one breakpoint only
   Above 900px: inline links, no burger. Below: burger only. The two must
   never both be present — a mismatched pair of breakpoints (820 and 900) was
   showing them together across that band. */
@media (min-width: 901px) {
  .nav-menu-btn { display: none !important; }
  .nav-links { display: flex !important; }
}
@media (max-width: 900px) {
  .nav-menu-btn { display: grid !important; margin-left: auto; }
  .nav-links { display: none !important; }
  .nav-mega { display: none !important; }
}

/* drill rows must read on the dark sheet */
.drill-row { color: #f4f4f2 !important; }
.drill-row i { color: #9a9ba0; }
.drill-head b { color: #f4f4f2; }
.drill-overview { color: #b8b9bd !important; }
.drill-foot .button-quiet { color: #f4f4f2; border-color: rgba(255,255,255,.3); background: transparent; }

/* the old floating-card positioning was still centring the drill panel on
   x=0, pushing half of it off-screen left */
.nav-panel { left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; }
.nav.menu-open .nav-panel { transform: none !important; }

/* the sheet is fixed-position, so it needs no height animation at all: it
   simply sits at full height and slides up behind the (opaque, higher) bar */
.nav-mega { height: auto !important; overflow: visible; }


/* ======================================= open sheet follows the background
   Over the dark sections the sheet is near-black with white type; over the
   paper sections it is near-white with black type. Either way the hovered
   row stays at full ink and its siblings drop to the dim tone. */
.nav { --sheet: #111114; }
.nav.nav-open.on-dark, .nav.nav-closing.on-dark, .nav.menu-open.on-dark {
  --nav-ink: #f4f4f2; --nav-dim: #8f9095; --nav-bg: transparent; --sheet: #111114; }
.nav.nav-open:not(.on-dark), .nav.nav-closing:not(.on-dark), .nav.menu-open:not(.on-dark) {
  --nav-ink: #0a0a0a; --nav-dim: #6f7075; --nav-bg: transparent; --sheet: #f7f7f5; }

.nav-mega { background: var(--sheet) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.nav-open .nav-pill, .nav.nav-closing .nav-pill, .nav.menu-open .nav-pill {
  background: var(--sheet) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-panel { background: var(--sheet) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* rows: full ink normally, dim while a sibling is hovered */
.nav-mega-links a { color: var(--nav-ink); }
.nav-mega-links:hover a { color: var(--nav-dim); }
.nav-mega-links a:hover { color: var(--nav-ink); }
.nav-mega-head { color: var(--nav-dim); }
.nav-mega-caption { color: var(--nav-dim); }
.drill-row { color: var(--nav-ink) !important; }
.drill-row i, .drill-overview { color: var(--nav-dim) !important; }
.drill-row:hover { background: color-mix(in srgb, var(--nav-ink) 7%, transparent); }
.drill-head b { color: var(--nav-ink); }
.drill-back, .nav-close { color: var(--nav-ink); }
.drill-foot .button-quiet { color: var(--nav-ink); border-color: color-mix(in srgb, var(--nav-ink) 30%, transparent); background: transparent; }
.drill-foot .button-light { background: var(--nav-ink); color: var(--sheet); }

/* section filler picks up the sheet tone too */
.nav-mega-filler .ph { border-color: color-mix(in srgb, var(--nav-ink) 14%, transparent); }
.nav-mega-filler .ph span { border-color: color-mix(in srgb, var(--nav-ink) 22%, transparent); color: var(--nav-dim); }

/* sign-up keeps its hairline treatment in whichever tone applies */
.nav.nav-open .nav-signup, .nav.nav-closing .nav-signup, .nav.menu-open .nav-signup {
  background: transparent !important; background-image: none !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-ink) 38%, transparent) !important;
  color: var(--nav-ink) !important; }
.nav.nav-open .nav-signup:hover, .nav.nav-closing .nav-signup:hover, .nav.menu-open .nav-signup:hover {
  box-shadow: inset 0 0 0 1px var(--nav-ink) !important; color: var(--nav-ink) !important; }

/* ======================================================== auth veil
   Sign up / sign in / get started as one centred glass card over black,
   with a slow blue aurora and the ring line-field behind it. Blue stays
   the only colour; the glow is the accent doing ambience, not a rainbow.
   This block is the last word on the auth pages — edit here, not above. */
.auth-veil { background: #000; }
.auth-veil main { position: relative; z-index: 1; }

.auth-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-ambient::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: 46%; height: 52%;
  background:
    radial-gradient(56% 86% at 28% 32%, rgba(95, 125, 255, .34), transparent 64%),
    radial-gradient(48% 78% at 68% 58%, rgba(56, 76, 170, .28), transparent 62%),
    radial-gradient(38% 64% at 50% 44%, rgba(150, 168, 255, .16), transparent 58%);
  filter: blur(44px);
  transform: rotate(-7deg);
  animation: veil-drift 16s ease-in-out infinite alternate;
}
/* fine grid rising from the glow — circles were rejected */
.auth-ambient::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(transparent 6%, #000 52%, rgba(0,0,0,.35) 98%);
  mask-image: linear-gradient(transparent 6%, #000 52%, rgba(0,0,0,.35) 98%);
}
@keyframes veil-drift {
  from { transform: rotate(-7deg) translateX(-2.5%); }
  to   { transform: rotate(-7deg) translateX(2.5%); }
}
@media (prefers-reduced-motion: reduce) { .auth-ambient::before { animation: none; } }

.auth-center { display: grid; place-items: center; align-content: center; min-height: 100dvh; padding: 40px 20px; }

.auth-card {
  width: min(430px, 100%); padding: 26px 28px 24px;
  border-radius: 16px;
  background: rgba(18, 18, 23, .74);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.auth-card-wide { width: min(620px, 100%); }

.auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.auth-toggle { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.auth-toggle a { padding: 7px 16px; border-radius: 999px; color: var(--dim); font-size: 13.5px; letter-spacing: -0.008em; transition: color 160ms ease, background 160ms ease; }
.auth-toggle a:hover { color: var(--muted); }
.auth-toggle a.is-current { color: var(--ink); background: #26262c; }
.auth-step { margin: 0; color: var(--dim); font-size: 12.5px; }
.auth-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.auth-x:hover { color: var(--ink); background: rgba(255, 255, 255, .13); }

.auth-veil .auth-card h1 { font-size: 23px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.auth-veil .auth-lede { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* fields: filled boxes, same recipe as the portal modals */
.auth-veil .auth-fields { display: grid; gap: 12px; margin-top: 24px; }
.auth-veil .auth-row { display: block; padding: 0; border: 0; position: relative; }
.sr-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.auth-veil .auth-card input:not([type="checkbox"]) {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 10px;
  background: rgba(255, 255, 255, .045); color: var(--ink);
  font: inherit; font-size: 14px; letter-spacing: -0.008em;
  transition: border-color 160ms ease, background 160ms ease;
}
.auth-veil .auth-card input::placeholder { color: #63646a; }
.auth-veil .auth-card input:not([type="checkbox"]):focus { outline: 0; border-color: #5f7dff; background: rgba(255, 255, 255, .06); }
.auth-veil .has-error input:not([type="checkbox"]) { border-color: rgba(255, 157, 157, .55); }
.auth-veil .field-error { display: block; margin-top: 6px; color: #ff9d9d; font-size: 12px; font-style: normal; }
.auth-veil .form-note { color: #ff9d9d; font-size: 12.5px; }

.auth-veil .auth-action {
  height: 48px; margin-top: 8px; border: 0; border-radius: 999px;
  background: var(--ink); color: #000; font: inherit; font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer; transition: opacity 160ms ease;
}
.auth-veil .auth-action:hover { opacity: .88; }
.auth-veil .auth-action:disabled { opacity: .5; cursor: default; }
.auth-veil .auth-fields .form-status { margin: 0; font-size: 12.5px; }
.auth-forgot { justify-self: end; margin-top: -2px; color: var(--dim); font-size: 12.5px; transition: color 160ms ease; }
.auth-forgot:hover { color: var(--ink); }
.auth-agree a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.auth-agree a:hover { color: var(--ink); }
.auth-veil .form-status[data-kind="error"] { color: #ff9d9d; }

.auth-agree { margin-top: 18px; color: var(--dim); font-size: 12px; text-align: center; }

.auth-under { display: flex; align-items: center; gap: 22px; margin-top: 26px; color: var(--dim); font-size: 12.5px; }
.auth-under-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); transition: color 160ms ease; }
.auth-under-brand:hover { color: var(--ink); }
.auth-under-brand .brand-mark { width: 16px; }
.auth-under-brand b { font-weight: 400; letter-spacing: -0.01em; }
.auth-under-links { display: flex; gap: 16px; }
.auth-under-links a { color: var(--dim); transition: color 160ms ease; }
.auth-under-links a:hover { color: var(--ink); }

/* step 2: the full-details form on the same card */
.auth-veil .create-email { margin-top: 14px; color: var(--dim); font-size: 13px; }
.auth-veil .create-email b { color: var(--ink); font-weight: 400; }
.auth-veil .create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-veil .create-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; }
.auth-veil .create-wide { grid-column: 1 / -1; }
.auth-veil .create-grid .field-hint { margin-top: 4px; color: var(--dim); }
.auth-veil .create-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-veil .create-check input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ink); }
.auth-veil .create-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .auth-veil .create-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 20px 20px; }
}

/* ---------------------------------------------------------------------------
   Split-scene deck: instrument overlays.
   Four slabs fan off the photographic plate, each carrying a different
   measurement pattern so the stack reads as instrument plates rather than four
   identical cards. The two that travel toward the viewer are held translucent
   — their patterns then sit over the photograph instead of hiding it.
   Selectors use :nth-child because .deck-panel and .deck-decor are siblings of
   the same element type, which makes :nth-of-type count the wrong boxes.
   Appended block — do not slice into the layered rules above.
--------------------------------------------------------------------------- */
.deck-layer { overflow: hidden; }
.deck-layer::before,
.deck-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* Front plates read as glass over the image, not as lids on top of it. */
.stage-deck > .deck-layer:nth-child(4),
.stage-deck > .deck-layer:nth-child(5) {
  background: rgba(10,10,10,.20);
  border-color: rgba(255,255,255,.22);
}

/* Plate 1 (rearmost) — micrometer rule: minor ticks every 8px, major every 40. */
.stage-deck > .deck-layer:nth-child(1)::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.17) 0 1px, transparent 1px 40px) top    / 100% 10px repeat-x,
    repeating-linear-gradient(90deg, rgba(255,255,255,.17) 0 1px, transparent 1px 40px) bottom / 100% 10px repeat-x,
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 8px)  top    / 100% 4px  repeat-x,
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 8px)  bottom / 100% 4px  repeat-x;
}
.stage-deck > .deck-layer:nth-child(1)::after {
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) 0 50% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) 0 25% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) 0 75% / 100% 1px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Plate 2 — two-tier measurement grid with registration crosses. */
.stage-deck > .deck-layer:nth-child(2)::before {
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.12) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px);
  -webkit-mask: radial-gradient(120% 120% at 50% 50%, #000 42%, transparent 96%);
          mask: radial-gradient(120% 120% at 50% 50%, #000 42%, transparent 96%);
}
.stage-deck > .deck-layer:nth-child(2)::after {
  background:
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 14px 20px / 11px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 19px 15px / 1px 11px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) right 14px top    20px / 11px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) right 19px top    15px / 1px 11px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 14px bottom 20px / 11px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 19px bottom 15px / 1px 11px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) right 14px bottom 20px / 11px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) right 19px bottom 15px / 1px 11px no-repeat;
}

/* Plate 3 (front) — interference: two rulings a few degrees apart, over a fine
   scanline. Sits on the photograph, so the rulings stay faint. */
.stage-deck > .deck-layer:nth-child(4)::before {
  background:
    repeating-linear-gradient( 27deg, rgba(255,255,255,.10) 0 1px, transparent 1px 11px),
    repeating-linear-gradient( 33deg, rgba(255,255,255,.10) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-31deg, rgba(255,255,255,.055) 0 1px, transparent 1px 23px);
  -webkit-mask: radial-gradient(130% 110% at 12% 0%, #000 30%, transparent 92%);
          mask: radial-gradient(130% 110% at 12% 0%, #000 30%, transparent 92%);
}
.stage-deck > .deck-layer:nth-child(4)::after {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  opacity: .5;
}

/* Plate 4 (frontmost) — node lattice with a crosshair over a soft field. */
.stage-deck > .deck-layer:nth-child(5)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34) 0 1px, transparent 1.6px) 0 0 / 26px 26px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 1px, transparent 1.4px) 13px 13px / 26px 26px;
  -webkit-mask: radial-gradient(100% 100% at 78% 100%, #000 34%, transparent 88%);
          mask: radial-gradient(100% 100% at 78% 100%, #000 34%, transparent 88%);
}
.stage-deck > .deck-layer:nth-child(5)::after {
  background:
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 0 34% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.14)) 61% 0 / 1px 100% no-repeat,
    radial-gradient(70% 90% at 61% 34%, rgba(255,255,255,.06), transparent 70%);
  -webkit-mask: linear-gradient(200deg, #000 8%, transparent 78%);
          mask: linear-gradient(200deg, #000 8%, transparent 78%);
}

/* The photographic plate stays clean — corner marks, a hairline frame and a
   tick scale along the foot, so it sits in the same instrument family. */
.split-stage .deck-panel .frame-img { object-position: 50% 50%; }
.split-stage .deck-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 16px 22px / 13px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 22px 16px / 1px 13px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right 16px top 22px / 13px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right 22px top 16px / 1px 13px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 16px bottom 22px / 13px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 22px bottom 16px / 1px 13px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right 16px bottom 22px / 13px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right 22px bottom 16px / 1px 13px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 34px) bottom / 100% 7px repeat-x;
}