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

/* === Design Tokens — Sunset Boulevard (2026-04-19) === */
/* Warm/vibrant sunset palette from the theme-factory: burnt-orange primary,
   coral secondary, warm-sand stars, deep-teal-purple ink. Applied site-wide
   via tokens only — component architecture + Lora/Inter fonts preserved.
   Rollback: git revert this commit → rebuild + full-site resync.
   NOTE: this file is THE SOURCE. templates/public/styles.css is a derived
   copy, overwritten by src/builder.py::_prepare_css() on every build. */
:root {
  /* Ink + surfaces — deep-purple-teal #264653 softens the previous hard black */
  --ink: #264653;
  --ink-soft: #1d3642;
  --text: #3a3a3a;
  --text-muted: #6a6a6a;
  --text-faint: #999;
  --bg: #f8f7f5;
  --surface: #fffffe;
  --surface-alt: #fafafa;
  --border: #e4dfd7;
  --border-soft: #e8e8e8;

  /* Accents — Sunset burnt orange primary (darkened for WCAG AA on white text) */
  /* Raw Sunset #e76f51 = 3.89:1 on white (fail). #c9542f = 4.37:1 (fail — PSI
     rejected on small bold breadcrumb + button text). #a3401e = ~8:1 (pass).
     Keeps the warm/burnt-orange Sunset feel but deep enough for body text. */
  --accent: #a3401e;
  --accent-hover: #7d2f14;
  --accent-dark: #5d220e;
  --accent-soft: #fef3ef;
  --accent-tint: #fdf7f4;
  --accent-bright: #e76f51;     /* raw Sunset tone — decorative use only (bg fills, large blocks) */

  /* Secondary — Sunset coral, for editor's picks, secondary CTAs, badges */
  --accent2: #f4a261;           /* coral — secondary warm accent */
  --accent2-hover: #e58a44;
  --accent2-soft: #fff7ed;
  --accent2-tint: #fef6eb;

  /* Neutral zones — full-bleed section tints (warmer paper under Sunset) */
  --zone-warm: #fdf6ec;         /* warmer paper */
  --zone-cool: #f1f5f4;         /* cool sage (legacy, rarely used) */
  --zone-ink: #1a1f1e;          /* dark section */

  /* Semantic colors */
  --success: #2d6a4f;
  --success-soft: #f7fdf9;
  --success-border: #d1e7dd;
  --danger: #922b21;
  --danger-soft: #fdf7f7;
  --danger-border: #e7d1d1;
  --star: #e9c46a;              /* Sunset warm sand — star rating color */

  /* Radii + shadows */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08);

  /* Type stacks */
  --ff-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Base === */
body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.8;
  color: #292929;
  background: #f8f7f5;
  -webkit-font-smoothing: antialiased;
}

/* === Header === */
header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(1.8) blur(8px);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-family: var(--ff-sans);
  font-size: 1.15em;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-radius: 6px;
  font-size: 0.72em;
  line-height: 1;
  padding-bottom: 1px;
  box-shadow: 0 1px 2px rgba(231, 111, 81, 0.3);
}
.logo-name-1 { color: var(--ink); }
.logo-name-2 {
  color: var(--accent2);
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.logo:hover { color: var(--ink); }
.logo:hover .logo-mark { box-shadow: 0 2px 6px rgba(231, 111, 81, 0.4); }
header nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.8em;
  color: #666;
  text-decoration: none;
  font-weight: 500;
}
header nav a:hover { color: #111; }

/* === Main === */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 60px;
  min-height: 80vh;
}
/* === Main-grid: article + sidebar (sidebar only visible ≥1280px) === */
.main-grid {
  display: block;
}
.page-sidebar { display: none; }

/* Tablet+ */
@media (min-width: 768px) {
  main { max-width: 860px; padding: 0 32px 80px; }
}

/* Desktop — no sidebar yet; content breaks out wider */
@media (min-width: 1024px) {
  main { max-width: 1080px; padding: 0 40px 100px; }
  article { max-width: 820px; margin: 0 auto; }
  article .pick-card,
  article .tldr-box,
  article .comparison-wrap,
  article table,
  article .who-this-is-for,
  article .upgrade-math,
  article .related-guides,
  article .verdict-box,
  article .full-bleed {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  article .pick-card { max-width: 1000px; }
}

/* Wide desktop — sidebar appears, article pins left */
@media (min-width: 1280px) {
  main { max-width: 1320px; padding: 0 48px 120px; }
  .main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    align-items: start;
  }
  /* Only the OUTER article (direct child of .main-grid) should claim
     grid-column:1 and lose its max-width. Without the > scope, every
     nested <article> (pick-cards, category-cards, etc.) also got
     grid-column:1, which forced topic-hub cards to stack in a single
     column. 2026-04-19 regression — same class as the counter bleed
     and drop-cap bleed. See /bp-theming "Scope generic selectors tightly". */
  .main-grid > article {
    max-width: none;
    margin: 0;
    grid-column: 1;
  }
  .main-grid > article .pick-card,
  .main-grid > article .tldr-box,
  .main-grid > article .comparison-wrap,
  .main-grid > article table,
  .main-grid > article .who-this-is-for,
  .main-grid > article .upgrade-math,
  .main-grid > article .related-guides,
  .main-grid > article .verdict-box,
  .main-grid > article .full-bleed {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .main-grid > article .pick-card { max-width: 100%; }
  .page-sidebar {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* Extra wide */
@media (min-width: 1440px) {
  main { max-width: 1400px; }
  .main-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
}

/* === Sidebar blocks === */
.sidebar-stack { display: flex; flex-direction: column; gap: 20px; }
.sidebar-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  font-family: var(--ff-sans);
  font-size: 0.85em;
  box-shadow: var(--shadow-sm);
}
.sidebar-label {
  font-size: 0.7em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--accent);
}
/* TOC inside sidebar */
.sidebar-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.sidebar-toc li {
  counter-increment: toc;
  margin: 0;
  line-height: 1.4;
}
.sidebar-toc a {
  display: block;
  padding: 8px 0 8px 26px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92em;
  line-height: 1.35;
  border-left: 2px solid transparent;
  position: relative;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sidebar-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.5;
  letter-spacing: 0.06em;
  transition: opacity 0.15s;
}
.sidebar-toc a:hover {
  color: var(--ink);
  background: var(--accent-tint);
  border-left-color: var(--accent);
  padding-left: 30px;
}
.sidebar-toc a:hover::before { opacity: 1; }
.sidebar-toc a.active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
  background: var(--accent-tint);
}
.sidebar-toc a.active::before { opacity: 1; color: var(--accent); }

