fix: make landing page responsive on mobile

[NUGMUNCHERS]

Fixes #3

Summary

• Removes mobile horizontal overflow on the landing page.
• Tightens nav/header spacing at phone widths and keeps CTA buttons touch-friendly.
• Stacks hero, CTA, and footer content on small screens and adjusts the tools grid for 320px+ layouts.
• Adds a focused LandingPage responsive layout test.

Validation

• npm.cmd run build
• npm.cmd exec vitest run src/pages/LandingPage.test.tsx
• Browser smoke at 320px, 375px, and 768px: no document horizontal overflow.

Notes

• Full npm.cmd test currently has one unrelated existing failure in src/lib/api.test.ts around credentials: include.
• npm.cmd run lint has unrelated existing lint errors outside the landing page.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 624ad14de4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve sticky navigation while clipping horizontal overflow

When the landing page is vertically scrolled, overflow-x-hidden makes this wrapper an overflow container (the other axis computes away from visible), so the sticky <nav> uses this expanding, non-scrolling ancestor instead of the viewport and scrolls out of view. Use overflow-x-clip or move the clipping to an element that does not contain the sticky navigation.

Useful? React with 👍 / 👎.