/* platesmith.app/demo/: screen recordings of the real app.
   Each clip is a light and a dark <video>, muted, looping and autoplaying, inside the same
   .phone frame as the screenshots; the .shot l/d classes in site.css show the one for the
   current theme. No script: the browser plays them on its own. */

.clips-sec { padding-top: 64px; padding-bottom: 72px; }
.clips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.clip { margin: 0; }
.clip .phone { width: 100%; border-radius: 40px; padding: 8px; }
.clip .phone .screen { border-radius: 32px; aspect-ratio: 590 / 1282; }
.clip video.shot { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.clip figcaption b { display: block; color: var(--text); font-size: 17px; font-weight: 700; margin-bottom: 2px; }

.demo-cta { padding: 0 0 120px; text-align: center; }
.demo-cta h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 750; }
.demo-cta p { color: var(--muted); font-size: 19px; margin: 14px auto 28px; max-width: 46ch; }
.demo-cta .cta-row { justify-content: center; }

@media (max-width: 1020px) { .clips { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } }
@media (max-width: 520px) { .clips { grid-template-columns: 1fr; justify-items: center; } .clip { width: min(300px, 80vw); } }