/* ==========================================================================
   GLOW design system: components
   --------------------------------------------------------------------------
   Requires tokens.css first. Every value reads a token; no raw colours here.
   Mobile first (360px up). Breakpoints: 600, 900, 1200.
   Class prefix: ds-. Pages opt in with <body class="ds">.
   One canonical style per component; see the index below.

    0  Base (scoped to body.ds)
    1  Layout: container, section, grid helpers
    2  Type: kicker, display sizes, dek, meta
    3  Buttons and links
    4  Label, score, media tile
    5  Skip link
    6  Utility bar
    7  Masthead (header)
    8  Primary nav + mega panel, category row
    9  Mobile drawer
   10  Breadcrumb
   11  Disclosure line
   12  Ranking hero (split) + byline
   13  Update line, correction note, note box
   14  On-page nav
   15  Section header
   16  Verdict box ("at a glance")
   17  Ranked product card
   18  Comparison table
   19  Prose section
   20  FAQ
   21  Related links
   22  Newsletter block
   23  Footer
   24  Back to top
   25  Reduced motion
   ========================================================================== */


/* 0  BASE ------------------------------------------------------------------ */

body.ds {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
.ds :where(ul, ol) { margin: 0; padding: 0; }
.ds :where(img, svg, video) { display: block; max-width: 100%; }
.ds :where(img) { height: auto; }
.ds :where(a) { color: inherit; }
.ds :where(button, input, select, textarea) { font: inherit; color: inherit; border-radius: var(--radius); }
.ds :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ds :focus:not(:focus-visible) { outline: none; }

.ds-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 1  LAYOUT ---------------------------------------------------------------- */

.ds-container {
  width: 100%;
  max-width: calc(var(--w-container) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
.ds-container--page   { max-width: calc(var(--w-page) + 2 * var(--margin)); }
.ds-container--answer { max-width: calc(var(--w-answer) + 2 * var(--margin)); }
.ds-container--prose  { max-width: calc(var(--w-prose) + 2 * var(--margin)); }

.ds-section { padding-block: var(--section-gap); }
.ds-section--rule { padding-top: 0; }
.ds-section--rule > .ds-container::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  margin-bottom: var(--section-gap);
  border-top: var(--border-hair);
}
.ds-section--flush-top { padding-top: 0; }
.ds-section + .ds-section--flush-top { margin-top: calc(-1 * var(--space-5)); }

.ds-stack > * + * { margin-top: var(--head-gap); }

/* Long sections (method, field essay, FAQ): from 1200px the section head
   sits in a sticky left column and the prose or FAQ runs on the right,
   so the page never leaves a 400px empty band beside a 680px column.     */
@media (min-width: 1200px) {
  .ds-section--aside > .ds-container {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-7);
  }
  .ds-section--aside .ds-head {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
  }
}


/* 2  TYPE ------------------------------------------------------------------ */

.ds-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-kicker--line::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.ds-kicker--ink { color: var(--ink); }

.ds-display-xl, .ds-display-l, .ds-display-m, .ds-display-s, .ds-display-xs {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--ink);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.ds-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); }
.ds-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l); }
.ds-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m); }
.ds-display-s  { font-size: var(--fs-display-s);  line-height: var(--lh-display-s); letter-spacing: 0; }
.ds-display-xs { font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); letter-spacing: 0; }
.ds :where(.ds-display-xl, .ds-display-l, .ds-display-m, .ds-display-s, .ds-display-xs) em {
  font-style: italic;
  color: var(--black);
}

.ds-dek {
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  color: var(--ink-2);
  text-wrap: pretty;
}
.ds-meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}
.ds-text-s {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
}


/* 3  BUTTONS AND LINKS ------------------------------------------------------
   Two buttons only: primary (square black) and secondary (underlined link).
   At most one primary per module.                                           */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-h);
  padding: var(--space-3) var(--space-6);
  border: var(--border-w) solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-button);
  line-height: 1.2;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ds-btn:hover { background: var(--white); color: var(--black); }
.ds-btn--block { display: flex; width: 100%; }

.ds-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: currentColor;
}
.ds-link:hover { text-decoration-thickness: 2px; }

/* Caps "All rankings" style link, as on the homepage (.hx-more) */
.ds-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-w) solid currentColor;
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.ds-arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.ds-more:hover .ds-arrow,
a:hover > .ds-arrow { transform: translateX(4px); }


/* 4  LABEL, SCORE, MEDIA TILE --------------------------------------------- */

/* Outlined label: award labels, tier, clinic status */
.ds-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: var(--space-1) var(--space-2);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: 1.2;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
}
.ds-label--solid { background: var(--black); border-color: var(--black); color: var(--white); }

