/* ============================================================
   KaptenReviews — Premium Tech Intelligence Design System v2
   Dark Navy · Amazon Orange · Electric Blue · Rubik + Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Rubik:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Core palette */
  --bg:           #080C14;
  --bg-1:         #0D1422;
  --bg-2:         #111828;
  --bg-3:         #1A2338;
  --bg-hover:     #1E2840;

  /* Brand accents */
  --amber:        #FF9900;
  --amber-dim:    #CC7A00;
  --amber-glow:   rgba(255,153,0,.15);
  --amber-glow-2: rgba(255,153,0,.08);
  --blue:         #3B82F6;
  --blue-dim:     #2563EB;
  --blue-glow:    rgba(59,130,246,.15);
  --cyan:         #06B6D4;
  --success:      #10B981;
  --warning:      #F59E0B;
  --danger:       #EF4444;

  /* Text */
  --text:         #EDF2FF;
  --text-2:       #B8C4DC;
  --text-muted:   #7D8FAA;
  --text-dim:     #4A5568;

  /* Borders */
  --border:       rgba(255,255,255,.07);
  --border-2:     rgba(255,255,255,.12);
  --border-amber: rgba(255,153,0,.25);
  --border-blue:  rgba(59,130,246,.25);

  /* Typography */
  --font-head:    'Rubik', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-he:      'Heebo', 'Assistant', system-ui, sans-serif;

  /* Radii */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-hover: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1px var(--border-2);
  --shadow-amber: 0 4px 20px rgba(255,153,0,.18), 0 0 0 1px var(--border-amber);
  --shadow-blue:  0 4px 20px rgba(59,130,246,.18), 0 0 0 1px var(--border-blue);

  /* Transitions */
  --t: 180ms ease;
  --t-slow: 320ms ease;

  /* Z-layers */
  --z-nav: 100;
  --z-modal: 200;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-body);
  font-size:   16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[lang="he"], body.rtl {
  font-family: var(--font-he);
  direction:   rtl;
  text-align:  right;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Layout ────────────────────────────────────────────────── */
.container       { max-width: 960px;  margin: 0 auto; padding: 0 1.25rem; }
.container--wide { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container--full { width: 100%; padding: 0 1.5rem; }

/* ── Navigation ────────────────────────────────────────────── */
nav.site-nav {
  position:   sticky;
  top:        0;
  z-index:    var(--z-nav);
  background: rgba(8,12,20,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding:    0 1.5rem;
  min-height: 56px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}

/* When .site-nav-inner is present it handles its own padding */
nav.site-nav:has(.site-nav-inner) {
  padding: 0;
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 58px;
  gap: 1.5rem;
}

nav.site-nav .logo {
  font-family:  var(--font-head);
  font-weight:  800;
  font-size:    1.2rem;
  color:        var(--amber);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  text-decoration: none;
}

nav.site-nav .logo-badge {
  font-size:   0.62rem;
  font-weight: 600;
  background:  var(--amber-glow);
  border:      1px solid var(--border-amber);
  color:       var(--amber);
  padding:     2px 6px;
  border-radius: var(--r-pill);
  vertical-align: middle;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

nav.site-nav ul {
  list-style:  none;
  display:     flex;
  gap:         0.15rem;
  flex-wrap:   wrap;
  align-items: center;
}

nav.site-nav li a {
  color:       var(--text-muted);
  font-size:   0.875rem;
  font-weight: 500;
  padding:     0.4rem 0.75rem;
  border-radius: var(--r-sm);
  transition:  color var(--t), background var(--t);
  white-space: nowrap;
  display:     block;
}
nav.site-nav li a:hover {
  color:       var(--text);
  background:  var(--bg-hover);
}

/* ── Affiliate Disclosure ──────────────────────────────────── */
.affiliate-disclosure {
  background:  rgba(255,153,0,.05);
  border-bottom: 1px solid var(--border-amber);
  color:       var(--text-muted);
  padding:     0.6rem 1.5rem;
  font-size:   0.8rem;
  text-align:  center;
}
.affiliate-disclosure a { color: var(--amber); }
.affiliate-disclosure a:hover { text-decoration: underline; }

/* ── Homepage Hero ─────────────────────────────────────────── */
.site-hero {
  position:   relative;
  background: linear-gradient(135deg, #0A1020 0%, #0D1830 50%, #0A1420 100%);
  border-bottom: 1px solid var(--border);
  padding:    4.5rem 1.5rem 3.5rem;
  overflow:   hidden;
  text-align: center;
}

.site-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 300px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,153,0,.12) 0%, transparent 70%);
  pointer-events: none;
}

.site-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0.4;
}

.site-hero h1 {
  font-family: var(--font-head);
  font-size:   clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  color: var(--text);
}

.site-hero .hero-lead {
  font-size:   1.125rem;
  color:       var(--text-2);
  max-width:   600px;
  margin:      0 auto 2rem;
  line-height: 1.65;
}

.hero-trust-row {
  display:     flex;
  justify-content: center;
  gap:         1.5rem;
  flex-wrap:   wrap;
  margin-top:  1.5rem;
}

.hero-trust-badge {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  font-size:   0.82rem;
  color:       var(--text-muted);
  font-weight: 500;
}

.hero-trust-badge svg {
  width:  16px;
  height: 16px;
  color:  var(--success);
  flex-shrink: 0;
}

/* ── Page Hero (interior pages) ───────────────────────────── */
.page-hero {
  padding:     2.5rem 1.5rem 1.5rem;
  text-align:  center;
  background:  linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-family: var(--font-head);
  font-size:   clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.page-hero .lead {
  color:      var(--text-2);
  font-size:  1.05rem;
  max-width:  660px;
  margin:     0 auto 1rem;
}

.page-hero .meta {
  color:      var(--text-muted);
  font-size:  0.8rem;
  display:    flex;
  justify-content: center;
  align-items: center;
  gap:        1rem;
  flex-wrap:  wrap;
}

.page-hero .meta::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* ── Breadcrumbs ───────────────────────────────────────────── */
.breadcrumbs {
  font-size:   0.78rem;
  color:       var(--text-muted);
  margin-bottom: 1.25rem;
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  flex-wrap:   wrap;
}
.breadcrumbs a {
  color: var(--amber);
  transition: opacity var(--t);
}
.breadcrumbs a:hover { opacity: 0.75; }
.breadcrumbs::before {
  content: '▸';
  color: var(--text-dim);
  font-size: 0.65rem;
}

/* ── Section Headers ───────────────────────────────────────── */
.section-header {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin:      2.5rem 0 1.25rem;
}

.section-header h2 {
  font-family: var(--font-head);
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--text);
  letter-spacing: -0.015em;
}

.section-icon {
  width:       36px;
  height:      36px;
  border-radius: var(--r-sm);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1.1rem;
  background:  var(--bg-3);
  border:      1px solid var(--border);
  flex-shrink: 0;
}

.section-header-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-2), transparent);
}