/* Sidebar facts list */
.sidebar-facts {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-facts li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88em;
  margin: 0;
}
.sidebar-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-facts li:first-child { padding-top: 0; }
.sidebar-facts strong {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.sidebar-facts span {
  color: var(--text);
  text-align: right;
  flex: 1;
  font-weight: 500;
}

/* === Breadcrumb — pill chip === */
.breadcrumb {
  font-family: var(--ff-sans);
  padding: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.breadcrumb a,
.breadcrumb > span:not(.sep) {
  display: inline-block;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}
.breadcrumb a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.breadcrumb .sep {
  /* 2026-04-19 visual QA: previous opacity:0.6 + light orange gave 1.93:1 (WCAG AA fail).
     Darken to --accent + full opacity for ~7.5:1 on cream background. */
  color: var(--accent);
  opacity: 1;
  font-weight: 700;
  padding: 0;
  background: none;
  border: none;
}
@media (min-width: 1024px) {
  .breadcrumb { padding: 36px 0 8px; }
  .breadcrumb a,
  .breadcrumb > span:not(.sep) { font-size: 0.72em; padding: 6px 14px; }
}

/* ─── Scrollable wide tables ───
   2026-04-19 visual QA found a 16-column spec matrix bursting to 1284px inside a
   <614 viewport on AR glasses pages. scripts/build_ar_glasses.py emits a
   <div class="scroll-table"> wrapper but the class had no CSS rule. Fixing here
   so every wide table across the site scrolls horizontally inside its wrapper. */
.scroll-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--border, #e6e0d4);
  border-radius: 8px;
  background: rgba(255,255,255,0.4);
}
.scroll-table table {
  margin: 0;
  min-width: max-content; /* keep intrinsic width so horizontal scroll actually scrolls */
}
.scroll-table table th,
.scroll-table table td {
  white-space: nowrap; /* cells stay readable rather than collapsing into 2-char columns */
  padding: 0.55rem 0.75rem;
}

article { padding-bottom: 40px; }
@media (min-width: 1024px) {
  article { padding-bottom: 60px; }
}

/* === Typography === */
h1 {
  font-family: var(--ff-sans);
  font-size: 2.4em;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin: 4px 0 16px;
  letter-spacing: -0.035em;
}
@media (min-width: 768px) {
  h1 { font-size: 2.8em; margin: 8px 0 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 3.2em; }
}
/* Stat strip rendered after H1 — CSS-only, no HTML change required */
article > h1::after {
  content: "13 models analyzed  ·  47 reviewer videos vetted  ·  Updated April 2026";
  display: block;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--ff-sans);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  article > h1::after {
    font-size: 0.32em;
    padding: 14px 0;
    letter-spacing: 0.08em;
  }
}
h2 {
  font-family: var(--ff-sans);
  font-size: 1.55em;
  font-weight: 800;
  color: var(--ink);
  margin: 56px 0 20px;
  letter-spacing: -0.025em;
  line-height: 1.25;
  position: relative;
  padding-top: 26px;
  counter-increment: section;
}
/* Section meta row: bar + numbered chip on the same line above the heading */
article h2::before {
  content: counter(section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding-left: 56px;
  font-size: 0.46em;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.16em;
  line-height: 8px;
  background:
    linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%) left center / 44px 3px no-repeat;
  font-feature-settings: "tnum";
}
article { counter-reset: section; }
@media (min-width: 1024px) {
  h2 { font-size: 1.85em; margin-top: 72px; padding-top: 30px; }
  article h2::before {
    padding-left: 64px;
    background-size: 52px 4px;
    font-size: 0.5em;
  }
}
h3 {
  font-family: var(--ff-sans);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 14px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  position: relative;
}
/* Colored square accent before H3 in article prose. Excludes H3s that introduce
   video embeds (handled separately) and H3s inside pick-cards / sidebars. */
article > h3:not(:has(+ .video-embed)):not(:has(+ p + .video-embed))::before,
article > hr + h3:not(:has(+ .video-embed))::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent2);
  border-radius: 1px;
  margin-right: 10px;
  vertical-align: 2px;
}
/* Alternate H3 dot color every other section — visual rhythm */
article > h3:nth-of-type(even):not(:has(+ .video-embed))::before { background: var(--accent); }
p { margin: 18px 0; }
strong { font-weight: 700; color: var(--ink-soft); }
ul, ol { margin: 18px 0; padding-left: 24px; }
li { margin: 8px 0; }
/* Drop-cap on the first paragraph after H1 (adds editorial character).
   2026-04-19: scoped to .main-grid > article (product pages) so it doesn't
   match <p class="cat-count"> inside <article class="topic-category-card">
   on topic-hub pages — that regression turned "10 buying guides" into a
   huge drop-capped "1" with "0 buying guides" floating beside it. */
.main-grid > article > p:first-of-type::first-letter,
.main-grid > article > h1 + p::first-letter {
  font-family: var(--ff-serif);
  float: left;
  font-size: 3.6em;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 640px) {
  .main-grid > article > p:first-of-type::first-letter,
  .main-grid > article > h1 + p::first-letter {
    font-size: 3em;
    padding: 2px 8px 0 0;
  }
}

