/* Mobile corrections for the DesignCode-exported layouts. Loaded after site.css so these win at equal specificity. The exported pages set their grids inline, and a few of them use fixed or min-width tracks that cannot fit a phone. site.css already rescues one of them (`[data-helprow]`); everything below covers the rest, plus the sticky nav, which was spending a third of the screen on itself. */ /* — the numbered process rows — Exported as `76px minmax(180px,1fr) minmax(220px,1.6fr)` (and a 64px variant), so the track minimums alone demand ~524px before gaps. Below that the third column pushed the page 156px wider than the viewport and the descriptions ran off the right edge. Collapsed to number + content, with the description dropping to its own line under the heading — the same shape site.css already gives [data-helprow]. */ @media (max-width: 820px) { [data-row] { grid-template-columns: 54px minmax(0, 1fr) !important; column-gap: 16px !important; row-gap: 8px !important; align-items: start !important; } [data-row] > p { grid-column: 2; } } /* Very narrow phones: an auto-fit track floored at 260–300px is wider than the content box once the gutters are taken out, so let those grids go to one column rather than overflow. */ @media (max-width: 380px) { [style*="repeat(auto-fit"] { grid-template-columns: 1fr !important; } } /* — sticky nav — site.css sends the CTA full-width below 520px, which stacked the header into three rows (logo / button / links). On a sticky header that is permanent furniture, so the button stays on the logo's row and the links keep their own scrolling rail underneath. */ @media (max-width: 820px) { .nav-brand img { height: 38px !important; } } @media (max-width: 520px) { [data-nav] { padding-top: 10px !important; padding-bottom: 10px !important; } [data-nav] .btn { width: auto !important; margin-left: auto !important; min-height: 44px !important; padding: 0 15px !important; font-size: 12.5px !important; } .nav-brand img { height: 32px !important; } [data-navlinks] { gap: 18px !important; } [data-navlinks] a { font-size: 11.5px !important; } } /* Nothing on the site should be able to scroll the page sideways. This is the backstop, not the fix — the rules above are. Deliberately NOT applied to : giving the root overflow-x makes it a scroll container, and the sticky nav then scrolls away with the page. The body-level rule is enough and leaves sticky intact. */ @media (max-width: 820px) { body { max-width: 100%; overflow-x: hidden; } } /* Nav links sit in a scrolling rail, where a bare text link is a ~24px tap target. A little vertical padding brings them to a thumb-sized 40px for about twenty pixels of header height. */ @media (max-width: 820px) { [data-navlinks] a { padding-top: 11px; padding-bottom: 11px; } [data-link]::after { bottom: 1px; } }