/* ============================================================
   pages.css — 内页通用区块层（依赖 design-system.css）
   ------------------------------------------------------------
   定位：除首页外所有内页复用的区块组件。
   仅补充 design-system 未覆盖的布局类（特性栅格、分栏、场景卡、
   步骤、价格档、FAQ、数据条、CTA 带）。首页惊艳层 official.css
   选择器均为首页专属类名，不会与本层冲突。
   加载顺序：design-system.css → official.css → pages.css
   每个内页：<head> 引用 design-system.css + official.css + pages.css
   ============================================================ */

/* ---------- 1. 子页首屏正文宽度约束 ---------- */
.page-hero .container{ max-width:var(--container); }
.page-hero .lede{ font-weight:400; }
.page-hero .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.page-hero .badge-row .tag{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- 2. 通用区块：标题与导语 ---------- */
.block{ padding:var(--space-20) 0; }
.block--soft{ background:var(--soft); }
.block--warm{ background:var(--warm); }
.block-head{ max-width:760px; margin:0 auto var(--space-12); text-align:center; }
.block-head .eyebrow{ display:inline-block; }
.block-head h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.22; }
.block-head p{ color:var(--muted); font-size:16px; margin:14px 0 0; }
.block-head.left{ margin-left:0; text-align:left; }
.block-head.left .eyebrow{ display:block; }

/* ---------- 3. 特性栅格（卡片网格） ---------- */
/* 列数显式声明，不交给 auto-fit 算：
   auto-fit 的列数随视口漂移，且末行必然留空 —— 6 张卡落进 4 列就是 4+2，
   右下角空两格（用户 2026-09-14 圈出，两页同病）。
   列数统一由 --fg-cols 控制：变体类只改变量，断点只覆盖一次。
   卡片数 → 列数（务必整除）：3/6 张 → 3 列，4 张 → 2 或 4 列，7 张 → 4 列。 */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(var(--fg-cols,3),minmax(0,1fr));
  gap:20px;
  grid-auto-rows:1fr;                /* 跨行等高：行高只由最高那张决定 */
}
.feature-grid--2col{ --fg-cols:2; }
.feature-grid--3col{ --fg-cols:3; }
.feature-grid--4col{ --fg-cols:4; }

/* 卡片纵向弹性：序号、标题、正文自上而下，末尾动作链接贴底。
   行高统一 + 标题都控制在单行 → 正文起始位置横向对齐。 */
.feature-grid .card{
  display:flex; flex-direction:column;
  height:100%;
  padding:30px 28px 28px;
  border-color:rgba(0,41,100,.075);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(7,26,44,.04);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-grid .card:hover{
  transform:translateY(-4px);
  border-color:rgba(207,28,50,.28);
  box-shadow:0 26px 52px -16px rgba(7,26,44,.18);
}
/* 序号：小号衬线数字 + 渐变短线，替掉原先的 38px 色块（最显模板感的一处） */
.feature-grid .card .f-idx{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-size:13px; font-weight:800;
  letter-spacing:.14em; color:var(--red);
}
.feature-grid .card .f-idx::after{
  content:""; flex:0 0 auto; width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  opacity:.5;
  transition:width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.feature-grid .card:hover .f-idx::after{ width:42px; opacity:1; }
.feature-grid .card h3{ font-size:17.5px; line-height:1.45; letter-spacing:-.005em; margin:14px 0 10px; }
.feature-grid .card p{ color:var(--muted); font-size:14.5px; line-height:1.8; margin:0; }
.feature-grid .card .tag-list{ margin-top:auto; padding-top:16px; }
.feature-grid .card .action-link{ display:inline-block; margin-top:auto; padding-top:16px; }

@media (max-width:1080px){ .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){
  .feature-grid{ grid-template-columns:1fr; gap:16px; }
  .feature-grid .card{ padding:24px 22px 22px; }
}

/* ---------- 4. 两栏分栏（图文 / 论点） ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.reverse .split-media{ order:-1; }
.split-copy h2{ font-size:clamp(26px,3.2vw,36px); line-height:1.24; margin:0 0 16px; }
.split-copy p{ color:var(--muted); font-size:16px; line-height:1.8; margin:0 0 16px; }
.split-media{ background:linear-gradient(150deg,#f4f8fc,#e9f0f7); border:1px solid rgba(0,41,100,.14); border-radius:var(--radius-lg); min-height:300px; box-shadow:0 22px 56px rgba(7,26,44,.1); position:relative; overflow:hidden; }
.split-media .img-note{ position:absolute; left:18px; bottom:16px; font-size:12px; color:var(--muted); background:rgba(255,255,255,.8); padding:5px 10px; border-radius:999px; }

/* ---------- 5. 场景卡列表（按客户问题展开） ---------- */
.scenario-list{ display:grid; gap:14px; }
.scenario{ display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:start; padding:22px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); transition:border-color var(--dur),box-shadow var(--dur); }
.scenario:hover{ border-color:rgba(0,41,100,.28); box-shadow:0 14px 34px rgba(7,26,44,.08); }
.scenario .s-idx{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; font-size:14px; flex:0 0 auto; }
.scenario h3{ font-size:17px; margin:0 0 6px; }
.scenario h3 .s-years{ margin-left:16px; font-size:14px; font-weight:700; color:var(--red); white-space:nowrap; }
.scenario p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }
.scenario .action-link{ margin-top:12px; }

/* ---------- 6. 步骤（顺序流程） ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; counter-reset:step; }
.step{ position:relative; padding:26px 22px 22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:-14px; left:22px; width:34px; height:34px; display:grid; place-items:center; background:var(--red); color:#fff; font-weight:800; border-radius:10px; font-size:14px; }
.step h3{ font-size:17px; margin:8px 0 8px; }
.step p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }

/* —— 偶数步骤（3×2 高级流程卡） —— */
.steps--even{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; counter-reset:step; }
.steps--even .step{ display:flex; flex-direction:column; justify-content:flex-start; min-height:100%; padding:34px 24px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); border-top:3px solid var(--red); box-shadow:0 4px 16px rgba(7,26,44,.04); transition:transform .25s,box-shadow .25s,border-color .25s; }
.steps--even .step:hover{ transform:translateY(-5px); box-shadow:0 18px 46px rgba(7,26,44,.1); border-color:rgba(0,41,100,.22); }
.steps--even .step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:-20px; left:24px; width:40px; height:40px; display:grid; place-items:center; background:var(--red); color:#fff; font-weight:800; border-radius:50%; font-size:13px; box-shadow:0 6px 16px rgba(207,28,50,.28); }
.steps--even .step h3{ font-size:18px; margin:10px 0 10px; color:var(--navy-950); }
.steps--even .step p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin:0; }

