/* Best AI Ever — technical, data-driven theme (spec §41, architecture §7.5).
   System font stacks only (no external fonts), tabular numerals for data, dense tables in scroll wrappers,
   restrained azure accent, optional dark scheme. Budget: ≤ 40 KB (tested). */

:root {
  --bai-bg: #f5f6f8;
  --bai-surface: #ffffff;
  --bai-surface-2: #eef1f5;
  --bai-ink: #0d1424;
  --bai-ink-2: #34405a;
  --bai-muted: #5f6a80;
  --bai-line: #dde2ea;
  --bai-line-strong: #c3cad6;
  --bai-accent: #2453d6;
  --bai-accent-strong: #1a3fae;
  --bai-accent-soft: #e7ecfd;
  --bai-on-accent: #ffffff;
  --bai-head-bg: #0d1424;
  --bai-head-ink: #e7ebf3;
  --bai-head-muted: #9aa5bd;
  --bai-yes: #0b7a43;
  --bai-yes-bg: #e2f5ea;
  --bai-partial: #8a5a00;
  --bai-partial-bg: #fff3d1;
  --bai-no: #8f2d2d;
  --bai-no-bg: #fbeaea;
  --bai-warn: #8a5a00;
  --bai-warn-bg: #fff6dc;
  --bai-zebra: #f8f9fb;
  --bai-radius: 6px;
  --bai-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bai-gutter: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bai-bg: #0b1120;
    --bai-surface: #111a2e;
    --bai-surface-2: #17213a;
    --bai-ink: #e6eaf2;
    --bai-ink-2: #c3cada;
    --bai-muted: #93a0b8;
    --bai-line: #243049;
    --bai-line-strong: #33415f;
    --bai-accent: #7d9cff;
    --bai-accent-strong: #a6bcff;
    --bai-accent-soft: #1b2950;
    --bai-on-accent: #0b1120;
    --bai-head-bg: #070c18;
    --bai-yes: #5fd59a;
    --bai-yes-bg: #10301f;
    --bai-partial: #f0c35a;
    --bai-partial-bg: #33280c;
    --bai-no: #f19a9a;
    --bai-no-bg: #3a1717;
    --bai-warn: #f0c35a;
    --bai-warn-bg: #2e260f;
    --bai-zebra: #0f1729;
  }
}

@media (min-width: 768px) {
  :root { --bai-gutter: 24px; }
}

