/* Mobile / tablet overrides for the MaxFill static pages.
   The pages are authored with inline styles, so overrides need !important. */

/* Clip sideways overflow (decorative glows, marquees). Must be `clip`, not `hidden`:
   `hidden` turns <body> into its own scroll container and window scrolling stops. */
html, body { overflow-x: clip; }

@media (max-width: 860px) {
  /* Page layouts: side-by-side columns become a single column. */
  .mf-stack { grid-template-columns: 1fr !important; }
  .mf-stack > * { min-width: 0; }
  .mf-gap { gap: 40px !important; }

  /* Small helpers. */
  .mf-hide-sm { display: none !important; }
  [style*="border-radius: 999px"] { white-space: nowrap; }

  /* UI mockups with a fixed aspect ratio: let them grow to their content. */
  .mf-dash { aspect-ratio: auto !important; }

  /* Pricing comparison table: tighter columns so all four fit. */
  .mf-compare [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) !important; }
  .mf-compare [style*="grid-template-columns"] > div { padding: 14px 4px !important; font-size: 12.5px !important; line-height: 1.35; letter-spacing: 0 !important; }
  .mf-compare [style*="grid-template-columns"] > div:first-child { padding-left: 12px !important; }

  /* Homepage orders mockup: keep order IDs on one line. */
  [style*="grid-template-columns: 0.95fr 1.25fr 1fr 0.6fr"] > span:first-child { white-space: nowrap; font-size: 10.5px !important; }

  /* Stat rows and logo walls: two-up. */
  .mf-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Footer: brand block full width, link columns two-up. */
  .mf-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
  .mf-footer > :first-child { grid-column: 1 / -1; }
}