/* ==========================================================================
   Crossfoot — stylesheet
   A direct translation of the Crossfoot design into classes. The design was
   authored with inline styles; every value here comes from it unchanged.
   Light theme only, by design. No external requests: both typefaces are
   served from assets/fonts/.
   ========================================================================== */

/* ---------- typefaces ---------- */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/plexmono-500.woff2') format('woff2');
}

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

:root {
  --navy:        #002D72;
  --orange:      #FF5910;
  --orange-mid:  #F58A5A;   /* market bars, 14–20% band */
  --orange-bar:  #F0894F;   /* row bars, 15–30% band */
  --orange-lift: #FF9166;   /* orange on the navy ground */

  --ink:         #16233d;
  --ink-2:       #46536b;
  --ink-3:       #5a6780;
  --muted:       #6a7690;
  --muted-2:     #7a869c;
  --muted-3:     #8a95a9;
  --muted-4:     #9aa6bb;

  --border:      #e2e8f2;
  --border-2:    #ccd6e6;
  --rule:        #eef2f8;
  --rule-2:      #f2f5fa;
  --panel:       #f7f9fc;
  --track:       #f0f4fa;
  --hover:       #fafbfe;
  --peach:       #fff6f1;

  --tag-error-bg: #fdeceb;  --tag-error-fg: #b3221a;
  --tag-warn-bg:  #fff1e8;  --tag-warn-fg:  #c2440d;
  --tag-info-bg:  #eef2fa;  --tag-info-fg:  #002D72;

  /* The page runs to the full viewport. Line length is held to a readable
     measure on the text blocks themselves, not by squeezing the whole layout —
     tables and charts want every pixel, paragraphs do not. */
  --gutter: 40px;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

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

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--orange); }
*:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
::selection { background: rgba(0, 45, 114, .14); }

.mono { font-family: var(--mono); }
.skip { position: absolute; left: -9999px; background: #fff; padding: 10px 14px; border-radius: 6px; z-index: 60; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 3px;
  position: relative; flex: none;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 3px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
}
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--navy); }
.brand-meta {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2);
  padding-left: 8px; border-left: 1px solid var(--border); white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { font-size: 13px; color: var(--ink-2); }
.site-nav a:hover { color: var(--orange); }
.site-nav a[aria-current="page"] { color: var(--navy); font-weight: 500; }
.nav-cta {
  font-size: 13px; font-weight: 500; padding: 7px 14px;
  border: 1px solid var(--navy); border-radius: 6px; color: var(--navy);
}
.nav-cta:hover { background: var(--navy); color: #fff; }

/* ---------- sections ---------- */

section { padding: 72px var(--gutter); max-width: none; }
section + section { border-top: 1px solid var(--border); }

/* Wider gutters as the viewport grows, so a full-width page does not run its
   content into the screen edge on a large monitor. */
@media (min-width: 1500px) { :root { --gutter: 64px; } }
@media (min-width: 1900px) { :root { --gutter: 88px; } }
.sec-hero { padding: 76px var(--gutter) 56px; }
.sec-full { max-width: none; padding-left: 40px; padding-right: 40px; }
.sec-full > .inner { max-width: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange);
}
.eyebrow .dash { width: 20px; height: 1px; background: var(--orange); }

