/* ============================================================ Synup — mobile responsiveness fixes Loaded LAST in (after page/Webflow styles) so scoped overrides win by source order at equal specificity. Rules: - Every block is SCOPED (class / #id). Nothing here is a bare global element selector, so it cannot cascade unexpectedly. - Desktop is preserved: layout changes live inside @media (max-width: …) blocks only. - Organised by audit phase for reviewability. ============================================================ */ /* ------------------------------------------------------------ Phase 1a — how-to / learn article copy: wrap long URLs/tokens ------------------------------------------------------------ Root cause: markdown body renders raw URLs as link text with no wrap, pushing the page far wider than the viewport (worst case /how-to/how-to-create-and-share-a-google-my-business-review-link/ measured 2957px at 390px). Scoped to .cms-article content only. Applies at all widths — wrapping a long URL never hurts desktop. */ .cms-article, .cms-article p, .cms-article li, .cms-article a, .cms-article h1, .cms-article h2, .cms-article h3, .cms-article h4, .cms-article td, .cms-article th, .cms-article blockquote, .cms-article code { overflow-wrap: anywhere; } /* Long code/pre blocks scroll internally instead of widening the page. */ .cms-article pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------ Phase 1c — top nav fits small phones (≤366px viewports) ------------------------------------------------------------ Site-wide. At mobile the burger shows but .mn-right still carries the "Start free trial" button + burger, and .mn-bar keeps 1.75rem padding, so the row is a fixed ~367px and overflows any screen ≤366px (iPhone SE, small Androids). !important is required on purpose: the .mn-* nav CSS is an inline