/* ── Bento / Niche Grid ────────────────────────────────────── */
.niche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:    1rem;
  margin: 0 0 0.5rem;
}

.niche-card {
  position:      relative;
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       1.25rem 1.25rem 1rem;
  text-decoration: none;
  color:         inherit;
  display:       flex;
  flex-direction: column;
  gap:           0.5rem;
  transition:    border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
  overflow:      hidden;
}

.niche-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0;
  transition: opacity var(--t);
}

.niche-card:hover {
  border-color: var(--border-2);
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-hover);
  background:   var(--bg-2);
}

.niche-card:hover::before { opacity: 0.6; }

.niche-card h3 {
  font-family: var(--font-head);
  font-size:   0.97rem;
  font-weight: 600;
  line-height: 1.3;
  color:       var(--text);
  letter-spacing: -0.01em;
}

.niche-card p {
  font-size:  0.845rem;
  color:      var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.niche-card .card-arrow {
  font-size:  0.75rem;
  color:      var(--amber);
  font-weight: 600;
  align-self: flex-end;
  margin-top: 0.25rem;
  opacity:    0;
  transform:  translateX(-4px);
  transition: opacity var(--t), transform var(--t);
}

.niche-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Bento featured card (wide) */
.niche-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border-color: var(--border-2);
}

@media (max-width: 600px) {
  .niche-card--featured { grid-column: span 1; }
}

/* ── Product Cards ─────────────────────────────────────────── */
.product-card {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       1.5rem;
  margin-bottom: 1.25rem;
  display:       grid;
  grid-template-columns: 1fr;
  gap:           1rem;
  transition:    border-color var(--t), box-shadow var(--t);
}

.product-card:hover {
  border-color: var(--border-amber);
  box-shadow:   var(--shadow-amber);
}

/* Product image zone */
.product-image-zone {
  border-radius: var(--r);
  height:        120px;
  background:    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border:        1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.75rem;
  color:         var(--text-dim);
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}

.product-image-zone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
}

