/* ==========================================================================
   pFMT 专题内容层样式
   依赖 ../assets/css/style.css（v2 设计系统：令牌 / 导航 / 页脚 / 组件）
   本文件只负责 pFMT 页面自有 class 词汇的版式映射，不重复定义设计令牌。
   ========================================================================== */

/* ---------- 2. 区块与底色节奏 ---------- */
.bg-a { background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 82%); }
.bg-b { background: #fff; }
.bg-c { background: var(--bg-soft); }
.bg-d { background: var(--bg-alt); }
/* `.section-high` 只作语义标记，**不得再声明 background**。
   它历史上与 `.bg-d` 同色，且与 `.bg-*` 选择器同级、位置靠后，
   于是把所有带该类的区块（本页 8 处、FAQ 1 处）统一压成 #FBFCFC：
   「技术与流程」并入专题首页后，05–13 连续 9 段底色完全相同，
   节间消失掉，只剩一片空白 —— 观感就是"这几段后面的留白特别多"。
   底色一律由 `.bg-a/b/c/d` 决定。 */
.text-center { text-align: center; }

/* ---------- 3. 区块标题（统一使用主站 .section-head，见 assets/css/style.css） ---------- */
/* .subtitle 在 pFMT 页承担主站 .lead 的角色（区块导语），字号/行高/间距与主站 v3 的 .lead 对齐 */
.section-head .subtitle { margin-top: 18px; }
/* .subtitle / .wp-subtitle 的字阶与主站 .lead 共用一条规则（见 style.css "导语"），
   这里只留专题自己的间距。 */
.sub-hero { padding: clamp(36px, 4vw, 56px) 0 clamp(28px, 3vw, 40px); }

/* ---------- 4. 首屏 ---------- */
/* pFMT 专题首屏。**故意不挂主站的 `.hero` 类**（2026-10-10 改）：
   那个类是首页全屏首屏的，挂上就会连带继承 `.hero { padding: clamp(56px,7vw,104px) }`、
   `.hero::after` 光晕、`.hero h1 { max-width: 15ch }` 这些为首页写的规则，
   本文件只能一条条抵消——改前这里 25 处 !important 基本都是在打这场仗，
   而且主站以后改首页首屏会静默波及专题内页。断掉继承后这些抵消全部删除。 */
.section-hero {
  position: relative; overflow: hidden;
  display: block;
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6.4vw, 92px);
  background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%);
}
.section-hero .container { position: relative; z-index: 1; }
/* 品牌光晕：与主站 page-hero 一致的内页首屏纵深 */
.section-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(88% 72% at 88% 0%, rgba(0, 176, 154, .11) 0%, rgba(0, 176, 154, 0) 62%);
}
.section-hero + .section { padding-top: clamp(48px, 5vw, 84px); }
.hero-content { flex: 1 1 520px; min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* 首屏文字的错峰落位与主站内页共用一组规则（见 style.css "内页首屏"），
     这里只剩专题独有的影像卡。 */
  .section-hero .hero-visual { animation: media-in 1s var(--ease-out) .16s both; }
}
.section-hero h1 {
  font-size: clamp(2.35rem, 1.28rem + 4vw, 4.25rem);
  font-weight: 700; line-height: 1.16; margin: 0;
  text-wrap: balance;
}
.section-hero h1 span { display: block; }
/* 首屏主标题 = 引导词 / 品牌名（固定一行）/ 英文名 三行，字号与间距全部由本文件控制
   （页面里不写内联字号） */
.section-hero .hero-title-oneline { max-width: none; display: flex; flex-direction: column; }
/* 首个 span 作为 eyebrow（引导词），与主站区块/首屏一致 */
.section-hero h1 span:nth-child(1) {
  font-size: .78125rem; font-weight: 700;
  letter-spacing: .18em; color: var(--brand-ink);
  margin-bottom: 14px;
}
.section-hero h1 span:nth-child(1)::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 22px; height: 2px; margin-right: 10px; border-radius: 2px; background: var(--brand);
}
.section-hero h1 span:nth-child(2) {
  font-size: clamp(2.35rem, 1.28rem + 4vw, 4.25rem);
  font-weight: 700; line-height: 1.14;
  letter-spacing: .005em; margin-bottom: 10px;
}
.section-hero h1 span:nth-child(3) {
  font-size: .9375rem; font-weight: 400;
  color: var(--muted); letter-spacing: .02em;
}
/* 注册商标标记统一用字面量 ®（不再包 <sup>）：® 字形本身即小号上标式样，
   字号随正文等比缩放，标题与正文的位置一致；主站导航/页脚同样用字面量 */
