/* The Demos page uses the established navy/white site and native video controls. */
.ql-site.so-site .ql-hero{padding:32px 0 36px}
.ql-site.so-site .ql-hero .lede{max-width:850px}
.ql-site.so-site .ql-hero .ctas{margin-top:20px}
.demo-section{padding:32px 0 56px}
.demo-section .ql-heading{max-width:900px;margin-bottom:24px}
.demo-player{margin:24px 0 0}
.demo-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#071426;border:1px solid var(--line);border-radius:16px}
.demo-player figcaption{margin-top:14px;font-size:14px;line-height:1.65;color:var(--muted)}
.demo-walkthrough{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;max-width:900px}
.demo-walkthrough summary{cursor:pointer;font-size:19px;font-weight:700;color:var(--deep);padding:5px 0}
.demo-walkthrough summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.demo-walkthrough ol{padding-left:25px;margin:20px 0}
.demo-walkthrough li{padding:0 0 12px 5px;line-height:1.7}
.demo-walkthrough p{line-height:1.7}
@media(max-width:600px){.demo-player{margin-top:24px}.demo-player video{border-radius:9px}.demo-walkthrough summary{font-size:18px}}