/* Simple scene drawings and genuine app screens explain the same case. */
.docs-page .story-visual{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.65fr));gap:18px;align-items:center;margin:28px 0 12px;padding:22px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.025)}
.docs-page .story-visual[data-shot-count="1"]{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.docs-page .story-visual figure{margin:0;min-width:0}
.docs-page .story-visual img{display:block;width:100%;height:auto;border-radius:9px}
.docs-page .story-sketch img{background:white}
.docs-page .story-visual figcaption{font-size:.75rem;line-height:1.75;color:var(--muted);margin-top:10px}
.docs-page .story-visual .zoom-label{font-size:.7rem}
.docs-page .story-app{width:100%;max-width:210px;justify-self:center}
.docs-page .story-app.wide{max-width:100%}
.docs-page .cf-case .story-visual{padding:16px}
.docs-page .cf-case[id]{scroll-margin-top:var(--doc-header-offset,100px)}
@media(max-width:1000px){.docs-page .story-visual{gap:14px;padding:16px;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.8fr))}}
@media(max-width:700px){.docs-page .story-visual,.docs-page .story-visual[data-shot-count="1"]{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;padding:14px;gap:18px 12px}.docs-page .story-sketch{grid-column:1/-1}.docs-page .story-visual[data-shot-count="1"] .story-app{grid-column:1/-1;max-width:220px}.docs-page .story-visual[data-shot-count="1"] .story-app.wide{max-width:100%}.docs-page .cf-case .story-visual{padding:10px}.docs-page .cf-case .story-visual figcaption{font-size:.7rem}}