/* ============================================================
   关投强 · 行业 × 场景专题页样式（由 tools/_gen_topics.py 生成）
   依赖 common.css 的变量与 .section / .page-banner / .cta-section / .hero-eyebrow
   依赖 services.css 的 .svc-grid / .svc-card / .faq-static / .svc-banner-stats
   ============================================================ */

/* ---------- 面包屑（深底 Banner 内） ---------- */
.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 13px;
    line-height: 1.7;
}
.crumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb .sep { color: rgba(255, 255, 255, 0.4); }
.crumb span[aria-current] { color: #fff; font-weight: 600; }

/* ---------- 难点卡 ---------- */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.pain-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 24px 22px;
}
.pain-idx {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-accent, #0052d9);
    opacity: 0.7;
}
.pain-card h3 {
    margin: 10px 0 10px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.pain-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 媒体层级卡 ---------- */
.layer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.layer-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px 20px;
}
.layer-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.layer-icon svg { width: 24px; height: 24px; }
.layer-card h3 {
    margin: 16px 0 8px;
    font-size: 17px;
    line-height: 1.4;
    color: var(--c-dark, #0a1e4c);
}
.layer-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}
.layer-note {
    margin: 22px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.05);
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--c-text, #3c465e);
}

/* ---------- 节点 / 流程卡 ---------- */
.node-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.node-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 24px 20px 20px;
}
.node-num {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
    letter-spacing: 0.06em;
}
.node-card h3 {
    margin: 14px 0 8px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.node-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 相关专题卡 ---------- */
.rel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.rel-card {
    display: block;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px 20px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(10, 30, 76, 0.1);
}
.rel-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.rel-icon svg { width: 22px; height: 22px; }
.rel-card h3 {
    margin: 14px 0 8px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.rel-card p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--c-text-soft, #6b7690);
}
.rel-card .go {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-accent, #0052d9);
}

/* ---------- 组合说明框 ---------- */
.combo-box {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 26px 22px;
}
.combo-box p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--c-dark, #0a1e4c);
    font-weight: 600;
}
.combo-box .combo-note {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 价格分档 ---------- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
/* 3 档场景（渠道合作页的渠道代理铜/银/金三级授权）：3 列铺满，
   否则 3 张卡落进 4 列网格会在右侧留下空档。 */
.tier-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px 20px;
}
.tier-head h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--c-dark, #0a1e4c);
}
.tier-scope {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-accent, #0052d9);
    font-weight: 600;
}
.tier-desc {
    margin: 14px 0 14px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}
.tier-list {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
}
.tier-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--c-text, #3c465e);
}
.tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent, #0052d9);
    opacity: 0.55;
}

