@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_assets/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/_assets/fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/_assets/fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/_assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/_assets/fonts/inter-600.woff2") format("woff2");
}

:root {
  --color-bg: #FAF7F2;
  --color-text: #15110B;
  --color-text-muted: #3A3328;
  --color-text-faint: #6E6353;
  --color-heading: #15110B;
  --color-accent: #7A2E0E;
  --color-accent-soft: #F2DECB;
  --color-border: #E3DBC8;
  --color-surface: #F1ECE2;
  --color-primary: #15110B;
  --font-body: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
  --measure: 68ch;
  --container: 720px;
  --container-wide: 1180px;
  --radius: 4px;
  --radius-card: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

main {
  max-width: var(--container-wide);
  margin: 2.5rem auto 4rem;
  padding: 0 1.25rem;
}

a { color: var(--color-accent); }
a:hover { opacity: 0.85; }

/* ----- Site header --------------------------------------------------- */
/* P1-1: flat document masthead. No position: sticky, no backdrop-filter.
   The sticky-blur header was the single most "SaaS app, not a magazine"
   surface gesture; the editorial register requires a flat masthead with a
   1px bottom rule, full stop. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.site-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  text-decoration: none;
}
.site-title:hover { color: var(--color-accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; align-items: center; }
.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-nav a:hover { color: var(--color-heading); border-bottom-color: var(--color-accent); }

/* ----- Layouts -------------------------------------------------------- */
.layout { width: 100%; }
.layout-no-sidebar { max-width: 720px; margin: 0 auto; }
.layout-wide { max-width: var(--container-wide); margin: 0 auto; }
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.layout-sidebar__main { min-width: 0; }
.layout-sidebar__sidebar { font-size: 0.92rem; }
@media (max-width: 1024px) {
  .layout-sidebar { grid-template-columns: 1fr; gap: 1.5rem; }
  .layout-sidebar__sidebar { order: 2; }
}

/* ----- Article header ------------------------------------------------ */
article > header { margin-bottom: 1.5rem; }
article > header h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  line-height: 1.18;
  margin: 0.4rem 0 0.75rem;
  color: var(--color-heading);
  letter-spacing: -0.015em;
}
.reading-time {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.breadcrumbs { font-size: 0.85rem; color: var(--color-text-faint); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs span[aria-current="page"] { color: var(--color-heading); font-weight: 500; }

/* ----- Heroes (shared shell) ----------------------------------------- */
.hero { margin: 1.25rem 0 2rem; }
.hero img { display: block; width: 100%; height: auto; }
.hero__subhead {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.45;
}
.hero__meta {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}
.hero figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-faint);
  font-style: italic;
}

/* ----- Page-context hero (Design Pass 2: hero-image-rendering) ------ */
/* Homepage hero with title overlay + full-bleed image. */
.home-hero--text-only {
  max-width: var(--container);
  margin: 3rem auto 2.5rem;
  padding: 0 1.25rem;
}
.home-hero--text-only h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}
.home-hero--text-only p {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0;
}
.home-hero--image {
  margin: 0 0 2.5rem;
  position: relative;
}
.home-hero__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 65vh;
  overflow: hidden;
  background: var(--color-surface);
}
.home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.65) 100%);
  color: #ffffff;
}
.home-hero__overlay h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.home-hero__overlay p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  color: #f3f4f6;
  max-width: 60ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
/* Marketing / landing-page variant: title centered horizontally and
   vertically with a darker full overlay so the title reads against any
   image. Toggle via CONFIG_HERO_TITLE_POSITION=center. */
.home-hero__overlay--center {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.55) 100%);
}
.home-hero__overlay--center h1 {
  margin-left: auto;
  margin-right: auto;
}
.home-hero__overlay--center p {
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* Category page hero: medium 16:9, no overlay. */
.category-hero {
  margin: 0 0 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.category-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

/* Article-top hero (legacy article path): 4:3 frame, no overlay. */
.article-hero {
  margin: 1.25rem 0 1.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.article-hero__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* ----- Prose body ---------------------------------------------------- */
.prose { max-width: var(--measure); font-size: 1.05rem; color: var(--color-text); }
.prose h2 {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 2.4rem 0 0.85rem;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}
.prose h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 1.8rem 0 0.7rem;
  color: var(--color-heading);
}
.prose h4 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.4rem 0 0.5rem;
  color: var(--color-heading);
}
.prose p { margin: 0 0 1.15rem; }
.prose a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.prose li { margin: 0.4rem 0; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}
.prose strong { color: var(--color-heading); font-weight: 700; }
.prose em { font-style: italic; }

/* ----- Pullquote ----------------------------------------------------- */
.pullquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-left: 4px solid var(--color-accent);
  font-family: var(--font-heading);
}
.pullquote blockquote {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--color-heading);
  font-style: italic;
  font-weight: 500;
}
.pullquote-attribution {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: normal;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}

/* ----- Author byline ------------------------------------------------- */
.author-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
  margin: 0.6rem 0 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.author-byline a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.author-byline a:hover { color: var(--color-accent); }
.author-byline__separator { color: var(--color-text-faint); }
.author-byline__role { font-style: italic; }

/* ----- Editorial team card (about page) ----------------------------- */
.editorial-team-card {
  margin: 0.5rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.editorial-team-card__name { font-weight: 700; color: var(--color-heading); margin: 0 0 0.5rem; font-size: 1.05rem; }
.editorial-team-card__description { margin: 0; line-height: 1.55; color: var(--color-text); }

/* ----- Author card --------------------------------------------------- */
.author-card {
  padding: 1.25rem;
  margin: 2.5rem 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.author-card__name { font-weight: 700; color: var(--color-heading); }
.author-card__role { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.author-card__bio { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-text); }
.author-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ----- Last updated -------------------------------------------------- */
.last-updated {
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin: 1.5rem 0 0;
}

/* ----- Key takeaways ------------------------------------------------- */
.key-takeaways {
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0 2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.key-takeaways__heading {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.key-takeaways ul { margin: 0; padding-left: 1.25rem; }
.key-takeaways li { margin: 0.35rem 0; }

/* ----- Pros / cons --------------------------------------------------- */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem 0;
  background: var(--color-bg);
}
.pros-cons__heading {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}
.pros-cons ul { padding-left: 1.4rem; margin: 0; list-style: none; }
.pros-cons li { margin: 0.35rem 0; padding-left: 0.25rem; position: relative; }
.pros-cons__pros li::before {
  content: "✓";
  color: #16a34a;
  font-weight: 700;
  margin-right: 0.5rem;
}
.pros-cons__cons li::before {
  content: "✗";
  color: #dc2626;
  font-weight: 700;
  margin-right: 0.5rem;
}
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; gap: 1rem; } }

/* ----- Callouts ------------------------------------------------------ */
.callout {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem 1rem;
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
}
.callout__icon { font-size: 1.1rem; line-height: 1.4; }
.callout__body { line-height: 1.55; color: var(--color-text); }
.callout__label {
  display: inline;
  font-style: italic;
  margin-right: 0.35rem;
  color: var(--color-heading);
}
.callout--tip { background: #DBEAFE; border-left-color: #1E40AF; }
.callout--warning { background: #FEF3C7; border-left-color: #D97706; }
.callout--note { background: #F3F4F6; border-left-color: #525252; }

/* ----- Star rating --------------------------------------------------- */
.star-rating {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  margin: 1.5rem 0;
}
.star-rating__main { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.star-rating__bar { display: inline-flex; gap: 2px; }
.star-rating__star { width: 22px; height: 22px; }
.star-rating__numeric { font-weight: 700; color: var(--color-heading); }
.star-rating__label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.star-rating__breakdown { display: grid; gap: 0.4rem; }
.star-rating__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(6rem, 2fr) auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.88rem;
  color: var(--color-text);
}
.star-rating__criterion { color: var(--color-text-muted); }
.star-rating__minibar {
  height: 6px;
  background: var(--color-surface);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.star-rating__minibar-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
}
.star-rating__value { color: var(--color-heading); font-weight: 600; }

/* ----- Comparison table --------------------------------------------- */
.comparison-table { margin: 2rem 0; }
.comparison-table__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.comparison-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  background: var(--color-bg);
}
.comparison-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
  padding: 0 0 0.75rem;
}
.comparison-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  color: var(--color-heading);
  font-weight: 600;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 2px solid var(--color-border);
}
.comparison-table tbody th, .comparison-table tbody td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.comparison-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--color-heading);
  background: var(--color-surface);
  width: 14rem;
}
.comparison-table tbody tr:nth-child(odd) td { background: rgba(0, 0, 0, 0.015); }
/* P1-3: editor's-pick is a row tint plus a Series-type label, never a
   filled accent pill. The row-tint reinforces; the label tells the reader.
   Drops the `!important` cascade fight in the process. */
