/* ============================================================
   CaliVapeKing — Main Stylesheet  v2.0
   Dark premium editorial theme
   Mobile-first | WCAG 2.1 AA
   Fonts: Barlow (headings/body), Courier Prime (accents)
   ============================================================ */

/* ── Custom Properties ───────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-dark:   #A07830;
  --gold-light:  #E8C96A;
  --gold-dim:    rgba(201,168,76,0.12);

  --bg:          #0D0807;
  --surface:     #130A05;
  --surface-2:   #1C1008;
  --surface-3:   #261510;

  --tan:         #F0E8D0;
  --tan-mid:     #1C1008;
  --tan-dark:    #C0A878;
  --brown:       #2C1810;
  --brown-mid:   #5A3A20;
  --text:        #F0E8D0;
  --text-muted:  #8A7055;
  --white:       #FDFAF4;
  --green:       #4CAF72;
  --red:         #C0392B;
  --border:      #2A1810;

  --font-head:   'Barlow', 'Arial Narrow', Arial, sans-serif;
  --font-accent: 'Courier Prime', 'Courier New', monospace;
  --font-body:   'Barlow', Arial, sans-serif;

  --radius:      8px;
  --radius-lg:   16px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.6);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.7);
  --glow-gold:   0 0 24px rgba(201,168,76,0.18);

  --max-width:   1180px;
  --nav-h:       80px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: underline; }
a:hover, a:focus { color: var(--gold-light); }
ul, ol { padding-left: 1.25rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tan);
}
h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin-bottom: 1rem; }
.accent { font-family: var(--font-accent); }
.text-gold  { color: var(--gold); }
.text-muted { color: var(--text-muted); font-size: 0.9rem; }

/* ── Font-face ───────────────────────────────────────────── */
@font-face { font-family:'Barlow'; src:url('../fonts/barlow-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('../fonts/courier-prime-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('../fonts/courier-prime-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Layout helpers ──────────────────────────────────────── */
.container { width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:1rem; }
.section { padding-block: 3.5rem; }
.section > .container { position: relative; }
.section--alt { background: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: 300px 300px; }
.section--dark { background: var(--surface-3); color: var(--tan); }
.section--dark h2, .section--dark h3 { color: var(--gold-light); }

/* ── Age Gate ────────────────────────────────────────────── */
#age-gate {
  position:fixed; inset:0;
  background: rgba(8,4,2,0.97);
  z-index:9999; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  backdrop-filter: blur(4px);
}
#age-gate.hidden { display:none; }
.age-gate__box {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  max-width: 420px; width:100%; text-align:center;
  box-shadow: var(--shadow-lg);
}
.age-gate__logo {
  font-family: var(--font-head); font-weight:700; font-size:1.5rem;
  color: var(--gold); margin-bottom:1rem; letter-spacing:0.04em;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.age-gate__logo img { mix-blend-mode: screen; }
.age-gate__heading { font-size:1.5rem; margin-bottom:0.5rem; color:var(--tan); }
.age-gate__sub { font-size:0.95rem; color:var(--text-muted); margin-bottom:1.5rem; }
.age-gate__buttons { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }
.age-gate__disclaimer { margin-top:1.25rem; font-size:0.78rem; color:var(--text-muted); line-height:1.5; }
.age-gate__disclaimer a { color: var(--gold); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  min-height:44px; padding:0.65rem 1.5rem;
  font-family:var(--font-head); font-size:1rem; font-weight:700;
  border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; text-decoration:none;
  transition: all 0.18s ease; line-height:1.2; white-space:nowrap;
}
.btn--primary {
  background: var(--gold); color: var(--brown); border-color: var(--gold);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--gold-light); border-color: var(--gold-light);
  color: var(--brown); box-shadow: var(--glow-gold);
}
.btn--outline {
  background: transparent; color: var(--tan); border-color: var(--border);
}
.btn--outline:hover, .btn--outline:focus-visible {
  border-color: var(--gold); color: var(--gold);
}
.btn--outline--hero { color: var(--tan); border-color: rgba(240,232,208,0.35); }
.btn--outline--hero:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--ghost { background:transparent; color:var(--gold); border-color:var(--gold-dim); }
.btn--ghost:hover { background: var(--gold-dim); border-color:var(--gold); }
.btn--danger { background: rgba(192,57,43,0.15); color:#e87c6d; border-color:rgba(192,57,43,0.4); }
.btn--sm { min-height:36px; padding:0.4rem 1rem; font-size:0.875rem; }
.btn--full { width:100%; }

/* ── Navigation ──────────────────────────────────────────── */
.site-nav {
  position:sticky; top:0; z-index:900;
  background: rgba(13,8,7,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height:var(--nav-h); display:flex; align-items:center;
  border-bottom: 1px solid var(--border);
}
.site-nav .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav__logo {
  font-family:var(--font-head); font-weight:700; font-size:1.25rem;
  color:var(--gold); text-decoration:none; letter-spacing:0.03em;
  white-space:nowrap; display:flex; align-items:center; gap:0.5rem;
}
.nav__logo img { height:68px; width:auto; border-radius:0; background:none; }
.nav__logo:hover { color:var(--gold-light); }
.nav__links { display:none; list-style:none; padding:0; gap:0.25rem; }
.nav__links a {
  display:flex; align-items:center; min-height:44px; padding:0.4rem 0.85rem;
  color:var(--tan-dark); text-decoration:none; font-weight:600; font-size:0.95rem;
  border-radius:var(--radius); transition: all 0.15s;
}
.nav__links a:hover, .nav__links a.active, .nav__links a[aria-current="page"] {
  color: var(--gold);
}
.nav__hamburger {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:0.4rem 0.5rem; cursor:pointer; min-width:44px; min-height:44px; align-items:center;
}
.nav__hamburger span { display:block; width:22px; height:2px; background:var(--gold); border-radius:2px; transition:transform 0.2s, opacity 0.2s; }
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav__mobile {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background: rgba(13,8,7,0.98); backdrop-filter:blur(12px);
  padding:1rem; box-shadow:var(--shadow-lg); z-index:899;
  border-bottom: 1px solid var(--border);
}
.nav__mobile.open { display:block; }
.nav__mobile ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:0.25rem; }
.nav__mobile a {
  display:flex; align-items:center; min-height:48px; padding:0.6rem 1rem;
  color:var(--tan-dark); text-decoration:none; font-weight:600; font-size:1.05rem;
  border-radius:var(--radius); transition:all 0.15s;
}
.nav__mobile a:hover { color:var(--gold); background: var(--surface-2); }
.nav__mobile .btn { margin-top:0.75rem; }

/* ── Disclosure / Alert banners ──────────────────────────── */
.disclosure {
  background: rgba(201,168,76,0.07);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--tan-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem;
}
.disclosure strong { color: var(--tan); }
.disclosure-wrap { padding-top: 1.5rem; }
.disclaimer {
  background: rgba(192,57,43,0.08);
  border-left: 3px solid var(--red);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--tan-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 10% 55%, rgba(201,168,76,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 88% 25%, rgba(201,168,76,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 55% 85%, rgba(160,120,48,0.04) 0%, transparent 60%),
    linear-gradient(135deg, #080503 0%, #130A05 50%, #1C1008 100%);
  color: var(--tan);
  padding-block: 5rem 6rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 40%, transparent 100%);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
}
.hero__inner { position:relative; z-index:1; }
.hero__tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
  font-weight: 700;
}
.hero h1 { color: var(--white); margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--tan-dark);
  max-width: 580px;
  margin-bottom: 2.25rem;
  line-height: 1.7;
}
.hero__actions { display:flex; gap:0.75rem; flex-wrap:wrap; }
.hero__trust {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.hero__trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--text-muted);
}
.hero__trust-item .icon { color: var(--gold); font-size: 1rem; }

/* ── Section headings ────────────────────────────────────── */
.section__label {
  font-family: var(--font-accent);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem; display: block;
}
.section__heading { margin-bottom: 0.5rem; }
.section__intro {
  font-size: 1.05rem; color: var(--text-muted);
  max-width: 600px; margin-bottom: 2.5rem; line-height: 1.7;
}

/* ── Product cards ───────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.product-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.product-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(201,168,76,0.15);
  transform: translateY(-5px);
  border-color: rgba(201,168,76,0.45);
}
.product-card__img-wrap {
  aspect-ratio: 4/3; overflow:hidden;
  background: var(--surface-3); position:relative;
}
.product-card__img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.product-card:hover .product-card__img-wrap img { transform:scale(1.05); }
.product-card__badge {
  position:absolute; top:0.75rem; left:0.75rem;
  background: var(--gold); color: var(--brown);
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.2rem 0.65rem; border-radius:999px;
}
.product-card__body { padding:1.35rem; display:flex; flex-direction:column; flex:1; }
.product-card__meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; gap:0.5rem; flex-wrap:wrap; }
.product-card__brand { font-family:var(--font-accent); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }
.stars { display:flex; align-items:center; gap:0.1rem; color:var(--gold); font-size:0.9rem; }
.stars__count { margin-left:0.3rem; font-size:0.8rem; color:var(--text-muted); font-family:var(--font-accent); }
.product-card h3 { font-size:1.2rem; margin-bottom:0.35rem; color:var(--tan); }
.product-card__price { font-weight:700; color:var(--gold); font-size:1.15rem; margin-bottom:0.6rem; }
.product-card__best-for {
  display:inline-flex; align-items:center; gap:0.3rem;
  background: var(--surface-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:0.25rem 0.65rem;
  font-size:0.8rem; color:var(--tan-dark); margin-bottom:0.85rem;
}
.product-card__excerpt {
  border-left: 2px solid rgba(201,168,76,0.4);
  padding-left: 0.75rem;
  font-style: italic;
  color: var(--tan-dark);
}
.product-card__excerpt { font-size:0.93rem; color:var(--text-muted); margin-bottom:1rem; flex:1; line-height:1.6; }
.product-card__actions { display:flex; gap:0.6rem; flex-wrap:wrap; }

/* Category nav cards */
.category-card { text-align:center; padding:2rem 1.5rem; }
.category-card__icon { font-size:2.5rem; margin-bottom:1rem; }
.category-card h3 { margin-bottom:0.5rem; }
.category-card__desc { font-size:0.93rem; color:var(--text-muted); margin-bottom:1.25rem; line-height:1.6; }

/* ── Pros / Cons ─────────────────────────────────────────── */
.pros-cons { display:grid; grid-template-columns:1fr; gap:1rem; margin-block:1.5rem; }
.pros-cons__col { background:var(--surface-2); border-radius:var(--radius); padding:1rem 1.25rem; border:1px solid var(--border); }
.pros-cons__col--pros { border-top:3px solid var(--green); }
.pros-cons__col--cons { border-top:3px solid var(--red); }
.pros-cons__label { font-weight:700; font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.6rem; }
.pros-cons__col--pros .pros-cons__label { color:var(--green); }
.pros-cons__col--cons .pros-cons__label { color:var(--red); }
.pros-cons__list { list-style:none; padding:0; }
.pros-cons__list li { padding:0.25rem 0 0.25rem 1.4rem; position:relative; font-size:0.93rem; color:var(--tan-dark); }
.pros-cons__list li::before { position:absolute; left:0; top:0.28rem; font-size:0.85rem; }
.pros-cons__col--pros li::before { content:'✓'; color:var(--green); font-weight:700; }
.pros-cons__col--cons li::before { content:'✗'; color:var(--red); font-weight:700; }

/* ── Comparison table ────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-block:1.5rem; border:1px solid var(--border); }
.compare-table { width:100%; min-width:560px; border-collapse:collapse; background:var(--surface-2); font-size:0.92rem; }
.compare-table th { background:var(--surface-3); color:var(--gold); font-family:var(--font-head); font-weight:700; padding:0.9rem 1rem; text-align:left; white-space:nowrap; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--border); }
.compare-table td { padding:0.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--tan); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:nth-child(even) td { background:var(--surface); }
.compare-table tr:hover td { background: var(--surface-3); }
.compare-table .rating-cell { color:var(--gold); font-weight:700; }
.compare-table .cta-cell { white-space:nowrap; }
.compare-table .top-pick td:first-child { border-left:3px solid var(--gold); }
.compare-brand { font-size:0.8rem; color:var(--text-muted); display:block; }
.table-note { font-size:0.8rem; color:var(--text-muted); margin-top:0.75rem; }

/* ── Deal / Promo cards ──────────────────────────────────── */
.deal-card {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.35rem;
  display:flex; flex-direction:column; gap:0.75rem;
  box-shadow:var(--shadow-sm); transition:box-shadow 0.2s, border-color 0.2s;
}
.deal-card:hover { box-shadow:var(--shadow-md); border-color:rgba(201,168,76,0.25); }
.deal-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.deal-card__title { font-size:1.1rem; margin:0; color:var(--tan); }
.deal-card__badge { background:rgba(192,57,43,0.8); color:var(--white); font-size:0.75rem; font-weight:700; padding:0.2rem 0.65rem; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.deal-card__badge--new { background:rgba(76,175,114,0.8); }
.deal-card__desc { font-size:0.93rem; color:var(--text-muted); margin:0; }
.promo-code-wrap { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.promo-code {
  font-family:var(--font-accent); font-size:1rem; font-weight:700;
  background: var(--surface-3); border:2px dashed rgba(201,168,76,0.5);
  border-radius:var(--radius); padding:0.4rem 0.9rem;
  letter-spacing:0.1em; color:var(--gold); cursor:pointer; user-select:all;
  transition: border-color 0.15s;
}
.promo-code:hover { border-color:var(--gold); }
.deal-card__expiry { font-size:0.78rem; color:var(--text-muted); font-family:var(--font-accent); }

/* ── Star rating display ─────────────────────────────────── */
.rating-block { display:flex; align-items:center; gap:0.75rem; margin-block:0.75rem; }
.rating-block__score { font-size:2.5rem; font-weight:700; font-family:var(--font-head); color:var(--gold); line-height:1; }
.rating-block__stars { color:var(--gold); font-size:1.2rem; letter-spacing:0.05em; }
.rating-block__label { font-size:0.82rem; color:var(--text-muted); }

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.testimonial { background:var(--surface-2); border-radius:var(--radius-lg); padding:1.5rem; border:1px solid var(--border); position:relative; }
.testimonial::before { content:'"'; position:absolute; top:0.5rem; left:1rem; font-size:3rem; color:var(--gold-dim); font-family:Georgia,serif; line-height:1; }
.testimonial__text { padding-top:0.75rem; font-size:0.95rem; color:var(--tan-dark); font-style:italic; margin-bottom:0.75rem; }
.testimonial__author { font-weight:700; font-size:0.85rem; color:var(--text-muted); }
.testimonial__stars { color:var(--gold); font-size:0.85rem; margin-bottom:0.25rem; }

/* ── Review widget placeholder ───────────────────────────── */
.review-widget-placeholder { background:var(--surface-2); border:2px dashed var(--border); border-radius:var(--radius-lg); padding:2rem; text-align:center; color:var(--text-muted); font-size:0.9rem; }
.review-widget-placeholder p { margin:0; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-weight:600; margin-bottom:0.4rem; font-size:0.95rem; color:var(--tan); }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; min-height:44px; padding:0.65rem 0.9rem;
  font-family:var(--font-body); font-size:1rem; color:var(--tan);
  background: var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--radius); transition:border-color 0.15s, box-shadow 0.15s; appearance:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.15);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group textarea { min-height:130px; resize:vertical; }
.form-note { font-size:0.82rem; color:var(--text-muted); margin-top:0.3rem; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { display:flex; flex-wrap:wrap; gap:0.3rem; align-items:center; font-size:0.82rem; color:var(--text-muted); padding-block:0.75rem; list-style:none; padding-left:0; }
.breadcrumb li + li::before { content:'›'; margin-right:0.3rem; color:var(--border); }
.breadcrumb a { color:var(--tan-dark); text-decoration:none; }
.breadcrumb a:hover { color:var(--gold); }

/* ── Section divider ────────────────────────────────────── */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.25) 30%, rgba(201,168,76,0.5) 50%, rgba(201,168,76,0.25) 70%, transparent 100%);
  margin: 0;
}

