/* ============================================================
   AI Tool IP Risk Index — marketing page (Promo v2)
   Layout + page-scoped tokens only. All color/type/spacing
   comes from public/colors_and_type.css. Grato Grotesk only.
   ============================================================ */

/* ── Marketing-only accent ────────────────────────────────
   NOT part of the product design system. Exists solely to
   match the butter-yellow primary CTA on copysight.ai. Used
   on the two primary pills only — never on risk-tier data. */
:root {
  --mkt-cta-yellow:       #FBE14D;
  --mkt-cta-yellow-text:  var(--color-black);
  --page-gutter:          56px;
  --section-gap:          120px;
  --board-max:            880px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.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;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* ── Header (lavender — transparent on canvas, ask #1) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-page-bg);
}
.header-inner {
  height: var(--header-height);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 22px; width: auto; display: block; }
.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}
.site-nav a {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--color-blue); }
.login-pill {
  justify-self: end;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-black);
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid var(--color-header-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  transition: border-color 0.15s ease;
}
.login-pill:hover { border-color: var(--color-blue); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: 1;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--mkt-cta-yellow);
  color: var(--mkt-cta-yellow-text);
}
.btn-primary:hover { background: #F7D62E; }
.btn-ghost {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-header-border);
}
.btn-ghost:hover { border-color: var(--color-blue); }
.btn-ghost i { color: var(--color-blue); width: 18px; height: 18px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 11vh, 128px) var(--page-gutter) clamp(88px, 12vh, 136px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-eyebrow {
  color: var(--color-gray-500);
  margin: 0 0 var(--space-6);
}
.hero-title {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: clamp(52px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0;
  max-width: 14ch;
  overflow-wrap: break-word;
}
.hero-subhead {
  max-width: 560px;
  margin: var(--space-6) 0 0;
  font-size: var(--text-lg);
}
.hero-cta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-10);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── The Index (leaderboard, bare canvas) ─────────────── */
.index {
  max-width: var(--board-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: opacity 150ms ease;
}
.board-error { padding: var(--space-8) 0; text-align: center; }
.board-empty { padding: var(--space-10) 0; text-align: center; color: var(--color-gray-500); }
.clear-link { color: var(--color-blue); text-decoration: none; }
.link-action { color: var(--color-blue); text-decoration: none; font-weight: var(--font-medium); }

/* Group section header */
.board-section {
  color: var(--color-gray-500);
  margin: var(--space-10) 0 var(--space-3);
}
.board-section:first-child { margin-top: var(--space-4); }
/* Top-level content-type divider (Image tools / Video tools) — heavier than tier sub-headers. */
.board-section--type {
  color: var(--color-black);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  text-transform: none;     /* noun-phrase label ("Image tools") — Title Case, not the UPPER tier-tag treatment */
  letter-spacing: normal;
  margin-top: var(--space-12);
}
.board-section--type:first-child { margin-top: var(--space-4); }

.row {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1.1fr) minmax(120px, 1.4fr) auto auto auto;
  align-items: center;
  column-gap: var(--space-6);
  min-height: 76px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-header-border);
  text-decoration: none;
  color: var(--color-gray-900);
  cursor: pointer;
}
.row:first-child { border-top: 1px solid var(--color-header-border); }
.board-section + .row { border-top: 1px solid var(--color-header-border); }
.row:hover .row-name { color: var(--color-blue); }

.row-rank {
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-300);
  font-size: 20px;
  line-height: 1;
}