.product-card h3 {
  font-family: var(--font-head);
  font-size:   1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.product-category {
  font-size:    0.72rem;
  font-weight:  700;
  color:        var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.product-description {
  color:      var(--text-2);
  font-size:  0.92rem;
  line-height: 1.6;
}

/* Specs grid */
.product-specs {
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:        0.5rem;
  margin:     0.75rem 0;
}

.spec-item {
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  padding:       0.5rem 0.65rem;
}

.spec-label {
  font-size:   0.68rem;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.spec-value {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--text);
}

/* Pros/Cons */
.product-pros, .product-cons {
  list-style: none;
  margin:     0.5rem 0;
}

.product-pros li {
  padding: 0.2rem 0;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--text-2);
}

.product-pros li::before {
  content:  '✓';
  position: absolute;
  left:     0;
  color:    var(--success);
  font-weight: 700;
}

.product-cons li {
  padding: 0.2rem 0;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-cons li::before {
  content:  '✗';
  position: absolute;
  left:     0;
  color:    var(--danger);
}

.price-note {
  font-size:  0.8rem;
  color:      var(--text-muted);
  font-style: italic;
  margin:     0.5rem 0;
}

/* ── Score Bar ─────────────────────────────────────────────── */
.score-bar-group {
  margin: 0.75rem 0;
}

.score-bar-row {
  display:     grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap:         0.65rem;
  margin-bottom: 0.4rem;
}

.score-bar-label {
  font-size:  0.78rem;
  color:      var(--text-muted);
  font-weight: 500;
}

.score-bar-track {
  height:        6px;
  background:    var(--bg-3);
  border-radius: var(--r-pill);
  overflow:      hidden;
}

.score-bar-fill {
  height:          100%;
  width:           100%;
  border-radius:   var(--r-pill);
  background:      linear-gradient(90deg, var(--amber), var(--amber-dim));
  transform:       scaleX(0);
  transform-origin: left center;
  transition:      transform 0.5s ease;
}

.score-bar-fill--blue {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.score-bar-fill--green {
  background: linear-gradient(90deg, var(--success), #059669);
}

.score-bar-val {
  font-size:  0.75rem;
  font-weight: 700;
  color:      var(--amber);
  text-align: right;
}

/* ── CTA Buttons ───────────────────────────────────────────── */
.btn-amazon, .btn-buy {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  gap:          0.45rem;
  background:   var(--amber);
  color:        #0A0A0A;
  padding:      0.65rem 1.5rem;
  border-radius: var(--r);
  font-weight:  700;
  font-size:    0.9rem;
  font-family:  var(--font-body);
  text-decoration: none;
  transition:   background var(--t), transform var(--t), box-shadow var(--t);
  border:       none;
  cursor:       pointer;
  letter-spacing: -0.01em;
}

.btn-amazon:hover, .btn-buy:hover {
  background:  var(--amber-dim);
  transform:   translateY(-1px);
  box-shadow:  0 4px 12px var(--amber-glow);
}

.btn-amazon:active, .btn-buy:active {
  transform: translateY(0);
}

.btn-secondary {
  background:  transparent;
  border:      1px solid var(--border-2);
  color:       var(--text-2);
  padding:     0.6rem 1.25rem;
  border-radius: var(--r);
  font-size:   0.875rem;
  font-weight: 500;
  cursor:      pointer;
  transition:  border-color var(--t), background var(--t), color var(--t);
  text-decoration: none;
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
}
.btn-secondary:hover {
  border-color: var(--border-amber);
  color: var(--amber);
  background: var(--amber-glow-2);
}

/* Table CTA */
.table-cta {
  color:       var(--amber);
  font-weight: 600;
  font-size:   0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition:  opacity var(--t);
}
.table-cta:hover { opacity: 0.75; }

/* Rescue CTA box */
.rescue-cta-section {
  background:    var(--bg-1);
  border:        1px solid var(--border-amber);
  border-radius: var(--r-lg);
  padding:       1.5rem;
  margin:        2rem 0;
  text-align:    center;
}

.rescue-cta-section h3 {
  font-family: var(--font-head);
  font-size:   1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color:       var(--text);
}

.rescue-cta-section .cta-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.75rem;
  justify-content: center;
}

/* ── Comparison Table ──────────────────────────────────────── */
.comparison-table-wrapper {
  overflow-x:    auto;
  margin:        1.5rem 0;
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.875rem;
  min-width:       500px;
}

.comparison-table thead {
  background: var(--bg-2);
}

.comparison-table th {
  padding:     0.875rem 1rem;
  text-align:  left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size:   0.78rem;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  border-bottom: 2px solid var(--amber);
}

body.rtl .comparison-table th { text-align: right; }

.comparison-table td {
  padding:       0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color:         var(--text-2);
}

.comparison-table tr:last-child td { border-bottom: none; }

.comparison-table tbody tr {
  transition: background var(--t);
}

.comparison-table tbody tr:hover td {
  background: var(--bg-2);
  color:      var(--text);
}

.comparison-table td:first-child {
  font-weight: 600;
  color:       var(--text);
}

.table-note {
  font-size: 0.78rem;
  color:     var(--text-muted);
  margin-top: 0.3rem;
}

/* Score cell */
.score-cell {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  white-space: nowrap;
}

.score-pill {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--r-pill);
  font-size:     0.72rem;
  font-weight:   700;
  background:    rgba(16,185,129,.15);
  color:         var(--success);
  border:        1px solid rgba(16,185,129,.3);
}

.score-pill--amber {
  background: var(--amber-glow);
  color:      var(--amber);
  border-color: var(--border-amber);
}

.score-pill--blue {
  background: var(--blue-glow);
  color:      var(--blue);
  border-color: var(--border-blue);
}

/* ── Verdict Box ───────────────────────────────────────────── */
.verdict-box {
  background:   rgba(16,185,129,.05);
  border:       1px solid rgba(16,185,129,.2);
  border-top:   2px solid var(--success);
  border-radius: var(--r);
  padding:      1.1rem 1.25rem;
  margin:       1.5rem 0;
  line-height:  1.65;
}

.verdict-box strong {
  color:       var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  display:     block;
  margin-bottom: 0.4rem;
}

.verdict-box p {
  color:      var(--text-2);
  font-size:  0.92rem;
}

.verdict-box a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.verdict-box.warning {
  border-color:     rgba(245,158,11,.2);
  border-top-color: var(--warning);
  background:       rgba(245,158,11,.05);
}

.verdict-box.info {
  border-color:     rgba(59,130,246,.2);
  border-top-color: var(--blue);
  background:       rgba(59,130,246,.05);
}

/* ── Article Layout ────────────────────────────────────────── */
.article-content {
  max-width:  780px;
  margin:     0 auto;
  padding:    2rem 1.25rem;
}

.article-content h2 {
  font-family:   var(--font-head);
  font-size:     1.45rem;
  font-weight:   700;
  letter-spacing: -0.02em;
  margin:        2.25rem 0 0.75rem;
  color:         var(--text);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.article-content h3 {
  font-family: var(--font-head);
  font-size:   1.1rem;
  font-weight: 600;
  margin:      1.75rem 0 0.5rem;
  color:       var(--text);
}

.article-content p {
  margin-bottom: 1rem;
  color:         var(--text-2);
  font-size:     0.955rem;
}

.article-content ul,
.article-content ol {
  margin:      0.75rem 0 1rem 1.5rem;
}

body.rtl .article-content ul,
body.rtl .article-content ol { margin-left: 0; margin-right: 1.5rem; }

.article-content li {
  margin-bottom: 0.4rem;
  color:         var(--text-2);
  font-size:     0.945rem;
}

.article-content a {
  color:            var(--amber);
  text-decoration:  underline;
  text-underline-offset: 2px;
}

.article-content strong { color: var(--text); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-section { margin: 2rem 0; }

.faq-item {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 0.5rem;
  overflow:      hidden;
  transition:    border-color var(--t);
}

.faq-item:hover {
  border-color: var(--border-2);
}

.faq-question {
  padding:       1rem 1.25rem;
  cursor:        pointer;
  font-family:   var(--font-head);
  font-weight:   600;
  font-size:     0.95rem;
  list-style:    none;
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  color:         var(--text);
  user-select:   none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content:      '+';
  color:        var(--amber);
  font-size:    1.25rem;
  font-weight:  300;
  line-height:  1;
  flex-shrink:  0;
  margin-left:  1rem;
}

details[open] .faq-question::after { content: '−'; }

.faq-answer {
  padding:    0 1.25rem 1rem;
  color:      var(--text-2);
  font-size:  0.9rem;
  line-height: 1.65;
  border-top: 1px solid var(--border);
}

/* ── Tags ──────────────────────────────────────────────────── */
.tag {
  display:       inline-flex;
  align-items:   center;
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  padding:       0.2rem 0.65rem;
  font-size:     0.72rem;
  font-weight:   500;
  color:         var(--text-muted);
  letter-spacing: 0.02em;
  margin:        0.15rem;
}

.tag--amber {
  background: var(--amber-glow-2);
  border-color: var(--border-amber);
  color:       var(--amber);
}

.tag--blue {
  background: var(--blue-glow);
  border-color: var(--border-blue);
  color:       var(--blue);
}

/* ── Pending link ──────────────────────────────────────────── */
.pending-link {
  color:      var(--text-muted);
  font-style: italic;
  font-size:  0.88rem;
}

/* ── About / Info Box ──────────────────────────────────────── */
.info-box {
  background:    var(--bg-1);
  border:        1px solid var(--border-blue);
  border-radius: var(--r-lg);
  padding:       1.5rem;
  margin:        2rem 0;
}

.info-box strong {
  font-family: var(--font-head);
  font-weight: 700;
  color:       var(--text);
  display:     block;
  margin-bottom: 0.5rem;
}

.info-box p {
  color:     var(--text-2);
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.info-box a {
  color: var(--amber);
  font-weight: 600;
}

/* ── Footer ────────────────────────────────────────────────── */
footer, footer.site-footer {
  background:  var(--bg-1);
  border-top:  1px solid var(--border);
  padding:     3rem 1.5rem 2rem;
  margin-top:  4rem;
}

.footer-inner {
  max-width:   1280px;
  margin:      0 auto;
}

.footer-grid {
  display:     grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:         2rem;
  margin-bottom: 2rem;
}

.footer-brand {
  grid-column: span 1;
}

.footer-brand .logo {
  font-family: var(--font-head);
  font-size:   1.1rem;
  font-weight: 800;
  color:       var(--amber);
  display:     block;
  margin-bottom: 0.6rem;
}

.footer-brand p {
  font-size:  0.82rem;
  color:      var(--text-muted);
  line-height: 1.6;
}

.footer-col h4 {
  font-family: var(--font-head);
  font-size:   0.78rem;
  font-weight: 700;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.4rem;
}

.footer-col ul li a {
  font-size:  0.85rem;
  color:      var(--text-muted);
  transition: color var(--t);
}

.footer-col ul li a:hover { color: var(--amber); }

.footer-bottom {
  border-top:  1px solid var(--border);
  padding-top: 1.5rem;
  text-align:  center;
}

.footer-bottom p {
  font-size:  0.78rem;
  color:      var(--text-muted);
  max-width:  700px;
  margin:     0 auto 0.4rem;
  line-height: 1.6;
}

.footer-bottom .footer-links {
  display:    flex;
  justify-content: center;
  gap:        1.25rem;
  flex-wrap:  wrap;
  margin-bottom: 1rem;
}

.footer-bottom .footer-links a {
  font-size:  0.82rem;
  color:      var(--text-muted);
  transition: color var(--t);
}
.footer-bottom .footer-links a:hover { color: var(--amber); }

/* Legacy footer (interior pages) */
footer:not(.site-footer) {
  text-align: center;
}

footer:not(.site-footer) nav,
footer:not(.site-footer) p {
  color:     var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

footer:not(.site-footer) a {
  color: var(--amber);
  text-decoration: none;
  margin: 0 0.4rem;
}

footer:not(.site-footer) a:hover { text-decoration: underline; }

.footer-disclosure {
  max-width:  700px;
  margin:     0.75rem auto 0;
  font-size:  0.78rem;
  color:      var(--text-dim);
  line-height: 1.6;
}

/* ── Buy buttons in page body ──────────────────────────────── */
.cta-button {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;
  background:   var(--amber);
  color:        #0A0A0A;
  padding:      0.7rem 1.6rem;
  border-radius: var(--r);
  font-weight:  700;
  font-size:    0.93rem;
  text-decoration: none;
  transition:   background var(--t), transform var(--t), box-shadow var(--t);
  font-family:  var(--font-body);
}

.cta-button:hover {
  background:  var(--amber-dim);
  transform:   translateY(-1px);
  box-shadow:  0 6px 16px var(--amber-glow);
}

/* ── Utility ────────────────────────────────────────────────── */
.text-muted  { color: var(--text-muted) !important; }
.text-accent { color: var(--amber) !important; }
.text-blue   { color: var(--blue) !important; }
.text-sm     { font-size: 0.85rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }

.meta { color: var(--text-muted); font-size: 0.8rem; }

/* ── Disclosure notice (inline) ────────────────────────────── */
.disclosure-notice {
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  padding:       0.6rem 1rem;
  font-size:     0.8rem;
  color:         var(--text-muted);
  margin-bottom: 1.25rem;
}

.disclosure-notice a {
  color: var(--amber);
  text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 768px) {
  .site-nav-inner { height: 52px; padding: 0 1rem; }
  nav.site-nav ul { gap: 0; }
  nav.site-nav li a { padding: 0.3rem 0.55rem; font-size: 0.82rem; }
  .site-hero { padding: 3rem 1rem 2.5rem; }
  .site-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .site-hero .hero-lead { font-size: 1rem; }
  .page-hero { padding: 2rem 1rem 1.25rem; }
  .article-content { padding: 1.5rem 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .niche-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .score-bar-row { grid-template-columns: 90px 1fr 32px; }
}

@media (max-width: 480px) {
  .site-nav-inner { height: 50px; }
  nav.site-nav ul { display: none; }
  .niche-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .niche-card { padding: 1rem; }
  .comparison-table th, .comparison-table td { padding: 0.6rem 0.7rem; font-size: 0.82rem; }
  .hero-trust-row { gap: 0.75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .rescue-cta-section .cta-grid { flex-direction: column; align-items: stretch; }
  .rescue-cta-section .cta-grid .btn-buy { text-align: center; justify-content: center; }
}

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

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Winner Cards (comparison page top picks) ──────────────── */
.winner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.winner-card {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-top:    2px solid var(--border-2);
  border-radius: var(--r-lg);
  padding:       1.25rem;
  display:       flex;
  flex-direction: column;
  gap:           0.55rem;
  transition:    border-color var(--t), transform var(--t), box-shadow var(--t);
}

.winner-card--top   { border-top-color: var(--amber); }
.winner-card--blue  { border-top-color: var(--blue); }
.winner-card--green { border-top-color: var(--success); }

.winner-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-hover);
  border-color: var(--border-2);
}

.rank-badge {
  display:        inline-flex;
  font-size:      0.67rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--amber);
  background:     var(--amber-glow-2);
  border:         1px solid var(--border-amber);
  border-radius:  var(--r-pill);
  padding:        2px 8px;
  width:          fit-content;
}

.rank-badge--blue  { color: #93C5FD;        background: var(--blue-glow);          border-color: var(--border-blue); }
.rank-badge--green { color: var(--success); background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); }

.winner-card h3 {
  font-family:    var(--font-head);
  font-size:      1rem;
  font-weight:    700;
  color:          var(--text);
  letter-spacing: -0.01em;
  margin:         0;
}

.winner-card .tagline {
  font-size:   0.845rem;
  color:       var(--text-2);
  line-height: 1.5;
  flex:        1;
}

.benefit-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0; }

.chip {
  font-size:     0.68rem;
  font-weight:   500;
  color:         var(--text-muted);
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  padding:       2px 7px;
  white-space:   nowrap;
}

/* ── Setup Cards (guide pages) ─────────────────────────────── */
.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:    1.25rem;
  margin: 1.25rem 0 2rem;
}

.setup-card {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}

.setup-card--recommended { border-color: var(--border-amber); }

.setup-card__head {
  padding:       1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-2);
}

.setup-card__label {
  display:        inline-flex;
  font-size:      0.67rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--amber);
  background:     var(--amber-glow-2);
  border:         1px solid var(--border-amber);
  border-radius:  var(--r-pill);
  padding:        2px 8px;
  margin-bottom:  0.6rem;
}

.setup-card__label--blue { color: #93C5FD;     background: var(--blue-glow); border-color: var(--border-blue); }

.setup-card__head h2 {
  font-family:    var(--font-head);
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--text);
  margin:         0 0 0.2rem;
  letter-spacing: -0.01em;
}

.setup-card__price   { font-size: 0.875rem; font-weight: 600; color: var(--amber); }
.setup-card__tagline { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; }

.setup-item-list {
  list-style: none;
  padding:    0.875rem 1rem;
  flex:       1;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
}

.setup-item {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  padding:       0.55rem 0.75rem;
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
}

.setup-item__icon { font-size: 1.1rem; flex-shrink: 0; width: 1.75rem; text-align: center; }
.setup-item__body { flex: 1; min-width: 0; }

.setup-item__body strong {
  display:       block;
  font-size:     0.845rem;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.setup-item__body span { font-size: 0.75rem; color: var(--text-muted); }

.setup-item__cta {
  color:       var(--amber);
  font-size:   0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition:  opacity var(--t);
  flex-shrink: 0;
}
.setup-item__cta:hover { opacity: 0.7; }

.setup-card__foot {
  padding:    0.875rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

/* ── Tips grid ─────────────────────────────────────────────── */
.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }

.tip-card {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       1.1rem 1.25rem;
}

.tip-card h3 { font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.tip-card ul { list-style: none; }

.tip-card li {
  font-size:   0.84rem;
  color:       var(--text-2);
  padding:     0.2rem 0 0.2rem 1.1rem;
  position:    relative;
  line-height: 1.5;
}

.tip-card li::before { content: '→'; position: absolute; left: 0; color: var(--amber); font-size: 0.72rem; top: 0.3rem; }

/* ── Decision row ──────────────────────────────────────────── */
.decision-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; align-items: center; }

.decision-label { font-size: 0.73rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }

.decision-chip {
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  padding:       0.3rem 0.875rem;
  font-size:     0.8rem;
  color:         var(--text-2);
  white-space:   nowrap;
}

.decision-chip strong { color: var(--amber); }

/* ── Search widget ─────────────────────────────────────────── */
.search-widget { max-width: 540px; margin: 1.75rem auto 0; position: relative; }

.search-input {
  width:         100%;
  background:    rgba(255,255,255,.07);
  border:        1px solid var(--border-2);
  border-radius: var(--r-pill);
  padding:       0.75rem 3rem 0.75rem 1.25rem;
  font-size:     0.9rem;
  font-family:   var(--font-body);
  color:         var(--text);
  outline:       none;
  transition:    border-color var(--t), background var(--t), box-shadow var(--t);
}

.search-input::placeholder { color: var(--text-dim); }

.search-input:focus {
  border-color: var(--border-amber);
  background:   rgba(255,255,255,.1);
  box-shadow:   0 0 0 3px var(--amber-glow-2);
}

.search-btn {
  position:  absolute;
  right:     0.875rem;
  top:       50%;
  transform: translateY(-50%);
  background: none;
  border:    none;
  cursor:    pointer;
  color:     var(--amber);
  padding:   0.2rem;
  display:   flex;
  align-items: center;
}

.search-results {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0; right: 0;
  background:    var(--bg-1);
  border:        1px solid var(--border-2);
  border-radius: var(--r);
  z-index:       50;
  max-height:    320px;
  overflow-y:    auto;
  display:       none;
  box-shadow:    var(--shadow-card);
}

.search-results.open { display: block; }

.search-result {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  padding:        0.65rem 1rem;
  border-bottom:  1px solid var(--border);
  text-decoration: none;
  color:          inherit;
  transition:     background var(--t);
}

.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg-hover); }
.search-result strong { font-size: 0.875rem; color: var(--text); font-weight: 600; }
.search-result span   { font-size: 0.75rem;  color: var(--text-muted); }
.search-empty { padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }

