@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Internet Marketing Grid — design system
   --------------------------------------------------------------------------
   Layer 1  primitives   raw values, never referenced by components
   Layer 2  semantic     what a colour MEANS, referenced by components
   Layer 3  component    per-component tokens where a component needs its own
   Components must only ever reference layer 2 or 3. No raw hex below the
   token blocks.
   ========================================================================== */

/* --- Layer 1: primitives -------------------------------------------------- */
:root {
  /* Neutrals are warm, so long-form review text reads as paper not screen. */
  --n-0:   #ffffff;
  --n-25:  #fbfaf9;
  --n-50:  #f5f4f1;
  --n-100: #eae8e3;
  --n-200: #d9d6cf;
  --n-300: #b9b5ac;
  --n-400: #8e8a81;
  --n-500: #6b675f;
  --n-600: #4e4b45;
  --n-700: #35332e;
  --n-800: #232220;
  --n-900: #16161a;
  --n-950: #0e0e11;

  /* Brand indigo. Descended from the previous purple, minus the gradient. */
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;

  /* Commerce accents. Orange carries buying intent, green carries savings,
     amber carries ratings. Each has exactly one job. */
  --orange-500: #ea580c;
  --orange-600: #c2410c;
  --orange-400: #fb923c;
  --green-600:  #059669;
  --green-500:  #10b981;
  --green-100:  #d1fae5;
  --amber-500:  #f59e0b;
  --amber-400:  #fbbf24;
  --red-600:    #dc2626;
  --red-100:    #fee2e2;

  /* Spacing — 4px base, standard density */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* Type scale — 1.25 major third, clamped for fluid resize */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(22 22 26 / 0.06);
  --shadow:    0 2px 8px rgb(22 22 26 / 0.08);
  --shadow-lg: 0 12px 32px rgb(22 22 26 / 0.12);

  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1200px;
  --measure: 68ch; /* long-form line length cap */
  --header-h: 64px;
}

/* --- Layer 2: semantic (light) -------------------------------------------- */
:root {
  --color-bg:            var(--n-25);
  --color-surface:       var(--n-0);
  --color-surface-sunk:  var(--n-50);
  --color-border:        var(--n-100);
  --color-border-strong: var(--n-200);

  --color-text:          var(--n-900);
  --color-text-muted:    var(--n-500);
  --color-text-subtle:   var(--n-400);
  --color-text-inverse:  var(--n-0);

  --color-brand:         var(--brand-700);
  --color-brand-hover:   var(--brand-800);
  --color-on-brand:      var(--n-0);

  --color-cta:           var(--orange-500);
  --color-cta-hover:     var(--orange-600);
  --color-on-cta:        var(--n-0);

  --color-rating:        var(--amber-500);
  --color-rating-track:  var(--n-200);
  --color-positive:      var(--green-600);
  --color-positive-bg:   var(--green-100);
  --color-negative:      var(--red-600);
  --color-negative-bg:   var(--red-100);

  --color-focus:         var(--brand-600);
  color-scheme: light;
}

