/* The "trckable vs ..." pages: the legal pages' frame (legal.css) with one wide
   comparison table, a short list of reasons and a call to action. The tokens
   are the landing's (landing.css); nothing here sets a colour of its own. */
.lg-main.vs{max-width:960px;display:block}
.vs .lg-head,.vs .vs-block{max-width:none}
.vs .lg-head{margin-bottom:32px}
.vs .lg-head .lg-lede{margin-bottom:0}
.vs .lg-lede{max-width:62ch}
.vs-table{margin:0 0 12px;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.vs-table:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vs table{min-width:720px;table-layout:fixed}
.vs th,.vs td{padding:14px 16px;vertical-align:top;text-align:left;border-bottom:1px solid var(--border)}
.vs thead th{font:600 12px/1.4 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);background:var(--surface-2);position:sticky;top:0}
.vs thead th:first-child{width:24%}
.vs tbody th{font:550 14.5px/1.55 Geist,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--text);background:none;width:24%}
.vs td{font-size:14.5px;line-height:1.55;color:var(--text-2);width:38%}
.vs td:first-of-type{color:var(--text)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}
.vs tbody tr.vs-group td{width:auto;background:var(--surface-2);font:600 12px/1.4 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);padding:10px 16px}
.vs td b{font-weight:600;color:var(--text)}
.vs td small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.vs td .ns{color:var(--text-3);font-style:italic}
.vs td sup{font-size:.75em;color:var(--text-3)}
.vs td sup a{color:var(--text-2)}
.vs-note{margin:0 0 48px;font-size:14px;color:var(--text-3)}
.vs-block{margin:0 0 48px}
.vs .vs-why{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs .vs-why li{margin:0;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text)}
.vs-why b{font-weight:600}
.vs-cta{display:flex;justify-content:center;align-items:center;gap:8px;width:fit-content;min-width:200px;height:50px;padding:0 28px;border-radius:999px;background:#b8ff3c;color:#0b0d10!important;font-weight:600;font-size:15px;text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.vs-cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(184,255,60,.6)}
.vs-src{font-size:13.5px;line-height:1.6;color:var(--text-3)}
.vs-src h2{font-size:15px;color:var(--text-2);margin:0 0 10px}
.vs-src ol{margin:0 0 12px;padding-left:22px}
.vs-src li{margin-bottom:6px}
.vs-src a{color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.vs-cta{transition:none}}
/* Strengths, questions, the other comparisons and the index's list. */
.vs .vs-good{margin:0;padding-left:22px}
.vs .vs-faq{margin:0;display:grid;gap:12px}
.vs .vs-faq div{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.vs .vs-faq dt{margin:0 0 6px;font-weight:600;color:var(--text)}
.vs .vs-faq dd{margin:0;font-size:15px;color:var(--text-2)}
.vs .vs-more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.vs .vs-more li{margin:0;padding:0}
.vs .vs-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs .vs-list li{margin:0;padding:0}
.vs .vs-list a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-decoration:none}
.vs .vs-list a:hover{border-color:var(--accent)}
.vs .vs-list b{font-weight:600;color:var(--text)}
.vs .vs-list span{font-size:15px;color:var(--text-2)}

/* On a phone the table is a list: each row a heading, then one line per tool. */
@media (max-width:600px){
  .vs-table{overflow:visible;border:0;background:none}
  .vs table{min-width:0;display:block}
  .vs thead{display:none}
  .vs tbody,.vs tr,.vs tbody th,.vs td{display:block;width:auto}
  .vs tbody tr{margin:0 0 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
  .vs tbody tr.vs-group{margin:20px 0 8px;border:0;background:none}
  .vs tbody tr.vs-group td{padding:0;border:0;color:var(--text-2);font:600 12px/1.4 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
  .vs tbody th{padding:12px 14px 4px;border:0;background:none}
  .vs td{padding:4px 14px 10px;border:0;width:auto}
  .vs td:last-child{padding-bottom:14px}
  .vs td[data-label]::before{content:attr(data-label);display:block;font:600 11px/1.6 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
  .vs td[data-label]:first-of-type{padding-top:8px}
}