/* AgentMetric — the seller journey ("ladder"), direction 8b: navy throughout, one blue.
   From the design system at claude.ai/design (project 3d4e8e1c), `components/journey.css` plus
   its four token files, flattened.

   ⭐⭐ THE CLASS NAMES ARE THE LIVE SITE'S AND NOT ONE LINE OF MARKUP CHANGED. That is not a
   coincidence, it is the design's own constraint: "Class names are the live site's. Only
   appearance lives here." Which is why every word, every field name, every route, the step order
   and every script survived the restyle — nothing that carries them was touched. `journey_snapshot.py`
   is the proof rather than the promise: 13 screens, 409 text nodes, identical before and after.

   ⚠⚠ THIS SHEET SERVES THE TWELVE LADDER PAGES ONLY, AND `style.css` STILL SERVES EVERYTHING
   ELSE. James's scope, 2026-09-07. It is not a partial copy of `style.css`: it is a complete
   sheet for one journey, and it deliberately defines NONE of the twelve classes the standing
   pages need (`prose`, `section`, `card`, `hero`, `lede`, `linkish`, `eyebrow`, `hero-form`,
   `hero-note`, `lowdata`, `btn-lg`, `wrap-narrow`). Serving this site-wide would strip
   `/about`, `/privacy`, `/cookies`, `/methodology` and `/sources` of their body styling —
   MEASURED, by listing what those five templates use and diffing it against this file.

   ⚠ FLATTENED ON PURPOSE. The design ships `styles.css` as a chain of five `@import`s; that is
   four extra render-blocking round trips, on the one page paid traffic lands on. One file.

   ⚠ ADDING A CSS FILE IS NOT FREE HERE: `app.asset_url()` content-hashes an explicit LIST of
   filenames, and anything absent from it ships as `?v=missing` and is then served from whatever
   a visitor already had, for ever. `journey.css` is in that list. `style.css:1418` records this
   as the reason the ladder's styles were put inside `style.css` in the first place. */

/* ---------------------------------------------------------------- Inter, self-hosted

   ⚠⚠ THE DESIGN LOADS THIS FROM fonts.googleapis.com AND THAT CANNOT SHIP. A `<link>` there
   discloses the visitor's IP and User-Agent to a US controller on page load, before they have
   been asked anything. Three controls assert zero off-origin requests with NO exemptions —
   `test_leadgen_privacy_identity`, `compliance_check` C1, `shots.py` — so it does not degrade
   quietly, it turns the whole checkable surface red. Inter is SIL OFL 1.1, like the three
   families already self-hosted here. Regenerate with:

       python leadgen/brand/_tools/fetch_fonts.py Inter 400 500 600 700 800

   ⭐ TWO FILES, NOT TEN, AND THE DIFFERENCE IS 534 KB. Inter is a VARIABLE font: Google declares
   five weights but serves ONE url per subset, so saving it per weight writes five byte-identical
   copies and makes a browser fetch the same font five times under five names — their CDN dedupes
   on the url, a self-host that renames them cannot. Verified it is a real variable axis before
   collapsing, rather than trusting the identical byte counts: rendered at 400/500/600/700/800 in
   Chromium and measured five DISTINCT widths (751.23 / 759.53 / 767.66 / 775.95 / 786.05 px).
   ⭐ 400 vs 500 differing is the discriminator — synthetic bold is binary, so it can fake 700
   from 400 but never 500 from 400. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* brand */
  --am-navy: #0D1B3D;
  --am-navy-deep: #0A1531;
  --am-navy-raised: #16264F;
  --am-navy-hover: #1A2F63;
  --am-navy-line: #1F2D52;
  --am-blue: #1E6BFF;
  --am-blue-hover: #3D7FFF;
  --am-blue-soft: #4696F0;
  --am-blue-light: #7DB7FF;
  --am-white: #FFFFFF;
  --am-grey-1: #C3CBDB;
  --am-grey-2: #9AA5BB;
  --am-grey-3: #8B919C;
  --am-input-line: #CFD5DF;
  --am-warn: #FFB4A0;

  /* semantic */
  --bg: var(--am-navy);
  --bg-deep: var(--am-navy-deep);
  --surface: var(--am-navy-raised);
  --surface-hover: var(--am-navy-hover);
  --border: var(--am-navy-line);
  --text: var(--am-white);
  --text-2: var(--am-grey-1);
  --text-3: var(--am-grey-2);
  --accent: var(--am-blue);
  --accent-hover: var(--am-blue-hover);
  --link: var(--am-blue-light);
  --figure: var(--am-blue-light);
  --input-bg: var(--am-white);
  --input-text: var(--am-navy);
  --input-line: var(--am-input-line);
  --input-placeholder: var(--am-grey-3);
  --warn: var(--am-warn);
  --focus-ring: 0 0 0 3px rgba(30, 107, 255, .45);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 26px;
  --text-xl: clamp(28px, 7vw, 36px);
  --text-figure: clamp(36px, 11vw, 48px);
  --leading-tight: 1.08;
  --leading-body: 1.5;
  --tracking-display: -0.03em;
  --tracking-caps: 0.06em;
  --weight-body: 500;
  --weight-strong: 600;
  --weight-bold: 700;
  --weight-display: 800;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --control-h: 52px;
  --choice-h: 56px;
  --ladder-w: 34rem;
  --wrap-w: 1160px;
  --shadow-dock: 0 -6px 20px rgba(0, 0, 0, .35);
  --shadow-thumb: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--text-base); line-height: var(--leading-body);
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--wrap-w); margin-inline: auto; padding-inline: 20px; }
noscript { display: none; }

