/* The Specialized Intelligence Index on the Fireworks UI kit for engineers.

   Loaded last, after the legacy skins and the 2026-09 theme. Every value comes from
   tokens.css; nothing here is eyedropped. Layout, copy and data are untouched. The
   page's model colours and every other company's logo are left as they are.

   1  legacy tokens → kit          6  boards, cards, leaderboards
   2  base, links, focus, motion   7  highlights
   3  type roles                   8  methodology, contributors, call to action, footer
   4  buttons and controls         9  benchmark detail pages
   5  nav and hero                 10 small screens */

/* ── 1. legacy tokens → kit ─────────────────────────────────────────────
   The legacy theme scopes these `html:root`; this file loads after it. */
html:root {
  --fw-brand: var(--fw-ember);
  --fw-brand-hover: var(--fw-ember-02);
  --fw-brand-pressed: var(--fw-ember-02);
  --fw-brand-light: var(--fw-surface-01);
  --fw-brand-ink: var(--fw-button-text);
  --fw-ink: var(--fw-text);
  --fw-ink-secondary: var(--fw-text-soft);
  --fw-ink-muted: var(--fw-text-soft);
  --fw-ink-inverse: var(--fw-surface);
  --fw-surface-muted: var(--fw-surface-01);
  --fw-surface-elevated: var(--fw-surface-02);
  --fw-border: var(--fw-divider);
  --fw-link: var(--fw-text);
  --fw-info: var(--fw-accent);
  --fw-danger: var(--fw-error);
  --fw-danger-strong: var(--fw-error);
  --fw-info-soft: var(--fw-surface-01);
  --fw-success-soft: var(--fw-surface-01);
  --fw-warning-soft: var(--fw-surface-01);
  --fw-danger-soft: var(--fw-surface-01);
  --fw-lavender: var(--fw-surface-01);
  --fw-purple-300: var(--fw-accent-bg);
  --fw-purple-700: var(--fw-text);
  --fw-gray-600: var(--fw-text-soft);
  --fw-gray-750: var(--fw-text-soft);
  --fw-gray-800: var(--fw-text);

  --fw-font-sans: var(--fw-font-text);
  --fw-font-support: var(--fw-font-text);
  --fw-font-label: var(--fw-font-mono);
  --fw-heading-tracking: 0;
  --fw-label-tracking: 0.02em;
  --fw-weight-heading: 500;
  --fw-weight-body: 400;

  --r-card: var(--fw-radius-md);
  --r-tile: var(--fw-radius-md);
  --r-input: var(--fw-radius-sm);
  --r-pill: var(--fw-radius-pill);
  --r-cta: var(--fw-radius-pill);
  --fw-radius-full: var(--fw-radius-pill);
  --fw-radius-nav: var(--fw-radius-sm);

  /* Best results: a Bloom tint behind Ember type. */
  --fw-result-wash: color-mix(in srgb, var(--fw-accent-bg) 38%, transparent);
  --fw-shadow-popover: 0 12px 32px -12px rgba(40, 0, 22, .18), 0 2px 6px rgba(40, 0, 22, .06);

  /* The 2026-09 palette ramps, which the legacy theme reads directly. */
  --fw-color-white: var(--fw-white);
  --fw-color-black: var(--fw-ember);
  --fw-color-gray: var(--fw-text-soft);
  --fw-color-purple-25: var(--fw-accent-bg);
  --fw-color-purple-50: var(--fw-accent-bg);
  --fw-color-purple-100: var(--fw-accent-bg);
  --fw-color-purple-400: var(--fw-ember);
  --fw-color-purple-500: var(--fw-ember-02);
  --fw-color-purple-600: var(--fw-ember-02);
  --fw-color-neutrals-25: var(--fw-surface-01);
  --fw-color-neutrals-50: var(--fw-surface-01);
  --fw-color-neutrals-100: var(--fw-ash-02);
  --fw-color-neutrals-400: var(--fw-text-soft);
  --fw-color-neutrals-600: var(--fw-ember-02);
  --fw-color-neutrals-700: var(--fw-ember-02);
  --fw-color-neutrals-900: var(--fw-ember);
  --fw-color-blue-300: var(--fw-accent);
  --fw-color-marine-400: var(--fw-accent-bg);
  --fw-color-success-500: var(--fw-success);
  --fw-color-warning-500: var(--fw-warning);
  --fw-color-warning-700: var(--fw-warning);
  --fw-color-red-500: var(--fw-error);
  --fw-color-red-700: var(--fw-error);
}

