/* ==========================================================================
   RGBSPOT — responsive.css
   ========================================================================== */

@media (max-width: 1080px) {
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: 2 / -1; }
  .nav__mail { display: none; }
  .nav__links { gap: 22px; }
}

@media (max-width: 940px) {
  .hero__proof { grid-template-columns: repeat(2, 1fr); row-gap: 4px; }
  .nav__links, .nav__actions .btn { display: none; }
  .burger { display: grid; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 540px; }
  .chip--a { right: 2%; }
  .chip--b { left: 0; }
  .split, .form-shell, .cta-band__inner { grid-template-columns: 1fr; }
  .g-3, .g-4, .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .form-shell .aside-card { order: 2; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__proof { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
  .proof-item { padding: 16px 12px 0 0; }
  .proof-item + .proof-item { padding-left: 12px; }
  .proof-item:nth-child(odd) { padding-left: 0; }
  .g-2, .g-3, .g-4, .tier-grid, .pack-grid, .opt-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid .footer-col:last-child { grid-column: auto; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step__n { font-size: 1.6rem; }
  .chip { display: none; }
  .footer-base { flex-direction: column; }
  .quote { padding-left: 18px; }
  .opt-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .pill { font-size: .76rem; }
}

/* Keep the hero compact on small screens */
@media (max-width: 640px) {
  .hero { padding-block: 30px 44px; }
  .hero__art { max-width: 340px; margin-inline: auto; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
}

@media (max-width: 940px) {
  .contact-shell { grid-template-columns: 1fr; }
}