/* collfit.com. The app's Ink & marigold tokens (apps/web/src/styles/tokens.css), with --leaf and --text-3 darkened for AA contrast on
   small text; marigold only where attention is due. Light by default, dark by [data-theme=dark] (the switch) or by the system
   setting when nothing is chosen. The two dark blocks must stay identical. */
:root {
  --paper: #f6f7fb;
  --surface: #ffffff;
  --sunken: #eef0f6;
  --ink: #1d2757;
  --ink-hover: #151d45;
  --on-ink: #ffffff;
  --heading: #1d2757;
  --btn: #1d2757;
  --btn-hover: #151d45;
  --on-btn: #ffffff;
  --text: #1a2140;
  --text-2: #4a5275;
  --text-3: #636a8b;
  --line: #dce0eb;
  --line-strong: #c4cadb;
  --marigold: #e3a21a;
  --marigold-soft: #fdf3dc;
  --marigold-text: #8a5d00;
  --on-marigold: #2a1d00;
  --leaf: #287152;
  --leaf-soft: #e3f2ea;
  --signal: #c2352b;
  --signal-soft: #fbe7e5;
  --sky-soft: #e8ecfb;
  --focus: #5b6fe0;
  --band: #1d2757;
  --on-band: #e7e9f3;
  --on-band-2: #b4bad3;
  --frame: #1a2140;
  --shadow: 0 18px 40px rgb(20 26 51 / 0.12), 0 2px 6px rgb(20 26 51 / 0.06);

  /* Type: Anek, at one width (90%), for headings and the big numbers, in two weights; Noto Sans for everything else, in four
     sizes. Both families have companions for Indian scripts, so another language can come without changing the look. */
  --font-head: "CF Head", "CF Body", system-ui, sans-serif;
  --font-body: "CF Body", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: 600;
  --head-bold: 680;
  --t-lead: 1.125rem;
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;
  /* Three radii: small things, cards, pills. */
  --r-s: 6px;
  --r-l: 16px;
  --measure: 68ch;
  --page: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: light;
}

/* Dark: headings and filled buttons go near-white; the periwinkle ink is kept for links, focus and selected marks. */
:root[data-theme="dark"] {
  --paper: #141a33; --surface: #1c2342; --sunken: #171d3a;
  --ink: #9da8f0; --ink-hover: #b6bff5; --on-ink: #141a33; --heading: #e7e9f3;
  --btn: #e7e9f3; --btn-hover: #ffffff; --on-btn: #141a33;
  --text: #e7e9f3; --text-2: #b4bad3; --text-3: #959cbb;
  --line: #2c3458; --line-strong: #3b4470;
  --marigold: #f0b43a; --marigold-soft: #3a2f17; --marigold-text: #f5c766;
  --leaf: #5fbf8f; --leaf-soft: #17352a; --signal: #ff8a7f; --signal-soft: #3d1d22;
  --sky-soft: #252e57; --focus: #9da8f0;
  --band: #0f1429; --on-band: #e7e9f3; --on-band-2: #b4bad3;
  --frame: #0b1024;
  --shadow: 0 18px 40px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141a33; --surface: #1c2342; --sunken: #171d3a;
    --ink: #9da8f0; --ink-hover: #b6bff5; --on-ink: #141a33; --heading: #e7e9f3;
    --btn: #e7e9f3; --btn-hover: #ffffff; --on-btn: #141a33;
    --text: #e7e9f3; --text-2: #b4bad3; --text-3: #959cbb;
    --line: #2c3458; --line-strong: #3b4470;
    --marigold: #f0b43a; --marigold-soft: #3a2f17; --marigold-text: #f5c766;
    --leaf: #5fbf8f; --leaf-soft: #17352a; --signal: #ff8a7f; --signal-soft: #3d1d22;
    --sky-soft: #252e57; --focus: #9da8f0;
    --band: #0f1429; --on-band: #e7e9f3; --on-band-2: #b4bad3;
    --frame: #0b1024;
    --shadow: 0 18px 40px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

/* Verdicts keep one colour each, everywhere they appear. */
.v-true { --v: var(--leaf); --v-soft: var(--leaf-soft); }
.v-false { --v: var(--signal); --v-soft: var(--signal-soft); }
.v-partly { --v: var(--marigold-text); --v-soft: var(--marigold-soft); }
.v-unsure { --v: var(--text-2); --v-soft: var(--sunken); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--t-body)/1.65 var(--font-body);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--marigold-soft); color: var(--text); }