/* ── 2. base, links, focus, motion ──────────────────────────────────── */
html, body { background: var(--fw-surface); color: var(--fw-text); }
body { font-family: var(--fw-font-text); }
::selection { background: var(--fw-accent-bg); color: var(--fw-text); }

a { color: var(--fw-text); }
a:hover { color: var(--fw-accent); }
/* Inline links: Ember and underlined, Accent on hover. */
.fw-link, .fw-try, .detail-page .detail-meta-link, .board-chart-open,
.detail-page .mx-model-link, .leaderboard-model .model-link-group[data-tooltip]:not([data-tooltip=""]) > .mx-model-link {
  color: var(--fw-text) !important;
  text-decoration-color: color-mix(in srgb, var(--fw-text) 40%, transparent) !important;
}
.fw-link:hover, .fw-try:hover, .detail-page .detail-meta-link:hover, .board-chart-open:hover,
.mx-model-link:hover, .detail-page .mx-model-link:hover,
.leaderboard-model .model-link-group[data-tooltip]:not([data-tooltip=""]) > .mx-model-link:hover {
  color: var(--fw-accent) !important; text-decoration-color: var(--fw-accent) !important;
}
.fw-trained > span { text-decoration-color: color-mix(in srgb, var(--fw-text) 40%, transparent); }
.fw-trained:hover > span { text-decoration-color: var(--fw-accent); }

/* A 4px Bloom outline with no blur on every interactive element. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, .plot.cube:focus-visible, .rank-trigger:focus-visible,
.rank-dir:focus-visible, .rank-opt:focus-visible, #boards .bench-tabs-step:focus-visible {
  outline: 4px solid var(--fw-focus-ring) !important; outline-offset: 2px;
}

/* Calm, smooth motion: one easing everywhere. Durations stay as the page set them. */
*, *::before, *::after { transition-timing-function: var(--fw-ease) !important; }

/* ── 3. type roles ──────────────────────────────────────────────────────
   Sharp Serif for titles and headings only; Monument Grotesk for everything read
   or operated; Semi Mono for data, labels and specs. */

/* The legacy theme forces every heading-like element into the display face. Hand the
   small ones back to the text face first, then set the real headings. */
:where(h1, h2, h3, h4, h5, h6), .claim-head, .hl-model-name, .industry-title, .benchmarks-title,
.leaderboard-heading strong, .benchmark-card-identity strong, .models-title, .detail-title,
.detail-chart-title, .boards-section .cat-head h3 {
  font-family: var(--fw-font-text) !important; font-weight: 500 !important;
  letter-spacing: 0 !important; color: var(--fw-text) !important;
}
/* Sharp Serif's default figures are old-style, which turns "dfs-large1" into
   "dfs-largeı". Headings name models and counts, so they take its lining set. */
.hero h1, .benchmarks-title, .contribute-title, .detail-title, .method-page h1, .method-page h2, .method-page h3,
#boards .industry-category > .industry-title, .method-section h2, .leader-section h2,
.hl-section .hl-model-name, .models-title, .hl-section .hl-claim {
  font-variant-numeric: lining-nums !important;
}
/* Hero title: 48 / 1.0 / -0.03em */
.hero h1 {
  font-family: var(--fw-font-display) !important; font-weight: 400 !important;
  font-size: 48px; line-height: 1.04; letter-spacing: -0.03em !important; color: var(--fw-text) !important;
}
/* H1: 40 / 1.0 / -0.02em */
.benchmarks-title, .contribute-title, .detail-title, .method-page h1 {
  font-family: var(--fw-font-display) !important; font-weight: 400 !important;
  font-size: 40px !important; line-height: 1.04 !important; letter-spacing: -0.02em !important;
}
/* H2: 26 / 1.2 */
#boards .industry-category > .industry-title, .method-section h2, .leader-section h2,
.hl-section .hl-model-name, .models-title, .method-page h2 {
  font-family: var(--fw-font-display) !important; font-weight: 400 !important;
  font-size: 26px !important; line-height: 1.2 !important; letter-spacing: 0 !important;
}
/* H3: 20 / 1.3 */
.hl-section .hl-claim, .method-page h3 {
  font-family: var(--fw-font-display) !important; font-weight: 400 !important;
  font-size: 20px !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--fw-text);
}
/* H4: Grotesk Medium 17 */
.claim-head, #boards .board-benchmark-title, .benchmark-card-identity strong, .detail-chart-title, .hero-brand p {
  font-family: var(--fw-font-text) !important; font-weight: 500 !important;
  font-size: 17px !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: var(--fw-text);
}
.leaderboard-heading strong { font-size: 15px !important; }

