/* ==========================================================================
   Celliara — home.css
   Homepage-specific layout and components
   Template v1.3 | Mobile-first (320px baseline)
   Extends base.css + components.css — never duplicates shared rules
   ========================================================================== */

/* ── Hero Section ────────────────────────────────────────────────────────── */
.home-hero {
  padding-top: var(--spacing-lg);
  padding-bottom: 0;   /* gap eliminated — section-divider + trust bar handle spacing */
}

/* Split layout container */
.home-hero__split {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

/* Left column: text content */
.home-hero__content {
  flex: 1;
  min-width: 0;
}

/* Right column: device visual — hidden on mobile */
.home-hero__visual {
  display: none;
  flex: 0 0 auto;
  width: 48%;
  max-width: 520px;
  align-self: stretch;
}

/* Visual inner: aspect-ratio container prevents layout shift before image loads */
.home-hero__visual-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: var(--color-bg);
  border-radius: 0;
  overflow: hidden;
  /* 2D edge fade — dissolves all four edges into page background */
  -webkit-mask-image: radial-gradient(
    ellipse 85% 90% at 55% 40%,
    black 40%,
    rgba(0,0,0,0.85) 58%,
    rgba(0,0,0,0.4) 74%,
    transparent 90%
  );
  mask-image: radial-gradient(
    ellipse 85% 90% at 55% 40%,
    black 40%,
    rgba(0,0,0,0.85) 58%,
    rgba(0,0,0,0.4) 74%,
    transparent 90%
  );
  /* Fallback: matches page bg exactly if image fails */
  background-image: linear-gradient(160deg, #0d0d0d 0%, #0a0a0a 100%);
}

.home-hero__visual-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% top;
  transform: scale(1.08);
  /* No lazy loading — hero image, fetchpriority=high in HTML */
}

/* Desktop: show visual, switch to side-by-side */
@media (min-width: 768px) {
  .home-hero__split {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .home-hero__visual {
    display: block;
  }

  .home-hero__content {
    flex: 1 1 52%;
  }
}

@media (min-width: 1024px) {
  .home-hero__split {
    gap: var(--spacing-xl);
  }
}

/* Breadcrumb sits above H1 with clear separation */
.home-hero .breadcrumb {
  margin-bottom: var(--spacing-md);
}

.home-hero .container {
  max-width: var(--max-width);
}

.home-hero__h1 {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  margin-bottom: var(--spacing-lg);   /* 16px → 24px */
  color: var(--color-text-primary);
}

.home-hero__subhead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);   /* 24px → 48px — real air before CTAs */
}

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
  align-items: center;
}

.home-hero__meta-sep {
  color: var(--color-text-muted);
}

.home-hero__ctas {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);   /* 24px → 48px — separates CTAs from meta */
  align-items: center;
}

/* Primary CTA: slightly larger, stronger presence */
.btn--hero {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow: 0 0 16px rgba(201, 169, 110, 0.14);
}

.btn--hero:hover,
.btn--hero:focus-visible {
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.22);
}

/* Full-width stacked buttons on mobile */
@media (max-width: 479px) {
  .home-hero__ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .btn--hero {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .home-hero {
    padding-block: 60px;
  }
}

@media (min-width: 1024px) {
  .home-hero {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
  }
}

/* ── Section padding reduction (~25% tighter than base page-section) ────────
   Override .page-section for homepage sections (spacing between sections)    */
.home-categories.page-section,
.home-quick-picks.page-section,
.home-trust.page-section,
.home-comparisons.page-section,
.home-guides.page-section,
.home-newsletter.page-section {
  padding-block: var(--spacing-lg);
}

@media (min-width: 768px) {
  .home-categories.page-section,
  .home-quick-picks.page-section,
  .home-trust.page-section,
  .home-comparisons.page-section,
  .home-guides.page-section,
  .home-newsletter.page-section {
    padding-block: var(--spacing-xl);
  }
}

/* ── Section Supporting Copy ─────────────────────────────────────────────── */
.home-section__supporting {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-bottom: var(--spacing-md);
  line-height: 1.65;
}

/* ── Section H2 Override (homepage-specific sizing) ─────────────────────── */
.home-categories h2,
.home-quick-picks h2,
.home-trust h2,
.home-comparisons h2,
.home-guides h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-bottom: var(--spacing-sm);
}

