/* SetupLunio — Signal Lab Identity v1.0
   Dark theme, layered surfaces, cyan accent, Inter + IBM Plex Mono.
   Reason: TZ §3.5 holds a strict page-weight budget; a single hand-written
   stylesheet, no preprocessor, no frameworks, no @font-face declarations
   (fonts loaded via Google Fonts <link> in header.php). */

/* ---------------- Design tokens ---------------- */
:root {
  /* Surface tones (4-tier) */
  --bg:           #0F1113;  /* page background */
  --surface-1:    #171A1D;  /* navbar, footer */
  --surface-2:    #1C2126;  /* cards, sidebars, components */
  --surface-3:    #232A31;  /* table rows, nested elements */

  /* Typography colors */
  --fg:           #F5F7FA;  /* primary text */
  --fg-muted:     #A8B0B8;  /* secondary text, metadata */
  --fg-dim:       #6E7783;  /* tertiary / disabled */

  /* Accent + signal states */
  --accent:       #2ED3E6;  /* cyan — CTAs, scores, active states (used sparingly) */
  --accent-fg:    #0A1518;  /* text-on-accent (dark for contrast on cyan) */
  --accent-hover: #5BDDE9;  /* lighter cyan for hover */
  --border:       rgba(255, 255, 255, 0.06);
  --border-strong:rgba(255, 255, 255, 0.10);

  /* Status colors (rarely used — accent does most of the work) */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* Radii + spacing */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;

  /* Layout */
  --max-width:    1200px;
  --max-narrow:   880px;

  /* Type families */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------------- Reset + base ---------------- */
* { box-sizing: border-box; }
/* Reason: the .site-header is sticky (top:0, z-index:50) — without
   scroll-padding-top, in-page anchor jumps (FAQ details, breadcrumb
   fragment navigation, browser back/forward to a scroll position)
   land the target at viewport y=0, hidden behind the header.
   80px ≈ desktop header height; mobile header height is slightly
   taller but the extra space below an anchored heading is harmless. */
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem; }

/* ---------------- Typography ---------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 1rem;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); line-height: 1.15; margin-top: 2.5rem; }
h3 { font-size: 1.125rem; line-height: 1.3; margin-top: 1.25rem; }
p  { margin: 0 0 1rem; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover { color: var(--accent-hover); border-bottom-color: currentColor; }

/* Mono treatment — TZ §02 visual language: scores, dates, technical values */
.mono, .score-value, .score-max, .last-updated, .price, .tool-price,
.tool-score, .stat-value, .breadcrumbs, .compare-table th + td .mono,
.kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------- Site chrome ---------------- */
.site-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.site-header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.5rem; gap: 1.5rem;
}
.site-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--fg);
  border-bottom: 0;
}
.site-logo img, .site-logo svg { height: 36px; width: auto; display: block; }
.site-footer__logo { display: inline-block; margin-bottom: 1rem; }
/* Reason: setuplunio logo SVG already uses white + cyan fill colors
   (designed for the dark theme), so no inversion filter needed — unlike
   DoWithAI's black logo which gets inverted in its dark footer. */
.site-footer__logo img { height: 40px; width: auto; display: block; }

.site-nav {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.site-nav .menu {
  list-style: none; display: flex; gap: 1.25rem;
  margin: 0; padding: 0; flex-wrap: wrap;
}
.site-nav .menu a {
  color: var(--fg-muted);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 0;
  padding: 0.4rem 0;
}
.site-nav .menu a:hover { color: var(--fg); }
.site-nav__cta {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 0;
  white-space: nowrap;
}
.site-nav__cta:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
  border-bottom: 0;
}

.site-footer {
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
}
.site-footer .container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.affiliate-disclosure-footer { max-width: 720px; margin: 0; }
.affiliate-disclosure-footer a { color: var(--fg); }
.affiliate-disclosure-footer a:hover { color: var(--accent); }
.footer-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.5rem;
}
.footer-menu a {
  color: var(--fg-muted); font-weight: 500; border-bottom: 0;
}
.footer-menu a:hover { color: var(--accent); }
.copyright { margin: 0; color: var(--fg-dim); font-size: 0.85rem; }