h1.display {
  margin: 20px 0 0; line-height: 1.02; font-weight: 500;
  letter-spacing: -.032em; color: var(--navy);
  /* Scales with the viewport so the headline fills the page at any width rather
     than sitting in a column with dead space beside it. */
  font-size: clamp(36px, 5.6vw, 104px);
  /* No character cap: the headline is meant to span the page. The clamp on
     font-size is what keeps it to two or three lines at any viewport. */
  max-width: none;
}
h1.sec-title, h2.sec-title {
  margin: 12px 0 0; font-weight: 500;
  letter-spacing: -.02em; color: var(--navy);
  /* Grows a little with the viewport so a section heading does not look marooned
     on a wide screen, but nowhere near hero scale — these are section headings,
     not the page's headline. */
  font-size: clamp(28px, 3.1vw, 60px);
}
h3.sub {
  margin: 56px 0 0; font-size: 19px; font-weight: 600;
  color: var(--navy); letter-spacing: -.01em;
}
.lede { margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* Below the headline the narrative runs in two columns with the calls to action
   beside it, so the hero band is occupied across the page instead of trailing off
   into empty space on the right. The paragraphs keep a readable measure of their
   own; it is the layout that goes wide, not the line length. */
.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
  gap: 44px; align-items: start; margin-top: 38px;
}
.hero-body .lede { margin: 0; max-width: 48ch; }
.hero-body .btn-row { margin: 0; flex-direction: column; align-items: stretch; gap: 10px; }
.hero-body .btn { text-align: center; white-space: nowrap; }

/* Page headers on the inner pages, built like the hero: the heading runs the full
   width and the supporting text sits beside whatever the page puts on the right,
   so the top of the page is occupied rather than trailing off. */
.head-cols {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px; align-items: start; margin-top: 18px;
}
.head-cols .sec-lede { margin: 0; }
.head-cols + .head-cols { margin-top: 14px; }

/* The page header, on every page.
   A heading's box is full width but its TEXT is only as wide as the words in it,
   so a short title like "Coverage is broad, not complete" leaves half the page
   empty no matter how large the type gets. Putting the heading and its intro in
   two columns fills the band regardless of how long either one happens to be. */
.page-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;          /* bottoms line up, so the pairing reads as deliberate */
  margin-top: 14px;
}
.page-head-grid > * { min-width: 0; }
.page-head-grid h1.sec-title, .page-head-grid h2.sec-title { margin: 0; }
.page-head-grid .sec-lede { margin: 0; max-width: 62ch; }
.page-head-grid .sec-lede + .sec-lede { margin-top: 12px; }
/* .seg is a flex row; inside a grid cell it would stretch to the full column
   instead of hugging its chips. */
.page-head-grid .seg { margin-top: 18px; width: max-content; max-width: 100%; }