/* Body copy: Grotesk 15 / 1.4 for UI, soft ink for secondary prose. */
:where(.detail-lede, .detail-scope-note, .models-summary, .claim-body, .chart-note, .hl-body, .hl-note, .cost-note, .contribute-sub) {
  color: var(--fw-text-soft) !important; font-weight: 400 !important; letter-spacing: 0 !important;
}
.contribute-sub, .detail-lede, .hl-section .hl-body { font-size: 15px !important; line-height: 1.5 !important; }
/* The kit's floor for small text is 14px. */
.claim-body { font-size: 14px !important; line-height: 1.45 !important; }

/* Eyebrows and labels: Semi Mono, uppercase, 12 / 1.0, +0.02em. */
.fw-eyebrow, .why-eyebrow, .hl-section .hl-head .hl-title, .graph-brand, .chart-alert-tag {
  font-family: var(--fw-font-mono) !important; font-weight: 400 !important; font-size: 12px !important;
  line-height: 1 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important;
  color: var(--fw-text-soft) !important;
}

/* Numbers and specs: Semi Mono. */
.num, .mono, .hl-section .hl-cost-val, .hl-bar-val, .leaderboard-rank,
.graph-axis-label, .board-plot-yticks, .board-plot-xticks, .domain-tab-count {
  font-family: var(--fw-font-mono) !important; letter-spacing: 0 !important; font-feature-settings: normal;
}

/* ── 4. buttons and controls ────────────────────────────────────────────
   Grotesk 15 / 1.0, 14px × 20px, pill. Primary is Ember on white type, secondary is
   Ash, outline is a 1px Ember rule. */
.cta-btn, .hl-btn, .hl-section .hl-btn, .why-link {
  height: auto !important; min-height: 0 !important; padding: 14px 20px !important; gap: 8px !important;
  border: 0 !important; border-radius: var(--fw-radius-pill) !important;
  font-family: var(--fw-font-text) !important; font-size: 15px !important; font-weight: 500 !important;
  line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
  transition: background-color 240ms, color 240ms, box-shadow 240ms !important;
}
.cta-solid, .hl-btn-solid {
  color: var(--fw-button-text) !important; background: var(--fw-button-bg) !important; box-shadow: none !important;
}
.cta-solid:hover, .hl-btn-solid:hover { color: var(--fw-button-text) !important; background: var(--fw-button-bg-hover) !important; }
.cta-ghost, .why-link, .hl-btn-ghost {
  color: var(--fw-text) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--fw-text) !important;
}
.cta-ghost:hover, .why-link:hover, .hl-btn-ghost:hover {
  color: var(--fw-text) !important; background: var(--fw-surface-01) !important; box-shadow: inset 0 0 0 1px var(--fw-text) !important;
}
.why-link-label { background-image: none !important; }
.cta-btn > svg, .hl-btn img, .why-link-arrow { width: 16px !important; height: 16px !important; }