/* ---------- 7. 价格档（条件式参考区间） ---------- */
.price-levels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.price-card{ display:flex; flex-direction:column; padding:var(--space-6); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); transition:transform var(--dur),box-shadow var(--dur); }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.price-card .tier{ font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--red); }
.price-card h3{ font-size:20px; margin:8px 0 6px; }
.price-card .scope{ color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 14px; }
.price-card .range{ font-size:15px; font-weight:800; color:var(--navy); padding:12px 14px; background:var(--soft); border-radius:var(--radius-sm); margin-bottom:14px; }
.price-card .range small{ display:block; font-weight:600; color:var(--muted); font-size:12px; margin-top:4px; }
.price-card ul{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px; }
.price-card li{ position:relative; padding-left:22px; font-size:14px; color:var(--ink); line-height:1.6; }
.price-card li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--red); }
.price-card .btn-wrap{ margin-top:auto; }
.price-note{ margin-top:22px; padding:18px 20px; background:var(--navy-tint); border-left:3px solid var(--navy); border-radius:var(--radius-sm); color:var(--muted); font-size:14px; line-height:1.75; }

/* ---------- 8. 数据条 ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; }
.stat{ text-align:center; padding:8px; }
.stat b{ display:block; font-size:clamp(30px,4vw,44px); color:var(--navy); line-height:1.1; font-family:var(--serif); }
.stat span{ display:block; margin-top:8px; color:var(--muted); font-size:14px; }

/* ---------- 9. FAQ（details 通用样式） ---------- */
.faq-list details{ border:1px solid var(--line); border-radius:var(--radius); padding:0 20px; margin-bottom:12px; background:var(--white); }
.faq-list details[open]{ border-color:rgba(0,41,100,.3); }
.faq-list summary{ cursor:pointer; padding:18px 0; font-weight:700; font-size:16px; color:var(--navy-950); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; color:var(--red); font-size:22px; font-weight:800; line-height:1; transition:transform var(--dur); }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ color:var(--muted); font-size:15px; line-height:1.8; margin:0 0 18px; }

/* ---------- 10. 标签组（技术栈/能力） ---------- */
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-list span{ display:inline-flex; padding:6px 13px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--navy-800); font-size:13px; font-weight:700; }

/* ---------- 11. 通用 CTA 带（深色转化区，复用 .inquiry 视觉） ---------- */
.cta-band{ background:linear-gradient(135deg,#0a1628 0%,#0f2242 60%,#142038 100%); }
.cta-inner{ display:block; max-width:780px; padding:72px 0; }
.cta-inner h2{ color:#fff; font-size:clamp(26px,3.2vw,36px); margin:0 0 12px; }
.cta-inner p{ color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.8; margin:0 0 20px; }
.cta-inner .page-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.cta-inner .badge-row .tag{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------- 12. 响应式 ---------- */
@media (max-width:860px){
  .split,.split.reverse{ grid-template-columns:1fr; gap:28px; }
  .split.reverse .split-media{ order:0; }
  .cta-inner{ padding:52px 0; }
  .steps--even{ grid-template-columns:1fr; }
  .scenario{ grid-template-columns:1fr; gap:12px; }
  .scenario .action-link{ justify-self:start; }
}

/* ============================================================
   2026 定制内页组件（内容驱动，三页各异，非通用模板）
   为 网站维护费用 / 网站维护 / 网站接管 定制
   ============================================================ */

/* —— 网站维护费用：业务关键型锚点带（价格页优先锚定，不用低价套餐） —— */
.price-anchor{ background:linear-gradient(135deg,#0a1628,#11233f); border-radius:var(--radius-lg); padding:36px 40px; color:#fff; display:grid; grid-template-columns:1.25fr .75fr; gap:32px; align-items:center; box-shadow:0 26px 60px rgba(7,26,44,.18); }
.price-anchor .pa-tag{ display:inline-block; font-size:12px; letter-spacing:.12em; font-weight:800; color:#fbbf24; margin-bottom:12px; }
.price-anchor h3{ font-size:clamp(22px,2.6vw,30px); margin:0 0 10px; line-height:1.25; }
.price-anchor p{ color:rgba(255,255,255,.8); font-size:15px; line-height:1.85; margin:0; }
.price-anchor .pa-figure{ text-align:right; }
.price-anchor .pa-figure b{ display:block; font-size:clamp(32px,4vw,46px); font-family:var(--serif); color:#fff; line-height:1.05; }
.price-anchor .pa-figure small{ color:rgba(255,255,255,.7); font-size:13px; }

/* —— 费用对比表（对比表，而非堆叠卡片） —— */
.tier-wrap{ width:100%; overflow-x:auto; }
.tier-table{ width:100%; min-width:680px; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.tier-table th,.tier-table td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; line-height:1.6; }
.tier-table thead th{ background:var(--navy); color:#fff; font-weight:700; font-size:14px; }
.tier-table tbody tr:last-child td{ border-bottom:0; }
.tier-table tbody tr:hover{ background:var(--soft); }
.tier-table td.tier-name{ font-weight:800; color:var(--navy-950); white-space:nowrap; }
.tier-table .tier-range{ font-weight:800; color:var(--red); white-space:nowrap; }
/* 「按网站类型」表（2026-09-15 用户要求，把原「不同场景」5 张场景卡换成类型区间表）：
   只有两列、单元格文案短，手机上不需要横向滚动 —— 放开 min-width 并允许折行。
   只加这个修饰类，不动 .tier-table 本身（五档表还要它，那边 3 列、必须横滚）。 */
.tier-table--type{ min-width:0; }
.tier-table--type td.tier-name,
.tier-table--type .tier-range{ white-space:normal; }
/* 两列均分会让价格离类型名太远（价格列右半边空着），把类型列压到 58% */
.tier-table--type th:first-child,
.tier-table--type td.tier-name{ width:58%; }
/* 手机上 58% 会把「2,000～20,000 元/年」挤成两行 —— 收窄内边距并把类型列压到 44%，
   给价格列腾出 56%，「15,000～100,000 元/年」正好一行放得下。 */
@media (max-width:560px){
  .tier-table--type th,
  .tier-table--type td{ padding:14px 10px; }
  .tier-table--type th:first-child,
  .tier-table--type td.tier-name{ width:44%; }
}

/* —— 场景决策卡（网站维护费用） —— */
.scene-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.scene-card{ grid-column:span 2; padding:26px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); border-top:3px solid var(--red); transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur); }
.scene-card:nth-child(4),
.scene-card:nth-child(5){ grid-column:span 3; }
.scene-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-top-color:var(--navy); }
.scene-card .sc-no{ font-family:var(--serif); font-size:24px; color:var(--red-tint); font-weight:800; }
.scene-card h3{ font-size:18px; margin:6px 0 8px; }
.scene-card p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 14px; }

/* —— 报价因素关系 —— */
.factor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.factor{ padding:22px; background:var(--soft); border-radius:var(--radius); border-left:3px solid var(--orange); }
.factor h3{ font-size:16px; margin:0 0 8px; }
.factor p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; }

/* —— 报价组成 —— */
.quote-parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.quote-part{ padding:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.quote-part b{ display:block; color:var(--navy); font-size:15px; margin-bottom:6px; }
.quote-part span{ color:var(--muted); font-size:13.5px; line-height:1.65; }
/* 三卡与紧随其后的 FAQ 是两种不同性质的构件（卡片网格 → 折叠列表），
   零间距会被读成同一块；这里拉开一个层级，FAQ 项之间仍是 12px 的小间距。
   用相邻兄弟选择器限定，只影响「三卡 + FAQ」这个组合（报价页三卡后面是普通段落，不受影响）。 */
.quote-parts + .faq-list{ margin-top:40px; }

/* —— 询价准备清单 —— */
.prep-card{ padding:28px 30px; background:linear-gradient(160deg,#fff,#f6f9fd); border:1px solid var(--line); border-radius:var(--radius-lg); }
.prep-card ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.prep-card li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink); line-height:1.6; }
.prep-card li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; background:var(--orange); }

/* —— 网站维护：痛点网格（问题先行） —— */
.pain-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.pain{ grid-column:span 2; padding:26px 26px 26px 30px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden; transition:box-shadow var(--dur),border-color var(--dur); }
.pain:hover{ box-shadow:var(--shadow); border-color:rgba(0,41,100,.22); }
.pain::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red); }
.pain h3{ font-size:18px; margin:0 0 10px; }
.pain p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 14px; }

/* —— 服务选择器 —— */
.svc-select{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.svc{ grid-column:span 2; padding:22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); }
.svc:hover{ border-color:var(--navy); box-shadow:0 14px 34px rgba(7,26,44,.08); transform:translateY(-3px); }
.svc .svc-ic{ width:44px; height:44px; border-radius:12px; background:var(--navy-tint); color:var(--navy); display:grid; place-items:center; font-size:20px; margin-bottom:14px; }
.svc h3{ font-size:17px; margin:0 0 8px; }
.svc p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; }