h1, h2, h3, h4 { color: var(--heading); margin: 0; text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head); }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.02; font-weight: var(--head-bold); letter-spacing: -0.006em; }
h2 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); line-height: 1.08; }
h3 { font-size: 1.375rem; line-height: 1.2; }
h4 { font: 600 var(--t-body)/1.35 var(--font-body); }
p, li, dd, dt, span, b, strong { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.lede { font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.note { font-size: var(--t-small); color: var(--text-3); max-width: var(--measure); }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: var(--r-s); z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; color: var(--heading); text-decoration: none; font: var(--head-bold) 1.3125rem/1 var(--font-head); }
.brand svg { width: 30px; height: 30px; flex: none; }
/* The tile is ink on light paper; in dark mode it would vanish, so it takes the surface colour and an outline. */
:root[data-theme="dark"] .brand .tile { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .tile { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; } }
.top nav { display: flex; gap: 24px; margin-left: auto; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: var(--t-small); line-height: 1; }
.top nav a:hover { color: var(--ink); }
/* Whatever comes first after the brand takes the slack: the nav, else the theme switch, else (no script) the button. */
.doc .top .theme-switch { margin-left: auto; }
html:not(.js) .doc .top .button { margin-left: auto; }

/* Light, dark, or whatever the device says. Shown only when script can make it work: in the header on wider screens, in the
   footer on phones, where the header has no room for it. */
.theme-switch { display: none; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); }
.js .top .theme-switch { display: inline-flex; }
.theme-switch button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(20 26 51 / 0.14); }
.theme-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .half { fill: currentColor; stroke: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--btn); color: var(--on-btn); text-decoration: none;
  font: 600 var(--t-body)/1 var(--font-body); border: 1px solid var(--btn);
}
.button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.quiet:hover { border-color: var(--ink); background: transparent; }
.top .button { min-height: 44px; padding: 0 18px; font-size: var(--t-small); flex: none; }
.button .wa { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.button .wa .fill-none { fill: currentColor; stroke: none; }

@media (max-width: 980px) {
  .top nav { display: none; }
  .top .brand { margin-right: auto; }
}
@media (pointer: coarse) { .theme-switch button { width: 44px; height: 44px; } }
@media (max-width: 600px) {
  .js .top .theme-switch { display: none; }
  .js footer .theme-switch { display: inline-flex; }
  footer .theme-switch button { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
  .top .wrap { gap: 10px; }
  .top .button { padding: 0 14px; }
}

/* Sections */
section { padding-block: clamp(64px, 8vw, 104px); }
section + section { border-top: 1px solid var(--line); }
.head { max-width: var(--measure); display: grid; gap: 16px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.head p { color: var(--text-2); font-size: var(--t-lead); }

/* Tabs and panels. site.js adds the roles; without script every panel shows in turn. With script, panels share one grid cell
   so switching never changes the height. */
[data-tabs] [aria-selected] { cursor: pointer; }
.js [data-panels] { display: grid; }
.js [data-panels] > * { grid-area: 1 / 1; }
.js [data-panels] > .is-off { visibility: hidden; }
/* The stages change only when tapped, so their card may change height rather than keep the tallest one's. */
.js .phase-panels > .is-off { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-panels] > .is-new { animation: settle 260ms ease-out; }
}
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }

/* Hero: the noise families hear, and what a counsellor says about it */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 104px); border-top: 0; }
.hero > .wrap { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: clamp(40px, 4.5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.625rem, 5vw, 4.25rem); line-height: 1.02; }
/* One sentence per line: career first, then college. */
.hero h1 span { display: block; }
.hero .lede { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.place-note { margin-top: 28px; color: var(--text-2); font-size: var(--t-small); max-width: 48ch; }
@media (max-width: 900px) { .hero > .wrap { grid-template-columns: 1fr; } .hero-text { max-width: 640px; } }

.board { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 18px 22px; align-items: center; }
.rumours { display: grid; gap: 14px; }
.fwd {
  position: relative; display: grid; gap: 6px; text-align: left; padding: 10px 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px var(--r-l) var(--r-l) var(--r-l);
  color: var(--text); line-height: 1.4; box-shadow: 0 1px 2px rgb(20 26 51 / 0.05);
}
/* A little untidy, like a phone full of forwards. */
.fwd:nth-child(1) { rotate: -1.2deg; }
.fwd:nth-child(2) { rotate: 0.8deg; margin-left: 18px; }
.fwd:nth-child(3) { rotate: -0.6deg; margin-right: 22px; }
.fwd:nth-child(4) { rotate: 1deg; margin-left: 8px; }
.fwd:hover { border-color: var(--line-strong); }
.fwd[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); rotate: 0deg; }
html:not(.js) .fwd { cursor: default; }
.fwd-meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: var(--text-3); line-height: 1.2; }
.fwd-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fwd-text { font-size: var(--t-small); }
/* The stamp lands on the bottom corner, clear of the text. */
.mark {
  position: absolute; right: -8px; bottom: -12px; padding: 4px 8px 3px; border-radius: var(--r-s);
  font: var(--head-bold) var(--t-small)/1 var(--font-head); color: var(--v); background: var(--surface);
  border: 1.5px solid currentColor; rotate: -6deg; white-space: nowrap;
}
.board.is-intro .fwd:not(.is-stamped) .mark { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .board.is-intro .fwd.is-stamped .mark { animation: thunk 380ms cubic-bezier(.2, .9, .3, 1.2); }
  .verdict.is-new .stamp { animation: thunk 420ms cubic-bezier(.2, .9, .3, 1.2); }
}
@keyframes thunk { from { opacity: 0; scale: 1.7; rotate: -14deg; } 70% { opacity: 1; scale: 0.96; } }