/* ── View All / Browse All Links ─────────────────────────────────────────── */
.section-view-all {
  color: var(--color-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: var(--spacing-xl);
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--transition-fast), color var(--transition-fast);
  padding-bottom: 2px;
}

.section-view-all:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

@media (min-width: 768px) {
  .section-view-all {
    text-align: right;
  }
}

/* ── Category Grid ───────────────────────────────────────────────────────── */
.home-categories__primary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.home-categories__secondary {
  display: grid;
  grid-template-columns: 1fr; /* Full-width on mobile — odd tile count looks broken in 2-col */
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .home-categories__primary {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }

  .home-categories__secondary {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }
}

/* Category Tile */
.category-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-decoration: none;
  min-height: 130px; /* Increased from 110px: accommodates 3-line content at mobile font sizes without truncation */
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.category-tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
}

.category-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.category-tile__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.category-tile__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.category-tile__count {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  margin-top: auto;
}

/* Arrow: hidden on mobile, shown on desktop as pseudo-element */
.category-tile::after {
  display: none;
  content: '→';
  color: var(--color-accent);
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.category-tile:hover::after {
  opacity: 1;
}

@media (min-width: 1024px) {
  .category-tile::after {
    display: block;
  }
}

/* Secondary tiles — slightly smaller */
.category-tile--sm {
  min-height: 110px; /* Increased from 88px: matches primary tile bump, prevents 2-line desc clipping at 320px */
}

/* Guide pathway tile — distinct from device category tiles.
   Uses italic count/label, muted border, no device count badge color. */
.category-tile--guide .category-tile__count {
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: var(--font-weight-normal);
}

.category-tile--guide .category-tile__desc {
  color: var(--color-text-muted);
}

.category-tile--guide:hover .category-tile__count {
  color: var(--color-accent);
  font-style: normal;
}

/* ── Quick Picks Row ─────────────────────────────────────────────────────── */
/* Mobile: horizontal scroll with snap                                        */
/* Desktop: 3-column horizontal row, consistent card heights                  */

.home-quick-picks .quick-picks__row {
  /* Mobile: horizontal scroll, snap */
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-bottom: var(--spacing-sm); /* breathing room under scroll */
  margin-bottom: var(--spacing-md);
  /* Negative margin to allow cards to reach full container width on mobile */
  margin-inline: calc(-1 * var(--spacing-md));
  padding-inline: var(--spacing-md);
}

.home-quick-picks .quick-picks__row::-webkit-scrollbar {
  display: none;
}

/* Each card: snaps cleanly on mobile, fixed width so 1.2 cards visible = hint */
.home-quick-picks .device-card--featured {
  flex: 0 0 78vw;
  max-width: 300px;
  scroll-snap-align: start;
  /* Ensure consistent height within row */
  display: flex;
  flex-direction: column;
}

@media (min-width: 480px) {
  .home-quick-picks .device-card--featured {
    flex: 0 0 260px;
  }
}

@media (min-width: 768px) {
  .home-quick-picks .quick-picks__row {
    /* Desktop: reset scroll, become a proper 3-column grid */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    align-items: stretch;
  }

  .home-quick-picks .device-card--featured {
    flex: unset;
    max-width: none;
    scroll-snap-align: none;
    /* Stretch to equal height within grid row */
    height: 100%;
  }
}

.home-quick-picks__credibility {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

/* Compare pill link inside device card */
.device-card__compare-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  min-height: 36px;
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.device-card__compare-link:hover {
  color: var(--color-accent-hover);
  border-color: rgba(201, 169, 110, 0.5);
  text-decoration: none;
}

.device-card__compare-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

/* ── Trust Block ─────────────────────────────────────────────────────────── */
.home-trust__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.home-trust__item {
  padding: var(--spacing-lg);
  border-top: 2px solid var(--color-border);
}

/* First item: gold border as visual anchor */
.home-trust__item:first-child {
  border-top-color: var(--color-accent);
}

.home-trust__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.home-trust__item p:not(.home-trust__heading) {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

@media (min-width: 480px) {
  .home-trust__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .home-trust__items {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Comparison Cards Grid ───────────────────────────────────────────────── */
.home-comparisons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .home-comparisons__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

.comparison-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 169, 110, 0.35);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-decoration: none;
  transition: border-left-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 44px;
}

.comparison-card:hover {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
}

.comparison-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.comparison-card__tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comparison-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.comparison-card__angle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex: 1;
}

.comparison-card__cta {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  margin-top: auto;
  padding-top: var(--spacing-sm);
  transition: color var(--transition-fast);
}

.comparison-card:hover .comparison-card__cta {
  color: var(--color-accent-hover);
}

/* ── Guides Grid ─────────────────────────────────────────────────────────── */
.home-guides__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .home-guides__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .comparison-card {
    min-height: 180px;
  }

  .guide-card {
    min-height: 200px;
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 44px;
}

.guide-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
}

.guide-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.guide-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.guide-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex: 1;
}

