/* Demo and Benchmark hero: one image floating over the ellipse, copy
   centred underneath (Figma "Frame 12" at y 238, 432 wide). */
/* Padding, not a margin on the copy: a child's top margin would collapse
   through the hero and drag the stage down with it. */
.hero--centered {
  min-height: 0;
  padding-top: calc(238px * var(--stage-scale));
  text-align: center;
}

.hero--centered .hero__copy {
  width: 432px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0;
}

.hero--centered .hero__title {
  font-weight: 600;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.hero--centered .hero__sub { margin: 8px auto 0; }
.hero--centered .hero__cta { margin: 32px auto 0; }
.hero--centered .hero__float { transform-origin: 50% 30%; }

.hero--centered .fx-ellipse {
  left: -20px;
  top: 195.4px;
}

.fx-solo { --depth: -12; }

.fx-solo--robot {
  left: 440px;
  top: 44px;
  width: 158px;
  height: 168px;
}

/* Figma: mirrored, Linear burn (multiply here, as on the home page). */
.fx-solo--caller {
  left: 415px;
  top: 6px;
  width: 242px;
  height: 232.5px;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
}

@media (max-width: 900px) {
  .hero--centered .hero__stage-wrap {
    --stage-crop-x: 300;
    --stage-visible: 472;
    position: absolute;
    inset: 0;
    height: auto;
    margin-top: 0;
  }

  .hero--centered .hero__cta { margin-top: 32px; }
  .hero--centered .hero__float { transform-origin: 50% 30%; }
}

@media (max-width: 600px) {
  .hero--centered .hero__title { font-size: 28px; }
}