.verdict {
  padding: 22px 24px 20px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; gap: 14px; align-content: start;
}
/* Without script the verdicts follow the forwards, so each repeats the claim it answers. */
.claim { font-weight: 500; color: var(--text); }
.js .claim { display: none; }
html:not(.js) .verdicts { display: grid; gap: 16px; }
.verdict .who, .check .who { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--t-micro); line-height: 1; }
.who .when { margin-left: auto; color: var(--text-3); white-space: nowrap; }
/* A rubber stamp: a double rule in the verdict's colour, set at a slight angle. */
.stamp {
  justify-self: start; display: inline-block; padding: 8px 14px 6px; border-radius: var(--r-s); rotate: -4deg;
  color: var(--v); background: var(--v-soft); border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--v-soft), inset 0 0 0 3.5px currentColor;
  font: var(--head-bold) 1.5rem/1 var(--font-head); letter-spacing: 0.01em;
}
.verdict p { color: var(--text); }
.source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--text-2); line-height: 1.2; }
.caption { grid-column: 1 / -1; max-width: 60ch; font-size: var(--t-small); color: var(--text-2); }
@media (max-width: 1180px) { .board { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .fwd:nth-child(n) { margin-inline: 0; } }

/* Fact labels, as in the app */
.label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border: 0; border-radius: var(--r-s); font: 600 var(--t-micro)/1 var(--font-body); white-space: nowrap; }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.label.official { background: var(--leaf-soft); color: var(--leaf); }
.label.verified { background: var(--sky-soft); color: var(--ink); }
.label.reported { background: var(--marigold-soft); color: var(--marigold-text); }
.label.unconfirmed { background: var(--sunken); color: var(--text-2); }
a.label { position: relative; text-decoration: none; }
/* A bigger target than the label itself. */
a.label::after { content: ""; position: absolute; inset: -11px -4px; }

/* Sound familiar: each worry, as it's said, against College Fit's answer */
.familiar { background: var(--sunken); }
.seg { display: none; width: max-content; max-width: 100%; padding: 4px; gap: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 28px; }
.js .seg { display: inline-flex; }
.seg button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-weight: 600; }
.seg button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); }
.ledgers > div + div { margin-top: 48px; }
.js .ledgers > div + div { margin-top: 0; }
.aud-title { margin-bottom: 16px; }
.js .aud-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ledger { margin: 0; border-top: 1px solid var(--line-strong); }
.ledger > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px clamp(32px, 6vw, 88px); padding: 24px 0; border-bottom: 1px solid var(--line-strong); }
.ledger dt { justify-self: start; align-self: start; max-width: 34ch; padding: 12px 18px 14px; border-radius: 4px var(--r-l) var(--r-l) var(--r-l); background: var(--surface); border: 1px solid var(--line); font: 500 clamp(1.125rem, 1.6vw, 1.25rem)/1.4 var(--font-body); color: var(--text); }
.ledger dt::before { content: "“"; }
.ledger dt::after { content: "”"; }
.ledger dd { margin: 0; padding-left: 18px; border-left: 3px solid var(--ink); color: var(--text-2); max-width: 52ch; }
.ledger dd b { display: block; margin-bottom: 4px; color: var(--heading); font-weight: 600; font-size: var(--t-lead); }
@media (max-width: 760px) { .ledger > div { grid-template-columns: 1fr; padding: 20px 0; } }

/* Careers: Holland's hexagon (built by build.py) beside a big count, and the careers as lists below. Before the reveal
   only the two careers every family hears about show; then the rest arrive, Thinkers first. */
.careers-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.careers-intro { display: grid; gap: 20px; align-content: start; }
.careers-intro > p:first-of-type { color: var(--text-2); font-size: var(--t-lead); max-width: 46ch; }
.map-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--text-2); font-weight: 600; }
.map-count b { font: var(--head-bold) clamp(3.25rem, 8vw, 5.5rem)/0.9 var(--font-head); color: var(--heading); font-variant-numeric: tabular-nums; min-width: 2ch; }
.stream-filter { display: none; flex-wrap: wrap; gap: 6px; }
.js .stream-filter { display: flex; }
.stream-filter button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-weight: 600; font-size: var(--t-small); cursor: pointer; }
.stream-filter button:hover { border-color: var(--ink); color: var(--ink); }
.stream-filter button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.map-cta { display: grid; justify-items: start; gap: 10px; }
.map-cta p { color: var(--text-2); font-size: var(--t-small); max-width: 44ch; }

