/* ============================================================
bemermatreview.com - editorial system (site.css v2)
============================================================
Composable page system for every page that is not the pixel-
locked homepage/marketplace: guides, reviews, comparisons, price
list, price guide, FAQ pages. Built from design/handoff/
page-patterns.md + components.md. Requires, in this order:
/css/tokens.css -> /css/chrome.css -> /css/site.css
Columns: --ed-column 800px (article), --ed-wide 1000px (tables,
grids), --wide-column 1208px (the page frame: 1280 outer minus the 36px gutter,
shared with the header and footer so everything lines up on one left edge).
Rules baked in: body links #0B72AD, underlined only inside running
text (WCAG 1.4.1: blue vs body ink is 1.8:1), buttons and
cards never underline, one dark moment per page (hero OR CTA band),
green = live data / good status only, orange = accent only.
============================================================ */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--surface-page);
color: var(--ink-2);
font-family: var(--font-ui);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-blue); text-decoration: none; }
a:hover { color: var(--color-blue-dark); }
/* Links inside running text carry a non-color cue (thin underline); nav, buttons, cards and any
classed link keep the no-underline rule. */
:where(p, li, td, th, dd, figcaption, summary) a:not([class]), .crumbs a {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
text-decoration-color: rgba(11,114,173,.45);
}
:where(p, li, td, th, dd, figcaption, summary) a:not([class]):hover, .crumbs a:hover { text-decoration-color: currentColor; }
/* Price-list stat tiles: a model name that opens its used-price page gets the same cue */
.stat-tile__label a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(11,114,173,.45); }
.stat-tile__label a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: 4px; }
/* Dark grounds: the blue ring is under 3:1 on navy, so switch it to white there (WCAG 1.4.11). */
.cta-band :focus-visible, .hero :focus-visible, .page-footer :focus-visible { outline-color: #fff; }
b, strong { font-weight: 700; color: var(--ink-1); }
h1, h2, h3, h4 {
font-family: var(--font-display); font-weight: 700; color: var(--ink-1);
line-height: 1.2; margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: var(--tracking-display); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: 17px; line-height: 1.35; }
p { margin: 0 0 18px; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
/* ---------- Columns ---------- */
/* Wrappers are sized so the CONTENT box equals the column (border-box + side padding would otherwise
eat 72px: the handoff measures 1100 / 800 of text, not of padding box). */
.container { max-width: calc(var(--wide-column) + 2 * var(--col-pad)); margin: 0 auto; padding: 0 var(--col-pad); }
.article { max-width: calc(var(--ed-column) + 2 * var(--col-pad)); margin: 0 auto; padding: 0 var(--col-pad); }
.wide-block { max-width: calc(var(--ed-wide) + 2 * var(--col-pad)); margin: 32px auto; padding: 0 var(--col-pad); }
/* Inside .article, wide blocks escape the reading column but stay centered */
.article .wide-block { max-width: none; margin-left: calc(-1 * (var(--ed-wide) - var(--ed-column)) / 2); margin-right: calc(-1 * (var(--ed-wide) - var(--ed-column)) / 2); padding: 0; }
/* Beside a TOC there is nothing to the left to escape into: the symmetric negative margin
above would slide a table under the sidebar. In that layout a wide block starts at the
reading column's own left edge and grows right into the slack instead, stopping at the
page frame. 240px TOC + 40px gap = 280px. */
.article-layout .article .wide-block {
margin-left: 0; margin-right: 0; padding: 0; width: 100%; max-width: none;
}
/* The 128px of slack to the right of the reading column only exists once the full 1280px
frame fits. Below that the grid has already squeezed the article column, so a wide block
stays exactly as wide as its column and its table scrolls inside .table-wrap instead. */
@media (min-width: 1280px) {
.article-layout .article .wide-block { width: calc(var(--wide-column) - 280px); }
}
/* ---------- Section rhythm ---------- */
.section { margin-top: var(--section-gap); }
.section:first-child, main > .section:first-of-type { margin-top: 48px; }
.section--flush { margin-top: 0; }
.section-pad { padding: var(--section-gap) 0; }
/* White band with hairlines, or the light-blue band (both light: not a dark moment).
Scoped to block elements so the same class name on an SVG polygon or the
.chart-legend swatch () is never padded like a section. */
:where(section, div, article).band { padding: 88px 0 92px; background: var(--surface-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.band--blue { background: var(--surface-blue); border-top: 0; border-bottom: 1px solid var(--color-border-blue); padding: 84px 0 88px; }
/* ---------- Eyebrow + section head ---------- */
.eyebrow {
display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px;
font: 800 var(--fs-eyebrow)/1 var(--font-display); letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase; color: var(--color-orange-text);
}
.eyebrow--rule::before { content: ""; width: 34px; height: 2px; background: var(--color-rule-eyebrow); }
.eyebrow--center { display: flex; justify-content: center; gap: 14px; }
.eyebrow--center::before, .eyebrow--center::after { content: ""; width: 44px; height: 2px; background: var(--color-rule-eyebrow); }
.eyebrow--lg { font-size: 13.5px; letter-spacing: .22em; }
.section-head { margin-bottom: 24px; }
.section-head--center { text-align: center; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.section-head--split > div { max-width: 640px; }
.section-head h2 { margin: 0 0 12px; }
.section-head .lede, .section-lede { margin: 0; font: 400 16px/1.6 var(--font-ui); color: var(--ink-3); text-wrap: pretty; }
.section-head--center .section-lede { max-width: 680px; margin: 0 auto; font-size: 17.5px; line-height: 1.65; }
/* ---------- Title block (guide / article, light, no dark hero) ---------- */
.title-block { max-width: calc(var(--ed-column) + 2 * var(--col-pad)); margin: 0 auto; padding: 40px var(--col-pad) 0; }
/* Article pages (owner decision, Sept 2026): the title block spans the page frame so the H1
starts on the same left edge as the logo, the nav and the hub you clicked in from, while the
running text underneath stays at the 800px reading column. Everything inside the block is
still capped at the reading column, so the H1 and lede keep their measure; only the box
they sit in gets wider. */
main.article-page .title-block {
max-width: calc(var(--wide-column) + 2 * var(--col-pad));
padding-bottom: 8px;
}
main.article-page .title-block > * { max-width: var(--ed-column); }
.title-block h1 { margin: 0 0 16px; }
.title-block .lede, .lede { font: 400 var(--fs-lede)/1.7 var(--font-ui); color: var(--ink-2); margin: 0 0 14px; text-wrap: pretty; }
/* Answer-first lede (site convention, DECISIONS 94): the opening answer runs 18px/1.6 in the heading ink */
.title-block .lede.answer-first, .lede.answer-first { font-size: 18px; line-height: 1.6; color: var(--ink-1); }
.meta-row {
display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px;
font: 500 var(--fs-micro)/1.4 var(--font-ui); letter-spacing: var(--tracking-micro);
text-transform: uppercase; color: var(--ink-3);
}
.meta-row b { font-weight: 700; color: var(--ink-2); }
.crumbs { margin: 0 0 14px; font: 400 13.5px/1.4 var(--font-ui); color: var(--ink-4-alt); }
.crumbs a { color: var(--color-blue); }
.crumbs a:hover { color: var(--color-blue-dark); }
/* ---------- Article body type ---------- */
.article h2 { font-size: var(--fs-h2-article); line-height: 1.25; letter-spacing: -0.015em; margin: 48px 0 14px; }
.article h3 { font-size: var(--fs-h3); margin: 32px 0 10px; }
.article p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 18px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 26px; }
.article li { margin-bottom: 8px; }
.article figure { margin: 24px 0; }
.article figcaption { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.article > .section { margin-top: 56px; }
.answer-first { font-size: 18px; line-height: 1.6; color: var(--ink-1); margin: 0 0 18px; }
.article .answer-first { font-size: 18px; color: var(--ink-1); }
/* Sticky TOC layout (optional) */
.article-layout {
/* 240px TOC + 40px gap + the full 800px reading column (owner: --ed-column stays 800 beside a
TOC). The grid sits inside the page frame and packs to the START of it, so the TOC's left
edge lands on the same 116px as the logo and the title block above it rather than floating
to the middle. The slack ends up as air on the right, which is what a sidebar layout wants. */
max-width: calc(var(--wide-column) + 2 * var(--col-pad)); margin: 0 auto; padding: 0 var(--col-pad);
display: grid; grid-template-columns: 240px minmax(0, var(--ed-column)); gap: 40px;
align-items: start; justify-content: start;
}
.article-layout .article { padding-left: 0; padding-right: 0; margin: 0; }
.toc {
/* clears the sticky site header (--header-offset drops to 0 while it is hidden) */
position: sticky; top: calc(var(--header-offset, 0px) + 16px); background: var(--surface-card); border: 1px solid var(--color-border);
border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 16px; font-size: 14.5px;
}
.toc h2 { font: 500 var(--fs-micro)/1.4 var(--font-ui); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 2px; }
.toc a { display: block; color: var(--ink-3); padding: 6px 8px; border-radius: var(--r-input); line-height: 1.4; }
.toc a:hover { color: var(--ink-1); background: var(--surface-pill); }
/* ---------- Buttons (never underlined) ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; padding: 0 22px; border-radius: var(--r-btn);
font: 700 14.5px/1 var(--font-ui); text-decoration: none; white-space: nowrap;
border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
transition: transform var(--ease-fast), box-shadow var(--ease-fast), filter var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--primary { background: var(--grad-button); color: #fff; box-shadow: var(--shadow-button); }
.btn--primary:hover, .btn--primary:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-button-hover); filter: brightness(1.05); }
.btn--secondary { background: var(--surface-card); color: var(--color-blue); border: 1.5px solid var(--color-blue); }
.btn--secondary:hover, .btn--secondary:focus-visible { color: var(--color-blue); background: var(--surface-blue); transform: translateY(-2px); box-shadow: var(--shadow-outline-hover); }
/* Outline button for dark surfaces (hero, CTA band) */
.btn--ghost { background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-size: 15px; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; transform: translateY(-2px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.btn-note, .article .btn-note { font: 400 14px/1.5 var(--font-ui); color: var(--ink-3); margin: 6px 0 0; }
/* ---------- Cards ---------- */
.card {
background: var(--surface-card); border: 1px solid var(--color-border);
border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: var(--card-pad);
}
.card--tint { background: var(--surface-tint); }
.card--flat { box-shadow: none; }
.card--sm { border-radius: var(--r-card); padding: 18px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 24px 0; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Link card: whole card is the . Top accent + tinted icon square + arrow line.
svg
......
Read the guide → */
.link-card {
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
padding: 22px 20px; background: var(--surface-card); border: 1px solid var(--color-border);
border-top: 3px solid var(--color-steel); border-radius: var(--r-card);
box-shadow: var(--shadow-card-soft); color: var(--color-steel); text-decoration: none;
transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast);
}
.link-card--plain { border-top-width: 1px; border-top-color: var(--color-border); border-radius: var(--r-card-lg); padding: 22px; }
.link-card:hover, .link-card:focus-visible {
transform: translateY(-3px); box-shadow: var(--shadow-card-hover);
border-top-color: var(--color-orange); color: var(--color-orange); text-decoration: none;
}
.link-card--plain:hover, .link-card--plain:focus-visible { border-color: var(--color-orange); }
.link-card__icon {
width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
background: var(--grad-icon); box-shadow: var(--shadow-icon-inset); border-radius: var(--r-card);
color: var(--color-steel);
}
.link-card__icon svg { width: 20px; height: 20px; }
.link-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.link-card__kicker {
display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-ui);
letter-spacing: .12em; text-transform: uppercase; color: var(--color-steel);
}
.link-card__kicker::before { content: ""; width: 5px; height: 5px; background: var(--color-orange); border-radius: var(--r-pill); }
.link-card__title { font: 700 var(--fs-card-title)/1.35 var(--font-display); color: var(--ink-1); }
.link-card__text { font: 400 14.5px/1.55 var(--font-ui); color: var(--ink-3); flex: 1 1 auto; }
.link-card__arrow { font: 700 14px/1 var(--font-ui); color: var(--color-blue); }
.link-card__ghost { position: absolute; top: 14px; right: 14px; font: 800 84px/1 var(--font-display); color: var(--color-steel); opacity: .05; pointer-events: none; }
/* Comparison card (light-blue gradient, orange price, outline CTA) */
.compare-card {
display: flex; flex-direction: column; overflow: hidden;
background: var(--grad-compare); border: 1px solid #b9cddb; border-radius: var(--r-card-lg);
box-shadow: 0 6px 18px rgba(31,51,70,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(31,51,70,.10);
transition: transform var(--ease-card), box-shadow var(--ease-card), border-color var(--ease-card);
}
.compare-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover-lg); border-color: var(--color-orange); }
.compare-card__head { padding: 14px 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.compare-card__kicker { font: 700 12.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-steel); }
.compare-card__price { font: 700 12.5px/1 var(--font-ui); letter-spacing: .06em; color: var(--color-orange-text); text-transform: uppercase; }
.compare-card__media {
height: 150px; display: flex; align-items: center; justify-content: center; margin: 12px 16px;
background: var(--grad-media); box-shadow: inset 0 0 0 1px rgba(51,101,138,.14), 0 6px 14px rgba(31,51,70,.12); border-radius: var(--r-input);
}
.compare-card__media img { max-width: 86%; max-height: 128px; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(31,51,70,.16)); }
.compare-card__body { padding: 2px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.compare-card__title { margin: 0; font: 700 18.5px/1.3 var(--font-display); color: var(--ink-1); }
.compare-card__specs { display: flex; flex-direction: column; font: 400 14.5px/1.5 var(--font-ui); }
.compare-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(51,101,138,.18); }
.compare-card__row:last-child { border-bottom: 0; }
.compare-card__row span { color: var(--ink-mid); }
.compare-card__row b { font-weight: 700; color: var(--ink-1); }
.compare-card__text { margin: 0; font: 400 14px/1.55 var(--font-ui); color: var(--ink-2); flex: 1 1 auto; }
.compare-card__link { font: 400 14.5px/1.4 var(--font-ui); color: var(--color-blue); text-align: center; margin-top: 5px; }
.compare-card--pick { position: relative; background: var(--grad-compare-pick); border: 2px solid var(--color-orange); box-shadow: 0 12px 30px rgba(31,51,70,.18); }
.compare-card--pick:hover { box-shadow: 0 20px 44px rgba(31,51,70,.24); }
.compare-card__ribbon {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 18px; background: var(--grad-ribbon);
font: 700 12.5px/1 var(--font-ui); letter-spacing: .06em; color: rgba(255,255,255,.92); text-transform: uppercase;
}
.compare-card__ribbon b { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--font-ui); letter-spacing: .08em; color: #fff; }
.compare-card__ribbon b::before { content: "\2605"; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-navy); border-radius: var(--r-pill); font-size: 11.5px; }
/* ---------- Dark hero band (landing-ish pages; counts as THE dark moment) ---------- */
.hero {
position: relative; overflow: hidden; background: var(--grad-hero);
border-bottom: 3px solid var(--color-steel); box-shadow: var(--shadow-hero-edge);
color: var(--on-dark-body);
}
.hero__mark { position: absolute; right: -60px; top: -70px; width: 440px; height: 440px; opacity: .05; transform: rotate(-10deg); pointer-events: none; }
.hero__inner { position: relative; max-width: calc(var(--wide-column) + 2 * var(--col-pad)); margin: 0 auto; padding: 54px var(--col-pad) 64px; display: flex; align-items: center; gap: 48px; }
.hero__copy { flex: 1 1 auto; max-width: 560px; }
.hero__aside { flex: 0 0 auto; position: relative; }
.hero .eyebrow { margin-bottom: 16px; font-size: 13px; color: var(--color-orange-text-dark); }
.hero h1 { margin: 0 0 18px; font-size: var(--fs-hero-h1); line-height: 1.1; color: #fff; text-wrap: balance; }
.hero__lede { margin: 0 0 26px; font: 400 18px/1.7 var(--font-ui); color: var(--on-dark-body); text-wrap: pretty; }
.hero__checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 14px/1.5 var(--font-ui); color: var(--on-dark-muted); }
.hero__checks span::before { content: "\2713\00a0"; }
.hero .btn-row { margin: 0 0 18px; }
.hero--strip-under .hero__inner { padding-bottom: 100px; }
/* Floating stat chips on the hero */
.hero-chip { padding: 8px 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-pill); color: #fff; font: 500 13.5px/1 var(--font-ui); backdrop-filter: blur(2px); }
/* A white card floated on the hero (mini listing / sparkline card) */
.hero-card { background: var(--surface-card); border-radius: var(--r-card-lg); box-shadow: var(--shadow-float-lg); overflow: hidden; }
/* ---------- Numbered 1-2-3 strip ---------- */
.steps {
display: flex; background: var(--surface-card); border: 1px solid var(--color-border);
border-radius: var(--r-card); box-shadow: var(--shadow-strip); overflow: hidden;
}
.steps--flat { box-shadow: var(--shadow-card-soft); }
.steps--overlap { position: relative; z-index: 2; margin-top: -26px; }
.step { flex: 1 1 0; display: flex; align-items: center; gap: 13px; padding: 18px 22px; }
.step + .step { border-left: 1px solid var(--color-border); }
.step__num {
flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
background: var(--surface-blue); color: var(--color-steel); border-radius: var(--r-pill);
font: 700 16px/1 var(--font-display);
}
.step__text { font: 400 16px/1.55 var(--font-ui); color: var(--ink-2); }
.step__text b { color: var(--ink-1); }
/* ---------- CTA band (navy; counts as THE dark moment) ---------- */
.cta-band {
position: relative; overflow: hidden; padding: 48px 52px;
background: var(--grad-cta); border-radius: var(--r-band); box-shadow: var(--shadow-cta);
display: flex; align-items: center; justify-content: space-between; gap: 44px; color: var(--on-dark-body);
}
.cta-band__mark { position: absolute; right: -40px; top: -50px; width: 320px; height: 320px; opacity: .08; transform: rotate(-10deg); pointer-events: none; }
.cta-band__copy { position: relative; max-width: 560px; }
.cta-band__title { margin: 0 0 12px; font: 700 40px/1.12 var(--font-display); color: #fff; letter-spacing: -0.015em; }
.cta-band__text { margin: 0; font: 400 16px/1.6 var(--font-ui); color: var(--on-dark-body); }
.cta-band__actions { position: relative; display: flex; gap: 12px; flex: 0 0 auto; }
.cta-band .btn { height: 54px; }
.cta-band .btn--primary { padding: 0 28px; font-size: 16px; }
/* Wide-column wrapper for the closing CTA band on article pages (sits between the article and the footer) */
.cta-wrap { max-width: calc(var(--wide-column) + 2 * var(--col-pad)); margin: 90px auto 96px; padding: 0 var(--col-pad); }
/* ---------- Callouts (no left-border bars) ---------- */
.callout {
background: var(--surface-card); border: 1px solid var(--color-border);
border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 18px 22px; margin: 24px 0;
}
.callout p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 22px; }
/* Promoted Sept 2026: three pages set this locally so callout list items match .callout p */
.callout li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.6; }
.callout__label {
display: block; margin: 0 0 8px; font: 500 var(--fs-micro)/1.4 var(--font-ui);
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
/* Title is a or
; the .callout/.article selectors keep it ahead of .callout p, .article p, .article h3 */
.callout__title, .callout .callout__title, .article .callout__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font: 700 17px/1.35 var(--font-display); color: var(--ink-1); letter-spacing: 0; }
.callout--info { background: var(--surface-tint); box-shadow: none; }
.callout--good { background: var(--color-good-bg); border-color: #d3e8d8; box-shadow: none; }
.callout--good .callout__label { color: var(--color-good); font-weight: 700; }
.callout--caution { background: var(--surface-card); }
.callout__badge {
display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--r-badge);
/* Text-safe orange: the accent #E8762C is 2.97:1 with white at this size (tokens.css). */
background: var(--color-orange-text); color: #fff; font: 700 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
/* Small in-listing style note (amber), used sparingly for heads-up copy */
.note-caution { padding: 8px 10px; background: var(--color-caution-bg); border-radius: 5px; font: 400 13.5px/1.45 var(--font-ui); color: var(--color-caution-ink); }
.note-caution b { font-weight: 500; color: inherit; }
/* Verdict block (homepage "Our verdict" pattern, steel bar + big slab line) */
.verdict { border-left: 4px solid var(--color-steel); padding-left: 30px; margin: 24px 0; }
.verdict-label, .verdict__label, .article .verdict-label, .article .verdict__label { display: block; margin: 0 0 8px; font: 800 var(--fs-eyebrow)/1 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-orange-text); }
.verdict__lead { margin: 0 0 14px; font: 700 24px/1.4 var(--font-display); color: var(--color-navy); letter-spacing: -0.01em; text-wrap: balance; }
.verdict p { margin: 0 0 12px; }
.verdict p:last-child { margin-bottom: 0; }
/* ---------- Data tables (on a card) ---------- */
.table-card { background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); overflow: hidden; margin: 24px 0; }
.table-card__head { padding: 14px 20px; background: var(--surface-page); border-bottom: 1px solid var(--color-border); font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.table-card__foot, .table-card .table-card__foot, .article .table-card__foot { margin: 0; padding: 11px 20px; background: var(--surface-page); border-top: 1px solid var(--color-border); font: 400 13px/1.5 var(--font-ui); color: var(--ink-3); }
/* Every .table-wrap must carry tabindex="0" role="region" and an aria-label naming the
table: it is a scroll container at mobile widths, and a keyboard-only user (or anyone
at 400% zoom) cannot reach the right-hand columns without it. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.data-table caption { text-align: left; padding: 12px 20px 8px; font-size: 14px; color: var(--ink-3); }
.data-table th, .data-table td { text-align: left; padding: 13px 20px; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.data-table thead th { background: var(--surface-page); font: 500 var(--fs-micro)/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.data-table tbody th { font-weight: 500; color: var(--ink-1); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.num, .data-table th.num { text-align: right; font: 700 17px/1.3 var(--font-display); color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Price color, owner "middle path": small/table prices use the AA text-safe orange; only
large display prices (27px+, .price--lg) keep the brand orange. */
.data-table td.num.price { color: var(--color-orange-text); }
/* Numeric column headers keep the micro-label style, right-aligned (th.num in thead is a header, not a number) */
.data-table thead th.num, .data-table thead th.num-head { text-align: right; white-space: nowrap; font: 500 var(--fs-micro)/1.4 var(--font-ui); letter-spacing: .1em; color: var(--ink-3); }
.data-table .row-hi { background: var(--surface-blue-row); box-shadow: inset 3px 0 0 var(--color-blue); }
.data-table .row-hi th { font-weight: 700; }
.data-table .cell-win { background: var(--color-good-bg); }
.data-table .sub { display: block; margin-top: 3px; font: 400 13.5px/1.3 var(--font-ui); color: var(--ink-3); }
/* Label-column tables: fixed, tinted first column so the values line up down the page.
Promoted Sept 2026 from five page-local copies (spec-table, term-table, signal-table,
set-table, about-table). Pages set --label-col when they need a different width. */
.data-table--labels { --label-col: 190px; }
.data-table--labels tbody th { width: var(--label-col); background: var(--surface-page); }
.data-table--labels thead th:first-child { width: var(--label-col); }
.price { color: var(--color-orange-text); font-family: var(--font-display); font-weight: 700; }
.price--lg { color: var(--color-orange); font-size: 27px; line-height: 1; }
/* ---------- Stat tiles ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card-soft); overflow: hidden; margin: 24px 0; }
.stat-tile { padding: 14px 17px; border-right: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); }
.stat-tile__num { display: flex; align-items: center; gap: 8px; font: 700 27px/1 var(--font-display); color: var(--color-navy); font-variant-numeric: tabular-nums; }
.stat-tile__num--sm { font-size: 22px; line-height: 1.2; }
.stat-tile__label { display: block; margin-top: 8px; font: 500 13px/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3-market); }
/* Optional secondary range line under the label ("$2,400 to $3,900") */
.stat-tile__range { display: block; margin-top: 6px; font: 400 13.5px/1.4 var(--font-ui); color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.stat-tile__range span { white-space: nowrap; } /* keeps a "$a – $b" range on one line */
.stat-tile--good { background: var(--color-good-bg); }
.stat-tile--good .stat-tile__label { color: var(--color-good); }
.stat-tiles__foot, .article .stat-tiles__foot { grid-column: 1 / -1; margin: 0; padding: 11px 17px; background: var(--surface-tint-2); border-top: 1px solid var(--color-border-soft); font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-3-market); }
/* Loose tiles (not grouped) */
.stat-callout { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.stat-callout .stat-tile { flex: 1 1 150px; background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); }
.stat-source { font-size: 14px; color: var(--ink-3); margin: 8px 0 0; }
/* Live-data signals (green = live data / good only; JS adds .is-live only when fetch succeeded AND fresh) */
.live-dot { display: inline-block; width: 9px; height: 9px; background: var(--color-good-dot); border-radius: var(--r-pill); }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--color-live-bg); border-radius: var(--r-pill); font: 700 11.5px/1 var(--font-ui); color: var(--color-live-ink); }
.live-pill::before { content: ""; width: 6px; height: 6px; background: var(--color-live-dot); border-radius: var(--r-pill); }
.live-pill--stale { background: var(--surface-pill); color: var(--ink-3); }
.live-pill--stale::before { background: var(--ink-4); }
/* Badges + pills */
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--r-badge); font: 700 12.5px/1 var(--font-ui); color: #fff; white-space: nowrap; }
.badge--good { background: var(--color-good); }
.badge--attn { background: var(--color-orange); }
.badge--neutral { background: var(--color-navy); }
.pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); font: 700 12px/1 var(--font-ui); background: var(--surface-pill); color: var(--ink-2); }
.pill--good { background: var(--color-good-bg); color: var(--color-good); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface-card); color: var(--ink-2); border: 1px solid var(--color-border-strong); border-radius: var(--r-pill); font: 500 14px/1 var(--font-ui); text-decoration: none; }
.chip:hover { background: var(--surface-pill); border-color: var(--color-border-chip-hover); color: var(--ink-2); }
.chip--active { background: var(--color-blue); border-color: var(--color-blue); color: #fff; font-weight: 700; box-shadow: var(--shadow-chip-active); }
.chip--active:hover { background: var(--color-blue); color: #fff; }
.chip--steel { background: var(--color-steel); border-color: var(--color-steel); color: #fff; font-weight: 700; }
/* Annotation notes: Montserrat 600 italic ONLY here */
.annotation { display: inline-block; font: italic 600 14px/1.4 var(--font-note); color: var(--color-steel); transform: rotate(-2deg); }
.annotation--dark { color: var(--on-dark-annotation); font-size: 15px; }
.annotation--lg { font-size: 18px; }
/* ---------- Sparkline / chart ---------- */
.sparkline { display: block; width: 100%; height: auto; overflow: visible; }
.sparkline polyline, .sparkline path { fill: none; stroke: var(--color-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline circle { fill: var(--color-blue); }
.sparkline .band { fill: var(--surface-blue); opacity: .85; stroke: none; }
.sparkline .grid { stroke: var(--color-border-menu); stroke-width: 1; }
.sparkline .axis { stroke: #dfe6eb; stroke-width: 1; }
.sparkline text { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink-3); }
.sparkline text.val { font-family: var(--font-display); font-size: 14px; font-weight: 700; fill: var(--ink-1); }
.chart-block { background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card-soft); padding: 20px 24px 16px; margin: 24px 0; }
.chart-block h3 { margin: 0 0 4px; }
.chart-block .chart-note { margin: 12px 0 0; font: 400 13px/1.5 var(--font-ui); color: var(--ink-3); }
.chart-block svg { display: block; width: 100%; height: auto; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px/1 var(--font-ui); color: var(--ink-3); }
.chart-legend i { display: inline-block; width: 18px; height: 3px; background: var(--color-blue); border-radius: 2px; }
.chart-legend i.band { height: 10px; background: var(--surface-blue); border: 1px solid var(--color-border-blue-2); }
.chart-axis-x { display: flex; justify-content: space-between; padding: 4px 6px 0; font: 400 13px/1 var(--font-ui); color: var(--ink-3); }
/* ---------- FAQ accordion (details/summary, one open per group via name="") ----------
Question?