/* Comparison pages (/compare). Colours from styles.css tokens only. */
.cmp{padding-block:40px 72px}
.cmp section{padding-block:40px 0;border-top:0}
.cmp h1{font-size:clamp(1.9rem,4.4vw,2.6rem);margin-bottom:14px}
.cmp h2{font-size:1.3rem;margin-bottom:12px}
.crumbs{font-size:.86rem;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-3)}
.cmp-lead{font-size:1.06rem;color:var(--ink-2)}
.cmp-verified{font-size:.86rem;color:var(--ink-3)}

.cmp-cta{margin-top:26px;padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);display:grid;gap:14px}
.cmp-cta .cmd{flex:1 1 280px;min-width:0}

.cmp-list{display:grid;gap:16px}
.cmp-card{border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;background:var(--surface)}
.cmp-card.ours{border:2px solid var(--green)}
.cmp-card h2{font-size:1.2rem;margin-bottom:4px}
.cmp-card p{color:var(--ink-2);font-size:.97rem}
.cmp-card .cmp-meta{font-size:.84rem;color:var(--ink-3);margin-bottom:12px}
.cmp-card .cmp-who{color:var(--ink);font-weight:600;margin-bottom:6px}
.cmp-card dl{margin:0 0 12px;font-size:.92rem;color:var(--ink-2)}
.cmp-card dl div{margin-bottom:4px}
.cmp-card dt{display:inline;font-weight:600;color:var(--ink)}
.cmp-card dt::after{content:": "}
.cmp-card dd{display:inline;margin:0}
.cmp-link{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:.94rem}

.cmp-table{overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.cmp-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;line-height:1.45}
.cmp-table th,.cmp-table td{text-align:left;vertical-align:top;padding:11px 14px;border-top:1px solid var(--line)}
.cmp-table thead th{border-top:0;background:var(--surface-2);font-weight:600}
.cmp-table thead th:nth-child(2){color:var(--green)}
.cmp-table tbody th{font-weight:600;width:24%}
.cmp-table td{color:var(--ink-2)}
.cmp-table td.win{background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--ink)}
.cmp-note{font-size:.84rem;color:var(--ink-3);margin-top:10px}

.cmp-choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cmp-choose>div{border-radius:14px;padding:18px 20px;background:var(--surface-2)}
.cmp-choose>div.ours{background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.cmp-choose h3{margin-bottom:8px}
.cmp-choose li{color:var(--ink-2);font-size:.95rem;margin-bottom:6px}

.cmp .faq details{border-top:1px solid var(--line);padding-block:14px}
.cmp .faq details:last-child{border-bottom:1px solid var(--line)}
.cmp .faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.cmp .faq summary::-webkit-details-marker{display:none}
.cmp .faq summary::after{content:"+";color:var(--ink-3);font-weight:400}
.cmp .faq details[open] summary::after{content:"–"}
.cmp .faq details p{color:var(--ink-2);margin:10px 0 0}

.cmp-related,.cmp-index{list-style:none;padding:0;margin:0}
.cmp-related li{margin-bottom:8px}
.cmp-index{border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.cmp-index li+li{border-top:1px solid var(--line)}
.cmp-index a{display:block;padding:14px 18px;color:var(--ink);font-weight:600;text-decoration:none}
.cmp-index a:hover{background:var(--surface-2)}

.cmp-sources{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.cmp-sources p{margin-bottom:10px}
.cmp-sources a{color:var(--ink-3)}