/* A first-screen invitation to the scroll-controlled film. */
.aps-hero-scroll-cue {
  position: absolute;
  z-index: 3;
  top: calc(100svh - var(--aps-hero-entry-offset, 0px) - max(24px, env(safe-area-inset-bottom, 0px)) - 48px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 85% 100%, rgba(246, 181, 30, .16), transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .07) 42%, transparent 65%),
    rgba(12, 43, 40, .48);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 20, 18, .65);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .65),
    inset 0 -2px 3px rgba(255, 255, 255, .16),
    0 7px 20px rgba(0, 0, 0, .24);
  font: 600 16px/1.2 'Barlow', sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility .22s;
}
.aps-hero-scroll-cue::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: inherit;
  pointer-events: none;
}
.aps-hero-scroll-cue::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  pointer-events: none;
}
.aps-hero-scroll-cue svg { flex: none; animation: apsScrollInvitation 1.8s ease-in-out infinite; }
.aps-hero-scroll-cue:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.aps-hero-scroll-cue[data-dismissed] { opacity: 0; visibility: hidden; pointer-events: none; }
.aps-hero-scroll-cue[data-dismissed] svg { animation-play-state: paused; }
.aps-hero-scroll-cue__touch { display: none; }
@keyframes apsScrollInvitation {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
/* The phone header is in document flow. Keep the invitation and CTAs in
   the visible part of the opening stage, above browser chrome. */
@media (max-width: 1100px) {
  html.aps-responsive body #aps-main [data-hero-film-copy] {
    bottom: var(--aps-hero-entry-offset, 0px) !important;
    padding-bottom: max(104px, calc(env(safe-area-inset-bottom, 0px) + 88px)) !important;
  }
}
@media (pointer: coarse) {
  .aps-hero-scroll-cue__desktop { display: none; }
  .aps-hero-scroll-cue__touch { display: inline; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .aps-hero-scroll-cue {
    left: auto;
    right: max(24px, env(safe-area-inset-right, 0px));
    transform: none;
    padding-inline: 16px;
    font-size: 14px;
  }
  html.aps-responsive body #aps-main [data-hero-film-copy] {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width: 600px) and (max-height: 540px) and (orientation: landscape) {
  .aps-hero-scroll-cue { top: 16px; }
}
/* Short portrait windows must fit both calls to action on one row, so
   the opening heading stays below the navigation and above the invitation. */
@media (max-width: 600px) and (max-height: 540px) and (orientation: portrait) {
  html.aps-responsive body #aps-main [data-hero-film-copy] {
    padding-top: 16px !important;
    padding-bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px)) !important;
  }
  html.aps-responsive body #aps-main [data-hero-copy-actions] {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  html.aps-responsive body #aps-main [data-hero-copy-actions] > a {
    min-height: 48px;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
}
@media (min-width: 2000px) and (min-height: 800px) {
  .aps-hero-scroll-cue {
    font-size: clamp(16px, .9vw, 28px);
    min-height: 2.8em;
    top: auto;
    bottom: max(32px, 4svh);
    padding: .65em 1.4em;
  }
  .aps-hero-scroll-cue svg { width: 1.2em; height: 1.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .aps-hero-scroll-cue { transition: none; }
  .aps-hero-scroll-cue svg { animation: none; }
}