/* ============================================================
   Clash Verge下载 · compare.css
   客户端对比页:页面头部 / 对比表 / 点评卡 / 场景选型 / 结论卡
   所有颜色与圆角均引用 base.css 的 :root 令牌。
   ============================================================ */

/* ---------- 页面头部 ---------- */
.page-hero{
  position:relative;
  padding-top:88px;
  padding-bottom:72px;
  overflow:clip;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero-head{max-width:860px}
.page-hero-head h1{margin:22px 0 18px}
.page-hero-head .lede{max-width:660px}
.page-hero-head .cta{margin-top:28px}
.page-toc{margin-top:36px}

.outline-d{border-color:var(--line-cyan);width:34vw;height:34vh;right:-8vw;top:6vh}
.outline-e{border-color:var(--line-violet);width:24vw;height:26vh;left:-10vw;bottom:-4vh}

/* ---------- 对比表 ---------- */
.compare-table{min-width:1000px}
.compare-table th:first-child,
.compare-table td:first-child{white-space:nowrap}
.compare-table .badge{margin:0}

/* ---------- 点评卡 ---------- */
.review-grid{display:grid;gap:16px}
.review-card{
  display:grid;
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:28px 44px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:30px;
  box-shadow:var(--shadow-sm);
  min-width:0;
}
.review-head{min-width:0}
.review-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.review-head h3{font-size:20px;letter-spacing:-.01em}
.review-sub{margin-top:6px;font-size:13.5px;color:var(--text-muted);line-height:1.6}
.review-body{min-width:0}
.review-body > p{font-size:15px;line-height:1.85;color:var(--text-muted)}
.review-body > p strong{color:var(--text);font-weight:600}
.review-facts{margin-top:18px}

/* ---------- 场景选型 ---------- */
.scenario-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.callout-body{min-width:0}
.callout-body h3{font-size:16px;margin-bottom:6px;color:var(--text)}
.callout-body p{margin:0}
.callout-body p a{color:var(--accent);font-weight:500}
.callout-body p a:hover{color:var(--accent-dark)}

/* ---------- 结论卡 ---------- */
.pick-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:40px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:40px 56px;
  align-items:center;
  box-shadow:var(--shadow-md);
  min-width:0;
}
.pick-main{min-width:0}
.pick-main h2{margin:14px 0 14px}
.pick-main > p{font-size:16px;line-height:1.8;color:var(--text-muted);max-width:560px}
.pick-main .cta{margin-top:24px}
.pick-facts{
  border-top:0;
  border-left:1px solid var(--border);
  padding:8px 0 8px 40px;
  margin:0;
  grid-template-columns:1fr;
  gap:18px;
  min-width:0;
}
.pick-facts .fact dt{font-size:12.5px}
.pick-facts .fact dd{font-size:15px}

/* ---------- FAQ(details 原生折叠) ---------- */
.faq-item summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item[open] .faq-a{display:block}
.faq-item[open] .faq-ico{
  transform:rotate(45deg);
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .page-hero{padding-top:56px;padding-bottom:48px}
  .review-card{grid-template-columns:1fr;gap:20px;padding:24px}
  .scenario-grid{grid-template-columns:1fr}
  .pick-card{grid-template-columns:1fr;padding:26px;gap:28px}
  .pick-facts{
    border-left:0;
    border-top:1px solid var(--border);
    padding:20px 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}