Compare Row

<!-- Compare Row — rows highlight on hover, ✓ in accent / – in muted -->
<table class="nuda-cmprow">
  <thead><tr><th></th><th>Free</th><th>Pro</th></tr></thead>
  <tbody>
    <tr>
      <td>API access</td>
      <td class="is-yes">
        <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>
      </td>
      <td class="is-yes">
        <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>
      </td>
    </tr>
    <tr>
      <td>SSO</td>
      <td class="is-no">—</td>
      <td class="is-yes"><!-- check svg --></td>
    </tr>
    <!-- ...more rows -->
  </tbody>
</table>

/* Compare Row
   Feature comparison rows that brighten on hover.
   Customize: --cmp-accent */

.nuda-cmprow {
  --cmp-accent: #e4ff54;
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
}

.nuda-cmprow tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s;
}

.nuda-cmprow tr:hover { background: rgba(228, 255, 84, 0.04); }

.nuda-cmprow td {
  padding: 10px 14px;
  color: #fafafa;
}

.nuda-cmprow td:first-child { color: #a1a1aa; }

.nuda-cmprow td:not(:first-child) {
  text-align: center;
  width: 80px;
}

.nuda-cmprow .is-yes { color: var(--cmp-accent); }

.nuda-cmprow .is-yes svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.nuda-cmprow .is-no {
  color: #63636e;
  font-weight: 700;
}