/* WhatCanHelp.com — Field Manual: editorial AT reference */

/* ── Self-hosted fonts (latin subset). Replaces Google Fonts to eliminate
   third-party render-blocking + the font-swap CLS that was killing Core
   Web Vitals (header/main shifts up to 0.59). Fraunces (variable, used
   for the wordmark) uses `optional` so the hero wordmark never reflows —
   fallback shows on first uncached visit, real font on subsequent loads.
   Body serif uses `swap` with a size-adjusted Georgia fallback (metrics
   tuned to match Source Serif 4) so any swap is visually imperceptible. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic-var.woff2') format('woff2');
}
/* Metric-matched fallback for Source Serif 4 — values tuned so Georgia
   occupies the same vertical/horizontal box. Eliminates visible reflow
   when the real font swaps in. */
@font-face {
  font-family: 'Source Serif Fallback';
  src: local('Georgia');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-tight-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

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

/* Font size scaling — applied to html, cascades everywhere */
html { font-size: 100%; } /* 16px default */
html[data-font-size="1"] { font-size: 112.5%; } /* 18px */
html[data-font-size="2"] { font-size: 125%; }   /* 20px */

:root {
  /* Surfaces — warm paper */
  --color-bg: #f5f1ea;
  --color-surface: #fbf8f1;
  --color-text: #1f1a14;
  --color-text-secondary: #3a342b;
  --color-text-muted: #6b6357;
  --color-invert: #fbf8f1;

  /* Accent — terracotta, 4.77:1 on cream bg (WCAG AA compliant) */
  --color-primary: #a8522f;
  --color-primary-dark: #7a3d25;
  --color-primary-light: oklch(0.92 0.04 38);
  --color-accent: #a8522f;
  --color-accent-light: oklch(0.97 0.02 38);
  --color-border: rgba(31,26,20,0.14);
  --color-border-light: rgba(31,26,20,0.08);

  /* Complexity tier colors — adapted to warm palette, all meet 4.5:1 */
  --tier-self-bg: oklch(0.94 0.04 145);
  --tier-self-fg: oklch(0.35 0.10 145);
  --tier-guided-bg: oklch(0.94 0.04 85);
  --tier-guided-fg: oklch(0.40 0.10 85);
  --tier-pro-rec-bg: oklch(0.94 0.04 55);
  --tier-pro-rec-fg: oklch(0.40 0.12 38);
  --tier-pro-req-bg: oklch(0.94 0.04 25);
  --tier-pro-req-fg: oklch(0.40 0.13 25);

  /* Legacy aliases */
  --tier-self: oklch(0.55 0.10 145);
  --tier-guided: oklch(0.55 0.10 85);
  --tier-pro-rec: oklch(0.55 0.12 38);
  --tier-pro-req: oklch(0.55 0.13 25);

  /* Semantic colors */
  --color-price: oklch(0.45 0.10 145);
  --color-badge-new: oklch(0.58 0.13 38);

  --radius: 3px;
  --shadow: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-lg: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.04);
  --max-width: 1100px;
  /* Data-dense pages (browse table, compare matrix, status, shortlist)
     opt into a wider cap so 1440px+ screens don't waste 800px of margin. */
  --max-width-wide: 1440px;

  /* Typography stack — Field Manual direction */
  --font: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Fallback', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  color-scheme: light dark;
}

/* ── Dark theme — warm dark leather ── */
[data-theme="dark"] {
  --color-bg: #1a1712;
  --color-surface: #262119;
  --color-text: #ede8df;
  --color-text-secondary: #c5bfb6;
  --color-text-muted: #928a7f;
  --color-invert: #1a1712;

  /* Terracotta — higher chroma + warmer hue keeps the punch on dark backgrounds */
  --color-primary: oklch(0.68 0.16 40);
  --color-primary-dark: oklch(0.76 0.12 40);
  --color-primary-light: oklch(0.24 0.05 40);
  --color-accent: oklch(0.68 0.16 40);
  --color-accent-light: oklch(0.24 0.05 40);
  --color-border: rgba(237,232,223,0.14);
  --color-border-light: rgba(237,232,223,0.08);

  --tier-self-bg: oklch(0.22 0.04 145);
  --tier-self-fg: oklch(0.72 0.10 145);
  --tier-guided-bg: oklch(0.22 0.04 85);
  --tier-guided-fg: oklch(0.72 0.10 85);
  --tier-pro-rec-bg: oklch(0.24 0.04 55);
  --tier-pro-rec-fg: oklch(0.72 0.10 40);
  --tier-pro-req-bg: oklch(0.22 0.04 25);
  --tier-pro-req-fg: oklch(0.72 0.12 30);

  --tier-self: oklch(0.68 0.10 145);
  --tier-guided: oklch(0.68 0.10 85);
  --tier-pro-rec: oklch(0.68 0.10 40);
  --tier-pro-req: oklch(0.68 0.12 30);

  --color-price: oklch(0.70 0.10 145);
  --color-badge-new: oklch(0.70 0.14 40);

  --shadow: 0 1px 0 rgba(0,0,0,0.2);
  --shadow-lg: 0 1px 0 rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);

  color-scheme: dark;
}

/* Dark overrides for hardcoded colors */
[data-theme="dark"] .disclaimer {
  background: oklch(0.22 0.03 65);
  border-color: oklch(0.30 0.04 65);
  color: oklch(0.75 0.08 65);
}
[data-theme="dark"] .results-warning {
  background: oklch(0.22 0.03 65);
  border-left-color: var(--color-accent);
  color: oklch(0.75 0.08 65);
}
[data-theme="dark"] .pro-callout {
  background: oklch(0.20 0.03 38);
  border-color: oklch(0.28 0.05 38);
  border-left-color: var(--tier-pro-rec);
}
[data-theme="dark"] .result-row-watchout {
  background: oklch(0.22 0.03 38);
  color: var(--color-accent);
}
[data-theme="dark"] .result-row-setup {
  background: var(--color-bg);
}
[data-theme="dark"] img {
  opacity: 0.92;
  border-radius: var(--radius);
}
/* Soften white-background product photos in dark mode */
[data-theme="dark"] .product-card img,
[data-theme="dark"] .highlights-card img {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}
html { font-size: 106.25%; scroll-behavior: smooth; } /* 17px base — slightly larger for AT audience */

body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Focus styles — terracotta ring ── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-text);
  color: var(--color-invert);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  z-index: 100;
  font-weight: 600;
  font-family: var(--font);
}
.skip-link:focus { top: 1rem; }
/* #main is a skip-link target (tabindex="-1"); it receives focus only when the
   skip link is activated. Suppress the outline on the whole container — the
   affordance is the content scrolling into view, not a ring around <main>. */
#main:focus { outline: none; }

/* ── Typography — Field Manual ── */
h1 { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.3; margin-bottom: 0.5rem; }
h3 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
p + p { margin-top: 0.75rem; }
a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: var(--color-primary-dark); }

/* Eyebrow label pattern — mono uppercase, used throughout */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Layout ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; width: 100%; overflow-x: clip; }
/* Pages that benefit from more horizontal room — set via body.page-* hooks
   already emitted by the layout. Reading-heavy pages keep --max-width. */
body.page-browse .container,
body.page-compare .container,
body.page-shortlist .container,
body.page-status .container { max-width: var(--max-width-wide); }
main { flex: 1; padding: 2rem 0; }
img { max-width: 100%; height: auto; }

/* ── Header — Field Manual editorial chrome ── */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.site-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-logo:hover { color: var(--color-primary-dark); }
/* Hide nav logo while home page hero wordmark is visible — JS toggles .hero-hidden on the logo directly */
.site-logo.hero-hidden { opacity: 0; pointer-events: none; }

/* Brand lockup: wordmark + tagline for hero/about contexts */
.brand-lockup {
  text-align: center;
}
.brand-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
.brand-wordmark--hero {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}
.brand-wordmark--page {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.01em;
  margin: 0.15rem 0 0;
}
.site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--color-text); }
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
}

/* Resources nav dropdown — same disclosure pattern as the settings menu,
   but styled to read as a nav link, not a button */
.nav-menu {
  position: relative;
}
.nav-menu-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.nav-menu-btn:hover { color: var(--color-text); }
.nav-menu-btn-active {
  color: var(--color-text);
  font-weight: 600;
}
.nav-menu-chevron {
  font-size: 0.7em;
  line-height: 1;
}
.nav-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  padding: 0.4rem;
  min-width: 200px;
}
.nav-menu-dropdown a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-menu-dropdown a:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.site-nav .nav-menu-dropdown a[aria-current="page"] {
  border-bottom: none;
  padding-bottom: 0.5rem;
  background: var(--color-bg);
}

/* Display settings menu (theme + font size) */
.a11y-menu {
  position: relative;
}
.a11y-menu-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--color-text-muted);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.a11y-menu-btn .settings-icon {
  flex-shrink: 0;
}
.a11y-menu-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.a11y-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  padding: 0.6rem 0.75rem;
  min-width: 160px;
}
.a11y-section {
  margin-bottom: 0.5rem;
}
.a11y-section:last-child {
  margin-bottom: 0;
}
.a11y-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.a11y-theme-row {
  display: flex;
  gap: 0.25rem;
}
.a11y-theme-btn {
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1;
  transition: border-color 0.15s, background 0.15s;
}
.a11y-theme-btn:hover {
  background: var(--color-primary-light);
}
.a11y-theme-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.a11y-font-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.a11y-font-btn {
  background: none;
  border: none;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font);
  color: var(--color-text-muted);
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.a11y-font-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.a11y-font-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.a11y-font-btn + .a11y-font-btn {
  border-left: 1px solid var(--color-border-light);
}

/* Toggle switch for a11y panel */
.a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0.5rem;
}
.a11y-toggle-row .a11y-label { margin-bottom: 0; }
.a11y-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y-switch {
  width: 32px;
  height: 18px;
  background: var(--color-border);
  border-radius: 9px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.a11y-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--color-surface);
  border-radius: 50%;
  transition: transform 0.15s;
}
.a11y-checkbox:checked + .a11y-switch {
  background: var(--color-primary);
}
.a11y-checkbox:checked + .a11y-switch::after {
  transform: translateX(14px);
}
.a11y-checkbox:focus-visible + .a11y-switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Line spacing levels */
html[data-line-spacing="1"] { --line-spacing: 1.9; }
html[data-line-spacing="2"] { --line-spacing: 2.2; }
html[data-line-spacing] body { line-height: var(--line-spacing); }

