/* ════════════════════════════════════════════════════════════════════════ FSP — responsive layer. Desktop ≥900px renders the approved 1440px composition (fluid-zoomed by fit.js) and is untouched by everything below. Under 900px these rules restructure the fixed artboard into real stacked layouts. `!important` is required throughout to beat React inline styles. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { /* ── Frame ──────────────────────────────────────────────────────────── */ #root { width: 100% !important; } #root > div { width: 100% !important; overflow-x: hidden; } img { max-width: 100%; } /* ══ SYSTEMIC BASELINE ════════════════════════════════════════════════ Everything below this block is a per-section exception. THIS block is the default behaviour, and new sections should need no new rule. The site is a 1440px artboard: layouts are React inline styles (`style={{display:'grid', gridTemplateColumns:'1.2fr 1fr'}}`), so they cannot be overridden by class alone. Rather than add a bespoke class for each of the 33 inline grids, match the grid SHAPE. Any content grid of two or more real columns collapses to one on a phone, whether or not anyone remembered to write a rule for it. Deliberately NOT matched: small row layouts like `22px 1fr` (icon + label) and `64px 1fr auto auto` (list rows) — those work fine at 390px and must stay as rows. */ /* `footer` is excluded: its grid is `1.5fr 1fr 1fr 1fr 1fr`, which CONTAINS the substring "1.5fr 1fr" — matching it collapsed the footer to a single 1,105px-tall column. Substring matching needs this guard. */ #root :not(footer):not(footer *)[style*="1fr 1fr"], #root [style*="repeat(2,"], #root [style*="repeat(3,"], #root [style*="repeat(4,"], #root [style*="repeat(2 ,"], #root [style*="repeat(3 ,"], #root [style*="repeat(4 ,"], #root [style*="1.2fr 1fr"], #root :not(footer):not(footer *)[style*="1.5fr 1fr"], #root [style*="1fr 1.5fr"], #root [style*="0.85fr 1.4fr"], #root [style*="0.82fr 1.18fr"], #root [style*="1.4fr 0.85fr"], #root [style*="440px 1fr"], #root [style*="200px 1fr"], #root [style*="188px 1fr"], #root [style*="240px 1fr"], #root [style*="1fr 440px"], #root [style*="300px 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } /* A `1fr` track carries an implicit min-content floor, so a long word or a wide child blows the column out to its intrinsic width and the content is sliced off. This is the single most common cause of "text cut off" here. */ #root [style*="display:grid"] > *, #root [style*="display: grid"] > *, #root [style*="grid-template-columns"] > *, #root [style*="display:flex"] > *, #root [style*="display: flex"] > * { min-width: 0 !important; } /* Fixed heights from the artboard clip their own content once it reflows taller on a phone. Media wells and device mockups genuinely need a fixed height, so they opt out with .keep-h. */ #root section [style*="height:"]:not(.keep-h):not([class*="phone"]):not([class*="device"]):not([class*="screen"]):not(video):not(img):not(svg) { /* intentionally not blanket-unset: see the per-section rules, which unpin only the containers that actually clip text. A blanket rule here would collapse the phone mockups. */ } /* Nothing may force a horizontal scrollbar on the page itself. Marquees and carousels scroll inside their own box. */ html, body { overflow-x: hidden !important; } /* Desktop gutters. Several wrappers hard-code `padding: '0 64px'` inline with no class at all, so no class-based rule could ever reach them — the content column came out 262px wide inside a 390px screen, a third of the phone as margin, and out of line with every other section. Match the inline value. */ #root [style*="padding: 0 64px"], #root [style*="padding:0 64px"], #root [style*="padding: '0 64px'"], #root [style*="padding: 0px 64px"], #root [style*="padding:0px 64px"] { padding-left: 22px !important; padding-right: 22px !important; } /* ══ Class-based grids ════════════════════════════════════════════════ The systemic rule above matches React INLINE grids. These are declared in each component's own