/* ─────────────────────────────────────────────
   Convert Comparison table — feature rows, highlighted Convert column.
   Use with tokens.css + Phosphor (ph-check / ph-x cells).
   ───────────────────────────────────────────── */

.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body); }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border-cream); }
.cmp thead th { font-weight: 600; color: var(--color-text-primary); border-bottom: 2px solid var(--color-ink-300); }
.cmp tbody .cmp__feature { color: var(--color-text-secondary); font-weight: 500; }
.cmp td { color: var(--color-text-secondary); }

/* Highlighted Convert column */
.cmp th.cmp__convert, .cmp td.cmp__convert {
  background: var(--color-surface-cream);
  text-align: center;
  border-left: 1px solid var(--color-border-cream);
  border-right: 1px solid var(--color-border-cream);
}
.cmp thead th.cmp__convert { color: var(--color-violet-700); }
.cmp th.cmp__other, .cmp td.cmp__other { text-align: center; }

/* Marks */
.cmp .ph-check { color: var(--color-green-600); font-size: 20px; }
.cmp .ph-x { color: var(--color-ink-500); font-size: 20px; }
/* Round the highlighted column's top/bottom */
.cmp tbody tr:last-child td { border-bottom: none; }