/* Reduce motion — override all transitions/animations */
html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ── Footer — editorial ── */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-content > span {
  font-family: var(--font-serif);
}
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--color-text-muted); font-size: 0.82rem; text-decoration: none; }
.footer-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Disclaimer banner ── */
.disclaimer {
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

/* ── Next steps (intake results) ── */
.next-steps {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.next-steps h3 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.next-steps-list li {
  font-size: 0.9rem;
  line-height: 1.5;
}
.next-steps-list li strong {
  display: inline;
}
.next-steps-list li a {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
}

/* ── Hero ── */
.hero {
  text-align: center;
  padding: 3rem 0 2rem;
}
.hero h1 { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.hero p { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.55; }

/* ── Intake ── */
.intake-form {
  max-width: 640px;
  margin: 0 auto;
}
.intake-input-wrap {
  display: flex;
  gap: 0.5rem;
}
.intake-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 2.75rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.intake-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.intake-submit {
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.12s, border-color 0.12s;
}
.intake-submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.intake-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.starter-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.starter-prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-family: var(--font);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.starter-prompt:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ── Conversation ── */
.conversation { max-width: 640px; margin: 1.5rem auto 0; }
.conversation-turn {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.conversation-turn[data-role="user"] {
  background: var(--color-primary-light);
  margin-left: 2rem;
  font-family: var(--font-serif);
}
.conversation-turn[data-role="assistant"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-right: 2rem;
  font-family: var(--font-serif);
}
.retry-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0.15rem;
}
.retry-btn:hover { opacity: 0.85; }
.conversation-loading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.loading-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dot-pulse { display: inline-flex; gap: 4px; }
.dot-pulse span {
  width: 6px; height: 6px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: dotpulse 1.2s infinite;
}
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotpulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.loading-estimate {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-top: 0.25rem;
}
.result-row-less-relevant {
  opacity: 0.55;
  border-left: 3px solid var(--color-border);
}

/* ── Results ── */
.results-section {
  margin-top: 2rem;
}
.results-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.results-narrative {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  line-height: 1.75;
  font-size: 0.95rem;
  color: var(--color-text);
}
.narrative-citation-link {
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-primary);
  cursor: pointer;
  transition: border-color 0.12s;
}
.narrative-citation-link:hover {
  border-bottom-style: solid;
}
.narrative-citation-link sup {
  font-family: var(--font-sans);
  font-size: 0.7em;
  color: var(--color-primary);
  margin-left: 1px;
}
.citation-num {
  color: var(--color-primary);
  font-weight: 700;
}
.results-divider {
  text-align: center;
  margin: 1.5rem 0 1rem;
  position: relative;
}
.results-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--color-border);
}
.results-divider span {
  position: relative;
  background: var(--color-bg);
  padding: 0 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.results-warnings {
  margin-top: 0.5rem;
}
.results-warning {
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  font-family: var(--font-serif);
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Product grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
  list-style: none;
}

/* ── Product card ── */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.12s;
  overflow: hidden;
  min-width: 0;
  position: relative;
}
.product-card:hover {
  border-color: var(--color-text-muted);
}
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Stretched link: the whole card is one click target, not just image + title.
   The shortlist button sits above the overlay via z-index so it keeps its
   own behavior. */
.product-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Shortlist toggle sits in-flow at the end of the bottom badge row —
   the absolute thumbnail overlay collided with long product names. */
.product-card .shortlist-btn-wrap {
  margin-left: auto;
  padding: 0;
  position: relative;
  z-index: 1; /* above the stretched card link */
}
.shortlist-btn-compact {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card-thumb-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.product-card-thumb {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg);
  border-radius: 6px;
  display: block;
}
/* Placeholder when no image — typographic tile, category-tinted.
   Grid with a shrinkable middle row honors the parent's aspect-ratio:
   flex would let tall content blow the tile past 4/3, leaving the name unclamped. */
div.product-card-thumb,
.thumb-placeholder {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  text-align: center;
  padding: 0.7rem 0.65rem;
  background: var(--ph-tint, var(--color-bg));
  border: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Required: grid (like flex) defaults to min-height:auto, which lets content blow past aspect-ratio */
  min-height: 0;
  min-width: 0;
  /* Container queries below shrink/hide bits when the tile is small (featured/recent) */
  container-type: inline-size;
}
.thumb-placeholder-category {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* No opacity here: muted text at 0.7 opacity over the tinted placeholder
     dropped below the WCAG AA contrast floor (caught by the a11y gate). Full
     muted color over the light tints clears 4.5:1. */
  color: var(--color-text-muted);
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wrapper is the grid item — flex column lets the name span actually obey
   line-clamp (which needs an explicit display:-webkit-box on the clamped el). */
.thumb-placeholder-name-wrap {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 0.3rem 0;
  overflow: hidden;
}
.thumb-placeholder-name {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-secondary);
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Tight tiles (featured/recent cards on landing, narrow grid items): drop to
   two name lines, shrink type, hide manufacturer so rows don't overlap. */
@container (max-width: 200px) {
  .thumb-placeholder { padding: 0.45rem 0.4rem; }
  .thumb-placeholder-category { font-size: 0.55rem; letter-spacing: 0.06em; }
  .thumb-placeholder-name { font-size: 0.72rem; -webkit-line-clamp: 2; }
  .thumb-placeholder-mfr { display: none; }
}
/* On the larger detail-page tile, scale up the font and let the wrap show more lines */
.product-detail-thumb.thumb-placeholder .thumb-placeholder-name {
  font-size: 1.05rem;
}
.product-detail-thumb.thumb-placeholder .thumb-placeholder-name-wrap {
  max-height: calc(1.05rem * 1.2 * 7 + 0.6rem);
}
.thumb-placeholder-mfr {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
/* Category tints — light mode: soft pastels with enough chroma to read as color */
.thumb-placeholder[data-category="low_vision_aid"],
.thumb-placeholder[data-category="magnification"] { --ph-tint: oklch(0.93 0.06 75); }
.thumb-placeholder[data-category="braille_display"],
.thumb-placeholder[data-category="screen_reader"] { --ph-tint: oklch(0.92 0.05 250); }
.thumb-placeholder[data-category="hearing_aid"],
.thumb-placeholder[data-category="amplified_phone"],
.thumb-placeholder[data-category="assistive_listening_system"],
.thumb-placeholder[data-category="alerting_system"] { --ph-tint: oklch(0.93 0.06 200); }
.thumb-placeholder[data-category="aac_device"] { --ph-tint: oklch(0.93 0.07 160); }
.thumb-placeholder[data-category="accessible_software"] { --ph-tint: oklch(0.93 0.055 290); }
.thumb-placeholder[data-category="alternative_input"],
.thumb-placeholder[data-category="switch"],
.thumb-placeholder[data-category="mounting"],
.thumb-placeholder[data-category="environmental_control"] { --ph-tint: oklch(0.92 0.05 230); }
.thumb-placeholder[data-category="sensory_tool"],
.thumb-placeholder[data-category="daily_living"] { --ph-tint: oklch(0.93 0.07 130); }
.thumb-placeholder[data-category="mobility_device"] { --ph-tint: oklch(0.92 0.075 40); }

/* Dark mode — keep the hue, drop lightness so it reads as a deep saturated wash */
[data-theme="dark"] .thumb-placeholder[data-category="low_vision_aid"],
[data-theme="dark"] .thumb-placeholder[data-category="magnification"] { --ph-tint: oklch(0.30 0.06 75); }
[data-theme="dark"] .thumb-placeholder[data-category="braille_display"],
[data-theme="dark"] .thumb-placeholder[data-category="screen_reader"] { --ph-tint: oklch(0.28 0.06 250); }
[data-theme="dark"] .thumb-placeholder[data-category="hearing_aid"],
[data-theme="dark"] .thumb-placeholder[data-category="amplified_phone"],
[data-theme="dark"] .thumb-placeholder[data-category="assistive_listening_system"],
[data-theme="dark"] .thumb-placeholder[data-category="alerting_system"] { --ph-tint: oklch(0.30 0.06 200); }
[data-theme="dark"] .thumb-placeholder[data-category="aac_device"] { --ph-tint: oklch(0.30 0.07 160); }
[data-theme="dark"] .thumb-placeholder[data-category="accessible_software"] { --ph-tint: oklch(0.30 0.06 290); }
[data-theme="dark"] .thumb-placeholder[data-category="alternative_input"],
[data-theme="dark"] .thumb-placeholder[data-category="switch"],
[data-theme="dark"] .thumb-placeholder[data-category="mounting"],
[data-theme="dark"] .thumb-placeholder[data-category="environmental_control"] { --ph-tint: oklch(0.28 0.05 230); }
[data-theme="dark"] .thumb-placeholder[data-category="sensory_tool"],
[data-theme="dark"] .thumb-placeholder[data-category="daily_living"] { --ph-tint: oklch(0.30 0.07 130); }
[data-theme="dark"] .thumb-placeholder[data-category="mobility_device"] { --ph-tint: oklch(0.30 0.075 40); }
/* Table view — too small for the full layout; show category chip only */
.product-table-thumb.thumb-placeholder { padding: 0.25rem; }
.product-table-thumb.thumb-placeholder .thumb-placeholder-name,
.product-table-thumb.thumb-placeholder .thumb-placeholder-mfr { display: none; }
.product-table-thumb.thumb-placeholder .thumb-placeholder-category {
  font-size: 0.5rem;
  line-height: 1.05;
}
.product-card-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.product-card-desc {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.product-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.9rem;
  padding-bottom: 1.4rem;
}
/* Product lifecycle badges */
.product-badge-new {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-badge-new);
  color: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.product-badge-discontinued {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-text-muted);
  color: var(--color-surface);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.product-card-discontinued {
  opacity: 0.6;
}
.product-card-discontinued:hover {
  opacity: 0.85;
}

.product-card-manufacturer {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}
.manufacturer-chip:hover {
  background: var(--color-accent);
  color: #fff;
}
.manufacturer-chip {
  display: inline-block;
  font-size: inherit;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  text-decoration: none;
  transition: background 0.15s;
}
.product-card-price {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(31, 26, 20, 0.72);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  line-height: 1.2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.price-change {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  margin-left: 0.3em;
  vertical-align: baseline;
  opacity: 0.9;
}
/* On card thumbnail overlays (white text on dark bg) */
.product-card-price .price-drop,
.highlight-card-price .price-drop { color: #4ade80; }
.product-card-price .price-rise,
.highlight-card-price .price-rise { color: #fca5a5; }
/* Everywhere else (dark text on light bg) */
.price-drop { color: var(--tier-self, #16a34a); }
.price-rise { color: var(--tier-pro-req, #dc2626); }
.match-reasons {
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  margin-top: 0.25rem;
}

/* ── Price reference chips ── */
.price-ref-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.price-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
}
.price-ref-chip strong {
  font-weight: 600;
}
.price-ref-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.price-ref-refurbished {
  border-color: var(--tier-guided);
}
.price-ref-used {
  border-color: var(--color-border);
}

/* ── Freshness badge ── */
.product-card-freshness {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
  padding: 0;
}
.product-card-freshness.freshness-fresh { color: var(--tier-self); }
.product-card-freshness.freshness-aging { color: var(--color-text-muted); }
.product-card-freshness.freshness-stale { color: var(--tier-pro-req); }

/* ── Complexity badge ── */
.complexity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: right;
}
.complexity-badge[data-tier="self_serve"] { background: var(--tier-self-bg); color: var(--tier-self-fg); }
.complexity-badge[data-tier="guided_setup"] { background: var(--tier-guided-bg); color: var(--tier-guided-fg); }
.complexity-badge[data-tier="professional_recommended"] { background: var(--tier-pro-rec-bg); color: var(--tier-pro-rec-fg); }
.complexity-badge[data-tier="professional_required"] { background: var(--tier-pro-req-bg); color: var(--tier-pro-req-fg); }

/* Bottom row — freshness left, complexity right */
.product-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
}

.complexity-tooltip {
  position: relative;
  cursor: help;
}
.complexity-tooltip .tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  /* --tip-shift is set by tooltip-flip.js to nudge the tooltip back on-screen
     when a chip near the viewport edge would otherwise clip off the side. */
  left: calc(50% + var(--tip-shift, 0px));
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #f5f5f5;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 400;
  width: max-content;
  max-width: min(250px, calc(100vw - 24px));
  /* Above sticky .site-header (z-index: 50) so the tooltip isn't obscured */
  z-index: 60;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.complexity-tooltip:hover .tooltip-text,
.complexity-tooltip:focus-within .tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.complexity-tooltip .tooltip-text.tooltip-below {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.complexity-tooltip:hover .tooltip-text.tooltip-below,
.complexity-tooltip:focus-within .tooltip-text.tooltip-below {
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .complexity-tooltip .tooltip-text { transition: none; transform: translateX(-50%); }
  .complexity-tooltip:hover .tooltip-text,
  .complexity-tooltip:focus-within .tooltip-text { transform: translateX(-50%); }
}

/* ── Browse search ── */
/* ── Browse header row: title + search side by side ── */
.browse-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.browse-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.browse-disclaimer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}
.browse-disclaimer a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.browse-search {
  flex: 0 0 320px;
  position: relative;
}
.browse-search-listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  max-height: 360px;
  overflow-y: auto;
}
.browse-search-listbox[hidden] {
  display: none;
}
.browse-search-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  color: var(--color-text);
}
.browse-search-option:hover,
.browse-search-option.is-selected {
  background: var(--color-primary-light);
}
.browse-search-option-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-surface-alt, #f5f5f5);
  flex-shrink: 0;
}
.browse-search-option-img--placeholder {
  display: inline-block;
}
.browse-search-option-text {
  min-width: 0;
  flex: 1;
}
.browse-search-option-name {
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-search-option-mfr {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-search input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-family: var(--font);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.browse-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.browse-search input[type="search"]::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
/* ── Related product cards ── */
.related-card {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}
/* Each "Works With" group caps at 9 cards; the rest reveal on "Show N more". */
.related-card-hidden { display: none; }
.related-grid.is-expanded .related-card-hidden { display: flex; }
.related-show-more { margin-top: 0.6rem; }
.related-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}
.related-card-thumb {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg);
  border-radius: 4px;
  flex-shrink: 0;
}
.related-card-info {
  min-width: 0;
}
.related-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-card-mfr {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.related-card-price {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* ── Flag listing ── */
.flag-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.flag-btn:hover {
  color: var(--color-accent);
  background: var(--color-accent-light);
}
.flag-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.flag-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Flag modal */
.flag-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.flag-modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 100%;
  padding: 1.5rem;
}
.flag-modal h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.flag-modal fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}
.flag-modal legend {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.flag-modal label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.flag-modal input[type="radio"] {
  accent-color: var(--color-primary);
}
.flag-modal textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  background: var(--color-bg);
  color: var(--color-text);
}
.flag-modal textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}
.flag-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.flag-modal-actions button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.flag-submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-weight: 600;
}
.flag-submit:hover { background: var(--color-primary-dark); }
.flag-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.flag-cancel {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.flag-cancel:hover { background: var(--color-bg); }
.flag-success {
  text-align: center;
  padding: 1rem 0;
  color: var(--tier-self);
  font-weight: 600;
}

/* ── Skeleton loading ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}
.skeleton {
  background: var(--color-border-light);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
}
.skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
}
.skeleton-badge {
  height: 1.5rem;
  border-radius: 2rem;
}
.skeleton-card {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.25; }
}

/* ── Load more (infinite scroll) ── */
.load-more-sentinel {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}
.load-more-btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-family: var(--font);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.load-more-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* ── Browse page ── */
.browse-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}
.browse-sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1rem 1.25rem 1rem 0;
  position: sticky;
  top: 4rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
/* Saved searches — sits above the dimension panels. Visual
   weight matches a facet-group so it doesn't fight the rest of the rail. */
.saved-searches {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.saved-searches-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.saved-searches-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saved-searches-item {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}
.saved-searches-apply {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.82rem;
  font-family: var(--font);
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-searches-apply:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.saved-searches-apply:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.saved-searches-rename,
.saved-searches-remove {
  flex: 0 0 auto;
  width: 1.6rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.saved-searches-rename {
  font-size: 0.85rem;
}
.saved-searches-rename:hover,
.saved-searches-remove:hover {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.facet-group {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.5rem;
}
.facet-group:last-child { margin-bottom: 0; border-bottom: none; }
.facet-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.facet-title::before {
  content: '▸';
  font-size: 0.65rem;
  transition: transform 0.15s;
}
.facet-group[open] > .facet-title::before {
  transform: rotate(90deg);
}
/* Hide default <details> marker */
.facet-title::-webkit-details-summary {
  display: none;
}
.facet-active-badge {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.facet-clear {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  margin-left: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
}
.facet-clear:hover { text-decoration: underline; }
.facet-list {
  list-style: none;
  padding-top: 0.25rem;
}
.facet-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}
.facet-item[hidden] {
  display: none;
}
.facet-item label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
/* Facet search (manufacturer filter) */
.facet-search {
  padding: 0.25rem 0;
}
.facet-search-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  font-size: 0.82rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.facet-search-input:focus {
  border-color: var(--color-primary);
  outline: none;
}
.facet-search-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* "Show N more" toggle */
.facet-show-more {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0;
  display: block;
}
.facet-show-more:hover {
  text-decoration: underline;
}

.facet-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin-left: auto;
}
.mobile-filter-toggle {
  display: none;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  text-align: left;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  color: var(--color-primary-dark);
}
.filter-pill-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-primary-dark);
  padding: 0;
}
.filter-pill-remove:hover { color: var(--tier-pro-req); }

.browse-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.browse-results-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.browse-sort { margin-left: auto; }
.browse-sort select {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
}

/* ── View toggle ── */
.view-toggle {
  display: flex;
  gap: 0.25rem;
}
.view-toggle-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.view-toggle-btn.active {
  background: var(--color-text);
  color: var(--color-invert);
  border-color: var(--color-text);
}
.view-toggle-btn:hover:not(.active) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ── Product table ── */
.product-table-wrap {
  width: 100%;
  /* Intentionally NO overflow here at desktop: it would create a scroll
     container that captures position:sticky on thead, breaking the
     "pin under the site header" behavior. The table fits at desktop;
     narrow viewports drop min-width to 0 (see mobile block) so no scroll
     is needed there either. The browse table also hides one column
     between 1024–1439 to guarantee fit. */
}
.product-table {
  width: 100%;
  /* 8 cols — keep enough room that cells don't cramp at the
     1100px breakpoint where this view becomes the default. Wrap scrolls
     horizontally if the viewport falls below this. */
  min-width: 820px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.product-table th,
.product-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.product-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-bg);
  position: sticky;
  /* Pin below the sticky .site-header. Header height is JS-measured into
     --site-header-h (see layout.js); fallback used until that script runs. */
  top: var(--site-header-h, 4.5rem);
  z-index: 5; /* above tbody rows; below .site-header (z-index 50) */
  /* The thead's bottom border + a paint backdrop so row text never bleeds
     through the sticky header during scroll. */
  box-shadow: 0 1px 0 var(--color-border);
  white-space: nowrap;
}
.product-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.product-table th.sortable:hover {
  color: var(--color-primary-dark);
}
.product-table th.sortable::after {
  content: ' ↕';
  font-size: 0.65rem;
  opacity: 0.4;
}
.product-table th.sort-asc::after {
  content: ' ↑';
  opacity: 1;
}
.product-table th.sort-desc::after {
  content: ' ↓';
  opacity: 1;
}
.product-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.product-table tbody tr:hover {
  background: rgba(31,26,20,0.02);
}
[data-theme="dark"] .product-table tbody tr:hover {
  background: rgba(240,236,228,0.04);
}
.product-table-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
/* Cap the Product column so long titles don't push Updated/Actions
   off-viewport. Width on the th is the auto-table-layout knob that
   actually constrains the column (max-width on the td is ignored).
   18rem at <1440px so all 8 cols fit at the 1280px breakpoint; relax
   to 22rem on wider screens where the wide-container kicks in. */
.product-table th.col-name { width: 18rem; }
@media (min-width: 1440px) {
  .product-table th.col-name { width: 22rem; }
}
/* Tablet / narrow desktop (1024–1439): the sidebar leaves only ~980px
   for the table, which 8 cols can't fit. Drop Price band — the actual
   Price (often shown in the row body) and Updated are higher-signal
   for the pro audience. Re-appears at 1440+ when the wide container
   gives the table room. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .product-table th.col-priceband,
  .product-table td.col-priceband { display: none; }
}
.product-table-name a {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* No overflow-wrap:anywhere — that lets the auto-layout algorithm shrink
     the column to one-character min-content. */
}
.product-table-name a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.product-table-thumb {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg);
  border-radius: 6px;
  flex-shrink: 0;
}
.product-table-thumb-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
/* Hover-card preview pops to the RIGHT of the small thumb. Leftward
   positioning collided with the 240px sidebar and overflowed the viewport.
   ~280ms intent-delay on entry kills accidental cursor-pass triggers.
   The whole card is an anchor — clicks open the product page. */
