/* Comparison section on pricing.html. Loaded after site.css. */
.jump { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.wins .card { display: flex; flex-direction: column; gap: 6px; }
.wins .big { font-size: 1.55rem; font-weight: 750; line-height: 1.15; color: var(--accent); margin: 0; }
.wins .card h3 { margin: 0; }
.pick { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 8px; padding: 0; list-style: none; }
.pick li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
section.alt .pick li { background: var(--bg); }
.pick b { display: block; }
.pick span { color: var(--muted); font-size: .95rem; }
.matchup { margin-top: 40px; }
.matchup h3 { font-size: 1.3rem; margin: 0 0 4px; }
.verdict { margin: 0 0 14px; color: var(--muted); max-width: 70ch; }
.verdict b { color: var(--text); }
table.vs { min-width: 560px; table-layout: fixed; }
table.vs th, table.vs td { padding: 11px 12px; }
table.vs thead th { vertical-align: bottom; }
table.vs thead th small { display: block; font-weight: 500; color: var(--muted); }
table.vs tbody th { font-weight: 600; color: var(--muted); background: var(--surface); position: sticky; left: 0; width: 150px; }
table.vs thead th:first-child { position: sticky; left: 0; width: 150px; }
table.vs .us { color: var(--text); }
table.vs .win { font-weight: 700; color: var(--good); }
.na { color: var(--muted); font-style: italic; }
.legend { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin: 0 0 6px; }
.scroll-hint { display: none; font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 640px) { .scroll-hint { display: block; } }
.matchup .table-scroll { position: relative; }