/* Demo media reused from the existing production LP (2026-10-17). Scoped to .demo-media; nothing else changes. */
.demo-media{width:100%;max-width:960px;margin:30px auto 36px;padding:0}
.demo-media-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;width:calc(100% - 50px);margin:0 auto 12px}
.demo-media-kind{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#284d5f}
.demo-media-kind:before{content:'';width:18px;height:1px;background:#c4a172}
.demo-media-head small{font-size:11px;color:#7c939c}
.demo-media-frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#101f2b}
.demo-media-frame video,.demo-media-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#101f2b}
.demo-media-still .demo-media-frame{background:#fff;border-top:1px solid #d3dde0;border-bottom:1px solid #d3dde0}
.demo-media-still .demo-media-frame img{background:#fff}
.demo-media-frame:focus-visible{outline:3px solid #c4a172;outline-offset:3px}
.demo-media figcaption{width:calc(100% - 50px);margin:14px auto 0;padding:0;border:0;text-align:left;font-size:14px;line-height:1.85;color:#284d5f}
.demo-media figcaption>span{display:block;text-wrap:pretty}
.demo-phrase{display:inline-block}
.demo-media figcaption small{display:block;margin-top:6px;font-size:11px;line-height:1.75;color:#6f8791}
.demo-media-zoom{display:block}
@media(min-width:760px){.demo-media{width:calc(100% - 70px);margin:44px auto 48px}.demo-media-head,.demo-media figcaption{width:100%}.demo-media-frame{border-radius:2px}.demo-media figcaption{font-size:15px}.demo-media figcaption small{font-size:12px}.demo-media-zoom{display:inline;margin-left:.5em}}
@media(hover:hover) and (pointer:fine){.demo-media-zoom{display:none}}