.thumb-preview {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  left: calc(100% + 10px);
  width: 360px;
  /* Parent .product-table-thumb-wrap sets line-height:0 to kill image
     baseline-gap; reset it here so text rows in the card don't collapse. */
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  visibility: hidden;
  transform-origin: left center;
  transition: transform 80ms ease-out, visibility 0s linear 80ms;
  /* Above sticky thead but below .site-header (z-index 50) */
  z-index: 49;
}
/* Transparent bridge so the cursor can travel from the thumb into the card
   without crossing a hover-killing gap. */
.thumb-preview::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 100%;
}
.thumb-preview .ptp-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg);
}
.thumb-preview .ptp-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem 0.85rem;
}
.thumb-preview .ptp-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-text);
}
.thumb-preview .ptp-mfr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.thumb-preview .ptp-desc {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb-preview .ptp-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.thumb-preview .ptp-price {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.thumb-preview .ptp-price-change {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.thumb-preview .ptp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.thumb-preview .ptp-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-light);
}
.thumb-preview .ptp-freshness {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.product-table-thumb-wrap:hover .thumb-preview,
.product-table-thumb-wrap:focus-within .thumb-preview {
  visibility: visible;
  transform: translateY(-50%) scale(1);
  /* Entry: 280ms intent-delay before the pop */
  transition: transform 80ms ease-out 280ms, visibility 0s linear 280ms;
}
@media (prefers-reduced-motion: reduce) {
  .thumb-preview { transition: visibility 0s; transform: translateY(-50%) scale(1); }
  .product-table-thumb-wrap:hover .thumb-preview,
  .product-table-thumb-wrap:focus-within .thumb-preview {
    transform: translateY(-50%) scale(1);
    transition: visibility 0s linear 280ms;
  }
}
@media (max-width: 1279px) {
  .thumb-preview { width: 320px; }
  .thumb-preview .ptp-desc { -webkit-line-clamp: 4; }
}
@media (max-width: 1023px) {
  .thumb-preview { width: 280px; }
  .thumb-preview .ptp-desc { -webkit-line-clamp: 3; }
}
/* Below the table's mobile breakpoint, hover is unreliable and the table
   horizontally scrolls — skip the preview entirely. */
@media (max-width: 768px) {
  .thumb-preview { display: none; }
}
.tag-chip-sm {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius);
  font-size: 0.72rem;
  white-space: nowrap;
}
.tag-chip-overflow {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
}

/* Per-column tightening for the 8-col browse table. Padding is the same
   pattern as the base .product-table cell rule — just narrower targets. */
.product-table th.col-tag,
.product-table td.col-tag,
.product-table th.col-priceband,
.product-table td.col-priceband,
.product-table th.col-complexity,
.product-table td.col-complexity {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.product-table td.col-tag {
  /* Vertically stack chips when 2 won't fit horizontally — each chip is
     already nowrap, so this just drops them into a soft grid. */
  display: table-cell;
  white-space: normal;
  line-height: 1.5;
}
.product-table td.col-tag .tag-chip-sm {
  margin: 1px 2px 1px 0;
}
.product-table th.col-updated,
.product-table td.col-updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
  padding-right: 0.6rem;
}
.product-table .price-band-cell {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-text);
  white-space: nowrap;
}

