/* ---------------------------------------------------------------------
   index.html-only styles.
   ------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%);
}

.hero__inner {
  max-width: var(--container-narrow);
  text-align: center;
  margin-inline: auto;
}

.hero__title {
  margin-top: var(--space-2);
  font-family: var(--font-serif-display);
  font-size: var(--text-2xl);
}

.hero__lede {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}