@layer components {
  .fixed-cta {
    position: fixed;
    z-index: 300;
    inset-block-end: max(3cqi, calc(env(safe-area-inset-bottom) + 2cqi));
    inset-inline-start: 50%;
    display: block;
    inline-size: 88cqi;
    aspect-ratio: 704 / 180;
    transform: translateX(-50%);
    border-radius: var(--radius-full);
    filter: drop-shadow(0 2cqi 3cqi oklch(0 0 0 / 0.22));
    transition:
      transform 180ms ease,
      filter 180ms ease,
      opacity 160ms ease;
  }

  .fixed-cta:hover {
    transform: translateX(-50%) translateY(-0.75cqi);
    filter: drop-shadow(0 2.5cqi 3.5cqi oklch(0 0 0 / 0.26));
  }

  .fixed-cta:active {
    transform: translateX(-50%) translateY(0);
    opacity: 0.86;
  }

  .fixed-cta:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 0.75cqi;
  }

  .fixed-cta__image {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: contain;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .fixed-cta {
      transition: opacity 160ms ease;
    }

    .fixed-cta:hover,
    .fixed-cta:active {
      transform: translateX(-50%);
    }
  }
}