/* Angler — 26 · compare. One table; the Angler column is a vellum strip with lake ticks,
   the other column carries muted crosses. Marks are pseudo-elements, so no icon markup. Tokens only. */

.vs__table { width: 100%; margin-top: 40px; border-collapse: collapse; }
.vs__table th, .vs__table td { padding: 18px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.vs__table thead th {
  padding-block: 14px; border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.vs__table thead th:not(:first-child), .vs__table td { width: 168px; text-align: center; }
.vs__table thead .vs__us {
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; text-transform: none; color: var(--ink);
}
.vs__table .vs__us { background: var(--vellum); }
.vs__table thead .vs__us { border-radius: var(--r-card) var(--r-card) 0 0; }
.vs__table tbody tr:last-child .vs__us { border-radius: 0 0 var(--r-card) var(--r-card); }

.vs__table tbody th { padding-left: 0; font-weight: 400; }
.vs__table tbody th b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.vs__table tbody th span { display: block; margin-top: 3px; max-width: 58ch; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

.vs__yes, .vs__no { display: inline-block; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; position: relative; }
.vs__yes { background: var(--lake); }
.vs__no  { border: 1.5px solid var(--line); }
.vs__yes::after, .vs__no::after { content: ""; position: absolute; inset: 0; margin: auto; }
.vs__yes::after { width: 10px; height: 6px; border: solid var(--paper); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.vs__no::after {
  width: 10px; height: 10px;
  background: linear-gradient(45deg, transparent 45%, var(--faint) 45% 55%, transparent 55%),
              linear-gradient(-45deg, transparent 45%, var(--faint) 45% 55%, transparent 55%);
}

@media (max-width: 720px) {
  .vs__table th, .vs__table td { padding: 14px 8px; }
  .vs__table thead th:not(:first-child), .vs__table td { width: 76px; }
  .vs__table thead th { font-size: 10px; letter-spacing: .03em; }
  .vs__table thead .vs__us { font-size: 1rem; }
  .vs__table tbody th span { font-size: 13.5px; }
}