/* ---------------- Atoms ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.75rem 1.3rem;
  border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg);
  border-bottom: 1px solid var(--accent-hover);
  transform: translateY(-1px);
}
.btn-ghost, .btn:not(.btn-primary) {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover, .btn:not(.btn-primary):hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--fg);
}
.btn-primary, .btn-ghost { border-bottom: 1px solid; }

/* Breadcrumbs — TZ uses mono, muted */
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.breadcrumbs a { color: var(--fg-muted); border-bottom: 0; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs li::after { content: "/"; margin-left: 0.5rem; color: var(--fg-dim); }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs li:last-child span { color: var(--fg); }

.back-to-cluster { margin: 0 0 1.5rem; font-size: 0.9rem; }
.back-to-cluster a { font-weight: 500; }

.affiliate-disclosure-inline {
  font-size: 0.78rem; color: var(--fg-muted); margin: 0.5rem 0 0;
  font-family: var(--font-mono);
}

.stale-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warning);
  padding: 0.6rem 0.9rem; border-radius: var(--radius-sm);
  font-size: 0.85rem; margin: 0.75rem 0;
  font-family: var(--font-mono);
}

/* ---------------- Card primitive ---------------- */
.card, .tool-card, .cluster-card, .workflow-card, .tier-card,
.alt-deep-dive, .pros-cons__col, .quick-verdict__col, .retailer-snapshot,
.key-specs, .gearpilot-breakdown, .creator-fit__list > li,
.faq-section, .source-transparency, .finder-cta-card,
.tier-card, .home-finder-cta > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* Card hover — TZ §02 thin cyan border */
.cluster-card:hover,
.workflow-card:not(.workflow-card--coming):hover,
.tool-card:hover,
.tier-card:hover,
.finder-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ---------------- Hero (homepage) ---------------- */
.hero {
  padding: 4rem 1.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.hero .container { padding: 0 1.5rem; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem; align-items: center;
}
.hero__content { max-width: 36rem; }
.hero h1 {
  font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
  margin: 0 0 1.25rem;
}
.hero-subtitle {
  font-size: 1.125rem;
  color: var(--fg-muted);
  margin: 0 0 2rem;
  max-width: 36rem;
}
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media .placeholder {
  color: var(--fg-dim); font-family: var(--font-mono);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center; padding: 2rem;
}
.hero__signal {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.35;
  background: url("../images/signal-overlay.svg") no-repeat right top / contain;
}

/* Hero stats — 4 mono-formatted tiles */
.hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.hero__stat-value {
  font-family: var(--font-mono);
  font-size: 1.75rem; font-weight: 500;
  color: var(--fg);
  display: block; line-height: 1;
}
.hero__stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 400;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 0.4rem;
  display: block;
}

/* ---------------- Section headers ---------------- */
.section-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 4rem 0 1.5rem; gap: 1rem;
}
.section-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
.section-header__link {
  font-size: 0.85rem; color: var(--fg-muted);
  font-family: var(--font-mono);
}