.comparison-table__editors-pick td,
.comparison-table__editors-pick th {
  background: var(--color-accent-soft);
}
.comparison-table__badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: transparent;
  padding: 0 0.5rem 0 0;
  margin-right: 0.5rem;
  font-weight: 600;
  border: 0;
  border-radius: 0;
}
/* Affiliate text link on the model name in each comparison-table row.
   Subtle terracotta + underline (NOT a button) — the loud CTA lives on
   the product cards above. The row label inherits the spec/mono
   register, so the link keeps that register and overrides only color
   and underline so it reads as a distinct interactive element. */
.comparison-table__model-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.comparison-table__model-link:hover {
  color: var(--color-heading);
  text-decoration-thickness: 2px;
}

/* ----- Product card -------------------------------------------------- */
.product-card-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 2.5rem 0;
}
.product-card {
  display: grid;
  gap: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  padding: 1.5rem 1.5rem 1.4rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong, var(--color-border));
}
/* Design Pass 2: "Our Pick" treatment for the top-ranked product. The
   card carries a top ribbon, a 2px accent border, and a slightly tinted
   background so the eye lands here first. The ribbon overlaps the
   border, giving the depth a real publication's pick callout has. */
.product-card--our-pick {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-soft, var(--color-surface));
  padding-top: 2rem;
}
.product-card__ribbon {
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
}
/* P2-4: rank is a typographic label, not a filled accent sticker. The
   spec/mono treatment ("01 / 06") makes the rank read as ranking rather
   than as a badge floating on the card. */
.product-card__rank {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.product-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: 0.25rem;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No-photo header: rendered when a card has no real product photo and
   the mock placeholder has been dropped. Reserves the same aspect ratio
   a real image would occupy so a future Creators-API photo drops in
   without a layout shift. The rank numeral sits left as the focal point
   and the on-brand chair glyph sits right as ambient decoration. */
.product-card__no-photo {
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.25rem;
  color: var(--color-accent);
  overflow: hidden;
}
.product-card--our-pick .product-card__no-photo {
  background: var(--color-bg);
  border-color: var(--color-accent);
}
.product-card__no-photo-rank {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-heading);
}
.product-card--our-pick .product-card__no-photo-rank {
  color: var(--color-accent);
}
.product-card__no-photo-glyph {
  width: clamp(64px, 22%, 96px);
  height: auto;
  justify-self: end;
  color: var(--color-accent);
  opacity: 0.85;
}

/* Per-card variants: a 6-variant warm-earth palette cycle that runs
   off the rank-derived ``data-variant`` attribute emitted by
   ``components/product_card._render_no_photo_header``. The cycle keeps
   adjacent cards visually distinct without leaving the brand palette
   (terracotta, sage, cream, deep brown). Every variant inherits the
   base layout from ``.product-card__no-photo`` above and overrides
   only background + glyph tint, so a future Creators-API photo can
   still drop in cleanly. */
