Add 480px mobile breakpoint to landing page (Deel pitch readability)

[devin-ai-integration]

Summary

Adds a @media (max-width: 480px) breakpoint to index.html so the MO§ES™ landing page reads cleanly on a phone held at arm's length during the Deel pitch event on May 5, 2026. No functional/JS changes — purely CSS.

Changes inside the new 480px block:

• .hero padding → 56px 16px 40px
• .section padding → 0 16px 40px
• .flame-grid → grid-template-columns: 1fr (single column)
• .stat-row → grid-template-columns: 1fr 1fr (holds 2-up at 375px)
• .law-eq padding → 24px 16px
• .law-key padding → 20px 16px
• .gov-card padding → 16px 18px
• .contact-row → flex-direction: column; align-items: center; gap: 12px

The existing 640px block already sets .flame-grid { grid-template-columns: 1fr; } (line 501), so the override the prompt asked for is already in effect on smaller screens — re-asserted at 480px for clarity.

Tested at 375 / 390 / 414 px viewport widths in Chrome via local file load.

Review & Testing Checklist for Human

• Open the landing page on an actual iPhone (or DevTools at 375px) and confirm hero, gov-card grid, flame-grid, stat-row, and contact-row all render single-column / readable without horizontal scroll
• Verify nothing regressed at ≥ 768px desktop widths (the new rules only apply ≤ 480px)
• Confirm the page still deploys correctly to GitHub Pages

Notes

Cosmetic-only patch ahead of the May 5, 2026 Deel event. If anything looks off on the actual phone, the cascade is straightforward to tweak — every change is inside a single 480px media block at the bottom of the <style> element.

Link to Devin session: https://app.devin.ai/sessions/e17816bc1cf948539681e001700f5e16
Requested by: @SunrisesIllNeverSee

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Mobile 480px breakpoint — runtime test results

Tested locally via Chrome DevTools device toolbar at 375 / 390 / 414 px (iPhone SE → 14 Plus) and a 1280 px desktop regression check. Each rule was verified by reading getComputedStyle(...) from the JS console and by visual inspection — so a missing @media block would fail the computed-value assertion loudly.

Result: every requested rule fires at iPhone widths and reverts to desktop defaults at 1280px. No regressions.

Computed-value assertions @ 375 px (critical)

#	Selector	Expected	Observed	Result
M1	.hero padding	56px 16px 40px	56px 16px 40px	passed
M2	.section padding	0 16px 40px *	32px 16px 40px	passed *
M3	.flame-grid grid-template-columns	single track	343px	passed
M4	.stat-row grid-template-columns	2 equal tracks	166.5px 166.5px	passed
M5	.law-eq padding	24px 16px	24px 16px	passed
M6	.law-key padding	20px 16px	20px 16px	passed
M7	.gov-card padding	16px 18px	16px 18px	passed
M8	.contact-row flex	column / center / 12px gap	column / center / 12px	passed

* M2 — the first <section class="section"> has an inline style="padding-top: 32px;" on line 538 of index.html. That intentionally overrides only the top padding for that one section; right/bottom/left still come from the new rule. All other .section elements compute the full new value. Author-intentional, not a CSS bug.

375 / 390 / 414 px — values held across all three iPhone widths

At 390: .flame-grid → 358px (1fr), .stat-row → 174px 174px, .contact-row flex column.
At 414: .flame-grid → 382px (1fr), .stat-row → 186px 186px, paddings/contact unchanged.

Regression @ 1280 px (desktop, 480px block must NOT leak)

• .hero padding → 96px 24px 80px (NOT 56/16/40)
• .flame-grid → 297.328px 297.328px 297.344px (3-up, NOT 1fr)
• .stat-row → 220.5px × 4 (NOT 2-up)
• .contact-row flex-direction → row (horizontal)
• .gov-card padding → 22px 24px (NOT 16/18)

Visual evidence

375 px — flame grid single column	375 px — stat row 2-up + contact stacked

1280 px regression — desktop layout intact

Recording of the full viewport walk (Mos2es + KASSA, 375 → 390 → 414 → 1280)

— Tested by Devin. Session: https://app.devin.ai/sessions/e17816bc1cf948539681e001700f5e16