/* Token maker comparison page. Reuses site.css tokens so light and dark both follow. */
.cmp{max-width:900px;margin:0 auto;padding-bottom:24px}
.cmp h1{margin-bottom:.35em}
.cmp h2{margin:44px 0 12px;scroll-margin-top:16px}
.cmp h3{margin:0 0 6px;font-size:19px;scroll-margin-top:16px}
.cmp p,.cmp li{line-height:1.6}
.cmp-lead{font-size:18px;line-height:1.55;max-width:64ch}
.cmp-lead strong{color:var(--cream)}
.cmp-asof{font-size:14px;color:var(--muted);margin:10px 0 0}
.cmp-toc{padding:14px 18px;margin:24px 0 0}
.cmp-toc p{margin:0 0 6px;font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 20px}
.cmp-toc a{display:inline-block;padding:8px 0}
.cmp-disclose{margin:20px 0 0;padding:14px 18px;border-left:4px solid var(--gold);background:var(--ink-800);border-radius:0 var(--radius) var(--radius) 0;font-size:15px}
.cmp-disclose p{margin:0}
.cmp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800)}
.cmp-tablewrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cmp table{border-collapse:collapse;width:100%;min-width:860px;font-size:14.5px}
.cmp caption{caption-side:top;text-align:left;padding:12px 14px 4px;font:700 17px var(--serif);color:var(--cream)}
.cmp th,.cmp td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line-soft);line-height:1.45}
.cmp thead th{background:var(--ink-700);color:var(--cream);font:600 13px var(--sans);letter-spacing:.04em}
.cmp tbody th{font-weight:700;color:var(--cream);min-width:140px}
.cmp tbody th a{color:var(--cream)}
.cmp tr.cmp-ours th,.cmp tr.cmp-ours td{background:rgba(213,138,50,.12)}
.cmp-tag{display:inline-block;margin-top:4px;padding:1px 8px;border:1px solid var(--gold);border-radius:99px;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.cmp-nv{color:var(--muted);font-style:italic}
.cmp-note{font-size:14px;color:var(--muted);margin:10px 0 1em}
.cmp-tool{padding:18px 20px}
.cmp-tool+.cmp-tool{margin-top:14px}
.cmp-tool p{margin:0 0 .6em;font-size:16px}
.cmp-tool .cmp-best{color:var(--text)}
.cmp-tool .cmp-best strong{color:var(--cream)}
.cmp-src{font-size:13px;color:var(--muted)}
.cmp-tool a,.cmp-src a,.cmp p a{overflow-wrap:anywhere}
.cmp-choose{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cmp-choose li{padding:12px 16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800)}
.cmp-choose strong{color:var(--cream)}
.cmp-list{margin:0 0 1em;padding-left:22px;display:grid;gap:8px}
.cmp-list li::marker{color:var(--gold)}
.cmp-faq{display:grid;gap:10px}
.cmp-faq details{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800);padding:0 16px}
.cmp-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:10px 0;font:600 16px/1.35 var(--sans);color:var(--cream);list-style:none}
.cmp-faq summary::-webkit-details-marker{display:none}
.cmp-faq summary::after{content:"+";margin-left:auto;padding-left:12px;font-size:22px;color:var(--gold)}
.cmp-faq details[open] summary::after{content:"\2212"}
.cmp-faq details p{margin:0 0 16px}
.cmp-cta{margin-top:40px;padding:24px}
.cmp-cta h2{margin:0 0 8px;font-size:clamp(20px,3.6vw,24px)}
.cmp-cta .row{gap:12px 22px;margin-top:6px}
.top-link{font:600 15px var(--sans);padding:10px 4px;text-decoration:none}
.top-link:hover{text-decoration:underline}
@media(max-width:480px){.brand{letter-spacing:.14em}.cmp-lead{font-size:17px}}