/* ==========================================================================
   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: repeat(2, 1fr);
  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;
}

/* ── Newsletter Section Background ──────────────────────────────────────── */
.home-newsletter.page-section {
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.045) 0%, transparent 65%);
}

/* ── Newsletter / Email Capture ──────────────────────────────────────────── */
.home-newsletter {
  max-width: 640px;
  margin-inline: auto;
}

/* Ensure the container inside doesn't re-expand it */
.home-newsletter .container {
  max-width: 640px;
  padding-inline: 0;
}

.home-newsletter__box {
  background-color: var(--color-bg-surface);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 0 40px rgba(201, 169, 110, 0.07);
}

.home-newsletter__box h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.home-newsletter__subhead {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.newsletter-form__input {
  flex: 1;
  min-width: 200px;
  height: 44px;
  min-height: 44px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), outline var(--transition-fast);
  outline: none;
}

.newsletter-form__input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-form__input:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* On mobile: stack input and button */
@media (max-width: 479px) {
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form__input {
    width: 100%;
    min-width: 0;
  }

  .newsletter-form .btn {
    width: 100%;
    justify-content: center;
  }
}

.home-newsletter__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
  text-align: center;
  line-height: 1.5;
}

/* ── 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 ──────────────────────────────────────────────────── */
.home-final-push.page-section {
  padding-block: var(--spacing-xl);
}

.home-final-push__box {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  padding: var(--spacing-xl);
  background-color: var(--color-bg-surface);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 40px rgba(201, 169, 110, 0.07);
}

.home-final-push__box h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.home-final-push__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--spacing-lg);
  max-width: 50ch;
  margin-inline: auto;
}

.home-final-push__ctas {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 479px) {
  .home-final-push__ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ── Section padding: add new sections to existing override ──────────────── */
.home-stack.page-section,
.home-final-push.page-section {
  padding-block: var(--spacing-xl);
}

/* ==========================================================================
   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;
}