/* —— 业务地图面板（哲学分栏） —— */
.biz-map{ background:linear-gradient(150deg,#f4f8fc,#e9f0f7); border:1px solid rgba(0,41,100,.14); border-radius:var(--radius-lg); padding:32px; min-height:300px; }
.biz-map .bm-label{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--navy); opacity:.7; margin-bottom:16px; }
.biz-map .bm-node{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:600; color:var(--navy-800); margin:0 10px 12px 0; box-shadow:0 6px 16px rgba(7,26,44,.06); }
.biz-map .bm-node::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--red); }
.biz-map .bm-cap{ margin-top:18px; color:var(--muted); font-size:14px; line-height:1.8; padding-top:16px; border-top:1px dashed rgba(0,41,100,.18); }

/* —— 网站接管：决策框架（两个关键问题） —— */
.decide{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.decide-q{ padding:30px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); }
.decide-q.q1{ border-top:4px solid var(--red); }
.decide-q.q2{ border-top:4px solid var(--navy); }
.decide-q .dq-no{ font-family:var(--serif); font-size:20px; font-weight:800; color:var(--muted); }
.decide-q h3{ font-size:20px; margin:8px 0 12px; line-height:1.3; }
.decide-q p{ color:var(--muted); font-size:15px; line-height:1.85; margin:0 0 16px; }
.decide-flow{ grid-column:1/-1; margin-top:4px; padding:20px 24px; background:var(--navy-tint); border-radius:var(--radius); color:var(--navy-950); font-size:15px; line-height:1.85; }
.decide-flow b{ color:var(--navy); }

/* —— 接管后收获网格 —— */
.outcome-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.outcome{ display:flex; gap:14px; padding:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); align-items:flex-start; }
.outcome .oc-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--red-tint); color:var(--red); display:grid; place-items:center; font-weight:800; font-size:15px; }
.outcome p{ margin:0; font-size:14.5px; color:var(--ink); line-height:1.65; }

/* —— 响应式补充 —— */
@media (max-width:860px){
  .price-anchor{ grid-template-columns:1fr; gap:18px; }
  .price-anchor .pa-figure{ text-align:left; }
  .decide{ grid-template-columns:1fr; }
  .prep-card ul{ grid-template-columns:1fr; }
  .pain-grid,
  .svc-select,
  .scene-cards,
  .factor-grid,
  .quote-parts,
  .outcome-grid{ grid-template-columns:1fr; }
  .pain,
  .pain:nth-child(4),
  .pain:nth-child(5),
  .svc,
  .svc:nth-child(4),
  .svc:nth-child(5),
  .scene-card,
  .scene-card:nth-child(4),
  .scene-card:nth-child(5){ grid-column:auto; }
}

/* ---------- 支持维护的网站类型（维护频道页） ---------- */
.svc-types-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.svc-types-list li{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 20px; background:var(--white);
  border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--radius);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.svc-types-list li:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(7,26,44,.08);
  border-color:rgba(0,41,100,.2);
}
.svc-types-list b{ font-size:15.5px; color:var(--navy-950); line-height:1.4; }
.svc-types-list span{ font-size:13.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1100px){ .svc-types-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .svc-types-list{ grid-template-columns:1fr; } }

