/* Shared phone/tablet fixes for the public pages (8-Oct-2026, Vamsi: "lot of
   mobile users — optimise for mobile, tablet"). Loaded AFTER each page's own
   <style>, so it only adds; page-specific layout stays in the page.
   Audit at 375px found: code blocks and comparison tables widening the whole
   page (Docs 556px, Enterprise 533px), and grid/flex children refusing to
   shrink below their content. */
img, video, iframe, svg { max-width: 100%; }

@media (max-width: 820px) {
  /* A grid/flex child defaults to min-width:auto = its widest content (a long
     code line), which pushed the page past the screen. */
  main, section, article, aside, div { min-width: 0; }
  /* Code: wrap instead of widening the page. */
  pre, .code-block { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
  code { overflow-wrap: anywhere; }
  /* Wide tables scroll inside themselves, never the page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Last line of defence: no sideways page scroll. */
  html, body { overflow-x: hidden; }
}

/* Fingers, not mouse pointers: ~40px minimum tap height. */
@media (pointer: coarse) {
  .btn, button, .nav-link, input[type="submit"], select { min-height: 40px; }
}