/* Compare page: the three-column "at a glance" table and its call to action.
   Tokens only; the dark pair follows the same pattern as site.css. Rows stack under 640px via .extra-table and data-label. */
.v2-table caption { text-align: start; }
.v2-table tbody th { width: 22%; }
.v2-table td { width: 26%; overflow-wrap: anywhere; }
.v2-table td.own { background: var(--green-soft); color: var(--ink); font-weight: 600; }
.v2-table thead th:nth-child(2) { color: var(--green); }
.v2-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.v2-cta p { margin: 0; color: var(--ink); font-weight: 500; flex: 1 1 260px; }
.v2-cta .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.v2-cta .cta .pill { white-space: normal; text-align: center; }
@media (max-width: 640px) {
  .v2-table tbody th { width: auto; }
  .v2-table td { width: auto; }
  .v2-table td.own { background: none; }
  .v2-table td::before { display: block; margin-bottom: 2px; }
  .v2-cta { padding: 16px; }
  .v2-cta .cta { width: 100%; }
  .v2-cta .cta .pill { flex: 1 1 100%; }
}