/* =========================================================================
   MeltGrid Canada — Responsive refinements
   Mobile-first base lives in styles.css; this file layers breakpoint tweaks.
   ========================================================================= */

/* Small phones */
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .hero { padding: 48px 0 72px; }
  .btn { width: 100%; }
  .hero-actions .btn,
  .cta-band .btn { width: 100%; }
  .form-card { padding: 22px; }
}

/* Tablets */
@media (min-width: 640px) {
  .hero-actions .btn { width: auto; }
}

/* Ensure comparison tables scroll instead of breaking layout on narrow screens */
@media (max-width: 640px) {
  .compare-table-wrap { overflow-x: auto; }
}

/* Desktop refinements */
@media (min-width: 1200px) {
  .container { padding: 0 32px; }
}

/* Print styles: keep documents useful without navy backgrounds */
@media print {
  .site-header, .mobile-cta-bar, .mobile-nav, .site-footer .footer-bottom a { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}