.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-12), 9vw, var(--space-24));
  background:
    radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--status-info-surface) 82%, transparent),
      transparent 40%
    ),
    radial-gradient(
      circle at 88% 72%,
      color-mix(in srgb, var(--surface-strong) 78%, transparent),
      transparent 42%
    ),
    var(--surface-page);
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--border-standard);
  content: '';
}

.heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26rem, 1.15fr);
  align-items: center;
  gap: clamp(var(--space-10), 7vw, var(--space-20));
}

.heroCopy {
  display: grid;
  gap: var(--space-5);
  min-inline-size: 0;
}

.heroCopy > p:last-of-type {
  max-inline-size: 58ch;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

.previewStage {
  position: relative;
  min-inline-size: 0;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
}

.previewStage::before {
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-md);
  content: '';
}

.previewStage::before {
  inset: 0;
  background: var(--surface-strong);
  transform: rotate(-2deg);
}

@media (max-width: 1023px) {
  .heroGrid {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 1.05fr);
    gap: var(--space-10);
  }
}

@media (max-width: 767px) {
  .heroGrid {
    grid-template-columns: 1fr;
  }

  .heroCopy {
    justify-items: start;
  }

  .heroActions,
  .heroActions > * {
    inline-size: 100%;
  }

  .previewStage {
    padding-inline: 0;
  }

  .previewStage::before {
    display: none;
  }
}

@media (max-width: 359px) {
  .hero {
    padding-block: var(--space-10);
  }
}

@media (forced-colors: active) {
  .previewStage::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .previewStage::before {
    transform: none;
  }
}
