.strategy-video { container-type:inline-size; }
.strategy-video-intro { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:24px; align-items:start; }
.strategy-video-intro > p { margin-top:0; }
.article-body .strategy-video-card { display:block; width:180px; max-width:100%; padding:7px; border:1px solid #d4e2ec; border-radius:10px; background:#f0f8fc; color:#173958; font:inherit; line-height:1.4; text-align:left; cursor:pointer; }
.strategy-video-card:hover { border-color:#008fac; background:#e8f6fb; }
.strategy-video-image { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:5px; background:#173958; }
.strategy-video-image img { display:block; width:100%; height:100%; object-fit:cover; margin:0; }
.strategy-video-play { position:absolute; inset:0; display:grid; place-items:center; }
.strategy-video-play::before { content:'▶'; display:grid; place-items:center; width:40px; height:40px; padding-left:3px; border-radius:50%; background:#133754ed; color:white; border:2px solid #7ed5ea; font-size:19px; box-sizing:border-box; }
.strategy-video-label { display:block; margin:8px 2px 2px; font-size:13px; font-weight:650; }
.strategy-video-duration { display:block; margin:0 2px 3px; font-size:12px; color:#516b86; }
.strategy-video-panel { margin:16px 0 24px; }
.strategy-video-hide { display:block; margin:0 0 8px auto; padding:7px 12px; border:1px solid #a8c8d9; border-radius:6px; color:#173958; background:#f0f8fc; font:inherit; font-size:14px; cursor:pointer; }
.strategy-video button:focus-visible { outline:3px solid #008fac; outline-offset:4px; }
.strategy-video-frame { width:100%; aspect-ratio:16/9; background:#102b43; border-radius:8px; overflow:hidden; }
.strategy-video-frame video { display:block; width:100%; height:100%; }
.strategy-video [hidden] { display:none !important; }
.strategy-video-status:empty { display:none; }
.strategy-video-status { font-size:13px; }
@container (max-width:520px) { .strategy-video-intro { grid-template-columns:minmax(0,1fr); gap:8px; } }
@media(max-width:540px) { .strategy-video-intro { grid-template-columns:minmax(0,1fr); gap:8px; } }
.strategy-video.is-expanded .strategy-video-intro { grid-template-columns:minmax(0,1fr); }
@media(prefers-reduced-motion:reduce) { .strategy-video,.strategy-video * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* A short opening paragraph must not reserve the height of the whole preview.
   Allow the following text to use the space beside it until the player opens. */
.article-body:has(.strategy-video-flow){container-type:inline-size;display:flow-root}
.strategy-video-flow:not(.is-expanded),.strategy-video-flow:not(.is-expanded) .strategy-video-intro{display:contents}
.strategy-video-flow{container-type:normal}
.strategy-video-flow .strategy-video-intro>.strategy-video-card,
.strategy-video-flow .article-explainer-choice{float:right;margin:0 0 16px 24px}
.article-body .strategy-video-flow .strategy-video-intro>p{margin-top:0;margin-bottom:24px}
.strategy-video-flow .strategy-video-intro>p:is(.calculator-prompt,.highlight,.formula){display:flow-root}
.strategy-video-flow.is-expanded .strategy-video-intro{display:flow-root}
.article-body:has(.strategy-video-flow)>:is(figure,table,.related-strategy-grid,nav,.review-note){clear:both}
.article-body:has(.strategy-video-flow)>:is(.formula,.highlight){display:flow-root}
@container (max-width:520px){
 .strategy-video-flow:not(.is-expanded){display:block}
 .strategy-video-flow:not(.is-expanded) .strategy-video-intro{display:flex;flex-direction:column;gap:8px}
 .strategy-video-flow .strategy-video-intro>.strategy-video-card,.strategy-video-flow .article-explainer-choice{float:none;order:2;margin:0 0 16px}
 .article-body .strategy-video-flow .strategy-video-intro>p{margin-bottom:0}
}
@media(max-width:540px){
 .strategy-video-flow:not(.is-expanded){display:block}
 .strategy-video-flow:not(.is-expanded) .strategy-video-intro{display:flex;flex-direction:column;gap:8px}
 .strategy-video-flow .strategy-video-intro>.strategy-video-card,.strategy-video-flow .article-explainer-choice{float:none;order:2;margin:0 0 16px}
 .article-body .strategy-video-flow .strategy-video-intro>p{margin-bottom:0}
}