Component,Range_px,Layout,Constraint
Global,0-767,16px minimum gutter; 1 column; 320px reflow gate,No horizontal overflow at 320 CSS px and 400% zoom
Global,768-1119,24-32px gutter; 4/8-column compositions,Drawer navigation remains
Global,1120+,40px max gutter; 12-column composition; 1280px container,Desktop header visible
Header,0-1119,Brand + demo CTA where space permits + menu button,Language/theme/login live in drawer
Header,1120+,"Brand, center nav, locale/theme, login, demo CTA",Header min block 76px
Hero,0-1119,Copy then product visual; CTA wraps/stacks as needed,"Title <=14ch target, never forced"
Hero,1120+,7/5 grid; vertically centered,Visual may not reduce copy below readable measure
Lifecycle,0-479,1 column,Cards auto height
Lifecycle,480-767,2 columns,Odd last card spans only if approved
Lifecycle,768+,4 columns,"Equal visual rhythm, not fixed height"
Workflow,0-767,1 column ordered list,Connectors omitted
Workflow,768+,4 columns,Connectors direction-aware
Cards,0-767,1 column,No carousel substitution
Cards,768-1119,2 columns,Content-driven
Cards,1120+,2-3 columns by component contract,No text truncation
Dialogs,0-479,Viewport-safe margin 8-16px; internal scroll; no hidden submit,Virtual keyboard tested
Dialogs,480+,Max inline size 720px,Centered native dialog
Footer,0-767,Stacked groups,Logical order
Footer,768+,Brand column + grouped links,No fixed widths