/* ── From the 805 personal block ───────────────────────── */
.from-805 {
  background: var(--surface);
  padding-block: 3.5rem;
  position: relative;
}
.from-805__inner {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.from-805__avatar {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid rgba(201,168,76,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
}
.from-805__content { flex: 1; min-width: 260px; }
.from-805__label {
  font-family: var(--font-accent);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem; display: block;
}
.from-805__quote {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--tan);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-style: italic;
}
.from-805__quote em { font-style: normal; color: var(--gold); }
.from-805__sig {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.from-805__stats {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.from-805__stat { display: flex; flex-direction: column; gap: 0.15rem; }
.from-805__stat-num {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.from-805__stat-label { font-size: 0.78rem; color: var(--text-muted); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:var(--surface); color:var(--tan); padding-block:2rem 1.25rem; margin-top:3rem; border-top:1px solid var(--border); }
.footer__grid { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.5rem; }
.footer__brand-logo { margin-bottom:0.4rem; }
.footer__brand-logo img { width:90px; height:auto; opacity:0.9; filter:brightness(1.1) saturate(1.1); mix-blend-mode:screen; display:block; border-radius:0; border:none; background:transparent; }
.footer__brand-name { font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--gold); margin-bottom:0.25rem; }
.footer__tagline { font-size:0.8rem; color:var(--text-muted); margin-bottom:0.5rem; }
.footer__col h4 { color:var(--tan-dark); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:0.5rem; font-family:var(--font-accent); }
.footer__col ul { list-style:none; padding:0; }
.footer__col ul li + li { margin-top:0.2rem; }
.footer__col a { color:var(--text-muted); text-decoration:none; font-size:0.82rem; transition:color 0.15s; }
.footer__col a:hover { color:var(--gold); }
.footer__bottom { border-top:1px solid var(--border); padding-top:1rem; display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:space-between; align-items:flex-start; }
.footer__legal { font-size:0.78rem; color:var(--text-muted); line-height:1.6; max-width:640px; }
.footer__legal a { color:var(--text-muted); }
.footer__legal a:hover { color:var(--gold); }
.footer__copy { font-size:0.78rem; color:var(--text-muted); white-space:nowrap; }
.footer__email { font-size:0.85rem; color:var(--text-muted); }

/* ── Chips ───────────────────────────────────────────────── */
.chip-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.chip { background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0.3rem 0.85rem; font-size:0.82rem; color:var(--tan-dark); font-weight:600; cursor:default; transition:all 0.15s; }
.chip--active, .chip:hover { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); }

/* ── Score bars ──────────────────────────────────────────── */
.score-row { display:flex; flex-wrap:wrap; gap:0.75rem 1.5rem; margin-block:1.25rem; }
.score-item { display:flex; flex-direction:column; gap:0.2rem; }
.score-item__label { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }
.score-item__bar-wrap { display:flex; align-items:center; gap:0.5rem; }
.score-item__bar { width:100px; height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
.score-item__bar-fill { height:100%; background:var(--gold); border-radius:999px; }
.score-item__val { font-size:0.82rem; font-weight:700; color:var(--tan); }

/* ── Newsletter strip ────────────────────────────────────── */
.newsletter-strip { background:var(--surface-3); padding-block:3rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.newsletter-strip h2 { color:var(--tan); margin-bottom:0.5rem; }
.newsletter-strip p { color:var(--text-muted); margin-bottom:1.25rem; }
.newsletter-form { display:flex; gap:0.75rem; flex-wrap:wrap; max-width:460px; }
.newsletter-form input { flex:1; min-width:200px; min-height:44px; padding:0.65rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-size:1rem; background:var(--surface-2); color:var(--tan); transition:border-color 0.15s; }
.newsletter-form input:focus { outline:none; border-color:var(--gold); }
.newsletter-form input::placeholder { color:var(--text-muted); }
.newsletter-note { font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; }

/* ── FAQ section ─────────────────────────────────────────── */
.faq-container { max-width:760px; }
.faq-list { margin-top:1.5rem; }
.faq-list__q { display:block; font-weight:700; font-size:1.05rem; color:var(--tan); margin-top:1.75rem; padding-left:1rem; border-left:3px solid var(--gold); }
.faq-list__a { display:block; margin-top:0.5rem; color:var(--text-muted); line-height:1.7; }

/* ── Utility ─────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-center { text-align:center; }
.mb-0 { margin-bottom:0; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.gap-row { display:flex; flex-wrap:wrap; gap:1rem; }

/* ── Page hero (inner pages) ─────────────────────────────── */
.page-hero {
  background:
    radial-gradient(ellipse 65% 80% at 8% 40%, rgba(201,168,76,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 92% 20%, rgba(201,168,76,0.06) 0%, transparent 60%),
    linear-gradient(135deg, #1A0C06 0%, #2A1610 50%, #1A0C06 100%);
  padding-block: 3.5rem 3rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 40%, transparent 100%);
}
.page-hero__heading { color:var(--white); margin-bottom:0.5rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.page-hero__sub { color:var(--tan-dark); max-width:600px; line-height:1.75; font-size: 1.05rem; }

/* ── Content containers ──────────────────────────────────── */
.container--narrow  { max-width:640px; }
.container--content { max-width:740px; }
.container--wide    { max-width:860px; }

/* ── Spacing utilities ───────────────────────────────────── */
.disclosure-wrap { padding-top:1.5rem; }
.chip-row-wrap   { padding-bottom:0.5rem; }
.h2-spaced  { margin-top:2.5rem; }
.h3-spaced  { margin-top:1.25rem; }
.mt-4 { margin-top:2rem; }
.mt-5 { margin-top:2.5rem; }
.mt-6 { margin-top:3rem; }
.mb-1 { margin-bottom:1rem; }
.mb-2 { margin-bottom:2rem; }
.affiliate-note { margin-top:0.5rem; font-size:0.8rem; color:var(--text-muted); }

/* ── About page ──────────────────────────────────────────── */
.about-cta { margin-top:2.5rem; text-align:center; padding:2.5rem 2rem; background:var(--surface-3); border-radius:var(--radius-lg); border:1px solid var(--border); }
.about-cta p { color:var(--text-muted); margin-bottom:1.25rem; }

/* ── Contact page ────────────────────────────────────────── */
.contact-cta-box { background:var(--surface-3); border-radius:var(--radius-lg); padding:2rem; text-align:center; margin-bottom:2.5rem; border:1px solid var(--border); }
.contact-cta-box__label { font-size:1.1rem; font-weight:600; color:var(--tan); margin-bottom:0.5rem; }
.required-mark { color:var(--red); }

/* ── Deals page ──────────────────────────────────────────── */
.deals-updated  { color:var(--gold); font-size:0.85rem; margin-top:0.5rem; font-family:var(--font-accent); }
.deal-code-note { font-size:0.85rem; color:var(--text-muted); }
.promo-no-code  { font-size:0.9rem; color:var(--gold); font-weight:700; }
.howto-list     { max-width:520px; font-size:1rem; line-height:2; }

/* ── Reviews page ────────────────────────────────────────── */
.review-grid { display:grid; grid-template-columns:1fr; gap:2rem; }

/* ══════════════════════════════════════════════════════════
   NEW COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── Trust bar ───────────────────────────────────────────── */
.trust-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: 1.25rem;
}
.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: center;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.trust-bar__item strong { color: var(--tan); font-weight: 600; }
.trust-bar__icon { color: var(--gold); font-size: 1rem; }

/* ── Trust section (Why Trust CVK) ──────────────────────── */
.trust-section { background: var(--surface); }
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.trust-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid rgba(201,168,76,0.35);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.trust-card:hover {
  border-color: rgba(201,168,76,0.6);
  border-top-color: var(--gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(201,168,76,0.1);
  transform: translateY(-3px);
}
.trust-card__icon { font-size: 2.2rem; margin-bottom: 1rem; display:block; }
.trust-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--tan); }
.trust-card p { font-size: 0.93rem; color: var(--text-muted); margin: 0; line-height: 1.65; }

/* ── Quiz ────────────────────────────────────────────────── */
.quiz-section { background: var(--bg); }
.quiz {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.quiz__progress {
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.quiz__progress-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.quiz__step-label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.quiz__step { display: none; }
.quiz__step.active { display: block; }
.quiz__question {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--tan);
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.quiz__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.quiz__options--3 {
  grid-template-columns: 1fr;
}
.quiz__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--surface-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  font-family: var(--font-body);
}
.quiz__option:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.quiz__option.selected {
  border-color: var(--gold);
  background: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.quiz__option-icon { font-size: 1.5rem; margin-bottom: 0.1rem; }
.quiz__option-label { font-size: 1rem; font-weight: 700; color: var(--tan); }
.quiz__option-sub { font-size: 0.8rem; color: var(--text-muted); }
.quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.quiz__dots { display: flex; gap: 0.4rem; }
.quiz__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--border);
  transition: all 0.2s;
}
.quiz__dot.active { background: var(--gold); width: 20px; }

/* Quiz results */
.quiz__results-header { margin-bottom: 1.5rem; }
.quiz__results-title { font-size: 1.5rem; color: var(--tan); margin-bottom: 0.4rem; }
.quiz__results-sub { color: var(--text-muted); margin: 0; }
.quiz__results-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.quiz__result-card {
  display: flex;
  gap: 1rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  align-items: flex-start;
  transition: border-color 0.2s;
}
.quiz__result-card:first-child { border-color: rgba(201,168,76,0.4); }
.quiz__result-rank {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 2rem;
  line-height: 1;
}
.quiz__result-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
  flex-shrink: 0;
}
.quiz__result-info { flex: 1; }
.quiz__result-name { font-weight: 700; font-size: 1rem; color: var(--tan); margin-bottom: 0.15rem; }
.quiz__result-brand { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.35rem; font-family: var(--font-accent); letter-spacing: 0.08em; text-transform: uppercase; }
.quiz__result-best-for { font-size: 0.8rem; color: var(--gold); margin-bottom: 0.35rem; font-weight: 600; }
.quiz__result-why { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.5; }
.quiz__result-price { font-weight: 700; color: var(--gold); font-size: 0.95rem; }
.quiz__result-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.quiz__no-match { text-align: center; padding: 2rem; color: var(--text-muted); }
.quiz__restart { margin-top: 0.5rem; }

/* ── Budget range strip ──────────────────────────────────── */
/* budget-strip old rule removed */
/* budget-card old rules removed */




/* ── Responsive: 600px+ ──────────────────────────────────── */
@media (min-width: 600px) {
  .card-grid { grid-template-columns: repeat(2,1fr); }
  .pros-cons { grid-template-columns: 1fr 1fr; }
  .testimonial-grid { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: repeat(2,1fr); }
  .quiz__options--3 { grid-template-columns: repeat(3,1fr); }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  /* removed old budget 2col */
  .quiz__results-grid { grid-template-columns: 1fr; }
}

/* ── Responsive: 768px+ ──────────────────────────────────── */
@media (min-width: 768px) {
  .container { padding-inline: 1.5rem; }
  .nav__links { display: flex; }
  .nav__hamburger { display: none; }
  .nav__mobile { display: none !important; }
  .section { padding-block: 5rem; }
  .hero { padding-block: 6rem 7rem; }
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:1rem; }
  .quiz { padding: 2.5rem; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  /* removed old budget 4col */
}

/* ── Responsive: 1024px+ ─────────────────────────────────── */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3,1fr); }
  .testimonial-grid { grid-template-columns: repeat(3,1fr); }
  .trust-grid { grid-template-columns: repeat(4,1fr); }
}

