/* self-hosted IBM Plex (audit F4) - subsets served by unicode-range */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* aimodelscomparison.com — design tokens + components (from the approved v1 mock) */

:root {
  color-scheme: light;
  --bg:#EFEEE9; --surface:#FFFFFF; --surface2:#FAFAF7;
  --ink:#15161A; --ink2:#2B2D33; --ink3:#43454B; --ink4:#4C4E54;
  --muted:#5A5A53; --muted2:#63635C; --muted3:#6A6A63;
  --line:#E3E2DC; --line2:#F0EFEA; --line-strong:#DEDDD6; --border-strong:#C9C8C0;
  --accent:#0B6E5B; --accent-bg:#F0F9F6; --accent-border:#B7DED2; --accent-soft:#E4F1EC;
  --accent-dim:#3E8B79; --accent-wash:#F7FBF9;
  --warn:#A65C0B; --warn-bg:#FDF6EC; --warn-border:#E9D3AE;
  --bad:#A8331E; --bad-bg:#FCF0ED; --bad-border:#EBC5BC;
  --panel:#15161A; --panel-ink:#F6F5F1; --panel-muted:#9B9B93; --panel-line:#2E3037;
  --panel-accent:#7BC9B4; --panel-soft:#C9C8C0;
  --on-ink:#F6F5F1; --sel:#CDEBE2;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg:#0B0D10; --surface:#13161B; --surface2:#181C22;
    --ink:#E7EBF0; --ink2:#C6CCD6; --ink3:#AEB5C0; --ink4:#A7AFBB;
    --muted:#9AA3AF; --muted2:#8D96A2; --muted3:#7F8894;
    --line:#242A32; --line2:#1C2128; --line-strong:#2A313A; --border-strong:#39414C;
    --accent:#3DDC97; --accent-bg:#0F2019; --accent-border:#22503D; --accent-soft:#132520;
    --accent-dim:#2FA97A; --accent-wash:#101A17;
    --warn:#E8A33D; --warn-bg:#241B0C; --warn-border:#4A3919;
    --bad:#F0705A; --bad-bg:#251210; --bad-border:#4E241D;
    --panel:#06080A; --panel-ink:#E7EBF0; --panel-muted:#8D96A2; --panel-line:#1C222A;
    --panel-accent:#3DDC97; --panel-soft:#AEB5C0;
    --on-ink:#0B0D10; --sel:#22503D;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--on-ink); padding:10px 16px; border-radius:0 0 5px 0; font-size:14px; }
.skip-link:focus { left:0; color:var(--on-ink); }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0B0D10; --surface:#13161B; --surface2:#181C22;
  --ink:#E7EBF0; --ink2:#C6CCD6; --ink3:#AEB5C0; --ink4:#A7AFBB;
  --muted:#9AA3AF; --muted2:#8D96A2; --muted3:#7F8894;
  --line:#242A32; --line2:#1C2128; --line-strong:#2A313A; --border-strong:#39414C;
  --accent:#3DDC97; --accent-bg:#0F2019; --accent-border:#22503D; --accent-soft:#132520;
  --accent-dim:#2FA97A; --accent-wash:#101A17;
  --warn:#E8A33D; --warn-bg:#241B0C; --warn-border:#4A3919;
  --bad:#F0705A; --bad-bg:#251210; --bad-border:#4E241D;
  --panel:#06080A; --panel-ink:#E7EBF0; --panel-muted:#8D96A2; --panel-line:#1C222A;
  --panel-accent:#3DDC97; --panel-soft:#AEB5C0;
  --on-ink:#0B0D10; --sel:#22503D;
}

