/* ============================================================
   CWE-bench - landing page
   Built on the Collinear AI design system (Archivo display, Inter
   body, Geist Mono; orange #F26125 on warm beige). Archivo served
   locally; Inter + Geist Mono via Google Fonts.
   ============================================================ */

/* Inter + Geist Mono are loaded via <link> in index.html, not @import —
   an @import here is discovered only after this file parses, which
   serialises two round trips before first paint. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Archivo-Light.ttf')    format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Archivo-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Archivo-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Archivo-SemiBold.ttf') format('truetype'); }

:root {
  --font-display: 'Archivo', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --c-brand-orange:        #F26125;
  --c-brand-orange-bright: #EE8449;
  --c-brand-orange-tint:   #FFE4D6;
  --c-tan:                 #CBB9A1;

  --c-beige-100: #FBFAF8;
  --c-beige-200: #F8F7F2;  /* page bg */
  --c-beige-300: #F2EEE5;

  --c-white: #FFFFFF;      /* chart-card surface (charts render on white) */

  --c-ink-900: #171616;
  --c-ink-700: #4E4F4F;
  --c-ink-600: #747575;
  --c-ink-300: #E5E5E1;
  --c-ink-200: #ECEAE3;

  --bg:      var(--c-beige-200);
  --fg-1:    var(--c-ink-900);
  --fg-2:    var(--c-ink-700);
  --fg-3:    var(--c-ink-600);
  --border:  var(--c-ink-300);
  --accent:  var(--c-brand-orange);

  /* status colors: separate, accessible positive/negative (>=4.5:1 on warm white) */
  --status-pass: #1A6E40;
  --status-fail: #B02A1A;

  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  /* clip, not hidden: hidden creates a scroll container, which disables position:sticky on the top nav */
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-brand-orange-tint); color: var(--c-ink-900); }

a { color: inherit; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Generative ambient canvas - sits behind all content on the beige page */
#ambient {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  /* fade the canvas behind the central reading column so probes never sit under prose */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
}

header,
main,
.footer { position: relative; z-index: 1; }

/* ---------- Shell ---------- */
.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
  background: rgba(248, 247, 242, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-standard) 200ms;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar.is-stuck { border-bottom-color: var(--border); }
.topbar .wordmark { color: var(--fg-1); height: 26px; display: block; }
.topbar .wordmark svg { height: 100%; width: auto; }

.toplinks { display: flex; align-items: center; gap: 28px; }
.toplink {
  font: 500 14px/1 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease-standard) 150ms;
}
.toplink:hover { color: var(--accent); }

/* ---------- Hero row: intro left, data sheet right ---------- */
main { flex: 1 0 auto; }

.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  align-items: start;
  column-gap: 64px;
  row-gap: 40px;
  padding-top: 72px;
  padding-bottom: 24px;
}

.eyebrow {
  display: inline-block;
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--c-brand-orange-tint);
  padding: 7px 12px;
  border-radius: var(--r-pill);
}

.product {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

.hero-statement {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* Brand phrases woven through the page: Hard But Fair / Harder Gyms.
   Dark rather than accent so bold body-size mentions keep AA contrast. */
.brand-phrase { color: var(--fg-1); font-weight: 700; }

.lede {
  margin: 18px 0 0;
  max-width: 580px;
  font: 400 16px/1.55 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--fg-2);
}

.meta {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font: 400 13px/1.5 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-3);
}
.meta a {
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: color var(--ease-standard) 150ms, border-color var(--ease-standard) 150ms;
}
.meta a:hover { color: var(--accent); border-color: var(--accent); }
/* Trust credential: independent-evaluation line reads darker/bolder than the rest */
.credential-lead { color: var(--fg-1); font-weight: 600; }
.credential-lead a { color: inherit; }        /* link stays dark/bold, keeps the meta underline; accent on hover via .meta a:hover */