.product-card__no-photo[data-variant="1"] {
  background: linear-gradient(135deg, #f5ecdc 0%, #ecd9be 100%);
}
.product-card__no-photo[data-variant="2"] {
  background: linear-gradient(135deg, #f0e3d0 0%, #dcc6a8 100%);
}
.product-card__no-photo[data-variant="3"] {
  background: linear-gradient(135deg, #efe2cc 0%, #d9b899 100%);
}
.product-card__no-photo[data-variant="4"] {
  background: linear-gradient(135deg, #ecdfc7 0%, #c9a982 100%);
}
.product-card__no-photo[data-variant="5"] {
  background: linear-gradient(135deg, #f2e4cb 0%, #d0b08a 100%);
}
.product-card__no-photo[data-variant="6"] {
  background: linear-gradient(135deg, #ecddc1 0%, #b89776 100%);
}
.product-card__no-photo[data-variant="1"] .product-card__no-photo-glyph { opacity: 0.7; }
.product-card__no-photo[data-variant="2"] .product-card__no-photo-glyph { opacity: 0.78; }
.product-card__no-photo[data-variant="3"] .product-card__no-photo-glyph { opacity: 0.82; }
.product-card__no-photo[data-variant="4"] .product-card__no-photo-glyph { opacity: 0.88; }
.product-card__no-photo[data-variant="5"] .product-card__no-photo-glyph { opacity: 0.9; }
.product-card__no-photo[data-variant="6"] .product-card__no-photo-glyph { opacity: 0.95; }

/* When the card has no photo, the Solera Score becomes the visual hero
   of the card. Slight scale-up of the composite numeral and a softer
   inner background tie it to the no-photo header above. */
.product-card--no-photo .solera-score {
  background: var(--color-bg);
}
.product-card--no-photo .solera-score__overall {
  font-size: 1.85rem;
}
.product-card__body { display: grid; gap: 0.65rem; }
.product-card__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}
.product-card--our-pick .product-card__name {
  font-size: 1.45rem;
}
.product-card__one-liner {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}
/* Decision-support block: "Best for / Not ideal for" lines surfaced as
   a dedicated unit between the one-line summary and the spec list. The
   block reads as a small editorial gate the reader uses to decide
   whether the rest of the card is worth their attention; design intent
   is "obviously not running text." Both lines render in body type with a
   small-caps label, separated by a hairline rule. */
.product-card__decision-support {
  margin: 0;
  padding: 0.55rem 0.85rem;
  background: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  display: grid;
  gap: 0.3rem;
}
.product-card__fit-line {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
}
.product-card__fit-line + .product-card__fit-line {
  border-top: 1px solid var(--color-border);
  padding-top: 0.3rem;
}
.product-card__fit-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}
.product-card__fit-line--not-ideal .product-card__fit-label {
  color: var(--color-text-faint);
}
.product-card__specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
/* Spec chips were pill-shaped (border-radius: 999px). Per the No-Pill rule
   they are now plain typographic items separated by a hairline vertical
   bar, sized to match the spec/mono register. */
.product-card__specs li {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.product-card__specs li + li::before {
  content: "·";
  color: var(--color-text-faint);
  padding-right: 0.85rem;
}
.product-card__description { margin: 0; line-height: 1.55; color: var(--color-text); }
/* P1-2: the affiliate CTA is the climax of the page, not the loudest
   element on it. Outline-accent with a trailing arrow earns the eye
   without shouting; the saturated-accent fill was the Top10Reviews
   pattern. */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  background: transparent;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  align-self: flex-start;
  margin-top: 0.35rem;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.product-card__cta::after {
  content: "→";
  font-size: 1em;
  line-height: 1;
  transition: transform 140ms ease;
}
.product-card__cta:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  filter: none;
  opacity: 1;
}
.product-card__cta:hover::after { transform: translateX(2px); }
/* Our-Pick CTA gets a filled treatment (this is the climax of the card). */
.product-card--our-pick .product-card__cta {
  background: var(--color-accent);
  color: var(--color-bg);
}
.product-card--our-pick .product-card__cta:hover {
  background: var(--color-heading);
  color: var(--color-bg);
}

/* ----- Solera Score -------------------------------------------------- */
.solera-score {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin: 0.5rem 0 0.25rem;
}
.solera-score__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.55rem;
}
.solera-score__title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.solera-score__overall {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.solera-score__overall-denom {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-faint);
  margin-left: 0.25rem;
  letter-spacing: 0;
}
.solera-score__rows { display: grid; gap: 0.35rem; }
.solera-score__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(5rem, 2fr) 2.4rem;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
}
.solera-score__dimension { color: var(--color-text-muted); }
.solera-score__bar {
  height: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.solera-score__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.solera-score__value {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-heading);
  text-align: right;
}
.solera-score__methodology {
  justify-self: flex-end;
  font-size: 0.78rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent);
  padding-bottom: 1px;
}
.solera-score__methodology:hover {
  border-bottom-style: solid;
}

/* ----- Solera Score snapshot (top-of-article composite ranking) ------ */
.solera-snapshot {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.solera-snapshot__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.solera-snapshot__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--color-heading);
}
.solera-snapshot__methodology {
  font-size: 0.82rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.solera-snapshot__methodology:hover { border-bottom-style: solid; }
.solera-snapshot__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}
.solera-snapshot__row { margin: 0; }
.solera-snapshot__link {
  display: grid;
  grid-template-columns: 2.4rem minmax(7rem, 1.4fr) minmax(5rem, 3fr) 3.4rem;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.solera-snapshot__link:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.solera-snapshot__row--pick .solera-snapshot__link {
  border-color: var(--color-accent);
  background: var(--color-accent-soft, var(--color-surface));
}
.solera-snapshot__rank {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}
.solera-snapshot__row--pick .solera-snapshot__rank {
  color: var(--color-accent);
}
.solera-snapshot__name {
  font-weight: 600;
  color: var(--color-heading);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.solera-snapshot__badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.solera-snapshot__bar {
  display: block;
  height: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.solera-snapshot__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.solera-snapshot__score {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-heading);
  text-align: right;
  white-space: nowrap;
}
.solera-snapshot__score-denom {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-faint);
  margin-left: 0.15rem;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .solera-snapshot__link {
    grid-template-columns: 2rem 1fr 3.2rem;
    grid-template-areas:
      "rank name score"
      "bar bar bar";
    row-gap: 0.4rem;
  }
  .solera-snapshot__rank { grid-area: rank; }
  .solera-snapshot__name { grid-area: name; }
  .solera-snapshot__score { grid-area: score; }
  .solera-snapshot__bar { grid-area: bar; }
}

/* ----- Solera Score matrix (bottom-of-article 5-dimension grid) ------ */
.solera-matrix {
  margin: 2.5rem 0;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.solera-matrix__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.solera-matrix__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-heading);
  margin: 0;
}
.solera-matrix__methodology {
  font-size: 0.82rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.solera-matrix__methodology:hover { border-bottom-style: solid; }
.solera-matrix__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.solera-matrix__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.solera-matrix__table thead th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 0.55rem 0.65rem;
  text-align: left;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.solera-matrix__corner {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
}
.solera-matrix__row {
  border-bottom: 1px solid var(--color-border);
}
.solera-matrix__row:last-child { border-bottom: none; }
.solera-matrix__row--pick { background: var(--color-accent-soft, transparent); }
.solera-matrix__row-label {
  position: sticky;
  left: 0;
  background: inherit;
  font-weight: 600;
  color: var(--color-heading);
  padding: 0.65rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.solera-matrix__row-label a {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-text-faint);
  padding-bottom: 1px;
}
.solera-matrix__row-label a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.solera-matrix__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.solera-matrix__row--pick .solera-matrix__rank {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.solera-matrix__overall-cell {
  padding: 0.65rem;
  vertical-align: middle;
  text-align: center;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
}
.solera-matrix__overall-value {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.005em;
}
.solera-matrix__row--pick .solera-matrix__overall-value {
  color: var(--color-accent);
}
.solera-matrix__cell {
  padding: 0.55rem 0.65rem;
  vertical-align: middle;
  min-width: 110px;
}
.solera-matrix__cell-value {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-heading);
  display: inline-block;
  margin-bottom: 0.3rem;
}
.solera-matrix__cell-bar {
  display: block;
  height: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.solera-matrix__cell-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
@media (max-width: 720px) {
  .solera-matrix { padding: 1.1rem 0.9rem 1.2rem; }
  .solera-matrix__header { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
}

/* ----- Ambient images (section-break editorial visuals) -------------- */
.ambient-image {
  margin: 2.5rem 0;
  padding: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface);
}
.ambient-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* ----- Solera Score radar (alternative comparison view) -------------- */
.solera-radar {
  margin: 2.5rem 0;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.solera-radar__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 1rem;
}
.solera-radar__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 640px) {
  .solera-radar__body { grid-template-columns: minmax(280px, 360px) 1fr; }
}
.solera-radar__svg {
  width: 100%;
  height: auto;
  max-width: 360px;
}
.solera-radar__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.solera-radar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.solera-radar__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

/* ----- Methodology --------------------------------------------------- */
.methodology {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.methodology__heading {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
  color: var(--color-heading);
}
.methodology__intro { margin: 0 0 1.25rem; color: var(--color-text); }
.methodology__criteria { display: grid; gap: 0.85rem; }
.methodology__criterion {
  display: grid;
  gap: 0.2rem 1rem;
  grid-template-columns: minmax(8rem, 1fr) auto;
  align-items: baseline;
}
.methodology__criterion-name { color: var(--color-heading); }
.methodology__weight { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 0.05em; }
.methodology__criterion-desc {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.methodology__note { margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--color-text-faint); }

/* ----- Affiliate disclosure ----------------------------------------- */
.affiliate-disclosure {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.75rem;
  font-style: italic;
}
.affiliate-disclosure__label { font-style: normal; color: var(--color-heading); }
.affiliate-disclosure__link { font-style: normal; }

/* ----- TOC ----------------------------------------------------------- */
.toc {
  position: sticky;
  top: 5rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
.toc__heading {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 0.6rem;
  font-weight: 700;
}
.toc__list, .toc__sublist { list-style: none; margin: 0; padding: 0; }
.toc__sublist { padding-left: 0.8rem; margin-top: 0.25rem; }
.toc__list li, .toc__sublist li { margin: 0.25rem 0; }
.toc__link {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: none;
  display: inline-block;
  padding: 0.1rem 0;
}
.toc__link:hover { color: var(--color-accent); }
.toc__active { color: var(--color-heading); font-weight: 700; }

/* ----- FAQ ----------------------------------------------------------- */
.faq h2 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--color-heading);
  margin: 0 0 1rem;
}
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0.6rem 0;
  background: var(--color-bg);
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--color-accent); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { margin-top: 0.6rem; color: var(--color-text-muted); line-height: 1.6; }
.faq details > div p { margin: 0 0 0.6rem; }

/* ----- Special pages ------------------------------------------------- */
.page-about, .page-privacy, .page-terms { font-size: 1.02rem; }
.page-about > header h1, .page-privacy > header h1, .page-terms > header h1 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
.page-about__section, .page-privacy section, .page-terms section { margin: 1.75rem 0; }
.page-about__section h2, .page-privacy h2, .page-terms h2 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: 1.35rem;
}
.page-privacy__effective, .page-terms__effective { color: var(--color-text-faint); font-size: 0.9rem; }

/* ----- Footer -------------------------------------------------------- */
.site-footer {
  margin-top: 4rem;
  padding: 3rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  background: var(--color-surface);
}
.site-footer__columns {
  display: grid;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
}
.site-footer__columns--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer__columns--2 { grid-template-columns: 1fr 1fr; }
.site-footer__columns--1 { grid-template-columns: 1fr; }
.site-footer__col { min-width: 0; }
.site-footer__heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-heading);
  margin: 0 0 0.85rem;
}
.site-footer__subheading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.75rem 0 0.35rem;
}
.site-footer__category-groups { list-style: none; margin: 0; padding: 0; }
.site-footer__category-group + .site-footer__category-group { margin-top: 0.5rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin: 0.25rem 0; }
.site-footer__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.92rem;
}
.site-footer__links a:hover { color: var(--color-accent); text-decoration: underline; }
.site-footer__disclosure {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  text-align: center;
}
.site-footer__disclosure p { margin: 0; }
.site-footer__legal {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  text-align: center;
  color: var(--color-text-faint);
  font-size: 0.85rem;
  max-width: 1100px;
  margin: 0 auto;
}
.site-footer__legal p { margin: 0; }

