/* Verdict Hire website: shared tokens and parts. Colours, radii and the button are the app's own (verdict-mvp/static/app.css). */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/PlusJakartaSans-normal.woff2) format('woff2'); }

:root {
  --canvas: #0b1f4b;            /* the app's page */
  --on-canvas: #ffffff;
  --on-canvas-2: #c7d2ee;
  --paper: #ffffff;             /* the app's sheet */
  --wash: #f2f5fb;
  --ink: #0b1f4b;
  --ink-2: #2b3b5e;
  --muted: #5c6a88;
  --line: #e2e7f1;
  --line-2: #cdd5e6;
  --accent-btn: #2a5fe0;
  --accent-hi: #4b7bea;
  --accent-tx: #1f4dc2;
  --accent-soft: rgba(42, 95, 224, 0.1);
  --edge: #1a3f9e;
  --field: #ffffff;
  --band: #0b1f4b;              /* the pilot band */
  --on-band: #ffffff;
  --on-band-2: #c7d2ee;
  --band-line: rgba(255, 255, 255, 0.16);
  --sh-sheet: 0 0 0 1px var(--line), 0 1px 3px rgba(12, 19, 30, 0.04), 0 16px 48px -22px rgba(12, 19, 30, 0.18);
  --f: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --glide: cubic-bezier(0.65, 0, 0.35, 1);
  --bar-h: 36px;                /* the review strip; not part of the design */
  color-scheme: light;
}
:root[data-theme='dark'] {      /* dark keeps the app's black; blue only as an accent */
  --canvas: #050709;
  --on-canvas: #ecf0f4;
  --on-canvas-2: #9aa5b3;
  --paper: #0b0f14;
  --wash: #10151c;
  --ink: #ecf0f4;
  --ink-2: #c4ccd6;
  --muted: #8d99a7;
  --line: rgba(255, 255, 255, 0.062);
  --line-2: rgba(255, 255, 255, 0.1);
  --accent-btn: #3566de;
  --accent-hi: #4b7bea;
  --accent-tx: #86aeff;
  --accent-soft: rgba(90, 139, 255, 0.14);
  --edge: #1b3577;
  --field: #10151c;
  --band: #10151c;
  --on-band: #ecf0f4;
  --on-band-2: #9aa5b3;
  --band-line: rgba(255, 255, 255, 0.1);
  --sh-sheet: 0 0 0 1px var(--line), 0 30px 90px -30px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.55 var(--f); color: var(--ink); background: var(--paper); font-feature-settings: 'liga' 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, dl, dd, table { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }

h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(30px, 2.3vw, 44px); }
h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-size: 24px; }
.nb { white-space: nowrap; }
p { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

/* the app's button: a pill with a lower edge that goes down when pressed */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; font: 600 15.5px/1 var(--f); white-space: nowrap; cursor: pointer; transition: background 140ms, transform 90ms, box-shadow 90ms; }
.btn.primary { background: var(--accent-btn); color: #fff; box-shadow: 0 2px 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn.lg { height: 54px; padding: 0 28px; font-size: 17px; }

/* form */
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 7px; font-size: 14.5px; font-weight: 600; }
.form input { height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--field); color: var(--ink); font: 500 16.5px/1 var(--f); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 140ms; }
.form input:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.form input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-hi); }
.form .btn { justify-self: start; margin-top: 6px; }
.form .btn, .form .state { grid-column: 1 / -1; }
.form .state { min-height: 24px; font-size: 15px; font-weight: 500; }

/* a product window: the app's own markup in a frame of its own (built by site.js) */
.scene { display: flex; width: 100%; }
.scene .sc-box { position: relative; flex: none; overflow: hidden; background: var(--canvas); }
.scene iframe { display: block; border: 0; background: var(--canvas); }
.scene.framed .sc-box { border-radius: 38px; }                         /* the app's sheet is 28 at a 10 px inset: 28 + 10 */
:root[data-theme='dark'] .scene.framed .sc-box { box-shadow: 0 0 0 1px var(--line-2); }
.scene[data-phone] .sc-box { border-radius: 24px; box-shadow: 0 0 0 1px var(--line-2); }

