fix(homepage): breathing room between hero CTA and hero image on mobile

[pftg]

Summary

Fixes the button layout issue from the production phone screenshot: on mobile, the hero "Get a Free Code Audit" CTA sat glued to the hero image — a measured 0px gap at a 390×844 viewport. On desktop the CTA and photo are side-by-side columns; below 860px they stack, and nothing supplied a stacking margin.

One rule, scoped to the existing stacked-layout breakpoint in themes/beaver/assets/css/critical/homepage-critical.css:

@media (max-width: 860px) {
  .home-hero-media { margin-top: 28px; }
}

Diagnosis notes

• Production is not down — the deploy pipeline's latest master runs are all green and the site serves (the phone screenshot itself renders the page). Direct curl checks from the agent container are blocked by its proxy, not by the site.
• The button's Ruby-red 8px-radius styling itself is intentional (the site-wide CTA branding in navigation.css deliberately overrides the legacy blue 25px pill — verified via a full cascade probe). The actual defect was the missing stacking gap.

Verification

• Browser probe at 390×844 emulation (pinned Chrome for Testing 141): gap 0px → 28px, no horizontal overflow (scrollWidth == innerWidth == 390).
• Desktop 1280×800 screenshot unchanged — the rule lives inside the ≤860px block only.
• Production bin/hugo-build green.

Baseline note

Mobile homepage baselines (macos/ and linux/) will show this intentional 28px shift on the next blessed-stack run — re-record via bin/test (macOS) / bin/dtest and commit alongside, per the visual-gate rule. (This container can't produce valid baselines for either stack; the Phase 3 dirty-baseline guard now protects against accidental commits meanwhile.)

---

🤖 Generated with Claude Code

https://claude.ai/code/session_01PXHeUErqoiyH9xN1mjC8cH

---

Generated by Claude Code

[coderabbitai]

Warning

Review limit reached

@pftg, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 24 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5ca2f0f6-d4f5-49ef-a9ad-cf9772095e23

📥 Commits

Reviewing files that changed from the base of the PR and between 0d77f1b and 3c6d871.

📒 Files selected for processing (1)

• themes/beaver/assets/css/critical/homepage-critical.css

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}