/* Compact utility buttons keep their footprint and take the secondary style. */
.graph-export-btn, .detail-toggle, .back-link, .ghost-btn {
  border-radius: var(--fw-radius-pill) !important; border-color: transparent !important;
  background: var(--fw-surface-02) !important; color: var(--fw-text) !important;
  font-family: var(--fw-font-text) !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.graph-export-btn:hover, .detail-toggle:hover, .back-link:hover, .ghost-btn:hover {
  background: var(--fw-ash-03) !important; color: var(--fw-text) !important;
}

/* Toggles and chips: pills. Selected is Ember on Bloom; resting is a hairline. */
.dim-btn, #boards .board-dim-picker .dim-btn, .seg-btn, .col-chip, .domain-tab, .benchmark-toolbar .domain-tab {
  border-radius: var(--fw-radius-pill) !important;
}
#boards .board-dim-picker .dim-btn, .dim-btn {
  color: var(--fw-text-soft); background: transparent; border-color: var(--fw-divider);
}
#boards .board-dim-picker .dim-btn:hover, .dim-btn:hover { color: var(--fw-text); border-color: var(--fw-ash-03); }
#boards .board-dim-picker .dim-btn.on, .dim-btn.on, .detail-page .dim-btn.on {
  color: var(--fw-text) !important; background: var(--fw-accent-bg) !important; border-color: transparent !important;
}
.models-controls .segmented, .segmented {
  border-radius: var(--fw-radius-pill) !important; background: var(--fw-surface-01) !important; border-color: var(--fw-divider) !important;
}
.models-controls .seg-btn.on, .seg-btn.on { color: var(--fw-text) !important; background: var(--fw-accent-bg) !important; }
.seg-select, .models-controls .seg-select {
  border-radius: var(--fw-radius-pill) !important; border-color: var(--fw-divider) !important;
  background-color: var(--fw-surface-01) !important; color: var(--fw-text) !important;
  font-family: var(--fw-font-text) !important; font-weight: 500 !important;
}
.seg-select:hover { border-color: var(--fw-ash-03) !important; }
.seg-select-wrap { color: var(--fw-text-soft); }
.col-chip.on { border-color: transparent !important; background: var(--fw-accent-bg); color: var(--fw-text); }
.benchmark-toolbar .domain-tab { color: var(--fw-text); border-color: var(--fw-divider) !important; background: transparent; }
.benchmark-toolbar .domain-tab[aria-pressed="true"] {
  color: var(--fw-text) !important; background: var(--fw-accent-bg) !important; border-color: transparent !important;
}
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]),
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]):hover {
  color: var(--fw-text) !important; background: var(--fw-surface-01) !important; border-color: var(--fw-ash-03) !important;
}
.benchmark-toolbar .domain-tab[aria-pressed="true"] .domain-tab-count,
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]) .domain-tab-count {
  color: var(--fw-text) !important; background: var(--fw-surface) !important;
}

/* Sort-by control and its menu. Menus float, so they keep a soft shadow. */
.rank-pick { border-radius: var(--fw-radius-pill) !important; border-color: var(--fw-divider) !important; background: transparent; }
.rank-trigger { font-family: var(--fw-font-text) !important; font-weight: 500 !important; color: var(--fw-text); }
.rank-trigger:hover, .rank-trigger[aria-expanded="true"], .rank-dir:hover { background: var(--fw-surface-01) !important; color: var(--fw-text) !important; }
.rank-menu {
  border-radius: var(--fw-radius-md) !important; border-color: var(--fw-divider) !important;
  background: var(--fw-white) !important; box-shadow: var(--fw-shadow-popover) !important;
}
.rank-opt { border-radius: var(--fw-radius-sm) !important; color: var(--fw-text) !important; font-family: var(--fw-font-text) !important; }
.rank-opt:hover { background: var(--fw-surface-01) !important; }
.rank-opt.on, .rank-tick, .sort-caret { color: var(--fw-accent) !important; }

/* Tooltips float over content. */
.model-link-tooltip, .leaderboard-info-tooltip, .board-tip {
  border-radius: var(--fw-radius-sm) !important; border-color: var(--fw-divider) !important;
  background: var(--fw-white) !important; color: var(--fw-text) !important; box-shadow: var(--fw-shadow-popover) !important;
}

/* Best-result values the script marks with the legacy purple. */
[data-ui-ink="#6720FF"] { color: var(--fw-accent) !important; }
[data-ui-bg="#6720FF"] { background: var(--fw-text) !important; }
[data-ui-bg="#AD86FF"], [data-ui-bg="#B394FF"] { background: var(--fw-ash-03) !important; }
[data-ui-bg="#C9B8FF"] { background: var(--fw-accent-bg) !important; }
[data-ui-bg="#F8F4FF"], [data-ui-bg="#F7F3FF"], [data-ui-bg="#F7F7F8"] { background: var(--fw-surface-01) !important; }