/* Hover-actions cell — present in the DOM, revealed on row hover/focus.
   Visibility (not display) keeps the column width stable so layout doesn't
   shift on mouse-in. Always visible when keyboard focus lands inside the row
   so the action is still reachable without a pointer. */
.product-table th.col-actions,
.product-table td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 0.75rem;
}
.product-table td.col-actions > * {
  visibility: hidden;
  margin-left: 0.35rem;
}
.product-table tbody tr:hover td.col-actions > *,
.product-table tbody tr:focus-within td.col-actions > *,
.product-table tbody tr.product-table-row:focus td.col-actions > * {
  visibility: visible;
}
@media (hover: none) {
  /* Touch devices: no hover, so always show actions. */
  .product-table td.col-actions > * { visibility: visible; }
}
.product-table .row-action {
  font-size: 0.74rem;
  padding: 0.22rem 0.55rem;
  line-height: 1.2;
}
.product-table .row-action-open {
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  display: inline-block;
}
.product-table .row-action-open:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── Product detail ── */
.product-detail {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.product-detail-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.product-detail-thumb {
  width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
/* Hover-zoom: larger background-image floats to the right on hover. Image-only
   (no info card) since the product page already shows everything else. */
.product-detail-thumb-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.product-detail-thumb-zoom {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 420px;
  height: 420px;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: left center;
  transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms;
  z-index: 49;
  pointer-events: none;
}
.product-detail-thumb-wrap:hover .product-detail-thumb-zoom,
.product-detail-thumb-wrap:focus-within .product-detail-thumb-zoom {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition: opacity 100ms ease 200ms, transform 100ms ease 200ms, visibility 0s linear 200ms;
}
/* Narrow viewports: the zoom would overflow off-screen. Hide it on small
   screens — pinch-to-zoom on the original image is the native fallback. */
@media (max-width: 720px) {
  .product-detail-thumb-zoom { display: none; }
}
.product-detail-info { flex: 1; }
.product-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.product-detail-info h1 { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.product-detail-mfr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Product-detail zones: group the stacked sections into four readable bands
   (What it is · Getting it · Compare & explore · Sources & fine print) so the
   page parses as a few chunks instead of a flat list. The label is a quiet
   mono kicker; section <h2>s remain the per-section headings one level down. */
.product-zone {
  margin-bottom: 3rem;
}
.product-zone:last-child {
  margin-bottom: 0;
}
.product-zone-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}
/* Closing disclaimer — same text as the old top banner, but a quiet end-note
   per BRAND_VOICE ("disclaimer at the end") rather than an alarming header. */
.product-disclaimer-footer {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-light);
}

.product-section {
  margin-bottom: 2rem;
}
.product-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.setup-steps {
  list-style: disc;
  padding-left: 1.25rem;
  line-height: 1.7;
}
.setup-steps li {
  margin-bottom: 0.5rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}
.tag-chip {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  border: 1px solid transparent;
}
a.tag-chip-link {
  text-decoration: none;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
a.tag-chip-link:hover,
a.tag-chip-link:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

/* ── Product detail "Quick Facts" — collapsible fact block ── */
.product-fact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin: 1rem 0 2rem;
}
.fact-card-details[open] {
  padding-bottom: 0.4rem;
}
.fact-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fact-card-header:hover .fact-card-label,
.fact-card-header:focus-visible .fact-card-label {
  color: var(--color-primary-dark);
}
.fact-card-header::-webkit-details-marker { display: none; }
.fact-card-header::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='8,4 18,12 8,20' fill='%238a5a2b'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  transition: transform 0.15s ease, background-color 0.12s;
}
.fact-card-header:hover::before,
.fact-card-header:focus-visible::before {
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='8,4 18,12 8,20' fill='white'/></svg>");
}
.fact-card-details[open] .fact-card-header::before {
  transform: rotate(90deg);
}
.fact-card-sub { margin-left: auto; }
.fact-card-details[open] .fact-card-header {
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-light);
}
.fact-card-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.fact-card-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.fact-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 9rem) 1fr;
  gap: 0.35rem 1.1rem;
  align-items: start;
}
.fact-row {
  display: contents;
}
.fact-row .fact-key {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding-top: 0.25rem;
}
.fact-row .fact-val {
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fact-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.fact-value,
.fact-value-strong {
  font-size: 0.88rem;
  color: var(--color-text);
}
.fact-value-strong {
  font-weight: 600;
}
.fact-link {
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fact-link:hover,
.fact-link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}
.fact-empty {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  opacity: 0.55;
}
@media (max-width: 540px) {
  .fact-grid {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .fact-row .fact-key { padding-top: 0.4rem; }
  .fact-row .fact-val { padding-bottom: 0.35rem; }
}

.vendor-listing {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.vendor-name { font-family: var(--font); font-weight: 500; }
.vendor-price { font-family: var(--font-serif); font-weight: 500; color: var(--color-text); }

/* ── Product header price + price-change chip + hover popover ── */
.product-price-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  position: relative;
}
.product-price-trigger {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--color-text-muted);
  cursor: pointer;
}
.product-price-trigger:hover,
.product-price-trigger:focus-visible {
  border-bottom-color: var(--color-primary);
  outline: none;
}
.price-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
}
.price-delta-drop {
  color: #1f6e3a;
  background: #e8f5ec;
  border-color: #b9dfc7;
}
.price-delta-rise {
  color: #8a2a2a;
  background: #fbe9e9;
  border-color: #e6c2c2;
}
@media (prefers-color-scheme: dark) {
  .price-delta-drop { color: #b9e7c8; background: rgba(120,200,140,0.12); border-color: rgba(120,200,140,0.35); }
  .price-delta-rise { color: #f0b8b8; background: rgba(200,90,90,0.15); border-color: rgba(200,90,90,0.4); }
}
.price-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 18rem;
  max-width: 22rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  pointer-events: none;
}
/* Scope the hover trigger to the price link itself (not the whole line, which
   stretches in the flex layout). Popover stays interactive on its own hover. */
.product-price-line:has(.product-price-trigger:hover) .price-popover,
.product-price-line:has(.product-price-trigger:focus-visible) .price-popover,
.price-popover:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.price-popover h4 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.price-popover-sparkline {
  width: 100%;
  height: 60px;
  display: block;
  margin-bottom: 0.5rem;
}
.price-popover-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  font-size: 0.8rem;
}
.price-popover-stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-popover-stat-value {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
}
.price-popover-hint {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Amazon affiliate section ── */
.amazon-section { margin-top: 0.25rem; }
.amazon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.amazon-link {
  font-weight: 600;
  font-size: 0.95rem;
}
.amazon-price {
  font-family: var(--font-serif);
  font-weight: 500;
  margin-left: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.amazon-reviews {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.amazon-disclosure {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}

/* Status page chips. Tone matches the existing
   complexity badges; green/amber/red signal scrape & classifier health. */
.status-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-chip-ok { background: rgba(46, 125, 50, 0.12); color: #2e7d32; border-color: rgba(46, 125, 50, 0.3); }
.status-chip-warn { background: rgba(204, 119, 0, 0.12); color: #b06b00; border-color: rgba(204, 119, 0, 0.3); }
.status-chip-stale { background: rgba(185, 74, 72, 0.12); color: #a8332f; border-color: rgba(185, 74, 72, 0.3); }
.status-chip-unknown { background: rgba(0,0,0,0.05); color: var(--color-text-muted); border-color: rgba(0,0,0,0.1); }
.status-table th { color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.status-table td { padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.06)); }
.status-table td:first-child { padding-left: 0; }

/* Per-link affiliate badge. Mirrors the
   tooltip-on-hover treatment used for other AT chips. */
.aff-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1px solid var(--color-border, rgba(0,0,0,0.15));
  border-radius: 3px;
  color: var(--color-text-muted);
  background: var(--color-surface, rgba(0,0,0,0.03));
  cursor: help;
}

/* ── Professional referral callout ── */
.pro-callout {
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--tier-pro-rec);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.pro-callout h3 { margin-bottom: 0.5rem; }
.pro-callout ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}
.pro-callout li { margin-bottom: 0.25rem; }
.pro-callout a { font-weight: 500; }

/* ── About page ── */
.about-section { margin-bottom: 2rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.about-section h2 { margin-bottom: 0.75rem; }
.about-section p { max-width: 700px; }

/* ── Pagination ── */

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}
.empty-state p { font-size: 1.1rem; }

/* ── Loading ── */
.loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
}

/* ── Discovery sections (browse landing) ── */
/* ── Highlights carousel strip ── */
.highlights-strip {
  position: relative;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem 0.5rem;
}
.highlights-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.highlights-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.highlights-view-more {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.highlights-view-more:hover {
  text-decoration: underline;
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
  padding: 0.25rem 0;
}
.highlight-card {
  min-width: 0;
}
.highlight-card-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.highlight-card-link:hover {
  background: var(--color-bg);
}
.highlight-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.highlight-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-bg);
}
.highlight-card-body {
  min-width: 0;
}
.highlight-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-badge-new);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  margin-bottom: 0.15rem;
}
.highlight-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}
.highlight-card-mfr {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.highlight-card-price {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-price);
}
/* Responsive grid for featured section */
@media (max-width: 768px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Utility ── */
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero h1 { font-size: 1.5rem; }
  .browse-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .browse-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
  }
  .browse-sidebar.collapsed {
    display: none;
  }
  .mobile-filter-toggle {
    display: block;
  }
  /* Table: compact text-only list on mobile.
     No overflow:auto here — see desktop rule for why. Mobile drops the
     table's min-width to 0 and hides chip-heavy columns, so it fits the
     viewport without needing a horizontal-scroll container. */
  .product-table-wrap {
    max-width: 100%;
  }
  .product-table {
    min-width: 0;
    font-size: 0.82rem;
  }
  /* Narrow viewports: drop the chip-heavy middle columns so Name / Mfr /
     Price band / Updated / Actions stay readable. Updated stays — it's the
     freshness signal pros came for. Class selectors (not nth-child) so the
     rule survives future column reshuffles. */
  .product-table th.col-tag,
  .product-table td.col-tag,
  .product-table th.col-complexity,
  .product-table td.col-complexity {
    display: none;
  }
  .product-table th,
  .product-table td {
    padding: 0.35rem 0.4rem;
  }
  /* Hide thumbnails in table view — keeps it visually distinct from cards */
  .product-table-thumb {
    display: none;
  }
  .product-table-name {
    gap: 0.25rem;
  }
  .product-detail-header {
    flex-direction: column;
  }
  .product-detail-thumb {
    width: 100%;
    max-width: 300px;
  }
  .intake-input-wrap {
    flex-direction: column;
  }
  .starter-prompts {
    flex-direction: column;
    align-items: center;
  }
}

/* ── Result rows (hybrid list) ── */
.result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.result-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.12s;
}
.result-row:hover { border-color: var(--color-text-muted); }

.result-row-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  user-select: none;
}
.result-row-info {
  flex: 1;
  min-width: 0;
}
.result-row-top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.result-row-header:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  border-radius: var(--radius);
}

.result-row-thumb {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--color-bg);
}
.result-row-thumb-placeholder {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  border-radius: 6px;
  flex-shrink: 0;
}