.row-id { min-width: 0; }
.row-name {
  font-family: var(--font-family);
  font-weight: var(--font-bold);
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-gray-900);
  margin: 0;
}
.row-version {
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
}
.row-cat {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
/* Marks a vendor that carries >=1 real, sourced evidence row (vs sample-only). */
.row-sourced { color: var(--color-success); font-weight: var(--font-medium); }
/* Marks a measured vendor whose sample came from few sources — directional, not an unbiased base rate. */
.row-srclimited { color: var(--color-gray-500); font-weight: var(--font-medium); }
/* Measured-by-engine evidence marker on a tile (real CopyScore detection, not a scraped guess). */
.tile-measured { color: var(--color-success); }

/* ── Landing "math behind it" block ───────────────────── */
.method-block { max-width: 640px; margin: 0 auto var(--space-12); text-align: center; }
.method-eyebrow { display: block; color: var(--color-gray-500); margin-bottom: var(--space-3); }
.method-block-title { font-size: var(--text-xl); line-height: 28px; font-weight: var(--font-bold); color: var(--color-gray-900); margin: 0 0 var(--space-3); }
.method-block .cs-body { color: var(--color-gray-600); }
.method-link { display: inline-block; margin-top: var(--space-4); color: var(--color-blue); font-weight: var(--font-medium); }

/* ── Methodology page ─────────────────────────────────── */
.method { max-width: 760px; }
.method section { margin-top: var(--space-10); }
.method p.cs-body { margin: var(--space-3) 0 0; }
.method ol.method-steps { margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
.method ol.method-steps > li { counter-increment: step; position: relative; padding: 0 0 var(--space-5) var(--space-10); }
.method ol.method-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--color-card-bg); color: var(--color-gray-700);
  font-weight: var(--font-bold); font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center;
}
.method ol.method-steps > li > b { color: var(--color-gray-900); }
.method-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.method-table th, .method-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-header-border); }
.method-table th { color: var(--color-gray-500); font-weight: var(--font-medium); font-size: var(--text-sm); }
.method-eg { background: var(--color-card-bg); border-radius: var(--radius-2xl); padding: var(--space-6); margin-top: var(--space-4); }
.method-eg code { font-size: var(--text-sm); color: var(--color-gray-700); }

.row-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  overflow: hidden;
}
.row-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--tier);
  transition: width 500ms ease;
}

.row-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.row-trend i {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}
.row-trend .cs-caption { color: var(--color-gray-500); }

.row-score {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tier);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.row-score::after { content: "/100"; font-size: 15px; vertical-align: baseline; margin-left: 2px; color: var(--color-gray-500); }

.row-tier {
  color: var(--tier);
  text-align: right;
  min-width: 7ch;
}

/* ── Closing band ─────────────────────────────────────── */
.closing {
  max-width: var(--board-max);
  margin: var(--section-gap) auto;
  padding: 0 var(--page-gutter);
  text-align: center;
}
.method {
  color: var(--color-gray-500);
  max-width: 560px;
  margin: 0 auto var(--space-12);
}
.closing-title {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0 0 var(--space-8);
}

/* ── Footer (lavender — no hairline, ask #1) ──────────── */
.site-footer {
  background: var(--color-page-bg);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  text-decoration: none;
}
.footer-links a:hover { color: var(--color-blue); }
.footer-social {
  display: flex;
  gap: var(--space-4);
}
.footer-social a { color: var(--color-gray-500); display: inline-flex; }
.footer-social a:hover { color: var(--color-blue); }
.footer-social i { width: 18px; height: 18px; }
.footer-copy { color: var(--color-gray-500); margin: 0; }

/* ── Spacing between hero and board ───────────────────── */
.index { margin-top: 0; }

/* ── Sample-data banner (persistent, non-dismissable) ──── */
.sample-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--page-gutter);
  background: transparent;
  text-align: center;
}
.sample-banner i { width: 14px; height: 14px; color: var(--color-gray-500); }
.sample-banner .cs-tag { color: var(--color-gray-500); }
/* On detail/violations pages the banner is a fixed top strip. */
.sample-banner-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--color-page-bg);
  padding: var(--space-2) var(--page-gutter);
}
body:has(.sample-banner-fixed) .site-header { top: 32px; }
body:has(.sample-banner-fixed) { padding-top: 32px; }