.hex { width: 100%; height: auto; overflow: visible; }
.hex-edge { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.hex-ring, .hex-spoke { fill: none; stroke: var(--line); stroke-width: 1; }
.hex-ring { stroke-dasharray: 3 5; }
.hex-corner { font: var(--head) 24px var(--font-head); fill: var(--heading); }
.hex-label { font: 600 16px var(--font-body); fill: var(--heading); }
@media (max-width: 560px) { .hex-corner { font-size: 30px; } .hex-label { font-size: 22px; } }
.hex-dot { fill: var(--ink); fill-opacity: 0.8; }
.hex-dot.known { fill: var(--marigold); fill-opacity: 1; stroke: var(--surface); stroke-width: 2; }
.hex-dot.is-out { fill-opacity: 0.15; }
.hex-dot.is-hot { fill: var(--marigold); fill-opacity: 1; r: 9px; }
.hex-shape { fill: none; stroke: none; }
html:not(.js) .hex-wrap { display: none; }

.career-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 56px); margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line-strong); }
.cm-group h3 { display: grid; gap: 4px; margin-bottom: 14px; }
.cm-group h3 span { font: 500 var(--t-small)/1.3 var(--font-body); color: var(--text-3); }
.career-map ul { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.career-map li { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--t-small); line-height: 1.2; color: var(--text); }
.career-map li.known { background: transparent; border-color: var(--marigold); color: var(--marigold-text); font-weight: 600; }
.career-map li.is-out { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .career-map li, .hex-dot { transition: opacity 300ms ease, transform 300ms ease, fill-opacity 300ms ease; }
  .is-revealing .career-map li, .is-revealing .hex-dot { transition-delay: calc(var(--i, 0) * 24ms); }
}
.is-before .career-map li:not(.known) { opacity: 0; transform: translateY(6px); }
.is-before .hex-dot:not(.known) { opacity: 0; }
.is-before .cm-group:not(:has(.known)) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .cm-group { transition: opacity 300ms ease; } }
@media (max-width: 900px) {
  .careers-top { grid-template-columns: 1fr; }
  .hex-wrap { order: -1; max-width: 520px; width: 100%; margin-inline: auto; }
  .careers-intro { order: 0; }
  .career-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .career-map { grid-template-columns: 1fr; gap: 28px; } }

/* The path: eight school and college years on one scale, with the four stages laid over the years they cover (a real
   sequence). Each stage is a tab: a bar on the scale and its name. On a phone the scale goes and the stages stack. */
.groups, .years, .track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(0, 1.4fr); column-gap: 6px; }
.phases { grid-column: 1 / 9; display: grid; grid-template-columns: subgrid; }
.groups { margin-bottom: 10px; font: 600 var(--t-micro)/1 var(--font-body); color: var(--text-3); }
.groups span { padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.groups span:first-child { grid-column: 1 / 5; }
.groups span:nth-child(2) { grid-column: 5 / 9; }
.groups span:last-child { grid-column: 9; }
.years { margin-bottom: 10px; }
.years li { font-size: var(--t-small); line-height: 1.2; color: var(--text-2); }
.years small { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--text-3); }
.phases button { display: grid; gap: 12px; align-content: start; min-height: 64px; padding: 0 0 8px; border: 0; background: none; color: var(--text-2); text-align: left; }
.phases button::before { content: ""; height: 10px; border-radius: 5px; background: var(--line-strong); background: color-mix(in srgb, var(--ink) 18%, transparent); }
.phases b { font: var(--head) 1.5rem/1 var(--font-head); }
/* Where the path leads: not a stage, so not a tab. */
.goal { display: grid; gap: 12px; align-content: start; font: 600 var(--t-small)/1.3 var(--font-body); color: var(--text-2); }
.goal::before { content: ""; height: 10px; border-radius: 5px; border: 2px dashed var(--marigold); }
.phases span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.phases button:hover::before { background: var(--text-3); background: color-mix(in srgb, var(--ink) 45%, transparent); }
.phases button[aria-selected="true"] { color: var(--heading); }
.phases button[aria-selected="true"]::before { background: var(--ink); box-shadow: none; }
.ph-discover { grid-column: 1 / 3; }
.ph-explore { grid-column: 3 / 4; }
.ph-apply { grid-column: 4 / 5; }
.ph-grow { grid-column: 5 / 9; }
html:not(.js) .scale, html:not(.js) .track { display: none; }

