:root {
  --white: #fff;
  --ink: #0e1013;
  --muted: #5a5f66;
  --soft: #868d96;
  --line: #dcdfe3;
  --line-strong: #c4c9cf;
  --gold: #c08a22;
  --gold-deep: #8b5709;
  --gold-light: #e7c679;
  --gold-pale: #f4f5f7;
  --success: #24753a;
  --shadow: 0 18px 48px rgba(45, 38, 24, .09), 0 2px 8px rgba(25, 20, 12, .05);
  --glass-shadow: 0 24px 52px rgba(45, 38, 24, .11), inset 0 1px 1px rgba(255,255,255,.96), inset 0 -1px 2px rgba(176, 127, 41, .11);
  --radius: 0;
  --radius-sm: 0;
  --header-height: 82px;
  --page-gutter: clamp(22px, 4.4vw, 72px);
  --content: 1440px;
  /* --font-display / --font-sans / --font-body / --font-mono come from type.css (§14). */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#studentPathfinder { scroll-margin-top: var(--header-height); }
html.intro-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled) {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease, color .22s ease, background-color .22s ease, filter .22s ease;
}
button:not(:disabled).is-pressing { transform: translateY(1px) scale(.975)!important; }
a { color: inherit; text-decoration: none; }
.member-login-link { display:inline-flex; min-height:40px; align-items:center; gap:7px; padding:8px 4px; border-bottom:1px solid rgba(192,138,34,.52); color:var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); white-space:nowrap; }
.member-login-link svg { display:none; }
.member-login-link:hover { border-color:var(--gold-deep); }
.member-login-link.is-signed-in { border-bottom-color:transparent; }
.member-nav-avatar { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:1px solid rgba(192,138,34,.4); background:var(--gold-pale); background-size:cover; background-position:center; color:var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.member-nav-avatar.has-avatar { color:transparent; border-color:var(--line-strong); }
svg { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none!important; }

:focus-visible { outline: 3px solid rgba(192,138,34,.28); outline-offset: 3px; }

.intro-screen {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(34px, 6vw, 94px);
  border: 0;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.intro-screen[open] { display: grid; place-items: center; }
.intro-screen::backdrop { background: rgba(255,255,255,.98); }
.intro-screen.is-leaving {
  opacity: 0;
  filter: blur(15px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), filter .62s cubic-bezier(.22,.61,.36,1);
}
.intro-shell { width: min(1340px, 100%); }
.intro-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(72px, 11vh, 132px);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
}
.intro-brand .brand-mark { width: 46px; height: 46px; }
.intro-statement {
  display: grid;
  gap: 0;
  max-width: 1280px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.intro-line { display: block; min-height: 1em; }
.intro-line.is-accent { color: var(--gold); }
.intro-line.is-typing::after {
  content: "";
  display: inline-block;
  width: .035em;
  height: .72em;
  margin-left: .06em;
  background: currentColor;
  animation: intro-caret .78s steps(1,end) infinite;
  vertical-align: .02em;
}
@keyframes intro-caret { 50% { opacity: 0; } }
.intro-actions { display: flex; align-items: center; gap: 34px; margin-top: clamp(42px, 6vh, 72px); }
.intro-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-width: 260px;
  min-height: 68px;
  padding: 15px 28px;
  border: 1px solid rgba(192,138,34,.68);
  border-radius: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98), rgba(255,255,255,.72) 52%, rgba(249,238,208,.4)),
    #fff;
  box-shadow: 0 14px 36px rgba(85,58,13,.09), inset 0 1px 1px #fff, inset 0 -1px 2px rgba(192,138,34,.12);
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.intro-enter:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(85,58,13,.13), inset 0 1px 1px #fff; }
.intro-enter svg { width: 21px; height: 21px; color: var(--gold-deep); }
.intro-skip {
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(192,138,34,.66);
  background: transparent;
  color: #282825;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.intro-skip:hover { color: var(--gold-deep); }

.site-header, .workspace-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid rgba(222,222,217,.7);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
#how, #why { scroll-margin-top: calc(var(--header-height) + 20px); }

.brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-heading);
  cursor: pointer;
}
/* Brand mark is now a single flat SVG (assets/covenda-mark.svg), not CSS art. */
.brand-mark { display: block; width: 36px; height: 36px; }

.site-nav { display: flex; align-items: center; gap: 38px; }
.site-nav a { font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); }
.site-nav a:hover { color: var(--gold-deep); }
.header-actions { display: flex; justify-self: end; align-items: center; gap: 18px; }

.audience-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 2px rgba(12,12,10,.025);
}
.audience-switch.has-three { grid-template-columns: repeat(3, 1fr); }
.audience-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 108px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #4c4c48;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.audience-switch button svg { width: 17px; height: 17px; }
.audience-switch button[aria-pressed="true"] {
  border-color: rgba(192,138,34,.72);
  background: rgba(255,255,255,.92);
  color: var(--gold-deep);
  box-shadow: 0 4px 14px rgba(124,83,20,.1), inset 0 1px 0 #fff;
}
.workspace-link, .back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(255,255,255,.72);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.workspace-link:hover, .back-link:hover { border-color: var(--gold); color: var(--gold-deep); }

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(72px, 10vh, 116px) var(--page-gutter) 42px;
  overflow: hidden;
  text-align: center;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5vw;
  width: 110vw;
  height: 240px;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 33px, rgba(187,133,43,.14) 34px 35px, transparent 36px 49px);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.hero::before { top: 42%; transform: scaleY(.38); }
.hero::after { top: 44%; transform: scaleY(.28) translateY(40px); opacity: .34; }
.hero-copy { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; }
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--weight-regular);
}
.hero-copy p {
  max-width: 820px;
  margin: 22px auto 0;
  color: #343431;
  font-size: var(--text-subhead);
  letter-spacing: var(--ls-subhead);
}

.selector-orbit {
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: 1220px;
  margin: 50px auto 0;
}
.selector-orbit::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 22px;
  left: 9%;
  right: 9%;
  height: 112px;
  border-radius: 0;
  background: radial-gradient(ellipse at center, rgba(231,198,121,.19), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}
.selector-fx {
  position: absolute;
  z-index: 0;
  top: -142px;
  left: -8%;
  width: 116%;
  height: 390px;
  overflow: hidden;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.82) 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.82) 55%, transparent 78%);
}
.selector-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.selector-fx-glow {
  position: absolute;
  width: 280px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,198,121,.28), rgba(255,255,255,0) 70%);
  filter: blur(22px);
  animation: fx-drift 8s ease-in-out infinite alternate;
}
.selector-fx-glow-a { top: 84px; left: 8%; }
.selector-fx-glow-b { right: 10%; bottom: 18px; animation-delay: -4s; }
@keyframes fx-drift { to { transform: translate3d(38px, -16px, 0) scale(1.1); } }
.glass-panel {
  position: relative;
  border: 1px solid rgba(194,194,188,.78);
  background:
    linear-gradient(110deg, rgba(255,255,255,.94), rgba(255,255,255,.68) 52%, rgba(255,255,255,.9)),
    radial-gradient(circle at 50% 120%, rgba(231,198,121,.16), transparent 46%);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 0;
  pointer-events: none;
}
.work-selector {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 2px;
  align-items: stretch;
  padding: 12px;
  border-color: rgba(192,138,34,.72);
  border-radius: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98), rgba(255,255,255,.72) 50%, rgba(255,249,234,.75)),
    #fff;
  box-shadow: 0 20px 44px rgba(67,48,16,.1), inset 0 2px 2px #fff, inset 0 -2px 4px rgba(192,138,34,.1);
  scrollbar-width: none;
}
.work-selector::-webkit-scrollbar { display: none; }
.work-option {
  position: relative;
  min-width: 0;
  min-height: 132px;
  padding: 22px 18px;
  border: 1px solid transparent;
  border-right-color: var(--line);
  background: transparent;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  cursor: pointer;
}
.work-option:first-child { border-radius: 0; }
.work-option:last-child { border-right-color: transparent; }
.work-option svg { width: 30px; height: 30px; margin: 0 auto 12px; stroke-width: 1.35; }
.work-option:hover { color: var(--gold-deep); }
.work-option.is-selected {
  border-color: rgba(192,138,34,.58);
  border-radius: 0;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,1) 0 6%, transparent 19%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(251,244,223,.82) 72%, rgba(255,255,255,.94));
  color: var(--gold-deep);
  box-shadow: 0 8px 22px rgba(104,69,14,.12), inset 0 2px 3px #fff, inset 0 -2px 3px rgba(192,138,34,.12);
  transform: scale(1.015);
}
.work-option.just-selected svg { animation: option-arrive .42s cubic-bezier(.2,.9,.2,1); }
@keyframes option-arrive { 0% { transform: scale(.72) rotate(-8deg); opacity: .55; } 65% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1); opacity: 1; } }
.gold-button, .outline-button, .locked-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 0;
  /* Declared, not inherited. A <button> picks up the `font: inherit` reset; an <a> styled as a
     button does not, so "Member sign in" rendered in the display serif purely because of where
     it sat in the tree. A control's typography should not depend on its ancestors. */
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Flat, de-"AI-slop" primary CTA: solid gold, hairline border, no gradient / inset shadows /
   shimmer sweep / hover lift. */