/* ── Skip link (a11y) ─────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ── Control bar (filter / sort / group) ──────────────── */
.control-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  background: var(--color-page-bg);
}
.control-bar-inner {
  max-width: var(--board-max);
  margin: 0 auto;
  padding: var(--space-4) var(--page-gutter);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.ctrl-cluster { display: inline-flex; align-items: center; gap: var(--space-3); }
.ctrl-label { color: var(--color-gray-500); }
.ctrl-count { margin: 0 0 0 auto; color: var(--color-gray-500); text-align: right; white-space: nowrap; }

/* .chip-set / .chip — IP-type + content-type text filters on detail & violations pages. */
.chip-set, .seg-set { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.chip, .seg {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  line-height: 1.2;
}
.chip[aria-pressed="true"], .seg[aria-pressed="true"] {
  color: var(--color-blue);
  font-weight: var(--font-bold);
}

/* ── Type segmented control — primary content-type filter ──────────
   App-Store pill idiom translated to our palette: white selected pill
   on a muted lavender-gray track. Tokens only; the single allowed
   shadow (--shadow-sm) lifts the selected pill, no track shadow. */
.type-seg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
}
.type-seg__btn {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--color-gray-500);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  padding: 5px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}
.type-seg__btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-gray-900);
  font-weight: var(--font-bold);
  box-shadow: var(--shadow-sm);
}
.type-seg__btn:not([aria-pressed="true"]):hover { color: var(--color-gray-700); }
@media (prefers-reduced-motion: reduce) { .type-seg__btn { transition: none; } }
.seg-set { gap: var(--space-2); }
.seg { position: relative; }
.seg + .seg::before {
  content: "·";
  color: var(--color-gray-300);
  margin-right: var(--space-2);
}
.ctrl-select {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-header-border);
  border-radius: var(--radius-lg);
  padding: 6px 10px;
  cursor: pointer;
}

/* ── Detail + Violations page ─────────────────────────── */
.detail {
  max-width: var(--board-max);
  margin: 0 auto;
  padding: var(--space-10) var(--page-gutter) 0;
}
.back-link { display: inline-block; color: var(--color-gray-500); text-decoration: none; margin-bottom: var(--space-8); }
.back-link:hover { color: var(--color-blue); }

.detail-head { padding-bottom: var(--space-10); }
.detail-title {
  font-family: var(--font-family);
  font-weight: var(--font-bold);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-black);
  margin: 0;
  max-width: 22ch;
}
.detail-deck { max-width: 60ch; margin: var(--space-5) 0 var(--space-8); }

.detail-score-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.detail-score-figure { display: flex; flex-direction: column; }
.detail-score {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tier);
  font-variant-numeric: tabular-nums;
}
.detail-score::after { content: "/100"; font-size: 22px; vertical-align: baseline; margin-left: 3px; color: var(--color-gray-500); }
.detail-score-tier { color: var(--tier); margin-top: var(--space-2); }
.detail-score-stat { color: var(--color-gray-600); }

.detail-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  overflow: hidden;
  margin: var(--space-6) 0 var(--space-6);
}
.detail-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--tier); }
.quick-facts { color: var(--color-gray-500); }
.method-link { color: var(--color-blue); text-decoration: none; }

/* ── Examples section + control row ───────────────────── */
.examples { padding-top: var(--space-4); }
.examples-title { margin: 0 0 var(--space-6); }
.control-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-header-border);
  margin-bottom: var(--space-6);
}