/* --- Layer 2: semantic (dark) --------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg:            var(--n-950);
    --color-surface:       var(--n-900);
    --color-surface-sunk:  var(--n-800);
    --color-border:        var(--n-800);
    --color-border-strong: var(--n-700);

    --color-text:          var(--n-50);
    --color-text-muted:    var(--n-300);
    --color-text-subtle:   var(--n-400);
    --color-text-inverse:  var(--n-900);

    --color-brand:         var(--brand-400);
    --color-brand-hover:   var(--brand-500);
    --color-on-brand:      var(--n-950);

    --color-cta:           var(--orange-500);
    --color-cta-hover:     var(--orange-400);
    --color-on-cta:        var(--n-950);

    --color-rating:        var(--amber-400);
    --color-rating-track:  var(--n-700);
    --color-positive:      var(--green-500);
    --color-positive-bg:   #052e21;
    --color-negative-bg:   #3f1416;

    --color-focus:         var(--brand-400);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-bg:            var(--n-950);
  --color-surface:       var(--n-900);
  --color-surface-sunk:  var(--n-800);
  --color-border:        var(--n-800);
  --color-border-strong: var(--n-700);
  --color-text:          var(--n-50);
  --color-text-muted:    var(--n-300);
  --color-text-subtle:   var(--n-400);
  --color-text-inverse:  var(--n-900);
  --color-brand:         var(--brand-400);
  --color-brand-hover:   var(--brand-500);
  --color-on-brand:      var(--n-950);
  --color-cta-hover:     var(--orange-400);
  --color-on-cta:        var(--n-950);
  --color-rating:        var(--amber-400);
  --color-rating-track:  var(--n-700);
  --color-positive:      var(--green-500);
  --color-positive-bg:   #052e21;
  --color-negative-bg:   #3f1416;
  --color-focus:         var(--brand-400);
  color-scheme: dark;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Icons scale to their surrounding text by default. Every component that needs
   a different size sets it explicitly. Without this an inline icon inherits the
   block width of its parent and fills the page. */
.icon { width: 1.15em; height: 1.15em; flex: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { text-wrap: pretty; }

a { color: var(--color-brand); text-underline-offset: 3px; }
a:hover { color: var(--color-brand-hover); }

/* Focus is never removed. Only ever restyled. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-brand); color: var(--color-on-brand); }

/* --- Utilities ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.prose { max-width: var(--measure); }
.prose p + p, .prose ul, .prose ol { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2);
  transform: translateY(-200%);
  background: var(--color-brand); color: var(--color-on-brand);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  z-index: 200; font-weight: 600;
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section__head { margin-bottom: var(--space-6); }
.section__title { font-size: var(--text-2xl); }
.section__lede { color: var(--color-text-muted); margin-top: var(--space-2); max-width: 60ch; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Disclosure bar ------------------------------------------------------- */
/* Sits above the header, not inside it, so it is read first by everyone. */
.disclosure-bar {
  background: var(--color-surface-sunk);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding-block: var(--space-2);
}
.disclosure-bar p { display: flex; gap: var(--space-2); align-items: center; justify-content: center; text-align: center; }
.disclosure-bar a { color: var(--color-text); font-weight: 600; white-space: nowrap; }

/* On a phone this bar competes with the product for the first screen. It stays
   present and readable, as the FTC requires, but it stays one line. The full
   statement is one tap away and repeated in the footer. */
@media (max-width: 620px) {
  .disclosure-bar { font-size: 11px; }
  .disclosure-bar p { gap: var(--space-1); }
  .disclosure-bar .disclosure-bar__long { display: none; }
}
@media (min-width: 621px) {
  .disclosure-bar .disclosure-bar__short { display: none; }
}

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-3);
}
@media (min-width: 861px) { .header__inner { gap: var(--space-5); } }
/* The brand must be allowed to shrink. Locking it at its natural width pushed
   the menu button off the right edge of a 375px screen. min-width:0 lets the
   wordmark truncate while the mark stays whole, so identity survives. */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; min-width: 0; text-decoration: none; color: var(--color-text); }
.brand__mark { width: 32px; height: 32px; color: var(--color-brand); flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--space-5); list-style: none; padding: 0; align-items: center; }
.nav__link {
  display: inline-block; padding-block: var(--space-2);
  color: var(--color-text); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--color-brand); border-bottom-color: var(--color-border-strong); }
.nav__link[aria-current='page'] { color: var(--color-brand); border-bottom-color: var(--color-brand); }

.header__tools { display: flex; align-items: center; gap: var(--space-1); flex: none; margin-left: auto; }

