/* Scoped to the English photo-review demo. */
.demo-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 48px; padding: 48px; margin: 0 0 48px; border: 1px solid #d9dfda; border-radius: 20px; background: #edf2ee; color: #173b35; }
.demo-preview__copy { min-width: 0; }
.demo-preview .demo-preview__eyebrow { margin: 0 0 12px; color: #58655f; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.demo-preview h2 { margin: 0 0 20px; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.12; letter-spacing: -1px; }
.demo-preview p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: #42544b; }
.demo-preview .demo-preview__note { font-size: 14px; line-height: 1.55; }
.demo-preview .official-app-store-badge { margin: 8px 0 20px; }
.demo-preview__media { margin: 0; min-width: 0; }
.demo-preview video { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; aspect-ratio: 6 / 13; background: #12342c; border-radius: 12px; }
.demo-preview video:focus-visible, .demo-preview a:focus-visible { outline: 3px solid #96502f; outline-offset: 5px; }
.demo-preview figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #58655f; }
.demo-preview__download { text-decoration: underline; text-underline-offset: 3px; }
.article-content .demo-preview { grid-template-columns: minmax(0, 1fr); padding: 28px; margin-top: 36px; scroll-margin-top: 100px; }
@media (max-width: 720px) { .demo-preview { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; margin-bottom: 32px; } .demo-preview video { max-width: 280px; } .article-content .demo-preview { padding: 16px; margin-inline: -16px; } }
@media (prefers-reduced-motion: reduce) { .demo-preview { scroll-behavior: auto; } }