/* ============================================================================
   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 3 · Bold magazine (STYLES-FINAL-PLAN.md, design/styles/STYLE-SPECS.md §3,
   design/styles/Style 3 - Bold Magazine.dc.html)
   Laid over templates/style.css. Every rule starts with html.style-3; the
   token block comes first, its phone mirror second.

   A lifestyle-tech magazine: near-white page, black 3px rules, Bricolage
   Grotesque condensed at display sizes against Public Sans text. The accent
   is a flat surface with black text, plus a darker tone for links; buttons
   are black. Side panels sit in a left rail and stick.
   ========================================================================== */

html.style-3 {
  /* the hue feeds only the accent surface and the accent text */
  --accent:         oklch(46% 0.16 var(--h));
  --accent-text:    oklch(46% 0.16 var(--h));
  --accent-hover:   oklch(38% 0.16 var(--h));
  --accent-line:    oklch(46% 0.16 var(--h));
  --accent-soft:    oklch(86% 0.1 var(--h));
  --accent-surface: oklch(86% 0.1 var(--h));
  --on-accent:      #fff;

  --bg:        #fbfbf9;
  --plate:     #fff;
  --surface:   #f0efe9;
  --rule:      #d9d8d2;
  --rule-dash: #d9d8d2;
  --ink:       #0b0b0b;
  --ink-2:     #333331;
  --ink-3:     #6a6a66;
  --ink-4:     #6a6a66;
  --on-dark:   #fff;
  --on-dark-2: #b0afa9;
  --rule-on-accent: rgba(0, 0, 0, .25);
  --rule-on-dark:   #3a3a38;

  /* semantic — fixed, solid fills */
  --pos: #1b6b3a;  --pos-soft: #e6efe9;
  --neu: #8a5400;  --neu-soft: #f3ece2;
  --neg: #b11f16;  --neg-soft: #f6e6e4;
  --lim: #555553;  --lim-soft: #ececea;

  /* type: Bricolage Grotesque (condensed by font-variation-settings, which
     the font shorthand does not reset) over Public Sans */
  --font-head: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 800 72px/.92 var(--font-head);
  --h2:      800 52px/.96 var(--font-head);
  --h2-rail: 800 40px/1 var(--font-head);
  --h3:      700 26px/1.15 var(--font-head);
  --deck:    400 18px/1.45 var(--font-text);
  --h4:      700 20px/1.2 var(--font-head);
  --lede:    400 20px/1.5 var(--font-text);
  --body:    400 17px/1.59 var(--font-text);
  --body-s:  400 16px/1.56 var(--font-text);
  --small:   400 14px/1.43 var(--font-text);
  --caption: 400 13.5px/1.41 var(--font-text);
  --kicker:  700 13px/16px var(--font-head);
  --micro:   700 12px/16px var(--font-head);
  --num:     800 56px/.9 var(--font-head);

  /* layout: 12 columns of 1280, 32 gutter; rails 4 columns on the left */
  --container: 1280px;
  --edge: max(24px, calc((100vw - var(--container)) / 2));
  --w-reading: 720px;
  --rail: 405px;
  --gutter: 32px;
  --grid-gap: 32px;
  --section: 80px;
  --subsection: 48px;

  --r-chip: 0; --r-btn: 0; --r-card: 0; --r-pill: 0;
  --border: 1px solid var(--rule);
  --rule-strong: 3px solid var(--ink);
}