.gold-button {
  position: relative;
  border: 1px solid var(--gold-deep);
  background: var(--gold);
  color: #fff;
}
.gold-button:hover { background: var(--gold-deep); }
.gold-button:active { transform: none; }
.gold-button svg, .outline-button svg { width: 17px; height: 17px; }
.selector-submit { z-index: 2; min-width: 250px; min-height: 58px; margin: 34px auto 0; border-radius: 0; }
.student-journey {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(680px, 92%);
  margin: 24px auto 0;
  padding: 7px;
  border: 1px solid rgba(194,194,188,.7);
  border-radius: 0;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 32px rgba(45,38,24,.06), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.student-journey button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.student-journey button:last-child { border-right: 0; }
.student-journey button:hover { color: var(--gold-deep); background: rgba(251,247,237,.62); border-radius: 0; }
.student-journey button > i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(192,138,34,.52);
  border-radius: 50%;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: var(--weight-bold);
}
.student-journey span, .student-journey b, .student-journey small { display: block; min-width: 0; }
.student-journey b { font-size: var(--text-caption); }
.student-journey small { margin-top: 2px; overflow: hidden; color: var(--soft); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
/* The secondary CTA. It sat at a .66 alpha border with a soft drop shadow, which read as a
   disabled control rather than a real alternative to the primary. Full-strength border, no
   shadow, and it fills on hover so the affordance is unmistakable. */
.outline-button {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-deep);
}
.outline-button:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.outline-button:hover svg { color: #fff; }
.compact { min-height: 42px; padding: 9px 15px; font-size: var(--text-body); }

.quiet-link, .prompt-links button {
  border: 0;
  background: transparent;
  color: #282825;
  font-size: var(--text-body);
  cursor: pointer;
}
.quiet-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 28px; }
.quiet-link span, .quiet-link:hover { color: var(--gold-deep); }
.quiet-link svg, .prompt-links svg { width: 15px; height: 15px; }
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin: 44px auto 0;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.scroll-cue svg { width: 23px; height: 23px; color: var(--gold); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

.hero-company { display: none; }
/* Company hero: two clear segments — delegate work, and find talent. */
/* Delegate card wider than the talent card, so the problem composer has room to breathe. */
/* Two separate cards, even halves, with real air between them — the right-hand one sits
   flush to the right edge rather than butting against its neighbour. */
.company-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 72px); margin: clamp(30px, 4vw, 46px) auto 0; width: min(100%, var(--content)); text-align: left; align-items: stretch; }
@media (max-width: 800px) { .company-jobs { grid-template-columns: 1fr; gap: 20px; } }
.company-job { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 0; background: #fff; }
.company-job-talent { border-color: var(--gold-light); background: linear-gradient(180deg, var(--gold-pale), #fff 62%); }
.company-job-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.company-job-eyebrow svg { width: 15px; height: 15px; }
.company-job h2 { margin: 12px 0 0; font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.company-job > p { margin: 10px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.company-job .selector-orbit { margin: 18px 0 0; }
.company-job .selector-orbit::after { display: none; }
/* The sift — the batch filter as a picture. A crowd of pale dots and a few gold ones; hovering
   sweeps the pale away until only the gold are left. Sized to sit under the headline without
   competing with it: the list of criteria below is still the thing being read. */
.sift { margin: 18px 0 4px; padding: 0; }
.sift canvas {
  display: block; width: 100%; height: clamp(150px, 15vw, 230px);
  background: var(--gold-pale);
  border: 1px solid var(--line);
  cursor: crosshair;
}
@media (max-width: 720px) { .sift canvas { height: 128px; } }

.company-job-points { list-style: none; margin: 20px 0 auto; padding: 0; display: grid; gap: 12px; }
.company-job-points li { display: flex; align-items: center; gap: 10px; font-size: var(--text-body); color: var(--ink); }
.company-job-points svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
.company-job-talent .cta-actions { margin-top: 24px; }
.company-composer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 18px;
  padding: 24px 24px 24px 30px;
  border-radius: 0;
}
.composer-icon { width: 32px; height: 32px; color: #6c6c67; align-self: center; }
.company-composer textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 148px;
  max-height: 300px;
  resize: vertical;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.76);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  box-shadow: inset 0 1px 2px rgba(30,25,16,.04);
  caret-color: var(--gold-deep);
  pointer-events: auto;
  touch-action: manipulation;
}
.company-composer textarea::placeholder { color: #898984; }
.company-composer .gold-button { align-self: center; min-width: 184px; min-height: 92px; font-size: var(--text-body); }
.composer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 14px 6px 0;
}
.composer-fit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption);
  color: #6c6c67;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.composer-fit::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.composer-fit[data-fit="good"] { color: var(--gold-deep); border-color: var(--gold-light); background: var(--gold-pale); }
.composer-fit[data-fit="redesign"] { color: #9a6a12; border-color: #e6d6a6; background: #fdf6e6; }
.composer-fit[data-fit="blocked"] { color: #b4322a; border-color: #f0cdc9; background: #fdf1ef; }
.composer-hint {
  flex: 1 1 240px;
  min-width: 220px;
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: #6c6c67;
}

/* Optional one-minute student video intro */
.field-help { display: block; margin-top: 6px; font-size: var(--text-body); line-height: var(--lh-body); color: #6c6c67; }
.video-intro-card { grid-column: 1 / -1; }
.video-intro-card[hidden], .video-transcript-field[hidden] { display: none; }
.video-intro-warn {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 0;
  background: #fdf6e6;
  border: 1px solid #e6d6a6;
  color: #9a6a12;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.video-intro-player { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.video-poster, .video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  display: block;
}
.video-poster {
  position: relative;
  background:
    radial-gradient(120% 120% at 28% 12%, rgba(231,198,121,.6), transparent 60%),
    radial-gradient(120% 120% at 82% 92%, rgba(192,138,34,.34), transparent 55%),
    var(--gold-pale);
  border: 1px solid var(--gold-light);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
}
.video-play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(169,130,47,.28);
  transition: transform .2s ease, background .2s ease;
}
.video-poster:hover .video-play { transform: scale(1.06); background: var(--gold-deep); }
.video-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.video-play:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.video-duration, .video-host {
  position: absolute;
  padding: 4px 10px;
  border-radius: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption);
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
.video-duration { left: 12px; bottom: 12px; }
.video-host { right: 12px; top: 12px; color: var(--gold-deep); }
.video-frame { background: #000; }
.video-actions { display: flex; gap: 12px; align-items: center; }
.video-remove { color: #b4322a; }
.video-remove:hover { color: #8f231d; }
.video-privacy { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-caption); color: #6c6c67; }
.video-privacy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
/* In-browser recorder */
.video-record { margin-top: 8px; }
[data-video-record-toggle] { display: inline-flex; align-items: center; gap: 5px; }
[data-video-record-toggle] svg { width: 15px; height: 15px; }
.video-recorder { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.video-recorder[hidden] { display: none; }
.video-rec-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: #0e1013;
  object-fit: cover;
  transform: scaleX(-1); /* mirror the live selfie view */
}
.video-rec-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.video-rec-count { font-family: var(--font-mono); font-size: var(--text-body); color: #6c6c67; }
.video-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #c4c9cf; }
.video-rec-dot.is-live { background: #d23b30; animation: video-rec-pulse 1s ease-in-out infinite; }
.video-rec-start.is-recording { background: #b4322a; }
.video-rec-status { margin: 0; font-size: var(--text-body); color: #6c6c67; }
.video-rec-error { margin: 0; font-size: var(--text-body); color: #b4322a; font-weight: var(--weight-medium); }
@keyframes video-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .video-rec-dot.is-live { animation: none; }
}

/* Value metric band (student home, Litmus "metric + one line" pattern) */
.value-band { padding: clamp(44px, 6vw, 84px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
.value-band-inner { width: min(100%, var(--content)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.value-col { padding: 6px clamp(20px, 3vw, 46px); }
.value-col + .value-col { border-left: 1px solid var(--line); }
/* These are headings at heading size, so they take the display face like every other heading
   on the site. Set in the sans at bold they read as a different typeface entirely, because at
   this size that is exactly what they were.

   They also had no line-height, so a wrapped two-word phrase inherited the body value and the
   two lines sat far enough apart to read as separate headings. */
.value-metric {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  text-wrap: balance;
}
.value-line { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
@media (max-width: 720px) {
  .value-band-inner { grid-template-columns: 1fr; gap: 22px; }
  .value-col { padding: 0; }
  .value-col + .value-col { border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
}

/* Student batches */
.batches-section { padding: clamp(60px, 8vw, 116px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
.batches-section > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.batch-grid { display: block; margin-top: clamp(32px, 4vw, 52px); }
.batch-card { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 26px; border-radius: 0; }
.batch-function { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.batch-title { margin: 0; font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.batch-desc { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); flex: 1; }
.batch-status { padding: 4px 11px; border-radius: 0; border: 1px solid var(--gold-light); background: var(--gold-pale); color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.batch-join { margin-top: 6px; }

/* Full-screen video recorder overlay */
.rec-overlay { padding: 0; border: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: transparent; overflow: hidden; }
.rec-overlay::backdrop { background: rgba(17,17,15,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rec-overlay[open] { display: grid; place-items: center; padding: 20px; }
.rec-panel { width: min(760px, 100%); max-height: 92dvh; overflow: auto; background: #fff; border-radius: 0; box-shadow: 0 24px 70px rgba(17,17,15,.35); display: flex; flex-direction: column; }
.rec-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 0; }
.rec-kicker { margin: 0 0 4px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.rec-title { margin: 0; font-size: var(--text-subhead); }
.rec-close { border: 0; background: transparent; font-size: var(--text-heading); line-height: var(--lh-heading); color: #6c6c67; cursor: pointer; padding: 2px 6px; border-radius: 0; }
.rec-close:hover { color: var(--ink); }
.rec-body { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.rec-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden; background: #0e1013; }
.rec-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-video.is-mirror { transform: scaleX(-1); }
.rec-timer { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 0; background: rgba(17,17,15,.62); color: #fff; font-family: var(--font-mono); font-size: var(--text-body); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #c4c9cf; }
.rec-dot.is-live { background: #ff3b30; animation: rec-pulse 1s ease-in-out infinite; }
.rec-max { opacity: .7; font-size: var(--text-caption); }
.rec-count { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: var(--weight-bold); font-size: var(--text-display); text-shadow: 0 6px 34px rgba(0,0,0,.45); pointer-events: none; }
.rec-count.pop { animation: rec-pop .95s ease-out; }
.rec-controls { display: flex; align-items: center; gap: 14px; }
.rec-record.is-recording { background: #b4322a; }
.rec-status { margin: 0; font-size: var(--text-body); color: #6c6c67; }
.rec-error { margin: 0; font-size: var(--text-body); color: #b4322a; font-weight: var(--weight-medium); }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes rec-pop { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rec-dot.is-live { animation: none; } .rec-count.pop { animation: none; } }

/* Quick join */
.quick-join-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
/* Quick-join interest chips: tap-friendly domain picker (mirrors the full profile). */
.quick-chip { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: #fff; color: #31312e; font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.quick-chip:hover { border-color: var(--gold); }
.quick-chip.is-on { border-color: var(--gold); background: var(--gold); color: #1c1300; }
.quick-join-done { padding: 4px 0; }
.quick-done-head { display: flex; align-items: flex-start; gap: 14px; }
.quick-done-check { width: 34px; height: 34px; color: var(--gold-deep); flex-shrink: 0; }
.quick-done-check circle, .quick-done-check path { fill: none; stroke: currentColor; }
.quick-done-head h3 { margin: 0 0 3px; font-size: var(--text-subhead); }
.quick-done-head p { margin: 0; color: var(--muted); font-size: var(--text-body); }
.quick-done-prompt { margin: 18px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.quick-profile-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; padding: 12px 16px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); font-size: var(--text-body); color: var(--ink); }
.quick-profile-banner .gold-button.compact { margin-left: auto; }
.selector-secondary { margin-top: 12px; }
.selector-explainer { margin: 10px 0 0; color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body); max-width: 46ch; }

/* Video intro: recording is the default path, pasting a link is the fallback. */
.video-intro-label { margin: 0 0 4px; color: #31312e; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.video-intro-label span { color: var(--soft); font-weight: var(--weight-regular); }
.video-record .field-help { display: block; margin: 0 0 12px; color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body); }
.video-record-primary { display: inline-flex; align-items: center; gap: 8px; }
.video-link-fallback { margin-top: 14px; }
.video-link-fallback summary { cursor: pointer; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); list-style: none; }
.video-link-fallback summary::-webkit-details-marker { display: none; }
.video-link-fallback summary::before { content: "+ "; }
.video-link-fallback[open] summary::before { content: "– "; }
.video-link-fallback input { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .video-play, .video-poster:hover .video-play { transition: none; transform: none; }
}
@media (max-width: 640px) {
  .video-play { width: 54px; height: 54px; }
}

/* University school-logo strip (light social proof, university audience only) */
.school-strip { margin: 26px auto 30px; max-width: 760px; }
.school-strip-label {
  margin: 0 0 14px;
  text-align: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: #8a8a84;
}
.school-strip-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.school-strip-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 46px;
  margin: 0;
  padding: 4px 8px;
  list-style: none;
}
.school-strip-track[data-mode="marquee"] {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: school-scroll 38s linear infinite;
}
.school-strip-viewport:hover .school-strip-track[data-mode="marquee"],
.school-strip-track[data-mode="marquee"]:focus-within { animation-play-state: paused; }
.school-logo {
  flex: 0 0 auto;
  color: #3a3a36;
  opacity: .46;
  transition: opacity .25s ease;
}
.school-logo:hover { opacity: .9; }
.school-logo svg { display: block; height: 26px; width: auto; }
.school-logo a { display: block; }
.school-logo a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 0; }
@keyframes school-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .school-strip-track[data-mode="marquee"] { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 640px) {
  .school-strip-track { gap: 12px 30px; }
  .school-logo svg { height: 22px; }
}
.prompt-links { display: flex; justify-content: center; gap: 50px; margin-top: 34px; }
.prompt-links button { display: inline-flex; align-items: center; gap: 5px; }
.prompt-links button:hover { color: var(--gold-deep); }

body[data-audience="company"] .hero-student { display: none; }
body[data-audience="company"] .student-nav-link,
body[data-audience="university"] .student-nav-link { display: none; }
body[data-audience="company"] .hero-company { display: block; }
.audience-content[data-for-audience="company"] { display: none; }
body[data-audience="company"] .audience-content[data-for-audience="student"] { display: none; }
body[data-audience="company"] .audience-content[data-for-audience="company"] { display: block; }

.hero-university { display: none; }
.audience-content[data-for-audience="university"] { display: none; }
/* Landing-page-only sections. The pillars and the About block are statements about the
   company as a whole; repeating them under Students, Companies and Referrals made every tab
   end the same way, which is the same complaint that got About pulled off the other tabs. */
.home-only { display: none; }
body[data-audience="home"] .home-only { display: block; }

body[data-audience="university"] .hero-student,
body[data-audience="university"] .hero-company { display: none; }
body[data-audience="university"] .hero-university { display: block; }
body[data-audience="university"] .audience-content[data-for-audience="student"],
body[data-audience="university"] .audience-content[data-for-audience="company"] { display: none; }
body[data-audience="university"] .audience-content[data-for-audience="university"] { display: block; }

/* Information architecture: company & university are lean, single-purpose surfaces
   — only their hero + primary action. The full home page (core story, how-it-works,
   proof, final CTA) is student-only, so the same content is not re-shown across all
   three audiences. */
body[data-audience="company"] #how,
body[data-audience="company"] #why,
body[data-audience="company"] .final-cta,
body[data-audience="company"] .feature-band,
body[data-audience="company"] .value-band,
body[data-audience="company"] .batches-section,
body[data-audience="company"] .about-section,
body[data-audience="student"] .about-section,
body[data-audience="university"] .about-section,
body[data-audience="university"] #how,
body[data-audience="university"] #why,
body[data-audience="university"] .final-cta,
body[data-audience="university"] .feature-band,
body[data-audience="university"] .value-band,
body[data-audience="university"] .batches-section { display: none; }
/* Hide hero sub-links whose scroll targets live in the now-hidden sections. */
body[data-audience="company"] .hero-company .scroll-cue,
body[data-audience="company"] .hero-company [data-action="project-fit"],
body[data-audience="university"] .hero-university .scroll-cue { display: none; }

.how-section, .why-section {
  padding: clamp(78px, 10vw, 150px) var(--page-gutter);
  border-top: 1px solid var(--line);
}
/* Tighter lead-in above the core story; even rhythm into the first module. */
.how-section { background: #fff; padding-top: clamp(60px, 7vw, 104px); }
.how-section > div, .why-section > div { width: min(100%, var(--content)); margin: 0 auto; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 70px;
  align-items: end;
  margin-bottom: 64px;
}
.section-heading h2, .why-copy h2, .final-cta h2, .about-lede h2, .recruiter-lede h2, .workspace-title h1, .simple-workspace-view h1, .exchange-head h2 {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--weight-bold);
}
/* The section-header face. Kept as a second rule because .dialog-copy and .review-intro take
   the family without the display size above, so the two lists are genuinely different.
   .about-lede and .recruiter-lede were added to the size rule and missed here, which left both
   headings in the body sans at weight 720 while every other section header sat in the display
   face at 400. Different family AND different weight, from one omitted selector. */
.section-heading h2, .why-copy h2, .final-cta h2, .about-lede h2, .recruiter-lede h2, .dialog-copy h2, .review-intro h3, .exchange-head h2, .cohort-hero h1, .cohort-empty h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}
.section-heading p, .why-copy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
}
.story-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.proof-rail, .company-rail { list-style: none; padding: 0; margin: 0; }
.proof-rail { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-rail li { position: relative; padding: 0 28px 0 0; }
.proof-rail li:not(:last-child)::after, .company-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 46px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(192,138,34,.28));
}
.proof-rail li > span, .company-rail li > span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  color: var(--gold-deep);
  font-size: var(--text-body);
}
.proof-rail li > svg, .company-rail li > svg { width: 31px; height: 31px; margin: 24px 0 17px; color: var(--gold-deep); stroke-width: 1.35; }
/* The step name is the thing being scanned, so it carries the gold and the display face —
   the same treatment the section headers use, one role down. It was set in the body face at
   the body size, which made it indistinguishable from the sentence underneath it. */
.proof-rail h3, .company-rail h3 {
  margin: 0 0 9px;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: var(--weight-regular);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
}
/* Held to a short measure so three columns of unequal copy still rag evenly rather than one
   running two lines longer than its neighbours. */
.proof-rail p, .company-rail p { margin: 0; max-width: 30ch; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
/* The number, the icon and the rule were three separate marks at three different heights. The
   icon now sits in the same optical column as the number, and hovering a step lifts its own
   number rather than nothing responding at all. */
.proof-rail li > svg, .company-rail li > svg { margin: 22px 0 15px; transition: color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.proof-rail li > span { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.proof-rail li:hover > span { background: var(--gold); color: #fff; }
.proof-rail li:hover > svg { color: var(--gold); translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) {
  .proof-rail li > svg, .proof-rail li > span { transition: none; }
  .proof-rail li:hover > svg { translate: none; }
}

.work-record, .packet, .path-panel, .evidence-panel, .review-card {
  border-radius: 0;
}
.work-record { padding: 28px; }
.work-record header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.work-record small, .evidence-panel > small, .review-card > small { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.work-record h3 { margin: 5px 0 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.record-state { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.record-state svg { width: 16px; height: 16px; }
.record-preview { display: grid; grid-template-columns: 110px 1fr; gap: 24px; margin: 26px 0; padding: 22px; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.62); }
.document-lines { padding: 19px 13px; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.document-lines i { display: block; height: 3px; margin-bottom: 8px; border-radius: 0; background: #dcdfe3; }
.document-lines i:nth-child(2) { width: 72%; }
.document-lines i:nth-child(4) { width: 84%; }
.record-preview > div:last-child { display: grid; gap: 4px; }
.record-preview span, .work-record footer > span { color: var(--soft); font-size: var(--text-caption); }
.record-preview strong { margin-bottom: 8px; font-size: var(--text-body); }
.capability-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.capability-list b, .evidence-capabilities b {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.64);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.company-story-layout { grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr); }
.company-rail { display: grid; grid-template-columns: repeat(5, 1fr); }
.company-rail li { position: relative; padding-right: 18px; }
.company-rail li:not(:last-child)::after { left: 44px; right: 8px; }
.risk-note {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding: 16px 22px;
  border: 1px solid rgba(192,138,34,.54);
  border-radius: 0;
}
.risk-note svg { width: 30px; height: 30px; color: var(--gold-deep); }
.risk-note strong, .risk-note span { display: block; }
.risk-note strong { font-size: var(--text-body); }
.risk-note span { margin-top: 2px; color: var(--muted); font-size: var(--text-caption); }
.packet { overflow: hidden; padding: 12px 26px 20px; }
.packet header { display: flex; align-items: center; gap: 10px; padding: 14px 0 17px; border-bottom: 1px solid var(--line); }
.packet header svg { color: var(--gold-deep); }
.packet header strong { font-size: var(--text-body); }
.packet dl { margin: 0; }
.packet dl div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.packet dl div:last-child { border-bottom: 0; }
.packet dt { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.packet dd { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }

.why-section { background: #fff; }
.why-section > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr); gap: clamp(60px, 9vw, 130px); align-items: center; }
.why-copy p { margin: 24px 0 30px; }
.work-types { border-top: 1px solid var(--line-strong); }
.work-types button {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.work-types button:hover { padding-left: 10px; color: var(--gold-deep); }
.work-types svg { width: 28px; height: 28px; color: var(--gold-deep); stroke-width: 1.35; }
.work-types strong, .work-types small { display: block; }
.work-types strong { font-size: var(--text-body); }
.work-types small { margin-top: 4px; color: var(--muted); font-size: var(--text-caption); }
.fit-table { border-top: 1px solid var(--line-strong); }
.fit-table > div { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.fit-table span { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.fit-table strong { font-size: var(--text-body); font-weight: var(--weight-medium); line-height: var(--lh-body); }

.final-cta {
  padding: clamp(88px, 12vw, 180px) var(--page-gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}
.final-cta > div { max-width: 900px; margin: 0 auto; }
.final-cta p { max-width: 670px; margin: 24px auto 32px; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.company-secondary { margin-top: 18px; }
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px var(--page-gutter);
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption);
}
.site-footer button { border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-size: var(--text-caption); cursor: pointer; }
.site-footer button:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }

/* Workspace */
.workspace-header { position: sticky; top: 0; }
.workspace-header > strong { font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.back-link { border-color: transparent; color: var(--gold-deep); }
.workspace-layout { min-height: calc(100svh - var(--header-height)); display: grid; grid-template-columns: 220px 1fr; }
.workspace-sidebar {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100svh - var(--header-height));
  padding: 30px 18px 24px;
  border-right: 1px solid var(--line);
  background: #fff;
}
.workspace-sidebar nav { display: grid; gap: 10px; }
.workspace-sidebar nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #42423e;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
}
.workspace-sidebar nav button svg { width: 21px; height: 21px; }
.workspace-sidebar nav button:hover, .workspace-sidebar nav button.is-active { color: var(--gold-deep); }
.workspace-sidebar nav button.is-active { border-color: rgba(192,138,34,.5); background: linear-gradient(110deg, #fff, var(--gold-pale)); }
.pilot-state { display: flex; align-items: flex-start; gap: 12px; padding: 22px 14px 0; border-top: 1px solid var(--line); font-size: var(--text-body); }
.pilot-state i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(192,138,34,.1); }
.pilot-state[data-status="ready"] i { background: var(--success); box-shadow: 0 0 0 4px rgba(36,117,58,.1); }
.pilot-state[data-status="unavailable"] i, .pilot-state[data-status="not-configured"] i { background: #b66a16; box-shadow: 0 0 0 4px rgba(182,106,22,.1); }
.pilot-state small { display: block; margin-top: 4px; color: var(--soft); }
.workspace-main { min-width: 0; padding: clamp(42px, 5vw, 74px); }
.workspace-view { display: none; }
.workspace-view.is-active { display: block; }
.workspace-title h1 { font-size: var(--text-display); }
.workspace-title p { margin: 12px 0 0; color: var(--muted); font-size: var(--text-subhead); }
.workspace-draft-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 15px 18px;
  border: 1px solid rgba(192,138,34,.46);
  border-radius: 0;
  background: linear-gradient(105deg, #fff, rgba(251,247,237,.7));
}
.workspace-draft-banner > svg { width: 26px; height: 26px; color: var(--gold-deep); }
.workspace-draft-banner strong, .workspace-draft-banner span { display: block; }
.workspace-draft-banner strong { font-size: var(--text-body); }
.workspace-draft-banner span { margin-top: 2px; color: var(--muted); font-size: var(--text-caption); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: 50px; margin-top: 36px; align-items: start; }
.path-panel { padding: 26px 30px 18px; }
.path-panel header, .company-status-panel header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.path-panel h2, .activity-panel h2, .company-status-panel h2, .evidence-panel h2, .review-card h2 { margin: 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.dashboard-paths { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--line); }
.dashboard-paths > div { display: grid; place-items: center; min-height: 125px; padding: 17px; border-right: 1px solid var(--line); text-align: center; font-size: var(--text-body); font-weight: var(--weight-medium); }
.dashboard-paths > div:last-child { border-right: 0; }
.dashboard-paths svg { width: 30px; height: 30px; margin-bottom: 10px; }
.dashboard-paths .is-primary { margin: 7px 8px 7px 0; border: 1px solid rgba(192,138,34,.6); border-radius: 0; color: var(--gold-deep); background: rgba(255,253,248,.64); }
.activity-panel { margin-top: 38px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 0; }
.activity-list, .company-status-list { list-style: none; margin: 18px 0 0; padding: 0; }
.activity-list li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: start;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.activity-list li:last-child { border-bottom: 0; }
.activity-list li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 65px; bottom: -16px; border-left: 1px dashed #d3d3cd; }
.activity-number {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  color: var(--gold-deep);
  font-size: var(--text-body);
}
.activity-number svg { width: 19px; height: 19px; }
.activity-list h3, .company-status-list h3 { margin: 0; font-size: var(--text-body); letter-spacing: var(--ls-body); }
.activity-list p, .company-status-list p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-body); }
.activity-action { display: grid; justify-items: start; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.status svg { width: 15px; height: 15px; }
.status.ready { color: var(--success); }
.locked-button { min-height: 36px; padding: 8px 13px; border: 1px solid var(--line); background: #f8f8f7; color: #979791; font-size: var(--text-caption); cursor: not-allowed; }
.locked-button svg { width: 14px; height: 14px; }
.evidence-panel { padding: 25px; }
.evidence-panel header { display: flex; gap: 18px; align-items: flex-start; margin: 17px 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.evidence-panel header > svg { width: 54px; height: 54px; color: var(--gold-deep); }
.evidence-panel header p { margin: 6px 0 0; color: var(--muted); font-size: var(--text-body); }
.evidence-capabilities > span { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.evidence-capabilities > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.evidence-capabilities b { padding: 10px; }
.evidence-panel footer { display: flex; gap: 15px; align-items: flex-start; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.evidence-panel footer svg { width: 28px; height: 28px; color: var(--gold-deep); }
.evidence-panel footer p { margin: 0; color: var(--muted); font-size: var(--text-body); }
.evidence-panel footer strong { display: block; color: var(--ink); }

.company-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 48px; margin-top: 40px; align-items: start; }
.company-status-panel { padding: 30px; border: 1px solid var(--line); border-radius: 0; }
.company-status-panel header p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-body); }
.company-status-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr) 170px; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.company-status-list li:last-child { border-bottom: 0; }
.company-status-list li > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-deep); font-size: var(--text-body); }
.company-status-list li > b { justify-self: start; }
.review-card { padding: 28px; }
.review-card h2 { margin: 12px 0 20px; font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.review-card ul { list-style: none; margin: 0; padding: 0; }
.review-card li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--text-body); }
.review-card li svg { width: 17px; height: 17px; color: var(--gold-deep); }
.review-card > p { margin: 20px 0 0; color: var(--muted); font-size: var(--text-caption); }
.simple-workspace-view { max-width: 760px; padding-top: 70px; }
.simple-workspace-view p { margin: 20px 0 30px; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.profile-summary { margin: 34px 0 26px; padding: 26px; border-radius: 0; }
.profile-summary header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-summary small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.profile-summary h2 { margin: 4px 0 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.profile-summary dl { margin: 0; }
.profile-summary dl div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile-summary dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-summary dt { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.profile-summary dd { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium); line-height: var(--lh-body); }
.submission-workspace-view { max-width: 980px; }
.submission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.submission-heading > div > p { max-width: 680px; margin-bottom: 0; }
.submission-heading > span { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-top: 8px; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.submission-heading > span svg { width: 15px; height: 15px; }
.submission-history { display: grid; gap: 22px; margin-top: 28px; }
.submission-empty { display: grid; justify-items: start; gap: 12px; padding: 34px; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.75); }
.submission-empty > svg { width: 32px; height: 32px; color: var(--gold-deep); }
.submission-empty h2, .submission-empty p { margin: 0; }
.submission-empty h2 { font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.submission-empty p { max-width: 620px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.receipt-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0; background: #fff; box-shadow: 0 14px 34px rgba(45,38,24,.055); }
.receipt-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 26px 20px; }
.receipt-card small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.receipt-card h2 { margin: 4px 0 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.receipt-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(36,117,58,.3); border-radius: 0; background: rgba(36,117,58,.05); color: var(--success); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.receipt-status svg { width: 14px; height: 14px; }
.receipt-status.is-pending { border-color: rgba(182,106,22,.3); background: rgba(182,106,22,.06); color: #9a5912; }
.submission-heading > span.is-ready { color: var(--success); }
.submission-heading > span.is-pending { color: #9a5912; }
.delivery-details {
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(251,247,237,.72));
  box-shadow: 0 14px 36px rgba(45,38,24,.045);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.delivery-details[data-status="ready"] { border-color: rgba(36,117,58,.32); box-shadow: 0 14px 36px rgba(36,117,58,.055); }
.delivery-details[data-status="unavailable"], .delivery-details[data-status="not-configured"] { border-color: rgba(182,106,22,.32); }
.delivery-details > header { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.delivery-details-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(192,138,34,.28); border-radius: 0; background: rgba(255,255,255,.76); color: var(--gold-deep); }
.delivery-details[data-status="ready"] .delivery-details-icon { border-color: rgba(36,117,58,.25); color: var(--success); }
.delivery-details-icon svg { width: 20px; height: 20px; }
.delivery-details small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.delivery-details h2 { margin: 3px 0 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.delivery-details dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0 22px; }
.delivery-details dl div { min-width: 0; padding: 16px 18px 16px 0; }
.delivery-details dl div:not(:last-child) { border-right: 1px solid var(--line); }
.delivery-details dl div:not(:first-child) { padding-left: 18px; }
.delivery-details dt { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.delivery-details dd { margin: 5px 0 0; font-size: var(--text-caption); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.delivery-details code { font: inherit; color: var(--ink); }
.delivery-details > p { margin: 0; padding: 0 22px 18px; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-recovery { margin-top: 14px; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.7); }
.receipt-recovery > summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; padding: 15px 18px; list-style: none; cursor: pointer; }
.receipt-recovery > summary::-webkit-details-marker { display: none; }
.receipt-recovery > summary > span { display: flex; align-items: center; gap: 12px; }
.receipt-recovery > summary > span:first-child > svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--gold-deep); }
.receipt-recovery > summary strong, .receipt-recovery > summary small { display: block; }
.receipt-recovery > summary strong { font-size: var(--text-caption); }
.receipt-recovery > summary small { margin-top: 3px; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-regular); line-height: var(--lh-caption); }
.receipt-recovery > summary > span:last-child { flex: 0 0 auto; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.receipt-recovery > summary > span:last-child svg { width: 15px; height: 15px; transition: transform .2s ease; }
.receipt-recovery[open] > summary > span:last-child svg { transform: rotate(90deg); }
.receipt-recovery form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; padding: 18px; border-top: 1px solid var(--line); }
.receipt-recovery form label { display: grid; gap: 7px; color: #31312e; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.receipt-recovery form .gold-button { min-height: 47px; }
.receipt-recovery-message { grid-column: 1 / -1; min-height: 16px; margin: 0; color: var(--soft); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-recovery-message.is-error { color: #9b2e22; }
.receipt-recovery-message.is-success { color: var(--success); }
.receipt-summary { margin: 0; padding: 0 26px 22px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.receipt-lineage { display: flex; align-items: center; gap: 8px; margin: -8px 26px 20px; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.receipt-lineage svg { width: 15px; height: 15px; }
.receipt-readiness { display: flex; align-items: center; gap: 9px; margin: -7px 26px 20px; padding: 11px 13px; border: 1px solid rgba(192,138,34,.28); border-radius: 0; background: rgba(251,247,237,.42); color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.receipt-readiness svg { width: 15px; height: 15px; }
.receipt-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.receipt-meta div { padding: 16px 18px 16px 0; }
.receipt-meta div:not(:last-child) { border-right: 1px solid var(--line); }
.receipt-meta div:not(:first-child) { padding-left: 18px; }
.receipt-meta dt { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.receipt-meta dd { margin: 5px 0 0; font-size: var(--text-body); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.receipt-progress { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 24px 26px 22px; }
.receipt-progress li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding-right: 18px; }
.receipt-progress li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 28px; right: 0; height: 1px; background: var(--line-strong); }
.receipt-progress i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--soft); font-size: var(--text-caption); font-style: normal; }
.receipt-progress svg { width: 14px; height: 14px; }
.receipt-progress strong, .receipt-progress span { display: block; }
.receipt-progress strong { margin-top: 1px; font-size: var(--text-caption); }
.receipt-progress span { margin-top: 3px; color: var(--soft); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-progress .is-complete i { border-color: var(--success); color: var(--success); }
.receipt-progress .is-current i { border-color: var(--gold); color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(192,138,34,.08); }
.receipt-packet { margin: 20px 26px 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(251,247,237,.2); }
.receipt-packet[hidden] { display: none; }
.receipt-packet > header { display: grid; grid-template-columns: 1fr minmax(220px, .8fr); gap: 24px; align-items: end; padding: 18px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.8); }
.receipt-packet > header h3 { margin: 4px 0 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.receipt-packet > header p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-packet-summary { margin: 0; padding: 4px 20px; }
.receipt-packet-summary div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.receipt-packet-summary dt { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.receipt-packet-summary dd { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); line-height: var(--lh-caption); overflow-wrap: anywhere; }
.receipt-packet-checks { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 8px 20px 16px; }
.receipt-packet-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px 12px 10px 0; }
.receipt-packet-checks li:nth-child(even) { padding-left: 12px; }
.receipt-packet-checks svg { width: 17px; height: 17px; color: var(--soft); }
.receipt-packet-checks .is-ready svg { color: var(--success); }
.receipt-packet-checks strong, .receipt-packet-checks span { display: block; }
.receipt-packet-checks strong { font-size: var(--text-caption); }
.receipt-packet-checks span { margin-top: 2px; color: var(--soft); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 26px; border-top: 1px solid var(--line); background: rgba(251,247,237,.32); }
.receipt-card > footer p { max-width: 540px; margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.receipt-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.receipt-action { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; }
.receipt-action:hover { border-color: var(--gold); color: var(--gold-deep); }
.receipt-action svg { width: 14px; height: 14px; }

/* Dialog forms */
.form-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(860px, calc(100svh - 28px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 38px 100px rgba(34,29,19,.22);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}
.form-dialog::backdrop { background: rgba(24,22,17,.24); backdrop-filter: blur(8px); }
.form-dialog form { display: grid; max-height: inherit; }
.dialog-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 26px 30px 20px; border-bottom: 1px solid var(--line); }
.dialog-header small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--ls-caption-caps); }
.dialog-header h2 { margin: 4px 0 0; font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.revision-context { display: flex; align-items: flex-start; gap: 11px; padding: 12px 30px; border-bottom: 1px solid rgba(192,138,34,.24); background: rgba(251,247,237,.46); }
.revision-context[hidden] { display: none; }
.revision-context > svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--gold-deep); }
.revision-context strong, .revision-context span { display: block; }
.revision-context strong { color: var(--gold-deep); font-size: var(--text-caption); }
.revision-context span { margin-top: 2px; color: var(--muted); font-size: var(--text-caption); }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
.icon-button svg { width: 18px; height: 18px; }
.dialog-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.dialog-tools > span { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.draft-clear { padding: 7px 9px; border: 0; border-radius: 0; background: transparent; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; }
.draft-clear:hover { background: var(--gold-pale); }
.form-progress { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 30px; border-bottom: 1px solid var(--line); }
.form-progress span { padding: 14px 4px 12px; border-bottom: 2px solid transparent; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.form-progress span.is-active { border-bottom-color: var(--gold); color: var(--gold-deep); }
.form-step { display: none; overflow: auto; padding: 26px 30px 12px; }
.form-step.is-active { display: block; }

/* ── Guided sign-up (§15) ──────────────────────────────────────────────────────────────
   The two forms that decide whether anyone joins. Before this they were a flat 2-column
   grid of eight identical boxes with 12.5px labels above 47px inputs, so the label was
   smaller than the field was tall and nothing on screen said which answers mattered, how
   long the form was, or what happens to it. The length was discovered rather than
   disclosed, and the one sentence that earns trust sat on step 4 where it arrives after
   the decision it was meant to inform.

   The rail fixes orientation, not decoration: it states the promise, names what every
   step asks BEFORE you reach it, and keeps the privacy line permanently on screen. It is
   also the progress indicator, so `.form-progress span` still indexes 1:1 with the steps
   and app.js drives it without knowing any of this changed.

   Field COUNT is not reduced, because api/submissions.js requires each one and a shorter
   form would mean a weaker record, not a better one. What is reduced is interaction cost:
   every short enum became a one-tap chip row instead of a dropdown, and the two answers
   that can be derived are pre-filled.

   Only .is-guided gets this. The quick-join and endorsement dialogs share these class
   names and must keep their single-panel layout. */
.form-dialog.is-guided { width: min(1020px, calc(100vw - 28px)); background: #fff; }
.form-dialog.is-guided form {
  grid-template-columns: 292px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-height: inherit;
  min-height: min(680px, calc(100svh - 28px));
}

.form-rail {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 26px;
  padding: 28px 26px;
  overflow: auto;
  background: var(--ink);
  /* The one place gold is allowed to sit large: a hairline the eye reads as the seam
     between "what this is" and "what you do". */
  box-shadow: inset -1px 0 0 rgba(192,138,34,.34);
  color: rgba(255,255,255,.7);
}
.form-rail-brand { display: flex; align-items: center; gap: 9px; color: var(--gold-light); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.form-rail-brand svg { width: 15px; height: 15px; }
.form-rail-promise h2 { margin: 0; color: #fff; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.form-rail-promise h2 em { color: var(--gold-light); font-style: italic; }
.form-rail-promise p { margin: 11px 0 0; font-size: var(--text-caption); line-height: var(--lh-caption); }

/* The rail steps ARE .form-progress, so app.js's index-based is-active toggle drives them
   with no JS change. Direct children must stay <span> for that selector to index right;
   anything nested uses <i>/<strong>/<small>. */
.form-dialog.is-guided .form-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-content: start;
  padding: 0;
  border: 0;
}
.form-dialog.is-guided .form-progress span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 12px;
  padding: 11px 10px 12px;
  border: 0;
  border-left: 2px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.44);
  font-size: var(--text-caption);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.form-dialog.is-guided .form-progress span > i {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px solid rgba(255,255,255,.2);
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: var(--weight-medium);
}
.form-dialog.is-guided .form-progress span > strong { align-self: center; color: rgba(255,255,255,.72); font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); }
.form-dialog.is-guided .form-progress span > small { grid-column: 2; color: inherit; font-size: var(--text-caption); font-weight: var(--weight-regular); line-height: var(--lh-caption); }
.form-dialog.is-guided .form-progress span.is-active { border-left-color: var(--gold); background: rgba(192,138,34,.13); color: rgba(255,255,255,.78); }
.form-dialog.is-guided .form-progress span.is-active > i { border-color: var(--gold-light); background: var(--gold); color: #14161a; }
.form-dialog.is-guided .form-progress span.is-active > strong { color: #fff; }
/* Behind you, not ahead of you: a done step reads as banked rather than as still pending. */
.form-dialog.is-guided .form-progress span.is-done { border-left-color: rgba(231,198,121,.5); color: rgba(255,255,255,.4); }
.form-dialog.is-guided .form-progress span.is-done > i { border-color: rgba(231,198,121,.42); color: var(--gold-light); }
.form-dialog.is-guided .form-progress span.is-done > strong { color: rgba(255,255,255,.58); }
.form-dialog.is-guided .form-progress span.is-done > small { color: rgba(255,255,255,.3); }

/* Moved out of the review step. A boundary promise that appears only at the end is
   reassurance after the fact. */
.form-rail-trust { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.11); }
.form-rail-trust p { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: rgba(255,255,255,.5); font-size: var(--text-caption); line-height: var(--lh-caption); }
.form-rail-trust svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; color: var(--gold-light); }

.form-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; }
.form-dialog.is-guided .dialog-header { align-items: center; padding: 22px 30px 18px; }
.form-dialog.is-guided .dialog-header h2 { font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); }
/* "Step 1 of 4" is one phrase; letting it wrap after "of" read as two broken labels. */
.form-dialog.is-guided .dialog-header small { font-size: var(--text-caption); white-space: nowrap; }
.form-dialog.is-guided .form-step { padding: 22px 30px 18px; }

/* Grouping is the hierarchy. Eight fields under one silent heading read as a wall; the
   same eight in three named groups read as three questions. */
.field-group { display: grid; gap: 13px; }
.field-group + .field-group { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.field-group > header { display: grid; gap: 2px; }
.field-group > header h3 { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); }
.field-group > header p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }

/* Labels were 12.5px over a 47px input. Raising the label and shortening the field puts
   the weight back on the words that say what to type. */
.form-dialog.is-guided .field-grid { gap: 15px 16px; }
.form-dialog.is-guided .field-grid label, .form-dialog.is-guided .form-step > label { gap: 6px; color: var(--ink); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption); }
.form-dialog.is-guided .field-grid label > span { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-regular); }
.form-dialog.is-guided input:not([type=checkbox]):not([type=radio]),
.form-dialog.is-guided textarea,
.form-dialog.is-guided select { min-height: 42px; padding: 10px 12px; background: #fff; font-size: var(--text-body); }
.form-dialog.is-guided input:focus-visible, .form-dialog.is-guided textarea:focus-visible, .form-dialog.is-guided select:focus-visible {
  border-color: var(--gold);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(192,138,34,.16);
}
/* A field the student filled should look settled, not still waiting. */
.form-dialog.is-guided input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown):valid { border-color: var(--line); }

/* ── Chips ────────────────────────────────────────────────────────────────────────────
   Every short enum was a <select>: click, scan a list that covers the page, click again,
   and the closed state reads "Choose one" which says nothing. A chip row is one tap and
   shows all the options at once, so the answer set is part of the question.

   The radio keeps its name, so FormData and the payload are byte-identical to the select
   it replaced. It stays full-size and merely transparent rather than display:none, so it
   is still focusable and the label is its own hit area. */
/* The industry legend moved into a .field-group header, so the fieldset keeps its accessible
   name without printing the same question twice. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--lh-caption);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip:has(input:checked) { border-color: var(--gold); background: var(--gold); color: #fff; font-weight: var(--weight-medium); }
.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(192,138,34,.2); }
.chip-field { display: grid; gap: 8px; }
.chip-field.wide { grid-column: 1 / -1; }
.chip-field > .chip-label { display: grid; gap: 3px; color: var(--ink); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption); }
.chip-field > .chip-label > span { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-regular); }
/* Set by app.js when a required group is untouched. Named on the group, not the page, so
   the student is told which question is unanswered rather than that "something" is. */
.chip-field.is-missing > .chip-label { color: #9b2e22; }
.chip-field.is-missing .chip { border-color: rgba(155,46,34,.45); }
/* The industry group is a fieldset of cards rather than a .chip-field, so the missing-answer
   highlight above did not reach it. It was also the one required group whose check was
   hard-coded in validateStep instead of declared on the markup: it set a message and neither
   highlighted nor scrolled, so a student who had filled every visible box was told they had
   not. Its legend is visually-hidden, which is why the cards themselves have to carry it. */
.industry-fieldset.is-missing legend { color: #9b2e22; }
.industry-fieldset.is-missing .industry-card { border-color: rgba(155,46,34,.45); }
/* renderCompanyBoundaryGuidance marks the chosen chip, not the whole group: production access
   is the one answer the pilot refuses, and it has to be obvious which chip caused that. */
.chip.is-blocked, .chip.is-blocked:has(input:checked) { border-color: #9b2e22; background: #9b2e22; color: #fff; }

/* Derived, not assumed: shown as filled in with a visible note that it was, so a wrong
   guess reads as a suggestion to correct instead of a mistake the student has to catch. */
.field-prefilled { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.field-prefilled svg { width: 11px; height: 11px; }

/* The fieldset and the empty specialisations line both carried their own bottom margin, which
   the .field-group gap then added to again. The group owns spacing here. */
.form-dialog.is-guided .industry-fieldset { margin-bottom: 0; }
.form-dialog.is-guided .industry-specializations:empty { display: none; }
.form-dialog.is-guided .consent-row { margin-top: 0; }
.form-dialog.is-guided .form-step > .consent-row:first-of-type { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.form-dialog.is-guided .dialog-footer { padding: 16px 30px 20px; border-top: 1px solid var(--line); background: #fff; }
.form-dialog.is-guided .form-message { padding: 8px 30px 0; }
.form-dialog.is-guided .dialog-tools > span { font-size: var(--text-caption); }

/* The rail is orientation. On a phone there is no room for it beside the form, and
   stacking it whole would push the first field below the fold, so it keeps the promise and
   the step list and drops to a horizontal scroller. */
@media (max-width: 880px) {
  .form-dialog.is-guided form { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .form-rail { grid-template-rows: auto auto auto; gap: 16px; padding: 20px 22px; overflow: visible; box-shadow: inset 0 -1px 0 rgba(192,138,34,.34); }
  .form-rail-promise h2 { font-size: var(--text-heading); }
  .form-rail-promise p, .form-rail-trust { display: none; }
  .form-dialog.is-guided .form-progress { grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); grid-template-columns: none; gap: 6px; overflow-x: auto; }
  .form-dialog.is-guided .form-progress span { grid-template-columns: 22px minmax(0, 1fr); border-left: 0; border-top: 2px solid rgba(255,255,255,.11); padding: 9px 8px 10px; }
  .form-dialog.is-guided .form-progress span > small { display: none; }
  /* One line per step in the scroller. Wrapping made "How you work" break to a second line
     that the next step then clipped mid-word. */
  .form-dialog.is-guided .form-progress span > strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* The live draft status is the first thing to go: the rail already promises the draft is
     kept, and at this width it was wrapping underneath the close button. */
  .form-dialog.is-guided .dialog-tools > span { display: none; }
  .form-dialog.is-guided .dialog-header { gap: 12px; }
  .form-dialog.is-guided .form-progress span.is-active { border-top-color: var(--gold); }
  .form-dialog.is-guided .form-progress span.is-done { border-top-color: rgba(231,198,121,.5); }
  .form-dialog.is-guided .field-grid { grid-template-columns: 1fr; }
  .form-dialog.is-guided .form-step, .form-dialog.is-guided .dialog-header, .form-dialog.is-guided .dialog-footer { padding-left: 22px; padding-right: 22px; }
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-grid label, .form-step > label { display: grid; gap: 7px; color: #31312e; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.field-grid label > span { color: var(--soft); font-weight: var(--weight-regular); }
.field-grid label.wide { grid-column: 1 / -1; }
input, textarea, select {
  width: 100%;
  min-height: 47px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  box-shadow: inset 0 1px 2px rgba(25,22,17,.025);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); outline: 3px solid rgba(192,138,34,.12); }
fieldset { margin: 0 0 20px; padding: 0; border: 0; }
legend { margin-bottom: 12px; color: #31312e; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.check-grid label, .consent-row {
  display: flex!important;
  grid-template-columns: none!important;
  align-items: flex-start;
  gap: 10px!important;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font-size: var(--text-caption) !important;
  font-weight: var(--weight-medium)!important;
}
.check-grid input, .consent-row input { flex: 0 0 auto; width: 16px; min-height: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--gold); }
.check-grid label.is-blocked, label:has(> [name="companyAccess"][aria-invalid="true"]) { border-color: rgba(155,46,34,.48); background: rgba(155,46,34,.045); color: #84291f; }
/* §8 industry-first cards (multi-select) + derived specialization line */
.industry-fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.industry-fieldset legend { padding: 0; margin-bottom: 12px; font-size: var(--text-body); font-weight: var(--weight-medium); color: #31312e; }
.industry-fieldset legend span { color: var(--soft); font-weight: var(--weight-regular); }
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.industry-card { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.industry-card:hover { border-color: var(--gold); }
/* min-height, not just height. The global `input { min-height: 47px }` outranks a 16px height,
   so every one of these cards was 75px tall: a 16px box reserving 47px of row, plus padding.
   Same reason the chip radios reset it. */
.industry-card input { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--gold); }
.industry-card:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.industry-specializations { min-height: 16px; margin: 12px 0 0; color: var(--gold-deep); font-size: var(--text-caption); line-height: var(--lh-caption); }
@media (max-width: 620px) { .industry-grid { grid-template-columns: 1fr; } }
.boundary-guidance {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(36,117,58,.3);
  border-radius: 0;
  background: rgba(36,117,58,.04);
}
.boundary-guidance > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--success); }
.boundary-guidance strong, .boundary-guidance span { display: block; }
.boundary-guidance strong { color: var(--success); font-size: var(--text-caption); }
.boundary-guidance span { margin-top: 2px; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.boundary-guidance.is-warning { border-color: rgba(192,138,34,.42); background: rgba(251,247,237,.55); }
.boundary-guidance.is-warning > svg, .boundary-guidance.is-warning strong { color: var(--gold-deep); }
.boundary-guidance.is-blocked { border-color: rgba(155,46,34,.42); background: rgba(155,46,34,.045); }
.boundary-guidance.is-blocked > svg, .boundary-guidance.is-blocked strong { color: #9b2e22; }
.consent-row { margin-top: 12px; line-height: var(--lh-body); }
.honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
.review-intro { display: grid; grid-template-columns: 1fr minmax(220px, .9fr); gap: 28px; align-items: end; margin-bottom: 22px; }
.review-intro small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.review-intro h3 { margin: 3px 0 0; font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.review-intro p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.packet-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px; border-top: 1px solid var(--line-strong); color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.packet-preview-label span:last-child { color: var(--soft); font-weight: var(--weight-medium); }
.form-review-summary { margin: 0; border-top: 1px solid var(--line-strong); }
.packet-review-summary { border-top-color: var(--line); }
.form-review-summary div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.form-review-summary dt { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.form-review-summary dd { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium); line-height: var(--lh-body); overflow-wrap: anywhere; }
.time-case, .review-boundary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(192,138,34,.42);
  border-radius: 0;
  background: rgba(251,247,237,.42);
}
.time-case > svg, .review-boundary > svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--gold-deep); }
.time-case strong, .time-case span { display: block; }
.time-case strong { font-size: var(--text-caption); }
.time-case span { margin-top: 2px; color: var(--muted); font-size: var(--text-caption); }
.time-case.is-positive { border-color: rgba(36,117,58,.4); background: rgba(36,117,58,.045); }
.time-case.is-positive > svg, .time-case.is-positive strong { color: var(--success); }
.time-case.is-warning { border-color: rgba(156,70,36,.35); background: rgba(156,70,36,.045); }
.packet-readiness { margin-top: 18px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(255,255,255,.82); box-shadow: 0 12px 32px rgba(45,38,24,.04); }
.packet-readiness > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 18px 15px; border-bottom: 1px solid var(--line); background: rgba(251,247,237,.28); }
.packet-readiness > header small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.packet-readiness > header h4 { margin: 3px 0 0; font-size: var(--text-body); letter-spacing: var(--ls-body); }
.packet-readiness > header > strong { flex: 0 0 auto; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 0; color: var(--muted); font-size: var(--text-caption); }
.packet-readiness > header > strong.is-complete { border-color: rgba(36,117,58,.3); background: rgba(36,117,58,.05); color: var(--success); }
.packet-readiness ul { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 8px 18px 10px; }
.packet-readiness li { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.packet-readiness li:nth-last-child(-n + 2) { border-bottom: 0; }
.packet-readiness li:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.packet-readiness li:nth-child(even) { padding-left: 18px; }
.packet-readiness li i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--soft); font-size: var(--text-caption); font-style: normal; }
.packet-readiness li i svg { width: 13px; height: 13px; }
.packet-readiness li strong, .packet-readiness li span { display: block; }
.packet-readiness li strong { font-size: var(--text-caption); line-height: var(--lh-caption); }
.packet-readiness li span { margin-top: 3px; color: var(--soft); font-size: var(--text-caption); line-height: var(--lh-caption); }
.packet-readiness li.is-ready i { border-color: rgba(36,117,58,.42); background: rgba(36,117,58,.05); color: var(--success); }
.packet-readiness li.needs-input strong { color: var(--muted); }
.packet-readiness > footer { display: flex; align-items: flex-start; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line); background: rgba(251,247,237,.2); }
.packet-readiness > footer svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--gold-deep); }
.packet-readiness > footer p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.packet-readiness > footer strong { display: block; color: var(--ink); font-size: var(--text-caption); }
.review-boundary { border-color: var(--line); background: #fff; }
.review-boundary p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.review-boundary strong { display: block; color: var(--ink); font-size: var(--text-caption); }
.form-message { min-height: 24px; padding: 5px 30px 0; color: #9b2e22; font-size: var(--text-caption); }
.form-message.is-success { color: var(--success); }
.dialog-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 30px 24px; }
.dialog-footer [data-form-next], .dialog-footer [data-form-submit] { margin-left: auto; }
.toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 14px 18px;
  border: 1px solid rgba(192,138,34,.5);
  border-radius: 0;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: var(--text-body);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .site-nav { display: none; }
  .site-header, .workspace-header { grid-template-columns: 1fr auto; }
  .workspace-header > strong { display: none; }
  .work-selector { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); overflow-x: visible; }
  .work-option { scroll-snap-align: center; }
  .selector-submit { min-height: 54px; margin-top: 28px; }
  .story-layout, .company-story-layout { grid-template-columns: 1fr; }
  .work-record, .packet { max-width: 760px; }
  .company-rail { max-width: 900px; }
  .why-section > div { grid-template-columns: 1fr 1fr; gap: 60px; }
  .dashboard-grid, .company-dashboard-grid { grid-template-columns: 1fr; }
  .evidence-panel, .review-card { max-width: 620px; }
}

@media (max-width: 820px) {
  :root { --header-height: 72px; }
  .site-header, .workspace-header { padding: 0 18px; }
  .brand { font-size: var(--text-subhead); }
  .brand-mark { width: 31px; height: 31px; }
  .workspace-link span, .back-link { display: none; }
  .workspace-link { width: 42px; min-height: 42px; padding: 9px; justify-content: center; }
  .member-login-link { width:42px; min-height:42px; justify-content:center; padding:9px; border:1px solid var(--line); border-radius:50%; }
  .member-login-link span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .member-login-link svg { display:block; width:18px; height:18px; }
  .member-login-link.is-signed-in { padding:2px; border-color:var(--line-strong); }
  .member-login-link.is-signed-in .member-nav-avatar { width:100%; height:100%; border-color:transparent; font-size: var(--text-body); }
  .audience-switch button { min-width: auto; padding: 8px 11px; }
  .audience-switch button svg { display: none; }
  .hero { min-height: auto; padding-top: 68px; padding-bottom: 128px; }
  .hero h1 { font-size: var(--text-display); }
  .selector-orbit { margin-top: 38px; }
  .selector-fx { top: -112px; left: -18%; width: 136%; height: 340px; }
  .work-selector { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 2px; padding: 8px; border-radius: 0; }
  .work-option { min-height: 112px; border: 1px solid transparent; border-right-color: var(--line); border-radius: 0; }
  .work-option:first-child { border-radius: 0; }
  .work-option.is-selected { border-radius: 0; }
  .selector-submit { width: min(280px, 100%); }
  .company-composer { grid-template-columns: 1fr; padding: 14px; }
  .composer-icon { display: none; }
  .company-composer .gold-button { min-height: 54px; }
  .prompt-links { flex-direction: column; align-items: center; gap: 12px; }
  .scroll-cue { margin-top: 38px; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
  .proof-rail, .company-rail { grid-template-columns: 1fr; gap: 26px; }
  .proof-rail li, .company-rail li { display: grid; grid-template-columns: 38px 38px 1fr; gap: 14px; align-items: start; padding: 0; }
  .proof-rail li:not(:last-child)::after, .company-rail li:not(:last-child)::after { top: 38px; bottom: -26px; left: 17px; right: auto; width: 1px; height: auto; }
  .proof-rail li > svg, .company-rail li > svg { margin: 1px 0 0; }
  .proof-rail h3, .company-rail h3 { margin-top: 1px; }
  .proof-rail p, .company-rail p { grid-column: 3; }
  .why-section > div { grid-template-columns: 1fr; }
  .workspace-layout { grid-template-columns: 1fr; }
  .workspace-sidebar {
    position: sticky;
    z-index: 20;
    top: var(--header-height);
    display: block;
    height: auto;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .workspace-sidebar nav { grid-template-columns: repeat(3, 1fr); }
  .workspace-sidebar nav button { justify-content: center; min-height: 44px; padding: 9px; }
  .workspace-sidebar nav button svg { display: none; }
  .pilot-state { display: none; }
  .workspace-main { padding: 42px 22px 70px; }
  .workspace-draft-banner { grid-template-columns: auto 1fr; }
  .workspace-draft-banner .outline-button { grid-column: 2; justify-self: start; }
  .activity-list li, .company-status-list li { grid-template-columns: 42px 1fr; }
  .activity-action, .company-status-list li > b { grid-column: 2; }
}

@media (max-width: 560px) {
  .brand { gap: 7px; font-size: var(--text-subhead); }
  .brand-mark { display: block; width: 28px; height: 28px; }
  .header-actions { gap: 7px; }
  .audience-switch button { width: 36px; min-width: 36px; padding: 7px; }
  .audience-switch button svg { display: block; width: 17px; height: 17px; }
  .audience-switch button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero-copy p { font-size: var(--text-body); }
  .work-option { font-size: var(--text-body); }
  .student-journey { width: 100%; padding: 5px; }
  .student-journey button { justify-content: center; min-height: 50px; padding: 7px; }
  .student-journey button > i { width: 24px; height: 24px; }
  .student-journey small { display: none; }
  .quiet-link { font-size: var(--text-caption); }
  .how-section, .why-section, .final-cta { padding-left: 20px; padding-right: 20px; }
  .record-preview { grid-template-columns: 1fr; }
  .work-record, .packet { padding-left: 18px; padding-right: 18px; }
  .packet dl div { grid-template-columns: 1fr; gap: 4px; }
  .risk-note { align-items: flex-start; }
  .fit-table > div { grid-template-columns: 1fr; gap: 8px; }
  .site-footer { flex-direction: column; }
  .intro-screen { padding: 28px 22px; }
  .intro-shell { width: 100%; }
  .intro-brand { margin-bottom: 64px; font-size: var(--text-heading); }
  .intro-brand .brand-mark { display: block; width: 38px; height: 38px; }
  .intro-statement { font-size: var(--text-display); line-height: var(--lh-display); }
  .intro-actions { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 48px; }
  .intro-enter { width: 100%; min-width: 0; }
  .intro-skip { align-self: center; }
  .workspace-sidebar nav button { font-size: var(--text-caption); }
  .path-panel, .activity-panel, .evidence-panel, .company-status-panel, .review-card { padding: 20px; }
  .path-panel header, .company-status-panel header { align-items: flex-start; flex-direction: column; }
  .dashboard-paths { grid-template-columns: 1fr; }
  .dashboard-paths > div { min-height: 86px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dashboard-paths > div:last-child { border-bottom: 0; }
  .evidence-capabilities > div { grid-template-columns: 1fr; }
  .field-grid, .check-grid { grid-template-columns: 1fr; }
  .dialog-header { align-items: flex-start; }
  .dialog-tools { flex-wrap: wrap; }
  .dialog-tools > span { order: 3; width: 100%; text-align: right; }
  .review-intro { grid-template-columns: 1fr; gap: 10px; }
  .packet-readiness > header { flex-direction: column; gap: 10px; }
  .packet-readiness ul { grid-template-columns: 1fr; }
  .packet-readiness li, .packet-readiness li:nth-child(odd), .packet-readiness li:nth-child(even) { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .packet-readiness li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .packet-readiness li:last-child { border-bottom: 0; }
  .form-review-summary div, .profile-summary dl div { grid-template-columns: 1fr; gap: 4px; }
  .form-dialog { max-height: calc(100svh - 12px); }
  .dialog-header, .form-step, .dialog-footer { padding-left: 20px; padding-right: 20px; }
  .form-progress { padding: 0 20px; }
  .submission-heading { flex-direction: column; gap: 4px; }
  .submission-heading > span { margin-top: 0; }
  .delivery-details > header { grid-template-columns: auto 1fr; }
  .delivery-details > header .outline-button { grid-column: 2; justify-self: start; }
  .delivery-details dl { grid-template-columns: 1fr; }
  .delivery-details dl div:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
  .delivery-details dl div:not(:first-child) { padding-left: 0; }
  .receipt-recovery > summary { align-items: flex-start; }
  .receipt-recovery > summary > span:last-child { font-size: 0; }
  .receipt-recovery form { grid-template-columns: 1fr; }
  .receipt-recovery-message { grid-column: 1; }
  .submission-empty { padding: 24px; }
  .receipt-card > header, .receipt-card > footer { align-items: flex-start; flex-direction: column; }
  .receipt-packet { margin-left: 18px; margin-right: 18px; }
  .receipt-packet > header { grid-template-columns: 1fr; gap: 7px; }
  .receipt-packet-summary div { grid-template-columns: 1fr; gap: 3px; }
  .receipt-packet-checks { grid-template-columns: 1fr; }
  .receipt-packet-checks li:nth-child(even) { padding-left: 0; }
  .receipt-meta { grid-template-columns: 1fr; }
  .receipt-meta div:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
  .receipt-meta div:not(:first-child) { padding-left: 0; }
  .receipt-progress { grid-template-columns: 1fr; gap: 18px; }
  .receipt-progress li { grid-template-columns: 28px 1fr; padding-right: 0; }
  .receipt-progress li:not(:last-child)::after { top: 28px; right: auto; bottom: -18px; left: 13px; width: 1px; height: auto; }
  .receipt-actions { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .receipt-action { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .intro-line.is-typing::after { animation: none; }
  .selector-fx-glow { animation: none; }
  .gold-button::before { display: none; }
}

/* =====================================================================
   Covenda Motion — keyframes + scroll-trigger pattern
   Adapted from design_handoff_covenda_motion/covenda-motion.css.
   Colors mapped to the existing gold tokens.
   ===================================================================== */
@keyframes cv-riseIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cv-fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-scaleIn   { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes cv-stampIn   { 0% { opacity: 0; transform: scale(1.28); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes cv-connector { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cv-dotTravel { from { left: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }

/* Generic scroll-trigger helper: hidden until JS adds [data-play] in view. */
[data-animate] { opacity: 0; }
[data-animate][data-play] { animation: cv-riseIn .55s cubic-bezier(.2,.7,.2,1) var(--cv-delay, 0s) both; }

/* ---- Demo 2 · Problem -> Packet -> Proof --------------------------- */
.flow-demo {
  width: min(100%, var(--content));
  margin: 0 auto clamp(96px, 11vw, 168px);
  padding: 0;
}
/* Core story lives on HOME only (not per-audience). */
body[data-audience="student"] #flowDemo,
body[data-audience="company"] #flowDemo,
body[data-audience="university"] #flowDemo { display: none; }
/* Extra breathing room below the core story, before "Real work becomes credible
   evidence". Uses #id so it beats `.how-section > div { margin: 0 auto }`. */
#flowDemo { margin-bottom: clamp(96px, 11vw, 168px); }
.flow-demo-head { max-width: 880px; margin: 0 0 clamp(22px, 2.6vw, 34px); }
.flow-demo-kicker {
  margin: 0 0 8px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.flow-demo-head h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--weight-regular);
}
.flow-demo-head p { margin: 0; max-width: 660px; color: #45453f; font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.flow-demo-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Five stages inside 820px gave each about 200px — too narrow to read as a slide, so the
     whole sequence scanned as a strip of labels. */
  min-width: 1180px;
}
.flow-demo-scroll { overflow-x: auto; scrollbar-width: none; }
.flow-demo-scroll::-webkit-scrollbar { display: none; }

.fd-stage { flex: 1; min-width: 300px; }
.fd-stage-b { flex: 1.25; min-width: 340px; }
/* §10: the flow demo stacks vertically on narrow screens instead of scrolling sideways. */
@media (max-width: 640px) {
  .flow-demo-track { flex-direction: column; min-width: 0; gap: 20px; }
  .flow-demo-scroll { overflow-x: visible; }
  .fd-stage, .fd-stage-b { flex: none; min-width: 0; }
}
.fd-kicker {
  margin: 0 0 14px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.fd-kicker-muted { color: var(--soft); }

.fd-card { border-radius: 0; padding: 26px; }
.fd-card-problem {
  border: 1px dashed var(--line-strong);
  background: #faf9f6;
  transform: rotate(-1.2deg);
}
.fd-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 9px;
  border-radius: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.fd-tag-backlog { color: #a24a2c; background: #f7ece7; border: 1px solid #eed3c8; }
.fd-line { display: block; height: 9px; margin-bottom: 9px; border-radius: 0; background: #e7e3d8; }
.fd-line:last-of-type { margin-bottom: 0; }
.fd-quote { margin: 16px 0 0; font-size: var(--text-body); font-style: italic; color: var(--soft); }

.fd-connector {
  flex: none;
  width: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 26px;
}
.fd-connector-label {
  margin-bottom: 10px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption);
  text-align: center;
  color: var(--gold-deep);
}
.fd-track { position: relative; width: 100%; height: 2px; background: rgba(192,138,34,.22); }
.fd-fill { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.fd-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(192,138,34,.16);
}

.fd-card-packet {
  position: relative;
  border: 1px solid var(--gold-light);
  background: #fdfbf5;
  box-shadow: 0 6px 22px rgba(192,138,34,.08);
}
.fd-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: #fff;
  background: var(--gold);
}
.fd-field { margin-bottom: 12px; }
.fd-field:last-child { margin-bottom: 0; }
.fd-field-label { display: block; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: #9a8a5f; }
.fd-field-value { display: block; margin-top: 4px; font-size: var(--text-body); color: var(--ink); }

.fd-card-proof { border: 1px solid var(--gold-light); background: #fff; }
.fd-proof-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fd-proof-head span { font-family: var(--font-sans); font-size: var(--text-subhead); }
.fd-seal { width: 22px; height: 22px; }
.fd-seal circle { fill: var(--gold); stroke: none; }
.fd-seal path { fill: none; stroke: #fff; stroke-width: 2.2; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fd-chip {
  padding: 6px 14px;
  border-radius: 0;
  font-size: var(--text-body);
  color: var(--gold-deep);
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
}

/* Armed by JS only when motion is allowed; otherwise everything is visible
   (covers no-JS and prefers-reduced-motion — graceful degradation). */
.flow-demo.is-armed .fd-anim,
.flow-demo.is-armed .fd-fill,
.flow-demo.is-armed .fd-dot,
.flow-demo.is-armed .fd-badge,
.flow-demo.is-armed .fd-field,
.flow-demo.is-armed .fd-chip,
.flow-demo.is-armed .fd-connector-label { opacity: 0; }

.flow-demo.is-armed.is-playing .fd-stage-a { animation: cv-riseIn .55s cubic-bezier(.2,.7,.2,1) .05s both; }
.flow-demo.is-armed.is-playing .fd-stage-b { animation: cv-riseIn .55s cubic-bezier(.2,.7,.2,1) 1.25s both; }
.flow-demo.is-armed.is-playing .fd-stage-c { animation: cv-riseIn .55s cubic-bezier(.2,.7,.2,1) 2.7s both; }
.flow-demo.is-armed.is-playing .fd-connector-1 .fd-connector-label { animation: cv-fadeIn .4s ease .7s both; }
.flow-demo.is-armed.is-playing .fd-connector-2 .fd-connector-label { animation: cv-fadeIn .4s ease 2.15s both; }
.flow-demo.is-armed.is-playing .fd-fill-1 { animation: cv-connector .6s ease-out .7s both; }
.flow-demo.is-armed.is-playing .fd-dot-1 { animation: cv-dotTravel .6s ease-out .7s both; }
.flow-demo.is-armed.is-playing .fd-fill-2 { animation: cv-connector .6s ease-out 2.15s both; }
.flow-demo.is-armed.is-playing .fd-dot-2 { animation: cv-dotTravel .6s ease-out 2.15s both; }
.flow-demo.is-armed.is-playing .fd-field-1 { animation: cv-riseIn .4s ease-out 1.45s both; }
.flow-demo.is-armed.is-playing .fd-field-2 { animation: cv-riseIn .4s ease-out 1.6s both; }
.flow-demo.is-armed.is-playing .fd-field-3 { animation: cv-riseIn .4s ease-out 1.75s both; }
.flow-demo.is-armed.is-playing .fd-field-4 { animation: cv-riseIn .4s ease-out 1.9s both; }
.flow-demo.is-armed.is-playing .fd-badge-approved { animation: cv-scaleIn .4s ease-out 2.0s both; }
.flow-demo.is-armed.is-playing .fd-chip-1 { animation: cv-stampIn .45s ease-out 2.85s both; }
.flow-demo.is-armed.is-playing .fd-chip-2 { animation: cv-stampIn .45s ease-out 3.0s both; }
.flow-demo.is-armed.is-playing .fd-chip-3 { animation: cv-stampIn .45s ease-out 3.15s both; }
.flow-demo.is-armed.is-playing .fd-chip-4 { animation: cv-stampIn .45s ease-out 3.3s both; }

/* Compressed (phone, or a narrowed desktop window): the core story flows DOWNWARD
   instead of forcing a horizontal scroll. The travelling-dot animation is decorative
   and horizontal-only, so it is replaced with a static vertical rule. */
@media (max-width: 860px) {
  .flow-demo-scroll { overflow-x: visible; }
  .flow-demo-track { min-width: 0; flex-direction: column; align-items: stretch; }
  .fd-stage, .fd-stage-b { flex: none; width: 100%; min-width: 0; }
  .fd-connector { width: 100%; padding: 16px 0; flex-direction: column; gap: 8px; }
  .fd-connector-label { margin: 0; }
  .fd-track { width: 2px; height: 30px; background: rgba(192,138,34,.35); }
  .fd-fill, .fd-dot { display: none; }
}

/* ---- University / partner roster builder --------------------------- */
.roster-builder {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(192,138,34,.5);
  border-radius: 0;
  text-align: left;
  display: grid;
  gap: 22px;
}
.roster-section { display: grid; gap: 12px; }
.roster-eyebrow {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.roster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roster-grid label { display: grid; gap: 8px; color: #31312e; font-size: var(--text-body); font-weight: var(--weight-medium); }
.roster-add-row { display: grid; grid-template-columns: 1fr 1fr minmax(140px, .85fr) auto; gap: 10px; align-items: end; }
.roster-add-row .gold-button { min-height: 47px; }
.roster-paste { margin-top: 2px; border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; background: rgba(255,255,255,.5); }
.roster-paste summary { cursor: pointer; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--gold-deep); }
.roster-paste p { margin: 10px 0; font-size: var(--text-body); color: var(--muted); }
.roster-paste code { padding: 1px 5px; border-radius: 0; background: var(--gold-pale); font-size: var(--text-caption); }
.roster-paste textarea { min-height: 92px; }
.roster-paste .outline-button { margin-top: 10px; }

.roster-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roster-clear { border: 0; background: transparent; color: var(--muted); font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; }
.roster-clear:hover { color: var(--gold-deep); }
.roster-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.roster-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.72);
}
.roster-row-main { min-width: 0; }
.roster-row-name { display: block; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink); }
.roster-row-email { display: block; font-size: var(--text-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-tag {
  padding: 4px 10px;
  border-radius: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--gold-deep);
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
  white-space: nowrap;
}
.roster-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.roster-remove:hover { border-color: var(--gold); color: var(--gold-deep); }
.roster-remove svg { width: 15px; height: 15px; }
/* The list is empty far more often than not, and a bare sentence under an empty <ul> left a
   void where the roster will be. A dashed placeholder occupies the same space the filled list
   will, so the section does not jump when the first student is added and the shape of what is
   coming is visible before anything is there. */
.roster-empty {
  margin: 0;
  padding: 26px 22px;
  border: 1px dashed var(--line-strong);
  background: rgba(255,255,255,.45);
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-align: center;
}
.roster-list:empty { display: none; }
.roster-consent { margin: 0; }
.roster-submit { min-height: 54px; justify-self: start; }
.roster-builder .form-message { min-height: 0; }
.roster-builder .form-message:empty { display: none; }
.roster-builder .form-message.is-success { color: var(--success); font-weight: var(--weight-medium); }

@media (max-width: 720px) {
  .roster-grid { grid-template-columns: 1fr; }
  .roster-add-row { grid-template-columns: 1fr; }
  .roster-add-row .gold-button { justify-self: start; }
  .roster-submit { justify-self: stretch; }
}

/* ---- University rail: full-width, no duplicate proof panel ---------- */
.proof-rail-wide { max-width: 1080px; }

/* ---- Litmus-style feature band: gold->cream aurora + column guides -- */
.feature-band {
  position: relative;
  padding: clamp(66px, 8vw, 120px) var(--page-gutter);
  background: #fff;
}
.feature-band-inner {
  position: relative;
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 52px);
  align-items: center;
}
.feature-copy { max-width: 640px; }
.feature-kicker {
  margin: 0 0 14px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.feature-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.feature-copy p { margin: 0; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }

/* ── The gold surface (§38) ───────────────────────────────────────────────────────────
   One definition, used by every gold panel on the site. It was written once for
   .feature-panel and then copy-pasted into .made-by with a comment saying "lifted verbatim so
   the two golds are the same gold" — which is exactly the arrangement that guarantees they
   stop being the same gold. They had already diverged: one gained edge gold and the other
   did not.

   --gold-surface-edge is the part that differs by shape. A short wide panel wants the deep
   stops on its sides; a tall band wants them along the top and bottom, or the extra height is
   just cream. Each caller sets that one layer and inherits the rest. */
:root {
  --gold-surface-edge: none;
  --gold-surface:
    var(--gold-surface-edge),
    radial-gradient(120% 130% at 18% 18%, #FDF9F0 0%, rgba(253,249,240,0) 55%),
    radial-gradient(110% 120% at 82% 22%, #C9A24B 0%, rgba(201,162,75,0) 58%),
    radial-gradient(130% 130% at 78% 88%, #A9822F 0%, rgba(169,130,47,0) 55%),
    radial-gradient(120% 130% at 22% 92%, #FBF6EC 0%, rgba(251,246,236,0) 58%),
    linear-gradient(135deg, #FDF9F0 0%, #FBF6EC 58%, #F3E7CC 100%);
  --gold-surface-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 18px 48px rgba(169,130,47,.14);
}

.feature-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;            /* mobile / narrow: wide short banner */
  border-radius: 0;
  overflow: hidden;
  background: var(--gold-surface);
  box-shadow: var(--gold-surface-shadow);
}
.feature-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

@media (min-width: 900px) {
  .feature-band-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: clamp(56px, 6vw, 96px);
  }
  .feature-panel { aspect-ratio: 1 / 1; }   /* desktop / wide: square on the right */
}

/* ---- Signature gold "prove" word: metallic gradient + restrained sheen ----
   Sheen and base gold live in ONE element as layered backgrounds (a pseudo-
   element can't clip to text it doesn't contain). padding-right + negative
   margin give the italic overhang room so the last letter isn't clipped, while
   keeping the visual spacing to the following character unchanged. */
.word-gold {
  /* ── WHY THIS IS A SOLID COLOUR AND NOT A CLIPPED GRADIENT ──────────────────────────
     It was a gradient painted through background-clip: text. That technique clips the fill to
     the inline box, and browsers disagree about which font metric sets that box: EB Garamond
     reports head yMin -294, hhea descender -298 and OS/2 winDescent 390 against a 1000 em.
     Four separate rounds of clipped glyphs came out of it — the p and f of "proof", the g of
     "good", the italic g's left-swinging loop, the s of "students" — each fixed by padding one
     more side and each followed by another.

     A solid colour cannot be clipped by a box it does not have. The sheen it bought was worth
     less than the word "proof" rendering correctly on the front page. */
  font-style: italic;
  color: var(--gold);
}
/* Light gold on the dark hero, deep gold on white. Two values instead of a gradient, and both
   hold contrast against their own ground. */
.hero-home .word-gold,
.hero-company .word-gold,
.hero-university .word-gold { color: #e2bd6b; }
@media (prefers-reduced-motion: reduce) {
}

/* ---- Interactive gold icosahedron (decorative accent in the feature panel) ---- */
.ico-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;        /* page can still scroll vertically; horizontal drag spins */
  cursor: grab;
}
.ico-canvas:active { cursor: grabbing; }
.ico-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 0;
  background: rgba(255,255,255,.55);
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .5s ease;
}
.ico-hint.is-hidden { opacity: 0; }
.ico-kicker {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .72;
  pointer-events: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .ico-canvas { cursor: default; } }

/* ---- Work-type explore: per-niche detail panel (explore before the form) ---- */
.selector-orbit.is-exploring .work-selector,
.selector-orbit.is-exploring .selector-submit,
.selector-orbit.is-exploring .selector-secondary,
.selector-orbit.is-exploring .student-journey { display: none; }

.work-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 0;
  text-align: left;
  animation: cv-riseIn .42s cubic-bezier(.2,.7,.2,1) both;
}
.work-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.work-detail-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px;
  border: 1px solid rgba(192,138,34,.5);
  border-radius: 0;
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-size: var(--text-body);
}
.work-detail-tag svg { width: 18px; height: 18px; }
.work-detail-tag b { font-weight: var(--weight-bold); }
.work-detail-back {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--muted);
  font-size: var(--text-body); font-weight: var(--weight-medium); cursor: pointer;
}
.work-detail-back:hover { color: var(--gold-deep); }
.work-detail .flip { transform: rotate(180deg); }
.work-detail-back svg, .work-flow-nav svg { width: 15px; height: 15px; }
.work-detail-desc { margin: 0 0 18px; color: #33332f; font-size: var(--text-body); line-height: var(--lh-body); }
.work-detail-label { display: block; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.work-detail-roles { margin-bottom: 20px; }
.work-detail-roles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.work-detail-roles li {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 0;
  background: rgba(255,255,255,.72); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink);
}
.work-detail-flow { margin-bottom: 20px; }
.work-detail-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.work-detail-step { font-size: var(--text-caption); color: var(--muted); font-weight: var(--weight-medium); }
.work-flow-frame {
  min-height: 92px;
  display: grid; align-content: center; gap: 8px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  background: linear-gradient(140deg, #fff, #fdfbf6);
}
.work-flow-frame-tag { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--soft); }
.work-flow-frame p { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink); }
.work-flow-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.work-flow-nav button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; min-height: 0;
  border: 1px solid var(--line-strong); border-radius: 0; background: #fff;
  color: var(--gold-deep); cursor: pointer;
}
.work-flow-nav button:hover { border-color: var(--gold); }
.work-flow-dots { display: flex; gap: 6px; }
.work-flow-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .2s; }
.work-flow-dots i.is-active { background: var(--gold); }
.work-detail-cta { width: 100%; min-height: 54px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { .work-detail { animation: none; } }

/* ---- Site-wide scroll reveal (progressive, as you scroll down) ----
   Only active when JS adds .js-reveal to <html> AND motion is allowed, so no-JS
   and reduced-motion visitors always see everything immediately. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .66s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--reveal-i, 0) * 65ms);
  will-change: opacity, transform;
}
html.js-reveal .reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ===== HOME audience: brand story only (core story + "What Covenda is") ===== */


/* One comparison table, home only. This is genuinely tabular — the same questions answered
   two ways — so it is a real <table>: screen readers get the row/column relationship, and the
   Covenda column is emphasised through weight and a warm ground rather than through colour
   alone, which would say nothing to anyone not seeing colour. */
.compare-section { display: none; }
body[data-audience="home"] .compare-section { display: block; }
.compare-section { padding: 88px var(--page-gutter, 6vw) 84px; border-bottom: 1px solid var(--line); }
/* One container, so every row shares a left edge. Centring each child independently meant the
   full-width table centred inside the column while the narrower footnote centred inside the
   whole section, and the two landed in different places. */
.compare-inner { width: min(100%, var(--content)); margin-inline: auto; }
.compare-head { margin: 0; }
.compare-kicker { margin: 0 0 16px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.compare-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.compare-lede { margin: 20px 0 0; max-width: 68ch; font-size: var(--text-subhead); line-height: var(--lh-subhead); color: var(--soft); }

/* Wide content scrolls inside its own container so the page body never scrolls sideways. */
.compare-scroll { margin: 48px 0 0; overflow-x: auto; }
.compare-table { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; }
/* Two lines only: one under the header row, one dividing the category column from the answers.
   Row rules were adding five more horizontal lines to a six-row table, which is more grid than
   content. Without them the rows need their own breathing room, hence the taller padding. */
.compare-table th, .compare-table td { padding: 20px 24px; vertical-align: middle; border: 0; }
.compare-table thead th { padding-bottom: 14px; border-bottom: 1.5px solid var(--line-strong); }
.compare-table tbody th { border-right: 1px solid var(--line-strong); }
.compare-table thead th:first-child { border-right: 1px solid var(--line-strong); }
.ct-q { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--soft); }
.ct-them { font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); color: var(--soft); }
.ct-us { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption); color: var(--gold-deep); }

.compare-table tbody th {
  width: 22%; font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); color: var(--ink);
  text-wrap: pretty;
}
.compare-table td { width: 39%; font-size: var(--text-subhead); line-height: var(--lh-subhead); color: var(--soft); }
.compare-table td b { color: var(--ink); font-weight: var(--weight-bold); }

/* The Covenda column carries the weight: a warm ground, a gold spine, darker text. */
/* The Covenda column reads gold, matching its header. --gold-deep rather than --gold: the
   lighter value on the cream ground drops under the contrast floor for body-size text. */
.compare-table .is-us { background: var(--gold-pale); border-left: 3px solid var(--gold); color: var(--gold-deep); font-weight: var(--weight-medium); }
.compare-table thead .is-us { background: var(--gold-pale); }


.company-product-demo {
  padding: clamp(68px, 8vw, 116px) var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.company-product-demo > * { width: min(100%, var(--content)); margin-inline: auto; }
.company-product-demo-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 30px; align-items: end; }
.company-product-demo-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.company-product-demo-head p { margin: 0 0 6px; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.company-demo-tabs { display: flex; gap: 0; margin-top: clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line-strong); }
.company-demo-tabs button {
  min-width: 190px;
  padding: 14px 20px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.company-demo-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.company-demo-tabs button:hover,
.company-demo-tabs button:focus-visible { color: var(--gold-deep); }
.company-demo-tabs button[aria-selected="true"]:hover,
.company-demo-tabs button[aria-selected="true"]:focus-visible { color: #fff; background: var(--gold-deep); }
.company-demo-panel { padding-top: clamp(24px, 3vw, 38px); }
.company-demo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  list-style: none;
}
.company-demo-steps > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 210px;
  align-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid var(--line);
  background: #fff;
}
.company-demo-steps > li:last-child { border-right: 0; }
.company-demo-steps > li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--gold);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}
.company-demo-steps h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.company-demo-steps p { margin: 10px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.company-demo-profile { background: var(--gold-pale) !important; }
.company-demo-person { grid-column: 2; align-self: end; }
.company-demo-person img {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border: 1px solid var(--line-strong);
  object-fit: cover;
  filter: grayscale(1);
}
.company-demo-person small {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.company-demo-note { margin-top: 15px !important; color: var(--soft); font-size: var(--text-caption); }

@media (max-width: 760px) {
  .company-product-demo-head { grid-template-columns: 1fr; gap: 12px; }
  .company-demo-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .company-demo-tabs button { min-width: 0; padding-inline: 10px; }
  .company-demo-steps { grid-template-columns: 1fr; }
  .company-demo-steps > li { min-height: 164px; border-right: 0; border-bottom: 1px solid var(--line); }
  .company-demo-steps > li:last-child { border-bottom: 0; }
}


@media (max-width: 900px) {
  .compare-section { padding: 56px 6vw 52px; }
  .compare-scroll { margin-top: 32px; }
  .compare-table th, .compare-table td { padding: 16px 18px; }
}

.hero-home { display: none; }
/* Both the toggle AND the layout live here, and nowhere else.
   `display` must not appear in the .hero-home block further down: that block comes later in the
   file with the same specificity as `.hero-home { display: none }` above, so declaring flex
   there beat the none and rendered the home hero on the student, company and referral pages
   too. The column distributes the space: headline high, paths low enough to read as a separate
   decision, and margin-top:auto on the cue anchors the bottom edge. */
body[data-audience="home"] .hero-home {
  display: flex;
  flex-direction: column;
}
/* The official one-liner gets real weight in the hero — larger, ink-dark, tight measure. */
/* Subtle gold "signal from noise" field behind the home hero. Sits above the soft
   background glows (z-index:-1) but below the content, which we lift to z-index:1. */
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The three light pages: the field is atmosphere, so it is held to the top of the section and
   faded out before it reaches the copy. It must never compete with a word. */
.hero-student, .hero-company, .hero-university { position: relative; }
.hero-student > *:not(.hero-field),
.hero-company > *:not(.hero-field),
.hero-university > *:not(.hero-field) { position: relative; z-index: 1; }
/* Only the mask lifts. height: 100% was the first attempt and it was wrong: this section is
   2000px tall because it contains the two cards below, so the canvas became 2000px, the figure
   centred itself at 1000px and was drawn perfectly a thousand pixels below the fold. The band
   height was never the problem; the mask fading out exactly where the legs go was. */
.hero-company.is-figure .hero-field {
  opacity: .95;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-student .hero-field,
.hero-company .hero-field,
.hero-university .hero-field {
  height: clamp(280px, 46vh, 520px);
  transition: height var(--dur) var(--ease), opacity var(--dur) var(--ease);
  inset: 0 0 auto;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
.hero-home > *:not(.hero-field) { position: relative; z-index: 1; }
body[data-audience="home"] .hero-student,
body[data-audience="home"] .hero-company,
body[data-audience="home"] .hero-university { display: none; }
/* on home, hide every audience-specific block; keep only the brand narrative */
body[data-audience="home"] .audience-content,
body[data-audience="home"] .value-band,
body[data-audience="home"] #why,
body[data-audience="home"] .stat-band,
body[data-audience="home"] .batches-section,
body[data-audience="home"] .final-cta { display: none; }
/* the core story + "What Covenda is" belong to home, not the student surface */
body[data-audience="student"] .feature-band { display: none; }

/* ---- Home hero: brand statement + path chooser ---- */
.home-kicker {
  margin: 0 0 16px;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.home-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1040px);
  margin: 48px auto 0;
  /* No margin here: on the home hero this is overridden by `.hero-home .home-paths`, which is
     more specific. Set the gap there. */
}
.home-path {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 20px 22px;
  border-radius: 0;
  cursor: pointer;
}
.home-path-icon { width: 26px; height: 26px; color: var(--gold-deep); flex: none; }
.home-path span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.home-path strong { font-size: var(--text-body); letter-spacing: var(--ls-body); }
.home-path small { color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.home-path-go { width: 17px; height: 17px; color: var(--gold); flex: none; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.home-path:hover { border-color: var(--gold); }
.home-path:hover .home-path-go { transform: translateX(3px); opacity: 1; }

@media (max-width: 760px) {
  .home-paths { grid-template-columns: 1fr; width: min(100%, 460px); }
}

/* ---- Feeder builder: roster + endorsement actions ---- */
.roster-endorse-note { display: grid; gap: 7px; color: #31312e; font-size: var(--text-body); font-weight: var(--weight-medium); }
.roster-endorse-note span { color: var(--soft); font-weight: var(--weight-regular); }
/* Staked-vouch note: names the referral as a wager tied to real outcomes. */
.roster-stake-note { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid rgba(192,138,34,.25); border-radius: 0; background: var(--gold-pale); color: var(--gold-deep); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-regular); }
.roster-stake-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.roster-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.roster-actions .roster-submit,
.roster-actions .roster-endorse { min-height: 52px; margin-top: 0; }
.roster-actions .roster-endorse svg { width: 17px; height: 17px; }
@media (max-width: 560px) {
  .roster-actions { display: grid; }
}

/* ---- Two-tier credibility ladder (student surface) ---- */
/* This is a direct child of .why-section, whose `> div` rule (a) lays children out as
   a 2-col copy|visual grid and (b) sets `margin: 0 auto` — which zeroes the top margin
   below, jamming this section against the one above it. Both need a higher-specificity
   override (`.why-section > .credibility-ladder` beats `.why-section > div`): opt out of
   the grid, and restore a generous top gap so the heading sits lower with room to breathe. */
.credibility-ladder { margin-top: clamp(40px, 5vw, 72px); }
.why-section > .credibility-ladder { display: block; margin-top: clamp(48px, 6vw, 88px); }
/* The dead air above the section becomes a statement: a big display-serif gold "2". */
/* Big italic display numeral. line-height:.85 cropped the glyph's ascender under
   background-clip:text; give it a full line box + a little top padding so nothing clips. */
.cred-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.cred-door { padding: clamp(20px, 2.4vw, 28px); border-radius: 0; }
.cred-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 0;
  font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption);
  margin-bottom: 12px;
}
.cred-tag svg { width: 15px; height: 15px; }
.cred-tag-endorsed { background: var(--gold-pale); color: var(--gold-deep); border: 1px solid var(--gold-light); }
.cred-tag-building { background: #f3f3ef; color: #4c4c48; border: 1px solid var(--line); }
.cred-door > p { margin: 0 0 16px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.cred-marker {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px;
  padding: 12px 14px; border-radius: 0;
  background: rgba(255,255,255,.7); border: 1px solid var(--gold-light);
}
.cred-marker svg { grid-row: span 2; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--gold); color: #fff; }
.cred-marker span { font-size: var(--text-body); color: var(--ink); }
.cred-marker b { font-weight: var(--weight-bold); }
.cred-marker small { grid-column: 2; color: var(--soft); font-size: var(--text-caption); }
.cred-marker-plain { border-color: var(--line); background: rgba(255,255,255,.5); }
.cred-marker-plain svg { background: #e7e3d8; color: var(--gold-deep); }
.cred-marker-plain span { grid-column: 2; }

.cred-rungs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cred-rungs li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-right: 14px; }
.cred-rungs li:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; left: 40px; right: 6px; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(192,138,34,.25));
}
.cred-rungs li > span {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gold); background: #fff; color: var(--gold-deep);
  font-size: var(--text-body); font-weight: var(--weight-medium);
}
.cred-rungs strong { display: block; font-size: var(--text-body); letter-spacing: var(--ls-body); }
.cred-rungs small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.cred-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 24px 0 0; padding: 14px 16px;
  border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light);
  color: #4a4436; font-size: var(--text-body); line-height: var(--lh-body);
}
.cred-note svg { flex: none; width: 17px; height: 17px; color: var(--gold-deep); margin-top: 1px; }

@media (max-width: 760px) {
  .cred-doors { grid-template-columns: 1fr; }
  .cred-rungs { grid-template-columns: 1fr; }
  .cred-rungs li { flex-direction: row; align-items: center; padding-right: 0; }
  .cred-rungs li:not(:last-child)::after { display: none; }
}

/* ---- F3: partner referral banner (student hero) + partner's shareable link ---- */
.referral-banner {
  display: flex; align-items: center; gap: 16px;
  width: min(100%, 760px); margin: 0 auto 26px;
  padding: 15px 18px; border-radius: 0;
  background: var(--gold-pale); border: 1px solid var(--gold-light); text-align: left;
}
.referral-banner-mark { flex: none; width: 26px; height: 26px; color: var(--gold-deep); }
.referral-banner p { margin: 0; flex: 1; color: #4a4436; font-size: var(--text-body); line-height: var(--lh-body); }
.referral-banner-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.referral-banner-dismiss {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--muted);
}
.referral-banner-dismiss:hover { color: var(--gold-deep); border-color: var(--gold-light); }
.referral-banner-dismiss svg { width: 15px; height: 15px; }

.referral-link-section { border-top: 1px solid var(--line); padding-top: 16px; }
.referral-link-icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--gold-deep); }
.referral-link-help { margin: 6px 0 12px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.referral-link-row { display: flex; gap: 10px; }
.referral-link-input {
  flex: 1; min-width: 0; padding: 11px 14px; font-size: var(--text-body);
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--gold-pale); color: var(--ink); font-family: var(--font-mono);
}

/* ---- F5: shareable credential card ---- */
.credential-dialog { max-width: 720px; }
.credential-preview {
  border-radius: 0; overflow: hidden; margin-top: 18px;
  border: 1px solid var(--line); background: #17130d; line-height: 0;
}
.credential-preview canvas { display: block; width: 100%; height: auto; }
.credential-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.credential-actions .gold-button, .credential-actions .outline-button { flex: 1 1 auto; justify-content: center; }

/* ---- F6: feeder cohort dashboard (educators workspace) ---- */
.cohort-dashboard { margin-top: 22px; padding: clamp(20px, 2.4vw, 28px); }
.cohort-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cohort-head small { display: block; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.cohort-head h2 { margin: 4px 0 0; font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.cohort-total { flex: none; padding: 6px 13px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); }
.cohort-empty { margin: 0; color: var(--muted); font-size: var(--text-body); }
.cohort-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.cohort-rung { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 0; border: 1px solid var(--line); background: #fff; }
.cohort-rung.is-active { border-color: var(--gold-light); background: var(--gold-pale); }
.cohort-rung-count { font-size: var(--text-heading); font-weight: var(--weight-bold); letter-spacing: var(--ls-heading); color: var(--ink); }
.cohort-rung.is-active .cohort-rung-count { color: var(--gold-deep); }
.cohort-rung-label { font-size: var(--text-caption); color: var(--muted); line-height: var(--lh-caption); }
.cohort-subhead { margin: 0 0 10px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); }
.cohort-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cohort-bar-head { display: flex; justify-content: space-between; font-size: var(--text-body); margin-bottom: 6px; }
.cohort-bar-value { color: var(--muted); }
.cohort-bar-track { height: 8px; border-radius: 0; background: var(--gold-pale); overflow: hidden; }
.cohort-bar-track i { display: block; height: 100%; border-radius: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.cohort-note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.cohort-note svg { flex: none; width: 15px; height: 15px; color: var(--gold-deep); margin-top: 1px; }
.cohort-note b { color: var(--gold-deep); }

/* ---- §9 public partner cohort page (cohort.html) ---- */
.cohort-page { max-width: 860px; margin: 0 auto; padding: 28px clamp(18px, 5vw, 40px) 64px; }
.cohort-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(30px, 6vw, 60px); }
.cohort-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); color: var(--ink); text-decoration: none; }
.cohort-back { color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); text-decoration: none; }
.cohort-back:hover { text-decoration: underline; }
.cohort-hero { margin-bottom: clamp(24px, 4vw, 40px); }
.cohort-hero h1 { margin: 8px 0 0; font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.cohort-hero-sub { margin: 14px 0 0; max-width: 60ch; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.cohort-panel { padding: 0; }
.cohort-funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cohort-stat { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: 0; background: #fff; }
.cohort-stat.is-active { border-color: var(--gold-light); background: var(--gold-pale); }
.cohort-stat-count { font-size: var(--text-display); font-weight: var(--weight-bold); letter-spacing: var(--ls-display); line-height: var(--lh-display); color: var(--ink); }
.cohort-stat.is-active .cohort-stat-count { color: var(--gold-deep); }
.cohort-stat-label { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--ink); }
.cohort-stat-note { color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
/* Positioning contrast — curated signal vs. the open pile */
.contrast-section { position: relative; padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 40px); }
/* Thin gold rule dividing the Covenda-tree band above from "It's noise." */
.contrast-section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 72vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent); }
.contrast-inner { max-width: 1100px; margin: 0 auto; }
.contrast-head { max-width: 760px; }
.contrast-head h2 { margin: 10px 0 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.contrast-head > p { margin: 16px 0 0; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.contrast-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.contrast-col { padding: clamp(24px, 2.8vw, 34px); border: 1px solid var(--line); border-radius: 0; background: #fff; }
.contrast-col-new { border-color: var(--gold-light); background: linear-gradient(180deg, var(--gold-pale), #fff 55%); }
.contrast-col-tag { margin: 0 0 16px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.contrast-col-old .contrast-col-tag { color: var(--soft); }
.contrast-col-new .contrast-col-tag { color: var(--gold-deep); }
.contrast-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contrast-col li { position: relative; padding-left: 30px; font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); }
.contrast-col li::before { position: absolute; left: 0; top: 0; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; font-size: var(--text-caption); font-weight: var(--weight-bold); }
.contrast-col-old li { color: var(--muted); }
.contrast-col-old li::before { content: "✕"; background: #f1efe9; color: var(--soft); }
.contrast-col-new li::before { content: "✓"; background: var(--gold); color: #fff; }
.cohort-firms { margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--gold-pale); color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); }
.cohort-breakdown { margin-top: clamp(28px, 4vw, 44px); }
.cohort-breakdown h2 { margin: 0 0 16px; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.cohort-empty { margin: clamp(30px, 6vw, 56px) 0; padding: clamp(28px, 4vw, 44px); border: 1px dashed var(--line-strong); border-radius: 0; text-align: center; }
.cohort-empty-mark { font-size: var(--text-heading); color: var(--gold-light); }
.cohort-empty h2 { margin: 10px 0 0; font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.cohort-empty p { margin: 12px auto 22px; max-width: 52ch; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.cohort-foot { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(24px, 4vw, 36px); border-top: 1px solid var(--line); text-align: center; }
.cohort-foot p { margin: 0 auto 22px; max-width: 56ch; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.cohort-foot p strong { color: var(--ink); }
@media (max-width: 620px) { .cohort-funnel { grid-template-columns: 1fr; } }

/* ---- F4: student proof record ("where you stand") ---- */
.proof-record { margin-top: 22px; padding: clamp(20px, 2.4vw, 28px); }
.proof-record-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.proof-record-head small { display: block; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.proof-record-head h2 { margin: 4px 0 0; font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.proof-record-standing { flex: none; padding: 6px 14px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); }
.proof-record-standing[data-started="false"] { background: #fff; border-color: var(--line); color: var(--muted); }
.proof-record-endorsement { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); color: #4a4436; font-size: var(--text-body); line-height: var(--lh-body); }
.proof-record-endorsement svg { flex: none; width: 16px; height: 16px; color: var(--gold-deep); }
.proof-record-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.proof-rung { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 0; border: 1px solid var(--line); background: #fff; }
.proof-rung.is-reached { border-color: var(--gold-light); }
.proof-rung.is-current { border-color: var(--gold-light); background: var(--gold-pale); }
.proof-rung-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--muted); font-size: var(--text-body); font-weight: var(--weight-medium); }
.proof-rung.is-reached .proof-rung-dot { border-color: var(--gold); background: #fff; color: var(--gold-deep); }
.proof-rung.is-current .proof-rung-dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.proof-rung-dot svg { width: 15px; height: 15px; }
.proof-rung-label { font-size: var(--text-caption); color: var(--muted); line-height: var(--lh-caption); }
.proof-rung.is-current .proof-rung-label { color: var(--ink); font-weight: var(--weight-medium); }
.proof-record-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.proof-record-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.proof-record-note svg { flex: none; width: 15px; height: 15px; color: var(--gold-deep); margin-top: 1px; }
.proof-record-foot .gold-button { flex: none; }

@media (max-width: 620px) {
  .referral-banner { flex-wrap: wrap; }
  .referral-link-row { flex-direction: column; }
  .cohort-ladder { grid-template-columns: 1fr 1fr; }
  .cohort-head { flex-wrap: wrap; }
  .proof-record-ladder { grid-template-columns: 1fr 1fr; }
  .proof-record-head { flex-wrap: wrap; }
  .proof-record-foot { flex-direction: column; }
}

/* Feature 1 — student profile credibility panel */
.profile-credibility { margin-top: 18px; }
.profile-cred-kicker { margin: 0 0 8px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.profile-cred-card { padding: 16px 18px; border-radius: 0; border: 1px solid var(--line); background: #fff; }
.profile-cred-card.is-endorsed { border-color: var(--gold-light); background: var(--gold-pale); }
.profile-cred-card > * { margin: 0; }
.profile-cred-card > * + * { margin-top: 8px; }
.profile-cred-who { font-size: var(--text-body); color: var(--ink); }
.profile-cred-note { font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }

/* Step 1 — profile work-history evidence rows */
.profile-evidence-list { margin: 0; display: grid; gap: 10px; }
.profile-evidence-list > div { display: grid; grid-template-columns: 132px 1fr; gap: 12px; }
.profile-evidence-list dt { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--gold-deep); }
.profile-evidence-list dd { margin: 0; font-size: var(--text-body); color: var(--muted); line-height: var(--lh-body); }
.profile-credibility + .profile-credibility { margin-top: 14px; }
@media (max-width: 560px) { .profile-evidence-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Step 4 — roles + applications */
body[data-audience="home"] .roles-section,
body[data-audience="company"] .roles-section,
body[data-audience="university"] .roles-section { display: none; }
.roles-section { padding: clamp(56px, 7vw, 100px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
.roles-section > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: clamp(28px, 4vw, 48px); }
.role-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 26px; border-radius: 0; }
.role-function { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.role-title { margin: 0; font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.role-company { margin: 0; font-size: var(--text-caption); color: var(--gold-deep); }
.role-desc { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); flex: 1; }
.role-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.role-skill { padding: 4px 10px; border-radius: 0; border: 1px solid var(--line); background: #fff; font-size: var(--text-caption); color: #55554f; }
.role-apply { margin-top: 8px; }
.role-apply-summary { padding: 14px 16px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); margin-bottom: 4px; }
.role-apply-role { margin: 0; font-size: var(--text-body); color: var(--ink); }
.role-apply-desc { margin: 6px 0 0; font-size: var(--text-body); color: var(--muted); line-height: var(--lh-body); }

/* =====================================================================
   UI polish + credibility framework Steps 5/6/3 (appended so these rules
   win the cascade over the base rules they intentionally refine).
   ===================================================================== */

/* ---- "This is a preview, not an account" banner on the local workspace ---- */
.preview-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--gold-light);
  background: linear-gradient(100deg, var(--gold-pale), #fff);
}
.preview-banner > svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--gold-deep); }
.preview-banner > div { flex: 1 1 340px; min-width: 0; }
.preview-banner strong { display: block; font-size: var(--text-body); letter-spacing: var(--ls-body); }
.preview-banner span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.preview-banner .gold-button { flex: 0 0 auto; text-decoration: none; }
@media (max-width: 720px) {
  .preview-banner { gap: 10px; }
  .preview-banner .gold-button { width: 100%; justify-content: center; }
}

/* ---- Vertical-first narrowing (industry → focus → the specific work) ---- */
.narrow-flow { display: grid; gap: clamp(16px, 2vw, 24px); width: min(100%, 760px); margin: 0 auto clamp(18px, 2.4vw, 28px); }
.narrow-round { display: grid; gap: 10px; }
.narrow-label { margin: 0; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.narrow-options { display: flex; flex-wrap: wrap; gap: 9px; }
.narrow-option {
  padding: 11px 17px; border: 1px solid var(--line-strong); border-radius: 0;
  background: rgba(255,255,255,.82); color: var(--ink); font-family: inherit; font-size: var(--text-body);
  font-weight: var(--weight-medium); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.narrow-option:hover { border-color: var(--gold); }
.narrow-option.is-selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); font-weight: var(--weight-medium); box-shadow: 0 0 0 3px rgba(192,138,34,.12); }
.narrow-option:focus-visible { outline: 3px solid rgba(192,138,34,.28); outline-offset: 2px; }
/* §8 Pinterest-style additive narrowing grid: one flex-wrap flow; level distinguished by scale. */
.narrow-grid { display: flex; flex-wrap: wrap; gap: 9px; width: min(100%, 760px); margin: 0 auto; }
/* §8: the Pinterest narrowing IS the picker now — hide the redundant student-facing work-type
   fallback (kept in the DOM so its wiring/data stays intact; work_types derive from the tiles). */
#narrowFallback { display: none; }
.narrow-tile { padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 0; background: #fff; color: var(--ink); font-size: var(--text-body); font-weight: var(--weight-medium); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.narrow-tile:hover { border-color: var(--gold); }
.narrow-tile.is-selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); font-weight: var(--weight-medium); }
.narrow-tile:focus-visible { outline: 3px solid rgba(192,138,34,.28); outline-offset: 2px; }
.narrow-tile.narrow-l2 { padding: 8px 13px; font-size: var(--text-caption); color: var(--muted); }
.narrow-tile.narrow-l2.is-selected { color: var(--gold-deep); }
.narrow-tile.narrow-l3 { padding: 7px 12px; font-size: var(--text-caption); border-style: dashed; color: var(--soft); }
.narrow-tile.narrow-l3.is-selected { color: var(--gold-deep); border-style: solid; }
.narrow-result { padding: 18px 20px; border: 1px solid var(--gold-light); border-radius: 0; background: linear-gradient(160deg, var(--gold-pale), #fff); }
.narrow-trail { margin: 0; font-family: var(--font-display); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--ink); }
.narrow-note { margin: 8px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.narrow-reset { margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--gold-deep); font-family: inherit; font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; }
.narrow-fallback { width: min(100%, 760px); margin: 0 auto; }
.narrow-fallback summary { cursor: pointer; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); list-style: none; text-align: center; }
.narrow-fallback summary::-webkit-details-marker { display: none; }
.narrow-fallback summary:hover { color: var(--gold-deep); }
.narrow-fallback[open] summary { margin-bottom: 14px; }

/* ---- "Why now" statistics band + founder note ---- */
.stat-band { padding: clamp(56px, 7vw, 104px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
/* On the student view the tree is hidden, so the founder note is the last thing in the
   band — trim the trailing padding so it doesn't leave a big gap before the next section. */
body[data-audience="student"] .stat-band { padding-bottom: clamp(24px, 3vw, 44px); }
body[data-audience="company"] .stat-band,
body[data-audience="university"] .stat-band { display: none; }
.stat-band-inner { width: min(100%, var(--content)); margin: 0 auto; }
.stat-band-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.stat-band-head > p:last-child { margin: 16px 0 0; max-width: 62ch; color: var(--muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.stat-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; }
.stat-list li { display: grid; gap: 9px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 0; background: linear-gradient(170deg, var(--gold-pale), #fff); }
.stat-list b { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--gold-deep); }
.stat-list span { color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.stat-list cite { font-style: normal; color: var(--soft); font-size: var(--text-caption); }
.founder-note { margin: clamp(30px, 4vw, 44px) 0 0; padding: 26px 30px; border-left: 3px solid var(--gold); border-radius: 0; background: var(--gold-pale); }
.founder-note p { margin: 0; font-family: var(--font-sans); font-size: var(--text-heading); line-height: var(--lh-heading); color: var(--ink); }
.founder-note cite { display: block; margin-top: 14px; font-style: normal; color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); }
.stat-note { display: flex; align-items: flex-start; gap: 9px; margin: 22px 0 0; color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body); }
.stat-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--gold-deep); }

/* ---- Covenda tree: the model in one figure ----
   Sizes off the container (cqw) so the figure and its cards scale together. Uses the
   site tokens rather than its own font/colour stack so it sits inside the band. */
/* ---- "Vouched in. Matched out." sourcing/matching flow (company audience, #how). ----
   Flat + monospace per the approved mockup: 1px hairlines, no gradients/shadows; gold accent
   ONLY on the engine + top-candidates nodes. Site tokens, light-theme site. */
.match-flow { max-width: 660px; margin: clamp(48px, 6vw, 84px) auto 0; }
/* Inside the narrow flow column the two-column section-heading collapses awkwardly (splits the
   kicker onto two lines, floats the title off-center). Force a single centered stack — the
   kicker sits inline above the title, the intro reads as a wide horizontal line, and the whole
   header leads cleanly into the centered diagram. `grid-template-columns: none` kills the grid
   outright so the block layout is bulletproof against the base .section-heading rule. */
.match-flow .section-heading { display: block; grid-template-columns: none; text-align: center; max-width: 620px; margin: 0 auto clamp(26px, 3.4vw, 38px); }
.match-flow .section-heading .feature-kicker { margin-bottom: 12px; }
.match-flow .section-heading h2 { font-size: var(--text-heading); line-height: var(--lh-heading); }
.match-flow .section-heading p:last-child { max-width: 52ch; margin: 14px auto 0; font-size: var(--text-body); line-height: var(--lh-body); }
.mflow { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
.mf-node { border: 1px solid var(--line-strong); background: #fff; padding: 13px 16px; text-align: center; border-radius: 0; }
.mf-label { display: block; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--ink); }
.mf-sub { display: block; margin-top: 5px; font-size: var(--text-caption); letter-spacing: var(--ls-caption); color: var(--muted); text-transform: none; }
.mf-solo, .mf-pool, .mf-engine, .mf-top { align-self: center; width: min(280px, 100%); }
.mf-pool { border-color: var(--ink); }
.mf-engine { border-color: var(--gold-deep); background: var(--gold-pale); }
.mf-engine .mf-label { color: var(--gold-deep); }
.mf-top { border-color: var(--gold-deep); background: var(--gold); box-shadow: 0 6px 18px -12px rgba(160, 125, 28, .7); }
.mf-top .mf-label { color: #fffdf8; }
.mf-conn { display: flex; flex-direction: column; align-items: center; line-height: var(--lh-body); }
.mf-stalk { width: 2px; height: 22px; background: var(--line-strong); }
.mf-chev { margin-top: -3px; font-size: var(--text-caption); color: var(--line-strong); }
.mf-conn-sm .mf-stalk { height: 14px; }
.mf-branch { position: relative; }
.mf-stem { display: block; width: 2px; height: 22px; margin: 0 auto; background: var(--line-strong); }
.mf-legs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 22px; }
.mf-legs::before { content: ""; position: absolute; left: 16.667%; right: 16.667%; height: 2px; background: var(--line-strong); }
.mf-branch-down .mf-legs::before { top: 0; }
.mf-branch-up .mf-legs::before { bottom: 0; }
.mf-leg { width: 2px; height: 100%; background: var(--line-strong); justify-self: center; }
.mf-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2.4vw, 16px); }
.mf-lane { display: flex; flex-direction: column; text-align: center; gap: 0; }
.mf-ref { border-style: dashed; background: var(--paper, #faf9f6); }
.mf-ref .mf-label { font-size: var(--text-caption); letter-spacing: var(--ls-caption); color: var(--muted); }
.mf-foot { max-width: 560px; margin: clamp(22px, 3vw, 32px) auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body); text-align: center; }
.mf-foot b { color: var(--ink); font-weight: var(--weight-medium); }
@media (max-width: 560px) {
  .mf-lanes { grid-template-columns: 1fr; gap: 0; }
  .mf-lane + .mf-lane { position: relative; margin-top: 12px; padding-top: 12px; }
  .mf-lane + .mf-lane::before { content: "▼"; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: var(--text-caption); color: var(--line-strong); }
  .mf-legs { grid-template-columns: 1fr; }
  .mf-legs::before { display: none; }
  .mf-legs .mf-leg:nth-child(n+2) { display: none; }
  .mf-solo, .mf-pool, .mf-engine, .mf-top { min-width: 0; width: 100%; }
}
.covenda-tree { container-type: inline-size; width: 100%; margin: clamp(34px, 4vw, 54px) 0 0; color: var(--ink); }
/* The tree explains the model to a visitor deciding what Covenda is — a student who has
   already picked their path does not need it, so it stays on home only. */
body[data-audience="student"] .covenda-tree { display: none; }
.covenda-tree * { box-sizing: border-box; }
.ct-inner { padding: clamp(18px, 3cqw, 40px) clamp(12px, 2cqw, 28px) clamp(14px, 2.5cqw, 30px); }
.ct-head { text-align: center; margin-bottom: .6cqw; }
.ct-eyebrow { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ct-title { margin: clamp(4px, .5cqw, 10px) 0 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }
.ct-stage { position: relative; width: 100%; aspect-ratio: 1400 / 1000; margin: 0 auto; }
.ct-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.ct-card { position: absolute; width: clamp(164px, 20cqw, 288px); padding: clamp(12px, 1.3cqw, 18px) clamp(13px, 1.4cqw, 19px); border: 1px solid var(--line); border-radius: 0; background: #fffdf8; box-shadow: 0 12px 34px rgba(60,45,10,.09); }
.ct-k { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ct-t { margin: .4cqw 0 .5cqw; font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-caption); color: var(--ink); }
.ct-d { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--muted); }
.ct-chips { display: flex; flex-wrap: wrap; gap: clamp(4px, .45cqw, 7px); margin-top: .75cqw; }
.ct-chip { padding: clamp(3px, .35cqw, 5px) clamp(6px, .7cqw, 10px); border: 1px solid var(--gold-light); border-radius: 0; background: var(--gold-pale); color: var(--gold-deep); font-size: var(--text-caption); white-space: nowrap; }
.ct-card--canopy { top: 0; left: 0; }
.ct-card--trunk { top: 38%; right: 0; }
.ct-card--roots { bottom: 0; left: 0; }
.ct-card--nutrients { bottom: 0; right: 0; }
.ct-glow { animation: covendaShimmer 6s ease-in-out infinite; }
@keyframes covendaShimmer { 0%, 100% { opacity: .48; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .ct-glow { animation: none; opacity: .52; } }
/* Narrow: corner-anchored cards would sit on top of the figure, so let the stage flow
   and stack the cards underneath it instead. */
@media (max-width: 760px) {
  .ct-stage { position: static; aspect-ratio: auto; display: grid; gap: 12px; }
  .ct-svg { position: static; width: 100%; height: auto; aspect-ratio: 1400 / 1000; }
  .ct-card { position: static; width: 100%; }
  .ct-leader { display: none; }
}

/* ---- Fix cramped dialogs -------------------------------------------------
   The single-step dialogs (quick join / request endorsement / role apply /
   credential) reuse .form-dialog but never got the body padding the multi-step
   forms get from .form-step, so their fields sat flush against the panel edges.
   Give the body a consistent 30px inset and a little more vertical rhythm. */
.quick-join-dialog > form > .dialog-copy,
.quick-join-dialog > form > .role-apply-summary,
.quick-join-dialog > form > .field-grid,
.quick-join-dialog > form > .consent-row,
.quick-join-dialog > form > .quick-join-actions,
.credential-dialog > .dialog-copy,
.credential-dialog > .credential-preview,
.credential-dialog > .credential-actions { margin-left: 30px; margin-right: 30px; }
.quick-join-dialog > form > .dialog-copy { margin-top: 6px; margin-bottom: 18px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.quick-join-dialog > form > .role-apply-summary { margin-top: 8px; margin-bottom: 18px; }
.quick-join-dialog > form > .field-grid { gap: 16px 18px; }
.quick-join-dialog > form > .consent-row { margin-top: 16px; }
.quick-join-dialog > form > .quick-join-actions { margin-top: 22px; margin-bottom: 4px; padding-bottom: 28px; }
.quick-join-dialog > .quick-join-done { padding: 6px 30px 26px; }
@media (max-width: 560px) {
  .quick-join-dialog > form > .dialog-copy,
  .quick-join-dialog > form > .role-apply-summary,
  .quick-join-dialog > form > .field-grid,
  .quick-join-dialog > form > .consent-row,
  .quick-join-dialog > form > .quick-join-actions,
  .credential-dialog > .dialog-copy,
  .credential-dialog > .credential-preview,
  .credential-dialog > .credential-actions { margin-left: 20px; margin-right: 20px; }
  .quick-join-dialog > .quick-join-done { padding: 6px 20px 22px; }
}

/* ---- Bigger "Rethinking Internships" gold square -------------------------- */
@media (min-width: 900px) {
  .feature-band-inner { grid-template-columns: minmax(0, 1fr) minmax(440px, 600px); }
}
.ico-kicker { top: 30px; font-size: var(--text-caption); letter-spacing: var(--ls-caption); opacity: .8; }

/* ---- Reusable gold tile (the same gold square motif, reused elsewhere) -----
   Shares the feature panel's gradient + grain. Static (no canvas) so it can be
   dropped into any section cheaply; the network-of-nodes art echoes the
   icosahedron's "students connected" meaning. */
.gold-tile {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  /* Third copy of the same stack. Same token as the other two now. */
  background: var(--gold-surface);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 14px 40px rgba(169,130,47,.14);
}
.gold-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.gold-tile--banner { aspect-ratio: 16 / 4.2; border-radius: 0; }
/* No figure inside — the tile is the gold field plus one centred label. */
.gold-tile-kicker {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  pointer-events: none;
}

/* Batches section: reuse the gold square as a banner accent above the grid. */

/* Trace dialog body inset (this dialog has no <form>, so the form-child rules
   above don't reach it). */
.quick-join-dialog > .dialog-copy { margin: 10px 30px 16px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.quick-join-dialog > .trace-chain { margin: 0 30px 26px; }
@media (max-width: 560px) {
  .quick-join-dialog > .dialog-copy { margin-left: 20px; margin-right: 20px; }
  .quick-join-dialog > .trace-chain { margin-left: 20px; margin-right: 20px; }
}

/* Section header with a square gold tile beside the copy (Steps 6 & 3). */
.gold-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: clamp(30px, 4vw, 48px); }
.gold-header .gold-tile { display: none; }
@media (min-width: 860px) {
  .gold-header { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .gold-header .gold-tile { display: block; }
}
.gold-header h2 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.gold-header .feature-kicker { margin: 0 0 14px; }
.gold-header p { margin: 16px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); max-width: 60ch; }

/* ---- Step 5: compatibility score inside the apply dialog ------------------ */
.fit-block { margin-top: 16px; padding: 16px; border-radius: 0; background: #fff; border: 1px solid var(--gold-light); }
.fit-illustrative { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.fit-illustrative svg { width: 13px; height: 13px; }
.fit-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .fit-scores { grid-template-columns: 1fr; } }
.fit-score { padding: 12px 13px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); }
.fit-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fit-score-term { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.fit-score-value { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--ink); }
.fit-score-value small { font-size: var(--text-display); color: var(--soft); font-family: inherit; }
.fit-meter { height: 7px; margin: 9px 0 8px; border-radius: 0; background: rgba(169,130,47,.16); overflow: hidden; }
.fit-meter-fill { height: 100%; border-radius: 0; background: linear-gradient(90deg, #C9A24B, #8b5709); width: 0; transition: width .6s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .fit-meter-fill { transition: none; } }
.fit-evidence { margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--muted); }
.fit-note { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-body); line-height: var(--lh-body); color: var(--soft); }
.fit-note svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; color: var(--gold-deep); }

/* ---- Step 6: company candidate browser ----------------------------------- */
#candidates { display: none; }
body[data-audience="company"] #candidates { display: block; }
.candidates-section { padding: clamp(48px, 6vw, 88px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
.candidates-section > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.cand-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; padding: 18px; border: 1px solid var(--line); border-radius: 0; background: var(--gold-pale); }
.cand-filter { display: grid; gap: 5px; }
.cand-filter > span { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--gold-deep); letter-spacing: var(--ls-caption); }
.cand-filter select { min-height: 42px; min-width: 150px; background: #fff; }
.cand-count { margin: 18px 0 4px; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--muted); }
.cand-count b { color: var(--ink); }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 14px; }
.candidate-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 0; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(25,22,17,.03); }
.cand-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cand-handle { margin: 0; font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); }
.cand-function { margin: 2px 0 0; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.cand-score { flex: 0 0 auto; display: grid; place-items: center; text-align: center; min-width: 58px; padding: 7px 8px; border-radius: 0; background: var(--gold-pale); border: 1px solid var(--gold-light); }
.cand-score b { font-family: var(--font-sans); font-size: var(--text-subhead); line-height: var(--lh-subhead); color: var(--ink); }
.cand-score span { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.cand-endorser { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 0; background: var(--gold-pale); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--ink); }
.cand-endorser svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--gold-deep); }
.cand-endorser b { font-weight: var(--weight-medium); }
.cand-club { margin: 0; font-size: var(--text-caption); color: var(--muted); }
.cand-club b { color: var(--ink); font-weight: var(--weight-medium); }
.cand-club .cand-club-record { color: var(--success); font-weight: var(--weight-medium); }
.cand-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-skill { padding: 3px 10px; border-radius: 0; border: 1px solid var(--line); background: #fff; font-size: var(--text-caption); color: #55554f; }
.cand-skill.is-match { border-color: var(--gold-light); background: var(--gold-pale); color: var(--gold-deep); font-weight: var(--weight-medium); }
.cand-trace { margin-top: 0; }
/* Expandable candidate mini-profile. */
.cand-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.candidate-card.is-open { border-color: rgba(192,138,34,.45); }
.cand-detail { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cand-detail-block h4 { margin: 0 0 6px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.cand-detail-block ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: var(--text-caption); line-height: var(--lh-caption); }
.cand-detail-concern { margin: 0; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 0; background: var(--gold-pale); color: #5c4a26; font-size: var(--text-caption); line-height: var(--lh-caption); }
.cand-empty { margin-top: 18px; padding: 26px; border: 1px dashed var(--line-strong); border-radius: 0; text-align: center; color: var(--muted); font-size: var(--text-body); }
.cand-honest { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; padding: 14px 16px; border-radius: 0; border: 1px solid var(--line); background: var(--gold-pale); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--muted); }
.cand-honest svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--gold-deep); }

/* Referral-trace dialog */
.trace-chain { display: grid; gap: 14px; }
.trace-node { padding: 14px 16px; border-radius: 0; border: 1px solid var(--line); background: #fff; }
.trace-node.is-candidate { background: var(--gold-pale); border-color: var(--gold-light); }
.trace-node small { display: block; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.trace-node b { font-size: var(--text-body); }
.trace-node p { margin: 3px 0 0; font-size: var(--text-caption); color: var(--muted); line-height: var(--lh-caption); }
.trace-arrow { display: grid; place-items: center; color: var(--gold-deep); }
.trace-arrow svg { width: 18px; height: 18px; }
.trace-vouches { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.trace-vouch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 0; background: #fff; border: 1px solid var(--line); font-size: var(--text-caption); }
.trace-vouch span:first-child { color: var(--ink); font-weight: var(--weight-medium); }
.outcome-pill { flex: 0 0 auto; padding: 3px 10px; border-radius: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption); }
.outcome-pill.is-verified { background: rgba(36,117,58,.1); color: var(--success); }
.outcome-pill.is-working { background: var(--gold-pale); color: var(--gold-deep); }
.outcome-pill.is-progress { background: rgba(25,22,17,.05); color: var(--soft); }

/* ---- Step 3: referrer credibility + dashboard ---------------------------- */
#referrerDashboard { display: none; }
body[data-audience="university"] #referrerDashboard { display: block; }
.referrer-section { padding: clamp(48px, 6vw, 88px) var(--page-gutter); background: #fff; border-top: 1px solid var(--line); }
.referrer-section > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.referrer-cred-card { display: grid; gap: 16px; padding: 26px; border-radius: 0; border: 1px solid var(--gold-light); background: linear-gradient(180deg, var(--gold-pale), #fff); }
.referrer-cred-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.referrer-identity h3 { margin: 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.referrer-identity p { margin: 3px 0 0; font-size: var(--text-body); color: var(--muted); }
.referrer-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 0; background: #fff; border: 1px solid var(--gold-light); color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.referrer-badge svg { width: 14px; height: 14px; }
.referrer-meter-wrap { display: grid; gap: 7px; }
.referrer-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.referrer-meter-head b { font-size: var(--text-body); }
.referrer-meter-head span { font-size: var(--text-caption); color: var(--soft); }
.referrer-meter { height: 9px; border-radius: 0; background: rgba(169,130,47,.16); overflow: hidden; }
.referrer-meter-fill { height: 100%; border-radius: 0; background: linear-gradient(90deg, #C9A24B, #8b5709); width: 0; transition: width .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .referrer-meter-fill { transition: none; } }
.referrer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.referrer-stat { padding: 13px; border-radius: 0; background: #fff; border: 1px solid var(--line); text-align: center; }
.referrer-stat b { display: block; font-family: var(--font-sans); font-size: var(--text-heading); line-height: var(--lh-heading); color: var(--ink); }
.referrer-stat span { display: block; margin-top: 5px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.referrer-students { margin-top: 26px; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.referrer-students-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--gold-pale); }
.referrer-students-head h3 { margin: 0; font-size: var(--text-body); }
.referrer-students-head span { font-size: var(--text-caption); color: var(--muted); }
.referrer-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.referrer-row:last-child { border-bottom: 0; }
.referrer-row .r-name { font-size: var(--text-body); font-weight: var(--weight-medium); }
.referrer-row .r-fn { font-size: var(--text-caption); color: var(--muted); }
.status-pill { justify-self: end; padding: 4px 12px; border-radius: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.status-pill.is-endorsed { background: var(--gold-pale); color: var(--gold-deep); border: 1px solid var(--gold-light); }
.status-pill.is-working { background: rgba(36,117,58,.08); color: var(--success); }
.status-pill.is-verified { background: rgba(36,117,58,.14); color: var(--success); }
.referrer-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding: 14px 16px; border-radius: 0; border: 1px solid var(--line); background: var(--gold-pale); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--muted); }
.referrer-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--gold-deep); }
.referrer-note b { color: var(--ink); font-weight: var(--weight-medium); }

/* ---- Covenda tree: grows bottom -> top when it enters view. --------------------------
   Gated on JS-added classes so no-JS and reduced-motion always see the full tree:
   .ct-pre arms the hidden initial state; .ct-grow runs the sequence
   (roots -> trunk -> branches -> glow -> cards). */
#covendaModel.ct-pre .ct-roots path,
#covendaModel.ct-pre .ct-branches path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#covendaModel.ct-pre .ct-trunk { transform: scaleY(0); transform-origin: 700px 566px; }
#covendaModel.ct-pre .ct-glow, #covendaModel.ct-pre .ct-card { opacity: 0; }
/* The heading text (eyebrow + title) waits for the tree to finish forming, then fades in. */
#covendaModel.ct-pre .ct-head { opacity: 0; }

#covendaModel.ct-grow .ct-roots path { animation: ct-draw .9s ease-out forwards; }
#covendaModel.ct-grow .ct-roots path:nth-child(2), #covendaModel.ct-grow .ct-roots path:nth-child(5) { animation-delay: .25s; }
#covendaModel.ct-grow .ct-roots path:nth-child(3), #covendaModel.ct-grow .ct-roots path:nth-child(4),
#covendaModel.ct-grow .ct-roots path:nth-child(6), #covendaModel.ct-grow .ct-roots path:nth-child(7),
#covendaModel.ct-grow .ct-roots path:nth-child(8), #covendaModel.ct-grow .ct-roots path:nth-child(9) { animation-delay: .5s; }
#covendaModel.ct-grow .ct-trunk { animation: ct-rise .6s ease-out .8s forwards; }
#covendaModel.ct-grow .ct-branches path { animation: ct-draw .8s ease-out 1.3s forwards; }
#covendaModel.ct-grow .ct-branches path:nth-child(n+3) { animation-delay: 1.7s; }
#covendaModel.ct-grow .ct-branches path:nth-child(n+8) { animation-delay: 2s; }
#covendaModel.ct-grow .ct-glow { animation: ct-fade .9s ease-out 2s forwards; }
#covendaModel.ct-grow .ct-card { animation: ct-fade .7s ease-out forwards; }
#covendaModel.ct-grow .ct-card--nutrients { animation-delay: .5s; }
#covendaModel.ct-grow .ct-card--roots { animation-delay: .8s; }
#covendaModel.ct-grow .ct-card--trunk { animation-delay: 1.3s; }
#covendaModel.ct-grow .ct-card--canopy { animation-delay: 2.1s; }
/* Heading text arrives last — after roots, trunk, branches, glow and cards have all landed. */
#covendaModel.ct-grow .ct-head { animation: ct-fade .7s ease-out 2.9s forwards; }

@keyframes ct-draw { to { stroke-dashoffset: 0; } }
@keyframes ct-rise { to { transform: scaleY(1); } }
@keyframes ct-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #covendaModel.ct-pre .ct-roots path, #covendaModel.ct-pre .ct-branches path { stroke-dasharray: none; stroke-dashoffset: 0; }
  #covendaModel.ct-pre .ct-trunk { transform: none; }
  #covendaModel.ct-pre .ct-glow, #covendaModel.ct-pre .ct-card, #covendaModel.ct-pre .ct-head { opacity: 1; }
}

/* Dedup: the "Why now" stats + founder note + tree, and the "Why Covenda" contrast, are the
   general top-of-funnel pitch. They live on the HOME landing; once a visitor picks a path
   (student/company/university) the audience-specific flow shouldn't repeat them. */
body:not([data-audience="home"]) #whyNow,
body:not([data-audience="home"]) #why-covenda { display: none; }

/* ---- Student of the Week (flat, consent-first; hidden until real data). ---- */
body:not([data-audience="home"]) .spotlight-section { display: none; }
.spotlight-section { padding: clamp(48px, 7vw, 96px) var(--page-gutter); border-top: 1px solid var(--line); background: #fff; }
.spotlight-inner { max-width: 760px; margin: 0 auto; }
.spotlight-card { margin-top: clamp(22px, 3vw, 34px); padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line-strong); }
.spotlight-head { display: flex; gap: 16px; align-items: center; }
.spotlight-avatar { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line-strong); font-family: var(--font-display); font-size: var(--text-heading); color: var(--gold-deep); overflow: hidden; }
.spotlight-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-id h3 { margin: 0; font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.spotlight-id p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-body); }
.spotlight-verified { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); vertical-align: middle; }
.spotlight-tier { display: inline-block; margin-top: 8px; padding: 3px 9px; border: 1px solid var(--line-strong); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); }
.spotlight-tier.is-gold { border-color: var(--gold-deep); color: var(--gold-deep); }
.spotlight-tier.is-silver { color: #6b6b66; }
.spotlight-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.spotlight-skills span { padding: 5px 11px; border: 1px solid var(--line); font-size: var(--text-caption); color: #31312e; }
.spotlight-stats { margin: 14px 0 0; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.spotlight-project { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); font-size: var(--text-caption); }
.spotlight-project span { color: var(--muted); }
.spotlight-card .gold-button { margin-top: 18px; }

/* ---- A4 Talent Readiness Assessment (free pre-auth diagnostic). ------------
   Sized deliberately larger than the older dialogs: this is a read-out someone
   scans, so the axes get room and the type stays above 13px. ---------------- */
/* Sits directly under .prompt-links, which is centered — match it, or a single remaining
   link orphans itself against the left gutter while everything above it is centred. */
.hero-quiet-actions { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: center; }
.hero-quiet-actions .quiet-link { margin-top: 28px; }

.readiness-dialog { width: min(720px, calc(100vw - 28px)); }
.readiness-dialog .dialog-copy { margin: 0; padding: 18px 30px 0; color: var(--muted); font-size: var(--text-body); }
.readiness-dialog form { gap: 0; }
.readiness-dialog .field-grid { padding: 22px 30px 0; gap: 20px; }
.readiness-dialog .field-grid label { font-size: var(--text-body); gap: 9px; }
.readiness-toggles { display: grid; gap: 12px; padding: 22px 30px 0; }
.readiness-toggles .consent-row { font-size: var(--text-body); line-height: var(--lh-body); }
.readiness-dialog .form-message { padding: 16px 30px 0; }
.readiness-dialog .quick-join-actions { padding: 22px 30px 26px; }

.readiness-result { display: grid; max-height: inherit; overflow-y: auto; }
.readiness-axes { display: grid; gap: 14px; padding: 24px 30px 0; }
.readiness-axis { padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(255,255,255,.6); }
.readiness-axis header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.readiness-axis h3 { margin: 0; font-size: var(--text-body); letter-spacing: var(--ls-body); }
.readiness-axis header strong { font-family: var(--font-display); font-size: var(--text-heading); line-height: var(--lh-heading); color: var(--gold-deep); }
.readiness-band { margin: 6px 0 0; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption); }
.readiness-axis ul { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.readiness-axis li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: start; font-size: var(--text-body); line-height: var(--lh-body); }
.readiness-axis li svg { width: 15px; height: 15px; margin-top: 3px; }
.readiness-axis li.is-reason { color: #31312e; }
.readiness-axis li.is-reason svg { color: var(--success); }
.readiness-axis li.is-concern { color: var(--muted); }
.readiness-axis li.is-concern svg { color: var(--gold); transform: rotate(90deg); }

.readiness-profile { display: grid; gap: 6px; margin: 20px 30px 0; padding: 16px 20px; border: 1px solid var(--gold-light); border-radius: 0; background: var(--gold-pale); }
.readiness-profile small { color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--ls-caption-caps); }
.readiness-profile strong { font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); }

.readiness-foot { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin: 18px 30px 0; align-items: start; }
.readiness-foot svg { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); }
.readiness-foot p { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.readiness-foot strong { display: block; color: var(--ink); }
.readiness-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 30px 8px; }
.readiness-version { margin: 0; padding: 0 30px 26px; color: var(--soft); font-size: var(--text-caption); }

@media (max-width: 720px) {
  .readiness-dialog .field-grid { grid-template-columns: 1fr; }
  .readiness-dialog .dialog-copy,
  .readiness-dialog .field-grid,
  .readiness-toggles,
  .readiness-dialog .quick-join-actions,
  .readiness-axes,
  .readiness-actions { padding-left: 20px; padding-right: 20px; }
  .readiness-profile, .readiness-foot { margin-left: 20px; margin-right: 20px; }
  .readiness-version { padding-left: 20px; padding-right: 20px; }
  .readiness-actions .gold-button, .readiness-actions .outline-button { width: 100%; }
}

/* ---- Home-only: the two-sided problem. Generous type, short measure — this is the
       section that has to actually get read. ---------------------------------------- */

@media (max-width: 820px) {
}

/* ---- The qualification rail. Open, numbered and sequential so it cannot be confused
       with the framed work-trial carousel above. ----------------------------------- */
.batch-funnel .flow-demo-head { max-width: 760px; }
.batch-funnel .flow-demo-head > p:last-child { max-width: 34ch; }
.batch-funnel .bf-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 62px);
  align-items: start;
  margin-top: clamp(42px, 6vw, 76px);
}
.batch-funnel .bf-track::before {
  position: absolute;
  top: 51px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--gold), var(--success));
  content: "";
}
.bf-stage {
  position: relative;
  display: grid;
  grid-template-rows: 52px auto;
  gap: 0;
  min-width: 0;
}
.bf-n {
  position: relative;
  z-index: 1;
  width: max-content;
  padding-right: 11px;
  background: #fff;
  color: #c5c3ba;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
.bf-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 0;
  padding: 24px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.bf-card-batch,
.bf-card-trial { border: 0; background: transparent; }
.bf-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-caption);
  line-height: var(--lh-caption);
}
.bf-body { max-width: 24ch; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }

.bf-pool { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(100%, 260px); margin-top: 12px; }
.bf-pool i { aspect-ratio: 1; border-radius: 0; background: var(--line-strong); opacity: .42; }
.bf-pool i:nth-child(3n+1) { background: var(--gold); opacity: .9; }
.bf-batch { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: min(100%, 210px); margin-top: 12px; }
.bf-batch i { aspect-ratio: 1; border-radius: 0; border: 1px solid var(--gold-deep); background: rgba(192,138,34,.12); }

.bf-rails { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.bf-rails li { display: grid; grid-template-columns: 14px 1fr; gap: 5px; align-items: center; color: #4f4e48; font-size: var(--text-caption); }
.bf-rails svg { width: 13px; height: 13px; color: var(--gold-deep); }

.bf-badge {
  justify-self: start;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid var(--gold-deep);
  border-radius: 0;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.bf-badge.is-proof { border-color: var(--success); color: var(--success); }
.bf-arrow { display: none; }
.bf-foot { margin: clamp(25px, 3vw, 38px) 0 0; color: var(--soft); font-size: var(--text-caption); }

/* ── Step geometry (§23) ──────────────────────────────────────────────────────────────
   One mark per step, encoding the only thing that genuinely changes across the four: how much
   evidence exists. A loose point among scattered ones, then three being selected and linked,
   then a closed triangle with the work filled in at a vertex, then a fully linked form with
   every vertex solid. Built from the same triangulated language as the hero field, so it reads
   as this site rather than as clip art, and it fills the void each card carried above its
   bottom-aligned preview.

   Decorative in the accessibility sense: the step's own heading and preview say what it means,
   so these carry no accessible name. */
.proof-step-geo {
  align-self: center;
  justify-self: center;
  width: min(100%, 168px);
  height: auto;
  margin: 8px 20px;
  overflow: visible;
}
.proof-step-geo .g-dim { fill: var(--line-strong); }
.proof-step-geo .g-live { fill: var(--gold); }
.proof-step-geo .g-fill { fill: var(--gold-deep); }
.proof-step-geo .g-link { stroke: var(--gold); stroke-width: 1; opacity: .55; }
.proof-step-geo .g-face { fill: rgba(192,138,34,.07); stroke: none; }
.proof-step-geo .g-face.is-solid { fill: rgba(192,138,34,.13); }
/* The active step's mark lifts with it, so the geometry tracks the tab rather than sitting
   inert behind it. */
.proof-product-step .g-live,
.proof-product-step .g-fill { transition: r var(--dur) var(--ease); }
.proof-product-step.is-active .g-live { r: 5.5; }
.proof-product-step.is-active .g-link { opacity: .9; }
.proof-product-step.is-active .g-face { fill: rgba(192,138,34,.14); }
@media (prefers-reduced-motion: reduce) {
  .proof-product-step .g-live, .proof-product-step .g-fill { transition: none; }
}

/* ── The signature reveal ─────────────────────────────────────────────────────────────
   Four stages, in the order the process actually runs. The stagger is a multiple of
   --stage-index, set by the observer, so the sequence is declared here in one place instead
   of being scheduled by a chain of JS timers.

   Nothing moves the layout: opacity and a translate of a few pixels only, and the element
   keeps its box the whole time, so there is no shift as each stage lands. */
.js-reveal .batch-funnel .bf-stage,
.js-reveal .batch-funnel .bf-arrow {
  opacity: 0;
  translate: 0 14px;
}
.js-reveal .batch-funnel.is-sequenced .bf-stage,
.js-reveal .batch-funnel.is-sequenced .bf-arrow {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--dur) var(--ease) calc(var(--stage-index, 0) * 110ms),
    translate var(--dur) var(--ease) calc(var(--stage-index, 0) * 110ms);
}
/* The connecting line draws itself, so the arrow reads as the handoff it represents rather
   than as a static mark that happens to sit between two cards. */
.js-reveal .batch-funnel .bf-arrow-line { transform-origin: left center; scale: 0 1; }
.js-reveal .batch-funnel.is-sequenced .bf-arrow-line {
  scale: 1 1;
  transition: scale var(--dur) var(--ease) calc(var(--stage-index, 0) * 110ms + 60ms);
}
/* Progressive disclosure, not more copy: the detail line is the hover/focus state of the
   stage rather than body text printed under every card. Keyboard reaches it because the
   card is focusable, and any touch device gets it because the query below shows it outright. */
@media (hover: hover) and (pointer: fine) {
  .batch-funnel .bf-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .batch-funnel .bf-stage:hover .bf-body,
  .batch-funnel .bf-stage:focus-visible .bf-body,
  .batch-funnel .bf-stage:focus-within .bf-body {
    max-height: 6em;
    opacity: 1;
  }
}
.batch-funnel .bf-stage:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; }

/* Reduced motion: every stage is simply present. No transition, no starting offset, and the
   hover disclosure stays available. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .batch-funnel .bf-stage,
  .js-reveal .batch-funnel .bf-arrow { opacity: 1; translate: none; transition: none; }
  .js-reveal .batch-funnel .bf-arrow-line { scale: 1 1; transition: none; }
}

/* Each qualification appears separately as the open rail enters view. */
.batch-funnel.is-armed .bf-stage { opacity: 0; transform: translateY(24px) scale(.96); }
.batch-funnel.is-playing .bf-stage {
  opacity: 1;
  transform: none;
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.86,.24,1);
}
.batch-funnel.is-playing .bf-stage-2 { transition-delay: .18s; }
.batch-funnel.is-playing .bf-stage-3 { transition-delay: .36s; }
.batch-funnel.is-playing .bf-stage-4 { transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .batch-funnel.is-armed .bf-stage { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .batch-funnel .bf-track { grid-template-columns: 1fr; gap: 25px; }
  .batch-funnel .bf-track::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 18px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--line-strong), var(--gold), var(--success));
  }
  .bf-stage { grid-template-columns: 48px 1fr; grid-template-rows: auto; }
  .bf-n { width: 38px; padding: 5px 7px 5px 0; font-size: var(--text-display); text-align: center; }
  .bf-card { padding: 4px 0 22px 18px; }
  .bf-label { font-size: var(--text-caption); }
  .bf-body { max-width: 33ch; }
}

/* ---- Partner referral QR: the link as a scannable code for in-person handouts. ---- */
.referral-qr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.referral-qr-code { flex: 0 0 auto; line-height: 0; }
.referral-qr-code svg { width: 116px; height: 116px; display: block; border-radius: 0; }
.referral-qr-copy { flex: 1 1 200px; min-width: 0; }
.referral-qr-copy .referral-link-help { margin: 0 0 10px; }

/* ---- Public batch board detail: the same brief the portal renders, audience-split.
       Student sees the bar; company sees the evaluation walkthrough. ------------------ */
.batch-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.batch-actions-row .batch-join { margin-top: 0; }

.pb-badge { display: inline-block; margin-bottom: 12px; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--muted); }
.pb-badge.is-api { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); }


.pb-n { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--gold-deep); border-radius: 50%; color: var(--gold-deep); font-size: var(--text-caption); font-weight: var(--weight-bold); }

/* The detail blocks are audience-split; on the home view show the student bar by default. */

/* ---- Batch board: pick batches, then walk through them full-width -------------------
   Squared to match the rest; the deep dive uses the whole page because the point is
   detail, not a teaser card. --------------------------------------------------------- */
.batch-card.is-pickable {
  position: relative;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s ease, box-shadow .16s ease;
}
.batch-card.is-pickable:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 34px rgba(67,48,16,.11); }
.batch-card.is-pickable:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.batch-card.is-pickable:active { transform: translateY(-1px) scale(.995); }
.batch-card.is-picked { border-color: var(--gold-deep); box-shadow: inset 0 0 0 2px var(--gold-deep); background: var(--gold-pale); }

/* The tick: empty outline until picked, then it snaps in. This is the confirmation the
   separate "Select" button used to carry, moved onto the thing you actually clicked. */
.batch-mark {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border: 1.5px solid var(--line-strong); background: #fff;
  transition: border-color .16s ease, background .16s ease, transform .2s cubic-bezier(.2,.8,.3,1);
}
.batch-mark svg { width: 15px; height: 15px; color: #fff; transform: scale(.4); opacity: 0; transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .14s ease; }
.batch-card.is-pickable:hover .batch-mark { border-color: var(--gold); }
.batch-card.is-picked .batch-mark { border-color: var(--gold-deep); background: var(--gold-deep); transform: scale(1.06); }
.batch-card.is-picked .batch-mark svg { transform: scale(1); opacity: 1; }

/* One-shot pulse on select, restarted in JS so rapid re-picking still registers. */
@keyframes batchPickPulse {
  0%   { box-shadow: inset 0 0 0 2px var(--gold-deep), 0 0 0 0 rgba(192,138,34,.34); }
  100% { box-shadow: inset 0 0 0 2px var(--gold-deep), 0 0 0 16px rgba(192,138,34,0); }
}
.batch-card.just-picked { animation: batchPickPulse .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .batch-card.is-pickable, .batch-mark, .batch-mark svg { transition: none; }
  .batch-card.is-pickable:hover, .batch-card.is-pickable:active { transform: none; }
  .batch-card.just-picked { animation: none; }
}

.batch-pickbar { position: sticky; bottom: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; padding: 16px 20px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.batch-pickbar #batchPickCount { font-size: var(--text-body); font-weight: var(--weight-medium); }
.batch-pickbar .quiet-link { margin-top: 0; font-size: var(--text-body); }

.batch-deep { display: grid; gap: clamp(30px, 4vw, 54px); margin-top: clamp(32px, 4.5vw, 60px); }
.bd-panel { padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--line-strong); background: #fff; }
.bd-head h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.bd-lede { max-width: 68ch; margin: 14px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }

/* Flow diagram: rails -> bar -> review -> batch. Sized generously; it is the explanation,
   not decoration, so it gets real space. */

.bd-block { margin-top: clamp(26px, 3.2vw, 40px); }
.bd-block h4 { margin: 0 0 16px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.bd-reqs, .bd-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
/* Requirements are a SET you scan, not a sequence you read — so they tile across the panel
   instead of forming one narrow column of prose down a very wide box. */
.bd-reqs { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.bd-reqs li {
  display: grid; grid-template-rows: auto 1fr; gap: 11px;
  padding: 20px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.6);
}
.bd-reqs li:hover { border-color: var(--gold); }
/* The how-to-apply steps ARE ordered, so they stay a sequence — but flow across in columns
   on wide screens so the panel does not become a scroll. */
.bd-steps { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); align-items: start; }
.bd-steps li { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding-top: 16px; border-top: 2px solid var(--gold-light); }
.bd-n {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--gold-deep); color: var(--gold-deep);
  font-family: var(--font-mono); font-size: var(--text-body); font-weight: var(--weight-bold);
}
.bd-reqs strong, .bd-steps strong { display: block; font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.bd-reqs p, .bd-steps p { max-width: 42ch; margin: 6px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.bd-cta { margin-top: clamp(26px, 3.2vw, 38px); }

@media (max-width: 720px) {
  .batch-pickbar { flex-direction: column; align-items: stretch; }
  .batch-pickbar .gold-button { width: 100%; justify-content: center; }
}

/* ---- Club registration (referral audience). The club is the referral unit now, so it
       gets a real front door and the earned ladder sits beside the form. ------------- */
.club-register { padding: clamp(48px, 6vw, 92px) var(--page-gutter); border-top: 1px solid var(--line); background: #fff; }
.club-register > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.club-form { padding: clamp(22px, 2.8vw, 32px); border: 1px solid var(--line-strong); background: rgba(255,255,255,.65); }
.club-form .field-grid { gap: 18px; }
.club-form .consent-row { margin-top: 18px; font-size: var(--text-body); line-height: var(--lh-body); }
.club-form .form-message { margin-top: 14px; }
.club-form .gold-button { margin-top: 18px; }


/* The optional half of the club form, collapsed. Three visible fields is the difference
   between a form an officer fills in between classes and one they leave for later. */

/* Registering and being verified are different things, so they are two visible tracks rather
   than a form with an aside. The left is what you can do now; the right is what it becomes. */
.club-register { padding: clamp(56px, 7vw, 96px) var(--page-gutter); }
.club-register > * { width: min(100%, var(--content)); margin-inline: auto; }
.club-head h2 { margin: 12px 0 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.club-lede { margin: 18px 0 0; max-width: 66ch; font-size: var(--text-subhead); line-height: var(--lh-subhead); color: var(--soft); }

/* The badge had no CSS at all, so it rendered as a raw black SVG at the browser default beside
   the heading, and a second copy of it sat inline in front of a sentence. It is one mark now,
   pushed to the far edge with its label under it, in the gold the rest of the verification
   language uses rather than in black. */
.club-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: start; }
.club-verified-mark {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 6px;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
  text-align: center;
}
.club-verified-mark svg { width: clamp(52px, 6vw, 78px); height: clamp(52px, 6vw, 78px); color: var(--gold); }
@media (max-width: 720px) {
  /* No room for a column beside the copy, so the mark goes above it and stays centred. */
  .club-head { grid-template-columns: 1fr; }
  .club-verified-mark { grid-row: 1; justify-self: start; justify-items: start; text-align: left; padding-top: 0; }
}

.club-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0; margin-top: clamp(34px, 4vw, 54px); border-top: 1px solid var(--rule, var(--line-strong)); }
.club-now { padding: 34px 44px 34px 0; }
.club-earned { padding: 34px 0 34px 44px; border-left: 1px solid var(--line); background: var(--gold-pale); }
@media (max-width: 900px) {
  .club-split { grid-template-columns: 1fr; }
  .club-now { padding: 28px 0; }
  .club-earned { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Numbered because it genuinely is a sequence: you cannot earn the second without the first. */
.club-step-cap { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.club-step-cap span { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--gold-deep); font-size: var(--text-body); font-variant-numeric: tabular-nums; }
.club-step-what { margin: 0 0 22px; max-width: 46ch; font-size: var(--text-body); line-height: var(--lh-body); color: var(--soft); }
.club-earned .club-step-what { padding-right: 24px; }


/* The ladder. A rung line runs behind the numbers so it reads as a climb rather than three
   equally weighted options, and each rung gains a little weight as it goes up. */
.club-tiers { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.club-tiers::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, rgba(192,138,34,.25), var(--gold));
}
.club-rung { position: relative; display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 16px; padding: 18px 24px 18px 0; }
.club-rung + .club-rung { border-top: 1px solid rgba(192,138,34,.18); }
.club-rung-n {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--gold-pale);
  font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
/* Weight rises with the rung: the top of a ladder should look like the top. */
.club-rung:nth-child(2) .club-rung-n { border-width: 2px; }
.club-rung:nth-child(3) .club-rung-n { border-width: 2px; background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
.club-rung strong { display: block; font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); color: var(--ink); }

/* The threshold reads as a figure, not a sentence in a box. */
.club-tier-need { display: inline-flex; align-items: baseline; gap: 7px; margin: 8px 0 9px; font-size: var(--text-body); color: var(--soft); }
.club-tier-need b { font-size: var(--text-subhead); font-weight: var(--weight-bold); line-height: var(--lh-subhead); color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.club-tier-need i { font-style: normal; opacity: .55; padding: 0 2px; }
.club-rung p { margin: 0; max-width: 46ch; font-size: var(--text-body); line-height: var(--lh-body); color: var(--soft); }

/* Said before a club assumes otherwise, because every one of them will. */
.club-caveat { margin: 26px 24px 0 0; padding-top: 20px; border-top: 2px solid var(--gold); font-size: var(--text-body); line-height: var(--lh-body); color: var(--soft); max-width: 52ch; }
.club-caveat b { display: block; margin-bottom: 5px; color: var(--ink); font-weight: var(--weight-bold); }

.club-form { display: grid; gap: 14px; max-width: 62ch; }

.club-more { margin: 4px 0 12px; }
.club-more summary { cursor: pointer; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--gold-deep); list-style: none; }
.club-more summary::-webkit-details-marker { display: none; }
.club-more summary::before { content: "+ "; font-weight: var(--weight-bold); }
.club-more[open] summary::before { content: "\2212 "; }
.club-more summary span { font-weight: var(--weight-regular); color: var(--soft); font-size: var(--text-body); }
.club-more .field-grid { margin-top: 14px; }

.club-ladder h3 { margin: 0; font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); }

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


/* ---- Geometric motif, carried past the hero -----------------------------------------
   The hero field establishes the language (hairline gold, nodes and links). These pick it
   up so the geometry reads as a system across the page rather than one canvas at the top.
   All decorative, all aria-hidden by construction (::before/::after), all reduced-motion
   safe — nothing here animates. ------------------------------------------------------ */

/* Nodes-and-links plotting paper behind the thesis and the credibility routes. */
.credibility-ladder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(192,138,34,.16) 1px, transparent 1.4px),
    linear-gradient(to right, rgba(192,138,34,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(192,138,34,.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* Corner ticks — a drafting mark, not a border radius. Reinforces the squared language. */
.cred-door::before, .bd-panel::before, .club-form::before, .club-ladder::before,

/* The diagram's rail nodes get the same tick, so the batch walkthrough shares the language. */

@media (max-width: 720px) {
  .credibility-ladder::before { background-size: 54px 54px, 54px 54px, 54px 54px; }
}

/* ---- "Build the intern you need" — company-side narrowing, mirroring the student picker.
       Chips over a form so choosing the field feels like the same gesture on both sides. -- */
.company-job-builder { position: relative; }
.ideal-builder { display: grid; gap: 20px; margin-top: 22px; }
.ib-field { margin: 0; padding: 0; border: 0; }
.ib-field legend { padding: 0 0 10px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-chip { padding: 11px 16px; border: 1px solid var(--line-strong); background: #fff; color: #31312e; font: inherit; font-size: var(--text-body); font-weight: var(--weight-medium); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.ib-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.ib-chip[aria-pressed="true"] { border-color: var(--gold-deep); background: var(--gold-pale); color: var(--gold-deep); }
.ib-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; }
.ib-row label, .ib-problem { display: grid; gap: 7px; color: #31312e; font-size: var(--text-body); font-weight: var(--weight-medium); }
.ib-row label > span, .ib-problem > span { color: var(--soft); font-weight: var(--weight-regular); }
.ib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ib-actions .quiet-link { margin-top: 0; font-size: var(--text-body); }

.ib-result { margin-top: 24px; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--gold-light); background: var(--gold-pale); }
.ib-result-head h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); letter-spacing: var(--ls-heading); }
.ib-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 20px; }
.ib-line { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid var(--gold-light); background: rgba(255,255,255,.72); }
.ib-line span { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ib-line strong { font-size: var(--text-body); font-weight: var(--weight-medium); }
.ib-next, .ib-gaps { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gold-light); }
.ib-next h4, .ib-gaps h4 { margin: 0 0 9px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ib-next p { max-width: 66ch; margin: 0; color: #31312e; font-size: var(--text-body); line-height: var(--lh-body); }
.ib-gaps ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.ib-cta { margin-top: 22px; }

/* Joining is name + email + school. The full profile is a deliberate second step — the goal
   at this stage is network size, and a four-step form at the front door costs more students
   than it qualifies. */
.selector-detail { display: inline-flex; margin-top: 14px; font-size: var(--text-body); }

/* The selection web sits between the grid and the page: links behind the cards, never over
   them, and never in the way of a click. */
.batch-web { position: relative; }
.batch-web > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.batch-web .batch-grid { position: relative; z-index: 1; }

/* ---- Section spine: a hairline with a node per section, filling as you read. Ties the
       node-and-link language to the act of moving down the page. Desktop only — on a
       narrow screen it would compete with the content for gutter. ---------------------- */
.page-spine { position: fixed; top: 0; left: 22px; z-index: 30; display: none; height: 100vh; pointer-events: none; }
@media (min-width: 1180px) { .page-spine { display: block; } }
.page-spine .ps-track { position: absolute; top: 12vh; bottom: 12vh; left: 50%; width: 1px; background: var(--line-strong); transform: translateX(-50%); }
.page-spine .ps-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--gold); transition: height .12s linear; }
.page-spine .ps-node { position: absolute; left: 50%; width: 7px; height: 7px; border: 1px solid var(--line-strong); background: var(--paper, #fff); transform: translate(-50%, -50%) rotate(45deg); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.page-spine .ps-node.is-passed { border-color: var(--gold-deep); background: var(--gold-deep); transform: translate(-50%, -50%) rotate(45deg) scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .page-spine .ps-fill, .page-spine .ps-node { transition: none; }
}

/* ---- Site imagery was rendering small. These are the argument, not garnish. ---------- */
.founder-figure img, .founder-note img, .work-figure img { display: block; width: 100%; height: auto; }
.work-figure { margin: clamp(26px, 3.4vw, 44px) auto 0; max-width: 940px; }
.talent-strip { margin: clamp(22px, 3vw, 38px) auto 0; max-width: 1100px; }
.talent-strip img { display: block; width: 100%; height: auto; }

/* ---- The demo, walked per vertical. Tabs then a six-beat walkthrough. --------------- */
.vdemo { padding: clamp(52px, 6.5vw, 100px) var(--page-gutter); border-top: 1px solid var(--line); background: #fff; }
.vdemo > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.vdemo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 3vw, 34px); }
.vdemo-tab { padding: 12px 18px; border: 1px solid var(--line-strong); background: #fff; color: #31312e; font: inherit; font-size: var(--text-body); font-weight: var(--weight-medium); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.vdemo-tab:hover { border-color: var(--gold); color: var(--gold-deep); }
.vdemo-tab[aria-selected="true"] { border-color: var(--gold-deep); background: var(--gold-deep); color: #fff; }
.vdemo-body { margin-top: clamp(24px, 3vw, 36px); padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line-strong); }
.vdemo-company { margin: 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); letter-spacing: var(--ls-heading); }
.vdemo-need { max-width: 66ch; margin: 10px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.vdemo-beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; list-style: none; }
.vdemo-beats li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; padding-top: 16px; border-top: 2px solid var(--gold-light); }
.vdemo-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--gold-deep); color: var(--gold-deep); font-family: var(--font-mono); font-size: var(--text-body); font-weight: var(--weight-bold); }
.vdemo-beats strong { display: block; font-size: var(--text-body); }
.vdemo-beats p { max-width: 44ch; margin: 6px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.vdemo-note { display: flex; align-items: flex-start; gap: 9px; margin: clamp(20px, 2.4vw, 28px) auto 0; color: var(--soft); font-size: var(--text-body); }
.vdemo-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }

/* The builder is the primary company action, so it gets the width. The chip sits under the
   problem field it describes, where the old composer used to put it. */
.company-job-builder { padding: clamp(26px, 3.2vw, 40px); }
.company-job-builder h2 { max-width: 22ch; }
.company-job-builder > p { max-width: 62ch; }
.ib-fit { margin-top: 10px; }
.ideal-builder .ib-problem textarea { min-height: 96px; }
/* Wide screens: the four numeric fields sit on one row rather than wrapping to two. */
@media (min-width: 1100px) {
  .ib-row { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .ib-chips { gap: 9px; }
}


/* ---- Type system, stated once ------------------------------------------------------
   Titles: the display serif ("Real work becomes credible proof" — the founder's reference).
   Everything else: the body sans. Declared here so a new heading inherits the system rather
   than needing its own font-family, which is how the page drifted. */
h1, h2, h3, .brand, .ct-title, .bf-label, .bd-head h3, .vdemo-company,
h4, h5, h6, .feature-kicker, .home-kicker, .company-job-eyebrow,
/* .site-nav a and .audience-switch button are deliberately ABSENT: the header sets the
   display face on itself, and a direct rule here would beat that inheritance silently. */
p, li, small, cite, label, input, textarea, select, button, .home-path strong,
.home-path small {
  font-family: var(--font-body);
}

/* The three audience buttons read as subtext, not as headings. */
.home-path strong { font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption); }
.home-path small { font-family: var(--font-body); font-weight: var(--weight-regular); }

/* ---- Top bar: even, and each group means one thing ---------------------------------
   Left = identity. Centre = what Covenda is. Right = who you are, then your account.
   The rail was three ad-hoc clusters at different heights; it is one baseline now with a
   single divider between "choose your side" and "your account". */
.site-header { height: 76px; gap: 32px; }
.site-header .brand { font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); }
.site-nav { gap: 30px; }
.site-nav a { font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.header-actions { gap: 0; }
.header-actions .audience-switch { margin-right: 22px; }
.header-actions .member-login-link { padding-left: 22px; border-left: 1px solid var(--line); }
.audience-switch { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 4px; }
.audience-switch button {
  min-width: 0; min-height: 36px; padding: 8px 13px;
  border: 1px solid transparent; background: transparent;
  font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--muted);
}
.audience-switch button:hover { color: var(--ink); }
.audience-switch button[aria-pressed="true"] { border-color: var(--line-strong); background: #fff; color: var(--ink); }

/* A folded-paper sweep joins the three public paths. It reads like one sheet turning over,
   rather than the usual fade/slide transition. */
.audience-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.audience-transition-sheet {
  position: absolute;
  inset: -18%;
  display: block;
  background: #fff;
  transform: translateX(-125%) skewX(-13deg) rotate(-2deg);
  transform-origin: center;
}
.audience-transition-sheet--a {
  box-shadow: 24px 0 70px rgba(77,55,14,.13);
}
.audience-transition-sheet--b {
  background: #f7edcf;
  opacity: .94;
  transform: translateX(-142%) skewX(18deg) rotate(3deg);
}
.audience-transition span {
  position: relative;
  z-index: 2;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-display);
  opacity: 0;
  transform: scale(.88) rotate(-2deg);
}
body.is-audience-transitioning { overflow: hidden; }
body.is-audience-transitioning .audience-transition { visibility: visible; }
body.is-audience-transitioning .audience-transition-sheet--a {
  animation: audience-sheet-a .84s cubic-bezier(.72,0,.18,1) both;
}
body.is-audience-transitioning .audience-transition-sheet--b {
  animation: audience-sheet-b .84s cubic-bezier(.72,0,.18,1) both;
}
body.is-audience-transitioning .audience-transition span {
  animation: audience-label .84s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes audience-sheet-a {
  0% { transform: translateX(-125%) skewX(-13deg) rotate(-2deg); }
  45%, 58% { transform: translateX(0) skewX(0) rotate(0); }
  100% { transform: translateX(125%) skewX(13deg) rotate(2deg); }
}
@keyframes audience-sheet-b {
  0% { transform: translateX(-142%) skewX(18deg) rotate(3deg); }
  45%, 58% { transform: translateX(0) skewX(0) rotate(0); }
  100% { transform: translateX(142%) skewX(-18deg) rotate(-3deg); }
}
@keyframes audience-label {
  0%, 27%, 78%, 100% { opacity: 0; transform: scale(.88) rotate(-2deg); }
  45%, 60% { opacity: 1; transform: scale(1) rotate(0); }
}

/* The hero kicker needs air above it — it was sitting against the header. */
.home-kicker { margin-bottom: 20px; }

/* Student entry: an explicit no-selection route, then an optional work-area route. */
.hero-student { padding-top: clamp(56px, 8vh, 92px); }
.hero-student .hero-copy { max-width: 1040px; }
.hero-student .hero-copy p { max-width: 660px; }
.student-entry {
  position: relative;
  z-index: 2;
  width: min(100%, 1440px);
  margin: clamp(34px, 5vh, 58px) auto 0;
}
.student-open-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  background: #fff;
  text-align: left;
}
.student-route-label {
  margin: 0 0 8px;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.student-open-join h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
}
.student-open-join p:last-child {
  max-width: 650px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.student-join-primary {
  width: min(100%, 320px);
  min-height: 60px;
  padding: 14px 22px;
  border-radius: 0;
  font-size: var(--text-body);
  box-shadow: 7px 7px 0 rgba(192,138,34,.16);
  transition: transform .26s cubic-bezier(.2,.9,.25,1.35), box-shadow .26s ease, background .18s ease;
}
.student-join-primary svg { width: 20px; height: 20px; transition: transform .26s cubic-bezier(.2,.9,.25,1.35); }
.student-join-primary:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 rgba(192,138,34,.15); }
.student-join-primary:hover svg { transform: translateX(5px); }
.student-join-primary:active { transform: translate(5px, 5px) scale(.985); box-shadow: 2px 2px 0 rgba(192,138,34,.18); }
.student-join-primary.is-confirming { animation: student-join-confirm .38s cubic-bezier(.2,.9,.25,1.35); }
@keyframes student-join-confirm {
  0% { transform: translate(0); }
  42% { transform: translate(6px, 6px) scale(.98); box-shadow: 1px 1px 0 rgba(192,138,34,.18); }
  100% { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 rgba(192,138,34,.15); }
}
.student-choice-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(28px, 4vw, 42px) 0;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.student-choice-divider::before,
.student-choice-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.student-vertical-picker {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}
.student-vertical-picker legend {
  width: 100%;
  margin: 0 0 20px;
  color: var(--ink);
  font-family: var(--font-body);
}
.student-vertical-picker legend span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
}
.student-vertical-picker legend small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-caption);
  line-height: var(--lh-caption);
  text-transform: none;
}
.student-vertical-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.student-vertical {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 20px 18px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  color: #62615c;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.student-vertical > strong {
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subhead);
  line-height: var(--lh-subhead);
}
.student-vertical::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at center, rgba(110,112,116,.5) 1px, transparent 1.4px);
  background-size: 15px 15px;
  background-position: 8px 8px;
  opacity: .5;
  transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease);
  pointer-events: none;
}
.student-vertical { position: relative; overflow: hidden; }
.student-vertical > * { position: relative; z-index: 1; }
.student-vertical:hover { color: var(--ink); translate: 0 -2px; }
.student-vertical:hover::before { opacity: .85; }
/* Selected: the static grid gives way to the live field underneath it. */
.student-vertical.is-selected::before { opacity: 0; scale: 1.08; }
.student-vertical.is-selected { border-color: var(--gold); background: #2b2721; color: #fff; }
.student-vertical.is-selected > small { position: relative; z-index: 1; color: rgba(255,255,255,.72); }
/* The field sits behind the label, never over it — and held well back. At full strength the
   constellation ran straight through "Professional services" and the label stopped being
   readable, which is a background winning an argument with the content it exists to frame. */
.vertical-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
/* A scrim under the text, weighted to the left where the label sits, so the words keep their
   contrast wherever the field happens to be bright. */
.student-vertical.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(43,39,33,.78) 0%, rgba(43,39,33,.48) 46%, rgba(43,39,33,.16) 100%);
  pointer-events: none;
}
.student-vertical.is-selected > *:not(.vertical-field) { position: relative; z-index: 1; }
.student-vertical.is-selected > small { color: rgba(255,255,255,.68); }
.student-vertical:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; }
.student-specialty-empty {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--text-caption);
}
.student-specialty-panel {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.student-specialty-panel[hidden] { display: none; }
/* Only "Clear choice" left in here, so it sits on its own line above the options rather than
   opposite a label that no longer exists. */
.student-specialty-heading { display: flex; justify-content: flex-start; }
.student-specialty-heading p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.student-specialty-heading strong {
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subhead);
  line-height: var(--lh-subhead);
}
.student-specialty-heading button {
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.student-specialty-heading button:hover { color: var(--ink); }
.student-specialty-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.student-specialty {
  position: relative;
  min-height: 48px;
  padding: 11px 42px 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  color: #555550;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.student-specialty::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--line-strong);
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: background .18s ease, border-color .18s ease, transform .24s cubic-bezier(.2,.9,.25,1.35);
}
.student-specialty:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.student-specialty.is-selected { border-color: var(--gold-deep); background: var(--gold-pale); color: var(--ink); }
.student-specialty.is-selected::after { border-color: var(--gold-deep); background: var(--gold); transform: translateY(-50%) rotate(135deg) scale(1.12); }
.student-specialty:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.student-specialty-status {
  margin: 14px 0 0;
  color: var(--soft);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}
.student-join-selected {
  width: min(100%, 360px);
  min-height: 54px;
  justify-self: start;
  border-radius: 0;
  font-size: var(--text-body);
}
.student-join-selected:disabled {
  border-color: var(--line-strong);
  background: #f2f1ed;
  color: #8b8982;
  box-shadow: none;
  cursor: not-allowed;
}
.quick-selected-direction {
  margin: -4px 30px 20px;
  padding: 11px 13px;
  border-left: 3px solid var(--gold);
  background: var(--gold-pale);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

@media (max-width: 780px) {
  .hero-student { padding-top: 42px; }
  .hero-student h1 { font-size: var(--text-display); }
  .student-open-join { grid-template-columns: 1fr; padding: 22px 18px; }
  .student-join-primary { width: min(100%, 320px); min-height: 56px; }
  .student-vertical-rail { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .student-vertical { min-height: 132px; margin-top: -1px; padding: 15px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
  .student-vertical:last-child { grid-column: 1 / -1; min-height: 112px; }
  .student-specialty-panel { grid-template-columns: 1fr; gap: 18px; }
  .student-specialty-options { grid-template-columns: 1fr; }
  .student-specialty-status { grid-column: 1; }
  .student-join-selected { grid-column: 1; width: 100%; }
  .quick-selected-direction { margin-right: 20px; margin-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-transition { display: none; }
  .student-vertical,
  .student-join-primary,
  .student-join-primary svg,
  .student-specialty,
  .student-specialty::after { transition: none; animation: none; }
}

/* ---- First explanation: one real task becomes value for both sides. --------------- */
body:not([data-audience="home"]) .exchange-section { display: none; }
.exchange-section {
  --exchange-position: 0;
  position: relative;
  min-height: calc(100vh - var(--header-height));
  padding: clamp(66px, 8vw, 118px) var(--page-gutter) clamp(70px, 9vw, 126px);
  scroll-margin-top: var(--header-height);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(192,138,34,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,138,34,.028) 1px, transparent 1px),
    #fff;
  background-size: 42px 42px;
  overflow: clip;
}
.exchange-section::before {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(70vw, 900px);
  aspect-ratio: 1.9;
  background: radial-gradient(ellipse, rgba(202,151,63,.12), rgba(255,255,255,0) 68%);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.exchange-head,
.exchange-stage,
.exchange-hint {
  position: relative;
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
}
.exchange-head { text-align: center; }
.exchange-head h2 .word-gold { font-style: normal; }
.exchange-head > p {
  max-width: 650px;
  margin: 18px auto 0;
  color: #65655f;
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
}
.exchange-stage {
  display: grid;
  grid-template-areas:
    "task taskFlow bench studentFlow student"
    ". outputs outputs outputs .";
  grid-template-columns: minmax(190px, .92fr) 52px minmax(420px, 1.65fr) 52px minmax(190px, .92fr);
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(54px, 7vw, 90px);
  outline: none;
}
.exchange-stage:focus-visible::after {
  position: absolute;
  inset: -12px;
  border: 2px solid var(--gold);
  content: "";
  pointer-events: none;
}
.exchange-source {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  min-height: 176px;
  padding: 27px 24px 24px;
  border: 1px solid #cecec7;
  border-radius: 0;
  background: rgba(255,255,255,.95);
  box-shadow: 8px 9px 0 rgba(221,220,214,.48);
  transition: border-color .55s ease, box-shadow .55s ease, transform .65s cubic-bezier(.22,.8,.2,1);
}
.exchange-source::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  border-bottom: 1px solid #cecec7;
  border-left: 1px solid #cecec7;
  background: linear-gradient(225deg, transparent 49%, #f7f5ef 50%);
  content: "";
}
.exchange-source--task { grid-area: task; transform: translateX(calc(var(--exchange-position) * 10px)); }
.exchange-source--student { grid-area: student; transform: translateX(calc(var(--exchange-position) * -10px)); }
.exchange-source-index {
  position: absolute;
  top: 12px;
  left: 14px;
  color: #a09f98;
  font-size: var(--text-caption);
  letter-spacing: var(--ls-caption);
}
.exchange-source > svg {
  width: 25px;
  height: 25px;
  margin-top: 24px;
  color: var(--gold-deep);
}
.exchange-source div { align-self: end; margin-top: 50px; }
.exchange-source p,
.exchange-output p {
  margin: 0 0 8px;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
/* These are card titles in a column roughly 200px wide, not section headers. The size
   conversion bucketed them by their old max of 25px, which put them in the heading role at up
   to 40px, and "Talent vouched for by people who know them" then wrapped to six lines and
   dwarfed the panel it was pointing at. Subhead is the role a card title takes. */
.exchange-source h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-subhead);
  line-height: var(--lh-subhead);
  text-wrap: balance;
}
.exchange-flow {
  display: flex;
  align-items: center;
  color: #989790;
  opacity: calc(.35 + var(--exchange-position) * .65);
}
.exchange-flow--task { grid-area: taskFlow; }
.exchange-flow--student {
  grid-area: studentFlow;
  transform: rotate(180deg);
}
.exchange-flow i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #d5d4ce, var(--gold));
  transform: scaleX(calc(.28 + var(--exchange-position) * .72));
  transform-origin: right;
}
.exchange-flow svg { flex: 0 0 auto; width: 17px; height: 17px; margin-left: -3px; color: var(--gold-deep); }
.exchange-workbench {
  position: relative;
  grid-area: bench;
  min-width: 0;
  padding: 19px;
  border: 1px solid #b7b6ae;
  border-radius: 0;
  background: rgba(255,255,255,.94);
  box-shadow:
    0 0 calc(24px + var(--exchange-position) * 28px) rgba(192,138,34,calc(.08 + var(--exchange-position) * .08)),
    10px 11px 0 rgba(224,221,211,.55);
  isolation: isolate;
  transition: box-shadow .6s ease;
}
.exchange-workbench::before,
.exchange-workbench::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(192,138,34,.22);
  background: rgba(255,253,248,.66);
  content: "";
  pointer-events: none;
}
.exchange-workbench::before { inset: -8px 8px 8px -8px; }
.exchange-workbench::after { inset: 8px -8px -8px 8px; }
.exchange-workbench-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 4px 17px;
}
.exchange-workbench-top > span {
  color: #3e3e39;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.exchange-workbench-top output {
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}
.exchange-step-viewport {
  overflow-x: auto;
  border-top: 1px solid #d6d5ce;
  border-bottom: 1px solid #d6d5ce;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.exchange-step-viewport::-webkit-scrollbar { display: none; }
.exchange-step-viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.exchange-step-track { display: flex; }
.exchange-step-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(150px, .92fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  min-width: 0;
  min-height: 222px;
  padding: clamp(20px, 2.4vw, 30px);
  background: #fff;
  color: #171714;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.exchange-step-copy span {
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.exchange-step-copy h3 {
  max-width: 12ch;
  margin: 17px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}
.exchange-step-copy p {
  max-width: 25ch;
  margin: 13px 0 0;
  color: #77766f;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}
.exchange-step-art {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  color: #20201c;
}
.exchange-step-card.is-active .exchange-step-copy,
.exchange-step-card.is-active .exchange-step-art {
  animation: exchange-card-pop .58s cubic-bezier(.2,.86,.24,1) both;
}
.exchange-step-card.is-active .exchange-step-art { animation-delay: .08s; }
@keyframes exchange-card-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.exchange-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
}
.exchange-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #cfcec7;
  border-radius: 0;
  background: #fff;
  color: #34342f;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.exchange-arrow:hover:not(:disabled),
.exchange-arrow:focus-visible { border-color: var(--gold); color: var(--gold-deep); }
.exchange-arrow:active:not(:disabled) { transform: translateY(2px); }
.exchange-arrow:disabled { opacity: .28; cursor: default; }
.exchange-arrow svg { width: 16px; height: 16px; }
.exchange-arrow--previous svg { transform: rotate(180deg); }
.exchange-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.exchange-dots button {
  position: relative;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #cfcec7;
  border-radius: 0;
  background: transparent;
  color: #9a9992;
  font-size: var(--text-caption);
  cursor: pointer;
}
.exchange-dots button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transition: transform .3s ease;
}
.exchange-dots button[aria-selected="true"] { color: var(--gold-deep); }
.exchange-dots button[aria-selected="true"]::after { transform: scaleX(1); }
.exchange-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.exchange-dots span { pointer-events: none; }
.exchange-stage[data-exchange-step="4"] .exchange-workbench {
  box-shadow:
    0 0 54px rgba(192,138,34,.16),
    10px 11px 0 rgba(224,221,211,.55);
}
.exchange-outputs {
  display: grid;
  grid-area: outputs;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: min(100%, 670px);
  margin: 24px auto 0;
  opacity: calc(.64 + var(--exchange-position) * .36);
  transform: translateY(calc((1 - var(--exchange-position)) * 12px));
  transition: opacity .55s ease, transform .65s cubic-bezier(.22,.8,.2,1);
}
.exchange-output {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  min-height: 78px;
  padding: 14px 17px;
  border: 1px solid #cfcec7;
  border-radius: 0;
  background: rgba(255,255,255,.95);
  box-shadow: 5px 6px 0 rgba(223,221,213,.42);
}
.exchange-output > svg { width: 21px; height: 21px; color: var(--gold-deep); }
.exchange-output p { margin-bottom: 3px; font-size: var(--text-caption); }
.exchange-output strong {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-subhead);
}
.exchange-output .exchange-output-arrow { width: 18px; height: 18px; color: var(--gold-deep); }
.exchange-output-arrow.is-back { transform: rotate(180deg) translateX(calc(var(--exchange-position) * 7px)); }
.exchange-output--proof .exchange-output-arrow { transform: translateX(calc(var(--exchange-position) * 7px)); }
.exchange-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
  color: #77766f;
  font-size: var(--text-caption);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.exchange-hint svg { width: 15px; height: 15px; color: var(--gold-deep); }

@media (max-width: 980px) {
  .exchange-stage {
    grid-template-columns: minmax(150px, .8fr) 30px minmax(360px, 1.65fr) 30px minmax(150px, .8fr);
    gap: 9px;
  }
  .exchange-source { grid-template-columns: 1fr; min-height: 164px; padding: 24px 18px 20px; }
  .exchange-source div { margin-top: 30px; }
  .exchange-source h3 { font-size: var(--text-subhead); }
  .exchange-source > svg { width: 22px; height: 22px; }
}

@media (max-width: 760px) {
  .exchange-section {
    min-height: 0;
    padding: 58px 16px 68px;
    background-size: 32px 32px;
  }
  .exchange-head { text-align: left; }
  .exchange-head h2 { max-width: 9ch; font-size: var(--text-heading); }
  .exchange-head > p { max-width: 31ch; margin: 15px 0 0; font-size: var(--text-body); }
  .exchange-stage {
    grid-template-areas:
      "task student"
      "bench bench"
      "outputs outputs";
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 42px;
  }
  .exchange-flow { display: none; }
  .exchange-source {
    grid-template-columns: 28px 1fr;
    min-height: 142px;
    padding: 21px 14px 15px;
    box-shadow: 5px 6px 0 rgba(221,220,214,.45);
    transform: none;
  }
  .exchange-source > svg { width: 20px; height: 20px; margin-top: 22px; }
  .exchange-source div { margin-top: 40px; }
  .exchange-source p { font-size: var(--text-caption); letter-spacing: var(--ls-caption); }
  .exchange-source h3 { font-size: var(--text-body); line-height: var(--lh-body); }
  .exchange-workbench { margin-top: 12px; padding: 13px; box-shadow: 7px 8px 0 rgba(224,221,211,.55); }
  .exchange-workbench-top { padding: 3px 2px 13px; }
  .exchange-workbench-top > span { font-size: var(--text-caption); }
  .exchange-workbench-top output { font-size: var(--text-caption); }
  .exchange-step-card {
    grid-template-columns: minmax(0, 1.08fr) minmax(108px, .92fr);
    gap: 11px;
    min-height: 205px;
    padding: 18px 13px;
  }
  .exchange-step-copy span { font-size: var(--text-caption); }
  .exchange-step-copy h3 { margin-top: 12px; font-size: var(--text-subhead); line-height: var(--lh-subhead); }
  .exchange-step-copy p { margin-top: 9px; font-size: var(--text-caption); }
  .exchange-step-art { max-width: 145px; }
  .exchange-controls { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; margin-top: 13px; }
  .exchange-arrow { width: 34px; height: 34px; }
  .exchange-dots { gap: 3px; }
  .exchange-dots button { height: 34px; }
  .exchange-outputs { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .exchange-output { min-height: 69px; }
  .exchange-hint { justify-content: flex-start; margin-top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .exchange-source,
  .exchange-workbench,
  .exchange-arrow,
  .exchange-dots button::after,
  .exchange-outputs { transition: none; }
  .exchange-step-viewport { scroll-behavior: auto; }
  .exchange-step-card.is-active .exchange-step-copy,
  .exchange-step-card.is-active .exchange-step-art { animation: none; }
}

/* The hero's scroll cue was too quiet for the one instruction on the page. */
.scroll-cue span { font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: var(--ls-body); }
.scroll-cue svg { width: 22px; height: 22px; }

/* ---- Tree: refinement, not a redesign. Same layout, same figure — the cards just read
       better. Their type floors were as low as 8px, which is where the "contents" problem
       partly lived. ------------------------------------------------------------------ */
.ct-card {
  border-color: var(--line-strong);
  background: rgba(255,253,248,.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 38px rgba(60,45,10,.10);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ct-card:hover { border-color: var(--gold); box-shadow: 0 18px 46px rgba(60,45,10,.15); transform: translateY(-2px); }
/* A gold rule keys each card to its part of the tree without adding a new element. */
.ct-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 3px; height: 34px; background: var(--gold); }
.ct-card--canopy::before { background: var(--success); }
.ct-k { font-size: var(--text-caption); letter-spacing: var(--ls-caption); }
.ct-t { margin: .55cqw 0 .6cqw; font-size: var(--text-caption); font-weight: var(--weight-regular); letter-spacing: var(--ls-caption); }
.ct-d { font-size: var(--text-caption); line-height: var(--lh-caption); }
.ct-chip { font-size: var(--text-caption); font-weight: var(--weight-medium); }
@media (prefers-reduced-motion: reduce) { .ct-card, .ct-card:hover { transition: none; transform: none; } }

/* ---- Production hero + banner pass ---------------------------------------------
   Deliberately scoped to the site header and the home hero so the production page
   below this fold remains untouched. */
.site-header {
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  gap: clamp(22px, 3vw, 54px);
  height: var(--header-height);
  border-bottom-color: #e8e8e4;
  background: rgba(255,255,255,.97);
  color: var(--ink);
  font-family: var(--font-display);
  backdrop-filter: none;
}

/* The wordmark steps up a level in the scale, from the size used for card titles to the one
   used for section headings. It is the only brand element on the page and it was reading as
   another piece of nav chrome at the same size as the links beside it. */
.site-header .brand {
  font-family: inherit;
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
}
.site-header .brand-mark { width: 46px; height: 46px; }

.site-nav {
  align-items: stretch;
  justify-content: center;
  gap: clamp(28px, 3.1vw, 52px);
  height: 100%;
}

.site-nav a,
.site-nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #25251f;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  cursor: pointer;
}

.site-nav a::after,
.site-nav button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav button:hover,
.site-nav button:focus-visible,
.site-nav button[aria-pressed="true"] {
  color: var(--gold-deep);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav button:hover::after,
.site-nav button:focus-visible::after,
.site-nav button[aria-pressed="true"]::after {
  transform: scaleX(1);
}

.site-header .header-actions {
  gap: 14px;
  font-family: inherit;
}

.site-header .member-login-link {
  color: #393932;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
}

.site-header .workspace-link {
  min-height: 40px;
  padding: 0 17px;
  border-color: #deddd7;
  border-radius: 999px;
  background: #fff;
  color: #292922;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
}


.hero-home {
  isolation: isolate;
  min-height: calc(100svh - var(--header-height));
  background:
    radial-gradient(circle at 72% 16%, rgba(184,130,25,.12), transparent 31%),
    radial-gradient(circle at 12% 80%, rgba(255,255,255,.045), transparent 34%),
    linear-gradient(145deg, #12120f 0%, #080908 70%);
  color: #fff;
}

.hero-home::before,
.hero-home::after {
  display: none;
}

.hero-home .hero-field {
  z-index: 0;
  display: block;
}

.hero-home > *:not(.hero-field) {
  position: relative;
  z-index: 2;
}

.hero-home .hero-copy {
  max-width: 1120px;
  padding-top: clamp(8px, 5vh, 56px);
}

.hero-home h1 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-caption);
  text-shadow: 0 2px 34px rgba(0,0,0,.45);
}


.hero-home .home-kicker {
  color: #e6c37a;
  font-family: var(--font-body);
}

.hero-home .home-oneliner {
  max-width: 670px;
  color: rgba(255,255,255,.72);
  font-family: var(--font-body);
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
}

/* Pushed to the bottom of the column, so it marks the edge of the screen rather than sitting
   in the middle of empty field. */
.hero-home .scroll-cue { margin-top: auto; }

.hero-home .home-paths {
  /* The gap between the mark and the doors. This is the rule that wins on the home hero: the
     base .home-paths margin is outranked here, so setting it there does nothing. */
  margin-top: clamp(190px, 34vh, 400px);
  width: min(100%, 1120px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(16,16,13,.42);
  backdrop-filter: blur(13px);
}

.hero-home .home-path {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 118px;
  padding: 22px 24px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}

.hero-home .home-path:last-child {
  border-right: 0;
}

.hero-home .home-path::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.hero-home .home-path:hover,
.hero-home .home-path:focus-visible {
  background: rgba(183,127,20,.14);
}

.hero-home .home-path:hover::after,
.hero-home .home-path:focus-visible::after {
  transform: scaleX(1);
}

.hero-home .home-path-index {
  align-self: start;
  padding-top: 5px;
  color: #e6c37a;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption);
}

.hero-home .home-path-copy {
  display: grid;
  gap: 8px;
}

/* Label is the subhead role, supporting line is body, per the approved treatment. At the
   heading size "I vouch for talent" wrapped to two lines while the other two did not, which
   pushed its supporting line down and broke the promise that all three read as equals. */
.hero-home .home-path strong {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
}

.hero-home .home-path small {
  color: rgba(255,255,255,.62);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-caption);
}

.hero-home .home-path-go {
  color: rgba(255,255,255,.68);
  font-family: var(--font-body);
  font-size: var(--text-subhead);
  transition: color .18s ease, transform .18s ease;
}

.hero-home .home-path:hover .home-path-go,
.hero-home .home-path:focus-visible .home-path-go {
  color: #e6c37a;
  transform: translateX(3px);
}

.hero-home .scroll-cue {
  color: rgba(255,255,255,.72);
}

.hero-home .scroll-cue span {
  font-size: var(--text-subhead);
}

.hero-home .scroll-cue svg {
  width: 29px;
  height: 29px;
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: minmax(160px, 1fr) auto;
  }

  .site-header .site-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-home .home-paths {
    grid-template-columns: 1fr;
  }

  .hero-home .home-path {
    min-height: 96px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }

  .hero-home .home-path:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .site-header .brand {
    display: inline-flex;
    font-size: var(--text-subhead);
  }

  .site-header .member-login-link {
    display: none;
  }

  .site-header .workspace-link {
    min-height: 36px;
    padding: 0 13px;
  }

  .hero-home .home-path {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after,
  .site-nav button::after,
  .hero-home .home-path,
  .hero-home .home-path::after,
  .hero-home .home-path-go {
    transition: none;
  }
}

/* Both columns carry equal weight — the human rail is a different instrument, not a gap,
   so it no longer gets the muted "limitation" treatment. */
.verify-col-sub { max-width: 46ch; margin: 8px 0 16px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.verify-col-human { border-color: var(--gold-light); }
.verify-col-human .verify-col-tag { color: var(--gold-deep); }

/* ---- Batch board: grouped by vertical, bigger cards ---------------------------------
   Thirteen specialisations in one flat wall is unreadable, and the vertical is what a
   student picks between first. */
.batch-group + .batch-group { margin-top: clamp(30px, 4vw, 48px); }
/* The group is a <details>; this is its <summary>, so the default triangle has to go and the
   whole bar becomes the control. */
.batch-group { border-bottom: 1px solid var(--line); }
.batch-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.batch-group-head::-webkit-details-marker { display: none; }
.batch-group-head:hover h3 { color: var(--gold-deep); }
.batch-group-head:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.batch-group-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--gold-deep);
  transition: rotate var(--dur) var(--ease);
}
.batch-group[open] > .batch-group-head > .batch-group-chevron { rotate: 180deg; }
.batch-group[open] > .batch-group-head { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.batch-group > .batch-row { padding-bottom: 22px; }
@media (prefers-reduced-motion: reduce) {
  .batch-group-chevron, .batch-group-head { transition: none; }
}
.batch-group-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); letter-spacing: var(--ls-heading); }
.batch-group-head span { color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
.batch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.4vw, 18px); align-items: stretch; }
@media (min-width: 1180px) { .batch-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1179px) { .batch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bigger, and the whole card is the control — so it needs to feel like one. */
/* Name and tick, side by side. The four-row grid and the 244px floor were sized for a card that
   carried a tier chip, a summary and two meta chips; with only a name left they produced a tall
   empty box. There are two definitions of this selector in this file and the later one wins,
   which is why fixing the earlier one changed nothing. */
.batch-card.is-pickable {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  height: 100%; min-height: 0;
  padding: 18px clamp(16px, 1.6vw, 20px);
  border: 1px solid var(--line-strong); background: #fff;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s ease, box-shadow .16s ease;
}
.batch-card.is-pickable .batch-title { margin: 0; font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); line-height: var(--lh-subhead); }
.batch-card.is-pickable .batch-desc { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.batch-card .batch-tier { justify-self: start; padding: 4px 10px; border: 1px solid var(--line-strong); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); }
.batch-card .batch-tier.is-elite { border-color: var(--gold-deep); background: var(--gold-pale); color: var(--gold-deep); }
.batch-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; align-self: end; padding-top: 12px; border-top: 1px solid var(--line); }
.batch-rail-chip { padding: 4px 10px; border: 1px solid var(--line-strong); font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--muted); }
.batch-rail-chip.is-api { border-color: var(--gold); color: var(--gold-deep); }
.batch-req-count { color: var(--soft); font-family: var(--font-mono); font-size: var(--text-caption); }

/* "What we actually read" — the specifics that make the process checkable. */
.bd-read { display: grid; gap: 0; margin: 0; }
.bd-read dt { padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--gold-deep); }
.bd-read dt:first-child { padding-top: 0; border-top: 0; }
.bd-read dd { max-width: 76ch; margin: 6px 0 16px; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.bd-read dd:last-child { margin-bottom: 0; }

/* ---- What a referral becomes. The promise was abstract; this is the artefact. --------- */
.ref-result { padding: clamp(48px, 6vw, 92px) var(--page-gutter); border-top: 1px solid var(--line); background: #fff; }
.ref-result > * { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; }
.ref-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; margin-top: clamp(24px, 3vw, 38px); }
.ref-timeline { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ref-timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; align-items: start; }
.ref-n { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--gold-deep); color: var(--gold-deep); font-family: var(--font-mono); font-size: var(--text-body); font-weight: var(--weight-bold); }
.ref-timeline strong { display: block; font-size: var(--text-body); }
.ref-timeline p { max-width: 52ch; margin: 5px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.ref-timeline em { display: block; margin-top: 6px; font-size: var(--text-caption); font-style: normal; letter-spacing: var(--ls-caption); color: var(--soft); }

.ref-card { margin: 0; border: 1px solid var(--gold-light); background: var(--gold-pale); }
.ref-card figcaption { padding: 12px 20px; border-bottom: 1px solid var(--gold-light); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
.ref-card-body { padding: clamp(18px, 2.2vw, 26px); }
.ref-card-org { margin: 0 0 16px; font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ref-stats div { padding: 14px 16px; border: 1px solid var(--gold-light); background: rgba(255,255,255,.72); }
.ref-stats b { display: block; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); line-height: var(--lh-heading); color: var(--gold-deep); }
.ref-stats span { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-caption); }
.ref-card-note { margin: 16px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.ref-illus { display: flex; align-items: flex-start; gap: 9px; margin-top: clamp(20px, 2.4vw, 28px); color: var(--soft); font-size: var(--text-body); }
.ref-illus svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }
@media (max-width: 900px) { .ref-grid { grid-template-columns: 1fr; } }


/* The screening questions. Kind is colour-coded because the two are read differently: a
   technical question has a right answer, a judgement one does not. */
.bd-questions { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bd-questions li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding-top: 14px; border-top: 1px solid var(--line); }
.bd-questions li:first-child { padding-top: 0; border-top: 0; }
.bd-qkind { padding: 3px 9px; border: 1px solid var(--line-strong); font-size: var(--text-caption); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bd-qkind.is-technical { border-color: var(--gold-deep); color: var(--gold-deep); }
.bd-qkind.is-judgement { border-color: var(--blue, #4d6070); color: #4d6070; }
.bd-questions p { max-width: 68ch; margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); }
.bd-qnote { margin: 16px 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }

/* ---- Referral: show why it works before asking for anything ------------------------
   The page opened with a roster form. Someone who has not been convinced yet will not fill
   one in, so the demonstration comes first and the form sits after it. */
.ref-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(18px, 2.6vw, 34px); max-width: 1180px; margin: clamp(26px, 3.4vw, 44px) auto 0; text-align: left; }
.ref-side { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line-strong); background: #fff; }
.ref-side.is-covenda { border-color: var(--gold-deep); background: rgba(251,247,237,.6); }
.ref-side-tag { margin: 0 0 16px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); }
.ref-side.is-covenda .ref-side-tag { color: var(--gold-deep); }
.ref-side ol { display: grid; gap: 12px; margin: 0; padding-left: 20px; }
.ref-side li { max-width: 52ch; font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }
.ref-side li b { color: var(--ink); font-weight: var(--weight-medium); }
.ref-side-note { max-width: 52ch; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }



/* ---- Credibility map: ways in, then the shared ladder ------------------------------
   HTML rather than SVG so it inherits the type scale, the tokens and the spacing — the SVG
   version could not, which is why its labels overflowed and it looked like someone else's
   diagram dropped onto the page. */
.cred-map { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(26px, 3.4vw, 42px); text-align: left; }
.cred-map-tag { margin: 0 0 14px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }

.cred-ways ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cred-ways li { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--line-strong); background: #fff; }
.cred-ways li.is-strong { border-color: var(--gold-deep); background: var(--gold-pale); }
.cred-ways li.is-light { border-style: dashed; background: transparent; }
.cred-ways b { font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); }
.cred-ways span { color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.cred-ways li.is-light b, .cred-ways li.is-light span { color: var(--soft); }

/* A single hairline with a notch, standing in for the four arrows the SVG drew. */
.cred-join { position: relative; height: 26px; }
.cred-join::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: var(--line-strong); }
.cred-join::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 7px; height: 7px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: translate(-50%, -3px) rotate(45deg); }

.cred-ladder ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.cred-ladder li { display: grid; align-content: start; gap: 6px; padding: 20px; border: 1px solid var(--line-strong); border-right-width: 0; background: #fff; }
.cred-ladder li:last-child { border-right-width: 1px; }
.cred-ladder li.is-verified { background: var(--gold-pale); border-color: var(--gold-deep); }
.cred-ladder li.is-proven { background: #f4faf5; border-color: var(--success); }
.cred-step { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption); color: var(--gold-deep); }
.cred-ladder li.is-proven .cred-step { color: var(--success); }
.cred-ladder b { font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-medium); letter-spacing: var(--ls-subhead); line-height: var(--lh-subhead); }
.cred-sub { color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
@media (max-width: 640px) {
  .cred-ladder li { border-right-width: 1px; border-bottom-width: 0; }
  .cred-ladder li:last-child { border-bottom-width: 1px; }
}

/* The credibility heading is a single column now: the two-column split existed only to park
   the big numeral opposite the title, and without it the heading and its line were stranded
   at opposite ends of the page. */
.credibility-ladder .section-heading { display: block; max-width: 66ch; margin-bottom: clamp(18px, 2.4vw, 28px); }
.credibility-ladder .section-heading h2 { margin: 0; }
.credibility-ladder .section-heading > p { margin: 12px 0 0; color: var(--muted); }

/* What counts as evidence — the list a student scans to see whether what they already have
   qualifies. Two columns on a wide panel so it reads as a menu rather than a wall. */
.bd-accepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.bd-accepts li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.bd-accepts svg { width: 15px; height: 15px; margin-top: 4px; color: var(--gold-deep); }
.bd-accepts span { font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); }

/* ---- Trials vs batches. Both existed on the site with no explanation of which to do or
       why, so a student had to guess. One earns evidence; the other is what companies pay
       to search — and the arrow between them is the whole relationship. --------------- */
/* Two halves, edge to edge, divided down the middle. The arrow sits ON the division rather
   than in a column of its own — a third grid track was what stopped the split being a split. */
.tb-split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  align-items: stretch;
  /* `0` on the sides overrode the section's margin-inline:auto, so this sat left while
     the note beneath it centred. */
  margin: clamp(24px, 3vw, 36px) auto 0;
  width: 100%;
  border: 1px solid var(--line-strong);
}
.tb-side { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 40px); border: 0; background: #fff; }
/* The one rule between them IS the bifurcation. */
/* The one rule between them is the division. */
.tb-side + .tb-side { border-left: 1px solid var(--line-strong); }
.tb-side.is-batch { background: var(--gold-pale); }
.tb-tag { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); }
.tb-side.is-batch .tb-tag { color: var(--gold-deep); }
.tb-side h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.tb-side p { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.tb-out { margin-top: 6px !important; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink) !important; }
.tb-out b { color: var(--gold-deep); }
.tb-note { display: flex; align-items: flex-start; gap: 9px; max-width: 74ch; margin: clamp(16px, 2vw, 22px) auto 0; color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); }
.tb-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }
@media (max-width: 820px) {
  /* Stacked, the division becomes horizontal and the arrow turns to point down the page. */
  .tb-split { grid-template-columns: 1fr; }
  .tb-side + .tb-side { border-left: 0; border-top: 1px solid var(--line-strong); }
  .tb-arrow svg { width: 26px; transform: rotate(90deg); }
}

/* Verified seal — the scalloped badge shape, in gold. Filled rather than outlined so it
   reads as a badge and not as another hairline icon. Sized to sit on a text baseline. */
.verified-seal { display: inline-block; width: 1em; height: 1em; margin-left: .3em; color: var(--gold-deep); vertical-align: -.12em; }
.verified-seal.is-lg { width: 1.25em; height: 1.25em; }

/* The company entry point is one box now. It should read as an invitation to type, not as a
   form to be completed, so the field carries the weight and the caption sits above it. */
.ib-problem-lead { display: grid; gap: 8px; }
.ib-problem-cap { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink); }
.ib-problem-lead textarea { min-height: 132px; line-height: var(--lh-body); }
.ib-note { margin: 10px 0 0; color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body); }

/* Explainer above, browser below, with a rule between them — the two halves used to run
   together with a decorative banner wedged in the middle. */
.tb-divider { width: min(100%, 1080px); height: 1px; margin: clamp(34px, 5vw, 60px) auto clamp(26px, 3.4vw, 40px); background: var(--line); }
.batch-browse-head { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
.batch-browse-head h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); letter-spacing: var(--ls-heading); }
.batch-browse-head p { margin: 0; max-width: 52ch; color: var(--muted); font-size: var(--text-body); }

/* The section intro ran the full content width, so the lede under a 60px display heading
   stretched past 100 characters on one line. Centred, and held to a readable measure. */
/* .section-heading is a two-column editorial grid, so the kicker, headline and lede were
   landing in different columns — text-align could never fix that. This section wants one
   centred stack, so it gets one. */
.batches-section > .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.batches-section > .section-heading > * { margin: 0; max-width: 62ch; }
.batches-section > .section-heading h2 { max-width: 20ch; text-wrap: balance; }
.batches-section > .section-heading .feature-kicker { justify-content: center; }
.tb-note { margin-inline: auto; text-align: center; justify-content: center; }

/* The split takes the section's full content width — it was capped at 1080px, which left it
   floating in the middle of a wider page. */
.batches-section > .tb-split { width: min(100%, var(--content)); }

/* ── The problem ───────────────────────────────────────────────────────────────────────
   Named directly, because every other section on this page is an answer to it. Numbered
   because it IS a sequence — applying got free, so the résumé got filtered on school, so
   the platforms encoded that. Each step causes the next. */
/* Moved off home and onto the company view. The section was always written from the buyer's
   side — "postings now get hundreds of applications nobody wrote" is a company's problem, not
   a student's — so it belongs where a company is reading. On that view it sits between the
   company hero and the why-now band, which is the right order: problem, then evidence. */
.slop-section { display: none; }
body[data-audience="company"] .slop-section { display: block; }
.slop-section { padding: clamp(60px, 8vw, 116px) var(--page-gutter); background: #14120d; color: #ece7da; border-top: 1px solid #262219; }
.slop-section > * { width: min(100%, var(--content)); margin-inline: auto; }
.slop-head { text-align: center; }
.slop-head .feature-kicker { justify-content: center; color: var(--gold-light); }
.slop-head h2 {
  margin: 0 auto 18px; max-width: 22ch;
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  color: #fff; text-wrap: balance;
}
.slop-head > p { max-width: 64ch; margin: 0 auto; color: #b3ab99; font-size: var(--text-subhead); line-height: var(--lh-subhead); }

.slop-grid { display: grid; gap: 1px; margin-top: clamp(38px, 5vw, 60px); background: #2b2619; border: 1px solid #2b2619; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.slop-card { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.8vw, 34px); background: #14120d; }
.slop-n { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-caption); color: var(--gold-light); }
.slop-card h3 { margin: 0; font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-subhead); letter-spacing: var(--ls-subhead); line-height: var(--lh-subhead); color: #fff; }
.slop-card p { margin: 0; color: #a9a190; font-size: var(--text-body); line-height: var(--lh-body); }

.slop-answer { margin-top: clamp(34px, 4vw, 52px); padding: clamp(24px, 3vw, 38px); border: 1px solid var(--gold-deep); background: #191610; }
.slop-answer-tag { margin: 0 0 16px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-light); }
.slop-answer-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.slop-answer-list li { padding-left: 22px; position: relative; color: #b3ab99; font-size: var(--text-body); line-height: var(--lh-body); }
.slop-answer-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold-light); }
.slop-answer-list strong { color: #fff; font-weight: var(--weight-medium); }
@media (max-width: 620px) { .slop-answer-list li { font-size: var(--text-body); } }

/* Batch cards fill their track, so a row reads as a row rather than five different heights. */
.batch-grid > * { align-self: stretch; }
.batch-card { display: flex; flex-direction: column; height: 100%; }
.batch-card > p { flex: 1 1 auto; }
.record-illus { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--soft); font-size: var(--text-caption); line-height: var(--lh-caption); }

/* The five-stage story, sized to be read rather than glanced at. */
.fd-stage { padding: clamp(20px, 2.2vw, 30px) clamp(16px, 1.8vw, 24px); }
.fd-stage h3, .fd-stage strong { font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.fd-stage p, .fd-stage li { font-size: var(--text-body); line-height: var(--lh-body); }
.fd-stage small { font-size: var(--text-caption); }
.flow-demo-head h2 { font-size: var(--text-heading); }
.flow-demo-head p { font-size: var(--text-subhead); line-height: var(--lh-subhead); }
/* Who built this. It is not a footnote — a platform for students made BY students is the
   reason to trust it over one built by a recruiting company. It gets the same gold ground as
   the "Vouched, then vetted" panel, because that treatment already marks the claims the site
   is willing to stand behind, and the icosahedron beside it is the same solid. */
.made-by {
  position: relative;
  display: grid;
  align-items: center;
  width: min(100%, var(--content));
  margin: 0 auto clamp(30px, 4vw, 52px);
  /* Taller. At the old padding this was a strip: the field behind it had no room to read as
     a field, and the gold had nowhere to fall off toward at the top and bottom edges. */
  padding: clamp(64px, 8vw, 128px) clamp(28px, 4vw, 56px);
  overflow: hidden;
  /* Same surface as every other gold panel, with the one layer this shape needs: a tall band
     wants its deep stops along the top and bottom, or the height reads as cream. Wide and
     shallow on purpose, since a tall radial pools where the words are. */
  --gold-surface-edge:
    radial-gradient(150% 60% at 50% -8%, #C9A24B 0%, rgba(201,162,75,0) 62%),
    radial-gradient(150% 62% at 50% 108%, #A9822F 0%, rgba(169,130,47,0) 60%);
  background: var(--gold-surface);
  box-shadow: var(--gold-surface-shadow);
}
.made-by-copy {
  position: relative;
  margin: 0;
  max-width: var(--measure);
  color: #2a2013;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
/* The gold half is the display serif rather than the sans around it, the same pairing the
   headlines use. On the gold ground it goes to ink: gold on gold says nothing. */
.made-by-copy .word-gold {
  color: #14100a;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--optical-serif);
  letter-spacing: var(--ls-caption);
}
/* The field spans the whole band and is masked away from the copy, so it is strongest in the
   column the static solid used to occupy and absent behind the words. A field that only filled
   the right-hand column had too little area to read as a network at all. */
.made-by-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 42%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 42%, #000 78%);
  pointer-events: none;
}
.made-by-copy { z-index: 1; }

@media (max-width: 720px) {
  /* At this width there is no room beside the copy, so the field goes fully behind it and drops
     to an intensity the text can sit on top of. */
  .made-by-field {
    opacity: .3;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* The batch board: filter in a rail, cards using the width that box was wasting. */
.batch-board { width: min(100%, var(--content)); margin-inline: auto; }


/* The first card after the home hero explains the market problem and then the product
   in one literal visual. The rest of the homepage remains unchanged below it. */
body:not([data-audience="home"]) .proof-lens-section { display: none; }
.proof-lens-section {
  width: min(var(--content), 100%);
  margin-inline: auto;
  padding: clamp(86px, 9vw, 132px) var(--page-gutter) clamp(82px, 9vw, 126px);
  background: #fff;
}
.proof-lens-heading { position: relative; }
.proof-lens-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.proof-lens-heading > p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: var(--text-subhead);
  letter-spacing: var(--ls-subhead);
}
.proof-lens-heading > span {
  position: absolute;
  right: 0;
  bottom: 1px;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.proof-lens { margin-top: clamp(48px, 5.5vw, 72px); }
/* The product rail is its own section now, between the comparison and the exchange. It carries
   the page gutter itself, which nesting it inside .compare-inner would have doubled. */
.proof-product-section { display: none; padding: 0 var(--page-gutter) clamp(64px, 8vw, 104px); }
body[data-audience="home"] .proof-product-section { display: block; }
.proof-product-section > .proof-product { width: min(100%, var(--content)); margin-inline: auto; }
.proof-market {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr) minmax(0, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.proof-market > section {
  min-width: 0;
  min-height: 430px;
  padding: clamp(25px, 2.5vw, 38px);
  border-right: 1px solid var(--line-strong);
}
.proof-market > section:last-child { border-right: 0; }
.proof-market h3 {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: var(--weight-bold);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
}
.proof-market-side > p,
.proof-market-noise > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}
.proof-market-side > p svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--gold-deep);
  transform: rotate(-90deg);
}
/* ── The claim lists (§21) ─────────────────────────────────────────────────────────────
   Both sides used to be pictures with a caption: six industry tags that named verticals without
   supporting the claim above them, and a stack of blank sheets. A reader could do nothing with
   either. These are the reasons, stated, with a hairline carrying the eye down them. */
.proof-claim { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.proof-claim li { display: grid; gap: 3px; padding-left: 15px; border-left: 1px solid var(--gold-light); }
.proof-claim b {
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-subhead);
}
.proof-claim span { color: var(--muted); font-size: var(--text-body); line-height: var(--lh-body); text-wrap: pretty; }
.proof-claim-noise { margin-top: 24px; text-align: left; }

/* ── One application in gold ───────────────────────────────────────────────────────────
   The old stack had a front sheet with placeholder rules drawn on it, which read as a wireframe
   of a form rather than as a pile of applications. Now it is only the pile, deeper, with one
   sheet picked out in gold: the point is that the gold one is not better, it is just the one
   being read, and nothing on it says which. So there is nothing on it. */
.proof-application-stack {
  position: relative;
  width: min(100%, 270px);
  height: 250px;
  margin: 24px auto 0;
}
.proof-application-stack > span,
.proof-application-stack > b {
  position: absolute;
  /* A wider fan. At 7px per sheet the four in front of the gold one covered all but its edge,
     so "somewhere in the pile" read as "hidden". At 13px each sheet keeps a visible margin and
     the gold one is plainly a page in the stack rather than a sliver behind it. */
  top: calc(24px + var(--sheet, 0) * 9px);
  left: calc(var(--sheet, 0) * 13px);
  width: 56%;
  height: 158px;
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 8px 22px rgba(18,18,15,.05);
  opacity: 0;
  translate: 0 10px;
}
.proof-application-stack > *:nth-child(1) { --sheet: 8; }
.proof-application-stack > *:nth-child(2) { --sheet: 7; }
.proof-application-stack > *:nth-child(3) { --sheet: 6; }
.proof-application-stack > *:nth-child(4) { --sheet: 5; }
.proof-application-stack > *:nth-child(5) { --sheet: 4; }
.proof-application-stack > *:nth-child(6) { --sheet: 3; }
.proof-application-stack > *:nth-child(7) { --sheet: 2; }
.proof-application-stack > *:nth-child(8) { --sheet: 1; }
.proof-application-stack > *:nth-child(9) { --sheet: 0; }
/* Mid-pile, not in front. The claim is that this one is indistinguishable from the rest until
   somebody reads it, and a sheet sitting on top of everything looks chosen for a reason. It is
   still a sheet of paper, so it keeps a border and a pale fill rather than becoming a gold block
   that hides the pile behind it. */
/* No z-index. It was set to 1, which lifted this sheet in front of the whole pile and undid the
   mid-pile placement: it sat on top and looked chosen. Without it, paint order follows DOM order,
   so it is the fifth of nine and the four in front of it partly cover it. That is the claim: it
   is somewhere in the pile, and nothing about it says which one it is. */
.proof-application-stack > b.is-picked {
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 8px 22px rgba(18,18,15,.05);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* They deal in, back to front, so the pile assembles rather than appearing. */
.proof-lens.is-visible .proof-application-stack > span,
.proof-lens.is-visible .proof-application-stack > b {
  animation: proof-deal-in .5s ease-out forwards;
  animation-delay: calc((9 - var(--sheet, 0)) * 55ms);
}
@keyframes proof-deal-in { to { opacity: 1; translate: 0 0; } }
/* Set by the script when the last sheet finishes dealing. Without this the animation's
   forwards fill keeps ownership of opacity and translate for the life of the page, and the
   discard below can only ever change scale. */
.proof-lens.is-visible .proof-application-stack.is-dealt:not(:hover):not(.is-revealed) > span,
.proof-lens.is-visible .proof-application-stack.is-dealt:not(:hover):not(.is-revealed) > b,
.proof-application-stack.is-dealt:not(:hover) > span,
.proof-application-stack.is-dealt:not(:hover) > b {
  animation: none;
  opacity: 1;
  translate: 0 0;
}
/* While hovering, the animation still has to be off or its forwards fill reclaims opacity. */
.proof-lens.is-visible .proof-application-stack.is-dealt > span,
.proof-lens.is-visible .proof-application-stack.is-dealt > b { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .proof-application-stack > span,
  .proof-application-stack > b { opacity: 1; translate: none; }
  .proof-lens.is-visible .proof-application-stack > span,
  .proof-lens.is-visible .proof-application-stack > b { animation: none; }
}

/* ── What is on the pages (§35) ─────────────────────────────────────────────────────
   Each sheet carries a blank profile drawn in CSS: an avatar disc, a name rule, and three
   lines of body. Empty pages made the stack read as paper; a page with the SHAPE of a profile
   and nothing in it reads as an application that says nothing, which is the actual argument.

   Drawn with gradients on one element rather than as extra markup, because nine sheets times
   five features is forty-five nodes for a decorative diagram that is already aria-hidden. */
.proof-application-stack > span,
.proof-application-stack > b {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 15px 15px, var(--line-strong) 0 7px, transparent 7.5px),
    linear-gradient(var(--line-strong) 0 0),
    linear-gradient(var(--line) 0 0),
    linear-gradient(var(--line) 0 0),
    linear-gradient(var(--line) 0 0);
  background-size: 30px 30px, 44px 3px, 100% 2px, 82% 2px, 64% 2px;
  background-position: 12px 14px, 12px 54px, 12px 82px, 12px 100px, 12px 118px;
}
/* The gold one is the same layout, in gold, plus a filled avatar: the difference is that this
   page has something on it. */
.proof-application-stack.is-dealt:hover > b.is-picked,
.proof-application-stack.is-revealed > b.is-picked {
  background-image:
    radial-gradient(circle at 15px 15px, rgba(255,247,228,.95) 0 7px, transparent 7.5px),
    linear-gradient(rgba(255,247,228,.92) 0 0),
    linear-gradient(rgba(255,247,228,.5) 0 0),
    linear-gradient(rgba(255,247,228,.5) 0 0),
    linear-gradient(rgba(255,247,228,.5) 0 0),
    linear-gradient(158deg, #e0b45c 0%, #c08f2c 46%, #a97517 100%);
  background-size: 30px 30px, 44px 3px, 100% 2px, 82% 2px, 64% 2px, 100% 100%;
  background-position: 12px 14px, 12px 54px, 12px 82px, 12px 100px, 12px 118px, 0 0;
}

/* ── Discarding the pile (§34) ────────────────────────────────────────────────────────
   Hovering the stack throws the paper away. The nine sheets crumple toward a point and spin
   off in different directions; the gold one stays, grows, and centres itself.

   The argument the section makes is that an application says less than it used to, and that
   one of them is worth reading. Making the reader physically clear the pile to find it is the
   same argument as a gesture.

   Each sheet leaves on its own vector rather than all sliding one way, because paper thrown
   away does not travel in formation. The values are per-child rather than random so the
   motion is identical every time: a discard that scattered differently on each hover would
   read as a glitch. */
@media (hover: hover) and (pointer: fine) {
  .proof-application-stack > span {
    transition:
      scale .2s cubic-bezier(.5, 0, .75, 0),
      translate .46s cubic-bezier(.36, .04, .3, 1) .17s,
      rotate .46s cubic-bezier(.36, .04, .3, 1) .17s,
      opacity .3s var(--ease) .3s;
  }
  .proof-application-stack.is-dealt.is-revealed > span,
  .proof-application-stack.is-dealt:hover > span {
    /* Crumple first, then leave: the scale collapse is what reads as the paper balling up. */
    scale: .14;
    opacity: 0;
    translate: var(--tx, 0) var(--ty, 0);
    rotate: var(--tr, 0deg);
  }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(1),
  .proof-application-stack.is-dealt:hover > *:nth-child(1) { --tx: -132px; --ty: -104px; --tr: -58deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(2),
  .proof-application-stack.is-dealt:hover > *:nth-child(2) { --tx:  118px; --ty: -126px; --tr:  74deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(3),
  .proof-application-stack.is-dealt:hover > *:nth-child(3) { --tx: -156px; --ty:   38px; --tr:  39deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(4),
  .proof-application-stack.is-dealt:hover > *:nth-child(4) { --tx:  146px; --ty:   26px; --tr: -67deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(6),
  .proof-application-stack.is-dealt:hover > *:nth-child(6) { --tx: -104px; --ty:  132px; --tr:  81deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(7),
  .proof-application-stack.is-dealt:hover > *:nth-child(7) { --tx:  128px; --ty:  118px; --tr: -44deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(8),
  .proof-application-stack.is-dealt:hover > *:nth-child(8) { --tx:  -68px; --ty: -148px; --tr:  63deg; }
  .proof-application-stack.is-dealt.is-revealed > *:nth-child(9),
  .proof-application-stack.is-dealt:hover > *:nth-child(9) { --tx:   74px; --ty:  152px; --tr: -71deg; }

  /* The one that is left. It moves to the middle of the box and grows, and only then does its
     gold read as significance rather than as decoration: it is significant because it is the
     one still there. Transform origin is centred so the growth does not drag it off-frame. */
  .proof-application-stack > b.is-picked {
    transition:
      translate .5s cubic-bezier(.22, 1, .36, 1) .38s,
      scale .5s cubic-bezier(.22, 1, .36, 1) .38s,
      box-shadow .5s var(--ease) .38s,
      background .4s var(--ease) .38s,
      border-color .4s var(--ease) .38s;
  }
  .proof-application-stack.is-dealt:hover > b.is-picked,
  .proof-application-stack.is-revealed > b.is-picked {
    z-index: 2;
    /* Restated because the handback that normally holds this at 1 is scoped out during hover,
       and the base rule for a sheet is opacity: 0 while it waits to be dealt. Without this the
       gold one leaves with the rest of the pile, which is the opposite of the point. */
    opacity: 1;
    /* Gold arrives here and nowhere earlier. Until the pile is cleared this sheet is one of
       nine identical pages, which is the whole claim: nothing about it says which one it is
       until somebody actually reads it. */
    border: 1.5px solid #8d5b0f;
    /* Measured from the fan: this sheet sits 52px in and 60px down inside a 270x250 box while
       being 56% wide and 158px tall, so these two numbers put it dead centre. */
    translate: 8px -14px;
    scale: 1.22;
    box-shadow: 0 24px 58px rgba(140,95,20,.42);
  }
}

/* The discard is a flourish on a decorative, aria-hidden diagram. With motion reduced the
   stack simply sits there, which is the state the argument is made in anyway. */
@media (prefers-reduced-motion: reduce) {
  .proof-application-stack > span,
  .proof-application-stack:hover > span,
  .proof-application-stack > b.is-picked,
  .proof-application-stack:hover > b.is-picked {
    transition: none; translate: none; scale: none; rotate: none; opacity: 1;
  }
}

.proof-student-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 240px;
  align-content: center;
  margin-top: 18px;
}
.proof-student-field > span {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  background: #fff;
  opacity: 0;
  transform: translateY(12px);
}
.proof-lens.is-visible .proof-student-field > span {
  animation: proof-rise-in .45s calc(120ms + var(--i) * 110ms) ease-out forwards;
}
.proof-student-field b {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid var(--gold);
  background: var(--gold-pale);
  font-size: var(--text-caption);
}
.proof-student-field em {
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: var(--weight-medium);
  line-height: var(--lh-caption);
}
.proof-product { margin-top: clamp(66px, 8vw, 108px); }
.proof-product > header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.proof-product > header span { height: 1px; background: var(--gold); }
.proof-product > header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-heading);
  text-align: center;
}
.proof-product-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(38px, 4.5vw, 58px);
}
.proof-product-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 43px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--gold);
}
.proof-product-step {
  position: relative;
  z-index: 1;
  display: grid;
  /* Four rows now: number, heading, geometry, preview. The geometry takes the 1fr, which is the
     space that used to sit empty above a bottom-aligned preview. */
  grid-template-rows: auto auto 1fr auto;
  width: 100%;
  min-height: 330px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.proof-product-step:hover,
.proof-product-step:focus-visible,
.proof-product-step.is-active {
  border-color: var(--gold);
  box-shadow: 10px 12px 0 rgba(192,138,34,.09);
  transform: translateY(-5px);
  outline: none;
}
.proof-product-step > small {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  margin: 19px 20px 0;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}
.proof-product-step > small svg { width: 18px; height: 18px; }
.proof-product-step > h4 {
  min-height: 68px;
  margin: 17px 20px 0;
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
}
.proof-profile-preview,
.proof-filter-preview,
.proof-trial-preview {
  margin: 0 14px 14px;
  padding: 17px;
  border: 1px solid var(--line);
  background: #fafaf8;
}
.proof-profile-preview {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 2px 10px;
}
.proof-avatar {
  display: grid;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--gold);
  background: var(--gold-pale);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}
.proof-profile-preview strong { font-size: var(--text-caption); }
.proof-profile-preview em { color: var(--muted); font-size: var(--text-caption); font-style: normal; }
.proof-profile-preview i {
  grid-column: 1 / -1;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-caption);
  font-style: normal;
  text-align: left;
}
.proof-profile-preview i + i { margin-top: 0; }
.proof-filter-preview { display: grid; gap: 8px; }
.proof-filter-preview span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-caption);
}
.proof-filter-preview span:last-child { padding-bottom: 0; border-bottom: 0; }
.proof-filter-preview b { color: var(--soft); font-weight: var(--weight-medium); }
.proof-trial-preview { display: grid; gap: 9px; }
.proof-trial-preview span {
  color: var(--gold-deep);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps);
  text-transform: uppercase;
}
.proof-trial-preview strong { font-size: var(--text-body); line-height: var(--lh-body); }
.proof-trial-preview i { color: var(--muted); font-size: var(--text-caption); font-style: normal; }
.proof-product-outcome { background: var(--ink); color: #fff; }
.proof-product-outcome.is-active,
.proof-product-outcome:hover,
.proof-product-outcome:focus-visible { background: var(--ink); }
.proof-product-outcome > small { background: var(--gold-light); color: var(--ink); }
.proof-product-outcome > p {
  align-self: end;
  margin: 0 20px 28px;
  color: #d8d8d1;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}
.proof-outcome-note {
  margin: 18px 0 0;
  color: var(--soft);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  text-align: right;
}
@keyframes proof-rise-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1050px) {
  .proof-market { grid-template-columns: 1fr 1fr; }
  .proof-market-students { grid-column: 1 / -1; border-top: 1px solid var(--line-strong); }
  .proof-market > section:nth-child(2) { border-right: 0; }
  .proof-market-students .proof-student-field { grid-template-columns: repeat(4, 1fr); min-height: 130px; }
  .proof-product-rail { grid-template-columns: 1fr 1fr; }
  .proof-product-rail::before { display: none; }
  .proof-product-step { min-height: 300px; }
}
@media (max-width: 720px) {
  .proof-lens-section { padding: 74px 20px 82px; }
  .proof-lens-heading h2 { font-size: var(--text-heading); }
  .proof-lens-heading > p { max-width: 28ch; margin-top: 19px; line-height: var(--lh-body); }
  .proof-lens-heading > span { position: static; display: block; margin-top: 17px; }
  .proof-lens { margin-top: 40px; }
  .proof-market { grid-template-columns: 1fr; }
  .proof-market > section {
    min-height: auto;
    padding: 26px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }
  .proof-market > section:last-child { border-bottom: 0; }
  .proof-application-stack { height: 230px; }
  .proof-market-students { grid-column: auto; border-top: 0; }
  .proof-market-students .proof-student-field { grid-template-columns: 1fr 1fr; min-height: 210px; }
  .proof-product { margin-top: 64px; }
  .proof-product > header { grid-template-columns: 1fr; }
  .proof-product > header span { display: none; }
  .proof-product > header h3 { text-align: left; }
  .proof-product-rail { grid-template-columns: 1fr; gap: 16px; }
  .proof-product-step { min-height: 275px; }
  .proof-product-step:hover,
  .proof-product-step:focus-visible,
  .proof-product-step.is-active { transform: none; box-shadow: 7px 8px 0 rgba(192,138,34,.09); }
  .proof-outcome-note { text-align: left; }
    }
@media (prefers-reduced-motion: reduce) {
  .proof-student-field > span { opacity: 1; transform: none; animation: none!important; }
  .proof-product-step { transition: none; }
}

/* ── About us ──────────────────────────────────────────────────────────────────────────
   The nav has always carried an "About" link pointing at a product explainer. This is the
   section it was promising.

   Everything here reuses an existing convention rather than restating its values. The first
   version did not: it was a full-width --gold-pale band, and gold-pale is used across this
   whole site for small components (badges, banners, cards) and never for a section
   background. One tinted band between two white sections read as a different site. */
.about-section {
  padding: clamp(66px, 8vw, 120px) var(--page-gutter);
  border-top: 1px solid var(--line);
  background: #fff;
}
.about-inner {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 460px);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
/* h2 joins the shared .section-heading h2 rule rather than copying its numbers, so it can
   never drift from the headings above and below it. */
.about-lede h2 { margin: 0 0 22px; text-wrap: balance; }
/* Held near 60 characters so the three paragraphs read as an argument, not a block. */
.about-body { max-width: 58ch; margin: 0 0 16px; font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }
.about-body:last-of-type { margin-bottom: 0; color: var(--ink); }

/* Matches .referrer-cred-card, the card treatment already used two sections above. */
.about-side {
  padding: 28px 30px;
  border-radius: 0;
  border: 1px solid var(--gold-light);
  background: linear-gradient(180deg, var(--gold-pale), #fff);
}
.about-side-cap { margin: 0 0 18px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--gold-deep); }
/* Two premises and a conclusion, not three steps.
   This was a counter-numbered list with a boxed digit beside each item, and that is the shape
   the eye reads as generated: three identical rows, bold sans title over grey body, a decorative
   marker asserting an order the content does not have. The third line is what follows from the
   first two, so it is set apart by a rule and given the display face rather than a number.
   Removing the counter also removes the fragility the old comment warned about, since a CSS
   counter skips display:none and was only correct while all three rendered. */
.about-points { display: grid; gap: 20px; margin: 0; padding: 0; }
/* Read downward: the claim, then what it means. A hairline on the left carries the eye through
   all three without a marker beside any of them, which is the part that read as generated.
   The rule is the structure, so nothing needs numbering to imply order. */
.about-premise {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--gold-light);
}
/* Medium, not bold. At weight 700 a four-word phrase at body size was the heaviest thing in the
   panel and out-shouted the conclusion it exists to set up. Tracking is pulled in slightly,
   which is what makes a short line read as deliberate rather than merely heavy. */
.about-premise b {
  color: var(--ink);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  letter-spacing: var(--ls-subhead);
}
.about-premise span {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.about-conclusion {
  margin: 4px 0 0;
  padding: 18px 0 0 16px;
  border-top: 1px solid var(--gold-light);
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: var(--weight-regular);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  color: var(--ink);
  text-wrap: pretty;
}
/* The one place the boldness is spent: the clause the whole section exists to land. */
.about-conclusion em { color: var(--gold-deep); font-style: italic; }

.about-social {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gold-light);
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--gold-deep); font-size: var(--text-body); font-weight: var(--weight-medium); text-decoration: none;
}
.about-social svg { width: 19px; height: 19px; }
.about-social:hover span { text-decoration: underline; }
.about-social:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

/* ── For technical recruiters ──────────────────────────────────────────────────────────
   The company hero speaks to a founder with a backlog. A recruiter has a req and a hiring
   manager to satisfy. Same product, different problem, so it gets its own band.

   The diagram carries the argument, which is why the prose around it is three sentences.
   Built on the same tokens as .feature-band and .about-section either side of it. */
.recruiter-band {
  padding: clamp(66px, 8vw, 120px) var(--page-gutter);
  border-top: 1px solid var(--line);
  background: #fff;
}
.recruiter-inner { width: min(100%, var(--content)); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 46px); }
.recruiter-lede { max-width: 660px; }
.recruiter-lede h2 { margin: 0 0 18px; text-wrap: balance; }
.recruiter-body { max-width: 58ch; margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }

/* The two-row comparison. Same three slots on each row so the eye reads down a column and
   sees claimed against built, verified, defended. */
.rmap { display: grid; gap: 14px; }
.rmap-row {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr) minmax(0, 232px);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
}
.rmap-row.is-after { border-color: var(--gold-light); background: linear-gradient(180deg, var(--gold-pale), #fff); }

.rmap-tag { align-self: start; padding: 5px 10px; border: 1px solid var(--line-strong); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rmap-tag.is-gold { border-color: var(--gold); background: var(--gold); color: #1c1300; }

.rmap-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rmap-steps li { position: relative; padding: 11px 12px; border: 1px dashed var(--line-strong); background: #fff; }
/* Dashed for a claim, solid for something backed. The border weight is the information. */
.rmap-steps li.is-on { border-style: solid; border-color: var(--gold); }
.rmap-steps b { display: block; font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--muted); letter-spacing: var(--ls-body); }
.rmap-steps li.is-on b { color: var(--gold-deep); }
.rmap-steps small { display: block; margin-top: 3px; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--soft); }

.rmap-end { padding: 12px 14px; border-left: 3px solid var(--line-strong); }
.rmap-end.is-clear { border-left-color: var(--success); }
.rmap-end b { display: block; font-size: var(--text-body); font-weight: var(--weight-bold); line-height: var(--lh-body); color: var(--ink); text-wrap: balance; }
.rmap-end small { display: block; margin-top: 4px; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--soft); }
.rmap-end.is-stall b { color: var(--muted); }

/* Hairline dividers rather than gaps: three related claims read as one block, not as three
   floating cards. */
.recruiter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.recruiter-card { padding: 22px 24px; background: #fff; }
.recruiter-card h3 { margin: 0 0 8px; font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--ink); text-wrap: balance; }
.recruiter-card p { margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }

.recruiter-honest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-left: 3px solid var(--gold); background: var(--gold-pale); }
.recruiter-honest p { display: flex; align-items: flex-start; gap: 9px; margin: 0; max-width: 60ch; font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); }
.recruiter-honest svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }

@media (max-width: 860px) {
  .rmap-row { grid-template-columns: 1fr; align-items: stretch; }
  .rmap-steps { grid-auto-flow: row; }
  .recruiter-grid { grid-template-columns: 1fr; }
}

/* ── Ambient drift on the exchange cards ───────────────────────────────────────────────
   The three panels sat perfectly still, which made a diagram about work moving between two
   sides look like a printed figure.

   Animates `translate` and `rotate`, the independent transform properties, NOT `transform`.
   The side cards already carry transform: translateX(...) for their position offset, and a
   keyframe on `transform` replaces that outright: the drift did not add to the offset, it
   fought it. The independent properties compose with transform instead of overwriting it, so
   the offset survives and the drift rides on top.

   Restrained on purpose. Amplitude is a few pixels, the cycles are long and coprime so the
   cards never fall into step, and the centre panel moves least because it is the thing being
   read. Compositor-only, so nothing here triggers layout. */
@keyframes drift-a {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -9px; rotate: -.4deg; }
}
@keyframes drift-b {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -11px; rotate: .45deg; }
}
@keyframes drift-centre {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

.exchange-source--task { animation: drift-a 11s ease-in-out infinite; }
.exchange-source--student { animation: drift-b 13s ease-in-out -4s infinite; }
.exchange-workbench { animation: drift-centre 17s ease-in-out -7s infinite; }

/* Hovering a card settles it, so anything somebody is actually reading holds still. */
.exchange-source:hover, .exchange-workbench:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .exchange-source--task, .exchange-source--student, .exchange-workbench { animation: none; }
}

/* The roster builder, on demand. Inline it was the longest thing on the page and the least
   likely to be used on a first visit: a partner reads the ladder, decides, and only then has
   names to add. */
.roster-open { display: grid; gap: 8px; justify-items: start; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--gold-light); background: linear-gradient(180deg, var(--gold-pale), #fff); }
.roster-open-cap { margin: 0; font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption); color: var(--ink); }
.roster-open-note { max-width: 52ch; margin: 0 0 6px; font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); }

.roster-dialog { width: min(100%, 900px); max-height: 88vh; padding: 0; border: 1px solid var(--line-strong); border-radius: 0; background: #fff; overflow: auto; }
.roster-dialog::backdrop { background: rgba(17,17,15,.55); }
.roster-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--line); background: #fff; }
.roster-dialog-head h2 { margin: 0; font-family: var(--font-sans); font-size: var(--text-subhead); font-weight: var(--weight-bold); letter-spacing: var(--ls-subhead); }
.roster-dialog .roster-builder { border: 0; box-shadow: none; padding: 22px 26px 30px; }
.dialog-close { border: 0; background: transparent; color: var(--muted); font-size: var(--text-heading); line-height: var(--lh-heading); cursor: pointer; }
.dialog-close:hover { color: var(--ink); }

/* ── Keyboard focus, everywhere ────────────────────────────────────────────────────────
   An audit at 375px found 16 interactive elements with no visible focus indicator at all:
   the intro skip, the brand, the three hero paths, the scroll cue, the exchange arrows, the
   product-step buttons. Each had been styled individually and each had been missed
   individually, which is what happens when the floor is per-component rather than global.

   :focus-visible, so a mouse click never paints a ring, and the ring is gold on light and
   gold-light on the dark sections so it is visible on both grounds. Any component that wants
   its own treatment still wins on specificity; this only catches what nothing else covers. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
/* On the dark grounds the deep gold disappears into the ink. */
.hero-home a:focus-visible,
.hero-home button:focus-visible,
.intro-screen button:focus-visible,
.form-rail a:focus-visible,
.form-rail button:focus-visible,
.audience-transition button:focus-visible,
.student-vertical.is-selected:focus-visible {
  outline-color: var(--gold-light);
}
/* Never rely on the ring alone where the element also carries meaning through colour. */
.home-path:focus-visible { outline-offset: -2px; }

/* ── Tap-target floor (§17) ────────────────────────────────────────────────────────────
   A walk of every page at 375px found five controls under the 24px minimum, all of them bare
   text links whose height was just their line box: .back-site at 17px, .auth-back and
   .ghost-button at 19px, .quiet-link at 22px. Padding rather than font-size, so the type scale
   is untouched and the target grows around the words. */
.back-site, .auth-back, .ghost-button, .quiet-link, .scroll-cue, .draft-clear {
  padding-block: 4px;
  min-height: 24px;
}
.back-site, .auth-back, .quiet-link { display: inline-flex; align-items: center; gap: 6px; }

/* ── The proof rail, as a tablist (§18) ────────────────────────────────────────────────
   The button covers its whole step rather than wrapping the content: .proof-rail targets
   direct children (li > span, li > svg), so wrapping the text in a button would have broken
   every one of those selectors at once. Same overlay pattern as the sign-up chips. */
.proof-rail li { position: relative; }
.proof-step-hit {
  position: absolute;
  inset: -10px -10px -10px -6px;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.proof-step-hit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
/* The step that owns the panel currently on screen. Without this the rail gives no clue which
   of the three the graphic belongs to. */
.proof-rail li.is-current > span { background: var(--gold); border-color: var(--gold); color: #fff; }
.proof-rail li.is-current > svg { color: var(--gold); }
.proof-rail li.is-current > h3 { color: var(--ink); }
.proof-rail li:not(.is-current) > h3 { color: var(--gold-deep); }
.proof-rail li:not(.is-current) { opacity: .72; transition: opacity var(--dur) var(--ease); }
.proof-rail li:not(.is-current):hover { opacity: 1; }
/* The panel is swapped, not resized: it fades in place so the column never jumps height. */
.work-record[role="tabpanel"] { animation: panelIn var(--dur) var(--ease) both; }
@keyframes panelIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .work-record[role="tabpanel"] { animation: none; }
  .proof-rail li:not(.is-current) { transition: none; }
}

/* ── Referrer track record (§19) ───────────────────────────────────────────────────────
   Four stat boxes in a three-column grid left the fourth orphaned on its own row beside two
   empty cells, and giving all four equal weight implied a sequence they do not form:
   endorsed / working / verified are mutually exclusive and together partition the roster, while
   "in a batch" cuts across all three. That is why 2 -> 3 -> 2 -> 1 read as broken data.

   One node for the roster, branching to the three statuses that actually divide it, drawn with
   CSS connectors rather than SVG so nothing depends on measuring the layout first. */
.referrer-graph {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin-top: 22px;
}
.rg-source {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 20px 26px;
  border: 1px solid var(--gold);
  background: #fff;
  text-align: center;
}
.rg-source-count { font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular); line-height: var(--lh-heading); }
.rg-source span { color: var(--muted); font-size: var(--text-caption); }
/* The stem out of the roster node. */
.rg-source::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(11px, 2vw, 26px);
  height: 1px;
  background: var(--gold);
}
.rg-branch { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rg-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: #fff;
}
/* The connector into each branch, plus the spine joining them. */
.rg-node::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: clamp(11px, 2vw, 26px);
  height: 1px;
  background: var(--line-strong);
}
.rg-branch::before {
  content: '';
  grid-area: 1 / 1 / -1 / -1;
  align-self: stretch;
  justify-self: start;
  width: 1px;
  margin-left: calc(clamp(11px, 2vw, 26px) * -1);
  background: var(--line-strong);
}
.rg-node b { font-family: var(--font-display); font-size: var(--text-subhead); font-weight: var(--weight-regular); min-width: 1.4ch; }
.rg-node span { color: var(--muted); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
/* Weight follows the count, so the branch reads as a distribution rather than three identical
   boxes that happen to hold different numbers. */
.rg-node { border-left: 3px solid color-mix(in srgb, var(--gold) calc(var(--share, 0) * 100%), var(--line)); }
.rg-node.is-verified { border-color: var(--line); border-left-color: var(--success); }
.rg-node.is-verified b { color: var(--success); }
.rg-note { margin: 14px 0 0; color: var(--soft); font-size: var(--text-caption); }
/* The mark sits on the name, which is the thing being vouched for. */
.referrer-verified { width: 17px; height: 17px; margin-left: 7px; color: var(--gold); vertical-align: -2px; }
@media (max-width: 640px) {
  .referrer-graph { grid-template-columns: 1fr; gap: 16px; }
  .rg-source::after, .rg-node::before, .rg-branch::before { display: none; }
}

/* ── The sourcing flow arrives as it is read (§24) ─────────────────────────────────────
   Eleven stacked rows that used to appear together. Each one now lands as it comes into view, so
   scrolling walks the flow in the order it happens rather than presenting it whole.

   Gated on .js-reveal AND on .is-stepped, which the script adds: nothing is hidden unless the
   code that reveals it is definitely running, or a failed script leaves a blank figure. */
.js-reveal .mflow.is-stepped > * {
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.js-reveal .mflow.is-stepped > .is-in { opacity: 1; translate: 0 0; }
/* The connectors are thinner than the nodes they join, so they arrive a beat sooner and the line
   is already drawn when the box it points at appears. */
.js-reveal .mflow.is-stepped > .mf-conn,
.js-reveal .mflow.is-stepped > .mf-branch { transition-duration: var(--dur-fast); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .mflow.is-stepped > * { opacity: 1; translate: none; transition: none; }
}

/* The positioning line, set above the founding story it frames. Larger than the body around
   it and in the display face, because it is a thesis rather than a paragraph, but held below
   the section heading so it reads as the answer to it. */
.about-thesis {
  margin: 0 0 26px;
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-subhead);
  color: var(--ink);
}

/* The distinction, now set above the three pillars it introduces. On the light ground it can
   carry real contrast, so the two halves separate by colour and weight rather than by opacity
   the way they had to over the dark hero. */
.pillars-stance {
  /* Set to the right while the heading stays left, so the two read as a masthead across the
     width rather than as two stacked left-aligned blocks. The ragged edge moves to the left,
     which is why the block is also right-aligned rather than just pushed over. */
  margin: 0 0 clamp(28px, 3.6vw, 42px) auto;
  max-width: 56ch;
  text-align: right;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--muted);
}
.pillars-stance em { font-style: normal; color: var(--soft); }
.pillars-stance strong { font-weight: var(--weight-medium); color: var(--ink); }

/* ── The manifesto (§31) ──────────────────────────────────────────────────────────────
   A definition list, because that is what it structurally is: a term and what we say back to
   it. The <dt> is the industry position, held quiet; the <dd> is ours, in ink. The contrast
   IS the content, so it is carried by weight and colour rather than by a gold accent. */
.manifesto { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.manifesto-cap {
  margin: 0 0 16px; color: var(--soft);
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps); text-transform: uppercase;
}
.manifesto-pairs { margin: 0; display: grid; gap: 14px; }
.manifesto-pairs dt {
  color: var(--soft); font-size: var(--text-body); line-height: var(--lh-body);
}
.manifesto-pairs dd {
  margin: 2px 0 0; color: var(--ink);
  font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-medium);
}
.manifesto-close {
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-body); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); font-weight: var(--weight-medium); color: var(--ink);
}
.manifesto-close em { font-style: normal; color: var(--gold-deep); }
/* The manifesto block moved into the aside and no longer needs its own rule and heading. */
.manifesto { display: contents; }