/* ---- base ---------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bai-bg);
  color: var(--bai-ink);
  font: 400 15px/1.55 var(--bai-font);
  font-feature-settings: "kern";
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--bai-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bai-accent-strong); }
:focus-visible { outline: 2px solid var(--bai-accent); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--bai-ink); }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 750; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0 0 1em; }
code, kbd, samp, pre { font-family: var(--bai-mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--bai-line); margin: 2rem 0; }
.bai-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--bai-gutter); padding-right: var(--bai-gutter); }
.bai-skip { position: absolute; left: -9999px; top: 0; padding: 8px 12px; background: var(--bai-accent); color: var(--bai-on-accent); z-index: 10; }
.bai-skip:focus { left: 8px; top: 8px; }
.bai-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bai-mono, .bai-num { font-family: var(--bai-mono); font-variant-numeric: tabular-nums; }
.bai-num { white-space: nowrap; }
.bai-nowrap { white-space: nowrap; }
.bai-block { display: block; }
.bai-note { color: var(--bai-muted); font-size: .82rem; }
.bai-note--info { border-left: 3px solid var(--bai-accent); padding: 6px 10px; background: var(--bai-accent-soft); color: var(--bai-ink-2); border-radius: 0 var(--bai-radius) var(--bai-radius) 0; }
.bai-na { color: var(--bai-muted); font-family: var(--bai-mono); font-size: .8rem; }
.bai-stale { color: var(--bai-warn); }

/* ---- header and navigation ------------------------------------------------------------------------ */
.bai-header { background: var(--bai-head-bg); color: var(--bai-head-ink); border-bottom: 1px solid #1d2840; }
.bai-header__inner { display: flex; align-items: center; gap: 12px 28px; min-height: 56px; flex-wrap: wrap; }
.bai-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; font-size: 1.05rem; letter-spacing: -0.01em; padding: 10px 0; }
.bai-brand:hover { color: #fff; }
.bai-brand__mark { flex: none; }
.bai-brand__bg { fill: #1b2742; }
.bai-brand__bar { fill: #9fb3ff; }
.bai-brand__bar--accent { fill: #ffffff; }
.bai-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bai-nav::-webkit-scrollbar { display: none; }
.bai-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.bai-nav__item { position: relative; }
.bai-nav__link { display: block; padding: 17px 10px 15px; color: var(--bai-head-muted); text-decoration: none; font-size: .9rem; font-weight: 550; border-bottom: 2px solid transparent; }
.bai-nav__link:hover { color: #fff; }
.bai-nav__link--active { color: #fff; border-bottom-color: #9fb3ff; }
.bai-nav__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); box-shadow: 0 8px 24px rgba(13, 20, 36, .16); }
.bai-nav__sublink { display: block; padding: 7px 14px; color: var(--bai-ink); text-decoration: none; font-size: .9rem; }
.bai-nav__sublink:hover { background: var(--bai-surface-2); }
@media (min-width: 900px) {
  .bai-nav { overflow: visible; }
  .bai-nav__item--parent:hover .bai-nav__sub, .bai-nav__item--parent:focus-within .bai-nav__sub { display: block; }
}

/* ---- main, page heads, sections ------------------------------------------------------------------------ */
.bai-main { padding-top: 24px; padding-bottom: 56px; min-height: 60vh; }
.bai-pagehead { margin: 8px 0 24px; max-width: 860px; }
.bai-eyebrow { margin: 0 0 6px; font: 600 .74rem/1.3 var(--bai-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bai-muted); }
.bai-eyebrow a { color: inherit; }
.bai-lead { font-size: 1.08rem; color: var(--bai-ink-2); max-width: 70ch; }
.bai-section { margin: 32px 0; }
.bai-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.bai-section__title { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bai-line); }
.bai-section__head .bai-section__title { margin: 0; border-bottom: 0; padding-bottom: 0; }
.bai-section__head { border-bottom: 1px solid var(--bai-line); padding-bottom: 6px; }
.bai-section__link { font-size: .88rem; font-weight: 600; text-decoration: none; }
.bai-subhead { font-size: .95rem; margin: 18px 0 8px; color: var(--bai-ink-2); }
.bai-count { margin: 8px 0; color: var(--bai-muted); font-size: .9rem; }
.bai-empty { padding: 18px; border: 1px dashed var(--bai-line-strong); border-radius: var(--bai-radius); color: var(--bai-muted); background: var(--bai-surface); }
.bai-alert { padding: 12px 14px; border-radius: var(--bai-radius); background: var(--bai-warn-bg); color: var(--bai-warn); border: 1px solid currentColor; }
.bai-panel { padding: 18px; background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); }
.bai-caveat { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--bai-warn); background: var(--bai-warn-bg); font-size: .9rem; border-radius: 0 var(--bai-radius) var(--bai-radius) 0; }
.bai-caveat p:last-child { margin: 0; }
.bai-lastverified { margin-top: 28px; display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.bai-details { margin: 14px 0; }
.bai-details > summary { cursor: pointer; font-weight: 600; color: var(--bai-ink-2); padding: 6px 0; }
.bai-figure { margin: 18px 0; }
.bai-directive-notice { padding: 8px 12px; border: 1px dashed var(--bai-warn); color: var(--bai-warn); font-size: .85rem; border-radius: var(--bai-radius); }

/* ---- badges, chips, pills --------------------------------------------------------------------------- */
.bai-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bai-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--bai-line-strong); background: var(--bai-surface); color: var(--bai-ink-2); font: 600 .72rem/1.5 var(--bai-mono); letter-spacing: .02em; text-decoration: none; white-space: nowrap; vertical-align: middle; }
a.bai-badge:hover { border-color: var(--bai-accent); color: var(--bai-accent); }
.bai-badge--verified { border-color: color-mix(in srgb, var(--bai-yes) 45%, transparent); color: var(--bai-yes); background: var(--bai-yes-bg); }
.bai-badge--stale { border-color: color-mix(in srgb, var(--bai-warn) 50%, transparent); color: var(--bai-warn); background: var(--bai-warn-bg); }
.bai-badge--demo { border-style: dashed; color: var(--bai-muted); }
.bai-badge--tiered, .bai-badge--sources { border-color: color-mix(in srgb, var(--bai-accent) 45%, transparent); color: var(--bai-accent); background: var(--bai-accent-soft); }
.bai-badge--self { color: var(--bai-partial); background: var(--bai-partial-bg); border-color: color-mix(in srgb, var(--bai-partial) 40%, transparent); }
.bai-badge--flag { color: var(--bai-ink-2); background: var(--bai-surface-2); border-color: var(--bai-line); white-space: normal; margin-top: 4px; }
.bai-badge--label { color: var(--bai-on-accent); background: var(--bai-accent); border-color: var(--bai-accent); margin-left: 4px; }
.bai-badge--status { text-transform: capitalize; }
.bai-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.bai-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; font-size: .76rem; line-height: 1.6; white-space: nowrap; }
.bai-chip__name { color: var(--bai-ink-2); }
.bai-chip__value { font-weight: 650; }
.bai-chip--yes { background: var(--bai-yes-bg); color: var(--bai-yes); }
.bai-chip--yes::before { content: "✓"; font-weight: 700; }
.bai-chip--partial { background: var(--bai-partial-bg); color: var(--bai-partial); }
.bai-chip--partial::before { content: "◐"; }
.bai-chip--no { background: var(--bai-no-bg); color: var(--bai-no); }
.bai-chip--no::before { content: "✕"; }
.bai-chip--unknown { border: 1px dashed var(--bai-line-strong); color: var(--bai-muted); background: transparent; }
.bai-chip--unknown::before { content: "?"; font-family: var(--bai-mono); }
.bai-chip--text, .bai-chip--level { background: var(--bai-surface-2); color: var(--bai-ink-2); }
.bai-rankpill { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 4px; background: var(--bai-ink); color: var(--bai-bg); font: 700 .8rem/1.5 var(--bai-mono); text-align: center; text-decoration: none; }
a.bai-rankpill:hover { background: var(--bai-accent); color: var(--bai-on-accent); }
.bai-delta { font-size: .75rem; }
.bai-delta--down { color: var(--bai-yes); }
.bai-delta--up { color: var(--bai-no); }