@media (max-width: 900px) {
  html.style-3 {
    --display: 800 44px/.95 var(--font-head);
    --h2:      800 38px/1 var(--font-head);
    --h2-rail: 800 34px/.98 var(--font-head);
    --h3:      700 24px/1.17 var(--font-head);
    --lede:    400 18px/1.5 var(--font-text);
    --body:    400 16.5px/1.58 var(--font-text);
    --section: 56px;
    --subsection: 36px;
    --gutter: 0px;
    --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-3) body { font: var(--body); background: var(--bg); color: var(--ink); }
:where(html.style-3) h1 { font: var(--display); letter-spacing: -.035em; }
:where(html.style-3) h2 { font: var(--h2); letter-spacing: -.03em; }
:where(html.style-3) h3 { font: var(--h3); letter-spacing: -.015em; }
:where(html.style-3) h4 { font: var(--h4); }
/* The condensed cut: font-variation-settings, which no font shorthand resets. */
html.style-3 :is(h1, h2) { font-variation-settings: "wdth" 82; }
html.style-3 h1 { font-variation-settings: "wdth" 80; }
html.style-3 :is(h3, h4) { font-variation-settings: "wdth" 90; }
:where(html.style-3) a {
  color: var(--accent-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}
:where(html.style-3) a:hover { color: var(--ink); text-decoration-color: currentColor; }
html.style-3 :focus-visible { outline-color: var(--ink); }
/* Numbers inside prose: weight only, the text face (Style 0 already did this). */
html.style-3 .num, html.style-3 .data { font-weight: 600; }
/* Arrows close no link in this style (§4 tell 4). */
html.style-3 .arr { display: none; }

/* The caps label every block of this style speaks in. */
html.style-3 :is(.label, .kicker, .rail__label, .facts__label, .prose__note-label, .cta__tag, .acard__top, .sub__mark, .prow__eyebrow) {
  font: 700 13px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Caps links: the card links, guides, tiles, "All N brands". */
html.style-3 :is(.bcard__cta, .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 13px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
html.style-3 :is(.bcard__cta, .tile__cta, .items__more a, .head__aside-more a, .grid-note a, .acard__more, .line__all a, .table__note a, .prow__cta) {
  color: var(--accent-text);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  align-self: start;
}
/* The ink variant: read the guide, behind the ratings, the team's method. */
html.style-3 :is(.section__more a, .team__more) { color: var(--ink); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
html.style-3 :is(.section__more a, .team__more):hover { color: var(--accent-text); }

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

html.style-3 .btn {
  background: var(--ink);
  color: var(--on-accent);
  font: 700 14px/1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 19px 24px;
  border-radius: 0;
}
html.style-3 .btn:hover { background: var(--accent-surface); color: var(--ink); }
html.style-3 .btn--sm { font-size: 12px; padding: 14px 18px; }
html.style-3 .cta { border: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
html.style-3 .cta__note { font: 400 13px/18px var(--font-text); color: var(--ink-3); }
html.style-3 .cta__tag { display: inline; font-size: 11px; line-height: 18px; color: var(--ink-3); margin-right: 6px; }
html.style-3 .cta__tag::after { content: " ·"; }

html.style-3 .badge {
  height: 24px;
  padding: 0 8px;
  gap: 0;
  border: 0;
  border-radius: 0;
  font: 700 12px/24px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--ink);
}
html.style-3 .badge::before { display: none; }
html.style-3 .badge--pos { background: var(--pos); }
html.style-3 .badge--neu { background: var(--neu); }
html.style-3 .badge--neg { background: var(--neg); }
html.style-3 .badge:not(.badge--sm) { height: 32px; padding: 0 12px; font-size: 14px; line-height: 32px; }

/* Three flat bars, 18 × 6, then the word in caps. */
html.style-3 .marks { gap: 2px; }
html.style-3 .mark { width: 18px; height: 6px; border-radius: 0; border: 0; background: var(--rule); }
html.style-3 .mark--pos { background: var(--pos); }
html.style-3 .mark--neu { background: var(--neu); }
html.style-3 .mark--neg { background: var(--neg); }
html.style-3 :is(.mark--pos-off, .mark--neu-off, .mark--neg-off, .mark--none) { background: var(--rule); border: 0; }
html.style-3 .eval__level { gap: 10px; }
html.style-3 .eval__level-word { font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .eval__level-word.is-pos { color: var(--pos); }
html.style-3 .eval__level-word.is-neu { color: var(--neu); }
html.style-3 .eval__level-word.is-neg { color: var(--neg); }
html.style-3 .eval__level-word.is-lim { color: var(--lim); }

html.style-3 .chip { border: 2px solid var(--ink); border-radius: 0; padding: 0 12px; line-height: 28px; font: 700 12px/28px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

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

html.style-3 .site-header { height: 72px; border-bottom: 3px solid var(--ink); }
html.style-3 .wordmark {
  font: 800 30px/1 var(--font-head);
  font-variation-settings: "wdth" 80;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
html.style-3 .wordmark b { color: inherit; font-weight: inherit; }
html.style-3 .wordmark__tld { font: 600 13px/1 var(--font-head); letter-spacing: .08em; color: var(--ink-3); margin-left: 4px; }
html.style-3 .site-nav { gap: 32px; font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
html.style-3 .site-nav a:not(.btn) { color: var(--ink); padding: 6px 0; }
html.style-3 .site-nav a:not(.btn):hover { color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }
html.style-3 .site-nav .btn { margin-left: -8px; }

@media (max-width: 900px) {
  html.style-3 .site-header { height: 60px; gap: 12px; }
  /* A long domain shrinks with the screen, never pushing the button off it. */
  html.style-3 .wordmark { font-size: clamp(17px, 5.3vw, 24px); min-width: 0; overflow: hidden; text-overflow: clip; }
  html.style-3 .site-header__menu {
    flex: none;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 2px solid var(--ink);
    color: var(--ink);
    font: 700 12px/28px var(--font-head);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  html.style-3 .site-header__menu svg { display: none; }
  html.style-3 .site-header__menu::after { content: attr(aria-label); }
  html.style-3 .site-header--open .site-header__menu { background: var(--ink); color: var(--on-dark); }
  html.style-3 .site-header--open .site-header__menu::after { content: attr(data-close); }
  /* The open menu: a black panel under the bar, full height, 36px links. */
  html.style-3 .site-header--open .site-nav {
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 20px 28px;
    background: var(--ink);
    border: 0;
    overflow-y: auto;
    z-index: 70;
  }
  html.style-3 .site-header--open .site-nav a:not(.btn) {
    color: var(--on-dark);
    font: 800 36px/40px var(--font-head);
    font-variation-settings: "wdth" 80;
    letter-spacing: -.02em;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-on-dark);
  }
  html.style-3 .site-header--open .site-nav a:not(.btn):hover { box-shadow: none; color: var(--accent-surface); }
  html.style-3 .site-header--open .site-nav .btn {
    margin: 24px 0 0;
    background: var(--accent-surface);
    color: var(--ink);
    padding: 20px 18px;
    text-align: center;
  }
}

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

html.style-3 .site-footer {
  margin-top: 96px;
  padding: 32px var(--edge) 32px;
  background: transparent;
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
}
html.style-3 .site-footer > div { display: contents; }
html.style-3 .site-footer a { color: var(--ink); }
html.style-3 .site-footer .wordmark { grid-column: 1 / 7; grid-row: 1; color: var(--ink); font-size: 56px; line-height: 52px; font-variation-settings: "wdth" 78; }
html.style-3 .site-footer .wordmark b { color: inherit; }
html.style-3 .site-footer .wordmark__tld { font-size: 14px; }
html.style-3 .site-footer__mission { grid-column: 1 / 7; grid-row: 2; margin-top: 16px; max-width: 440px; font: 400 17px/26px var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-3 .site-footer__nav { grid-column: 7 / 9; grid-row: 1 / 3; flex-direction: column; gap: 12px; margin: 6px 0 0; font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
html.style-3 .site-footer__fineprint { grid-column: 9 / -1; grid-row: 1 / 3; margin: 6px 0 0; font: 400 13.5px/20px var(--font-text); color: var(--ink-3); }
html.style-3 .site-footer__legal { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) {
  html.style-3 .site-footer { display: flex; flex-direction: column; margin-top: 64px; padding: 28px 20px 28px; }
  html.style-3 .site-footer .wordmark { order: 1; font-size: clamp(22px, 7.6vw, 30px); line-height: 1; }
  html.style-3 .site-footer__mission { order: 2; }
  html.style-3 .site-footer__nav { order: 3; margin-top: 24px; gap: 0; }
  html.style-3 .site-footer__nav a { padding: 12px 0; border-top: 1px solid var(--rule); }
  html.style-3 .site-footer__fineprint { order: 4; margin-top: 20px; }
  html.style-3 .site-footer__legal { order: 5; margin-top: 24px; }
}

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

html.style-3 .disclosure {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding: 14px 0;
  font: 700 12px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html.style-3 .stamp, html.style-3 .stamp span { color: inherit; }
html.style-3 .crumbs { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .crumbs a { color: var(--ink-3); }
html.style-3 .crumbs a:hover { color: var(--ink); }
html.style-3 .crumbs [aria-current] { color: var(--ink); }

/* ── sections: a label row on a 3px rule ─────────────────────────────────── */

/* The rules sit inside the content width: a ruled block takes its edge as a
   margin, not as padding (header and footer rules stay full width). */
html.style-3 :is(.section.wrap, .stretch.wrap, .jump.wrap) { margin-inline: var(--edge); padding-inline: 0; }
html.style-3 .section { margin-top: var(--section); padding-top: 14px; border-top: 3px solid var(--ink); }
html.style-3 .section:first-of-type { padding-top: 14px; }
html.style-3 .section--tight { margin-top: 0; padding-top: 0; border-top: 0; }
html.style-3 .page-brand > .section ~ .section:not(.section--tight):not(#verdict)::before { display: none; }
html.style-3 .head__kicker { display: block; font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
html.style-3 .head__kicker::before { display: none; }
html.style-3 .head__title { margin-top: 20px; }
html.style-3 .head__lede { font: 400 15.5px/24px var(--font-text); color: var(--ink-2); margin-top: 16px; }
html.style-3 .head__title + :where(*), html.style-3 .head:where(:has(> .head__title:last-child)) + :where(*) { margin-top: 32px; }

/* The wide heads: the label row (the kicker left, the link right), the H2
   across the page, the lede under it at the reading width. A long generated
   lede beside the H2 left a hole under the heading, and a head without a lede
   cut the H2 at eight columns (styles review 2026-10-09, S3.2, S3.4, R1). The
   brand counts are the hero's figures again and stay hidden (R3). */
html.style-3 :is(.head--split, .head--aside) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}
html.style-3 :is(.head--split, .head--aside) > div:first-child { display: contents; }
html.style-3 :is(.head--split, .head--aside) .head__kicker { grid-column: 1 / 7; grid-row: 1; align-self: center; }
html.style-3 :is(.head--split, .head--aside) .head__title { grid-column: 1 / -1; grid-row: 2; }
html.style-3 :is(.head--split, .head--aside) .head__lede { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; max-width: 720px; font: 400 15.5px/24px var(--font-text); color: var(--ink-2); }
html.style-3 .head--aside .head__aside { grid-column: 7 / -1; grid-row: 1; justify-self: end; width: auto; display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
html.style-3 .head__aside .stats--row { display: none; }
html.style-3 .head__aside-more { margin: 0; }
@media (max-width: 900px) {
  html.style-3 :is(.head--split, .head--aside) { display: block; margin-bottom: 24px; }
  html.style-3 :is(.head--split, .head--aside) .head__lede { margin-top: 16px; }
  html.style-3 .head--aside .head__aside { justify-content: flex-start; margin-top: 16px; }
}

/* The condensed display cut on every display element (a div or a span: the
   element rules above do not reach them). */
html.style-3 :is(.bcard__name, .items__title, .acard__title, .faq__text, .sources__title, .mention__name, .sub__title, .table__group td, .empty__title) { font-variation-settings: "wdth" 85; }
html.style-3 :is(.bcard__index, .facts__value, .stat__value, .stat-plate__value, .hero-figure__text .num, .notfound__num) { font-variation-settings: "wdth" 78; }
html.style-3 :is(.tile__title, .criteria__title, .video__title, .prow__name, .team__bio) { font-variation-settings: "wdth" 88; }

/* ── homepage · hero: a caps row, the H1 across eight columns, the
   pipeline on the accent surface in the last four ─────────────────────── */

html.style-3 .page-hero { padding-top: 40px; }
html.style-3 #entry .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; margin-top: 0; }
html.style-3 #entry .hero > div { display: contents; }
html.style-3 #entry .hero__stats {
  grid-column: 1 / 9; grid-row: 1;
  margin: 0;
  gap: 8px;
  font: 700 13px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html.style-3 .hero__stats b { color: var(--ink); font-weight: 700; }
html.style-3 .hero__sep { color: var(--ink-3); }
html.style-3 #entry .head__kicker { grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: center; }
html.style-3 #entry h1 { grid-column: 1 / 9; grid-row: 2; margin-top: 28px; font-size: 80px; line-height: 72px; }
html.style-3 #entry .hero__lede { grid-column: 1 / 9; grid-row: 3; max-width: 640px; margin-top: 24px; font: var(--lede); color: var(--ink-2); }
html.style-3 #entry .hero__media { grid-column: 9 / -1; grid-row: 2 / 4; margin-top: 28px; max-width: none; }
html.style-3 #entry .plate.hero__media { padding: 16px; }
html.style-3 .hero-figure { background: var(--accent-surface); border: 0; border-radius: 0; padding: 28px 28px 24px; gap: 0; }
html.style-3 .hero-figure__bar { display: none; }
html.style-3 .hero-figure__row { padding: 14px 0; border-top: 1px solid var(--rule-on-accent); }
html.style-3 .hero-figure__row:first-child { padding-top: 0; border-top: 0; }
html.style-3 .hero-figure__text { margin: 0; font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
html.style-3 .hero-figure__text .num { display: block; margin: 0 0 6px; font: 800 64px/58px var(--font-head); letter-spacing: -.04em; color: var(--ink); font-variation-settings: "wdth" 78; }
html.style-3 .hero-figure__foot { padding-top: 14px; border-top: 1px solid var(--rule-on-accent); font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
html.style-3 .hero-figure__foot .hero__sep { color: var(--ink); }

/* Where to start: four cells under 3px rules. */
html.style-3 .tiles { gap: 32px; margin: 56px 0 40px; }
html.style-3 .tile { gap: 10px; min-height: 0; padding: 16px 0 0; border-top: 3px solid var(--ink); }
html.style-3 .tile__title { font: 700 24px/26px var(--font-head); letter-spacing: -.01em; color: var(--ink); font-variation-settings: "wdth" 90; }
html.style-3 .tile__desc { font: 400 15px/23px var(--font-text); color: var(--ink-2); }
html.style-3 .tile__cta { margin-top: 8px; }
html.style-3 .tile:hover .tile__title { color: var(--accent-text); }

/* ── brand cards: no box, a 3px rule, a big rank numeral ───────────────── */

/* The photo plate of a compact card is a square the text wraps beside: 160 on
   a half-row card, 240 when the last reviewed card has the row to itself,
   112 on a phone. It was 72 everywhere, too small to see (styles review
   2026-10-09, S3.3, S3.6). The size is a custom property on the card, so the
   alternatives' own plate rules below keep their weight. */
html.style-3 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; }
html.style-3 .cards > *, html.style-3 .cards > [class*="--half"], html.style-3 .cards > [class*="--featured"] { grid-column: auto; }
html.style-3 .bcard {
  --plate: 160px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) calc(var(--plate) + 24px);
  align-content: start;
  gap: 0;
  padding: 20px 0 28px;
  border: 0;
  border-top: 3px solid var(--ink);
  border-radius: 0;
  background: transparent;
}
html.style-3 :is(.bcard__body, .bcard__rating) { display: contents; }
/* Rank and badge: stacked on a card, side by side on the wide one. */
html.style-3 .bcard__top { grid-column: 1 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
html.style-3 .bcard__index { font: 800 48px/44px var(--font-head); letter-spacing: -.04em; color: var(--ink); font-variation-settings: "wdth" 78; }
html.style-3 .bcard__plate { display: flex; grid-column: 4; grid-row: 1 / 7; width: var(--plate); height: var(--plate); padding: 8px; align-self: start; justify-self: end; }
html.style-3 .bcard__plate.plate--empty { background: var(--accent-surface); color: var(--ink); font: 800 64px/1 var(--font-head); font-variation-settings: "wdth" 85; }
html.style-3 .bcard__name { grid-column: 1 / 4; grid-row: 3; margin-top: 12px; font: 800 34px/34px var(--font-head); letter-spacing: -.02em; font-variation-settings: "wdth" 85; }
/* One caps row: ★ · reviews · the line. */
html.style-3 .bcard__rating strong, html.style-3 .bcard__reviews, html.style-3 .bcard__line, html.style-3 .bcard__chips {
  grid-row: 4;
  margin-top: 12px;
  font: 700 12px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html.style-3 .bcard__rating strong { grid-column: 1; color: var(--ink); white-space: nowrap; }
html.style-3 .bcard__reviews { grid-column: 2; padding-left: 6px; white-space: nowrap; }
html.style-3 .bcard__line, html.style-3 .bcard__chips { grid-column: 3 / 4; padding-left: 6px; }
html.style-3 .bcard__rating + .bcard__line::before { content: "· "; }
html.style-3 .bcard__summary { grid-column: 1 / 4; grid-row: 5; max-width: 720px; margin-top: 12px; font: 400 16px/25px var(--font-text); color: var(--ink-2); }
html.style-3 .bcard__cta { grid-column: 1 / 4; grid-row: 6; justify-self: start; margin-top: 16px; padding-top: 0; }
html.style-3 a.bcard:hover .bcard__name { color: var(--accent-text); }

/* The first card is always the wide one, with its photo. */
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) {
  grid-column: 1 / -1;
  grid-template-columns: auto auto minmax(0, 7fr) minmax(0, 5fr);
  padding: 24px 0 32px;
}
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__top { grid-row: 1; flex-direction: row; align-items: center; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__index { font-size: 64px; line-height: 56px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .badge { height: 32px; padding: 0 12px; font-size: 14px; line-height: 32px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__name { grid-column: 1 / 4; grid-row: 2; margin-top: 16px; font-size: 56px; line-height: 54px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) :is(.bcard__reviews, .bcard__line, .bcard__chips), html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__rating > strong { grid-row: 3; margin-top: 16px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__line { grid-column: 3; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__summary { grid-column: 1 / 4; grid-row: 4; max-width: 560px; margin-top: 16px; font: 400 19px/29px var(--font-text); }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__cta { grid-column: 1 / 4; grid-row: 5; margin-top: 20px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__plate { grid-column: 4; grid-row: 1 / 7; width: auto; height: auto; aspect-ratio: 1; margin-left: 32px; padding: 20px; }
html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__plate.plate--empty { font-size: 220px; padding: 0; }

/* After the wide card the rest go two by two; a last reviewed card left alone
   takes the whole row, so no row ends in a hole, and its plate grows to 240. */
html.style-3 .cards > .bcard:nth-child(even):not(.bcard--soon):not(:has(+ .bcard:not(.bcard--soon))) { grid-column: 1 / -1; --plate: 240px; }

/* Queued brands: plain rows. */
html.style-3 .bcard--soon {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
html.style-3 .bcard--soon :is(.bcard__top, .bcard__plate) { display: none; }
html.style-3 .bcard--soon .bcard__name { margin: 0; font: 800 26px/28px var(--font-head); color: var(--ink-3); font-variation-settings: "wdth" 85; }
html.style-3 .bcard--soon .bcard__summary { margin: 0; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ── what to check: a two-column grid of ruled blocks ───────────────────── */

html.style-3 .items, html.style-3 :is(.items--3, .items--2, .items--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
html.style-3 .items__item, html.style-3 .items--3 .items__item { display: block; padding: 16px 0 28px; border-top: 3px solid var(--ink); border-bottom: 0; }
html.style-3 .items__num { display: none; }
html.style-3 .items__title, html.style-3 .prose .items__title { font: 800 30px/32px var(--font-head); letter-spacing: -.02em; font-variation-settings: "wdth" 82; }
html.style-3 .items__body { margin-top: 16px; font: 400 16px/25px var(--font-text); color: var(--ink-2); }
html.style-3 .items__body > p:not(.items__more) { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule); }
html.style-3 .items__body > .items__more { margin-top: 16px; }
/* An odd count of factors (three or five) never leaves a gap in the two
   columns: the first factor takes the row, title left, theses right. */
html.style-3 #factors .items > .items__item:first-child:nth-last-child(odd):not(:only-child) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
html.style-3 #factors .items > .items__item:first-child:nth-last-child(odd):not(:only-child) > div { display: contents; }
html.style-3 #factors .items > .items__item:first-child:nth-last-child(odd):not(:only-child) .items__body { margin-top: 0; }

/* ── how we rate: the H2 across the page, the intro in eight columns with
   the badge panel beside it on the accent surface, the criteria in three
   columns under both. The panel sat under a hole left by the intro beside
   the H2 (styles review 2026-10-09, S3.5); only a head with the panel is a
   grid, a homepage from before the criteria keeps its block flow. ──────── */

html.style-3 #how-we-evaluate:has(> .head--aside) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
html.style-3 #how-we-evaluate > .head--aside { display: contents; }
html.style-3 #how-we-evaluate > .head--aside .head__lede { grid-column: 1 / 9; }
html.style-3 #how-we-evaluate .head__aside {
  grid-column: 9 / -1; grid-row: 3;
  justify-self: stretch;
  display: block;
  margin-top: 20px;
  padding: 24px 28px;
  background: var(--accent-surface);
}
html.style-3 #how-we-evaluate .criteria { grid-column: 1 / -1; grid-row: 4; margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.style-3 #how-we-evaluate > .section__more { grid-column: 1 / -1; grid-row: 5; }
html.style-3 .badge-scale { gap: 0; margin-top: 12px; }
html.style-3 .badge-scale__item { justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule-on-accent); }
html.style-3 .badge-scale__item .badge { min-width: 0; }
html.style-3 .badge-scale__rule { font: 400 15px/20px var(--font-text); color: var(--ink); text-align: right; }
html.style-3 .method__text { margin: 0; padding-top: 12px; border-top: 1px solid var(--rule-on-accent); font: 400 14px/20px var(--font-text); color: var(--ink); }
html.style-3 .head__aside .section__more { margin-top: 20px; }
html.style-3 .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
html.style-3 .criteria__item { display: block; padding: 16px 0 24px; border-top: 1px solid var(--rule); border-bottom: 0; }
html.style-3 .criteria__num { display: none; }
html.style-3 .criteria__title { font: 700 24px/26px var(--font-head); letter-spacing: -.01em; font-variation-settings: "wdth" 90; }
html.style-3 .criteria__text { margin-top: 8px; font: 400 15.5px/24px var(--font-text); color: var(--ink-2); }

/* ── the stretch: chapters in a sticky left rail, topic blocks to the right ─ */

html.style-3 .stretch {
  grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
  column-gap: 32px;
  margin-top: var(--section);
  border-top: 3px solid var(--ink);
}
html.style-3 .stretch > .rail { order: -1; padding-top: 20px; }
html.style-3 .stretch > div > .section { margin-top: 0; padding: 24px 0 40px; border-top: 1px solid var(--rule); }
html.style-3 .stretch > div > .section:first-child { border-top: 0; }
html.style-3 .stretch .head__kicker { color: var(--accent-text); }
html.style-3 .stretch .head__title { margin-top: 12px; font: 800 44px/42px var(--font-head); max-width: 720px; font-variation-settings: "wdth" 82; }
html.style-3 .stretch .prose { max-width: 720px; }
/* Theses as a hairline list; no 01/02 numbering in this style. */
html.style-3 .steps { gap: 0; }
html.style-3 .steps__item { display: block; padding: 12px 0; border-top: 1px solid var(--rule); font: 400 16px/25px var(--font-text); color: var(--ink-2); }
html.style-3 .steps__item:last-child { border-bottom: 1px solid var(--rule); }
html.style-3 .steps__num { display: none; }
html.style-3 .rail__label { margin-top: 0; }
html.style-3 .toc-rail__list { margin-top: 12px; font: 700 15px/20px var(--font-head); font-variation-settings: "wdth" 90; gap: 2px; }
html.style-3 .toc-rail__list a { display: block; padding: 6px 0 6px 12px; border-left: 3px solid var(--rule); color: var(--ink-3); }
html.style-3 .toc-rail__list a.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }
html.style-3 .toc-rail__list a:hover { color: var(--ink); }
html.style-3 .toc-rail__list .num { display: none; }
html.style-3 .jump { border-top: 3px solid var(--ink); margin-top: var(--section); padding-top: 14px; }

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

html.style-3 .cards:has(> .acard) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
html.style-3 .acard, html.style-3 .acard--featured { padding: 14px 0 0; border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; }
html.style-3 .acard__top { color: var(--accent-text); font-size: 12px; }
html.style-3 .acard__index { display: none; }
html.style-3 .acard__title { margin-top: 12px; font: 800 24px/26px var(--font-head); letter-spacing: -.015em; font-variation-settings: "wdth" 82; }
html.style-3 a.acard:hover .acard__title { color: var(--accent-text); }
html.style-3 .acard__excerpt { margin-top: 10px; font: 400 14px/20px var(--font-text); color: var(--ink-2); }
html.style-3 .acard__meta { padding-top: 16px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .acard .acard__more { color: var(--ink); }
html.style-3 .grid-note { margin-top: 32px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

html.style-3 .video__play { border: 1px solid var(--rule); border-radius: 0; }
html.style-3 .video__frame { border-radius: 0; }
html.style-3 .video__icon { inset: auto auto 0 0; margin: 0; width: 48px; height: 28px; border-radius: 0; background: var(--ink); opacity: 1; }
html.style-3 .video__icon::after { border-width: 6px 0 6px 10px; }
html.style-3 .video__play:hover .video__icon { background: var(--ink); }
html.style-3 .video__title { font: 700 15px/20px var(--font-head); font-variation-settings: "wdth" 90; }
html.style-3 .video__meta { font: 700 11px/15px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

html.style-3 .team { display: block; }
/* The short line large on the left with the link, the long text beside it. */
html.style-3 .team > div:first-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: start; }
html.style-3 .team > div:first-child > :is(.head__kicker, .head__title) { grid-column: 1 / -1; }
html.style-3 .team__role { grid-column: 1; margin-top: 24px; font: 700 22px/27px var(--font-head); font-variation-settings: "wdth" 90; letter-spacing: -.01em; color: var(--ink); }
html.style-3 .team > div:first-child > .team__more { grid-column: 1; justify-self: start; }
html.style-3 .team__bio { grid-column: 2; grid-row: 3 / 6; margin-top: 24px; font: 400 15.5px/24px var(--font-text); font-style: normal; color: var(--ink-2); }
html.style-3 .team__more { margin-top: 16px; }
html.style-3 .team .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 40px; border-top: 0; }
html.style-3 .team .stat, html.style-3 .team .stat:nth-child(2n) { padding: 12px 0 20px; border: 0; border-top: 1px solid var(--rule); }
html.style-3 .team .stat:last-child:nth-child(odd) { grid-column: auto; }
html.style-3 .stat__value { font: 800 48px/44px var(--font-head); letter-spacing: -.04em; font-variation-settings: "wdth" 78; }
html.style-3 .stat__label { margin-top: 8px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ── FAQ, with the trusted sources in a sticky rail on the left ─────────── */

html.style-3 #faq .split--narrow { grid-template-columns: minmax(0, 405px) minmax(0, 1fr); column-gap: 32px; }
html.style-3 #faq .split--narrow > div:first-child { display: contents; }
html.style-3 #faq .split--narrow > div:first-child > .head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 32px; }
html.style-3 #faq .split--narrow > div:first-child > .head .head__title { max-width: 843px; }
html.style-3 #faq .split--narrow .faq { grid-column: 2; grid-row: 2; margin-top: 0; }
html.style-3 #faq .split--narrow > .sources { grid-column: 1; grid-row: 2; position: sticky; top: 24px; }
html.style-3 .sources__title { margin-top: 8px; font: 800 22px/24px var(--font-head); letter-spacing: -.01em; font-variation-settings: "wdth" 82; }
html.style-3 .sources__list { margin-top: 16px; border-top: 1px solid var(--rule); }
html.style-3 .sources__list a { padding: 12px 0; font: 400 13.5px/19px var(--font-text); }
html.style-3 .sources__list strong { font: 700 15px/20px var(--font-head); color: var(--accent-text); font-variation-settings: "wdth" 90; }
html.style-3 .sources__why { color: var(--ink-2); margin-top: 4px; }
html.style-3 .sources__arrow { color: var(--accent-text); font-weight: 700; }

html.style-3 .faq { border-top: 0; }
html.style-3 .faq__item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
html.style-3 .faq__item:first-child { padding-top: 0; }
html.style-3 .faq__q { grid-template-columns: minmax(0, 1fr) 24px; align-items: baseline; }
html.style-3 .faq__num { display: none; }
html.style-3 .faq__text { font: 800 26px/30px var(--font-head); letter-spacing: -.02em; font-variation-settings: "wdth" 82; }
html.style-3 .faq__sign { font-size: 0; transform: none; color: var(--ink); }
html.style-3 .faq__sign::before { content: "+"; font: 500 28px/1 var(--font-head); }
html.style-3 .faq__item[open] .faq__sign { transform: none; }
html.style-3 .faq__item[open] .faq__sign::before { content: "\2212"; }
html.style-3 .faq__a { max-width: 720px; margin-top: 12px; padding-left: 0; font: 400 16px/25px var(--font-text); color: var(--ink-2); }

/* ── the closer: a full-bleed band on the accent surface above the footer ── */

html.style-3 #final-cta { margin-top: var(--section); margin-inline: 0; padding: 56px var(--edge); border-top: 0; background: var(--accent-surface); text-align: left; }
html.style-3 #final-cta > .w-narrow { max-width: none; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 32px; align-items: center; }
html.style-3 #final-cta h2 { grid-column: 1; font: 800 52px/50px var(--font-head); margin: 0; font-variation-settings: "wdth" 82; }
html.style-3 #final-cta .closer__body { grid-column: 1; max-width: 720px; margin-top: 16px; font: 400 16px/25px var(--font-text); color: var(--ink); }
html.style-3 #final-cta .closer__action { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin: 0; }
html.style-3 #final-cta .btn { padding: 23px 28px; font-size: 15px; }
html.style-3 main:has(> #final-cta:last-child) + .site-footer { margin-top: 0; }

/* ── brand page · hero: the question part under a marker; the stamp and the
   disclosure as caps rows under the lede; the photo in the last five columns ─ */

html.style-3 #brand-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: 32px; align-items: start; }
html.style-3 #brand-hero > .hero, html.style-3 #brand-hero > .hero > div:first-child { display: contents; }
html.style-3 #brand-hero > .crumbs { grid-column: 1 / -1; grid-row: 1; }
html.style-3 #brand-hero h1 { grid-column: 1 / 8; grid-row: 2; margin-top: 32px; font-size: 64px; line-height: 62px; letter-spacing: -.03em; font-variation-settings: "wdth" 82; }
html.style-3 .hero__em {
  font-style: normal;
  font-weight: inherit;
  color: var(--ink);
  background: var(--accent-surface);
  padding: 0 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.style-3 #brand-hero .hero__lede { grid-column: 1 / 8; grid-row: 3; max-width: 640px; margin-top: 24px; font: var(--lede); color: var(--ink-2); }
html.style-3 #brand-hero .hero__media { grid-column: 8 / -1; grid-row: 2 / 5; margin-top: 32px; padding: 20px; max-width: none; }
html.style-3 #brand-hero .disclosure { grid-column: 1 / 8; grid-row: 4; margin-top: 24px; padding: 0; border: 0; flex-direction: column-reverse; gap: 6px; }
html.style-3 #brand-hero .stamp { color: var(--ink); }
/* The diff and the team on a line of their own, without a leading dot. */
html.style-3 #brand-hero .stamp > span:first-of-type::before { content: ""; display: block; }
html.style-3 #brand-hero .stamp > span:first-of-type .stamp__sep { display: none; }
html.style-3 #brand-hero > .toc-strip { grid-column: 1 / -1; grid-row: 5; }
/* No photo: the H1 across the page, the lede in seven columns, the stamp
   bottom-aligned in the last four. */
html.style-3 #brand-hero:not(:has(.hero__media)) h1 { grid-column: 1 / -1; font-size: 72px; line-height: 68px; }
html.style-3 #brand-hero:not(:has(.hero__media)) .disclosure { grid-column: 9 / -1; grid-row: 3; align-self: end; margin-top: 24px; }

html.style-3 .toc-strip {
  margin-top: 40px;
  padding: 14px 0;
  gap: 10px 28px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font: 700 13px/16px var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
}
html.style-3 .toc-strip a, html.style-3 .toc-strip a:first-child, html.style-3 .toc-strip a:last-child { padding: 0; margin: 0; border: 0; color: var(--ink); }
html.style-3 .toc-strip a:hover { color: var(--accent-text); }

/* ── facts: big condensed values, hairline cells, a 3px rule under ─────── */

html.style-3 .facts, html.style-3 :is(.facts--4, .facts--5) { display: flex; border-top: 0; border-bottom: 3px solid var(--ink); }
html.style-3 .facts > .facts__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  padding: 24px 20px 24px 0;
  border: 0;
  border-right: 1px solid var(--rule);
}
html.style-3 .facts > .facts__item:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
html.style-3 .facts__value { order: -1; margin: 0; font: 800 56px/50px var(--font-head); font-variation-settings: "wdth" 78; letter-spacing: -.04em; }
html.style-3 .facts--4 .facts__value { font-size: 64px; line-height: 58px; }
html.style-3 .facts > .facts__item:first-child:nth-last-child(-n+3) .facts__value, html.style-3 .facts > .facts__item:first-child:nth-last-child(-n+3) ~ .facts__item .facts__value { font-size: 72px; line-height: 64px; }
html.style-3 .facts > .facts__item:first-child:nth-last-child(2) .facts__value, html.style-3 .facts > .facts__item:first-child:nth-last-child(2) ~ .facts__item .facts__value { font-size: 96px; line-height: 84px; }
html.style-3 .facts__label { margin-top: 12px; font-size: 12px; }
html.style-3 .facts__note { margin-top: 4px; font: 400 13.5px/19px var(--font-text); color: var(--ink-3); }

/* ── verdict: the badge opens the scores and the button in the left rail,
   the heading and the text to the right. The badge sat under a label row with
   the scores a heading's height below it, cut off from what it sums up
   (styles review 2026-10-09, S3.7, R5); the section kickers of the brand
   page are gone with it (R4). ───────────────────────────────────────────── */

html.style-3 .page-brand .head__kicker { display: none; }
html.style-3 #verdict .split {
  grid-template-columns: minmax(0, 405px) minmax(0, 1fr);
  grid-template-areas: "badge h2" "rail lede";
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
}
html.style-3 #verdict .split > div:first-child, html.style-3 #verdict .verdict__head { display: contents; }
html.style-3 #verdict .verdict__head > .badge { grid-area: badge; justify-self: start; align-self: end; margin: 20px 0 0; }
html.style-3 #verdict h2 { grid-area: h2; margin-top: 20px; max-width: 843px; }
html.style-3 #verdict .verdict__lede { grid-area: lede; max-width: 720px; margin-top: 32px; font: 400 18px/29px var(--font-text); }
html.style-3 #verdict .split > .rail { grid-area: rail; order: 0; margin-top: 16px; padding-top: 0; }
html.style-3 .scores { margin-top: 0; border-top: 0; }
html.style-3 .scores > .label { margin: 0 0 8px; }
html.style-3 .scores__item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
html.style-3 .scores__name { font: 400 15px/20px var(--font-text); }
html.style-3 .rail--verdict .cta { margin-top: 24px; }
html.style-3 .signals-below { margin-top: 56px; padding-top: 0; border-top: 0; }
html.style-3 .signals { column-gap: 32px; }
html.style-3 .signals__col { border-top: 3px solid var(--pos); }
html.style-3 .signals__col--skip { border-top-color: var(--neg); }
html.style-3 .signals__col-head { padding: 12px 0 4px; border-bottom: 0; }
html.style-3 .signals__title { font: 700 13px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--pos); }
html.style-3 .signals__col--skip .signals__title { color: var(--neg); }
html.style-3 .signals__tag { display: none; }
html.style-3 .signals ul { font: 400 16px/25px var(--font-text); }
html.style-3 .signals li { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
html.style-3 .signals li::before { display: none; }

/* ── the reading sections: the rail on the left, sticky ─────────────────── */

html.style-3 .page-brand .split { grid-template-columns: minmax(0, 405px) minmax(0, 1fr); column-gap: 32px; }
html.style-3 .page-brand .split > .rail { order: -1; padding-top: 0; }
html.style-3 .page-brand .split > div:first-child { max-width: 843px; }
html.style-3 .page-brand .split .prose, html.style-3 .solo .prose { max-width: 720px; font: 400 18px/29px var(--font-text); }
html.style-3 .page-brand .split > .rail .rail__inner { margin-top: 20px; }
html.style-3 .solo { max-width: 843px; }
html.style-3 .prose__note { padding: 0; background: transparent; border-radius: 0; font: 700 17px/22px var(--font-head); font-variation-settings: "wdth" 90; }
html.style-3 .prose__note-label { margin-bottom: 8px; }
html.style-3 .prose__note ul { display: grid; gap: 0; padding: 0; list-style: none; }
html.style-3 .prose__note li { padding: 8px 0; border-top: 1px solid var(--rule); }
html.style-3 .prose__note li::marker { content: none; }
html.style-3 .rail__next { margin-top: 24px; }
html.style-3 .rail__index { margin-top: 8px; font: 700 18px/22px var(--font-head); font-variation-settings: "wdth" 90; }
html.style-3 .rail__index a { align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); }
html.style-3 .rail__index a:last-child { border-bottom: 1px solid var(--rule); }
html.style-3 .rail__index span { font: 800 26px/1 var(--font-head); color: var(--ink); white-space: nowrap; }
html.style-3 .rail__index span.arr { display: none; }
/* The factor's guide: its title, then "Read the full guide" as a caps link. */
html.style-3 .rail__next + .rail__index a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0 0; border: 0; color: var(--ink); }
html.style-3 .rail__next + .rail__index a:last-child { border-bottom: 0; }
html.style-3 .rail__next + .rail__index a > span { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; white-space: normal; color: var(--accent-text); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
html.style-3 .rail__next + .rail__index a:hover { color: var(--accent-text); }
html.style-3 .rail__quote, html.style-3 .quote { margin-top: 0; padding: 12px 0 0; border-left: 0; border-top: 3px solid var(--ink); font: 800 26px/28px var(--font-head); font-variation-settings: "wdth" 85; font-style: normal; letter-spacing: -.015em; }
html.style-3 .quote p { font: inherit; }
html.style-3 .rail__aside { padding: 0; background: transparent; border-radius: 0; }

/* The line: photos framed, model groups ruled, tables under a 3px rule. When
   the rail lists the models, their photos follow that list in the same
   column instead of a row under the text (styles review 2026-10-09, S3.9);
   the strip is the split's sibling, so the section itself becomes the grid,
   with a spring row (PAGE-ANATOMY §10) so the text never stretches the rail. */
@media (min-width: 901px) {
  html.style-3 #line:has(> .split > .rail .rail__index) { display: grid; grid-template-columns: minmax(0, 405px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 32px; align-items: start; }
  html.style-3 #line:has(> .split > .rail .rail__index) > .split { display: contents; }
  html.style-3 #line:has(> .split > .rail .rail__index) > .split > .rail { grid-column: 1; grid-row: 1; }
  html.style-3 #line:has(> .split > .rail .rail__index) > .split > div:first-child { grid-column: 2; grid-row: 1 / 4; }
  html.style-3 #line:has(> .split > .rail .rail__index) > .strip { grid-column: 1; grid-row: 2; margin-top: 24px; }
  html.style-3 #line:has(> .split > .rail .rail__index) > .line__models { grid-column: 1 / -1; grid-row: 4; }
}
html.style-3 .strip--line { gap: 24px; }
html.style-3 .strip .plate { padding: 10px; }
html.style-3 .strip .plate--empty { background: var(--accent-surface); color: var(--ink); font: 800 30px/30px var(--font-head); font-variation-settings: "wdth" 80; justify-content: flex-start; align-items: flex-end; padding: 14px; }
html.style-3 .strip__caption { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .line__models { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
html.style-3 .line__models > :is(.table__title, .table__wrap, .table__jump, .line__all, .table__note) { grid-column: 1 / -1; }
html.style-3 .sub { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
html.style-3 .sub__title { font: 800 26px/28px var(--font-head); font-variation-settings: "wdth" 85; letter-spacing: -.015em; }
html.style-3 .sub .prose { font: 400 15.5px/24px var(--font-text); color: var(--ink-2); }
html.style-3 .plist--compact .prow { padding: 10px 0; border-top: 1px solid var(--rule); }
html.style-3 .plist--compact .prow__name { font: 700 18px/22px var(--font-head); font-variation-settings: "wdth" 90; }
html.style-3 .plist--compact .prow__name a { color: var(--ink); text-decoration: none; }
html.style-3 .plist--compact .prow__name a:hover { color: var(--accent-text); }
html.style-3 .prow__arrow { display: none; }
html.style-3 .table__title { margin-top: 48px; font: 800 26px/28px var(--font-head); font-variation-settings: "wdth" 85; letter-spacing: -.015em; }
html.style-3 .table { font: 400 15px/22px var(--font-text); border-top: 3px solid var(--ink); }
html.style-3 .table th { background: transparent; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px 12px 0; }
html.style-3 .table td { padding: 14px 16px 14px 0; }
html.style-3 .table tbody tr { border-bottom: 1px solid var(--rule); }
html.style-3 .table td:first-child { font: 700 18px/22px var(--font-head); font-variation-settings: "wdth" 90; }
html.style-3 .table a { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; border-bottom: 2px solid currentColor; }
html.style-3 .table td:first-child a { font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); border: 0; }
html.style-3 .table__group td { padding: 24px 16px 8px 0; font: 800 22px/24px var(--font-head); border-bottom: 1px solid var(--ink); }
html.style-3 .table__jump a { border: 2px solid var(--ink); border-radius: 0; padding: 4px 12px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
html.style-3 .line__all { margin-top: 32px; padding-top: 0; border-top: 0; }

/* Alternatives: compact rows — initial, name and badge, the caps line, ★, the link. */
html.style-3 .alternatives__cards .cards { grid-template-columns: minmax(0, 1fr); }
html.style-3 .alternatives__cards .cards > .bcard, html.style-3 .alternatives__cards .cards > .bcard:first-child:not(.bcard--soon) {
  grid-column: auto;
  grid-template-columns: 72px max-content minmax(0, 1fr) auto auto;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
html.style-3 .alternatives__cards .bcard__top { grid-column: 3; grid-row: 1; flex-direction: row; align-items: center; }
html.style-3 .alternatives__cards .bcard__index { display: none; }
html.style-3 .alternatives__cards .bcard .badge { height: 24px; padding: 0 8px; font-size: 12px; line-height: 24px; }
html.style-3 .alternatives__cards .bcard__plate, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__plate { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; padding: 4px; aspect-ratio: auto; }
html.style-3 .alternatives__cards .bcard__plate.plate--empty, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__plate.plate--empty { font-size: 28px; padding: 0; }
html.style-3 .alternatives__cards .bcard__name, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__name { grid-column: 2; grid-row: 1; margin: 0 12px 0 0; font-size: 26px; line-height: 28px; }
html.style-3 .alternatives__cards :is(.bcard__line, .bcard__chips), html.style-3 .alternatives__cards .cards > .bcard:first-child :is(.bcard__line, .bcard__chips) { grid-column: 2; grid-row: 2; margin-top: 4px; padding-left: 0; }
html.style-3 .alternatives__cards .bcard__line::before { content: none; }
/* ★ and the reviews together on the right. */
html.style-3 .alternatives__cards .bcard__rating { display: block; grid-column: 4; grid-row: 1 / 3; align-self: center; margin: 0 24px; white-space: nowrap; }
html.style-3 .alternatives__cards .bcard__rating strong, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__rating strong { margin: 0; font: 800 26px/1 var(--font-head); letter-spacing: 0; color: var(--ink); }
html.style-3 .alternatives__cards .bcard__reviews, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__reviews { margin: 0; padding-left: 4px; }
html.style-3 .alternatives__cards .bcard__cta, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__cta { grid-column: 5; grid-row: 1 / 3; margin: 0; align-self: center; }
html.style-3 .alternatives__cards { margin-top: 32px; }

/* Where to buy: the button and its note on the left, the heading and the
   text to the right. */
html.style-3 #where-to-buy { text-align: left; padding-bottom: 0; }
html.style-3 #where-to-buy > .w-narrow { max-width: none; display: grid; grid-template-columns: minmax(0, 405px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; }
html.style-3 #where-to-buy h2 { grid-column: 2; grid-row: 1; margin-top: 20px; font: var(--h2-rail); font-variation-settings: "wdth" 82; letter-spacing: -.03em; }
html.style-3 #where-to-buy .closer__body { grid-column: 2; grid-row: 2; max-width: 720px; margin-top: 16px; font: 400 16px/25px var(--font-text); }
html.style-3 #where-to-buy .cta { grid-column: 1; grid-row: 1 / 3; margin-top: 20px; justify-content: flex-start; }

/* ── guide: the head over the grid, contents and the brand on the left ──── */

html.style-3 .article-head { margin-top: 32px; }
html.style-3 .article-head .page-hero__title { max-width: 1060px; margin-top: 16px; font-size: 64px; line-height: 60px; }
html.style-3 .article-head .head__kicker, html.style-3 .article .head__kicker { color: var(--accent-text); }
html.style-3 .article-meta, html.style-3 .article-head .article-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 20px 0 0; }
html.style-3 .article-meta .page-hero__meta { margin: 0; gap: 8px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .page-hero__meta .stamp { color: var(--ink-3); }
html.style-3 .page-hero__sep { font-size: 0; color: var(--ink-3); }
html.style-3 .page-hero__sep::before { content: "·"; font-size: 12px; }
html.style-3 .article-meta .disclosure, html.style-3 .article .disclosure { margin: 0; padding: 0; border: 0; }
html.style-3 .article-meta .page-hero__meta::after { content: "·"; }
html.style-3 .crumbs + .article-head { margin-top: 32px; }
html.style-3 .split.article { grid-template-columns: minmax(0, 296px) minmax(0, 1fr); column-gap: 32px; margin-top: 40px; }
html.style-3 .article-head + .split.article { margin-top: 40px; }
html.style-3 .split.article > aside.rail { order: -1; padding-top: 0; }
html.style-3 .split.article > article { max-width: 843px; }
html.style-3 .article-lead { margin-top: 0; }
html.style-3 .article-lead > p:first-child, html.style-3 .article-body .block-answer { padding-top: 16px; border-top: 3px solid var(--ink); font: 600 22px/32px var(--font-text); color: var(--ink); }
html.style-3 .article .prose { max-width: 720px; font: 400 18px/29px var(--font-text); }
html.style-3 .article-body h2 { display: block; margin-top: 56px; padding-top: 0; border-top: 0; font: var(--h2-rail); font-variation-settings: "wdth" 82; letter-spacing: -.03em; }
html.style-3 .article-body h2 .num { display: none; }
html.style-3 .key-facts { list-style: none; margin-left: 0; padding: 20px 28px; background: var(--accent-surface); display: grid; gap: 0; font: 400 15px/22px var(--font-text); }
html.style-3 .key-facts li { padding: 10px 0; border-top: 1px solid var(--rule-on-accent); }
html.style-3 .key-facts li:first-child { border-top: 0; padding-top: 0; }
html.style-3 .prose table { font: 400 15px/22px var(--font-text); border-top: 3px solid var(--ink); }
html.style-3 .prose th { background: transparent; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 12px 12px 0; }
html.style-3 .prose td { padding: 12px 12px 12px 0; }
html.style-3 .related { margin-top: 64px; padding-top: 14px; border-top: 3px solid var(--ink); }
html.style-3 .related__list { margin-top: 16px; border-top: 0; }
html.style-3 .related__list a { padding: 12px 0; border-bottom: 1px solid var(--rule); font: 700 20px/24px var(--font-head); font-variation-settings: "wdth" 90; letter-spacing: -.01em; color: var(--ink); }
html.style-3 .related__list a:hover { color: var(--accent-text); }
html.style-3 .toc-rail { top: 24px; }
html.style-3 .toc-rail__related-label { margin-top: 40px; }
html.style-3 .mention { margin-top: 8px; padding: 12px 0 0; border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; }
html.style-3 .mention__top { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
html.style-3 .mention__name { font: 800 30px/30px var(--font-head); font-variation-settings: "wdth" 85; letter-spacing: -.02em; }
html.style-3 .mention__meta { margin-top: 8px; font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .mention__cta { display: table; margin-top: 10px; color: var(--accent-text); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
html.style-3 .mention__sep { display: none; }
html.style-3 .mention:hover .mention__name { color: var(--accent-text); }
html.style-3 .sub .plist { margin-top: 16px; }
/* The brand page's FAQ reads from the left like every other section: the
   right-hand column it had kept open stood empty (styles review 2026-10-09,
   S3.10, R1). */

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

html.style-3 :is(.stats--row, .stats--grid3, .stats--grid4) { border-top: 0; column-gap: 32px; row-gap: 16px; margin: 32px 0; }
html.style-3 :is(.stats--row, .stats--grid3, .stats--grid4) .stat { padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--rule); }
html.style-3 .page-hero__head { max-width: 1060px; }
html.style-3 .page-hero__lede { font: var(--lede); color: var(--ink-2); max-width: 640px; }
html.style-3 .filter { gap: 8px; }
html.style-3 .filter__chip { padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; font: 700 12px/28px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
html.style-3 .filter__chip:hover { color: var(--ink); border-color: var(--ink); background: var(--accent-surface); }
html.style-3 .filter__chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
html.style-3 .filter-note { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .empty { border: 0; border-top: 3px solid var(--ink); border-radius: 0; padding: 16px 0 0; }
html.style-3 .empty__title { font: 800 34px/34px var(--font-head); font-variation-settings: "wdth" 85; }
html.style-3 .prose--legal { max-width: 720px; font: 400 16px/25px var(--font-text); }
html.style-3 .about-body h2, html.style-3 .prose--legal h2 { font: var(--h2-rail); font-variation-settings: "wdth" 82; letter-spacing: -.03em; }
html.style-3 .ledger li::before { border-color: var(--neg); }
html.style-3 .notfound__num { color: var(--rule-on-dark); font-weight: 800; }
html.style-3 .page--dark .site-header { border-bottom-color: var(--rule-on-dark); }
html.style-3 .page--dark .site-header__menu { border-color: var(--on-dark); }
html.style-3 .page--dark .btn { background: var(--accent-surface); color: var(--ink); }
html.style-3 .log { border-top: 1px solid var(--rule); }
html.style-3 .log li { padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 15px/22px var(--font-text); }
html.style-3 .log .stamp { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html.style-3 .page--dark .wordmark, html.style-3 .page--dark .wordmark b, html.style-3 .page--dark .site-header__menu, html.style-3 .page--dark .site-nav a:not(.btn) { color: var(--on-dark); }
html.style-3 .page--dark .wordmark__tld, html.style-3 .page--dark .head__kicker, html.style-3 .page--dark .page-hero__lede { color: var(--on-dark-2); }
html.style-3 .page--dark .site-header { border-bottom: 3px solid var(--on-dark); }

/* ── narrow desktop (901–1140): the base folds its rails away here; this
   style keeps its left rails, so they stay shown ───────────────────────── */

@media (min-width: 901px) {
  html.style-3 .rail--chapters { display: block; }
  html.style-3 .jump { display: none; }
  html.style-3 .split.article > aside.rail { display: block; }
  html.style-3 .toc-fold { display: none; }
  html.style-3 .page-brand .split > .rail .rail__inner { position: sticky; top: 24px; }
}

/* ── the sticky Shop bar (brand pages, phones): black, the button on the
   accent surface ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  html.style-3 .mobile-cta { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.style-3 .mobile-cta .btn { padding: 16px 18px; background: var(--accent-surface); color: var(--ink); font-size: 12px; }
  html.style-3 .has-mobile-cta { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

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

@media (max-width: 900px) {
  html.style-3 .page-hero { padding-top: 24px; }
  html.style-3 .section { padding-top: 12px; }

  /* homepage hero: counters, the kicker in the accent, H1, lede, pipeline */
  html.style-3 #entry .hero { display: flex; flex-direction: column; }
  html.style-3 #entry .hero__stats { order: -2; gap: 4px 8px; }
  html.style-3 #entry .head__kicker { order: -1; align-self: flex-start; margin-top: 16px; color: var(--accent-text); }
  html.style-3 #entry h1 { margin-top: 12px; font-size: 46px; line-height: 42px; }
  html.style-3 #entry .hero__lede { margin-top: 20px; }
  html.style-3 #entry .hero__media { margin-top: 28px; width: 100%; }
  html.style-3 .hero-figure { padding: 20px; }
  html.style-3 .hero-figure__text { display: flex; align-items: baseline; gap: 12px; }
  html.style-3 .hero-figure__text .num { display: inline; margin: 0; font-size: 44px; line-height: 44px; }
  html.style-3 .tiles { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 32px 0 24px; }
  html.style-3 .tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; padding: 14px 0; border-top: 1px solid var(--rule); }
  html.style-3 .tile:first-child { border-top: 3px solid var(--ink); }
  html.style-3 .tile__title { grid-column: 1; font-size: 20px; line-height: 22px; }
  html.style-3 .tile__cta { grid-column: 2; grid-row: 1; margin: 2px 0 0; }
  html.style-3 .tile__desc { display: block; grid-column: 1 / -1; font-size: 14px; line-height: 20px; }

  /* brand cards: one column, every card a row card */
  html.style-3 .cards, html.style-3 .cards:has(> .acard) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  html.style-3 .cards:has(> .acard) { row-gap: 32px; }
  html.style-3 .bcard { --plate: 112px; grid-template-columns: auto auto minmax(0, 1fr) calc(var(--plate) + 16px); }
  html.style-3 .cards > .bcard:nth-child(even):not(.bcard--soon):not(:has(+ .bcard:not(.bcard--soon))) { --plate: 112px; }
  html.style-3 .bcard__plate { grid-row: 1 / 3; }
  html.style-3 :is(.bcard__name, .bcard__summary, .bcard__cta) { grid-column: 1 / -1; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) { grid-template-columns: auto auto minmax(0, 1fr) 112px; padding: 20px 0 28px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__top { grid-row: 1 / 3; flex-direction: column; align-items: flex-start; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__index { font-size: 48px; line-height: 44px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .badge { height: 24px; padding: 0 8px; font-size: 12px; line-height: 24px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__name { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 34px; line-height: 34px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) :is(.bcard__reviews, .bcard__line, .bcard__chips), html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__rating > strong { grid-row: 4; margin-top: 12px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__line { grid-column: 3 / -1; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__summary { grid-column: 1 / -1; grid-row: 5; margin-top: 12px; font-size: 16px; line-height: 25px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__cta { grid-column: 1 / -1; grid-row: 6; margin-top: 16px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__plate { grid-column: 4; grid-row: 1 / 3; width: 112px; height: 112px; margin: 0; padding: 8px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__plate.plate--empty { font-size: 48px; padding: 0; }
  html.style-3 .bcard--soon .bcard__name { font-size: 22px; line-height: 24px; }
  html.style-3 .bcard__line, html.style-3 .bcard__chips { grid-column: 1 / -1; grid-row: 5; margin: 4px 0 0; padding-left: 0; }
  html.style-3 .bcard__rating + .bcard__line::before { content: none; }
  html.style-3 .bcard__summary { grid-row: 6; }
  html.style-3 .bcard__cta { grid-row: 7; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__line { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__summary { grid-row: 6; }
  html.style-3 .cards > .bcard:first-child:not(.bcard--soon) .bcard__cta { grid-row: 7; }

  /* what to check, how we rate, the stretch */
  html.style-3 .items, html.style-3 :is(.items--3, .items--2, .items--stack) { grid-template-columns: minmax(0, 1fr); }
  html.style-3 #factors .items > .items__item:first-child:nth-last-child(odd):not(:only-child) { display: block; }
  html.style-3 #factors .items > .items__item:first-child:nth-last-child(odd):not(:only-child) .items__body { margin-top: 16px; }
  html.style-3 .items__title, html.style-3 .prose .items__title { font-size: 26px; line-height: 28px; }
  html.style-3 #how-we-evaluate:has(> .head--aside) { display: block; }
  html.style-3 #how-we-evaluate .head__aside { margin-top: 24px; padding: 20px; }
  html.style-3 #how-we-evaluate .criteria { margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
  html.style-3 .criteria__title { font-size: 21px; line-height: 24px; }
  html.style-3 .stretch { display: block; }
  html.style-3 .stretch .head__title { font-size: 36px; line-height: 35px; }
  html.style-3 .stretch > div > .section { padding: 20px 0 32px; }

  /* guides, team, FAQ, closer */
  html.style-3 .team > div:first-child { display: block; }
  html.style-3 .team__bio { margin-top: 16px; }
  html.style-3 .team .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin-top: 28px; }
  html.style-3 .stat__value { font-size: 36px; line-height: 34px; }
  html.style-3 #faq .split--narrow { display: flex; flex-direction: column; }
  html.style-3 #faq .split--narrow > div:first-child > .head { margin-bottom: 24px; }
  html.style-3 #faq .split--narrow > .sources { order: 1; position: static; margin-top: 40px; }
  html.style-3 .faq__text { font-size: 22px; line-height: 26px; }
  html.style-3 #final-cta { padding: 40px var(--edge); }
  html.style-3 #final-cta > .w-narrow { display: block; }
  html.style-3 #final-cta h2 { font-size: 38px; line-height: 38px; }
  html.style-3 #final-cta .closer__action { margin-top: 24px; }
  html.style-3 #final-cta .btn { display: block; text-align: center; }

  /* brand page */
  html.style-3 #brand-hero { display: flex; flex-direction: column; }
  html.style-3 #brand-hero h1, html.style-3 #brand-hero:not(:has(.hero__media)) h1 { margin-top: 20px; font-size: 42px; line-height: 40px; }
  html.style-3 #brand-hero .hero__lede { margin-top: 16px; font-size: 17px; line-height: 26px; }
  html.style-3 #brand-hero .hero__media { order: 1; margin-top: 24px; width: 100%; padding: 16px; }
  html.style-3 #brand-hero .disclosure, html.style-3 #brand-hero:not(:has(.hero__media)) .disclosure { order: 2; margin-top: 20px; }
  /* The strip of section links is eleven links in seven lines on a phone; it goes (styles review 2026-10-09, R6). */
  html.style-3 #brand-hero > .toc-strip { display: none; }
  html.style-3 .facts, html.style-3 :is(.facts--4, .facts--5) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.style-3 .facts > .facts__item, html.style-3 .facts > .facts__item:last-child { margin: 0; padding: 16px 16px 16px 0; border-right: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  html.style-3 .facts > .facts__item:nth-child(2n) { padding: 16px 0 16px 16px; border-right: 0; }
  html.style-3 .facts > .facts__item:nth-child(-n+2) { border-top: 0; }
  html.style-3 .facts .facts__item:last-child:nth-child(odd) { padding-right: 0; border-right: 0; }
  html.style-3 .facts__value, html.style-3 :is(.facts--4, .facts--5) .facts__value, html.style-3 .facts > .facts__item:first-child:nth-last-child(-n+3) .facts__value, html.style-3 .facts > .facts__item:first-child:nth-last-child(-n+3) ~ .facts__item .facts__value { font-size: 48px; line-height: 44px; }
  html.style-3 .facts > .facts__item:first-child:nth-last-child(2) .facts__value, html.style-3 .facts > .facts__item:first-child:nth-last-child(2) ~ .facts__item .facts__value { font-size: 56px; line-height: 50px; }

  /* The heading, then the badge over its scores, then the text (R5). */
  html.style-3 #verdict .split { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "h2" "badge" "scores" "lede" "cta" "press"; }
  html.style-3 #verdict .split > .rail, html.style-3 #verdict .rail--verdict { display: contents; }
  html.style-3 #verdict .scores { grid-area: scores; margin-top: 16px; }
  html.style-3 #verdict .rail--verdict > .cta { grid-area: cta; margin-top: 24px; }
  html.style-3 #verdict .rail--verdict > :not(.scores):not(.cta) { grid-area: press; margin-top: 20px; }
  html.style-3 #verdict .verdict__head > .badge { align-self: start; margin-top: 20px; }
  html.style-3 #verdict h2 { margin-top: 16px; }
  html.style-3 #verdict .verdict__lede { margin-top: 24px; font-size: 16.5px; line-height: 26px; }
  html.style-3 .cta { width: 100%; }
  html.style-3 .cta .btn { display: block; width: 100%; padding: 21px 18px; text-align: center; }
  html.style-3 .signals-below { margin-top: 40px; }

  /* a reading section: the heading, then In short on the accent, then the text */
  html.style-3 .page-brand .split { display: flex; flex-direction: column; }
  html.style-3 .page-brand .split > div:first-child { display: contents; }
  html.style-3 .page-brand .split > .rail { order: 1; margin-top: 24px; }
  html.style-3 .page-brand .split > div:first-child > :not(.head) { order: 2; }
  html.style-3 .page-brand .split > .rail .rail__inner { margin-top: 0; }
  html.style-3 .page-brand .split .prose__note { padding: 16px 20px; background: var(--accent-surface); }
  html.style-3 .page-brand .split .prose__note li { border-top-color: var(--rule-on-accent); }
  html.style-3 .page-brand .split .prose, html.style-3 .solo .prose { font-size: 16.5px; line-height: 26px; }
  html.style-3 .line__models { grid-template-columns: minmax(0, 1fr); }
  html.style-3 .strip--line { gap: 16px; }
  html.style-3 .table { min-width: 680px; }

  html.style-3 .alternatives__cards .cards > .bcard, html.style-3 .alternatives__cards .cards > .bcard:first-child:not(.bcard--soon) { grid-template-columns: 64px minmax(0, 1fr); row-gap: 4px; }
  html.style-3 .alternatives__cards .bcard__name, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__name { grid-column: 2; grid-row: 1; margin: 0; font-size: 22px; line-height: 24px; }
  html.style-3 .alternatives__cards .bcard__top { grid-column: 2; grid-row: 2; }
  html.style-3 .alternatives__cards :is(.bcard__line, .bcard__chips), html.style-3 .alternatives__cards .cards > .bcard:first-child :is(.bcard__line, .bcard__chips) { grid-column: 2; grid-row: 3; margin: 0; }
  html.style-3 .alternatives__cards .bcard__rating { grid-column: 2; grid-row: 4; margin: 4px 0 0; }
  html.style-3 .alternatives__cards .bcard__rating strong, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__rating strong { font-size: 22px; }
  html.style-3 .alternatives__cards .bcard__cta, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__cta { grid-column: 2; grid-row: 5; margin-top: 8px; justify-self: start; }
  html.style-3 .alternatives__cards .bcard__plate, html.style-3 .alternatives__cards .cards > .bcard:first-child .bcard__plate { grid-row: 1 / 6; align-self: start; }

  html.style-3 #where-to-buy > .w-narrow { display: flex; flex-direction: column; }
  html.style-3 #where-to-buy .cta { order: 3; margin-top: 24px; }

  /* guide */
  html.style-3 .article-head { margin-top: 20px; }
  html.style-3 .article-head .page-hero__title { font-size: 40px; line-height: 38px; }
  html.style-3 .split.article { display: flex; flex-direction: column; margin-top: 28px; }
  html.style-3 .split.article > aside.rail { display: block; order: 1; margin-top: 40px; }
  html.style-3 .split.article .toc-rail > :not(.toc-rail__related-label):not(.mention) { display: none; }
  html.style-3 .toc-rail__related-label { margin-top: 0; }
  html.style-3 .toc-fold { margin-top: 24px; padding: 12px 0; border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; }
  html.style-3 .toc-fold summary { font: 700 12px/16px var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
  html.style-3 .toc-fold summary::after { color: var(--ink); }
  html.style-3 .article-lead > p:first-child, html.style-3 .article-body .block-answer { font-size: 19px; line-height: 28px; }
  html.style-3 .article .prose { font-size: 16.5px; line-height: 26px; }
  html.style-3 .article-body h2 { margin-top: 40px; }

  /* About, catalogs */
  html.style-3 :is(.stats--row, .stats--grid3, .stats--grid4) { column-gap: 20px; }
}

/* 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-3 .page-brand .split > .rail { align-self: stretch; width: auto; }
}