/* Real app screenshots as numbered steps on how-to pages (see scripts/screenshots/apply-app-images.js).
   Uses the v3 editorial tokens (--li-*): sharp corners, ink borders, mono labels. Fallbacks keep it
   readable if a page ever loads this file without site-v3.css. 6-column grid: default half, .third, .wide. */
.step-shots { display: grid; gap: 22px; margin: 24px 0 32px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.step-shots figure { grid-column: span 3; margin: 0; padding: 0; background: var(--li-panel, #fffdf7); border: 1px solid var(--li-ink, #101214); border-radius: 0; overflow: hidden; }
.step-shots figure.third { grid-column: span 2; }
.step-shots figure.wide { grid-column: 1 / -1; }
.step-shots figure a { display: block; line-height: 0; }
.step-shots figure img { display: block; width: 100%; height: auto; margin: 0; padding: 0; background: #1d4ed8; border: 0; border-bottom: 1px solid var(--li-ink, #101214); }
.step-shots figcaption { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 16px; font-size: .93rem; line-height: 1.5; color: var(--li-muted, #67655f); }
.step-shots figcaption strong { display: block; margin-bottom: 3px; color: var(--li-ink, #101214); font-weight: 700; }
.step-shots .step-shots-n { flex: 0 0 auto; width: 30px; height: 30px; background: var(--li-ink, #101214); color: var(--li-panel, #fffdf7); font-family: var(--li-mono, Consolas, monospace); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.step-clip { margin: 8px 0 32px; border: 1px solid var(--li-ink, #101214); background: #0b1220; }
.step-clip video { display: block; width: 100%; height: auto; }
.step-clip p { margin: 0; padding: 12px 16px; font-size: .92rem; color: var(--li-muted, #67655f); background: var(--li-panel, #fffdf7); border-top: 1px solid var(--li-ink, #101214); }
@media (max-width: 760px) { .step-shots { grid-template-columns: 1fr; } .step-shots figure, .step-shots figure.third, .step-shots figure.wide { grid-column: 1 / -1; } }