/* ---- data tables -------------------------------------------------------------------------------------- */
.bai-table-scroll { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; border: 1px solid var(--bai-line); border-radius: var(--bai-radius); background: var(--bai-surface); }
.bai-table-scroll:focus-visible { outline-offset: 0; }
.bai-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bai-table th, .bai-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bai-line); }
.bai-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bai-surface-2); color: var(--bai-ink-2); font: 650 .72rem/1.3 var(--bai-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.bai-table tbody tr:nth-child(even) > * { background: var(--bai-zebra); }
.bai-table tbody tr:hover > * { background: var(--bai-accent-soft); }
.bai-table tbody tr:last-child > * { border-bottom: 0; }
.bai-table tbody th { font-weight: 600; }
.bai-table th.bai-num, .bai-table td.bai-num { text-align: right; }
.bai-table--dense th, .bai-table--dense td { padding: 5px 8px; font-size: .82rem; }
.bai-sticky { position: sticky; left: 0; z-index: 1; background: var(--bai-surface); min-width: 9.5rem; }
thead .bai-sticky { z-index: 3; }
.bai-table tbody tr > .bai-sticky { box-shadow: inset -1px 0 0 var(--bai-line); }
.bai-caption { caption-side: top; text-align: left; padding: 8px 10px; font: 700 .8rem/1.3 var(--bai-mono); letter-spacing: .06em; color: var(--bai-ink); background: var(--bai-surface); border-bottom: 1px solid var(--bai-line); }
.bai-current > * { font-weight: 650; }
.bai-price { white-space: nowrap; }
.bai-price .bai-num { font-weight: 650; color: var(--bai-ink); }
.bai-unit { color: var(--bai-muted); font-size: .78em; font-family: var(--bai-font); }
.bai-meter { display: block; width: 64px; height: 4px; margin: 4px 0 0 auto; background: var(--bai-surface-2); border-radius: 2px; overflow: hidden; }
.bai-meter__bar { display: block; height: 100%; background: var(--bai-accent); width: 0; }
.bai-meter__bar--10 { width: 10%; } .bai-meter__bar--20 { width: 20%; } .bai-meter__bar--30 { width: 30%; }
.bai-meter__bar--40 { width: 40%; } .bai-meter__bar--50 { width: 50%; } .bai-meter__bar--60 { width: 60%; }
.bai-meter__bar--70 { width: 70%; } .bai-meter__bar--80 { width: 80%; } .bai-meter__bar--90 { width: 90%; }
.bai-meter__bar--100 { width: 100%; }
.bai-ranking td.bai-num { min-width: 7rem; }
.bai-setting { white-space: normal; min-width: 11rem; max-width: 16rem; margin-left: auto; line-height: 1.35; overflow-wrap: anywhere; }
.bai-compare th, .bai-compare td { min-width: 10.5rem; }
.bai-compare thead th { text-transform: none; font: 650 .9rem/1.3 var(--bai-font); letter-spacing: 0; }
.bai-compare thead th a { color: var(--bai-ink); }
.bai-compare__group th { background: var(--bai-ink) !important; color: var(--bai-bg); font: 650 .72rem/1.3 var(--bai-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; }
.bai-celllist { margin: 0; padding-left: 1.1em; font-size: .82rem; }
.bai-cellprose { font-size: .85rem; }
.bai-cellprose p { margin: 0 0 .4em; }
.bai-breakdown { margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--bai-ink-2); }
.bai-breakdown li { display: flex; justify-content: space-between; gap: 10px; }

/* ---- specs, capability grid ----------------------------------------------------------------------------- */
.bai-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1px; margin: 0; background: var(--bai-line); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); overflow: hidden; }
.bai-specs__item { background: var(--bai-surface); padding: 10px 12px; min-width: 0; }
.bai-specs dt { font: 600 .7rem/1.3 var(--bai-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bai-muted); margin-bottom: 3px; }
.bai-specs dd { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.bai-specs--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }
.bai-specs--compact .bai-specs__item { padding: 7px 9px; }
.bai-capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.bai-capgrid__group { background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); padding: 12px 14px; }
.bai-capgrid__title { font: 650 .72rem/1.3 var(--bai-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bai-muted); margin: 0 0 8px; }
.bai-capgrid__list { list-style: none; margin: 0; padding: 0; }
.bai-capgrid__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 5px 0; border-bottom: 1px dashed var(--bai-line); font-size: .9rem; }
.bai-capgrid__list li:last-child { border-bottom: 0; }
.bai-capgrid__list .bai-note { flex-basis: 100%; }

