/* The supplied artwork already includes the endpoint illustration.
   Reserve the right side for the mascot; do not overlay the old console. */
.signal-page .signal-hero {
  --mascot-header-height: 82px;
  background-color: #090711;
}

.signal-page .signal-hero-art {
  top: var(--mascot-header-height);
}

.signal-page .signal-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: none;
  /* Scroll/parallax transforms would crop the antennae and the right ear. */
  transform: none !important;
}

.signal-page .signal-hero-art img:not([data-aimcode-mascot]) {
  visibility: hidden;
}

.signal-page .signal-hero-shade {
  top: var(--mascot-header-height);
  pointer-events: none;
  background:
    linear-gradient(90deg, #090711f5 0%, #090711e0 28%, #090711a3 43%, #09071100 66%),
    linear-gradient(0deg, #090711 0%, #09071100 12%);
}

.signal-page .signal-hero::after {
  display: none;
}

.signal-page .signal-route-console {
  display: none !important;
}

.signal-page .signal-hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.signal-page .signal-hero-copy {
  width: 100%;
  max-width: 650px;
}

.signal-page .signal-hero-title {
  font-size: clamp(68px, 7.8vw, 112px);
}

.signal-page .signal-hero-promise {
  font-size: clamp(32px, 3.1vw, 46px);
}

/* Tablet/phone: the art has its own uncluttered stage above the copy.
   Right anchoring preserves the full character rather than the empty left wall. */
@media (max-width: 1100px) {
  .signal-page .signal-hero {
    --mascot-stage-height: clamp(240px, 66vw, 440px);
  }

  .signal-page .signal-hero-art {
    height: var(--mascot-stage-height);
    bottom: auto;
  }

  .signal-page .signal-hero-shade {
    height: var(--mascot-stage-height);
    bottom: auto;
    background: linear-gradient(0deg, #090711 0%, #09071100 16%);
  }

  .signal-page .signal-hero-layout {
    display: block;
    padding-top: calc(var(--mascot-stage-height) + 24px) !important;
    padding-bottom: 36px !important;
  }

  .signal-page .signal-hero-copy {
    max-width: 720px;
    margin-inline: auto;
  }

  .signal-page .signal-hero-title {
    font-size: clamp(55px, 14vw, 92px);
  }

  .signal-page .signal-hero-promise {
    font-size: clamp(28px, 6vw, 42px);
  }
}