@media (max-width: 1100px) {
  .page-head-grid { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .page-head-grid .sec-lede { max-width: none; }
}

@media (max-width: 1060px) {
  .head-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* The headline figure for one filing, sized to hold the right-hand column. */
.head-stat {
  border: 1px solid var(--border-2); border-radius: 8px; padding: 22px 24px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 45, 114, .05);
}
.head-stat .cap { font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.head-stat .v {
  font-family: var(--mono); font-weight: 500; color: var(--navy);
  letter-spacing: -.03em; margin-top: 4px; line-height: 1;
  font-size: clamp(34px, 3.4vw, 56px);
}
.head-stat .v.flagged { color: var(--orange); }
.head-stat .sub { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.head-stat .bar { margin-top: 14px; }

@media (max-width: 1240px) {
  .hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .hero-body .btn-row { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 760px) {
  .hero-body { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
  .hero-body .lede { max-width: none; }
}
.sec-lede { margin: 12px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 72ch; }

.btn-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn {
  font-size: 13px; font-weight: 500; padding: 11px 20px; border-radius: 6px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  cursor: pointer; display: inline-block; font-family: inherit;
}
.btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-ghost { background: none; color: var(--navy); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: none; border-color: var(--navy); color: var(--navy); }

/* ---------- hero stat strip ---------- */

.stat-strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--panel); padding: 0; max-width: none;
}
.stat-strip .cells { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat-cell { padding: 28px 32px; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-cell .v {
  font-family: var(--mono); font-size: 30px; font-weight: 500;
  color: var(--navy); letter-spacing: -.02em;
}
.stat-cell .k { margin-top: 6px; font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* ---------- findings: market bars + weighted card ---------- */

.split { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; margin-top: 40px; align-items: start; }

.mbars { display: flex; flex-direction: column; gap: 2px; }
.mbar {
  display: grid; grid-template-columns: 230px 1fr 62px;
  align-items: center; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.mbar .name { font-size: 13.5px; color: var(--ink); }
.mbar .track { height: 10px; background: var(--track); border-radius: 2px; overflow: hidden; }
.mbar .fill { height: 100%; border-radius: 2px; display: block; }
.mbar .val { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--navy); }

.card {
  border: 1px solid var(--border-2); border-radius: 8px; padding: 26px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 45, 114, .05);
}
.card .cap { font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.card .big {
  font-family: var(--mono); font-size: 46px; font-weight: 500;
  color: var(--navy); letter-spacing: -.03em; margin-top: 6px;
}
.card .hr { height: 1px; background: var(--border); margin: 20px 0; }
.card .body { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 10.5px; padding: 4px 8px;
  border-radius: 4px; background: var(--track); color: var(--navy);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.outlier {
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 8px; padding: 22px; display: block;
}
a.outlier:hover { border-color: var(--border-2); border-left-color: var(--orange); box-shadow: 0 2px 8px rgba(0, 45, 114, .06); }
.outlier .rate { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--orange); }
.outlier .org { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); }
.outlier .line { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* ---------- filter bar ---------- */

.filters {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr auto;
  gap: 14px; align-items: end; margin-top: 28px; padding: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.filters label { display: block; }
.filters .lab {
  display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.filters input[type="search"], .filters input[type="text"], .filters select {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 11px;
  border: 1px solid var(--border-2); border-radius: 6px; background: #fff; color: var(--ink);
}
.filters input[type="range"] { width: 100%; accent-color: var(--orange); }
.btn-reset {
  font: inherit; font-size: 12.5px; padding: 9px 16px;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: #fff; color: var(--navy); cursor: pointer;
}
.btn-reset:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- explorer stat cards ---------- */

.scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.scard { padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; }
.scard .v { font-family: var(--mono); font-size: 24px; color: var(--navy); }
.scard .k { margin-top: 5px; font-size: 12px; color: var(--muted); }
.scard.accent { background: var(--peach); }
.scard.accent .v { color: var(--orange); }

/* ---------- chart panels ---------- */

.panel { border: 1px solid var(--border); border-radius: 8px; padding: 22px; }
.panel .title { font-size: 13px; font-weight: 600; color: var(--navy); }
.panel .sub { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }

.hist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 170px; margin-top: 18px; }
.hist .col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.hist .n { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--muted); }
.hist .bar { border-radius: 3px 3px 0 0; min-height: 2px; }
.hist-axis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px;
}
.hist-axis div { font-family: var(--mono); font-size: 10px; text-align: center; color: var(--muted-3); }

.scatter {
  position: relative; height: 170px; margin-top: 18px;
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: linear-gradient(to top, var(--panel) 0, #ffffff 100%);
}
/* The design's scatter carried a sample of the data; the real set is 448 points
   and they collide heavily. A hairline surface ring keeps overlapping marks
   countable without changing the mark's colour or size. */
.scatter .pt {
  position: absolute; border-radius: 50%; transform: translate(-50%, 50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}
.scatter-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--muted-3); padding-top: 8px;
}

.vbars { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.vbar {
  display: grid; grid-template-columns: 210px 1fr 90px 74px;
  align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-2);
}
.vbar:last-child { border-bottom: none; }
.vbar .name { font-size: 13px; color: var(--ink); }
.vbar .track { height: 8px; background: var(--track); border-radius: 2px; overflow: hidden; }
.vbar .fill { height: 100%; border-radius: 2px; background: var(--navy); display: block; }
.vbar .vol { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--navy); }
.vbar .n { font-size: 11.5px; text-align: right; color: var(--muted-3); }

/* ---------- segmented control ---------- */

.seg-wrap { display: flex; align-items: center; gap: 8px; }
.seg-wrap .lab { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--track); border-radius: 7px; }
.seg a, .seg button {
  font: inherit; font-size: 12px; padding: 6px 12px; border: none; border-radius: 5px;
  cursor: pointer; background: transparent; color: var(--ink-2);
}
.seg a[aria-current="true"], .seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg-lg a, .seg-lg button { padding: 7px 14px; text-transform: capitalize; }

.row-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 36px; flex-wrap: wrap;
}
.row-between h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.row-end { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- data table (CSS grid, per the design) ---------- */

.dtable { margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dtable .thead, .dtable .trow { display: grid; gap: 14px; align-items: center; }
.dtable .thead {
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.dtable .thead a { color: inherit; }
.dtable .thead a:hover { color: var(--navy); }
.dtable .trow { padding: 12px 20px; border-bottom: 1px solid var(--rule); }
/* Grid items default to min-width:auto, so any cell whose content is wider than
   its track silently paints over its neighbour instead of wrapping. Every cell in
   every data table opts out of that. */
.dtable .thead > *, .dtable .trow > * { min-width: 0; overflow-wrap: anywhere; }
.dtable .trow:last-child { border-bottom: none; }
.dtable .trow:hover { background: var(--hover); }
.dtable .num { font-family: var(--mono); text-align: right; }
.dtable .empty { padding: 44px 20px; text-align: center; font-size: 13px; color: var(--muted-2); }

.cols-filings { grid-template-columns: 1.5fr 1.4fr 1.1fr 52px 92px 1fr 78px; }
/* The rules summary: Rule | Severity | Hits | Catches. Column three is a narrow
   slot for a hit count. */
.cols-rules   { grid-template-columns: 270px 92px 70px minmax(0, 1fr); }

/* The findings list: Plan | Severity | Rule | Detail. It looks like the same
   four-column shape but column three holds a rule NAME, not a count — reusing
   cols-rules here put a 138px identifier in a 70px track and it printed straight
   over the detail text. */
.cols-findings { grid-template-columns: minmax(0, 1.25fr) 96px minmax(0, 200px) minmax(0, 2.4fr); }

.t-org  { font-size: 13px; font-weight: 500; color: var(--navy); }
.t-plan { font-size: 12.5px; color: var(--ink-2); }
.t-mkt  { font-size: 12px; color: var(--muted); }
.t-st   { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.t-vol  { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--ink); }
.t-rate { display: flex; align-items: center; gap: 10px; }
.t-rate .track { flex: 1; height: 7px; background: var(--track); border-radius: 2px; overflow: hidden; }
.t-rate .fill { height: 100%; border-radius: 2px; display: block; }
.t-rate .v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); min-width: 46px; text-align: right; }
.t-find { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--muted-4); }
.t-find.has { color: var(--tag-warn-fg); }
.t-rule { font-family: var(--mono); font-size: 12.5px; color: var(--navy); }
.t-hits { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--ink); }
.t-catch { font-size: 13px; color: var(--ink-2); }

.tag {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; display: inline-block;
}
.tag-error { background: var(--tag-error-bg); color: var(--tag-error-fg); }
.tag-warn  { background: var(--tag-warn-bg);  color: var(--tag-warn-fg); }
.tag-info  { background: var(--tag-info-bg);  color: var(--tag-info-fg); }

/* ---------- soft stat tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.tile { padding: 20px 22px; background: var(--panel); border-radius: 8px; }
.tile .v { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--navy); }
.tile .k { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---------- coverage gap cards ---------- */

.gapcard { display: flex; gap: 16px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 8px; }
.gapcard .code { font-family: var(--mono); font-size: 11px; color: var(--orange); padding-top: 2px; flex: none; }
.gapcard .title { font-size: 14px; font-weight: 600; color: var(--navy); }
.gapcard .detail { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* ---------- pipeline band (navy ground) ---------- */

.band-navy {
  background: var(--navy); color: #fff; max-width: none;
  border-top: 1px solid var(--border);
}
.band-navy .inner { max-width: none; }
.band-navy .eyebrow { color: var(--orange-lift); }
.band-navy .eyebrow .dash { background: var(--orange-lift); }
.band-navy h1.sec-title, .band-navy h2.sec-title { color: #fff; }
.band-navy .sec-lede { color: #c3d0e6; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.step {
  padding: 20px 18px; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; background: rgba(255, 255, 255, .04);
}
.step .n { font-family: var(--mono); font-size: 11px; color: var(--orange-lift); }
.step .file { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: #fff; }
.step .desc { margin-top: 8px; font-size: 12px; line-height: 1.55; color: #b9c8e0; }
.terminal {
  margin-top: 28px; padding: 20px 22px; border-radius: 8px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--mono); font-size: 13px; line-height: 1.9; color: #dbe6f5; overflow-x: auto;
}
.terminal .p { color: var(--orange-lift); }

/* ---------- output cards ---------- */

.outcard { display: block; padding: 22px; border: 1px solid var(--border); border-radius: 8px; }
.outcard:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(0, 45, 114, .07); }
.outcard .kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--orange); }
.outcard .name { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--navy); }
.outcard .desc { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* ---------- detail page ---------- */

/* Named for the record it lays out, not for "detail" — the coverage cards use
   .detail for their description text, and the two collided: this grid's fixed
   340px second column was being applied inside a 300px card. */
.record { display: grid; grid-template-columns: 1fr 340px; gap: 32px; margin-top: 36px; align-items: start; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); color: var(--ink); }
.mtable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.mtable th, .mtable td { padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
.mtable th:first-child, .mtable td:first-child { text-align: left; color: var(--ink-2); font-weight: 400; }
.mtable thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.mtable td { font-family: var(--mono); color: var(--ink); }
.mtable td:first-child { font-family: var(--sans); }
.mtable tbody tr:last-child td { border-bottom: none; }
.nil { color: var(--muted-4); }
.finding-item { border-left: 3px solid var(--border-2); padding: 10px 0 10px 14px; margin-bottom: 14px; }
.finding-item.sev-error { border-left-color: var(--tag-error-fg); }
.finding-item.sev-warn  { border-left-color: var(--orange); }
.finding-item .rule { font-family: var(--mono); font-size: 12.5px; color: var(--navy); margin-left: 8px; }
.finding-item p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.src { font-size: 12px; font-family: var(--mono); word-break: break-all; line-height: 1.7; }
.note { background: var(--panel); border-radius: 6px; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin: 0; }

/* ---------- pager ---------- */

.pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 24px 0; flex-wrap: wrap; }
.pager a, .pager span {
  font-family: var(--mono); font-size: 12px; padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--border); color: var(--ink-2);
}
.pager a:hover { border-color: var(--navy); color: var(--navy); }
.pager .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager .gap { border: none; }