/* ── 5. nav and hero ────────────────────────────────────────────────── */
.site-nav { background: var(--fw-surface) !important; border-bottom-color: var(--fw-divider) !important; }
/* The column rules were decoration; they keep their width so nothing moves. */
.nav-inner { border-color: transparent !important; }
.nav-home img { width: auto !important; height: 22px !important; }
.nav-end { gap: 12px !important; }

/* No gradients and no blur: the hero sits on the page surface. */
.hero::before, .hero::after { display: none !important; }
.hero-intro { gap: 28px !important; }
/* Clear space beside the lockup is at least the symbol's height. The product name sits
   on the wordmark's baseline, which is the bottom edge of the lockup. */
.hero-brand { gap: 18px !important; align-items: baseline !important; }
.hero-brand-home img { width: auto !important; height: 18px !important; }
.hero-brand p { font-size: 17px !important; }
.hero h1 { max-width: 900px !important; }
.hero-highlight {
  color: inherit !important;
  background: linear-gradient(var(--fw-accent-bg), var(--fw-accent-bg)) 0 58% / 100% 0.42em no-repeat !important;
  border-radius: 0 !important; padding: 0 .04em !important;
}
.claims { box-shadow: none !important; gap: 0; border-radius: var(--fw-radius-md); overflow: hidden; border: 1px solid var(--fw-divider); }
.claim, .hero .claim { background: var(--fw-surface-01) !important; border-color: var(--fw-divider) !important; border-radius: 0 !important; }

/* ── 6. boards, cards, leaderboards ────────────────────────────────────
   Cards: Ash, a 1px divider, 12px corners. Charts plot on white. */
#boards .industry-category { border-bottom-color: var(--fw-divider) !important; }
#boards .industry-category > .industry-title { display: flex; align-items: center; gap: 12px; }
#boards .subcategory-tabs { border-bottom-color: var(--fw-divider) !important; }
#boards .subcategory-tab {
  font-family: var(--fw-font-text) !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--fw-text-soft) !important;
}
#boards .subcategory-tab:hover { color: var(--fw-text) !important; }
#boards .subcategory-tab[aria-selected="true"] { color: var(--fw-accent) !important; }
#boards .subcategory-tab[aria-selected="true"]::after { background: var(--fw-accent) !important; height: 2px !important; }

#boards .board-chart, .benchmark-card, .detail-page .board-table {
  background: var(--fw-surface-01) !important; border: 1px solid var(--fw-divider) !important;
  border-radius: var(--fw-radius-md) !important; box-shadow: none !important;
}
#boards .bench-tab { color: var(--fw-text-soft) !important; font-family: var(--fw-font-text) !important; }
#boards .bench-tab:hover { color: var(--fw-text) !important; }
#boards .bench-tab.on { color: var(--fw-accent) !important; }
#boards .bench-tab.on::after { background: var(--fw-accent) !important; }
#boards .bench-tab-mark { border-color: var(--fw-divider) !important; background: var(--fw-white) !important; }
#boards .bench-tab-mark.is-dark { background: var(--fw-ember) !important; border-color: var(--fw-ember) !important; }
#boards .bench-tab-mark.is-wordmark { background: transparent !important; border: 0 !important; }
#boards .bench-tabs-next { background: linear-gradient(90deg, rgba(244, 240, 236, 0), var(--fw-surface-01) 60%) !important; }
#boards .bench-tabs-prev { background: linear-gradient(270deg, rgba(244, 240, 236, 0), var(--fw-surface-01) 60%) !important; }
#boards .bench-tabs-step > span { background: var(--fw-button-bg) !important; color: var(--fw-button-text) !important; box-shadow: none !important; }
#boards .board-chart-open { color: var(--fw-text-soft) !important; }
#boards .board-chart-open:hover, #boards .board-chart-open:focus-visible { color: var(--fw-accent) !important; }