.result-row-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
}
.result-row-mfr {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.result-row-complexity {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.complexity-hint {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.result-row-price {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}
.result-row-expand {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.result-row.open .result-row-expand {
  transform: rotate(180deg);
}

.result-row-detail {
  display: none;
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--color-border-light);
}
.result-row.open .result-row-detail {
  display: block;
}
.result-row-detail p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}
.result-row-desc {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: 1.7;
}
.result-row-watchout {
  font-size: 0.82rem;
  font-family: var(--font-serif);
  color: var(--color-text-secondary);
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  padding: 0.4rem 0.6rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.result-row-why {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  margin-top: 0.4rem;
}
.result-row-setup {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  line-height: 1.5;
  margin-top: 0.4rem;
}
.result-row-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.result-row-actions a {
  font-size: 0.85rem;
}

/* Results actions */
.results-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
/* Template picker + sidecar button alongside the existing
   "Generate PDF Report" CTA. Single row at desktop, wraps on mobile. */
.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.report-template-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}
.report-controls select {
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
}

/* Share URL row */
.share-url-row {
  margin-bottom: 1.5rem;
}
.share-url-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font);
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: text;
}
.share-url-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Shared search banner */
.shared-search-banner {
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* Results header */
.results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

/* Sort control */
.result-sort-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  transition: all 0.15s;
}
.result-sort-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.result-sort-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Show more */
.result-show-more {
  text-align: center;
  padding: 0.5rem;
}
.result-show-more-btn {
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.9rem;
  width: 100%;
  transition: all 0.15s;
}
.result-show-more-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Hide complexity hint on small screens */
@media (max-width: 640px) {
  .complexity-hint {
    display: none;
  }
  .result-row-mfr {
    display: none;
  }
}

/* ── Splash landing — editorial ── */
.splash-hero {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.splash-hero .brand-lockup {
  margin-bottom: 1.25rem;
}
.splash-subtitle {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}
/* Primary CTA pair — intake (filled) + browse (outlined) */
.splash-primary-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 640px;
  margin: 1.75rem auto 0.75rem;
}
.splash-cta-block {
  text-align: center;
  margin: 1.75rem auto 0.75rem;
  max-width: 520px;
}
.splash-cta-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary);
  color: #fdf6ec;
  border: 1.5px solid var(--color-primary);
  border-radius: 8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px -10px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s, border-color 0.15s;
}
.splash-cta-button:hover,
.splash-cta-button:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fdf6ec;
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 10px 24px -10px rgba(0,0,0,0.3);
}
.splash-cta-helper {
  margin: 0.85rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.splash-browse-all {
  text-align: center;
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  justify-content: center;
}
/* The middot separator: only show when both links are on one row. */
.splash-browse-all > span.sep { color: var(--color-text-muted); }
@media (max-width: 540px) { .splash-browse-all > span.sep { display: none; } }
.splash-browse-all a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.splash-browse-all a:hover,
.splash-browse-all a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Scroll reveal — one-time fade-up for [data-reveal] sections.
   .reveal-pending is added by JS only, so no-JS visitors (and both
   reduce-motion paths, guarded in JS) always see content immediately. */
.reveal-pending {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
/* Cards in the same row intersect together — delay staggers them */
.splash-steps [data-reveal]:nth-child(2).reveal-in { transition-delay: 90ms; }
.splash-steps [data-reveal]:nth-child(3).reveal-in { transition-delay: 180ms; }
.splash-context [data-reveal]:nth-child(2).reveal-in { transition-delay: 90ms; }
/* Belt and braces: JS already skips init under either reduce-motion path */
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}
:root[data-reduce-motion] .reveal-pending { opacity: 1; transform: none; }
.splash-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s, border-color 0.15s;
  border: 1.5px solid transparent;
  min-height: 76px;
}
.splash-cta:hover { transform: translateY(-1px); }
.splash-cta-label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.splash-cta-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  opacity: 0.85;
  line-height: 1.35;
}
.splash-cta--primary {
  background: var(--color-primary);
  color: #fdf6ec;
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px -10px rgba(0,0,0,0.25);
}
.splash-cta--primary:hover,
.splash-cta--primary:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fdf6ec;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 10px 24px -10px rgba(0,0,0,0.3);
}
.splash-cta--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.splash-cta--secondary:hover,
.splash-cta--secondary:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-accent-light);
}

.splash-trust {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 1.5rem;
  letter-spacing: 0.01em;
}

.splash-categories-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

/* splash CTA footer — stats line below the categories */
.splash-cta-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.splash-cta-footer span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.splash-how {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.splash-how h2 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}
.splash-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.splash-step-card {
  text-align: center;
  padding: 1.25rem 1rem;
}
.splash-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-light);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
}
.splash-step-card h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.splash-step-card p {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Category quick-links */
.splash-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.splash-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.splash-category-pill:hover,
.splash-category-pill:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  outline: none;
}
.splash-category-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}
.splash-category-pill--all {
  color: var(--color-primary);
  font-weight: 600;
}


.splash-context {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.splash-context-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
}
.splash-context-card h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.splash-context-card p {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.splash-pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.splash-pathways .splash-lending { margin-top: 1.25rem; }
.splash-lending {
  margin-top: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
}
.splash-lending h2 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.splash-lending p {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.splash-lending a { font-size: 0.9rem; font-weight: 600; }

@media (max-width: 768px) {
  .splash-pathways { grid-template-columns: 1fr; gap: 0; }
  .splash-hero .brand-wordmark { font-size: 2rem; }
  .splash-hero { padding: 2rem 1rem 1.5rem; }
  .splash-steps { grid-template-columns: 1fr; gap: 0.75rem; }
  .splash-step-card { text-align: left; display: flex; gap: 1rem; align-items: flex-start; padding: 0.75rem 0; }
  .splash-step-num { margin: 0; flex-shrink: 0; width: 40px; height: 40px; font-size: 1rem; }
  .splash-categories { gap: 0.4rem; }
  .splash-context { grid-template-columns: 1fr; }
  .splash-primary-ctas { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.25rem; }
  .splash-cta { min-height: 0; padding: 0.85rem 1rem; }
  .splash-cta-label { font-size: 1rem; }
  .splash-cta-sub { font-size: 0.75rem; }
  .splash-trust { margin-bottom: 1.25rem; }
}

/* Desktop scale-up — fill more of the viewport */
@media (min-width: 1024px) {
  .splash-hero {
    max-width: 840px;
    padding: 5rem 2rem 3.5rem;
  }
  .splash-hero .brand-wordmark--hero { font-size: 4.2rem; }
  .splash-hero .brand-tagline { font-size: 0.92rem; }
  .splash-subtitle { font-size: 1.2rem; }
  .splash-categories { gap: 0.65rem; margin-top: 1.75rem; }
  .splash-category-pill { padding: 0.25rem 0.1rem; font-size: 1rem; }
  .splash-cta-footer { margin-top: 1.5rem; }
  .splash-cta-footer span { font-size: 0.88rem; }
  .splash-primary-ctas { margin-top: 2rem; gap: 1rem; }
  .splash-cta { padding: 1.15rem 1.5rem; min-height: 86px; }
  .splash-cta-label { font-size: 1.18rem; }
  .splash-cta-sub { font-size: 0.85rem; }
  .splash-trust { font-size: 0.88rem; margin-bottom: 1.75rem; }
  .splash-step-card h3 { font-size: 1.1rem; }
  .splash-step-card p { font-size: 0.95rem; }

  .splash-context-card h3 { font-size: 1.1rem; }
  .splash-context-card p { font-size: 0.95rem; }
}

/* ── Conversational intake steps ── */
.intake-steps {
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.intake-step {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.intake-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.intake-step.exit-left {
  opacity: 0;
  transform: translateX(-50px);
}
/* Reverse for back navigation */
.intake-steps[data-direction="backward"] .intake-step {
  transform: translateX(-50px);
}
.intake-steps[data-direction="backward"] .intake-step.active {
  transform: translateX(0);
}
.intake-steps[data-direction="backward"] .intake-step.exit-left {
  transform: translateX(50px);
}

.intake-step-heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--color-text);
}

/* Progress dots */
.intake-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.intake-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s, transform 0.2s;
}
.intake-progress-dot.current {
  background: var(--color-primary);
  transform: scale(1.4);
}
.intake-progress-dot.complete {
  background: var(--color-text);
}
.intake-progress-line {
  width: 32px;
  height: 1px;
  background: var(--color-border);
  transition: background 0.2s;
}
.intake-progress-line.complete {
  background: var(--color-text);
}

/* Step navigation */
.intake-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  gap: 0.75rem;
}
.intake-nav-back {
  background: none;
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  color: var(--color-text);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.intake-nav-back:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.intake-nav-next {
  padding: 0.6rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
  margin-left: auto;
}
.intake-nav-next:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.intake-nav-skip {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.5rem;
  letter-spacing: 0.02em;
}
.intake-nav-skip:hover { color: var(--color-primary); }

/* Option pills (for who_for step) */
.intake-option-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.intake-option-pill {
  position: relative;
  cursor: pointer;
}
.intake-option-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.intake-option-pill span {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.12s;
  user-select: none;
}
.intake-option-pill input:checked + span {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-invert);
}
.intake-option-pill:hover span {
  border-color: var(--color-text-muted);
}
.intake-option-pill input:focus-visible + span {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.intake-challenge-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/* Primary free-text input on step 1 */
.intake-details-primary {
  width: 100%;
  min-height: 120px;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 0.25rem;
}
.intake-details-primary:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.15);
}
.intake-details-helper {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 1rem 0 0.85rem;
}
.intake-details-feedback {
  min-height: 1.25rem;
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  text-align: center;
  color: var(--color-text-muted);
}
.intake-details-feedback[data-state="block"] {
  color: var(--tier-pro-req, #b3261e);
}
.intake-details-feedback[data-state="warn"] {
  color: var(--color-text);
}
/* Pill-style starting points */
.intake-challenge-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.intake-pill {
  position: relative;
  cursor: pointer;
  display: inline-flex;
}
.intake-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.intake-pill span {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: all 0.12s;
  user-select: none;
}
.intake-pill:hover span {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.intake-pill input:checked + span {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.intake-pill input:focus-visible + span {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Refine step selects */
.intake-select-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.intake-select-group label {
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.3rem;
}
.intake-select-group select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font);
  /* Explicit color alongside background — color-scheme:light dark otherwise
     paints control text in the OS scheme, giving white-on-surface in OS dark mode. */
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s;
}
/* Dropdown popup is OS-rendered; pin option colors so it follows our theme too. */
.intake-select-group select option {
  background: var(--color-surface);
  color: var(--color-text);
}
.intake-select-group select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.2);
}