/* Every icon control clears the 44px touch minimum. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface-sunk); color: var(--color-text); }
.icon-btn svg { width: 20px; height: 20px; }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    margin-left: 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .nav[data-open='true'] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-5) var(--space-5); }
  .nav__link { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-base); }
  .nav__link[aria-current='page'] { border-bottom-color: var(--color-brand); }
  .header__tools { margin-left: auto; }
}

/* --- Hero ----------------------------------------------------------------- */
/* One composition, brand-first, no decorative gradient behind text. */
.hero { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.hero__inner { display: grid; gap: var(--space-6); }
.hero__title { font-size: var(--text-4xl); max-width: 18ch; }
.hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 52ch; margin-top: var(--space-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.hero__meta-item { display: flex; align-items: center; gap: var(--space-2); }
.hero__meta-item svg { width: 16px; height: 16px; color: var(--color-positive); flex-shrink: 0; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-8); }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius); font-weight: 600; font-size: var(--text-sm);
  text-decoration: none; text-align: center;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--cta { background: var(--color-cta); color: var(--color-on-cta); }
.btn--cta:hover { background: var(--color-cta-hover); color: var(--color-on-cta); }

.btn--brand { background: var(--color-brand); color: var(--color-on-brand); }
.btn--brand:hover { background: var(--color-brand-hover); color: var(--color-on-brand); }

.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface); }
.btn--ghost:hover { background: var(--color-surface-sunk); color: var(--color-text); }

.btn--block { width: 100%; }

/* --- Rating --------------------------------------------------------------- */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.rating__stars { display: inline-flex; gap: 1px; }
.rating__stars svg { width: 16px; height: 16px; }
.rating__star--on { color: var(--color-rating); }
.rating__star--off { color: var(--color-rating-track); }
.rating__value { font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rating__label { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Our editorial score. Visually distinct from customer stars so the two
   are never confused, which is the whole point. */
.score {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--font-display); font-weight: 700;
  background: var(--color-surface-sunk); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-1) var(--space-3);
}
.score__value { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.score__max { font-size: var(--text-xs); color: var(--color-text-muted); }

/* --- Badges --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge--editors-choice { background: var(--color-brand); color: var(--color-on-brand); }
.badge--best-value    { background: var(--color-positive-bg); color: var(--color-positive); }
.badge--tier-a { background: var(--color-positive-bg); color: var(--color-positive); }
.badge--tier-b { background: var(--color-surface-sunk); color: var(--color-text-muted); }
.badge--tier-c { background: var(--color-surface-sunk); color: var(--color-text-subtle); }

/* --- Product card --------------------------------------------------------- */
/* 264px is deliberate, not arbitrary. At the 1200px container it is the largest
   minimum that still fits four columns, so a four-card feature row does not
   break into three plus a lone orphan. It falls back to three at 1024 and one
   on a phone. */
.card-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); }

/* On the reviews page each card sits inside a filter wrapper. The wrapper is
   the grid item and stretches to the row height, but the card inside does not
   follow unless told to, leaving cards in a row ending at different depths. */
[data-filter-item] { display: flex; }
[data-filter-item] > .product-card { flex: 1; }
/* Author styles outrank the user agent, so the `display: flex` above silently
   defeats the browser's own `[hidden] { display: none }` and the filter stops
   hiding anything. This restores it at higher specificity. */
[data-filter-item][hidden] { display: none; }

.product-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.product-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow); }
.product-card:focus-within { border-color: var(--color-focus); }

/* The image is positioned out of flow so the box keeps its 4:3 ratio.
   With the image in normal flow, `height: 100%` cannot resolve against a
   parent sized by aspect-ratio, so a tall photograph stretches the box and
   every card in the row ends up a different height. Absolute inset:0 resolves
   against the ratio box instead, which pins every card to the same geometry
   whatever shape the photograph is. */
.product-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-surface-sunk);
  border-bottom: 1px solid var(--color-border);
}
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: var(--space-5);
}
.product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.product-card__cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); }
.product-card__title { font-size: var(--text-lg); line-height: 1.25; }
/* The whole card is clickable, but only the real link is in the tab order. */
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a::after { content: ''; position: absolute; inset: 0; }
.product-card { position: relative; }
.product-card__title a:hover { color: var(--color-brand); }
.product-card__summary { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.product-card__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.product-card__price small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-text-subtle); }
/* Raised above the card-wide overlay link so it stays independently clickable. */
.product-card__cta { position: relative; z-index: 1; }