.section-hero .subtitle { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.9; margin-top: 24px; max-width: 56ch; }
.hero-visual { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.hero-visual img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-footnote {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.75; color: var(--muted);
}
/* ---------- 5. 数据条 ---------- */
/* 数据条：四项等高，标签预留两行——避免"发表论文（含 Nature Biotechnology 等）"
   折两行把整行拉高、与其余三项底面不齐 */
/* 专题首页的数据条不再单独定义：标记已改用主站的 .stats / .stat（见 pfmt/index.html），
   栅格、内边距、分隔线、数字与标签的字阶全部走 theme/style.css §12 那一套。
   `.stat-label` 保留：卡片形态的数字卡仍在用它（见下方 .card.card-stat）。 */
.stat-label {
  display: flex; align-items: center; margin-top: 12px; font-size: .875rem; line-height: 1.6;
  color: var(--muted); min-height: 3.2em; text-wrap: pretty;
}
.card-stat { display: flex; align-items: baseline; gap: 10px; }
.card-stat .num, .card-stat .num-circle { font-weight: 700; color: var(--brand-ink); }
/* 数字卡（.card.card-stat）：图标 + 标题 + 说明的常规左对齐卡片。
   2026-10-10：原先还有一版"数值型卡"（大号 .stat-number + 小字说明，靠
   `:has(.stat-number)` 分支），页面上已全部换成图标卡、该分支 0 引用，故删除；
   同时把选择器里的 `:not(:has(.stat-number))` 守卫去掉（已无第二种形态）。
   需要那一版样式时从 git 历史取回即可。 */
.card.card-stat { display: block; padding: 26px 24px; }
.card.card-stat .card-icon { margin-bottom: 14px; }
.card.card-stat .stat-label {
  display: block; margin: 0; font-size: .9375rem; font-weight: 600;
  line-height: 1.5; color: var(--ink);
}
.num-circle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px;
  background: var(--brand-soft); font-size: .875rem;
}