/* ---- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 20px; border-radius: var(--radius-md); border: 0;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface); color: var(--text-3); cursor: not-allowed; }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- consent strip, pinned to the bottom, page visible above it
   ⚠⚠ THE CLASS IS STILL `cookie--top` AND IT NOW RENDERS AT THE BOTTOM. The name is journey A's
   and it is NOT renamed here: `test_leadgen_ladder` asserts the front door's banner fragment
   contains it, and `_banner_fragment` hashes the rendered wording into every visitor's consent
   record. Renaming is a markup change to the one file whose bytes are evidence. The name lies;
   the alternative moves a fingerprint. */
.cookie, .cookie--top {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; inset-block-start: auto;
  display: block; padding: 0; background: var(--bg-deep); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}
.cookie[hidden] { display: none; }
/* ⚠ `has-dock` is set by `b/agents.html`'s bodyclass. It lifts the strip clear of the docked
   request button, so Decline stays reachable — the equal-prominence point the compliance
   checklist rests on, done in CSS so it holds with scripts blocked. */
body.has-dock .cookie { bottom: 60px; }
.cookie-panel {
  max-width: var(--wrap-w); margin: 0 auto; padding: 8px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; align-items: center;
}
.cookie h4 { font-size: 12px; font-weight: 700; margin: 0; grid-column: 1; line-height: 1.3; }
.cookie p { font-size: 11px; line-height: 1.35; color: var(--text-3); margin: 0; grid-column: 1; }
.cookie-current { color: #fff; font-weight: 600; }
.cookie-current[hidden] { display: none; }
.cookie-actions { display: flex; gap: 6px; grid-column: 2; grid-row: 1 / span 3; }
.cookie-actions .btn { height: 32px; padding: 0 14px; font-size: 12px; border-radius: 8px; }
/* ⚠ The design declared this twice (96px, then 72px). The second won silently; only one is kept. */
body.consent-open { padding-bottom: 72px; }
@media (max-width: 700px) {
  .cookie-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cookie-actions { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .cookie-actions .btn { flex: 1 1 0; }
  /* ⚠⚠ 140px, NOT THE DESIGN'S 116px, AND THE REASON IS A MEASUREMENT. The strip is fixed, so
     this padding is the only thing keeping it off the last footer link. MEASURED at 390 and 360:
     the strip is 115px tall and the design reserved 116 — a ONE-PIXEL margin on a quantity that
     depends on text reflowing. `font-display: swap` means the fallback face paints first, and a
     fallback that wraps the consent paragraph onto a fourth line adds ~15px, at which point the
     strip covers a footer link on the one screen where consent has to stay reachable. The extra
     24px is invisible: it is blank ground underneath a fixed element. Desktop needs nothing —
     49px strip against 72px reserved. */
  body.consent-open { padding-bottom: 140px; }
}

/* ---- masthead */
.masthead { border-bottom: 1px solid var(--border); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.masthead--funnel nav { display: none; }
.brandmark { display: flex; align-items: center; gap: 9px; color: #fff; }
.brandmark:hover { text-decoration: none; }
.brandmark img { display: block; width: 30px; height: 30px; }
.brandmark b { font-weight: 800; font-size: 20px; letter-spacing: -0.035em; color: #fff; }

/* ---- the ladder */
.ladder-page main { display: block; }
.ladder { max-width: var(--ladder-w); margin: 0 auto; padding: 24px 20px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ladder > * { grid-column: 1 / -1; min-width: 0; }
.ladder > .lad-rail:has(+ .lad-back) { grid-column: 1; }
.ladder > .lad-rail + .lad-back { grid-column: 2; align-self: center; justify-self: end; margin: 0 0 24px 16px; }
.ladder-page .ladder:has(.agents) { max-width: var(--wrap-w); }

/* stage rail: the current stage's name, one bar filling within it */
.lad-rail { display: flex; gap: 8px; margin: 0 0 24px; }
.lad-phase { flex: 1 1 0; min-width: 0; }
.lad-phase-name {
  display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lad-phase.now .lad-phase-name { color: #fff; }
.lad-phase.done .lad-phase-name { color: var(--text-2); }
.lad-phase-bar { display: block; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.lad-phase-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.lad-phase.done .lad-phase-bar i { background: var(--am-blue-soft); }

.lad-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--link); margin-bottom: 20px; }

.lad-q {
  font-size: var(--text-xl); font-weight: var(--weight-display); letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight); margin: 0 0 12px; text-wrap: pretty; color: #fff;
}
.lad-sub { font-size: 16px; line-height: 1.5; color: var(--text-2); margin: 0 0 24px; max-width: 30rem; }

.lad-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lad-q + .lad-form { margin-top: 20px; }
/* the front door: the postcode form sits in a white card */
.lad-form[action="/"] { background: #fff; border-radius: var(--radius-xl); padding: 14px; }
.lad-label {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--link);
}
.lad-input, .lad-select {
  width: 100%; height: var(--control-h); padding: 0 16px;
  border: 1.5px solid var(--input-line); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--input-text); font-size: 16px; font-weight: 500;
}
.lad-input::placeholder { color: var(--input-placeholder); }
.lad-input:focus, .lad-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.lad-cta { width: 100%; }
.lad-error { color: var(--warn); background: rgba(255,180,160,.12); padding: 10px 14px; border-radius: var(--radius-md); margin: 0; font-size: 14px; }
.lad-fine { font-size: var(--text-sm); color: var(--text-3); margin: 4px 0 0; line-height: 1.5; }
.lad-trust { margin: 32px 0 0; font-size: var(--text-sm); color: var(--text-3); text-align: center; }

/* front-door extras
   ⚠ `.hero-art` is HIDDEN, NOT DELETED, and the distinction is load-bearing twice over. The
   design's rule is "no imagery in the journey" (James, 2026-09-07); but `deploy_web.sh`'s
   ENTRY_OK gate greps the literal string `hero-art` out of the served front door, and
   `test_leadgen_deploy_gate` asserts the same list. Hiding it in CSS keeps the element in the
   markup, so the gate still finds what it is looking for. Deleting the markup would have failed
   a deploy for a reason nobody would connect to a stylesheet. */
.hero-art { display: none; }
.hero-pills { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-pills li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #fff; }
.pill-ic { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--accent); color: #fff; }
.lad-disclosure { margin: 28px 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-3); max-width: 30rem; }

/* ---- the landing page (page 1 only)
   ⚠ The design also ships several ALTERNATIVES for this screen — `.land-ol` numbered steps,
   `.hero-motif`, `.land-sources`, `.land-terse`, and the `body.land-clean` 1e–1g variants. Its
   chosen page uses none of them, so none are carried across: unused CSS for a layout nobody
   picked is the next reader's false trail. `git` has the design project if a variant is revived. */

/* one quiet band, three columns divided by hairlines; no boxes */
.land-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.land-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 14px; border-left: 1px solid var(--border); }
.land-stat:first-child { padding-left: 0; border-left: 0; }
.land-stat:last-child { padding-right: 0; }
.land-stat b { font-size: clamp(20px, 6vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.land-stat span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--text-3); }

.land-section { margin: 40px 0 0; display: flex; flex-direction: column; gap: 18px; }
.land-h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; color: #fff; }
.land-items { display: flex; flex-direction: column; gap: 18px; }
.land-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.land-ic { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--surface); color: var(--link); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.land-item-t { font-weight: 600; font-size: 16px; color: #fff; }
.land-item p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.land-section--paid { gap: 10px; }
.land-section--paid .lad-disclosure { margin: 0; }

/* tap-to-advance options */
.lad-choices { gap: 10px; }
.lad-choice {
  display: flex; align-items: center; text-align: left; cursor: pointer;
  min-height: var(--choice-h); padding: 14px 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: #fff; font-size: 16px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
}
.lad-choice::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--text-3); border-top: 2px solid var(--text-3); transform: rotate(45deg);
}
.lad-choice:hover { border-color: var(--accent); background: var(--surface-hover); }
.lad-choice:hover::after { border-color: var(--link); }
.lad-choice.chosen { border-color: var(--accent); background: var(--surface-hover); }

/* value slider */
.lad-value {
  display: block; text-align: center; font-size: var(--text-figure); font-weight: 800;
  letter-spacing: -0.03em; color: #fff; margin: 8px 0 4px; font-variant-numeric: tabular-nums;
}
.lad-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.lad-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--border); }
.lad-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -11px;
  background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-thumb); cursor: pointer;
}
.lad-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
.lad-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; }
.lad-slider:focus-visible { outline: none; }
.lad-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.lad-skip {
  font-size: 14px; font-weight: 500; background: none; border: 0; cursor: pointer;
  color: var(--link); text-decoration: underline; text-underline-offset: 3px; padding: 8px;
}