* { box-sizing: border-box; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
body { margin:0; background:var(--bg); font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
::selection { background:var(--sel); }
button { font:inherit; }
svg { display:block; }
h1,h2,h3 { letter-spacing:-0.02em; }

.mono { font-family:'IBM Plex Mono',monospace; }
.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; }
.page { min-height:100vh; background:var(--bg); }
.wrap { padding:0 40px 80px; }

/* ---------- header ---------- */
.site-header { display:flex; align-items:center; gap:28px; padding:0 40px; height:64px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; flex:none; white-space:nowrap; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand:hover .brand-name { color:var(--ink); }
.brand-mark { flex:none; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,0.15); }
html[data-theme="dark"] .brand-mark rect { stroke:var(--line-strong); stroke-width:1; }
.brand-name { font-weight:700; font-size:17px; letter-spacing:-0.02em; }
.brand-name-accent { color:var(--accent); }
.brand-badge { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); border:1px solid var(--accent-border); background:var(--accent-bg); padding:2px 6px; border-radius:3px; }
.site-nav { display:flex; gap:22px; font-size:14px; color:var(--ink3); flex:none; white-space:nowrap; }
.site-nav a { color:var(--ink3); }
.site-nav a.active { color:var(--ink); font-weight:600; }
.searchbox { margin-left:auto; display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface2); border-radius:5px; padding:7px 11px; width:280px; flex:none; white-space:nowrap; }
.searchbox .prompt-char { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); }
.searchbox .hint { font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted2); }
.searchbox .kbd { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted3); border:1px solid var(--line); border-radius:3px; padding:1px 5px; background:transparent; cursor:pointer; }
.searchbox input { border:0; background:transparent; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12.5px; flex:1; min-width:0; }
.searchbox input::placeholder { color:var(--muted2); }
.theme-switch { display:flex; border:1px solid var(--line); border-radius:5px; overflow:hidden; flex:none; }
.theme-switch button { font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:6px 11px; border:0; cursor:pointer; background:var(--surface2); color:var(--muted2); }
.theme-switch button + button { border-left:1px solid var(--line); }
.theme-switch button.on { background:var(--ink); color:var(--on-ink); font-weight:600; }

/* semantic data tables keep the grid layout: the table/thead/tbody boxes
   dissolve, each <tr> is the grid row, th/td are plain grid cells (audit E2) */
table.data-table { width:100%; border-collapse:collapse; display:block; }
.data-table thead, .data-table tbody { display:block; }
.data-table th, .data-table td { display:block; padding:0; font-weight:inherit; text-align:inherit; border:0; }
.data-table th { font-weight:inherit; }
.data-table td.num, .data-table th.num { text-align:right; }
dl.spec-grid { margin:0; }
.spec-grid dd { margin:0; }

/* ---------- shared bits ---------- */
.card { border:1px solid var(--line); background:var(--surface); border-radius:6px; }
.kicker { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.kicker--tiny { font-size:10px; letter-spacing:0.1em; color:var(--muted2); }
.kicker--accent { letter-spacing:0.16em; color:var(--accent); }
.crumbs { display:flex; gap:8px; align-items:center; padding:14px 0; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); }
.crumbs a { color:var(--muted2); }
.crumbs .here { color:var(--ink3); }
.section-h { display:flex; align-items:baseline; gap:12px; }
.section-h h2 { margin:0; font-size:19px; font-weight:600; }
.section-h .sub { font-size:13px; color:var(--muted); }

.btn-dark { display:inline-block; background:var(--ink); color:var(--on-ink); font-size:14px; font-weight:500; padding:11px 18px; border-radius:5px; }
.btn-dark:hover { color:var(--on-ink); }
.btn-outline { display:inline-block; border:1px solid var(--border-strong); color:var(--ink); font-size:14px; font-weight:500; padding:11px 18px; border-radius:5px; }

.chip { font-family:'IBM Plex Mono',monospace; font-size:12px; background:var(--surface2); color:var(--ink3); border:1px solid var(--line); padding:6px 11px; border-radius:4px; cursor:pointer; }
.chip.on { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; }

