/* Small, one-time flourishes around the existing artwork. */
.package { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .package:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 12px 22px rgb(0 0 0 / 10%); }
  .package:nth-child(2):hover { transform: translateY(-5px) rotate(.3deg); }
}
.package:focus-within { box-shadow: 0 0 0 3px var(--ink), 0 10px 20px rgb(0 0 0 / 8%); }
.package-pick .package-art { transition: transform 140ms ease-out; }
.package-pick:active .package-art { transform: scale(.975); }
.hero-copy h3:nth-child(9).underline-ready {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 3px;
  padding-bottom: 9px;
  margin-bottom: 19px;
}
.hero-copy h3:nth-child(9).underline-ready.motion-revealed { animation: draw-underline 650ms ease-out both; }
.chart-animation { position: relative; }
.chart-animation .chart { width: 100%; }
.chart-bars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.faq-items details { box-sizing: border-box; }
@keyframes draw-underline { to { background-size: 100% 3px; } }
@keyframes reveal-chart { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .package, .package-pick .package-art { transition: none; }
  .package:hover, .package:nth-child(2):hover, .package-pick:active .package-art { transform: none; }
  .hero-copy h3:nth-child(9).underline-ready { animation: none; background-size: 100% 3px; }
  .chart.motion-pending, .chart.motion-revealed { animation: none; clip-path: none; }
}