.guide-card__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════
/* .guide-banner removed — replaced by .cl-closing-block */


/* ══════════════════════════════════════════════════════════════════════════
   GUIDE POPUP MODAL — premium two-column editorial capture
   ══════════════════════════════════════════════════════════════════════════ */

/* Overlay wrapper */
.guide-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Ensure it covers full visual viewport on mobile */
  -webkit-overflow-scrolling: touch;
}

.guide-popup[hidden] {
  display: none;
}

/* Backdrop */
.guide-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Panel */
.guide-popup__panel {
  position: relative;
  z-index: 1;
  background: linear-gradient(150deg, #181614 0%, #131110 50%, #0f0f0f 100%);
  border: 1px solid rgba(201,169,110,0.28);
  border-top: 2px solid rgba(201,169,110,0.6);
  border-radius: 14px;
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 40px 100px rgba(0,0,0,0.8),
    0 0 80px rgba(201,169,110,0.1),
    0 0 160px rgba(201,169,110,0.04),
    inset 0 1px 0 rgba(201,169,110,0.06);
  outline: none;
}

/* Close button */
.guide-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  color: #111111;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.guide-popup__close:hover {
  background: #eeeeee;
}

/* Two-column inner layout */
.guide-popup__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  align-items: stretch;
  min-height: 540px;
}

/* ── Left column ── */
.guide-popup__left {
  padding: 48px 40px 40px 44px;
  border-right: 1px solid rgba(201,169,110,0.1);
  display: flex;
  flex-direction: column;
}

.guide-popup__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
  opacity: 1;
}

.guide-popup__heading {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -.022em;
  margin-bottom: 14px;
  max-width: 22ch;
}

.guide-popup__sub {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.68;
  margin-bottom: 20px;
  max-width: 48ch;
}

/* Bullets */
.guide-popup__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 20px;
}

.guide-popup__bullets li {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}

.guide-popup__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%23c9a96e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* Product relevance line */
.guide-popup__relevance {
  font-size: 12px;
  color: var(--color-text-primary);
  letter-spacing: .02em;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(201,169,110,0.07);
  border: 1px solid rgba(201,169,110,0.22);
  border-radius: 5px;
  line-height: 1.5;
  opacity: 1;
}

/* ── FluentForms overrides inside modal ── */
.guide-popup__panel .ff-el-input--label,
.guide-popup__panel .ff-el-input--label label {
  display: none !important;
}

.guide-popup__panel .ff-el-is-required .ff-el-input--label::after,
.guide-popup__panel label .req {
  display: none !important;
}

.guide-popup__panel .ff-el-group,
.guide-popup__panel .ff-field_container,
.guide-popup__panel .ff-name-field-wrapper {
  margin-bottom: 10px !important;
}

.guide-popup__panel .ff-t-container {
  display: block !important;
}

