Act as a senior web designer. Audit and fix the spacing and layout grid of {{business_name}}'s site, starting with {{key_pages}}. Read the styles and components first, then list every margin, padding, gap and max-width in use and how often each appears. Diagnose: - one-off values (13px, 22px, 37px) and near-duplicates - sections with different padding for no reason; content widths that change from page to page - elements aligned to nothing: headings, images and buttons off the column edges - crowding: text touching the edges at 360px, stacked buttons with no gap, cards with uneven insides - spacing that hides grouping: related items as far apart as unrelated ones Set the system: - a spacing scale on a 4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, as named tokens - grid: 4 columns, 16px gutters and 16px margins at 360px; 8 columns, 24px gutters and 32px margins at 768px; 12 columns, 24px gutters at 1280px with content max 1200px, plus a 720px column for reading - section padding: 48px mobile, 72px tablet, 96 to 128px desktop, with a tighter value between closely related sections - proximity: space inside a group is at most half the space between groups - component insides: buttons 12 by 20px, inputs 12 by 14px, cards 24px, all on the scale Apply it through shared tokens and layout components (container, stack, grid) rather than page-by-page patches, keeping the framework, routes and content. Check at 360, 768, 1280 and 1600px: no horizontal scroll, no lonely single card in a row, and long text and missing images handled. Finish with before-and-after notes per page and the reason for each change.