/* TriggerEngage comparison pages — builds on blog/blog.css (tokens, nav, footer, btn, prose, faq, cta-box, related) */
.cmp-main{max-width:900px;margin:0 auto;padding:0 24px}
.cmp-hero{padding:20px 0 6px;border-bottom:1px solid var(--line);margin-bottom:32px}
.cmp-hero .eyebrow{color:var(--violet)}
.cmp-hero h1{font-size:clamp(29px,4.4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:14px 0 0;text-wrap:balance}
.cmp-hero .sub{color:var(--muted);font-size:19px;margin-top:16px;max-width:70ch;line-height:1.6}
.cmp-badges{display:flex;align-items:center;gap:16px;margin:26px 0 6px;flex-wrap:wrap}
.cmp-badge{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:14px;padding:11px 18px;background:linear-gradient(180deg,var(--panel),var(--ground-2))}
.cmp-badge .mk{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-weight:600;font-size:15px;letter-spacing:-.02em}
.cmp-badge.te .mk{background:linear-gradient(150deg,#7af7ca,#34d399 52%,#18b981);color:#061710}
.cmp-badge.rival .mk{background:rgba(148,163,184,.14);color:var(--ink);border:1px solid var(--line-2)}
.cmp-badge .nm{font-weight:600;font-size:16px;color:var(--ink)}
.cmp-badge .rl{font-size:12px;color:var(--faint)}
.cmp-vs{font-weight:600;color:var(--faint);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.stamp{font-size:13px;color:var(--faint);margin-top:14px}
.cmp-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.verdict{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(52,211,153,.06),var(--panel));border-radius:16px;padding:22px 26px;margin:30px 0}
.verdict .k{font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--emerald);font-weight:600;margin:0 0 9px}
.verdict p{color:var(--muted);font-size:17px;line-height:1.62;margin:0}
.verdict strong{color:var(--ink)}
.matrix-wrap{overflow-x:auto;margin:26px 0}
table.matrix{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.matrix th,table.matrix td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.matrix thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);border-bottom:1px solid var(--line-2);font-weight:600}
table.matrix th.te,table.matrix td.te{background:rgba(52,211,153,.05)}
table.matrix thead th.te{color:var(--emerald)}
table.matrix td.feat{color:var(--ink);font-weight:500}
table.matrix .yes{color:var(--emerald);font-weight:600}
table.matrix .no{color:var(--faint)}
table.matrix .partial{color:var(--gold);font-weight:600;font-size:13px}
table.matrix .txt{color:var(--muted);font-size:13.5px;line-height:1.4;display:block}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0}
@media(max-width:680px){.cols{grid-template-columns:1fr}}
.col{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:linear-gradient(180deg,var(--panel),var(--ground-2))}
.col h3{margin:0 0 12px;font-size:18px;font-weight:600}
.col.te h3{color:var(--emerald)}
.col.rival h3{color:var(--violet)}
.col ul{margin:0;padding-left:20px}
.col li{margin:9px 0;color:var(--muted);font-size:15px;line-height:1.5}
.col li::marker{color:var(--line-2)}
.col.te li::marker{color:var(--emerald)}
/* hub cards */
.cmp-card .rival-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}