Responsive Breakpoints

Design uses the Framer model: every screen is ONE document (one DOM tree). Breakpoint frames are the SAME document rendered at different viewport widths — never separate copies. Edits cascade:

• The base is the primary (widest) frame. Base edits are plain unprefixed classes / inline styles and cascade down to every narrower breakpoint unless overridden there.
• Edits made while a narrower breakpoint is active persist as width-scoped overrides that apply from just below the next-wider frame down to zero. Narrower breakpoints layer their own overrides on top.

The bound for an override is next-wider frame width - 1 (e.g. breakpoints 390/810 with a 1280 primary: editing 810 scopes to ≤ 1279px, editing 390 scopes to ≤ 809px). breakpointUpperBoundPx in shared/responsive-classes.ts is the canonical implementation.

Managing breakpoints