/* Beranda-specific polish to match DESIGN.md closely */

.homeHero {
  padding-top: 96px;
  padding-bottom: 96px;
}

.homeHero .displayHero {
  max-width: 16ch;
}

.homeHero .pill {
  text-transform: none;
}

.aboutGrid .imageSlot {
  min-height: 360px;
}

.topicGrid,
.goalGrid {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .topicGrid { grid-template-columns: repeat(3, 1fr); }
  .goalGrid { grid-template-columns: repeat(3, 1fr); }
}

.topicCard {
  border-radius: 24px;
  border: 1px solid var(--ink-200);
  background: var(--paper-0);
  box-shadow: var(--shadow-plate);
  padding: 22px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.topicCard:hover {
  transform: translateY(-2px);
}

.topicTitle {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.33;
  margin: 0;
}

.topicKicker {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--brand-600);
}

.topicBody {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.56;
  color: var(--ink-700);
}

@media (prefers-reduced-motion: reduce) {
  .topicCard { transition: none; }
}