/* ---------- 外贸独立站：营销支持六步（序号 + 环形锚点） ---------- */
.svc-stack{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.svc-block{
  position:relative; display:flex; flex-direction:column; gap:16px;
  padding:30px 28px 28px;
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
/* 顶部渐显细线，hover 时铺满 —— 替代原来贴在底边的粗条 */
.svc-block::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
/* 右上角淡色序号水印，拉开层次 */
.svc-block::after{
  content:attr(data-no);
  position:absolute; right:18px; top:10px;
  font-family:var(--serif); font-size:56px; font-weight:800;
  line-height:1; color:var(--navy-950); opacity:.045;
  pointer-events:none; transition:opacity var(--dur);
}
.svc-block:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 52px rgba(7,26,44,.1);
  border-color:rgba(0,41,100,.2);
}
.svc-block:hover::before{ transform:scaleX(1); }
.svc-block:hover::after{ opacity:.08; }

/* 序号做成圆形徽章，与标题同一行 */
.svc-head{ display:flex; align-items:center; gap:12px; }
.svc-no{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:17px; font-weight:800;
  color:var(--red); background:var(--red-tint);
  transition:background var(--dur), color var(--dur);
}
.svc-block:hover .svc-no{ background:var(--red); color:var(--white); }
.svc-block h3{ font-size:17.5px; margin:0; line-height:1.4; }
.svc-block p{ color:var(--muted); font-size:14.5px; line-height:1.8; margin:0; }

@media (max-width:1100px){ .svc-stack{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .svc-stack{ grid-template-columns:1fr; gap:16px; }
  .svc-block{ padding:24px 22px; gap:14px; }
  .svc-block::after{ font-size:44px; right:14px; }
  .svc-no{ width:38px; height:38px; font-size:15px; }
}
/* ============================================================
   知识中心：文章列表 + 右侧栏（版式对齐参考站 /blog/）
   ------------------------------------------------------------
   结构：深色首屏（标题 + 统计条）→ 左列文章列表（纯文字卡 +
   分类彩色左边线）→ 右列常驻栏（联系方式与 CTA / 分类导航 / 常见问题）
   → 主题标签云（浅色承接）。右列 sticky top:132px 避开 sticky 站点头部。

   三处有意差异（是判断，不是遗漏）：
   ① 卡片只显示发布时间，不显示阅读时间；阅读次数放在文章详情页
      （详情页尚未建，见技能里的待建清单）；
   ② 不做分页 —— 仅 8 篇，一页放得下，假分页会制造死链；
   ③ 侧栏只放联系方式与 CTA 入口，不放与底部表单重复的「留言引导」文案。

   ⚠️ 标签云必须留在 <main> 内（内容区末尾、.inquiry 之前）。
   它一旦放到 .inquiry 之后，就会与 .inquiry、footer 三块深色直接相邻
   （实测相邻间隙 0px），粘成一片看不出分界。
   品牌色沿用本站变量（--navy/--red/--orange），不引入参考站 hex。
   ============================================================ */

/* ---------- 首屏：颗粒纹理 + 光晕 + 统计条 ---------- */
.page-hero--kb::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px),
                   radial-gradient(circle,rgba(233,94,58,.06) 1px,transparent 1px);
  background-size:32px 32px,64px 64px;
  background-position:0 0,16px 16px;
}
.page-hero--kb .kb-glow{
  position:absolute; top:-30%; right:-6%; width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(233,94,58,.16) 0%,transparent 66%);
  pointer-events:none;
}
.hl-grad{
  background:linear-gradient(120deg,var(--orange-light) 0%,var(--orange) 45%,var(--red) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.kb-stats{
  display:flex; flex-wrap:wrap; gap:40px;
  margin-top:34px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
}
.kb-stat{ display:flex; flex-direction:column; gap:5px; }
.kb-stat b{
  font-size:32px; font-weight:800; line-height:1;
  background:linear-gradient(120deg,var(--orange-light),var(--red));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.kb-stat span{ font-size:13px; color:#9fb0c0; }

/* ---------- 两栏骨架 ---------- */
.kb-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:44px; align-items:start; }
/* 右栏整列吸附（跟随滚动悬浮）。
   ⚠️ 前提：侧栏自身高度必须 ≤ 视口高 − top，否则底部永远吸不出来 ——
      吸附是把「顶边」钉在 top 上，超出视口的部分谁也看不到。
      实测 1440×900 下可用高度只有 672px，所以侧栏只放一张转化卡（约 564px）；
      非转化型的导航卡一律移到内容列末尾 .kb-more，不要再往侧栏里加块。
   祖先不能有 overflow:hidden（会另建滚动容器、吸附按容器算而非视口），
   body/html 用的是 overflow-x:clip，clip 不建滚动容器，吸附才成立。 */
.kb-side{ position:sticky; top:132px; display:grid; gap:20px; }
/* 短屏兜底：视口太矮装不下整张卡时允许侧栏内部滚动，
   避免「提交需求」按钮被顶到视口外点不到。716px 以上不会触发。 */
@media (max-height:720px){
  .kb-side{ max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
}

/* ---------- 分类筛选（沿用卡片标签的胶囊语言） ---------- */
.kb-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.kb-chip{
  display:inline-flex; align-items:center; padding:8px 16px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--white); color:var(--navy-800);
  font-size:13.5px; font-weight:800; line-height:1;
  transition:border-color var(--dur), background var(--dur), color var(--dur);
}
.kb-chip:hover{ border-color:var(--navy); }
.kb-chip--maint.is-on{ background:var(--navy-950); border-color:var(--navy-950); color:var(--white); }
.kb-chip--takeover.is-on{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.kb-chip--security.is-on{ background:var(--red); border-color:var(--red); color:var(--white); }
.kb-chip--ops.is-on{ background:var(--ok); border-color:var(--ok); color:var(--white); }

/* ---------- 文章卡片（纯文字 + 分类彩色左边线） ---------- */
.kb-list{ display:grid; gap:18px; }
/* 筛选靠 hidden 属性隐藏卡片，这里显式兜底 */
.kb-card[hidden]{ display:none; }
.kb-card{
  background:var(--white);
  border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--radius-lg);
  transition:transform var(--dur), box-shadow var(--dur);
}
.kb-card:hover{ transform:translateY(-3px); box-shadow:0 22px 52px rgba(7,26,44,.1); }
.kb-card--takeover{ border-left-color:var(--orange); }
.kb-card--security{ border-left-color:var(--red); }
.kb-card--ops{ border-left-color:var(--ok); }

.kb-card-body{ padding:24px 28px; }
.kb-tag{
  display:inline-block; margin-bottom:12px; padding:4px 12px;
  border-radius:999px; background:var(--soft); color:var(--navy-800);
  font-size:12px; font-weight:800; line-height:1.5;
}
.kb-card--takeover .kb-tag{ background:rgba(233,94,58,.12); color:#b8441f; }
.kb-card--security .kb-tag{ background:var(--red-tint); color:var(--red); }
.kb-card--ops .kb-tag{ background:rgba(31,122,61,.1); color:var(--ok); }

.kb-card h3{ font-size:19.5px; margin:0 0 10px; line-height:1.42; }
.kb-card h3 a{ color:var(--navy-950); transition:color var(--dur); }
.kb-card:hover h3 a{ color:var(--red); }
.kb-card p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin:0 0 16px; }
.kb-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:13px; color:var(--muted);
}
.kb-meta time{ font-variant-numeric:tabular-nums; }
.kb-read{ margin-left:auto; font-weight:800; color:var(--navy-800); transition:color var(--dur); }
.kb-read:hover{ color:var(--red); }

/* ---------- 未找到答案的兜底块 ---------- */
.kb-ask{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  margin-top:24px; padding:26px 30px;
  background:var(--soft); border:1px dashed var(--line);
  border-radius:var(--radius-lg);
}
.kb-ask b{ display:block; font-size:16.5px; color:var(--navy-950); margin-bottom:6px; }
.kb-ask p{ margin:0; color:var(--muted); font-size:14px; line-height:1.7; }

/* ---------- 右侧栏卡片 ---------- */
.kb-side-card{
  padding:24px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.kb-side-card h4{
  display:flex; align-items:center; gap:10px;
  margin:0 0 16px; font-size:16px; font-weight:800; color:var(--navy-950);
}
.kb-side-card h4::before{
  content:""; flex:0 0 auto; width:4px; height:18px; border-radius:2px;
  background:linear-gradient(180deg,var(--red),var(--orange));
}

/* 联系方式与 CTA 卡（首卡，视觉权重最高）
   只放联系方式 + CTA 入口；不再重复底部表单的「留言引导」文案。 */
.kb-side-card--cta{ border-color:rgba(207,28,50,.28); background:linear-gradient(165deg,#fff,#fdf5f6); }
.kb-contact{
  list-style:none; margin:2px 0 0; padding:0; display:grid; gap:11px;
}
/* 分类页侧栏的转化入口（知识中心首页同位置是留言表单）。
   ⚠️ 必须显式写满宽 + flex 居中：.button 本身是 inline-flex，
      不声明就会退化成「只有文字那么宽」的按钮 —— 实测在 348px 的卡里只有 147px 宽，
      左对齐悬在卡片里，旁边空出半张卡。
   视觉对齐 .kb-submit：同一个位置、同一个「提交」动作，两页应当长得一样，
   所以同样用 红→橙 渐变 + 10px 圆角，而不是 .button 的纯红 + 6px 圆角。 */
.kb-cta-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; margin-top:20px;
  border:0; border-radius:10px;
  background:linear-gradient(135deg,var(--red) 0%,var(--orange) 100%);
  box-shadow:0 10px 22px rgba(207,28,50,.22);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.kb-cta-btn:hover{
  background:linear-gradient(135deg,var(--red) 0%,var(--orange) 100%);
  transform:translateY(-2px); box-shadow:0 14px 30px rgba(207,28,50,.32); filter:brightness(1.04);
}
.kb-cta-btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(207,28,50,.26); }

/* 内容列末尾的「继续浏览」双卡：按主题查看 / 常被问到的问题。
   这两块都是站内导航，同列相邻比塞进吸附侧栏更合理；侧栏只留转化卡，
   吸附才吸得住（原因见 .kb-side 与 .kb-side-card--cta 的说明）。 */
.kb-more{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
@media (max-width:760px){ .kb-more{ grid-template-columns:1fr; } }
.kb-form{
  display:grid; gap:11px;
  margin-top:20px; padding-top:20px;
  border-top:1px solid rgba(207,28,50,.16);
}
.kb-form-lead{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.6; }
.kb-field{ display:grid; gap:5px; }
.kb-field label{ font-size:12.5px; font-weight:700; color:var(--navy-800); letter-spacing:.01em; }
.kb-field label em{ color:var(--red); font-style:normal; font-weight:800; }
.kb-input{
  width:100%; box-sizing:border-box;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--white); color:var(--navy-950);
  font-family:inherit; font-size:14px; line-height:1.45;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kb-input::placeholder{ color:#9aa8b5; }
.kb-input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(207,28,50,.12); }
.kb-textarea{ min-height:56px; resize:vertical; }
.kb-submit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; margin-top:3px; padding:0 16px;
  border:0; border-radius:10px; cursor:pointer; box-sizing:border-box;
  background:linear-gradient(135deg,var(--red) 0%,var(--orange) 100%);
  color:var(--white);
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 22px rgba(207,28,50,.22);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.kb-submit b{ font-size:17px; line-height:1; transition:transform var(--dur) var(--ease); }
.kb-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(207,28,50,.32); filter:brightness(1.04); }
.kb-submit:hover b{ transform:translateX(3px); }
.kb-submit:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(207,28,50,.26); }
.kb-submit[aria-busy="true"]{ cursor:progress; opacity:.86; }
.kb-submit[aria-busy="true"] b{ display:none; }
.kb-submit[aria-busy="true"]::after{
  content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:var(--white);
  animation:kbspin .7s linear infinite;
}
@keyframes kbspin{ to{ transform:rotate(360deg); } }
.kb-form-status{ margin:0; font-size:12.5px; line-height:1.55; }
.kb-form-status.is-success{ color:var(--ok); font-weight:700; }
.kb-form-status.is-error{ color:var(--red); font-weight:700; }
.kb-contact li{ display:flex; align-items:baseline; gap:10px; font-size:13.5px; line-height:1.5; }
.kb-contact span{ flex:0 0 auto; width:34px; color:var(--muted); font-size:12.5px; }
.kb-contact a,.kb-contact b{ color:var(--navy-950); font-weight:700; word-break:break-all; }
.kb-contact a:hover{ color:var(--red); }

/* 分类导航（带计数，点击即筛选，不跳未建页面） */
.kb-cats{ display:grid; gap:6px; }
.kb-cats a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:var(--radius);
  font-size:14px; font-weight:700; color:var(--navy-800);
  transition:background var(--dur), color var(--dur);
}
.kb-cats a:hover{ background:var(--soft); color:var(--red); }
.kb-cats a.is-on{
  background:linear-gradient(135deg,rgba(207,28,50,.08),rgba(233,94,58,.08));
  color:var(--red);
}
.kb-cats .count{
  flex:0 0 auto; padding:2px 8px; border-radius:10px;
  background:var(--soft); color:var(--muted); font-size:12px; font-weight:800;
}
.kb-cats a.is-on .count{ background:var(--red); color:var(--white); }

/* 热门文章（编号列表） */
.kb-pop{ display:grid; gap:14px; }
.kb-pop-item{ display:flex; gap:12px; align-items:flex-start; }
.kb-pop-item .num{
  flex:0 0 auto; width:24px; height:24px; margin-top:2px;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--red),var(--orange));
  color:var(--white); font-size:12px; font-weight:800; line-height:1;
}
.kb-pop-item a{ font-size:13.5px; color:var(--navy-800); line-height:1.55; transition:color var(--dur); }
.kb-pop-item a:hover{ color:var(--red); }

