/* Reuse the homepage composition and motion; only its film and copy differ. */
.ma-home-hero .hero-cinematic { container-type:size; }
.ma-home-hero .hero-cinematic__poster {
  background-image:url("assets/oasis-connected-business-poster.jpg?v=20260911-film1");
  background-size:max(90cqw,160cqh) auto;
}
/* Show ten percent more of the film without moving the foreground copy. */
.ma-home-hero .hero-cinematic__video {
  inset:50% auto auto 50%; width:max(90cqw,160cqh); height:auto;
  aspect-ratio:16 / 9; object-fit:contain; transform:translate(-50%,-50%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7% 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 7% 90%,transparent);
}
.ma-home-hero .hero__proof { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ma-hero-motion {
  position:absolute; z-index:4; right:24px; bottom:18px;
  min-height:44px; padding:8px 14px; border:1px solid #ffffff40;
  border-radius:8px; background:#050c15d9; color:#fff;
  font:inherit; font-size:12px; cursor:pointer;
}
.ma-hero-motion[hidden] { display:none; }
.ma-hero-motion:hover { background:#123653; }
.ma-hero-motion:focus-visible { outline:2px solid #bfdef5; outline-offset:4px; }
#app-craft { scroll-margin-top:calc(var(--header) + 16px); }
@media(max-width:720px) {
  .ma-home-hero .hero-cinematic__video {
    inset:var(--header) auto auto 50%; width:140%; transform:translateX(-50%);
  }
  .ma-home-hero.hero--circuit.is-cinematic-static .hero-cinematic__poster {
    background-size:140% auto;
  }
  /* Keep the existing, longer app headline on three whole lines. */
  .ma-home-hero .hero__title { font-size:clamp(2rem,10.3vw,3.35rem); }
  .ma-home-hero.hero--circuit { padding-bottom:5rem; }
}
@media(max-width:800px) {
  .ma-hero-motion { top:calc(var(--header) + 12px); right:20px; bottom:auto; }
}