/* Keep decorative layers inside the viewport without changing their treatment. */
.hero .glow {
  width: min(760px, 100vw);
  height: min(760px, 100vw);
  right: 0;
}

.hero .hero-mark {
  right: clamp(20px, 3vw, 44px);
  width: min(530px, calc(100% - 40px));
}

.cta .cta-orbit {
  width: min(720px, calc(100vw - 40px));
  height: min(720px, calc(100vw - 40px));
}

@media (min-width: 701px) and (max-width: 900px) {
  .header {
    padding-inline: 24px;
  }

  .nav {
    gap: 16px;
    font-size: 16px;
  }

  .nav-cta {
    padding: 12px 14px;
  }
}

@media (max-width: 700px) {
  .hero .hero-mark {
    width: min(380px, calc(100% - 40px));
  }
}