/* * Unlevered V2 — Responsive overlay * --------------------------------------------------------------- * Scoped 2026-05-22 per design audit: removed wildcard class * matching ([class*="-grid"], [class*="card"], etc.) which forced * unintended layouts to collapse and inflated mobile page height. * * This file now contains: viewport hygiene (overflow, image * max-width, font-size adjust, table scroll), a small set of * named-class mobile fixes for marketing primitives, and explicit * tablet collapse rules. Per-component mobile behavior lives in * marketing.css / site.css / components.css. * * Applied LAST. Drop into of any screen. */ /* Viewport hygiene — universal safety net */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } body { -webkit-text-size-adjust: 100%; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Container width clamps — named, not wildcard */ .site-container, .container, .page-shell, .narrow-shell, main, .shell, .wiz, .pane { max-width: 100% !important; box-sizing: border-box; padding-left: 16px; padding-right: 16px; } /* Marketing grids collapse on mobile (named, not wildcard) */ .footer-grid, .deliverables-grid, .grid-2, .grid-3, .grid-4, .cards-row, .fee-grid, .form-card { display: block !important; } .footer-grid > *, .deliverables-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { width: 100% !important; margin-bottom: var(--card-gap-mobile, 16px); } /* Mobile typography clamps (see 04_BRANDING.md §12 Mobile typography) */ .hero-h1, h1 { font-size: clamp(32px, 7vw, 40px) !important; line-height: 1.15 !important; } h2, .section-h2 { font-size: clamp(24px, 5vw, 30px) !important; line-height: 1.2 !important; } h3 { font-size: clamp(18px, 4vw, 22px) !important; } .hero-sub, .lead { font-size: 16px !important; } /* Buttons stretch full width when stacked */ .hero-ctas, .btn-row { flex-direction: column !important; gap: 12px !important; } .hero-ctas .btn, .btn-row .btn { width: 100% !important; } /* Canonical marketing nav — hide links, keep brand + CTA. marketing.css already handles .nav-links at <=860px; this is a belt-and-braces enforcement for the broader phone viewport. */ .site-nav .nav-links { display: none !important; } /* Side-by-side layouts (named) */ .shots, .split, .two-col, .row-split { flex-direction: column !important; display: flex !important; } /* Sidebar / aside (named) */ aside, .sidebar, .side, .rail, .right-rail, .left-rail { width: 100% !important; max-width: 100% !important; position: static !important; } /* Section spacing tightens per A2 mobile rhythm */ section, .section { padding-left: 16px !important; padding-right: 16px !important; } .hero { padding-top: 32px !important; padding-bottom: 24px !important; } /* Footer bottom row stacks */ .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px; } /* Stepper / wizard pills wrap */ .stepper, .step-pills, .wiz-chrome { flex-wrap: wrap !important; gap: 8px !important; } } /* Tablet middle ground — preserve 2-up where it makes sense */ @media (min-width: 769px) and (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; } .deliverables-grid { grid-template-columns: 1fr 1fr !important; } } /* Long report canvases scroll horizontally on mobile rather than break */ @media (max-width: 768px) { .report-canvas { overflow-x: auto; } }