/* GLOW Score: black serif numeral, one decimal, "/10", kicker above */
.ds-score {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ds-score__kicker {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-score__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-score);
  line-height: var(--lh-score);
  letter-spacing: -0.02em;
  color: var(--black);
  font-variant-numeric: lining-nums;
}
.ds-score__out {
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ds-score--s .ds-score__value { font-size: var(--fs-display-s); letter-spacing: 0; }
.ds-rank-card .ds-score--s .ds-score__value { font-size: var(--fs-display-m); letter-spacing: -0.01em; }

/* Media slot. Default = packshot centred on the tile with 12% padding.
   --photo = full-bleed editorial still. --type = typographic fallback
   (brand name in the serif on the tile). The slot never collapses.        */
.ds-media {
  position: relative;
  aspect-ratio: var(--ratio-product);
  overflow: hidden;
  background: var(--tile);
  border-radius: var(--radius);
}
.ds-media > img {
  width: 100%;
  height: 100%;
  padding: var(--packshot-pad);
  object-fit: contain;
}
.ds-media--photo > img { padding: 0; object-fit: cover; }
.ds-media--type {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--packshot-pad);
  text-align: center;
}
.ds-media__type {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.ds-media__type em { font-style: italic; }


/* 5  SKIP LINK ------------------------------------------------------------- */

.ds-skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-9));
  z-index: calc(var(--z-drawer) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--black);
  color: var(--white);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-text-s);
  text-decoration: none;
}
.ds-skip:focus { top: var(--space-4); outline: var(--border-w) solid var(--focus-on-black); outline-offset: -4px; }


/* 6  UTILITY BAR -----------------------------------------------------------
   Black bar. Trust line in kicker caps; links sentence case (as on home).
   On phones the trust line is dropped and the three links stay.            */

.ds-utility {
  background: var(--black);
  color: var(--on-black-2);
}
.ds-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
}
.ds-utility__trust {
  display: none;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-utility__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}
.ds-utility__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--on-black);
  text-decoration: none;
}
.ds-utility__links a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.ds-utility :focus-visible { outline-color: var(--focus-on-black); }

@media (min-width: 600px) {
  .ds-utility__trust { display: block; }
}


/* 7  MASTHEAD --------------------------------------------------------------
   Burger left, SVG wordmark centre, search right. Burger is hidden from
   900px, where the primary nav is visible (as on the homepage).            */

.ds-masthead {
  background: var(--white);
  border-bottom: var(--border-hair);
}
.ds-masthead__inner {
  display: grid;
  grid-template-columns: var(--tap-nav) 1fr var(--tap-nav);
  align-items: center;
  gap: var(--space-4);
  min-height: var(--masthead-h);
}
.ds-masthead__burger,
.ds-masthead__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-nav);
  height: var(--tap-nav);
  color: var(--ink);
  cursor: pointer;
}
.ds-masthead__burger { justify-self: start; margin-left: calc(-1 * var(--space-3)); }
.ds-masthead__search { justify-self: end; margin-right: calc(-1 * var(--space-3)); }
.ds-masthead__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-nav);
  color: var(--black);
  text-decoration: none;
}
.ds-wordmark {
  display: block;
  width: auto;
  height: var(--wordmark-h);
  fill: currentColor;
}
.ds-burger {
  display: grid;
  gap: 5px;
  width: 22px;
}
.ds-burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
}

@media (min-width: 900px) {
  .ds-masthead__burger { visibility: hidden; pointer-events: none; }
}


/* 8  PRIMARY NAV + CATEGORY ROW ------------------------------------------- */

.ds-nav {
  position: relative;
  display: none;
  background: var(--white);
  border-bottom: var(--border-hair);
}
.ds-nav__list {
  display: flex;
  justify-content: center;
  gap: 0 var(--space-6);
  list-style: none;
}
.ds-nav__top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding-inline: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ds-nav__chev {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--dur) var(--ease);
}
.ds-nav__item:hover > .ds-nav__top,
.ds-nav__top[aria-current="page"] { border-bottom-color: var(--black); }
.ds-nav__item:hover .ds-nav__chev,
.ds-nav__item:focus-within .ds-nav__chev { transform: rotate(180deg); }

.ds-nav__panel {
  position: absolute;
  z-index: var(--z-nav-panel);
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: var(--white);
  border-top: var(--border-hair);
  border-bottom: var(--border-strong);
}
.ds-nav__item:hover > .ds-nav__panel,
.ds-nav__item:focus-within > .ds-nav__panel { display: block; }
.ds-nav__item.is-closed > .ds-nav__panel { display: none; }
.ds-nav__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 300px;
  gap: var(--space-7);
  padding-block: var(--space-7);
}
.ds-nav__label {
  margin-bottom: var(--space-4);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-nav__sub { list-style: none; display: grid; gap: 0 var(--space-6); }
.ds-nav__sub--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-nav__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.ds-nav__sub a:hover { font-style: italic; }
.ds-nav__feature {
  display: grid;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
}
.ds-nav__feature-media {
  display: block;
  aspect-ratio: 15 / 11;
  overflow: hidden;
  background: var(--tile);
}
.ds-nav__feature-media img { width: 100%; height: 100%; object-fit: cover; }
.ds-nav__feature-eyebrow {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-nav__feature-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
}
.ds-nav__feature-cta {
  display: block;
  font-size: var(--fs-meta);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* Category row */
.ds-catbar {
  display: none;
  background: var(--white);
  border-bottom: var(--border-hair);
}
.ds-catbar__list {
  display: flex;
  gap: 0 var(--space-6);
  list-style: none;
}
.ds-catbar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-nav);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ds-catbar a:hover { color: var(--ink); }
.ds-catbar a[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--black);
}