/* ----- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  main { margin: 1.5rem auto 3rem; }
  .site-header { flex-direction: column; align-items: flex-start; padding: 0.85rem 1rem; }
  .product-card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .author-card { grid-template-columns: 50px 1fr; }
  .star-rating__row { grid-template-columns: 1fr auto; }
  .star-rating__minibar { display: none; }
  .solera-score__row { grid-template-columns: minmax(6rem, 1fr) auto; }
  .solera-score__bar { display: none; }
  .site-footer__columns--3,
  .site-footer__columns--2 { grid-template-columns: 1fr; }
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin: 1rem 0 2.5rem;
}
.hero-split .hero__text h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin: 0 0 0.5rem;
  color: var(--color-heading);
}
.hero-split .hero__image img { border-radius: var(--radius-card); box-shadow: var(--shadow-md); }
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-split .hero__image { order: -1; }
}

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

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ---------------------------------------------------------------------
   Brand-mode override layer.

   Applied when Site.brand_id IS NOT NULL. The generic site.css above
   already exposes its theme via custom properties; this block replaces
   those values so every component (callouts, product cards, pull
   quotes, comparison tables) re-themes to the brand palette without
   needing rule-by-rule changes.
   --------------------------------------------------------------------- */
:root {
  --color-bg: oklch(0.97 0.012 80);
  --color-surface: oklch(0.94 0.018 75);
  --color-text: oklch(0.24 0.025 50);
  --color-text-muted: oklch(0.42 0.022 50);
  --color-text-faint: oklch(0.58 0.018 55);
  --color-heading: oklch(0.24 0.025 50);
  --color-primary: oklch(0.24 0.025 50);
  --color-accent: oklch(0.58 0.14 35);
  --color-accent-soft: oklch(0.92 0.04 35);
  --color-border: oklch(0.83 0.012 70);
  --color-border-strong: oklch(0.72 0.018 65);
  --font-heading: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --brand-sage: oklch(0.58 0.06 145);
  --brand-sage-deep: oklch(0.42 0.06 145);
  --brand-sage-soft: oklch(0.92 0.025 145);
  --brand-terracotta: oklch(0.58 0.14 35);
  --brand-terracotta-deep: oklch(0.48 0.14 35);
  --brand-terracotta-soft: oklch(0.92 0.04 35);
}

/* Body sits on cream, not white. The generic stylesheet's --color-bg
   override above already does this, but make it explicit so cascade
   precedence cannot put it back to white via a UA stylesheet quirk. */
body {
  background: oklch(0.97 0.012 80);
  color: oklch(0.24 0.025 50);
}

/* Header masthead: cream surface with a sage-deep wordmark and a
   terracotta underline on the active nav link. Without these rules the
   header reads as another generic light strip even with the variable
   remap. */
.site-header {
  background: oklch(0.97 0.012 80);
  border-bottom: 1px solid oklch(0.72 0.018 65);
}
.site-title {
  color: oklch(0.24 0.025 50);
  letter-spacing: -0.01em;
}
.site-title:hover { color: oklch(0.48 0.14 35); }
.site-nav a { color: oklch(0.42 0.022 50); }
.site-nav a:hover {
  color: oklch(0.24 0.025 50);
  border-bottom-color: oklch(0.58 0.14 35);
}

/* Brand-level header rendered on category and article pages so every
   subpage carries the SoleraEase identity (wordmark + category nav)
   instead of the site-scoped "Best Ergonomic Office Chair..." masthead.
   Mirrors the homepage masthead in brand_homepage.HOMEPAGE_CSS so the
   reader sees one consistent header across the whole brand. */
.brand-header {
  background: oklch(0.97 0.012 80);
  border-bottom: 1px solid oklch(0.72 0.018 65);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: clamp(16px, 3vw, 32px);
}
.brand-wordmark {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  color: oklch(0.24 0.025 50);
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid oklch(0.58 0.06 145);
}
.brand-wordmark:hover { color: oklch(0.48 0.14 35); }
.brand-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 28px);
  justify-content: flex-end;
}
.brand-nav a {
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: oklch(0.42 0.022 50);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.brand-nav a:hover {
  color: oklch(0.24 0.025 50);
  border-bottom-color: oklch(0.58 0.14 35);
}
.brand-nav a.is-active {
  color: oklch(0.24 0.025 50);
  border-bottom-color: oklch(0.58 0.14 35);
}

/* Eyebrow kickers (Wirecutter-style "OUR APPROACH" labels). Sage is the
   secondary accent and pairs well with the warmer terracotta CTA tones. */
.brand-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.42 0.06 145);
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid oklch(0.58 0.06 145);
  margin: 0 0 12px;
}

/* Headings: display serif (already set via --font-heading), but add a
   tighter letter-spacing override the generic CSS does not carry. */
.prose h2,
.prose h3,
article > header h1,
.category-hero h1,
.home-hero h1 {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
}

/* Prose links: keep the brand terracotta on inline links and use a
   sage underline to push the secondary palette onto every article. */
.prose a {
  color: oklch(0.48 0.14 35);
  border-bottom-color: oklch(0.58 0.06 145);
}
.prose a:hover {
  color: oklch(0.58 0.14 35);
  opacity: 1;
  border-bottom-color: oklch(0.58 0.14 35);
}

/* Pullquote rail uses sage so it does not fight the terracotta inline
   link colour in the surrounding paragraph. */
.pullquote {
  border-left-color: oklch(0.42 0.06 145);
  background: oklch(0.92 0.025 145);
  padding: 1rem 1.25rem 1rem 1.4rem;
  border-radius: 0;
}
.pullquote blockquote { color: oklch(0.24 0.025 50); }

/* Breadcrumbs read as small, but their hover state is the most
   common place visitors notice link colour. Force terracotta. */
.breadcrumbs a:hover { color: oklch(0.48 0.14 35); text-decoration: underline; }
.breadcrumbs span[aria-current="page"] { color: oklch(0.24 0.025 50); }

/* Category hero treatment: warm tint instead of grey surface. */
.category-hero,
figure.hero,
.article-hero {
  background: oklch(0.91 0.022 72);
  border-radius: 0;
  box-shadow: none;
}

/* Comparison tables: drop the white card surface, lean into the warm
   ground. Header row uses cream-warm to separate without a hard rule. */
.comparison-table table {
  background: oklch(0.97 0.012 80);
  border-radius: 0;
  box-shadow: 0 1px 0 oklch(0.72 0.018 65);
}
.comparison-table thead th,
.comparison-table tbody th {
  background: oklch(0.94 0.018 75);
  color: oklch(0.24 0.025 50);
}

/* FAQ: keep details borders quiet; turn the + glyph terracotta so the
   interaction surface is the most colourful element on the section. */
.faq details {
  background: oklch(0.97 0.012 80);
  border: 1px solid oklch(0.83 0.012 70);
  border-radius: 0;
}
.faq summary { color: oklch(0.24 0.025 50); }
.faq summary::after { color: oklch(0.58 0.14 35); }

/* Site footer: dark earth instead of grey surface. Footer text stays at
   readable contrast with the cream wordmark sitting against ink. */
.site-footer {
  background: oklch(0.22 0.022 50);
  color: oklch(0.82 0.012 80);
  border-top: 1px solid oklch(0.72 0.018 65);
}
.site-footer__heading { color: oklch(0.93 0.012 80); }
.site-footer__subheading { color: oklch(0.93 0.012 80); }
.site-footer__links a { color: oklch(0.82 0.012 80); }
.site-footer__links a:hover { color: oklch(0.92 0.04 35); }
.site-footer__legal {
  color: oklch(0.82 0.012 80);
  border-top: 1px solid oklch(0.32 0.018 55);
}

/* Methodology surfaces (P0-2): the brand identity asks for the
   methodology section to read as a deliberate set-piece. Give it a
   warm tint and a sage-keyed eyebrow. */
.methodology__container,
.methodology {
  background: oklch(0.94 0.018 75);
  border-radius: 0;
}

/* Solera Score methodology page bits (rendered by
   render_solera_score_body). The page emits .solera-methodology__*
   classes; this is where they get visual treatment. */
.solera-methodology {
  max-width: 920px;
  margin: 0 auto;
}
.solera-methodology__lede {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.5;
  color: oklch(0.42 0.022 50);
  margin: 0.5rem 0 1.75rem;
  max-width: 60ch;
}
.solera-methodology__grid {
  display: grid;
  gap: 1.25rem 1.75rem;
  grid-template-columns: 1fr;
  margin: 1rem 0 0;
}
@media (min-width: 720px) {
  .solera-methodology__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.solera-methodology__dimension {
  position: relative;
  padding: 1rem 0 1rem 3.25rem;
  border-left: 3px solid oklch(0.58 0.06 145);
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.solera-methodology__dimension:nth-child(odd) {
  border-left-color: oklch(0.58 0.14 35);
}
.solera-methodology__dimension-num {
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: oklch(0.48 0.14 35);
}
.solera-methodology__dimension:nth-child(odd) .solera-methodology__dimension-num {
  color: oklch(0.42 0.06 145);
}
.solera-methodology__dimension-name {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: oklch(0.24 0.025 50);
  margin: 0 0 0.25rem;
}
.solera-methodology__dimension p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: oklch(0.42 0.022 50);
  margin: 0;
}
.solera-methodology .page-about__section h2 {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 28px);
  color: oklch(0.24 0.025 50);
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid oklch(0.58 0.14 35);
  display: inline-block;
}
.solera-methodology header h1 {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.25rem;
}