.phase-panels { margin-top: 16px; }
.phase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 16px clamp(24px, 3.5vw, 48px); padding: 28px 32px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
html:not(.js) .phase + .phase { margin-top: 12px; }
/* The open tab already names the stage, so its heading is for screen readers and for reading without script. */
.phase h3 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.js .phase h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.phase h3 span { font: 500 var(--t-small)/1.3 var(--font-body); color: var(--text-2); }
.phase h4 { font: 600 var(--t-micro)/1.2 var(--font-body); color: var(--text-3); margin-bottom: 8px; }
.exam-year { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--text-2); }
.tasks { display: grid; gap: 8px; }
.tasks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--t-small); line-height: 1.4; }
.tasks li::before { content: ""; width: 16px; height: 16px; margin-top: calc(0.5lh - 8px); border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--paper); }
@media (max-width: 900px) {
  .scale { display: none; }
  .track { grid-template-columns: 1fr; row-gap: 4px; }
  .phases { grid-column: auto; grid-template-columns: 1fr; row-gap: 4px; }
  .goal { grid-template-columns: 6px 1fr; align-items: center; gap: 16px; min-height: 48px; padding: 6px 0; }
  .goal::before { width: 6px; height: 100%; min-height: 36px; border-width: 0 0 0 3px; border-radius: 0; }
  .phases button { grid-column: auto; grid-template-columns: 6px 1fr auto; align-items: center; gap: 16px; min-height: 52px; padding: 6px 0; }
  .phases button::before { width: 6px; height: 100%; min-height: 40px; border-radius: 3px; }
  .phases b { font-size: 1.375rem; }
  .phases span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: var(--t-small); text-align: right; }
  .phase { grid-template-columns: 1fr; padding: 22px 20px; }
}