/* ---------- footer ---------- */

.site-footer {
  padding: 32px var(--gutter); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.site-footer .left { font-size: 12.5px; color: var(--muted-2); line-height: 1.7; }
.site-footer .built { color: var(--ink-2); }
.site-footer .built a { color: var(--navy); font-weight: 500; }
.site-footer .built a:hover { color: var(--orange); }
.site-footer .right { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }

/* ---------- narrow screens ----------
   The design is authored at desktop width. These rules collapse its grids in
   the order that keeps meaning: multi-column card grids stack, the fixed
   label columns in bar rows give way, and the filings table becomes a stack of
   labelled rows rather than a squeezed seven-column grid. */

@media (max-width: 1060px) {
  .stat-strip .cells { grid-template-columns: repeat(3, 1fr); }
  .stat-cell:nth-child(3) { border-right: none; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: 1fr 1fr 1fr; }
  .filters .reset-cell { grid-column: 1 / -1; }
  .scards, .tiles, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  section, .sec-hero, .band-navy, .site-header, .site-footer { padding-left: 24px; padding-right: 24px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .charts-2 { grid-template-columns: 1fr !important; }
  .record { grid-template-columns: 1fr; }
  h1.display { font-size: 38px; max-width: none; }
  .lede { font-size: 15px; }
  .mbar { grid-template-columns: 130px 1fr 54px; gap: 10px; }
  .vbar { grid-template-columns: 120px 1fr 66px; gap: 10px; }
  .vbar .n { display: none; }

  /* The filings table stops being a table and becomes stacked records. */
  .dtable .thead { display: none; }
  .dtable .trow.cols-filings, .dtable .trow.cols-rules, .dtable .trow.cols-findings {
    grid-template-columns: 1fr; gap: 4px; padding: 16px 18px;
  }
  .dtable .trow .t-vol, .dtable .trow .t-find, .dtable .trow .t-hits { text-align: left; }
  .dtable .trow .t-rate .v { min-width: 0; }
}

/* The five nav links plus the Repository chip stop fitting beside the wordmark
   well before phone widths — at 768px they were pushing the page 10px wide. The
   header becomes two rows here, with the nav as one scrollable strip. */
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; gap: 0 14px; padding-top: 10px; padding-bottom: 6px; }
  .brand { order: 1; margin-right: auto; min-height: 40px; }
  .site-nav {
    order: 2; flex: 1 0 100%; gap: 18px; margin-top: 4px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .site-nav .nav-cta { padding: 5px 12px; }

  /* Segmented controls hold one chip per collector segment, so they outgrow a
     phone long before the rest of the page does. */
  .seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .seg::-webkit-scrollbar { display: none; }
  .seg a, .seg button { white-space: nowrap; }
}

@media (max-width: 620px) {
  .brand-meta { display: none; }
  /* Metric tables keep their column alignment and let the panel scroll, rather
     than being squeezed until the numbers wrap. */
  .panel { overflow-x: auto; }
  .mtable { font-size: 12px; }
  .mtable th, .mtable td { padding: 8px 6px; }
  .stat-strip .cells { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px; }
  .scards, .tiles, .grid-4, .steps { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  h1.display { font-size: 31px; }
  .card .big { font-size: 36px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- grid and flex children must be allowed to shrink ----------
   A grid or flex item defaults to min-width:auto, which means its longest
   unbreakable content sets a floor the track cannot go below. With real data —
   a 60-character plan name, a bare hostname, a five-column metric table — that
   floor silently pushes the whole page wider than the viewport. Every layout
   container here opts its children out of that. */

.grid-2 > *, .grid-3 > *, .grid-4 > *,
.scards > *, .tiles > *, .split > *, .record > *,
.steps > *, .stat-strip .cells > * { min-width: 0; }

.row-between > div, .row-end > div { min-width: 0; flex-wrap: wrap; }
.gapcard > *, .t-rate > * { min-width: 0; }
.seg-wrap { flex-wrap: wrap; min-width: 0; }

/* Hostnames, source URLs and long plan names get to break rather than push. */
.gapcard .detail, .outlier .line, .scard .k, .tile .k,
.t-plan, .t-org, .vbar .name, .mbar .name { overflow-wrap: anywhere; }
.src { overflow-wrap: anywhere; }

/* ---------- validation: rules that link to their own hits ----------
   The rules table is a summary of counts; every count is a link through to the
   rows behind it, so no number on the page has to be taken on trust. */

a.trow.rule-row { color: inherit; }
a.trow.rule-row .t-catch { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.rule-go {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-3);
  white-space: nowrap; opacity: 0; transition: opacity .12s ease;
}
a.trow.rule-row:hover .rule-go { opacity: 1; color: var(--orange); }
a.trow.rule-row[aria-current="true"] { background: var(--panel); }
a.trow.rule-row[aria-current="true"] .t-rule { font-weight: 500; }
a.trow.rule-row[aria-current="true"] .rule-go { opacity: 1; color: var(--navy); }

a.tile { display: block; color: inherit; text-decoration: none; }
a.tile:hover { background: var(--track); }
a.tile:hover .v { color: var(--orange); }
a.tile .v, a.tile .k { transition: color .12s ease; }

@media (max-width: 860px) {
  /* The row collapses to a stack, so the hover-revealed affordance would never
     be reachable — show it outright instead. */
  .rule-go { opacity: 1; }
  a.trow.rule-row .t-catch { display: block; }
}