/* Homepage methodology Solera-Score block: emitted by the brand
   homepage when methodology is configured. Lives only on the brand
   root so the rules sit here, not on the homepage's inline CSS, to
   keep one source of truth for the dimension grid styling. */
.methodology--solera .methodology-list {
  grid-template-columns: 1fr;
  gap: 22px 36px;
}
@media (min-width: 720px) {
  .methodology--solera .methodology-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.methodology--solera .methodology-cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 1.25rem;
  background: oklch(0.58 0.14 35);
  color: oklch(0.97 0.012 80);
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: none;
}
.methodology--solera .methodology-cta:hover {
  background: oklch(0.48 0.14 35);
  color: oklch(0.97 0.012 80);
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Brand DOM hooks layer (Phase 2 visual identity).

   These rules pair with the structural elements emitted by the
   astro_renderer when brand_styling is enabled: the eyebrow kicker
   above every page H1, the methodology rail at the foot of articles,
   the section-band backgrounds on resource-library / FAQ / comparison
   surfaces, the heavier pullquote treatment, the H1 terracotta rule
   and H2 sage rail, the brand wordmark in the dark footer, and the
   related-categories rail at the bottom of category landings.

   None of these match anything in a standalone (non-brand) site so
   the layer is no-op for non-brand renders even if accidentally
   loaded.
   --------------------------------------------------------------------- */

/* H1 terracotta rule: the editorial signature. Lives below every page
   H1 (article, category, special pages). Limited width so it reads as
   an accent under the heading, not a full-bleed divider. */
article > header h1,
main > h1,
.brand-page-h1 {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: oklch(0.24 0.025 50);
  margin: 0 0 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 3px solid oklch(0.58 0.14 35);
  display: block;
  max-width: max-content;
}

/* H2 sage rail: a vertical bar to the left of every prose H2 in
   brand-mode content. The rail makes a scan of an article feel
   sectioned even before the reader processes the text, and the sage
   colour balances the terracotta H1 rule above. */
.prose h2 {
  border-left: 3px solid oklch(0.58 0.06 145);
  padding-left: 14px;
  margin-left: -17px;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.25;
}
.prose h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  color: oklch(0.48 0.14 35);
}

/* Pullquote brand set-piece: thicker terracotta rail, sage-soft
   block, Spectral italic at a noticeably larger size than body. The
   previous treatment was a thin sage line on the same cream as the
   page; this version is meant to be read as a deliberate block. */
.pullquote {
  border-left: 5px solid oklch(0.58 0.14 35);
  background: oklch(0.92 0.025 145);
  padding: 1.1rem 1.4rem 1.1rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0;
}
.pullquote blockquote {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  color: oklch(0.24 0.025 50);
  margin: 0;
}

/* Section bands: cream / sage-soft / cream-deep / cream-warm
   alternate across the article footer so each editorial surface
   reads as a distinct chapter rather than one flat run of text. The
   left/right padding compensates for the bands extending visually
   beyond the prose measure. */
.resource-library {
  background: oklch(0.92 0.025 145);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid oklch(0.58 0.06 145);
  border-bottom: 1px solid oklch(0.58 0.06 145);
  margin: 2.5rem 0;
}
.resource-library h2 {
  color: oklch(0.42 0.06 145);
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  margin-top: 0;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.faq {
  background: oklch(0.91 0.022 72);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid oklch(0.72 0.018 65);
  border-bottom: 1px solid oklch(0.72 0.018 65);
  margin: 2.5rem 0;
}
.faq h2 {
  color: oklch(0.24 0.025 50);
  margin-top: 0;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.comparison-table {
  background: oklch(0.94 0.018 75);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid oklch(0.72 0.018 65);
  border-bottom: 1px solid oklch(0.72 0.018 65);
  margin: 2.5rem 0;
}

/* Product card affiliate CTA: drenched terracotta, full button
   treatment. The default product card CTA is a small inline link; in
   brand mode it becomes the most visible click target on the card. */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: oklch(0.58 0.14 35);
  color: oklch(0.97 0.012 80);
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.015em;
  border-radius: 2px;
  border: none;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.product-card__cta:hover {
  background: oklch(0.48 0.14 35);
  color: oklch(0.97 0.012 80);
  opacity: 1;
}

/* Methodology rail: 5-column grid (or stacked on narrow viewports)
   sitting between article body and site footer. Anchors every
   article in the same trust frame the homepage projects. */
.methodology-rail {
  background: oklch(0.94 0.018 75);
  border-top: 2px solid oklch(0.58 0.14 35);
  border-bottom: 1px solid oklch(0.72 0.018 65);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  margin: 3rem 0 0;
}
.methodology-rail__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.42 0.06 145);
  margin: 0 0 6px;
}
.methodology-rail__heading {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  letter-spacing: -0.01em;
  color: oklch(0.24 0.025 50);
  margin: 0 0 1.25rem;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.methodology-rail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
}
@media (min-width: 640px) {
  .methodology-rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .methodology-rail__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.methodology-rail__item {
  padding: 0;
  border-top: 2px solid oklch(0.58 0.14 35);
  padding-top: 0.6rem;
}
.methodology-rail__item:nth-child(even) {
  border-top-color: oklch(0.58 0.06 145);
}
.methodology-rail__num {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: oklch(0.48 0.14 35);
  margin: 0 0 0.15rem;
}
.methodology-rail__item:nth-child(even) .methodology-rail__num {
  color: oklch(0.42 0.06 145);
}
.methodology-rail__name {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 600;
  color: oklch(0.24 0.025 50);
  margin: 0 0 0.3rem;
}
.methodology-rail__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: oklch(0.42 0.022 50);
  margin: 0;
}
.methodology-rail__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: oklch(0.58 0.14 35);
  color: oklch(0.97 0.012 80);
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
  text-decoration: none;
  border: none;
  border-radius: 2px;
}
.methodology-rail__cta:hover {
  background: oklch(0.48 0.14 35);
  color: oklch(0.97 0.012 80);
  opacity: 1;
}

/* Related categories rail: emitted on category landings only when
   the parent brand has more than one Site. Horizontal scroll of
   sibling category cards. */
.related-categories {
  border-top: 1px solid oklch(0.72 0.018 65);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  margin: 3rem 0 0;
}
.related-categories__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.42 0.06 145);
  margin: 0 0 12px;
}
.related-categories__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.related-categories__item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: oklch(0.94 0.018 75);
  color: oklch(0.48 0.14 35);
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid oklch(0.58 0.14 35);
  border-radius: 2px;
  text-decoration: none;
}
.related-categories__item a:hover {
  background: oklch(0.58 0.14 35);
  color: oklch(0.97 0.012 80);
  border-color: oklch(0.58 0.14 35);
}

/* Brand footer mark: small wordmark + visit link in the dark earth
   footer. Sage underline echoes the homepage masthead's accent rail. */
.site-footer__brand {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid oklch(0.32 0.018 55);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer__brand-wordmark {
  font-family: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: oklch(0.93 0.012 80);
  letter-spacing: -0.005em;
  padding-bottom: 2px;
  border-bottom: 2px solid oklch(0.58 0.06 145);
}
.site-footer__visit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: oklch(0.92 0.04 35);
  font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
}
.site-footer__visit-link:hover {
  color: oklch(0.97 0.012 80);
}

/* ===================================================================
   Listicle template v2 — scoped to .lv2-* selectors.
   Modernized editorial design: soft rounded corners, gentle shadows,
   generous spacing, clear typographic hierarchy.
   =================================================================== */