/* Placeholder shown while a product has no photograph. Designed, not broken. */
/* Quiet by design. It signals "not yet photographed" without competing with
   the product name beside it. align-content keeps the icon and label as one
   group rather than pushing them to opposite ends of a tall box. */
.media-placeholder {
  width: 100%; height: 100%;
  display: grid; align-content: center; justify-items: center; gap: var(--space-2);
  color: var(--color-text-subtle);
  background-color: var(--color-surface-sunk);
}
.media-placeholder svg { width: 26px; height: 26px; opacity: 0.55; }
.media-placeholder span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; opacity: 0.75; }

/* --- Category tiles ------------------------------------------------------- */
.cat-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.cat-tile {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); text-decoration: none; color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cat-tile:hover { border-color: var(--color-brand); background: var(--color-surface-sunk); color: var(--color-text); }
.cat-tile svg { width: 20px; height: 20px; color: var(--color-brand); flex-shrink: 0; }
.cat-tile__name { font-weight: 600; font-size: var(--text-sm); }
.cat-tile__count { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* --- Product page --------------------------------------------------------- */
.review-head { display: grid; gap: var(--space-6); padding-block: var(--space-6); }
.review-head__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }

/* Phone order: name and verdict before the photograph. A reader arriving from
   a short video already knows what the product looks like; what they do not
   know is whether we rate it. Identity first, picture second. */
@media (max-width: 899px) {
  .review-head__media { order: 2; aspect-ratio: 3 / 2; }
  .review-head > div:not(.review-head__media) { order: 1; }
}
@media (min-width: 900px) { .review-head { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-8); padding-block: var(--space-7); } }
.review-head__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); }
.review-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.review-head__title { font-size: var(--text-3xl); }
.review-head__verdict { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-4); }

.buybox {
  margin-top: var(--space-5); padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.buybox__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.buybox__amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.buybox__asof { font-size: var(--text-xs); color: var(--color-text-subtle); }
.buybox__note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: flex-start; }
.buybox__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.buybox .btn { margin-top: var(--space-4); }

/* Pros and cons sit side by side so the trade-off is a single glance. */
.verdict-grid { display: grid; gap: var(--space-5); margin-block: var(--space-6); }
@media (min-width: 720px) { .verdict-grid { grid-template-columns: 1fr 1fr; } }
.verdict-col { padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.verdict-col__head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.verdict-col__head svg { width: 18px; height: 18px; }
.verdict-col--pro .verdict-col__head { color: var(--color-positive); }
.verdict-col--con .verdict-col__head { color: var(--color-negative); }
.verdict-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.verdict-col li { display: flex; gap: var(--space-3); font-size: var(--text-sm); }
.verdict-col li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; background: currentColor; }
.verdict-col--pro li::before { background: var(--color-positive); }
.verdict-col--con li::before { background: var(--color-negative); }

/* How we reached the verdict. States the basis instead of implying testing. */
.basis {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--color-surface-sunk); border: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.basis svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--color-text-subtle); }
.basis strong { color: var(--color-text); }

/* --- Score breakdown ------------------------------------------------------ */
.score-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.score-table caption { text-align: left; color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.score-table th, .score-table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; }
.score-table th { font-weight: 600; }
.score-table td:last-child, .score-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.score-bar { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-sunk); overflow: hidden; margin-top: var(--space-1); }
.score-bar span { display: block; height: 100%; background: var(--color-brand); border-radius: inherit; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Guides --------------------------------------------------------------- */
.guide-list { display: grid; gap: var(--space-4); }
.guide-card {
  position: relative;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.guide-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow); }
.guide-card:focus-within { border-color: var(--color-focus); }
.guide-card__title { font-size: var(--text-xl); margin-block: var(--space-2); }
.guide-card__title a { color: inherit; text-decoration: none; }
.guide-card__title a::after { content: ''; position: absolute; inset: 0; }
.guide-card__title a:hover { color: var(--color-brand); }
.guide-card__lede { color: var(--color-text-muted); max-width: 68ch; }
.guide-card__more { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-brand); font-weight: 600; font-size: var(--text-sm); }

