/* ==========================================================================
   compare.css —— 产品对比 / 选型页专用样式
   依赖 assets/site.css（变量、按钮、导航、页脚、FAQ 手风琴、.rv）
   与 assets/product.css（.p-hero / .p-quick / .crumb / .p-sec / .p-cta / .rel-grid）
   ========================================================================== */

/* ---------- 结论条：页首一句话给答案 ---------- */
.cmp-verdict{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:flex-start}
.cmp-verdict .ic{width:46px;height:46px;border-radius:13px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.cmp-verdict .ic svg{width:23px;height:23px}
.cmp-verdict h3{font-size:18.5px;margin-bottom:8px}
.cmp-verdict p{font-size:14.8px;color:var(--muted);line-height:1.85}

/* ---------- 对比对象卡 ---------- */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cmp-grid.two{grid-template-columns:repeat(2,1fr)}
.cmp-grid.four{grid-template-columns:repeat(4,1fr)}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;transition:.3s}
.cmp-card > * + *{margin-top:11px}
.cmp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#f4a7b2}
.cmp-card .hd{display:flex;align-items:center;}
.cmp-card .hd > * + *{margin-left:12px}
.cmp-card .p-logo{width:46px;height:46px;border-radius:13px;font-size:16px;flex:none}
.cmp-card .hd b{display:block;font-size:17px;color:#262A31;line-height:1.3}
.cmp-card .hd .pos{display:block;font-size:12.5px;color:var(--brand);font-weight:600;margin-top:3px}
.cmp-card p{font-size:14.2px;color:var(--muted);line-height:1.8}
.cmp-card .go{font-size:13.2px;font-weight:600;color:var(--brand);margin-top:auto}

/* ---------- 对比表 ---------- */
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:14.2px;min-width:780px}
.cmp-table th{background:var(--brand-50);color:var(--brand-deep);font-weight:700;font-size:14px;text-align:left;padding:13px 16px;border-bottom:1px solid #f8b9c3;white-space:nowrap}
.cmp-table td{padding:14px 16px;border-bottom:1px solid #eef0f3;color:var(--muted);vertical-align:top;line-height:1.78}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table td:first-child{font-weight:600;color:#262A31;background:#fcfcfd;white-space:nowrap}
.cmp-table b{color:var(--brand-deep)}
.cmp-table .hl{background:#fff8f9}
.cmp-table .yes{color:#12925a;font-weight:600}
.cmp-table .no{color:#9AA0A8}
.cmp-table.wide{min-width:900px}

/* ---------- 决策入口卡 ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.way-card{display:flex;background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 18px 16px;transition:.3s;align-items:flex-start}
.way-card > * + *{margin-left:14px}
.way-card:hover{border-color:#f4a7b2;box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.way-card .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.way-card .ic svg{width:21px;height:21px}
.way-card b{display:block;font-size:15.8px;color:#262A31;margin-bottom:5px;line-height:1.4}
.way-card p{font-size:13.8px;color:var(--muted);line-height:1.75}
.way-card .to{display:inline-block;margin-top:8px;font-size:13.2px;font-weight:600;color:var(--brand)}

/* ---------- 常见误区 ---------- */
.myths{display:grid;gap:12px}
.myth{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.myth b{display:flex;align-items:flex-start;font-size:15.5px;color:#262A31;margin-bottom:7px;line-height:1.5}
.myth b > * + *{margin-left:10px}
.myth b i{width:20px;height:20px;border-radius:50%;background:var(--brand-50);border:1px solid #f8b9c3;color:var(--brand-deep);font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.myth p{font-size:14.2px;color:var(--muted);line-height:1.8}

/* ---------- 升级路径 ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ladder .up{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;position:relative}
.ladder .up .st{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.6px}
.ladder .up b{display:block;font-size:16.5px;color:#262A31;margin:6px 0 7px}
.ladder .up p{font-size:13.6px;color:var(--muted);line-height:1.75}
.ladder .up::after{content:"";position:absolute;right:-11px;top:50%;width:8px;height:8px;border-top:2px solid #f0b8c1;border-right:2px solid #f0b8c1;transform:translateY(-50%) rotate(45deg)}
.ladder .up:last-child::after{display:none}

/* ---------- 两栏文字块 ---------- */
.cmp-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px}
.cmp-box h3{font-size:17px;margin-bottom:10px}
.cmp-box ul{display:grid;gap:9px}
.cmp-box li{position:relative;padding-left:22px;font-size:14.3px;color:var(--muted);line-height:1.78}
.cmp-box li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brand-2)}
.cmp-box li b{color:var(--brand-deep)}

/* ---------- 小结提示 ---------- */
.cmp-tip{background:var(--bg-soft);border:1px dashed #f0b8c1;border-radius:14px;padding:16px 18px;font-size:14.2px;color:var(--muted);line-height:1.8}
.cmp-tip b{color:var(--brand-deep)}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .cmp-grid,.cmp-grid.four{grid-template-columns:repeat(2,1fr)}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .ladder .up:nth-child(2n)::after{display:none}
}
@media(max-width:760px){
  .cmp-verdict{grid-template-columns:1fr;gap:14px;padding:18px 18px}
  .cmp-grid,.cmp-grid.two,.cmp-grid.four{grid-template-columns:1fr}
  .ways,.cmp-two{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr}
  .ladder .up::after{display:none}
  .cmp-table{font-size:13.4px}
  .cmp-table th,.cmp-table td{padding:11px 13px}
}