.card {
  background: var(--color-surface-secondary);
  padding: 3rem 3rem 3rem 3rem;
  border-radius: 2rem;
  border: 1.5px solid var(--color-border-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card > .heading {
  color: var(--color-text-tertiary);
}

.card > .content-primary {
  color: var(--color-text-primary);
}

.card > .content-secondary {
  color: var(--color-text-secondary);
}

.card > .content-tertiary {
  color: var(--color-text-tertiary);
}

.card-content-primary-subtle {
  color: var(--color-text-tertiary);
  font-size: var(--heading-s-size);
}

.card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.intro-card {
  background: var(--color-surface-primary);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.intro-headline {
  color: var(--color-text-primary)
}