/* ============================================================
   clashsdk.com · compare.css
   选型对比页专属:导语区 / 口径三卡 / 点评双栏 / 结论块
   全部取值引用 base.css 设计令牌,禁投影/发光/渐变。
   ============================================================ */

/* 锚点跳转避让 sticky 页头 */
#criteria,
#matrix,
#reviews,
#scenes,
#verdict{
  scroll-margin-top:calc(var(--head-h) + 16px);
}

/* ── 导语区 ───────────────────────────────────────────────── */
.cmp-lede-sec{padding-bottom:8px}
.cmp-lede{max-width:860px}
.cmp-lede .sub{
  margin-top:14px;
  font-size:15px;
  max-width:72ch;
}
.cmp-badges{margin-top:18px;margin-bottom:0}

/* ── 章节小标题行(标题 + 等宽注记)───────────────────────── */
.cmp-sec-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:18px;
}
.cmp-sec-head h2{font-size:20px}
.cmp-sec-head code{
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* ── 对比口径三卡 ─────────────────────────────────────────── */
.dim-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.dim-grid > *{min-width:0}
.dim-grid h3{margin-bottom:8px}
.dim-desc{
  color:var(--muted);
  font-size:13.5px;
}
.dim-desc code{color:var(--text)}

/* ── 总表脚注 ─────────────────────────────────────────────── */
.table-note{
  color:var(--muted);
  font-size:12.5px;
  margin-top:10px;
  max-width:80ch;
}

/* ── 点评双栏 ─────────────────────────────────────────────── */
.review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.review-grid > *{min-width:0}
.review-grid .client-card{
  margin-bottom:0;
  display:flex;
  flex-direction:column;
}
.review-grid .client-desc{margin-bottom:12px}
.review-link{
  margin-top:auto;
  padding-top:4px;
  font-size:13px;
}

/* ── 结论块 ───────────────────────────────────────────────── */
.pick-final{
  border:1px solid var(--accent-dark);
  border-radius:var(--radius);
  background:var(--bg-panel);
  padding:24px 26px;
}
.pick-final p{
  color:var(--muted);
  font-size:14px;
  max-width:78ch;
  margin-bottom:14px;
}
.pick-final p strong{color:var(--text)}
.pick-final .cta-row{margin-top:4px}

/* ── 响应式 ───────────────────────────────────────────────── */
@media (max-width:940px){
  .dim-grid{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pick-final{padding:18px 16px}
}