/* ---------- 主题标签云（内容区收尾，浅色承接，站内内链集群） ----------
   用浅色而非深色：它属于知识中心的内容收尾，不是页尾转化带；
   若用深色，会与下方的 .inquiry、footer 粘成一片深色块。 */
.kb-cloud{ background:var(--soft); border-top:1px solid var(--line); padding:60px 0 64px; }
.kb-cloud-head{ text-align:center; margin-bottom:28px; }
.kb-cloud-head h2{ color:var(--navy-950); font-size:22px; margin:0; }
.kb-cloud-head p{ color:var(--muted); font-size:13.5px; margin:10px 0 0; }
.kb-cloud-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:920px; margin:0 auto;
}
.kb-cloud-tags a{
  display:inline-flex; padding:8px 15px; border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  color:var(--navy-800); font-size:13.5px;
  transition:background var(--dur), border-color var(--dur), color var(--dur);
}
.kb-cloud-tags a:hover{
  background:linear-gradient(135deg,var(--red),var(--orange));
  border-color:transparent; color:var(--white);
}

/* ---------- 文章分页（每页 4 篇，筛选结果不足一页时由 JS 隐藏） ---------- */
.kb-pager{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-top:30px;
}
/* 兜底：作者样式里的 display:flex 会盖掉 [hidden] 的 display:none */
.kb-pager[hidden]{ display:none; }
.kb-pager-pages{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.kb-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--white); color:var(--navy-800);
  font-family:inherit; font-size:14px; font-weight:800; line-height:1;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kb-page:hover{ border-color:var(--red); color:var(--red); }