/* ---------- 6. 分栏 ---------- */
/* 左右两栏垂直居中，避免一侧明显短于另一侧时留下大片空白 */
.two-col { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.col-text, .col-visual { min-width: 0; }
.col-visual img { border-radius: var(--r); border: 1px solid var(--line); }
/* 双轴耦合：三栏 = 疾病层面 / 耦合图标 / 个体层面（DOM 就是三个直接子元素） */
.dual-axis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
.axis-col { display: block; }
.axis-col h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.axis-col > div { margin-bottom: 0; }
.highlight-box {
  background: var(--brand-tint); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-sm);
  padding: 20px 24px;
}
.highlight-box h4 { margin-bottom: 8px; }
/* 表格里 .col-highlight 是「高亮列」单元格，不是信息框 */
table .col-highlight, th.col-highlight, td.col-highlight {
  background: var(--brand-tint); color: var(--ink); font-weight: 600;
}
th.col-highlight { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- 7. 卡片 ---------- */
.card-grid-2, .card-grid-3, .card-grid-4 { display: grid; gap: var(--sp-gap, 24px); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-desc {
  list-style: none; padding: 0; margin: 0;
  font-size: .9375rem; line-height: 1.75; color: var(--muted);
}
.card-desc li { position: relative; padding-left: 16px; margin: 7px 0; }
.card-desc li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}
/* 序号卡：圆标 + 内容横向排列（2026-10-10 起四张卡一致；原「菌群全基因组测序」
   卡内嵌的取样器配图已移到 /quantitest/「居家采样与送检」，该卡恢复横排，
   `.card-numbered img` 规则随之删除） */
.card-numbered { display: flex; gap: 16px; align-items: flex-start; }
.card-numbered .num-circle { margin-bottom: 0; }
.card-numbered > div { min-width: 0; }
/* 「全覆盖 / 0 / 4」区间统计卡：三列一行；
   原为页面内联 1fr×3，窄屏（≤420px）会被 nowrap 数字顶宽导致整页横向溢出 */

/* ---------- 8. 流程 / 阶段 ---------- */
/* AI 分析流程（`.flow`）：五步纵向流程。
   一步 = 左侧序号导轨（序号之间有连线，流程才读得出来）
        + 右侧「文字 / 配图」卡片（各占一栏，中间一条细分隔线）。
   旧版没有连线、文字顶对齐、五张图各按自身比例排（1.68/1.24/1.54/1.30/4.00），
   结果是每行左侧一大片空洞、整条流程高度参差。现在配图统一 16:10 画幅，
   五行等高，文字在栏内垂直居中，空白变成卡片内边距。 */
.flow { display: grid; gap: 20px; }
.flow-step {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px; align-items: start;
}
/* 序号之间的连线：从本步圆标下方穿过行距，接到下一步的圆标 */
.flow-step:not(:last-child)::before {
  content: ''; position: absolute; left: 25px; top: 56px; bottom: -20px;
  width: 2px; border-radius: 1px; background: var(--line-2);
}
.flow-rail { position: relative; z-index: 1; }
.flow-num {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--brand); color: var(--brand-ink);
  font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.flow-card {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
.flow-text { align-self: center; min-width: 0; padding: 28px 44px; }
/* 标题上方补一道品牌短线：给文字栏一个视觉锚点，
   否则两三行文字悬在卡片正中会显得"没落位"（与全站 .section-head 同一手法） */
.flow-text h3 { position: relative; margin: 0 0 12px; padding-top: 20px; font-size: 1.1875rem; line-height: 1.5; }
.flow-text h3::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 24px; height: 2px; border-radius: 2px; background: var(--brand);
}
.flow-text p { margin: 0; max-width: 34em; font-size: 1.0625rem; line-height: 1.78; color: var(--muted); }
/* 配图栏：统一 3:2 画幅，`object-fit: contain` —— 只缩不放、整张完整可见。
   五张原图比例是 1.68 / 1.24 / 1.54 / 1.30 / 4.00，跨度极大：
   用 cover 虽然能把每一格填满，但 4:1 的胶囊横幅会被裁掉 60% 以上（只能看到中间一段），
   1.24 / 1.30 的两张 3D 渲染也会切到底座。
   改用 contain 后：画幅仍然统一、五行等高（行高由 3:2 决定，不受各图比例影响），
   每张图都完整显示；多余部分留白——因为五张图的底色都是纯白、面板也是纯白，
   这点留白在场面上是无缝的，不会出现"灰框里套白图"的接缝。 */
.flow-card > img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: contain; object-position: center;
  border-left: 1px solid var(--line); background: #fff;
}
.phase-timeline { display: grid; gap: 22px; }
.phase-block { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 24px 26px; }
.phase-block h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.phase-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.phase-step { display: grid; grid-template-columns: 78px 1fr; gap: 16px; padding: 9px 0; align-items: baseline; }
.phase-step + .phase-step { border-top: 1px dashed var(--line); }
.day-badge { font-size: .8125rem; font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.step-detail { font-size: .9375rem; line-height: 1.7; color: var(--muted); }
.phase-footnote { margin-top: 20px; font-size: .8125rem; line-height: 1.7; color: var(--muted); }

/* ---------- 9. FAQ ---------- */
/* minmax(0,1fr)：单列网格轨道默认按内容最小宽度撑开，窄屏（≤420px）会被
   QA 里的长串（如「5×10¹⁰ CFU」、nowrap 表格列）顶宽，导致整页横向溢出 */
.faq-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq-group, .faq-qa, .faq-a, .faq-qa .qa-stats, .faq-qa .qa-cards { min-width: 0; }
.faq-a { overflow-wrap: anywhere; }
/* 页内吸顶目录条（.toc-bar / .toc-inner / .toc-track / .toc-link）2026-10-10
   已上移到全站设计系统 theme/style.css（§23b）：它现在服务 4 页，其中
   /privacy/ 是主站页面，规则放在本文件里主站就拿不到。这里只保留
   **专题三页自己的锚点落位**（见下条）。 */
/* ---------- 锚点落位（吸顶避让）----------
   浏览器把「滚动容器的 scroll-padding」与「目标元素的 scroll-margin」**相加**。
   导航那一半由主站统一负责（theme/style.css: html { scroll-padding-top: var(--header-pad) }），
   本专题**不再把它归零**、也不重复扣一遍——这里只写「在导航之外还要额外避让多少」：
     · 桌面：页内吸顶目录约 69px + 呼吸 ≈ 62px
     · ≤1080px：页内目录改 static，不需额外避让，故为 0
   两段合计仍是 88 + 62 = 150px，与调整前逐像素一致；好处是导航高度只有一个来源，
   主站改 --header-pad 时专题跟着走（此前是主站设 88、专题归零后自己再写 150，
  同一个数在两处各写一遍，改一处就会错位）。
  深链接直接打开 #safety 同样走这套值，不会被目录条或导航盖住。
  （白皮书不适用这一套：它的目录 2026-10-15 起在宽屏是右侧栏，
   `#s9` / `#refs` 的落位见下一条注释。） */
.faq-group { scroll-margin-top: calc(150px - var(--header-pad)); }

/* 白皮书章节锚点：避让「吸顶导航 + 页内目录」两段里的目录那一段
   · ≥1200px：目录已是右侧栏（见 §12b），顶部只剩吸顶导航 → 只留 24px 呼吸
   · 1200–1080px：目录仍是吸顶横条 ≈69px + 呼吸 → 沿用 150px 那套推导
   · ≤1080px：横条改 static → 额外避让归零（见 §13） */
.wp-body h2 { scroll-margin-top: 24px; }
@media (max-width: 1199px) {
  .wp-body h2 { scroll-margin-top: calc(150px - var(--header-pad)); }
}

/* pFMT 首页各节锚点：让「章节分隔线（.section-head 顶边）」落在吸顶条正下方，
   而不是把整节盒顶对齐 —— 节自身有 --sp-section（56–96px）的上内边距，
   对齐盒顶会让标题上方多出一整片空白，看起来就是"没定位准/差一点"。
   150px（导航 + 页内吸顶目录 + 呼吸）减去节内边距，即为分隔线的落位。 */
.section[id] { scroll-margin-top: calc(150px - var(--sp-section) - var(--header-pad)); }

/* FAQ 页内二级落点（#real-cases 等），与所在分类同级避让 */
.faq-qa[id] { scroll-margin-top: calc(150px - var(--header-pad)); }
.faq-group h3 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.faq-qa { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-qa:last-child { border-bottom: 0; }
/* Q / A 区隔：题干带实心 Q 徽标 + 下虚细线；答案收进 A 区（左侧品牌细线 + 缩进 + 空心 A 徽标） */
.faq-qa > h4 {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px dashed var(--line-2);
}
.faq-qa > h4::before {
  content: 'Q'; flex: none; margin-top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center;
}
/* 答案区：与题干共用同一左边线 —— 徽标同列（0~22px），正文同缩进（32px = 22px 徽标 + 10px 间距） */
.faq-a { position: relative; padding-left: 32px; }
.faq-a::before {
  content: 'A'; position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--brand-soft);
  color: var(--brand-ink); font-size: .75rem; font-weight: 700;
  line-height: 20px; text-align: center;
}
/* 纵向细线：沿 Q/A 徽标列中心向下，标示答案范围 */
.faq-a::after {
  content: ''; position: absolute; left: 10px; top: 32px; bottom: 2px;
  width: 2px; border-radius: 1px; background: var(--brand-soft);
}
.faq-qa p { color: var(--muted); font-size: .9375rem; line-height: 1.85; }
/* 正文节奏：主题做过全局 margin 重置，段间留白需在此恢复（否则多段落会连成一片） */
.faq-qa p + p,
.faq-qa p + ul, .faq-qa p + ol,
.faq-qa ul + p, .faq-qa ol + p,
.faq-qa ul + ul, .faq-qa ol + ol,
.faq-qa .table-wrap + p { margin-top: 12px; }
.faq-qa .table-wrap { margin-top: 14px; }
/* 结构化条目：品牌色圆点（无序）/ 圆形序号（有序） */
.faq-qa ul, .faq-qa ol { margin-top: 10px; }
.faq-qa ul > li, .faq-qa ol > li {
  position: relative; padding-left: 18px; margin: 8px 0;
  color: var(--muted); font-size: .9375rem; line-height: 1.85;
}
.faq-qa ul > li::before {
  content: ''; position: absolute; left: 2px; top: .74em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}
.faq-qa ol { counter-reset: qa-step; }
.faq-qa ol > li { padding-left: 28px; }
.faq-qa ol > li::before {
  counter-increment: qa-step; content: counter(qa-step);
  position: absolute; left: 0; top: .38em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-ink);
  font-size: .8125rem; font-weight: 700; line-height: 20px; text-align: center;
}
.faq-qa li strong { color: var(--ink); }
/* 对比表格：首列是维度标签，避免「对菌群的影 / 响」这类断词 */
.faq-qa table td:first-child, .faq-qa table th:first-child { white-space: nowrap; }
/* 对比表格：第 3 列（pFMT 侧）浅底纹，让对比结论"站"出来 */
.faq-qa table th:nth-child(3), .faq-qa table td:nth-child(3) { background: var(--brand-tint); }
.faq-qa table th:nth-child(3) { color: var(--brand-ink); }
/* 指标卡（如质控标准的两项数值） */
.faq-qa .qa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.faq-qa .qa-stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 16px;
}
.faq-qa .qa-stat-label { display: block; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.faq-qa .qa-stat-num {
  display: block; margin-top: 2px; font-size: 1.125rem; font-weight: 700;
  line-height: 1.4; color: var(--brand-ink); font-variant-numeric: tabular-nums;
}
/* 两列小卡（如适应症分类） */
.faq-qa .qa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.faq-qa .qa-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.faq-qa .qa-card-title {
  display: block; margin-bottom: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--brand-ink);
}
.faq-qa .qa-card p { font-size: .875rem; line-height: 1.7; color: var(--muted); }
/* 横向时间轴（如治疗流程） */
.faq-qa .qa-flow { counter-reset: qa-flow; display: flex; align-items: flex-start; margin-top: 14px; }
.faq-qa .qa-flow > li {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: 0 10px; margin: 0; text-align: center;
  font-size: .875rem; line-height: 1.6; color: var(--muted);
}
.faq-qa ol.qa-flow > li::before,
.faq-qa ul.qa-flow > li::before {
  counter-increment: qa-flow; content: counter(qa-flow);
  position: static; inset: auto;            /* 覆盖通用有序列表的绝对定位序号 */
  display: block; width: 26px; height: 26px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: .8125rem; font-weight: 700; line-height: 26px; text-align: center;
}
.faq-qa .qa-flow > li::after {
  content: ''; position: absolute; top: 12px; left: calc(50% + 17px);
  width: calc(100% - 34px); height: 2px; background: var(--line-2);
}
.faq-qa .qa-flow > li:last-child::after { display: none; }