/* Anatomy of a fact */
#facts { background: var(--sunken); }
.anatomy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.college-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.college-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.college-card header b { font: 600 var(--t-body)/1.3 var(--font-body); color: var(--heading); }
.example { padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--text-3); font-size: var(--t-micro); line-height: 1; }
.college-card dl { margin: 0; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 24px; border-top: 1px solid var(--line); }
.fact:first-child { border-top: 0; }
.fact dt { color: var(--text-2); }
.fact dd { margin: 0; }
.fact .value { font-weight: 600; color: var(--text); text-align: right; }
.fact .src { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-micro); color: var(--text-3); line-height: 1.2; }
.legend { display: grid; gap: 6px; padding-top: 52px; }
.legend li { display: grid; gap: 8px; justify-items: start; align-content: start; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid transparent; }
.legend p { color: var(--text-2); font-size: var(--t-small); }
/* Pointing at a label on the card lights up what it means, and the other way round. */
.anatomy:has(.fact .official:is(:hover, :focus-visible)) .legend .official,
.anatomy:has(.fact .verified:is(:hover, :focus-visible)) .legend .verified,
.anatomy:has(.fact .reported:is(:hover, :focus-visible)) .legend .reported,
.anatomy:has(.fact .unconfirmed:is(:hover, :focus-visible)) .legend .unconfirmed { background: var(--surface); border-color: var(--line-strong); }
.anatomy:has(.legend .official:hover) .fact:has(.official),
.anatomy:has(.legend .verified:hover) .fact:has(.verified),
.anatomy:has(.legend .reported:hover) .fact:has(.reported),
.anatomy:has(.legend .unconfirmed:hover) .fact:has(.unconfirmed) { background: var(--sunken); }
.legend .label.unconfirmed { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.legend li:target { background: var(--surface); border-color: var(--line-strong); }
@media (max-width: 900px) { .anatomy { grid-template-columns: 1fr; } .legend { order: -1; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 0; } .legend li { padding: 0; } }
@media (max-width: 480px) { .fact { grid-template-columns: 1fr; } .fact .value { text-align: left; } }

/* Priorities: an illustration of Compare. The order and the bars carry it; no scores. */
.compare { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.priorities { display: grid; gap: 22px; padding: 28px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.slider label { font-weight: 600; color: var(--text); }
.slider output { font-size: var(--t-small); font-weight: 500; color: var(--text-2); }
.priorities input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--ink); height: 44px; cursor: pointer; }
html:not(.js) .priorities, html:not(.js) .fit, html:not(.js) .js-only { display: none; }
.colleges { display: grid; gap: 12px; }
.colleges li { display: grid; gap: 4px; padding: 18px 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.colleges li:first-child { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.colleges b { font: 600 var(--t-body)/1.3 var(--font-body); color: var(--heading); }
.colleges span { color: var(--text-2); font-size: var(--t-small); }
.fit { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.fit i { display: block; height: 100%; width: var(--fit, 0%); border-radius: inherit; background: var(--ink); }
.colleges li:first-child .fit i { background: var(--marigold); }
@media (prefers-reduced-motion: no-preference) { .fit i { transition: width 400ms cubic-bezier(.4, 0, .2, 1); } }
.best { margin-top: 16px; font-weight: 600; color: var(--heading); min-height: 1lh; }
.shortlist .note { margin-top: 6px; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* The app: a phone whose screens follow the theme */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.app .head { margin-bottom: 28px; }
.app-points li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.app-points li:last-child { border-bottom: 1px solid var(--line); }
.app-points b { color: var(--heading); font-weight: 600; }
.device { display: grid; gap: 18px; justify-items: center; }
.device .example { order: 1; }
.app-tabs { display: none; flex-wrap: wrap; justify-content: center; gap: 6px; }
.js .app-tabs { display: flex; }
.app-tabs button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-weight: 600; font-size: var(--t-small); }
.app-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.app-tabs button[aria-selected="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.phone { width: min(100%, 360px); padding: 12px; border-radius: 40px; background: var(--frame); box-shadow: var(--shadow); }
.screens { min-height: 400px; border-radius: 30px; background: var(--paper); overflow: hidden; }
html:not(.js) .screen + .screen { border-top: 8px solid var(--frame); }
.screen header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.screen header b { font: 600 var(--t-body)/1.3 var(--font-body); color: var(--heading); }
.screen header span { font-size: var(--t-micro); color: var(--text-3); line-height: 1; white-space: nowrap; }
.mini-rail { display: flex; gap: 5px; padding: 16px 20px 4px; }
.mini-rail i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.mini-rail i.done { background: var(--ink); }
.mini-rail i.now { background: var(--marigold); }
.mini-label { padding: 6px 20px 0; font-size: var(--t-micro); color: var(--text-2); }
.rows { margin-top: 10px; }
.rows li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); }
.rows p { font-size: var(--t-small); line-height: 1.35; }
.rows small { display: block; color: var(--text-3); font-size: var(--t-micro); margin-top: 2px; }
.rows small.due { color: var(--signal); }
.pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font: 600 var(--t-micro)/1 var(--font-body); white-space: nowrap; }
.pill.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tasks-list li { grid-template-columns: 18px 1fr; }
.tasks-list li::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.tasks-list li.done::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 9px var(--on-ink); }
.tasks-list li.done p { color: var(--text-3); text-decoration: line-through; }
.chat { display: grid; gap: 10px; padding: 16px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: var(--r-l); font-size: var(--t-small); line-height: 1.4; background: var(--surface); border: 1px solid var(--line); }
.msg small { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.msg.me { justify-self: end; background: var(--sky-soft); border-color: transparent; }
.msg.me small { color: var(--text-2); }
.screen:focus-visible { outline-offset: -4px; }
.doc-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.doc-chip::before { content: ""; width: 14px; height: 17px; border-radius: 2px; border: 1.5px solid var(--signal); }
.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.voice small { flex-basis: 100%; }
.wave { width: 96px; height: 18px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); mask: linear-gradient(0deg, transparent 20%, #000 20% 80%, transparent 80%); border-radius: 2px; opacity: 0.7; }
.check { display: grid; gap: 14px; padding: 18px 20px; }
.check .q { padding: 10px 12px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-small); }
.check .stamp { font-size: 1.25rem; }
.plan { margin: 0; }
.plan div { padding: 13px 20px; border-top: 1px solid var(--line); }
.plan div:first-child { border-top: 0; }
.plan dt { font-size: var(--t-micro); color: var(--text-3); }
.plan dd { margin: 2px 0 0; font-size: var(--t-small); color: var(--text); }
.tiers { display: grid; gap: 4px; padding: 10px 0; }
.tiers p { display: grid; gap: 6px; padding: 10px 20px; }
.tiers b { font: 600 var(--t-micro)/1.2 var(--font-body); color: var(--text-3); }
.tiers span { padding: 10px 12px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-small); line-height: 1.2; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }

/* Promises: rings drawn to scale. The hours ring is one working day of nine hours; the week ring is seven days. */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.promises li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; }
.ring { width: 72px; height: 72px; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 7; }
.ring .base { stroke: var(--line); stroke-dasharray: 9 1; }
.ring .hours { stroke: var(--ink); stroke-dasharray: 9 1 9 1 9 1 9 51; }
.ring .day { stroke: var(--ink); stroke-dasharray: 9 1; }
.ring .week-on { stroke: var(--ink); stroke-dasharray: 9 1; }
.ring text { rotate: 90deg; transform-origin: 44px 44px; text-anchor: middle; font: var(--head-bold) 28px/1 var(--font-head); fill: var(--heading); }
.promises strong { display: block; font: var(--head-bold) 1.5rem/1.1 var(--font-head); color: var(--heading); }
.promises b { display: block; margin-top: 4px; font-weight: 600; text-wrap: balance; }
.promises p { margin-top: 6px; color: var(--text-2); font-size: var(--t-small); }
@media (max-width: 960px) { .promises { grid-template-columns: 1fr; max-width: 520px; } }

