/* Key insights: cross-benchmark findings shown above the boards, one at a time.
   A short paged strip so the boards stay close to the fold. Square corners
   throughout; only dots are round. Figures and copy come from KEY_INSIGHTS in
   index.html, never from this file. */
.ki-section { max-width:var(--content-width,1120px);margin:0 auto;padding:48px 48px 0; }
/* A hairline at the boards' width closes the strip off from the boards below. */
.ki-section + .boards-section { padding-top:64px; }
.ki-section + .boards-section::before { content:"";display:block;margin:-32px 0 31px;border-top:1px solid var(--fw-border,#E6EAF4); }
.ki-head { display:flex;align-items:flex-end;justify-content:space-between;gap:24px; }
.ki-section .ki-title { margin:0;font-size:24px;line-height:28px; }
.ki-nav { display:flex;align-items:center;gap:8px;flex:none; }
/* The tabs show the position; this only announces a change to screen readers. */
.ki-status { position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.ki-arrow { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface,#FFFFFF);cursor:pointer;transition:background-color 200ms,border-color 200ms; }
.ki-arrow:hover { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand-light,#FAF7FF); }
.ki-arrow img { display:block; }

.ki-tabs { display:flex;flex-wrap:wrap;gap:0;margin-top:16px;border:1px solid var(--fw-border,#E6EAF4);border-bottom:0; }
.ki-tab { flex:1 1 0;min-width:0;padding:10px 12px;border:0;border-right:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface,#FFFFFF);cursor:pointer;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:14px;font-weight:var(--fw-weight-heading,550);letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink-muted,#696969);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -2px 0 transparent;transition:color 200ms,box-shadow 200ms,background-color 200ms; }
.ki-tab:last-child { border-right:0; }
.ki-tab:hover { color:var(--fw-ink,#16181D);background:var(--fw-brand-light,#FAF7FF); }
.ki-tab[aria-pressed="true"] { color:var(--fw-brand,#6726FE);box-shadow:inset 0 -2px 0 var(--fw-brand,#6726FE); }

.ki-viewport { overflow:hidden;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface,#FFFFFF); }
.ki-track { display:flex;transition:transform 500ms cubic-bezier(.33,1,.68,1); }
.ki-card { flex:0 0 100%;min-width:0;display:grid;grid-template-columns:200px minmax(0,1fr) 288px;align-items:center;gap:40px;min-height:196px;padding:24px 32px;visibility:visible; }
/* Hidden slides leave the tab order once they have slid out of view. */
.ki-card[aria-hidden="true"] { visibility:hidden;transition:visibility 0s 500ms; }

.ki-stat { display:flex;flex-direction:column;gap:6px;min-width:0;container-type:inline-size; }
/* A long figure ("#1 → #12") steps down until it fits its column; --ki-stat-chars is its
   length, and 0.6em is the widest average glyph the stat faces set. */
.ki-stat-value { font-family:var(--fw-font-display,'Inter',sans-serif);font-size:min(var(--ki-stat-size,44px),100cqi / (.6 * var(--ki-stat-chars,1)));line-height:46px;font-weight:var(--fw-weight-heading,550);letter-spacing:var(--fw-heading-tracking,-.04em);color:var(--fw-brand,#6726FE);font-variant-numeric:tabular-nums;white-space:nowrap; }
.ki-stat-note { font-size:12px;line-height:16px;color:var(--fw-ink-muted,#696969); }
.ki-copy { min-width:0; }
.ki-section .ki-claim { margin:0;font-size:18px;line-height:23px; }
.ki-body { margin:6px 0 0;font-size:14px;line-height:21px;font-weight:var(--fw-weight-body,400);color:var(--fw-ink-secondary,#5A5E63); }
.ki-footnote { margin:6px 0 0;font-size:11px;line-height:15px;color:var(--fw-ink-muted,#696969); }
.ki-link { display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:16px;font-weight:var(--fw-weight-heading,550);letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink,#16181D);text-align:left; }
.ki-link img { flex:none;transition:transform 200ms; }
.ki-link-keep { text-transform:none; }
.ki-link:hover { color:var(--fw-brand-hover,#501BC4); }
.ki-link:hover img { transform:translateX(2px); }
.ki-figure { min-width:0; }

/* Leadership: one cell per benchmark, marked with the leading model's provider. */
.ki-cells { display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px; }
.ki-cell { display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;padding:0;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface,#FFFFFF);cursor:pointer;transition:border-color 200ms,background-color 200ms; }
.ki-cell:hover { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand-light,#FAF7FF); }
.ki-cell img { display:block;width:14px;height:14px;object-fit:contain; }
.ki-providers { display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px; }
.ki-provider { display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:15px;color:var(--fw-ink-secondary,#5A5E63); }
.ki-provider img { display:block;width:12px;height:12px;object-fit:contain; }
.ki-provider-count { font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-weight:600;color:var(--fw-ink,#16181D);font-variant-numeric:tabular-nums; }

/* Strengths: one row per editorial grouping, one cell per board in it. A filled cell is
   a board the named family leads; an unfilled one carries whoever leads it instead. */
.ki-card--strengths { grid-template-columns:minmax(0,1fr) 440px; }
.ki-strengths { display:flex;flex-direction:column; }
.ki-strength { display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;gap:12px;padding:5px 0;border-top:1px solid var(--fw-border,#E6EAF4); }
.ki-strength:last-child { border-bottom:1px solid var(--fw-border,#E6EAF4); }
.ki-strength-label { display:flex;flex-direction:column;min-width:0;font-size:11px;line-height:15px;color:var(--fw-ink-muted,#696969); }
.ki-strength-family { font-size:12px;line-height:16px;font-weight:var(--fw-weight-heading,550);color:var(--fw-ink,#16181D); }
.ki-strength-work { font-weight:var(--fw-weight-body,400);color:var(--fw-ink-secondary,#5A5E63); }
.ki-strength-cells { display:grid;grid-template-columns:repeat(4,22px);gap:3px; }
.ki-strength-cell { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface-muted,#F5F5F5);cursor:pointer;transition:border-color 200ms,background-color 200ms; }
.ki-strength-cell.is-on { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand-light,#FAF7FF); }
.ki-strength-cell:hover { border-color:var(--fw-ink,#16181D); }
.ki-strength-cell img { display:block;width:12px;height:12px;object-fit:contain; }
.ki-strength-count { font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:16px;font-weight:600;color:var(--fw-ink,#16181D);font-variant-numeric:tabular-nums;text-align:right; }

/* Headroom: one labelled row per unsolved benchmark. The grey bar is the best score, the
   purple bar over it the best open model's, and the rest of the track up to 100% is the
   headroom. */
.ki-bars { display:flex;flex-direction:column;gap:6px; }
.ki-bar-row { display:grid;grid-template-columns:120px minmax(0,1fr) 36px;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left; }
.ki-bar-name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:16px;color:var(--fw-ink-secondary,#5A5E63);transition:color 200ms; }
.ki-bar-row:hover .ki-bar-name { color:var(--fw-brand-hover,#501BC4); }
.ki-bar-track { position:relative;height:12px;background:var(--fw-surface-muted,#F5F5F5); }
.ki-bar-best, .ki-bar-open { position:absolute;left:0;top:0;bottom:0; }
.ki-bar-best { background:var(--fw-color-neutrals-200,#BABABA); }
.ki-bar-open { background:var(--fw-brand,#6726FE); }
.ki-bar-value { font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:16px;font-weight:600;color:var(--fw-ink,#16181D);font-variant-numeric:tabular-nums;text-align:right; }

/* Rank variance: two of the model's leaderboards, one square per model from first on the
   left to last on the right, with the model's own square filled. */
.ki-lineups { display:flex;flex-direction:column;gap:14px; }
.ki-lineup { display:flex;flex-direction:column;gap:6px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left; }
.ki-lineup-head { display:flex;align-items:baseline;justify-content:space-between;gap:12px; }
.ki-lineup-name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;font-weight:var(--fw-weight-heading,550);color:var(--fw-ink,#16181D);transition:color 200ms; }
.ki-lineup:hover .ki-lineup-name { color:var(--fw-brand-hover,#501BC4); }
.ki-lineup-rank { flex:none;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:16px;font-weight:600;color:var(--fw-brand,#6726FE);font-variant-numeric:tabular-nums; }
.ki-lineup-cells { display:flex;gap:3px; }
.ki-lineup-cell { flex:1 1 0;min-width:0;height:22px;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface-muted,#F5F5F5); }
.ki-lineup-cell.is-on { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand,#6726FE); }

/* Open models: their closest results to first place, by model and benchmark. */
.ki-rows { display:flex;flex-direction:column; }
.ki-row { display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:5px 0;border:0;border-top:1px solid var(--fw-border,#E6EAF4);background:none;cursor:pointer;text-align:left;transition:background-color 200ms; }
.ki-row:last-child { border-bottom:1px solid var(--fw-border,#E6EAF4); }
.ki-row:hover { background:var(--fw-brand-light,#FAF7FF); }
.ki-row-mark img { display:block;width:14px;height:14px;object-fit:contain; }
.ki-row-label { display:flex;flex-direction:column;min-width:0; }
.ki-row-model, .ki-row-bench { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ki-row-model { font-size:12px;line-height:15px;font-weight:var(--fw-weight-heading,550);color:var(--fw-ink,#16181D); }
.ki-row-bench { font-size:11px;line-height:14px;color:var(--fw-ink-muted,#696969); }
.ki-row-value { padding:2px 6px;border:1px solid var(--fw-border,#E6EAF4);font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:14px;font-weight:600;color:var(--fw-ink,#16181D);font-variant-numeric:tabular-nums;white-space:nowrap; }
.ki-row-side { display:flex;flex-direction:column;align-items:flex-end;gap:2px; }
.ki-row-edge { font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:10px;line-height:12px;letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink-muted,#696969);font-variant-numeric:tabular-nums;white-space:nowrap; }
.ki-row-value.is-first { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand,#6726FE);color:var(--fw-brand-ink,#FFFFFF);letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase; }
.ki-more { margin:8px 0 0;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:10px;line-height:14px;letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink-muted,#696969); }
.ki-more-toggle { display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color 200ms,text-decoration-color 200ms; }
.ki-more-toggle:hover, .ki-more-toggle[aria-expanded="true"] { color:var(--fw-ink,#16181D);text-decoration-color:currentColor; }
/* The "+ N more" list opens in a grid row of its own under the figure, so the stat and copy
   stay centred on the list as first shown. Narrower cards stack, and the tail closes up
   the row gap so it reads as the end of the figure. */
.ki-figure-tail { min-width:0; }
.ki-more-panel > .ki-rows { margin-top:8px; }
@media (min-width:1101px) {
  .ki-card--closest { row-gap:0; }
  .ki-card--closest > .ki-stat, .ki-card--closest > .ki-copy, .ki-card--closest > .ki-figure { grid-row:1; }
  .ki-figure-tail { grid-column:3;grid-row:2; }
}

/* Cost vs. quality: the leader and a cheaper model near it, on score and then on cost. */
.ki-compare { display:flex;flex-direction:column;gap:12px; }
.ki-compare-group { display:flex;flex-direction:column;gap:4px; }
.ki-compare-heading { margin-bottom:2px;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:10px;line-height:14px;letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink-muted,#696969); }
.ki-compare-row { display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;gap:8px; }
.ki-compare-track { position:relative;height:14px;background:var(--fw-surface-muted,#F5F5F5); }
.ki-compare-bar { position:absolute;left:0;top:0;bottom:0;min-width:2px;background:var(--fw-color-neutrals-200,#BABABA); }
.ki-compare-bar.is-on { background:var(--fw-brand,#6726FE); }
.ki-compare-value { font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:11px;line-height:16px;font-weight:600;color:var(--fw-ink,#16181D);font-variant-numeric:tabular-nums;text-align:right; }

.ki-range { display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-family:var(--fw-font-label,'JetBrains Mono',ui-monospace,monospace);font-size:10px;line-height:14px;letter-spacing:var(--fw-label-tracking,.04em);text-transform:uppercase;color:var(--fw-ink-muted,#696969); }
.ki-range span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ki-legend { display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px; }
.ki-legend-item { display:inline-flex;align-items:center;gap:6px;font-size:11px;line-height:15px;color:var(--fw-ink-muted,#696969); }
.ki-figure-note { margin:8px 0 0;font-size:10px;line-height:14px;color:var(--fw-ink-muted,#696969); }
.ki-legend-swatch { flex:none;width:9px;height:9px;border:1px solid var(--fw-border,#E6EAF4);background:var(--fw-surface-muted,#F5F5F5); }
.ki-legend-swatch.is-on { border-color:var(--fw-brand,#6726FE);background:var(--fw-brand,#6726FE); }
.ki-legend-headroom, .ki-legend-compare { border:0;background:var(--fw-color-neutrals-200,#BABABA); }
.ki-legend-headroom.is-open { background:var(--fw-brand,#6726FE); }

/* Once the figure spans the card, a long run of boards takes more columns, at most three
   rows, rather than rows of oversized cells. */
@media (min-width:641px) and (max-width:1100px) {
  .ki-cells { grid-template-columns:repeat(var(--ki-cell-cols,11),minmax(0,1fr)); }
}
@media (max-width:1100px) {
  .ki-card { grid-template-columns:180px minmax(0,1fr);gap:20px 32px; }
  .ki-figure { grid-column:1 / -1; }
  .ki-figure-tail { grid-column:1 / -1;margin-top:-20px; }
  .ki-card--strengths { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px) {
  .ki-section { padding:40px 24px 0; }
  .ki-section + .boards-section { padding-top:48px; }
  .ki-section + .boards-section::before { margin:-24px 0 23px; }
  .ki-tabs { flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; }
  .ki-tab { flex:0 0 auto; }
}
@media (max-width:640px) {
  .ki-head { align-items:center; }
  .ki-card { grid-template-columns:minmax(0,1fr);gap:16px;padding:20px; }
  .ki-figure-tail { margin-top:-16px; }
  .ki-stat-value { --ki-stat-size:36px;line-height:38px; }
}
@media (prefers-reduced-motion:reduce) {
  .ki-track, .ki-cell, .ki-strength-cell, .ki-bar-name, .ki-lineup-name, .ki-row, .ki-link img, .ki-tab, .ki-arrow, .ki-more-toggle { transition:none; }
}
.ki-arrow-back { transform:scaleX(-1); }