.guide-popup__panel .ff-t-cell {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Input fields — premium dark */
.guide-popup__panel .ff-el-form-control,
.guide-popup__panel input.ff-el-form-control,
.guide-popup__panel input[type="text"].ff-el-form-control,
.guide-popup__panel input[type="email"].ff-el-form-control {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(201,169,110,0.32) !important;
  border-radius: 7px !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 0 18px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.guide-popup__panel .ff-el-form-control::placeholder {
  color: rgba(255,255,255,0.5) !important;
  font-size: 14px !important;
}

.guide-popup__panel .ff-el-form-control:focus {
  border-color: rgba(201,169,110,0.6) !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.1) !important;
}

.guide-popup__panel .ff_submit_btn_wrapper,
.guide-popup__panel .ff-el-group.ff_submit_btn_wrapper {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

/* Submit button — dominant gold gradient */
.guide-popup__panel button.ff-btn-submit,
.guide-popup__panel .ff-btn.ff-btn-submit,
.guide-popup__panel .ff-btn-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  background: radial-gradient(ellipse at 50% 40%, #e0b86a 0%, #c9a96e 45%, #a8843e 100%) !important;
  background-image: radial-gradient(ellipse at 50% 40%, #e0b86a 0%, #c9a96e 45%, #a8843e 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 7px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.1) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.guide-popup__panel button.ff-btn-submit:hover,
.guide-popup__panel .ff-btn-submit:hover {
  filter: brightness(1.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.1) !important;
  transform: translateY(-1px) !important;
}

.guide-popup__panel button.ff-btn-submit:active,
.guide-popup__panel .ff-btn-submit:active {
  transform: translateY(0) !important;
}

/* Trust note */
.guide-popup__note {
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 12px;
  letter-spacing: .04em;
  opacity: .8;
}

/* Success / error states */
.guide-popup__panel .ff-message-success,
.guide-popup__panel .ff-response-cont {
  color: var(--color-accent) !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  text-align: center !important;
  margin-top: 12px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.guide-popup__panel .ff-el-is-error .ff-el-form-control {
  border-color: rgba(220,80,80,0.5) !important;
}

.guide-popup__panel .error.text-danger {
  color: #e06060 !important;
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  margin-top: 4px !important;
  display: block !important;
}

.guide-popup__panel fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Right column: editorial guide mockup ── */
.guide-popup__right {
  display: flex;
  flex-direction: column;
  padding: 40px 28px;
  background: linear-gradient(180deg, rgba(201,169,110,0.05) 0%, rgba(0,0,0,0.25) 100%);
  justify-content: center;
}

.guide-popup__mock {
  background: linear-gradient(160deg, #181510 0%, #0f0e0c 60%, #0c0c0c 100%);
  border: 1px solid rgba(201,169,110,0.28);
  border-top: 1px solid rgba(201,169,110,0.5);
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(201,169,110,0.06),
    0 6px 24px rgba(0,0,0,0.4);
}

.guide-popup__mock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,169,110,0.18);
}

.guide-popup__mock-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.guide-popup__mock-pipe {
  font-size: 10px;
  color: rgba(201,169,110,0.3);
  font-weight: 300;
}

.guide-popup__mock-type {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 2px 7px;
}

.guide-popup__mock-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.38;
  letter-spacing: -.012em;
}

.guide-popup__mock-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(201,169,110,0.2) 0%, transparent 100%);
}

.guide-popup__mock-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.guide-popup__mock-toc li {
  font-size: 12px;
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1.4;
}

.guide-popup__mock-num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-accent);
  opacity: 1;
  flex-shrink: 0;
}

.guide-popup__mock-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Responsive ── */

/* Tablet: allow two columns to compress before stacking */
@media (max-width: 860px) {
  .guide-popup__inner {
    grid-template-columns: 1fr 220px;
  }
}

