.hero-promo { width:calc(100% - 35px); margin:0 0 0 35px; position:relative; align-self:center; }
.promo-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #726049; border-radius:18px; background:#101010; box-shadow:0 20px 70px #0005; }
.promo-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.promo-play { position:absolute; inset:0; width:100%; display:flex; justify-content:center; align-items:center; gap:18px; color:#fffaf2; background:linear-gradient(0deg,#0008,#0001 75%); text-align:left; font-size:16px; cursor:pointer; transition:background .25s; }
.promo-play:hover { background:linear-gradient(0deg,#000a,#0002 75%); }
.promo-play-icon { display:grid; place-items:center; width:70px; height:70px; padding-left:4px; border-radius:50%; background:var(--orange); color:var(--bg); font-size:22px; box-shadow:0 0 32px #f5683430; flex:none; }
.promo-play-note { display:block; font-size:11px; color:#dfdfd6; margin-top:6px; }
.hero-promo figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:9px 18px; padding-top:18px; color:var(--muted); font-size:12px; }
.hero-promo .meta { color:var(--orange); font-size:10px; }
.promo-error { margin-top:16px; font-size:13px; color:var(--muted); }
.promo-error a { color:var(--orange); text-decoration:underline; }
.promo-play[hidden],.promo-error[hidden] { display:none; }
@media(max-width:1000px) { .hero-promo { width:calc(100% - 24px); margin-left:24px; }.hero-promo figcaption { font-size:10px; }.promo-play { gap:12px; font-size:14px; }.promo-play-icon { width:54px; height:54px; font-size:18px; }.promo-play-note { font-size:10px; } }
@media(max-width:650px) { .hero-promo { width:100%; margin:34px 0 30px; }.promo-frame { border-radius:14px; }.hero-promo figcaption { padding-top:13px; font-size:11px; }.promo-play-icon { width:58px; height:58px; }.promo-play { font-size:15px; } }