/* Full film framing keeps every part of the approved logo and titles visible. */
.brand-intro {
  background: #fffefa;
  height: 100vh;
  height: 100dvh;
}
.brand-intro > video {
  position: absolute;
  inset: max(48px, env(safe-area-inset-top)) 0 auto;
  width: 100%;
  height: calc(100% - 160px);
  object-fit: contain;
  object-position: center;
  background: #fffefa;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.brand-intro .intro-boot {
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 42px));
  width: min(360px, calc(100% - 48px));
  max-width: none;
}
.brand-intro .intro-boot-label { margin-bottom: 8px; }
.brand-intro .intro-boot-row { margin-bottom: 9px; }
.brand-intro .intro-boot-stage { font-size: 11px; }
.brand-intro .intro-bottom { bottom: max(18px, env(safe-area-inset-bottom)); }
.brand-intro .intro-skip { top: max(16px, env(safe-area-inset-top)); right: 20px; }
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .brand-intro > video { inset-block-start: max(60px, env(safe-area-inset-top)); height: calc(100% - 178px); }
  .brand-intro .intro-boot { width: min(310px, calc(100% - 44px)); }
  .brand-intro .intro-boot-label { display: none; }
  .brand-intro .intro-bottom > span:last-child { display: none; }
}
@media (max-height: 550px) and (min-aspect-ratio: 4/5) {
  .brand-intro > video { inset-block-start: 42px; height: calc(100% - 132px); }
  .brand-intro .intro-boot { bottom: 40px; width: min(300px, calc(100% - 48px)); }
  .brand-intro .intro-boot-label { display: none; }
  .brand-intro .intro-boot-row { margin-bottom: 5px; }
  .brand-intro .intro-bottom { bottom: 10px; }
  .brand-intro .intro-bottom > span:last-child { display: none; }
}