/* ── Responsive: 1280px+ ─────────────────────────────────── */
@media (min-width: 1280px) {
  .container { padding-inline: 2rem; }
  .section { padding-block: 6rem; }
}

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


/* ── Article body ────────────────────────────────────────── */
.article-body { font-size: 1.05rem; line-height: 1.85; color: var(--tan); }
.article-body p { margin-bottom: 1.35rem; }
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--white);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.article-body h2::after {
  display: none;
}
.article-body h3 {
  font-size: 1.15rem;
  color: var(--gold);
  margin: 1.75rem 0 0.6rem;
  font-family: var(--font-head);
}

/* ── Callout boxes ───────────────────────────────────────── */
.callout {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin: 1.75rem 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--tan);
}
.callout__label {
  font-family: var(--font-accent);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 0.4rem; display: block;
}
.callout--tip { border-left-color: #4CAF72; }
.callout--tip .callout__label { color: #4CAF72; }
.callout--warning { border-left-color: #E8A020; }
.callout--warning .callout__label { color: #E8A020; }
.callout--verdict {
  background: linear-gradient(135deg, #1E1208 0%, #2A1A0E 100%);
  border: 1px solid rgba(201,168,76,0.4);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.callout--verdict .callout__label { font-size: 0.72rem; letter-spacing: 0.2em; }
.callout--verdict p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--tan); }

/* ── Pull quote ──────────────────────────────────────────── */
.pull-quote {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-style: italic;
  color: var(--tan);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 0 0.75rem 1.5rem;
  margin: 2rem 0;
  line-height: 1.65;
}
.pull-quote em { color: var(--gold); font-style: normal; font-weight: 700; }

/* ── Temperature scale ───────────────────────────────────── */
.temp-scale { display: grid; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.temp-band {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.temp-band__range {
  font-family: var(--font-accent); font-weight: 700;
  font-size: 0.82rem; white-space: nowrap; min-width: 120px; color: var(--white);
}
.temp-band__desc { font-size: 0.88rem; line-height: 1.4; }
.temp-band--low    { background: rgba(76,175,114,0.12); border-color: rgba(76,175,114,0.25); }
.temp-band--mid    { background: rgba(201,168,76,0.10); border-color: rgba(201,168,76,0.25); }
.temp-band--med    { background: rgba(232,160,32,0.10); border-color: rgba(232,160,32,0.25); }
.temp-band--high   { background: rgba(220,100,32,0.10); border-color: rgba(220,100,32,0.25); }
.temp-band--max    { background: rgba(192,57,43,0.10);  border-color: rgba(192,57,43,0.25); }
.temp-band--low .temp-band__range    { color: #4CAF72; }
.temp-band--mid .temp-band__range    { color: var(--gold-light); }
.temp-band--med .temp-band__range    { color: #E8A020; }
.temp-band--high .temp-band__range   { color: #DC6420; }
.temp-band--max .temp-band__range    { color: #C0392B; }

/* ── Step cards ──────────────────────────────────────────── */
.step-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0; }
.step-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.step-card:hover { border-color: rgba(201,168,76,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.step-card__num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.9rem; color: var(--gold);
}
.step-card__content h4 { margin: 0 0 0.3rem; color: var(--tan); font-size: 0.97rem; }
.step-card__content p  { margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }

/* ── TOC box ─────────────────────────────────────────────── */
.toc-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin-bottom: 2.5rem;
}
.toc-box__label {
  font-family: var(--font-accent); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem; display: block;
}
.toc-box ol { padding-left: 1.2rem; margin: 0; }
.toc-box li { margin-bottom: 0.35rem; }
.toc-box a { color: var(--tan-dark); text-decoration: none; font-size: 0.92rem; }
.toc-box a:hover { color: var(--gold); }

/* ── Gear wall (about page) ──────────────────────────────── */
.gear-wall { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 1.5rem 0; }
.gear-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
}
.gear-card:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-2px); }
.gear-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gear-card__info { padding: 0.75rem 0.9rem; }
.gear-card__name { font-weight: 700; font-size: 0.9rem; color: var(--tan); display: block; }
.gear-card__tag  { font-size: 0.78rem; color: var(--gold); font-family: var(--font-accent); }

/* ── About page header ───────────────────────────────────── */
.about-hero-img {
  width: 100%; max-height: 380px;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}

/* ── Inline image float ──────────────────────────────────── */
.inline-img {
  float: right;
  width: clamp(160px, 35%, 260px);
  margin: 0 0 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
@media (max-width: 540px) { .inline-img { float: none; width: 100%; margin: 1rem 0; } }

/* ── Clearfix ────────────────────────────────────────────── */
.clearfix::after { content: ''; display: table; clear: both; }

/* ── Fade-in animation ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.55s ease both; }
.fade-in-2 { animation: fadeUp 0.55s 0.12s ease both; }
.fade-in-3 { animation: fadeUp 0.55s 0.24s ease both; }
.fade-in-4 { animation: fadeUp 0.55s 0.36s ease both; }

/* ── Responsive step grid ────────────────────────────────── */
@media (min-width: 640px) {
  .step-grid { grid-template-columns: repeat(2,1fr); }
  .gear-wall { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 900px) {
  .step-grid { grid-template-columns: repeat(2,1fr); }
  .gear-wall { grid-template-columns: repeat(4,1fr); }
}

/* ══════════════════════════════════════════════════════════
   REVIEW PAGE — Premium Magazine Layout
   ══════════════════════════════════════════════════════════ */

/* ── Review hero (full-bleed image + overlay) ── */
.review-hero {
  position: relative;
  min-height: clamp(320px, 55vw, 560px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--surface-3);
}
.review-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.review-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,4,2,0.10) 0%,
    rgba(8,4,2,0.20) 40%,
    rgba(8,4,2,0.82) 75%,
    rgba(8,4,2,0.97) 100%
  );
}
.review-hero__content {
  position: relative; z-index: 2;
  width: 100%; padding: 2rem 1rem 2.5rem;
}
.review-hero__brand {
  font-family: var(--font-accent);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem; display: block;
}
.review-hero__title {
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 700; color: var(--white);
  letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 0.6rem;
}
.review-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.review-hero__score {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.5rem; color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35);
  padding: 0.2rem 0.75rem; border-radius: 999px;
}
.review-hero__price {
  font-size: 1.1rem; font-weight: 700; color: var(--tan);
}
.review-hero__type {
  font-family: var(--font-accent); font-size: 0.78rem;
  color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
}
.review-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Tested-by badge ── */
.tested-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem; color: var(--text-muted);
  margin-bottom: 2rem;
}
.tested-badge strong { color: var(--tan); }

/* ── Quick stats strip ── */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
.quick-stat {
  padding: 1rem 0.75rem;
  text-align: center;
  border-right: 1px solid var(--border);
}
.quick-stat:last-child { border-right: none; }
.quick-stat__icon { font-size: 1.4rem; margin-bottom: 0.3rem; display: block; }
.quick-stat__val  { font-weight: 700; font-size: 0.97rem; color: var(--tan); display: block; }
.quick-stat__lbl  { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: block; }

/* ── Big score card ── */
.score-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
.score-card__header {
  background: linear-gradient(135deg, #1E1208 0%, #2A1A0E 100%);
  padding: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.score-card__overall {
  display: flex; align-items: baseline; gap: 0.4rem;
}
.score-card__num {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(3rem, 8vw, 4.5rem);
  color: var(--gold); line-height: 1;
}
.score-card__denom { font-size: 1.25rem; color: var(--text-muted); }
.score-card__label {
  font-family: var(--font-accent); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); display: block; margin-bottom: 0.25rem;
}
.score-card__stars { font-size: 1.4rem; color: var(--gold); letter-spacing: 0.05em; }
.score-card__bars { padding: 1.25rem 1.5rem; display: grid; gap: 0.75rem; }
.score-bar {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center; gap: 0.75rem;
}
.score-bar__label { font-size: 0.85rem; color: var(--tan-dark); }
.score-bar__track {
  height: 8px; background: var(--border);
  border-radius: 999px; overflow: hidden;
}
.score-bar__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.score-bar__val { font-weight: 700; font-size: 0.88rem; color: var(--tan); text-align: right; }

/* ── Image gallery strip ── */
.img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.img-gallery img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform 0.25s, border-color 0.2s;
  cursor: zoom-in;
}
.img-gallery img:hover { transform: scale(1.03); border-color: rgba(201,168,76,0.4); }

/* ── Review body specific ── */
.review-body { font-size: 1.02rem; line-height: 1.85; color: var(--tan-dark); }
.review-body p  { margin-bottom: 1.3rem; }
.review-body h3 {
  font-size: 1.2rem; color: var(--gold);
  margin: 2rem 0 0.6rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-head);
}

/* ── More from CVK strip ── */
.more-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.more-review-card {
  display: flex; gap: 0.75rem; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.85rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.more-review-card:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-2px); }
.more-review-card img { width: 60px; height: 48px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.more-review-card__info { min-width: 0; }
.more-review-card__name { font-size: 0.85rem; font-weight: 700; color: var(--tan); display: block; }
.more-review-card__score { font-size: 0.78rem; color: var(--gold); font-family: var(--font-accent); }

@media (min-width: 640px) {
  .review-hero__content { padding: 2rem 2rem 3rem; }
  .score-bar { grid-template-columns: 150px 1fr 44px; }
}
@media (min-width: 900px) {
  .review-hero__content { padding: 2rem 3rem 3.5rem; max-width: 700px; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE CONVERSION — Buyer Journey Components
   ══════════════════════════════════════════════════════════ */

/* ── Hero budget chip strip ── */
.hero__budget-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.5rem;
}
.hero__budget-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 999px;
  font-size: 0.78rem; color: var(--tan-dark);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.hero__budget-chip:hover { background: rgba(201,168,76,0.16); border-color: var(--gold); color: var(--gold); }
.hero__budget-chip strong { color: var(--gold); }

/* ── #1 Pick Spotlight ── */
.pick-spotlight {
  background: linear-gradient(135deg, #1A0E06 0%, #221408 60%, #1A0E06 100%);
  border-top: 1px solid rgba(201,168,76,0.18);
  border-bottom: 1px solid rgba(201,168,76,0.18);
  padding-block: 3rem;
}
.pick-spotlight__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.pick-spotlight__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-accent); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem;
}
.pick-spotlight__badge::before {
  content: ''; display: block;
  width: 24px; height: 1px; background: var(--gold);
}
.pick-spotlight__heading {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--white); margin-bottom: 0.5rem;
}
.pick-spotlight__price {
  font-family: var(--font-accent); font-size: 0.85rem;
  color: var(--text-muted); margin-bottom: 1rem;
}
.pick-spotlight__verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1.25rem 0;
}
.pick-spotlight__verdict-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}
.pick-spotlight__verdict-label {
  font-family: var(--font-accent); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); display: block; margin-bottom: 0.2rem;
}
.pick-spotlight__verdict-val { font-size: 0.82rem; color: var(--tan-dark); }
.pick-spotlight__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.pick-spotlight__img {
  width: 100%; max-width: 480px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  object-fit: cover; aspect-ratio: 4/3;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  margin: 0 auto; display: block;
}

