[R-02] Hero text overflowing viewport on mobile

[vmorps]

[R-02] Hero Text Overflowing Viewport

Severity: P0 — Production-blocking
Sprint: 1 (ship immediately)
Component: Hero
Spec: design/specs/responsive-layout-fixes.md § R-02
Mockups: design/specs/responsive-layout-mocks.html — Item 2 (red circle)

---

Current Behavior

The hero body paragraphs (.bodyPrimary, .bodySecondary) have max-width: 36rem (576px) which exceeds the width of most mobile screens (375px). Combined with only padding: 0 1rem on .inner, the text extends beyond the right edge of the viewport, requiring horizontal scrolling.

Root Cause

• .bodyPrimary and .bodySecondary set max-width: 36rem — fine as a max, but the container has no overflow constraint and text content has no word-break safety net.
• The .section has overflow: hidden which should clip, but .inner doesn't constrain its children to its own width.

Expected Behavior

All text in the hero section must wrap within the viewport at every screen width. No horizontal scrollbar should appear.

File(s) Impacted

• src/components/landing/Hero.module.css

Implementation Approach

1. Add box-sizing: border-box and overflow-wrap: break-word to .inner:

.inner {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

2. Constrain .bodyPrimary and .bodySecondary:

.bodyPrimary,
.bodySecondary {
  max-width: min(36rem, 100%);
}

Note: Do NOT use max-width: 100% alone ��� this would uncap the text width at 640px–1023px (tablet), creating uncomfortably long line lengths (~720px) in the single-column layout. min(36rem, 100%) preserves the 36rem reading measure when there's room, but allows the text to shrink below 36rem on narrow phones.

Acceptance Criteria

• No horizontal scrollbar on the hero section at 375px, 390px, 414px, and 428px widths
• Text wraps naturally within the padding bounds
• Desktop layout (≥ 1024px) is unchanged — max-width: 36rem still applies
• Tablet layout (640px–1023px) preserves the 36rem text measure cap
• No visible text clipping or ellipsis

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.