.hero {
  margin-bottom: 4rem;
}

.hero__card {
  margin: 0 auto;
  max-width: 42rem;
  padding: 1.75rem;
  border-radius: var(--radius-2xl);
  background: var(--color-forest);
  color: var(--color-white);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.hero__eyebrow {
  margin-bottom: 0.75rem;
  color: var(--color-hero-eyebrow);
  font-family: var(--font-display);
}

.hero__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero__body {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.75rem;
  color: var(--color-hero-body);
}

.hero__cta {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-button);
  background: var(--color-hero-cta);
  color: var(--color-hero-cta-text);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease;
}

.hero__cta:hover {
  background: var(--color-white);
  color: var(--color-forest);
}