Price Morph

<!-- Price Morph — re-render the inner block on plan switch to retrigger animation -->
<div class="nuda-pmorph">
  <div class="nuda-pmorph__price">
    <b>$29</b><i>/mo</i>
  </div>
  <div class="nuda-pmorph__bill">Billed yearly</div>
</div>

/* Price Morph
   Pop-in animation tuned for swapping the visible price (e.g. monthly→yearly).
   Customize: --pm-accent */

.nuda-pmorph {
  --pm-accent: #e4ff54;
  padding: 16px 20px;
  width: 100%;
  max-width: 240px;
}

.nuda-pmorph__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  animation: nuda-pm-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nuda-pmorph__price b {
  font: 800 3rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, #fafafa, var(--pm-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nuda-pmorph__price i {
  font: 500 1rem ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  color: #a1a1aa;
}

.nuda-pmorph__bill {
  font: 600 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: var(--pm-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  animation: nuda-pm-fade 0.4s ease 0.15s backwards;
}

@keyframes nuda-pm-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nuda-pm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pmorph__price,
  .nuda-pmorph__bill { animation: none; }
}