/* ── Related guides grid ──────────────────────────────────── */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 0.75rem; margin: 0.75rem 0 2rem; }

.related-card {
  background:    var(--bg-1);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       0.875rem 1rem;
  text-decoration: none;
  color:         inherit;
  transition:    border-color var(--t), background var(--t);
  display:       flex;
  flex-direction: column;
  gap:           0.25rem;
}

.related-card:hover { border-color: var(--border-amber); background: var(--bg-2); }
.related-card strong { font-size: 0.845rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.related-card span   { font-size: 0.72rem;  color: var(--text-muted); }

/* ── Motion ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up   { animation: fadeUp 0.4s ease both; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

nav.site-nav li a { position: relative; }

nav.site-nav li a::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0.55rem;
  right:            0.55rem;
  height:           1px;
  background:       var(--amber);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform var(--t);
}

nav.site-nav li a:hover::after { transform: scaleX(1); }

.btn-amazon:focus-visible,
.btn-buy:focus-visible,
.cta-button:focus-visible {
  outline:        2px solid var(--amber);
  outline-offset: 3px;
}

/* Accordion using grid-template-rows */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
details[open] > .faq-body { grid-template-rows: 1fr; }
.faq-body-inner { overflow: hidden; padding: 0 1.25rem; }
details[open] .faq-body-inner { padding-bottom: 1rem; border-top: 1px solid var(--border); }

/* ── Compact affiliate disclosure ────────────────────────── */
.affiliate-disclosure {
  background:    transparent;
  border-bottom: 1px solid var(--border);
  color:         var(--text-2);
  padding:       0.38rem 1.5rem;
  font-size:     0.72rem;
  text-align:    center;
}

.affiliate-disclosure a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.affiliate-disclosure a:hover { color: var(--amber); }

/* Inline links in text blocks must be underlined (WCAG link-in-text-block) */
p a[style*="color"] { text-decoration: underline; text-underline-offset: 2px; }

/* ── Responsive — new components ─────────────────────────── */
@media (max-width: 768px) {
  .setup-grid  { grid-template-columns: 1fr; }
  .tips-grid   { grid-template-columns: 1fr; }
  .winner-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .winner-grid   { grid-template-columns: 1fr; }
  .search-widget { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
  nav.site-nav li a::after { transition: none; }
  .faq-body { transition: none; }
}

/* ── RTL support ─────────────────────────────────────────────── */
/* verdict-box uses border-top — direction-neutral, no RTL override needed */
body.rtl .breadcrumbs::before { content: '◀'; }

/* ── Visual Asset System ─────────────────────────────────────── */

/* Product visual zone — pulls to card edges, sits above rank-badge */
.product-visual {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          68px;
  margin:          -1.25rem -1.25rem 1.1rem;
  border-radius:   var(--r) var(--r) 0 0;
  background:      linear-gradient(135deg, rgba(255,153,0,.07) 0%, rgba(59,130,246,.04) 100%);
  border-bottom:   1px solid var(--border);
}
.product-visual svg { width: 38px; height: 38px; color: var(--amber); opacity: .65; }

.winner-card--blue  .product-visual { background: linear-gradient(135deg, rgba(59,130,246,.09) 0%, rgba(59,130,246,.03) 100%); }
.winner-card--blue  .product-visual svg { color: var(--blue); }
.winner-card--green .product-visual { background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(16,185,129,.03) 100%); }
.winner-card--green .product-visual svg { color: var(--success); }

/* Category icon on niche cards */
.cat-icon { display: block; width: 28px; height: 28px; margin-bottom: .6rem; color: var(--amber); opacity: .5; }
.niche-card--featured .cat-icon { opacity: .65; }

/* ── Setup Chain Diagram ─────────────────────────────────────── */
.setup-chain {
  display:          flex;
  align-items:      center;
  gap:              0;
  padding:          1.25rem 1.5rem;
  background:       var(--bg-1);
  border:           1px solid var(--border);
  border-radius:    var(--r-lg);
  margin:           1.5rem 0 2.5rem;
  overflow-x:       auto;
  -webkit-overflow-scrolling: touch;
}

.chain-node {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              .45rem;
  flex:             1;
  min-width:        68px;
  text-align:       center;
}
.chain-node__icon {
  width:            44px;
  height:           44px;
  background:       var(--bg-2);
  border:           1px solid var(--border-2);
  border-radius:    var(--r);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--amber);
  flex-shrink:      0;
}
.chain-node__icon svg { width: 22px; height: 22px; }
.chain-node__label {
  font-size:        .68rem;
  font-weight:      700;
  color:            var(--text-2);
  text-transform:   uppercase;
  letter-spacing:   .07em;
  line-height:      1.3;
}
.chain-node__note {
  display:          block;
  font-size:        .62rem;
  color:            var(--text-muted);
  font-weight:      500;
  text-transform:   none;
  letter-spacing:   0;
  margin-top:       .15rem;
}
.chain-node--optional .chain-node__icon { border-style: dashed; opacity: .65; }