@media (min-width: 900px) {
  .ds-nav, .ds-catbar { display: block; }
}


/* 9  MOBILE DRAWER ---------------------------------------------------------
   CSS-only open state (checkbox + labels). assets/ds/chrome.js adds keys,
   focus trap, aria-expanded and scroll lock. No shadow: a black scrim.     */

.ds-drawer-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ds-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.ds-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-right: var(--border-strong);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.ds-drawer-toggle:checked ~ .ds-drawer {
  transform: none;
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}
.ds-drawer-toggle:checked ~ .ds-drawer__scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
body.ds:has(.ds-drawer-toggle:checked),
body.ds.ds-drawer-open { overflow: hidden; }

.ds-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--masthead-h);
  padding-inline: var(--space-5) var(--space-3);
  border-bottom: var(--border-hair);
}
.ds-drawer__brand { display: inline-flex; color: var(--black); }
.ds-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-nav);
  height: var(--tap-nav);
  color: var(--ink);
  cursor: pointer;
}
.ds-drawer__search {
  display: flex;
  align-items: stretch;
  margin: var(--space-5);
  border: var(--border-strong);
}
.ds-drawer__search-icon {
  flex: none;
  align-self: center;
  margin-left: var(--space-3);
  color: var(--ink-3);
}
.ds-drawer__search-input {
  flex: 1;
  min-width: 0;
  height: var(--input-h);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  font-size: var(--fs-text);
  color: var(--ink);
}
.ds-drawer__search-input::placeholder { color: var(--ink-3); }
.ds-drawer__search-input:focus-visible { outline: none; }
.ds-drawer__search:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ds-drawer__search-go {
  flex: none;
  width: var(--input-h);
  border: 0;
  border-left: var(--border-strong);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-text-l);
  cursor: pointer;
}
.ds-drawer__body { padding: 0 var(--space-5) var(--space-7); }
.ds-drawer__eyebrow {
  margin: var(--space-6) 0 var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-drawer__index,
.ds-drawer__cats,
.ds-drawer__util { list-style: none; }
.ds-drawer__index a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-height: 52px;
  padding-block: var(--space-3);
  border-bottom: var(--border-hair);
  color: var(--ink);
  text-decoration: none;
}
.ds-drawer__no {
  flex: none;
  width: 22px;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--ink-3);
}
.ds-drawer__t {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: 1.1;
}
.ds-drawer__cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}
.ds-drawer__cats a,
.ds-drawer__util a {
  display: flex;
  align-items: center;
  min-height: var(--tap-nav);
  border-bottom: var(--border-hair);
  font-size: var(--fs-text-s);
  color: var(--ink);
  text-decoration: none;
}
.ds-drawer__util a { color: var(--ink-2); }
.ds-drawer a:hover .ds-drawer__t { font-style: italic; }


/* 10  BREADCRUMB -----------------------------------------------------------
   Kicker caps, "/" separator, starts "GLOW", ends at the parent section.  */

.ds-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-crumb__item { display: inline-flex; align-items: center; }
.ds-crumb__item + .ds-crumb__item::before {
  content: "/";
  margin-inline: var(--space-2);
  color: var(--rule);
  letter-spacing: 0;
}
.ds-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-nav);
  color: var(--ink-2);
  text-decoration: none;
}
.ds-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }


/* 11  DISCLOSURE LINE ------------------------------------------------------
   One grey meta sentence above the H1. The category note reuses .ds-note. */

.ds-disclosure {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}
.ds-disclosure a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-disclosure strong { font-weight: var(--weight-semibold); color: var(--ink-2); }


/* 12  RANKING HERO (SPLIT) + BYLINE -------------------------------------- */

.ds-hero { padding-block: var(--space-5) var(--section-gap); }
.ds-hero__disclosure { padding-block: var(--space-4) var(--space-5); }
.ds-hero__inner {
  display: grid;
  gap: var(--space-6);
}
.ds-hero__body { display: flex; flex-direction: column; }
.ds-hero__crumb { margin-bottom: var(--space-3); }
.ds-hero__titleblock {
  padding-top: var(--space-5);
  border-top: var(--border-h1);
}
.ds-hero__kicker { color: var(--ink); }
.ds-hero__title {
  text-wrap: pretty;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
}
.ds-hero__dek { margin-top: var(--space-5); max-width: 36em; }
.ds-hero__byline { margin-top: var(--space-5); }
.ds-hero__update { margin-top: var(--space-3); }
.ds-hero__media { margin: 0; }
.ds-hero__frame {
  aspect-ratio: var(--ratio-hero);
  overflow: hidden;
  background: var(--tile);
}
.ds-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899.98px) {
  /* Phone and tablet: a shorter crop so the verdict starts on screen one */
  .ds-hero__frame { aspect-ratio: 4 / 3; }
  .ds-hero__frame img { object-position: 50% 70%; }
}
.ds-hero__credit {
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}