/* ── Budget pathways strip ── */


.budget-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.budget-card:hover {
  border-color: rgba(201,168,76,0.45);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.budget-card__range {
  font-family: var(--font-accent); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.3rem;
}
.budget-card__pick { font-weight: 700; font-size: 1rem; color: var(--tan); }
.budget-card__desc { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; flex: 1; }
.budget-card__cta {
  margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700;
  color: var(--gold); display: flex; align-items: center; gap: 0.3rem;
}

/* ── Pick label badges on product cards ── */
.product-card__pick-label {
  display: inline-block;
  font-family: var(--font-accent); font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  padding: 0.2rem 0.55rem; border-radius: 999px;
  margin-bottom: 0.4rem;
}
.product-card__pick-label--green {
  background: rgba(76,175,114,0.1);
  border-color: rgba(76,175,114,0.3);
  color: #4CAF72;
}

/* ── Quick verdict grid inside product cards ── */
.quick-verdict {
  display: grid; grid-template-columns: 1fr;
  gap: 0.35rem; margin: 0.75rem 0;
  font-size: 0.8rem;
}
.quick-verdict__row {
  display: flex; gap: 0.4rem;
  align-items: baseline;
}
.quick-verdict__key {
  font-family: var(--font-accent); font-size: 0.65rem;
  color: var(--text-muted); letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  min-width: 56px;
}
.quick-verdict__val { color: var(--tan-dark); line-height: 1.4; }
.quick-verdict__val--skip { color: var(--text-muted); }

/* ── Buyer cue chips under product name ── */
.buyer-cues {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0.4rem 0 0.6rem;
}
.buyer-cue {
  font-size: 0.7rem; padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
.buyer-cue--gold { border-color: rgba(201,168,76,0.25); color: var(--gold); background: rgba(201,168,76,0.06); }

/* ── Card grid: 6 picks ── */
.card-grid--6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* ── Section quiz CTA teaser ── */
.quiz-teaser {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 3rem;
}
.quiz-teaser__copy { flex: 1; min-width: 200px; }
.quiz-teaser__copy strong { color: var(--tan); display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.quiz-teaser__copy p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

@media (min-width: 640px) {
  .pick-spotlight__verdict { grid-template-columns: repeat(4, 1fr); }
  
  .card-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .pick-spotlight__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .card-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  
}

/* Age gate logo override */
.age-gate__logo img { width:88px !important; height:88px !important; }
.age-gate__logo { font-size:1.75rem; gap:0.75rem; }

/* ══ BUDGET STRIP — Clean horizontal list (replaces all prior budget rules) ══ */
.budget-strip { padding-block: 0.5rem 2.5rem; }

.budget-strip__grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.budget-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.budget-card:hover {
  border-color: rgba(201,168,76,0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.budget-card__range {
  font-family: var(--font-accent);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0;
}
.budget-card__pick {
  font-weight: 700; font-size: 1.05rem; color: var(--tan);
  margin: 0.1rem 0;
}
.budget-card__desc {
  font-size: 0.83rem; color: var(--text-muted);
  line-height: 1.5; margin: 0;
}
.budget-card__cta {
  margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700;
  color: var(--gold);
}

@media (min-width: 640px) {
  .budget-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .budget-card {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .budget-card {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
  }
  .budget-card__range {
    min-width: 130px;
    border-right: 1px solid var(--border);
    padding-right: 1.25rem;
    font-size: 0.7rem;
  }
  .budget-card__desc { margin: 0; }
  .budget-card__cta { margin-top: 0; white-space: nowrap; }
}

@media (min-width: 1100px) {
  .budget-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── About page: image + text side-by-side ── */
.a

/* ── Sticky buy bar ── */
.sticky-buy {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 2px solid rgba(201,168,76,0.3);
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 900;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
}
.sticky-buy.sticky-buy--visible {
  transform: translateY(0);
}
.sticky-buy__info { flex: 1; min-width: 0; }
.sticky-buy__name {
  font-weight: 700;
  color: var(--tan);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy__meta {
  font-size: 0.78rem;
  color: var(--gold);
  margin-top: 0.1rem;
}
.sticky-buy__price {
  font-size: 0.95rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 600;
}
.sticky-buy__cta {
  white-space: nowrap;
  flex-shrink: 0;
}
.sticky-buy__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.4rem;
  padding: 0.15rem 0.4rem;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.15s;
}
.sticky-buy__close:hover { color: var(--tan); }
@media (max-width: 500px) {
  .sticky-buy { padding: 0.6rem 1rem; gap: 0.6rem; }
  .sticky-buy__price { display: none; }
  .sticky-buy__name { font-size: 0.85rem; }
}

/* ── Nav dropdown ── */
.nav__item{position:relative;}
.nav__dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-width:170px;
  padding:0.5rem 0;
  list-style:none;
  z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.nav__dropdown::before{
  content:"";
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:var(--border);
}
.nav__dropdown::after{
  content:"";
  position:absolute;
  top:-4px;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-bottom-color:var(--surface);
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{display:block;}
.nav__dropdown li a{
  display:block;
  padding:0.5rem 1.25rem;
  color:var(--text-muted);
  font-size:0.88rem;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav__dropdown li a:hover{color:var(--gold);background:rgba(201,168,76,.07);}
/* dropdown chevron on Reviews link */
.nav__item--has-dropdown > a::after{
  content:" ▾";
  font-size:.7em;
  opacity:.6;
}