/* Mobile: single column */
@media (max-width: 640px) {
  /* Modal wrapper: starts below fixed nav, fills rest of screen */
  .guide-popup {
    padding: 0;
    top: 56px !important;  /* Android Chrome nav height */
    align-items: flex-end;
  }

  .guide-popup__backdrop {
    top: -56px; /* backdrop still covers full screen including behind nav */
  }

  .guide-popup__panel {
    border-radius: 20px 20px 0 0;
    max-height: calc(100vh - 56px);
    max-width: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Close button inside panel, clearly visible at top */
  .guide-popup__close {
    position: sticky;
    top: 12px;
    float: right;
    z-index: 10;
    width: 36px;
    height: 36px;
    font-size: 16px;
    background: rgba(201,169,110,0.15);
    color: rgba(201,169,110,1);
    border: 1px solid rgba(201,169,110,0.4);
    margin: 12px 12px 0 0;
  }

  .guide-popup__inner {
    grid-template-columns: 1fr;
    min-height: unset;
    clear: both;
  }

  .guide-popup__left {
    border-right: none;
    border-bottom: none;
    padding: 12px 22px 28px;
  }

  .guide-popup__bullets {
    grid-template-columns: 1fr 1fr;
  }

  /* Hide guide mockup on mobile — not needed, saves space */
  .guide-popup__right {
    display: none;
  }
}

@media (max-width: 400px) {
  .guide-popup__left {
    padding: 12px 18px 24px;
  }

  .guide-popup__heading {
    font-size: 1.35rem;
  }

  .guide-popup__bullets {
    grid-template-columns: 1fr;
  }
}

/* Legacy newsletter-form styles removed — replaced by guide-banner + guide-popup */

/* ── Responsive: Mobile base + section padding ───────────────────────────── */
/* Ensure no horizontal overflow at 320px */
@media (max-width: 767px) {
  .home-hero__h1 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Ensure hero has enough breathing room on small screens */
  .home-hero {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  /* Trust badges: force wrap at small widths to prevent overflow */
  .trust-badges {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .home-newsletter {
    padding-inline: var(--spacing-md);
  }

  .home-newsletter .container {
    padding-inline: 0;
  }

  .home-newsletter__box {
    padding: var(--spacing-lg);
  }
}

/* ── Image System: Device Card Fallback Styling ──────────────────────────── */
/* Ensures image containers maintain aspect ratio and show branded placeholder */
/* if image files are missing or fail to load. No JS dependency.              */

.device-card__image {
  /* Aspect ratio always reserved — no layout shift */
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-elevated);
  /* Visible fallback placeholder if image fails to load */
  background-image:
    linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}

/* Fallback indicator: subtle border + centered icon via pseudo-element */
.device-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.device-card__image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Padding gives product breathing room within the square */
  padding: var(--spacing-md);
  background-color: var(--color-bg-elevated);
  /* Ensure loaded images are always visible — explicit opacity: 1 */
  opacity: 1;
  transition: opacity var(--transition-base);
}

/* Hide broken/empty img elements — fallback bg shows through */
.device-card__image img:not([src]),
.device-card__image img[src=""] {
  opacity: 0;
}

/* ── Desktop layout refinements ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Quick picks: constrain row to max-width for breathing room */
  .home-quick-picks .quick-picks__row {
    max-width: var(--max-width);
  }
}

/* ==========================================================================
   Homepage extension — Trust Bar, Editor's Picks, Routine Builds
   Added: 2026-03-26
   ========================================================================== */

/* ── Trust bar (replaces home-trust editorial standards section) ─────────── */
.home-trust-bar {
  /* Uses page-section padding from base.css */
}

.home-trust-bar__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* border separators, not gaps */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 640px) {
  .home-trust-bar__items {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  background-color: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.home-trust-bar__item:last-child {
  border-right: none;
}

/* Mobile: 2×2 grid — bottom borders on top row */
@media (max-width: 639px) {
  .home-trust-bar__item:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }
  .home-trust-bar__item:nth-child(2n) {
    border-right: none;
  }
}

.home-trust-bar__value {
  font-family: 'Cormorant', Georgia, serif;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.home-trust-bar__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
  max-width: 12ch;
}

/* ── Editor's Picks section ──────────────────────────────────────────────── */
.home-editors-picks {
  /* page-section padding from base.css */
}

.home-editors-picks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 480px) {
  .home-editors-picks__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-editors-picks__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.editors-pick-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.editors-pick-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.editors-pick-card__image {
  /* Aspect ratio square for the img-slot */
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-elevated);
  background-image: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
}

.editors-pick-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  flex: 1;
}

.editors-pick-card__brand {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editors-pick-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.editors-pick-card__benefit {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.editors-pick-card__pair {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.4;
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

.editors-pick-card__cta {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.editors-pick-card__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.editors-pick-card__link:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}

/* ── Routine Builds section ──────────────────────────────────────────────── */
.home-routines {
  /* page-section padding from base.css */
}

.home-routines__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
  .home-routines__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

.routine-card {
  display: flex;
  text-decoration: none;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-fast);
}

.routine-card:hover {
  background-color: var(--color-bg-elevated);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
}

.routine-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  width: 100%;
}

.routine-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.routine-card__name {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin: 0;
}

.routine-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.routine-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: auto;
}

