.apph-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--apph-height, 440px);
  overflow: visible;
}

.apph-header {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--apph-background-color, #11111d);
  isolation: isolate;
}

.apph-header--bottom-slant.apph-header--slant-rise-right {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--apph-bottom-slant-height, 36px)), 0 100%);
}

.apph-header--bottom-slant.apph-header--slant-rise-left {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--apph-bottom-slant-height, 36px)));
}

.apph-header::before,
.apph-header::after {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  content: "";
  pointer-events: none;
}

.apph-header::before {
  top: 0;
  height: 12.5%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, .78) 20%,
    rgba(0, 0, 0, .5) 45%,
    rgba(0, 0, 0, .26) 68%,
    rgba(0, 0, 0, .09) 86%,
    rgba(0, 0, 0, 0) 100%
  );
}

.apph-header::after {
  bottom: 0;
  height: 25%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, .78) 20%,
    rgba(0, 0, 0, .5) 45%,
    rgba(0, 0, 0, .26) 68%,
    rgba(0, 0, 0, .09) 86%,
    rgba(0, 0, 0, 0) 100%
  );
}

.apph-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--apph-background-color, #11111d);
}

.apph-background__track,
.apph-background__slide {
  width: 100%;
  height: 100%;
}

.apph-background__slide {
  background-position: var(--apph-background-position, center center);
  background-repeat: no-repeat;
  background-size: cover;
}

.apph-header--load .apph-background__slide {
  position: absolute;
  inset: 0;
}

.apph-header--fade .apph-background__track {
  position: relative;
}

.apph-header--fade .apph-background__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}

.apph-header--fade .apph-background__slide.is-active {
  opacity: 1;
}

.apph-header--slider .apph-background__track {
  display: flex;
  will-change: transform;
}

.apph-header--slider .apph-background__slide {
  flex: 0 0 100%;
}

.apph-header__inner {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 40px), var(--apph-inner-width, 1200px));
  height: 100%;
  margin: 0 auto;
  overflow: visible;
}

.apph-overlays--outer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.apph-overlays--inner {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(calc(100% - 40px), var(--apph-inner-width, 1200px));
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.apph-logo-layer {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  display: flex;
  width: min(calc(100% - 40px), var(--apph-inner-width, 1200px));
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.apph-logo-layer--x-left { justify-content: flex-start; }
.apph-logo-layer--x-center { justify-content: center; }
.apph-logo-layer--x-right { justify-content: flex-end; }
.apph-logo-layer--y-top { align-items: flex-start; }
.apph-logo-layer--y-center { align-items: center; }
.apph-logo-layer--y-bottom { align-items: flex-end; }

.apph-logo {
  display: block;
  flex: 0 0 auto;
  width: var(--apph-logo-width, auto);
  max-width: none;
  height: auto;
  transform: translate(var(--apph-logo-x, 0px), var(--apph-logo-y, 0px));
  user-select: none;
}

.apph-overlay {
  position: absolute;
  z-index: 2;
  display: block;
  width: var(--apph-overlay-width, auto);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.apph-overlay--mobile {
  display: none;
}

.apph-overlays--inner > .apph-overlay {
  z-index: 3;
}

.apph-overlay--top-left {
  top: var(--apph-overlay-y, 0px);
  left: var(--apph-overlay-x, 0px);
}

.apph-overlay--top-right {
  top: var(--apph-overlay-y, 0px);
  right: var(--apph-overlay-x, 0px);
}

.apph-overlay--bottom-right {
  right: var(--apph-overlay-x, 0px);
  bottom: var(--apph-overlay-y, 0px);
}

.apph-overlay--bottom-left {
  bottom: var(--apph-overlay-y, 0px);
  left: var(--apph-overlay-x, 0px);
}

.apph-tagline {
  position: absolute;
  z-index: 5;
  right: 0;
  left: 0;
  box-sizing: border-box;
  padding: var(--apph-tagline-padding, 12px 20px);
  background: var(--apph-tagline-background, transparent);
  color: var(--apph-tagline-color, #fff);
  line-height: 1.35;
  text-align: var(--apph-tagline-align, center);
}

.apph-tagline--top { top: 0; }
.apph-tagline--bottom { bottom: 0; }

@media (max-width: 980px) {
  .apph-stage { height: var(--apph-mobile-height, 280px); }
  .apph-header__inner,
  .apph-overlays--inner,
  .apph-logo-layer { width: min(calc(100% - 28px), var(--apph-inner-width, 1200px)); }
  .apph-logo { max-width: var(--apph-logo-mobile-max-width, 100%); }
  .apph-tagline {
    width: var(--apph-tagline-mobile-max-width, 100%);
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    transform: none;
  }
  .apph-tagline--align-left {
    right: auto;
    left: 0;
  }
  .apph-tagline--align-center {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
  }
  .apph-tagline--align-right {
    right: 0;
    left: auto;
  }
  .apph-overlay--desktop.has-mobile-alternative {
    display: none;
  }
  .apph-overlay--mobile {
    display: block;
  }
  .apph-overlays > .apph-overlay {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .apph-overlays--outer > .apph-overlay {
    transform: scale(var(--apph-mobile-height-scale, 1));
  }
  .apph-overlays > .apph-overlay-mobile--top-left {
    top: var(--apph-overlay-mobile-y, var(--apph-overlay-y, 0px));
    left: var(--apph-overlay-mobile-x, var(--apph-overlay-x, 0px));
    transform-origin: top left;
  }
  .apph-overlays > .apph-overlay-mobile--top-right {
    top: var(--apph-overlay-mobile-y, var(--apph-overlay-y, 0px));
    right: var(--apph-overlay-mobile-x, var(--apph-overlay-x, 0px));
    transform-origin: top right;
  }
  .apph-overlays > .apph-overlay-mobile--bottom-right {
    right: var(--apph-overlay-mobile-x, var(--apph-overlay-x, 0px));
    bottom: var(--apph-overlay-mobile-y, var(--apph-overlay-y, 0px));
    transform-origin: bottom right;
  }
  .apph-overlays > .apph-overlay-mobile--bottom-left {
    bottom: var(--apph-overlay-mobile-y, var(--apph-overlay-y, 0px));
    left: var(--apph-overlay-mobile-x, var(--apph-overlay-x, 0px));
    transform-origin: bottom left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apph-header--fade .apph-background__slide,
  .apph-header--slider .apph-background__track {
    transition: none !important;
  }
}