.lv2-article {
  --lv2-radius-sm: 10px;
  --lv2-radius-md: 14px;
  --lv2-radius-lg: 20px;
  --lv2-radius-xl: 28px;
  --lv2-shadow-sm: 0 1px 2px rgba(47, 42, 32, 0.04),
                   0 1px 3px rgba(47, 42, 32, 0.06);
  --lv2-shadow-md: 0 4px 10px rgba(47, 42, 32, 0.05),
                   0 12px 28px rgba(47, 42, 32, 0.07);
  --lv2-shadow-lg: 0 8px 22px rgba(47, 42, 32, 0.07),
                   0 28px 56px rgba(47, 42, 32, 0.09);
  --lv2-card-bg: #ffffff;
  --lv2-card-border: rgba(47, 42, 32, 0.08);
  --lv2-ink: var(--color-text, #2f2a20);
  --lv2-ink-soft: var(--color-text-muted, #5a5141);
  --lv2-ink-faint: var(--color-text-faint, #837660);
  --lv2-terracotta: var(--brand-terracotta, #c2410c);
  --lv2-terracotta-deep: var(--brand-terracotta-deep, #9a3411);
  --lv2-terracotta-soft: var(--brand-terracotta-soft, #fbe9df);
  --lv2-sage: var(--brand-sage, #6a8a6a);
  --lv2-sage-deep: var(--brand-sage-deep, #3e6042);
  --lv2-sage-soft: var(--brand-sage-soft, #e6efe1);
  --lv2-cream: var(--color-surface, #fbf6ec);
  --lv2-page-bg: var(--color-bg, #fdfaf3);
  --lv2-rule: rgba(47, 42, 32, 0.08);

  max-width: 1140px;
  margin: 0 auto;
  padding: 2.5rem clamp(16px, 4vw, 44px) 4rem;
  font-family: var(--font-body);
  color: var(--lv2-ink);
}

/* --- Article hero --------------------------------------------------- */

/* The hero replaces the centered header + reviewer card on the prior
   version. Two columns: editorial framing left (kicker, H1 with
   accent underline, dek, byline meta), product image right with a
   floating white Solera Score card overlapping the top-right corner. */

.lv2-article__header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0 0 3rem;
}
.lv2-article__hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.lv2-article__kicker {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv2-terracotta-deep);
  margin: 0;
}
.lv2-article__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--lv2-ink);
  margin: 0;
  font-weight: 600;
  position: relative;
  padding-bottom: 1.25rem;
}
.lv2-article__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--lv2-terracotta);
}
.lv2-article__dek {
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.55;
  color: var(--lv2-ink-soft);
  margin: 0;
  max-width: 36em;
  font-weight: 400;
}
.lv2-article__hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--lv2-ink-faint);
  letter-spacing: 0.02em;
}
.lv2-article__hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lv2-article__hero-meta-icon {
  width: 14px;
  height: 14px;
  color: var(--lv2-sage-deep);
}
.lv2-article__hero-meta-sep {
  color: var(--lv2-ink-faint);
  opacity: 0.5;
}

.lv2-article__hero-figure {
  position: relative;
  border-radius: var(--lv2-radius-lg);
  overflow: visible;
  min-height: 360px;
}
.lv2-article__hero-frame {
  position: relative;
  border-radius: var(--lv2-radius-lg);
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255, 248, 234, 0.95) 0%,
    rgba(251, 233, 223, 0.7) 100%
  );
  border: 1px solid var(--lv2-card-border);
  box-shadow: var(--lv2-shadow-md);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.lv2-article__hero-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.lv2-article__hero-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lv2-terracotta-deep);
  text-align: center;
  gap: 0.5rem;
}
.lv2-article__hero-placeholder-rank {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 52px);
  letter-spacing: -0.03em;
}

.lv2-score-card {
  position: absolute;
  top: -22px;
  right: -28px;
  width: clamp(184px, 22vw, 220px);
  padding: 1.1rem 1.15rem 1.05rem;
  background: var(--lv2-card-bg);
  border-radius: var(--lv2-radius-md);
  box-shadow: var(--lv2-shadow-lg);
  border: 1px solid var(--lv2-card-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 2;
}
.lv2-score-card__eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lv2-terracotta-deep);
  font-weight: 700;
  margin: 0;
}
.lv2-score-card__score-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.lv2-score-card__value {
  font-family: var(--font-heading);
  font-size: clamp(42px, 5vw, 52px);
  font-weight: 700;
  color: var(--lv2-ink);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.lv2-score-card__denom {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--lv2-ink-faint);
  font-weight: 500;
}
.lv2-score-card__methodology {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--lv2-ink-soft);
  margin: 0;
}
.lv2-score-card__stars {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lv2-score-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  background: var(--lv2-terracotta);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 140ms ease;
}
.lv2-score-card__cta:hover { background: var(--lv2-terracotta-deep); }
.lv2-score-card__product {
  font-size: 0.78rem;
  color: var(--lv2-ink-faint);
  line-height: 1.4;
  margin: 0;
  font-style: italic;
}

@media (max-width: 880px) {
  .lv2-article__header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lv2-article__hero-figure { min-height: 0; }
  .lv2-article__hero-frame { aspect-ratio: 4 / 3; }
  .lv2-score-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 360px;
    margin: -2.5rem auto 0;
  }
}

/* --- Reviewer credentialing strip ----------------------------------- */

.lv2-reviewer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-md);
  box-shadow: var(--lv2-shadow-sm);
}
.lv2-reviewer__card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.lv2-reviewer__photo-link { display: block; line-height: 0; }
.lv2-reviewer__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lv2-cream);
  box-shadow: 0 0 0 1px var(--lv2-card-border);
  background: var(--lv2-cream);
}
.lv2-reviewer__identity { min-width: 0; }
.lv2-reviewer__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin: 0;
}
.lv2-reviewer__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
  color: var(--lv2-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.lv2-reviewer__name a { color: inherit; text-decoration: none; border-bottom: none; }
.lv2-reviewer__name a:hover { color: var(--lv2-terracotta-deep); }
.lv2-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(106, 138, 106, 0.4);
}
.lv2-verified__check { width: 0.78rem; height: 0.78rem; }
.lv2-reviewer__title {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: var(--lv2-ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.lv2-reviewer__bio {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--lv2-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lv2-reviewer__more {
  color: var(--lv2-terracotta-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.lv2-reviewer__more:hover { color: var(--lv2-terracotta); }

.lv2-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: center;
}
.lv2-trust-tile {
  padding: 0.6rem 0.5rem;
  border-radius: var(--lv2-radius-sm);
  text-align: left;
  border-left: 1px solid var(--lv2-rule);
  padding-left: 1rem;
}
.lv2-trust-tile:first-child {
  border-left: none;
  padding-left: 0;
}
.lv2-trust-tile__value {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--lv2-ink);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.lv2-trust-tile__label {
  font-size: 0.7rem;
  color: var(--lv2-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.3rem;
  font-weight: 600;
}

@media (max-width: 800px) {
  .lv2-reviewer { grid-template-columns: 1fr; }
  .lv2-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .lv2-reviewer__card { grid-template-columns: 56px 1fr; }
  .lv2-reviewer__photo { width: 56px; height: 56px; }
  .lv2-trust-strip { grid-template-columns: 1fr; gap: 0; }
  .lv2-trust-tile { border-left: none; border-top: 1px solid var(--lv2-rule); padding-left: 0; padding-top: 0.6rem; }
  .lv2-trust-tile:first-child { border-top: none; padding-top: 0; }
}

/* --- Quick Verdict card --------------------------------------------- */

.lv2-verdict-card {
  margin: 0 0 2rem;
  padding: 1.8rem clamp(1.25rem, 2.5vw, 2rem);
  background: var(--lv2-card-bg);
  border-radius: var(--lv2-radius-lg);
  border: 1px solid var(--lv2-card-border);
  box-shadow: var(--lv2-shadow-md);
  display: grid;
  gap: 1.4rem;
}
.lv2-verdict-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lv2-verdict-card__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
  border-radius: 999px;
  padding: 6px;
}
.lv2-verdict-card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lv2-ink);
  margin: 0;
}
.lv2-verdict-card__summary {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lv2-ink-soft);
}
.lv2-verdict-card__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--lv2-rule);
}
.lv2-verdict-card__col-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 0.75rem;
  font-weight: 700;
}
.lv2-verdict-card__col { display: flex; flex-direction: column; }
.lv2-verdict-card__col--strengths .lv2-verdict-card__col-head { color: var(--lv2-sage-deep); }
.lv2-verdict-card__col--tradeoffs .lv2-verdict-card__col-head { color: var(--lv2-terracotta-deep); }
.lv2-verdict-card__icon-svg { width: 16px; height: 16px; display: block; }
.lv2-verdict-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lv2-verdict-card__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.55rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--lv2-ink);
  align-items: start;
}
.lv2-verdict-card__bullet {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-top: 0.18rem;
}
.lv2-verdict-card__bullet--ok {
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
}
.lv2-verdict-card__bullet--warn {
  background: var(--lv2-terracotta-soft);
  color: var(--lv2-terracotta-deep);
}

