/**
 * Responsive - < 768px mobile, 768-1023 tablet, 1024+ desktop
 *
 * Strategy:
 *   - Desktop first (per tokens.css scale)
 *   - At < 1024: bento grid changes to 2-col or 1-col
 *   - At < 768: single column everywhere, smaller display sizes
 *   - At < 480: trust strip 1-col, hero-ctas stack
 *
 * Memory: touch-action: pan-y !important on any new horizontal scroll
 * (iOS Safari overflow-x:hidden safety net)
 */

@media (max-width: 1023px) {
  /* tiers: 2 columns on tablet, T3 spans 2 */
  .tier-1, .tier-2, .tier-3, .tier-4, .tier-5 {
    grid-column: span 6;
  }
  .tier-3 { grid-column: span 12; }

  /* how-it-works: 2-col grid -> 1 col, sticky off */
  .how-grid, .faq-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .how-left { position: static; }

  /* hero: smaller title, less padding */
  .hero-title { font-size: var(--fs-96); }
}

@media (max-width: 767px) {
  /* hero: title smaller, less padding */
  [data-blinds-hero] {
    padding: 100px 20px 60px;
  }
  .hero-title { font-size: var(--fs-64); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-magnetic,
  .hero-ctas .btn-ghost {
    justify-content: center;
  }

  /* carousel: 4:3 aspect on mobile */
  .hero-carousel { aspect-ratio: 4 / 3; max-height: 360px; }

  /* trust strip: 1 column */
  .hero-trust { grid-template-columns: 1fr; gap: 16px; }

  /* tiers: 1 column */
  .tier-1, .tier-2, .tier-3, .tier-4, .tier-5 {
    grid-column: span 12;
  }
  .tier-3 .tier-svg { width: clamp(160px, 20vw, 240px); }

  /* winners: smaller cards, more visible scroll */
  .winner { flex: 0 0 80vw; }

  /* how: numbers smaller, no sticky */
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step-num { width: auto; font-size: clamp(3rem, 12vw, 5rem); }
  .step-title { font-size: var(--fs-24); }

  /* faq: smaller titles */
  .faq-q { font-size: var(--fs-18); padding: 20px 0; }

  /* typography scale down */
  .tiers-head h2 { font-size: var(--fs-48); }
  .how-left h2 { font-size: var(--fs-48); }
  .faq-left h2 { font-size: var(--fs-48); }
  .winners-head h2 { font-size: var(--fs-48); }
}

/* iOS Safari horizontal scroll safety: any horizontal scroll container needs this */
.winners-rail,
.hero-trust,
.hero-ctas,
.how-right,
.faq-right {
  touch-action: pan-y !important;
}

/* touch targets: 44px minimum on all interactive elements */
.faq-q, .btn-magnetic, .btn-ghost, .hero-carousel .dot, .tier {
  min-height: 44px;
}

/* reduced motion: kill all breathing/pulse animations */
@media (prefers-reduced-motion: reduce) {
  .tier::before, .tier-pulse, .tier-pulse-slow, .tier-float-a,
  .tier-float-b, .tier-float-c, .tier-rays,
  [data-blinds-hero]::before, [data-blinds-hero]::after,
  .hero-eyebrow .dot, .hero-scroll .line {
    animation: none !important;
  }
}