/* podium.css: theme "Podium" for OF Agency Rankings (owner choice 22.10.2026, design A). Loads after assets/css/base.css.
   Source of the look: _variants/proposals/a-podium/index.html (mockup) and its screenshots.
   Fonts are the mockup's files, cut for weight: Unbounded variable limited to 500-700 and Hanken Grotesk to 400-700
   (fontTools instancer; every weight this theme uses), Unbounded 800 static cut to digits, point and space.
   Graphite page, champagne-gold accent used sparingly (the place 1 marks, the #1 card, focus, small eyebrows), silver
   and bronze for places 2 and 3. Display: Unbounded (variable, latin). Rank numerals: Unbounded 800, a static instance
   cut to the digits (overlap-free outlines for the metallic gradient text). UI and body: Hanken Grotesk (variable).
   Self-hosted, OFL (texts next to the files). No external requests.
   Reading: body text 17 px, long text at most ~70 characters per line; every text colour reaches 4.5:1 or more on the
   surface it sits on (muted #AAAFB9 >= 7:1, dim #959BA6 >= 5.5:1 on every surface).
   Rules kept from base.css: footer disclosure >= 1rem, --footer-ink on --footer-bg >= 7:1 (here 16:1), never hidden;
   "Not found" is always grey; low scores use the same colours as high scores. */