.badge { display:inline-block; font-size:12.5px; font-weight:500; padding:4px 9px; border-radius:4px; }
.badge--ok { color:var(--accent); background:var(--accent-bg); border:1px solid var(--accent-border); }
.badge--tight { color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-border); }
.badge--no { color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad-border); }

.pill { font-size:13px; background:var(--surface2); border:1px solid var(--line); color:var(--ink3); padding:6px 11px; border-radius:4px; }
.pill--accent { display:flex; align-items:center; gap:7px; font-weight:500; background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent); }
.pill--warn { font-weight:500; background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn); }

.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.stat-grid > div { background:var(--surface2); padding:10px 12px; }
.stat-grid .v { font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; }
.stat-grid .k { font-size:11px; color:var(--muted); }

.delta-up { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); }

/* ---------- homepage ---------- */
.hero { display:grid; grid-template-columns:1fr 380px; gap:40px; padding:44px 0 36px; border-bottom:1px solid var(--line-strong); }
.hero h1 { margin:0; font-size:46px; line-height:1.04; letter-spacing:-0.035em; font-weight:600; max-width:15em; text-wrap:balance; }
.hero .lede { margin:18px 0 0; font-size:16px; line-height:1.55; color:var(--ink4); max-width:44em; text-wrap:pretty; }
.hero-card { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:18px; }
.hero-card .big { font-family:'IBM Plex Mono',monospace; font-size:32px; font-weight:600; letter-spacing:-0.02em; }
.home-cols { display:grid; grid-template-columns:1fr 320px; gap:40px; padding-top:36px; }
.home-cols h2 { margin:0; font-size:22px; font-weight:600; }