/* ---- forms and tools ------------------------------------------------------------------------------------ */
.bai-filters, .bai-tool { display: block; margin: 0 0 18px; padding: 14px; background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); }
.bai-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.bai-chips--plan { display: flex; padding: 0; list-style: none; }
.bai-chips--plan .bai-chip { white-space: normal; max-width: 100%; }
.bai-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.bai-tab { padding: 5px 14px; border: 1px solid var(--bai-line-strong); border-radius: 999px; color: var(--bai-ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.bai-tab:hover { border-color: var(--bai-accent); color: var(--bai-ink); }
.bai-tab.is-active { background: var(--bai-accent); border-color: var(--bai-accent); color: var(--bai-on-accent, #fff); }
/* subscription quick ranking (PlanPicker): one panel per price × use; :target without JS, .is-shown with plans-picker.js */
.bai-picker__panel { display: none; }
.bai-picker:not(.is-ready) .bai-picker__panel:target,
.bai-picker:not(.is-ready):not(:has(.bai-picker__panel:target)) .bai-picker__panel.is-default,
.bai-picker.is-ready .bai-picker__panel.is-shown { display: block; }
.bai-picker__controls { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0; }
.bai-picker__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.bai-picker__label { min-width: 3.2em; font: 650 .72rem/1.3 var(--bai-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bai-muted); }
.bai-picker__more { margin-top: 8px; }
.bai-filters .bai-field { flex: 1 1 150px; min-width: 0; }
.bai-filters__actions, .bai-tool__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bai-tool__actions { margin-top: 12px; }
.bai-tool__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; align-items: end; }
.bai-tool__grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.bai-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bai-field label { font-size: .8rem; font-weight: 600; color: var(--bai-ink-2); }
.bai-field input[type="text"], .bai-field input[type="number"], .bai-field select, .bai-inlineform select {
  width: 100%; min-width: 0; padding: 8px 10px; font: inherit; font-size: .92rem; color: var(--bai-ink); background: var(--bai-bg); border: 1px solid var(--bai-line-strong); border-radius: 5px;
}
.bai-field input[inputmode="numeric"], .bai-field input[type="number"] { font-family: var(--bai-mono); font-variant-numeric: tabular-nums; }
.bai-field input:focus, .bai-field select:focus { border-color: var(--bai-accent); outline: none; box-shadow: 0 0 0 3px var(--bai-accent-soft); }
.bai-field--invalid input, .bai-field--invalid select { border-color: var(--bai-no); }
.bai-field--check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; }
.bai-field--check input { width: 18px; height: 18px; accent-color: var(--bai-accent); }
.bai-field--check label { font-size: .9rem; }
.bai-help { margin: 0; font-size: .78rem; color: var(--bai-muted); }
.bai-error { margin: 0; font-size: .8rem; color: var(--bai-no); font-weight: 600; }
.bai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font: 600 .9rem/1.2 var(--bai-font); color: var(--bai-ink); background: var(--bai-surface); border: 1px solid var(--bai-line-strong); border-radius: 5px; cursor: pointer; text-decoration: none; }
.bai-btn:hover { border-color: var(--bai-accent); color: var(--bai-accent); }
.bai-btn--primary { background: var(--bai-accent); border-color: var(--bai-accent); color: var(--bai-on-accent); }
.bai-btn--primary:hover { background: var(--bai-accent-strong); border-color: var(--bai-accent-strong); color: var(--bai-on-accent); }
.bai-btn--ghost { background: transparent; border-color: transparent; color: var(--bai-muted); }
.bai-inlineform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bai-inlineform label { font-size: .85rem; font-weight: 600; }
.bai-inlineform select { width: auto; max-width: 100%; flex: 1 1 220px; }
.bai-results[aria-busy="true"] { opacity: .55; }
.bai-excluded { margin: 8px 0 0; padding-left: 1.2em; font-size: .88rem; color: var(--bai-ink-2); }

/* ---- cards and lists ------------------------------------------------------------------------------------- */
.bai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.bai-card { display: block; background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); padding: 14px 16px; min-width: 0; }
.bai-card__title { font-weight: 700; font-size: 1rem; margin: 0 0 6px; }
.bai-card__title a { color: var(--bai-ink); text-decoration: none; }
.bai-card__title a:hover { color: var(--bai-accent); text-decoration: underline; }
.bai-card__text { color: var(--bai-ink-2); font-size: .9rem; margin: 0 0 8px; }
.bai-card__foot { margin: 8px 0 0; }
.bai-modelcard, .bai-rankingcard, .bai-calccard { margin: 18px 0; max-width: 560px; border-top: 3px solid var(--bai-accent); }
.bai-toplist { list-style: none; margin: 6px 0 0; padding: 0; font-size: .9rem; }
.bai-toplist li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.bai-linklist { margin: 0; padding-left: 1.1em; }
.bai-linklist li { margin: 4px 0; }
.bai-linklist--cols { columns: 2 260px; column-gap: 32px; }
.bai-ranklist { list-style: none; margin: 0; padding: 0; }
.bai-ranklist li { padding: 6px 0; border-bottom: 1px dashed var(--bai-line); }
.bai-sources { margin: 0; padding-left: 1.6em; font-size: .88rem; }
.bai-sources li { margin: 5px 0; }
.bai-sources li .bai-note { margin-left: 6px; }
.bai-sources--plain { list-style: disc; margin-top: 8px; }
.bai-method { font-size: .9rem; color: var(--bai-ink-2); padding-left: 1.2em; }
.bai-proscons__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.bai-proscons__col { background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); padding: 12px 14px; border-top-width: 3px; }
.bai-proscons__col--pro { border-top-color: var(--bai-yes); }
.bai-proscons__col--con { border-top-color: var(--bai-no); }
.bai-proscons__col h3, .bai-proscons__col h4 { font-size: .8rem; font-family: var(--bai-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bai-muted); }
.bai-verdict { padding: 14px 0; border-bottom: 1px solid var(--bai-line); }
.bai-verdict__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- home ------------------------------------------------------------------------------------------- */
.bai-home__title { margin: 12px 0 24px; }
.bai-hero { padding: 28px 0 8px; max-width: 900px; }
.bai-hero__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: .3em; }
.bai-hero__sub { font-size: 1.12rem; color: var(--bai-ink-2); max-width: 62ch; }
.bai-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.bai-stats { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--bai-line); border-radius: var(--bai-radius); background: var(--bai-surface); width: fit-content; max-width: 100%; }
.bai-stats__item { padding: 10px 16px; border-right: 1px solid var(--bai-line); }
.bai-stats__item:last-child { border-right: 0; }
.bai-stats__value { display: block; font: 700 1.35rem/1.1 var(--bai-mono); font-variant-numeric: tabular-nums; color: var(--bai-ink); }
.bai-stats__label { font-size: .75rem; color: var(--bai-muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--bai-mono); }