/* The motto closes the About section. Display face and a step up in size, because it is the
   last thing read in the section that answers who Covenda is for. */
.about-motto {
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  color: var(--ink);
  text-wrap: balance;
}
.about-motto em { font-style: normal; color: var(--gold-deep); }

/* ── Three pillars (§32) ──────────────────────────────────────────────────────────────
   Each pillar is a contrast: the thing we choose, then the thing it is chosen over. So the
   heading carries both halves and the type does the separating, with the chosen half in ink
   and the rejected half in grey. No gold on the contrast itself; the section already has one
   gold word in its title and a third opposition in gold would read as three slogans.

   An <ol> because these are ranked. Evidence is the first pillar and the other two depend on
   it, which is information the markup should carry rather than only the prose. */
.pillars-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
/* The canvas sits behind the words and never takes a pointer event. It is atmosphere: if the
   script fails or motion is reduced, the section is a plain three-column text block and loses
   nothing it needed. */
.pillars-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pillars-inner { position: relative; z-index: 1; }
.pillars-inner { width: min(100% - 40px, 1120px); margin: 0 auto; }
.pillars-inner h2 { margin: 6px 0 clamp(24px, 3vw, 34px); }

/* The two questions above the pillars. The second is the one that matters, so it is the one
   set in ink at size; the first is the premise it corrects and stays grey. Quotes are real
   <q> elements: these are questions being asked, not decorative pull-quotes. */