.routine-card__step {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px var(--spacing-sm);
  white-space: nowrap;
}

.routine-card__cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  margin-top: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.routine-card:hover .routine-card__cta {
  color: var(--color-accent-hover);
}

/* ==========================================================================
   Homepage conversion rebuild — 2026-04-04
   New sections: Stack/Protocol, Final Push, device price display
   ========================================================================== */

/* ── Hero: fear line ─────────────────────────────────────────────────────── */
.home-hero__fear {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  margin-top: calc(-1 * var(--spacing-md));   /* pull up closer to subhead */
  margin-bottom: var(--spacing-xl);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ── Device card price line ──────────────────────────────────────────────── */
.device-card__price {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.device-card__price strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ── Stack / Protocol Section ────────────────────────────────────────────── */
.home-stack.page-section {
  padding-block: var(--spacing-xl);
}

.home-stack__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 640px) {
  .home-stack__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-stack__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stack card */
.stack-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Card header: category label + device example */
.stack-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
}

.stack-card__category {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.stack-card__device {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Steps list */
.stack-card__body {
  padding: var(--spacing-md);
  flex: 1;
}

.stack-card__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.stack-card__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.stack-card__step-num {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  letter-spacing: 0.06em;
  line-height: 1.8;   /* aligns with first line of text */
  min-width: 20px;
}

.stack-card__step-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.stack-card__step-text em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  display: block;
  margin-top: 2px;
}

/* Card footer: CTA link */
.stack-card__footer {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.stack-card__cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.stack-card__cta:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}

/* Note below stack grid */
.home-stack__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-lg);
  line-height: 1.55;
  max-width: 60ch;
}

/* ── Final Push Section ──────────────────────────────────────────────────── */
/* Legacy .home-final-push replaced by .cl-closing-block */

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED CLOSING BLOCK — 3-card grid matching guide cards above
   ══════════════════════════════════════════════════════════════════════════ */

.cl-closing-block.page-section {
  padding-block: var(--spacing-xl);
}

.cl-closing-block__header {
  margin-bottom: var(--spacing-lg);
}

/* 3-column grid — same pattern as guide card grid */
.cl-closing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

/* The CTA card gets a subtle gold top accent to differentiate */
.cl-closing-card--cta {
  border-top: 2px solid var(--color-accent);
}

/* Button inside card */
.cl-closing-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-sm);
  padding: 0 20px;
  height: 44px;
  background: var(--color-accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  box-shadow: 0 4px 16px rgba(201,169,110,0.22);
  white-space: nowrap;
  width: 100%;
}

.cl-closing-guide-btn:hover {
  background: #d4a84b;
  box-shadow: 0 6px 24px rgba(201,169,110,0.35);
  transform: translateY(-1px);
}

.cl-closing-guide-btn:active {
  transform: translateY(0);
}

/* Disclaimer note — visible, not invisible */
.cl-closing-guide-note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
  letter-spacing: .03em;
  line-height: 1.5;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .cl-closing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 580px) {
  .cl-closing-grid {
    grid-template-columns: 1fr;
  }
}

/* Stack section padding (kept) */
.home-stack.page-section {
  padding-block: var(--spacing-xl);
}
/* ══════════════════════════════════════════════════════════════════════════
   BUYING GUIDE CAPTURE — premium editorial, framed panel
   ══════════════════════════════════════════════════════════════════════════ */

/* Outer section */
.cl-capture-band {
  background: #0a0a0a;
  border-top: 1px solid rgba(201,169,110,0.08);
  padding: 64px 24px;
}

/* Framed inner panel */
.cl-capture-band__frame {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(145deg, #161616 0%, #0f0f0f 100%);
  border: 1px solid rgba(201,169,110,0.32);
  border-top: 2px solid rgba(201,169,110,0.7);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 24px 72px rgba(0,0,0,0.6),
    0 0 60px rgba(201,169,110,0.12),
    0 0 120px rgba(201,169,110,0.06),
    inset 0 1px 0 rgba(201,169,110,0.08);
  overflow: hidden;
}

/* Two-column grid inside frame */
.cl-capture-band__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  align-items: stretch;
}