.kb-page--step{ padding:0 16px; font-size:13.5px; font-weight:700; color:var(--muted); }
.kb-page.is-on{
  border-color:transparent; color:var(--white);
  background:linear-gradient(135deg,var(--red),var(--orange));
  box-shadow:0 8px 20px rgba(207,28,50,.26);
}
.kb-page.is-on:hover{ color:var(--white); }
.kb-pager-info{ margin:0; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  /* ⚠️ 必须是 minmax(0,1fr)，不能写成 1fr。
     1fr 等价于 minmax(auto,1fr)，auto 的最小值 = min-content，会参与列宽计算：
     正文里 .article-table{min-width:520px} 的对照表会把这唯一一列撑到 520px，
     390 视口下整列溢出到屏幕外（.container 358px，实测 .kb-main 被撑到 520px）。
     外层 overflow-x:auto 挡不住这个传导 —— 那是内容层面的滚动，
     列宽是由 grid item 的 min-content 决定的。实测数据见 SKILL.md。 */
  .kb-wrap{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .kb-side{ position:static; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start; }
}
@media (max-width:760px){
  .kb-card-body{ padding:20px 20px 22px; }
  .kb-card h3{ font-size:17.5px; }
  .kb-ask{ padding:22px; }
  .kb-stats{ gap:26px; }
  .kb-stat b{ font-size:26px; }
  .kb-side{ grid-template-columns:1fr; }
  .kb-cloud{ padding:44px 0 48px; }
  .kb-pager{ margin-top:24px; }
  .kb-page{ min-width:38px; height:38px; padding:0 10px; }
  .kb-page--step{ padding:0 13px; font-size:13px; }
}

/* ============================================================
   F) 知识文章详情页（2026-09-15 新增）
   ------------------------------------------------------------
   背景：知识中心 8 篇文章的「阅读全文 →」此前指向服务页
   （website-maintenance.html 的标题是「网站维护服务」），
   点一篇文章会落到服务介绍页。本层为文章详情页提供长文排版。
   站内其余内页都是构件化排版（卡片 / 步骤 / 表格拼块），
   没有正文级样式层 —— 这是本站第一次出现真正的长文阅读。
   ⚠️ 配色、圆角、字号一律沿用 design-system.css 的既有 token，
      不引入新的十六进制色值。
   用法见 article-*.html（由 mk_article_pages.py 生成）。
   ============================================================ */

/* ---------- F1. 文章头（.page-hero 的紧凑变体） ----------
   默认 .page-hero 是 120px/72px 的大首屏，给服务介绍页用的；
   文章页要把视觉重量让给正文，压缩到 112px/56px。 */
.page-hero--article{ padding:112px 0 56px; }
.page-hero--article h1{ font-size:clamp(27px,3.4vw,40px); line-height:1.34; max-width:24em; }
/* 2026-09-15：首屏不再放导语 —— 摘要只保留正文开头的 .article-summary 一处，
   否则同一段文字在首屏与正文各出现一次，往下滚要读两遍（参考站结构同此）。 */

/* 分类标签：深色首屏上的变体（.kb-tag 是浅底深字，在深色上不能用） */
.article-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 13px; border-radius:999px; margin-bottom:16px;
  background:rgba(255,255,255,.12); color:var(--white);
  font-size:12.5px; font-weight:800; letter-spacing:.02em;
}
.article-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange-light),var(--orange));
}

/* 元信息行：发布日期 · 阅读次数 · 预计阅读时长。
   ⚠️ 阅读次数在原型里是占位值（见 article-*.html 内的注释），
      上线后由后台按文章 ID 注入真实数值。 */
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px;
  margin-top:22px; font-size:13.5px; color:#9fb0c0;
}
.article-meta span{ display:inline-flex; align-items:baseline; gap:6px; }
.article-meta b{ color:var(--white); font-weight:800; font-variant-numeric:tabular-nums; }
.article-meta .sep{ color:#5e7184; }

/* ---------- F2. 正文排版 ----------
   正文文字限宽 720px（中文约 43 字/行，回看行首最省力）；
   对照表与问答块**破栏**到 .kb-main 的整宽（1240 容器下约 848px）——
   三列对照表塞进 720px 会反复折行，末行只剩一两个字。
   ≤1080px 转单列后统一放开，避免「一列宽一列窄」的错位感。 */
.article-body{ font-size:16px; line-height:1.92; color:var(--ink); }
.article-body > p,
.article-body > h2,
.article-body > h3,
.article-body > ul,
.article-body > ol,
.article-body > .article-summary,
.article-body > .article-toc-card,
.article-body > .article-callout{ max-width:720px; }
.article-body > *{ margin:0 0 20px; }
.article-body > *:last-child{ margin-bottom:0; }
.article-body p{ color:#2b3a48; }

.article-body h2{
  margin:46px 0 18px; color:var(--navy-950);
  font-size:clamp(21px,2.4vw,26px); line-height:1.44; letter-spacing:-.01em;
  scroll-margin-top:120px;              /* 吸顶头部 102px + 余量 */
}
.article-body h2:first-child{ margin-top:0; }
/* 小节标题上方的红橙渐变短线 —— 站内卡片序号同款语言 */
.article-body h2::before{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  margin-bottom:14px;
  background:linear-gradient(90deg,var(--red),var(--orange));
}
.article-body h3{
  margin:30px 0 12px; color:var(--navy-950);
  font-size:17.5px; line-height:1.55; scroll-margin-top:120px;
}

/* 摘要框（正文第一块：浅底 + 左侧红橙渐变条）。
   参考站的文章页也是这个位置放摘要；首屏不再重复这段文字。
   写成 .article-body > .article-summary 而不是 .article-summary：
   一要提高特异性盖过上面那条 .article-body > *{margin}（0,1,1），
   二要盖过 .article-body p{color:…}，否则浅底上的正文色会被打回深灰。
   overflow:hidden 让渐变条被卡片圆角裁掉，不用手算 left/bottom 的偏移。 */
.article-body > .article-summary{
  position:relative; margin:0 0 34px; padding:22px 26px;
  border-radius:var(--radius-lg); background:var(--soft); overflow:hidden;
  font-size:16.5px; line-height:1.88; color:var(--navy-900);
}
.article-body > .article-summary::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--red),var(--orange));
}
.article-body > .article-summary p{ margin:0; color:var(--navy-900); font-weight:500; }