@media (min-width: 900px) {
  .ds-hero { padding-top: var(--space-6); }
  .ds-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }
}

/* Text hero: no image on record, so the text column takes the width */
@media (min-width: 900px) {
  .ds-hero__inner--text { grid-template-columns: minmax(0, 1fr); }
  .ds-hero__inner--text .ds-hero__body { max-width: 52rem; }
}

/* Byline: By {name} · Reviewed by {name} · Updated {date} */
.ds-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-2);
}
.ds-byline__item + .ds-byline__item::before {
  content: "\00B7";
  margin-inline: var(--space-2);
  color: var(--ink-3);
}
.ds-byline strong, .ds-byline a { font-weight: var(--weight-semibold); color: var(--ink); }
.ds-byline a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--rule); }
.ds-byline a:hover { text-decoration-color: currentColor; }
.ds-byline__item:empty { display: none; }


/* 13  UPDATE LINE, CORRECTION NOTE, NOTE BOX ------------------------------ */

/* Latest update: one line under the byline */
.ds-change {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-2);
}
.ds-change__label {
  margin-right: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
}

/* Correction: kept in full in a hairline box after the body */
.ds-correction {
  max-width: var(--w-prose);
  padding: var(--space-5);
  border: var(--border-hair);
  border-left: var(--border-h1);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-correction__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-text-s);
  color: var(--ink);
}
.ds-correction a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Note: square hairline box with a kicker label. Tones are monochrome. */
.ds-note {
  max-width: var(--w-prose);
  padding: var(--space-5);
  border: var(--border-hair);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-note__label {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
}
.ds-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-note--safety { border: var(--border-strong); }
.ds-note--method { border-inline: 0; padding-inline: 0; }
.ds-note__title { color: var(--ink); }

/* Author box (end of page): role, beat, one credential line. No photo on
   record means no image, never an initials disc.                          */
.ds-author {
  max-width: var(--w-prose);
  padding-top: var(--space-5);
  border-top: var(--border-strong);
}
.ds-author .ds-kicker { margin-bottom: var(--space-2); }
.ds-author__name {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
  color: var(--ink);
}
.ds-author__role {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  color: var(--ink-2);
}
.ds-author__cred {
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}


/* 14  ON-PAGE NAV (sticky on phone) --------------------------------------- */

.ds-onpage {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--white);
  border-block: var(--border-hair);
}
.ds-onpage__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-onpage__inner::-webkit-scrollbar { display: none; }
.ds-onpage__label {
  flex: none;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-onpage__list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
}
.ds-onpage__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-nav);
  font-size: var(--fs-meta);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.ds-onpage__list a:hover,
.ds-onpage__list a[aria-current="true"] { border-bottom-color: var(--black); }

@media (min-width: 900px) {
  .ds-onpage { position: static; }
}


/* 15  SECTION HEADER (canonical: homepage .hx-head) ----------------------- */

.ds-head {
  display: grid;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-6);
}
.ds-head__title { font-size: var(--fs-display-m); line-height: var(--lh-display-m); }
.ds-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.ds-head__note {
  max-width: 30em;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-head__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 900px) {
  .ds-head {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .ds-head__side { justify-self: end; align-items: flex-start; }
}


/* 16  VERDICT BOX ("at a glance") ------------------------------------------
   One per page, directly after the hero. White, 1px ink border. The score
   shows only when the tier is "tested". Never labelled "AI".              */

.ds-verdict {
  border: var(--border-strong);
  background: var(--white);
}
.ds-verdict__main {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}
.ds-verdict__q {
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
}
.ds-verdict__lede > .ds-kicker:last-child { margin-bottom: 0; }
.ds-verdict__answer {
  margin-top: var(--space-3);
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  color: var(--ink);
  text-wrap: pretty;
}
.ds-verdict__answer a,
.ds-verdict__more a { text-decoration: underline; text-underline-offset: 0.2em; }
.ds-verdict__more {
  margin-top: var(--space-3);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-verdict__score {
  padding-top: var(--space-4);
  border-top: var(--border-hair);
}
.ds-verdict__bestfor {
  list-style: none;
  border-top: var(--border-hair);
}
.ds-verdict__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hair);
}
.ds-verdict__row:last-child { border-bottom: 0; }
.ds-verdict__for {
  grid-column: 1 / -1;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-verdict__pick {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
  color: var(--ink);
}
.ds-verdict__pick a { text-decoration: none; }
.ds-verdict__pick a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.ds-verdict__pick-score {
  font-size: var(--fs-meta);
  color: var(--ink-2);
  white-space: nowrap;
}
.ds-verdict__pick-score strong { color: var(--ink); font-weight: var(--weight-semibold); }
.ds-verdict__foot {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-hair);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}
.ds-verdict__foot strong { color: var(--ink-2); font-weight: var(--weight-semibold); }
.ds-verdict__foot:empty { display: none; }