/* ---------- Buttons — ported from collinear.ai's button system ---------- */
.btn-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font: 600 14px/1.2 var(--font-body);
  letter-spacing: 0;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  background: #E37F43;
  border: 1px solid #E79154;
  border-radius: 8px;
  box-shadow: inset 0 1px 4px #FFF9CE;
  transition: transform 400ms var(--ease-standard), box-shadow 400ms var(--ease-standard), background-color 400ms var(--ease-standard);
}
.btn-primary:hover {
  background: #CA733E;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(224, 132, 74, 0.35), inset 0 1px 4px #FFF9CE;
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--c-brand-orange-tint), inset 0 1px 4px #FFF9CE;
}
.btn-primary .btn-glow {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -6px;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 100%;
  background: #FFF5AE;
  filter: blur(12px);
  pointer-events: none;
}
.btn-primary .btn-text { position: relative; z-index: 1; }

.btn-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font: 600 14px/1.2 var(--font-body);
  color: var(--c-ink-700);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(55, 54, 68, 0.06);
  transition: border-color 400ms var(--ease-standard), color 400ms var(--ease-standard), transform 400ms var(--ease-standard), box-shadow 400ms var(--ease-standard);
}
.btn-ghost:hover {
  border-color: #E37F43;
  color: #E37F43;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(227, 127, 67, 0.15);
}
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--c-brand-orange-tint);
}

/* Stat tiles below the hero text */
.tiles {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 580px;
}
.tile {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile-label {
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
  /* Two lines' worth, so a wrapped label cannot drop its own tile's
     number below the other two. */
  min-height: 2.6em;
}
.tile-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.tile-unit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.44em;
  letter-spacing: 0;
  color: var(--fg-3);
}

/* Data sheet card (upper right) */
.datacard {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px 8px;
  margin-top: 8px;
}
.datacard-group { padding-bottom: 6px; }
.datacard-group + .datacard-group { border-top: 1px solid var(--border); padding-top: 16px; }
.datacard-head {
  display: block;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.datacard dl { margin: 0; }
.datarow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
}
.datarow + .datarow { border-top: 1px solid var(--c-ink-200); }
.datarow dt {
  font: 400 13px/1.4 var(--font-body);
  color: var(--fg-3);
  flex-shrink: 0;
}
.datarow dd {
  margin: 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--fg-1);
  text-align: right;
  max-width: 62%;
  text-wrap: balance;
}

/* ---------- Sections ---------- */
.section {
  padding-top: 64px;
  padding-bottom: 64px;
  scroll-margin-top: 76px;
}

/* Section rhythm: full-bleed background bands. The band paints the whole
   viewport width behind a section (content stays in the shell), so every
   section boundary is a change of surface instead of a faint hairline.
   z-index:-1 keeps it behind the section's own content; because main is a
   z-index:1 layer above the fixed ambient canvas (z-index:0), the band
   still covers the ambient. overflow-x:clip on <body> absorbs the 100vw. */
.section-band { position: relative; }
.section-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
.section-band--white::before { background: var(--c-white); }
.section-band--warm::before  { background: var(--c-beige-300); }

.section-title {
  margin: 0 0 18px;
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
}
.sub-title {
  margin: 40px 0 14px;
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.body {
  margin: 0 0 16px;
  max-width: 720px;
  font: 400 16px/1.6 var(--font-body);
  color: var(--fg-2);
}
.body strong { color: var(--fg-1); font-weight: 600; }
.body a { color: var(--fg-1); text-decoration-color: var(--border); }
.body a:hover { color: var(--accent); }

.note {
  margin: 12px 0 0;
  max-width: 720px;
  font: 400 13px/1.6 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-3);
}
.note strong { color: var(--fg-2); font-weight: 500; }
.note em { font-style: italic; }
/* .note has no bottom margin and .body no top one, so body copy following a
   caption would sit flush against it. */
.note + .body { margin-top: 22px; }

/* ---------- Tables ---------- */
.tablewrap {
  margin: 20px 0 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--c-beige-100);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg-2);
}
.tbl th {
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--c-ink-200);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: none; }

.tbl .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl .mono {
  font: 400 13px/1.5 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-3);
  white-space: nowrap;
}
.tbl .strong { color: var(--fg-1); font-weight: 600; }
.tbl .soft { color: var(--fg-3); font-weight: 400; }

/* Leaderboard: emphasize the leading row */
.tbl-leaderboard td:first-child { color: var(--fg-1); font-weight: 500; white-space: nowrap; }

/* Leader stripe keys off the first group, not tr:first-child — every
   .lb-group is its own tbody, so tbody tr:first-child matches all of them.
   It has to cover both rows, or the tint stops halfway down the block. */
