@keyframes cardEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes choicePulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.4); }
  100% { box-shadow: 0 0 0 10px rgba(201, 162, 75, 0); }
}

#onboarding-slide > * { animation: cardEnter var(--transition-base) both; }

.onboarding-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: min(100%, 440px);
  margin-block: var(--space-5);
}

.stage-card {
  min-height: 78px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: 600 0.95rem var(--font-body);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.stage-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.stage-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.stage-card.selected { background: var(--color-success-light); border: 2px solid var(--color-primary); animation: choicePulse 500ms ease-out; }

@media (max-width: 360px) {
  .onboarding-stage-grid { grid-template-columns: 1fr; }
}