Layout & grid

There is no 12-column grid. There are five container measures, one real breakpoint, and a safe-area-aware gutter.

Breakpoints

Four exist; md is the only one that carries structural change. If a layout needs three breakpoints, the layout is wrong.

The gutter

A named utility, because the safe-area maths must not be retyped. 16px, 24px from md, always at least the notch inset.

<div className="gutter mx-auto max-w-page">…</div>
<div className="pb-safe-lg">…</div>   {/* bottom sheets, toast viewport */}