/* ============================================================
   9amLeads — Legacy sub-page mobile responsiveness fix
   Safe, additive rules that stop small screens from overflowing.
   Loaded only on legacy product sub-pages (about/contact/how-it-
   works/pricing) and email demo previews that predate the main
   responsive shell. Everything below only applies ≤820px.
   ============================================================ */

@media (max-width: 820px) {
  /* Pricing / comparison tables: scroll sideways instead of
     stretching the whole page. Keep native table layout but let the
     containing section scroll horizontally. */
  .compare-section,
  .compare-wrap,
  .table-wrap,
  section:has(.compare-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    width: auto !important;
    min-width: 620px;
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Pricing grids stack */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* Stats / feature rows */
  .stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* General grids that overflow on narrow screens */
  .values, .steps, .how-grid, .cards, .feature-grid, .process, .roles,
  .footer-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .step-item { grid-template-columns: 1fr !important; }
  /* H4/anchor blocks inside stat tiles must not force wider min-content */
  .value, .step, .card, [class*="stat"], .grid > * { min-width: 0; }

  /* Generic wide-content safety net */
  .container, .wrap { overflow-wrap: break-word; }
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100% !important; height: auto; }
  .hero h1 { word-wrap: break-word; }
  form input, form select, form textarea { max-width: 100%; }
  .contact-form, .contact-grid > * { min-width: 0; max-width: 100%; }
}

/* Email-style preview pages (fixed 600px tables) — scale down so they
   fit phones instead of overflowing. Applies only when the document
   looks like an email (a full-width wrapper table with max-width:600px). */
@media (max-width: 640px) {
  body > table {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  body > table table[width="600"],
  body > table table[style*="max-width:600px"],
  table[width="600"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  body > table td[style*="padding:32px"],
  body > table table[width="600"] td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}