.tbl-leaderboard .lb-group:first-of-type .lb-name { font-weight: 600; }
.tbl-leaderboard .lb-group:first-of-type tr {
  background: rgba(242, 97, 37, 0.05);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* A model spans two rows, so the rule belongs under its bar — not between
   the name and the bar that belongs to it. */
.tbl-leaderboard tr[data-model] td { border-bottom: none; }

.lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Independent-evaluation attribution under the leaderboard title */
.lb-attribution {
  margin: 4px 0 20px;
  font: 400 15px/1.5 var(--font-body);
  color: var(--fg-2);
}
.lb-attribution a { color: var(--fg-1); font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
.lb-attribution a:hover { color: var(--accent); border-color: var(--accent); }
.lb-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--c-beige-100);
}
.lb-btn {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 150ms var(--ease-standard), color 150ms var(--ease-standard);
}
.lb-btn:hover { background: rgba(242, 97, 37, 0.06); }
.lb-btn.is-on { background: var(--fg-1); color: var(--c-beige-100); }
.lb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.lb-name { white-space: nowrap; }
.lb-effort { color: var(--fg-3); font: 400 11.5px var(--font-mono); }
.lb-harness { color: var(--fg-3); font-weight: 400; }

/* Outruns `.tbl tbody tr:last-child td`, which zeroes the border on every
   group's bar row now that each model is its own tbody. */
.tbl-leaderboard .lb-group tr.lb-barrow td {
  padding-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-ink-200);
}
.tbl-leaderboard .lb-group:last-of-type tr.lb-barrow td { border-bottom: none; }
.lb-track {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--c-ink-200);
  overflow: hidden;
}
/* Width is animated from script, not by a CSS transition: re-inserting the
   tbody to sort it drops the transition's start value, so a row that keeps
   its rank snaps to the new width instead of growing into it. */
.lb-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--bar, var(--accent));
}

/* The selected metric's column carries the weight. */
.tbl-leaderboard[data-metric="p1"] td[data-col="p1"],
.tbl-leaderboard[data-metric="p4"] td[data-col="p4"] { color: var(--fg-1); font-weight: 600; }
.tbl-leaderboard[data-metric="p1"] td[data-col="p4"],
.tbl-leaderboard[data-metric="p4"] td[data-col="p1"] { color: var(--fg-3); font-weight: 400; }

.lb-group { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .lb-fill { transition: none; }
  .lb-group { will-change: auto; }
}

/* Spec table: label/value pairs */
.tbl-spec td:first-child { color: var(--fg-3); width: 46%; }
.tbl-spec td.num { color: var(--fg-1); font-weight: 500; text-align: right; }

/* Narrow variant for short two-column tables */
.tablewrap-narrow { max-width: 620px; }

/* ---------- Problem / design-response cards ---------- */
.cardgrid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cardtile {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
}
.cardicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg-1);
  margin-bottom: 16px;
}
.cardicon svg { width: 22px; height: 22px; }
.cardtile-title {
  margin: 0 0 8px;
  font: 600 15px/1.35 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.cardtile-body {
  margin: 0;
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--fg-2);
}
.cardtile-body strong { color: var(--fg-1); font-weight: 600; }

/* ---------- Coverage band (languages / CWEs / OWASP) ---------- */
.covergrid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.15fr;
  gap: 12px;
  margin: 20px 0 8px;
}
.coverpanel {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.cover-head {
  display: block;
  font: 500 10.5px/1.5 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.cover-langs { display: grid; gap: 9px; }
.cover-lang {
  display: grid;
  grid-template-columns: 20px 56px minmax(0, 1fr) 26px;
  gap: 8px;
  align-items: center;
}
.cover-logo { width: 17px; height: 17px; color: var(--fg-1); display: block; }
.cover-name { font: 400 12.5px/1 var(--font-body); color: var(--fg-1); }
.cover-bar {
  display: block;
  height: 6px;
  background: var(--c-ink-200);
  border-radius: 3px;
  overflow: hidden;
}
.cover-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c-brand-orange-bright);
}
.cover-count { font: 500 12px/1 var(--font-mono); color: var(--fg-1); text-align: right; }
.cover-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.cover-big-unit { font: 400 13px var(--font-body); letter-spacing: 0; color: var(--fg-3); }
.cover-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cover-chip {
  font: 400 10.5px/1 var(--font-mono);
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  white-space: nowrap;
}
.cover-note { margin: 12px 0 0; font: 400 11.5px/1.5 var(--font-body); color: var(--fg-3); }
.cover-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font: 400 11.5px/1.45 var(--font-body);
  color: var(--fg-1);
}
.cover-checks li { display: flex; gap: 7px; }
.cover-checks li::before { content: '\2713'; color: var(--accent); font-weight: 600; }

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