@media (max-width: 720px) {
  .lv2-verdict-card__split { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- Info cards row (Affiliate Disclosure + The Solera Score) ------- */

.lv2-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
}
.lv2-info-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-md);
  box-shadow: var(--lv2-shadow-sm);
}
.lv2-info-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lv2-info-card--disclosure .lv2-info-card__icon-wrap {
  background: var(--lv2-terracotta-soft);
  color: var(--lv2-terracotta-deep);
}
.lv2-info-card--score .lv2-info-card__icon-wrap {
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
}
.lv2-info-card__icon { width: 22px; height: 22px; }
.lv2-info-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--lv2-ink);
  letter-spacing: -0.005em;
}
.lv2-info-card__body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--lv2-ink-soft);
}
.lv2-info-card__link {
  color: var(--lv2-terracotta-deep);
  text-decoration: none;
  font-weight: 600;
}
.lv2-info-card__link:hover { color: var(--lv2-terracotta); text-decoration: underline; }

@media (max-width: 720px) {
  .lv2-info-cards { grid-template-columns: 1fr; }
}

/* --- At a Glance ---------------------------------------------------- */

.lv2-aag {
  margin: 0 0 3rem;
}
.lv2-aag__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.lv2-aag__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 30px);
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--lv2-ink);
  font-weight: 600;
}
.lv2-aag__hint {
  margin: 0;
  font-size: 0.92rem;
  color: var(--lv2-ink-soft);
}

.lv2-aag-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.18fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: stretch;
  padding: 1.5rem 1.6rem;
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-lg);
  box-shadow: var(--lv2-shadow-md);
  margin-bottom: 1rem;
}
.lv2-aag-hero__jump {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  background: var(--lv2-terracotta);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(194, 65, 12, 0.25);
  transition: background 140ms ease;
}
.lv2-aag-hero__jump:hover { background: var(--lv2-terracotta-deep); color: #ffffff; }
.lv2-aag-hero__rank-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.25rem;
}
.lv2-aag-hero__rank-num {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5.4vw, 56px);
  line-height: 0.9;
  color: var(--lv2-terracotta);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.lv2-aag-hero__rank-label {
  display: inline-flex;
  padding: 0.25rem 0.65rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--lv2-terracotta-soft);
  color: var(--lv2-terracotta-deep);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.lv2-aag-hero__media {
  background: linear-gradient(135deg, rgba(255, 248, 234, 0.95), rgba(251, 233, 223, 0.6));
  border-radius: var(--lv2-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--lv2-card-border);
}
.lv2-aag-hero__img { max-width: 100%; max-height: 100%; width: auto; display: block; }
.lv2-aag-hero__placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lv2-terracotta-deep);
}
.lv2-aag-hero__placeholder-rank {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lv2-aag-hero__body { display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 2.75rem; }
.lv2-aag-hero__name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 30px);
  margin: 0;
  color: var(--lv2-ink);
  letter-spacing: -0.018em;
  font-weight: 600;
  line-height: 1.1;
}
.lv2-aag-hero__summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lv2-ink-soft);
}
.lv2-aag-hero__price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--lv2-terracotta-deep);
  font-weight: 700;
}
.lv2-aag-hero__score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.lv2-aag-hero__score-value {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.2vw, 44px);
  font-weight: 700;
  color: var(--lv2-terracotta);
  line-height: 1;
  letter-spacing: -0.022em;
}
.lv2-aag-hero__score-denom {
  font-size: 0.95rem;
  color: var(--lv2-ink-faint);
  font-weight: 500;
}
.lv2-aag-hero__score-label {
  margin-left: 0.65rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-ink-faint);
  font-weight: 700;
}
.lv2-aag-hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }

.lv2-rainbow { margin-top: 0.4rem; }
.lv2-rainbow__bars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: end;
  background: var(--lv2-cream);
  border-radius: var(--lv2-radius-sm);
  padding: 0.75rem 0.85rem;
}
.lv2-rainbow__segment {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}
.lv2-rainbow__col {
  height: 56px;
  background: rgba(47, 42, 32, 0.06);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.lv2-rainbow__col-fill {
  display: block;
  width: 100%;
  border-radius: 0 0 6px 6px;
  transition: height 240ms ease;
}
.lv2-rainbow__seg-label {
  font-size: 0.68rem;
  text-align: center;
  line-height: 1.2;
  color: var(--lv2-ink-faint);
}
.lv2-rainbow__seg-name { display: block; font-weight: 600; }
.lv2-rainbow__seg-score {
  display: block;
  font-family: var(--font-heading);
  color: var(--lv2-ink);
  font-weight: 600;
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .lv2-aag-hero {
    grid-template-columns: 1fr;
  }
  .lv2-aag-hero__rank-block {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .lv2-aag-hero__rank-label { margin-top: 0; }
  .lv2-aag-hero__jump {
    position: static;
    align-self: flex-start;
    margin-top: 0.5rem;
  }
  .lv2-aag-hero__body { padding-bottom: 0; }
}

.lv2-aag__rows { display: grid; gap: 0.4rem; }
.lv2-aag-row {
  display: grid;
  grid-template-columns: 44px 88px minmax(0, 1.6fr) minmax(0, 1.3fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-md);
  box-shadow: var(--lv2-shadow-sm);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.lv2-aag-row:hover {
  box-shadow: var(--lv2-shadow-md);
  transform: translateY(-1px);
}
.lv2-aag-row__rank-block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lv2-aag-row__rank {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lv2-sage-deep);
  text-align: center;
  letter-spacing: -0.02em;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lv2-cream);
  border-radius: 50%;
}
.lv2-aag-row__media {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, rgba(255, 248, 234, 0.95), rgba(251, 233, 223, 0.6));
  border-radius: var(--lv2-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lv2-aag-row__img { max-width: 100%; max-height: 100%; width: auto; }
.lv2-aag-row__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lv2-sage-deep);
}
.lv2-aag-row__placeholder-rank {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
}
.lv2-aag-row__body { min-width: 0; }
.lv2-aag-row__name {
  margin: 0 0 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.lv2-aag-row__name a {
  color: var(--lv2-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lv2-aag-row__name a:hover {
  color: var(--lv2-terracotta-deep);
  border-bottom-color: var(--lv2-terracotta);
}
.lv2-aag-row__chips { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin: 0; font-size: 0.8rem; }
.lv2-aag-row__chip {
  color: var(--lv2-ink-soft);
}
.lv2-aag-row__chip-label { color: var(--lv2-ink-faint); font-weight: 600; }
.lv2-aag-row__price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--lv2-terracotta-deep);
  font-size: 1rem;
  margin-top: 0.35rem;
}
.lv2-aag-row__aside { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.lv2-aag-row__cta { display: inline-flex; }
.lv2-aag-row__score {
  font-family: var(--font-heading);
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.lv2-aag-row__score-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--lv2-terracotta);
  letter-spacing: -0.022em;
  line-height: 1;
}
.lv2-aag-row__score-denom {
  font-size: 0.8rem;
  color: var(--lv2-ink-faint);
}

@media (max-width: 820px) {
  .lv2-aag-row {
    grid-template-columns: 36px 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
  }
  .lv2-aag-row__media { width: 64px; height: 64px; }
  .lv2-aag-row__aside {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px dashed var(--lv2-rule);
    padding-top: 0.6rem;
  }
}

/* --- Stars (compact, used in hero + rows + chair sections) ---------- */

.lv2-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.lv2-star-row {
  display: inline-flex;
  gap: 0.1rem;
}
.lv2-star {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: rgba(47, 42, 32, 0.18);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}
.lv2-star--full { background: #f5a44c; }
.lv2-star--half {
  background: linear-gradient(
    to right,
    #f5a44c 50%,
    rgba(47, 42, 32, 0.18) 50%
  );
}
.lv2-star--empty { background: rgba(47, 42, 32, 0.18); }
.lv2-star-numeric {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--lv2-ink);
  font-size: 0.9rem;
}
.lv2-star-count {
  font-size: 0.82rem;
  color: var(--lv2-ink-faint);
}

/* --- CTAs ----------------------------------------------------------- */

.lv2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.78rem 1.2rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease, box-shadow 140ms ease,
              transform 140ms ease;
}
.lv2-cta--primary {
  background: var(--lv2-terracotta);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.22);
}
.lv2-cta--primary:hover {
  background: var(--lv2-terracotta-deep);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(154, 52, 17, 0.28);
}
.lv2-cta--secondary {
  background: transparent;
  color: var(--lv2-sage-deep);
  border-color: rgba(106, 138, 106, 0.45);
}
.lv2-cta--secondary:hover {
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
}
.lv2-cta--compact { padding: 0.55rem 1rem; font-size: 0.85rem; }

