/* =========================================================
   Clout Cat — responsive.css
   1024 (tablet-landscape) / 768 (tablet-portrait) / 480 (phone)
   ========================================================= */

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; margin-inline: auto; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; padding-right: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--border-soft); padding-right: var(--sp-4); }

  .how__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .drops__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  .section__head { grid-template-columns: 1fr; gap: var(--sp-4); }
  .section__head .lede { justify-self: start; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .nav__menu { display: none; }
  .nav__cta .btn--ghost,
  .nav__cta .btn--primary { display: none; }
  .nav__burger { display: inline-flex; }

  .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .stat { border-right: 0 !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-soft); padding-bottom: var(--sp-3); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }

  .how__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .drops__grid { grid-template-columns: 1fr; }
  .testi__grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }

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

@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.1; overflow-wrap: anywhere; }
  .hero__title-cycle { display: inline-block; max-width: 100%; }
  .hero__chip { display: none; }
  .hero__trust { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .hero__avatars img { width: 32px; height: 32px; }

  .cta-band__inner { padding: var(--sp-6) var(--sp-5); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .marquee__item { font-size: var(--fs-lg); margin-right: 36px; }
  .stat__value { font-size: clamp(1.5rem, 7vw, 2rem); }
}