/* ── Tile grid (shared detail + violations) ───────────── */
.tile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.tile {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tile-thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tile-thumb-empty {
  background: var(--color-gray-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.tile-thumb-empty i { width: 24px; height: 24px; color: var(--color-gray-300); }
.tile-thumb-empty .cs-caption { color: var(--color-gray-300); }
/* Real preview image hotlinked from source; placeholder sits behind as a fallback. */
.tile-thumb-img { position: relative; background: var(--color-gray-200); }
.tile-thumb-img .tile-thumb-under { position: absolute; inset: 0; }
.tile-thumb-img img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-ip { margin: var(--space-1) 0 0; }
.tile-tags { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tile-chip { color: var(--color-gray-500); }
.tile-sim { font-weight: var(--font-bold); margin-left: auto; }
.tile-source { margin: 0; }
.tile-source a { color: var(--color-blue); text-decoration: none; }
.tile-sample-mark {
  display: inline-block;
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.tile-tool { margin: 0; color: var(--color-gray-500); }
.tile-tool a { color: var(--color-blue); text-decoration: none; }
.tile-sentinel { height: 1px; }
.tile-empty { padding: var(--space-10) 0; text-align: center; color: var(--color-gray-500); }

/* ── Detail closing CTA ───────────────────────────────── */
.detail-cta {
  max-width: var(--board-max);
  margin: var(--section-gap) auto;
  text-align: center;
}
.detail-cta .method { color: var(--color-gray-500); max-width: 60ch; margin: 0 auto var(--space-10); }
.cta-title {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0 0 var(--space-8);
}

/* ── Section rhythm ───────────────────────────────────── */
@media (min-width: 769px) {
  .hero { padding-bottom: var(--space-8); }
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --page-gutter: 24px; --section-gap: 80px; }

  /* Nav drops to its own full-width row beneath the brand/login instead of vanishing.
     Explicit grid placement keeps brand + Login on row 1 (the full-width nav would
     otherwise push the Login pill down to a third row, over the banner). */
  .header-inner { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
  .brand { grid-row: 1; grid-column: 1; }
  .login-pill { grid-row: 1; grid-column: 2; }
  .site-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-3);
    font-size: var(--text-sm);
  }

  .hero { padding-top: 56px; padding-bottom: 64px; }
  .hero-title { font-size: clamp(34px, 10vw, 52px); max-width: 100%; }
  .hero-subhead { font-size: var(--text-base); }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; min-width: 0; }

  /* Mobile row: top line is name (left) + score & tier (right, most
     prominent); category beneath the name; then bar full-width; then trend.
     display: contents lets the .row-id children join the row grid directly. */
  .row {
    grid-template-columns: 26px 1fr auto;
    grid-template-areas:
      "rank name  score"
      "rank cat   tier"
      "bar  bar   bar"
      "trend trend trend";
    column-gap: var(--space-3);
    row-gap: 6px;
    min-height: 0;
    padding: var(--space-6) 0;
  }
  .row-rank  { grid-area: rank; align-self: start; padding-top: 6px; }
  .row-id    { display: contents; }
  .row-name  { grid-area: name; align-self: end; font-size: 20px; }
  .row-cat   { grid-area: cat; align-self: start; margin-top: 0; }
  .row-score { grid-area: score; font-size: 38px; align-self: end; min-width: 0; }
  .row-score::after { font-size: 18px; }
  .row-tier  { grid-area: tier; text-align: right; align-self: start; min-width: 0; }
  .row-track { grid-area: bar; margin-top: var(--space-2); }
  .row-trend { grid-area: trend; justify-content: flex-start; }

  /* Control bar: not sticky on mobile — the 2-row header makes the fixed
     --header-height offset wrong, so it scrolls inline instead. */
  .control-bar { position: static; }
  /* Control bar: clusters wrap; count drops below, right-aligned. */
  .control-bar-inner { gap: var(--space-4); }
  .ctrl-count { width: 100%; margin: 0; }
  /* Type segmented control: full-width track, equal-thirds segments — no scroll. */
  .type-seg { width: 100%; }
  .type-seg__btn { flex: 1; padding: 8px 0; }
  /* .chip-set (detail/violations filters): scroll inline rather than wrap. */
  .chip-set { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Detail head stacks. */
  .detail { padding-top: var(--space-8); }
  .detail-score-block { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
  .detail-score { font-size: 64px; }
  .detail-title { font-size: clamp(24px, 8vw, 32px); }

  /* Tiles 2-up; within-page controls scroll. */
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .control-row { gap: var(--space-4); }
}

/* ============================================================
   Measured pilot surfaces (added with the controlled run).
   Composed only from tokens that already exist in
   public/colors_and_type.css. Colour stays semantic: a cell where
   every replicate leaked is similarity-high, a partial cell is
   similarity-medium, a clean cell is success, and blue is action.
   ============================================================ */

.board-note { margin: 0 0 var(--space-4); max-width: 68ch; color: var(--color-gray-700); }
.board-foot { margin: var(--space-4) 0 0; max-width: 78ch; color: var(--color-gray-600); }

/* the finding, above the table */
.finding-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4); margin: var(--space-8) 0;
}
.finding-card {
  background: var(--color-card-bg); border-radius: 10px; padding: var(--space-5);
  border: 1px solid var(--color-header-border);
}
.finding-n { margin: 0; font-size: 34px; font-weight: var(--font-black); line-height: 1.05; color: var(--color-black); }
.finding-label { margin: var(--space-2) 0 var(--space-1); }
.finding-sub { margin: 0; color: var(--color-gray-600); }

/* measured leaderboard */
.board-measured { display: flex; flex-direction: column; gap: 2px; }
.mrow {
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: minmax(160px, 1.6fr) repeat(3, 64px) 72px 62px 74px minmax(120px, 1fr);
  padding: var(--space-3) var(--space-4); background: var(--color-header-bg);
  border: 1px solid var(--color-header-border); border-radius: 8px;
  text-decoration: none; color: inherit;
}
.mrow:hover { border-color: var(--color-blue); }
.mrow:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.mrow-head {
  background: transparent; border: 0; padding-bottom: var(--space-1);
  font-size: var(--text-xs); color: var(--color-gray-500); text-transform: none;
}
.mrow-head span { white-space: nowrap; }
.mrow-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mrow-name strong { font-weight: var(--font-medium); }
.mcell {
  display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 6px; font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); background: var(--color-card-bg-alt);
}
.mcell-n { font-weight: var(--font-medium); }
.cell-all    { background: color-mix(in srgb, var(--color-similarity-high) 16%, transparent); color: var(--color-similarity-high); }
.cell-part   { background: color-mix(in srgb, var(--color-similarity-medium) 16%, transparent); color: var(--color-similarity-medium); }
.cell-zero   { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-gray-700); }
.cell-none   { color: var(--color-gray-500); font-size: var(--text-xs); }
.mrow-ref, .mrow-ctrl { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-gray-700); }
.mrow-comp { display: flex; flex-direction: column; gap: 2px; }
.mrow-comp-n { font-variant-numeric: tabular-nums; font-weight: var(--font-medium); }

