/* Three separately framed films; the negative space remains the page background. */
.social-page.has-showcase-film {
  background: #fff;
}
.showcase-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
.showcase-film-frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #f2f3f4;
  isolation: isolate;
}
.showcase-film-frame--primary {
  left: 35%;
  top: 15%;
  width: min(29vw, 420px);
  aspect-ratio: 16 / 9;
}
.showcase-film-frame--secondary {
  right: max(38px, 4%);
  top: 20%;
  width: min(14vw, 210px);
  aspect-ratio: 4 / 5;
}
.showcase-film-frame--tertiary {
  left: 35%;
  bottom: 6%;
  width: min(36vw, 520px);
  aspect-ratio: 16 / 9;
}
.showcase-film-frame picture,
.showcase-film-frame .showcase-backdrop-poster,
.showcase-film-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.showcase-film-frame .showcase-backdrop-poster,
.showcase-film-frame video {
  object-fit: cover;
  object-position: center;
}
.showcase-film-frame video {
  opacity: 0;
  transition: opacity .3s ease;
}
.showcase-film-frame[data-video-state="playing"] video {
  opacity: 1;
}
.has-showcase-film .social-cases {
  position: relative;
  z-index: 1;
  background: transparent;
  color: #17191c;
}
.social-page.has-showcase-film .build-header,
.has-showcase-film .build-header .motion-button,
.has-showcase-film .social-offer,
.has-showcase-film .social-price,
.has-showcase-film .social-products > button {
  color: #17191c;
}
.has-showcase-film .social-offer {
  text-shadow: none;
}
.has-showcase-film .social-products h2 {
  color: #686d73;
}
.has-showcase-film .social-products svg {
  opacity: .85;
}
.has-showcase-film .social-products > button::after {
  background: #858a90;
}
.has-showcase-film .social-price-consult {
  background: #17191c;
  color: #fff;
  text-shadow: none;
}
.has-showcase-film .social-price-consult:hover {
  background: #34383e;
}
.social-page.has-showcase-film .build-header .menu-orb {
  background: #f2f3f4;
  color: #14181c;
}
.social-page.has-showcase-film .mobile-dock {
  background: #f6f6f6;
  color: #17191c;
  border: 1px solid #e9e9e9;
  backdrop-filter: none;
}
.has-showcase-film .mobile-dock :is(.dock-brand, .dock-consult, .dock-menu) {
  color: #17191c;
}
.has-showcase-film .social-offer button:focus-visible,
.has-showcase-film .build-header button:focus-visible {
  outline: 2px solid #17191c;
  outline-offset: 5px;
}
.has-showcase-film .single-phone-scene .phone-enter-hit:focus-visible {
  outline-color: #17191c;
}
@media (min-width: 701px) and (max-width: 1000px) {
  .showcase-film-frame--primary,
  .showcase-film-frame--tertiary { left: 43%; }
  .showcase-film-frame--secondary { top: 88px; }
}
@media (max-width: 700px) {
  .has-showcase-film .build-header .motion-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }
  .showcase-film-frame { border-radius: 10px; }
  .showcase-film-frame--primary {
    left: 18px;
    top: 88px;
    width: 49%;
  }
  .showcase-film-frame--secondary {
    right: 18px;
    top: 108px;
    width: 28%;
  }
  .showcase-film-frame--tertiary {
    left: auto;
    right: 18px;
    bottom: 86px;
    width: 58%;
  }
}
@media (max-width: 359px) {
  .showcase-film-frame--primary { left: 14px; top: 84px; width: 40%; }
  .showcase-film-frame--secondary { right: 18px; top: 100px; }
  .showcase-film-frame--tertiary { width: 55%; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .showcase-film-frame--primary {
    left: auto;
    right: 18px;
    top: 84px;
    width: 52%;
  }
  .showcase-film-frame--secondary {
    top: auto;
    bottom: 86px;
    width: 25%;
  }
  .showcase-film-frame--tertiary {
    left: 18px;
    right: auto;
    bottom: 84px;
    width: 22%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-film-frame video { transition: none; opacity: 0 !important; }
}