#boards .board-plot.plot, .detail-page .graph-visual .plot, .plot {
  background: var(--fw-white) !important; border-radius: var(--fw-radius-sm) !important;
}
.plot.cube, .plot.line { background: transparent !important; }
.metric-bars { padding: 14px 16px 16px !important; background: var(--fw-white); border-radius: var(--fw-radius-sm); }
.metric-bars .hero-board-track { background: var(--fw-surface-01) !important; }
.graph-visual { background: transparent !important; }
.board-grid-h, .board-grid-v { border-color: var(--fw-divider) !important; }
.graph-axis-label { color: var(--fw-text-soft) !important; }

/* Domain leaderboards sit on the page, ruled by the divider. */
#boards .leaderboard-row, .leaderboard-row { border-color: var(--fw-divider) !important; }
.leaderboard-rank { color: var(--fw-text-soft) !important; }
#boards .industry-note {
  background: var(--fw-surface-01) !important; border-radius: var(--fw-radius-sm) !important; color: var(--fw-text-soft) !important;
}
.leaderboard-coverage-note { color: var(--fw-text-soft) !important; }
.model-logo-wrapper { border-color: var(--fw-divider) !important; background: var(--fw-white) !important; }
.leaderboard-row.is-model-result, .benchmark-cell.is-benchmark-best, .benchmark-cell.is-model-result {
  background: var(--fw-result-wash) !important; color: var(--fw-text) !important;
}

/* Scroll affordances fade into whatever they sit on. */
.matrix-scroll { background: transparent !important; scrollbar-color: var(--fw-ash-03) var(--fw-surface-01) !important; }
.matrix-more { background: linear-gradient(90deg, rgba(249, 247, 245, 0), var(--fw-surface) 62%) !important; }
.matrix-more > span { background: var(--fw-button-bg) !important; color: var(--fw-button-text) !important; box-shadow: none !important; }

/* ── 7. highlights ──────────────────────────────────────────────────────
   No blur, no glow, no gradient. The proof panel uses the dark surface. */
.hl-section { background: var(--fw-surface-01) !important; }
.hl-section::before, .hl-proof::before, .hl-proof::after,
.hl-section .hl-proof::before, .hl-section .hl-proof::after { display: none !important; }
.hl-section .hl-shell { background: var(--fw-surface) !important; border: 1px solid var(--fw-divider); border-radius: var(--fw-radius-md); overflow: hidden; }
.hl-proof, .hl-section .hl-proof { background: var(--fw-ember) !important; color: var(--fw-surface) !important; border-radius: 0 !important; }
.hl-proof :is(.hl-proof-label, .hl-bar-name, .hl-cost-label, .hl-cost-val, .hl-bar-val) { color: var(--fw-surface) !important; }
.hl-proof :is(.hl-cost-sub, .hl-bar-org, .hl-cost-unit) { color: color-mix(in srgb, var(--fw-surface) 70%, transparent) !important; }
.hl-section .hl-proof .hl-cost-item:first-child .hl-cost-val { color: var(--fw-accent-bg) !important; }
.hl-section .hl-cost-item { background: var(--fw-ember-02) !important; border-radius: var(--fw-radius-sm) !important; }
.hl-section .hl-chip { background: color-mix(in srgb, var(--fw-accent-bg) 18%, transparent) !important; border-radius: var(--fw-radius-sm) !important; }
.hl-section .hl-proof .hl-chip-text, .hl-proof .hl-chip-text { color: var(--fw-surface) !important; }
.hl-bar-track { background: color-mix(in srgb, var(--fw-surface) 16%, transparent) !important; border-radius: var(--fw-radius-pill); }
.hl-section .hl-bar-fill[data-ui-bg="#C9B8FF"] { background: var(--fw-accent-bg) !important; }
.hl-arrow { background: var(--fw-button-bg) !important; }
.hl-arrow:hover { background: var(--fw-button-bg-hover) !important; transform: none !important; }
.hl-count { font-family: var(--fw-font-mono) !important; font-weight: 400 !important; color: var(--fw-text-soft) !important; }
/* Badges: pill, eyebrow type. Accent is Ember on Bloom. */
.hl-badge {
  font-family: var(--fw-font-mono) !important; font-size: 12px !important; font-weight: 400 !important;
  line-height: 1 !important; letter-spacing: 0.02em !important; text-transform: uppercase;
  padding: 7px 12px !important; border-radius: var(--fw-radius-pill) !important;
}
.hl-badge-fw, .hl-section .hl-badge-fw { background: var(--fw-accent-bg) !important; color: var(--fw-text) !important; mix-blend-mode: normal !important; }
.hl-badge-sample { background: var(--fw-surface-02) !important; color: var(--fw-text) !important; border: 0 !important; }