/* 列表：去掉系统符号，换成红橙小方点 / 衬线序号（与卡片序号同源） */
.article-body ul,
.article-body ol{ padding-left:0; list-style:none; display:grid; gap:11px; }
.article-body li{ position:relative; padding-left:26px; line-height:1.88; color:#2b3a48; }
.article-body li > ul,
.article-body li > ol{ margin-top:11px; }
.article-body ul > li::before{
  content:""; position:absolute; left:6px; top:.75em;
  width:7px; height:7px; border-radius:2px;
  background:linear-gradient(135deg,var(--red),var(--orange));
}
.article-body ol{ counter-reset:artol; }
.article-body ol > li{ padding-left:30px; counter-increment:artol; }
.article-body ol > li::before{
  content:counter(artol,decimal-leading-zero);
  position:absolute; left:0; top:.2em;
  font-family:var(--serif); font-size:13px; font-weight:800;
  color:var(--red); font-variant-numeric:tabular-nums;
}

/* 提示框：默认中性（navy 左条 + 浅底）；--warn 用于风险提示 */
.article-callout{
  margin:28px 0; padding:20px 24px;
  border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--radius); background:var(--soft);
}
.article-callout b{
  display:block; margin-bottom:8px;
  color:var(--navy-950); font-size:15px; line-height:1.5;
}
.article-callout p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.82; }
.article-callout p + p{ margin-top:10px; }
.article-callout--warn{ border-left-color:var(--red); background:var(--red-tint); }
.article-callout--warn b{ color:var(--red-dark); }

/* 对照表：窄屏横向滚动，不压缩单元格 */
.article-table-wrap{ margin:28px 0; overflow-x:auto; }
.article-table{ width:100%; min-width:520px; border-collapse:collapse; font-size:14.5px; }
.article-table th,
.article-table td{
  padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.72;
}
.article-table th{
  background:var(--soft); color:var(--navy-950);
  font-size:13px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.article-table td{ color:#2b3a48; }
.article-table tbody tr:last-child td{ border-bottom:0; }
.article-table td:first-child{ color:var(--navy-950); font-weight:700; }
/* 首列不折行：中文长条目（如「安全检查（账号、文件、日志）」）在等分列宽下
   会折成「…文件、日 / 志）」，末行只剩两个字，非常难看。
   首列本身是短标签性质，nowrap 后由剩余两列分担换行即可。 */
.article-table th:first-child,
.article-table td:first-child{ white-space:nowrap; }

/* 折叠问答：原生 details/summary，不需要 JS */
.article-faq{ display:grid; gap:12px; margin:28px 0; }
.article-faq details{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--white); overflow:hidden;
}
.article-faq summary{
  display:flex; align-items:flex-start; gap:12px;
  padding:17px 22px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:800; line-height:1.62; color:var(--navy-950);
  transition:background var(--dur);
}
.article-faq summary::-webkit-details-marker{ display:none; }
.article-faq summary::after{
  content:"+"; flex:0 0 auto; margin-left:auto;
  color:var(--red); font-size:19px; font-weight:800; line-height:1.3;
  transition:transform var(--dur) var(--ease);
}
.article-faq details[open] summary{ background:var(--soft); }
.article-faq details[open] summary::after{ transform:rotate(45deg); }
.article-faq .article-faq-body{
  padding:2px 22px 20px; color:var(--muted);
  font-size:14.5px; line-height:1.88;
}
.article-faq .article-faq-body p{ margin:0; }
.article-faq .article-faq-body p + p{ margin-top:10px; }

/* ---------- F3. 正文内目录卡（2026-09-15 从右栏搬进正文） ----------
   参考站的文章页把目录做成正文开头的一张卡，右栏留给询盘表单。
   搬过来的两个理由：
     ① 长文往下读时，右栏吸附一张能提交的表单比一份早已滚过去的目录有用；
     ② 目录在正文里能跟着正文一起限宽（720px），不会被右栏挤成窄条。
   用原生 <details> 做折叠：自带开合与键盘支持，零 JS；默认 open，
   首屏就能看到文章结构。 */
.article-body > .article-toc-card{
  margin:0 0 34px; padding:0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--soft); overflow:hidden;
}
.article-toc-card > summary{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px; cursor:pointer; list-style:none;
  font-size:15.5px; font-weight:800; color:var(--navy-950);
}
.article-toc-card > summary::-webkit-details-marker{ display:none; }
/* 标题前的红橙渐变短竖线：与 .kb-side-card h4 同款，站内卡片标题统一语言 */
.article-toc-card > summary::before{
  content:""; flex:0 0 auto; width:4px; height:18px; border-radius:2px;
  background:linear-gradient(180deg,var(--red),var(--orange));
}
/* 折叠图标推到最右：它是「整行都能点」的提示，不是独立按钮 */
.article-toc-card .toc-icon{
  display:inline-flex; margin-left:auto; color:#9aa8b5;
  transition:color var(--dur);
}
.article-toc-card > summary:hover .toc-icon{ color:var(--red); }
.article-toc-card[open] > summary{ border-bottom:1px solid var(--line); }
.article-toc-card > .article-toc{ padding:14px 22px 18px; }

.article-toc{ display:grid; gap:2px; counter-reset:arctoc; }
.article-toc a{
  display:flex; gap:11px; padding:8px 12px;
  border-radius:var(--radius);
  font-size:13.5px; line-height:1.58; color:var(--navy-800);
  transition:background var(--dur), color var(--dur);
}
.article-toc a::before{
  content:counter(arctoc,decimal-leading-zero); counter-increment:arctoc;
  flex:0 0 auto; padding-top:1px;
  font-family:var(--serif); font-size:12px; font-weight:800;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.article-toc a:hover{ background:var(--soft); color:var(--red); }
/* 卡片内本身就是浅底，hover 再铺浅底等于没反应；这里换成白色 */
.article-toc-card .article-toc a:hover{ background:var(--white); }
.article-toc a:hover::before{ color:var(--red); }
.article-toc a.is-active{
  background:linear-gradient(135deg,rgba(207,28,50,.08),rgba(233,94,58,.08));
  color:var(--red);
}
.article-toc a.is-active::before{ color:var(--red); }

/* ---------- F4. 右栏 ----------
   与知识中心同一位置完全一致：一张「联系我们 + 需求表单」卡
   （.kb-side-card--cta / .kb-contact / .kb-form，样式定义在知识中心那一段，
     本层不重复定义 —— 见 mk_article_pages.py 的 SIDE_CARD，两处逐字同源）。
   只放一张卡的原因：sticky 只在「元素高度 ≤ 视口高度 − top」时才有位置可停，
   这张卡约 600px、可用约 768px，吸附成立（判据见 SKILL.md）。
   目录不在这里 —— 它搬进了正文（见 F3）。 */

/* ---------- F5. 页尾：上下篇 + 相关文章 ---------- */
.article-pager{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  margin-top:44px; padding-top:32px; border-top:1px solid var(--line);
}
.article-pager-link{
  display:grid; gap:7px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--white);
  transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.article-pager-link:hover{
  border-color:rgba(207,28,50,.5); transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(7,26,44,.09);
}
.article-pager-link span{
  font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--muted);
}
.article-pager-link b{
  font-size:15px; line-height:1.55; color:var(--navy-950);
  transition:color var(--dur);
}
.article-pager-link:hover b{ color:var(--red); }
.article-pager-link--next{ text-align:right; }