.table-card { border:1px solid var(--line); background:var(--surface); border-radius:6px; overflow:hidden; }
.trend-grid { display:grid; grid-template-columns:34px minmax(0,1fr) 92px 108px 104px; gap:14px; padding:12px 16px; align-items:center; border-bottom:1px solid var(--line2); }
.trend-grid.head { padding:9px 16px; background:var(--surface2); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.trend-grid .rank { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted3); }
.trend-grid .name a { font-weight:600; font-size:14px; color:var(--ink); }
.trend-grid .meta { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); }
.trend-grid .num { text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.trend-grid .num.up { color:var(--accent); }
.trend-grid .spark { display:flex; justify-content:flex-end; }

.pair-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pair-card { display:block; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:14px 16px; color:var(--ink); }
.pair-card:hover { border-color:var(--ink); text-decoration:none; color:var(--ink); }
.pair-card .vs { color:var(--muted3); font-weight:400; }
.pair-card .t { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.pair-card .note { font-size:12px; color:var(--muted); margin-top:6px; }

.side { display:flex; flex-direction:column; gap:24px; }
.side-card { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:16px; }
.side-links { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.hw-chips { display:flex; flex-wrap:wrap; gap:6px; }
.hw-chips a { font-family:'IBM Plex Mono',monospace; font-size:12px; border:1px solid var(--line); background:var(--surface2); padding:6px 9px; border-radius:4px; color:var(--ink3); }
.api-card { border:1px solid var(--line); background:var(--surface); border-radius:6px; overflow:hidden; }
.api-card .code { background:var(--panel); padding:14px 16px; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.85; color:var(--panel-soft); }
html[data-theme="dark"] .api-card .code, html[data-theme="dark"] .terminal { background:#11161D; }
html[data-theme="dark"] .api-card .code { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.api-card .code .verb { color:var(--panel-accent); }
.api-card .foot { padding:11px 16px; font-size:12px; color:var(--muted2); line-height:1.5; }
.ad-slot { border:1px dashed var(--border-strong); border-radius:6px; padding:16px; background:var(--surface2); }
.ad-slot .t { font-size:14px; font-weight:600; margin-bottom:4px; }
.ad-slot .d { font-size:12px; color:var(--muted); line-height:1.5; }
.side-note { font-size:12px; color:var(--muted2); line-height:1.6; border-top:1px solid var(--line-strong); padding-top:14px; }

/* ---------- model page ---------- */
.model-head { padding:26px 28px; }
.model-head h1 { margin:0; font-size:36px; letter-spacing:-0.03em; font-weight:600; }
.model-head .desc { margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--ink4); max-width:48em; text-wrap:pretty; }
.model-head .top { display:flex; gap:32px; align-items:flex-start; }
.model-head .tags { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.model-head .org { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.tag { font-family:'IBM Plex Mono',monospace; font-size:11px; padding:2px 7px; border-radius:3px; }
.tag--task { background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); }
.tag--plain { background:var(--surface2); border:1px solid var(--line); color:var(--muted); }
.model-stats { width:300px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.model-stats > div { background:var(--surface2); padding:11px 13px; }
.model-stats .k { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted2); }
.model-stats .v { font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:600; }
.model-head .pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line2); align-items:center; }
.model-head .hf-link { margin-left:auto; font-size:13px; font-weight:500; border:1px solid var(--border-strong); padding:6px 12px; border-radius:4px; color:var(--ink); }

.model-cols { display:grid; grid-template-columns:1fr 300px; gap:32px; margin-top:32px; align-items:start; }
.model-main { display:flex; flex-direction:column; gap:32px; }
.model-side { display:flex; flex-direction:column; gap:24px; position:sticky; top:24px; }
.side-list { display:flex; flex-direction:column; gap:2px; }
.side-list a { display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line2); font-size:13.5px; }
.side-list .dl { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted3); }

.card-pad { padding:22px 24px; }
.range-tabs { display:flex; gap:4px; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.range-tabs span, .range-tabs button { border:1px solid var(--line); padding:3px 8px; border-radius:3px; color:var(--muted2); background:transparent; font:inherit; cursor:pointer; }
.range-tabs .on { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.chart-y { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-bottom:4px; }
.chart-y span:last-child::before { content:'min '; }
.chart-y span:first-child::before { content:'max '; }
.chart-x { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); margin-top:8px; border-top:1px solid var(--line2); padding-top:8px; }

.quant-grid { display:grid; grid-template-columns:minmax(0,1fr) 92px 76px 110px 180px; gap:14px; padding:11px 24px; border-bottom:1px solid var(--line2); align-items:center; }
.quant-grid.head { padding:9px 24px; background:var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.quant-grid .file { font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink3); }
.quant-grid .quant { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.quant-grid .num { text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
.quant-grid .num.b { font-weight:600; }
.card-foot { padding:12px 24px; font-size:12px; color:var(--muted2); background:var(--surface2); }

.terminal { background:var(--panel); border-top:1px solid var(--line); }
.terminal .bar { display:flex; align-items:center; gap:9px; padding:9px 20px; border-bottom:1px solid var(--panel-line); font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--panel-muted); }
.terminal .dot { width:7px; height:7px; border-radius:50%; background:var(--panel-accent); display:inline-block; }
.terminal pre { margin:0; padding:18px 20px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.75; color:var(--panel-ink); white-space:pre-wrap; overflow-x:auto; }
.copy-btn { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:2px 8px; border-radius:3px; cursor:pointer; background:transparent; border:1px solid var(--panel-line); color:var(--panel-soft); }
.copy-btn.copied { background:var(--panel-accent); border-color:var(--panel-accent); color:var(--panel); }
.run-foot { display:flex; gap:18px; padding:12px 24px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted2); background:var(--surface2); }
.run-foot .r { margin-left:auto; }

.prompt-box { border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.prompt-box .q { background:var(--surface2); padding:12px 16px; border-bottom:1px solid var(--line); }
.prompt-box .q .txt { font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.55; color:var(--ink); }
.prompt-box .a { padding:16px; }
.out-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.out-head .m { font-size:13px; font-weight:600; }
.out-head .lat { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); }
.out-text { font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.65; color:var(--ink2); white-space:pre-wrap; }

.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
.spec-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line2); }
.spec-row .k { font-size:13px; color:var(--muted); }
.spec-row .v { font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:right; }

