/* ── Tablet ─────────────────────────── */
@media (max-width: 900px) {
  .site-nav { display: none; }

  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { max-width: none; }
  .hero__cta { align-items: center; }
  .hero__stats { justify-content: center; }
  .hero__copy p { margin-inline: auto; }
  .hero__rose-wrap { max-width: 340px; margin-top: var(--space-lg); }

  .split-grid { grid-template-columns: 1fr; }
  .split-grid--reverse > *:first-child { order: 1; }
  .split-grid--reverse > *:last-child { order: 2; }

  .customize__visuals { order: -1; margin-bottom: var(--space-md); }
  .customize__copy { text-align: center; }
  .customize__list li { text-align: left; }

  .statpanel .split-grid > *:first-child { order: 1; }
  .statpanel .split-grid > *:last-child { order: 2; }
  .statpanel__copy { text-align: center; }

  .weather .split-grid > *:first-child { order: 1; }

  .saved__grid { grid-template-columns: 1fr; text-align: center; }
  .saved__visuals { order: -1; margin-bottom: var(--space-md); }

  .usecases__grid.split-grid { grid-template-columns: 1fr; }

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

  .how__step, .how__step--reverse { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .how__step--reverse .phone, .how__step--reverse .how__step-copy { order: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── Mobile ─────────────────────────── */
@media (max-width: 600px) {
  section { padding-block: 3.25rem; }
  .hero { padding-block: 2.5rem 3.5rem; }

  .phone--hero { width: 190px; }
  .phone--sm { width: 155px; }
  .phone { width: 190px; }

  .customize__visuals, .saved__visuals { flex-wrap: wrap; }

  .themes__grid { grid-template-columns: repeat(2, 1fr); }
  .features__grid { grid-template-columns: 1fr; }
  .usecases__list { grid-template-columns: 1fr; }
  .statpanel__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .site-header__bar .btn { display: none; }
}

@media (max-width: 380px) {
  .phone--hero, .phone, .phone--sm { width: 160px; }
}