/* address list */
.lad-addrlist { border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); max-height: 22rem; overflow-y: auto; }
.lad-addr { display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500; }
.lad-addr:last-child { border-bottom: 0; }
.lad-addr:hover { background: var(--surface-hover); }
.lad-addr input {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
  border-radius: 50%; border: 2px solid var(--text-3); background: transparent; cursor: pointer;
}
.lad-addr input:checked { border: 6px solid var(--accent); background: #fff; }
/* ⚠⚠ NOT OPTIONAL, AND NOT SYMMETRY. `display: flex` above beats the UA sheet's `[hidden]` rule,
   so without this the address filter's script — which hides rows by setting `.hidden` — would
   filter nothing while appearing to work. `style.css:1666` records the same trap. */
.lad-addr[hidden] { display: none; }
.lad-addr--manual { border-top: 1.5px solid var(--border); font-weight: 600; color: var(--link); }
.lad-manual { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.lad-manual[hidden] { display: none; }

/* the tick screen */
.ladder--centred { text-align: center; }
.ladder--centred .lad-back { text-align: left; }
/* ⚠ The stage label reads left on EVERY screen. This one page centres its content, which was
   dragging the rail's label into the middle with it while the eleven others sat left. */
.ladder--centred .lad-rail { text-align: left; }
.lad-done { padding: 8px 0 0; }
.lad-tick { color: var(--accent); display: block; margin: 0 auto 28px; }
.lad-done .lad-cta { display: flex; max-width: 22rem; margin: 0 auto; }

/* the sent screen */
.lad-picks { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.lad-picks li { padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); font-weight: 600; }

/* ---- the comparison */
.lad-compare .wrap { padding-inline: 0; }
.lad-cta--top { margin-bottom: 20px; }
.lad-cta--dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  border-radius: 0; width: 100%; height: 60px; box-shadow: var(--shadow-dock);
}
body.has-dock .ladder { padding-bottom: 96px; }
.reconcile { margin: 0 0 16px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius-md); font-size: 14px; color: var(--text-2); }
.reconcile b { color: #fff; }

.disclosures { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.avgtoggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--link); padding: 6px 0;
}
.avgtoggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.avgtoggle > span:not(.avgtoggle-ic) { min-width: 0; }
.avgtoggle-ic { width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.avgtoggle-ic::after {
  content: ""; position: absolute; left: 3.5px; top: 2.5px; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.avgtoggle-on { display: none; }
.avgtoggle-input:checked ~ .avgtoggle .avgtoggle-on { display: inline; }
.avgtoggle-input:checked ~ .avgtoggle .avgtoggle-off { display: none; }
.avgtoggle-input:checked ~ .avgtoggle .avgtoggle-ic::after { transform: rotate(-135deg); top: 5px; }
.metricstoggle-input:checked ~ .avgtoggle .avgtoggle-ic::after { transform: rotate(-135deg); top: 5px; }
.avgtoggle-input:focus-visible ~ .avgtoggle, .metricstoggle-input:focus-visible ~ .avgtoggle { outline: 2px solid var(--link); outline-offset: 3px; }

.metricstoggle, .metricspanel { display: none; }
.sortrow { display: none; }
#cards { display: none; }
#cards .acard.is-bench { display: none; }
#reszone:has(.avgtoggle-input:checked) #cards .acard.is-bench { display: block; }

.tip {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px;
  border: 1px solid var(--text-3); border-radius: 50%; font-size: 10px; font-weight: 700;
  color: var(--text-3); cursor: help; vertical-align: middle; background: transparent;
}
.tip:hover, .tip:focus-visible { border-color: var(--link); color: var(--link); }

/* ⚠⚠ THE POPUP THE "?" OPENS, AND THE DESIGN DOES NOT CONTAIN IT. `app.js:225` sets
   `tipEl.className = "tipbox"` and appends it to <body>; the design styles `.tip` (the ring) and
   stops. Without this every column explanation on the comparison renders as unstyled text at the
   bottom of the document — which is not a guess: `style.css:1131` records that exact regression
   happening once already, when a regex block-deletion swallowed this rule. Body-level on purpose,
   so no scrolling ancestor can clip it. */
.tipbox {
  position: fixed; z-index: 200; display: none;
  max-width: min(300px, calc(100vw - 24px));
  background: var(--bg-deep); color: #fff;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  pointer-events: none;
}

/* the table (desktop) */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); }
table.agents { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
table.agents th {
  text-align: right; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-3); padding: 14px 12px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: bottom;
}
table.agents th.left { text-align: left; }
table.agents th.headline-th { color: #fff; }
table.agents td {
  padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
table.agents td.left { text-align: left; }
table.agents tbody tr:last-child td { border-bottom: 0; }
table.agents tbody tr:hover { background: var(--surface-hover); }
table.agents tbody tr.is-selected { background: #182C5E; }
table.agents td.headline-cell .v { font-size: 18px; font-weight: 800; color: var(--figure); letter-spacing: -0.02em; }
tr.is-benchmark td { background: var(--bg-deep); border-bottom: 2px solid var(--accent); color: var(--text-2); }
tr.is-benchmark td.headline-cell .v { color: #fff; }
table.agents tbody tr.is-benchmark:hover td { background: var(--bg-deep); }
tr.is-benchmark .agent-name { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.agent-name { display: block; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -0.015em; }
.agent-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pick { display: inline-flex; align-items: center; }
.pick input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.colsort {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3); background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: baseline; gap: 4px;
}
.colsort:hover, .colsort.is-active { color: #fff; }
.colsort-arrow { font-style: normal; font-size: .9em; }
th:not(.left) .colsort { flex-direction: row-reverse; }
.th-short, .v-short { display: none; }
.rel-n { font-weight: inherit; font-variant-numeric: tabular-nums; }
.rel-w { font-style: normal; font-weight: 400; color: var(--text-3); font-size: .86em; }
table.agents td .rel-w { margin-left: 3px; }

.submit-note { font-size: var(--text-sm); color: var(--text-3); margin: 16px 0 0; line-height: 1.55; max-width: 52ch; }

@media (min-width: 701px) {
  .avgtoggle, .avgtoggle-input { display: none; }
  .submit-note { max-width: none; }
}

/* the comparison on a phone: cards */
@media (max-width: 700px) {
  .metricstoggle { display: inline-flex; }
  #reszone:has(.metricstoggle-input:checked) .metricspanel { display: block; }
  .metricspanel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 12px; }
  .metricsdl { margin: 0; }
  .metricsdl dt { font-weight: 700; font-size: 13px; color: #fff; margin: 0 0 2px; }
  .metricsdl dt::first-letter { text-transform: uppercase; }
  .metricsdl dd { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
  .metricsdl dd:last-child { margin-bottom: 0; }

  .sortrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
  .sortrow-label { font-size: 14px; font-weight: 600; color: var(--text-3); white-space: nowrap; margin: 0; }
  /* ⚠⚠ FLEXES FROM ZERO, NOT FROM 15rem, OR THE "?" WRAPS ONTO ITS OWN LINE. MEASURED at 390:
     the row has 350px of content width and "Rank by" + a 240px basis + the tip + two gaps needs
     ~338 — close enough that the select's own rendering pushed the tip over, and it sat orphaned
     under the control it explains. A basis of 0 makes the select take whatever is left instead,
     which it can afford: it already truncates with an ellipsis. The tip cannot truncate. */
  .sortsel { position: relative; flex: 1 1 0; min-width: 0; }
  .sortrow .tip { margin-left: 0; }
  /* ⚠⚠ BELOW 390, THREE THINGS CANNOT SHARE THIS ROW, AND THE VISIBLE LABEL IS WHAT GIVES.
     "% of asking price achieved" needs about 264px of select; at 360 the row has 320px in total,
     so label + gaps + tip leaves it ~234 and it renders as "% of asking price achi...".
     ⭐ Three treatments were built and RENDERED before choosing, because the arithmetic was wrong
     twice: a canvas text measurement said the label fitted at 360 when the screenshot showed it
     cut. Putting the label on its own line was tried first and rejected by James on sight
     ("looks awful"); shrinking the label and the chevron got within a pixel, which is not a
     margin; hiding the label leaves the full metric name, the chevron and the tip on one line
     with room to spare. From 390 up — the common phone width — the label is back and everything
     fits together.
     ⚠⚠ `.visually-hidden`, NEVER `display: none`. The select is `aria-labelledby="cardsort-label"`,
     so hiding this element outright would strip the control's accessible name. It stays in the
     accessibility tree and in the page's text; only its pixels go. */
  @media (max-width: 389px) {
    .sortrow-label {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
  }
  .sortsel select {
    width: 100%; height: 44px; padding: 0 12px; font-size: 16px; font-weight: 500;
    color: #fff; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
    text-overflow: ellipsis;
  }

  /* ⚠⚠ THE MATCHED PAIR. `_base.html` carries a <noscript> block that puts the table BACK and
     hides the cards, because the cards are built by `app.js` — without it a phone with scripts
     blocked sees no agents at all, above a notice promising the comparison works either way.
     It is placed after the stylesheet on purpose so it wins on equal specificity. Change the
     class names here and that block stops matching, silently. */
  .tbl-wrap--agents { display: none; }
  #reszone:not([data-view]) .tbl-wrap--agents { display: block; }
  #reszone[data-view="cards"] .tbl-wrap, #reszone[data-view="table"] .tbl-wrap { display: none; }
  #reszone[data-view="cards"] #cards, #reszone[data-view="table"] #cards { display: flex; flex-direction: column; gap: 10px; }

  .acard {
    position: relative; display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
    padding: 16px; cursor: pointer;
  }
  .acard input { position: absolute; opacity: 0; pointer-events: none; }
  .acard-tick {
    flex: none; width: 24px; height: 24px; margin-top: 2px;
    border: 2px solid var(--text-3); border-radius: 7px; background: transparent; display: grid; place-items: center;
  }
  .acard input:checked ~ .acard-tick { background: var(--accent); border-color: var(--accent); }
  .acard input:checked ~ .acard-tick::before {
    content: ""; width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .acard input:focus-visible ~ .acard-tick { outline: 2px solid var(--link); outline-offset: 2px; }
  .acard.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .acard-body { flex: 1 1 auto; min-width: 0; display: block; }
  .acard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .acard-name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: #fff; line-height: 1.25; }
  .acard-big { flex: 0 1 auto; min-width: 7.6em; text-align: right; display: block; }
  .acard-big .fig { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--figure); font-variant-numeric: tabular-nums; }
  .acard-big i {
    display: block; font-style: normal; font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3); margin-top: 4px; text-wrap: balance;
  }
  .acard-big .rel-w { display: block; margin-top: 4px; }
  .acard-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-3);
  }
  .acard-row b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
  .acard.is-bench { background: var(--bg-deep); border-color: var(--bg-deep); cursor: default; }
  .acard.is-bench .acard-name { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
  .acard.is-bench .acard-big .fig { color: #fff; }

  /* compact table, only reached with scripts off */
  .th-long, .v { display: none; }
  .th-short, .v-short { display: inline; }
  table.agents { min-width: 0; table-layout: fixed; }
  table.agents th:nth-child(6), table.agents td:nth-child(6) { display: none; }
  table.agents th, table.agents td { padding: 10px 4px; white-space: nowrap; font-size: 13px; }
  table.agents th:first-child, table.agents td:first-child { padding-left: 10px; }
  table.agents td.left { white-space: normal; }
  table.agents thead .tip { display: none; }
  table.agents th:nth-child(1), table.agents td:nth-child(1) { width: 28px; }
  table.agents th:nth-child(3), table.agents td:nth-child(3) { width: 56px; }
  table.agents th:nth-child(4), table.agents td:nth-child(4) { width: 42px; }
  table.agents th:nth-child(5), table.agents td:nth-child(5) { width: 44px; }
  table.agents th:nth-child(7), table.agents td:nth-child(7) { width: 56px; }
  .agent-name { font-size: 14px; }
  .agent-sub { display: none; }
  #cards .agent-sub { display: block; }
  .pick input { width: 16px; height: 16px; }
  td.headline-cell .v-short { font-weight: 700; color: var(--figure); }
}

/* ---- step pages (2–10): no footer, so the page ends shortly after the last control rather
   than trailing 56px of empty navy into nothing. */
.ladder-page:not(:has(.footer)) .ladder { padding-bottom: 40px; }

/* ---- footer */
.footer { border-top: 1px solid var(--border); padding: 32px 0 40px; margin-top: 16px; background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px; }
.footer h4 { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer a { font-size: 14px; font-weight: 500; color: #fff; }
.footer a:hover { color: var(--link); }
.footer .small { font-size: var(--text-sm); color: var(--text-3); line-height: 1.5; max-width: 44ch; margin: 0; }
.footer .small b { color: var(--text-2); font-weight: 600; }
.footer .brandmark img { width: 24px; height: 24px; }
.footer .brandmark b { font-size: 17px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}