No unintended horizontal scrolling at mobile widths

Unintended horizontal scroll breaks the fundamental contract of a mobile layout: that the viewport shows the full page width. Users on touch devices cannot easily discover off-screen content and may not realise navigation controls or call-to-action buttons are hidden to the right. WCAG 2.2 SC 1.4.10 (Reflow) requires content to reflow at 320px viewport width without horizontal scrolling; violating it is a WCAG AA failure that also creates a Section 508 Refresh 502.3.3 barrier for assistive technology users. Applying overflow-x: hidden to <body> hides the symptom but leaves the broken layout in place, meaning the content is silently truncated rather than accessible.

Fix the source of overflow rather than masking it. In your global styles:

*, *::before, *::after { box-sizing: border-box; }
body { max-width: 100vw; overflow-x: clip; }

For absolutely-positioned elements that escape their parent, add a containing ancestor:

.section-wrapper { position: relative; overflow: hidden; }

In Tailwind, replace any fixed pixel widths wider than max-w-screen-sm with w-full and add overflow-x-clip to the outermost layout wrapper in src/app/layout.tsx.