[R-03] CTA buttons not centered on mobile

[vmorps]

[R-03] CTA Buttons Not Centered on Mobile

Severity: P1
Sprint: 2
Component: Hero
Spec: design/specs/responsive-layout-fixes.md �� R-03
Mockups: design/specs/responsive-layout-mocks.html — Buttons visible below Item 2

---

Current Behavior

The "Get Started" and "View Documentation" buttons in the hero .ctas container use display: flex; flex-wrap: wrap; gap: 1rem but lack justify-content: center. On mobile, where the content stacks in a single column, the buttons appear left-aligned — inconsistent with the centered visual hierarchy expected on mobile.

Expected Behavior

On mobile (< 1024px), CTA buttons should be centered horizontally. On desktop where the hero is a 2-column grid with left-aligned copy, left alignment is correct.

File(s) Impacted

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

Implementation Approach

.ctas {
  justify-content: center; /* centered by default (mobile-first) */
}

@media (min-width: 1024px) {
  .ctas {
    justify-content: flex-start; /* left-align in 2-column layout */
  }
}

Acceptance Criteria

• CTA buttons are horizontally centered on viewports < 1024px
• CTA buttons are left-aligned on viewports ≥ 1024px (2-column layout)
• Buttons still wrap gracefully if viewport is very narrow (< 320px)

---

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