/* assets/mobile.css — phone overrides for the page shell (masthead + example chips). Linked LAST in each tool's so these win over per-tool style.css by source order (equal specificity). Tokens only; both themes inherit. Phone = narrow viewport (a layout concern), so this keys off width alone, independent of pointer type. */ @media (max-width: 640px){ /* Reclaim the fold: the tool starts ~22px higher and the title/lede stop hogging it. */ body{ padding-top: 18px; } /* per-tool base is padding:40px 0 40px */ h1{ font-size: clamp(24px, 7vw, 30px); } /* per-tool base is 32px flat */ .tagline{ font-size: 14px; line-height: 1.45; margin-top: 4px; } /* Presets are discrete choices, not a carousel: keep every option visible. The shared coarse-pointer rule in controls.css preserves 44px targets. */ .chips{ flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; } }