.demo-page { display: grid; gap: var(--space-12); }
.demo-intro { max-width: 48rem; padding-block: var(--space-8); }
.demo-intro h1 { margin: var(--space-4) 0; font: 700 var(--text-2xl)/1.08 var(--font-heading); }
.demo-intro p { font-size: var(--text-lg); }
.demo-section { display: grid; gap: var(--space-5); }
.demo-panel { padding: clamp(1rem, 3vw, 2rem); background: rgba(255,255,255,.72); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.demo-form-grid, .demo-product-grid, .demo-skeleton-grid, .demo-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.demo-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-gap-top { margin-top: var(--space-5); }
@media (max-width: 640px) { .demo-form-grid, .demo-product-grid, .demo-skeleton-grid, .demo-state-grid { grid-template-columns: 1fr; } }