@media (min-width: 600px) {
  .ds-verdict__row { grid-template-columns: 11em minmax(0, 1fr) auto; }
  .ds-verdict__for { grid-column: auto; }
}
@media (min-width: 900px) {
  .ds-verdict__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-7);
    padding: var(--space-7);
  }
  .ds-verdict__score {
    padding: 0 0 0 var(--space-7);
    border-top: 0;
    border-left: var(--border-hair);
    align-self: stretch;
  }
  .ds-verdict__row,
  .ds-verdict__foot { padding-inline: var(--space-7); }
  /* No score: question left, answer right (Wirecutter short answer) */
  .ds-verdict__main--answer { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ds-verdict__main--answer .ds-prose { max-width: none; }
}

/* Editor's pick row inside the verdict box: label, name, one line, price
   and the box's single primary button.                                    */
.ds-verdict__top {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: var(--border-hair);
}
.ds-verdict__top-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ds-verdict__top-name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  color: var(--ink);
}
.ds-verdict__top-text {
  max-width: var(--w-prose);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.ds-verdict__top-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-verdict__top-buy { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.ds-verdict__top-price {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-text);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (min-width: 600px) {
  .ds-verdict__top-buy { align-items: flex-start; }
}
@media (min-width: 900px) {
  .ds-verdict__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-7);
    padding: var(--space-6) var(--space-7);
  }
}

/* Pros / cons and Get this if / Skip if: plain two columns, no colour */
.ds-split {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hair);
}
.ds-split__label {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-text-s);
  color: var(--ink);
}
.ds-split__list {
  list-style: none;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-split__list li { position: relative; padding-left: var(--space-5); }
.ds-split__list li + li { margin-top: var(--space-2); }
.ds-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--ink);
}
@media (min-width: 600px) {
  .ds-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}


/* 17  RANKED PRODUCT CARD (product card L) ---------------------------------
   Rank numeral, packshot on the tile, award label, brand, name, GLOW Score,
   price, one primary buy button, short verdict, get/skip, profile link.   */

.ds-ranking { list-style: none; display: grid; }
.ds-rank-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-4);
  padding-block: var(--space-7);
  border-top: var(--border-hair);
}
.ds-ranking > li:first-child > .ds-rank-card { border-top: var(--border-strong); }
.ds-rank-card__rank {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--black);
  font-variant-numeric: lining-nums;
}
.ds-rank-card__head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.ds-rank-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ds-rank-card__labels:empty { display: none; }
.ds-rank-card__media {
  grid-column: 1 / -1;
  margin: 0;
}
.ds-rank-card__body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.ds-rank-card__brand {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-rank-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.ds-rank-card__name em { font-style: normal; }   /* product names stay roman */
.ds-rank-card__name a { text-decoration: none; }
.ds-rank-card__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
/* Facts row: kickers share the top line; values share one baseline, so the
   score leads and price and retailer read as plain information.           */
.ds-rank-card__facts {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  border-block: var(--border-hair);
}
.ds-rank-card__facts > .ds-score,
.ds-rank-card__facts > .ds-rank-card__price { display: contents; }
.ds-rank-card__price-value {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.ds-rank-card__price--where .ds-rank-card__price-value {
  font-weight: var(--weight-regular);
  color: var(--ink-2);
}
.ds-rank-card__verdict {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink-2);
  max-width: var(--w-prose);
  text-wrap: pretty;
}
.ds-rank-card__buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.ds-rank-card__also {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}
.ds-rank-card__also:empty { display: none; }
.ds-rank-card__more { font-size: var(--fs-text-s); }

@media (max-width: 599.98px) {
  .ds-rank-card__media { aspect-ratio: 1 / 1; }
}
@media (min-width: 600px) {
  .ds-rank-card__buy { align-items: flex-start; }
}
@media (min-width: 900px) {
  .ds-rank-card {
    grid-template-columns: 64px minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-5) var(--space-7);
    padding-block: var(--space-7);
  }
  .ds-rank-card__rank { grid-column: 1; grid-row: 1 / span 2; }
  .ds-rank-card__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 100%; max-width: 320px; }
  .ds-rank-card__head { grid-column: 3; grid-row: 1; }
  .ds-rank-card__body { grid-column: 3; grid-row: 2; gap: var(--space-5); align-self: start; }
  /* No image on record: text takes both columns; nothing stands in for it */
  .ds-rank-card--no-media .ds-rank-card__head,
  .ds-rank-card--no-media .ds-rank-card__body { grid-column: 2 / -1; }
  /* In a list where other cards carry an image, a text-only card keeps its
     text on the image cards' text column so the list reads in one line.  */
  .ds-ranking--mixed .ds-rank-card--no-media .ds-rank-card__head,
  .ds-ranking--mixed .ds-rank-card--no-media .ds-rank-card__body { grid-column: 3; }
}