.chain-arrow {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          0 .4rem;
  color:            var(--text-dim);
  flex-shrink:      0;
}
.chain-arrow svg { width: 14px; height: 14px; opacity: .5; }

@media (max-width: 580px) {
  .setup-chain       { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .chain-node        { flex-direction: row; text-align: left; min-width: auto; width: 100%; gap: .75rem; }
  .chain-arrow       { flex-direction: row; padding: 0 0 0 56px; }
  .chain-arrow svg   { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .setup-chain, .product-visual { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL POLISH v2 — 2026-08-07
   Hero split · Card hierarchy · Editorial cards · Background depth
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: left-aligned split layout (desktop) ─────────────── */
.site-hero {
  text-align: left;
  padding: 3.75rem 0 3rem;
}
.hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.hero-content { flex: 1 1 0; min-width: 0; }
.hero-content .hero-lead { margin-left: 0; margin-right: 0; max-width: 540px; }
.hero-content .search-widget { margin-left: 0; margin-right: auto; }
.hero-vis {
  width: 38%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illo {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 12px 48px rgba(59,130,246,.14));
}

/* Hero: background depth — dual radial + subtle grid */
.site-hero::before {
  background:
    radial-gradient(ellipse at 14% 55%, rgba(255,153,0,.08) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 18%, rgba(59,130,246,.14) 0%, transparent 50%);
  width: 100%; height: 100%;
  top: 0; left: 0; transform: none;
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Mobile: stack, restore center */
@media (max-width: 860px) {
  .site-hero { text-align: center; padding: 3rem 0 2.5rem; }
  .hero-inner { flex-direction: column; gap: 1.5rem; }
  .hero-content .hero-lead { margin: 0 auto 2rem; max-width: 100%; }
  .hero-content .search-widget { margin: 1.75rem auto 0; }
  .hero-vis { width: 100%; max-height: 195px; overflow: hidden; display: flex; justify-content: center; }
  .hero-illo { max-width: 195px; }
}
@media (max-width: 500px) { .hero-vis { display: none; } }

/* ── Disclosure: editorial integration ──────────────────────── */
.affiliate-disclosure {
  background: rgba(255,255,255,.015);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.44rem 1.5rem;
  font-size: 0.69rem;
  letter-spacing: 0.012em;
}
.affiliate-disclosure a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,196,220,.22);
  padding-bottom: 1px;
}
.affiliate-disclosure a:hover {
  color: var(--amber);
  border-bottom-color: rgba(255,153,0,.45);
}

/* ── Card visual zone (full-bleed top of card) ──────────────── */
.card-vis {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin: -1.25rem -1.25rem 1rem;
  background: linear-gradient(140deg, rgba(59,130,246,.055) 0%, rgba(255,153,0,.02) 100%);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  flex-shrink: 0;
}
.card-vis svg { width: 100%; max-width: 220px; height: 60px; }

/* Large vis for editorial/featured cards */
.card-vis--lg {
  height: 128px;
  background: linear-gradient(140deg, rgba(29,78,216,.12) 0%, rgba(15,23,42,.6) 48%, rgba(255,153,0,.035) 100%);
}
.card-vis--lg svg { max-width: 100%; height: 102px; }

/* ── Editorial featured card ─────────────────────────────────── */
.niche-card--editorial {
  background: linear-gradient(148deg, #0D1E3C 0%, #0F1C38 45%, #0A1626 100%);
  border-color: rgba(59,130,246,.28);
}
.niche-card--editorial::before {
  background: linear-gradient(90deg, transparent, #3B82F6 50%, transparent);
  opacity: 0.32;
}
.niche-card--editorial:hover {
  border-color: rgba(59,130,246,.52);
  box-shadow: 0 8px 40px rgba(59,130,246,.09), var(--shadow-hover);
}
/* hide the old small cat-icon when card-vis--lg is present */
.niche-card--editorial .cat-icon { display: none; }

/* Editorial label */
.editorial-label {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255,153,0,.25);
  padding: .15rem .52rem;
  border-radius: 3px;
  margin-bottom: .55rem;
}

/* Chips row */
.card-chips { display: flex; flex-wrap: wrap; gap: .32rem; margin: .5rem 0 .35rem; }
.card-chip {
  font-size: .61rem;
  font-weight: 600;
  padding: .17rem .48rem;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.16);
  border-radius: 3px;
  color: var(--text-2);
}

/* Visible primary CTA (always visible, not hover-only) */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .65rem;
  padding: .46rem .88rem;
  background: var(--amber);
  color: #000;
  border-radius: var(--r-sm);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .012em;
  align-self: flex-start;
  transition: background var(--t), box-shadow var(--t);
}
.niche-card:hover .card-cta {
  background: #FFB800;
  box-shadow: 0 2px 12px rgba(255,153,0,.32);
}

/* Section background: very subtle surface gradient */
.container--wide {
  position: relative;
}
.container--wide::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.025) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.container--wide > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-illo { filter: none; }
}