@font-face {
  font-family: "Unbounded";
  src: url(/assets/fonts/podium/unbounded-500-700-latin.woff2) format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Unbounded Numerals";
  src: url(/assets/fonts/podium/unbounded-800-numerals.woff2) format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002E, U+0030-0039;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url(/assets/fonts/podium/hanken-grotesk-400-700-latin.woff2) format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks (QA 23.10.2026). The web fonts are preloaded from the <head>; on a slow first visit they can
   still arrive after the first paint. Until then the text is set in a local Arial scaled to the same text width and the
   same line box, so the swap moves almost nothing. size-adjust = web-font width / Arial width, measured on the site's
   own text (home and profiles, canvas, 23.10.2026: the letter-frequency values were 1-2.4 % too wide and re-wrapped the
   profile rank line and the H1 on cold loads); ascent and descent = web-font metric / size-adjust (Hanken 1.00 / 0.303,
   Unbounded 0.995 / 0.245). Unbounded has one fallback per weight band, its width changes with the weight. Where Arial
   is not installed the face is skipped and the stack continues as before. */
@font-face {
  font-family: "Hanken Fallback"; src: local("Arial"), local("ArialMT");
  font-weight: 100 500; font-style: normal; size-adjust: 99.7%; ascent-override: 100.3%; descent-override: 30.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 501 900; font-style: normal; size-adjust: 94.5%; ascent-override: 105.7%; descent-override: 32.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 550; font-style: normal; size-adjust: 127.4%; ascent-override: 78.1%; descent-override: 19.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 551 650; font-style: normal; size-adjust: 129.1%; ascent-override: 77.1%; descent-override: 19%; line-gap-override: 0%;
}
@font-face {
  font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 651 900; font-style: normal; size-adjust: 130.6%; ascent-override: 76.2%; descent-override: 18.8%; line-gap-override: 0%;
}

/* ================================================================ tokens */
:root {
  color-scheme: dark;
  --bg: #0c0d10;            /* page */
  --bg-2: #111317;          /* bands: key numbers, footer */
  --surface: #16181d;       /* cards, tables */
  --surface-2: #1d2026;     /* table heads, chips, inputs */
  --surface-3: #22252c;     /* hover */
  --line: #2a2e36;
  --line-2: #3a3f49;
  --hair: rgba(255, 255, 255, 0.06);
  --ink: #edeef0;           /* headings, key text: 16.7:1 on --bg */
  --ink-2: #c9cdd4;         /* long text: 12.2:1 on --bg, 10.2:1 on --surface-2 */
  --muted: #aaafb9;         /* secondary text: 8.8:1 on --bg, 7.0:1 on --surface-3 */
  --dim: #959ba6;           /* small meta: 7.0:1 on --bg, 5.5:1 on --surface-3 */
  --gold: #d9bf8a;
  --gold-hi: #ead6a8;
  --gold-lo: #a8915f;
  --silver: #c9cfd8;
  --bronze: #c9a28c;
  --steel: #8f95a0;         /* places 4+ */
  --ring-none: #6b717d;     /* outline of a "not found" dot: 3.4:1 on --surface (graphic) */
  --link: var(--ink);
  --link-line: var(--gold-lo);
  --accent: var(--gold);
  --accent-ink: #15130e;    /* on gold: 10.4:1 */
  --accent-strong: var(--gold-hi);
  --good: var(--ink);       --good-ink: #0c0d10;   /* published in full: filled */
  --partial: transparent;   --partial-ink: var(--ink);  /* partly published: outlined */
  --none: #262931;          --none-ink: var(--muted);   /* not found: grey, never red */
  --highlight: rgba(217, 191, 138, 0.1);
  --badge-bg: rgba(217, 191, 138, 0.12);
  --badge-ink: var(--gold-hi);
  --footer-bg: #111317;     /* LOCKED pair: #edeef0 on #111317 = 16.0:1 */
  --footer-ink: #edeef0;
  --focus: #d9bf8a;
  --font-body: "Hanken Grotesk", "Hanken Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Unbounded Fallback", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Unbounded Numerals", "Unbounded", "Unbounded Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --maxw: 77.5rem;          /* 1240 px */
  --gutter: 16px;
  --space: 1rem;
  --measure: 68ch;          /* long text */
  --header-h: 62px;
  --card-bg: linear-gradient(180deg, #17191e, #131519);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.8);
  --t-xl: clamp(1.8rem, 1.2rem + 2.2vw, 2.875rem);   /* home H1 (46 px max, mockup) */
  --t-l: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem);     /* page H1 */
  --t-m: clamp(1.4rem, 1.15rem + 1vw, 2.05rem);      /* section H2 */
}
@media (min-width: 40rem) { :root { --gutter: 24px; } }
@media (min-width: 64rem) { :root { --gutter: 32px; --header-h: 72px; } }

/* ================================================================ base */
html { background: var(--bg); scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none;
  font-feature-settings: "kern" 1;
}
b, strong, th, dt { font-weight: 600; color: var(--ink); }
a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--gold-hi); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--ink); }
h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.35; }
p { margin: 0 0 0.85rem; }
::selection { background: rgba(217, 191, 138, 0.3); color: #fff; }
code { color: var(--ink); }
.skip-link { background: var(--gold); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.site-main { overflow-x: clip; }
.site-main__inner { padding: 0 var(--gutter) 2rem; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ================================================================ header */
.site-header {
  position: sticky; top: 0; z-index: 30; background: rgba(12, 13, 16, 0.88); border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header__inner {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; min-height: var(--header-h);
  padding: 0 var(--gutter); gap: 0 1rem;
}
.brand { gap: 0.7rem; color: var(--ink); font: 600 0.9375rem/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; min-height: 2.75rem; }
.brand:hover { color: var(--ink); }
.brand__accent { color: var(--gold); }
/* the logo: three podium bars (silver, gold, bronze), drawn by CSS; the monogram text of data-mark is not shown */
.brand__mark {
  width: 30px; height: 30px; border-radius: 0; flex: 0 0 auto;
  background:
    linear-gradient(var(--silver), var(--silver)) 1px 13px / 8.5px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 10.75px 4px / 8.5px 25px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) 20.5px 18px / 8.5px 11px no-repeat;
}
.brand__mark::before { content: none; }
.edition { display: none; }
.site-nav { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }
.site-nav__toggle {
  list-style: none; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0 0.9rem;
  border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--ink); font-weight: 600; font-size: 0.9rem;
  cursor: pointer; user-select: none;
}
/* the menu icon: three lines drawn with gradients */
.site-nav__toggle::before {
  content: ""; width: 16px; height: 12px; flex: 0 0 auto;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat;
  border-radius: 1px;
}
.site-nav__toggle::-webkit-details-marker { display: none; }
.site-nav__toggle::marker { content: ""; }
.site-nav__toggle:hover { border-color: var(--muted); }
.site-nav__menu[open] > .site-nav__toggle { border-color: var(--gold-lo); color: var(--gold-hi); }
.site-nav__menu > .site-nav__list {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.5rem;
  overflow: visible; margin: 0; padding: 0.75rem var(--gutter) 1.1rem; background: #0f1014; border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.9);
}
.site-nav__link {
  min-height: 2.75rem; padding: 0 0.8rem; border: 0; border-radius: 10px; color: var(--muted); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; transition: color 0.15s, background-color 0.15s;
}
.site-nav__menu .site-nav__link { width: 100%; }
.site-nav__link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.site-nav__link:focus-visible { outline-offset: -2px; }
@media (min-width: 60rem) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 2rem; }
  .site-nav { grid-column: 2; }
  @supports selector(::details-content) {
    .site-nav__toggle { display: none; }
    .site-nav__menu::details-content { content-visibility: visible; }
    .site-nav__menu > .site-nav__list {
      position: static; display: flex; flex-wrap: nowrap; gap: 0.1rem; padding: 0; background: none; border: 0; box-shadow: none;
    }
    .site-nav__menu .site-nav__link { width: auto; padding: 0 0.7rem; }
    .site-nav__link:hover { background: none; }
    .site-nav__link[aria-current="page"] { background: none; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
  }
}
@media (min-width: 75rem) {
  .edition {
    display: block; grid-column: 3; grid-row: 1; margin: 0; padding: 0.55rem 0.9rem; border: 1px solid rgba(217, 191, 138, 0.35);
    border-radius: 999px; color: var(--gold); font: 500 0.78rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  }
}

/* ================================================================ buttons, links, chips, badge */
.button {
  min-height: 3rem; padding: 0 1.35rem; gap: 0.55rem; border-radius: var(--radius); font: 600 0.97rem/1 var(--font-body);
  text-decoration: none; border: 1px solid transparent; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 8px 28px -12px rgba(217, 191, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.button:hover { background: var(--gold-hi); color: var(--accent-ink); text-decoration: none; }
.button--ghost, .button--small {
  background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none;
}
.button--ghost:hover, .button--small:hover { background: transparent; color: var(--ink); border-color: var(--muted); }
.button--small { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; }
.button:focus-visible { outline-offset: 3px; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.link-arrow:hover { color: var(--gold-hi); text-decoration: underline; }
.link-arrow::after, .row-link::after, .leader__cta::after, .findings__report a::after, .hero__actions .button:first-child::after, .filter-list__link::after {
  content: ""; width: 0.45em; height: 0.45em; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); flex: 0 0 auto; margin-left: -0.05em;
}

.chip {
  gap: 0.4rem; padding: 0.18rem 0.65rem; border-radius: 999px; font: 600 0.78rem/1.45 var(--font-body); letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.chip__glyph { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; font-size: 0; flex: 0 0 auto; }
.chip--full .chip__glyph::before, .chip--partial .chip__glyph::before, .chip--none .chip__glyph::before { content: none; }
.chip--full { background: var(--ink); color: #0c0d10; }
.chip--full .chip__glyph { background: #0c0d10; }
.chip--partial { background: transparent; color: var(--ink); border-color: #8d939e; }
.chip--partial .chip__glyph { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip--none { background: var(--none); color: var(--muted); border-color: var(--line-2); }
.chip--none .chip__glyph { box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.rank-badge {
  padding: 0.25rem 0.65rem; border-radius: 999px; font: 600 0.75rem/1.35 var(--font-body); letter-spacing: 0.02em;
  background: var(--badge-bg); color: var(--badge-ink); box-shadow: inset 0 0 0 1px rgba(217, 191, 138, 0.35);
}

/* ================================================================ section heads (all pages) */
.section { margin: 4rem 0; }
.section-head { margin-bottom: 1.4rem; gap: 0.4rem 1.5rem; align-items: baseline; }
.section-head__title { font: 500 var(--t-m)/1.18 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.section-head__meta { font-size: 0.875rem; color: var(--dim); }
.section-head__meta a { color: var(--muted); }
.eyebrow, .profile-head__eyebrow {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; color: var(--gold); font: 600 0.78rem/1.35 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.eyebrow::before, .profile-head__eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--gold); flex: 0 0 auto; }
.caveat { font-size: 0.875rem; color: var(--dim); }
.absent { color: var(--muted); }
.crit-ref { font: 600 0.72rem/1 var(--font-display); color: var(--dim); letter-spacing: 0; }

/* ================================================================ home: top grid (hero, podium, key numbers, #1 card)
   The HTML keeps the order lead -> #1 card -> top 3 -> key numbers (so the Markdown version is unchanged); this grid
   draws the mockup: the podium beside the hero text, the key numbers under the hero, the #1 card under them. */
.page--home .site-main__inner { padding-top: 0; }
.home__top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "podium" "stats" "leader"; }
/* hero band: spotlight + faint grid, full bleed (main clips the overflow) */
.home__top::before, .home__top::after {
  content: ""; grid-area: 1 / 1 / 3 / -1; margin-inline: calc(50% - 50vw); pointer-events: none; z-index: 0;
}
.home__top::before {
  background:
    radial-gradient(520px 420px at 72% 34%, rgba(217, 191, 138, 0.16), transparent 70%),
    radial-gradient(900px 500px at 10% 0%, rgba(120, 130, 150, 0.1), transparent 70%);
}
.home__top::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 80%); mask-image: linear-gradient(180deg, #000 0, transparent 80%);
}
.home__top > * { position: relative; z-index: 1; min-width: 0; }
.hero__lead { grid-area: lead; margin: 0; padding: 2.25rem 0 2.5rem; }
.home__top > .top3 { grid-area: podium; }
.home__top > .stats-strip { grid-area: stats; }
.home__top > .leader { grid-area: leader; }
@media (min-width: 64rem) {
  /* qa2 23.10.: was 1.05fr / 0.95fr, 4rem; the wider text column sets the H1 in 4 lines so hero, buttons and podium fit a 1440 x 900 screen */
  .home__top { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); column-gap: 3.5rem; grid-template-areas: "lead podium" "stats stats" "leader leader"; }
  .home__top::before, .home__top::after { grid-area: 1 / 1 / 2 / -1; }
  .home__top::before {
    background:
      radial-gradient(520px 420px at 76% 18%, rgba(217, 191, 138, 0.16), transparent 70%),
      radial-gradient(900px 500px at 10% 0%, rgba(120, 130, 150, 0.1), transparent 70%);
  }
  .hero__lead { padding: 2.25rem 0 2.75rem; align-self: center; } /* qa2 23.10.: the longer answer pushed the buttons under a 900 px fold */
  .home__top > .top3 { align-self: end; padding-top: 2.5rem; }
  /* qa2: in the narrower podium column the title and the "Ranks 4-30" link no longer fit one row (the title wrapped with a
     leading dot); the link moves under the tie-break note */
  .home__top > .top3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tie" "more" "list"; }
  .home__top > .top3 .top3__tie { margin-bottom: 0.45rem; }
  .home__top > .top3 .top3__more { margin: 0 0 1.4rem; }
}

/* hero text */
.hero__kicker { margin: 0 0 1.35rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem; color: var(--gold); font: 600 0.8125rem/1.35 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.hero__eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--gold); flex: 0 0 auto; }
.hero__eyebrow:hover { color: var(--gold-hi); text-decoration: none; }
.hero__eyebrow-more { display: none; }
@media (max-width: 39.99rem) {
  .hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.09em; gap: 0.6rem; }
  .hero__eyebrow::before { width: 1.1rem; }
}
.hero__title, .page--home .lead__title {
  font: 500 var(--t-xl)/1.1 var(--font-display); letter-spacing: -0.035em; max-width: 19ch; margin: 0 0 1.5rem; color: var(--ink); text-wrap: balance;
}
.hero__date { color: var(--ink); white-space: nowrap; }
.hero__dash { color: var(--gold); }
.hero__answer { max-width: 37.5rem; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.hero__answer .answer__text { font-size: 1.09rem; line-height: 1.62; color: var(--muted); margin-bottom: 1rem; }
/* final2 23.10.: the top-5 line and the 'why #1' sentence are two short paragraphs (the separate caveat line is gone) */
.hero__answer .answer__top { font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 0.5rem; }
.hero__answer .answer__why { font-size: 0.94rem; line-height: 1.6; color: var(--muted); margin: 0; }
.hero__answer :is(.answer__top, .answer__why) a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-2); }
.hero__answer :is(.answer__top, .answer__why) a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
/* final2 23.10.: phones and tablets: the hero is flattened into the top grid so the buttons and the podium come
   right after the H1 and the first answer paragraph; the top-5 line and the 'why #1' sentence follow the podium.
   DOM, Markdown and text unchanged (display: contents on the header and the answer box). */
@media (max-width: 63.99rem) {
  .home__top { grid-template-areas: "kick" "title" "text" "actions" "podium" "top" "why" "stats" "leader"; }
  .home__top::before, .home__top::after { grid-area: 1 / 1 / 6 / -1; }
  .home__lead, .home__lead > .hero__answer { display: contents; }
  .home__lead > *, .hero__answer > * { position: relative; z-index: 1; min-width: 0; }
  .home__lead > .hero__kicker { grid-area: kick; margin-top: 2.25rem; }
  .home__lead > .hero__title { grid-area: title; }
  .hero__answer > .answer__text { grid-area: text; max-width: 37.5rem; }
  .home__lead > .hero__actions { grid-area: actions; margin-bottom: 0.25rem; }
  .home__top > .top3 { margin-top: 1.25rem; }
  .hero__answer > .answer__top { grid-area: top; margin-top: 1.5rem; max-width: 37.5rem; }
  .hero__answer > .answer__why { grid-area: why; margin-bottom: 2rem; max-width: 37.5rem; }
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0; }
.hero__actions .button { height: 3.125rem; flex: 1 1 auto; justify-content: center; }
.hero__actions .link-arrow { flex: 1 0 100%; font-size: 0.925rem; color: var(--muted); font-weight: 500; }
.hero__actions .link-arrow:hover { color: var(--ink); }
@media (min-width: 40rem) {
  .hero__actions .button { flex: 0 0 auto; }
  .hero__actions .link-arrow { flex: 0 0 auto; margin-left: 0.5rem; }
  .hero__answer .answer__text { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------- podium (top 3) */
.top3 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title more" "tie tie" "list list"; align-items: baseline; column-gap: 1.25rem; padding: 0.5rem 0 0; }
.top3__title {
  grid-area: title; display: flex; flex-wrap: wrap; gap: 0 0.45rem; margin: 0 0 1.4rem; font: 600 0.78rem/1.3 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.top3__title span + span::before { content: "· "; }
.top3__more { grid-area: more; margin: 0 0 1.4rem; }
.top3__more .link-arrow { font-size: 0.85rem; font-weight: 500; color: var(--dim); }
.top3__more .link-arrow:hover { color: var(--ink); }
.top3__tie { grid-area: tie; margin: -0.9rem 0 1.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--dim); max-width: 34rem; }
.top3__list {
  grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 0.75rem; align-items: end;
}
.top3__item {
  --tc: var(--steel); position: relative; grid-row: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; border: 0; min-height: 0; margin: 0;
}
.top3__item:nth-child(1) { grid-column: 2; }
.top3__item:nth-child(2) { grid-column: 1; }
.top3__item:nth-child(3) { grid-column: 3; }
.top3__item--gold { --tc: var(--gold); }
.top3__item--silver { --tc: var(--silver); }
.top3__item--bronze { --tc: var(--bronze); }
/* the spotlight beam over place 1 */
.top3__item--gold::before {
  content: ""; position: absolute; left: 50%; top: -13.75rem; width: 150%; height: calc(100% + 13.75rem); transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(234, 214, 168, 0.13), rgba(234, 214, 168, 0.03) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  pointer-events: none; z-index: 0;
}
.top3__item > * { position: relative; z-index: 1; }
.mono {
  --tc: var(--steel); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  font: 700 1rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--tc);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 22%, #1d2026), #15171b 70%);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mono::before { content: attr(data-initials); }
.top3__mono { order: 1; margin-bottom: 0.65rem; }
.top3__item--gold .top3__mono { --tc: var(--gold); width: 64px; height: 64px; font-size: 1.25rem; border-radius: 17px; }
.top3__item--silver .top3__mono { --tc: var(--silver); }
.top3__item--bronze .top3__mono { --tc: var(--bronze); }
.top3__name {
  order: 2; max-width: 100%; color: var(--ink); font: 600 1rem/1.2 var(--font-body); text-decoration: none; overflow-wrap: anywhere;
}
.top3__name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.top3__score { order: 3; margin: 0.6rem 0 1.15rem; font: 600 2.125rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.top3__item--gold .top3__score { font-size: 2.875rem; color: var(--gold-hi); }
.top3__max { font: 500 0.8125rem var(--font-display); letter-spacing: 0; color: var(--dim); margin-left: 0.2rem; }
/* plinth: the box (top line in the place's metal, a soft glow under it) and the place numeral as gradient text */
.top3__rank {
  order: 9; position: relative; display: flex; justify-content: center; width: 100%; height: 11.5rem; overflow: hidden;
  border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #262a31 0%, #181a1f 55%, #121317 100%);
  border: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 0; box-shadow: inset 0 3px 0 var(--tc);
}
.top3__rank::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 60px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 18%, transparent), transparent);
}
.top3__num {
  position: relative; margin-top: 1.35rem; padding: 0 0.04em; font: 800 5.25rem/1 var(--font-num); letter-spacing: -0.04em;
  color: transparent; background: linear-gradient(180deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 30%, transparent) 62%, transparent 100%);
  -webkit-background-clip: text; background-clip: text;
}
.top3__item--step1 .top3__rank { height: 15.625rem; }
.top3__item--step3 .top3__rank { height: 8.75rem; }
.top3__item--gold .top3__num { font-size: 6.75rem; }
.top3__item--step3 .top3__num { font-size: 4.25rem; margin-top: 1rem; }
@media (max-width: 39.99rem) {
  .top3 { padding-top: 0; }
  .top3__title { margin-bottom: 1rem; font-size: 0.75rem; }
  .top3__more { display: none; }
  .top3__tie { margin: -0.5rem 0 1rem; }
  .top3__list { gap: 0.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr); }
  .top3__name { font-size: 0.875rem; }
  .top3__score { font-size: 1.625rem; margin: 0.45rem 0 0.85rem; }
  .top3__item--gold .top3__score { font-size: 2.125rem; }
  .top3__max { font-size: 0.75rem; }
  .mono, .top3__mono { width: 44px; height: 44px; font-size: 0.875rem; border-radius: 12px; }
  .top3__item--gold .top3__mono { width: 52px; height: 52px; font-size: 1.0625rem; border-radius: 14px; }
  .top3__mono { margin-bottom: 0.5rem; }
  .top3__rank { height: 7rem; }
  .top3__num { font-size: 3.5rem; margin-top: 1rem; }
  .top3__item--step1 .top3__rank { height: 9.375rem; }
  .top3__item--gold .top3__num { font-size: 4.5rem; }
  .top3__item--step3 .top3__rank { height: 5.375rem; }
  .top3__item--step3 .top3__num { font-size: 2.75rem; margin-top: 0.75rem; }
  .top3__item--gold::before { top: -9rem; height: calc(100% + 9rem); }
}

/* ---------------------------------------------------------------- key numbers strip (full-bleed band) */
.stats-strip {
  margin: 0; background: var(--bg-2);
  box-shadow: 0 0 0 100vmax var(--bg-2), 0 1px 0 100vmax var(--hair), 0 -1px 0 100vmax var(--hair);
  clip-path: inset(-1px -100vmax);
}
.stats-strip .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.stats-strip .stat-tile {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.35rem 0; background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--line);
}
.stats-strip .stat-tile:nth-child(-n+2) { border-top: 0; }
.stats-strip .stat-tile:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.stats-strip .stat-tile:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-left: 0; border-left: 0; }
.stats-strip .stat-tile__value, .stat-tile__value {
  font: 600 1.75rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); margin: 0 0 0.2rem; white-space: nowrap;
}
.stat-tile__of { font: 500 0.9375rem var(--font-display); letter-spacing: 0; color: var(--dim); margin-left: 0.15rem; }
.stats-strip .stat-tile__label, .stat-tile__label { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.stat-tile__link { color: var(--ink); text-decoration-color: var(--line-2); }
.stat-tile__link:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.stats-strip .stat-tile__meta, .stat-tile__meta { margin: 0; font-size: 0.84rem; color: var(--dim); }
@media (min-width: 64rem) {
  .stats-strip .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-strip .stat-tile, .stats-strip .stat-tile:last-child { padding: 1.9rem 1.75rem 1.9rem 0; border-top: 0; flex-direction: column; align-items: stretch; gap: 0.4rem; grid-column: auto; }
  .stats-strip .stat-tile + .stat-tile { padding-left: 1.75rem; border-left: 1px solid var(--line); }
  .stats-strip .stat-tile__value { font-size: 2.125rem; }
}

/* ---------------------------------------------------------------- the #1 card (spotlight) */
.leader {
  position: relative; overflow: hidden; margin: 5.5rem 0 0; padding: 1.75rem 1.25rem 1.6rem; border-radius: 18px; color: var(--ink-2);
  background: radial-gradient(600px 300px at 0% 0%, rgba(217, 191, 138, 0.13), transparent 70%), linear-gradient(180deg, #191b20, #131418);
  border: 1px solid rgba(217, 191, 138, 0.28);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ring" "label" "name" "rank" "full" "comm" "links" "crits"; column-gap: 1rem;
}
.leader__label { grid-area: label; margin: 1.5rem 0 0.75rem; }
.leader .rank-badge { padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--gold); font: 600 0.78rem/1.35 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.leader__name { grid-area: name; margin: 0; font: 600 clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.04em; }
.leader__name a { color: var(--ink); text-decoration: none; }
.leader__name a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.leader__rank { grid-area: rank; margin: 0.65rem 0 0; color: var(--ink); font-weight: 600; font-size: 0.97rem; }
.leader__crit { grid-area: full; }
.leader__full { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.97rem; }
.leader__score {
  grid-area: ring; position: relative; justify-self: start; width: 9.375rem; height: 9.375rem; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); white-space: nowrap;
}
.leader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.leader__ring-track { fill: none; stroke: #24272e; stroke-width: 10; }
.leader__ring-fill { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; }
.leader__value { position: relative; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--gold-hi); }
.leader__max { position: relative; margin-top: 0.4rem; font: 500 0.8125rem/1 var(--font-body); color: var(--muted); }
.leader__comm { grid-area: comm; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.97rem; color: var(--muted); }
.leader__k { display: block; margin-bottom: 0.35rem; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.leader__links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; margin: 1.4rem 0 0; }
.leader__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.875rem; padding: 0 1.25rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--accent-ink); font-weight: 600; text-decoration: none; flex: 1 1 auto;
  box-shadow: 0 8px 28px -12px rgba(217, 191, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.leader__cta:hover { background: var(--gold-hi); color: var(--accent-ink); text-decoration: none; }
.leader__site { color: var(--muted); font-size: 0.94rem; text-decoration-color: var(--line-2); }
.leader__site:hover { color: var(--ink); }
.leader__crits { grid-area: crits; margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.leader__crits-title { margin: 0 0 0.85rem; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.leader__critlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem 1.5rem; font-size: 0.9rem; color: var(--muted); }
.leader__critem { display: flex; align-items: center; gap: 0.6rem; line-height: 1.3; margin: 0; }
.leader__critem::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.leader__critem--full::before { background: var(--gold); box-shadow: none; }
.leader__critem--partial::before { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--gold); }
.leader__cid { font: 600 0.7rem/1 var(--font-display); color: var(--dim); width: 2.35rem; flex: 0 0 auto; white-space: nowrap; }
.leader__cst { color: var(--gold); font-weight: 600; white-space: nowrap; }
@media (min-width: 40rem) {
  .leader { padding: 2.25rem 2rem 2rem; border-radius: var(--radius-xl);
    grid-template-columns: 13.75rem auto minmax(0, 1fr); column-gap: 0;
    grid-template-areas: "ring label label" "ring name name" "ring rank full" "ring comm comm" "ring links links" "crits crits crits"; align-items: start; }
  .leader__score { grid-row: 1 / 6; align-self: center; width: 11.25rem; height: 11.25rem; }
  .leader__value { font-size: 3.1rem; }
  .leader__label { margin-top: 0; }
  .leader__rank { white-space: nowrap; }
  .leader__crit { margin-top: 0.65rem; }
  .leader__crit { padding-left: 0.6rem; }
  .leader__crit .leader__full::before { content: "· "; color: var(--dim); }
  .leader__cta { flex: 0 0 auto; }
  .leader__critlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .leader { padding: 2.5rem 2.75rem; grid-template-columns: 16rem auto minmax(0, 1fr); column-gap: 0; }
  .leader__score { width: 12.5rem; height: 12.5rem; }
  .leader__value { font-size: 3.5rem; }
  .leader__comm, .leader__links, .leader__rank, .leader__crit { max-width: 47.5rem; }
  .leader__critlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================================================================ criteria dots (C01..C12 in three groups of four) */
.critbar { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.critbar__cell { display: block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--ring-none); background: none; }
.critbar__cell:nth-child(4), .critbar__cell:nth-child(8) { margin-right: 6px; }
.critbar__cell--full { background: var(--ink); box-shadow: none; }
.critbar__cell--partial { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.critbar__text { display: block; margin-top: 0.5rem; font-size: 0.84rem; color: var(--dim); white-space: nowrap; }
.critbar__text b { color: var(--ink); font-weight: 600; }
.critlegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.875rem; color: var(--muted); }
.critlegend__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.critlegend__item::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.critlegend__item--full::before { background: var(--ink); box-shadow: none; }
.critlegend__item--partial::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ================================================================ tables (all pages) */
.table-scroll { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.data-table { font-size: 0.94rem; color: var(--ink-2); }
.data-table__caption { padding: 0.9rem 1.1rem; font-size: 0.84rem; color: var(--dim); border-bottom: 1px solid var(--line); }
.data-table th, .data-table td { padding: 0.85rem 1.1rem; border-top-color: var(--line); }
.data-table thead th {
  background: var(--surface-2); color: var(--dim); font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.data-table tbody th { color: var(--ink); }
.data-table tbody tr:hover > * { background: var(--surface-3); }
.data-table .sort-button::after { color: var(--dim); }
.data-table th[aria-sort] .sort-button { color: var(--ink); }
.agency-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.agency-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }
.score__value { font: 600 1.2rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }
.score__max { font: 500 0.75rem var(--font-display); letter-spacing: 0; color: var(--dim); margin-left: 0.15em; }
.scorebar { display: block; width: 100%; max-width: 7.5rem; height: 4px; margin-top: 0.75rem; border-radius: 4px; overflow: hidden; }
.scorebar__track { fill: #272a31; }
.scorebar__fill { fill: var(--ink); }
.rates__n { color: var(--ink); font-weight: 700; }
.table-tools__search { min-height: 2.75rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); padding: 0 0.95rem; }
.table-tools__search::placeholder { color: var(--dim); }
.table-tools__count { color: var(--dim); }
.tool-chip { min-height: 2.5rem; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 0.875rem; }
.tool-chip:hover { border-color: var(--muted); color: var(--ink); }
.tool-chip[aria-pressed="true"] { background: rgba(217, 191, 138, 0.14); border-color: var(--gold-lo); color: var(--gold-hi); }
/* metallic rank numerals (Unbounded 800): steel for every rank, the place metals on the home leaderboard */
.rank-num {
  --tc: var(--steel); display: inline-block; padding-right: 0.04em; font: 800 1.75rem/1 var(--font-num); letter-spacing: -0.05em;
  color: transparent; background: linear-gradient(180deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 62%, #16181d) 100%);
  -webkit-background-clip: text; background-clip: text; font-variant-numeric: tabular-nums;
}
.rank-table .col-rank { width: 4rem; text-align: left; }
.rank-table td.col-country { color: var(--muted); white-space: nowrap; }
.rank-table .col-score { min-width: 6.5rem; }
.rank-table .col-score .score__value { font-size: 1.5rem; }
.rank-table .col-crit { white-space: nowrap; }
.rank-table td.col-commission { color: var(--muted); font-size: 0.9rem; line-height: 1.45; min-width: 12rem; }
.rank-table td.col-band { color: var(--muted); font-size: 0.875rem; line-height: 1.35; min-width: 7rem; }
.rank-table td.col-checked { color: var(--dim); font-size: 0.84rem; line-height: 1.35; }
/* the #1 label in tables: a short gold text line under the name (no pill that wraps into a block) */
.data-table .col-agency .rank-badge { display: block; margin-top: 0.25rem; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--gold); font-size: 0.78rem; letter-spacing: 0; line-height: 1.3; }
.row-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; font-size: 0.875rem; color: var(--ink); text-decoration: none; }
.row-link:hover { color: var(--gold-hi); text-decoration: underline; }
.ranking { scroll-margin-top: calc(var(--header-h) + 8px); }
.ranking .caveat, .ranking__note { margin-top: 1rem; color: var(--dim); font-size: 0.875rem; }

/* ---------------------------------------------------------------- home leaderboard: the real <table> as cards on every width
   (rank-table--cards, home only). The HTML keeps every column (rank, agency, country, score, criteria, band, commission,
   checked, profile link) and explicit table roles. Two text rows per card: name / criteria dots / commission on top,
   country / band / check date under them; rank numeral + monogram and the score span both rows. */
.rank-table--cards, .rank-table--cards tbody, .rank-table--cards caption { display: block; width: 100%; }
.table-scroll--cards { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.rank-table--cards .data-table__caption { padding: 0 0 1rem; border: 0; color: var(--dim); }
.rank-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* phones: the (visually hidden) header row shows itself when one of its sort buttons gets keyboard focus */
.rank-table--cards thead:focus-within { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: block; margin-bottom: 0.75rem; white-space: normal; }
.rank-table--cards thead:focus-within tr { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.rank-table--cards thead:focus-within th { display: block; background: none; padding: 0; border: 0; }
.rank-table--cards tbody { display: flex; flex-direction: column; gap: 0.625rem; }
.rank-table--cards .rank-row {
  --tc: var(--steel); position: relative; display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) auto; column-gap: 0.75rem;
  grid-template-areas: "rank agency score" "rank country score" "crit crit crit" "comm comm comm" "foot foot foot";
  align-items: center; padding: 1rem 1rem 1.05rem; background: var(--card-bg); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.rank-table--cards .rank-row[hidden] { display: none; }
.rank-table--cards .rank-row:hover { border-color: var(--line-2); }
.rank-table--cards .rank-row:hover > * { background: none; }
.rank-table--cards .rank-row > * { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none; background: none; text-align: left; white-space: normal; }
.rank-table--cards .rank-row--gold { --tc: var(--gold-hi); border-color: rgba(217, 191, 138, 0.34);
  background: linear-gradient(90deg, rgba(217, 191, 138, 0.08), transparent 40%), linear-gradient(180deg, #191b20, #141519); }
.rank-table--cards .rank-row--silver { --tc: var(--silver); }
.rank-table--cards .rank-row--bronze { --tc: var(--bronze); }
.rank-table--cards .col-rank { grid-area: rank; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: auto; align-self: center; }
.rank-table--cards .rank-num { --tc: inherit; font-size: 1.875rem; background-image: linear-gradient(180deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 66%, #16181d) 100%); }
.rank-table--cards .mono { --tc: #b6bbc4; width: 38px; height: 38px; border-radius: 11px; font-size: 0.8125rem; background: linear-gradient(145deg, #23262d, #17191e); border-color: var(--line); }
.rank-table--cards .rank-row--gold .mono { --tc: var(--gold); background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 22%, #1d2026), #15171b 70%); border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.rank-table--cards .rank-row--silver .mono { --tc: var(--silver); background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 22%, #1d2026), #15171b 70%); border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.rank-table--cards .rank-row--bronze .mono { --tc: var(--bronze); background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 22%, #1d2026), #15171b 70%); border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.rank-table--cards .col-agency { grid-area: agency; align-self: end; }
.rank-table--cards .col-agency .agency-link { font-size: 1.03rem; line-height: 1.25; }
.rank-table--cards .agency-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); z-index: 1; }
.rank-table--cards .agency-link:focus-visible { outline: 0; }
.rank-table--cards .agency-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.rank-table--cards .col-agency .rank-badge {
  display: block; margin-top: 0.2rem; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--gold); font-size: 0.78rem; letter-spacing: 0; line-height: 1.3;
}
.rank-table--cards td.col-country { grid-area: country; align-self: start; margin-top: 0.15rem; font-size: 0.875rem; color: var(--dim); white-space: normal; }
.rank-table--cards .col-score { grid-area: score; align-self: center; text-align: right; }
.rank-table--cards .col-score .score__value { font-size: 1.6rem; }
.rank-table--cards .rank-row--gold .score__value { color: var(--gold-hi); }
.rank-table--cards .col-score .scorebar { width: 4.5rem; margin: 0.6rem 0 0 auto; }
.rank-table--cards .rank-row--gold .scorebar__fill { fill: var(--gold); }
.rank-table--cards .rank-row--silver .scorebar__fill { fill: var(--silver); }
.rank-table--cards .rank-row--bronze .scorebar__fill { fill: var(--bronze); }
.rank-table--cards .col-crit {
  grid-area: crit; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem;
  margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); white-space: normal;
}
.rank-table--cards .critbar__text { margin: 0; }
.rank-table--cards .rank-row--gold .critbar__cell--full { background: var(--gold); }
.rank-table--cards .rank-row--gold .critbar__cell--partial { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--gold); }
.rank-table--cards td.col-commission { grid-area: comm; margin-top: 0.8rem; font-size: 0.94rem; line-height: 1.5; color: var(--muted); }
.rank-table--cards td.col-commission::before {
  content: "Commission as published"; display: block; margin-bottom: 0.25rem; font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.rank-table--cards td.col-band, .rank-table--cards td.col-checked { grid-area: foot; margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.35; color: var(--dim); min-width: 0; }
.rank-table--cards td.col-band { justify-self: start; max-width: 50%; }
.rank-table--cards td.col-checked { justify-self: end; max-width: 50%; text-align: right; }
@media (max-width: 39.99rem) { .rank-table--cards td.col-band, .rank-table--cards td.col-checked { font-size: 0.78rem; } }
.rank-table--cards td.col-checked::before { content: "Checked "; }
.rank-table--cards .col-profile { display: none; }
@media (min-width: 40rem) {
  .rank-table--cards .rank-row { grid-template-columns: 7rem minmax(0, 1fr) auto; column-gap: 1rem; padding: 1.1rem 1.25rem 1.15rem; }
  .rank-table--cards .rank-num { font-size: 2.375rem; }
  .rank-table--cards .mono { width: 44px; height: 44px; font-size: 0.875rem; border-radius: 12px; }
}
@media (min-width: 64rem) {
  .rank-table--cards thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: block; white-space: normal; }
  .rank-table--cards thead tr, .rank-table--cards .rank-row {
    display: grid; grid-template-columns: 9.25rem minmax(0, 1.25fr) 7.5rem 12.5rem minmax(0, 1.45fr) 2.875rem; column-gap: 1.5rem;
  }
  .rank-table--cards thead tr { padding: 0 1.75rem 0.75rem; grid-template-areas: "rank agency score crit comm link"; align-items: end; }
  .rank-table--cards thead th.col-commission { grid-area: comm; }
  .rank-table--cards thead tr:hover > * { background: none; }
  .rank-table--cards thead th {
    display: block; padding: 0; border: 0; background: none; color: var(--dim); font: 600 0.72rem/1.2 var(--font-body);
    letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  }
  .rank-table--cards thead th.col-country, .rank-table--cards thead th.col-band, .rank-table--cards thead th.col-checked, .rank-table--cards thead th.col-profile {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rank-table--cards .rank-row {
    grid-template-areas: "rank agency score crit comm link" "rank country score band checked link";
    align-content: center; padding: 1.25rem 1.75rem; row-gap: 0;
  }
  .rank-table--cards .rank-num { font-size: 3.25rem; }
  .rank-table--cards .mono { width: 48px; height: 48px; font-size: 0.9375rem; border-radius: 13px; }
  .rank-table--cards .col-agency .agency-link { font-size: 1.125rem; }
  .rank-table--cards td.col-country { margin-top: 0.2rem; }
  .rank-table--cards .col-score { text-align: left; }
  .rank-table--cards .col-score .score__value { font-size: 1.875rem; }
  .rank-table--cards .col-score .scorebar { width: 100%; max-width: 7.5rem; margin: 0.75rem 0 0; }
  .rank-table--cards .col-crit { grid-area: crit; display: block; margin: 0; padding: 0; border: 0; align-self: end; }
  .rank-table--cards .col-crit .critbar__text { margin-top: 0.5rem; }
  .rank-table--cards td.col-band { grid-area: band; align-self: start; justify-self: start; max-width: none; margin-top: 0.2rem; }
  .rank-table--cards td.col-commission { grid-area: comm; margin: 0; align-self: end; }
  .rank-table--cards td.col-commission::before { content: none; }
  .rank-table--cards td.col-checked { grid-area: checked; align-self: start; justify-self: start; text-align: left; max-width: none; margin-top: 0.2rem; }
  .rank-table--cards .col-profile { grid-area: link; display: block; justify-self: end; align-self: center; position: relative; z-index: 2; }
  /* flex, not grid: the hidden label text is an item of its own, and a grid put the chevron in a second, lower row */
  .rank-table--cards .row-link {
    display: flex; align-items: center; justify-content: center; gap: 0; width: 2.875rem; height: 2.875rem; min-height: 0; padding: 0;
    border: 1px solid var(--line-2); border-radius: 12px; font-size: 0; color: var(--ink); overflow: hidden;
  }
  .rank-table--cards .row-link::after { width: 7px; height: 7px; margin: 0 2px 0 0; }
  .rank-table--cards .row-link:hover { border-color: var(--muted); text-decoration: none; }
  .rank-table--cards .rank-row--gold .row-link { border-color: rgba(217, 191, 138, 0.5); color: var(--gold-hi); }
}

/* ---------------------------------------------------------------- other ranking tables (filtered lists, /best/, compare hub):
   a dark table on wide screens, one card per agency on phones (rank-table--stack) */
.rank-table--stack .col-crit { white-space: nowrap; }
.rank-table--stack td.col-overall { color: var(--muted); font-size: 0.9rem; }
.rank-table--stack th.col-overall { width: 7rem; }
.rank-table--stack tbody th, .rank-table--stack tbody td { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 48rem) { .rank-table--stack tbody th, .rank-table--stack tbody td { vertical-align: middle; } }
@media (max-width: 47.99rem) {
  .rank-table--stack, .rank-table--stack tbody, .rank-table--stack caption { display: block; width: 100%; }
  .rank-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rank-table--stack .data-table__caption, .rank-table--stack caption { padding: 0 0 0.85rem; border: 0; }
  .rank-table--stack .rank-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.85rem;
    grid-template-areas: "rank agency score" "rank overall score" "crit crit crit" "fact fact fact" "comm comm comm" "band band band";
    margin-bottom: 0.625rem; padding: 0.95rem 1rem 1.05rem; background: var(--card-bg); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  }
  .rank-table--stack .rank-row[hidden] { display: none; }
  .rank-table--stack .rank-row > * { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none; width: auto; background: none !important; text-align: left; white-space: normal; }
  .rank-table--stack .col-rank { grid-area: rank; }
  .rank-table--stack .rank-num { font-size: 2.125rem; }
  .rank-table--stack .col-agency { grid-area: agency; align-self: center; }
  .rank-table--stack .col-overall { grid-area: overall; font-size: 0.85rem; color: var(--dim); margin-top: 0.15rem; }
  .rank-table--stack .col-overall::before { content: attr(data-label) " "; }
  .rank-table--stack .col-score { grid-area: score; text-align: right; align-self: start; }
  .rank-table--stack .col-score .score__value { font-size: 1.6rem; }
  .rank-table--stack .col-crit { grid-area: crit; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem; }
  .rank-table--stack .critbar__text { margin: 0; }
  .rank-table--stack .col-fact { grid-area: fact; margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-2); }
  .rank-table--stack td.col-commission { grid-area: comm; margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); }
  .rank-table--stack .col-band { grid-area: band; margin-top: 0.65rem; font-size: 0.875rem; color: var(--muted); }
  .rank-table--stack .col-fact::before, .rank-table--stack .col-commission::before, .rank-table--stack .col-band::before {
    content: attr(data-label); display: block; margin-bottom: 0.25rem; font: 600 0.7rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  }
}

/* ---------------------------------------------------------------- /commission/: one card per rate on phones */
.commission-table .col-rate { font: 600 1.15rem/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.commission-table .col-agency a { color: var(--ink); font-weight: 600; text-decoration: none; }
.commission-table .col-agency a:hover { text-decoration: underline; }
.commission-table .col-source { min-width: 10rem; }
.commission-table .source-link, .scorecard .source-link { overflow-wrap: break-word; word-break: normal; }
.commission-table .col-checked { min-width: 5rem; font-size: 0.84rem; color: var(--dim); white-space: normal; }
.commission-table thead th { white-space: normal; vertical-align: bottom; }
.commission-table .col-note { max-width: 16rem; color: var(--muted); }
.commission-table .col-basis { color: var(--ink-2); }
.commission-table .col-score { white-space: nowrap; }
.commission-table .col-score .score__value { font-size: 1.05rem; }
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .commission-table .col-score, .commission-table .col-basis { white-space: normal; }
  .commission-table .col-note { max-width: 12rem; }
  .commission-table .col-source { min-width: 8.5rem; }
}
@media (max-width: 47.99rem) {
  .commission-table--stack, .commission-table--stack tbody, .commission-table--stack caption { display: block; width: 100%; }
  .commission-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .commission-table--stack .data-table__caption, .commission-table--stack caption { padding: 0 0 0.85rem; border: 0; }
  .commission-table--stack tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem;
    grid-template-areas: "agency rate" "service basis" "note note" "score score" "source source" "checked checked";
    margin-bottom: 0.625rem; padding: 0.95rem 1rem 1.05rem; background: var(--card-bg); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  }
  .commission-table--stack tr[hidden] { display: none; }
  .commission-table--stack tr > * { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none; width: auto; background: none !important; text-align: left; white-space: normal; }
  .commission-table--stack .col-agency { grid-area: agency; font-size: 1.03rem; }
  .commission-table--stack .col-service { grid-area: service; margin-top: 0.2rem; font-size: 0.875rem; color: var(--muted); }
  .commission-table--stack .col-rate { grid-area: rate; text-align: right; font-size: 1.6rem; white-space: nowrap; }
  .commission-table--stack .col-basis { grid-area: basis; text-align: right; margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
  .commission-table--stack .col-note { grid-area: note; margin-top: 0.65rem; font-size: 0.875rem; }
  .commission-table--stack .col-note:empty { display: none; }
  .commission-table--stack .col-score { grid-area: score; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
  .commission-table--stack .col-source { grid-area: source; margin-top: 0.35rem; }
  .commission-table--stack .col-checked { grid-area: checked; margin-top: 0.35rem; }
  .commission-table--stack .col-score, .commission-table--stack .col-source, .commission-table--stack .col-checked { font-size: 0.875rem; color: var(--muted); }
  .commission-table--stack .col-basis::before { content: attr(data-label) ": "; color: var(--dim); }
  .commission-table--stack .col-score::before, .commission-table--stack .col-source::before, .commission-table--stack .col-checked::before {
    content: attr(data-label); display: inline-block; min-width: 4.75rem; font: 600 0.7rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  }
}

/* ---------------------------------------------------------------- compare tables */
.compare-table--stack .col-crit { white-space: nowrap; }
.compare-table .col-a, .compare-table .col-b { color: var(--ink-2); }
.compare__points { font: 600 0.75rem/1.3 var(--font-display); color: var(--dim); }
/* two agencies side by side get two equal columns (auto layout gave the longer texts most of the width) */
@media (min-width: 48rem) {
  .compare-table thead th:first-child { width: 20%; }
  .compare-table thead th.col-a, .compare-table thead th.col-b { width: 40%; }
}
@media (max-width: 47.99rem) {
  /* the two half-width cells of a short row are ~120-150 px wide on phones: the 12-dot row uses the small dots of the
     compare head (126 px) and may wrap instead of running into the other agency's cell */
  .compare-table--stack .compare__row--short .critbar { flex-wrap: wrap; row-gap: 4px; gap: 2px; max-width: 100%; }
  .compare-table--stack .compare__row--short .critbar__cell { width: 8px; height: 8px; }
  .compare-table--stack .compare__row--short .critbar__cell--partial { box-shadow: inset 0 0 0 1.25px var(--ink); }
  .compare-table--stack .compare__row--short .critbar__cell:nth-child(4), .compare-table--stack .compare__row--short .critbar__cell:nth-child(8) { margin-right: 4px; }
}
@media (max-width: 47.99rem) {
  .compare-table--stack, .compare-table--stack tbody, .compare-table--stack caption { display: block; width: 100%; }
  .compare-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table--stack tr { display: block; padding: 1rem 1.05rem 1.05rem; border-top: 1px solid var(--line); }
  .compare-table--stack tbody tr:first-child { border-top: 0; }
  .compare-table--stack tr > * { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none; width: auto; background: none !important; white-space: normal; }
  .compare-table--stack tr > th { font-weight: 600; color: var(--ink); }
  .compare-table--stack tr > td { margin-top: 0.75rem; }
  .compare-table--stack tr > td::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; font: 600 0.7rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
  .compare-table--stack .compare__row--short { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .compare-table--stack .compare__row--short > th { grid-column: 1 / -1; }
  .compare-table--stack .compare__row--short > td { margin-top: 0.55rem; }
  .compare-table--stack .col-crit .critbar__text { display: block; margin: 0.45rem 0 0; }
}

/* ---------------------------------------------------------------- reference tables as cards on phones (A-Z, criteria,
   methodology, statistics "By criterion"; class data-table--stack) */
@media (max-width: 47.99rem) {
  .data-table--stack, .data-table--stack tbody, .data-table--stack caption { display: block; width: 100%; }
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--stack .data-table__caption, .data-table--stack caption { padding: 0 0 0.85rem; border: 0; }
  .data-table--stack tr { display: block; margin-bottom: 0.625rem; padding: 0.95rem 1rem 1.05rem; background: var(--card-bg); border: 1px solid var(--hair); border-radius: var(--radius-lg); }
  .data-table--stack tr[hidden] { display: none; }
  .data-table--stack tr > * { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none; width: auto; background: none !important; white-space: normal; text-align: left; }
  .data-table--stack tr > th { font-size: 1.03rem; font-weight: 600; color: var(--ink); }
  .data-table--stack tr > td { margin-top: 0.5rem; font-size: 0.94rem; color: var(--ink-2); }
  .data-table--stack td[data-label]::before { content: attr(data-label) "  "; white-space: pre; font: 600 0.7rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
  .data-table--stack .col-id { margin: 0 0 0.25rem; font: 600 0.75rem/1.2 var(--font-display); color: var(--gold); }
  .data-table--stack .col-q { color: var(--ink-2); }
  .data-table--stack .col-n { display: inline-block; margin-right: 1.25rem; margin-top: 0.65rem; font-weight: 600; color: var(--ink); }
  .stats-crit-table.data-table--stack .col-n { margin-right: 1rem; white-space: nowrap; }
  .robust-table thead th { white-space: normal; vertical-align: bottom; }
  .robust-table th, .robust-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
  .az-table.data-table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.85rem;
    grid-template-areas: "agency score" "rank rank" "band band" "comm comm" "country country" "checked checked"; }
  .az-table.data-table--stack tr[hidden] { display: none; }
  .az-table.data-table--stack .col-agency { grid-area: agency; align-self: center; }
  .az-table.data-table--stack .col-score { grid-area: score; margin: 0; text-align: right; }
  .az-table.data-table--stack .col-score .score__value { font-size: 1.6rem; }
  .az-table.data-table--stack .col-rank { grid-area: rank; width: auto; text-align: left; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
  .az-table.data-table--stack .col-band { grid-area: band; }
  .az-table.data-table--stack .col-commission { grid-area: comm; }
  .az-table.data-table--stack .col-country { grid-area: country; }
  .az-table.data-table--stack .col-checked { grid-area: checked; }
}
.criteria-table .col-id, .method-table .col-id { font: 600 0.78rem/1.3 var(--font-display); color: var(--gold); white-space: nowrap; }
.criteria-table .col-n { font-weight: 600; color: var(--ink); }
.robust-table td { color: var(--ink-2); }
/* terms database: scrolls sideways (wide by nature); the sticky agency column keeps the dark surface */
.db-table .col-agency { background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.db-table thead .col-agency { background: var(--surface-2); }
.db-table td { min-width: 14rem; font-size: 0.9rem; }
.db-table td.col-rank, .db-table td.col-score, .db-table td.col-country { min-width: 0; }
/* final2 23.10.: long notes wrapped to 15-20 lines in 224 px cells (rows 218-385 px tall, mostly empty); only the
   long-text columns get wider (the table scrolls sideways, the caption says so) */
.db-table :is(th, td):nth-child(n+5) { min-width: 19rem; }
.db-table tbody .col-agency { box-shadow: 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
/* wide tables that scroll sideways (terms database, wide tables on small screens): a light edge shows on the side that
   has more columns (scroll shadows: the covers move with the content, the edges stay with the box) */
.table-scroll:not(.table-scroll--cards) {
  scrollbar-color: var(--line-2) transparent;
  background:
    linear-gradient(90deg, var(--surface) 35%, rgba(22, 24, 29, 0)) 0 0 / 3rem 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 35%, rgba(22, 24, 29, 0)) 100% 0 / 3rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(217, 191, 138, 0.28), rgba(217, 191, 138, 0)) 0 0 / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(217, 191, 138, 0.28), rgba(217, 191, 138, 0)) 100% 0 / 1rem 100% no-repeat scroll,
    var(--surface);
}
.db-table .data-table__caption::after { content: " Scroll the table sideways for every term."; color: var(--muted); }

/* ================================================================ home: sections after the ranking */
.home .ranking { margin-top: 5.5rem; }
.home .ranking > .section-head { display: grid; gap: 0.5rem; }
.home .ranking .critlegend { margin: -0.4rem 0 1.25rem; }
@media (min-width: 64rem) {
  /* legend beside the section head, as in the mockup */
  .home .ranking { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; }
  .home .ranking > * { grid-column: 1 / -1; }
  .home .ranking > .section-head { grid-column: 1; }
  .home .ranking > .critlegend { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 1.4rem; }
}
.home__grid, .profile__grid { gap: 3.5rem 3rem; margin: 4rem 0; }
.home__grid > .section, .profile__grid > .section { margin-top: 0; margin-bottom: 0; }
.how__list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; counter-reset: how; }
.how__item {
  counter-increment: how; position: relative; margin: 0; padding: 1.05rem 1.15rem 1.05rem 3.6rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.97rem; color: var(--ink-2);
}
.how__item::before { content: counter(how, decimal-leading-zero); position: absolute; left: 1.15rem; top: 1.15rem; font: 600 0.85rem/1.5 var(--font-display); color: var(--gold); }
.how__more { margin: 0; font-size: 0.95rem; }
.points { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.points__item { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.95rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.points__value { font: 600 1.875rem/1 var(--font-display); color: var(--ink); letter-spacing: -0.04em; }
.points__item::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.points__item--full::before { background: var(--ink); box-shadow: none; }
.points__item--partial::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* filtered rankings (chips) */
.chips { display: block; margin: 4rem 0; }
.chips__label { margin: 0 0 1.25rem; font: 500 var(--t-m)/1.18 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.chips__list { gap: 0.5rem; }
.chip-link {
  min-height: 2.75rem; padding: 0 0.5rem 0 1rem; gap: 0.6rem; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.chip-link:hover { border-color: var(--muted); color: var(--ink); text-decoration: none; }
.chip-link__count { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 0.4rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 0.8rem/1 var(--font-body); }
.chip-link--all { padding: 0 1rem; border-color: rgba(217, 191, 138, 0.45); color: var(--gold-hi); background: transparent; }
.chip-link--all:hover { border-color: var(--gold); color: var(--gold-hi); }
/* final2 23.10.: /agencies/ letter index as a pill row (each pill jumps to the first row of its letter) */
.page-head__meta:has(> .az-letters__link) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1.25rem; }
.az-letters__label { margin-right: 0.35rem; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.az-letters__link {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.5rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 0.9rem/1 var(--font-display); text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.az-letters__link:hover { border-color: var(--gold); color: var(--gold-hi); text-decoration: none; }
/* key findings */
.findings {
  margin: 4rem 0; padding: 1.75rem 1.25rem; border-radius: var(--radius-xl); color: var(--ink-2);
  background: radial-gradient(600px 300px at 100% 0%, rgba(217, 191, 138, 0.08), transparent 70%), var(--surface);
  border: 1px solid var(--line);
}
.findings__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: find; }
.findings__item { counter-increment: find; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.5rem; margin: 0; padding: 0.95rem 0; border-top: 1px solid var(--line); }
.findings__item::before { content: counter(find, decimal-leading-zero); font: 600 0.85rem/1.65 var(--font-display); color: var(--gold); }
.findings__link { color: var(--ink-2); text-decoration-color: var(--line-2); }
.findings__link:hover { color: var(--ink); text-decoration-color: var(--gold); }
.findings__report { margin: 1.4rem 0 0; }
.findings__report a {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.875rem; padding: 0.55rem 1.15rem; line-height: 1.3; border-radius: var(--radius);
  border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; text-decoration: none;
}
.findings__report a:hover { border-color: var(--muted); color: var(--ink); }
@media (min-width: 48rem) {
  .findings { padding: 2.5rem 2.75rem 2.25rem; }
  .findings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* report: the numbered key findings (an <ol class="findings"> inside the report text) keep the card look, but sit close
   under their heading and keep the list numbers inside the card */
ol.findings { margin: 1.25rem 0 2.5rem; padding: 1.35rem 1.25rem 1rem 2.6rem; }
ol.findings > li::marker { color: var(--gold); font-weight: 600; }
@media (min-width: 48rem) { ol.findings { padding: 1.9rem 2.25rem 1.4rem 3.4rem; } }

/* FAQ (home) and quick answers (profiles) */
.faq__item { border-top: 1px solid var(--line); padding: 1.35rem 0; }
.faq__q { font: 600 1.1rem/1.4 var(--font-body); margin-bottom: 0.5rem; color: var(--ink); }
.faq__a { color: var(--ink-2); max-width: var(--measure); }
.faq__a a { font-weight: 600; }
@media (min-width: 64rem) {
  .faq { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
  .faq > .section-head { grid-column: 1; grid-row: 1 / span 12; display: block; }
  .faq > .section-head .section-head__meta { margin-top: 0.75rem; }
  .faq > .faq__item { grid-column: 2; }
  .faq > .section-head + .faq__item { border-top: 0; padding-top: 0; }
}

/* downloads */
.downloads__list { gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-bottom: 1rem; }
.downloads__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.downloads__link { font: 600 0.97rem var(--font-body); color: var(--ink); }
.downloads__desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.downloads__note { color: var(--dim); font-size: 0.875rem; max-width: var(--measure); }

/* citation */
.citation__code {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold-lo); border-radius: var(--radius);
  font-size: 0.875rem; line-height: 1.6; padding: 1rem 1.15rem; color: var(--ink-2);
}
.citation__note { max-width: var(--measure); color: var(--dim); }

/* ================================================================ page heads (all other pages) */
.site-main__inner > .breadcrumbs { padding-top: 1.5rem; }
.breadcrumbs__list { margin: 0; font-size: 0.875rem; color: var(--dim); }
.breadcrumbs__list a { color: var(--muted); text-decoration-color: var(--line-2); }
.breadcrumbs__list a:hover { color: var(--ink); }
.breadcrumbs__item + .breadcrumbs__item::before { color: var(--line-2); }
.page-head {
  position: relative; margin: 0 0 2.75rem; padding: 1.25rem 0 2.5rem; border-bottom: 1px solid var(--hair);
}
.page-head::before {
  content: ""; position: absolute; z-index: -1; top: -6rem; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(520px 320px at 85% 0%, rgba(217, 191, 138, 0.09), transparent 70%), radial-gradient(800px 420px at 0% 0%, rgba(120, 130, 150, 0.08), transparent 70%);
}
.page-head + .section { margin-top: 1rem; }
.page-title { font: 500 var(--t-l)/1.12 var(--font-display); letter-spacing: -0.035em; max-width: 24ch; text-wrap: balance; color: var(--ink); }
.page-head .page-title { margin: 0 0 1.1rem; }
@media (min-width: 48rem) { .page-head .page-title { margin-bottom: 1.35rem; } }
.page-head__lead, .lede { font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); max-width: var(--measure); }
.page-head__lead { margin-bottom: 1rem; }
.page-head__lead--2 { font-size: 1rem; line-height: 1.65; color: var(--muted); } /* final2 23.10.: second lead paragraph (/best/: why #1) */
/* same column width as the first lead (its 1.125rem ch), so both paragraphs share their left edge in a centred head */
.page-head--band > .page-head__lead.page-head__lead--2 { max-width: 67.5ch; }
.page-head--band > .page-head__lead--long.page-head__lead--2 { max-width: 72ch; }
.page-head__meta { font-size: 0.875rem; color: var(--dim); }
.page-head__lead a, .filter-list__rule a { color: var(--ink); text-decoration-color: var(--line-2); }
.page-head__lead a:hover, .filter-list__rule a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.answer:not(.hero__answer) { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold-lo); border-radius: var(--radius); }

/* page heads with a card on the right (commission, filtered lists, compare) */
.page-head__main { min-width: 0; }
.page-head__aside { min-width: 0; margin-top: 1.75rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.page-head__aside .stat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.page-head__aside .stat-tile {
  background: none; border: 0; border-radius: 0; padding: 0.95rem 1.1rem; box-shadow: inset 0 1px 0 var(--line);
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline;
}
.page-head__aside .stat-tile:first-child { box-shadow: none; }
.page-head__aside .stat-tile__value { grid-row: 1 / span 2; margin: 0; font-size: 1.75rem; white-space: nowrap; }
.page-head__aside .stat-tile__label { margin: 0; font-size: 0.875rem; }
.page-head__aside--wide { display: none; }
.aside-list__title { margin: 0; padding: 0.85rem 1.1rem 0.25rem; border-top: 1px solid var(--line); font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.aside-list { list-style: none; margin: 0; padding: 0 1.1rem 0.5rem; }
.aside-list__item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; min-height: 2.875rem; border-top: 1px solid var(--line); }
.aside-list__item:first-child { border-top: 0; }
.aside-list__rank { font: 800 1.1rem/1 var(--font-num); color: var(--steel); }
.aside-list__item a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside-list__item a:hover { text-decoration: underline; }
.aside-list__score { font: 600 1.05rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.aside-list__max { font: 500 0.72rem var(--font-display); color: var(--dim); margin-left: 0.1em; }
@media (min-width: 64rem) {
  .page-head--aside { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 3.5rem; align-items: start; }
  .page-head--aside .page-head__aside { margin-top: 0.35rem; }
  .page-head__aside--wide { display: block; }
}

/* compare: head-to-head scoreboard */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.vs__sep { display: none; }
.vs__card { min-width: 0; padding: 1.1rem 1.1rem 1.15rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 3px 0 var(--steel); }
.vs__name { margin: 0 0 0.7rem; font: 600 1rem/1.25 var(--font-display); letter-spacing: -0.02em; }
.vs__name a { color: var(--ink); text-decoration: none; }
.vs__name a:hover { text-decoration: underline; }
.vs__score { margin: 0; font: 600 2.5rem/0.95 var(--font-display); letter-spacing: -0.05em; color: var(--ink); white-space: nowrap; }
.vs__max { font: 500 0.875rem var(--font-display); letter-spacing: 0; color: var(--dim); margin-left: 0.15em; }
.vs__rank { margin: 0.6rem 0 0.8rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.vs .critbar { flex-wrap: nowrap; gap: 2px; }
.vs .critbar__cell { width: 8px; height: 8px; }
.vs .critbar__cell--partial { box-shadow: inset 0 0 0 1.25px var(--ink); }
.vs .critbar__cell:nth-child(4), .vs .critbar__cell:nth-child(8) { margin-right: 4px; }
@media (min-width: 40rem) { .vs .critbar { gap: 3px; } .vs .critbar__cell { width: 10px; height: 10px; } }
.vs__full { margin: 0.5rem 0 0; font-size: 0.84rem; color: var(--dim); }
.vs__full b { color: var(--ink); }
@media (min-width: 40rem) {
  .vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .vs__sep { display: block; margin: 0; font: 600 0.9rem/1 var(--font-display); color: var(--dim); }
  .vs__score { font-size: 3rem; }
}
@media (min-width: 64rem) {
  .page-head--aside .vs { margin-top: 0.35rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; }
  .page-head--aside:has(.vs) { grid-template-columns: minmax(0, 1fr) 26rem; }
  .vs__score { font-size: 2.6rem; }
}

/* ================================================================ long text (guides, process pages, criteria, methodology) */
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p, .prose li { line-height: 1.7; }
.prose h2:not(.section-head__title) { font: 500 clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem)/1.25 var(--font-display); letter-spacing: -0.03em; margin: 2.75rem 0 1rem; color: var(--ink); }
.prose > :first-child, .prose > .section-head:first-child .section-head__title { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; color: var(--ink); }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--dim); }
.prose strong, .prose b { color: var(--ink); }
.prose a { font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose blockquote, .reply__text { border-left: 3px solid var(--gold-lo); color: var(--ink); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.85rem 1.1rem; }
.prose code { background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 5px; }
/* a text column that holds a wide reference table may use the full width for the table; its text keeps the measure */
.prose:has(> .table-scroll) { max-width: none; }
.prose:has(> .table-scroll) > :not(.table-scroll):not(.section-head) { max-width: var(--measure); }
.prose > .table-scroll + * { margin-top: 1.4rem; }
/* tables inside guides and process pages (not the generated data tables) */
.prose table:not(.data-table) { margin: 0.75rem 0 1.25rem; font-size: 0.94rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose table:not(.data-table) caption { text-align: left; padding: 0 0 0.5rem; font-size: 0.875rem; color: var(--dim); }
.prose table:not(.data-table) thead th { background: var(--surface-2); color: var(--dim); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; vertical-align: bottom; }
.prose th, .prose td { border-bottom-color: var(--line); }
.prose table:not(.data-table) th, .prose table:not(.data-table) td { padding: 0.6rem 0.85rem; }
.prose table:not(.data-table) tbody th { color: var(--ink); }
/* qa2 23.10.: as a scrolling block the caption sat on the box edge and the rows stopped short of the box (guide example,
   /data/). Phones keep the scroll box with an inset caption; from 48rem the table fills the column, caption above it. */
.prose table:not(.data-table):not(.corrections-log) caption { padding: 0.75rem 0.85rem 0.55rem; }
@media (min-width: 48rem) {
  .prose table:not(.data-table):not(.corrections-log) { display: table; border-collapse: separate; border-spacing: 0; }
  .prose table:not(.data-table):not(.corrections-log) caption { padding: 0 0 0.5rem; }
  .prose table:not(.data-table):not(.corrections-log) tbody tr:last-child > * { border-bottom: 0; }
  .prose table:not(.data-table):not(.corrections-log) thead tr > :first-child { border-top-left-radius: calc(var(--radius) - 1px); }
  .prose table:not(.data-table):not(.corrections-log) thead tr > :last-child { border-top-right-radius: calc(var(--radius) - 1px); }
}
.guide-meta, .report-meta { border-left: 2px solid var(--gold-lo); color: var(--dim); }
.data-note { max-width: var(--measure); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); padding: 1rem 1.15rem; font-size: 0.97rem; }
blockquote.citation { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.score-caveat { color: var(--dim); }
.legal-details dt { color: var(--ink); }
.changelog > li { margin-bottom: 1.25rem; }
.corrections-log { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.corrections-log th, .corrections-log td { padding: 0.65rem 0.85rem; }
.corrections-log thead th { background: var(--surface-2); color: var(--dim); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.corrections-log tr.empty td { color: var(--muted); }
/* the public correction log (6 columns) uses the full width; the text around it keeps the reading measure */
.prose:has(> table.corrections-log) { max-width: none; }
.prose:has(> table.corrections-log) > :not(table.corrections-log) { max-width: var(--measure); }
.prose table.corrections-log caption { padding: 0.8rem 0.85rem 0.6rem; }
.corrections-log td:first-child { white-space: nowrap; }
@media (min-width: 48rem) {
  .prose table.corrections-log { display: table; table-layout: fixed; }
  .corrections-log th:nth-child(1) { width: 7.5rem; }
  .corrections-log th:nth-child(2) { width: 15%; }
}
/* phones: one card per correction, each value under its column name (the names repeat the visually hidden head) */
@media (max-width: 47.99rem) {
  .prose table.corrections-log, .corrections-log caption, .corrections-log tbody, .corrections-log tr, .corrections-log td { display: block; width: auto; }
  .prose table.corrections-log caption { padding: 0.85rem 1rem 0.75rem; border-bottom: 1px solid var(--line); }
  .corrections-log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .corrections-log tbody tr { padding: 0.95rem 1rem 1.05rem; border-top: 1px solid var(--line); }
  .corrections-log tbody td { padding: 0; border: 0; margin-top: 0.6rem; }
  .corrections-log tbody td:first-child { margin-top: 0; color: var(--ink); font-weight: 600; }
  .corrections-log tbody td:not(:first-child)::before {
    display: block; margin-bottom: 0.15rem; font: 600 0.7rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  }
  .corrections-log tbody td:nth-child(2)::before { content: "Page"; }
  .corrections-log tbody td:nth-child(3)::before { content: "What was wrong"; }
  .corrections-log tbody td:nth-child(4)::before { content: "Before"; }
  .corrections-log tbody td:nth-child(5)::before { content: "After"; }
  .corrections-log tbody td:nth-child(6)::before { content: "How we found out"; }
}
.steps-list li::marker { color: var(--gold); font-weight: 600; }
.content-page .page-head__lead, .content-page .lede { max-width: var(--measure); }
.content-page__auto { max-width: var(--measure); }

/* guides hub, filter lists, related links, pager */
.guide-list { gap: 0.75rem; max-width: 52rem; }
.guide-list__item { padding: 1.15rem 1.25rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.guide-list__title { margin: 0 0 0.35rem; font: 600 1.15rem/1.35 var(--font-body); }
.guide-list__title a { color: var(--ink); text-decoration: none; }
.guide-list__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.guide-list__desc { color: var(--muted); font-size: 0.97rem; }
/* final2 23.10.: the guides hub was one flat 830 px column; from 64rem a two-column numbered grid, metallic 01-06
   (CSS counter, decoration only), the whole card is the link */
@media (min-width: 64rem) {
  .guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: none; counter-reset: g; }
  .guide-list__item { counter-increment: g; position: relative; padding: 1.5rem 1.6rem 1.5rem 5rem; transition: border-color 0.15s, background-color 0.15s; }
  .guide-list__item::before {
    content: counter(g, decimal-leading-zero); position: absolute; left: 1.5rem; top: 1.3rem; font: 800 1.6rem/1 var(--font-num); color: var(--gold);
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .guide-list__item::before { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  .guide-list__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .guide-list__item:hover, .guide-list__item:focus-within { border-color: rgba(217, 191, 138, 0.42); }
}
.filter-list { gap: 0.625rem; }
.filter-list__item { padding: 1.05rem 1.2rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.filter-list__item--empty { background: transparent; border-style: dashed; }
.filter-list__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.45rem; text-decoration: none; font: 600 1.06rem/1.35 var(--font-body); color: var(--ink); }
.filter-list__link:hover { color: var(--gold-hi); text-decoration: underline; }
.filter-list__count { color: var(--dim); }
.filter-list__rule { color: var(--muted); font-size: 0.97rem; max-width: 76ch; }
.related__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.related__list a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.related__list a:hover { border-color: var(--muted); color: var(--ink); }
.pager a { color: var(--ink); font-weight: 600; }
.best__rule, .best__near { color: var(--muted); }
.compare-diff__list, .compare-diff__same, .best__rule, .best__near, .rules, .claims__intro { max-width: var(--measure); }
.compare-diff__list li { color: var(--ink-2); }
.compare-diff__same { color: var(--muted); }
.band-list { max-width: 76ch; }
.ranking .caveat, .ranking__note, .section > .caveat { max-width: var(--measure); }
.compare-picker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.compare-picker__select { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); }
.compare-picker__label { color: var(--ink); }
.compare-picker__msg { color: var(--muted); }
.pair-list a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.pair-list a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.band-list__title { color: var(--ink); }
.band-list__count { color: var(--dim); }
.band-list--full .band-list__dot { background: var(--ink); }
.band-list--partial .band-list__dot { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.band-list--none .band-list__dot { box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.band-list__items { font-size: 1.0625rem; line-height: 1.65; }
.band-list__item { margin-bottom: 0.6rem; }
.band-list__evidence { color: var(--ink-2); font-size: inherit; }
.bands__term, .facts__term { color: var(--ink); }
.facts__row, .bands__row, .bands .facts__row { border-top-color: var(--line); }
.rules__item::marker { color: var(--gold); }
.changes__item { border-top-color: var(--line); }
.changes__date { color: var(--dim); }

/* statistics */
.stat-list { gap: 0.75rem; }
.stat { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; }
.stat:target { outline: 2px solid var(--focus); outline-offset: 2px; }
.stat__value { font: 600 2rem/1.05 var(--font-display); letter-spacing: -0.04em; color: var(--ink); margin: 0 0 0.35rem; }
.stat__value--text { font: 600 1.15rem/1.3 var(--font-display); letter-spacing: -0.02em; padding-left: 0.75rem; border-left: 3px solid var(--gold); margin-bottom: 0.65rem; }
.stat__label { color: var(--ink); font-weight: 600; }
.stat__sentence { color: var(--ink-2); font-size: 0.97rem; }
.stat__meta { color: var(--dim); }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* charts: HTML text rows with decorative SVG bars (colours only from CSS) */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; }
.chart__title { color: var(--ink); }
.chart__sub { color: var(--dim); }
.chart-legend { color: var(--muted); }
.hbar__label { color: var(--ink-2); }
.hbar__value { color: var(--ink); }
.seg--full, .col--score, .swatch--full { fill: var(--ink); background: var(--ink); }
.seg--partial, .swatch--partial { fill: #8d939e; background: #8d939e; }
.seg--none, .swatch--none { fill: #34373f; background: #34373f; }
.chart__table summary { color: var(--ink); }
.axis-grid { stroke: var(--line); }
.axis-base { stroke: var(--dim); }
.axis-label { fill: var(--dim); }
.value-label { fill: var(--ink); }

/* ================================================================ profile */
.profile__head {
  position: relative; margin: 0 0 3rem; padding: 1.25rem 0 2.5rem; border-bottom: 1px solid var(--hair); display: grid; gap: 1.75rem;
}
.profile__head::before {
  content: ""; position: absolute; z-index: -1; top: -6rem; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(560px 360px at 82% 10%, rgba(217, 191, 138, 0.1), transparent 70%), radial-gradient(800px 420px at 0% 0%, rgba(120, 130, 150, 0.08), transparent 70%);
}
.profile-head__main { min-width: 0; }
.profile-head__title { max-width: none; margin-bottom: 1rem; }
.profile-head__colon { color: var(--gold); }
.profile-head__name { display: block; font: 600 clamp(2.1rem, 1.4rem + 3vw, 3.75rem)/1.02 var(--font-display); letter-spacing: -0.045em; color: var(--ink); overflow-wrap: anywhere; }
.profile-head__rest { display: block; margin-top: 0.75rem; font: 500 clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem)/1.4 var(--font-body); letter-spacing: 0; color: var(--muted); max-width: 36rem; }
.profile__meta { margin: 0; font-size: 0.94rem; color: var(--dim); }
.profile__meta a { color: var(--ink); font-weight: 600; }
.scorepanel {
  --tc: var(--steel); position: relative; min-width: 0; padding: 1.5rem 1.4rem 1.4rem; align-self: start; overflow: hidden;
  background: radial-gradient(420px 220px at 0% 0%, color-mix(in srgb, var(--tc) 12%, transparent), transparent 70%), linear-gradient(180deg, #191b20, #131418);
  border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); border-radius: var(--radius-xl);
}
.scorepanel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc); opacity: 0.9; }
.scorepanel--gold { --tc: var(--gold); }
.scorepanel--silver { --tc: var(--silver); }
.scorepanel--bronze { --tc: var(--bronze); }
.scorepanel .summary__score { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 0.4rem; margin: 0; }
.scorepanel .summary__label { grid-column: 1 / -1; margin-bottom: 0.65rem; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.scorepanel .summary__value {
  padding-right: 0.04em; font: 800 clamp(4.25rem, 3.2rem + 3.6vw, 5.75rem)/0.86 var(--font-num); letter-spacing: -0.05em;
  color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 80%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 55%, #16181d) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.scorepanel--plain .summary__value { --tc: #c4c9d1; }
.scorepanel .summary__max { font: 500 1.05rem var(--font-display); color: var(--dim); padding-bottom: 0.35rem; }
.scorepanel .summary__rank { grid-column: 1 / -1; margin-top: 1rem; font-size: 0.97rem; font-weight: 600; color: var(--ink); }
.scorepanel .rank-badge { grid-column: 1 / -1; justify-self: start; margin-top: 0.7rem; }
.counts { list-style: none; margin: 1.15rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; font-size: 0.94rem; color: var(--muted); }
.counts__item { display: flex; align-items: center; gap: 0.65rem; margin: 0; }
.counts__item::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--ring-none); }
.counts__item--full::before { background: var(--ink); box-shadow: none; }
.counts__item--partial::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.counts__n { font: 600 1.15rem/1 var(--font-display); color: var(--ink); min-width: 1.5rem; letter-spacing: -0.03em; }
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .scorepanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: center; }
  .scorepanel .counts { margin: 0; padding: 0.25rem 0 0.25rem 2rem; border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 60rem) {
  .profile__head { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: 4rem; align-items: center; padding: 2rem 0 2.75rem; }
  .scorepanel .rank-badge { white-space: nowrap; }
}

.summary { max-width: var(--measure); margin: 0 0 3.25rem; }
.summary__text { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); }
.summary__quote { padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold-lo); border-radius: var(--radius); color: var(--muted); font-size: 0.97rem; }
.summary__quote .quote { color: var(--ink); }
.crit-sentence { font-size: 0.94rem; line-height: 1.65; color: var(--muted); }
.crit-sentence a { color: var(--ink-2); text-decoration-color: var(--line-2); }

.key-terms__list { max-width: none; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0 1.15rem; }
.key-terms__row { padding: 1rem 0; border-top-color: var(--line); }
.key-terms__row:first-child { border-top: 0; }
.key-terms__term { color: var(--ink); font-size: 0.9rem; }
.key-terms__value { color: var(--ink-2); }
.key-terms__rate { color: var(--ink-2); }
.key-terms__more, .key-terms__src { color: var(--dim); }
.key-terms__src a { color: var(--muted); }
@media (min-width: 40rem) {
  .key-terms__list { padding: 0 1.6rem; }
  .key-terms__row { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 1.5rem; }
  .key-terms__value { max-width: 60ch; }
}

/* scorecard: status chips and a status dot on each row */
.scorecard-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.scorecard { background: var(--surface); }
.scorecard .col-criterion a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-2); }
.scorecard .col-criterion a:hover { text-decoration-color: var(--gold); }
.scorecard .col-points { font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.scorecard .col-points .score__max { font: 500 0.72rem var(--font-display); }
.scorecard__row > th:first-child { position: relative; padding-left: 2.35rem; }
.scorecard__row > th:first-child::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.2rem; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ring-none);
}
.scorecard__row--full > th:first-child::before { background: var(--ink); box-shadow: none; }
.scorecard__row--partial > th:first-child::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.scorecard .col-evidence { font-size: 1rem; line-height: 1.6; }
.evidence__paraphrase { color: var(--ink-2); }
.evidence__quote { color: var(--muted); }
.evidence__quote .quote { color: var(--ink); }
.evidence__absent { color: var(--muted); }
@media (min-width: 48rem) { .scorecard .col-source { min-width: 11rem; overflow-wrap: break-word; } .scorecard .col-evidence { min-width: 20rem; } }
@media (min-width: 64rem) {
  .scorecard .col-criterion { min-width: 11rem; }
  .scorecard .col-evidence { min-width: 19rem; }
  .scorecard .col-source { min-width: 9rem; max-width: 11rem; }
}
@media (min-width: 80rem) {
  .scorecard .col-criterion { min-width: 13rem; }
  .scorecard .col-evidence { min-width: 26rem; }
}
.scorecard td.col-checked { font-size: 0.84rem; color: var(--dim); }
@media (min-width: 48rem) { .scorecard td.col-checked { white-space: normal; min-width: 5.5rem; } }
.scorecard__row--none .col-source { color: var(--dim); font-size: 0.84rem; }
.scorecard .source-link { color: var(--muted); font-size: 0.875rem; }
.scorecard__row:target > * { background: var(--highlight); }
.evidence__details { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
.evidence__details summary {
  display: inline-block; min-height: 2.75rem; padding: 0.6rem 1rem; border: 1px solid var(--line-2); border-radius: 14px; line-height: 1.45;
  color: var(--ink); font-weight: 600; list-style: none;
}
.evidence__details summary::-webkit-details-marker { display: none; }
.evidence__details summary::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.evidence__details[open] summary::after { transform: translateY(0.05em) rotate(-135deg); }
.evidence__details summary:hover { border-color: var(--muted); }
.evidence__pages { margin: 0.85rem 0 0; padding-left: 1.2rem; max-width: var(--measure); }
.evidence__pages li { margin-bottom: 0.35rem; }
.evidence__pages a { color: var(--ink-2); }
@media (max-width: 47.99rem) {
  .scorecard tr { padding: 1rem 1rem 1.05rem 2.35rem; position: relative; border-top: 1px solid var(--line); }
  .scorecard tbody tr:first-child { border-top: 0; }
  .scorecard__row > th:first-child { padding-left: 0; position: static; }
  .scorecard__row > th:first-child::before { left: 1rem; top: 1.4rem; }
  .scorecard .col-criterion { font-size: 1.03rem; }
  .scorecard th, .scorecard td { padding: 0; }
  .scorecard .col-points, .scorecard .col-status { margin-top: 0.55rem; }
  .scorecard .col-evidence { margin-top: 0.6rem; }
  .scorecard .col-source::before, .scorecard .col-checked::before { color: var(--dim); }
  .scorecard-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
}

/* profile: in-page jump row */
.jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
@media (min-width: 60rem) {
  .profile__head:has(> .jump) { grid-template-rows: auto auto; align-items: end; row-gap: 1.9rem; }
  .profile__head > .jump { grid-column: 1; grid-row: 2; align-self: start; }
  .profile__head:has(> .jump) > .scorepanel { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.jump a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(22, 24, 29, 0.7); color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.jump a:hover { border-color: var(--muted); color: var(--ink); }
.jump a:focus-visible { outline-offset: 2px; border-radius: 999px; }

.questions__intro, .claims__intro { color: var(--ink-2); max-width: var(--measure); }
.questions__list { padding-left: 1.5rem; max-width: var(--measure); }
.questions__item { margin-bottom: 0.85rem; color: var(--ink-2); }
.questions__item::marker { font-weight: 600; color: var(--gold); }
.questions__q { color: var(--ink); }
.questions__crit { color: var(--dim); }
.questions__guide a { color: var(--muted); }
.company__status, .history__status { margin: 1rem 0 0.5rem; color: var(--ink-2); }
.company__note { color: var(--muted); font-size: 0.94rem; }
.history__col { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 0.95rem 1.1rem; }
.history__label { font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.history__value { color: var(--ink); }
.claims__list { max-width: var(--measure); padding-left: 1.25rem; }
.claims__item { color: var(--ink-2); }
.reply__status { background: var(--surface-2); color: var(--muted); font-size: 0.85rem; justify-self: start; } /* qa2: the ledger grid stretched the pill to a full-width bar */
.reply__meta, .reply__more { color: var(--dim); font-size: 0.9rem; }
.corrections-box { color: var(--ink-2); }
.corrections-box__checked { color: var(--dim); }
.nearby__text, .nearby__lists, .nearby__compare, .nearby__all { line-height: 1.75; max-width: var(--measure); }
.nearby__compare a, .nearby__lists a { color: var(--ink-2); }
.section-head__title { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ================================================================ 404 */
.page--notfound .page-head { border-bottom: 0; padding-top: 3rem; margin-bottom: 1.5rem; }
@media (min-width: 64rem) { .page--notfound .page-head { padding-top: 4.5rem; } }

/* ================================================================ footer (LOCKED disclosure styles kept) */
.site-footer { margin-top: 4.5rem; background: var(--footer-bg); color: var(--footer-ink); border-top: 1px solid var(--hair); font-size: 0.9rem; }
/* a page shorter than the window (404) would show a band of page colour under the footer: the footer colour continues
   below it (an outer shadow is painted only outside the footer box and adds no scroll height) */
.site-footer { box-shadow: 0 50vh 0 50vh var(--footer-bg); }
.site-footer__inner { padding: 2.25rem var(--gutter) 2.5rem; }
.site-footer__disclosure {
  position: relative; font-size: 1rem; line-height: 1.6; color: var(--footer-ink); max-width: 56.25rem; margin: 0 0 1.5rem;
  padding: 1.25rem 1.35rem 1.25rem 3.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
/* info mark (CSS only, no text): a gold ring with a short bar and dot */
.site-footer__disclosure::before {
  content: ""; position: absolute; left: 1.3rem; top: 1.45rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) 50% 0.33rem / 1.8px 1.8px no-repeat, linear-gradient(var(--gold), var(--gold)) 50% 0.53rem / 1.8px 0.45rem no-repeat;
}
.site-footer__disclosure-link { color: var(--footer-ink); font-weight: 600; text-decoration-color: var(--gold-lo); }
.site-footer__disclosure-link:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.site-footer__caveat { color: var(--muted); max-width: var(--measure); font-size: 0.9rem; }
.site-footer__legal { color: var(--dim); font-size: 0.875rem; line-height: 1.6; max-width: 62rem; }
.site-footer__legal a { color: var(--muted); }
.site-footer__nav { margin: 1.5rem 0; }
.site-footer__links { gap: 0.55rem 1.4rem; }
.site-footer__links a { color: var(--muted); text-decoration: none; font-size: 0.94rem; }
.site-footer__links a:hover { color: var(--ink); text-decoration: underline; }

/* ================================================================ layout round (23.10.2026, morning): critic layout defects
   and the polish brief "Varied layouts". One system, different compositions: full-bleed bands with a gold hairline,
   a "ledger" split (section head left and sticky, text right) on long pages at >= 80rem, plinths for every score pair. */

/* -- section rhythm: a slightly lighter full-bleed band with a thin gold hairline on top (the stats-strip technique:
   spread shadows paint the band to the window edges, clip-path keeps it to the section's own height) */
.page--home .home__grid, .page--home .faq, .page--statistics .stats-group:nth-of-type(even), .page--profile .profile > .quick-answers {
  --band: #111317; position: relative; margin-block: 0; padding-block: 4rem; background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band), 0 -1px 0 100vmax rgba(217, 191, 138, 0.2);
  clip-path: inset(-1px -100vmax 0);
}
@media (max-width: 47.99rem) {
  .page--home .home__grid, .page--home .faq, .page--statistics .stats-group:nth-of-type(even), .page--profile .profile > .quick-answers { padding-block: 2.75rem; }
}
.page--home .home__grid + .section, .page--home .faq + .section, .page--statistics .stats-group:nth-of-type(even) + .section,
.page--profile .profile > .quick-answers + .section { margin-top: 4rem; }
.page--home .findings { margin-block: 4.5rem; }

/* -- home leaderboard on phones (critic: 30 cards were 7,200 px): tighter cards, the commission label inline. Generated
   text only; every cell stays in the table markup. */
@media (max-width: 39.99rem) {
  .rank-table--cards tbody { gap: 0.5rem; }
  .rank-table--cards .rank-row { padding: 0.8rem 0.9rem 0.85rem; grid-template-columns: 5.25rem minmax(0, 1fr) auto; column-gap: 0.65rem; }
  .rank-table--cards .rank-num { font-size: 1.75rem; }
  .rank-table--cards .col-crit { margin-top: 0.6rem; padding-top: 0.6rem; }
  .rank-table--cards td.col-commission { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.45; }
  .rank-table--cards td.col-commission::before { content: "Commission"; display: inline; margin: 0 0.5rem 0 0; }
  .rank-table--cards td.col-band, .rank-table--cards td.col-checked { margin-top: 0.45rem; }
}

/* -- underline noise (critic): key-number labels and key findings are whole-item links; underline on hover/focus only */
.stat-tile__link, .findings__link { text-decoration: none; }
.stat-tile__link:hover, .findings__link:hover, .stat-tile__link:focus-visible, .findings__link:focus-visible {
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em;
}
.stats-strip .stat-tile__value { margin-bottom: 0.55rem; }

/* -- row-link chevron: optically centred in its 46 px button (a rotated border chevron carries its weight to the right) */
@media (min-width: 64rem) { .rank-table--cards .row-link::after { margin: 0; transform: translateX(-1.5px) rotate(45deg); } }

/* -- compare tables: fixed layout, the two agencies always get the same width */
@media (min-width: 48rem) {
  .compare-table { table-layout: fixed; width: 100%; }
  .compare-table thead th:first-child { width: 11rem; }
  .compare-table thead th.col-a, .compare-table thead th.col-b { width: auto; }
  .compare-table th, .compare-table td { overflow-wrap: break-word; }
}

/* -- /best/ hub cards: the chevron sits at the card's right edge instead of between the title and the count */
/* /best/ hub: the lists as a two-column card grid on wide screens */
@media (min-width: 64rem) {
  .page--best-hub .filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 48rem) {
  .filter-list__item { position: relative; padding-right: 3.75rem; transition: border-color 0.15s; }
  .filter-list__item:hover { border-color: var(--line-2); }
  .filter-list__link::after { position: absolute; right: 1.5rem; top: 1.6rem; color: var(--gold); }
}

/* -- phone breadcrumbs: one line; a long current page name ends in an ellipsis (no dangling separator on a 2nd line) */
@media (max-width: 47.99rem) {
  .breadcrumbs__list { flex-wrap: nowrap; min-width: 0; }
  .breadcrumbs__item { flex: 0 0 auto; white-space: nowrap; }
  .breadcrumbs__item[aria-current="page"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* -- profile head: the colon after the big name read like a typo; it stays in the H1 text for readers and crawlers */
/* monograms: always capitals ("SC", not "Sc") */
.mono, .top3__mono { text-transform: uppercase; }
.profile-head__colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- compare scoreboard: two plinths in their place metal, the higher score stands taller (vs__card--h0..h10) */
.vs { align-items: end; }
.vs__sep { align-self: center; }
.vs__card {
  --tc: var(--steel); --vh: 0; display: flex; flex-direction: column; align-self: end; min-height: calc(11.5rem + var(--vh) * 0.5rem);
  border-color: color-mix(in srgb, var(--tc) 30%, var(--line)); border-bottom-color: transparent; border-radius: var(--radius-lg) var(--radius-lg) 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 11%, #1b1d22) 0%, #16181c 55%, #101115 100%); box-shadow: inset 0 3px 0 var(--tc);
}
/* final2 23.10.: on phones the plinth height left ~80 px of dead space between the score bar and the rank; the cards
   take their content height and the higher score stands at most 1rem taller (extra room above the name, so the two
   cards' lines stay level); the photographed pillar no longer shows in the gap between the cards */
@media (max-width: 47.99rem) {
  .vs__card { min-height: 0; padding-top: calc(1.1rem + var(--vh) * 0.1rem); padding-bottom: 1.15rem; }
  .vs { position: relative; isolation: isolate; }
  .vs::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 0.5rem); width: 1rem; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--bg) 18%, var(--bg) 82%, transparent);
  }
}
.vs__card--gold { --tc: var(--gold); }
.vs__card--silver { --tc: var(--silver); }
.vs__card--bronze { --tc: var(--bronze); }
.vs__card--h1 { --vh: 1; } .vs__card--h2 { --vh: 2; } .vs__card--h3 { --vh: 3; } .vs__card--h4 { --vh: 4; } .vs__card--h5 { --vh: 5; }
.vs__card--h6 { --vh: 6; } .vs__card--h7 { --vh: 7; } .vs__card--h8 { --vh: 8; } .vs__card--h9 { --vh: 9; } .vs__card--h10 { --vh: 10; }
.vs__card--gold .vs__score, .vs__card--gold .vs__value { color: var(--gold-hi); }
.vs__card--gold .critbar__cell--full { background: var(--gold); }
.vs__card--gold .critbar__cell--partial { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 1.25px var(--gold); }
.vs__card .vs__rank { margin-top: auto; padding-top: 0.9rem; }
@media (min-width: 64rem) { .page-head--aside .vs { align-items: end; } }

/* -- /best/<list>/: the "first 3 in this list" card becomes a small podium (2 - 1 - 3), the list's own order */
@media (min-width: 64rem) {
  .page--best .aside-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0.45rem; padding: 0.6rem 1.1rem 0; }
  .page--best .aside-list__item {
    --tc: var(--steel); grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem;
    min-width: 0; min-height: 7rem; padding: 0.7rem 0.35rem 0.7rem; border: 0; border-radius: 10px 10px 0 0; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 13%, #22252b) 0%, #17191d 70%, #131418 100%); box-shadow: inset 0 2px 0 var(--tc);
  }
  .page--best .aside-list__item:nth-child(1) { --tc: var(--gold); grid-column: 2; min-height: 9.25rem; }
  .page--best .aside-list__item:nth-child(2) { --tc: var(--silver); grid-column: 1; min-height: 8rem; }
  .page--best .aside-list__item:nth-child(3) { --tc: var(--bronze); grid-column: 3; }
  .page--best .aside-list__item a { order: 1; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 0.8125rem; line-height: 1.25; }
  .page--best .aside-list__score { order: 2; font-size: 1.05rem; }
  .page--best .aside-list__item:nth-child(1) .aside-list__score { color: var(--gold-hi); font-size: 1.3rem; }
  .page--best .aside-list__max { color: var(--muted); } /* qa2: --dim measured 4.0-4.3:1 on the plinth tops */
  .page--best .aside-list__rank {
    order: 3; margin-top: auto; padding: 0 0.04em; font-size: 2rem; line-height: 1; color: transparent;
    background: linear-gradient(180deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 45%, #16181d) 100%); -webkit-background-clip: text; background-clip: text;
  }
  .page--best .aside-list__item:nth-child(1) .aside-list__rank { font-size: 2.6rem; }
}

/* -- /commission/: each answer section opens with a highlighted callout (its first sentence block) */
.page--commission .site-main__inner > .section.prose > p:first-of-type {
  padding: 1.1rem 1.25rem 1.15rem 1.35rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.65;
  background: linear-gradient(90deg, rgba(217, 191, 138, 0.08), transparent 75%), var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
}

/* -- /statistics/: big-number tiles with a metal edge; groups alternate between page and band surfaces */
.page--statistics .stat { position: relative; box-shadow: inset 0 2px 0 var(--line-2); }
.page--statistics .stat-list > .stat:first-child { box-shadow: inset 0 2px 0 var(--gold); }
.page--statistics .stat__value { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); }
.page--statistics .stats-group:nth-of-type(even) .stat { background: linear-gradient(180deg, #1a1c21, #15171b); }
/* each group opens with a feature tile two columns wide: the big number and its label left, the sentence right */
@media (min-width: 64rem) {
  .page--statistics .stat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--statistics .stat-list > .stat:first-child {
    grid-column: span 2; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); column-gap: 2rem; align-content: center;
    padding: 1.5rem 1.6rem; background: radial-gradient(420px 200px at 0% 0%, rgba(217, 191, 138, 0.09), transparent 70%), linear-gradient(180deg, #1a1c21, #141519);
  }
  .page--statistics .stat-list > .stat:first-child > * { grid-column: 2; min-width: 0; }
  .page--statistics .stat-list > .stat:first-child > :is(.stat__value, .stat__label) { grid-column: 1; }
  .page--statistics .stat-list > .stat:first-child > .stat__value { grid-row: 1; font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); color: var(--gold-hi); }
  .page--statistics .stat-list > .stat:first-child > .stat__value--text { font-size: 1.35rem; color: var(--ink); }
  .page--statistics .stat-list > .stat:first-child > .stat__label { grid-row: 2 / span 4; align-self: start; }
  .page--statistics .stat-list > .stat:first-child > .stat__sentence { grid-row: 1 / span 2; margin-top: 0.15rem; }
}

/* -- profile: key terms as a two-column spec sheet on wide screens */
@media (min-width: 64rem) {
  .page--profile .key-terms__list { columns: 2; column-gap: 3rem; column-rule: 1px solid var(--line); padding: 0.4rem 1.75rem; }
  /* inline-grid: an inline-level row is never split between the two columns */
  .page--profile .key-terms__row { display: inline-grid; width: 100%; vertical-align: top; grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr); gap: 1.1rem; }
  /* rule under each row (a rule on top would show at the head of the second column only) */
  .page--profile .key-terms__row, .page--profile .key-terms__row:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
  .page--profile .key-terms__value { max-width: none; }
}

/* -- guides: editorial reading layout (larger body, the short answer as a pull quote) */
.page--guide .page-head__lead { padding-left: 1.15rem; border-left: 2px solid var(--gold); color: var(--ink); }
.page--guide .prose > .lede { font-size: 1.22rem; line-height: 1.7; color: var(--ink); }
@media (min-width: 48rem) {
  .page--guide .prose { font-size: 1.125rem; }
  .page--guide .prose p, .page--guide .prose li { line-height: 1.78; }
}

/* -- long pages at >= 80rem (critic: a 620 px text column against the left edge, 420 px empty): the right rail is used.
   Guides: "What the data shows" becomes a sticky key-facts card beside the text. Methodology, commission, compare and
   profile text sections: a "ledger" split, the section head left (sticky while its section scrolls), the text right. */
@media (min-width: 80rem) {
  .page--guide .content-page:has(> .data-note) {
    display: grid; grid-template-columns: minmax(0, 45rem) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start;
  }
  .page--guide .content-page:has(> .data-note) > * { grid-column: 1 / -1; }
  .page--guide .content-page:has(> .data-note) > .prose { grid-column: 1; grid-row: 2; }
  .page--guide .content-page > .data-note {
    grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 1.75rem); justify-self: stretch; max-width: 25rem; margin: 0.35rem 0 0;
    padding: 1.4rem 1.5rem 1.3rem; font-size: 0.97rem; box-shadow: inset 0 2px 0 var(--gold);
    /* qa2 23.10.: three guides have a card taller than the screen (up to 1,430 px); it scrolls inside instead of hiding its end */
    max-height: calc(100vh - var(--header-h) - 3.5rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .page--guide .content-page > .data-note .section-head { margin-bottom: 0.9rem; }
  .page--guide .content-page > .data-note .section-head__title { font: 600 0.78rem/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

  .page--methodology .site-main__inner > .section.prose:not(:has(.table-scroll)),
  .page--commission .site-main__inner > .section.prose,
  .page--compare .compare-diff,
  .page--profile .profile > :is(.questions, .claims, .reply, .corrections-box, .nearby, .citation) {
    display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 46rem); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; max-width: none;
  }
  .page--methodology .site-main__inner > .section.prose:not(:has(.table-scroll)) > *,
  .page--commission .site-main__inner > .section.prose > *,
  .page--compare .compare-diff > *,
  .page--profile .profile > :is(.questions, .claims, .reply, .corrections-box, .nearby, .citation) > * { grid-column: 2; min-width: 0; }
  .page--methodology .site-main__inner > .section.prose:not(:has(.table-scroll)) > .section-head,
  .page--commission .site-main__inner > .section.prose > .section-head,
  .page--compare .compare-diff > .section-head,
  .page--profile .profile > :is(.questions, .claims, .reply, .corrections-box, .nearby, .citation) > .section-head {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: calc(var(--header-h) + 1.75rem); display: block; margin: 0;
    padding-top: 1rem; border-top: 1px solid rgba(217, 191, 138, 0.45);
  }
  .page--methodology .site-main__inner > .section.prose:not(:has(.table-scroll)) > .section-head .section-head__title,
  .page--commission .site-main__inner > .section.prose > .section-head .section-head__title,
  .page--compare .compare-diff > .section-head .section-head__title,
  .page--profile .profile > :is(.questions, .claims, .reply, .corrections-box, .nearby, .citation) > .section-head .section-head__title {
    font-size: 1.45rem; line-height: 1.25;
  }
  .page--profile .profile > :is(.questions, .claims, .reply, .corrections-box, .nearby, .citation) .section-head__meta { margin-top: 0.6rem; }
  /* final2 23.10.: the report (flagship, 48 prose children) used a 647 px column with the right 529 px empty; its two
     charts move into a right rail. Only the second chart is sticky (a sticky grid item is bound by its grid area, two
     sticky charts overlapped in a trial). Row spans follow the report's child order (chart 1 = child 7, chart 2 = child 28). */
  .page--report .report__body {
    display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); max-width: none; align-items: start;
  }
  .page--report .report__body > * { grid-column: 1; min-width: 0; }
  .page--report .report__body > .chart { grid-column: 2; margin: 0; }
  .page--report .report__body > .chart--criteria { grid-row: 1 / span 22; }
  .page--report .report__body > .chart--scores { grid-row: 23 / span 26; position: sticky; top: calc(var(--header-h) + 1.75rem); }
  /* profile summary: the text left, its quote and criteria line in the right rail */
  .page--profile .profile > .summary { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); max-width: none; align-items: start; }
  .page--profile .profile > .summary > * { grid-column: 2; min-width: 0; }
  .page--profile .profile > .summary > .summary__text { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
}

/* -- footer: brand + edition line, the verbatim disclosure, four labelled link columns, the legal line under a hairline */
.site-footer { position: relative; margin-top: 5rem; border-top: 0; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 191, 138, 0.5) 50%, transparent); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 3rem; }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0 0 1.75rem; }
.site-footer__home { font-size: 0.9375rem; }
.site-footer__home:hover { color: var(--ink); text-decoration: none; }
.site-footer__checked {
  margin: 0; padding: 0.5rem 0.85rem; border: 1px solid rgba(217, 191, 138, 0.35); border-radius: 999px; color: var(--gold);
  font: 500 0.75rem/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.site-footer__disclosure { margin-bottom: 1rem; }
.site-footer__nav--cols { margin: 2rem 0 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.site-footer__nav--cols .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; }
.site-footer__heading { margin: 0 0 0.5rem; font: 600 0.72rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.site-footer__list { margin: 0; }
.site-footer__list li { margin: 0; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); text-decoration: none; font-size: 0.94rem; }
.site-footer__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); }
.site-footer__legal { margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: none; }
@media (min-width: 64rem) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 4.5rem; align-items: start; padding-top: 3.5rem; }
  .site-footer__brand, .site-footer__disclosure, .site-footer__caveat { grid-column: 1; }
  .site-footer__nav--cols { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; border: 0; }
  .site-footer__nav--cols .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__list a { min-height: 2.25rem; }
  .site-footer__legal { grid-column: 1 / -1; margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .site-nav__link, .rank-table--cards .rank-row, .filter-list__item { transition: none; }
}
@media print {
  :root { color-scheme: light; }
  body, .site-footer { background: #fff; color: #000; }
  .site-header { position: static; backdrop-filter: none; background: #fff; }
  .home__top::before, .home__top::after, .page-head::before, .profile__head::before, .top3__item--gold::before { display: none; }
  .stats-strip { box-shadow: none; clip-path: none; background: none; }
  .leader, .rank-table--cards .rank-row, .scorepanel { background: none; border: 1px solid #000; color: #000; }
  .rank-num, .top3__rank, .scorepanel .summary__value { color: #000; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  .site-footer__disclosure { color: #000; background: none; }
}