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

/* ============================================================================
   Style 2 · Friendly guide (STYLES-FINAL-PLAN.md, design/styles/STYLE-SPECS.md §2,
   design/styles/Style 2 - Friendly Guide.dc.html)
   Laid over templates/style.css. Every rule starts with html.style-2; the
   token block comes first, its phone mirror second.

   A practical helper: a page faintly tinted by the niche's hue, white cards
   with a 1.5px tinted edge and soft corners, Nunito 800 headings over
   Atkinson Hyperlegible text, pill buttons and chips, bands that alternate
   white and tint instead of rules.
   ========================================================================== */

html.style-2 {
  /* the hue tints the page, the soft surfaces and every border; the button
     fills with the accent, links take its darker tone */
  --accent:       oklch(47% 0.14 var(--h));
  --accent-hover: oklch(40% 0.14 var(--h));
  --accent-text:  oklch(42% 0.13 var(--h));
  --accent-text-hover: oklch(34% 0.13 var(--h));
  --accent-line:  oklch(42% 0.13 var(--h));
  --accent-soft:  oklch(94% 0.035 var(--h));
  --soft:         oklch(94% 0.035 var(--h));
  --on-accent:    #fff;

  --bg:        oklch(97.5% 0.012 var(--h));
  --plate:     #fff;
  --surface:   #fff;
  --rule:      oklch(88% 0.04 var(--h));
  --rule-2:    oklch(92% 0.02 var(--h));
  --rule-dash: oklch(85% 0.04 var(--h));
  --ink:       #23282e;
  --ink-2:     #4a525b;
  --ink-3:     #646d79;
  --ink-4:     #646d79;
  --on-dark:   #fff;
  --on-dark-2: #c9cfd6;
  --meter-off: #dfe3e8;

  /* semantic — fixed */
  --pos: #1e7a46;  --pos-soft: #e4f3e9;
  --neu: #9a6700;  --neu-soft: #fbf0d6;
  --neg: #b3261e;  --neg-soft: #fbe6e4;
  --lim: #5e6773;  --lim-soft: #eceef1;

  /* type: Nunito 800 for headings and numbers, Atkinson Hyperlegible for text */
  --font-head: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 800 44px/52px var(--font-head);
  --h2:      800 34px/42px var(--font-head);
  --h2-rail: 800 30px/38px var(--font-head);
  --h3:      800 21px/28px var(--font-head);
  --deck:    400 19px/30px var(--font-text);
  --h4:      800 18px/24px var(--font-head);
  --lede:    400 19px/30px var(--font-text);
  --body:    400 18px/29px var(--font-text);
  --body-s:  400 17px/26px var(--font-text);
  --small:   400 15px/22px var(--font-text);
  --caption: 400 14px/20px var(--font-text);
  --kicker:  700 16px/22px var(--font-text);
  --micro:   700 14px/20px var(--font-text);
  --num:     800 32px/36px var(--font-head);

  /* layout: 1120 wide, seven and five columns with 48 between */
  --container: 1120px;
  --edge: max(24px, calc((100vw - var(--container)) / 2));
  --w-reading: 800px;
  --w-narrow: 560px;
  --rail: 447px;
  --gutter: 48px;
  --grid-gap: 16px;
  --section: 64px;
  --subsection: 48px;

  --r-chip: 999px; --r-btn: 999px; --r-card: 14px; --r-pill: 999px;
  --r-callout: 16px;
  --border: 1.5px solid var(--rule);
  --plate-pad: 8px;
}

@media (max-width: 900px) {
  html.style-2 {
    --display: 800 32px/38px var(--font-head);
    --h2:      800 28px/34px var(--font-head);
    --h2-rail: 800 26px/32px var(--font-head);
    --h3:      800 20px/26px var(--font-head);
    --lede:    400 17px/27px var(--font-text);
    --body:    400 17px/27px var(--font-text);
    --body-s:  400 16px/25px var(--font-text);
    --small:   400 14px/20px var(--font-text);
    --kicker:  700 15px/20px var(--font-text);
    --num:     800 26px/30px var(--font-head);
    --section: 48px;
    --subsection: 36px;
    --gutter: 0px;
    --grid-gap: 12px;
    --edge: 20px;
  }
}

/* ── 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. */
:where(html.style-2) body { font: var(--body); background: var(--bg); color: var(--ink); }
:where(html.style-2) h1 { font: var(--display); letter-spacing: -.02em; }
:where(html.style-2) h2 { font: var(--h2); letter-spacing: -.015em; }
:where(html.style-2) h3 { font: var(--h3); letter-spacing: -.01em; }
:where(html.style-2) h4 { font: var(--h4); }
:where(html.style-2) a { color: var(--accent-text); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: currentColor; }
:where(html.style-2) a:hover { color: var(--accent-text-hover); }
html.style-2 :focus-visible { outline-color: var(--accent-text); }
/* A number inside prose: bold only, the same face. */
html.style-2 .num, html.style-2 .data { font-weight: 700; }
html.style-2 .arr { display: none; }

