/**
 * Video stage + chapter menu
 * Desktop: left panel beside video
 * Mobile: same chip style stacked below the video (outside the frame)
 */

/* ── Stage layout ── */
.video-section-wrap {
  width: min(75vw, 100%);
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 25px;
}

.video-card {
  position: relative;
  width: 100%;
  /* Desktop: landscape 16:9. Mobile overridden below in media query. */
  aspect-ratio: 16 / 9;
}

.video-stage__video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  border-radius: 1.5rem;
}

.video-stage {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.video-stage__menu {
  flex: 0 0 clamp(160px, 18%, 240px);
  width: clamp(160px, 18%, 240px);
  max-width: 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: center;
}

.video-stage__player {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.video-stage .video-card {
  width: min(100%, calc(70vh * 16 / 9));
  max-width: 100%;
}

.video-stage__close {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.video-stage__close:hover,
.video-stage__close:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  outline: 2px solid #ffa500;
  outline-offset: 2px;
}

.video-stage__close:not([hidden]) {
  display: flex;
}

/* ── Menu chips ── */
.video-menu {
  --video-menu-item-bg: #333;
  --video-menu-item-bg-hover: #333;
  --video-menu-item-title-color: #fff;
  --video-menu-item-desc-color: #fff;
  --video-menu-active-bg: #333;
  --video-menu-active-border: none;
  --video-menu-active-shadow: none;
  --video-menu-icon-bg: #0064ff;
  --video-menu-icon-border: #fff;
  --video-menu-icon-color: #fff;
  --video-menu-paddle-bg: rgba(0, 0, 0, 0.55);
  --video-menu-paddle-color: #fff;
  --video-menu-icon-inactive-bg: transparent;
  --video-menu-icon-inactive-border: #888;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Light theme is iPad-portrait only. Phones put Speed / Trust on the same black
   card as Service / Growth (see the ≤767.98px block near the end), and every
   desktop menu uses the dark theme. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .video-menu.video-menu--light {
    --video-menu-item-bg: #f1f1f2;
    --video-menu-item-bg-hover: #e8e8ea;
    --video-menu-item-title-color: #1a1a1a;
    --video-menu-item-desc-color: #4a4a4a;
    --video-menu-active-bg: #ffffff;
    --video-menu-active-border: 1px solid #e5e5e7;
    --video-menu-active-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --video-menu-icon-bg: #0064ff;
    --video-menu-icon-border: #0064ff;
    --video-menu-icon-color: #fff;
    --video-menu-icon-inactive-bg: transparent;
    --video-menu-icon-inactive-border: #ccc;
  }
}

.video-menu__scroller {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: inherit;
  width: 100%;
  min-width: 0;
}

.video-menu__paddle {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--video-menu-paddle-bg);
  color: var(--video-menu-paddle-color);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.video-menu__paddle:disabled {
  opacity: 0.35;
  cursor: default;
}

.video-menu__paddle:focus-visible {
  outline: 2px solid #ffa500;
  outline-offset: 2px;
}

.video-menu__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
  background-color: var(--video-menu-item-bg);
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: border-radius 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
  font-family: inherit;
  text-align: left;
  color: var(--video-menu-item-title-color);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.video-menu__item:hover:not(.video-menu__item--active) {
  background-color: var(--video-menu-item-bg-hover);
}

.video-menu__item:active {
  transform: scale(0.98);
}

.video-menu__item-header {
  display: flex;
  /* align-items: flex-start; */
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.video-menu__item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--video-menu-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--video-menu-icon-color);
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  background-color: var(--video-menu-icon-bg);
  /* Ensure + icon is visually centered - font metrics can cause slight offset */
  text-indent: 0;
  padding-top: 1px;
}

.video-menu__item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--video-menu-item-title-color);
  transition: color 0.3s ease;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.video-menu__item-desc {
  font-size: 18px;
  line-height: 1.35;
  color: var(--video-menu-item-desc-color);
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 400;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, margin-top 0.35s ease, visibility 0.35s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.video-menu__item--active {
  background-color: var(--video-menu-active-bg);
  border: var(--video-menu-active-border);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  color: var(--video-menu-item-title-color);
  box-shadow: var(--video-menu-active-shadow);
}

.video-menu__item--active .video-menu__item-title {
  color: var(--video-menu-item-title-color);
  font-weight: 600;
}

.video-menu__item--active .video-menu__item-icon {
  display: none;
}

.video-menu__item--active .video-menu__item-desc {
  position: static;
  width: auto;
  height: auto;
  pointer-events: auto;
  opacity: 1;
  margin-top: 0.4rem;
  visibility: visible;
}

.video-menu__item--active[data-hide-title-when-expanded="true"] .video-menu__item-header {
  display: none;
}

.video-menu__item--active[data-hide-title-when-expanded="true"] .video-menu__item-desc {
  margin-top: 0;
}

/* Desc panel: only visible on mobile */
.video-menu__desc-panel {
  display: none;
}

/* ── Mobile: pill-selector chips below the video ── */
@media (max-width: 991.98px) {
  /* Hide close (X) button on mobile — pills stay visible, no collapse needed */
  .video-stage__close,
  .video-stage__close:not([hidden]) {
    display: none !important;
  }

  .video-section-wrap {
    width: 100%;
    padding: 0.5rem 0.75rem;
  }

  .video-stage {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    gap: 0.5rem;
  }

  .video-stage__player {
    order: 1;
    width: 100%;
    flex: none;
  }

  .video-stage__menu {
    order: 2;
    position: static;
    width: 100%;
    max-width: none;
    flex: none;
    align-self: stretch;
    padding: 0;
    background: none;
    border-radius: 0;
    pointer-events: auto;
  }

  .video-stage .video-card {
    width: 100%;
  }
  
  /* Mobile sections play portrait clips that are 720 x 1120 (9 : 14), not a
     true 9 : 16. vimeo-init.js sets .video-card { aspect-ratio } inline from
     the stream's real dimensions, so the frame must not force a ratio of its
     own: a mismatched frame plus object-fit:contain letterboxes the clip, and
     those black bars read as an oversized black border around the video.
     The 9 / 16 below is only the pre-metadata fallback — no !important, so the
     inline ratio wins. */
  section[data-video-menu-config$="_mobile"] .video-card {
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  
  section[data-video-menu-config$="_mobile"] .video-stage__video {
    object-fit: contain;
  }
  
  /* Ensure section header is visible on mobile */
  section[data-video-menu-config$="_mobile"] .section-block__header {
    padding-top: 0;
    margin-bottom: 1rem;
  }
  
  section[data-video-menu-config$="_mobile"] .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.75rem !important;
  }

  /* ── Mobile pill buttons: Apple-style touch-scrollable, no arrows ── */

  .video-menu {
    /* Side room reserved inside the pill scroller for focus rings / shadows */
    --video-menu-scroller-gutter: 6px;
    flex-direction: row;
    flex-wrap: wrap;              /* wrap so desc-panel drops to next line */
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0;
  }

  /* Hide left/right arrows on mobile — touch scrolling only */
  .video-menu__paddle {
    display: none !important;
  }

  /* Scroller is the touch-scrollable row */
  .video-menu__scroller {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;            /* don't clip pill borders */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Gutter so the active pill's focus ring / shadow is never clipped by the
       scroller edge; the negative margin cancels it so the pills stay aligned
       with the desc-panel below. */
    padding: 4px var(--video-menu-scroller-gutter);
    margin-inline: calc(var(--video-menu-scroller-gutter) * -1);
    width: calc(100% + var(--video-menu-scroller-gutter) * 2);
    max-width: none;
    scroll-padding-inline: var(--video-menu-scroller-gutter);
  }

  /* 2-button menus: centered, sharing the row evenly — but a pill never
     shrinks below its own label. `flex: 1 1 0` with `max-width: 50%` gave both
     pills the same box no matter how long the text was, so a wide label
     ("Intelligence") ran its nowrap title straight through the right padding.
     Growing from the content width instead splits only the leftover space. */
  .video-menu--two-items .video-menu__scroller {
    justify-content: center;
  }
  .video-menu--two-items .video-menu__item,
  .video-menu--two-items .video-menu__item--active {
    flex: 1 0 auto;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }
  .video-menu--two-items .video-menu__item-header {
    justify-content: center;
  }

  .video-menu__scroller::-webkit-scrollbar {
    display: none;
  }

  /* Trailing spacer: some browsers leave the scroller's end padding out of the
     scrollable area, which clips the last pill's ring at the end of the scroll.
     The flex gap in front of this zero-width item restores that room.
     Phones only: the iPad block below centres the row, where an extra flex
     item would pull the pills off-centre. Phones lay the row out flex-start,
     so a trailing spacer can only add scroll room, never shift anything. */
  @media (max-width: 767.98px) {
    .video-menu:not(.video-menu--two-items) .video-menu__scroller::after {
      content: "";
      flex: 0 0 0;
    }
  }

  /* ── Shared pill base (sizing / shape) ── */
  .video-menu__item {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0.55rem 1rem 0.55rem 0.65rem;
    justify-content: center;
    border-radius: 100px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  .video-menu__item-header {
    align-items: center;
    gap: 0.4rem;
  }

  .video-menu__item-title {
    font-size: 0.875rem;
    font-weight: 500;
    /* line-height: 1.2; */
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .video-menu__item-desc {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .video-menu__item-icon {
    width: 22px;
    height: 22px;
    font-size: 15px;
    /* padding-top: 0; */
    line-height: 1;
  }

  /* ── Pills: the dark theme is the mobile default for every menu.
     The iPad-portrait block at the end re-skins Speed / Trust light. ── */
  .video-menu .video-menu__item {
    background-color: #1d1d1f;
    border: 1px solid #424245;
    color: #fff;
  }

  .video-menu .video-menu__item:hover:not(.video-menu__item--active) {
    background-color: #2a2a2d;
  }

  .video-menu .video-menu__item-title {
    color: #fff;
  }

  /* Dim the non-selected pills once any pill is selected */
  .video-menu.video-menu--expanded
    .video-menu__item:not(.video-menu__item--active)
    .video-menu__item-title {
    color: #f2f2f2;
    /* opacity: 0.5; */
  }

  .video-menu .video-menu__item--active {
    background-color: rgba(0, 100, 255, 0.18);
    border: 1px solid #0064ff;
    box-shadow: none;
  }

  .video-menu .video-menu__item:not(.video-menu__item--active) .video-menu__item-icon {
    background-color: transparent;
    border-color: #888;
    color: #888;
  }

  /* ── Shared active pill ── */
  .video-menu__item--active {
    padding: 0.55rem 1rem 0.55rem 0.65rem;
    max-width: none;
    border-radius: 100px;
  }

  .video-menu__item--active .video-menu__item-title {
    font-size: 0.875rem;
    font-weight: 600;
  }

  /* Keep icon visible on active item (override desktop display:none) */
  .video-menu__item--active .video-menu__item-icon {
    display: flex;
    background-color: var(--video-menu-icon-bg);
    border-color: var(--video-menu-icon-border);
  }

  /* Hide inline desc on mobile — shown via desc-panel instead */
  .video-menu__item--active .video-menu__item-desc {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    min-height: 0;
  }

  /* Always show header on mobile even when hideTitleWhenExpanded is set */
  .video-menu__item--active[data-hide-title-when-expanded="true"] .video-menu__item-header {
    display: flex;
  }

  /* Expanded state: all pills stay visible, desc-panel shows below */
  .video-menu--expanded {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 0.15rem;
    gap: 0.5rem;
  }

  .video-menu--expanded .video-menu__paddle {
    display: none !important;
  }

  .video-menu--expanded .video-menu__scroller {
    flex: 1 1 100%;
    min-width: 0;
    width: calc(100% + var(--video-menu-scroller-gutter) * 2);
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
  }

  /* 2-button expanded: the expanded scroller lays out flex-start, so re-centre
     it. Pill sizing needs no restating — the rule above still applies. */
  .video-menu--two-items.video-menu--expanded .video-menu__scroller {
    justify-content: center;
  }

  .video-menu--expanded .video-menu__item:not(.video-menu__item--active) {
    display: flex;
  }

  .video-menu--expanded .video-menu__item--active {
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  /* Desc panel: min 3 lines so switching chapters does not read as the panel
     expanding and collapsing; longer copy still grows past it. */
  .video-menu__desc-panel {
    display: block;
    flex-basis: 100%;
    order: 10;
    font-size: 0.8rem;
    line-height: 1.35;
    min-height: calc(3 * 0.8rem * 1.35 + 1.4rem);
    padding: 0.6rem 0.9rem;
    margin-top: 0.35rem;
    border-radius: 0.6rem;
    background: transparent;
    color: transparent;
    text-align: left;
    overflow: visible;
    box-sizing: border-box;
  }

  /* Desc panel: dark by default (see the light override in the iPad block) */
  .video-menu .video-menu__desc-panel:not(:empty) {
    background: #1d1d1f;
    border: 1px solid #424245;
    color: #ccc;
  }

  .video-stage__menu {
    min-width: 0;
    overflow: visible;
  }

  .video-section-wrap {
    overflow: visible;
  }

  #speed .video-stage__menu,
  #trust .video-stage__menu {
    padding: 0.75rem 0 0;
  }
}

/* ── Phones only (≤767.98px): Speed & Trust ride one black card ──
   Video, pills and description panel all sit inside the same black rounded
   frame Service / Growth use — Bootstrap's .bg-black on the wrap, which the
   iPad-portrait block strips but phones keep, plus the dark pills every menu
   gets by default at this width. Only the padding is section-specific. */
@media (max-width: 767.98px) {
  #speed .video-section-wrap,
  #trust .video-section-wrap {
    /* Bottom gap matches the 17.6px between the pill row and the desc panel
       (8px menu gap + the panel's 5.6px margin-top + 4px scroller padding):
       .video-menu already contributes 4px of its own padding below the panel,
       so 0.85rem here makes up the remaining 13.6px. */
    padding: 1rem 0.75rem 0.85rem;
  }

  /* Side padding the player used to carry as the card: it keeps the video at
     256px, so the 9:14 clip does not grow ~43px taller and push the section
     further past the viewport on smaller phones. */
  #speed .video-stage__player,
  #trust .video-stage__player {
    padding: 0 0.75rem;
  }
}

.video-menu__item:focus-visible {
  outline: 2px solid #ffa500;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .video-menu__item,
  .video-menu__item-desc {
    transition: none;
  }

  .video-menu__item:active {
    transform: none;
  }
}

/* ── iPad portrait: bigger video, single-row pills ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Override the 280px mobile cap — iPad portrait has plenty of room */
  .video-stage {
    max-width: 520px;
  }

  .video-menu {
    gap: 0.5rem;
  }

  /* Keep pills in a single row — scroll if they overflow */
  .video-menu__scroller,
  .video-menu--expanded .video-menu__scroller {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    overflow-x: auto;
  }

  .video-menu__item,
  .video-menu--expanded .video-menu__item,
  .video-menu--expanded .video-menu__item--active {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* Auto-width, centered pills for every video — including 2-item menus,
     which the mobile block stretches to equal 50% widths */
  .video-menu--two-items .video-menu__scroller,
  .video-menu--two-items.video-menu--expanded .video-menu__scroller {
    justify-content: center;
  }

  .video-menu--two-items .video-menu__item,
  .video-menu--two-items .video-menu__item--active,
  .video-menu--two-items.video-menu--expanded .video-menu__item,
  .video-menu--two-items.video-menu--expanded .video-menu__item--active {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Compact pill text so all items fit in one row */
  .video-menu__item-title,
  .video-menu__item--active .video-menu__item-title {
    font-size: 0.875rem;
  }

  .video-menu__desc-panel {
    margin-top: 0.5rem;
    font-size: 0.95rem;
  }

  /* iPad portrait only: slightly narrower than the stage, not full-width —
     on portrait clips (client_title/growth/speed/trust all ship 9:16-ish
     video) a 100%-wide card runs tall enough on this viewport to push the
     chip row and the expanded description panel off-screen below it.
     Shrinking the frame a touch brings the height down with it
     (aspect-ratio does the rest). Phones keep the full-width card from the
     general mobile rule above — untouched. */
  .video-stage__player {
    width: 100%;
    margin-inline: auto;
  }

  /* ── Speed & Trust, iPad portrait only: light pills on the white section,
     with the black card drawn by the player rather than the wrap. Phones use
     the dark treatment inherited from the general mobile block. ── */
  #speed .video-section-wrap,
  #trust .video-section-wrap {
    background: transparent !important; /* override Bootstrap bg-black */
    padding: 0;
    border-radius: 0;
  }

  #speed .video-stage__player,
  #trust .video-stage__player {
    background: #000;
    border-radius: 25px;
    padding: 1rem 0.75rem;
  }

  /* ── Light theme pills (Speed, Trust) ── */
  .video-menu--light .video-menu__item {
    background-color: #f5f5f7;
    border: 1px solid #d2d2d7;
    color: #1a1a1a;
  }

  .video-menu--light .video-menu__item:hover:not(.video-menu__item--active) {
    background-color: #e8e8ed;
  }

  .video-menu--light .video-menu__item-title {
    color: #1a1a1a;
  }

  /* Dim the non-selected pills once any pill is selected */
  .video-menu--light.video-menu--expanded
    .video-menu__item:not(.video-menu__item--active)
    .video-menu__item-title {
    color: grey;
    /* opacity: 0.5; */
  }

  .video-menu--light .video-menu__item--active {
    background-color: #fff;
    border: 1px solid #0064ff;
    box-shadow: 0 2px 8px rgba(0, 100, 255, 0.12);
  }

  .video-menu--light .video-menu__item:not(.video-menu__item--active) .video-menu__item-icon {
    background-color: transparent;
    border-color: #ccc;
    color: #ccc;
  }

  /* Light desc panel (Speed, Trust) */
  .video-menu--light .video-menu__desc-panel:not(:empty) {
    background: #f5f5f7;
    border: 1px solid #d2d2d7;
    color: #000;
    box-shadow: none;
  }
}

/* ── Remove the black frame from dark video sections ──
   On dark sections (gradient-black) the bg-black wrap paints #000 against the
   section's rgb(28,28,28) gradient, so its padding reads as a black frame
   around the video. Strip it at every width — phone, iPad and desktop — so
   the video sits flush on the section background. */
/* .gradient-black .video-section-wrap {
  background: transparent !important;
  padding: 0;
  border-radius: 0;
} */

/* ── iPad landscape: compact side menu, bigger video ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Widen the wrap so the video gets more room */
  .video-section-wrap {
    width: min(88vw, 100%);
  }

  /* Shrink the side menu panel */
  .video-stage__menu {
    flex: 0 0 clamp(120px, 13%, 170px);
    width: clamp(120px, 13%, 170px);
    max-width: 170px;
  }

  /* Compact menu items — fit titles in fewer lines */
  .video-menu__item {
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    border-radius: 1rem;
  }

  .video-menu__item--active {
    padding: 0.6rem 0.75rem;
  }

  .video-menu__item-title {
    font-size: 13px;
    line-height: 1.25;
  }

  .video-menu__item--active .video-menu__item-title {
    font-size: 13px;
  }

  .video-menu__item-desc {
    font-size: 12px;
    line-height: 1.3;
  }

  .video-menu__item-icon {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  .video-menu {
    gap: 0.35rem;
  }
}

/* ---------------------------------------------------------------------------
   Video-menu section visibility (moved here from an inline <style> in
   index.html on 28 Aug 2026).

   These override Bootstrap's d-none/d-lg-flex utilities, which were not winning
   on their own — that is why they were written with !important in the first
   place.

   WHY THEY MOVED: the inline <style> was blocked by the Content-Security-Policy
   on the deployed site. The CSP allows exactly one style hash and that hash
   belongs to 404.html, so index.html's block never ran in production — it only
   ever worked locally, where no CSP is applied. Rules in a real stylesheet need
   no hash and cannot go stale when someone edits them.

   DO NOT move these back inline. If they ever need to change, change them here.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  section[data-video-menu-config$="_mobile"] { display: flex !important; }
  section[data-video-menu-config]:not([data-video-menu-config$="_mobile"]) { display: none !important; }
}

@media (min-width: 992px) {
  section[data-video-menu-config$="_mobile"] { display: none !important; }
  section[data-video-menu-config]:not([data-video-menu-config$="_mobile"]) { display: flex !important; }
}