/** * Hyper AI — global mobile safety net (2026-09-11) * Loaded in on every page, so it applies on the first paint instead of * waiting for components.js. Page-specific mobile rules live in each page's * own stylesheet; this file only holds things that must never break anywhere. */ /* Nothing may push the page wider than the screen. */ html, body { max-width: 100%; } img, svg, video, canvas, iframe { max-width: 100%; } @media (max-width: 680px) { /* Wide tables scroll inside their own box (components.js adds .hy-tw + the swipe hint). */ .hy-tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Three-up link grids (the "Learn more" blocks on /vs/* pages) stack. */ .learn-more > div { grid-template-columns: 1fr !important; } /* Cookie banner: full width with breathing room instead of a fixed 296px card. */ #cc-banner { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; bottom: 12px !important; padding: 15px 16px 14px !important; } } /* Phone mockups are declared at a fixed pixel width (plus padding, content-box); let them shrink to the screen instead of pushing the page wider. */ @media (max-width: 420px) { .phone-310, .phone-320, .phone { box-sizing: border-box; width: 100%; min-width: 0; max-width: 310px; } }