/* Comparison pages: layered on /tools/tools.css (same tokens). Hairlines, no shadows, one accent. */
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:8px 0 0}
.pick section{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.pick h2{font-size:18px;margin:0 0 6px}
.pick section:last-child{border-color:var(--line-2)}
.pick section:last-child h2{color:var(--accent)}
ul.ticks{margin:0;padding:0 0 0 18px;color:var(--muted);font-size:15px}
ul.ticks li{margin:6px 0}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table.cmp{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--line)}
table.cmp thead th{border-top:0;font:600 13px var(--text);color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
table.cmp thead th:nth-child(2){color:var(--accent)}
table.cmp tbody th{font-weight:600;color:var(--ink);width:18%}
table.cmp td{color:var(--muted)}
table.cmp td:nth-child(2){color:var(--ink)}
.checked{font-size:13px;color:var(--dim);margin:10px 0 0}
ol.howto{padding-left:22px}
ol.howto li{margin:8px 0}
.src-h{font-size:18px;margin-top:40px}
ul.sources{padding-left:18px;font-size:14px}
ul.sources li{margin:4px 0}
/* "Also in Novis": what Novis does beyond the table, one box per capability. */
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:8px 0 0}
.also section{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.also h3{font-size:16px;margin:0 0 6px;color:var(--ink)}
.also p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:560px){.pick section,.also section{padding:14px}}
/* Phones: one block per feature (name, then Novis, then the other app) instead of a sideways-scrolling table. */
@media (max-width:640px){
  .cmp-scroll{overflow:visible}
  table.cmp{min-width:0}
  table.cmp thead{display:none}
  table.cmp tr{display:block;border-top:1px solid var(--line);padding:12px 14px}
  table.cmp tbody tr:first-child{border-top:0}
  table.cmp th,table.cmp td{display:block;border:0;padding:0;width:auto}
  table.cmp tbody th{margin-bottom:6px;width:auto}
  table.cmp td{margin-top:6px}
  table.cmp td::before{content:attr(data-l);display:block;font:600 12px var(--text);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
  table.cmp td:nth-child(2)::before{color:var(--accent)}
}