body.video-open { overflow: hidden; }
.hero-video-play { position:absolute; z-index:3; left:20px; right:20px; bottom:24px; display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #5e9292; border-radius:16px; background:#01212bf2; color:#fff; text-align:left; cursor:pointer; }
.hero-video-play strong { display:block; font-family:var(--display); font-size:1.05rem; line-height:1.3; }
.hero-video-play small { display:block; margin-top:5px; color:#c9dfe0; line-height:1.5; }
.hero-play-icon { display:grid; place-items:center; flex:0 0 48px; height:48px; border-radius:50%; background:var(--accent); color:var(--ink); }
.hero-video-play:hover { border-color:var(--cyan); }
.hero-video-play:focus-visible,.explainer-close:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.explainer-dialog { width:min(1000px,calc(100% - 24px)); max-height:90dvh; padding:24px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:white; }
.explainer-dialog::backdrop { background:#01212bdb; }
.explainer-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.explainer-heading h2 { font-size:clamp(1.2rem,3vw,1.8rem); }
.explainer-close { flex:0 0 44px; height:44px; border:1px solid var(--line); border-radius:10px; font-size:28px; cursor:pointer; background:white; }
.explainer-video { display:block; width:100%; aspect-ratio:16/9; background:var(--ink); border-radius:10px; }
.explainer-transcript { margin:18px 0; }
.explainer-transcript summary { cursor:pointer; font-weight:600; }
.explainer-transcript p { margin-top:12px; }
@media(max-width:640px) { .explainer-dialog { padding:14px; }.hero-video-play { left:14px; right:14px; bottom:18px; padding:14px; } }

.explainer-video.is-vertical { aspect-ratio:9/16; width:auto; max-width:100%; max-height:68dvh; margin-inline:auto; }

.explainer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; }
.explainer-toggle { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; touch-action:manipulation; }
.explainer-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.explainer-actions .button { margin:0; }
@media(max-width:640px) { .explainer-actions { flex-direction:column; align-items:stretch; }.explainer-toggle,.explainer-actions .button { justify-content:center; width:100%; }.explainer-video.is-vertical { max-height:56dvh; } }