/* ── Left column ── */
.cl-capture-band__left {
  padding: 52px 48px 52px 52px;
  border-right: 1px solid rgba(201,169,110,0.09);
}

.cl-capture-band__kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
  opacity: 1;
}

.cl-capture-band__headline {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin-bottom: 16px;
  max-width: 22ch;
}

.cl-capture-band__body {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 50ch;
}

/* Bullets — substantial, 2-col on desktop */
.cl-capture-band__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 24px;
}

.cl-capture-band__bullets li {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}

.cl-capture-band__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%23c9a96e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

.cl-capture-band__trust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0;
  opacity: .85;
}

.cl-capture-band__trust svg {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: .7;
}

/* ── Right column ── */
.cl-capture-band__right {
  display: flex;
  flex-direction: column;
  padding: 36px 28px 32px;
  background: linear-gradient(180deg, rgba(201,169,110,0.04) 0%, rgba(0,0,0,0.25) 100%);
  justify-content: center;
  gap: 12px;
}

/* Guide preview — editorial document mockup */
.cl-guide-preview {
  background: linear-gradient(160deg, #181510 0%, #0f0e0c 60%, #0c0c0c 100%);
  border: 1px solid rgba(201,169,110,0.28);
  border-top: 1px solid rgba(201,169,110,0.5);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(201,169,110,0.06),
    0 4px 20px rgba(0,0,0,0.3);
}

.cl-guide-preview__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,169,110,0.18);
}

.cl-guide-preview__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 1;
}

.cl-guide-preview__pipe {
  font-size: 10px;
  color: rgba(201,169,110,0.3);
  font-weight: 300;
}

.cl-guide-preview__type {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 2px 7px;
}

.cl-guide-preview__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.38;
  letter-spacing: -.012em;
}

.cl-guide-preview__toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-guide-preview__toc li {
  font-size: 12px;
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}

.cl-guide-preview__num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-accent);
  opacity: 1;
  flex-shrink: 0;
}

.cl-guide-preview__footer {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* CTA button — larger, commanding */
.cl-capture-band__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  background: radial-gradient(ellipse at 50% 40%, #e0b86a 0%, #c9a96e 45%, #a8843e 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, filter 150ms ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.cl-capture-band__btn:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.cl-capture-band__btn:active {
  transform: translateY(0);
}

.cl-capture-band__note {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: .05em;
  opacity: .8;
  margin-top: -4px;
}

/* Responsive */
@media (max-width: 900px) {
  .cl-capture-band__inner {
    grid-template-columns: 1fr;
  }

  .cl-capture-band__left {
    border-right: none;
    border-bottom: 1px solid rgba(201,169,110,0.09);
    padding: 40px 32px;
  }

  .cl-capture-band__right {
    padding: 32px;
  }

  .cl-capture-band__bullets {
    grid-template-columns: 1fr;
  }

  .cl-capture-band__headline {
    max-width: 100%;
  }
}

@media (max-width: 580px) {
  .cl-capture-band {
    padding: 40px 16px;
  }

  .cl-capture-band__left {
    padding: 32px 20px;
  }

  .cl-capture-band__right {
    padding: 24px 20px;
  }

  /* Trust line: drop all-caps + bump size on mobile only */
  .cl-capture-band__trust {
    text-transform: none;
    font-size: 12.5px;
    letter-spacing: .02em;
  }
}



/* ==========================================================================
   Homepage visual refinement pass — 2026-03-26
   ========================================================================== */

/* ── Trust bar: reduce vertical padding, tighter ─────────────────────────── */
.home-trust-bar__item {
  padding: var(--spacing-lg) var(--spacing-md);
}

/* ── Editors picks: fix image area — brand mark instead of square img-slot ── */
/* Remove the full square aspect-ratio which creates huge empty blocks */
.editors-pick-card__image {
  aspect-ratio: unset;
  height: 6px; /* thin gold-tinted top accent bar */
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(201,169,110,0.2) 100%);
  background-image: none; /* override the gradient from above */
  background-color: transparent;
}