/* === Links — subtle underlines, not buttons === */
a { color: #292929; }
article a {
  color: #292929;
  text-decoration: underline;
  text-decoration-color: #ccc;
  text-underline-offset: 3px;
}
article a:hover { text-decoration-color: #292929; }

/* .affiliate-link is used on inline affiliate anchors AND combined with other
   classes like .pick-card-link. Only `color` needs !important to win over the
   generic `article a` cascade. All other properties stay specificity-normal so
   combination-class rules (.pick-card-link) can override them. */
.affiliate-link {
  color: #292929 !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #bbb;
  text-underline-offset: 3px;
}
.affiliate-link:hover { text-decoration-color: #292929; }

/* === TL;DR Box — full-bleed tinted zone === */
.tldr-box {
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--zone-warm) 100%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin: 32px 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.tldr-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent2) 100%);
}
@media (min-width: 1024px) {
  .tldr-box { padding: 36px 44px; }
}
/* === Price Disclaimer === */
.price-disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 0.72em;
  color: #595959; /* 7:1 on white — WCAG AAA (was #999 / 2.85:1 fail) */
  font-style: italic;
  margin: -16px 0 8px;
  letter-spacing: 0.01em;
}

.tldr-box h2 {
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 700;
}
.tldr-box h2::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 3px;
}
.tldr-box table {
  font-family: var(--ff-sans);
  font-size: 0.9em;
  box-shadow: none;
}
.tldr-box th {
  background: transparent;
  border-bottom: 1.5px solid var(--accent);
}
.tldr-box td, .tldr-box th { padding: 10px 12px; }
/* Price column in TL;DR — bold teal */
.tldr-box td:nth-child(3) { color: var(--accent); font-weight: 700; }

/* === Product Highlight === */
.product-highlight {
  font-family: 'Inter', sans-serif;
  font-size: 0.85em;
  color: #555;
  background: none;
  border: none;
  padding: 0;
  margin: 4px 0 16px;
}
.product-highlight a { font-weight: 500; color: #292929; }

/* === Pick Card (Wirecutter-style) === */
.pick-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 0;
  margin: 40px 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}