/* ---------- 10. 表单：已上移到主站设计系统 assets/css/style.css ---------- */

/* ---------- 11. 信息行 ---------- */
.label { font-size: .8125rem; font-weight: 600; color: var(--brand-ink); }
/* 这里原有两条 `.beian-icon` / `.beian-sep` —— 旧 pFMT 独立页脚（备案图标 + 分隔符）
   的遗留样式。那些页脚在构建时被整块丢弃，规则却留了下来，而且类名与全站页脚的
   备案图标**同名**：2026-10-10 给全站页脚加图标后，这条遗留规则只在专题页生效，
   于是"专题页一行、主站页两行"（主站页的图标继承了全局 `img { display: block }`）。
   备案图标现在由 theme/style.css 的 `.footer-bottom .beian-icon` 统一负责，此处删除。 */

/* ---------- 12. 白皮书 ---------- */
/* 资质证书网格 */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cert-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; text-align: center;
}
.cert-card img {
  width: 100%; margin-bottom: 14px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 8px; object-fit: contain;
  /* 三张证书扫描件（889×625 / 1200×849 / 1200×850）都接近 √2 纸张比例：
     图片没有内联高度，加载前占位为 0，会把下方卡片顶下去（CLS）。
     用 aspect-ratio 预留高度，object-fit: contain 吸收 ±0.5% 的比例差。 */
  aspect-ratio: 1414 / 1000;
}
.cert-card h3 { font-size: .9375rem; margin-bottom: 6px; }
.cert-card h3 a { color: inherit; }
.cert-card p { font-size: .8125rem; line-height: 1.6; color: var(--muted); }

