/* ============================================================ mobile.css — mobile (≤760px) adaptations layered on top of the Claude Design export. WHY THIS FILE EXISTS: The site is exported from Claude Design as a single index.html. Keeping mobile tweaks here means re-exporting the DESKTOP design never wipes them. After uploading a new index.html, just make sure its still contains: The current design is already responsive on its own (it collapses its grids on small screens), so the only override needed right now is trimming the hero headline so the call-to-action stays above the fold. If future design changes reintroduce a wide table or other mobile issue, add scoped @media rules below. ============================================================ */ @media (max-width: 760px) { /* Hero: smaller headline so the CTA sits above the fold on phones */ #hero h1 { font-size: clamp(32px, 9vw, 44px) !important; } }