/* Correct specificity — override both rules */
.editors-pick-card .editors-pick-card__image {
  aspect-ratio: unset;
  height: 6px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(201,169,110,0.15) 100%);
}

/* Remove the img-slot inside pick cards — it's not needed */
.editors-pick-card .img-slot {
  display: none;
}

/* Tighten card body padding and gap */
.editors-pick-card__body {
  padding: var(--spacing-md);
  gap: var(--spacing-xs);
}

/* Make name slightly larger for product identity */
.editors-pick-card__name {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
}

/* Pair note: subtle, doesn't compete with benefit */
.editors-pick-card__pair {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* CTA area: lighter top border */
.editors-pick-card__cta {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid rgba(42, 42, 42, 0.6);
}

/* ── Section headings: match the existing homepage section h2 override ────── */
/* home.css already overrides home-categories h2 etc. — extend to new sections */
.home-trust-bar h2,
.home-editors-picks h2,
.home-routines h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-bottom: var(--spacing-sm);
}

/* ── Routine cards: tighter inner padding ────────────────────────────────── */
.routine-card__inner {
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
}

/* Name: tighter size range */
.routine-card__name {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

/* Desc: slightly smaller, more muted */
.routine-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  opacity: 0.9;
}

/* Steps: smaller pills */
.routine-card__step {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 2px var(--spacing-sm);
}

/* ── Section supporting copy: tighten bottom margin ─────────────────────── */
/* home-section__supporting already defined — just tighten for new sections */
.home-editors-picks .home-section__supporting,
.home-routines .home-section__supporting {
  margin-bottom: var(--spacing-lg);
}

/* ── Editors picks grid: min-height constraint so cards aren't huge ─────── */
.editors-pick-card {
  min-height: unset; /* override any inherited min-height */
}

/* ── Page-section padding override for new sections: slightly tighter ────── */
/* home-trust-bar, editors-picks, routines don't need as much padding as hero sections */
.home-trust-bar.page-section {
  padding-block: var(--spacing-lg);   /* tight — this follows directly after hero */
}
.home-editors-picks.page-section,
.home-routines.page-section {
  padding-block: var(--spacing-xl);
}

/* ── Product pick cards (Editor's Picks section) ─────────────────────────── */
/* Mirror device-card system exactly: same bg, border, radius, hover.         */
/* No image slot. Identity carried by header strip + brand + name + benefit.  */

.home-picks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 560px) {
  .home-picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card: identical foundation to .device-card */
.product-pick-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.product-pick-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
}

/* Header strip: category label + badge — replaces image slot */
.product-pick-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.product-pick-card__category {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-pick-card__badge {
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  background-color: rgba(201, 169, 110, 0.1);
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: var(--radius-full);
  padding: 2px var(--spacing-sm);
  white-space: nowrap;
}

/* Body: mirrors device-card__body */
.product-pick-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  flex: 1;
}

.product-pick-card__brand {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.product-pick-card__name {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.product-pick-card:hover .product-pick-card__name {
  color: var(--color-accent);
}

.product-pick-card__benefit {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* Footer: pairs-with label + CTA — mirrors device-card__cta pattern */
.product-pick-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.product-pick-card__pair {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  flex: 1;
}

.product-pick-card__cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.product-pick-card:hover .product-pick-card__cta {
  color: var(--color-accent-hover);
}



/* ── Typography Product Card (no AI images — editorial rule) ── */
.device-typo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  /* Stretch to fill the aspect-ratio parent exactly like an img would */
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
}

.device-typo-card__brand {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
}

.device-typo-card__name {
  font-family: 'Cormorant', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.device-typo-card__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  margin: 4px 0;
}

.device-typo-card__category {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
}


/* ── Find Your Device™ CTA — homepage (below hero) — 2026-05-22 ─────────── */
.hp-quiz-cta {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-elevated, #1a1a1a);
  border-top: 1px solid var(--color-border, #2a2a2a);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
}

.hp-quiz-cta__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #c9a96e);
  margin: 0 0 0.4rem;
}

.hp-quiz-cta__headline {
  font-family: 'Cormorant Garamond', Cormorant, Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text, #f0f0f0);
  margin: 0 0 1.25rem;
}

.hp-quiz-cta__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 2rem;
}