[R-13] Hero mobile text alignment — center in single-column

[vmorps]

[R-13] Hero Mobile Text Alignment — Center in Single-Column

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

---

Current Behavior

On mobile, the hero uses a single-column layout (grid-template-columns: 1fr) but all text (heading, badge, body paragraphs) remains left-aligned. With the code window stacking below and CTAs centered (R-03), the left-aligned text block creates a visual mismatch — centered buttons under left-aligned text.

Expected Behavior

On mobile (< 1024px), center-align all hero text content: badge, heading, body paragraphs. This creates a cohesive, centered-stack mobile hero. At 1024px+ where the 2-column grid activates, revert to left-alignment.

File(s) Impacted

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

Implementation Approach

/* Mobile-first: centered hero text */
.inner {
  text-align: center;
}

.bodyPrimary,
.bodySecondary {
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: left-align in 2-column grid */
@media (min-width: 1024px) {
  .inner {
    text-align: left;
  }

  .bodyPrimary,
  .bodySecondary {
    margin-left: 0;
    margin-right: 0;
  }
}

Acceptance Criteria

• Badge, heading, body text, and CTAs are all centered on mobile
• Visual hierarchy is cohesive — no mix of centered and left-aligned elements
• Desktop 2-column layout retains left-aligned text (no change)

---

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