/* --- Jump nav strip ------------------------------------------------- */

.lv2-jumpnav {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  margin: 0 0 2.5rem;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-radius: var(--lv2-radius-md);
  border: 1px solid var(--lv2-card-border);
  box-shadow: var(--lv2-shadow-sm);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.lv2-jumpnav__label {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-ink-faint);
  font-weight: 700;
}
.lv2-jumpnav__chips {
  display: inline-flex;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.lv2-jumpnav__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: var(--lv2-cream);
  border: 1px solid var(--lv2-card-border);
  color: var(--lv2-ink-soft);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease;
}
.lv2-jumpnav__chip-rank {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--lv2-sage-deep);
}
.lv2-jumpnav__chip-name { font-weight: 500; }
.lv2-jumpnav__chip:hover {
  background: var(--lv2-sage-soft);
  border-color: rgba(106, 138, 106, 0.45);
  color: var(--lv2-ink);
}
.lv2-jumpnav__chip--active {
  background: var(--lv2-terracotta);
  color: #ffffff;
  border-color: var(--lv2-terracotta-deep);
}
.lv2-jumpnav__chip--active .lv2-jumpnav__chip-rank {
  color: #ffffff;
}

/* --- Lead prose ----------------------------------------------------- */

.lv2-lead {
  max-width: 760px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--lv2-ink);
}
.lv2-lead p { margin: 0 0 1.2rem; }

/* --- Per-chair two-column framework -------------------------------- */

.lv2-chairs { display: flex; flex-direction: column; gap: 4rem; }
.lv2-chair {
  scroll-margin-top: 80px;
  padding-top: 0.5rem;
}
.lv2-chair__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.lv2-chair__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--lv2-radius-sm);
  background: var(--lv2-terracotta);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(194, 65, 12, 0.22);
}
.lv2-chair__name {
  font-family: var(--font-heading);
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.02em;
  color: var(--lv2-ink);
  font-weight: 600;
  line-height: 1.1;
}

.lv2-chair__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}
@media (max-width: 880px) {
  .lv2-chair__columns { grid-template-columns: 1fr; gap: 1.75rem; }
}

.lv2-chair__left {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--lv2-ink);
}
.lv2-chair__opener { margin: 0; }
.lv2-chair__sub-h {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--lv2-ink);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.lv2-chair__why {
  background: var(--lv2-cream);
  border-radius: var(--lv2-radius-md);
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--lv2-card-border);
}
.lv2-chair__why .ergo-diagram-figure {
  margin: 0.5rem 0 0;
  background: transparent;
  border: none;
  padding: 0;
}
.lv2-chair__tradeoffs p { margin: 0; }
.lv2-chair__insight {
  background: var(--lv2-sage-soft);
  border-radius: var(--lv2-radius-md);
  padding: 1rem 1.25rem;
  margin: 0;
  border: 1px solid rgba(106, 138, 106, 0.25);
}
.lv2-chair__insight-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-sage-deep);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.lv2-chair__insight-text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--lv2-ink);
}

.lv2-chair__verdict {
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--lv2-shadow-sm);
}
.lv2-chair__verdict-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-ink-faint);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.lv2-chair__verdict-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.lv2-chair__verdict-score {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.lv2-chair__verdict-num {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--lv2-terracotta);
  line-height: 1;
  letter-spacing: -0.022em;
}
.lv2-chair__verdict-denom {
  font-size: 0.9rem;
  color: var(--lv2-ink-faint);
}
.lv2-chair__verdict-name {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-ink-faint);
  font-weight: 700;
  margin-left: 0.4rem;
}
.lv2-chair__verdict-body {
  margin: 0;
  font-size: 0.92rem;
  color: var(--lv2-ink-soft);
  flex: 1 1 14rem;
}

/* --- Pull-quote (editorial italic) ---------------------------------- */

.lv2-pullquote {
  position: relative;
  margin: 0.5rem 0 0.25rem;
  padding: 1.5rem 1rem 1rem 3rem;
  background: var(--lv2-cream);
  border-radius: var(--lv2-radius-md);
  border-left: 3px solid var(--lv2-terracotta);
}
.lv2-pullquote__mark {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 0.7;
  color: var(--lv2-terracotta);
  font-style: italic;
  font-weight: 700;
  user-select: none;
}
.lv2-pullquote__text {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.45;
  color: var(--lv2-ink);
  font-weight: 500;
}
.lv2-pullquote__cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lv2-ink-faint);
  font-weight: 700;
  font-family: var(--font-body);
}

/* --- Right (spec card) column -------------------------------------- */

.lv2-chair__right {
  position: sticky;
  top: 96px;
  background: var(--lv2-card-bg);
  border: 1px solid var(--lv2-card-border);
  border-radius: var(--lv2-radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: var(--lv2-shadow-md);
}
@media (max-width: 880px) {
  .lv2-chair__right { position: static; top: auto; }
}
.lv2-chair__media {
  background: linear-gradient(135deg, rgba(255, 248, 234, 0.95), rgba(251, 233, 223, 0.6));
  border-radius: var(--lv2-radius-md);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--lv2-card-border);
}
.lv2-chair__img { max-width: 100%; max-height: 240px; width: auto; }
.lv2-chair__placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lv2-terracotta-deep);
  text-align: center;
}
.lv2-chair__placeholder-rank {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.lv2-chair-glyph { width: 96px; height: 96px; margin-top: 0.5rem; }

.lv2-chair__quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lv2-chair__quick-price {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lv2-terracotta-deep);
  letter-spacing: -0.01em;
}
.lv2-chair__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lv2-specs { display: flex; flex-direction: column; }
.lv2-specs__head,
.lv2-chair__balance-head,
.lv2-chair__fit-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lv2-sage-deep);
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lv2-chair__fit-head--warn { color: var(--lv2-terracotta-deep); }
.lv2-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  font-size: 0.88rem;
}
.lv2-specs__row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px dotted var(--lv2-rule);
  padding-bottom: 0.4rem;
}
.lv2-specs__label {
  color: var(--lv2-ink-faint);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lv2-specs__value { color: var(--lv2-ink); font-weight: 500; }

.lv2-chair__balance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.lv2-chair__balance-col {
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .lv2-chair__balance { grid-template-columns: 1fr; }
}
.lv2-pros,
.lv2-tradeoffs,
.lv2-ideal,
.lv2-not-ideal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lv2-pros__item,
.lv2-tradeoffs__item,
.lv2-ideal__item,
.lv2-not-ideal__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.45;
}
.lv2-pros__icon,
.lv2-ideal__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lv2-sage-soft);
  color: var(--lv2-sage-deep);
  font-size: 11px;
  font-weight: 700;
  margin-top: 0.15rem;
}
.lv2-tradeoffs__icon,
.lv2-not-ideal__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lv2-terracotta-soft);
  color: var(--lv2-terracotta-deep);
  font-size: 13px;
  font-weight: 700;
  margin-top: 0.15rem;
  line-height: 1;
}
.lv2-pros__text,
.lv2-tradeoffs__text,
.lv2-ideal__text,
.lv2-not-ideal__text { color: var(--lv2-ink); }

.lv2-chair__fit + .lv2-chair__fit { margin-top: 0.25rem; }