/* ============================================================================
   Review-site design system · v1.0 · 2026-09-12
   Implements design/ (Claude Design, six canvases) per DESIGN-CONTRACT.md.

   One left edge. Three widths. One accent hue per site — set --h and nothing
   else. No niche ever appears in a class name: components are named by the
   job they do, because the same stylesheet dresses cameras, wigs and bedding.
   ========================================================================== */

:root {
  /* accent — the only per-site variable; the generator writes it in <head> */
  --h: 42;
  --accent:       oklch(47% 0.13 var(--h));
  --accent-hover: oklch(38% 0.13 var(--h));
  --accent-line:  oklch(80% 0.08 var(--h));
  --accent-soft:  oklch(95% 0.025 var(--h));
  --on-accent:    #fff;

  /* neutrals, warm */
  --bg:       #faf8f4;
  --surface:  #f3f0ea;
  --plate:    #ffffff;
  --rule:     #e3ded6;
  --rule-dash:#d5cfc6;
  --ink:      #2a2622;
  --ink-2:    #5c564f;
  --ink-3:    #8a837a;
  --ink-4:    #b7b0a6;
  --on-dark:  #faf8f4;
  --on-dark-2:#d9d3ca;

  /* semantic — fixed across every site, never derived from --h */
  --pos: #2e7d51;  --pos-soft: #e6f2ea;
  --neu: #837b70;  --neu-soft: #f0ece5;
  --neg: #b23a3a;  --neg-soft: #f7e7e5;

  /* type */
  --font-head: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 500 52px/1.08 var(--font-head);
  --h2:      500 36px/1.15 var(--font-head);
  --h2-rail: 500 28px/1.2  var(--font-head);
  --h3:      500 24px/1.3  var(--font-head);
  --deck:    italic 400 18px/1.45 var(--font-head);
  --h4:      600 18px/1.4  var(--font-text);
  --lede:    400 20px/1.5  var(--font-text);
  --body:    400 18px/1.6  var(--font-text);
  --body-s:  400 17px/1.6  var(--font-text);
  --small:   400 15px/1.5  var(--font-text);
  --caption: 400 14px/1.45 var(--font-text);
  --kicker:  600 13px/1.2  var(--font-text);
  --micro:   500 12px/1.4  var(--font-text);
  --num:     500 28px/1.1  var(--font-head);

  /* layout */
  --container: 1200px;
  --edge: max(24px, calc((100vw - var(--container)) / 2));
  --w-narrow: 560px;
  --w-reading: 640px;
  --w-wide: 1200px;
  --rail: 480px;
  --gutter: 80px;
  --grid-gap: 24px;

  /* spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: 96px;
  --subsection: 48px;

  /* shape */
  --r-chip: 2px; --r-btn: 4px; --r-card: 8px; --r-pill: 999px;
  --border: 1px solid var(--rule);
  --plate-pad: 10px;
}

@media (max-width: 900px) {
  :root {
    --display: 500 34px/1.12 var(--font-head);
    --h2:      500 28px/1.2  var(--font-head);
    --h2-rail: 500 24px/1.25 var(--font-head);
    --h3:      500 22px/1.3  var(--font-head);
    --lede:    400 18px/1.5  var(--font-text);
    --body:    400 17px/1.6  var(--font-text);
    --section: 64px;
    --subsection: 36px;
    --gutter: 0px;
  }
}

/* ── base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, blockquote { margin: 0; }
ul, ol { padding-left: 1.15em; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-line);
}
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Numbers are read, not decorated: same face, tabular, a little heavier. */
.num, .facts__value, .stat__value, td.is-num, .stamp { font-variant-numeric: tabular-nums; }
.num { font-weight: 600; }

h1 { font: var(--display); letter-spacing: -.01em; }
h2 { font: var(--h2); letter-spacing: -.005em; }
h3 { font: var(--h3); }
h4 { font: var(--h4); }

/* ── layout ──────────────────────────────────────────────────────────────── */

.wrap { padding-inline: var(--edge); }

.w-narrow  { max-width: var(--w-narrow); }
.w-read    { max-width: var(--w-reading); }
.w-wide    { max-width: var(--w-wide); }

.section { padding-top: var(--section); }
.section:first-of-type { padding-top: var(--s-7); }
.section--tight { padding-top: var(--s-7); }
/* Brand page: the reading sections after the verdict follow one another in
   the same shape (text, In short, the guide), so a hairline halfway through
   the gap tells where one ends (page review round 2, R8.5). */
.page-brand > .section ~ .section:not(.section--tight):not(#verdict)::before {
  content: "";
  display: block;
  border-top: var(--border);
  margin-top: calc(var(--section) / -2);
  margin-bottom: calc(var(--section) / 2);
}

/* Reading sections are 640 + 80 + 480: prose never sits alone, and the right
   column is never empty (see .rail). */
.split {
  display: grid;
  grid-template-columns: var(--w-reading) var(--rail);
  column-gap: var(--gutter);
  align-items: start;
}
.split--narrow { grid-template-columns: var(--w-narrow) var(--rail); column-gap: calc(var(--gutter) * 2); }
.split--end { align-items: end; }
/* A section whose rail would only hold its number reads alone, wider. */
.solo { max-width: 880px; }

@media (max-width: 1140px) {
  .split, .split--narrow { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .split > .rail { order: -1; }
  .split--after > .rail { order: 0; }
}

/* ── section head ────────────────────────────────────────────────────────── */

.head__kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: var(--kicker);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.head__kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.head__title { margin-top: 14px; }
/* Whatever follows a section heading (text, a list, the FAQ) keeps the gap a
   lede keeps; without it the topic blocks, the FAQ and every brand-page
   section sat flush under their heading (page review round 2, R8.4).
   :where keeps it weaker than any block's own spacing rule. */
.head__title + :where(*), .head:where(:has(> .head__title:last-child)) + :where(*) { margin-top: var(--s-4); }
.head__lede { font: var(--lede); color: var(--ink-2); margin-top: var(--s-4); max-width: var(--w-reading); }
/* Wide sections: the heading takes the full width and the lede sits under it
   in one reading column. Side by side, a long lede left a hole above the
   heading (page review 2026-10-06, #1). */
.head--split { margin-bottom: var(--s-6); }
.head--split .head__lede { margin-top: var(--s-4); font: var(--body); color: var(--ink-2); max-width: var(--w-reading); }
/* A wide head with its own figure on the right (the brand counts, the badge
   scale) instead of an empty half (page review round 2, R8.1–R8.2). On a
   phone the figure follows the text. Both sides start level with the heading:
   aligned to the bottom, the figure hung loose under a long lede, and a tall
   figure pushed the heading down (user, 2026-10-07). */
.head--aside {
  display: grid;
  grid-template-columns: minmax(0, var(--w-reading)) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  margin-bottom: var(--s-6);
}
.head--aside .head__lede { margin-top: var(--s-4); font: var(--body); color: var(--ink-2); }
.head__aside { justify-self: end; width: min(100%, 420px); }
.head__aside .stats--row { margin: 0; }
.head__aside-more { margin-top: var(--s-4); font: var(--small); }
.head__aside-more a { font-weight: 600; text-decoration: none; }
@media (max-width: 900px) {
  .head--aside { grid-template-columns: minmax(0, 1fr); }
  .head__aside { justify-self: stretch; width: auto; margin-top: var(--s-5); }
}

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { font: var(--body); }
.prose > * + * { margin-top: var(--s-5); }
/* The same rhythm at any depth: text wrapped in a <section> (About, Privacy)
   keeps its paragraph, list and table gaps. Only block neighbours — list items
   and inline text keep their own spacing. */
.prose :is(p, ul, ol, blockquote, figure, table, .table__wrap, .prose__note) + :is(p, ul, ol, blockquote, figure, table, .table__wrap, .prose__note) { margin-top: var(--s-5); }
/* A table never touches the text above it, inside prose or beside it. */
* + .table__wrap { margin-top: var(--s-6); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose a { font-weight: 500; }
.prose h3 { font: var(--h3); margin-top: var(--s-7); }
.prose h4 { font: var(--h4); margin-top: var(--s-6); }
.prose ul, .prose ol { display: grid; gap: var(--s-3); }
.prose li::marker { color: var(--ink-3); }

.prose__note {
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--r-card);
  font: var(--body-s);
}
.prose__note-label {
  display: block;
  font: var(--micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

/* Numbered items inside prose: the number is serif and accented, the text
   carries a bold opening clause. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.steps__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); }
.steps__num {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── sub-section (nested insight) ────────────────────────────────────────── */

.sub { margin-top: var(--subsection); padding-top: var(--s-6); border-top: var(--border); }
.sub__mark {
  font: var(--micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sub__title { font: var(--h3); margin-top: var(--s-2); }
.sub__deck { font: var(--deck); color: var(--ink-2); margin-top: var(--s-2); }
.sub .prose { margin-top: var(--s-4); }
.sub sup { font-size: 12px; color: var(--accent); }
.sub__notes {
  font: var(--caption);
  color: var(--ink-3);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--border);
}
.sub__notes ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* ── rail ────────────────────────────────────────────────────────────────── */

.rail { padding-top: var(--s-2); }
.rail__inner { position: sticky; top: var(--s-5); }
/* A rail that carries a table of contents runs the full height of its text,
   so the contents follow the reader to the end (page review 2026-10-06, #10):
   articles, About, Privacy, and the homepage stretch's one chapter rail. */
.article > .rail, .stretch > .rail { align-self: stretch; }
.stretch > .rail { padding-top: var(--section); }
.stretch__quote { margin: var(--s-5) 0; font-size: 20px; }
.rail__num {
  font-family: var(--font-head);
  font-size: 52px;
  line-height: 1;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}
.rail__label {
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s-2);
}
.rail__index { margin-top: var(--s-3); display: grid; font: var(--small); }
.rail__index a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 9px 0;
  border-top: var(--border);
  color: var(--ink);
  text-decoration: none;
}
.rail__index a:last-child { border-bottom: var(--border); }
.rail__index a:hover { color: var(--accent); }
.rail__index span { color: var(--ink-3); }
.rail__quote {
  margin-top: var(--s-7);
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-head);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
}
.rail__aside {
  padding: var(--s-5);
  background: var(--surface);
  border-radius: var(--r-card);
}
@media (max-width: 1140px) {
  .rail__inner { position: static; }
  .rail__num { display: none; }
}

/* The factor's question, one cell of the items grid (styles 2 and 4 place it). */
.items__lead { min-width: 0; }

/* ── photo plate ─────────────────────────────────────────────────────────── */

.plate {
  background: var(--plate);
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--plate-pad);
  aspect-ratio: 1;
}
.plate img { width: 100%; height: 100%; object-fit: contain; }
.plate--empty {
  background: var(--surface);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 300;
  color: var(--ink-4);
  font-size: 44px;
}

/* ── product row (list form) ─────────────────────────────────────────────── */

.plist { display: grid; }
.prow {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: var(--border);
}
.plist .prow:last-child { border-bottom: var(--border); }
.prow__plate { width: 120px; height: 120px; }
.prow__eyebrow {
  font: var(--micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.prow__name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--s-1);
  color: var(--ink);
}
.prow__pitch { font: var(--body-s); font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.prow__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.prow__cta { display: inline-block; margin-top: var(--s-3); font-size: 14px; font-weight: 600; text-decoration: none; }
.prow__cta .tag { font-weight: 400; color: var(--ink-3); font-size: 12px; letter-spacing: .04em; margin-left: 8px; }

/* compact form: a gear list is names and arrows, nothing else */
.plist--compact .prow {
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  align-items: baseline;
}
.plist--compact .prow__name { font-size: 16px; font-weight: 500; margin: 0; }
.plist--compact .prow__arrow { color: var(--accent); }

.chip {
  white-space: nowrap;
  padding: 2px 8px;
  border: var(--border);
  border-radius: var(--r-chip);
  font: var(--micro);
  color: var(--ink-2);
}
.chip--round { border-radius: var(--r-pill); padding: 3px 10px; background: var(--plate); font-weight: 500; }

@media (max-width: 900px) {
  .prow { grid-template-columns: 88px 1fr; gap: var(--s-4); }
  .prow__plate { width: 88px; height: 88px; padding: 8px; }
  .prow__name { font-size: 17px; }
}

/* ── award card ──────────────────────────────────────────────────────────── */

/* Six tracks, three cards: a card takes two, a half takes three, the featured
   card takes all six. That is what lets the remainder go to the top as one
   full-width card or two halves without leaving a hole in any row. */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.cards > * { grid-column: span 2; }
.cards > [class*="--featured"] { grid-column: 1 / -1; }
.cards > [class*="--half"] { grid-column: span 3; }
@media (max-width: 1140px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > *, .cards > [class*="--half"] { grid-column: span 1; }
  .cards > [class*="--featured"] { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
  .cards > *, .cards > [class*="--half"], .cards > [class*="--featured"] { grid-column: auto; }
}

.award {
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  background: var(--plate);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}
.award__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
}
.award__label::before { content: ""; width: 20px; height: 1px; background: var(--accent); flex: none; }
.award__qualifier { color: var(--ink-3); font-style: normal; font-size: 14px; }
.award__plate { margin: var(--s-4) 0; height: 140px; aspect-ratio: auto; }
.award__name { display: block; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; }
.award__body { font: var(--small); color: var(--ink-2); margin-top: var(--s-2); }
.award__cta { margin-top: auto; padding-top: var(--s-4); font-size: 14px; font-weight: 600; text-decoration: none; }

/* The remainder goes to the top: one card over a row of three becomes the
   featured card, two become halves. Never a gap in the last row. */
.award--featured {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--s-6);
  padding: 28px;
}
.award--featured .award__label { font-size: 20px; }
.award--featured .award__name { font: var(--h2-rail); margin-top: var(--s-3); }
.award--featured .award__plate { margin: 0; height: auto; aspect-ratio: 1; }
@media (max-width: 1140px) {
  /* Stacked, the featured card's square plate would swallow the screen. */
  .award--featured { grid-template-columns: 1fr; }
  .award--featured .award__plate { aspect-ratio: auto; height: 200px; order: -1; margin-bottom: var(--s-4); }
}

