/* Landing-only static mode. Keep layout transforms used by arrows and artwork. */
html.landing-static {
  scroll-behavior: auto;
}

.landing-static *,
.landing-static *::before,
.landing-static *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  will-change: auto !important;
  --parallax-x: 0px !important;
  --parallax-y: 0px !important;
  --parallax-rotate: 0deg !important;
}

.landing-static .page-progress,
.landing-static .hero__start-badge::after {
  display: none;
}

.landing-static .reveal,
.landing-static .stack-list--model p,
.landing-static .format-item.is-under-sticky {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Remove scroll-pinning and the extra runway needed by the card entrance. */
.landing-static .model {
  min-height: 0;
  padding: clamp(72px, 9vh, 114px) 0 36px;
}

.landing-static .model__grid {
  position: relative;
  top: auto;
  min-height: 0;
  padding-block: 0;
}

.landing-static .formats__sticky,
.landing-static .not-for .formats__title,
.landing-static .not-for .format-item--plain {
  position: static;
}

/* Hover and dialog offsets are motion; structural centering stays intact. */
.landing-static .button:hover,
.landing-static .header-link:hover,
.landing-static .header-about:hover,
.landing-static .hero__about:hover,
.landing-static .site-footer__telegram:hover,
.landing-static .site-footer__links a:hover,
.landing-static .cookie-consent__button:hover,
.landing-static .checkout-modal__dialog,
.landing-static .about-modal__dialog {
  transform: none;
}

.landing-static .cutout-square::before,
.landing-static .promise-underlay {
  background-attachment: scroll;
}

/* The preceding #intro has z-index: 2 and allows its large square to overflow.
   Raise this whole section above it; raising children alone cannot escape
   their section's stacking context. Keep the background transparent. */
.landing-static .quiet-flow .intro--promise {
  z-index: 3;
}

/* This section's cutout must stay below the copy at every viewport width. */
.landing-static .intro--promise > .cutout-square {
  z-index: 0;
}

.landing-static .intro--promise > .container {
  position: relative;
  z-index: 4;
}

.landing-static .intro--promise .intro__sublead {
  position: relative;
  z-index: 1;
  color: var(--ink);
  opacity: 1;
}

/* On narrow screens keep decoration below the complete text layer.
   Opaque copy avoids the changing contrast of translucent text over artwork. */
@media (max-width: 980px) {
  .landing-static main .container {
    position: relative;
    z-index: 1;
  }

  .landing-static .square,
  .landing-static .cutout-square {
    z-index: 0;
    pointer-events: none;
  }

  .landing-static .intro__sublead {
    color: var(--ink);
  }

  .landing-static .course-mark {
    color: #523d2a;
  }
}