.pillars-reframe { margin: 0 0 clamp(34px, 4.5vw, 52px); max-width: 62ch; display: grid; gap: 12px; }
.pillars-reframe p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pillars-reframe span {
  flex: none; color: var(--soft);
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  letter-spacing: var(--ls-caption-caps); text-transform: uppercase;
}
.pillars-reframe q {
  font-family: var(--font-display);
  font-size: var(--text-subhead); line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead); color: var(--soft);
}
.pillars-reframe p:last-child q { color: var(--ink); }
.pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(28px, 3.4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: pillar;
}
.pillar { position: relative; counter-increment: pillar; padding-top: 20px; border-top: 2px solid var(--ink); }
.pillar h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-subhead); line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead); font-weight: var(--weight-regular);
  color: var(--soft);
}
/* The half we choose. Everything after it in the heading is what it is chosen over. */
.pillar h3 span { color: var(--ink); font-weight: var(--weight-medium); }
.pillar p {
  margin: 0; max-width: 34ch;
  font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted);
}
/* The rule above each pillar thins on the ones that follow, so the order the <ol> asserts is
   visible rather than only semantic. */
.pillar:nth-child(2) { border-top-color: var(--line-strong); }
.pillar:nth-child(3) { border-top-color: var(--line); }

/* ── Pillar copy arrives with its column (§37) ────────────────────────────────────────
   The class is set by the canvas loop from the same scroll progress that raises the column
   behind it, so the words and the column are one movement rather than two animations that
   happen to overlap.

   Gated on .js-reveal: if the script never runs, the copy is simply there. */