/* confidence interval, drawn as a whisker on a 0..100 track */
.whisker { display: flex; align-items: center; gap: var(--space-2); }
.whisker-track { position: relative; flex: 1 1 auto; height: 4px; min-width: 60px; background: var(--color-gray-200); border-radius: 2px; }
.whisker-bar { position: absolute; top: 0; height: 4px; background: var(--color-gray-500); border-radius: 2px; }
.whisker-label { white-space: nowrap; color: var(--color-gray-600); }

/* leakage curve */
.curve polyline { stroke: var(--color-blue); stroke-width: 1.6; }
.curve circle { fill: var(--color-blue); }
.curve-big { display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px; }
.curve-big .curve { width: 100%; height: auto; }
.curve-axis { display: flex; justify-content: space-between; gap: var(--space-2); }
.curve-axis span { text-align: center; color: var(--color-gray-600); }

.cell-table td { font-variant-numeric: tabular-nums; }

/* not yet measured */
.nm-group-title { margin: var(--space-6) 0 var(--space-1); color: var(--color-gray-700); font-weight: var(--font-medium); }
.nm-group-note { margin: 0 0 var(--space-3); color: var(--color-gray-500); max-width: 68ch; }
.nm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nm-row {
  display: grid; gap: var(--space-3); align-items: baseline;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) minmax(220px, 2.4fr);
  padding: var(--space-3) var(--space-4); background: var(--color-header-bg);
  border: 1px solid var(--color-header-border); border-radius: 6px;
}
.nm-name { font-weight: var(--font-medium); }
.nm-company, .nm-reason { color: var(--color-gray-600); }

/* published frames */
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }
.frame { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.frame-link { display: block; text-decoration: none; }
.frame-thumb { position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--color-card-bg); }
.frame-thumb img { display: block; width: 100%; height: auto; }
.frame-box { position: absolute; border: 2px solid var(--color-similarity-high); border-radius: 2px; pointer-events: none; }
.frame figcaption { display: flex; flex-direction: column; gap: 2px; }
.frame-head { display: flex; align-items: center; gap: var(--space-2); }
.frame-sim { font-variant-numeric: tabular-nums; font-weight: var(--font-medium); }
.frame-hit { color: var(--color-similarity-high); }
.frame-miss { color: var(--color-gray-500); }
.frame-level { color: var(--color-gray-600); }
.frame-ip { }
.frame-prompt { color: var(--color-gray-500); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.frame-foot { margin-top: var(--space-5); max-width: 78ch; color: var(--color-gray-600); }

.method-deviations { margin: 0 0 var(--space-4) var(--space-5); padding: 0; }
.method-deviations li { margin-bottom: var(--space-2); }

@media (max-width: 860px) {
  .mrow { grid-template-columns: 1fr repeat(3, 56px); grid-auto-rows: auto; row-gap: var(--space-2); }
  .mrow-curve, .mrow-ref, .mrow-ctrl, .mrow-comp { grid-column: span 2; }
  .mrow-head { display: none; }
  .nm-row { grid-template-columns: 1fr; }
}

/* The finding is a sentence, not a three-word slogan, so it needs its own scale on the
   display face. Same token, same weight, tuned size only. */
.hero-title--sentence {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  max-width: 26ch;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .hero-title--sentence { font-size: clamp(24px, 6.4vw, 34px); max-width: 100%; }
}