/* 18  COMPARISON TABLE -----------------------------------------------------
   Black header rule, no fill. Winner gets a black tick. Below 600px rows
   stack as cards (td[data-label]). .ds-table-wrap--scroll keeps a wide
   table as a table with a sticky first column and an edge fade.          */

.ds-table-wrap { position: relative; }
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-variant-numeric: tabular-nums lining-nums;
}
.ds-table caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
  text-align: left;
}
.ds-table th,
.ds-table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  text-align: left;
  vertical-align: baseline;
}
.ds-table thead th {
  padding-block: var(--space-3);
  border-top: var(--border-w) solid var(--black);
  border-bottom: var(--border-w) solid var(--black);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.ds-table tbody tr { border-bottom: var(--border-hair); }
.ds-table td strong { font-weight: var(--weight-semibold); color: var(--ink); }
.ds-table td small {
  display: block;
  font-size: var(--fs-meta);
  color: var(--ink-3);
}
.ds-table__rank {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1;
  color: var(--black);
}
.ds-table__product a { text-decoration: none; }
.ds-table__product a:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.ds-tick {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  vertical-align: -1px;
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
}
.ds-table__cta { white-space: nowrap; text-align: right; }
.ds-table__score strong {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-xs);
  line-height: 1;
  white-space: nowrap;
}
.ds-table__price strong { font-weight: var(--weight-regular); }
.ds-table__where { color: var(--ink-2); }

/* Phone: stacked cards */
@media (max-width: 599.98px) {
  .ds-table--stack thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .ds-table--stack,
  .ds-table--stack tbody,
  .ds-table--stack tr,
  .ds-table--stack td { display: block; width: 100%; }
  .ds-table--stack tbody { border-top: var(--border-w) solid var(--black); }
  .ds-table--stack tr {
    display: grid;
    grid-template-columns: 2.25em auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-4);
  }
  .ds-table--stack td { padding: 0; }
  .ds-table--stack { display: flex; flex-direction: column; }
  .ds-table--stack caption { display: block; order: 2; width: 100%; }
  .ds-table--stack td.ds-table__rank { grid-column: 1; grid-row: 1 / span 6; width: auto; }
  .ds-table--stack td.ds-table__product { grid-column: 2 / 4; grid-row: 1; }
  .ds-table--stack td.ds-table__product small { margin-top: 2px; }
  /* Compact row: score top right; price and retailer as one meta line */
  .ds-table--stack td.ds-table__score { grid-column: 4; grid-row: 1; width: auto; justify-self: end; }
  .ds-table--stack td.ds-table__price,
  .ds-table--stack td.ds-table__where {
    grid-row: 2;
    width: auto;
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
  }
  .ds-table--stack td.ds-table__price { grid-column: 2; }
  .ds-table--stack td.ds-table__where { grid-column: 3 / -1; }
  .ds-table--stack td.ds-table__where { margin-left: calc(-1 * var(--space-2)); }
  .ds-table--stack td.ds-table__where::before {
    content: "\00B7";
    margin-right: var(--space-2);
    color: var(--ink-3);
  }
  .ds-table--stack td[data-label]:not([class]) {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .ds-table--stack td[data-label]:not([class])::before {
    content: attr(data-label);
    font-weight: var(--weight-semibold);
    font-size: var(--fs-kicker);
    letter-spacing: var(--track-kicker);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ds-table--stack .ds-table__product { margin-bottom: 0; }
  /* Award ("Best for") and shop link: each on its own line under the meta */
  .ds-table--stack td.ds-table__for {
    grid-column: 2 / -1;
    grid-row: 3;
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--ink-2);
  }
  .ds-table--stack td.ds-table__for::before {
    content: attr(data-label);
    margin-right: var(--space-2);
    font-weight: var(--weight-semibold);
    font-size: var(--fs-kicker);
    letter-spacing: var(--track-kicker);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ds-table--stack td.ds-table__cta { grid-column: 2 / -1; grid-row: 4; }
  .ds-table--stack .ds-table__cta { text-align: left; margin-top: var(--space-2); }
}

/* Wide tables (4+ columns that should stay tabular): sticky first column */
.ds-table-wrap--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table-wrap--scroll .ds-table { min-width: 640px; }
.ds-table-wrap--scroll .ds-table th:first-child,
.ds-table-wrap--scroll .ds-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
}
.ds-table-fade {
  position: sticky;
  right: 0;
  float: right;
  width: var(--space-7);
  height: 100%;
  margin-left: calc(-1 * var(--space-7));
  background: linear-gradient(90deg, transparent, var(--white));
  pointer-events: none;
}