.family-list { display:flex; flex-direction:column; gap:8px; }
.family-row { display:grid; grid-template-columns:120px 1fr 100px; gap:16px; align-items:center; border:1px solid var(--line); background:var(--surface2); border-radius:5px; padding:11px 14px; color:var(--ink); }
.family-row:hover { border-color:var(--ink); text-decoration:none; color:var(--ink); }
.family-row .rel { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted2); }
.family-row .n { font-size:14px; font-weight:600; }
.family-row .dl { text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }

/* ---------- versus page ---------- */
.vs-h1 { margin:6px 0 6px; font-size:34px; letter-spacing:-0.03em; font-weight:600; }
.vs-h1 .vs { color:var(--muted3); font-weight:400; }
.vs-sub { margin:0 0 24px; font-size:15px; color:var(--ink4); }
.vs-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vs-card { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:20px 22px; }
.vs-card.a { border-top:3px solid var(--accent); }
.vs-card.b { border-top:3px solid var(--ink); }
.vs-card .who { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-bottom:4px; }
.vs-card .n { font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.vs-card .n a { color:var(--ink); }
.vs-card .nums { display:flex; gap:20px; margin-top:16px; }
.vs-card .nums .k { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted2); }
.vs-card .nums .v { font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; }
.vs-card .lic { margin-top:14px; display:inline-block; font-size:13px; font-weight:500; padding:6px 10px; border-radius:4px; }
.lic--ok { background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); }
.lic--warn { background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn); }
.lic--bad { background:var(--bad-bg); border:1px solid var(--bad-border); color:var(--bad); }

.verdict { border:1px solid var(--panel-line); background:var(--panel); color:var(--panel-ink); border-radius:6px; padding:26px 28px; margin-top:16px; }
.verdict h2 { margin:0; font-size:20px; font-weight:600; }
.verdict .meta { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--panel-muted); }
.verdict .cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:20px; }
.verdict .col-k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:12px; }
.verdict .col-k.a { color:var(--panel-accent); }
.verdict .col-k.b { color:var(--panel-soft); }
.verdict .items { display:flex; flex-direction:column; gap:11px; }
.verdict .item { display:grid; grid-template-columns:14px 1fr; gap:11px; font-size:14.5px; line-height:1.55; }
.verdict .item .arr { font-family:'IBM Plex Mono',monospace; }
.verdict .item .arr.a { color:var(--panel-accent); }
.verdict .item .arr.b { color:var(--panel-soft); }
.verdict .bottom { margin-top:22px; padding-top:18px; border-top:1px solid var(--panel-line); font-size:15.5px; line-height:1.6; max-width:60em; text-wrap:pretty; }

.cmp-grid { display:grid; grid-template-columns:220px minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--line2); align-items:stretch; }
.cmp-grid.head { background:var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.cmp-grid.head span { padding:9px 16px; border-left:1px solid var(--line); }
.cmp-grid.head span:first-child { padding:9px 24px; border-left:0; }
.cmp-grid .k { padding:11px 24px; font-size:13px; color:var(--muted); }
.cmp-grid .cell { padding:11px 16px; border-left:1px solid var(--line2); font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted2); }
.cmp-grid .cell.diff { color:var(--ink); font-weight:600; }
.cmp-grid .cell.a-wash { background:var(--accent-wash); }

.vs-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.legend { display:flex; gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2); font-family:'IBM Plex Mono',monospace; font-size:12px; }
.legend .sw { width:14px; height:2px; display:inline-block; }
.legend .item { display:flex; align-items:center; gap:7px; }
.legend .note { margin-left:auto; color:var(--accent); }