/* Labels speak in bold sentence case. */
html.style-2 :is(.label, .kicker, .rail__label, .facts__label, .prose__note-label, .cta__tag, .sub__mark, .prow__eyebrow) {
  font: 700 15px/20px var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
html.style-2 .head__kicker { display: block; font: var(--kicker); letter-spacing: 0; text-transform: none; color: var(--accent-text); }
html.style-2 .head__kicker::before { display: none; }

/* Text links: bold, underlined, the darker accent. */
html.style-2 :is(.tile__cta, .items__more a, .section__more a, .head__aside-more a, .grid-note a, .acard__more, .team__more, .line__all a, .table__note a, .prow__cta) {
  font: 700 16px/22px var(--font-text);
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

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

html.style-2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 16px/1.2 var(--font-head);
  letter-spacing: 0;
}
html.style-2 .btn:hover { background: var(--accent-hover); color: var(--on-accent); }
html.style-2 .btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
html.style-2 .cta { border: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
html.style-2 .cta__note { font: 400 13px/18px var(--font-text); color: var(--ink-3); }
html.style-2 .cta__tag { display: inline; font: 700 13px/18px var(--font-text); color: var(--ink-3); margin-right: 4px; }
html.style-2 .cta__tag::after { content: " ·"; font-weight: 400; }

/* The badge: a solid pill in its colour; the verdict's is larger. */
html.style-2 .badge {
  height: 26px;
  padding: 0 10px;
  gap: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lim);
  color: var(--on-accent);
  font: 800 13px/26px var(--font-head);
  letter-spacing: 0;
  text-transform: none;
}
html.style-2 .badge::before { display: none; }
html.style-2 .badge--pos { background: var(--pos); }
html.style-2 .badge--neu { background: var(--neu); }
html.style-2 .badge--neg { background: var(--neg); }

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

html.style-2 .chip { height: 32px; padding: 0 14px; border: var(--border); border-radius: 999px; background: var(--plate); font: 700 14px/29px var(--font-text); color: var(--ink); }

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

html.style-2 .site-header { height: 76px; background: var(--plate); border-bottom: var(--border); }
html.style-2 .wordmark { font: 800 22px/1 var(--font-head); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
html.style-2 .wordmark::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 4px; background: var(--accent); vertical-align: -1px; }
html.style-2 .wordmark b { color: inherit; font-weight: inherit; }
html.style-2 .wordmark__tld { color: var(--ink-3); }
html.style-2 .site-nav { gap: 6px; font: 700 16px/1 var(--font-text); }
html.style-2 .site-nav a:not(.btn) { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; color: var(--ink); }
html.style-2 .site-nav a:not(.btn):hover { background: var(--soft); color: var(--ink); }
html.style-2 .site-nav .btn { margin-left: 10px; min-height: 40px; padding: 0 18px; font-size: 15px; }

@media (max-width: 900px) {
  html.style-2 .site-header { height: auto; min-height: 64px; padding-block: 14px; flex-wrap: wrap; gap: 0 12px; }
  html.style-2 .wordmark { font-size: clamp(15px, 4.6vw, 18px); min-width: 0; }
  html.style-2 .wordmark::before { width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; }
  html.style-2 .site-header__menu {
    flex: none;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: var(--border);
    border-radius: 999px;
    background: var(--plate);
    color: var(--ink);
    font: 700 15px/33px var(--font-text);
  }
  html.style-2 .site-header__menu svg { display: none; }
  html.style-2 .site-header__menu::after { content: attr(aria-label); }
  html.style-2 .site-header--open .site-header__menu::after { content: attr(data-close); }
  /* The open menu: a white card under the bar that pushes the page down. */
  html.style-2 .site-header--open .site-nav {
    order: 1;
    position: static;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 14px;
    padding: 8px;
    background: var(--plate);
    border: var(--border);
    border-radius: 14px;
  }
  html.style-2 .site-header--open .site-nav a:not(.btn) { height: auto; padding: 14px 12px; border-radius: 10px; font: 700 18px/24px var(--font-text); }
  html.style-2 .site-header--open .site-nav .btn { margin: 8px 0 0; min-height: 48px; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */

html.style-2 .site-footer {
  margin-top: 0;
  padding: 40px var(--edge) 32px;
  background: var(--plate);
  color: var(--ink);
  border-top: var(--border);
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: 48px;
}
html.style-2 .site-footer > div { display: contents; }
html.style-2 .site-footer a { color: var(--ink); }
html.style-2 .site-footer .wordmark { grid-column: 1; grid-row: 1; color: var(--ink); justify-self: start; }
html.style-2 .site-footer .wordmark b { color: inherit; }
html.style-2 .site-footer__mission { grid-column: 1; grid-row: 2; margin-top: 12px; font: 400 17px/26px var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-2 .site-footer__nav { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; font: 700 16px/22px var(--font-text); }
html.style-2 .site-footer__fineprint { grid-column: 3; grid-row: 1 / 3; margin: 0; font: 400 14px/21px var(--font-text); color: var(--ink-3); }
html.style-2 .site-footer__legal { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; font: 400 14px/20px var(--font-text); color: var(--ink-3); }
@media (max-width: 900px) {
  html.style-2 .site-footer { display: flex; flex-direction: column; gap: 0; padding: 32px 20px 28px; }
  html.style-2 .site-footer .wordmark { order: 1; }
  html.style-2 .site-footer__mission { order: 2; }
  html.style-2 .site-footer__nav { order: 3; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  html.style-2 .site-footer__nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-size: 15px; }
  html.style-2 .site-footer__fineprint { order: 4; margin-top: 20px; }
  html.style-2 .site-footer__legal { order: 5; margin-top: 20px; }
}

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

html.style-2 .disclosure { padding: 0; border: 0; font: 400 15px/22px var(--font-text); color: var(--ink-3); }
html.style-2 .stamp, html.style-2 .stamp span { color: inherit; }
html.style-2 .crumbs { gap: 6px; font: 400 15px/22px var(--font-text); color: var(--ink-3); }
html.style-2 .crumbs a { font-weight: 400; color: var(--ink-3); text-decoration: none; }
html.style-2 .crumbs a:hover { color: var(--accent-text); }
html.style-2 .crumbs [aria-current] { font-weight: 700; color: var(--ink); }

/* ── bands: sections alternate white and tint, no rules between ─────────── */

html.style-2 .section { padding-block: var(--section); }
html.style-2 .section:first-of-type { padding-top: var(--section); }
html.style-2 .section--tight { padding-top: 0; }
html.style-2 .page-brand > .section ~ .section:not(.section--tight):not(#verdict)::before { display: none; }
html.style-2 .page-hero { padding-top: 56px; padding-bottom: 48px; }
/* Every second band is white. The facts share the brand hero's band, and a
   run of factor sections reads as one band. */
html.style-2 main > :is(section, .stretch) { background: var(--bg); }
html.style-2 main > :nth-child(even of :is(section, .stretch):not(#facts, [id^="factor-"] + [id^="factor-"])) { background: var(--plate); }
html.style-2 main > [id^="factor-"]:nth-child(even of :is(section, .stretch):not(#facts, [id^="factor-"] + [id^="factor-"])) + [id^="factor-"],
html.style-2 main > [id^="factor-"]:nth-child(even of :is(section, .stretch):not(#facts, [id^="factor-"] + [id^="factor-"])) + [id^="factor-"] + [id^="factor-"],
html.style-2 main > [id^="factor-"]:nth-child(even of :is(section, .stretch):not(#facts, [id^="factor-"] + [id^="factor-"])) + [id^="factor-"] + [id^="factor-"] + [id^="factor-"] { background: var(--plate); }
html.style-2 main > [id^="factor-"] + [id^="factor-"] { padding-top: 0; }

html.style-2 .head__title { margin-top: 8px; max-width: 760px; }
html.style-2 .head__kicker + .head__title { margin-top: 8px; }
html.style-2 .head__lede { margin-top: 12px; max-width: 640px; font: 400 17px/27px var(--font-text); color: var(--ink-2); }
html.style-2 .head__title + :where(*), html.style-2 .head:where(:has(> .head__title:last-child)) + :where(*) { margin-top: 28px; }
html.style-2 :is(.head--split, .head--aside) { display: block; margin-bottom: 32px; }
/* The wide sections' heads read centred: with the lede capped at the reading
   width, the space to its right looked like a hole (styles review 2026-10-09,
   S2.2, R2). The brand counts are the hero's figures again and stay hidden
   (R3); the link sits under the lede. The badge rule under How we rate keeps
   its own left-set layout. */
html.style-2 main > .section > :is(.head--split, .head--aside) { text-align: center; }
html.style-2 main > .section > :is(.head--split, .head--aside) :is(.head__title, .head__lede) { margin-inline: auto; }
html.style-2 #brands .head__aside { justify-content: center; }
html.style-2 #how-we-evaluate .head__aside { text-align: left; }
/* The counts under a head: chips under the lede, the link beside them. */
html.style-2 .head__aside { display: flex; flex-wrap: wrap; justify-content: flex-start; justify-self: stretch; align-items: center; gap: 8px 14px; margin: 18px 0 0; width: auto; max-width: none; text-align: left; }
html.style-2 .head__aside .stats--row { display: none; }
html.style-2 .head__aside-more { margin: 0; }
html.style-2 .head__aside-more a { font-size: 15px; }
html.style-2 .solo { max-width: var(--w-reading); }

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

/* Seven and five: the text, the counts and the stepper on the left, the
   "where to start" card on the right; disclosure and date under both. */
html.style-2 #entry {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: repeat(6, auto) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}
html.style-2 #entry > .hero, html.style-2 #entry > .hero > div { display: contents; }
html.style-2 #entry > .hero > div > *, html.style-2 #entry .hero-figure { grid-column: 1; }
html.style-2 #entry h1 { grid-row: 1; margin-top: 8px; }
html.style-2 #entry .hero__lede { grid-row: 2; margin-top: 20px; max-width: none; font: var(--lede); }
html.style-2 #entry .hero__stats { grid-row: 3; gap: 6px; margin-top: 18px; font: 400 16px/24px var(--font-text); color: var(--ink-2); }
html.style-2 .hero__stats b { color: var(--ink); font-weight: 700; }
html.style-2 .hero__sep { color: var(--ink-3); }
html.style-2 #entry .hero-figure { grid-row: 4; }
/* The kicker and the disclosure under the counters: the left column ended
   short of the card beside it (styles review 2026-10-09, S2.1). */
html.style-2 #entry .head__kicker { grid-row: 5; margin-top: 24px; }
html.style-2 #entry > .disclosure { grid-column: 1; grid-row: 6; margin-top: 10px; display: block; }
html.style-2 #entry > .disclosure > span + span::before { content: " · "; }
html.style-2 #entry > .tiles { grid-column: 2; grid-row: 1 / 8; }
html.style-2 #entry .plate.hero__media { grid-column: 2; grid-row: 1 / 3; margin-bottom: 16px; padding: 16px; border: var(--border); border-radius: 16px; background: var(--plate); max-width: none; }
html.style-2 #entry:has(> .hero > .plate.hero__media) > .tiles { grid-row: 3 / 8; }
/* The stepper: three counts in cells, then the guides. */
html.style-2 .hero-figure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  margin-top: 24px;
  padding: 0;
  background: var(--plate);
  border: var(--border);
  border-radius: 14px;
}
html.style-2 .hero-figure__bar { display: none; }
html.style-2 .hero-figure__row { padding: 14px 18px; }
html.style-2 .hero-figure__row + .hero-figure__row { border-left: 1.5px solid var(--rule-2); }
html.style-2 .hero-figure__text { display: flex; flex-direction: column; margin: 0; font: 400 14px/20px var(--font-text); color: var(--ink-3); }
html.style-2 .hero-figure__text .num { margin: 0; font: 800 32px/36px var(--font-head); letter-spacing: -.02em; color: var(--ink); }
html.style-2 .hero-figure__foot { align-items: center; padding: 14px 18px; border: 0; border-left: 1.5px solid var(--rule-2); font: 700 14px/20px var(--font-text); color: var(--accent-text); }
html.style-2 .hero-figure__foot > :not(:first-child) { display: none; }
html.style-2 .hero-figure__foot .num { color: inherit; }
/* Where to start: rows inside one white card, its heading from the label. */
html.style-2 .tiles { display: block; margin: 0; padding: 8px 24px 12px; background: var(--plate); border: var(--border); border-radius: 16px; }
html.style-2 .tiles::before { content: attr(aria-label); display: block; padding: 16px 0 8px; font: 800 20px/26px var(--font-head); color: var(--ink); }
html.style-2 .tile { display: flex; gap: 4px; min-height: 0; padding: 14px 0; border-top: 0; }
html.style-2 .tile + .tile { border-top: 1.5px solid var(--rule-2); }
html.style-2 .tile__title { font: 800 18px/24px var(--font-head); color: var(--ink); }
html.style-2 .tile__desc { display: block; font: 400 15px/23px var(--font-text); color: var(--ink-2); }
html.style-2 .tile__cta { margin-top: 4px; font-size: 15px; }
html.style-2 .tile:hover .tile__title { color: var(--accent-text); }

/* ── homepage · brand cards in one column ────────────────────────────────── */

html.style-2 .cards { display: flex; flex-direction: column; gap: 16px; }
html.style-2 .cards > *, html.style-2 .cards > [class*="--half"], html.style-2 .cards > [class*="--featured"] { grid-column: auto; }
/* Photo · badge, name, ★, reviews · the line · the sentence · the link. */
html.style-2 .bcard, html.style-2 .bcard--featured {
  display: grid;
  grid-template-columns: 96px auto minmax(0, max-content) auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 20px 24px 20px 20px;
  background: var(--plate);
  border: var(--border);
  border-radius: 14px;
}
html.style-2 :is(.bcard__body, .bcard__top, .bcard__rating) { display: contents; }
html.style-2 .bcard__index, html.style-2 .bcard__sep { display: none; }
html.style-2 .bcard__plate { display: flex; grid-column: 1; grid-row: 1 / -1; align-self: start; width: 96px; height: 96px; margin-right: 14px; padding: 6px; border: var(--border); border-radius: 12px; background: var(--plate); }
html.style-2 .bcard__plate.plate--empty { border: 0; background: var(--soft); color: var(--accent-text); font: 800 36px/1 var(--font-head); }
html.style-2 .bcard .badge { grid-column: 2; grid-row: 1; justify-self: start; }
html.style-2 .bcard__name, html.style-2 .bcard--featured .bcard__name { grid-column: 3; grid-row: 1; margin: 0; font: 800 24px/30px var(--font-head); letter-spacing: -.01em; }
html.style-2 .bcard__rating strong { grid-column: 4; grid-row: 1; font: 700 17px/30px var(--font-text); color: var(--ink); white-space: nowrap; }
html.style-2 .bcard__reviews { grid-column: 5; grid-row: 1; font: 400 15px/30px var(--font-text); color: var(--ink-3); white-space: nowrap; }
html.style-2 .bcard__line, html.style-2 .bcard__chips { grid-column: 2 / 6; grid-row: 2; margin-top: 4px; font: 700 15px/22px var(--font-text); color: var(--ink-2); }
html.style-2 .bcard__summary { grid-column: 2 / 6; grid-row: 3; align-self: start; margin-top: 6px; font: 400 17px/26px var(--font-text); color: var(--ink-2); }
html.style-2 .bcard__cta { grid-column: 6; grid-row: 1 / -1; margin: 0 0 0 14px; padding: 0 18px; height: 44px; display: inline-flex; align-items: center; border: 1.5px solid var(--accent); border-radius: 999px; font: 800 15px/1 var(--font-head); color: var(--accent-text); white-space: nowrap; }
html.style-2 a.bcard { color: var(--ink); text-decoration: none; }
html.style-2 a.bcard:hover .bcard__cta { background: var(--accent); color: var(--on-accent); }
/* Queued: a dashed row — the initial, the name, "Review in progress". */
html.style-2 .bcard--soon { grid-template-columns: 44px auto minmax(0, 1fr); grid-template-rows: auto; column-gap: 12px; padding: 14px 20px; background: transparent; border: 1.5px dashed var(--rule-dash); }
html.style-2 .bcard--soon .label { display: none; }
html.style-2 .bcard--soon .bcard__plate { grid-row: 1; width: 44px; height: 44px; margin: 0; padding: 0; border: var(--border); border-radius: 10px; background: var(--plate); color: var(--ink); font: 800 18px/1 var(--font-head); }
html.style-2 .bcard--soon .bcard__name { grid-column: 2; font: 800 20px/26px var(--font-head); color: var(--ink); }
html.style-2 .bcard--soon .bcard__summary { grid-column: 3; grid-row: 1; margin: 0; align-self: center; font: 400 15px/22px var(--font-text); color: var(--ink-3); }

/* ── homepage · what to check · how we rate ──────────────────────────────── */

/* What to check: every item in one white card, question left, theses right. */
html.style-2 .items, html.style-2 :is(.items--3, .items--2, .items--stack) { display: block; padding: 4px 32px; background: var(--plate); border: var(--border); border-radius: 16px; }
html.style-2 .items__item, html.style-2 .items--3 .items__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; padding: 28px 0; border: 0; }
html.style-2 .items__item + .items__item { border-top: 1.5px solid var(--rule-2); }
html.style-2 .items__item > div { display: contents; }
html.style-2 .items__num { display: none; }
html.style-2 .items__title, html.style-2 .prose .items__title { grid-column: 1; font: 800 24px/32px var(--font-head); }
html.style-2 .items__body { grid-column: 2; margin: 0; font: 400 17px/27px var(--font-text); color: var(--ink); }
html.style-2 .items__body > * + * { margin-top: 12px; }
html.style-2 .items__body > p:not(.items__more), html.style-2 .steps__item { position: relative; padding-left: 24px; }
html.style-2 .items__body > p:not(.items__more)::before, html.style-2 .steps__item::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
html.style-2 .items__body > .items__more { margin-top: 14px; }

/* How we rate: the badge rule as a soft callout over two columns of criteria. */
html.style-2 #how-we-evaluate .head__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; padding: 24px 28px; background: var(--soft); border-radius: 16px; }
html.style-2 #how-we-evaluate .head__aside > .label { margin: 0; font: 800 18px/24px var(--font-head); color: var(--ink); }
html.style-2 .badge-scale { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; }
html.style-2 .badge-scale__item { gap: 10px; }
html.style-2 .badge-scale__item .badge { min-width: 0; }
html.style-2 .badge-scale__rule { font: 400 16px/22px var(--font-text); color: var(--ink); }
html.style-2 .method__text { flex-basis: 100%; margin: 0; font: 400 15px/22px var(--font-text); color: var(--ink-2); }
html.style-2 .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; border-top: 0; }
html.style-2 .criteria__item { display: block; padding: 0; border: 0; }
html.style-2 .criteria__num { display: none; }
html.style-2 .criteria__title { font: 800 20px/26px var(--font-head); }
html.style-2 .criteria__text { margin-top: 6px; font: 400 17px/27px var(--font-text); color: var(--ink-2); }
html.style-2 .section__more { margin-top: 28px; }

/* ── the stretch: chapters as chip tabs over the topics ─────────────────── */

html.style-2 .stretch { display: flex; flex-direction: column; padding-block: var(--section); }
/* The chapter chips stay at the top of the screen while the topics scroll. */
html.style-2 .stretch > .rail { order: -1; position: sticky; top: 0; z-index: 3; margin: -12px 0 28px; padding: 12px 0; background: inherit; }
html.style-2 .rail--chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
html.style-2 .rail--chapters .rail__label, html.style-2 .jump .rail__label { margin: 0; font: 700 15px/20px var(--font-text); color: var(--ink-3); }
html.style-2 :is(.rail--chapters, .jump) .toc-rail__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html.style-2 :is(.rail--chapters, .jump) .toc-rail__list a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: var(--border); border-radius: 999px; background: var(--plate); font: 700 15px/1 var(--font-text); color: var(--ink); text-decoration: none; }
html.style-2 :is(.rail--chapters, .jump) .toc-rail__list a.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html.style-2 :is(.rail--chapters, .jump) .toc-rail__list .num { display: none; }
html.style-2 .jump { display: none; }
/* The topics sit in the middle of the band with the chapter chips centred over
   them: a wide section with no block beside it keeps its emptiness symmetric
   (screen pass 2026-10-10, R2 for Style 2). */
html.style-2 .stretch > div { max-width: var(--w-reading); width: 100%; margin-inline: auto; }
html.style-2 .rail--chapters { justify-content: center; }
html.style-2 .stretch .section { padding: 0; background: transparent; }
html.style-2 .stretch .section + .section { margin-top: 56px; }
html.style-2 .stretch .head__title { font: var(--h2-rail); }
html.style-2 .steps { display: grid; gap: 12px; }
html.style-2 .steps__item { display: block; font: 400 17px/27px var(--font-text); }
html.style-2 .steps__num { display: none; }

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

html.style-2 .cards:has(> .acard) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
html.style-2 .acard {
  display: flex;
  flex-direction: column;
  padding: 20px 0 24px;
  border: 0;
  border-top: 1.5px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
html.style-2 .acard--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; margin-bottom: 16px; padding: 28px 32px; border: 0; border-radius: 16px; background: var(--soft); }
html.style-2 .acard--featured > * { grid-column: 2; }
html.style-2 .acard--featured > .acard__top, html.style-2 .acard--featured > .acard__title { grid-column: 1; }
html.style-2 .acard--featured > .acard__title { font-size: 26px; line-height: 32px; }
html.style-2 .acard__top { display: flex; justify-content: flex-start; align-items: center; gap: 8px; font: 700 14px/20px var(--font-text); letter-spacing: 0; text-transform: none; color: var(--accent-text); }
html.style-2 .acard__top > span:first-child { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--soft); }
html.style-2 .acard--featured .acard__top > span:first-child { background: var(--plate); }
/* Muted grey is too light on the soft fill: the featured card's meta reads darker. */
html.style-2 .acard--featured :is(.acard__meta, .acard__excerpt) { color: var(--ink-2); }
html.style-2 .acard__index { display: none; }
html.style-2 .acard__title { margin-top: 10px; font: 800 20px/26px var(--font-head); }
html.style-2 a.acard { color: var(--ink); text-decoration: none; }
html.style-2 a.acard:hover .acard__title { color: var(--accent-text); }
html.style-2 .acard__excerpt { margin-top: 8px; font: 400 15px/23px var(--font-text); color: var(--ink-2); }
html.style-2 .acard__meta { padding-top: 12px; justify-content: flex-start; gap: 14px; font: 400 14px/20px var(--font-text); color: var(--ink-3); }
html.style-2 .acard__meta a { font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .grid-note { justify-content: flex-start; gap: 16px; margin-top: 20px; font: 400 15px/22px var(--font-text); color: var(--ink-3); }

html.style-2 .videos, html.style-2 .videos--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html.style-2 .videos--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.style-2 .video__play { border: var(--border); border-radius: 14px; overflow: hidden; }
html.style-2 .video__frame { border-radius: 14px; }
html.style-2 .video__icon { inset: auto auto 12px 12px; margin: 0; width: 52px; height: 26px; border-radius: 999px; background: var(--ink); opacity: 1; }
html.style-2 .video__icon::after { border-width: 5px 0 5px 8px; }
html.style-2 .video__play:hover .video__icon { background: var(--accent); }
html.style-2 .video__title { font: 800 16px/22px var(--font-head); }
html.style-2 .video__meta { font: 400 14px/20px var(--font-text); color: var(--ink-3); }

/* The team: who we are on the left, the counts as outline chips on the right. */
html.style-2 .team { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
html.style-2 .team__role { margin-top: 16px; font: 800 18px/26px var(--font-head); color: var(--ink); }
html.style-2 .team__bio { margin-top: 12px; font: 400 16px/26px var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-2 .team__more { display: inline-block; margin-top: 14px; }
/* Two chips to a row: wrapped to their own widths they ran 3 / 2 / 2 / 1 (styles review 2026-10-09, S2.3). */
html.style-2 .team .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; border: 0; }
html.style-2 .team .stat, html.style-2 .team .stat:nth-child(2n), html.style-2 .team .stat:last-child:nth-child(odd) { display: inline-flex; justify-content: center; align-items: baseline; gap: 6px; height: 44px; padding: 0 16px; border: var(--border); border-radius: 999px; background: var(--plate); grid-column: auto; }
html.style-2 .team .stat__value { font: 800 18px/41px var(--font-head); }
html.style-2 .team .stat__label { margin: 0; font: 400 14px/41px var(--font-text); color: var(--ink-2); }
html.style-2 .stat__value { font: 800 28px/32px var(--font-head); letter-spacing: -.02em; }
html.style-2 .stat__label { font: 400 14px/20px var(--font-text); color: var(--ink-3); }

/* ── FAQ in a white card, sources in a soft one ─────────────────────────── */

html.style-2 #faq .split--narrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; }
html.style-2 #faq .split--narrow > div:first-child { display: contents; }
html.style-2 #faq .split--narrow > div:first-child > .head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 28px; }
html.style-2 #faq .split--narrow .faq { grid-column: 1; grid-row: 2; margin-top: 0; }
html.style-2 #faq .split--narrow > .sources { grid-column: 2; grid-row: 2; }
html.style-2 .faq { padding: 0 20px; background: var(--plate); border: var(--border); border-radius: 14px; }
html.style-2 .faq__item { padding: 18px 0; border-bottom: 1.5px solid var(--rule-2); }
html.style-2 .faq__item:last-child { border-bottom: 0; }
html.style-2 .faq__q { grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 16px; }
html.style-2 .faq__num { display: none; }
html.style-2 .faq__text { font: 800 19px/26px var(--font-head); letter-spacing: -.01em; }
html.style-2 .faq__sign { position: relative; width: 24px; height: 24px; border-radius: 999px; background: var(--soft); color: var(--accent-text); font: 800 16px/24px var(--font-head); text-align: center; }
html.style-2 .faq__item[open] .faq__sign { transform: none; color: transparent; }
html.style-2 .faq__item[open] .faq__sign::after { content: "−"; position: absolute; inset: 0; color: var(--accent-text); }
html.style-2 .faq__a { margin-top: 10px; padding-left: 0; font: 400 16px/25px var(--font-text); color: var(--ink-2); }
html.style-2 .sources { padding: 22px 24px; background: var(--soft); border-radius: 16px; }
html.style-2 .sources .head__kicker { display: none; }
html.style-2 .sources__title { margin: 0; font: 800 18px/24px var(--font-head); }
html.style-2 .sources__list { margin-top: 12px; border-top: 0; }
html.style-2 .sources__list a { padding: 10px 0; border: 0; font: 400 14px/21px var(--font-text); }
html.style-2 .sources__list strong { font: 700 15px/21px var(--font-text); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .sources__why { color: var(--ink-2); }
html.style-2 .sources__arrow { display: none; }

/* ── the closer: a soft box, the button on the right ────────────────────── */

html.style-2 #final-cta { text-align: left; }
html.style-2 #final-cta > .w-narrow { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding: 40px 44px; background: var(--soft); border-radius: 20px; }
html.style-2 #final-cta h2 { grid-column: 1; margin: 0; max-width: 560px; font: 800 30px/38px var(--font-head); }
html.style-2 #final-cta .closer__body { grid-column: 1; max-width: 560px; margin-top: 12px; font: 400 16px/26px var(--font-text); color: var(--ink-2); }
html.style-2 #final-cta .closer__action { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
html.style-2 #final-cta .closer__action .btn { min-height: 56px; padding: 0 28px; font-size: 18px; }

/* ── brand page · hero, chips, facts ─────────────────────────────────────── */

/* Seven and five (eight and four without a photo): the title and lede, the
   stamp and disclosure under them; the photo in a white card on the right;
   the chips across. The disclosure comes after the chips in the markup. */
html.style-2 #brand-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 24px;
}
html.style-2 #brand-hero:not(:has(.hero__media)) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
html.style-2 #brand-hero > .crumbs { grid-column: 1 / -1; grid-row: 1; }
html.style-2 #brand-hero > .hero { display: contents; }
html.style-2 #brand-hero > .hero > div:first-child { grid-column: 1; grid-row: 2; margin-top: 24px; }
html.style-2 #brand-hero h1 { margin: 0; }
html.style-2 .hero__em { font-style: normal; font-weight: inherit; color: var(--accent-text); }
html.style-2 #brand-hero .hero__lede { margin-top: 20px; max-width: none; font: var(--lede); color: var(--ink-2); }
html.style-2 #brand-hero .hero__media { grid-column: 2; grid-row: 2 / 5; margin-top: 24px; padding: 16px; max-width: none; border: var(--border); border-radius: 16px; background: var(--plate); }
html.style-2 #brand-hero .hero__media img { border-radius: 10px; }
html.style-2 #brand-hero > .disclosure { grid-column: 1; grid-row: 3; display: flex; flex-direction: column-reverse; gap: 2px; margin-top: 20px; }
html.style-2 #brand-hero > .toc-strip { grid-column: 1 / -1; grid-row: 5; }
/* The contents: soft chips. */
html.style-2 .toc-strip { margin-top: 32px; gap: 8px; border: 0; font: 700 15px/1 var(--font-text); }
html.style-2 .toc-strip a, html.style-2 .toc-strip a:first-child, html.style-2 .toc-strip a:last-child { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); }
html.style-2 .toc-strip a:hover { background: var(--accent); color: var(--on-accent); }
/* Facts: one white card of cells, three across. */
html.style-2 #facts { padding-top: 0; padding-bottom: 48px; }
/* As many cells to the row as there are facts: a fourth fact wrapped alone under three (styles review 2026-10-09, S2.4). */
html.style-2 .facts, html.style-2 :is(.facts--4, .facts--5) { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; border: var(--border); border-radius: 16px; background: var(--plate); overflow: hidden; }
html.style-2 .facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.style-2 .facts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html.style-2 .facts:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.style-2 .facts > .facts__item, html.style-2 :is(.facts--4, .facts--5) > .facts__item { display: flex; flex-direction: column; margin: -1.5px 0 0 -1.5px; padding: 20px 24px; border: 0; border-left: 1.5px solid var(--rule-2); border-top: 1.5px solid var(--rule-2); }
html.style-2 .facts__value { order: -1; margin: 0; font: 800 32px/36px var(--font-head); letter-spacing: -.02em; }
html.style-2 .facts__label { margin-top: 4px; font: 700 15px/20px var(--font-text); color: var(--ink); }
html.style-2 .facts__note { margin-top: 2px; font: 400 14px/20px var(--font-text); color: var(--ink-3); }

/* ── brand page · verdict: kicker and badge, the heading, how it scores
   across the page, then the text beside the button ─────────────────────── */

/* The heading, how it scores across the page, then the text beside the badge
   and the button: the badge opens the rail (styles review 2026-10-09, S2.5,
   R5); the brand page's section kickers go (R4). */
html.style-2 .page-brand .head__kicker { display: none; }
html.style-2 #verdict .split {
  grid-template-columns: minmax(0, 1fr) calc((100% - 48px) * 5 / 12);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
html.style-2 #verdict .split > div:first-child, html.style-2 #verdict .verdict__head { display: contents; }
html.style-2 #verdict h2 { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
html.style-2 #verdict .verdict__scores { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
html.style-2 #verdict .verdict__lede { grid-column: 1; grid-row: 3 / 5; margin-top: 32px; font: var(--body); }
html.style-2 #verdict .verdict__head > .badge { grid-column: 2; grid-row: 3; justify-self: start; align-self: start; margin: 32px 0 0 48px; height: 34px; padding: 0 14px; font-size: 15px; line-height: 34px; }
html.style-2 #verdict .split > .rail { grid-column: 2; grid-row: 4; order: 0; margin-top: 12px; padding: 0 0 0 48px; }
/* How it scores: six cells in one tinted card. */
html.style-2 .verdict__scores .scores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; background: var(--bg); border: var(--border); border-radius: 16px; overflow: hidden; }
html.style-2 .verdict__scores .scores > .label { display: none; }
html.style-2 .verdict__scores .scores__item { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 16px 18px; border: 0; border-left: 1.5px solid var(--rule); }
html.style-2 .verdict__scores .scores__item:nth-child(2) { border-left: 0; }
html.style-2 .scores__name { font: 700 15px/20px var(--font-text); color: var(--ink-2); }
html.style-2 .rail--verdict .cta { margin-top: 0; }
html.style-2 .stat-plate__row { gap: 8px; margin-top: 18px; }
html.style-2 .stat-plate__row .label { font: 700 14px/20px var(--font-text); color: var(--ink-3); }
html.style-2 .stat-plate__row .chip--round { height: 32px; padding: 0 14px; border: 1.5px solid var(--rule); background: var(--plate); font: 700 14px/29px var(--font-text); color: var(--ink); }
/* Best for / Not best for: two tinted boxes. */
html.style-2 .signals-below { margin-top: 40px; padding-top: 0; border-top: 0; }
html.style-2 .signals { column-gap: 16px; row-gap: 16px; }
html.style-2 .signals__col { padding: 24px 28px; border-radius: 16px; background: var(--pos-soft); }
html.style-2 .signals__col--skip { background: var(--neg-soft); }
html.style-2 .signals__col-head { padding: 0; border: 0; }
html.style-2 .signals__title { font: 800 18px/24px var(--font-head); color: var(--pos); }
html.style-2 .signals__col--skip .signals__title { color: var(--neg); }
html.style-2 .signals__tag { display: none; }
html.style-2 .signals ul { margin-top: 8px; font: 400 17px/26px var(--font-text); color: var(--ink); }
html.style-2 .signals li { display: block; padding: 6px 0; border: 0; }
html.style-2 .signals li::before { display: none; }

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

/* Text at seven, its panel (In short, the guide) a white card at five. */
html.style-2 .page-brand .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; row-gap: 0; }
html.style-2 .page-brand .split > .rail { padding-top: 0; }
html.style-2 .page-brand .split > .rail > .rail__inner:not(.rail--verdict) { padding: 20px 22px; background: var(--plate); border: var(--border); border-radius: 14px; }
html.style-2 .page-brand .prose, html.style-2 .solo .prose { font: var(--body); }
html.style-2 .prose :is(p, ul, ol, .prose__note) + :is(p, ul, ol, .prose__note) { margin-top: 16px; }
html.style-2 .prose__note { padding: 0; background: transparent; border-radius: 0; font: 400 15px/22px var(--font-text); }
html.style-2 .prose__note-label { display: block; margin-bottom: 8px; font: 800 16px/22px var(--font-head); color: var(--ink); }
html.style-2 .prose__note ul { display: grid; gap: 8px; padding: 0; list-style: none; }
html.style-2 .prose__note li { position: relative; padding-left: 18px; }
html.style-2 .prose__note li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }
html.style-2 .rail__next { margin-top: 18px; }
html.style-2 .rail__index { margin-top: 6px; font: 400 15px/22px var(--font-text); }
html.style-2 .rail__index a { padding: 8px 0; border-top: 1.5px solid var(--rule-2); color: var(--ink); }
html.style-2 .rail__index a:last-child { border-bottom: 0; }
html.style-2 .rail__index span { font-weight: 700; color: var(--ink); white-space: nowrap; }
html.style-2 .rail__next + .rail__index a { display: block; padding: 0; border: 0; color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .rail__next + .rail__index a > span { display: none; }
/* Quotes: soft callouts. */
html.style-2 .rail__quote, html.style-2 .quote { margin-top: 0; padding: 20px 24px; border: 0; border-radius: 16px; background: var(--soft); font: 800 20px/28px var(--font-head); font-style: normal; color: var(--ink); }
html.style-2 .quote p { font: inherit; }
html.style-2 .quote__source { font: 400 14px/20px var(--font-text); color: var(--ink-2); }
html.style-2 .rail__aside { padding: 20px 22px; background: var(--soft); border-radius: 16px; }

/* The line: the models as soft chips, photos in white cards, tables boxed. */
/* The line's rail of model chips repeated the model sections under the text
   and left its column empty below two chips; it goes and the text takes the
   reading width (styles review 2026-10-09, S2.6, S2.9). A lineup's quote
   rail stays. */
html.style-2 #line .split:has(> .rail .rail__index) { display: block; max-width: var(--w-reading); }
html.style-2 #line .split:has(> .rail .rail__index) > .rail { display: none; }
html.style-2 .strip--line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
html.style-2 .strip a { display: block; padding: 8px 8px 12px; border: var(--border); border-radius: 14px; background: var(--plate); }
html.style-2 .strip .plate { padding: 0; border: 0; border-radius: 10px; }
html.style-2 .strip .plate--empty { background: var(--soft); color: var(--accent-text); font: 800 18px/24px var(--font-head); }
html.style-2 .strip__caption { margin-top: 10px; font: 700 14px/20px var(--font-text); color: var(--ink); }
/* The line's tables run the full width and the per-model notes stand two to a
   row; the head and the prose keep the reading width (screen pass 2026-10-10,
   R1), as on the other styles. */
html.style-2 #line > .solo { max-width: none; }
html.style-2 #line > .solo > :is(.head, .prose) { max-width: var(--w-reading); }
html.style-2 .line__models { max-width: none; }
html.style-2 .line__models > .prose { max-width: var(--w-reading); }
html.style-2 .line__models:has(> .sub:not([id^="group-"]) + .sub) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
html.style-2 .line__models:has(> .sub:not([id^="group-"]) + .sub) > :not(.sub) { grid-column: 1 / -1; }
/* A lineup's groups stand side by side, three across. */
html.style-2 .line__models:has(> .sub[id^="group-"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: none; }
html.style-2 .line__models:has(> .sub[id^="group-"]) > :not(.sub) { grid-column: 1 / -1; }
html.style-2 .line__models:has(> .sub[id^="group-"]) > .sub { margin-top: 32px; }
html.style-2 .line__models:has(> .sub[id^="group-"]) .sub__title { font-size: 20px; line-height: 26px; }
html.style-2 .line__models:has(> .sub[id^="group-"]) .sub .prose { font-size: 15px; line-height: 23px; }
html.style-2 .line__models:has(> .sub[id^="group-"]) .prow { border-top: 0; padding: 3px 0; }
html.style-2 .sub { margin-top: 32px; padding-top: 0; border-top: 0; }
html.style-2 .sub__title { font: 800 22px/28px var(--font-head); }
html.style-2 .sub .prose { margin-top: 8px; font: 400 16px/25px var(--font-text); }
html.style-2 .sub .plist { margin-top: 12px; }
html.style-2 .plist--compact .prow { padding: 8px 0; border-top: 1.5px solid var(--rule-2); }
html.style-2 .plist--compact .prow__name { font: 700 15px/22px var(--font-text); }
html.style-2 .prow__arrow { display: none; }
html.style-2 .table__title { margin-top: 36px; font: 800 20px/26px var(--font-head); }
html.style-2 .table__wrap { border: var(--border); border-radius: 14px; background: var(--plate); }
html.style-2 .table { font: 400 15px/22px var(--font-text); }
html.style-2 .table th { background: var(--soft); font: 700 14px/20px var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-2); padding: 12px 16px; }
html.style-2 .table td { padding: 12px 16px; }
html.style-2 .table tbody tr { border-bottom: 1.5px solid var(--rule-2); }
html.style-2 .table tbody tr:last-child { border-bottom: 0; }
html.style-2 .table td:first-child { font-weight: 700; }
html.style-2 .table a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .table__group td { font: 800 16px/22px var(--font-head); background: var(--bg); }
html.style-2 .table__jump a { border: var(--border); border-radius: 999px; font: 700 14px/20px var(--font-text); }
html.style-2 .line__all { margin-top: 24px; padding-top: 0; border-top: 0; }
html.style-2 .line__all a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--accent); border-radius: 999px; font: 800 15px/1.2 var(--font-head); text-decoration: none; }

/* Alternatives: compact cards — initial, name and badge, ★ · line · reviews, link. */
html.style-2 .alternatives__cards { margin-top: 24px; }
html.style-2 .alternatives__cards .cards { gap: 12px; }
html.style-2 .alternatives__cards .bcard { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; padding: 14px 20px 14px 14px; }
html.style-2 .alternatives__cards .bcard__plate { grid-column: 1; grid-row: 1; width: 56px; height: 56px; margin: 0; padding: 4px; border-radius: 10px; }
html.style-2 .alternatives__cards .bcard__plate.plate--empty { font-size: 22px; }
/* The middle wraps: name and badge, then ★ · the line · reviews, the link at the end. */
html.style-2 .alternatives__cards .bcard__body { grid-column: 2; grid-row: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
html.style-2 .alternatives__cards .bcard__body::before { content: ""; order: 3; flex-basis: 100%; }
html.style-2 .alternatives__cards .bcard__name { order: 1; font-size: 20px; line-height: 26px; }
html.style-2 .alternatives__cards .bcard .badge { order: 2; height: 22px; padding: 0 8px; font-size: 12px; line-height: 22px; }
html.style-2 .alternatives__cards .bcard__rating strong { order: 4; font: 700 15px/22px var(--font-text); }
html.style-2 .alternatives__cards .bcard__line { order: 5; margin: 0; font: 400 15px/22px var(--font-text); color: var(--ink-2); }
html.style-2 .alternatives__cards .bcard__line::before { content: "· "; }
html.style-2 .alternatives__cards .bcard__reviews { order: 6; font: 400 15px/22px var(--font-text); color: var(--ink-3); }
html.style-2 .alternatives__cards .bcard__reviews .bcard__sep { display: inline; }
html.style-2 .alternatives__cards .bcard__cta { order: 7; margin: 0 0 0 auto; height: auto; padding: 0; border: 0; border-radius: 0; font: 700 15px/22px var(--font-text); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .alternatives__cards a.bcard:hover .bcard__cta { background: transparent; color: var(--accent-text-hover); }
html.style-2 .alternatives__cards .grid-note, html.style-2 .alternatives__all { margin-top: 16px; }

/* Where to buy: the text at seven, the button at five. */
html.style-2 #where-to-buy { text-align: left; }
html.style-2 #where-to-buy > .w-narrow { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
html.style-2 #where-to-buy h2 { grid-column: 1; font: var(--h2); }
html.style-2 #where-to-buy .closer__body { grid-column: 1; margin-top: 16px; font: var(--body); color: var(--ink); }
html.style-2 #where-to-buy .cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; justify-content: flex-start; }

/* ── guide: one column; contents as a chip row; the brand after the text ── */

html.style-2 .split.article { display: grid; grid-template-columns: minmax(0, var(--w-reading)); column-gap: 0; }
/* About and Privacy: "On this page" as a chip row over the text. */
html.style-2 .split.article > aside.rail { display: block; order: -1; padding: 0; margin-bottom: 28px; }
html.style-2 .split.article > aside.rail .toc-rail { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
html.style-2 .split.article > aside.rail .toc-rail > .rail__label { margin: 0; font: 700 15px/20px var(--font-text); color: var(--ink-3); }
html.style-2 .split.article > aside.rail .toc-rail > .toc-rail__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html.style-2 .split.article > aside.rail .toc-rail__list a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: var(--border); border-radius: 999px; background: var(--plate); font: 700 14px/1 var(--font-text); color: var(--ink); text-decoration: none; }
html.style-2 .split.article > aside.rail .toc-rail__list a.is-active { border-color: var(--accent); color: var(--accent-text); }
html.style-2 .split.article > aside.rail .toc-rail__list .num { display: none; }
/* A guide: its contents are the open fold; the rail keeps only the brand it
   names, after the text. */
html.style-2 .split.article:is(:has(.toc-fold), :has(.mention)) > aside.rail { order: 1; margin: 40px 0 0; }
html.style-2 .split.article:has(.toc-fold) .toc-rail > :not(.toc-rail__related-label):not(.mention) { display: none; }
html.style-2 .split.article:has(.mention) > aside.rail .toc-rail { display: block; }
/* Privacy: its title sits inside the text, so "On this page" is a soft card
   on the right instead. */
html.style-2 .split.article:has(.prose--legal) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; }
html.style-2 .split.article:has(.prose--legal) > aside.rail { order: 0; margin: 0; }
html.style-2 .split.article:has(.prose--legal) > aside.rail .toc-rail { position: sticky; top: 24px; display: block; padding: 20px 22px; background: var(--soft); border-radius: 16px; }
html.style-2 .split.article:has(.prose--legal) > aside.rail .toc-rail > .rail__label { color: var(--ink-2); }
html.style-2 .split.article:has(.prose--legal) > aside.rail .toc-rail > .toc-rail__list { display: grid; gap: 4px; margin-top: 10px; }
html.style-2 .split.article:has(.prose--legal) > aside.rail .toc-rail__list a { height: auto; padding: 4px 0; border: 0; border-radius: 0; background: transparent; font: 700 15px/22px var(--font-text); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .article-meta { margin-bottom: 16px; }
html.style-2 .article-meta .page-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; font: 400 15px/22px var(--font-text); color: var(--ink-3); }
html.style-2 .article-meta .page-hero__sep { margin: 0; font-size: 0; color: var(--ink-3); }
html.style-2 .article-meta .stamp { white-space: nowrap; }
html.style-2 .article-meta .page-hero__sep::before { content: "·"; font-size: 15px; }
/* The footer carries the Associates statement on every page and a guide has no
   Amazon link: the byline's own line goes (styles review 2026-10-09, A.2). */
html.style-2 .article-meta .disclosure { display: none; }
html.style-2 .split.article > article > .head__kicker { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--soft); font: 700 14px/1 var(--font-text); color: var(--accent-text); }
html.style-2 .article .page-hero__title { margin-top: 14px; }
/* The answer in a white card. */
html.style-2 .article-lead > p:first-child, html.style-2 .article-body .block-answer { padding: 22px 26px; background: var(--plate); border: var(--border); border-radius: 16px; font: 400 19px/30px var(--font-text); color: var(--ink); }
/* The contents, always open: a row of outline chips. */
html.style-2 .toc-fold { display: block; margin-top: 24px; padding: 0; border: 0; background: transparent; }
html.style-2 .toc-fold summary { display: none; }
html.style-2 .toc-fold .toc-rail__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html.style-2 .toc-fold .toc-rail__list a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: var(--border); border-radius: 999px; background: var(--plate); font: 700 14px/1 var(--font-text); color: var(--ink); text-decoration: none; }
html.style-2 .toc-fold .toc-rail__list a:hover { border-color: var(--accent); color: var(--accent-text); }
html.style-2 .toc-fold .toc-rail__list .num { display: none; }
html.style-2 .article .prose { font: var(--body); }
html.style-2 .article-body h2 { display: block; margin-top: 40px; padding-top: 0; border-top: 0; font: var(--h2-rail); }
html.style-2 .article-body h2 .num { display: none; }
html.style-2 .key-facts { list-style: none; margin-left: 0; padding: 20px 24px; border: var(--border); border-radius: 16px; background: var(--plate); display: grid; gap: 10px; font: 400 15px/22px var(--font-text); }
html.style-2 .key-facts li { position: relative; padding-left: 20px; }
html.style-2 .key-facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }
html.style-2 .prose table { font: 400 15px/22px var(--font-text); border: var(--border); border-radius: 14px; background: var(--plate); border-collapse: separate; border-spacing: 0; overflow: hidden; }
html.style-2 .prose th { background: var(--soft); font: 700 14px/20px var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
html.style-2 .prose td { border-bottom: 1.5px solid var(--rule-2); }
html.style-2 .related { margin-top: 48px; padding-top: 0; border-top: 0; }
html.style-2 .related__list { margin-top: 12px; border-top: 0; }
html.style-2 .related__list a { padding: 12px 0; border-bottom: 1.5px solid var(--rule-2); font: 800 17px/24px var(--font-head); color: var(--ink); text-decoration: none; }
html.style-2 .related__list a:hover { color: var(--accent-text); }
html.style-2 .toc-rail__related-label { margin-top: 0; font: 700 15px/20px var(--font-text); color: var(--ink-3); }
/* The brand a guide names: a compact card after the text. */
html.style-2 .mention { position: relative; display: block; margin-top: 10px; padding: 14px 150px 14px 20px; border: var(--border); border-radius: 14px; background: var(--plate); }
html.style-2 .mention__top { justify-content: flex-start; align-items: center; gap: 10px; }
html.style-2 .mention__name { font: 800 20px/26px var(--font-head); }
html.style-2 .mention__verdict { height: 22px; padding: 0 8px; font-size: 12px; line-height: 22px; }
html.style-2 .mention__meta { margin-top: 2px; font: 400 15px/22px var(--font-text); color: var(--ink-2); }
html.style-2 .mention__cta { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 15px/22px var(--font-text); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html.style-2 .mention__sep { display: none; }

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

html.style-2 .page-hero__head { max-width: 760px; }
html.style-2 .page-hero__title { margin-top: 8px; }
html.style-2 .page-hero__lede { margin-top: 16px; font: 400 17px/27px var(--font-text); color: var(--ink-2); }
/* The catalogs' and About's counts: outline chips under the title. */
html.style-2 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; border: 0; }
html.style-2 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) .stat, html.style-2 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) .stat:nth-child(n) { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; height: 40px; border: var(--border); border-radius: 999px; background: var(--plate); }
html.style-2 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) .stat__value { font: 800 17px/37px var(--font-head); letter-spacing: 0; }
html.style-2 .page-hero > :is(.stats--row, .stats--grid3, .stats--grid4) .stat__label { margin: 0; font: 400 14px/37px var(--font-text); color: var(--ink-2); }
html.style-2 .page-hero > .disclosure { margin-top: 16px; }
html.style-2 .filter { gap: 8px; margin-top: 24px; }
html.style-2 .filter__chip { height: 36px; padding: 0 14px; border: var(--border); border-radius: 999px; background: var(--plate); font: 700 15px/33px var(--font-text); color: var(--ink); }
html.style-2 .filter__chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html.style-2 .filter-note { font: 400 15px/22px var(--font-text); color: var(--ink-3); }
html.style-2 .page-hero + .section--tight { padding-top: 32px; }
html.style-2 .empty { border: 1.5px dashed var(--rule-dash); border-radius: 16px; }
html.style-2 .empty__title { font: var(--h2-rail); }
html.style-2 .prose--legal { font: var(--body); }
html.style-2 .about-body h2, html.style-2 .prose--legal h2 { font: var(--h2-rail); }
html.style-2 .notfound__num { font: 800 clamp(96px, 16vw, 220px)/1 var(--font-head); color: var(--on-dark-2); opacity: .35; }
html.style-2 .page--dark .site-header { background: transparent; border-bottom-color: rgba(255, 255, 255, .16); }
html.style-2 .page--dark .wordmark, html.style-2 .page--dark .wordmark b, html.style-2 .page--dark .site-nav a:not(.btn) { color: var(--on-dark); }
html.style-2 .page--dark .wordmark__tld, html.style-2 .page--dark .head__kicker, html.style-2 .page--dark .page-hero__lede { color: var(--on-dark-2); }
html.style-2 .page--dark .site-header__menu { background: transparent; color: var(--on-dark); }
html.style-2 .page--dark .site-nav a:not(.btn):hover { background: rgba(255, 255, 255, .1); }
html.style-2 .log { padding: 4px 20px; background: var(--plate); border: var(--border); border-radius: 14px; }
html.style-2 .log li { padding: 10px 0; border-bottom: 1.5px solid var(--rule-2); font: 400 15px/22px var(--font-text); }
html.style-2 .log li:last-child { border-bottom: 0; }
html.style-2 .log .stamp { font: 700 14px/20px var(--font-text); color: var(--ink-3); }

/* ── narrow desktop (901–1140): the panels stay inline, the chips stay ─── */

@media (max-width: 1140px) {
  html.style-2 .cards, html.style-2 .cards > [class*="--featured"] { grid-column: auto; }
  html.style-2 .bcard__plate { display: flex; }
  html.style-2 .rail--chapters { display: flex; }
  html.style-2 .split.article > aside.rail { display: block; }
  html.style-2 .page-brand .split > .rail { order: 0; }
  html.style-2 .rail__inner { position: static; }
  html.style-2 .hero-figure, html.style-2 #brand-hero .hero__media, html.style-2 #entry .plate.hero__media { max-width: none; }
}

/* ── the sticky Shop bar (phones) ─────────────────────────────────────── */

@media (max-width: 720px) {
  html.style-2 .mobile-cta { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--plate); border-top: var(--border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.style-2 .mobile-cta .btn { min-height: 44px; font-size: 15px; }
  html.style-2 .has-mobile-cta { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ── phone ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  html.style-2 .page-hero { padding-top: 32px; padding-bottom: 40px; }
  html.style-2 .head__lede { font-size: 16px; line-height: 25px; }
  html.style-2 .head__title + :where(*), html.style-2 .head:where(:has(> .head__title:last-child)) + :where(*) { margin-top: 20px; }
  /* A centred nine-line lede reads badly on a phone: heads set left here. */
  html.style-2 main > .section > :is(.head--split, .head--aside) { text-align: left; }
  html.style-2 main > .section > :is(.head--split, .head--aside) :is(.head__title, .head__lede) { margin-inline: 0; }
  html.style-2 #brands .head__aside { justify-content: flex-start; }

  html.style-2 #entry { display: flex; flex-direction: column; }
  html.style-2 #entry > .tiles { margin-top: 28px; }
  html.style-2 #entry > .disclosure { margin-top: 24px; }
  html.style-2 #entry > .disclosure > span { display: block; }
  html.style-2 #entry > .disclosure > span + span::before { content: none; }
  html.style-2 .hero-figure { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.style-2 .hero-figure__row { padding: 12px 14px; }
  html.style-2 .hero-figure__text .num { font-size: 26px; line-height: 30px; }
  html.style-2 .hero-figure__foot { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--rule-2); padding: 10px 14px; }
  html.style-2 .tiles { padding: 4px 20px 8px; }

  /* A card: the photo beside badge, name, ★ and reviews; then the line,
     the sentence and the link full width. */
  html.style-2 .bcard, html.style-2 .bcard--featured { grid-template-columns: 64px auto minmax(0, 1fr); grid-template-rows: auto; row-gap: 2px; column-gap: 8px; padding: 16px; }
  html.style-2 .bcard__plate { grid-row: 1 / 4; width: 64px; height: 64px; margin-right: 6px; }
  html.style-2 .bcard__plate.plate--empty { font-size: 26px; }
  html.style-2 .bcard .badge { grid-column: 2 / -1; grid-row: 1; }
  html.style-2 .bcard__name, html.style-2 .bcard--featured .bcard__name { grid-column: 2 / -1; grid-row: 2; font-size: 22px; line-height: 26px; }
  html.style-2 .bcard__rating strong { grid-column: 2; grid-row: 3; line-height: 24px; }
  html.style-2 .bcard__reviews { grid-column: 3; grid-row: 3; line-height: 24px; }
  html.style-2 .bcard__line, html.style-2 .bcard__chips { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; }
  html.style-2 .bcard__summary { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; font-size: 16px; line-height: 25px; }
  html.style-2 .bcard__cta { grid-column: 1 / -1; grid-row: 6; justify-self: start; margin: 12px 0 0; }
  html.style-2 .bcard--soon { grid-template-columns: 44px minmax(0, 1fr); row-gap: 0; padding: 12px 16px; }
  html.style-2 .bcard--soon .bcard__plate { grid-row: 1 / 3; }
  html.style-2 .bcard--soon .bcard__name { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 24px; }
  html.style-2 .bcard--soon .bcard__summary { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 20px; }

  html.style-2 .items, html.style-2 :is(.items--3, .items--2, .items--stack) { padding: 4px 20px; }
  html.style-2 .items__item, html.style-2 .items--3 .items__item { display: block; padding: 22px 0; }
  html.style-2 .items__title, html.style-2 .prose .items__title { font-size: 21px; line-height: 27px; }
  html.style-2 .items__body { margin-top: 12px; font-size: 16px; line-height: 25px; }
  html.style-2 #how-we-evaluate .head__aside { flex-direction: column; align-items: flex-start; padding: 20px; }
  html.style-2 .badge-scale { flex-direction: column; gap: 10px; }
  html.style-2 .criteria { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  html.style-2 .stretch > .rail { margin-bottom: 28px; }
  html.style-2 :is(.rail--chapters, .jump) .toc-rail__list { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  html.style-2 .rail--chapters { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; max-width: 100%; }
  html.style-2 :is(.rail--chapters, .jump) .toc-rail__list a { flex: none; }
  html.style-2 .cards:has(> .acard) { grid-template-columns: minmax(0, 1fr); }
  html.style-2 .acard--featured { display: block; padding: 22px 20px; }
  html.style-2 .videos, html.style-2 .videos--three, html.style-2 .videos--four { grid-template-columns: minmax(0, 1fr); }
  html.style-2 .team { display: block; }
  html.style-2 .team .stats { margin-top: 20px; }
  html.style-2 #faq .split--narrow { display: flex; flex-direction: column; }
  html.style-2 #faq .split--narrow > .sources { order: 1; margin-top: 24px; }
  html.style-2 .faq { padding: 0 16px; }
  html.style-2 .faq__text { font-size: 17px; line-height: 24px; }
  html.style-2 #final-cta > .w-narrow { display: block; padding: 28px 22px; }
  html.style-2 #final-cta h2 { font-size: 24px; line-height: 30px; }
  html.style-2 #final-cta .closer__action { margin-top: 20px; }

  html.style-2 #brand-hero, html.style-2 #brand-hero:not(:has(.hero__media)) { display: flex; flex-direction: column; }
  html.style-2 #brand-hero > .hero > div:first-child { margin-top: 16px; }
  html.style-2 #brand-hero .hero__media { order: 1; width: 100%; margin-top: 20px; }
  html.style-2 #brand-hero > .disclosure { order: 2; font-size: 14px; line-height: 20px; }
  /* The strip of section chips is eleven chips in seven lines on a phone; it goes (styles review 2026-10-09, R6). */
  html.style-2 #brand-hero > .toc-strip { display: none; }
  html.style-2 .toc-strip a, html.style-2 .toc-strip a:first-child, html.style-2 .toc-strip a:last-child { height: 34px; font-size: 14px; }
  html.style-2 .facts, html.style-2 :is(.facts--4, .facts--5) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-2 .facts > .facts__item, html.style-2 :is(.facts--4, .facts--5) > .facts__item { padding: 16px; }
  html.style-2 .facts__value { font-size: 26px; line-height: 30px; }

  /* The heading, then the badge over its scores, then the text and the button (R5). */
  html.style-2 #verdict .split { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  html.style-2 #verdict h2 { grid-column: 1; grid-row: 1; }
  html.style-2 #verdict .verdict__head > .badge { grid-column: 1; grid-row: 2; margin: 12px 0 0; }
  html.style-2 #verdict .verdict__scores { grid-column: 1; grid-row: 3; margin-top: 16px; }
  html.style-2 #verdict .verdict__lede { grid-column: 1; grid-row: 4; margin-top: 24px; }
  html.style-2 #verdict .split > .rail { grid-column: 1; grid-row: 5; margin-top: 24px; padding: 0; }
  html.style-2 .verdict__scores .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-2 .verdict__scores .scores__item { padding: 14px 16px; border-left: 0; border-top: 1.5px solid var(--rule); }
  html.style-2 .verdict__scores .scores__item:nth-child(odd) { border-left: 1.5px solid var(--rule); }
  html.style-2 .verdict__scores .scores__item:nth-child(-n+3) { border-top: 0; }
  html.style-2 .cta { width: 100%; }
  html.style-2 .cta .btn { display: flex; width: 100%; }
  html.style-2 .cta__note { text-align: center; }
  html.style-2 .signals { grid-template-columns: minmax(0, 1fr); }
  html.style-2 .signals__col { padding: 20px 22px; }

  html.style-2 .page-brand .split { display: flex; flex-direction: column; }
  html.style-2 .page-brand .split:not(.split--after) > .rail { order: -1; margin-bottom: 24px; }
  html.style-2 .page-brand .split--after > .rail { margin-top: 24px; }
  html.style-2 .strip--line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.style-2 .line__models:has(> .sub[id^="group-"]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.style-2 .line__models:has(> .sub:not([id^="group-"]) + .sub) { grid-template-columns: minmax(0, 1fr); }
  html.style-2 .table { min-width: 640px; }
  html.style-2 #where-to-buy > .w-narrow { display: block; }
  html.style-2 #where-to-buy .cta { margin-top: 20px; }

  html.style-2 .split.article > aside.rail { margin-top: 32px; }
  html.style-2 .split.article:has(.prose--legal) { display: flex; flex-direction: column; }
  html.style-2 .split.article:has(.prose--legal) > aside.rail { order: -1; margin: 0 0 24px; }
  html.style-2 .split.article:has(.prose--legal) > aside.rail .toc-rail { position: static; }
  html.style-2 .toc-fold .toc-rail__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.style-2 .toc-fold .toc-rail__list a { flex: none; }
  html.style-2 .article-lead > p:first-child, html.style-2 .article-body .block-answer { padding: 18px 20px; font-size: 17px; line-height: 27px; }
  html.style-2 .mention { padding-right: 20px; }
  html.style-2 .mention__cta { position: static; display: table; margin-top: 6px; transform: none; }
}

/* On a phone the brand page's split is a flex column aligned to the start, so
   a rail with short lines shrank to its content and its card stood narrow;
   the rail always takes the full width (screen pass 2026-10-10). */
@media (max-width: 900px) {
  html.style-2 .page-brand .split > .rail { align-self: stretch; width: auto; }
}