/* Shared mobile fixes for the static pages. Loaded after each page's own <style>.
   Content wider than the screen made phones widen the layout viewport (zoomed-out page,
   sideways scroll, and a stretched fixed header and announcement bar). */
html, body { max-width: 100%; }
body { overflow-x: clip; }

@media (max-width: 768px) {
  footer { flex-wrap: wrap; }
  footer > * { max-width: 100%; min-width: 0; }
  footer .links { flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
  footer .nap, footer > span { white-space: normal; overflow-wrap: anywhere; }

  /* Inline minmax(500px, 1fr) on some FAQ grids. */
  .faq-grid { grid-template-columns: 1fr !important; }
  .faq-item { min-width: 0; max-width: 100%; }

  /* Wide price tables scroll inside themselves instead of widening the page. */
  table.compare-table, table.tier-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 899px) {
  /* Announcement is fixed above the header. The first block must start below both. */
  body.has-site-announce header.site-header {
    top: var(--announce-h, 2.75rem);
  }

  body.has-site-announce .hero {
    padding-top: max(7rem, calc(var(--announce-h, 2.75rem) + 5rem));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-eyebrow {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .hero h1,
  .hero .lead,
  .hero-content,
  .hero-content h1,
  .hero-content p {
    max-width: 100%;
  }

  .hero-cta-row {
    width: 100%;
  }

  .hero-cta-row .cta,
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary,
  a.hero-cta {
    min-height: 44px;
  }

  .hero-cta-row .cta {
    flex: 1 1 100%;
    justify-content: center;
  }

  img, video, canvas, iframe {
    max-width: 100%;
  }

  .nav-toggle,
  header.site-header .nav-cart,
  header.site-header .nav-cart--bar {
    width: 44px;
    height: 44px;
  }
}