[R-04] Hero heading font size too large for mobile

[vmorps]

[R-04] Hero Heading Font Size Too Large for Mobile

Severity: P1
Sprint: 2
Component: Hero
Spec: design/specs/responsive-layout-fixes.md § R-04

---

Current Behavior

The hero heading (.heading) is set to 2.5rem (40px) at the base (mobile) breakpoint. On a 375px-wide device with 1rem horizontal padding, this produces roughly 3 words per line for "Protect the Data," resulting in an awkward rag and consuming excessive vertical space.

The body text at 1.125rem (18px) also contributes to the overall "too large" feeling on mobile.

Expected Behavior

Mobile heading reduced to ~2rem (32px), scaling up progressively:

• Base (< 640px): 2rem
• 640px+: 2.5rem
• 1024px+: 3.75rem (unchanged)

Body text scales down slightly on small mobile:

• Base (< 640px): 1rem
• 640px+: 1.125rem (unchanged)

File(s) Impacted

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

Dependencies

⚠️ R-06 must be completed first. The CSS media query ordering bug (640px block after 1024px block) means font-size changes at 640px would override 1024px values. Fix the query order (R-06) before adjusting font sizes.

Implementation Approach

.heading {
  font-size: 2rem; /* was 2.5rem */
}

.bodyPrimary {
  font-size: 1rem; /* was 1.125rem */
}

@media (min-width: 640px) {
  .heading {
    font-size: 2.5rem; /* slightly reduced for tablet */
  }
  .bodyPrimary {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .heading {
    font-size: 3.75rem; /* unchanged */
  }
}

Acceptance Criteria

• Hero heading renders at ~32px on 375px viewport
• Text feels proportional and balanced relative to viewport width
• Desktop layout is visually identical to current production
• Line length averages 8–12 words per line on mobile body text

---

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