/* 19  PROSE SECTION -------------------------------------------------------- */

.ds-prose {
  max-width: var(--w-prose);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink);
}
.ds-prose > * + * { margin-top: 1.1em; }
.ds-prose h2 {
  margin-top: 1.6em;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--track-display);
}
.ds-prose h3 {
  margin-top: 1.4em;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
}
.ds-prose h2 + *, .ds-prose h3 + * { margin-top: 0.6em; }
.ds-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.ds-prose a:hover { text-decoration-thickness: 2px; }
.ds-prose strong { font-weight: var(--weight-semibold); }
.ds-prose ul, .ds-prose ol { padding-left: 1.25em; }
.ds-prose li + li { margin-top: 0.4em; }
.ds-prose blockquote {
  padding-left: var(--space-5);
  border-left: var(--border-h1);
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
}
.ds-prose--lead > p:first-child {
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
}


/* Method fact row: test conditions as serif numerals over kicker labels */
.ds-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-6);
  border-top: var(--border-strong);
}
.ds-facts__item {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: var(--border-hair);
}
.ds-facts__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  color: var(--black);
  font-variant-numeric: lining-nums;
}
.ds-facts__label {
  margin-top: var(--space-1);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-facts:last-child { margin-bottom: 0; }
.ds-section--aside .ds-facts { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ds-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-facts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* 20  FAQ ------------------------------------------------------------------
   <details> with a custom black +/-, serif question, hairlines, all closed. */

.ds-faq { max-width: var(--w-answer); border-top: var(--border-strong); }
.ds-faq__item { border-bottom: var(--border-hair); }
.ds-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--tap-nav);
  padding-block: var(--space-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  color: var(--ink);
}
.ds-faq__q::-webkit-details-marker { display: none; }
.ds-faq__q::marker { content: ""; }
.ds-faq__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.ds-faq__icon::before,
.ds-faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--black);
  transition: transform var(--dur) var(--ease);
}
.ds-faq__icon::after { transform: rotate(90deg); }
.ds-faq__item[open] .ds-faq__icon::after { transform: rotate(0deg); }
.ds-faq__a {
  max-width: var(--w-prose);
  padding-bottom: var(--space-5);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.ds-faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }


/* 21  RELATED LINKS --------------------------------------------------------
   .ds-related: row of S cards (3:2 image or typographic tile).
   .ds-links: a titled list of text links (Read on, how-to guides).      */

.ds-related {
  display: grid;
  gap: var(--space-6) var(--gutter);
  list-style: none;
}
.ds-related__card {
  display: grid;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
}
.ds-related__media { aspect-ratio: var(--ratio-editorial); }
.ds-related__kicker {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ds-related__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
}
.ds-related__card:hover .ds-related__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (min-width: 600px) { .ds-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Text-only S cards (no image on record): ink rule on top, kicker, serif
   title, one line of copy, underlined text CTA at the foot.               */
.ds-related--text .ds-related__card {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
  padding-top: var(--space-4);
  border-top: var(--border-strong);
}
.ds-related__desc {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-related__cta {
  justify-self: start;
  font-size: var(--fs-text-s);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.ds-related--text .ds-related__card:hover .ds-related__cta { text-decoration-thickness: 2px; }
.ds-related--text .ds-related__card:hover .ds-arrow { transform: translateX(4px); }
@media (min-width: 600px) and (max-width: 899.98px) { .ds-related--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ds-related--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ds-links + .ds-links { margin-top: var(--space-7); }

/* Also tested: a short list of scored products that did not make the
   ranking. Hairline rows, serif name with its score, one verdict line,
   the retailer as an underlined text link (never a button).              */
.ds-also { list-style: none; display: grid; gap: 0 var(--gutter); }
.ds-also__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--border-hair);
}
.ds-also__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
}
.ds-also__score { font-family: var(--font-text); font-size: var(--fs-text-s); color: var(--ink-2); }
.ds-also__verdict { font-size: var(--fs-text-s); line-height: var(--lh-text-s); color: var(--ink-2); max-width: var(--w-prose); }
.ds-also__verdict strong { font-weight: var(--weight-semibold); color: var(--ink); }
.ds-also .ds-link { font-size: var(--fs-text-s); }
@media (min-width: 900px) { .ds-also { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-links__list {
  display: grid;
  list-style: none;
  border-top: var(--border-strong);
}
.ds-links__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-nav);
  padding-block: var(--space-3);
  border-bottom: var(--border-hair);
  font-size: var(--fs-text-s);
  color: var(--ink);
  text-decoration: none;
}
.ds-links__list a::after {
  content: "\2192";
  flex: none;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}
.ds-links__list a:hover::after { transform: translateX(4px); color: var(--ink); }
@media (min-width: 600px) {
  .ds-links__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 900px) {
  .ds-links__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 22  NEWSLETTER BLOCK -----------------------------------------------------
   Kicker, one-line serif H2, one sentence, square field + black button,
   privacy line. No popup, no subscriber counts.                          */

.ds-newsletter {
  display: grid;
  gap: var(--space-5) var(--space-8);
  padding-block: var(--space-7);
  border-block: var(--border-strong);
}
.ds-newsletter__title { font-size: var(--fs-display-m); line-height: var(--lh-display-m); }
.ds-newsletter__text {
  margin-top: var(--space-3);
  max-width: 34em;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.ds-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-newsletter__input {
  width: 100%;
  min-width: 0;
  height: var(--input-h);
  padding: 0 var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--fs-text);
  color: var(--ink);
}
.ds-newsletter__input::placeholder { color: var(--ink-3); }
.ds-newsletter__privacy {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}
.ds-newsletter__privacy a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 600px) {
  .ds-newsletter__form { flex-direction: row; gap: 0; }
  .ds-newsletter__form .ds-btn { flex: none; }
  .ds-newsletter__input { border-right: 0; }
}
@media (min-width: 900px) {
  .ds-newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}


/* 23  FOOTER --------------------------------------------------------------- */

.ds-footer {
  background: var(--black);
  color: var(--on-black-2);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
}
.ds-footer :focus-visible { outline-color: var(--focus-on-black); }
.ds-footer__mast {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
  border-bottom: var(--border-w) solid var(--on-black-rule);
}
.ds-footer__wordmark { display: inline-flex; color: var(--on-black); width: max-content; }
.ds-footer__wordmark .ds-wordmark { height: 30px; }
.ds-footer__dek { max-width: 34em; color: var(--on-black-2); }
.ds-footer__grid {
  display: grid;
  gap: var(--space-6) var(--gutter);
  padding-block: var(--space-7);
}
.ds-footer__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--on-black);
}
.ds-footer__list { list-style: none; display: grid; gap: var(--space-3); }
.ds-footer__list a,
.ds-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--on-black-2);
  text-decoration: none;
}
.ds-footer__list a { min-height: 24px; }
.ds-footer a:hover { color: var(--on-black); text-decoration: underline; text-underline-offset: 0.25em; }
.ds-footer__colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--on-black-rule);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ds-footer__copy { color: var(--on-black-2); }
.ds-footer__credit { display: block; margin-top: var(--space-1); }
.ds-footer__credit a { display: inline; min-height: 0; color: var(--on-black-2); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; }