/* ---------------- Workflow cards (homepage block) ---------------- */
.home-workflows, .home-clusters, .home-reviews,
.home-comparisons, .home-finder-cta, .home-brand { padding: 0 1.5rem; }
.workflow-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 1.25rem;
}
.workflow-card {
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex; flex-direction: column;
}
.workflow-card__icon {
  width: 36px; height: 36px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent);
}
.workflow-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.workflow-card h3 a { color: var(--fg); border-bottom: 0; }
.workflow-card h3 a:hover { color: var(--accent); }
.workflow-card__teaser {
  color: var(--fg-muted);
  margin: 0 0 1rem;
  font-size: 0.92rem;
  flex: 1;
}
.workflow-card__link {
  font-size: 0.85rem; font-weight: 600;
  border-bottom: 0;
}
.workflow-card--coming { opacity: 0.65; }
.workflow-card__coming {
  display: inline-block; padding: 0.18rem 0.55rem;
  background: var(--surface-3); color: var(--fg-muted);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------------- Cluster grid (gear types) ---------------- */
.cluster-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.cluster-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  color: var(--fg);
  border-bottom: 0;
}
.cluster-card__icon {
  width: 36px; height: 36px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.cluster-card h3 { margin: 0; font-size: 0.95rem; color: var(--fg); }
.cluster-card__meta {
  font-family: var(--font-mono);
  margin: 0; color: var(--fg-muted);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.cluster-card__kind { color: var(--accent); font-weight: 600; }

/* ---------------- Product tool card (featured reviews) ---------------- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.tool-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem 1.25rem 1.25rem;
}
.tool-card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  margin: -0.5rem -0.25rem 0.75rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tool-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tool-card__media .placeholder {
  color: var(--fg-dim); font-family: var(--font-mono);
  font-size: 0.7rem; text-align: center; padding: 1rem;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.tool-card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.tool-card h3 a { color: var(--fg); border-bottom: 0; }
.tool-card h3 a:hover { color: var(--accent); }
.tool-card .tool-score, .tool-card .tool-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: 0;
}
.tool-card .tool-score { color: var(--accent); font-weight: 600; }
.tool-card .tool-price { color: var(--fg); }
.tool-card .tool-best-for {
  color: var(--fg-muted); margin: 0;
  font-size: 0.85rem; flex: 1;
}
.tool-card .btn { margin-top: auto; align-self: flex-start; }
.tool-card--ranked { position: relative; padding-top: 2.25rem; }
.rank-badge {
  position: absolute; top: 0.85rem; left: 1.25rem;
  background: var(--surface-3); color: var(--accent);
  font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  text-transform: uppercase;
}

/* ---------------- Comparison list (homepage block + cluster sections) ---------------- */
.comparison-list {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
}
.comparison-list li {
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.18s ease;
}
.comparison-list li:hover { border-color: var(--accent); }
.comparison-list a { color: var(--fg); font-weight: 500; border-bottom: 0; }
.comparison-list a:hover { color: var(--accent); }

/* ---------------- Finder CTA (homepage) ---------------- */
/* Reason: this section has no section-header (which would supply the
   inter-section 4rem rhythm via h2's margin); the section above is the
   comparison list with no bottom margin of its own, so the card lands
   flush against it. Adding margin-top to the section itself restores
   the breathing rhythm without altering the card. */
.home-finder-cta { padding: 0 1.5rem; margin-top: 4rem; }
.finder-cta-card {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}
.finder-cta-card::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/signal-overlay.svg") no-repeat center / contain;
  opacity: 0.15; pointer-events: none;
}
.finder-cta-card h2 { margin: 0 0 0.6rem; border: 0; }
.finder-cta-card p {
  color: var(--fg-muted); margin: 0 auto 1.5rem;
  max-width: 36rem; position: relative;
}

/* ---------------- Methodology / brand block (homepage) ---------------- */
.home-brand { padding: 0 1.5rem; }
.home-brand__lede {
  max-width: 720px; color: var(--fg-muted);
  font-size: 1.05rem;
}
.methodology-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 1.5rem;
}
.methodology-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
}
.methodology-step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--accent);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.methodology-step h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.methodology-step p { margin: 0; color: var(--fg-muted); font-size: 0.9rem; }
.brand-links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.brand-links a { font-weight: 500; }

.empty-state {
  color: var(--fg-muted); font-style: italic;
  padding: 1.5rem 0;
}

