Best Value

<!-- Best Value Highlight — animated rainbow border around a content card -->
<div class="nuda-bestv">
  <div class="nuda-bestv__bg"></div>
  <div class="nuda-bestv__inner">
    <span class="nuda-bestv__tag">Best value</span>
    <span class="nuda-bestv__name">Team</span>
    <div class="nuda-bestv__price">$49<i>/mo</i></div>
  </div>
</div>

/* Best Value Highlight
   Conic-gradient ring rotates around an opaque inner card.
   Customize: --bv-bg (inner), gradient stops on .nuda-bestv__bg */

.nuda-bestv {
  --bv-bg: rgba(15, 15, 17, 0.95);
  position: relative;
  width: 100%;
  max-width: 240px;
  padding: 2px;
  border-radius: 14px;
  overflow: hidden;
}

.nuda-bestv__bg {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    #e4ff54,
    #a78bfa,
    #fb7185,
    #38bdf8,
    #e4ff54
  );
  animation: nuda-bv-rot 4s linear infinite;
}

.nuda-bestv__inner {
  position: relative;
  background: var(--bv-bg);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
}

.nuda-bestv__tag {
  font: 800 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #e4ff54;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nuda-bestv__name {
  font: 700 1.25rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  letter-spacing: -0.02em;
}

.nuda-bestv__price {
  font: 800 1.5rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-bestv__price i {
  font-size: 0.7rem;
  font-style: normal;
  color: #a1a1aa;
  font-weight: 500;
  margin-left: 2px;
}

@keyframes nuda-bv-rot { to { transform: rotate(360deg); } }

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