Reskin landing page to storybook-style bands and richer layout

[offmybach]

Motivation

• Move the landing page visual direction closer to the provided storybook-style reference with stronger section banding, playful hero treatment, and clearer conversion pacing.
• Improve framing for the interactive coupon-magazine experience and surface educator/parent cues to better match the target audience.

Description

• Added a hero--storybook modifier, a bold story-ribbon after the header, and updated hero copy and audience chips in index.html to create a playful top treatment.
• Reframed the magazine intro copy and applied .section-card to the magazine block, and preserved the existing flip-magazine and cover-upload interactions (script.js wiring unchanged).
• Converted highlights into a titled dark showcase (.dark-showcase) and inserted a scene-strip, an FAQ block, and a newsletter signup panel to match the multi-band reference layout in index.html and style.css.
• Implemented extensive theme and section-level styles (gradients, ribbons, card borders, contrast blocks, and responsive tweaks) in style.css to visually match the reference.

Testing

• Ran node --check script.js and it completed with no syntax errors.
• Started a local server with python3 -m http.server 4173 and verified the site served successfully.
• Captured a full-page screenshot via Playwright (Firefox) to validate the visual layout and it completed successfully.

---

Codex Task