/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first breakpoints
   Ranges:
     ≤ 480px   → mobile (small phones)
     481–767px → tablet (fills the previous gap)
     768px+    → desktop
═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile: ≤ 480px ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .community-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 0 auto;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .waitlist-input-row {
    flex-direction: column;
  }
}

/* ── Tablet: 481px – 767px ───────────────────────────────────────────── */
/* Previously missing — fills the awkward gap between phone and desktop */
@media (min-width: 481px) and (max-width: 767px) {
  .community-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .waitlist-input-row {
    flex-direction: row;
  }
}

/* ── Desktop: 768px+ ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Hero — switch to side-by-side layout */
  .hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }

  .hero-copy {
    text-align: left;
    flex: 1;
  }

  .hero-sub   { margin-left: 0; }

  .hero-actions { align-items: flex-start; }

  .hero-form { max-width: none; }

  /* On desktop, show confirm-text and confirm-sub on the same line */
  .hero-confirm {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .hero-visual { flex-shrink: 0; }

  /* How it works — horizontal 3-column */
  .steps-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }

  /* Features — 3-column */
  .features-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  /* Community — slightly wider gap */
  .community-grid { gap: 20px; }

  /* Waitlist — wider form + horizontal row */
  .waitlist-form       { max-width: 480px; }
  .waitlist-input-row  { flex-direction: row; }

  /* Footer — split layout */
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-links { justify-content: flex-end; }
}