/* Pre-filled summary */
.intake-prefilled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.intake-prefilled-tag {
  background: var(--color-primary-light);
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  color: var(--color-primary-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intake-step {
    transition: opacity 0.1s ease;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .intake-challenge-grid {
    grid-template-columns: 1fr;
  }
  .intake-option-pills {
    flex-direction: column;
    align-items: stretch;
  }
  .intake-option-pill span {
    text-align: center;
  }
}

/* ── Glossary tooltips ── */
.glossary-term {
  border-bottom: 1px dotted var(--color-primary);
  cursor: help;
  color: var(--color-primary-dark);
  font-weight: 500;
  transition: border-color 0.12s, background-color 0.12s;
  border-radius: 1px;
}
.glossary-term:hover,
.glossary-term:focus-visible {
  background: var(--color-primary-light);
  border-bottom-style: solid;
}

.glossary-tooltip {
  position: absolute;
  z-index: 50;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 1rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px);
  animation: glossaryFadeIn 0.15s ease forwards;
}
.glossary-tooltip[hidden] {
  display: none;
}
.glossary-tooltip-below {
  animation-name: glossaryFadeInBelow;
}
.glossary-tooltip-term {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.3rem;
}
.glossary-tooltip-def {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
}
.glossary-tooltip-link {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.glossary-tooltip-link:hover,
.glossary-tooltip-link:focus-visible {
  border-bottom-color: currentColor;
}

@keyframes glossaryFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glossaryFadeInBelow {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Tiny screens (iPhone SE): drop the Home link — the logo links home */
@media (max-width: 360px) {
  .site-nav .nav-home {
    display: none;
  }
}

/* ── Mobile-first fixes (iPhone / small touch screens) ── */
@media (max-width: 640px) {
  /* Header: stack nav below logo on very narrow screens */
  .site-header .container {
    justify-content: center;
    gap: 0.25rem;
  }
  .site-nav {
    width: 100%;
    justify-content: center;
    /* Tight enough that all items + icon-only settings fit one row at 375px */
    gap: 0.35rem;
  }
  .site-nav a {
    /* 44px min touch target */
    padding: 0.5rem 0.25rem;
    font-size: 0.78rem;
  }
  .site-nav a[aria-current="page"] {
    border-bottom: none;
    padding-bottom: 0.5rem;
  }
  .nav-menu-btn {
    padding: 0.5rem 0.25rem;
    font-size: 0.78rem;
  }
  .a11y-menu-btn {
    /* Icon-only: the gear + aria-label carry the meaning */
    padding: 0.45rem;
  }
  .a11y-menu-btn .settings-label {
    display: none;
  }

  /* Tighten main padding */
  main { padding: 1rem 0; }
  .container { padding: 0 0.75rem; }


  /* Splash hero */
  .splash-hero { padding: 1.5rem 0 1.5rem; }
  .splash-subtitle { font-size: 0.95rem; }

  /* Conversation turns — reduce side margins on mobile */
  .conversation-turn[data-role="user"] { margin-left: 0.5rem; }
  .conversation-turn[data-role="assistant"] { margin-right: 0.5rem; }

  /* Result row header — wrap into two lines on mobile */
  .result-row-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem;
  }
  .result-row-info {
    flex-basis: calc(100% - 56px); /* beside thumb */
    min-width: 0;
  }
  .result-row-top {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .result-row-name { font-size: 0.88rem; }
  .result-row-mfr {
    /* Wrap onto its own line under the name if both can't fit. */
    flex-basis: 100%;
    min-width: 0;
  }
  /* Price + badge on second row below the info */
  .result-row-complexity {
    order: 10;
    flex-wrap: wrap;
  }
  .result-row-price {
    order: 11;
    min-width: auto;
    font-size: 0.82rem;
  }
  .result-row-expand {
    order: 12;
    margin-left: auto;
  }
}

/* Very narrow phones (<540px): the complexity hint text duplicates info
   already conveyed by the badge colour/label and just crowds the row.
   Drop it; the expanded detail still includes the full reasoning. */
@media (max-width: 539px) {
  .complexity-hint { display: none; }
}

@media (max-width: 380px) {
  /* Thumbnail at 64×64 eats too much of a 360px row once the name
     wraps to 2 lines. Shrink it; expanded detail unaffected. */
  .result-row-thumb,
  .result-row-thumb-placeholder { width: 48px; height: 48px; }
  .result-row-info { flex-basis: calc(100% - 56px); }
}

@media (max-width: 768px) {
  /* Action buttons — full width on mobile */
  .results-actions {
    flex-direction: column;
  }
  .results-actions .intake-submit,
  .results-actions .starter-prompt {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }

  /* Results header — stack title above sort on mobile */
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Sort buttons — scroll horizontally instead of wrapping */
  .result-sort {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    width: 100%;
  }
  .result-sort::-webkit-scrollbar { display: none; }
  .result-sort-btn {
    flex-shrink: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    min-height: 36px;
  }

  /* Results narrative / callouts — less padding */
  .results-narrative { padding: 0.75rem 0.85rem; }
  .pro-callout { padding: 0.75rem; }
  .result-row-detail { padding: 0 0.65rem 0.65rem; }

  /* Glossary tooltip — constrain width and position */
  .glossary-tooltip {
    max-width: calc(100vw - 2rem);
    left: 1rem !important;
    right: 1rem !important;
  }

  /* Intake steps — ensure buttons are touch-friendly */
  .intake-nav-back,
  .intake-nav-next,
  .intake-nav-skip {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Progress dots — bigger touch area */
  .intake-progress-dot {
    width: 12px;
    height: 12px;
  }

  /* About sections */
  .about-section { padding: 0.75rem 0; }

  /* Footer — stack and center on mobile */
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .footer-links {
    justify-content: center;
    gap: 0.5rem;
  }
  .footer-links a {
    font-size: 0.78rem;
  }
  .site-footer span {
    font-size: 0.78rem;
  }

  /* Vendor listing — stack on mobile */
  .vendor-listing {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  /* Product detail — full width thumb */
  .product-detail-thumb {
    width: 100%;
    max-width: none;
  }

  /* Browse header — stack on mobile */
  .browse-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .browse-search {
    flex: none;
  }
  .browse-title {
    font-size: 1.25rem;
  }

  /* Browse sidebar facets */
  .browse-sidebar {
    padding: 0.75rem;
  }

  /* Browse cards — grid layout on mobile: thumb left, text right */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .product-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.6rem;
    padding: 0.5rem;
    padding-bottom: 1.6rem;
    align-items: start;
  }
  .product-card-link {
    display: contents;
  }
  .product-card-thumb-wrap {
    grid-row: 1 / 3;
    align-self: center;
  }
  .product-card-thumb {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    border-radius: 6px;
  }
  .product-card-name {
    font-size: 0.88rem;
    line-height: 1.3;
    grid-column: 2;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card-desc {
    display: none;
  }
  .product-card-meta {
    grid-column: 2;
    margin-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    overflow: hidden;
  }
  /* Hide price overlay on thumbnail — show inline in meta instead */
  .product-card-price {
    display: none;
  }
  .product-card-meta::before {
    content: attr(data-price);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text);
    flex-shrink: 0;
  }
  .product-card-meta:not([data-price])::before,
  .product-card-meta[data-price=""]::before {
    display: none;
  }
  .product-card-manufacturer {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .product-card .complexity-badge {
    font-size: 0.7rem;
  }
  .match-reasons {
    display: none;
  }
  .product-card-freshness {
    display: none;
  }
  .product-card-bottom {
    grid-column: 2;
    margin-top: 0;
  }
  /* Highlights strip — tighter on mobile */
  .highlights-strip {
    padding: 0.5rem;
  }
  .highlight-card {
    width: 140px;
  }
  .highlights-nav {
    display: none;
  }
  .browse-toolbar {
    order: 10;
    width: 100%;
    justify-content: flex-start;
  }
  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .comparison-product-col {
    min-width: 140px;
  }
}

/* ── Browse toolbar (share link, save view, pin filters) ── */
.browse-toolbar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.toolbar-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.toolbar-btn svg {
  flex-shrink: 0;
}
/* Pressed state for Pin filters and other latching toolbar buttons */
.toolbar-btn-active,
.toolbar-btn-active:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

/* ── Toast notification ── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--color-text);
  color: var(--color-invert);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Keyboard cursor + cheat sheet ── */
.kbd-cursor {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
tr.kbd-cursor { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }

.keymap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.keymap-dialog {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.keymap-title {
  margin: 0 0 1rem;
  font-family: var(--font);
  font-size: 1rem;
}
.keymap-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.9rem;
  margin: 0 0 1rem;
}
.keymap-list dt { margin: 0; }
.keymap-list dd { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }
.keymap-list kbd {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  text-align: center;
  color: var(--color-text);
}
.keymap-close {
  display: block;
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text);
}
.keymap-close:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Compare alternatives button ── */
.compare-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.compare-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ── Comparison table ── */
.comparison-section {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--color-surface);
}
.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.comparison-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.25rem;
  line-height: 1;
}
.comparison-close:hover {
  color: var(--tier-pro-req);
}
.comparison-table-wrap {
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  vertical-align: top;
}
.comparison-label-col {
  width: 120px;
  min-width: 100px;
}
.comparison-product-col {
  text-align: center !important;
  min-width: 160px;
}
.comparison-product-col a {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.25rem;
}
.comparison-thumb {
  width: 80px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  background: var(--color-bg);
}
.comparison-current {
  background: var(--color-primary-light);
}
.comparison-current-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comparison-label {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Auth forms ── */
.auth-container {
  max-width: 400px;
  margin: 2rem auto;
}
.auth-container h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.auth-field label {
  font-size: 0.85rem;
  font-weight: 600;
}
.auth-field input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.auth-field input:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.auth-submit {
  padding: 0.7rem 1.5rem;
  background: var(--color-text);
  color: var(--color-invert);
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.12s;
}
.auth-submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-error {
  color: var(--tier-pro-req);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.auth-success {
  background: var(--tier-self-bg);
  border: 1px solid var(--tier-self);
  color: var(--tier-self-fg);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}
.auth-links {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.auth-links a {
  color: var(--color-primary);
}
.nav-login, .nav-account {
  font-weight: 600;
  font-size: 0.85rem;
}

/* ── Account & Profile ── */
.account-container {
  max-width: 600px;
  margin: 0 auto;
}
.account-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.account-section h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
}
.account-row-label {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-field label, .profile-field legend {
  font-size: 0.85rem;
  font-weight: 600;
}
.profile-field select, .profile-field input[type="text"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.profile-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem;
}
.profile-checkbox-group label {
  font-weight: 400;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.subscription-card {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}
.subscription-card h3 {
  font-family: var(--font-serif);
  margin: 0 0 0.5rem;
  color: var(--color-primary-dark);
}
.subscription-card .price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.subscription-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: 0.9rem;
}
.subscription-features li {
  padding: 0.3rem 0;
}
.subscription-features li::before {
  content: "\2713 ";
  color: var(--tier-self);
  font-weight: 700;
}
.pro-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ── Research mode ── */
.research-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  min-height: 70vh;
}
.research-sidebar {
  border-right: 1px solid var(--color-border-light);
  padding-right: 1rem;
}
.research-new-btn {
  width: 100%;
  padding: 0.5rem;
  background: var(--color-text);
  color: var(--color-invert);
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: background 0.12s;
}
.research-new-btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.research-session-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.research-session-item {
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  color: var(--color-text);
  line-height: 1.3;
}
.research-session-item:hover { background: var(--color-primary-light); }
.research-session-item.active { background: var(--color-primary-light); font-weight: 600; }
.research-session-date {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.research-main {
  display: flex;
  flex-direction: column;
}
.research-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}
.research-input-area {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  border-top: 1px solid var(--color-border-light);
  padding-top: 1rem;
}
.research-input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  resize: vertical;
  min-height: 44px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.research-input:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.research-submit {
  padding: 0.6rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: background 0.12s;
}
.research-submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.research-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.research-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0.75rem 0;
}
.research-comparison-table th,
.research-comparison-table td {
  border: 1px solid var(--color-border-light);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.research-comparison-table th {
  background: var(--color-bg);
  font-weight: 600;
}
.research-followup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.research-followup-chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  font-size: 0.8rem;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.research-followup-chip:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
@media (max-width: 768px) {
  .research-layout {
    grid-template-columns: 1fr;
  }
  .research-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    padding-right: 0;
    padding-bottom: 0.75rem;
  }
}

/* ── Blog ── */

.blog-index { max-width: 720px; margin: 0 auto; padding: 2rem 0 3rem; }
.blog-index h1 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 0.25rem; }
.blog-intro { color: var(--color-text-muted); margin-bottom: 2rem; font-size: 0.95rem; }

.blog-post-card { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border-light); }
.blog-post-card:last-of-type { border-bottom: none; }
.blog-post-card.has-image { display: flex; gap: 1.25rem; align-items: flex-start; }
.blog-post-card-image { flex-shrink: 0; display: block; border-radius: 6px; overflow: hidden; }
.blog-post-card-image img { display: block; width: 200px; height: auto; border-radius: 6px; object-fit: cover; aspect-ratio: 3/2; }
.blog-post-card-content { flex: 1; min-width: 0; }
.blog-post-card h2 { font-family: var(--font-serif); font-size: 1.35rem; margin: 0 0 0.3rem; line-height: 1.3; }
.blog-post-card h2 a { color: var(--color-primary); text-decoration: none; }
.blog-post-card h2 a:hover { text-decoration: underline; }
.blog-post-card time { font-size: 0.82rem; color: var(--color-text-muted); display: block; margin-bottom: 0.4rem; }
.blog-post-card p { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.read-more { color: var(--color-primary); text-decoration: none; font-weight: 500; white-space: nowrap; }
.read-more:hover { text-decoration: underline; }

.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 0 0; font-size: 0.9rem; }
.blog-pagination a { color: var(--color-primary); text-decoration: none; }
.blog-pagination a:hover { text-decoration: underline; }
.blog-pagination span { color: var(--color-text-muted); }

/* Single blog post */
.blog-post { max-width: 720px; margin: 0 auto; padding: 2rem 0 3rem; }
.blog-post-header { margin-bottom: 2rem; border-bottom: 1px solid var(--color-border-light); padding-bottom: 1.5rem; }
.blog-post-header h1 { font-family: var(--font-serif); font-size: 2rem; line-height: 1.25; margin: 0 0 0.5rem; }
.blog-post-header time { font-size: 0.85rem; color: var(--color-text-muted); }

.blog-post-body { line-height: 1.7; }
.blog-post-body h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.blog-post-body h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.blog-post-body p { margin: 0 0 1rem; color: var(--color-text-secondary); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.blog-post-body li { margin-bottom: 0.5rem; color: var(--color-text-secondary); line-height: 1.6; }
.blog-post-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-post-body a:hover { color: var(--color-primary-dark); }
.blog-post-body strong { color: var(--color-text); }
.blog-post-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9rem; }
.blog-post-body th, .blog-post-body td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border-light); }
.blog-post-body th { font-weight: 600; color: var(--color-text); background: var(--color-accent-light); }
.blog-post-body td { color: var(--color-text-secondary); }

