Fixed/sticky elements don't obscure content on small screens

A 64px fixed header with no corresponding top padding on <main> hides the first 64 pixels of every page — headlines cut off, form labels disappear, the top of a modal sits beneath the header. A fixed cookie banner or chat widget at the bottom does the same thing in reverse, covering the footer and any sticky CTA. The fix is trivial but easy to overlook because the bug is invisible on desktop where scroll position forgives the overlap.

For every fixed or sticky element, add matching padding to the adjacent content. Store the element's height as a CSS variable so one source controls both the height and the offset. Audit src/app/layout.tsx and any persistent UI chrome components.

:root { --header-height: 64px; }
main { padding-top: var(--header-height); }