/* Closing keeps its own editorial typography, button and CSS glow. */
.landing-v9 .landing-closing__title {
  margin: 0;
  color: var(--color-text);
  font: 400 64px / 64px var(--font-brand);
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: uppercase;
}

.landing-v9 .landing-closing__title > span {
  display: block;
}

.landing-v9 .landing-closing__outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
}

.landing-v9 .landing-closing__solid {
  color: var(--landing-closing-ink);
}

.landing-v9 .landing-closing__location {
  color: #000;
  font: 400 20px / 20px var(--font-sans);
  text-align: center;
  text-transform: uppercase;
}

.landing-v9 .landing-closing__signup {
  min-height: 38px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--landing-closing-button);
  color: var(--color-text-inverse);
  font: 400 14px / 20px var(--font-name);
}

.landing-v9 .landing-closing__signup:focus-visible {
  outline-offset: 2px;
}

.landing-v9 .landing-closing__signature {
  margin: 0;
  color: rgba(0, 0, 0, 0.55);
  font: 400 44px / 46px var(--font-brand);
}

.landing-v9 .landing-closing__copyright {
  color: rgba(28, 31, 28, 0.75);
  font: 400 14px / 14px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fade only the artwork before the section's overflow boundary clips it.
   This stationary layer spans the section, independent of the moving artwork. */
.landing-v9 .landing-closing__glow-viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.16) 20px,
      rgba(0, 0, 0, 0.5) 40px, rgba(0, 0, 0, 0.84) 60px, #000 80px,
      #000 calc(100% - 80px), rgba(0, 0, 0, 0.84) calc(100% - 60px),
      rgba(0, 0, 0, 0.5) calc(100% - 40px), rgba(0, 0, 0, 0.16) calc(100% - 20px), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.16) 20px,
      rgba(0, 0, 0, 0.5) 40px, rgba(0, 0, 0, 0.84) 60px, #000 80px,
      #000 calc(100% - 80px), rgba(0, 0, 0, 0.84) calc(100% - 60px),
      rgba(0, 0, 0, 0.5) calc(100% - 40px), rgba(0, 0, 0, 0.16) calc(100% - 20px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.landing-v9 .landing-closing__glow-frame {
  height: 100%;
}

.landing-v9 .landing-closing__glow {
  /* Tracking is independent of the original gradient centers below. */
  --landing-closing-glow-track-x: 22.5%;
  --landing-closing-glow-track-y: 86%;
  --landing-closing-glow-focus-x: 34%;
  --landing-closing-glow-focus-y: 70%;
  pointer-events: none;
}

.landing-v9 .landing-closing__glow::before,
.landing-v9 .landing-closing__glow::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--landing-closing-glow-width, 617px);
  height: calc(var(--landing-closing-glow-width, 617px) * 671 / 617);
  content: "";
  filter: blur(14px);
  transform: translate(-50%, -50%);
  /* Feather each finite paint surface after blur, without relocating gradients. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.landing-v9 .landing-closing__glow::before {
  background:
    radial-gradient(ellipse 25% 23% at 26% 59%,
      rgba(255, 243, 135, 0.7) 0%,
      rgba(255, 243, 135, 0.4) 42%,
      rgba(255, 246, 170, 0.12) 72%,
      transparent 100%),
    radial-gradient(ellipse 25% 14% at 49% 86%,
      rgba(255, 239, 89, 0.85) 0%,
      rgba(255, 239, 89, 0.5) 42%,
      transparent 100%),
    radial-gradient(ellipse 37% 31% at var(--landing-closing-glow-focus-x) var(--landing-closing-glow-focus-y),
      rgba(255, 214, 64, 0.92) 0%,
      rgba(255, 225, 65, 0.88) 38%,
      rgba(255, 232, 94, 0.6) 62%,
      rgba(255, 242, 130, 0.18) 82%,
      transparent 100%);
}

.landing-v9 .landing-closing__glow::after {
  background: radial-gradient(ellipse 22% 17% at 22.5% 86%,
    rgba(242, 132, 116, 0.8) 0%,
    rgba(242, 132, 116, 0.72) 35%,
    rgba(244, 143, 121, 0.32) 65%,
    transparent 100%);
}

.landing-v9 .landing-closing__bar {
  position: absolute;
  display: block;
}

.landing-v9 .landing-closing__bar--1 {
  background: var(--landing-closing-bar-one);
}

.landing-v9 :is(.landing-closing__bar--2, .landing-closing__bar--3) {
  background: var(--landing-closing-bar-two);
}

.landing-v9 .landing-closing__bar--3 {
  opacity: 0.74;
}

.landing-v9 :is(.landing-closing__bar--4, .landing-closing__bar--5) {
  background: var(--landing-closing-bar-three);
}

.landing-v9 .landing-closing__bar--6 {
  background: var(--landing-closing-bar-four);
}

@media (hover: hover) {
  .landing-v9 .landing-closing__signup:hover {
    background: var(--landing-closing-button);
    filter: brightness(0.94);
  }
}

@media (max-width: 1023px) {
  .landing-v9 .landing-closing__title {
    font-size: 48px;
    line-height: 48px;
  }
}

@media (max-width: 639px) {
  .landing-v9 .landing-closing__title {
    font-size: 36px;
    line-height: 36px;
  }
}