.blog-post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-light); }
.blog-post-footer a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }
.blog-post-footer a:hover { text-decoration: underline; }
.ai-disclosure { font-size: 0.82rem; color: var(--color-text-muted); font-style: italic; line-height: 1.5; margin-bottom: 1rem; }

.blog-hero-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 1.5rem; display: block; }

/* Blog carousel on homepage */
.blog-carousel-section { margin: 2.5rem 0; }
.blog-carousel-section h2 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 1rem; text-align: center; }
.blog-carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.blog-carousel::-webkit-scrollbar { height: 4px; }
.blog-carousel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.blog-carousel-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--color-surface); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--color-border-light); transition: box-shadow 0.15s, transform 0.15s; }
.blog-carousel-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.blog-carousel-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.blog-carousel-placeholder { width: 100%; height: 160px; background: var(--color-accent-light); }
.blog-carousel-card-body { padding: 0.75rem; }
.blog-carousel-card-body h3 { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.3; margin: 0 0 0.3rem; color: var(--color-text); }
.blog-carousel-card-body time { font-size: 0.78rem; color: var(--color-text-muted); }
.blog-carousel-more { display: block; text-align: center; margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-primary); text-decoration: none; }
.blog-carousel-more:hover { text-decoration: underline; }
@media (max-width: 600px) { .blog-carousel-card { flex: 0 0 220px; } .blog-carousel-card img { height: 130px; } }

/* ── Compare page (standalone /compare) ── */
.compare-page-header h1 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.compare-page-body .comparison-table-wrap {
  margin-bottom: 1.5rem;
}
.compare-standalone {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
}
.compare-standalone th,
.compare-standalone td {
  padding: 0.75rem 1rem;
}
.compare-standalone .comparison-product-col {
  min-width: 180px;
}
.compare-page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.compare-back-link {
  font-size: 0.9rem;
  color: var(--color-primary);
  text-decoration: none;
}
.compare-back-link:hover {
  text-decoration: underline;
}
.compare-detail-link {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.compare-detail-link:hover {
  text-decoration: underline;
}

/* Mobile: scroll the standalone /compare table */
@media (max-width: 600px) {
  .compare-standalone .comparison-product-col {
    min-width: 150px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Glossary index — desktop-first layout: sticky category rail
   on the left, two-column term grid in each category section,
   client-side filter. Falls back to single-column on mobile.
   ───────────────────────────────────────────────────────────── */
.glossary-index { padding: 0.5rem 0 3rem; }

.glossary-index-header { margin-bottom: 2rem; }
.glossary-index-header h1 { margin-bottom: 0.4rem; }
.glossary-lede {
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-bottom: 1.25rem;
}

.glossary-search { position: relative; max-width: 32rem; }
.glossary-search input[type="search"] {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.glossary-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
}
.glossary-search-status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}

.glossary-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 2.5rem;
  align-items: start;
}

.glossary-rail { position: sticky; top: 1rem; }
.glossary-rail-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
}
.glossary-rail nav ul { list-style: none; margin: 0; padding: 0; }
.glossary-rail nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 2px solid transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.glossary-rail nav a:hover {
  background: var(--color-accent-light);
  color: var(--color-text);
  border-left-color: var(--color-primary);
}
.glossary-rail-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.05rem 0.45rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
}
.glossary-rail-count.is-zero { opacity: 0.4; }

.glossary-sections { min-width: 0; }

.glossary-category {
  margin-bottom: 2.25rem;
  scroll-margin-top: 1rem;
}
.glossary-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.glossary-category-header h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}
.glossary-category-count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.glossary-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.5rem;
}

.glossary-index-item { margin: 0; }
.glossary-index-item[hidden] { display: none; }

.glossary-index-link {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.glossary-index-link:hover {
  background: var(--color-accent-light);
  border-color: var(--color-border-light);
  color: inherit;
}
.glossary-index-term {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--color-primary);
  margin-bottom: 0.1rem;
}
.glossary-index-link:hover .glossary-index-term { color: var(--color-primary-dark); }
.glossary-index-def {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
  /* clamp to two lines so the grid stays even */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glossary-empty {
  color: var(--color-text-muted);
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
}

/* Tablet: collapse rail to a horizontal chip row above sections */
@media (max-width: 900px) {
  .glossary-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .glossary-rail { position: static; }
  .glossary-rail-label { display: none; }
  .glossary-rail nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .glossary-rail nav a {
    padding: 0.35rem 0.65rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-left: 1px solid var(--color-border-light);
  }
  .glossary-rail nav a:hover { border-left-color: var(--color-border-light); }
}

/* Mobile: single-column term list */
@media (max-width: 600px) {
  .glossary-index-list { grid-template-columns: 1fr; }
  .glossary-index-header { margin-bottom: 1.25rem; }
}

/* ===========================================================
   Shortlist — persistent selection across the site.
   - .shortlist-btn        : per-card / per-detail toggle
   - #shortlist-tray       : sticky bottom-right tray
   =========================================================== */

.shortlist-btn-wrap {
  padding: 0.4rem 0.6rem 0.55rem;
  display: flex;
  justify-content: flex-end;
}

.shortlist-btn {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.shortlist-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shortlist-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.shortlist-btn-active {
  background: var(--color-primary);
  color: var(--color-invert);
  border-color: var(--color-primary);
}
.shortlist-btn-active:hover {
  background: var(--color-primary-dark);
  color: var(--color-invert);
  border-color: var(--color-primary-dark);
}

/* Detail-page mount sits inline in the product header; no extra padding */
[data-shortlist-mount] { display: inline-block; }

#shortlist-tray {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-size: 0.85rem;
  max-width: calc(100vw - 2rem);
  flex-wrap: wrap;
}
#shortlist-tray[hidden] { display: none; }
/* On /shortlist itself the page IS the surface — the floating tray would duplicate it */
.page-shortlist #shortlist-tray { display: none !important; }

.shortlist-tray-count {
  font-weight: 600;
  padding-right: 0.4rem;
  border-right: 1px solid var(--color-border-light);
  margin-right: 0.2rem;
}

.shortlist-tray-action {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.shortlist-tray-action:hover {
  background: var(--color-primary);
  color: var(--color-invert);
  border-color: var(--color-primary);
}
.shortlist-tray-action[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.shortlist-tray-clear { color: var(--color-text-muted); }

/* /shortlist page actions bar — mirrors the tray's vocabulary but lives inline */
.shortlist-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}
.shortlist-page-action {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.shortlist-page-action:hover {
  background: var(--color-primary);
  color: var(--color-invert);
  border-color: var(--color-primary);
}
.shortlist-page-action[aria-disabled="true"],
.shortlist-page-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.shortlist-page-action-clear { color: var(--color-text-muted); }
.shortlist-page-status {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
  min-height: 1em;
}

.shortlist-tray-status {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
  min-height: 1em;
}

/* On small screens, tray hugs the bottom edge full-width */
@media (max-width: 600px) {
  #shortlist-tray {
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    justify-content: center;
  }
}

/* Shortlist nav-link affordances */
.shortlist-tray-flash {
  animation: shortlist-tray-flash 700ms ease-out;
}
@keyframes shortlist-tray-flash {
  0%   { box-shadow: 0 0 0 0 rgba(168,82,47,0.0), 0 4px 14px rgba(0,0,0,0.12); }
  35%  { box-shadow: 0 0 0 6px rgba(168,82,47,0.35), 0 4px 14px rgba(0,0,0,0.12); }
  100% { box-shadow: 0 0 0 0 rgba(168,82,47,0.0), 0 4px 14px rgba(0,0,0,0.12); }
}
:root[data-reduce-motion] .shortlist-tray-flash { animation: none; }

.shortlist-nav-hint {
  position: absolute;
  z-index: 60;
  padding: 0.4rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-size: 0.8rem;
  color: var(--color-text);
  max-width: 18rem;
  animation: shortlist-nav-hint-in 180ms ease-out;
}
@keyframes shortlist-nav-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
:root[data-reduce-motion] .shortlist-nav-hint { animation: none; }

/* ===========================================================
   Compare matrix — sticky scaffolding, diff toggle,
   PDF export toolbar, freshness/confidence badges.
   =========================================================== */

.compare-overflow-notice {
  padding: 0.55rem 0.75rem;
  margin: 0 0 0.85rem;
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--color-text);
}

.compare-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.compare-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.compare-toolbar-status {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  min-height: 1em;
  margin-left: auto;
}

/* Sticky first column + sticky header.
   .comparison-sticky wraps the scrolling viewport; the table inside
   uses position: sticky on label cells and the thead row. */
.comparison-sticky {
  max-height: calc(100vh - 14rem);
  overflow: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
}
.comparison-sticky .comparison-table {
  border-collapse: separate;
  border-spacing: 0;
}
.comparison-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
}
.comparison-sticky thead th.comparison-label-col {
  left: 0;
  z-index: 3;
}
.comparison-sticky tbody td.comparison-label,
.comparison-sticky tbody th.comparison-label-col {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  font-weight: 600;
}

/* Differences-only mode: dim rows where every value matches */
.compare-diff-only tr[data-all-match="1"] {
  opacity: 0.25;
  filter: grayscale(0.4);
}
.compare-diff-only tr[data-all-match="1"] td {
  font-style: italic;
}

