Web

Layout

Responsive page compositions share a centered shell and section rhythm.

Layout rules

Marketing shell	Use .wrap, .hero, .split, .cards, .steps, and .final from speed.css.
Navigation	Collapse the primary menu on narrow screens. Keep expanded state, Escape handling, focus visibility, and theme controls available.
Phone layout	Stack multi-column content and constrain images. Product tables may scroll within their own container.
Composition classes	layout-* classes are extracted styles from the supplied draft. They centralize the original compositions in the system stylesheet; reuse a matching rule instead of adding inline styles.
Source of truth	The 13 reference compositions live under /designs/website/. The production implementation uses Astro components and pages.