:root {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
}

.hero {
  background: radial-gradient(ellipse at 55% 70%, #eef6ef 0, #f8faf7 72%);
}

.hero-layout {
  gap: 24px;
}

.hero h1 {
  font-size: clamp(45px, 6.25vw, 90px);
  font-weight: 520;
  letter-spacing: -.045em;
  line-height: 1.12;
}

.hero-layout > p:not(.eyebrow) {
  max-width: 490px;
  line-height: 1.75;
}

.hero-layout > * {
  animation-duration: 1.1s;
  animation-timing-function: var(--motion-ease);
}

.hero-orbits {
  stroke-opacity: .17;
}

.hero-ribbon {
  opacity: .56;
}

.hero-capabilities {
  border-color: #dbe7de;
  padding-top: 27px;
  gap: clamp(28px, 4.2vw, 66px);
}

.hero-capabilities p {
  gap: 7px;
}

.hero-capabilities strong {
  font-weight: 560;
}

.launch-scene {
  background: #f8faf7;
}

.launch-scene[data-cinematic] {
  height: max(1320px, 226svh);
}

.launch-stage {
  background: radial-gradient(ellipse at 50% 49%, #f0f7f1 0, #f8faf7 72%);
}

.launch-ribbons {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ribbon-volume {
  transform-origin: 50% 50%;
  transform: rotate(calc((var(--tunnel-scale, 1) - 1) * -16deg)) scale(calc(.91 + var(--tunnel-opacity, 1) * .1));
}

.launch-path-point {
  transform-origin: 600px 360px;
  transform: rotate(calc(var(--tunnel-opacity, 0) * 150deg));
  opacity: .65;
}

.launch-field {
  stroke: #74a28b;
  mask-image: radial-gradient(ellipse at center, #000 0, #0008 40%, transparent 76%);
}

.launch-orbit {
  opacity: calc(var(--orbit-opacity, 0) * .17);
}

.launch-tunnel {
  opacity: calc(var(--tunnel-opacity, 1) * .075);
}

.launch-core {
  width: 8px;
  background: #5bac85;
  box-shadow: 0 0 20px 5px #d2eadb;
}

.launch-copy h2,
[data-cinematic] .launch-lead {
  font-size: clamp(39px, 5.1vw, 73px);
  font-weight: 510;
  letter-spacing: -.04em;
  line-height: 1.18;
}

.launch-prompt {
  margin-top: 7px;
  padding-block: 12px;
  min-height: 62px;
  border-color: #d4e3d9;
  box-shadow: 0 13px 35px -25px #32664a55;
  background: #ffffffde;
  backdrop-filter: blur(14px);
}

.launch-caption {
  margin-top: 18px;
}

.launch-prompt-text {
  position: relative;
  flex: 1;
  min-width: 0;
}

[data-cinematic] .launch-prompt .launch-prompt-text,
[data-cinematic] .launch-prompt .launch-prompt-text > span {
  clip-path: none;
}

.launch-prompt-reserved {
  display: block;
  opacity: 0;
}

.launch-prompt-typed {
  position: absolute;
  inset: 0;
}

.launch-prompt-text[data-typing] .launch-prompt-typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.1em;
  background: #498c69;
}

.launch-skip {
  font-size: 12px;
  color: #47735b;
  opacity: .8;
}

.product-viewport {
  position: relative;
}

.product-crossfade-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

[data-reveal] {
  transition-duration: .8s;
  transition-timing-function: var(--motion-ease);
}

[data-reveal].awaiting-reveal:not(:focus-within) {
  transform: translateY(16px);
}

.button,
.text-link,
.segmented button,
.permission-options button {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

@media (max-width: 660px) {
  .hero-layout {
    gap: 19px;
  }

  .hero h1 {
    font-size: clamp(35px, 9.1vw, 56px);
    line-height: 1.17;
  }

  .hero-capabilities {
    gap: 18px;
    padding-top: 20px;
  }

  .hero-capabilities p {
    font-size: 12px;
  }

  .hero-capabilities span {
    font-size: 11px;
    line-height: 1.45;
  }

  .launch-scene[data-cinematic] {
    height: max(1040px, 194svh);
  }

  .launch-ribbons {
    opacity: .8;
  }

  .launch-copy h2,
  [data-cinematic] .launch-lead {
    font-size: clamp(33px, 8.6vw, 47px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-layout > * {
    animation: none;
  }

  [data-reveal].awaiting-reveal:not(:focus-within) {
    transform: none;
  }

  .ribbon-volume,
  .launch-path-point {
    transform: none;
  }
}