/* 相关文章：标题左对齐的标题组（.block-head 是居中版） */
.article-refs-head{ max-width:760px; margin:0 0 28px; }
.article-refs-head h2{ font-size:clamp(24px,3vw,32px); line-height:1.3; }
.article-refs-head p{ color:var(--muted); font-size:15.5px; margin:12px 0 0; }
/* .card 是 flex column，直接放 .kb-tag 会被拉伸成一条通栏横条
   （看起来像分隔线而不是标签）。必须显式 align-self:flex-start 收回文字宽度。 */
.article-refs .card > .kb-tag{ align-self:flex-start; margin-bottom:2px; }

/* ---------- F6. 响应式 ---------- */
@media (max-width:1080px){
  /* 本断点下 .kb-wrap 已转单列（见上）：正文不再限宽 */
  .article-body > *{ max-width:none; }
  /* 目录不转两列：8 篇的小节数是 5 或 6 —— 6 项排 3+3 正好，
     5 项会落成 4+1，末行只剩一项悬在那儿（与 .feature-grid 的孤卡同源）。
     项数不固定就不该用固定列数，保持单列。 */
}
@media (max-width:760px){
  .page-hero--article{ padding:96px 0 44px; }
  .article-body{ font-size:15.5px; line-height:1.88; }
  .article-body h2{ margin-top:38px; }
  .article-body > .article-summary{ padding:18px 20px 18px 22px; font-size:15.5px; }
  .article-toc-card > summary{ padding:14px 18px; }
  .article-toc-card > .article-toc{ padding:12px 18px 16px; }
  .article-pager{ grid-template-columns:1fr; }
  .article-pager-link--next{ text-align:left; }
}

/* ============ G. 案例页「维护过程留痕」 ============ */
/* 时间轴形态：序号 + 事件类型 | 症状与处置 | 可放大的脱敏留痕图。
   三条信息平行排列，右侧的图承担「证据」的角色；
   退到窄屏时图落到正文下方，不退化成小得看不清的缩略图。 */
.record-list{ display:grid; gap:14px; }

.record{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 260px;
  gap:0 26px;
  align-items:start;
  padding:20px 22px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
}

.rec-when{ display:flex; align-items:center; padding-top:3px; }
.rec-no{
  font-family:var(--serif); font-size:21px; line-height:1;
  color:var(--red); letter-spacing:.02em;
}
/* 渐变短线接在序号之后，和站内卡片序号的写法一致 */
.rec-no::after{
  content:""; display:inline-block; width:14px; height:2px;
  margin:0 9px; vertical-align:middle; border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--orange));
}
.rec-kind{ font-size:12.5px; line-height:1.4; color:var(--muted); white-space:nowrap; }

/* 正文限宽：不加这一条，1440 下每行会到 55 个汉字以上，读起来散 */
.rec-body{ max-width:660px; }
.rec-body h3{ margin:0 0 7px; color:var(--navy-900); font-size:16.5px; line-height:1.5; }
.rec-body p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.78; }

.rec-shot{
  position:relative; display:block; width:100%; padding:0;
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:var(--soft); cursor:zoom-in;
  transition:border-color .2s ease;
}
/* 脱敏图在生成时已统一为 16:10，这里的 cover 不会裁掉内容。
   aspect-ratio 是兜底：万一以后换了比例的图，也不会把卡片撑变形。 */
.rec-shot img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.rec-shot:hover{ border-color:var(--red); }

.rec-zoom{
  position:absolute; right:8px; bottom:8px;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:rgba(16,25,34,.76); color:var(--white);
  font-size:11.5px; line-height:1.2;
}
.rec-zoom svg{
  width:12px; height:12px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
}

/* ---------- 放大查看 ---------- */
.shot-dialog{
  width:auto; max-width:min(94vw,980px);
  max-height:none; padding:0; border:0; overflow:visible;
  background:transparent;
}
.shot-dialog::backdrop{ background:rgba(7,26,44,.86); }
.shot-dialog[open]{ animation:shotIn .22s ease; }
@keyframes shotIn{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:none; }
}
.shot-dialog img{
  display:block; margin:0 auto;
  width:auto; height:auto;
  /* 上限必须用 vw 而不是 100%：dialog 是 shrink-to-fit（宽度由内容决定），
     图片若写 max-width:100% 就等于「宽度取决于容器、容器宽度取决于内容」，
     互相等待的结果是两边都塌成 0 —— 表现是遮罩出来了、弹窗却看不见。
     实测过这个坑，别改回去。 */
  max-width:min(94vw,980px); max-height:calc(100vh - 130px);
  border-radius:12px; background:var(--white);
  box-shadow:0 30px 80px rgba(7,26,44,.5);
}
.shot-cap{
  max-width:min(94vw,980px); margin:12px auto 0;
  color:rgba(255,255,255,.74); font-size:13.5px; line-height:1.7;
}
/* 关闭按钮移到图外右上角：图上叠按钮会挡住截图内容 */
.shot-dialog .dialog-close{ right:-8px; top:-40px; color:rgba(255,255,255,.78); font-size:30px; }
.shot-dialog .dialog-close:hover{ color:var(--white); }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  /* 图落到正文下方，并限制宽度 —— 整栏铺满会高得离谱，一条记录占一屏 */
  .record{ grid-template-columns:112px minmax(0,1fr); }
  .rec-body{ max-width:none; }
  .rec-shot{ grid-column:2; max-width:400px; margin-top:14px; }
}
@media (max-width:760px){
  .record{ grid-template-columns:1fr; padding:18px; }
  .rec-when{ padding-top:0; margin-bottom:11px; }
  .rec-shot{ grid-column:1; max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .shot-dialog[open]{ animation:none; }
  .rec-shot{ transition:none; }
}
/* ============ /G ============ */