/* People */
.people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.founder-note { margin: 0; display: grid; gap: 16px; padding-left: 24px; border-left: 3px solid var(--line-strong); }
.founder-note p { font-size: var(--t-lead); line-height: 1.65; color: var(--text); }
.founder-note footer { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 0; border: 0; font-size: var(--t-small); color: var(--text-2); }
.founder-note footer b { display: block; color: var(--heading); font-weight: 600; }
.photo { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--r-l); background: var(--sky-soft); overflow: hidden; }
.photo svg { width: 46%; fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0.45; }
.photo.small { width: 52px; border-radius: 50%; flex: none; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.team li { display: grid; gap: 4px; align-content: start; }
.team .photo { margin-bottom: 10px; }
.team b { color: var(--heading); font-weight: 600; }
.team .role { color: var(--text-2); font-size: var(--t-small); }
.team p { margin-top: 4px; font-size: var(--t-small); color: var(--text-2); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .team { grid-template-columns: 1fr; gap: 16px; }
  .team li { grid-template-columns: 72px 1fr; column-gap: 16px; align-content: center; }
  .team .photo { grid-row: span 3; margin: 0; }
}

/* Trust: one quiet row. Scoped to its own children, so nothing leaks into the next section. */
.trust { padding-block: 40px; background: var(--sunken); }
.trust > .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.trust > .wrap > h2 { font: 600 var(--t-body)/1.35 var(--font-body); }
.trust > .wrap > ul { order: 1; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; color: var(--text); }
.trust li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--leaf); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trust > .wrap > a { margin-left: auto; font-weight: 600; }
@media (max-width: 600px) { .trust > .wrap > a { order: 2; margin-left: 0; } }

/* Questions */
.faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 600 var(--t-lead)/1.35 var(--font-body); color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform 160ms ease; } }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 0 22px; color: var(--text-2); }

/* Join: the one ink band on the page */
.join { background: var(--band); color: var(--on-band); border-top: 0; }
.join .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.join .head { margin-bottom: 0; }
.join h2 { color: #fff; }
.join .head p { color: var(--on-band-2); }
.contact { display: grid; gap: 12px; justify-items: start; }
.contact p { color: var(--on-band-2); font-size: var(--t-small); }
.button.bright { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.button.bright:hover { background: #f0b43a; border-color: #f0b43a; }
.join .button.quiet { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.join .button.quiet:hover { border-color: #fff; }
.join :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .join .wrap { grid-template-columns: 1fr; align-items: start; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 36px 48px; color: var(--text-3); font-size: var(--t-small); }
main:has(> .join:last-child) + footer { border-top: 0; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-left: auto; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) { footer nav { margin-left: 0; } }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer a[aria-current="page"] { color: var(--ink); }

/* The career check page */
.check-hero { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); border-top: 0; }
.check-hero h1 { max-width: 14ch; }
.check-hero .lede { margin-top: 20px; max-width: 54ch; }
.check-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; color: var(--text-2); font-size: var(--t-small); }
.check-facts li { display: inline-flex; align-items: center; gap: 8px; }
.check-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.check-run { padding-block: 0 clamp(64px, 8vw, 104px); border-top: 0; }
.check-hero + .check-run { border-top: 0; }
html:not(.js) .quiz { display: none; }
.no-js-note { color: var(--text-2); }
.js .no-js-note { display: none; }
.q-start, .q-card { max-width: 760px; }
.q-start { display: grid; justify-items: start; gap: 12px; }
.q-card { display: grid; gap: 20px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.q-card[hidden], .q-result[hidden], .q-start[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .q-card.is-new .q-options { animation: settle 240ms ease-out; } }
.q-progress { display: grid; gap: 8px; font-size: var(--t-small); color: var(--text-2); }
.q-bar { display: block; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.q-bar i { display: block; height: 100%; width: var(--done, 0%); background: var(--ink); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) { .q-bar i { transition: width 240ms ease; } }
.q-title { font-size: clamp(1.5rem, 2.6vw, 2rem); outline: none; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.q-opt { min-height: 108px; padding: 18px 20px; border-radius: var(--r-l); border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--text); font: 500 var(--t-lead)/1.4 var(--font-body); text-align: left; cursor: pointer; }
.q-opt:hover { border-color: var(--ink); background: var(--surface); }
.q-opt:active { background: var(--sky-soft); }
.q-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.q-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.q-link[hidden] { display: none; }
@media (max-width: 560px) { .q-options { grid-template-columns: 1fr; } .q-opt { min-height: 72px; } }

.q-result { display: grid; gap: 32px 56px; align-items: start; outline: none; }
.r-col { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1000px) { .q-result { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .r-col:last-child .r-sub:first-child { margin-top: 0; } }
.r-kicker { font-weight: 600; color: var(--text-2); }
.r-title { outline: none; }
.r-hex { max-width: 460px; }
.r-hex .hex-dot { fill-opacity: 0.25; }
.r-hex .hex-dot.is-lit { fill: var(--marigold); fill-opacity: 1; r: 7px; }
.r-hex .hex-dot.known:not(.is-lit), .r-hex .hex-label { display: none; }
.r-hex .hex-shape { fill: color-mix(in srgb, var(--ink) 22%, transparent); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; transform-box: view-box; transform-origin: 320px 300px; transform: scale(0.08); }
.r-hex.is-in .hex-shape { transform: scale(1); }
@media (prefers-reduced-motion: no-preference) { .r-hex .hex-shape { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); } }
.r-hex .hex-corner.is-top { fill: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.r-streams { padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-small); color: var(--text-2); max-width: 60ch; }
.r-streams b { color: var(--heading); }
.r-both { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sky-soft); color: var(--ink); font: 600 var(--t-micro)/1.4 var(--font-body); vertical-align: 1px; }
.cl-match { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 var(--t-micro)/1.4 var(--font-body); }
.r-end { display: none; justify-self: start; }
@media (max-width: 999px) { .r-end { display: inline-flex; } }
.r-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--head-bold); }
.r-about { display: grid; gap: 10px; max-width: 60ch; }
.r-about b { color: var(--heading); }
.r-profile { display: grid; gap: 8px; max-width: 520px; margin-top: 4px; }
.r-profile li { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 12px; font-size: var(--t-small); color: var(--text-2); }
.r-profile li.is-top { color: var(--heading); font-weight: 600; }
.r-bar { display: block; height: 10px; border-radius: 5px; background: var(--sunken); overflow: hidden; }
.r-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--line-strong); background: color-mix(in srgb, var(--ink) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .r-bar i { transition: width 600ms cubic-bezier(.2, .7, .2, 1); } }
.r-profile li.is-top .r-bar i { background: var(--ink); }
.r-sub { margin-top: 16px; font-size: 1.375rem; }
.r-careers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.r-careers li { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.r-careers b, .career-list b { color: var(--heading); font-weight: 600; }
.cl-streams { font-size: var(--t-micro); font-weight: 600; color: var(--leaf); }
.cl-route { font-size: var(--t-small); color: var(--text-2); }
.r-tries { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; color: var(--text); }
.r-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
@media (max-width: 560px) {
  .r-careers { grid-template-columns: 1fr; gap: 0; }
  .r-careers li { padding: 12px 4px; border-width: 1px 0 0; border-radius: 0; background: none; }
  .r-profile li { grid-template-columns: 6rem 1fr; }
}

.career-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(28px, 5vw, 64px); }
.career-list .cm-group > p { margin: -6px 0 14px; color: var(--text-2); font-size: var(--t-small); max-width: 52ch; }
.career-list ul { display: grid; }
.career-list li { display: grid; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--line); }
.career-list li.known b::after { content: " (the familiar one)"; font-weight: 500; color: var(--text-3); }
.career-list li.is-match { background: var(--sky-soft); border-top-color: var(--ink); }
#all-careers > .wrap > .note { margin-top: 28px; }
@media (max-width: 760px) { .career-list { grid-template-columns: 1fr; } }
.about-check .head { margin-bottom: 0; }

