/* Load after the Observatory styles. The hero becomes one shared scene:
   existing type in front, a much larger Earth extending beneath its edge. */
.hero .hero-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(600px, 50vw, 720px);
  padding-block: 48px 64px;
}

.hero .hero-copy {
  width: 58%;
  min-width: 0;
  isolation: isolate;
}

/* An ink scrim keeps the small copy and feedback legible while the heading
   reaches into the globe. It never sits above links or their focus rings. */
.hero .hero-copy::before {
  content: "";
  position: absolute;
  inset: -16px -48px -16px -16px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 46%, transparent 100%);
}

.hero .signal-stage {
  position: absolute;
  z-index: 0;
  inset: -40px 0 0 10%;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero #signal {
  /* Fade only the illustration, never the simulation disclosure. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}

/* Remove the old specimen frame so the globe reads as a background, not
   a second card. Keep the live field state and simulated-traffic caption. */
.hero .signal-stage::before,
.hero .orbital-rings,
.hero .stage-corner.top-left,
.hero .stage-coordinate {
  display: none;
}

.hero .stage-corner.top-right {
  top: 64px;
  right: 0;
}

.hero .specimen-tag {
  right: 0;
  bottom: 24px;
  max-width: 44%;
  text-align: right;
}

.hero .specimen-tag > .mono {
  color: var(--muted);
  font-size: 9px;
}

.hero .specimen-tag > span:last-child {
  color: var(--paper);
  font-size: 12px;
}

@media (min-width: 601px) and (max-width: 900px) {
  .hero .hero-grid {
    min-height: 580px;
    padding-block: 32px 80px;
  }

  .hero .hero-copy {
    width: 66%;
  }

  .hero .signal-stage {
    inset: -16px 0 0 4%;
  }

  .hero .specimen-tag {
    max-width: 54%;
  }
}

@media (max-width: 600px) {
  .hero .hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 24px;
  }

  .hero .hero-copy {
    width: 100%;
  }

  .hero .hero-copy::before {
    display: none;
  }

  /* Keep controls in normal flow at large text sizes. The Earth tucks under
     their trailing edge rather than competing with the narrow headline. */
  .hero .signal-stage {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: clamp(340px, 100vw, 520px);
    margin: -48px 0 0;
  }

  .hero #signal {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%);
    mask-image: linear-gradient(180deg, transparent, #000 26%);
  }

  .hero .stage-corner.top-right {
    display: none;
  }

  .hero .specimen-tag {
    right: 0;
    bottom: 0;
    max-width: 100%;
    gap: 4px;
  }
}