/* ===== /demos (Watch & Download). Loads after site.css + luxe.css; JS in /js/demos.js. ===== */
.dhero{overflow:clip}
.dhero .lede{margin-inline:auto}
.featured{display:grid;gap:1.4rem;margin-top:clamp(2rem,4vw,3rem);text-align:left;align-items:center}
@media(min-width:900px){.featured{grid-template-columns:1.35fr 1fr;gap:2.4rem}}
.fmeta{display:grid;gap:.8rem;justify-items:start}
.fmeta .cta-row{margin-top:.4rem}

/* video facade */
.vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;background:var(--card-2);cursor:pointer;color:#fff;transition:border-color var(--d2),transform var(--d2) var(--ease),box-shadow var(--d3)}
.vthumb.big{box-shadow:var(--sh-2),0 0 90px -40px var(--gold-glow)}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease)}
.vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.vplay{position:absolute;z-index:1;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:rgba(8,8,7,.62);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform var(--d2) var(--ease),background-color var(--d2),color var(--d2)}
.vplay svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.vthumb.big .vplay{width:78px;height:78px;margin:-39px 0 0 -39px}
.vdur{position:absolute;z-index:1;right:.6rem;bottom:.6rem;padding:.2rem .5rem;border-radius:6px;background:rgba(8,8,7,.75);font:600 .74rem/1 var(--ff-h);letter-spacing:.04em}
.vthumb:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(hover:hover){.vthumb:hover{border-color:var(--gold-line)}.vthumb:hover img{transform:scale(1.04)}.vthumb:hover .vplay{transform:scale(1.08);background:#F59E0B;color:#15120C}}

/* filter + grid */
.dfilter{display:none;margin:0 0 1.4rem}
.js .dfilter{display:inline-flex}
.vgrid{display:grid;gap:1.1rem}
@media(min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{display:grid;gap:.9rem;align-content:start;padding:.8rem .8rem 1.1rem}
.vcard[hidden]{display:none}
.vbody{display:grid;gap:.5rem;justify-items:start;padding-inline:.4rem}
.vbody h3{font-size:1.08rem;line-height:1.25;letter-spacing:-.015em}
.vbody .yt{margin-top:.2rem;font:600 .82rem var(--ff-h);color:var(--gold-text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.vbody .yt:hover{text-decoration:underline}

/* per-product sections */
.dprod .ptxt{max-width:760px}
.dprod .pnum{display:flex;align-items:center;gap:.8rem}
.dprod h2{margin-top:1rem}
.dprod .t-lead{margin-top:.9rem;max-width:56ch}
.vchips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.vchips .btn{white-space:normal;text-align:left;justify-content:flex-start}
.vchips svg{width:14px;height:14px;fill:currentColor;flex:none}
.dprod .cta-row{margin-top:1.4rem}

/* downloads */
.dgrid{display:grid;gap:1.1rem}
@media(min-width:760px){.dgrid{grid-template-columns:repeat(2,1fr)}}
.dcol{padding:1.4rem}
.dhelp{margin-top:1.6rem}

/* theater modal */
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem}
.vmodal[hidden]{display:none}
.vback{position:absolute;inset:0;background:rgba(4,4,3,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vbox{position:relative;width:min(100%,1040px);max-height:100%;display:grid;gap:.8rem;justify-items:start;padding:.9rem;border-radius:var(--r-3);background:var(--card);border:1px solid var(--line-2);box-shadow:var(--sh-2)}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.vhead h2{margin:0;font-size:1rem}
.vframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-2);overflow:hidden;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal.vert .vbox{width:min(100%,420px)}
.vmodal.vert .vframe{aspect-ratio:9/16;max-height:calc(100dvh - 11rem)}
html.vlock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.vthumb,.vthumb img,.vplay{transition:none}.vthumb:hover img{transform:none}}