/* Home-page promo video (views/partials/promo-video.ejs), loaded only by landing.ejs
   for locales that have a video (services/promoVideo.js). Vertical Short beside the
   hero text on desktop - DOM order [text, video] puts the text on the reading side
   in both RTL and LTR - and under the text + buttons on phones. Caption between the
   video and the sound button (owner 30.9). On desktop the hero text block is centred
   vertically on the whole video column (video + caption + sound button + transcript
   row, owner 30.9). */
.promo { margin: 40px auto 0; width: 100%; max-width: 400px; }
.promo-extra { margin: 0 auto; width: 100%; max-width: 400px; }
.promo-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #1a1433; box-shadow: var(--shadow-lg); }
.promo.promo-wide, .promo-extra.promo-wide { max-width: 720px; }
.promo-wide .promo-frame { aspect-ratio: 16 / 9; border-radius: 16px; }
.promo-player, .promo-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.promo-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.promo-poster[hidden] { display: none; }
.promo-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 14, 45, 0.72); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.promo-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; }
.promo-poster:hover .promo-play, .promo-poster:focus-visible .promo-play { background: var(--primary); }
.promo-sound { display: flex; width: 100%; justify-content: center; align-items: center; margin-top: 8px; min-height: 46px; }
/* A sound toggle, not a "go forward" action - no trailing arrow. */
.promo-sound::after { content: none; }
/* Room for two lines so the sound button never jumps; a one-line caption sits in the middle. */
.promo-caption { display: flex; align-items: center; justify-content: center; min-height: 3em; margin: 10px 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); text-align: center; }
.promo-transcript { margin-top: 10px; font-size: 14px; color: var(--text-muted); text-align: start; }
.promo-transcript summary { cursor: pointer; text-align: center; }
.promo-transcript p { margin: 8px 0 0; line-height: 1.7; }
@media (min-width: 901px) {
  .hero-has-video .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: center; }
  .hero-has-video .hero-grid:has(.promo-wide) { grid-template-columns: minmax(0, 1fr) min(560px, 48%); }
  .hero-has-video .hero-text { grid-column: 1; grid-row: 1 / span 2; align-self: center; text-align: start; }
  .hero-has-video p.lead { margin-inline: 0; }
  .hero-has-video .hero-ctas { justify-content: flex-start !important; }
  .hero-has-video .promo { grid-column: 2; grid-row: 1; align-self: end; margin: 0; max-width: none; }
  .hero-has-video .promo-extra { grid-column: 2; grid-row: 2; align-self: start; max-width: none; }
  .hero.hero-has-video { padding: 48px 0 56px; }
}
/* Narrated Help Center guide video (views/help/guide.ejs): full width of the guide column. */
.help-video-narrated .promo, .help-video-narrated .promo-extra { margin-top: 0; max-width: none; }
/* Vertical (9:16) guide video: phone-sized and centred, so it does not fill the page height. */
.help-video-narrated .promo:not(.promo-wide), .help-video-narrated .promo-extra:not(.promo-wide) { max-width: 360px; margin-inline: auto; }