.js-reveal .pillar {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .55s var(--ease), translate .55s cubic-bezier(.22, 1, .36, 1);
}
.js-reveal .pillar.is-in { opacity: 1; translate: 0 0; }
/* The rule above each pillar draws itself in rather than fading, which is the one flourish
   that reads as construction instead of a cross-fade. */
.js-reveal .pillar { border-top-color: transparent; }
.js-reveal .pillar::after {
  content: ""; position: absolute; inset: -2px auto auto 0;
  height: 2px; width: 0; background: var(--ink);
  transition: width .6s cubic-bezier(.22, 1, .36, 1) .1s;
}
.js-reveal .pillar.is-in::after { width: 100%; }
.js-reveal .pillar:nth-child(2)::after { background: var(--line-strong); }
.js-reveal .pillar:nth-child(3)::after { background: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .pillar { opacity: 1; translate: none; transition: none; border-top-color: var(--ink); }
  .js-reveal .pillar::after { display: none; }
}

/* Said once on the rail instead of badging nineteen fields. A form where almost everything is
   required should tell you that, not make you discover it one refusal at a time. */
.form-rail-required { margin: 10px 0 0; color: rgba(255,255,255,.62); font-size: var(--text-caption); line-height: var(--lh-caption); }
.field-optional { margin-left: 6px; color: var(--soft); font-size: var(--text-caption); font-weight: var(--weight-regular); }