/* ============================================================
   Supplementary responsive fixes
   Purely additive — fills gaps at the specific breakpoints
   requested (320 / 375 / 425 / 1024 / 1200) without changing
   the existing visual design at any breakpoint already covered.
   ============================================================ */

/* ---- Extra-small phones (320px–375px) ---- */
@media (max-width: 375px) {
  .container { padding: 0 1rem; }
  .section { padding: 4rem 0; }

  .impact-counter-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .impact-counter { padding: 1.5rem 1rem; }
  .impact-num { font-size: 2.2rem; }

  .pricing-grid { gap: 1.25rem; }
  .pricing-card { padding: 1.75rem 1.25rem; }
  .pricing-card.gold { transform: none; }

  .comparison-table { font-size: 0.72rem; }
  .comparison-table thead th,
  .comparison-table tbody td { padding: 0.6rem 0.75rem; }

  .world-gallery h2 { font-size: 1.9rem; }
  .world-gallery p { font-size: 1rem; margin-bottom: 32px; }

  .membership-hero, .contact-hero, .about-hero { padding-top: 130px; }
}

/* ---- 320px hard floor: prevent any horizontal overflow ---- */
@media (max-width: 320px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 0.85rem; }
  .btn, .btn-gold, .btn-outline { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ---- 992px–1024px: ensure tablet-landscape grids don't feel cramped ---- */
@media (min-width: 993px) and (max-width: 1024px) {
  .pricing-grid { gap: 1.25rem; }
}

/* ---- 1200px+: slightly roomier gutters on large desktop ---- */
@media (min-width: 1200px) {
  .container { padding: 0 2.5rem; }
}

/* ---- Ultra-wide (1920px+): keep content from feeling lost in whitespace ---- */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
}

/* ---- Universal safety net: never let any element force horizontal scroll ---- */
img, video, iframe, table { max-width: 100%; }
.comparison-wrap { -webkit-overflow-scrolling: touch; }