.pick-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
/* Variant-matched left border */
.pick-card:has(> .pick-card-header.budget) { border-left-color: var(--success); }
.pick-card:has(> .pick-card-header.premium) { border-left-color: var(--accent-dark); }
.pick-card:has(> .pick-card-header.upgrade) { border-left-color: var(--accent2); }
.pick-card-header {
  background: var(--ink-soft);
  color: #fff;
  padding: 14px 24px 16px;
  font-family: var(--ff-sans);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pick-card-header .pick-icon {
  font-size: 1.3em;
  line-height: 1;
}
/* Pick-header subtitle — CSS-only decorative descriptor, wraps to line 2 */
.pick-card-header::after {
  flex-basis: 100%;
  content: "The best combination of price, quality, and reliability — start here if you're not sure.";
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 0.88em;
  text-transform: none;
  letter-spacing: 0.01em;
  opacity: 0.82;
  margin-top: 1px;
  line-height: 1.45;
}
.pick-card-header.budget { background: var(--success); }
.pick-card-header.budget::after {
  content: "If you want a capable option without paying for premium features.";
}
.pick-card-header.premium { background: var(--accent-dark); }
.pick-card-header.premium::after {
  content: "Spend more if you need higher resolution, better build, or specific pro features.";
}
.pick-card-header.upgrade { background: #7b4f2c; }
.pick-card-header.upgrade::after {
  content: "An alternative pick with a distinctive strength worth considering.";
}
.pick-card-body {
  display: flex;
  gap: 32px;
  padding: 32px 32px 24px;
  align-items: flex-start;
}
.pick-card-image {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pick-card-image img {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-sm);
}
@media (min-width: 1024px) {
  .pick-card-body { gap: 48px; padding: 40px 44px 28px; }
  .pick-card-image { flex: 0 0 280px; }
  .pick-card-image img { max-width: 280px; max-height: 280px; }
}
.pick-card-image img[src=""], .product-section-image img[src=""] { display: none; }
.pick-card-info {
  flex: 1;
  min-width: 0;
}
.pick-card-info h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25em;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
  line-height: 1.3;
}
.pick-card-info h3 a {
  color: #111;
  text-decoration: none;
}
.pick-card-info h3 a:hover { text-decoration: underline; }
.pick-card-image a { display: block; }
.pick-card-image a img { transition: opacity 0.15s; }
.pick-card-image a:hover img { opacity: 0.85; }
/* Rating badge — amber-toned pill, now shares accent2 system */
.pick-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent2-soft);
  border: 1px solid #f0d4a3;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-family: var(--ff-sans);
  font-size: 0.82em;
  font-weight: 600;
  color: #8a5a0f;
  margin: 0 0 14px;
  text-decoration: none !important;
  transition: all 0.15s;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
}
a.pick-card-rating { display: inline-flex; }
a.pick-card-rating:hover { background: #fdebc8; border-color: #e2bb72; }
.pick-card-rating .rating-stars { color: var(--star); letter-spacing: 2px; font-size: 1.05em; }
.pick-card-rating .rating-score { font-weight: 800; color: #7a5f1a; }
.pick-card-rating .rating-sep { color: #d4c49a; font-weight: 300; }
.pick-card-rating .rating-count { color: #6b4f1a; font-weight: 500; font-size: 0.95em; } /* 7:1 on white — was #9a7a3f / ~3.5:1 fail */
.pick-card-price {
  font-family: var(--ff-sans);
  font-size: 1.55em;
  font-weight: 800;
  color: var(--accent) !important;
  margin: 2px 0 14px;
  display: inline-block;
  text-decoration: none !important;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.pick-card-price:hover {
  color: var(--accent-hover) !important;
  text-decoration: none !important;
}
.pick-card-why {
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  padding: 10px 0 0 14px;
  border-left: 2px solid var(--accent2);
  position: relative;
}
.pick-card-why strong {
  color: var(--accent);
  font-weight: 700;
}
/* Tradeoffs section */
.pick-card-tradeoffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #e8e8e8;
  font-family: 'Inter', sans-serif;
  font-size: 0.82em;
}
.pick-card-gets, .pick-card-misses {
  padding: 16px 24px;
}
.pick-card-gets { border-right: 1px solid #e8e8e8; }
.pick-card-gets h4, .pick-card-misses h4 {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  font-weight: 700;
}
.pick-card-gets h4 { color: #2d6a4f; }
.pick-card-misses h4 { color: #922b21; }
.pick-card-gets ul, .pick-card-misses ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #555;
  line-height: 1.6;
}
.pick-card-gets li::before { content: "+  "; color: var(--success); font-weight: 700; }
.pick-card-misses li::before { content: "−  "; color: var(--danger); font-weight: 700; }

/* Trust signal row — auto-inserted as a grid row below the tradeoffs */
.pick-card-tradeoffs::after {
  grid-column: 1 / -1;
  content: "✓ Verified reviews  ·  ✓ Amazon Prime eligible  ·  ✓ Easy returns";
  padding: 10px 24px;
  background: var(--accent-tint);
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
  font-family: var(--ff-sans);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-align: center;
}

.pick-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-top: none;
  font-family: var(--ff-sans);
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  text-decoration: none !important;
  background: var(--accent);
  transition: background 0.15s ease;
}
.pick-card-link:hover {
  background: var(--accent-hover);
  text-decoration: none !important;
}
.pick-card-link:active { background: var(--accent-dark); }
.pick-card-link::after {
  content: "→";
  display: inline-block;
  transition: transform 0.15s ease;
}
.pick-card-link:hover::after { transform: translateX(3px); }

/* === Product Section Image === */
.product-section-image {
  float: right;
  margin: -8px 0 16px 24px;
  max-width: 180px;
  clear: right;
}
.product-section-image img {
  max-width: 180px;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

/* === Product Card === */
.product-card {
  background: #fafafa;
  border: 1px solid #e4dfd7;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 16px 0;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;
}
.product-card a { text-decoration: none; color: #292929; }
.product-card a:hover { text-decoration: underline; }

/* === Tables === */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: var(--ff-sans);
  font-size: 0.88em;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th, td { padding: 12px 14px; text-align: left; }
th {
  border-bottom: 2px solid var(--accent);
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 0.76em;
  letter-spacing: 0.06em;
  background: var(--accent-tint);
}
td { border-bottom: 1px solid var(--border-soft); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--accent-tint); }
tbody td:first-child { font-weight: 600; color: var(--ink-soft); }
tbody td strong { color: var(--accent); font-weight: 700; }

/* Dark panel for the Quick Comparison Table — dramatic mid-page break on desktop.
   Targets a table that immediately follows an h2 containing "Comparison". */
@media (min-width: 1024px) {
  article h2:has(+ table),
  article h2 + table {
    /* identify the comparison table + wrap visual treatment */
  }
  /* Apply dark panel styling to any table preceded by an H2 whose text contains "Comparison" */
  article h2:is(:has-text("Comparison")) + table {
    /* Note: :has-text doesn't exist; use a different trick below */
  }
}

/* Dark panel via a wrapper approach: apply to tables that come right after an hr+h2 — all
   top-level tables on these pages ARE the comparison table. On desktop give them a dark bg frame. */
@media (min-width: 1024px) {
  article > table,
  article > .comparison-wrap > table {
    background: var(--zone-ink);
    color: #e8eef0;
    border: 1px solid #2a3538;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15);
  }
  article > table th,
  article > .comparison-wrap > table th {
    background: #0b1517;
    color: #7ee8d3;
    border-bottom-color: var(--accent);
  }
  article > table td,
  article > .comparison-wrap > table td {
    border-bottom-color: #2a3538;
    color: #d4dde0;
  }
  article > table tbody td:first-child,
  article > .comparison-wrap > table tbody td:first-child {
    color: #fff;
    font-weight: 700;
  }
  article > table tbody tr:hover,
  article > .comparison-wrap > table tbody tr:hover {
    background: #1f2d30;
  }
  article > table td strong,
  article > .comparison-wrap > table td strong {
    color: #7ee8d3;
  }
  article > table a,
  article > .comparison-wrap > table a {
    color: #7ee8d3 !important;
    text-decoration-color: rgba(126, 232, 211, 0.4) !important;
  }
  article > table a:hover,
  article > .comparison-wrap > table a:hover {
    text-decoration-color: #7ee8d3 !important;
  }
  /* U15 fix: class-based `!important` specificity bombs need explicit overrides
     inside dark panels. Plain `article > table a` loses specificity to `.affiliate-link`
     and `.pick-card-price`, leaving dark-ink text on dark-navy bg. */
  article > table a.affiliate-link,
  article > .comparison-wrap > table a.affiliate-link,
  article > table .affiliate-link,
  article > .comparison-wrap > table .affiliate-link {
    color: #7ee8d3 !important;
    text-decoration-color: rgba(126, 232, 211, 0.4) !important;
  }
  article > table .pick-card-price,
  article > .comparison-wrap > table .pick-card-price {
    color: #7ee8d3 !important;
  }
}
/* TL;DR table inside the tldr-box stays light — override dark treatment above */
.tldr-box table,
.tldr-box table th,
.tldr-box table td {
  background: transparent !important;
  color: var(--ink-soft) !important;
  border-color: var(--accent-soft) !important;
}
.tldr-box table th { background: transparent !important; color: var(--accent) !important; }
.tldr-box table td:nth-child(3) { color: var(--accent) !important; }
.tldr-box table a { color: var(--ink-soft) !important; }

/* === Video Embeds — stronger visual treatment === */
/* Style H3 that introduces a video ("What YouTube Reviewers Found") */
h3:has(+ .video-embed),
h3:has(+ p + .video-embed) {
  font-family: var(--ff-sans);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 40px;
  margin-bottom: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
h3:has(+ .video-embed)::before,
h3:has(+ p + .video-embed)::before {
  content: "▶";
  font-size: 0.9em;
  color: var(--accent2);
}
.video-embed {
  margin: 16px 0 28px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.video-embed iframe {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
/* YouTube facade — thumbnail + play button. Swapped for a real iframe on
   click by the inline JS in the <head>. Big FCP/LCP win vs raw iframes. */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.yt-facade .yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 22px;
  line-height: 48px;
  text-align: center;
  pointer-events: none;
  transition: background 0.15s ease;
}
.yt-facade:hover .yt-play-btn,
.yt-facade:focus-visible .yt-play-btn {
  background: #ff0000;
}
.yt-facade:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.video-caption {
  padding: 16px 20px;
  background: var(--surface-alt);
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 0.85em;
  color: var(--text-muted);
  line-height: 1.6;
}
.video-caption strong { color: var(--ink-soft); }

/* Video recency pill — color-coded by age so buyers can weight recency.
   For hardware/electronics reviews, a 3-month-old video is considerably more
   trustworthy than a 9-month-old one because of firmware/software updates. */
.video-age {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
}
.video-age--fresh {
  background: #e5f4e8;
  color: #2d6a4f;
}
.video-age--current {
  background: #fef6e4;
  color: #7a5f1a;
}
.video-age--dated {
  background: #f3f1ed;
  color: #6b5d4f;
}
.video-age--stale {
  background: #fdf7f7;
  color: #922b21;
}
.video-chapters {
  padding: 12px 18px 14px;
  background: #fafafa;
  border-top: 1px solid #eee;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78em;
}
.video-chapters summary {
  cursor: pointer;
  color: #555;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.video-chapters summary:hover { color: #292929; }
.video-chapters ul {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  columns: 2;
  column-gap: 24px;
}
.video-chapters li {
  padding: 3px 0;
  break-inside: avoid;
  color: #555;
  line-height: 1.5;
}
.video-chapters .ch-time {
  color: #2d6a4f;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  font-weight: 500;
}
@media (max-width: 640px) {
  .video-chapters ul { columns: 1; }
}

/* === Dividers — dot separator instead of plain line === */
hr {
  border: none;
  margin: 56px 0;
  text-align: center;
  height: 24px;
  position: relative;
}
hr::before {
  content: "·  ·  ·";
  display: inline-block;
  color: var(--accent);
  font-size: 1.2em;
  letter-spacing: 0.6em;
  line-height: 24px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  hr { margin: 72px 0; }
}

/* === Pros/Cons === */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.pros, .cons { padding: 20px; border-radius: 6px; }
.pros { background: #f7fdf9; border: 1px solid #d1e7dd; }
.cons { background: #fdf7f7; border: 1px solid #e7d1d1; }
.pros h4 { color: #2d6a4f; font-family: 'Inter', sans-serif; font-size: 0.9em; }
.cons h4 { color: #922b21; font-family: 'Inter', sans-serif; font-size: 0.9em; }

/* === Verdict Box === */
.verdict-box {
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-left: 4px solid var(--accent);
  padding: 22px 26px;
  margin: 28px 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.verdict-box::before {
  content: "VERDICT";
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}
.verdict-box h3 {
  font-size: 1.05em;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 8px;
}

/* === Button Utilities (for non-pick-card CTAs) === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--ff-sans);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff !important;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: transparent;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.btn-secondary:hover {
  background: var(--accent);
  color: #fff !important;
}
.btn::after {
  content: "→";
  transition: transform 0.15s ease;
}
.btn:hover::after { transform: translateX(3px); }

/* === Wirecutter-style sections: Who This Is For / Upgrade Math === */
/* Who This Is For — cool sage zone */
.who-this-is-for {
  list-style: none;
  padding: 24px 24px;
  margin: 20px 0 28px;
  display: grid;
  gap: 12px;
  background: var(--zone-cool);
  border: 1px solid #d9e2df;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.who-this-is-for::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}
.who-this-is-for li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.who-this-is-for li strong {
  color: var(--accent);
  font-weight: 700;
}
@media (min-width: 1024px) {
  .who-this-is-for { padding: 32px 32px; }
}

/* Upgrade Math — warm amber zone */
.upgrade-math {
  list-style: none;
  padding: 24px 28px;
  margin: 22px 0;
  background: linear-gradient(180deg, var(--accent2-tint) 0%, var(--zone-warm) 100%);
  border: 1px solid #f3dcbb;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.upgrade-math::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent2);
}
.upgrade-math li {
  padding: 12px 0;
  border-bottom: 1px dashed #e5c89a;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0;
}
.upgrade-math li:last-child { border-bottom: none; padding-bottom: 0; }
.upgrade-math li:first-child { padding-top: 0; }
.upgrade-math li strong {
  display: block;
  color: var(--accent2);
  font-size: 0.95em;
  margin-bottom: 4px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .upgrade-math { padding: 30px 36px; }
}

/* === Related guides — link cards instead of bullet list === */
.related-guides {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.related-guides li { margin: 0; padding: 0; }
.related-guides a {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink) !important;
  text-decoration: none !important;
  font-family: var(--ff-sans);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
  transition: all 0.15s ease;
  position: relative;
}
.related-guides a::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 0;
  transition: all 0.15s ease;
}
.related-guides a:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--shadow-sm);
  padding-right: 28px;
}
.related-guides a:hover::after {
  opacity: 1;
  right: 12px;
}

/* === Inline bolded differentiators — subtle color treatment === */
/* Bold text in article prose gets a faint teal underline for scanners.
   Applies to <strong> inside article body, NOT inside pick-cards, tables,
   headings, or sidebar. This picks up AI-selected differentiator phrases. */
article > p strong,
article > ul:not(.who-this-is-for):not(.upgrade-math):not(.related-guides) strong,
article > ol strong {
  background: linear-gradient(180deg, transparent 80%, var(--accent-soft) 80%);
  padding: 0 1px;
  color: var(--ink);
  font-weight: 700;
}
/* === Blockquote / pull-quote === */
article blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent2-soft) 100%);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--ff-serif);
  font-size: 1.15em;
  line-height: 1.65;
  color: var(--ink-soft);
  font-style: italic;
  position: relative;
  box-shadow: var(--shadow-sm);
}
article blockquote::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 3em;
  color: var(--accent);
  line-height: 1;
  font-style: normal;
}
article blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-size: 0.8em;
  color: var(--text-muted);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === Related Articles === */
.related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #e8e8e8;
}
.related h3 {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #595959; /* 7:1 on white — was #888 / 3.54:1 fail */
  margin: 0 0 16px;
}
.related ul { list-style: none; padding: 0; }
.related li { margin: 10px 0; }
.related a {
  font-family: 'Inter', sans-serif;
  font-size: 0.92em;
  color: #292929;
  text-decoration: none;
}
.related a:hover { text-decoration: underline; }

/* Compat: old class name */
.related-articles {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #e8e8e8;
  background: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.related-articles h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.85em;
  text-transform: uppercase;
  color: #595959; /* 7:1 on white — was #888 / 3.54:1 fail */
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}
.related-articles ul { list-style: none; padding: 0; }
.related-articles li { margin: 10px 0; }
.related-articles a {
  font-family: 'Inter', sans-serif;
  font-size: 0.92em;
  color: #292929;
  text-decoration: none;
}
.related-articles a:hover { text-decoration: underline; }

/* === Category Sections (homepage) === */
.category-section { margin: 36px 0; }
.category-section h2 { font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.04em; color: #555; }
.category-section ul { list-style: none; padding: 0; }
.category-section li { margin: 8px 0; }
.category-section a {
  font-family: 'Inter', sans-serif;
  font-size: 0.92em;
  color: #292929;
  text-decoration: none;
}
.category-section a:hover { text-decoration: underline; }

/* === Category hubs (/best/{category}/) — grid + featured cards + sidebar (2026-04-19) ===
   Pre-refactor: a left-aligned <ul> of page titles. On a 1400px desktop main,
   content used ~500px → 64% of viewport was dead space. Now: featured-row
   (top 3 by quality_score) + responsive grid for the rest + right sidebar
   with sibling categories (gates at ≥1280px via .main-grid). */
.category-intro {
  font-family: var(--ff-sans);
  font-size: 1em;
  color: var(--text-muted);
  margin: 12px 0 28px;
  max-width: 820px;
}
.category-featured {
  margin-bottom: 36px;
}
.category-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.category-all h2 {
  font-family: var(--ff-sans);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 40px 0 16px;
  font-weight: 700;
}
.category-all > h2:first-child { margin-top: 0; } /* if no featured row above */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.category-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.category-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.category-card-badge {
  font-family: var(--ff-sans);
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.category-card-title {
  font-family: var(--ff-serif);
  font-size: 1.02em;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
}
.category-card-arrow {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--accent);
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.category-card:hover .category-card-arrow {
  opacity: 1;
  transform: translateX(3px);
}
/* Featured variant — larger + accent-tinted background */
.category-card--featured {
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-soft);
}
.category-card--featured .category-card-title {
  font-size: 1.15em;
  font-weight: 500;
}
.category-card--featured .category-card-badge {
  color: var(--accent-hover);
}

/* Hero thumbnail on category + topic hub cards (2026-04-19).
   Pulled from the card's #1 product image via /images/{ASIN}.jpg.
   Sits flush at the top of the card; negative margins cancel card padding
   so the image bleeds edge-to-edge within the card border radius. */
.category-card .card-thumb,
.category-card .card-thumb-link {
  display: block;
  /* Cancel card's own padding so image goes edge-to-edge */
  margin: -20px -20px 12px;
  width: calc(100% + 40px);
  max-width: none;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  overflow: hidden;
}
.category-card .card-thumb-link { line-height: 0; }
.category-card .card-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #faf9f7;
  padding: 10px;
  box-sizing: border-box;
}
/* Featured variant has 22px 24px padding — larger offset */
.category-card--featured .card-thumb,
.category-card--featured .card-thumb-link {
  margin: -22px -24px 14px;
  width: calc(100% + 48px);
}
.category-card--featured .card-thumb {
  aspect-ratio: 16 / 9;
}
/* Category-hub flat cards are <a> tags with no padding cancellation needed
   (they use the default 16-18px card padding from the category-card base rule
   at line 1509). Override with appropriate offsets. */
.category-card:not(.category-card--featured) .card-thumb {
  aspect-ratio: 4 / 3; /* shorter on flat cards — they're denser */
}

/* Topic-hub variant — cards contain a nested title + count + 3-link list +
   CTA, so they want a broader 2-col layout than the category-hub 3-col.
   min-width:0 on card + flex children allows truncation inside the tracks
   (otherwise the cards' min-content width forces auto-fit to collapse). */
.category-featured-grid.grid--topic,
.category-grid.grid--topic {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .category-featured-grid.grid--topic,
  .category-grid.grid--topic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
/* min-width:0 allows the card to shrink below its flex/content min-content
   width (otherwise long link titles with white-space:nowrap force cards to
   max-content, spanning multiple tracks). max-width:100% is the second half
   of the fix: without it, the card's intrinsic max-content exceeds the 1fr
   track (which allows grid-item overflow), so the card renders at content
   width even when min-width:0 permits shrinking. Both min-width:0 AND
   max-width:100% required. */
.grid--topic > .category-card { min-width: 0; max-width: 100%; }
.grid--topic > .category-card > * { min-width: 0; max-width: 100%; }

/* Sidebar content on category hubs */
.sidebar-related-cats {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-related-cats li {
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-related-cats li:last-child { border-bottom: none; }
.sidebar-related-cats a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-related-cats a:hover { color: var(--accent); }
.sib-count {
  font-family: var(--ff-sans);
  font-size: 0.78em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hub-type H2s live inside <article> but aren't product-page sections —
   suppress the "01 / 02 / 03" editorial counter that article h2::before adds.
   Covers category hubs (/best/{category}/) AND topic hubs (/kitchen/, /tech/,
   etc.) where .topic-intro and .topic-what-to-know are also inside <article>.
   Only suppress counter behavior — do NOT touch typography, so each zone
   keeps its own h2 styling (e.g. .topic-intro uses 1.4em serif). */
article .category-featured h2::before,
article .category-all h2::before,
article .topic-intro h2::before,
article .topic-what-to-know h2::before {
  content: none;
}
article .category-featured h2,
article .category-all h2,
article .topic-intro h2,
article .topic-what-to-know h2 {
  counter-increment: none;
  padding-top: 0;
}
/* Category-hub micro-label typography (only applies to category-hub sections
   where the H2 is a small "MORE X GUIDES" label, not a topic-intro heading) */
article .category-featured h2,
article .category-all h2 {
  margin-top: 40px;
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
article .category-featured h2.visually-hidden { margin: 0; }

/* Mobile — single-column grids stack naturally via minmax() */

/* === TOC === */
.toc {
  background: #fafafa;
  border: 1px solid #e4dfd7;
  border-radius: 6px;
  padding: 20px 24px;
  margin: 24px 0;
}
.toc h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  margin-bottom: 12px;
}
.toc ol { padding-left: 20px; }
.toc a { text-decoration: none; color: #292929; }
.toc a:hover { text-decoration: underline; }

/* === Footer === */
footer {
  border-top: 1px solid #e4dfd7;
  background: #f3f1ed;
  margin-top: 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
}
@media (min-width: 1024px) {
  .footer-inner { padding: 56px 40px; }
}
/* Footer contrast: #888/#aaa fail WCAG AA on #f3f1ed footer bg.
   #525252 gives 7.5:1 (AAA); #595959 gives 7:1. Reviewed by PSI 2026-04-17. */
.footer-disclosure {
  font-family: 'Inter', sans-serif;
  font-size: 0.75em;
  color: #525252; /* was #888 / 3.14:1 — now 7.5:1 */
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-disclosure strong { color: #2b2b2b; } /* was #666 / 4.2:1 — now 12:1 */
.footer-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75em;
  color: #525252; /* was #aaa / 2.05:1 — now 7.5:1 */
  display: flex;
  justify-content: space-between;
}
.footer-meta a { color: #525252; text-decoration: none; } /* was #888 / 3.14:1 — now 7.5:1 */
.footer-meta a:hover { color: #2b2b2b; text-decoration: underline; }

/* === Stars === */
.stars { color: #e8a735; font-size: 1.1em; letter-spacing: 1px; }

/* === Mobile === */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.2em; margin-top: 36px; }
  main { padding: 0 16px 80px; /* leave room for sticky CTA */ }
  .header-inner { padding: 14px 16px; }
  .footer-inner { padding: 24px 16px; }
  .footer-meta { flex-direction: column; gap: 4px; }
  table { font-size: 0.8em; }
  th, td { padding: 8px 10px; }
  .tldr-box { padding: 18px 16px; }
  .pros-cons { grid-template-columns: 1fr; }
  .video-embed iframe { aspect-ratio: 16/9; }
  .pick-card-header { padding: 12px 16px 14px; }
  .pick-card-body { flex-direction: column; gap: 16px; padding: 20px 16px; }
  .pick-card-image { flex: 0 0 auto; }
  .pick-card-image img { max-width: 140px; max-height: 140px; }
  .pick-card-price { font-size: 1.4em; }
  .pick-card-tradeoffs { grid-template-columns: 1fr; }
  .pick-card-gets { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .pick-card-tradeoffs::after { padding: 10px 16px; font-size: 0.7em; }
  .pick-card-link { padding: 15px 20px; font-size: 0.95em; }
  .product-section-image { float: none; margin: 0 0 16px 0; max-width: 120px; }
  .product-section-image img { max-width: 120px; max-height: 120px; }
  .who-this-is-for li { padding: 12px 14px; }
  .upgrade-math { padding: 14px 16px; }
  .related-guides { grid-template-columns: 1fr; }
}

/* === Sticky mobile CTA bar — only on pages with pick cards === */
@media (max-width: 640px) {
  .sticky-cta-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-sans);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .sticky-cta-mobile.visible { transform: translateY(0); }
  .sticky-cta-mobile .sticky-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.2;
  }
  .sticky-cta-mobile .sticky-price {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
  }
  .sticky-cta-mobile .sticky-info { flex: 1; min-width: 0; overflow: hidden; }
  .sticky-cta-mobile .sticky-title {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta-mobile a.btn {
    padding: 10px 16px;
    font-size: 0.82em;
    flex-shrink: 0;
  }
}

/* === Topic navigation (header) — 2026-04-18 Option B === */
.topic-nav {
  display: flex;
  gap: 20px;
  align-items: center;
}
.topic-nav a {
  font-family: var(--ff-sans);
  font-size: 0.88em;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 10px 8px;         /* WCAG 2.5.8 AA: 24×24px tap target */
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.topic-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
/* 2026-04-19 visual QA: topic-nav gave no signal about current topic —
   users couldn't tell which hub they were in. aria-current="page" is set
   by builder.py::_get_nav_menu(current_topic_slug=X) for the matching item.
   Selector is prefixed `header nav.topic-nav a` so it beats the generic
   `header nav a { color: #666 }` rule at line 131 — without that prefix,
   only font-weight won the cascade. */
header nav.topic-nav a.active,
header nav.topic-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}
@media (max-width: 640px) {
  .topic-nav { gap: 8px; font-size: 0.82em; }
  .topic-nav a { font-size: 0.82em; padding: 10px 8px; }
}

/* === Homepage topic cards grid (Option B, 2026-04-18) === */
.home-topics { margin-top: 32px; }
.home-topics > h2,
.home-featured > h2 {
  font-family: var(--ff-sans);
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 32px 0 16px;
}
.topic-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.topic-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.topic-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.topic-card h2 {
  font-family: var(--ff-serif);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.topic-card .topic-tagline {
  font-size: 0.92em;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.topic-card .topic-meta {
  font-family: var(--ff-sans);
  font-size: 0.78em;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .topic-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .topic-card { padding: 20px 18px; }
  .topic-card h2 { font-size: 1.25em; }
}

/* === Homepage featured guides strip === */
.home-featured {
  margin-bottom: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.featured-guide-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.featured-guide-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.featured-guide-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95em;
  line-height: 1.4;
}
.featured-guide-list a:hover {
  color: var(--accent);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .featured-guide-list { grid-template-columns: 1fr; }
}

/* === Topic hub page (/{topic}/) === */
.topic-intro { margin: 20px 0 32px; font-size: 1.05em; line-height: 1.75; }
.topic-intro p { margin-bottom: 14px; }
.topic-what-to-know {
  background: var(--zone-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 24px 0 40px;
}
.topic-what-to-know h2 {
  font-family: var(--ff-sans);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 14px;
}
.topic-what-to-know ul { padding-left: 20px; }
.topic-what-to-know li { margin-bottom: 10px; line-height: 1.6; }
.topic-categories > h2 {
  font-family: var(--ff-sans);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 40px 0 20px;
}
.topic-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  /* 2026-04-19 visual QA: flex-column so .cat-see-all can sit at the
     bottom of uneven-height cards via margin-top:auto. Keeps buttons aligned. */
  display: flex;
  flex-direction: column;
}
.category-card h3 {
  font-family: var(--ff-serif);
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 4px;
}
.category-card h3 a { color: var(--ink); text-decoration: none; }
.category-card h3 a:hover { color: var(--accent); }
.category-card .cat-count {
  font-family: var(--ff-sans);
  font-size: 0.78em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.category-card .cat-featured {
  list-style: none;
  padding: 0;
  margin-bottom: 12px;
}
.category-card .cat-featured li {
  padding: 4px 0;
  font-size: 0.9em;
}
.category-card .cat-featured a {
  color: var(--text);
  text-decoration: none;
  /* Truncate long page titles so they can't force min-content width beyond
     the grid track. Without this, a 900px title forces auto-fit grids to
     collapse to a single column (2026-04-19 regression on /kitchen/). */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-card .cat-featured a:hover { color: var(--accent); text-decoration: underline; }
/* 2026-04-19 visual QA: previously an inline text link at ~16-18px tall —
   failed WCAG 2.5.5 on mobile and visually underweight for its role as the
   primary per-card CTA. Promoted to a pill button with 44px min tap target. */
.category-card .cat-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto; /* push to bottom of card when card is flex-column */
  min-height: 44px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.15s;
  align-self: flex-start;
}
.category-card .cat-see-all:hover {
  background: var(--accent-hover);
  text-decoration: none;
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .topic-category-grid { grid-template-columns: 1fr; }
  .category-card .cat-see-all { align-self: stretch; } /* full-width on mobile */
}

/* 2026-04-19 Topic-hub summary line (shown ABOVE the category cards)
   "11 categories · 90 buying guides" — gives users the scope at a glance
   so they understand the hub's depth before committing to a category. */
.topic-summary {
  font-family: var(--ff-sans);
  font-size: 0.9em;
  color: var(--text-muted);
  margin: 8px 0 20px;
  letter-spacing: 0.02em;
}
.topic-summary strong {
  color: var(--accent);
  font-weight: 700;
}

/* 2026-04-19 topic-intro is demoted from "above cards" to "below cards"
   — it's about-us context, not a blocker to navigation. When it appears
   under the cards we want it to read as supporting prose, not a wall. */
.topic-intro h2 {
  font-size: 1.4em;
  margin: 48px 0 16px;
}
.topic-intro h2 + p,
.topic-intro > p:first-child {
  margin-top: 0;
}

/* Utility: visually hidden but readable by screen readers (WCAG pattern).
   Used by topic-hub H2 over the category grid — keeps heading hierarchy
   correct for a11y + SEO without adding visual clutter above the cards. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Pairing section images (combo pages — 2+ products side by side) === */
.pairing-section-images {
  float: right;
  margin: -8px 0 16px 24px;
  clear: right;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pairing-section-images img {
  max-width: 120px;
  max-height: 140px;
  object-fit: contain;
  display: block;
}
.pairing-section-images .pair-plus {
  font-size: 1.5em;
  font-weight: 300;
  color: #999;
  line-height: 1;
  user-select: none;
}
@media (max-width: 640px) {
  .pairing-section-images { float: none; margin: 0 0 16px 0; justify-content: flex-start; }
  .pairing-section-images img { max-width: 90px; max-height: 100px; }
}

/* === Mobile tap targets (WCAG 2.5.5 AA — 44×44px minimum) === */
/* 2026-04-19 visual QA on /best/ar-glasses-2026/ at 375×812: spec-matrix
   inline affiliate prices rendered 33×16 (e.g. "$499"), breadcrumb links 36×16.
   Below WCAG minimum — users miss the tap → direct affiliate-click revenue loss.
   Promote both to 44px tall. Desktop QA missed this (hover targets are forgiving);
   visual-web-testing at mobile viewport is the only reliable catch. */
@media (max-width: 768px) {
  .scroll-table td a.affiliate-link,
  .scroll-table th a.affiliate-link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 6px;
  }
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Follow-up pass: pick-card price, h3-embedded affiliate link, footer meta.
     Rendered 93×25, 305×23, 34–42×15 respectively on /best/ar-glasses-2026/
     before this rule — all below the 44px minimum. */
  .pick-card-info .pick-card-price.affiliate-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  article h3 a.affiliate-link {
    display: inline-block;
    min-height: 44px;
    padding: 6px 0;
    line-height: 1.4;
  }
  .footer-meta a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }
  /* Round 3 (2026-04-19): full-audit sweep — star-rating pill, inline prose
     affiliate CTAs ("Check price on Amazon", "Buy the X →"), narrow topic-nav
     labels like "Pet". .logo at 137×33 and empty-text image-wrapping
     .affiliate-link left unchanged (image itself is the tap target). */
  .pick-card-rating.affiliate-link {
    min-height: 44px;
    padding: 10px 14px;
  }
  article p a.affiliate-link,
  article li a.affiliate-link {
    display: inline-block;
    padding: 10px 0;
  }
  .topic-nav a {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* tldr-box table links were missed by the .scroll-table rule because tldr-box
     tables aren't wrapped in .scroll-table. Catch them explicitly. */
  .tldr-box table a.affiliate-link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }
}