/* ==========================================================================
   组件：insight-matrix（BI 页「常见误区」专用对照矩阵）
   —— 完全独立的组件，不复用 / 不依赖 myth-vs、prose 等任何既有模块样式。
   隔离约定：
   1. 类名统一 ins- 前缀，不与站内其它组件重名；
   2. 颜色、圆角、间距、阴影全部定义为 .ins-block 作用域内的私有变量
      （--ins-*），不引用 style.css 的 --red/--line/--ink 等全局变量；
   3. 不依赖任何 JS，无共享状态；
   4. 响应式断点在本文件内自持（860px / 560px），不改动全站媒体查询。
   仅外层 <section class="section"> + <div class="container"> 属页面骨架，
   由页面提供；组件内部自成体系，可直接整体搬迁。
   ========================================================================== */
.ins-block{
  --ins-ink:#333333;
  --ins-ink-2:#5a6472;
  --ins-ink-3:#7b8492;
  --ins-line:#e3e8ef;
  --ins-surface:#ffffff;
  --ins-soft:#f4f7fb;
  --ins-accent:#ef2831;
  --ins-accent-2:#fc5537;
  --ins-accent-soft:#fdecec;
  --ins-alt:#2a8cef;
  --ins-alt-soft:#eaf3fe;
  --ins-radius:14px;
  --ins-shadow:0 10px 28px rgba(31,42,68,.08);
  max-width:960px;
  margin:0 auto;
}

/* ---------- 头部区 ---------- */
.ins-head{text-align:center;margin-bottom:34px}
.ins-eyebrow{display:inline-block;padding:5px 16px;border-radius:999px;background:var(--ins-accent-soft);color:var(--ins-accent);font-size:13px;font-weight:600;letter-spacing:.5px;line-height:1.7}
.ins-title{margin-top:16px;font-size:28px;font-weight:700;color:var(--ins-ink);line-height:1.45}
.ins-sub{margin-top:12px;font-size:15px;color:var(--ins-ink-3);line-height:1.8}

/* ---------- 主体：三列对照矩阵 ---------- */
.ins-matrix{background:var(--ins-surface);border:1px solid var(--ins-line);border-radius:var(--ins-radius);overflow:hidden;box-shadow:var(--ins-shadow)}
.ins-row{display:grid;grid-template-columns:160px 1fr 1.3fr;transition:background .2s}
.ins-row + .ins-row{border-top:1px solid var(--ins-line)}
.ins-row:not(.ins-row-head):hover{background:#fcfdff}
.ins-cell{padding:20px 24px;font-size:14.5px;line-height:1.9;color:var(--ins-ink-2)}
.ins-cell-dim{background:var(--ins-soft);color:var(--ins-ink);font-weight:600;font-size:14px;letter-spacing:.3px}
/* 主列（CRM 的 BI）：浅暖底 + 左侧红色强调边，形成视觉焦点 */
.ins-cell-main{color:var(--ins-ink);font-weight:600;background:linear-gradient(180deg,#ffffff 0%,#fffafa 100%);border-left:3px solid var(--ins-accent)}
.ins-row-head .ins-cell{padding:16px 24px;background:var(--ins-surface)}
.ins-col-tag{display:inline-block;padding:6px 14px;border-radius:8px;font-size:13.5px;font-weight:700;line-height:1.6}
.ins-col-tag-erp{background:var(--ins-alt-soft);color:var(--ins-alt)}
.ins-col-tag-bi{background:linear-gradient(135deg,var(--ins-accent),var(--ins-accent-2));color:#ffffff}

/* ---------- 尾部：结论条 ---------- */
.ins-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:18px 24px;border-radius:var(--ins-radius);background:var(--ins-accent-soft);color:var(--ins-ink-2);font-size:14px;line-height:1.95}
.ins-note svg{flex:none;width:20px;height:20px;margin-top:5px;stroke:var(--ins-accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ins-note a{color:var(--ins-accent);font-weight:600}
.ins-note a:hover{text-decoration:underline}

/* ---------- 组件内响应式（自持，不污染全站断点） ---------- */
@media (max-width:860px){
  .ins-block{max-width:100%}
  .ins-head{margin-bottom:26px}
  .ins-title{font-size:22px}
  .ins-row{display:block}
  .ins-row-head{display:none}
  .ins-row .ins-cell-dim{display:none}
  .ins-cell{display:flex;gap:12px;padding:15px 20px}
  .ins-cell::before{content:attr(data-label);flex:none;min-width:76px;color:var(--ins-ink-3);font-size:12.5px;font-weight:600;line-height:2.1}
  .ins-cell[data-label]{color:var(--ins-ink-2);font-weight:400}
  .ins-cell-main[data-label]{color:var(--ins-ink);font-weight:600}
}
@media (max-width:560px){
  .ins-title{font-size:20px}
  .ins-sub{font-size:14px}
  .ins-cell{padding:13px 16px;font-size:14px}
  .ins-note{padding:16px 18px;font-size:13.5px}
}