/* ==========================================================================
   MobileCta (.mobile-cta) — transcribed verbatim from
   docs/research/css/index.f9761eab.pretty.css (lines 6688-6726)
   ========================================================================== */

.mobile-cta {
  width: 100%;
  padding: 0 var(--grid-gutter-width);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  background-color: #0000;
  justify-content: center;
  transition:
    opacity 0.25s linear,
    visibility 0.25s step-end;
  display: flex;
  position: relative;
  left: 0;
}

/* The desktop mock-nav pill replaces this bar at >= 1020px. */
@media (width >= 1020px) {
  .mobile-cta {
    display: none;
  }
}

.mobile-cta--is-sticky {
  position: fixed;
  bottom: 16px;
}

.mobile-cta--is-visible {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.25s linear,
    visibility 0.25s step-start;
}

.mobile-cta__link {
  text-align: center;
  width: 100%;
  transition:
    background-color 0.2s linear,
    color 0.2s linear;
}

/* Language-gated variants: the `ja`/`ko` copy is hidden on every other locale
   (this page is `html[lang="de"]`, so only the first link renders). */
html:not([lang^="ja"]) .mobile-cta__link[data-lang-code="ja"],
html[lang^="ja"] .mobile-cta__link:not([data-lang-code="ja"]),
html:not([lang^="ko"]) .mobile-cta__link[data-lang-code="ko"],
html[lang^="ko"] .mobile-cta__link:not([data-lang-code="ko"]) {
  display: none;
}

.mobile-cta__inner {
  width: 100%;
}

.mobile-cta__sticky-spacer {
  height: var(--height);
}

.mobile-cta__sticky-spacer--is-hidden {
  display: none;
}

/* The sentinel marks where the sticky bar should let go — 16px below the
   spacer, matching the bar's own `bottom: 16px` inset.
 *
 * That offset was a `margin-top` on a zero-height element. As the last in-flow
 * child, with no padding or border beneath it, the margin COLLAPSED OUT of its
 * ancestors: the black `.page-dark` wrapper closed 16px above the sentinel, so
 * a 16px band of white body showed between the closing CTA and the footer.
 *
 * Expressed as height instead, the box occupies the same 16px inside its
 * parent — the wrapper now extends over it — and the sentinel's bottom edge,
 * which is what the observer keys on, stays exactly where it was. */
.mobile-cta__sticky-ref {
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta,
  .mobile-cta--is-visible,
  .mobile-cta__link {
    transition: none;
  }
}