/* Hover interaction: scale slightly and change color without layout shift */

#plans .card {
  background-color: rgba(var(--brand-500-rgb), 0.8);
  color: white;
}

/* Apply transitions on the card element itself so scaling doesn't reflow text */
#plans .pricing-card .card {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms ease, box-shadow 220ms ease;
  transform-origin: center;
  will-change: transform, background-color, box-shadow;
}

/* Hover state: slightly larger, different background and soft shadow */
#plans .pricing-card .card:hover {
  transform: scale(1.035);
  background-color: var(--brand-600);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* Keep internal text layout stable (no wrapping) — scaling the card won't force linebreaks */
#plans .pricing-card .card .card-body {
  backface-visibility: hidden;
}

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  #plans .pricing-card .card {
    transition: none;
  }
  #plans .pricing-card .card:hover {
    transform: none;
    box-shadow: none;
  }
}