.award__meta { margin-top: var(--s-4); display: grid; gap: var(--s-3); font: var(--body-s); font-size: 16px; }
.award__meta-row { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); }
.award__meta-label {
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.award__meta-row span:last-child { color: var(--ink-2); }

/* "which one" — two to five products, rows instead of awards */
.which { font: var(--body-s); }
.which__row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: var(--s-4);
  padding: 18px 0;
  border-top: var(--border);
}
.which__row:last-child { border-bottom: var(--border); }
.which__arrow { color: var(--accent); text-align: center; }
.which__pick { font-weight: 600; color: var(--ink); }
@media (max-width: 700px) {
  .which__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .which__arrow { display: none; }
}

/* ── brand card ──────────────────────────────────────────────────────────── */

.bcard {
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  background: var(--plate);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}
.bcard__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.bcard__index { font-family: var(--font-head); font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: auto; }
/* The score out of 100 beside the badge (BRAND-SCORE-100-PLAN.md §3); the
   index's auto margin keeps badge and score together on the right. */
.bcard__score { font: var(--small); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bcard__score b { color: var(--ink); font-weight: 700; }
.bcard__name { font: var(--h2-rail); margin-top: var(--s-4); }
.bcard__rating { font: var(--small); color: var(--ink-2); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.bcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* The line under the rating: "One model · 6 options", "19 models · 4 groups". */
.bcard__line { font: var(--small); color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bcard__summary { font: var(--body-s); font-size: 16px; color: var(--ink-2); margin-top: 14px; }
.bcard__cta { margin-top: auto; padding-top: var(--s-5); font: var(--small); font-weight: 600; color: var(--accent); }
.bcard__rating strong { color: var(--ink); font-weight: 600; }
.bcard--featured {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 28px;
  padding: 28px;
}
.bcard--featured .bcard__name { font-family: var(--font-head); font-size: 34px; line-height: 1.1; font-weight: 500; }
.bcard__plate { align-self: start; font-size: 56px; }
.bcard--soon { background: transparent; border: 1px dashed var(--rule-dash); color: var(--ink-3); }
.bcard--soon .bcard__name { color: var(--ink-2); }
@media (max-width: 1140px) { .bcard--featured { grid-template-columns: 1fr; } .bcard__plate { display: none; } }
.is-hidden { display: none !important; }

.empty {
  padding: var(--s-6);
  border: 1px dashed var(--rule-dash);
  border-radius: var(--r-card);
  font: var(--body-s);
  color: var(--ink-2);
  max-width: var(--w-reading);
}
.empty__title { font: var(--h2-rail); color: var(--ink); margin-bottom: var(--s-2); }

.grid-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-5);
  font: var(--small);
  color: var(--ink-2);
}
.grid-note a { font-weight: 600; text-decoration: none; }

/* ── article card ────────────────────────────────────────────────────────── */

.acard {
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  background: var(--plate);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}
.acard--featured { background: var(--surface); }
.acard__top {
  display: flex;
  justify-content: space-between;
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.acard__index { font-family: var(--font-head); font-weight: 400; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.acard__title { font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 1.25; margin-top: var(--s-4); }
.acard__excerpt { font: var(--small); color: var(--ink-2); margin-top: var(--s-3); }
.acard__meta {
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  font: var(--caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.acard__meta a, .acard__more { font-weight: 600; color: var(--accent); text-decoration: none; }

/* ── data table ──────────────────────────────────────────────────────────── */

.table__wrap { overflow-x: auto; }
.table { width: 100%; font: var(--body-s); font-size: 16px; line-height: 1.4; }
.table th {
  background: var(--surface);
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table td { padding: 14px 16px; }
.table tbody tr { border-bottom: var(--border); }
.table__group td {
  padding: 20px 16px 8px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
}
.table__group:first-child td { padding-top: 8px; }
.table a { font-weight: 600; color: var(--ink); }
.table a:hover { color: var(--accent); }
.table .is-num { font-variant-numeric: tabular-nums; }
.table .is-dim { color: var(--ink-2); }
.table__aside { color: var(--ink-3); font-size: 14px; margin-left: 6px; }
.table__note { font: var(--caption); color: var(--ink-3); margin-top: var(--s-3); }
.line__all { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--border); font-weight: 600; }
.alternatives__cards { margin-top: var(--s-6); }
.alternatives__all { margin-top: var(--s-5); }
.table__title { font: var(--h4); font-size: 20px; margin-top: var(--s-7); }
.table__title + .table__wrap { margin-top: var(--s-4); }

/* A long table gets an index of its groups instead of pagination. */
.table__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font: var(--caption);
  font-weight: 500;
}
.table__jump a {
  white-space: nowrap;
  padding: 6px 12px;
  border: var(--border);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
}
.table__jump a:hover { border-color: var(--accent-line); color: var(--accent); }
.table__jump .num { color: var(--ink-3); font-weight: 400; margin-left: 6px; }

@media (max-width: 900px) {
  .table__wrap {
    border: var(--border);
    border-radius: var(--r-card);
  }
  .table { font-size: 14px; }
  .table th, .table td { padding: 11px 12px; white-space: nowrap; }
  .table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--rule);
    white-space: normal;
    min-width: 150px;
  }
  .table__group td { position: static; box-shadow: none; }
}

/* ── verdict ─────────────────────────────────────────────────────────────── */

.verdict__head { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.verdict__lede { font: var(--lede); line-height: 1.55; margin-top: var(--s-5); }
.verdict__lede p + p { margin-top: var(--s-4); }
.fit { margin-top: var(--s-6); font: var(--body-s); }
.fit__row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: var(--s-4) 0; border-top: var(--border); }
.fit__row:last-child { border-bottom: var(--border); }
.fit__key {
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 5px;
  color: var(--pos);
}
.fit__row--no .fit__key { color: var(--neg); }
.fit__row--no .fit__val { color: var(--ink-2); }
@media (max-width: 700px) { .fit__row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ── facts strip ─────────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: var(--border);
}
.facts--5 { grid-template-columns: repeat(5, 1fr); }
.facts--4 { grid-template-columns: repeat(4, 1fr); }
.facts__item { padding: 20px 24px; border-right: var(--border); }
.facts__item:nth-child(3n) { border-right: 0; padding-right: 0; }
.facts__item:nth-child(3n+1) { padding-left: 0; }
.facts__item:nth-child(n+4) { border-top: var(--border); }
.facts--5 .facts__item:nth-child(3n), .facts--4 .facts__item:nth-child(3n) { border-right: var(--border); padding-right: 24px; }
.facts--5 .facts__item:nth-child(3n+1), .facts--4 .facts__item:nth-child(3n+1) { padding-left: 24px; }
.facts--5 .facts__item:first-child, .facts--4 .facts__item:first-child { padding-left: 0; }
.facts--5 .facts__item:last-child, .facts--4 .facts__item:last-child { border-right: 0; padding-right: 0; }
.facts--5 .facts__item:nth-child(n+4), .facts--4 .facts__item:nth-child(n+4) { border-top: 0; }
.facts__label {
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.facts__value { font: var(--num); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.facts__note { font: var(--small); line-height: 1.4; color: var(--ink-2); margin-top: var(--s-1); }
@media (max-width: 900px) {
  .facts, .facts--5, .facts--4 { grid-template-columns: repeat(2, 1fr); }
  .facts__item, .facts--5 .facts__item, .facts--4 .facts__item {
    padding: 16px 16px 16px 0;
    border-right: var(--border);
    border-top: var(--border);
  }
  .facts__item:nth-child(2n), .facts--5 .facts__item:nth-child(2n), .facts--4 .facts__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  /* Two across, as the stats strips (About, brands catalog): the right column
     sits 16px off the rule, the left one on the edge; a rule over every row
     after the first. The desktop 5/4-across insets must not leak in (user, 2026-10-07). */
  .facts__item:nth-child(2n), .facts--5 .facts__item:nth-child(2n), .facts--4 .facts__item:nth-child(2n) { padding-left: 16px; }
  .facts__item:nth-child(2n+1), .facts--5 .facts__item:nth-child(2n+1), .facts--4 .facts__item:nth-child(2n+1) { padding-left: 0; }
  .facts--5 .facts__item:nth-child(n+3), .facts--4 .facts__item:nth-child(n+3) { border-top: var(--border); }
  .facts__item:nth-child(-n+2) { border-top: 0; }
  /* An odd count leaves the last fact alone: it takes the whole row (L15, user). */
  .facts .facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
}

/* ── verdict badge · signal marks ────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-line);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  background: var(--plate);
}
.badge--sm { font-size: 15px; padding: 6px 14px; }
.badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.badge--pos::before { background: var(--pos); }
.badge--neu::before { border: 1.5px solid var(--neu); }
.badge--neg::before { background: var(--neg); transform: rotate(45deg); border-radius: 0; }

/* Three marks per criterion: colour is never the only signal. */
.marks { display: flex; gap: 3px; }
.mark { width: 10px; height: 10px; border-radius: 2px; display: block; }
.mark--pos { background: var(--pos); }
.mark--pos-off { border: 1.5px solid var(--pos); }
.mark--neu { background: var(--neu); }
.mark--neu-off { border: 1.5px solid var(--neu); }
.mark--neg { background: var(--neg); }
.mark--neg-off { border: 1.5px solid var(--neg); }
.mark--none { border: 1.5px dashed var(--neu); }

/* ── evaluation rows ─────────────────────────────────────────────────────── */

.eval__summary {
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--r-card);
  display: flex;
  gap: var(--s-5);
  align-items: center;
  flex-wrap: wrap;
}
.eval__summary-note { font: var(--small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eval__row {
  display: grid;
  grid-template-columns: 200px var(--w-reading);
  column-gap: var(--s-7);
  padding: 28px 0;
  border-top: var(--border);
}
.eval__row:first-child { border-top: 1px solid var(--ink); }
.eval__row:last-child { border-bottom: var(--border); }
.eval__index { font-family: var(--font-head); font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.eval__criterion { font: var(--h4); margin-top: var(--s-1); }
.eval__level { display: flex; align-items: center; gap: var(--s-2); margin-top: 10px; }
.eval__level-word { font: var(--caption); font-weight: 600; color: var(--ink-2); }
.eval__level-word.is-pos { color: var(--pos); }
.eval__level-word.is-neg { color: var(--neg); }

/* Brand page (pivot 2026-10-01): the six scores under the verdict, and the
   model / option / fit tables the code draws under "the line". */
.scores { margin-top: var(--s-6); border-top: var(--border); }
.scores > .label { display: block; margin: var(--s-4) 0 var(--s-2); }
.scores__item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: var(--border); }
.scores__name { font: var(--body-s); }
.scores__item .eval__level { margin-top: 0; }
/* The score out of 100 as the list's summary row (BRAND-SCORE-100-PLAN.md §3). */
.scores__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0 0; font-weight: 600; color: var(--ink); }
.scores__total b { font: var(--h4); font-size: 22px; font-variant-numeric: tabular-nums; }
.hero__score { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line__models { margin-top: var(--subsection); max-width: var(--w-wide); }
.line__models > .prose { max-width: var(--w-reading); }
.eval__evidence { font: var(--body-s); }
@media (max-width: 1140px) {
  .eval__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); }
}

/* ── two-column signal list ──────────────────────────────────────────────── */

.signals { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.signals-below { margin-top: var(--s-7); padding-top: var(--s-6); border-top: var(--border); }
.signals__col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--pos);
}
.signals__col--skip .signals__col-head { border-bottom-color: var(--neg); }
.signals__title { font-family: var(--font-head); font-size: 22px; font-weight: 500; }
.signals__tag {
  font: var(--micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pos);
}
.signals__col--skip .signals__tag { color: var(--neg); }
.signals ul { list-style: none; margin: 0; padding: 0; font: var(--body-s); }
.signals li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: var(--border); }
.signals li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--pos); margin-top: 9px; }
.signals__col--skip li::before { background: none; border: 1.5px solid var(--neg); }
@media (max-width: 900px) { .signals { grid-template-columns: 1fr; row-gap: var(--s-6); } }