/* Legal pages */
.doc main { padding-block: clamp(40px, 7vw, 88px) clamp(64px, 9vw, 112px); }
.doc article { max-width: 72ch; }
.doc h1 { font-size: clamp(2.25rem, 4.6vw, 3.25rem); max-width: none; }
.doc .meta { margin-top: 14px; color: var(--text-3); }
.doc .summary { margin: 32px 0 8px; padding: 22px 24px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.doc .summary h2 { font-size: 1.375rem; margin-bottom: 10px; }
.doc .summary ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.doc article > h2 { font-size: 1.625rem; margin-top: 48px; margin-bottom: 12px; }
.doc article h3 { margin-top: 28px; margin-bottom: 8px; font: 600 var(--t-lead)/1.35 var(--font-body); }
.doc article p + p, .doc article p + ul, .doc article ul + p, .doc article .table + p { margin-top: 12px; }
.doc article ul { padding-left: 1.2em; margin: 12px 0 0; list-style: disc; }
.doc article ol:not(.toc) { padding-left: 1.4em; margin: 12px 0 0; list-style: decimal; }
.doc article li + li { margin-top: 6px; }
.doc .table { margin-top: 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.doc th { color: var(--heading); font-weight: 600; }
.doc .toc { margin-top: 28px; columns: 2; column-gap: 32px; padding: 0; list-style: none; font-size: var(--t-small); }
.doc .toc li { break-inside: avoid; }
.doc .toc a { display: inline-block; padding-block: 10px; }
@media (max-width: 640px) {
  .doc .toc { columns: 1; }
  /* Each row becomes a small card: the first cell as its heading, the others labelled from the column headings. */
  .doc thead { display: none; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc td { border: 0; padding: 2px 0; }
  .doc td:first-child { color: var(--heading); font-weight: 600; }
  .doc td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--text-3); }
}
/* Details still to be filled in before launch: visible on purpose. */
.fill { background: var(--marigold-soft); color: var(--marigold-text); padding: 0 4px; border-radius: 4px; font-weight: 500; }

/* Forced colours drop backgrounds, so selected and pressed states need an outline. */
@media (forced-colors: active) {
  [aria-selected="true"], .theme-switch [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Not found */
.lost { display: grid; gap: 20px; justify-items: start; max-width: 52ch; }
.lost .lede { max-width: none; }

/* Printing the legal pages: no sticky header, no footer, links spelled out. */
@media print {
  .top, footer, .skip, .doc .toc { display: none; }
  body { background: #fff; color: #000; }
  .doc main { padding: 0; }
  .doc article a[href^="http"]::after, .doc article a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}