/* ── 8. methodology, contributors, call to action, footer ───────────── */
#methodology { border-color: var(--fw-divider) !important; }
.method-row { border-top: 1px solid var(--fw-divider) !important; color: var(--fw-text) !important; }
.method-row:hover { color: var(--fw-accent) !important; }
.method-shell > summary::after, .method-detail summary::after { color: var(--fw-accent) !important; }

.leader-item { font-family: var(--fw-font-text) !important; }

.contribute-cta {
  background: var(--fw-surface-01) !important; border: 1px solid var(--fw-divider) !important;
  border-radius: var(--fw-radius-md) !important; padding: 48px !important;
}
.contribute-title { color: var(--fw-text) !important; }

.contribute-actions { gap: 12px !important; margin-top: 32px !important; }

footer { background: var(--fw-surface) !important; border-top-color: var(--fw-divider) !important; }
.footer-bar img { height: 20px !important; width: auto !important; }
.foot-link { color: var(--fw-text) !important; font-size: 14px; }
.foot-link:hover { color: var(--fw-accent) !important; }

/* ── 9. benchmark detail pages ─────────────────────────────────────── */
.detail-page .board-head, .detail-page .board-head > *, .detail-page .board-head .bh,
.leaderboard-columns, .benchmark-columns, .detail-chart-head, .detail-page .pareto-aside .detail-chart-head {
  color: var(--fw-text-soft) !important; background: var(--fw-surface-01) !important;
}
.detail-page .board-row { background: transparent !important; border-color: var(--fw-divider) !important; }
.detail-page .board-row > [data-best="true"] { background: var(--fw-result-wash) !important; box-shadow: 5px 0 var(--fw-result-wash), -5px 0 var(--fw-result-wash) !important; }
.detail-page .pareto-panel, .detail-page .pareto-aside, .model-leaderboard { background: transparent !important; }
.detail-crumb-link { color: var(--fw-text-soft) !important; }
.detail-crumb-link:hover { color: var(--fw-accent) !important; }
.detail-crumb-current { color: var(--fw-text) !important; }
.chart-scope-tab { color: var(--fw-text-soft) !important; font-family: var(--fw-font-text) !important; }
.chart-scope-tab[aria-selected="true"] { color: var(--fw-accent) !important; }
.chart-scope-tab::after { background: var(--fw-accent) !important; }

/* ── 10. small screens: the kit's mobile sizes ─────────────────────── */
@media (max-width: 640px) {
  .hero h1 { font-size: 32px !important; }
  .benchmarks-title, .contribute-title, .detail-title, .method-page h1 { font-size: 30px !important; }
  #boards .industry-category > .industry-title, .method-section h2, .leader-section h2,
  .hl-section .hl-model-name, .models-title, .method-page h2 { font-size: 22px !important; }
  .hl-section .hl-claim, .method-page h3 { font-size: 18px !important; }
  .claim-head, #boards .board-benchmark-title, .benchmark-card-identity strong, .detail-chart-title { font-size: 16px !important; }
  .cta-btn, .hl-btn, .hl-section .hl-btn, .why-link { padding: 12px 16px !important; }
  .contribute-cta { padding: 28px 22px !important; }
  /* The nav holds the lockup and two pills; Grotesk sets wider than the mono it replaced. */
  .nav-home img { height: 15px !important; }
  .nav-end { gap: 8px !important; }
  .nav-end .why-link, .nav-end .nav-cta { padding: 10px 14px !important; font-size: 14px !important; }
  .nav-end .why-link-arrow, .nav-end .nav-cta > svg { display: none !important; }
}
@media (max-width: 560px) {
  .why-link ~ .nav-cta { display: none !important; }
}