/* ---------- 报价变量 ---------- */
.factor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.factor-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 22px 20px 18px;
}
.factor-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--c-dark, #0a1e4c);
}
.factor-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 通用词挂载（全站统一 4 组互链） ---------- */
.lgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.lgrid-col {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 22px 20px 18px;
}
.lgrid-col h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--c-dark, #0a1e4c);
}
.lgrid-col a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text, #3c465e);
    text-decoration: none;
}
.lgrid-col a:hover { color: var(--c-accent, #0052d9); }
.lgrid-col a.is-cur {
    font-weight: 700;
    color: var(--c-accent, #0052d9);
}

/* ---------- 痛点 → 解决方案（一一对应；2026-10-12 客户决策路径新增） ----------
   与 .pain-grid（上邻）成对阅读：序号一一对应，卡片顶部蓝条强调「这是给你的解法」。 */
.pair-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.pair-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-top: 3px solid var(--c-accent, #0052d9);
    border-radius: 16px;
    padding: 24px 22px;
}
.pair-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pair-idx {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-accent, #0052d9);
}
.pair-from {
    font-size: 12px;
    line-height: 1.5;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--c-text-soft, #6b7690);
    background: var(--c-bg-soft, #f4f7fd);
}
.pair-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.pair-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--c-text-soft, #6b7690);
}
.pair-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-mute, #8c8c8c);
}

/* ---------- 免费获取方案（「解决方案」之下的留资表单；2026-10-12 新增） ----------
   ⚠ 与 `services.css` 的 `.bq-*`（百科/GEO 一行式预检条）是**两套组件**，
     别混用类名；本套服务 34 个专题页的留资转化点。
   ⚠ **位置变了要重看成色**（2026-10-12 甲方要求从页尾上移到「解决方案」下面）：
     新位置在 26 个行业/场景页上固定落在**白底 section**、在 8 个组合页落在浅灰底。
     原先的白底卡片在白底 section 上只剩 1px 边框，实测**几乎看不见**
     （`_shot29_A.png` vs `_shot29_B.png` 对照）⇒ 改为**浅蓝底 + 蓝调边框 + 阴影**，
     这样在纯白与浅灰两种 section 上都能立住。
   ⚠ 改浅蓝底会整体压低文字对比度：故**局部**加深两个灰色令牌（改在 `.pf-box` 上，
     靠自定义属性继承，**不动全局 `:root` 令牌**）。
   ⚠ `.pf-result` / `.pf-tip` 用 `display:flex/…` 会盖掉 UA 的 `[hidden]`，
     必须显式补 `[hidden]{display:none}`（同 `.topic-card` 的教训）。 */
.pf-box {
    /* 对比度账（WCAG 相对亮度）：底色由 #fff 变 #eaf1ff 后，
       原 `--c-text-soft` #6b7690 会从 4.49:1 掉到 3.96:1 ⇒ 局部换 #636d84 = 4.56:1；
       原 `--c-text-mute` #8c8c8c 会从 3.36:1 掉到 2.96:1 ⇒ 局部换 #7d7d7d = 3.62:1。
       两者都比「改动前」更好，改底色时这两个值要重算。 */
    --c-text-soft: #636d84;
    --c-text-mute: #7d7d7d;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
    align-items: center;
    background: linear-gradient(180deg, #f7faff 0%, #eaf1ff 100%);
    border: 1px solid rgba(0, 82, 217, .18);
    border-radius: 20px;
    padding: 40px 44px;
    box-shadow: 0 10px 30px rgba(10, 30, 76, .07);
}
.pf-copy .eyebrow { display: inline-block; margin-bottom: 10px; }
.pf-copy h2 {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.4;
    color: var(--c-dark, #0a1e4c);
}
.pf-copy > p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}
.pf-points { margin: 0; padding: 0; list-style: none; }
.pf-points li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text, #3c465e);
}
.pf-points li:last-child { margin-bottom: 0; }
.pf-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 82, 217, 0.1);
    box-shadow: inset 0 0 0 2px var(--c-accent, #0052d9);
}
.pf-form { display: flex; flex-direction: column; gap: 14px; }
.pf-field { display: flex; flex-direction: column; gap: 7px; }
.pf-label { font-size: 13px; color: var(--c-text-soft, #6b7690); }
.pf-req { color: #d4380d; }
.pf-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--c-text, #3c465e);
    background: #fff;   /* ⚠ 卡片改浅蓝底后输入框跟着改白底（原来是浅灰，蓝底上发闷） */
    border: 1px solid rgba(0, 82, 217, .16);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pf-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-accent, #0052d9);
}
/* ⚠ 标红只落在出错的那个 `.pf-field` 上（别写成 `.pf-form.is-invalid .pf-field`，
   那会把两个字段一起标红）。 */
.pf-field.is-invalid .pf-input {
    border-color: #d4380d;
    background: #fff5f3;
}
.pf-submit { width: 100%; }
.pf-tip { margin: 0; font-size: 12.5px; line-height: 1.6; color: #d4380d; }
.pf-privacy { margin: 0; font-size: 12px; line-height: 1.6; color: var(--c-text-mute, #8c8c8c); }
.pf-result { display: flex; flex-direction: column; gap: 10px; }
.pf-result[hidden], .pf-tip[hidden], .pf-result-tel[hidden], .pf-form[hidden] { display: none; }
.pf-result h3 { margin: 0; font-size: 19px; color: var(--c-dark, #0a1e4c); }
.pf-result-line { margin: 0; font-size: 14px; line-height: 1.75; color: var(--c-text-soft, #6b7690); }
.pf-result-tel { margin: 0; font-size: 14px; color: var(--c-text, #3c465e); }
.pf-note { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--c-text-mute, #8c8c8c); }
.pf-direct { margin: 0; font-size: 14px; color: var(--c-text, #3c465e); }
.pf-direct a, .pf-direct em {
    font-style: normal;
    font-weight: 600;
    color: var(--c-accent, #0052d9);
    text-decoration: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
    .layer-grid, .node-grid, .tier-grid, .tier-grid-3, .factor-grid,
    .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-box { grid-template-columns: 1fr; gap: 28px; padding: 34px 30px; }
}
@media (max-width: 980px) {
    .pain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .layer-grid, .node-grid, .tier-grid, .tier-grid-3, .factor-grid,
    .rel-grid, .lgrid, .pair-grid { grid-template-columns: 1fr; }
    .crumb { font-size: 12px; gap: 6px; margin-top: 18px; }
    .layer-note { font-size: 13px; padding: 14px 16px; }
    .pf-copy h2 { font-size: 22px; }
}
@media (max-width: 480px) {
    .pain-card, .layer-card, .node-card, .rel-card, .pair-card,
    .tier-card, .factor-card, .lgrid-col, .combo-box { padding: 18px 16px 16px; }
    .combo-box p { font-size: 15px; }
    .pf-box { padding: 24px 18px; }
    .pf-copy h2 { font-size: 20px; }
}