/*
  hero.css
  Page hero around the card stack. The stack itself lives in card-stack.css.
*/

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  justify-content: center;
  padding-top: var(--header-offset);
  text-align: center;
  background: transparent;
}

[data-theme="dark"] .hero::before {
  content: none;
  background: transparent;
}

.hero-glow {
  position: absolute;
  width: min(553px, 90vw);
  height: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 64rem;
}

.hero-copy .lede {
  max-width: none;
}