/* ── review themes ───────────────────────────────────────────────────────── */

.themes__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-5);
  padding: 20px 0;
  border-top: var(--border);
}
.themes__row:first-child { border-top: 1px solid var(--ink); }
.themes__row:last-child { border-bottom: var(--border); }
.themes__name { font: var(--h4); }
.themes__text { font: var(--body-s); font-size: 16px; color: var(--ink-2); }
.tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font: var(--caption);
  font-weight: 600;
  margin-top: var(--s-2);
}
.tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tier--praised { background: var(--pos-soft); color: var(--pos); }
.tier--praised::before { background: var(--pos); }
.tier--mixed { background: var(--neu-soft); color: var(--ink-2); }
.tier--mixed::before { border: 1.5px solid var(--neu); }
.tier--flagged { background: var(--neg-soft); color: var(--neg); }
.tier--flagged::before { background: var(--neg); border-radius: 0; transform: rotate(45deg); }
@media (max-width: 900px) { .themes__row { grid-template-columns: 1fr; gap: var(--s-2); } }

.quote {
  margin-top: var(--s-3);
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}
.quote p { font-family: var(--font-head); font-style: italic; font-size: 21px; line-height: 1.35; }
.quote__source { font: var(--caption); color: var(--ink-2); margin-top: var(--s-2); }
.voices { margin-top: var(--s-3); display: grid; gap: var(--s-5); }
.voice { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--border); }
.voice__index { font-family: var(--font-head); font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.voice__who { font: var(--micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.voice__text { font-family: var(--font-head); font-size: 18px; line-height: 1.4; margin-top: 6px; }
.voice__attr { font: var(--caption); color: var(--ink-3); margin-top: 6px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--ink); }
.faq__item { padding: 20px 0; border-bottom: var(--border); }
.faq__q {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: var(--s-3);
  align-items: start;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__num { font-family: var(--font-head); font-size: 15px; color: var(--ink-3); padding-top: 4px; font-variant-numeric: tabular-nums; }
.faq__text { font-family: var(--font-head); font-size: 20px; line-height: 1.3; font-weight: 500; }
.faq__sign { font-size: 22px; line-height: 1; color: var(--accent); text-align: right; transition: transform .15s ease; }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a { font: var(--body-s); color: var(--ink-2); margin-top: var(--s-3); padding-left: 48px; }
@media (max-width: 900px) { .faq__a { padding-left: 0; } }

/* ── CTA row ─────────────────────────────────────────────────────────────── */

.cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--s-5) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn--sm { font-size: 15px; padding: 9px 16px; }
.cta__note { font: var(--caption); line-height: 1.45; color: var(--ink-2); }
.cta__tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .cta { display: grid; gap: var(--s-3); }
  .btn { text-align: center; padding: 14px 20px; }
  .cta__note { text-align: center; }
}

/* ── header · footer · disclosure · crumbs · stamp ───────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-bottom: var(--border);
}
.wordmark { font-family: var(--font-head); font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark b { color: var(--accent); font-weight: 500; }
.site-nav { display: flex; align-items: center; gap: var(--s-6); font-size: 16px; font-weight: 500; }
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--accent); }
.site-header__menu { display: none; padding: 12px 10px; margin-right: -10px; background: none; border: 0; color: var(--ink); line-height: 0; cursor: pointer; }
.site-header__close, .site-header--open .site-header__bars { display: none; }
.site-header--open .site-header__close { display: block; }
@media (max-width: 900px) {
  .site-header { height: 56px; }
  .wordmark { font-size: 19px; }
  .site-nav { display: none; }
  .site-header__menu { display: block; }
  .site-header--open .site-nav {
    display: grid;
    position: absolute;
    left: 0; right: 0;
    top: 56px;
    background: var(--bg);
    border-bottom: var(--border);
    padding: var(--s-4) var(--edge);
    gap: var(--s-4);
    z-index: 5;
  }
}

/* The page's Amazon button pinned to the bottom of a phone screen
   (content-creator's mobile CTA bar; brand pages only). */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px var(--edge) calc(10px + env(safe-area-inset-bottom));
    background: rgba(250, 248, 244, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: var(--border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
  }
  .mobile-cta .btn { flex: 1; text-align: center; padding: 14px 18px; font-size: 15px; }
  .has-mobile-cta { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

.disclosure {
  padding: 14px 0;
  border-top: var(--border);
  border-bottom: var(--border);
  font: var(--small);
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.stamp { font-variant-numeric: tabular-nums; }
.stamp span { color: var(--ink-3); }

.crumbs { font: var(--caption); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

.site-footer {
  margin-top: var(--section);
  background: var(--ink);
  color: var(--on-dark);
  padding: 56px 48px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .wordmark { color: var(--on-dark); }
.site-footer .wordmark b { color: var(--on-dark); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); font: var(--small); font-weight: 500; }
.site-footer__legal { font: var(--caption); color: var(--ink-4); margin-top: var(--s-7); }
.site-footer__mission { font-family: var(--font-head); font-size: 19px; line-height: 1.4; font-style: italic; }
.site-footer__fineprint { font: var(--small); line-height: 1.55; color: var(--on-dark-2); margin-top: var(--s-4); }
@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr; row-gap: var(--s-6); padding: 40px 24px 32px; }
}

/* ── page hero · TOC strip · part marker · sidebar TOC ───────────────────── */

.page-hero { padding-top: var(--s-7); }
/* The homepage hero opens its page-hero with no crumbs above it: the hero's
   own top margin would double the gap under the header (user, 2026-10-07). */
.page-hero > .hero:first-child { margin-top: 0; }
.page-hero__title { margin-top: var(--s-4); }
.page-hero__lede { font: var(--lede); color: var(--ink-2); margin-top: 20px; max-width: var(--w-reading); }
.page-hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); font: var(--caption); font-weight: 500; }
.page-hero__chips span { padding: 6px 12px; border: var(--border); border-radius: var(--r-pill); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: var(--s-6); font: var(--caption); color: var(--ink-2); }

.hero { display: grid; grid-template-columns: minmax(0, 760px) 360px; column-gap: var(--gutter); margin-top: var(--s-7); align-items: start; }
.hero__em { font-style: italic; font-weight: 400; color: var(--ink-2); }
.hero__lede { font: var(--lede); color: var(--ink-2); margin-top: var(--s-5); max-width: 700px; }
/* The verdict in one line under the lede (user 2026-10-13): the answer first. */
.hero__verdict { margin-top: var(--s-3); color: var(--ink); }
.hero__media { padding: 28px; }
/* The hero's figure (homepage): what the site holds, as bars of its real
   counters. A plate without the square, so it is as tall as its rows. */
.hero-figure { background: var(--plate); border: var(--border); border-radius: var(--r-card); display: grid; gap: var(--s-5); align-content: start; }
.hero-figure__bar { height: 10px; border-radius: 5px; background: var(--accent); }
.hero-figure__row + .hero-figure__row .hero-figure__bar { background: var(--accent-line); }
.hero-figure__text { margin-top: var(--s-2); font: var(--small); color: var(--ink-2); }
.hero-figure__text .num { font-family: var(--font-head); font-size: 28px; font-weight: 500; color: var(--ink); margin-right: 4px; }
.hero-figure__foot { padding-top: var(--s-4); border-top: var(--border); font: var(--small); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1140px) { .hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); } .hero__media { max-width: 320px; } }

.toc-strip {
  margin-top: var(--s-7);
  border-top: 1px solid var(--ink);
  border-bottom: var(--border);
  display: flex;
  flex-wrap: wrap;
  /* The space between items is a column gap, not side padding: a strip that
     wraps (five or six niche factors) starts every row at the left edge. */
  gap: 0 var(--s-6);
  font: var(--caption);
  font-weight: 500;
}
.toc-strip::-webkit-scrollbar { display: none; }
.toc-strip a {
  padding: 14px 0;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.toc-strip a:first-child { color: var(--ink); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.toc-strip a:hover { color: var(--accent); }
/* R6 in style 0 too (2026-10-12): on a phone the strip wraps into four or
   five rows of links (13 with six niche factors) before the facts, and every
   section below has its own heading. Styles 1–3 hide it the same way. */
@media (max-width: 900px) { #brand-hero > .toc-strip { display: none; } }

.part {
  margin-top: var(--section);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--ink-3);
  display: flex;
  gap: var(--s-2);
}
.part b { font-weight: 500; color: var(--ink); }

.toc-rail { position: sticky; top: var(--s-5); }
.toc-rail__list { margin-top: var(--s-3); font: var(--small); display: grid; }
.toc-rail__list a {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 8px 0 8px 12px;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--rule);
}
.toc-rail__list a.is-active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }

/* ── product strip (hero rail: what is in the line) ──────────────────────── */

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
.strip a { text-decoration: none; color: var(--ink); }
/* A short name can still be eight words; two lines is what the strip has. */
.strip__caption {
  font: var(--caption);
  font-size: 13px;
  line-height: 1.35;
  margin-top: var(--s-2);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.strip .plate { padding: 8px; }
.strip .plate--empty { font-size: 32px; }
/* The line's model pictures (brand page, "The line"): wider cells, the full
   model name under each — nothing is cut. */
.strip--line { grid-template-columns: repeat(4, minmax(0, 220px)); gap: var(--s-5); margin-top: var(--s-6); }
.strip--line .strip__caption { display: block; overflow: visible; font-size: 14px; }
@media (max-width: 900px) { .strip--line { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The verdict's rail: the scores open it, the button follows. */
.rail--verdict .scores { margin-top: 0; }
.rail--verdict .cta { margin-top: var(--s-5); flex-wrap: wrap; }

.stat-plate { padding: var(--s-5); background: var(--surface); border-radius: var(--r-card); }
.stat-plate__value { font-family: var(--font-head); font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-plate__value span { font: var(--lede); color: var(--ink-2); }
.stat-plate__row { font: var(--caption); color: var(--ink-2); margin-top: 10px; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ── homepage: hero tiles · criteria · items · team · sources ───────────── */

.hero--solo { grid-template-columns: minmax(0, 760px); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: 28px; font: var(--small); color: var(--ink-2); }
.hero__stats b { color: var(--ink); }
.hero__sep { color: var(--rule); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); margin: var(--s-7) 0 40px; }
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 150px;
  padding: var(--s-5) 0 20px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.tile__title { font-family: var(--font-head); font-size: 22px; line-height: 1.25; font-weight: 500; }
.tile__desc { font: var(--small); color: var(--ink-2); }
.tile__cta { margin-top: auto; font: var(--small); font-weight: 600; color: var(--accent); }
.tile:hover { color: var(--ink); }
.tile:hover .tile__title { color: var(--accent); }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
  .tile { min-height: 0; padding-top: var(--s-4); }
  .tile__title { font-size: 18px; }
  .tile__desc { display: none; }
}

.section__more { margin-top: 20px; font: var(--small); font-weight: 600; }
.section__more a { text-decoration: none; }

/* How we rate: two columns of numbered criteria under a dark rule. */
.criteria { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); border-top: 1px solid var(--ink); }
.criteria__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: var(--border); }
.criteria__num { font-family: var(--font-head); font-size: 24px; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.criteria__title { font-size: 18px; font-weight: 600; line-height: 1.35; }
.criteria__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 900px) { .criteria { grid-template-columns: 1fr; } }
/* Under the criteria (homepages written after the pivot): how the badge is
   set beside what the ratings read — both printed by the code. */
.method__text { font: var(--small); color: var(--ink-2); margin-top: var(--s-2); }
.badge-scale { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.badge-scale__item { display: flex; align-items: center; gap: var(--s-4); }
.badge-scale__item .badge { min-width: 160px; justify-content: center; }
.badge-scale__rule { font: var(--small); color: var(--ink-2); }

/* Numbered items: a visibly different component from prose — wide, serif
   numerals, three across when short, two when long, one column in a rail
   section. */
.items { display: grid; column-gap: var(--s-7); border-top: 1px solid var(--ink); }
.items--3 { grid-template-columns: repeat(3, 1fr); }
.items--2 { grid-template-columns: repeat(2, 1fr); }
.items--stack { grid-template-columns: 1fr; }
.items__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: var(--border); }
.items--3 .items__item { grid-template-columns: 1fr; gap: var(--s-2); }
.items__num { font-family: var(--font-head); font-size: 28px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.items__title { font: var(--h4); font-size: 20px; line-height: 1.3; }
.items__body { font: var(--body-s); font-size: 16px; color: var(--ink-2); margin-top: var(--s-2); }
.items__body > * + * { margin-top: var(--s-3); }
/* "Read the guide" under an item — only when the guide is built. */
.items__more { font: var(--small); font-weight: 600; }
.items__more a { text-decoration: none; }
.prose .items { margin-top: var(--s-6); }
.prose .items__title { font: var(--h4); font-size: 20px; margin: 0; }
/* Two columns never end in a gap — the cards' remainder rule: an odd count
   (five niche factors) leads with the first item across the row, its title
   over the left column and its text in the right one.
   Kept at one class: a style that draws items its own way keeps it. */
.items--2 > :where(.items__item:first-child:nth-last-child(odd)) { grid-column: 1 / -1; grid-template-columns: 48px minmax(0, 1fr) calc(50% - var(--s-7) / 2 - 48px - var(--s-4)); }
.items--2 > :where(.items__item:first-child:nth-last-child(odd)) > div { display: contents; }
:where(.items--2 > .items__item:first-child:nth-last-child(odd)) .items__body { margin-top: 0; }
@media (max-width: 1140px) {
  .items--3, .items--2 { grid-template-columns: 1fr; } .items--3 .items__item { grid-template-columns: 48px 1fr; gap: var(--s-4); }
  .items--2 > :where(.items__item:first-child:nth-last-child(odd)) { grid-template-columns: 48px 1fr; }
  .items--2 > :where(.items__item:first-child:nth-last-child(odd)) > div { display: block; }
  :where(.items--2 > .items__item:first-child:nth-last-child(odd)) .items__body { margin-top: var(--s-2); }
}

.log { list-style: none; padding: 0; }
.log .stamp { color: var(--ink-3); margin-right: var(--s-2); }

/* The stretch's chapter list lives in each rail on a wide screen and once,
   in front of the stretch, on a phone. */
.jump { display: none; }
@media (max-width: 1140px) {
  .rail--chapters { display: none; }
  .jump { display: block; padding-top: var(--s-7); }
  .jump .toc-rail__list a { border-left: 0; padding-left: 0; border-top: var(--border); }
}

/* What else a stretch rail carries: the block's own numbers under the quote,
   and one guide to read next. On a phone the quote stands between the
   heading and the text instead. */
.rail__quote--inline { display: none; }
.rail__stats { margin-top: var(--s-6); }
.rail__next { margin-top: var(--s-6); }
.rail__inner > .prose__note + .rail__next { margin-top: var(--s-5); }
.acard--rail { margin-top: var(--s-3); padding: 20px; }
.acard--rail .acard__title { font-size: 22px; margin-top: 10px; }
.acard--rail .acard__meta { margin-top: var(--s-4); }
@media (max-width: 1140px) {
  .rail--quote { display: none; }
  .rail__quote--inline { display: block; margin: var(--s-5) 0; font-size: 20px; }
}
/* A topic block's guide sits in its rail; when that rail folds away on a
   phone, the same link stands under the text. */
.rail__guide--inline { display: none; }
@media (max-width: 1140px) { .rail__guide--inline { display: block; } }

.team { display: grid; grid-template-columns: var(--w-reading) var(--rail); column-gap: var(--gutter); align-items: start; }
.team__role { font: var(--small); color: var(--ink-3); margin-top: var(--s-2); }
.team__bio { font-family: var(--font-head); font-style: italic; font-size: 22px; line-height: 1.4; margin-top: var(--s-5); }
.team__more { display: inline-block; margin-top: var(--s-5); font: var(--small); font-weight: 600; text-decoration: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.stat { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: var(--border); }
.stat:nth-child(2n) { padding-left: var(--s-4); border-left: var(--border); }
/* An odd count closes on one full-width cell, never a hole. */
.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat__value { font-family: var(--font-head); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font: var(--caption); color: var(--ink-2); margin-top: 6px; }
@media (max-width: 1140px) { .team { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); } .stat:nth-child(2n) { padding-left: 0; border-left: 0; } .stat__value { font-size: 26px; } }

.sources__title { font: var(--h2-rail); margin-top: 14px; }
.sources__list { list-style: none; padding: 0; margin-top: var(--s-5); border-top: 1px solid var(--ink); }
.sources__list a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: var(--border);
  color: var(--ink);
  text-decoration: none;
  font: var(--small);
}
.sources__why { display: block; color: var(--ink-2); margin-top: 2px; }
.sources__arrow { color: var(--accent); }
@media (max-width: 1140px) { .sources { margin-top: var(--s-6); } }

.closer .head__kicker { justify-content: center; }
.closer__body { font: var(--body-s); color: var(--ink-2); margin-top: var(--s-4); }
.closer__action { margin-top: var(--s-5); }

/* ── article · catalogs: filter chips, contents, related ────────────────── */

.page-hero__head { max-width: 760px; }
.crumbs + .page-hero__head, .crumbs + .split { margin-top: var(--s-6); }
.page-hero__sep { color: var(--rule); }
.page-hero__meta .stamp { color: var(--ink-2); }
.article .disclosure { margin-top: var(--s-5); }

.filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0; }
.filter__chip {
  font: var(--caption);
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  padding: 6px 12px;
  border: var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.filter__chip:hover { color: var(--ink); border-color: var(--ink-3); }
.filter__chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.filter-note { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); font: var(--small); color: var(--ink-2); }

.article-body { margin-top: var(--s-6); }
.article-body h2 {
  font: var(--h2-rail);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-3);
}
.article-body h2 .num { font-family: var(--font-head); font-weight: 400; color: var(--accent); }
.article-body h2 + * { margin-top: var(--s-5); }
/* About: the text starts on the line its contents start on — no gap over
   the first heading (page review 2026-10-06, #37). */
.about-body { margin-top: 0; }
.about-body > section:first-child > h2:first-child { margin-top: 0; }
.article-body .block-answer { font: var(--lede); color: var(--ink); }
.prose table { width: 100%; font: var(--small); border-top: 1px solid var(--ink); }
.prose th { font: var(--micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left; background: var(--surface); padding: 10px 12px; }
.prose td { padding: 12px; border-bottom: var(--border); vertical-align: top; }
@media (max-width: 900px) { .prose table { display: block; overflow-x: auto; } .article-body h2 { grid-template-columns: 36px 1fr; } }

/* The statistics page (NICHE-STATS-PLAN.md §2): one bar per row — label,
   bar, value — for a distribution (rating bands, seller countries). The
   bar's width is the row's share; colour is the accent, so every style and
   niche hue dresses it without a rule of its own. */
.bars { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.bars__row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; align-items: center; gap: var(--s-4); font: var(--small); }
.bars__label { color: var(--ink); }
.bars__track { display: block; height: 10px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.bars__fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: inherit; }
.bars__value { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .bars__row { grid-template-columns: 1fr auto; row-gap: var(--s-1); }
  .bars__track { grid-column: 1 / -1; grid-row: 2; }
}

.related { margin-top: var(--s-8); }
.related__list { margin-top: var(--s-4); border-top: var(--border); }
.related__list a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: var(--border);
  color: var(--ink);
  text-decoration: none;
  font: var(--body-s);
  font-weight: 500;
}
.related__list a span { color: var(--accent); }

.toc-rail .rail__label + .toc-rail__list { margin-top: var(--s-3); }
.toc-rail__list .num { color: var(--ink-3); font-weight: 400; }
.toc-rail__list a.is-active .num { color: var(--accent); }
.toc-rail__related-label { margin-top: var(--s-7); }
/* The built brand a guide names: a small card under the related guides. */
.mention { display: block; margin-top: var(--s-2); border: var(--border); border-radius: var(--r-card); padding: 16px 20px; background: var(--plate); color: var(--ink); text-decoration: none; }
.mention__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.mention__name { font-family: var(--font-head); font-weight: 500; font-size: 22px; }
.mention__verdict { padding: 0; border: 0; background: none; font-size: 13px; gap: 6px; }
.mention__verdict::before { width: 7px; height: 7px; }
.mention__meta { display: block; font: var(--small); font-size: 14px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mention:hover .mention__name { color: var(--accent); }
.toc-fold { display: none; }
@media (max-width: 1140px) {
  .article > .rail { display: none; }
  .toc-fold {
    display: block;
    margin-top: var(--s-5);
    padding: var(--s-3) var(--s-4);
    border: var(--border);
    border-radius: var(--r-card);
    background: var(--plate);
  }
  .toc-fold summary { cursor: pointer; font: var(--small); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
  .toc-fold summary::after { content: "+"; color: var(--accent); }
  .toc-fold[open] summary::after { content: "−"; }
  .toc-fold .toc-rail__list a { border-left: 0; padding-left: 0; }
}

/* ── catalogs · About · Privacy · 404 ─────────────────────────────────── */

/* Stats in one row under a page hero; cells share the width. */
.stats--row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: var(--s-6) 0; }
.stats--row .stat { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-left: 0; }
.stats--row .stat + .stat { padding-left: var(--s-4); border-left: var(--border); }
.stats--row .stat:last-child:nth-child(odd) { grid-column: auto; }
/* The brands catalog: six counters in two rows of three (two on a phone). */
.stats--grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--grid3 .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; }
@media (max-width: 900px) {
  .stats--grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--grid3 .stat:nth-child(3n+1) { padding-left: var(--s-4); border-left: var(--border); }
  .stats--grid3 .stat:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
/* About: the counters in rows of four cells of one height (two on a phone). */
.stats--grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats--grid4 .stat:nth-child(4n+1) { padding-left: 0; border-left: 0; }
@media (max-width: 900px) {
  .stats--grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--grid4 .stat:nth-child(4n+1) { padding-left: var(--s-4); border-left: var(--border); }
  .stats--grid4 .stat:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .stats--row { grid-template-columns: repeat(2, 1fr); }
  .stats--row .stat + .stat { padding-left: 0; border-left: 0; }
  .stats--row .stat:nth-child(2n) { padding-left: var(--s-4); border-left: var(--border); }
  .stats--row .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.tiles--row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; }

.ledger { list-style: none; padding: 0; }
.ledger li { position: relative; padding-left: 28px; }
.ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--neg);
  transform: rotate(45deg);
}

.prose--legal { font: var(--body-s); max-width: var(--w-narrow); }
.prose--legal .contact { margin-top: var(--s-7); }
.article > .prose { min-width: 0; }

.page--dark { background: var(--ink); color: var(--on-dark); }
.page--dark .site-header { border-bottom-color: rgba(250, 248, 244, .12); }
.page--dark .wordmark, .page--dark .wordmark b, .page--dark .site-header__menu { color: var(--on-dark); }
.page--dark .head__kicker, .page--dark .page-hero__lede { color: var(--on-dark-2); }
.page--dark a:not(.btn) { color: var(--on-dark); text-decoration-color: rgba(250, 248, 244, .4); }
.notfound {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  align-items: center;
  column-gap: var(--gutter);
  padding-block: var(--s-8);
}
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); font: var(--small); font-weight: 600; }
.notfound__num { font-family: var(--font-head); font-weight: 300; font-size: clamp(120px, 20vw, 280px); line-height: 1; color: rgba(250, 248, 244, .1); text-align: right; }
@media (max-width: 900px) { .notfound { grid-template-columns: 1fr; } .notfound__num { display: none; } }