/* 正文栏宽。940px 及以上：内容仍是 940px 居中（与旧版逐像素一致）；
   940px 以下：左右各留 20px 边距。原写法只有 max-width，窄屏（含移动端）
   时整篇正文——从面包屑到 h1 到段落——都贴死在视口边上（2026-10-10 修）。 */
.wp-wrap { max-width: 940px; width: min(940px, 100% - 40px); margin: 0 auto; }
.wp-header { padding-bottom: 26px; border-bottom: 1px solid var(--line-2); margin-bottom: 40px; }
.wp-meta { font-size: .875rem; color: var(--muted); }
.wp-subtitle {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.9; color: var(--muted); margin-top: 12px;
}
.wp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wp-stat { background: #fff; padding: 20px 22px; }
.wp-stat .num {
  display: block; font-size: 1.5rem; font-weight: 700;
  color: var(--brand-ink); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.wp-stat .label { color: var(--muted); font-weight: 400; margin-top: 6px; }
.wp-callout {
  background: var(--brand-tint); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-sm);
  padding: 18px 22px; margin: 20px 0;
}
.wp-body { padding: clamp(48px, 5vw, 72px) 0 clamp(64px, 6vw, 96px); }
.wp-body h2 { margin: 56px 0 18px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.wp-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wp-body h3 { margin: 34px 0 14px; }
.wp-body p, .wp-body li { font-size: clamp(1rem, .97rem + .14vw, 1.0625rem); line-height: 1.9; color: var(--text); }
.wp-body ul, .wp-body ol { margin: 14px 0 14px 4px; }
.wp-body ul li { position: relative; padding-left: 18px; margin: 8px 0; }
.wp-body ul li::before {
  content: ''; position: absolute; left: 2px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}
.wp-body ol { list-style: decimal; }
.wp-body ol li { margin: 8px 0 8px 18px; }
/* 白皮书内的宽表未包 .table-wrap：窄屏改为块级可横向滚动，避免整页横向溢出 */
@media (max-width: 760px) {
  .wp-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 12b. 白皮书页内目录：宽屏右侧栏（2026-10-15） ----------
   改前是「顶部吸顶横条」：15 个中文章节名一行放不下，只能横向滚动——
   「真实世界观察」之后的 8 节默认看不见，而这条 69px 的带子又全程压着首屏高度。
   改成竖排右栏后一次列全 15 节，当前章节用左侧品牌短线标记（仍复用 .toc-link.active）。
   窄屏没有侧栏的位置，退回横条：下方 display:contents 让两层包裹不生成盒子，
   横条态与改版前逐像素一致（外壳 .toc-bar / .toc-inner / .toc-track 全部沿用）。 */
.wp-doc,
.wp-toc { display: contents; }
.wp-toc-title,
.wp-toc-num { display: none; } /* 横条态保持原样：无标题、纯胶囊 */

@media (min-width: 1200px) {
  /* 版面：正文列仍是 940px，右栏作为附列；两列作为整体在 1240px 容器里居中。
     代价是正文列比改前左移约 140px——「正文 + 目录」看成一个整体后的居中结果，
     与主站 .doc-wrap / 白皮书 .wp-wrap 共用的 1240px 版面容器同一套尺度。 */
  .wp-doc {
    display: grid;
    grid-template-columns: minmax(0, 940px) 232px; /* 940（纸面）+ 48 间隙 + 232 = 1220 ≤ 1240 */
    /* 目录在 DOM 里排在正文前面（窄屏要靠这个顺序把横条放到正文上方），
       所以宽屏必须显式指定栏位，否则会按源码顺序落成「目录宽栏 + 正文窄栏」。 */
    grid-template-areas: "article toc";
    column-gap: 48px;
    align-items: start;
    justify-content: center;
    width: min(var(--maxw), 100% - 2 * var(--gutter));
    margin: 0 auto;
  }
  /* 正文列宽由栅格决定，撤掉 .wp-wrap 自己的 940px + 居中 */
  .wp-doc > .wp-wrap { grid-area: article; width: 100%; margin: 0; }
  /* 吸顶的是栅格项本身：它的包含块是栅格区（高度=正文高度），所以能跟着正文一路滚。
     栏高于视口时栏内自己滚（与横条态一样隐藏滚动条），不会撑破版面。 */
  .wp-toc {
    grid-area: toc;
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }
  /* 共享组件在竖排里只留「链接」这一层，条 / 内层 / 槽退成无装饰容器 */
  .wp-toc .toc-bar {
    position: static; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .wp-toc .toc-inner { display: block; width: auto; max-width: none; padding: 0; }
  .wp-toc .toc-track {
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--header-h) - 48px);
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    overflow: hidden auto; overscroll-behavior: contain;
  }
  .wp-toc-title {
    /* 与条目文字同一左边界（条目 = 2px 竖轴 + 14px 内边距），而不是贴齐竖轴 */
    display: block; margin: 0 0 10px; padding-left: 16px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: var(--muted);
  }
  /* 每条自带左细线，连起来就是目录的竖轴；当前项把这一段换成品牌色 */
  .wp-toc .toc-link {
    display: block; margin: 0;
    padding: 8px 12px 8px 14px;
    border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
    font-size: .9375rem; line-height: 1.5; white-space: normal;
  }
  /* 章节号与正文标题同一套（一～十四），占位 1.6em 让中文数字与「十四」对齐；
     附录条目留一个空占位，使「附录 参考文献」与上面的标题左对齐 */
  .wp-toc-num {
    display: inline-block; min-width: 1.6em;
    color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .wp-toc .toc-link.active {
    background: var(--brand-tint);
    border-left-color: var(--brand);
    box-shadow: none;
  }
  .wp-toc .toc-link.active .wp-toc-num { color: inherit; }
}

/* ---------- 13. 响应式 ---------- */
@media (max-width: 1080px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .card-grid-4, .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dual-axis { grid-template-columns: 1fr; }
  .wp-stats { grid-template-columns: repeat(2, 1fr); }
  /* .toc-* 的窄屏降级随组件一起搬到了 theme/style.css §24 */
  /* ≤1080px 页内目录改 static：额外避让归零，只剩导航那一半（--header-pad = 88px） */
  .faq-group { scroll-margin-top: 0; }
  .section[id] { scroll-margin-top: calc(0px - var(--sp-section)); }
  .wp-body h2 { scroll-margin-top: 0; }
  .faq-qa[id] { scroll-margin-top: 0; }
}
@media (max-width: 860px) {
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  /* 数据条窄屏的两列排布由主站 .stats/.stat 的移动端规则统一负责，这里不再复写 */
  .section-hero { padding-top: 44px; }
  .hero-visual { order: 2; }
  /* 移动端首屏配图不宜过高（原本最多 360px，会把品牌名推到很下面） */
  .hero-visual img { max-height: 220px; }
  .hero-content h1 span:nth-child(1) { font-size: 13px; letter-spacing: .18em; }
  .hero-content h1 span:nth-child(2) { font-size: clamp(1.85rem, 7vw, 2.4rem); }
  .hero-content h1 span:nth-child(3) { font-size: 14px; }
  .phase-step { grid-template-columns: 1fr; gap: 3px; }
  /* AI 分析流程：窄屏不再并排——配图移到文字下方铺满整行，导轨收窄 */
  .flow-step { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .flow-step:not(:last-child)::before { left: 21px; top: 54px; bottom: -16px; }
  .flow-num { width: 42px; height: 42px; font-size: .9375rem; }
  .flow-card { grid-template-columns: minmax(0, 1fr); }
  .flow-card > img { border-left: 0; border-top: 1px solid var(--line); }
  .flow-text { padding: 24px 24px 26px; }
  .wp-stats { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .faq-qa .qa-stats, .faq-qa .qa-cards { grid-template-columns: 1fr; }
  .faq-qa .qa-flow { display: block; margin-top: 10px; }
  .faq-qa .qa-flow > li {
    display: flex; align-items: flex-start; gap: 12px;
    text-align: left; padding: 7px 0;
  }
  .faq-qa ol.qa-flow > li::before,
  .faq-qa ul.qa-flow > li::before { flex: none; margin: 0; }
  .faq-qa .qa-flow > li::after { display: none; }
}