@media (max-width: 920px) {
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Chart cards ---------- */
.chartcard {
  margin: 28px 0 0;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 20px 16px;
}
.chartcard img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.chartcard figcaption {
  margin: 14px 4px 0;
  font: 400 13px/1.6 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-3);
}

.chart-title {
  display: block;
  margin: 0 4px 14px;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.echart {
  width: 100%;
  height: 400px;
}
.echart-tall { height: 520px; }
.echart-heatmap { height: 240px; }
.echart-map { height: 620px; }

/* ---------- CWE tilemap ---------- */
.mapcard .chart-title { margin-bottom: 4px; }

.maphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 4px 12px;
}
.maphead .maphint {
  margin: 0;
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--fg-3);
}

/* colour-scale key: pale = models agree, deep = models diverge */
.maplegend {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.maplegend-cap {
  font: 400 11px/1 var(--font-mono);
  color: var(--fg-3);
}
.maplegend-ramp {
  display: flex;
  height: 8px;
  width: 132px;
  border-radius: 2px;
  overflow: hidden;
}
.maplegend-ramp span { flex: 1 1 auto; }

.mapstage { position: relative; }
.mapstage [data-view-panel][hidden] { display: none; }

/* side-by-side chart pair (dot plot + slope) */
.chartpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.chartpair .chartcard { margin-top: 0; }
.chartpair .echart { height: 320px; }

@media (max-width: 920px) {
  .chartpair { grid-template-columns: 1fr; }
  .chartpair .chartcard + .chartcard { margin-top: 0; }
}

/* linked leaderboard rows (charted models) */
.tbl-leaderboard tbody tr[data-model] { transition: background 150ms var(--ease-standard); }
.tbl-leaderboard tbody tr.is-linked { cursor: pointer; }
.tbl-leaderboard tbody tr.is-linked:hover { background: rgba(242, 97, 37, 0.04); }

/* visually-hidden data tables for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Training corpus close: purpose cards + CTA ---------- */
.setgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 20px;
}
.setcard {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.setcard-purpose {
  display: block;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.setcard-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.setcard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--fg-2);
}
.setcard-list strong {
  font: 600 13px var(--font-mono);
  color: var(--fg-1);
}
.corpus-cta {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.corpus-cta-line {
  margin: 0;
  font: 500 16px/1.5 var(--font-body);
  color: var(--fg-1);
}

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

/* ---------- Sample task: specimen (task + verifier) and results ---------- */
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.spec-chip {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 9px;
}
.spec-chip--real { color: var(--accent); border-color: var(--accent); }

.specimen {
  margin-top: 22px;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Task 44 / Verifier 56; minmax(0,…) so an opened block scrolls in its
   column instead of collapsing the two panels to one. */
.specimen-row { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.specimen-panel { padding: 24px 26px; min-width: 0; }
.sp-verifier { border-left: 1px solid var(--border); }

.panel-label {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.panel-num { color: var(--accent); font-weight: 500; }
.panel-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.panel-p {
  margin: 0 0 12px;
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--fg-2);
}
.panel-p:last-of-type { margin-bottom: 0; }
.panel-p code, .results code { font: 500 0.92em/1 var(--font-mono); color: var(--fg-1); }

/* ===== Editorial tables (contract / verifier / results) ===== */
.stbl-wrap {
  margin: 4px 0 14px;
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.stbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.stbl thead th {
  padding: 14px 20px;
  background: var(--c-beige-300);
  border-bottom: 1px solid var(--border);
  font: 500 11px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.stbl tbody th, .stbl tbody td {
  padding: 16px 20px;
  font: 400 14.5px/21px var(--font-body);
  color: var(--fg-2);
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.stbl tbody tr { height: 60px; }
.stbl tbody th[scope="row"] { font-weight: 600; color: var(--fg-1); white-space: nowrap; }
.stbl tbody tr + tr th, .stbl tbody tr + tr td { border-top: 1px solid var(--border); }

/* column intents */
.contract-table tbody th[scope="row"], .contract-table thead th:first-child { width: 38%; }
.verifier-table thead th:nth-child(1) { width: 30%; }
.verifier-table .col-cases { width: 1%; white-space: nowrap; text-align: center; }
.verifier-table thead th:nth-child(3) { width: 58%; }

/* results table: fixed widths, centered status + score, prominent score */
.results-table { table-layout: fixed; }
.results-table thead th:nth-child(1) { width: 32%; }
.results-table thead th:nth-child(2) { width: 17%; }
.results-table thead th:nth-child(3) { width: 19%; }
.results-table thead th:nth-child(4) { width: 19%; }
.results-table thead th:nth-child(n+2),
.results-table tbody td { text-align: center; }
.results-table thead th:first-child,
.results-table tbody th[scope="row"] { text-align: left; }
.results-table tbody th, .results-table tbody td { padding: 16px 18px; }
.results-table tbody th[scope="row"] { white-space: normal; }
.results-table .st { justify-content: center; }
.results-table .st-result { font-size: 15px; }

/* Pass / Fail status: icon + text + separate accessible colors */
.st { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.35 var(--font-body); }
.sti { width: 14px; height: 14px; flex: none; }
.st-pass { color: var(--status-pass); }
.st-fail { color: var(--status-fail); }
.st-result { font-weight: 600; white-space: nowrap; }

/* ===== native disclosure rows (per computer-use reference) ===== */
.sample-disclosure { margin: 0; padding: 0; border: 0; }
.sample-disclosure + .sample-disclosure { margin-top: 6px; }
.sp-task .sample-disclosure,
.sp-verifier .panel-p + .sample-disclosure { margin-top: 16px; }
.sample-disclosure > summary {
  display: list-item;
  width: fit-content;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--fg-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.sample-disclosure--accent > summary { color: var(--accent); }
.sample-disclosure > summary:hover { color: var(--accent); }
.sample-disclosure > summary:focus-visible {
  color: var(--accent);
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
.sample-disclosure__content { margin-top: 10px; }

/* task instruction: wrapping prose */
.instruction {
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.instruction p { margin: 0 0 10px; font: 400 13.5px/1.6 var(--font-body); color: var(--fg-2); }
.instruction ul { margin: 0 0 10px; padding-left: 18px; }
.instruction li { margin: 0 0 8px; font: 400 13.5px/1.6 var(--font-body); color: var(--fg-2); }
.instruction-note { margin: 0; font: 400 12px/1.5 var(--font-body); color: var(--fg-3); font-style: italic; }

/* verifier logic: code, scrolls inside its own block only */
.excerpt {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: 400 12.5px/1.6 var(--font-mono);
  color: var(--fg-2);
  white-space: pre;
}
.ex-com { color: var(--fg-3); }

/* "View all eight inputs" grouped list */
.verifier-detail { margin: 0; }
.vd-grp {
  margin: 0 0 6px;
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.verifier-detail .vd-grp + .vd-list { margin-bottom: 16px; }
.vd-list { margin: 0; padding: 0; list-style: none; }
.vd-list li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.vd-list code { font: 400 12.5px/1.5 var(--font-mono); color: var(--fg-1); word-break: break-all; }
.vd-list span { margin-left: auto; text-align: right; font: 400 11.5px/1.4 var(--font-body); color: var(--fg-3); }

/* 03 results: the third movement, one warm surface */
.results {
  margin-top: 26px;
  background: var(--c-beige-300);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
}
.results .panel-title { margin: 8px 0 0; }
.results-explain { max-width: 720px; margin: 16px 0 0; }
.results .stbl-wrap { margin: 24px 0 0; }
.results-closing {
  max-width: 720px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ===== stacked panels below 900px ===== */
@media (max-width: 900px) {
  .specimen-row { grid-template-columns: 1fr; }
  .sp-verifier { border-left: none; border-top: 1px solid var(--border); }
}

/* ===== table -> stacked layouts below 680px ===== */
@media (max-width: 680px) {
  .sample-disclosure > summary { min-height: 44px; padding: 12px 0; line-height: 20px; }
  .results { padding: 24px 22px; }

  /* long code wraps or scrolls inside its own block, never widens the page */
  .instruction, .instruction p, .instruction li { overflow-wrap: anywhere; }
  .excerpt { white-space: pre-wrap; overflow-wrap: anywhere; }

  .stbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stbl, .stbl tbody, .stbl tbody tr, .stbl tbody th, .stbl tbody td { display: block; width: 100%; }
  .stbl tbody tr { height: auto; }
  .stbl tbody tr + tr th, .stbl tbody tr + tr td { border-top: none; }

  /* contract: stacked definition (term over value) */
  .contract-table tbody tr { padding: 16px; }
  .contract-table tbody tr + tr { border-top: 1px solid var(--border); }
  .contract-table tbody th[scope="row"] { padding: 0 0 4px; white-space: normal; }
  .contract-table tbody td { padding: 0; }

  /* verifier: check block — group + case badge on line one, behavior beneath */
  .verifier-table tbody tr { padding: 16px; }
  .verifier-table tbody tr + tr { border-top: 1px solid var(--border); }
  .verifier-table tbody th[scope="row"] { display: inline; padding: 0; white-space: normal; }
  .verifier-table tbody td.col-cases {
    display: inline-block; width: auto; margin-left: 8px;
    padding: 2px 8px; background: var(--c-beige-300);
    border-radius: var(--r-pill);
    font: 500 11px/1.4 var(--font-mono); color: var(--fg-3);
  }
  .verifier-table tbody td:not(.col-cases) { padding: 6px 0 0; color: var(--fg-2); }

  /* results: stacked blocks on the SAME surface (no floating cards);
     score sits beside the patch name, paths listed beneath */
  .results .stbl-wrap { background: transparent; border: 0; border-radius: 0; }
  .results-table tbody tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
    padding: 16px 0;
  }
  .results-table tbody tr:first-child { padding-top: 0; }
  .results-table tbody tr + tr { border-top: 1px solid var(--border); }
  .results-table tbody th[scope="row"] {
    grid-column: 1; grid-row: 1; align-self: baseline;
    padding: 0; font-size: 15px; font-weight: 600; color: var(--fg-1); text-align: left; white-space: normal;
  }
  .results-table tbody td[data-label="Score"] {
    grid-column: 2; grid-row: 1; padding: 0; text-align: right;
  }
  .results-table tbody td[data-label="Score"] .st { justify-content: flex-end; }
  .results-table tbody td:not([data-label="Score"]) {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 8px 0 0; text-align: left;
  }
  .results-table tbody td:not([data-label="Score"]) .st { justify-content: flex-end; }
  .results-table tbody td:not([data-label="Score"])::before {
    content: attr(data-label);
    font: 500 10.5px/1.4 var(--font-mono);
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3);
  }
  .results-table tbody td[data-label="UTF-8 path"] { grid-row: 2; }
  .results-table tbody td[data-label="Numeric path"] { grid-row: 3; }
  .results-table tbody td[data-label="Valid output"] { grid-row: 4; }
}

/* ---------- In practice: staged failure cards ---------- */
/* Five tracks: four card columns plus a 6px spacer between the groups.
   With the 12px gap on either side of it, the diagnosis/remediation gutter
   comes to 30px against 12px inside a group. */
.stagegrid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 6px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.stage-group {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
  align-self: end;
}
.stagegrid > .stage-group:first-child { grid-area: 1 / 1 / 2 / 3; }
.stage-group--rem { grid-area: 1 / 4 / 2 / 6; }
.stage-c1 { grid-area: 2 / 1; }
.stage-c2 { grid-area: 2 / 2; }
.stage-c3 { grid-area: 2 / 4; }
.stage-c4 { grid-area: 2 / 5; }
.stage-mark {
  display: block;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.stage-mark--rem { color: var(--accent); }



@media (max-width: 920px) {
  .stagegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stagegrid > .stage-group:first-child,
  .stage-group--rem,
  .stage-c1, .stage-c2, .stage-c3, .stage-c4 { grid-area: auto; }
  .stage-group { grid-column: 1 / -1; margin-top: 6px; }
}
@media (max-width: 600px) {
  .stagegrid { grid-template-columns: 1fr; }
}


/* ---------- BibTeX citation card (inside Acknowledgements) ---------- */
.bibtex-lead { margin: 28px 0 0; }
.bibtex-card {
  position: relative;
  margin-top: 14px;
  max-width: 720px;
  background: var(--c-beige-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.bibtex-card pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
}
.bibtex-card code {
  font: 400 12.5px/1.7 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-1);
  white-space: pre;
}
.bibtex-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  font: 500 12px/1 var(--font-body);
  color: var(--fg-2);
  background: var(--c-beige-200);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: color 150ms var(--ease-standard), border-color 150ms var(--ease-standard), background 150ms var(--ease-standard);
}
.bibtex-copy:hover { color: var(--accent); border-color: var(--accent); }
.bibtex-copy.is-copied { color: var(--accent); border-color: var(--accent); background: var(--c-brand-orange-tint); }
.bibtex-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-brand-orange-tint); }

/* ---------- Acknowledgements + contact CTA ---------- */
.section-ack { padding-bottom: 32px; }
.section-ack .note { margin-top: 4px; margin-bottom: 20px; font-style: italic; }

.cta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cta-label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cta-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-decoration: none;
  background: var(--c-beige-100);
  border: 1px solid var(--c-ink-900);
  border-radius: 8px;
  padding: 16px 26px;
  transition: background var(--ease-standard) 150ms, border-color var(--ease-standard) 150ms, color var(--ease-standard) 150ms;
}
.cta-btn:hover {
  background: var(--c-ink-900);
  border-color: var(--c-ink-900);
  color: var(--c-beige-100);
}

/* ---------- Footer ---------- */
.footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--c-beige-100);
}
.footer .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.footer .mark { color: var(--fg-1); height: 22px; opacity: 0.85; }
.footer .mark svg { height: 100%; width: auto; }
.footer .copy {
  font: 400 13px/1 var(--font-mono);
  letter-spacing: 0;
  color: var(--fg-3);
}
.footer .copy a { color: var(--fg-3); text-decoration: none; border-bottom: 1px solid var(--border); }
.footer .copy a:hover { color: var(--accent); border-color: var(--accent); }
.footer-tagline { font: 600 14px/1 var(--font-mono); letter-spacing: 0.01em; color: var(--fg-1); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-row {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }
  .datacard { max-width: 480px; margin-top: 0; }
}

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  .topbar { padding: 12px 0; }
  .toplinks { gap: 18px; flex-wrap: wrap; row-gap: 10px; }
  .toplink { font-size: 13px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 12px 12px 11px; }
  .section { padding-top: 44px; padding-bottom: 44px; }
  .tbl th, .tbl td { padding-left: 14px; padding-right: 14px; }
  .footer .shell { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* spec-table values must wrap in view, not push off-canvas */
  .tbl-spec td.num { white-space: normal; }

  /* leaderboard: drop the identifier column and let model names wrap
     so the scores stay in the first viewport */
  /* Identifier is column 2 now that Harness folded into the name cell. */
  .tbl-leaderboard th:nth-child(2),
  .tbl-leaderboard tr[data-model] td:nth-child(2) { display: none; }
  .tbl-leaderboard td:first-child,
  .tbl-leaderboard .lb-name { white-space: normal; }

  /* noscript fallback PNGs pan at a legible size instead of shrinking */
  .chartcard { overflow-x: auto; }
  .chartcard img { min-width: 560px; }

  /* interactive charts scale responsively */
  .echart { height: 320px; min-width: 0; }
  .echart-tall { height: 360px; }
  .echart-heatmap { height: 200px; }
  .echart-map { height: 560px; }
  .maphead { gap: 10px; }

  .cardgrid { grid-template-columns: 1fr; }
}

/* eval vs training corpus comparison */
.tbl-split { margin-top: 6px; }
.tbl-split thead th:first-child { width: 46%; }
.tbl-split th.num, .tbl-split td.num { width: 27%; }
.tbl-split tbody td:first-child { color: var(--fg-2); }

/* jump links to the eval-vs-training comparison */
.datalink, .inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms var(--ease-standard);
}
.datalink:hover, .inline-link:hover { border-bottom-color: var(--accent); }
.inline-link { white-space: nowrap; }
#corpus { scroll-margin-top: 24px; }