@media (min-width: 701px) {
  /* Keep footer copy on its existing parallax path while the CTA can escape the hero. */
  .era-motion .hero-footer { transform: none; opacity: 1; }
  .era-motion .hero-footer > p,
  .era-motion .hero-footer > div {
    transform: translate3d(0, calc(var(--era-hero-p, 0) * -12vh), 0);
    opacity: calc(1 - var(--era-hero-p, 0) * .65);
  }
  .hero-footer > .hero-cta-placeholder {
    display: block;
    width: 160px;
    height: 160px;
    justify-self: center;
    pointer-events: none;
  }
  .era-motion .hero-footer > .hero-flying-cta {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 29;
    color: #fff;
    background: rgba(21, 35, 52, var(--dock-alpha, 0));
    transform-origin: top left;
    will-change: transform;
    transition: box-shadow .55s ease;
  }
  .era-motion .hero-footer > .hero-flying-cta:hover,
  .era-motion .hero-footer > .hero-flying-cta:focus-visible {
    --dock-hover-scale: 1.055;
    box-shadow: 0 12px 35px #092d3c44;
  }
  .era-motion .hero-footer > .hero-flying-cta.is-docked:hover,
  .era-motion .hero-footer > .hero-flying-cta.is-docked:focus-visible {
    background: #152334;
  }
  html.era-intro-pending .hero-flying-cta,
  html.era-intro-running .hero-flying-cta {
    opacity: var(--era-intro-ui, 0) !important;
  }
  body:has(#offer-dialog[open]) .hero-flying-cta { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .era-motion .hero-footer > p,
  .era-motion .hero-footer > div { transform: none !important; opacity: 1 !important; }
}