/* review strip: switches between the two directions and the two themes */
.review { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--bar-h); display: flex; align-items: center; gap: 4px; padding: 0 12px; background: #000; color: #fff; font: 500 13.5px/1 var(--f); }
.review a, .review button { height: 26px; padding: 0 12px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: none; color: #a9b1bd; font: inherit; cursor: pointer; }
.review a:hover, .review button:hover { color: #fff; }
.review a[aria-current='page'], .review button[aria-pressed='true'] { background: #262a31; color: #fff; }
.review .gap { flex: 1; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Map: a landing page drawn like a survey map. Navy ink on warm paper, one blue for the bar you set. No cards, no pills. */
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/RedHatDisplay-latin.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/Fraunces-normal.woff2) format('woff2'); }   /* the sample report's names */

:root {
  --paper: #f7f6f2;
  --sheet: #ffffff;
  --ink: #0b1f4b;
  --ink-2: #2e3b58;
  --muted: #56627c;
  --rule: rgba(11, 31, 75, 0.14);
  --rule-2: rgba(11, 31, 75, 0.3);
  --blue: #2f6bff;
  --blue-ink: #1f4dc2;
  --island: rgba(47, 107, 255, 0.1);
  --island-hi: rgba(47, 107, 255, 0.18);
  --c-minor: rgba(11, 31, 75, 0.12);
  --c-index: rgba(11, 31, 75, 0.27);
  --c-high: rgba(31, 77, 194, 0.42);
  --dot: rgba(11, 31, 75, 0.26);
  --mark: rgba(47, 107, 255, 0.16);
  --warn: #9a5c00;
  --warn-mark: rgba(214, 150, 20, 0.24);
  --cta: #0b1f4b;
  --cta-hi: #16316f;
  --cta-tx: #ffffff;
  --band: #0b1f4b;
}
:root[data-theme='dark'] {
  --paper: #0b0f14;
  --sheet: #10151c;
  --ink: #ecf0f4;
  --ink-2: #c4ccd6;
  --muted: #8d99a7;
  --rule: rgba(236, 240, 244, 0.12);
  --rule-2: rgba(236, 240, 244, 0.28);
  --blue: #5a8bff;
  --blue-ink: #86aeff;
  --island: rgba(90, 139, 255, 0.13);
  --island-hi: rgba(90, 139, 255, 0.22);
  --c-minor: rgba(236, 240, 244, 0.08);
  --c-index: rgba(236, 240, 244, 0.2);
  --c-high: rgba(134, 174, 255, 0.45);
  --dot: rgba(236, 240, 244, 0.26);
  --mark: rgba(90, 139, 255, 0.22);
  --warn: #ebcb7a;
  --warn-mark: rgba(242, 180, 82, 0.2);
  --cta: #ecf0f4;
  --cta-hi: #ffffff;
  --cta-tx: #0b0f14;
  --band: #111a29;
}

body.p-plain { --bar-h: 0px; padding-top: var(--bar-h); background: var(--paper); color: var(--ink); overflow-x: hidden; }
.p-plain .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-plain p { color: var(--ink-2); }
.on-dark { display: none; }
:root[data-theme='dark'] .on-dark { display: block; }
:root[data-theme='dark'] .on-light { display: none; }

/* the frame every part shares */
.m-top, .m-hero-in, .m-sec, .m-foot { padding-inline: clamp(20px, 4.4vw, 72px); }
.m-sec { max-width: 1520px; margin: 0 auto; padding-block: clamp(72px, 8vw, 136px); border-top: 1px solid var(--rule); }
.m-sec h2 { font-size: clamp(34px, 3.5vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); }
.m-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 76px); }
.lead { font-size: clamp(20px, 1.55vw, 25px); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; max-width: 30em; }
@media (min-width: 1000px) {
  .m-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 40px; }
  .m-head .lead { padding-top: 0.35em; }
}

