/* ============================================================================
   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; }
}

/* ── 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; }
.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; }
.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; } }

.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); }