/* Comparison table. The reason the guide page type exists: it puts the
   trade-off in one glance instead of across three browser tabs.
   That glance needs width. Below 720px a five-column table degrades into one
   visible column of floating badges and a horizontal scrollbar, which is worse
   than no table, so the table is withheld and the pick blocks below carry the
   same information in a shape that fits a phone. An intentional layout change
   per viewport, not the same layout squeezed. */
.compare-wrap { display: none; }
@media (min-width: 720px) { .compare-wrap { display: block; } }
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 620px; }
.compare th, .compare td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.compare thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); border-bottom-color: var(--color-border-strong); }
.compare tbody th { font-weight: 600; }
.compare tbody th a { color: inherit; text-decoration: none; }
.compare tbody th a:hover { color: var(--color-brand); text-decoration: underline; }
.compare tbody tr:hover { background: var(--color-surface-sunk); }
.compare__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare__price small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-text-subtle); }

.pick { display: grid; gap: var(--space-5); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.pick:last-of-type { border-bottom: 0; }
.pick__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.pick__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.pick__body { display: grid; gap: var(--space-3); align-content: start; }
.pick__title { font-size: var(--text-2xl); }
.pick__title a { color: inherit; text-decoration: none; }
.pick__title a:hover { color: var(--color-brand); }
.pick__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (min-width: 720px) { .pick { grid-template-columns: 300px 1fr; gap: var(--space-6); } }

/* --- Sticky mobile buy bar ------------------------------------------------ */
/* Thumb-reachable, only on the review page, only on small screens. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
}
.buybar__info { min-width: 0; }
.buybar__name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.buybar .btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 860px) { .buybar { display: flex; } body.has-buybar { padding-bottom: 76px; } }

/* --- Empty state ---------------------------------------------------------- */
.empty {
  display: grid; place-items: center; gap: var(--space-4);
  text-align: center; padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty svg { width: 40px; height: 40px; color: var(--color-text-subtle); }
.empty__title { font-family: var(--font-display); font-size: var(--text-xl); }
.empty__body { color: var(--color-text-muted); max-width: 44ch; }

/* --- Forms ---------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__control {
  width: 100%; min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.field__control:hover { border-color: var(--color-text-subtle); }
textarea.field__control { min-height: 140px; resize: vertical; }
.field__error { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-negative); }
.field__error svg { width: 14px; height: 14px; flex-shrink: 0; }
.field[data-invalid='true'] .field__control { border-color: var(--color-negative); }

.form-status { padding: var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); display: flex; gap: var(--space-3); align-items: flex-start; }
.form-status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.form-status--ok { background: var(--color-positive-bg); color: var(--color-positive); }
.form-status--error { background: var(--color-negative-bg); color: var(--color-negative); }

.newsletter { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
/* Capped rather than full-bleed. An email field stretched across 950px reads as
   a mistake and gives the eye no target. */
.newsletter__form { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: 520px; }
@media (min-width: 620px) { .newsletter__form { grid-template-columns: 1fr auto; align-items: start; } }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding-block: var(--space-7) var(--space-5); margin-top: var(--space-9); }
.footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer__title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3); }
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer__list a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.footer__list a:hover { color: var(--color-brand); text-decoration: underline; }
.footer__bottom { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.footer__legal { max-width: 80ch; }

.social { display: flex; gap: var(--space-2); }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.social a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.social svg { width: 18px; height: 18px; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { padding-block: var(--space-4); font-size: var(--text-sm); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.crumbs li + li::before { content: '/'; color: var(--color-text-subtle); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-brand); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--color-text); }

/* --- Reveal on scroll ----------------------------------------------------- */
/* Progressive enhancement: the class is added by JS only when the observer
   exists, so content is never hidden by default. */
.js-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.js-reveal[data-revealed='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .header, .footer, .buybar, .disclosure-bar, .newsletter { display: none; }
  body { background: #fff; color: #000; }
}