/* buttons: square, quiet, sure of themselves */
.cta { display: inline-flex; align-items: center; height: 56px; padding: 0 28px; border: 0; border-radius: 3px; background: var(--cta); color: var(--cta-tx); font: 700 17px/1 var(--f); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background 140ms; }
.cta:hover { background: var(--cta-hi); }
.cta.sm { height: 44px; padding: 0 20px; font-size: 15.5px; }
.m-link { display: inline-flex; align-items: center; height: 56px; padding: 0; border: 0; background: none; color: var(--ink); font: 600 17px/1 var(--f); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; cursor: pointer; }
.m-link:hover { color: var(--blue-ink); }

/* header */
.m-top { position: sticky; top: var(--bar-h); z-index: 40; height: 76px; display: flex; align-items: center; gap: 40px; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.m-top.ruled { border-bottom-color: var(--rule); }
.m-logo img { height: 32px; width: auto; }
.m-nav { display: flex; gap: 30px; margin-left: auto; }
.m-nav a { font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.m-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 1080px) { .m-nav { display: none; } .m-top .cta { margin-left: auto; } }

/* the first screen: the line on clean paper, the hire as land under it */
.m-hero { position: relative; }
.m-hero-in { max-width: 1520px; margin: 0 auto; padding-top: clamp(36px, 5.5vh, 76px); display: grid; gap: 30px; }
.m-hero h1 { font-size: clamp(42px, 5.6vw, 100px); font-weight: 800; letter-spacing: -0.048em; line-height: 0.98; color: var(--ink); max-width: 11.5em; text-wrap: balance; }
.m-only { font-size: clamp(20px, 1.55vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink) !important; max-width: none; }
.m-act { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
@media (min-width: 1000px) {
  .m-hero-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 48px; }
  .m-side { padding-bottom: 0.4em; }
}
.m-land { position: relative; height: clamp(360px, 46vh, 520px); margin-top: clamp(8px, 2vh, 28px); }
@media (max-width: 699px) { .m-land { height: clamp(440px, 62vh, 560px); } .map .pk text { font-size: 13.5px; stroke-width: 4px; } }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.map .c { fill: none; stroke: var(--c-minor); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.map .c.i { stroke: var(--c-index); stroke-width: 1.1; }
.map .c.h { stroke: var(--c-high); stroke-width: 1; }
.map .c.bar { stroke: var(--blue); stroke-width: 1.7; }
.map .isl { fill: var(--island); stroke: none; transition: fill 200ms; }
.map .isl.hot { fill: var(--island-hi); }
.map .d { fill: var(--dot); }
.map .pk { cursor: default; }
.map .pk polygon { fill: var(--blue); }
.map .pk text { font: 700 15px/1 var(--f); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; letter-spacing: -0.01em; }
.map .pk text tspan.n { font-weight: 500; fill: var(--blue-ink); font-variant-numeric: tabular-nums; }
.map .bl { font: 700 13.5px/1 var(--f); fill: var(--blue-ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; letter-spacing: 0.005em; }
.map .draw { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw 1100ms cubic-bezier(0.3, 0.6, 0.2, 1) var(--dl, 0ms) forwards; }
.map .fade { opacity: 0; animation: fade 600ms ease var(--dl, 0ms) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
.m-tip { position: absolute; left: 0; top: 0; z-index: 3; max-width: 260px; padding: 10px 13px 11px; border-radius: 3px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 14px 30px -18px rgba(11, 31, 75, 0.45); font-size: 14.5px; line-height: 1.4; pointer-events: none; }
.m-tip b { display: block; font-size: 15px; font-weight: 800; }
.m-tip span { color: var(--ink-2); }
.m-key { position: absolute; left: clamp(20px, 4.4vw, 72px); bottom: 26px; display: grid; gap: 4px; padding: 14px 18px 14px 0; background: var(--paper); box-shadow: 18px 0 24px -6px var(--paper), 0 -14px 24px -6px var(--paper); }
.k-role input { width: min(26ch, 72vw); padding: 2px 0 3px; border: 0; border-bottom: 1.5px solid var(--rule-2); background: transparent; color: var(--ink); font: 700 19px/1.25 var(--f); letter-spacing: -0.015em; }
.k-role input:hover { border-bottom-color: var(--ink); }
.k-role input:focus { outline: 0; border-bottom-color: var(--blue); }
.k-n { font-size: 16px; font-weight: 500; color: var(--ink) !important; }
.k-s { font-size: 14.5px; color: var(--muted) !important; }

/* how a hire runs: one line, five stops; on a wide screen the line is a route over the land */
.route-wrap { position: relative; }
.trail { display: block; width: 100%; margin-bottom: 22px; overflow: visible; }
.trail .c { fill: none; stroke: var(--c-minor); stroke-width: 0.9; }
.trail .c.i { stroke: var(--c-index); }
.trail .trk { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 0.1 7.5; stroke-linecap: round; }
.trail .stop { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.trail .stop.end { fill: var(--blue); stroke: var(--blue); }
.trail .vend polygon { fill: #fff; }
.route-wrap.reveal .trail { clip-path: inset(0 100% 0 0); transition: clip-path 1500ms cubic-bezier(0.45, 0, 0.25, 1); }
.route-wrap.reveal.in .trail { clip-path: inset(0 -20px 0 0); }
.route { position: relative; display: grid; gap: 34px; counter-reset: st; }
.route li { position: relative; padding-left: 40px; }
.route li::before { content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.route::before { content: ''; position: absolute; left: 7.5px; top: 14px; bottom: 14px; width: 1px; background: var(--rule-2); }
.route b { display: block; font-size: clamp(24px, 2vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.route p { margin-top: 10px; font-size: 17px; line-height: 1.5; max-width: 22em; }
@media (min-width: 1000px) {
  .route { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; }
  .route li { padding-left: 0; }
  .route li::before, .route::before { display: none; }
}

/* screening: the CV is text on the page, its reason beside it */
.cvx { display: grid; gap: 40px; margin: 0; }
.cvx-doc { padding-left: clamp(18px, 2vw, 32px); border-left: 2px solid var(--ink); }
.cvx-n { font-size: clamp(26px, 2.2vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink) !important; }
.cvx-doc ul { margin-top: 18px; display: grid; gap: 4px; }
.cvx-doc li { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--ink-2); }
.cvx mark { padding: 0 3px; margin: 0 -3px; border-radius: 2px; color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) 0 0 / 0% 100% no-repeat; transition: background-size 700ms cubic-bezier(0.3, 0.6, 0.2, 1); }
.cvx mark.w { background-image: linear-gradient(var(--warn-mark), var(--warn-mark)); }
.cvx.in mark { background-size: 100% 100%; }
.cvx.in li:nth-child(3) mark { transition-delay: 250ms; }
.cvx.in li:nth-child(4) mark { transition-delay: 700ms; }
.cvx-why { display: grid; align-content: start; gap: 6px; }
.cvx-why b { font-size: clamp(88px, 9vw, 150px); font-weight: 800; line-height: 0.86; letter-spacing: -0.06em; color: var(--ink); }
.cvx-why span { font-size: 17px; font-weight: 700; color: var(--ink); }
.cvx-why p { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.45; color: var(--ink) !important; max-width: 20em; }
@media (min-width: 1000px) { .cvx { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } }

/* the interview: the words as they were said */
.iv { display: grid; gap: 56px; }
.iv-t { display: grid; gap: 26px; }
.iv-t li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; }
.iv-t li p { grid-column: 2; max-width: 30em; }
.iv-t .q p { font-size: clamp(22px, 2vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -0.025em; color: var(--ink); }
.iv-t .a p { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.45; color: var(--ink-2); }
.iv-t .who { grid-column: 2; display: block; margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--muted); }
.iv-t .fu .who { color: var(--blue-ink); }
.iv-t .fu { margin-top: 10px; }
.vm { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Cpolygon points='22,40 33,34 51,62 51,76'/%3E%3Cpolygon points='55,76 55,62 74,24 84,29'/%3E%3C/g%3E%3C/svg%3E") center / 25px no-repeat; }
.iv-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.iv-m > div { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.iv-m > div:nth-child(odd) { padding-right: 20px; }
.iv-m > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); }
.iv-m dt { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.iv-m dd { margin-top: 6px; font-size: clamp(56px, 5vw, 84px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; color: var(--ink); }
.reveal .iv-t li { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in .iv-t li { opacity: 1; transform: none; }
.reveal.in .iv-t li:nth-child(2) { transition-delay: 500ms; }
.reveal.in .iv-t li:nth-child(3) { transition-delay: 1300ms; }
.reveal.in .iv-t li:nth-child(4) { transition-delay: 1900ms; }
@media (min-width: 1000px) { .iv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }

/* the shortlist: two orders, one line each */
.slope { margin: 0; }
.slope svg { display: block; width: 100%; overflow: visible; }
.slope .ax { font: 700 15px/1 var(--f); fill: var(--muted); }
.slope .ln { fill: none; stroke: var(--rule-2); stroke-width: 1.5; stroke-linecap: round; }
.slope .ln.k { stroke: var(--ink); stroke-width: 2; }
.slope .ln.l { stroke: var(--blue); stroke-width: 3; }
.slope .nm { font: 600 17px/1 var(--f); fill: var(--ink-2); }
.slope .nm.k { font-weight: 800; fill: var(--ink); }
.slope .nm.l { font-weight: 800; fill: var(--blue-ink); }
.slope .ft { font: 500 17px/1 var(--f); fill: var(--muted); font-variant-numeric: tabular-nums; }
.slope .rk { font: 700 15px/1 var(--f); fill: var(--muted); font-variant-numeric: tabular-nums; }
.slope .end { fill: var(--paper); stroke: var(--rule-2); stroke-width: 1.5; }
.slope .end.k { stroke: var(--ink); }
.slope .end.l { fill: var(--blue); stroke: var(--blue); }
.slope svg.narrow .nm, .slope svg.narrow .ft { font-size: 14px; }
.slope svg.narrow .ax { font-size: 13px; }

/* the report: the real page, on its own sheet */
.rep { position: relative; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--rule); transition: height 700ms cubic-bezier(0.65, 0, 0.35, 1); }
:root[data-theme='dark'] .rep { background: #070c1a; }
.rep-in { transform-origin: 0 0; }
.rep iframe { display: block; border: 0; }
.rep::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; transition: opacity 300ms; }
.rep.open::after { opacity: 0; }
.rep-more { margin-top: 18px; }

/* measured times: four marks on one ruler */
.ruler { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.marks { display: grid; gap: 26px; }
.marks > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.marks dt { font-size: clamp(48px, 4.6vw, 76px); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: var(--ink); white-space: nowrap; }
.marks dd { font-size: 18px; color: var(--ink-2); }
.scale { display: none; }
.m-aim { margin-top: clamp(40px, 4vw, 64px); }
@media (min-width: 1000px) {
  .ruler { height: 400px; }
  .marks { position: absolute; inset: 0 0 64px 0; display: block; }
  .marks > div { position: absolute; bottom: 0; left: calc(var(--t) / 40 * 100%); display: block; width: max-content; max-width: 15em; padding: 0 0 22px 16px; border: 0; border-left: 2px solid var(--blue); transform: translateX(-1px); }
  .marks > div:nth-child(2) { left: auto; right: 0; padding: 0 16px 22px 0; border-left: 0; border-right: 2px solid var(--blue); text-align: right; transform: translateX(1px); }
  .marks > div:nth-child(2), .marks > div:nth-child(3) { padding-bottom: 170px; }   /* 40 s and 1 s stand taller, so no two labels meet */
  .marks dt { display: block; }
  .marks dd { display: block; margin-top: 10px; font-size: 17px; }
  .scale { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-top: 2px solid var(--ink); }
  .scale i { position: absolute; top: 0; width: 1px; height: 12px; background: var(--ink); }
  .scale i.big { height: 22px; width: 2px; }
  .scale span { position: absolute; top: 30px; white-space: nowrap; transform: translateX(-50%); font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
  .reveal .marks > div { clip-path: inset(100% 0 0 0); transition: clip-path 800ms cubic-bezier(0.3, 0.6, 0.2, 1); }
  .reveal.in .marks > div { clip-path: inset(0 -40px 0 -40px); }
  .reveal.in .marks > div:nth-child(1) { transition-delay: 150ms; }
  .reveal.in .marks > div:nth-child(4) { transition-delay: 300ms; }
  .reveal.in .marks > div:nth-child(2) { transition-delay: 450ms; }
}

/* rows and lines */
.rows > div { display: grid; gap: 6px 40px; padding: 22px 0; border-top: 1px solid var(--rule); }
.rows > div:last-child { border-bottom: 1px solid var(--rule); }
.rows dt { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.rows dd { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.lines li { padding: 20px 0; border-top: 1px solid var(--rule); font-size: clamp(19px, 1.45vw, 22px); line-height: 1.5; color: var(--ink-2); }
.lines li:last-child { border-bottom: 1px solid var(--rule); }
.m-team h2, .m-cand h2, .m-data h2, .m-pilot h2, .m-times h2, .m-how h2 { margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) {
  .rows > div { grid-template-columns: 300px minmax(0, 1fr); }
  .m-team, .m-cand, .m-data { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
  .m-team h2, .m-cand h2, .m-data h2 { margin-bottom: 0; }
  .m-team .rows > div, .m-data .rows > div { grid-template-columns: 220px minmax(0, 1fr); }
}

/* the pilot: the one navy band, the land drawn faintly behind it */
.band { position: relative; overflow: hidden; background: var(--band); }
.band-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.band-map .c { fill: none; stroke: rgba(255, 255, 255, 0.075); stroke-width: 1; }
.band-map .c.i { stroke: rgba(255, 255, 255, 0.14); }
.band .m-sec { position: relative; border-top: 0; }
.band h2, .band .rows dd, .band .m-form label { color: #fff; }
.band .terms dt { color: rgba(255, 255, 255, 0.68); }
.band .rows > div { border-color: rgba(255, 255, 255, 0.16); }
.band .m-form input { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.band .m-form input:hover { border-bottom-color: #fff; }
.band .m-form input:focus { border-bottom-color: #8fb0ff; }
.band .m-form .cta { background: #fff; color: #0b1f4b; }
.band .m-form .cta:hover { background: #dfe7fb; }
.band .m-form .state { color: #fff !important; }
.band :focus-visible { outline-color: #8fb0ff; }
.band + .m-foot { border-top: 0; }
.pilot { display: grid; gap: 48px; }
.terms dt { color: var(--muted); font-weight: 700; font-size: 17px; }
.m-form { display: grid; gap: 22px; align-content: start; }
.m-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.m-form input { height: 50px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--rule-2); border-radius: 0; background: transparent; color: var(--ink); font: 500 18px/1 var(--f); }
.m-form input:hover { border-bottom-color: var(--ink); }
.m-form input:focus { outline: 0; border-bottom-color: var(--blue); }
.m-form .cta { justify-self: start; margin-top: 10px; }
.m-form .state { min-height: 24px; font-size: 16px; font-weight: 500; color: var(--ink) !important; }
@media (min-width: 1000px) { .pilot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; } .terms > div { grid-template-columns: 200px minmax(0, 1fr); } }

.m-foot { max-width: 1520px; margin: 0 auto; padding-block: 56px 72px; border-top: 1px solid var(--rule); }
.m-foot img { height: 28px; width: auto; }
.m-foot { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.m-fnav { margin-left: auto; display: flex; gap: 28px; align-items: center; color: var(--muted); font: 500 15px/1 var(--f); }
.m-fnav a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }

.p-plain :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.m-sec, .m-hero { scroll-margin-top: calc(var(--bar-h) + 76px); }

@media (prefers-reduced-motion: reduce) {
  .map .draw, .map .fade { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .reveal .iv-t li, .reveal .marks > div, .cvx mark, .slope .tilt, .rep { transition: none !important; }
}

/* ---- the font: Red Hat Display for everything (the user's pick from the font sheet, 2026-10-27) ---- */
.p-plain { --f: 'Red Hat Display', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.p-plain h1, .p-plain h2, .p-plain h3 { font-weight: 700; letter-spacing: -0.025em; }
.m-legal { max-width: 860px; }
.m-legal h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1; color: var(--ink); }
.m-legal .upd { margin-top: 14px; color: var(--muted); }
.m-legal h2 { margin-top: 48px; font-size: 26px; line-height: 1.2; }
.m-legal p { margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.m-legal a { color: var(--ink); }