/* ---------------- Review page ---------------- */
.review.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  padding-top: 2rem;
}
.review.container > * { grid-column: 1; }
.review.container > .review__sidebar {
  grid-column: 2;
  grid-row: 1 / span 99;
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.review-header { padding: 0.5rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.review-header__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.review-header h1 { margin: 0; max-width: 36rem; }

.review__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.review__media img { width: 100%; height: 100%; object-fit: cover; }
.review__media .placeholder {
  color: var(--fg-dim); font-family: var(--font-mono);
  font-size: 0.85rem; padding: 2rem; text-align: center;
  text-transform: uppercase; letter-spacing: 0.1em;
}

.score-badge {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  padding: 0.7rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  margin: 0.75rem 0;
}
.score-value { color: var(--accent); font-size: 1.75rem; font-weight: 500; }
.score-max { color: var(--fg-muted); font-size: 0.9rem; }
.score-methodology {
  margin-left: 0.85rem; font-size: 0.75rem;
  color: var(--fg-muted); border-bottom: 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.score-methodology:hover { color: var(--accent); }
.last-updated {
  color: var(--fg-muted); font-size: 0.78rem;
  font-family: var(--font-mono); margin: 0.4rem 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Sidebar atoms */
.review__sidebar {
  display: flex; flex-direction: column; gap: 1rem;
}
.review__sidebar-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
}
.review__sidebar-card h2 {
  margin: 0 0 0.75rem;
  font-size: 0.85rem; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.review__sidebar .score-badge { width: 100%; justify-content: center; margin: 0 0 0.75rem; }
.review__sidebar .price-line {
  font-family: var(--font-mono);
  font-size: 1.5rem; color: var(--fg);
  margin: 0 0 1rem;
}

/* Quick verdict */
.quick-verdict { margin: 2rem 0; }
.quick-verdict__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.quick-verdict__col { padding: 1.5rem 1.25rem; }
.quick-verdict__col h3 {
  margin: 0 0 0.6rem; font-size: 0.85rem;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.quick-verdict__col--best h3 { color: var(--success); }
.quick-verdict__col--not  h3 { color: var(--warning); }
.quick-verdict__col ul { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); }
.quick-verdict__col li { margin: 0.4rem 0; }

/* Retailer snapshot */
.retailer-snapshot { margin: 2rem 0; padding: 1.5rem 1.5rem 1.25rem; }
.retailer-snapshot h2 { margin-top: 0; }
.retailer-snapshot__price {
  font-family: var(--font-mono); font-size: 1.25rem;
  margin: 0 0 1rem; color: var(--fg);
}
.retailer-snapshot__price strong { color: var(--accent); font-weight: 500; }
.retailer-snapshot__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem;
}
.retailer-snapshot__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  gap: 0.6rem;
}
.retailer-snapshot__name { font-size: 0.92rem; font-weight: 500; }
.retailer-snapshot__row .btn { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.retailer-snapshot__updated {
  font-family: var(--font-mono); color: var(--fg-muted);
  font-size: 0.78rem; margin: 0.85rem 0 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Specs table — mono everywhere */
.key-specs { margin: 2rem 0; padding: 1.5rem 1.5rem 1.25rem; }
.key-specs h2 { margin-top: 0; }
.key-specs__table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 0.88rem;
}
.key-specs__table th, .key-specs__table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.key-specs__table th {
  color: var(--fg-muted); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.78rem;
  width: 40%;
}
.key-specs__table tr:last-child th,
.key-specs__table tr:last-child td { border-bottom: 0; }

/* GearPilot Score breakdown bars */
.gearpilot-breakdown { margin: 2rem 0; padding: 1.5rem; }
.gearpilot-breakdown h2 { margin-top: 0; }
.gearpilot-breakdown__list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: 0.6rem;
}
.gearpilot-breakdown__row {
  display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto;
  gap: 1rem; align-items: center;
  padding: 0.55rem 0;
}
.gearpilot-breakdown__label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.85rem; color: var(--fg);
}
.gearpilot-breakdown__bar {
  display: block; height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.gearpilot-breakdown__bar-fill {
  display: block; height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.gearpilot-breakdown__value {
  font-family: var(--font-mono); color: var(--accent);
  font-weight: 600; font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.gearpilot-breakdown__note {
  margin: 1rem 0 0; color: var(--fg-muted);
  font-size: 0.9rem;
}

/* Creator fit */
.creator-fit { margin: 2rem 0; }
.creator-fit__list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: 0.5rem;
}
.creator-fit__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 0.85rem; align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.creator-fit__glyph { font-weight: 700; font-size: 1.1rem; width: 1.2rem; text-align: center; font-family: var(--font-mono); }
.creator-fit__row--recommended { border-color: rgba(34, 197, 94, 0.35); }
.creator-fit__row--recommended .creator-fit__glyph { color: var(--success); }
.creator-fit__row--works .creator-fit__glyph       { color: var(--warning); }
.creator-fit__row--avoid       { border-color: rgba(239, 68, 68, 0.35); }
.creator-fit__row--avoid .creator-fit__glyph       { color: var(--danger); }
.creator-fit__use-case { font-weight: 500; }
.creator-fit__verdict { color: var(--fg-muted); font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.creator-fit__score   { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }

/* Pros / cons */
.pros-cons { margin: 2rem 0; }
.pros-cons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pros-cons__col { padding: 1.5rem 1.25rem; }
.pros-cons__col h3 {
  margin: 0 0 0.75rem; font-size: 0.85rem;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pros-cons__col--pros h3 { color: var(--success); }
.pros-cons__col--cons h3 { color: var(--warning); }
.pros-cons__col ul { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); }
.pros-cons__col li { margin: 0.4rem 0; line-height: 1.5; }

/* Source transparency */
.source-transparency { margin: 2rem 0; padding: 1.5rem 1.5rem 1.25rem; }
.source-transparency h2 { margin-top: 0; }
.source-transparency ul { margin: 0; padding-left: 1.25rem; color: var(--fg-muted); }
.source-transparency li { margin: 0.4rem 0; }
.source-transparency__note { margin: 1rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }

/* Cluster page ranked list */
.tool-list .tool-row {
  display: grid; grid-template-columns: 32px minmax(160px, 1fr) auto minmax(0, 2fr);
  align-items: center; gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.tool-row .row-rank {
  font-family: var(--font-mono); color: var(--fg-muted);
  font-size: 0.85rem; text-align: right;
}
.tool-row .row-name { color: var(--fg); border-bottom: 0; font-weight: 500; }
.tool-row .row-name:hover { color: var(--accent); }
.tool-row .row-score {
  font-family: var(--font-mono); color: var(--accent);
  font-weight: 600;
}
.tool-row .row-use-case { color: var(--fg-muted); font-size: 0.88rem; }

.how-to-choose {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 2rem 0;
}
.how-to-choose h2 { margin-top: 0; }
.how-to-choose ul { margin: 0; padding-left: 1.25rem; color: var(--fg-muted); }
.how-to-choose li { margin: 0.4rem 0; }

.methodology-note { color: var(--fg-muted); font-size: 0.9rem; font-family: var(--font-mono); }

/* Compare table */
.compare-table {
  width: 100%; border-collapse: collapse;
  margin: 1.25rem 0; font-family: var(--font-mono);
  font-size: 0.85rem;
}
.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: transparent;
}
.compare-table thead th {
  background: var(--surface-3);
  color: var(--fg-muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.72rem;
}
.compare-table tbody tr { background: var(--surface-2); }
.compare-table tbody tr:hover { background: var(--surface-3); }
.compare-table a { color: var(--fg); font-family: var(--font-sans); }
.compare-table a:hover { color: var(--accent); }
.compare-table__updated {
  font-family: var(--font-mono); color: var(--fg-muted);
  font-size: 0.78rem; margin: 0.5rem 0 1.25rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Comparison page */
.verdict {
  padding: 1.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.winner-line { font-size: 1.25rem; margin: 0; }
.winner-line strong { color: var(--accent); }
.winner-score { font-family: var(--font-mono); color: var(--fg-muted); margin-left: 0.4rem; }
.verdict-text { margin: 0.75rem 0 0; color: var(--fg-muted); }
.verdict-ctas { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.choose-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
.choose-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.choose-block h3 { margin: 0 0 0.75rem; }
.choose-block ul { margin: 0; padding-left: 1.25rem; color: var(--fg-muted); }
.choose-block li { margin: 0.4rem 0; }
.choose-block .btn { margin: 1rem 0 0.5rem; }
.choose-block .review-link {
  display: inline-block; margin-top: 0.5rem;
  font-weight: 500; font-size: 0.9rem;
}

.pricing-comparison ul { list-style: none; padding: 0; }
.pricing-comparison li {
  padding: 0.85rem 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.pricing-comparison strong { font-family: var(--font-sans); margin-right: 0.5rem; }
.retailer-link { margin-left: 0.5rem; font-size: 0.85rem; font-family: var(--font-sans); }

/* Alternatives page */
.alt-tier {
  display: inline-block; margin-left: 0.5rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  text-transform: uppercase; vertical-align: middle;
}
.alt-tier--budget  { background: rgba(34, 197, 94, 0.15);  color: var(--success); }
.alt-tier--value   { background: rgba(46, 211, 230, 0.15); color: var(--accent); }
.alt-tier--upgrade { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.alt-tier--pro     { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.alt-pain ul, .alt-best-by-use-case ul { padding-left: 1.25rem; margin: 0.5rem 0; color: var(--fg-muted); }
.alt-pain__source { color: var(--fg-dim); font-size: 0.82rem; font-family: var(--font-mono); }
.alt-deep-dive { padding: 1.5rem; margin: 1.5rem 0; border-left: 3px solid var(--accent); }
.alt-deep-dive--budget  { border-left-color: var(--success); }
.alt-deep-dive--upgrade { border-left-color: var(--warning); }
.alt-price { font-family: var(--font-mono); font-weight: 600; color: var(--accent); margin: 0.25rem 0 0.5rem; }
.alt-buy-cell { white-space: nowrap; }
.alt-buy-link { display: inline-block; margin-right: 0.5rem; font-size: 0.85rem; font-weight: 500; }
.alt-cluster-cta { margin: 1.5rem 0 0.5rem; text-align: center; }

/* Workflow pillar */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
.tier-card { padding: 1.5rem 1.25rem 1.25rem; }
.tier-card__label {
  margin: 0 0 0.5rem; font-size: 1.05rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.tier-card__label::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.tier-card__total {
  font-family: var(--font-mono); color: var(--fg-muted);
  font-size: 0.78rem; margin: 0 0 1rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tier-card__items { list-style: none; padding: 0; margin: 0; }
.tier-card__items li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.tier-card__items li:last-child { border-bottom: 0; }
.tier-card__role { color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.78rem; margin-right: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tier-card__price { font-family: var(--font-mono); color: var(--accent); margin-left: 0.4rem; font-size: 0.88rem; }
.tier-card__items a { color: var(--fg); border-bottom: 0; }
.tier-card__items a:hover { color: var(--accent); }

.pillar-decisions__list {
  list-style: none; padding: 0; margin: 1.5rem 0;
  display: grid; gap: 0.85rem;
}
.pillar-decisions__list li {
  padding: 1.25rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pillar-decisions__list p { margin: 0; color: var(--fg-muted); }
.pillar-decisions__link { display: inline-block; margin-top: 0.6rem; font-weight: 500; font-size: 0.9rem; }

/* FAQ */
.faq-section { margin: 3rem 0; padding: 1.75rem 1.75rem 1.5rem; }
.faq-section h2 { margin-top: 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  font-weight: 500; cursor: pointer; padding: 0.5rem 0;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after {
  content: "+"; font-family: var(--font-mono);
  color: var(--accent); font-size: 1.25rem;
  margin-left: 1rem; transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0.5rem 0 1rem; color: var(--fg-muted); }

/* Microphone Finder */
.finder { max-width: var(--max-narrow); }
.finder-header { padding: 1.5rem 0 0.5rem; }
.finder-subtitle { color: var(--fg-muted); font-size: 1.05rem; max-width: 36rem; }
.finder-quiz { display: grid; gap: 1.25rem; margin: 1.5rem 0 2rem; }
.finder-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
}
.finder-step legend {
  font-weight: 500; padding: 0 0.4rem; font-size: 1rem;
  color: var(--accent);
}
.finder-step label {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0; cursor: pointer; color: var(--fg-muted);
  transition: color 0.15s ease;
}
.finder-step label:hover { color: var(--fg); }
.finder-step input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; }
.finder-submit { justify-self: start; }
.finder-results { margin: 1.5rem 0 3rem; }
.finder-results__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 1.25rem 0;
}
.finder-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.5rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg); border-bottom: 0;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.finder-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.finder-card__rank {
  font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.finder-card__name { margin: 0; font-size: 1.05rem; }
.finder-card__reason { color: var(--fg-muted); font-size: 0.88rem; margin: 0; }
.finder-card__score, .finder-card__price {
  font-family: var(--font-mono); margin: 0;
  font-size: 0.88rem;
}
.finder-card__score { color: var(--accent); font-weight: 600; }
.finder-card__cta { margin-top: auto; font-weight: 500; color: var(--accent); font-size: 0.88rem; }
.finder-results__note { color: var(--fg-muted); font-size: 0.9rem; }
.finder-restart { margin-top: 1rem; }

/* Cookie consent */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 1.25rem 1.5rem;
  z-index: 100;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr auto; align-items: center;
  max-width: var(--max-width); margin: 0 auto;
}
.cookie-banner__text { margin: 0; font-size: 0.92rem; color: var(--fg-muted); }
.cookie-banner__text a { color: var(--accent); }
.cookie-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cookie-modal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: min(94vw, 520px); width: 100%;
  background: var(--surface-2); color: var(--fg);
  font-family: inherit;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6);
}
.cookie-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.cookie-modal .modal-close {
  position: absolute; top: 0.85rem; right: 1rem;
  background: transparent; border: 0; font-size: 1.5rem;
  cursor: pointer; color: var(--fg-muted);
  padding: 0.25rem 0.5rem;
}
.cookie-modal__title { margin: 0 0 1.25rem; }
.cookie-pref {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; margin: 0 0 0.75rem;
  background: var(--surface-3);
}
.cookie-pref legend { font-weight: 500; padding: 0 0.4rem; color: var(--fg); }
.cookie-pref label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--fg-muted); cursor: pointer; }
.cookie-pref input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--accent); }
.cookie-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

/* See alternatives + back links */
.see-alternatives { margin: 1.5rem 0; }
.see-alternatives a { font-weight: 500; }
.related-reviews, .review-comparisons, .alt-related, .alt-related-comparisons,
.category-comparisons, .cluster-alternatives, .full-list, .quick-picks,
.cluster-compare-table, .best-by-use-case-section, .ease-of-setup,
.pillar-gear-overview, .pillar-tiers, .pillar-decisions, .pillar-related,
.alt-pain, .alt-at-glance, .alt-best-by-use-case, .alt-switching, .alt-body,
.review-body, .comparison-body, .pillar-intro, .cluster-intro {
  margin: 2.5rem 0;
}
.alt-body { color: var(--fg-muted); }
.review-body p, .comparison-body p, .alt-body p, .pillar-intro p, .cluster-intro p {
  color: var(--fg-muted);
  font-size: 1.02rem;
  max-width: 68ch;
}
.review-body h2, .comparison-body h2, .alt-body h2,
.pillar-intro h2, .cluster-intro h2 {
  margin-top: 2.5rem;
  font-size: 1.4rem;
}

.review-finder-cta, .cluster-finder-cta, .pillar-finder-cta,
.comparison-finder-cta, .alt-finder-cta {
  margin: 2.5rem 0; text-align: center;
}

/* Dual CTA — bottom of review */
.dual-cta {
  margin: 2.5rem 0; padding: 1.75rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.dual-cta h2 { margin: 0 0 0.5rem; }
.dual-cta__buttons {
  display: flex; gap: 0.75rem; justify-content: center;
  flex-wrap: wrap; margin: 1.25rem 0 0.75rem;
}

/* Generic page body */
.page.container { max-width: var(--max-narrow); padding: 2rem 1.5rem; }
.page-body { color: var(--fg-muted); max-width: 64ch; }
.page-body p { color: var(--fg-muted); margin: 0 0 1rem; }
.page-body strong { color: var(--fg); }

/* ---------------- Mobile responsive ---------------- */
@media (max-width: 980px) {
  .review.container { grid-template-columns: 1fr; }
  .review.container > .review__sidebar {
    grid-column: 1; grid-row: auto; position: static; max-height: none;
  }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 9; }
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .workflow-grid, .methodology-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .finder-results__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  h1 { font-size: 2rem; }
  .site-header .container { flex-direction: column; gap: 0.5rem; align-items: flex-start; padding: 0.75rem 1rem; }
  .site-nav { width: 100%; }
  .site-nav .menu { font-size: 0.85rem; gap: 0.9rem; }
  .quick-verdict__grid, .pros-cons__grid, .choose-blocks, .card-grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .workflow-grid, .methodology-grid { grid-template-columns: 1fr; }
  .gearpilot-breakdown__row { grid-template-columns: 1fr; gap: 0.4rem; }
  .creator-fit__row { grid-template-columns: auto 1fr auto; }
  .creator-fit__verdict { grid-column: 2 / 4; font-size: 0.78rem; }
  .retailer-snapshot__row { flex-direction: column; align-items: stretch; text-align: center; }
  .compare-table { font-size: 0.8rem; }
  .compare-table th, .compare-table td { padding: 0.6rem 0.7rem; }
  .container, .home-workflows, .home-clusters, .home-reviews,
  .home-comparisons, .home-finder-cta, .home-brand { padding: 0 1rem; }
}

@media (max-width: 600px) {
  .cookie-banner__inner { grid-template-columns: 1fr; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
}