.vram-rows { display:flex; flex-direction:column; gap:12px; }
.vram-row .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.vram-row .l { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink3); }
.vram-row .v { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; }
.vram-row .track { height:8px; background:var(--line2); border-radius:2px; overflow:hidden; }
.vram-row .bar { height:100%; }
.vram-row .bar.ok { background:var(--accent); }
.vram-row .bar.tight { background:var(--warn); }
.vram-row .bar.no { background:var(--bad); }
.vram-row .badge { margin-top:7px; }

.sxs { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sxs .box { border:1px solid var(--line); border-radius:5px; padding:14px 16px; }
.sxs .box.a { border-top:2px solid var(--accent); }
.sxs .box.b { border-top:2px solid var(--ink); }
.prompt-strip { background:var(--surface2); border:1px solid var(--line); border-radius:5px; padding:12px 16px; margin-bottom:14px; }

.adj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.adj-card { display:block; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:13px 15px; color:var(--ink); }
.adj-card:hover { border-color:var(--ink); text-decoration:none; color:var(--ink); }
.adj-card .t { font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.adj-card .vs { color:var(--muted3); font-weight:400; }
.adj-card .note { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); margin-top:5px; }

/* ---------- catalog (/models) ---------- */
.filter-bar { padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.filter-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-row--last { border-top:1px solid var(--line2); padding-top:12px; }
.filter-label { flex:none; min-width:64px; }
.chip-n { color:var(--muted3); margin-left:2px; }
.chip.on .chip-n { color:var(--on-ink); opacity:0.6; }
.filter-search { margin-left:0; width:300px; }
.filter-search input { border:0; background:transparent; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12.5px; width:100%; }
.filter-search input::placeholder { color:var(--muted2); }
.sort-select { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink3); background:var(--surface2); border:1px solid var(--line); border-radius:4px; padding:6px 8px; }
.result-count { font-size:12px; color:var(--muted); }

.cat-grid { display:grid; grid-template-columns:34px minmax(0,1fr) 80px 80px 170px 90px 130px; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line2); align-items:center; }
.cat-grid.head { padding:9px 16px; background:var(--surface2); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.cat-grid .rank { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted3); }
.cat-grid .name a { font-weight:600; font-size:14px; color:var(--ink); }
.cat-grid .name .meta { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-grid .num { text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
.lic-mini { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.lic-mini.ok { color:var(--accent); }
.lic-mini.warn { color:var(--warn); }
.lic-mini.bad { color:var(--bad); }
.vram-mini { font-weight:600; }
.vram-mini.ok { color:var(--accent); }
.vram-mini.tight { color:var(--warn); }
.vram-mini.no { color:var(--bad); }
.is-loading { opacity:0.5; transition:opacity 0.15s; }
.pager { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:18px; }
.pager .chip[disabled] { opacity:0.4; cursor:default; }
.empty-state { padding:40px 24px; text-align:center; color:var(--muted); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns:24px minmax(0,1fr) 70px 90px; }
  .cat-grid .col-ctx, .cat-grid .col-lic, .cat-grid .col-vram { display:none; }
  .filter-label { min-width:0; }
}

/* ---------- footer ---------- */
.site-footer { background:var(--panel); color:var(--panel-muted); padding:36px 40px; font-size:13px; line-height:1.7; }
.site-footer .cols { display:flex; gap:60px; flex-wrap:wrap; }
.site-footer .t { color:var(--panel-ink); font-weight:600; margin-bottom:8px; }
.site-footer a { color:var(--panel-soft); }
.site-footer .links { display:flex; flex-direction:column; gap:6px; }

/* hidden tab panels (SSR'd, toggled by JS) */
[data-tab-panel][hidden] { display:none; }

/* ---------- mobile disclosure nav ---------- */
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { list-style:none; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:12px; border:1px solid var(--line); border-radius:5px; padding:7px 11px; color:var(--ink3); background:var(--surface2); user-select:none; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav[open] summary { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.mobile-nav-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:230px; display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:10px; box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.mobile-nav-panel a { padding:9px 10px; border-radius:4px; font-size:14px; color:var(--ink2); }
.mobile-nav-panel a:hover { background:var(--surface2); text-decoration:none; }
.mobile-search { width:100%; margin:0 0 8px; }

/* ---------- responsive (versus tables → stacked cards, PRD §10) ---------- */
@media (max-width: 1100px) {
  .hero, .home-cols, .model-cols { grid-template-columns:1fr; }
  .model-side { position:static; }
  .site-header { flex-wrap:wrap; height:auto; padding:10px 20px; gap:12px; }
  .searchbox { display:none; }
  .wrap { padding:0 20px 60px; }
}
@media (max-width: 800px) {
  .vs-cards, .vs-two, .sxs, .verdict .cols, .pair-cards, .spec-grid, .adj-grid { grid-template-columns:1fr; }
  .cmp-grid { grid-template-columns:96px minmax(0,1fr) minmax(0,1fr); }
  .cmp-grid .cell, .cmp-grid .k { overflow-wrap:anywhere; }
  .hero h1 { font-size:32px; }
  .quant-grid { grid-template-columns:minmax(0,1fr) 70px 90px 150px; }
  .trend-grid { grid-template-columns:24px minmax(0,1fr) 80px 80px; }
  .trend-grid .spark, .quant-grid .col-size { display:none; }
}

/* ---------- phones (audit D1–D3): no layout wider than the viewport ---------- */
@media (max-width: 640px) {
  .site-nav, .site-header .searchbox { display:none; }
  .mobile-nav { display:block; margin-left:auto; }
  .theme-switch { margin-left:0; }
  .site-header { padding:10px 16px; gap:10px; }
  .wrap { padding:0 16px 48px; }
  .site-footer { padding:28px 16px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size:26px; }
  .hero .lede, .vs-sub { font-size:14px; }
  h1 { font-size:26px !important; }
  .model-head { padding:18px 16px; }
  .model-head .top { flex-direction:column; gap:18px; }
  .model-stats { width:100%; }
  .card-pad { padding:16px; }
  .model-head .hf-link { margin-left:0; }

  .trend-grid { grid-template-columns:24px minmax(0,1fr) 72px; gap:10px; padding:10px 12px; }
  .trend-grid .col-delta { display:none; }
  .trend-grid .meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .cat-grid { grid-template-columns:24px minmax(0,1fr) 58px 66px; gap:10px; padding:10px 12px; }

  .quant-grid { grid-template-columns:minmax(0,1fr) 74px 140px; gap:10px; padding:10px 12px; }
  .quant-grid .col-quant { display:none; }
  .quant-grid .file { overflow-wrap:anywhere; }

  .cmp-grid { grid-template-columns:84px minmax(0,1fr) minmax(0,1fr); }
  .cmp-grid .k { padding:11px 12px; font-size:12px; }
  .cmp-grid .cell { padding:11px 10px; font-size:11.5px; }
  .cmp-grid.head span { padding:9px 10px; }
  .cmp-grid.head span:first-child { padding:9px 12px; }

  .spec-row { flex-wrap:wrap; }
  .spec-row .v { text-align:left; overflow-wrap:anywhere; }
  .family-row { grid-template-columns:76px minmax(0,1fr) 64px; gap:10px; padding:10px 12px; }
  .chart-x span:nth-child(2), .chart-x span:nth-child(3) { display:none; }
  .filter-search { width:100%; }
  .run-foot { flex-wrap:wrap; }
  .terminal pre { font-size:11.5px; }
  .verdict { padding:18px 16px; }
  .vs-card .nums { flex-wrap:wrap; }
}

/* final guard: a stray wide element must never widen the page itself */
html, body { max-width:100%; overflow-x:clip; }