/* Freshness chip in the Last verified row */
.compare-freshness {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.compare-freshness.freshness-fresh { background: rgba(56,124,68,0.12); color: var(--tier-self, #387c44); }
.compare-freshness.freshness-aging { background: rgba(168,82,47,0.10); color: var(--color-primary); }
.compare-freshness.freshness-stale { background: rgba(120,120,120,0.12); color: var(--color-text-muted); }

/* Classification confidence chip */
.compare-confidence {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.compare-confidence-high    { background: rgba(56,124,68,0.14);  color: var(--tier-self, #387c44); }
.compare-confidence-medium  { background: rgba(168,82,47,0.12);  color: var(--color-primary); }
.compare-confidence-low     { background: rgba(170,40,40,0.12);  color: #aa2828; }
.compare-confidence-unknown { background: rgba(120,120,120,0.12); color: var(--color-text-muted); }

@media (max-width: 700px) {
  .comparison-sticky { max-height: none; }
}

/* ---- Glossary peek drawer ---- */
.glossary-peek-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 90;
}
.glossary-peek-backdrop.is-open { opacity: 1; }
.glossary-peek-backdrop[hidden] { display: none; }

.glossary-peek {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border, rgba(0,0,0,0.08));
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms ease;
}
.glossary-peek.is-open { transform: translateX(0); }
.glossary-peek[hidden] { display: none; }

.glossary-peek-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}
.glossary-peek-category {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.glossary-peek-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--color-primary);
}
.glossary-peek-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.glossary-peek-close:hover { color: var(--color-text); background: var(--color-accent-light); }

.glossary-peek-body {
  padding: 1rem 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.glossary-peek-aliases {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.glossary-peek-aliases strong { color: var(--color-text); }
.glossary-peek-definition {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--color-text);
}

.glossary-peek-related { margin-top: 1.5rem; }
.glossary-peek-related h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.glossary-peek-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.glossary-peek-related li { margin: 0; }
.glossary-peek-related a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--color-accent-light);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}
.glossary-peek-related a:hover { background: var(--color-primary-light); }

.glossary-peek-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-border-light);
  font-size: 0.9rem;
}
.glossary-peek-footer a { color: var(--color-primary); }

body.glossary-peek-open { overflow: hidden; }

/* Bottom sheet on mobile — slides up from the bottom instead of in from the side. */
@media (max-width: 600px) {
  .glossary-peek {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }
  .glossary-peek.is-open { transform: translateY(0); }
  /* Drag handle affordance */
  .glossary-peek-header { position: relative; padding-top: 1.4rem; }
  .glossary-peek-header::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border, rgba(0,0,0,0.18));
  }
}

/* ---- Glossary term page: products section ---- */
.glossary-term-breadcrumb {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.glossary-products {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
}
.glossary-products h2 {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
}
.glossary-products-list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.4rem;
}
.glossary-products-list li { margin: 0; }
.glossary-products-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.glossary-products-list a:hover {
  background: var(--color-accent-light);
  border-color: var(--color-border-light);
}
.glossary-product-name {
  font-size: 0.95rem;
  color: var(--color-primary);
}
.glossary-product-mfr {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.glossary-product-price {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.glossary-products-more,
.glossary-cta {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.glossary-related { margin-top: 2rem; }
.glossary-related h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}
.glossary-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.glossary-related-list a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--color-accent-light);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* Blog product bullets — render-time injection from enrichProductBullets().
   Each <li> that links to /product/N gets a small thumbnail tile on the left
   so post bodies have visual rhythm instead of bullet walls. Cream tile stays
   constant across themes so catalog thumbs (white-bg) blend via multiply. */
.blog-post-body ul.blog-product-list {
  padding-left: 0;
}
.blog-post-body ul.blog-product-list li.blog-product-bullet {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
  list-style: none;
}
.blog-product-thumb {
  width: 84px;
  height: 84px;
  background: #f5f1ea;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}
.blog-product-thumb > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Hover-preview anchor — uses the catalog's .thumb-preview card (defined
   above in the catalog section). Card is absolute-positioned relative to
   this wrap, hidden by default, revealed on hover with 280ms intent-delay. */
.blog-product-thumb-wrap {
  position: relative;
}
/* The blog-post-body rule (.blog-post-body a) underlines all links and
   wins by specificity over .thumb-preview's text-decoration:none. The
   underline then propagates to every text descendant of the card. */
.blog-post-body a.thumb-preview,
.blog-post-body a.thumb-preview:hover { text-decoration: none; }
.blog-product-thumb-wrap:hover .thumb-preview,
.blog-product-thumb-wrap:focus-within .thumb-preview {
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition: transform 80ms ease-out 280ms, visibility 0s linear 280ms;
}
@media (max-width: 540px) {
  .blog-post-body ul.blog-product-list li.blog-product-bullet {
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
  }
  .blog-product-thumb { width: 64px; height: 64px; padding: 4px; }
}

/* Inline product floats — narrative posts where products are mentioned in
   paragraphs. Small thumb floats right; preview pops LEFT to avoid the
   right viewport edge. Cream tile constant across themes. */
.blog-product-thumb-float {
  float: right;
  width: 96px;
  height: 96px;
  margin: 0.25rem 0 0.5rem 1.25rem;
}
.blog-product-thumb-float .thumb-preview {
  left: auto;
  right: calc(100% + 10px);
  transform-origin: right center;
}
.blog-product-thumb-float .thumb-preview::before {
  left: auto;
  right: -10px;
}
.blog-post-body p.blog-product-para { overflow: hidden; /* contain the float */ }
@media (max-width: 540px) {
  .blog-product-thumb-float { width: 72px; height: 72px; margin-left: 0.75rem; }
  /* Below the catalog table's mobile breakpoint, hover is unreliable. */
  .blog-product-thumb-wrap .thumb-preview { display: none; }
}

/* ===== /organizations page ===== */
.page-organizations .org-segments {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  list-style: none; padding: 0; margin: 1.75rem 0 0;
}
.page-organizations .org-segments li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface); font-size: 0.95rem;
}
.page-organizations .org-segments svg { color: var(--color-primary); flex-shrink: 0; }
.page-organizations .org-features { list-style: none; padding: 0; margin: 1rem 0; }
.page-organizations .org-features li {
  display: flex; gap: 0.85rem; align-items: flex-start;
  line-height: 1.65; margin-bottom: 1.1rem;
}
.page-organizations .org-features svg { color: var(--color-primary); flex-shrink: 0; margin-top: 0.15rem; }
.page-organizations .org-tier-grid {
  list-style: none; padding: 0; margin: 1.25rem 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
}
.page-organizations .org-tier-grid li {
  border: 1px solid var(--color-border); border-radius: 8px;
  padding: 1.1rem; background: var(--color-surface);
}
.page-organizations .org-tier-grid svg { color: var(--color-primary); }
.page-organizations .org-tier-grid h3 { font-size: 1rem; margin: 0.5rem 0 0.35rem; }
.page-organizations .org-tier-grid p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text-secondary); }
.page-organizations .org-report-figure { margin: 2rem 0 0.5rem; }
.page-organizations .org-report-figure img {
  width: 100%; max-width: 540px; height: auto;
  border: 1px solid var(--color-border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.page-organizations .org-report-figure figcaption {
  font-size: 0.875rem; color: var(--color-text-muted);
  margin-top: 0.6rem; max-width: 540px;
}

/* Lending / borrow-before-you-buy */
.lending-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.lending-label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.lending-select {
  min-height: 44px; min-width: 220px; max-width: 100%;
  font-size: 1rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-bg); color: var(--color-text);
}
.lending-result { margin-top: 0.75rem; }
.lending-program-name { font-weight: 600; margin: 0 0 0.25rem; }
.lending-links { margin: 0 0 0.35rem; }
.lending-micro, .lending-verified, .lending-attribution {
  font-size: 0.8rem; color: var(--color-text-muted); margin: 0.25rem 0;
}
.lending-light { font-size: 0.85rem; color: var(--color-text-muted); margin: 1rem 0; }
.lending-lede { font-size: 1.05rem; line-height: 1.6; max-width: 720px; }
.lending-state { scroll-margin-top: 4.5rem; }
.lending-state h2 { margin-bottom: 0.25rem; }
.lending-directory { margin: 1.5rem 0; }
/* Funding pathways navigator (/funding) — extends the lending visual language */
.funding-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
/* margin-top separates the lede from the zero-margin h1; the generous bottom
   margin keeps the first program door from hugging the intro. */
.funding-lede { font-size: 1.05rem; line-height: 1.6; max-width: 720px; margin: 0.6rem 0 2.25rem; }
.funding-state-list ul {
  list-style: none; padding: 0; margin: 1rem 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.35rem 1rem;
}
.funding-state-list a { display: inline-block; padding: 0.25rem 0; }
.funding-door { scroll-margin-top: 4.5rem; margin-bottom: 2.5rem; }
/* The doors reuse .product-section, whose h2 carries a heavy near-black underline
   meant for the product page's few sections. On this header-dense page that reads
   as stark and cramped — warm the label to the brand color, soften the rule to a
   hairline, and give it room. */
.funding-door h2 {
  color: var(--color-primary);
  border-bottom-color: var(--color-border);
  margin-bottom: 1rem;
}
.funding-program { margin: 1.75rem 0; }
.funding-program h3 { margin-bottom: 0.5rem; }
.funding-links { margin: 0 0 0.35rem; }
.funding-micro, .funding-verified, .funding-attribution {
  font-size: 0.8rem; color: var(--color-text-muted); margin: 0.25rem 0;
}
.funding-questions { margin: 0.75rem 0; }
/* display:flex strips the native disclosure triangle from <summary>, so the
   affordance is rebuilt explicitly: chevron + link color + hover underline. */
.funding-questions summary {
  cursor: pointer; font-weight: 600; padding: 0.4rem 0;
  min-height: 44px; display: flex; align-items: center; gap: 0.5rem;
  color: var(--color-primary);
}
.funding-questions summary:hover,
.funding-questions summary:focus-visible { text-decoration: underline; }
.funding-questions summary::before {
  content: '\25B8'; /* ▸ */
  font-size: 0.9em;
  line-height: 1;
}
.funding-questions[open] summary::before { content: '\25BE'; /* ▾ */ }
.funding-questions ul { margin: 0.5rem 0 0.75rem; padding-left: 1.4rem; }
.funding-questions li { margin-bottom: 0.5rem; line-height: 1.5; }

.results-lending { margin-top: 1.5rem; }
.results-funding { margin-top: 1.5rem; }
.funding-panel-doors {
  list-style: none; padding: 0; margin: 0.5rem 0 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}
.funding-panel-doors a { display: inline-block; padding: 0.25rem 0; }
.results-lending-promoted { margin: 1rem 0 1.75rem; }
.results-lending-promoted .lending-block { border-left: 3px solid var(--color-primary); }

/* ── Journey guides (/journeys) ── */
.journey-page { padding-top: 0.5rem; }
.journey-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 62ch;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}
.journey-steps {
  list-style: none;
  counter-reset: journey-step;
  padding: 0;
  margin: 0 0 2rem;
}
.journey-steps > li {
  counter-increment: journey-step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 2.25rem;
}
.journey-steps > li::before {
  content: counter(journey-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-steps h2 {
  font-size: 1.2rem;
  margin: 0.2rem 0 0.6rem;
}
.journey-steps p { margin-bottom: 0.75rem; line-height: 1.6; }
.journey-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.journey-card a {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  height: 100%;
}
.journey-card a:hover { border-color: var(--color-primary); }
.journey-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.journey-card-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.35;
}
.journey-crosslink { font-size: 0.9rem; margin-top: 0.75rem; }