Feature List

<!-- Feature List — staggered fade-in + check draw -->
<ul class="nuda-flist">
  <li style="--d: 0s">
    <span class="nuda-flist__check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
    </span>
    Unlimited projects
  </li>
  <!-- ...more <li> with --d: .1s, .2s, etc. -->
  <li class="is-disabled" style="--d: .3s">
    <span class="nuda-flist__check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 6 L18 18" /><path d="M18 6 L6 18" />
      </svg>
    </span>
    SSO / SAML
  </li>
</ul>

/* Feature List
   Each row fades up; check icon draws after.
   Customize: --fl-accent */

.nuda-flist {
  --fl-accent: #e4ff54;
  list-style: none;
  padding: 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.nuda-flist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  animation: nuda-fl-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) backwards;
}

.nuda-flist li.is-disabled { color: #63636e; }

.nuda-flist__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(228, 255, 84, 0.15);
  color: var(--fl-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.nuda-flist li.is-disabled .nuda-flist__check {
  background: rgba(255, 255, 255, 0.06);
  color: #63636e;
}

.nuda-flist__check svg {
  width: 11px;
  height: 11px;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: nuda-fl-draw 0.4s ease-out var(--d, 0s) forwards;
  animation-delay: calc(var(--d, 0s) + 0.15s);
}

@keyframes nuda-fl-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nuda-fl-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-flist li,
  .nuda-flist__check svg { animation: none; stroke-dashoffset: 0; }
}