/* Two real films, sized to their sources. The controls borrow the product's
   transparent outlined actions rather than the browser's opaque control bar. */
#marketing-v5 #uses-video .video-pair,
#marketing-v5 #uses-video .video-pair .proof-slot {
  opacity: 1;
  transform: none;
}
#marketing-v5 #uses-video .video-pair {
  transition: opacity .8s ease, filter .9s ease;
}
#marketing-v5 #uses-video[data-uses-heading-state="hidden"] .video-pair {
  opacity: 0;
  filter: blur(6px);
}
#marketing-v5 #uses-video[data-uses-heading-state="visible"] .video-pair { filter: none; }
#marketing-v5 #uses-video .video-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.777778fr);
  grid-template-rows: auto;
  width: min(100%, calc(56svh * 2.777778 + 5vw));
  height: auto;
  align-self: center;
  justify-self: center;
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

#marketing-v5 #uses-video .video-slot[data-proof-slot="video-ready"] { aspect-ratio: 1; }
#marketing-v5 #uses-video .video-slot[data-proof-slot="video-release"] { aspect-ratio: 16 / 9; }

#marketing-v5 #uses-video .video-slot {
  position: relative;
  min-width: 0;
  width: 100%;
  height: auto;
  align-self: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.bb-video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(var(--bb-cyan-rgb), var(--bb-line-card));
  border-radius: var(--bb-radius-card);
  background: transparent;
  box-shadow: var(--bb-glow-rest-cyan);
  isolation: isolate;
  pointer-events: auto;
}

.bb-video-player .uses-video-frame__media {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.bb-video-player__controls {
  position: absolute;
  inset: auto 14px 12px;
  display: grid;
  grid-template-columns: 44px 1fr 44px minmax(40px,72px) 44px;
  gap: 8px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-ease-state), visibility var(--bb-ease-state);
}

.bb-video-player:is(:hover, :has(:focus-visible)) .bb-video-player__controls {
  opacity: 1;
  visibility: visible;
}

.bb-video-player__button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--bb-text-primary);
  background: transparent;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-neutral));
  border-radius: var(--bb-radius-pill);
  cursor: pointer;
  transition: border-color var(--bb-ease-state), box-shadow var(--bb-ease-state), transform var(--bb-ease-state);
}

.bb-video-player__button--play { border-color: rgba(var(--bb-orange-rgb), var(--bb-line-strong)); }
.bb-video-player__button svg { width: 21px; height: 21px; pointer-events: none; }
.bb-video-player__button:is(:hover, :focus-visible) {
  outline: none;
  border-color: rgba(var(--bb-white-rgb), var(--bb-line-active));
  box-shadow: var(--bb-glow-white);
  transform: translateY(-1px);
}
.bb-video-player__button--play:is(:hover, :focus-visible) {
  border-color: rgba(var(--bb-orange-rgb), var(--bb-line-active));
  box-shadow: var(--bb-glow-orange);
}
.bb-video-player__button:active { transform: scale(0.97); }

.bb-video-player__time {
  color: var(--bb-text-primary);
  font: 500 12px/1.2 var(--bb-font-family);
  font-variant-numeric: tabular-nums;
}

.bb-video-player__seek {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  background: transparent;
  accent-color: var(--bb-orange);
}
.bb-video-player__seek::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(var(--bb-white-rgb), var(--bb-line-card));
}
.bb-video-player__seek::-moz-range-track {
  height: 1px;
  background: rgba(var(--bb-white-rgb), var(--bb-line-card));
}
.bb-video-player__seek::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -4.5px;
  appearance: none;
  border: 1px solid var(--bb-orange);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-deep-space);
}
.bb-video-player__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid var(--bb-orange);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-deep-space);
}
.bb-video-player__seek:focus-visible { outline: 1px solid var(--bb-orange); outline-offset: 4px; }
.bb-video-player__seek:disabled { opacity: 0.4; cursor: default; }
.bb-video-player__volume{width:100%;min-width:0;height:28px;margin:0;accent-color:var(--bb-orange);cursor:pointer;background:transparent;}
.bb-video-player__volume:focus-visible{outline:1px solid var(--bb-orange);outline-offset:3px;}
.bb-video-player video{cursor:pointer;}

.bb-video-player__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  color: var(--bb-text-primary);
  text-align: center;
  pointer-events: none;
}
.bb-video-player__status:empty { display: none; }
.bb-video-player[data-media-state="failed"] video { visibility: hidden; }
.bb-video-player[data-video-fullscreen-portal] {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}
.bb-video-player:fullscreen,
.bb-video-player[data-video-fullscreen-portal] {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  visibility: visible;
  border: 0;
  border-radius: 0;
  background: var(--bb-deep-space);
}
.bb-video-player:fullscreen video { object-fit: contain; }
.bb-video-player::backdrop { background: var(--bb-deep-space); }

@media (hover: none), (pointer: coarse) {
  .bb-video-player .bb-video-player__controls { opacity: 1; visibility: visible; }
}

@media (max-width: 720px) {
  #marketing-v5 #uses-video .video-pair { grid-template-columns: 1fr; gap: 28px; }
  #marketing-v5 #uses-video .video-slot[data-proof-slot="video-ready"] { width: min(58vw, 240px); justify-self: center; }
  #marketing-v5 #uses-video .video-slot[data-proof-slot="video-release"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-video-player__controls, .bb-video-player__button { transition: none; }
}