/* A number the writer quoted, set as a number. */
.data { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── utilities ───────────────────────────────────────────────────────────── */

.kicker { font: var(--kicker); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.label { font: var(--micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dim { color: var(--ink-2); }
.center { margin-inline: auto; }
.closer { text-align: center; padding-bottom: var(--s-9); }
.closer h2 { font: var(--h2-rail); }
.closer .cta { justify-content: center; margin-top: var(--s-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── video reviews (page review round 2, R8.12) ─────────────────────────────
   YouTube's own preview; the player loads only on a press (lib/video-block.js).
   Two by two; three in one row and one alone, so no row has a hole; one
   column on a phone. */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.videos--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.videos--one { grid-template-columns: minmax(0, 1fr); max-width: var(--w-reading); }
.video { margin: 0; }
.video__play {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--r-card); background: var(--ink); cursor: pointer; overflow: hidden;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__icon {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 44px;
  border-radius: 12px; background: var(--ink); opacity: .85;
}
.video__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--on-accent);
}
.video__play:hover .video__icon, .video__play:focus-visible .video__icon { background: var(--accent); opacity: 1; }
.video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-card); }
.video figcaption { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.video__title { font-weight: 600; }
.video__meta { font: var(--caption); color: var(--ink-2); }
@media (max-width: 900px) {
  .videos, .videos--three { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* A guide: byline and disclosure above the kicker, the answer right under the H1 (META-TAGS-PACK A5). */
.article-meta { margin-bottom: var(--s-6); }
.article-meta .page-hero__meta { margin-top: 0; }
.article-lead { margin-top: 14px; }
.article-lead + .toc-fold, .article-lead + .prose { margin-top: var(--s-5); }

/* ============================================================================
   Style 4 · Minimal (STYLE-4-MINIMAL-PLAN.md, after the goldenbride project's
   design: design/Tokens.dc.html, site/assets/css/site.css)
   Laid over templates/style.css. Every rule starts with html.style-4; the
   token block comes first, its phone mirror second.

   A calm reference page: white, one face (IBM Plex Sans) with figures of one
   width everywhere, 1px grey rules, corners of 8–12, no shadows and no paper
   tint. Numbers lead: counters stand in tiles, facts in rows, models in boxed
   tables. One colour from the niche's hue; the semantic three are fixed.
   ========================================================================== */

html.style-4 {
  /* accent: deep trust tone from the niche's hue; the one colour on the page */
  --accent:       oklch(42% 0.12 var(--h));
  --accent-hover: oklch(34% 0.12 var(--h));
  --accent-line:  oklch(78% 0.07 var(--h));   /* prose underlines */
  --accent-soft:  oklch(96% 0.02 var(--h));   /* the highlighted tile, table head tint */
  --on-accent:    #fff;

  /* neutrals: white page, cool greys (goldenbride Tokens) */
  --bg:        #ffffff;
  --plate:     #ffffff;
  --surface:   #f6f7f9;   /* panels, strips, footer, alternate cells */
  --rule:      #dfe3e8;   /* every rule and card border */
  --rule-2:    #eceef1;   /* inner dividers */
  --rule-dash: #cfd5dc;   /* queued card, inputs */
  --ink:       #1a1f27;
  --ink-2:     #4a5361;
  --ink-3:     #646d79;   /* captions, labels, table heads (4.78 on --surface) */
  --ink-4:     #a0a8b3;   /* crumb separators only */
  --on-dark:   #ffffff;
  --on-dark-2: #c9d6e8;
  --meter-off: #e6e9ee;

  /* semantic — fixed (AA on its own tint) */
  --pos: #1c6b3f;  --pos-soft: #e2f2e7;
  --neu: #8a5a00;  --neu-soft: #fbeed0;
  --neg: #b02a25;  --neg-soft: #fbe2e0;
  --lim: #5c6570;  --lim-soft: #e8ebef;

  /* type: one family, tabular figures on the whole page */
  --font-head: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 700 42px/1.12 var(--font-head);
  --h2:      600 28px/1.2  var(--font-head);
  --h2-rail: 600 24px/1.25 var(--font-head);
  --h3:      600 20px/1.25 var(--font-head);
  --deck:    400 18px/1.55 var(--font-text);
  --h4:      600 16px/1.4  var(--font-text);
  --lede:    400 18px/1.55 var(--font-text);
  --body:    400 16px/1.6  var(--font-text);
  --body-s:  400 15px/1.55 var(--font-text);
  --small:   400 13.5px/1.45 var(--font-text);
  --caption: 400 13px/1.45 var(--font-text);
  --kicker:  600 12.5px/1.2 var(--font-text);
  --micro:   500 12px/1.4  var(--font-text);
  --num:     600 28px/1.1  var(--font-head);

  /* layout: 1120 wide, 760 reading, rails 440 with 48 between */
  --container: 1120px;
  --edge: max(20px, calc((100vw - var(--container)) / 2));
  --w-reading: 760px;
  --w-narrow: 560px;
  --rail: 440px;
  --gutter: 48px;
  --grid-gap: 12px;
  --section: 64px;
  --subsection: 40px;

  /* shape: 8 / 10 / 12, pills for chips and badges, 1px rules, no shadows */
  --r-chip: 999px; --r-btn: 8px; --r-card: 10px; --r-pill: 999px;
  --border: 1px solid var(--rule);
  --plate-pad: 8px;
}

@media (max-width: 900px) {
  html.style-4 {
    --display: 700 28px/1.15 var(--font-head);
    --h2:      600 22px/1.2  var(--font-head);
    --h2-rail: 600 20px/1.25 var(--font-head);
    --h3:      600 18px/1.3  var(--font-head);
    --lede:    400 16px/1.55 var(--font-text);
    --body:    400 16px/1.6  var(--font-text);
    --num:     600 24px/1.1  var(--font-head);
    --section: 48px;
    --subsection: 32px;
    --gutter: 0px;
  }
}

/* ── base ────────────────────────────────────────────────────────────────── */

/* Element rules sit at the base's own weight (:where), so every component
   rule of the base still wins over them and reads this style's tokens.
   Figures are one width on the whole page, as on the source. */
:where(html.style-4) body { font: var(--body); background: var(--bg); color: var(--ink); }
/* Every `font:` shorthand resets the figures to proportional, so "tnum on
   body" alone reached nothing that sets its own font: forced once here. */
html.style-4 body * { font-variant-numeric: tabular-nums !important; }
:where(html.style-4) h1 { font: var(--display); letter-spacing: -.02em; }
:where(html.style-4) h2 { font: var(--h2); letter-spacing: -.01em; }
:where(html.style-4) h3 { font: var(--h3); letter-spacing: -.005em; }
:where(html.style-4) h4 { font: var(--h4); }
:where(html.style-4) a { text-underline-offset: 3px; }
html.style-4 .num, html.style-4 .data { font-weight: 600; color: var(--ink); }
html.style-4 .arr { margin-left: 2px; }
/* The question half of a brand's H1: the same face, quieter. */
html.style-4 .hero__em { font-style: normal; font-weight: 500; color: var(--ink-2); }

/* Labels: small capitals in grey, as the source's .label. They stay on every
   page, the brand page's section kickers too (R4 is not this style's). */
html.style-4 :is(.head__kicker, .label, .kicker, .rail__label, .facts__label, .cta__tag, .sub__mark, .prow__eyebrow, .prose__note-label, .acard__top) {
  font: var(--kicker);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html.style-4 .head__kicker::before { display: none; }

/* Interface links: bold accent words with the arrow, never underlined. */
html.style-4 :is(.tile__cta, .items__more a, .section__more a, .head__aside-more a, .grid-note a, .bcard__cta, .acard__more, .acard__meta a, .team__more, .line__all a, .table__note a, .prow__cta, .rail__guide a) {
  font: 600 14px/1.4 var(--font-text);
  color: var(--accent);
  text-decoration: none;
}
html.style-4 :is(.items__more a, .section__more a, .head__aside-more a, .grid-note a, .team__more, .line__all a, .table__note a, .rail__guide a):hover { color: var(--accent-hover); }

/* ── layout: 1120 wide; the text beside a 440 rail takes what is left ──── */

/* 760 + 48 + 440 is wider than the container: the reading width is for a
   column alone (a guide, a solo section); beside a rail the text gets the
   rest (632). */
html.style-4 .split { grid-template-columns: minmax(0, 1fr) var(--rail); }
html.style-4 .split--narrow { grid-template-columns: minmax(0, var(--w-narrow)) var(--rail); }
html.style-4 .team { grid-template-columns: minmax(0, 1fr) var(--rail); }
@media (max-width: 1140px) {
  html.style-4 :is(.split, .split--narrow, .team) { grid-template-columns: minmax(0, 1fr); }
}

/* ── buttons · badges · score meter · the score · chips ──────────────────── */

html.style-4 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 15px/1.2 var(--font-text);
}
html.style-4 .btn:hover { background: var(--accent-hover); color: var(--on-accent); }
html.style-4 .btn .arr { margin-left: 0; }
html.style-4 .btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
html.style-4 .cta__note { font: var(--caption); color: var(--ink-3); }
html.style-4 .cta__tag { display: inline; margin-right: 4px; font-size: 11.5px; }
html.style-4 .cta__tag::after { content: " ·"; letter-spacing: 0; }

/* The badge: the source's "Prices verified" pill — its tone, a 1px edge in
   the tone, a round dot. */
html.style-4 .badge {
  height: 26px;
  padding: 0 10px;
  gap: 6px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--r-pill);
  background: var(--lim-soft);
  color: var(--lim);
  font: 600 12.5px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
}
html.style-4 .badge::before { width: 6px; height: 6px; border: 0; border-radius: 50%; transform: none; background: currentColor; }
html.style-4 .badge--pos { background: var(--pos-soft); color: var(--pos); }
html.style-4 .badge--neu { background: var(--neu-soft); color: var(--neu); }
html.style-4 .badge--neg { background: var(--neg-soft); color: var(--neg); }
html.style-4 .badge--sm { height: 22px; padding: 0 8px; font-size: 12px; }

/* The meter: three short bars, then the word in its tone. */
html.style-4 .marks { gap: 3px; }
html.style-4 .mark { width: 14px; height: 8px; border: 0; border-radius: 4px; background: var(--meter-off); }
html.style-4 .mark--pos { background: var(--pos); }
html.style-4 .mark--neu { background: var(--neu); }
html.style-4 .mark--neg { background: var(--neg); }
html.style-4 :is(.mark--pos-off, .mark--neu-off, .mark--neg-off, .mark--none) { border: 0; background: var(--meter-off); }
html.style-4 .eval__level { gap: 10px; }
html.style-4 .eval__level-word { font: 600 13.5px/1.3 var(--font-text); color: var(--lim); }
html.style-4 .eval__level-word.is-pos { color: var(--pos); }
html.style-4 .eval__level-word.is-neu { color: var(--neu); }
html.style-4 .eval__level-word.is-neg { color: var(--neg); }
html.style-4 .eval__level-word.is-lim { color: var(--lim); }

/* The score out of 100: the number bold in the accent, "/100" quieter; under
   the six scores it is the source's highlighted "Typical" tile. */
html.style-4 .bcard__score { font: 500 13.5px/1.3 var(--font-text); color: var(--ink-3); }
html.style-4 .bcard__score b { font-weight: 700; color: var(--accent); }
html.style-4 .hero__score { font-weight: 700; color: var(--accent); }
html.style-4 .scores__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
}
html.style-4 .scores__total .scores__name { font: var(--kicker); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html.style-4 .scores__total b { font: 700 28px/1.1 var(--font-head); letter-spacing: -.01em; color: var(--accent); }

/* Numbers read first: 28/600, ink. */
html.style-4 :is(.facts__value, .stat__value, .hero-figure__text .num) { font: var(--num); letter-spacing: -.01em; color: var(--ink); }

html.style-4 :is(.chip, .chip--round) { display: inline-flex; align-items: center; padding: 6px 12px; border: var(--border); border-radius: var(--r-pill); background: var(--plate); font: 600 13.5px/1.2 var(--font-text); color: var(--ink); }

/* ── panels · the bridge card · tables · FAQ · numbers in circles ────────── */

/* Every rail is a quiet grey panel (the source's .panel.neutral / .strip). */
html.style-4 .rail__inner { padding: 20px; background: var(--surface); border: var(--border); border-radius: var(--r-card); }

/* A quote and a closing call: the source's bridge card — grey, framed, a
   4px accent edge on the left. */
html.style-4 :is(.rail__quote, .stretch__quote, .closer > .w-narrow) {
  padding: 22px 24px;
  background: var(--surface);
  border: var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-card);
}
html.style-4 :is(.rail__quote, .stretch__quote) { font: 500 18px/1.45 var(--font-head); font-style: normal; color: var(--ink); }

/* Tables in a frame: grey small-capital heads over a 2px rule. */
html.style-4 .table__wrap { border: var(--border); border-radius: var(--r-card); background: var(--plate); overflow-x: auto; }
html.style-4 .table { font: 400 15px/1.45 var(--font-text); }
html.style-4 .table th { padding: 12px 14px; background: var(--plate); border-bottom: 2px solid var(--rule); font: var(--kicker); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
html.style-4 .table td { padding: 13px 14px; }
html.style-4 .table tbody tr { border-bottom: var(--border); }
html.style-4 .table tbody tr:last-child { border-bottom: 0; }
html.style-4 .table .is-num { font-weight: 600; }
html.style-4 .table a { font-weight: 600; color: var(--ink); text-decoration: none; }
html.style-4 .table a:hover { color: var(--accent); }
html.style-4 .table__group td { padding: 18px 14px 8px; background: var(--surface); border-bottom: var(--border); font: 600 15px/1.3 var(--font-head); }
html.style-4 .table__group:first-child td { padding-top: 12px; }
html.style-4 .table__note { font: var(--caption); color: var(--ink-3); }
html.style-4 .table__jump a { padding: 6px 12px; font: 600 13px/1.2 var(--font-text); }
html.style-4 .table__jump a:hover { border-color: var(--accent); color: var(--accent); }

/* The FAQ: one framed accordion, a ▾ that turns over when open. */
html.style-4 .faq { border: var(--border); border-radius: var(--r-card); background: var(--plate); overflow: hidden; }
html.style-4 .faq__item { padding: 0; border-bottom: var(--border); }
html.style-4 .faq__item:last-child { border-bottom: 0; }
html.style-4 .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 18px; }
html.style-4 .faq__num { display: none; }
html.style-4 .faq__text { font: 500 16px/1.4 var(--font-text); color: var(--ink); }
html.style-4 .faq__sign { flex: none; width: 14px; font-size: 0; line-height: 1; text-align: center; transition: transform .2s ease; }
html.style-4 .faq__sign::after { content: "▾"; font-size: 17px; color: var(--ink-3); }
html.style-4 .faq__item[open] .faq__sign { transform: rotate(180deg); }
html.style-4 .faq__a { margin: 0; padding: 0 18px 18px; font: 400 15px/1.6 var(--font-text); color: var(--ink-2); }
html.style-4 .faq__a > * + * { margin-top: 12px; }

/* Numbered rows: the number in a 28px accent circle. */
html.style-4 :is(.items__num, .criteria__num, .steps__num) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 12px/1 var(--font-text);
  letter-spacing: 0;
}

/* ── counter tiles: the hero's figure and the brand's facts ──────────────── */

/* The source's Low / Typical / High: framed tiles, the first one highlighted. */
html.style-4 .hero-figure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; background: transparent; border: 0; border-radius: 0; }
html.style-4 .hero-figure__bar { display: none; }
html.style-4 .hero-figure__row { padding: 12px 12px 14px; background: var(--plate); border: var(--border); border-radius: var(--r-card); min-width: 0; }
html.style-4 .hero-figure__row:first-child { border-color: var(--accent); background: var(--accent-soft); }
html.style-4 .hero-figure__text { display: flex; flex-direction: column-reverse; gap: 6px; margin: 0; font: var(--kicker); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html.style-4 .hero-figure__text .num { margin: 0; text-transform: none; }
html.style-4 .hero-figure__foot { grid-column: 1 / -1; gap: 4px 6px; padding: 4px 0 0; border: 0; font: var(--small); color: var(--ink-3); }
html.style-4 .hero-figure__foot .num { font-weight: 600; color: var(--ink-2); }
html.style-4 .hero-figure__foot .hero__sep { color: var(--ink-4); }
/* The catalog's six tiles in the homepage hero (user, 2026-10-16): three to a row, the first one marked. */
html.style-4 .hero-figure--tiles .hero-figure__row { padding: 14px 14px 16px; }
@media (max-width: 1140px) {
  html.style-4 .hero-figure { max-width: none; }
}
@media (max-width: 900px) {
  html.style-4 .hero-figure { gap: 6px; }
  html.style-4 .hero-figure__row { padding: 10px 10px 12px; }
  html.style-4 .hero-figure__text { font-size: 11.5px; }
  html.style-4 .hero-figure__text .num { font-size: clamp(17px, 5vw, 24px); }
  /* Six tiles with the catalog's long labels: two to a row on a phone, as in the catalog. */
  html.style-4 .hero-figure--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-4 .hero-figure--tiles .hero-figure__row { padding: 12px 12px 14px; }
}

/* One row of tiles however many facts there are (three to six); two across
   on a phone, an odd last one across the row (the base's rule). */
html.style-4 .facts, html.style-4 :is(.facts--4, .facts--5) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; border: 0; }
@media (max-width: 900px) {
  html.style-4 .facts, html.style-4 :is(.facts--4, .facts--5) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.style-4 .facts > .facts__item:nth-child(n) { display: flex; flex-direction: column; padding: 14px 16px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 .facts__value { margin-top: 6px; }
html.style-4 .facts__note { margin-top: 4px; font: var(--caption); color: var(--ink-3); }

/* ── header · phone menu ─────────────────────────────────────────────────── */

html.style-4 .site-header { height: 64px; background: var(--bg); border-bottom: var(--border); }
html.style-4 .wordmark { font: 700 17px/1 var(--font-head); letter-spacing: -.01em; color: var(--accent); white-space: nowrap; }
html.style-4 .wordmark b { color: inherit; font-weight: inherit; }
html.style-4 .site-nav { gap: 22px; font: 500 14.5px/1 var(--font-text); }
html.style-4 .site-nav a:not(.btn) { color: var(--ink); }
html.style-4 .site-nav a:not(.btn):hover { color: var(--accent); }
html.style-4 .site-nav .btn { margin-left: 4px; }

@media (max-width: 900px) {
  html.style-4 .site-header { height: 64px; position: relative; }
  html.style-4 .wordmark { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.style-4 .site-header__menu { margin-right: -10px; color: var(--ink); }
  /* The open menu: white rows under the bar, a rule under each. */
  html.style-4 .site-header--open .site-nav {
    top: 64px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg);
    border-top: var(--border);
    border-bottom: 0;
  }
  html.style-4 .site-header--open .site-nav a:not(.btn) { padding: 12px var(--edge); border-bottom: var(--border); font: 500 16px/1.4 var(--font-text); }
  /* The Amazon button closes the menu on a brand page, a rule under it. */
  html.style-4 .site-header--open .site-nav:has(.btn) { border-bottom: var(--border); }
  html.style-4 .site-header--open .site-nav .btn { margin: 16px var(--edge); min-height: 44px; }
}

/* ── footer: the light grey band of the source ──────────────────────────── */

html.style-4 .site-footer {
  margin-top: var(--section);
  padding: 32px var(--edge) 36px;
  background: var(--surface);
  color: var(--ink-2);
  border-top: var(--border);
  border-radius: 0;
  column-gap: var(--gutter);
}
html.style-4 .site-footer a { color: var(--ink-2); }
html.style-4 .site-footer a:hover { color: var(--accent); text-decoration: none; }
html.style-4 .site-footer .wordmark, html.style-4 .site-footer .wordmark b { font-size: 15px; color: var(--accent); }
html.style-4 .site-footer__nav { gap: 8px 20px; margin-top: 16px; font: 400 13.5px/1.4 var(--font-text); }
html.style-4 .site-footer__legal { margin-top: 20px; font: 400 12.5px/1.45 var(--font-text); color: var(--ink-3); }
html.style-4 .site-footer__mission { font: 400 14px/1.55 var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-4 .site-footer__fineprint { margin-top: 12px; font: 400 12.5px/1.5 var(--font-text); color: var(--ink-3); }
@media (max-width: 900px) {
  html.style-4 .site-footer { row-gap: 20px; padding: 28px 20px 32px; }
}

/* ── disclosure · stamp · crumbs ─────────────────────────────────────────── */

html.style-4 .disclosure { padding: 12px 0; font: var(--small); color: var(--ink-3); }
html.style-4 .stamp, html.style-4 .stamp span { color: var(--ink-3); }
html.style-4 .crumbs { gap: 6px; font: var(--small); color: var(--ink-3); }
html.style-4 .crumbs > span[aria-hidden] { color: var(--ink-4); }
html.style-4 .crumbs a { color: var(--ink-2); }
html.style-4 .crumbs a:hover { color: var(--accent); }
html.style-4 .crumbs [aria-current] { font-weight: 500; color: var(--ink); }

/* ── the sticky Shop bar (phones): white, a rule and a soft shadow above ── */

@media (max-width: 720px) {
  html.style-4 .mobile-cta {
    align-items: center;
    min-height: calc(56px + env(safe-area-inset-bottom));
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: var(--border);
    box-shadow: 0 -4px 16px rgba(20, 20, 20, .08);
  }
  html.style-4 .mobile-cta .btn { flex: 1; min-height: 40px; padding: 0 16px; font-size: 14px; }
  html.style-4 .has-mobile-cta { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ── section heads ───────────────────────────────────────────────────────── */

html.style-4 .section:first-of-type { padding-top: 40px; }
html.style-4 .head__kicker + .head__title { margin-top: 8px; }
html.style-4 .head__lede, html.style-4 :is(.head--split, .head--aside) .head__lede { margin-top: 10px; max-width: var(--w-reading); font: 400 15px/1.55 var(--font-text); color: var(--ink-3); }
html.style-4 .head__title + :where(*), html.style-4 .head:where(:has(> .head__title:last-child)) + :where(*) { margin-top: 20px; }
html.style-4 :is(.head--split, .head--aside) { margin-bottom: 24px; }
/* A wide head: the heading and its lede on the left; on the right only what
   the head carries — the link to every brand at the foot of the lede, or
   the badge rule as a panel. The brand counts repeat the hero's tiles (R3). */
html.style-4 .head--aside { grid-template-columns: minmax(0, var(--w-reading)) minmax(0, 1fr); column-gap: var(--gutter); }
html.style-4 .head__aside .stats--row { display: none; }
html.style-4 #brands .head--aside { align-items: end; }
html.style-4 #brands .head__aside { width: auto; }
html.style-4 .head__aside-more { margin: 0; }

/* ── homepage · hero ─────────────────────────────────────────────────────── */

html.style-4 #entry .hero { margin-top: 0; }
html.style-4 #entry .head__kicker { margin-bottom: 12px; }
html.style-4 #entry .page-hero__title { margin-top: 0; }
html.style-4 .hero__lede { margin-top: 16px; font: var(--lede); color: var(--ink-2); }
html.style-4 .hero__stats { gap: 6px 14px; margin-top: 20px; font: var(--small); color: var(--ink-3); }
html.style-4 .hero__stats b { color: var(--ink); }
html.style-4 .hero__sep { color: var(--ink-4); }
html.style-4 #entry .hero-figure { margin-top: 4px; }
/* Where to start: the source's stage cards, four across. */
html.style-4 .tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grid-gap); margin: 40px 0 24px; }
html.style-4 .tile {
  gap: 6px;
  min-height: 0;
  padding: 18px;
  background: var(--plate);
  border: var(--border);
  border-radius: var(--r-card);
}
html.style-4 .tile:hover { border-color: var(--accent); }
html.style-4 .tile__title { font: 600 16px/1.35 var(--font-head); color: var(--ink); }
html.style-4 .tile:hover .tile__title { color: var(--ink); }
html.style-4 .tile__desc { font: 400 14px/1.5 var(--font-text); color: var(--ink-2); }
html.style-4 .tile__cta { margin-top: auto; padding-top: 4px; font-size: 13.5px; }

/* ── homepage · brand cards: the stage card, a thumbnail on the left ────── */

/* The base's remainder rule stays: three to a row, and a count that is not a
   multiple of three leads with one full-width card or two halves, so no row
   ends in a hole (five alternatives, seventeen guides). */
html.style-4 .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); }
html.style-4 .cards > * { grid-column: span 2; }
html.style-4 .cards > [class*="--half"] { grid-column: span 3; }
html.style-4 .cards > [class*="--featured"] { grid-column: 1 / -1; }
html.style-4 .bcard--featured .bcard__summary { max-width: var(--w-reading); }
@media (max-width: 1140px) {
  html.style-4 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-4 .cards > *, html.style-4 .cards > [class*="--half"] { grid-column: span 1; }
  html.style-4 .cards > [class*="--featured"] { grid-column: 1 / -1; }
}
/* No thumbnail: at 56px the photo showed nothing a buyer could read (user,
   2026-10-15) — homepage, catalog and alternatives alike. */
html.style-4 .bcard, html.style-4 .bcard--featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 18px;
  background: var(--plate);
  border: var(--border);
  border-radius: var(--r-card);
}
html.style-4 a.bcard:hover { border-color: var(--accent); color: var(--ink); }
html.style-4 .bcard__body { grid-column: 1; grid-row: 1; height: 100%; }
html.style-4 .bcard__plate, html.style-4 .bcard--featured .bcard__plate { display: none; }
html.style-4 .bcard__top { align-items: center; gap: 8px; }
html.style-4 .bcard__index { font: 500 12.5px/1 var(--font-text); color: var(--ink-3); }
html.style-4 .bcard__name, html.style-4 .bcard--featured .bcard__name { margin-top: 10px; font: 600 20px/1.25 var(--font-head); letter-spacing: -.01em; }
html.style-4 .bcard__rating { margin-top: 4px; font: 400 15px/1.4 var(--font-text); color: var(--ink-3); }
html.style-4 .bcard__rating strong { font-weight: 600; color: var(--ink); }
html.style-4 .bcard__line { margin-top: 2px; font: var(--small); color: var(--ink-3); }
html.style-4 .bcard__summary { margin-top: 10px; font: 400 15px/1.5 var(--font-text); color: var(--ink-2); }
html.style-4 .bcard__cta { padding-top: 12px; font-size: 13.5px; }
/* Queued: a dashed card, nothing to press. */
html.style-4 .bcard--soon { background: transparent; border: 1px dashed var(--rule-dash); }
html.style-4 .bcard--soon .bcard__name { color: var(--ink-2); }

/* ── homepage · what to check: the source's facts rows ───────────────────── */

/* Each factor is a row between 1px rules: its number in a circle, the
   question, the theses beside it. */
html.style-4 .items, html.style-4 :is(.items--2, .items--3, .items--stack) { display: block; border-top: var(--border); }
html.style-4 .items__item, html.style-4 .items--3 .items__item, html.style-4 .items--2 > .items__item:first-child {
  display: grid;
  grid-template-columns: 28px minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 16px;
  padding: 24px 0;
  border-bottom: var(--border);
}
html.style-4 .items__item > div, html.style-4 .items--2 > .items__item:first-child > div { display: contents; }
html.style-4 .items__lead { grid-column: 2; padding-right: 24px; }
html.style-4 .items__title, html.style-4 .prose .items__title { font: var(--h3); }
html.style-4 .items__body, html.style-4 .items--2 > .items__item:first-child .items__body { grid-column: 3; margin-top: 0; font: 400 15px/1.6 var(--font-text); color: var(--ink-2); }
html.style-4 .items__body > * + * { margin-top: 10px; }
html.style-4 .items__body > p:not(.items__more) { position: relative; padding-left: 18px; }
html.style-4 .items__body > p:not(.items__more)::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
html.style-4 .items__body > .items__more { margin-top: 14px; }

/* ── homepage · how we rate ──────────────────────────────────────────────── */

/* The badge rule: a grey panel beside the heading. */
/* The badge panel takes five twelfths; the text column was 760 of mostly
   empty lines beside a narrow panel (user, 2026-10-15). */
html.style-4 #how-we-evaluate .head--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
html.style-4 #how-we-evaluate .head__aside { width: auto; padding: 20px 24px; background: var(--surface); border: var(--border); border-radius: var(--r-card); }
html.style-4 .badge-scale__item .badge { flex: none; }
html.style-4 #how-we-evaluate .head__aside > .label { margin: 0; }
html.style-4 .badge-scale { gap: 10px; margin-top: 14px; }
html.style-4 .badge-scale__item { gap: 12px; }
html.style-4 .badge-scale__item .badge { min-width: 112px; }
html.style-4 .badge-scale__rule { font: 400 14px/1.4 var(--font-text); color: var(--ink-2); }
html.style-4 .method__text { margin-top: 12px; font: var(--small); color: var(--ink-3); }
html.style-4 .criteria { column-gap: var(--gutter); border-top: var(--border); }
html.style-4 .criteria__item { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: var(--border); }
html.style-4 .criteria__title { font: 600 16px/1.4 var(--font-head); }
html.style-4 .criteria__text { margin-top: 4px; font: 400 15px/1.55 var(--font-text); color: var(--ink-2); }
html.style-4 .section__more { margin-top: 20px; }

/* ── homepage · topic blocks ─────────────────────────────────────────────── */

html.style-4 .steps { gap: 0; border-top: var(--border); }
html.style-4 .steps__item { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: var(--border); font: 400 16px/1.6 var(--font-text); }
html.style-4 .steps__num { margin-top: -1px; }
html.style-4 .rail__next { margin-top: 0; }
html.style-4 .rail__inner > :not(.rail__next) + .rail__next { margin-top: 20px; }
html.style-4 .rail__index { margin-top: 8px; font: 400 14.5px/1.45 var(--font-text); }
html.style-4 .rail__index a { gap: 12px; padding: 10px 0; border-top: var(--border); }
html.style-4 .rail__index a:last-child { border-bottom: 0; padding-bottom: 0; }
html.style-4 .rail__index a:hover { color: var(--accent); }
html.style-4 .rail__index span { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* The stretch's chapter rail (older homepages): the panel's list. */
html.style-4 .rail--chapters .toc-rail__list a, html.style-4 .jump .toc-rail__list a { border-left-color: var(--rule); }
html.style-4 .rail--chapters .toc-rail__list a.is-active { border-left-color: var(--accent); }

/* ── homepage · guides · videos · team ───────────────────────────────────── */

html.style-4 .acard, html.style-4 .acard--featured { padding: 18px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 a.acard:hover { border-color: var(--accent); }
html.style-4 .acard__top { justify-content: space-between; }
html.style-4 .acard__index { font: 500 12.5px/1.2 var(--font-text); letter-spacing: 0; color: var(--ink-3); }
html.style-4 .acard__title { margin-top: 10px; font: 600 17px/1.35 var(--font-head); }
html.style-4 .acard__excerpt { margin-top: 8px; font: 400 14px/1.5 var(--font-text); color: var(--ink-2); }
html.style-4 .acard__meta { padding-top: 14px; font: var(--caption); color: var(--ink-3); }
html.style-4 .acard__more { font-size: 13.5px; }
html.style-4 .grid-note { margin-top: 16px; font: var(--small); color: var(--ink-3); }

html.style-4 .videos, html.style-4 .videos--three { gap: 16px; }
html.style-4 .videos--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.style-4 .video__play, html.style-4 .video__frame { border-radius: var(--r-card); }
html.style-4 .video__icon { width: 52px; height: 36px; border-radius: 8px; }
html.style-4 .video__title { font: 600 15px/1.4 var(--font-text); }
html.style-4 .video__meta { font: var(--caption); color: var(--ink-3); }

/* The team: who we are on the left, the counts as tiles on the right. */
html.style-4 .team { align-items: start; }
html.style-4 .team__role { margin-top: 10px; font: 400 15px/1.55 var(--font-text); color: var(--ink-3); }
html.style-4 .team__bio { margin-top: 16px; font: 400 17px/1.6 var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-4 .team__more { margin-top: 16px; }
html.style-4 .stats { gap: 8px; border-top: 0; }
html.style-4 .stats > .stat:nth-child(n) { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 12px 14px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 .stat__label { margin: 0; font: var(--kicker); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html.style-4 .team .stat__value { font-size: 24px; }

/* ── homepage · FAQ and further reading ──────────────────────────────────── */

html.style-4 .sources { padding: 20px 24px; background: var(--surface); border: var(--border); border-radius: var(--r-card); }
html.style-4 .sources__title { margin-top: 8px; font: 600 20px/1.3 var(--font-head); }
html.style-4 .sources__list { margin-top: 12px; border-top: var(--border); }
html.style-4 .sources__list a { padding: 12px 0; font: 400 14px/1.45 var(--font-text); }
html.style-4 .sources__list li:last-child a { border-bottom: 0; padding-bottom: 0; }
html.style-4 .sources__list strong { font-weight: 600; color: var(--ink); }
html.style-4 .sources__list a:hover strong { color: var(--accent); }
html.style-4 .sources__why { margin-top: 2px; font: var(--small); color: var(--ink-3); }

/* ── the closing call: the bridge card, the button on the right ─────────── */

html.style-4 .closer { padding-bottom: 0; text-align: left; }
html.style-4 .closer > .w-narrow {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: center;
}
html.style-4 .closer h2 { grid-column: 1; margin: 0; font: 600 20px/1.3 var(--font-head); }
html.style-4 .closer .closer__body { grid-column: 1; max-width: var(--w-reading); margin-top: 6px; font: 400 15px/1.55 var(--font-text); color: var(--ink-2); }
html.style-4 .closer .closer__body strong { font-weight: 600; }
html.style-4 .closer :is(.closer__action, .cta) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* ── homepage on a phone ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  html.style-4 .head--aside { grid-template-columns: minmax(0, 1fr); }
  html.style-4 #brands .head__aside { margin-top: 12px; }
  html.style-4 .tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
  html.style-4 .tile { padding: 14px 16px; }
  html.style-4 .cards { grid-template-columns: minmax(0, 1fr); }
  html.style-4 .cards > *, html.style-4 .cards > :is([class*="--half"], [class*="--featured"]) { grid-column: auto; }
  html.style-4 .bcard, html.style-4 .bcard--featured { padding: 16px; }
  html.style-4 .items__item, html.style-4 .items--3 .items__item, html.style-4 .items--2 > .items__item:first-child { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  html.style-4 .items__lead { padding-right: 0; }
  html.style-4 .items__body, html.style-4 .items--2 > .items__item:first-child .items__body { grid-column: 2; margin-top: 12px; }
  html.style-4 #how-we-evaluate .head__aside { margin-top: 16px; padding: 18px; }
  html.style-4 .videos--four { grid-template-columns: minmax(0, 1fr); }
  html.style-4 .team .stats { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-4 .sources { margin-top: 32px; padding: 18px; }
  html.style-4 .closer > .w-narrow { display: block; padding: 20px; }
  html.style-4 .closer :is(.closer__action, .cta) { margin-top: 16px; }
  html.style-4 .closer .btn { display: flex; width: 100%; }
}

/* ── brand page · hero, contents strip, facts ────────────────────────────── */

html.style-4 #brand-hero { padding-top: 24px; }
html.style-4 #brand-hero .crumbs + .hero { margin-top: 28px; }
html.style-4 #brand-hero .hero__lede { margin-top: 16px; }
html.style-4 .hero__lede > p + p { margin-top: 12px; }
html.style-4 .hero__verdict { color: var(--ink); }
html.style-4 .hero__verdict .badge { vertical-align: 1px; }
html.style-4 #brand-hero .hero__media { padding: 16px; }
html.style-4 .toc-strip { margin-top: 36px; gap: 0 24px; border-top: var(--border); border-bottom: var(--border); font: 500 14px/1.3 var(--font-text); }
html.style-4 .toc-strip a { padding: 13px 0; color: var(--ink-2); }
html.style-4 .toc-strip a:first-child { color: var(--accent); border-bottom-color: var(--accent); }
html.style-4 .toc-strip a:hover { color: var(--accent); }
html.style-4 .toc-strip + .disclosure { border-top: 0; }
html.style-4 #facts { padding-top: 32px; }

/* ── brand page · verdict ────────────────────────────────────────────────── */

html.style-4 .verdict__head { gap: 10px 16px; margin-top: 8px; }
html.style-4 .verdict__lede { margin-top: 20px; font: 400 17px/1.6 var(--font-text); }
/* The rail: the six scores, the score tile, the button across the panel. */
html.style-4 .rail--verdict .scores { margin-top: 0; border-top: 0; }
html.style-4 .scores > .label { margin: 0 0 6px; }
html.style-4 .scores__item { gap: 12px; padding: 9px 0; border-bottom: var(--border); }
html.style-4 .scores__name { font: 400 15px/1.4 var(--font-text); color: var(--ink); }
html.style-4 .rail--verdict .cta { display: grid; gap: 10px; margin-top: 16px; padding: 0; border: 0; }
html.style-4 .rail--verdict .cta .btn { width: 100%; }
/* Best for / not best for, and what owners praise / complain about. */
html.style-4 .signals-below { margin-top: 40px; padding-top: 32px; border-top: var(--border); }
html.style-4 .signals { column-gap: var(--gutter); }
html.style-4 .signals__col-head { align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--rule); }
html.style-4 .signals__title { font: 600 16px/1.4 var(--font-head); }
html.style-4 .signals__tag { padding: 3px 9px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--r-pill); background: var(--pos-soft); font: 600 11.5px/1.2 var(--font-text); letter-spacing: .06em; }
html.style-4 .signals__col--skip .signals__tag { background: var(--neg-soft); }
html.style-4 .signals ul { font: 400 15px/1.55 var(--font-text); }
html.style-4 .signals li { gap: 10px; padding: 12px 0; }
html.style-4 .signals li::before { width: 6px; height: 6px; margin-top: 8px; border-radius: 1px; }

/* ── brand page · reading sections ───────────────────────────────────────── */

/* A section with no rail reads at the reading width, nothing beside it (R2). */
html.style-4 .solo { max-width: var(--w-reading); }
html.style-4 .page-brand .split > .rail { padding-top: 0; }
/* What a rail panel holds sits on the panel itself: no second grey box. */
html.style-4 .rail__inner :is(.prose__note, .stat-plate, .rail__aside) { padding: 0; background: transparent; border-radius: 0; }
html.style-4 .rail__inner .prose__note { font: 400 14.5px/1.5 var(--font-text); }
html.style-4 .prose__note-label { margin-bottom: 8px; }
html.style-4 .prose__note ul { gap: 6px; padding-left: 1.1em; }
html.style-4 .prose__note { padding: 18px 20px; background: var(--surface); border: var(--border); border-radius: var(--r-card); font: 400 15px/1.55 var(--font-text); }
html.style-4 .rail__inner .prose__note { border: 0; }
/* Quotes: white cards with the accent edge; a quote in a panel stays white. */
html.style-4 .quote { margin-top: 10px; padding: 16px 18px; background: var(--plate); border: var(--border); border-left: 4px solid var(--accent); border-radius: var(--r-card); }
html.style-4 .quote p { font: 400 16px/1.55 var(--font-text); font-style: normal; color: var(--ink); }
html.style-4 .quote__source { margin-top: 8px; font: var(--caption); color: var(--ink-3); }
html.style-4 .quote__source a { text-decoration: none; }
html.style-4 .rail__inner .rail__quote { margin-top: 16px; background: var(--plate); }
html.style-4 .rail__inner > .rail__quote:first-child { margin-top: 0; }
html.style-4 .rail__inner > .label + .quote { margin-top: 10px; }

/* The line: the head and text at the reading width; the model photos as
   small cards, the notes per model and the groups as cards two to a row,
   the tables across the full width (styles screen pass, §5). */
html.style-4 .strip--line { gap: 12px; margin-top: 28px; }
html.style-4 .strip a { display: block; padding: 8px 8px 12px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 .strip a:hover { border-color: var(--accent); }
html.style-4 .strip .plate { padding: 0; border: 0; border-radius: 6px; }
html.style-4 .strip__caption { margin-top: 10px; font: 500 13.5px/1.35 var(--font-text); color: var(--ink); }
html.style-4 .line__models { margin-top: 32px; max-width: none; }
html.style-4 .line__models > .prose { max-width: var(--w-reading); }
html.style-4 .line__models:has(> .sub + .sub) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.style-4 .line__models:has(> .sub + .sub) > :not(.sub) { grid-column: 1 / -1; }
html.style-4 .line__models > .sub:nth-last-child(1 of .sub):nth-child(odd of .sub) { grid-column: 1 / -1; }
html.style-4 .sub { margin-top: 0; padding: 20px 22px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 .line__models > .prose + .sub, html.style-4 .line__models > .sub:only-of-type { margin-top: 20px; }
html.style-4 .sub__title { margin-top: 0; font: 600 18px/1.35 var(--font-head); }
html.style-4 .sub__mark + .sub__title { margin-top: 6px; }
html.style-4 .sub .prose { margin-top: 8px; font: 400 15px/1.55 var(--font-text); color: var(--ink-2); }
html.style-4 .sub .plist { margin-top: 12px; }
html.style-4 .plist--compact .prow { padding: 9px 0; border-top: var(--border); }
html.style-4 .plist--compact .prow:last-child { border-bottom: 0; padding-bottom: 0; }
html.style-4 .plist--compact .prow__name { font: 500 15px/1.4 var(--font-text); }
html.style-4 .prow__name a { color: var(--ink); text-decoration: none; }
html.style-4 .prow__name a:hover { color: var(--accent); }
html.style-4 .table__title { margin-top: 40px; font: 600 18px/1.35 var(--font-head); }
html.style-4 .line__all { margin-top: 20px; padding-top: 0; border-top: 0; }

/* Alternatives: the same cards, without the sentence. */
html.style-4 .alternatives__cards { margin-top: 24px; }
html.style-4 .alternatives__all { margin-top: 16px; }

/* Where to buy: the bridge card, the button and its note on the right. */
html.style-4 .closer .cta { display: grid; justify-items: stretch; gap: 8px; max-width: 280px; padding: 0; border: 0; }
html.style-4 .closer .cta__note { text-align: left; }

/* ── guides ──────────────────────────────────────────────────────────────── */

/* The text at the reading width; the contents panel beside it only when the
   guide has one (three sections or more). */
html.style-4 .split.article { grid-template-columns: minmax(0, var(--w-reading)) minmax(0, 1fr); }
html.style-4 .toc-rail:has(> *) { padding: 20px; background: var(--surface); border: var(--border); border-radius: var(--r-card); }
html.style-4 .toc-rail__list { margin-top: 10px; font: 400 14px/1.4 var(--font-text); }
html.style-4 .toc-rail__list a { grid-template-columns: 26px minmax(0, 1fr); padding: 7px 0 7px 12px; border-left: 2px solid var(--rule); color: var(--ink-2); }
html.style-4 .toc-rail__list a:hover { color: var(--ink); }
html.style-4 .toc-rail__list a.is-active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
html.style-4 .toc-rail__list .num { color: var(--ink-3); }
html.style-4 .toc-rail__related-label { margin-top: 24px; }
html.style-4 .toc-rail > .toc-rail__related-label:first-child { margin-top: 0; }
/* The brand a guide names: a framed card. */
html.style-4 .mention { margin-top: 10px; padding: 14px 16px; background: var(--plate); border: var(--border); border-radius: var(--r-card); }
html.style-4 a.mention:hover { border-color: var(--accent); }
html.style-4 .mention__top { align-items: center; }
html.style-4 .mention__name { font: 600 18px/1.3 var(--font-head); }
html.style-4 .mention:hover .mention__name { color: var(--ink); }
html.style-4 .mention__meta { margin-top: 6px; font: var(--small); color: var(--ink-3); }
html.style-4 .mention__cta { font-weight: 600; color: var(--accent); }
/* The byline over the kicker, the answer under the H1. */
html.style-4 .article-meta { margin-bottom: 20px; }
html.style-4 .article-meta .page-hero__meta { gap: 4px 10px; font: var(--small); color: var(--ink-3); }
html.style-4 .page-hero__sep { color: var(--ink-4); }
html.style-4 .article-meta .disclosure { padding: 4px 0 0; border: 0; }
html.style-4 .article .head__kicker + .page-hero__title { margin-top: 10px; }
html.style-4 .article-lead { margin-top: 16px; }
html.style-4 .article-body .block-answer, html.style-4 .article-lead > p { font: var(--lede); color: var(--ink-2); }
html.style-4 .toc-fold { padding: 12px 16px; background: var(--surface); border: var(--border); border-radius: var(--r-card); }
html.style-4 .toc-fold summary { font: 600 14px/1.4 var(--font-text); }
html.style-4 .toc-fold summary::after { content: "▾"; color: var(--ink-3); }
html.style-4 .toc-fold[open] summary::after { content: "▴"; }
html.style-4 :is(.article, .split.article) .prose { font: var(--body); }
html.style-4 :is(.article, .split.article) .prose :is(p, li) { color: var(--ink-2); }
html.style-4 :is(.article, .split.article) .prose strong { color: var(--ink); }
/* Sections: the number in its circle beside the heading, no rule above. */
html.style-4 .article-body h2 { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 40px; padding-top: 0; border-top: 0; font: var(--h2-rail); }
html.style-4 .article-body h2 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 12px/1 var(--font-text);
}
html.style-4 .article-body h2 + * { margin-top: 16px; }
/* Key facts: rows between rules. */
html.style-4 .key-facts { display: block; padding: 0; list-style: none; border-top: var(--border); }
html.style-4 .key-facts li { padding: 10px 0 10px 18px; position: relative; border-bottom: var(--border); font: 400 15px/1.55 var(--font-text); }
html.style-4 .key-facts li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
/* Tables in prose: the same framed table as the brand page's. */
html.style-4 .prose table { border: var(--border); border-radius: var(--r-card); border-collapse: separate; border-spacing: 0; overflow: hidden; font: 400 15px/1.45 var(--font-text); }
html.style-4 .prose th { padding: 12px 14px; background: var(--plate); border-bottom: 2px solid var(--rule); font: var(--kicker); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html.style-4 .prose td { padding: 12px 14px; border-bottom: var(--border); }
html.style-4 .prose tr:last-child td { border-bottom: 0; }
html.style-4 .related { margin-top: 48px; }
html.style-4 .related__list { margin-top: 12px; }
html.style-4 .related__list a { padding: 12px 0; font: 500 15px/1.45 var(--font-text); }
html.style-4 .related__list a:hover { color: var(--accent); }
html.style-4 .related__list a .arr { color: var(--accent); }

/* ── catalogs · About · Privacy · 404 · update log ─────────────────────── */

html.style-4 .page-hero__head { max-width: var(--w-reading); }
html.style-4 .page-hero__head .head__kicker + .page-hero__title { margin-top: 10px; }
html.style-4 .page-hero__lede { margin-top: 14px; font: var(--lede); color: var(--ink-2); }
/* The catalogs' and About's counts: tiles under the title. */
/* One row of tiles up to 200 wide, however many counters there are: four
   across left the fifth alone under three empty cells. */
html.style-4 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 200px); margin: 28px 0 0; }
html.style-4 .page-hero > .disclosure { margin-top: 24px; }
html.style-4 .filter { gap: 8px; margin: 24px 0 0; }
html.style-4 .filter__chip { padding: 7px 13px; border: var(--border); border-radius: var(--r-pill); background: var(--plate); font: 600 13.5px/1.2 var(--font-text); color: var(--ink); }
html.style-4 .filter__chip:hover { border-color: var(--accent); color: var(--accent); }
html.style-4 .filter__chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html.style-4 .filter-note { font: var(--small); color: var(--ink-3); }
html.style-4 .page-hero + .section--tight { padding-top: 32px; }
html.style-4 .empty { border: 1px dashed var(--rule-dash); border-radius: var(--r-card); }
html.style-4 .empty__title { font: var(--h3); }
html.style-4 .about-body h2, html.style-4 .prose--legal h2 { font: var(--h2-rail); }
html.style-4 .prose--legal { max-width: none; font: var(--body); }
html.style-4 .prose--legal .contact { margin-top: 32px; }
html.style-4 .log { border-top: var(--border); }
html.style-4 .log li { padding: 10px 0; border-bottom: var(--border); font: 400 15px/1.5 var(--font-text); }
html.style-4 .log .stamp { font-weight: 600; color: var(--ink-3); }
/* 404: the white page like every other, the number as a pale figure. */
html.style-4 .page--dark { background: var(--bg); color: var(--ink); }
html.style-4 .page--dark .site-header { border-bottom-color: var(--rule); }
html.style-4 .page--dark :is(.wordmark, .wordmark b) { color: var(--accent); }
html.style-4 .page--dark .site-header__menu { color: var(--ink); }
html.style-4 .page--dark .head__kicker { color: var(--ink-3); }
html.style-4 .page--dark .page-hero__lede { color: var(--ink-2); }
html.style-4 .page--dark a:not(.btn) { color: var(--accent); text-decoration: none; }
html.style-4 .notfound__actions { font: 600 14px/1.4 var(--font-text); }
html.style-4 .notfound__num { font: 700 clamp(120px, 18vw, 240px)/1 var(--font-head); letter-spacing: -.04em; color: var(--rule-2); }

/* ── brand page, guides, catalogs on a phone ─────────────────────────────── */

@media (max-width: 1140px) {
  html.style-4 .split.article { grid-template-columns: minmax(0, 1fr); }
  html.style-4 .line__models:has(> .sub + .sub) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* The rail always takes the full width under or over its text (§5). */
  html.style-4 .page-brand .split > .rail { align-self: stretch; width: auto; }
  html.style-4 .rail__inner { padding: 18px; }
  html.style-4 #brand-hero .crumbs + .hero { margin-top: 20px; }
  html.style-4 .verdict__lede { font-size: 16px; }
  html.style-4 .rail--verdict .cta__note { text-align: left; }
  html.style-4 .signals { row-gap: 32px; }
  html.style-4 .strip--line { gap: 8px; }
  html.style-4 .sub { padding: 18px; }
  html.style-4 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-4 .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.style-4 .closer .cta { max-width: none; }
}