/* ---- articles and prose ------------------------------------------------------------------------------- */
.bai-article { max-width: 1000px; }
.bai-prose { max-width: 72ch; font-size: 1rem; line-height: 1.7; }
.bai-prose h2 { margin-top: 1.8em; }
.bai-prose h3 { margin-top: 1.4em; }
.bai-prose ul, .bai-prose ol { padding-left: 1.4em; }
.bai-prose li { margin: .25em 0; }
.bai-prose blockquote { margin: 1.2em 0; padding: .2em 1em; border-left: 3px solid var(--bai-line-strong); color: var(--bai-ink-2); }
.bai-prose pre { overflow-x: auto; padding: 12px 14px; background: var(--bai-surface-2); border-radius: var(--bai-radius); font-size: .85rem; line-height: 1.5; }
.bai-prose :not(pre) > code { padding: 1px 4px; background: var(--bai-surface-2); border-radius: 3px; }
.bai-prose img { border-radius: var(--bai-radius); }
.bai-prose figure { margin: 1.4em 0; }
.bai-prose figcaption { font-size: .82rem; color: var(--bai-muted); margin-top: 6px; }
.bai-prose table { border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bai-prose th, .bai-prose td { padding: 6px 10px; border: 1px solid var(--bai-line); text-align: left; }
.bai-prose thead th { background: var(--bai-surface-2); }
.be-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1em 0; }
.bai-prose sup a { text-decoration: none; font-family: var(--bai-mono); font-size: .75em; }
.bai-toc { margin: 0 0 24px; padding: 12px 16px; background: var(--bai-surface); border: 1px solid var(--bai-line); border-radius: var(--bai-radius); max-width: 72ch; }
.bai-toc__title { font: 650 .72rem/1.3 var(--bai-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bai-muted); margin: 0 0 6px; }
.bai-toc ol { margin: 0; padding-left: 1.3em; font-size: .92rem; }
.bai-partof { margin: 28px 0; padding: 14px 16px; background: var(--bai-surface); border: 1px solid var(--bai-line); border-left: 3px solid var(--bai-accent); border-radius: var(--bai-radius); max-width: 72ch; }
.bai-partof__title { font-weight: 650; margin: 0 0 6px; }

