<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Responsive Behavior

## Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked cards |
| Small Tablet | 640–768px | Minor adjustments |
| Tablet | 768–1024px | 2-column grids |
| Desktop | 1024–1280px | Standard layout |
| Large Desktop | 1280–1536px | Expanded content |
| Ultra-wide | 1536–2200px | Maximum container width |

## Touch Targets

- Buttons with 12px 16px padding minimum
- Card surfaces as touch targets
- Adequate nav link spacing

## Collapsing Strategy

- **Hero text**: 96px → 72px → 48px → 36px
- **Feature grids**: Multi-column → 2 → 1 column
- **Stats**: Horizontal → stacked
- **Navigation**: Full → hamburger

## Image Behavior

- Product screenshots maintain aspect ratio
- Code blocks use horizontal scroll on narrow screens
- All images on dark backgrounds
