/* Comparison pages (generated by tools/build-compare.js). Tokens from members.css. */
.cmp{max-width:1140px;margin:0 auto;padding:56px 32px 96px}
.cmp .crumb{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmp .crumb a{color:var(--green)}
.cmp-hero{max-width:820px}
.cmp-hero h1{font-family:var(--font-display);font-weight:300;color:var(--green);font-size:clamp(34px,6vw,64px);line-height:1.04;letter-spacing:-.025em;margin:14px 0 0}
.cmp-hero h1 em{font-style:italic;color:var(--gold)}
.cmp-lead{max-width:660px;margin:22px 0 0;font-size:clamp(15px,1.7vw,17.5px);line-height:1.7;color:var(--text)}
.cmp-lead a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.cmp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:44px 0 0;border:2px solid var(--ink);background:var(--ink)}
.cmp-stat{background:var(--bg-2);padding:20px 18px}
.cmp-stat .n{font-family:var(--font-display);font-size:clamp(26px,3.4vw,36px);line-height:1;color:var(--green);letter-spacing:-.02em}
.cmp-stat .l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:9px;line-height:1.4}
.cmp-sec{margin:64px 0 0}
.cmp-sec .eyebrow{display:block;margin:0 0 10px}
.cmp-h2{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:clamp(24px,3.2vw,34px);letter-spacing:-.015em;margin:0 0 10px}
.cmp-sub{max-width:70ch;color:var(--text);margin:0 0 24px;font-size:15px;line-height:1.6}
.cmp-sub a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.legend{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:0 0 18px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.m{display:inline-block;width:13px;height:13px;flex:none;border:2px solid var(--ink)}
.m.full{background:var(--green);border-color:var(--green)}
.m.part{background:linear-gradient(to right,var(--green) 50%,transparent 50%)}
.m.road{background:transparent;border-color:var(--gold);border-radius:50%}
.m.none{width:12px;height:2px;border:none;background:var(--muted);opacity:.5}
.table-scroll{overflow-x:auto;border:2px solid var(--ink);box-shadow:var(--hard-sm)}
table.matrix{border-collapse:collapse;width:100%;min-width:720px;background:var(--bg-2)}
table.matrix.vs{min-width:480px}
.matrix th,.matrix td{text-align:center;padding:12px 10px;border-bottom:2px solid var(--line)}
.matrix thead th{position:sticky;top:0;background:var(--bg-3);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink);z-index:2}
.matrix thead th.us{color:var(--green)}
.matrix thead th.us small{display:block;font-size:9px;letter-spacing:.08em;color:var(--gold);margin-top:3px}
.matrix .rh{text-align:left;padding:12px 16px;font-size:14px;color:var(--ink);font-weight:500;position:sticky;left:0;background:var(--bg-2);min-width:250px;max-width:340px;border-right:2px solid var(--line);z-index:1}
.matrix td.us{background:rgba(30,74,53,.06)}
.matrix tbody tr:hover .rh,.matrix tbody tr:hover td.us{background:rgba(30,74,53,.1)}
.grp th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:var(--bg-3);padding:10px 16px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.diff{background:var(--bg-2);border:2px solid var(--ink);box-shadow:var(--hard-sm);padding:24px 22px}
.diff .num{font-family:var(--font-mono);font-size:12px;color:var(--gold);letter-spacing:.1em}
.diff h3{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--ink);margin:12px 0 8px;line-height:1.2}
.diff p{margin:0;font-size:14px;color:var(--text);line-height:1.6}
.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.read{border:2px solid var(--ink);box-shadow:var(--hard-sm);padding:22px;background:var(--bg-2)}
.read h4{font-family:var(--font-display);font-size:20px;font-weight:400;margin:0 0 4px;color:var(--ink)}
.read h4 a{color:var(--ink)}
.read h4 a:hover{color:var(--green)}
.read .tag{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-bottom:12px}
.read p{margin:0;font-size:14px;color:var(--text);line-height:1.6}
.wins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.wins li{background:var(--bg-2);border:2px solid var(--ink);padding:14px 16px 14px 40px;position:relative;font-size:14.5px;color:var(--ink);line-height:1.4}
.wins li::before{content:"✓";position:absolute;left:15px;top:13px;color:var(--green);font-weight:700}
.vs-faq{display:grid;gap:2px}
.vs-faq-item{background:var(--bg-2);border:2px solid var(--ink);padding:20px 22px}
.vs-faq-item h3{font-family:var(--font-display);font-weight:500;color:var(--green);font-size:18px;margin:0 0 8px;line-height:1.2}
.vs-faq-item p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text)}
.cmp-notes{margin:48px 0 0;padding-top:22px;border-top:2px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.65}
.cmp-notes p{margin:0 0 8px;max-width:80ch}
.cmp-notes b{color:var(--text)}
.cmp-notes a{color:var(--green);text-decoration:underline}
.cmp-cta{margin:56px 0 0;padding:40px 34px;background:var(--ink);color:var(--paper-on-green);box-shadow:var(--hard)}
.cmp-cta h2{font-family:var(--font-display);font-weight:400;color:var(--bg-2);font-size:clamp(24px,3vw,32px);margin:0 0 12px}
.cmp-cta p{font-size:15px;line-height:1.7;color:#D8CFB8;margin:0 0 24px;max-width:56ch}
.cmp-cta .btn-gold{background:var(--ball);color:var(--ink);border-color:var(--ball);box-shadow:4px 4px 0 var(--green-line)}
@media(max-width:820px){ .cmp{padding:40px 20px 72px} .cmp-stats{grid-template-columns:repeat(2,1fr)} .diffs,.reads,.wins{grid-template-columns:1fr} }