/* ---- error, pagination, breadcrumbs, legal ---------------------------------------------------------- */
.bai-errorpage, .be-error { padding: 32px 0; max-width: 640px; }
.be-error__ref code { font-family: var(--bai-mono); }
.be-error__debug { overflow-x: auto; padding: 12px; background: var(--bai-surface-2); border-radius: var(--bai-radius); font-size: .8rem; }
.be-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; font-family: var(--bai-mono); font-size: .88rem; }
.be-pagination__pages { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.be-pagination a, .be-pagination__current { display: inline-block; padding: 4px 10px; border: 1px solid var(--bai-line); border-radius: 4px; text-decoration: none; background: var(--bai-surface); }
.be-pagination__current { background: var(--bai-ink); color: var(--bai-bg); border-color: var(--bai-ink); }
nav[aria-label="Breadcrumb"], .be-breadcrumbs { margin: 0 0 10px; font-size: .82rem; color: var(--bai-muted); }
nav[aria-label="Breadcrumb"] ol, .be-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
nav[aria-label="Breadcrumb"] a, .be-breadcrumbs a { color: var(--bai-muted); }

/* ---- footer ------------------------------------------------------------------------------------------- */
.bai-footer { background: var(--bai-surface); border-top: 1px solid var(--bai-line); padding: 28px 0 22px; font-size: .9rem; }
.bai-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 40px; margin-bottom: 18px; }
.bai-footer__brand { font-weight: 750; margin: 0 0 6px; }
.bai-footer__links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.bai-footer__links a { color: var(--bai-ink-2); text-decoration: none; }
.bai-footer__links a:hover { color: var(--bai-accent); text-decoration: underline; }
.be-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 14px; border-top: 1px solid var(--bai-line); font-size: .82rem; }
.be-legal__link { color: var(--bai-muted); }

/* ---- print ---------------------------------------------------------------------------------------------- */
@media print {
  .bai-header, .bai-footer, .bai-filters, .bai-tool, .be-slot { display: none !important; }
  .bai-table-scroll { overflow: visible; border: 0; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}