@media (min-width: 600px) {
  .ds-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ds-footer { padding-top: var(--space-9); }
  .ds-footer__mast { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-7); }
}


/* 24  BACK TO TOP (square; shown after 2 screens by chrome.js) ------------ */

.ds-totop {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-totop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-nav);
  height: var(--tap-nav);
  border: var(--border-w) solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.ds-totop.is-on { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
.ds-totop:hover { background: var(--white); color: var(--black); }


/* 24b  RANKING ADDITIONS (one-off legacy layouts) ---------------------------
   Spec sheet on a rank card, best-for row note, hero meta line and links,
   notes under a table or ranked list, group label, tables with no rank
   column. Monochrome, square, hairline rules only.                         */

.ds-specs { max-width: var(--w-prose); border-top: var(--border-hair); }
.ds-specs__row {
  display: grid;
  grid-template-columns: minmax(7em, 11em) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-hair);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
}
.ds-specs dt {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.ds-specs dd { color: var(--ink); }

.ds-verdict__pick-note {
  grid-column: 1 / -1;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--ink-2);
}
.ds-verdict__pick-note strong { color: var(--ink); font-weight: var(--weight-semibold); }
@media (min-width: 600px) { .ds-verdict__pick-note { grid-column: 2 / -1; } }

.ds-hero__note { margin-top: var(--space-2); }
.ds-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }

.ds-section__foot { max-width: var(--w-prose); margin-top: var(--space-3); }
.ds-section__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-ranking ~ .ds-note { margin-top: var(--space-6); }
.ds-ranking ~ .ds-section__foot { margin-top: var(--space-5); }
.ds-head .ds-label { margin-bottom: var(--space-3); }
.ds-links .ds-display-s { margin: var(--space-2) 0 var(--space-5); }

@media (max-width: 599.98px) {
  .ds-table--stack.ds-table--norank tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ds-table--stack.ds-table--norank td.ds-table__product { grid-column: 1 / 3; }
  .ds-table--stack.ds-table--norank td.ds-table__score { grid-column: 3; }
  .ds-table--stack.ds-table--norank td.ds-table__price { grid-column: 1; }
  .ds-table--stack.ds-table--norank td.ds-table__where { grid-column: 2 / -1; }
  .ds-table--stack.ds-table--norank td.ds-table__for,
  .ds-table--stack.ds-table--norank td.ds-table__cta,
  .ds-table--stack.ds-table--norank td[data-label]:not([class]) { grid-column: 1 / -1; grid-row: auto; }
}


/* 25  REDUCED MOTION ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}