/* ==========================================================================
   智元裂变官网 · assets/styles.css
   --------------------------------------------------------------------------
   build 阶段（2026-09-17）全量重写。上一版单页原型（#2E7CF6 蓝 + #0F1B33 墨）
   已归档到 docs/legacy-prototype/styles.v1-prototype.css，不沿用其配色与区块。
   严格对应 docs/design.md：
     §2.1  17 颜色令牌        §3.2  中文 6 级 + 等宽 4 级
     §4    布局令牌           §5.1  11 级间距 · §5.2 密度 L/M/H
     §6    六个真设计组件     §7    其余 21 个组件
     §2.6  深底重声明块（必须整体存在，不得删减分支）
     §9    动效令牌（实现细节见 docs/motion.md）
     §8.3  打印样式

   硬约束：零外链 / 零 Web Font / 零依赖 / 圆角全站 0 / 无阴影 / 无渐变 /
           无毛玻璃 / 无 !important / @keyframes 0 个
   守卫：tools/design-check.py（退出码 0 方可进入下一阶段）
   ========================================================================== */


/* ==========================================================================
   1. 令牌（唯一真源 · design.md §2.1 / §3.1 / §3.2 / §4 / §5.1 / §9.1）
   —— 颜色令牌必须全部写在**第一个 :root 块**内：守卫按第一个 :root 取令牌表。
   ========================================================================== */
:root {
  /* ── 颜色 · 表面 ─────────────────────────── */
  --surface-base:   #F6F3EC;  /* 骨白：页面默认底 */
  --surface-alt:    #ECE7DA;  /* 次级底：区块交替 */
  --surface-dark:   #0B3D2E;  /* 深墨绿：深底区块 + 页脚 */
  /* 强调色同相低透明梯度（2026-10-27）：partners 四档颜色递进填充专用。
     色相封闭 —— 只有强调色 #146B4A 的 alpha 变化，无新色相。
     上限 α=.16：衬 --text-accent 文字实测 ≈4.7:1 达 AA（α=.18 时 4.49 临界弃用） */
  --surface-tint-1: rgba(20,107,74,.05);
  --surface-tint-2: rgba(20,107,74,.11);
  --surface-tint-3: rgba(20,107,74,.16);
  --surface-lift-on-dark: rgba(246,243,236,.08);
  /* 深底色块底（2026-10-27 色块化推广新增）：α=.08 合成底上 on-dark-muted 对比 ≈5.0 达 AA；
     五道坎深底档曾用的 --rule-on-dark（α=.16）衬 muted 只有 ≈4.0，不达标，故另立此令牌。
     左缘竖条沿用成对令牌 --text-accent-on-dark，不新增色相。 */

  /* ── 颜色 · 文字（浅底）───────────────────── */
  --text-ink:       #111111;  /* 标题墨 */
  --text-body:      #3A3F3A;  /* 正文 */
  --text-muted:     #5F645E;  /* 次级：说明 / 单位 / 页脚 */
  --text-accent:    #146B4A;  /* 强调：链接 hover / 编号高亮 / 焦点线 */

  /* ── 颜色 · 文字（深底）───────────────────── */
  --text-on-dark:        #F6F3EC;
  --text-on-dark-muted:  #A8BFB4;
  --text-accent-on-dark: #6FBF9B;

  /* ── 颜色 · 线与边框 ──────────────────────── */
  --rule-hairline:          #DCD6C8;                /* 装饰性分隔线（浅底）*/
  --border-control:         #8C8678;                /* 功能性控件边界（浅底）*/
  --rule-on-dark:           rgba(246,243,236,.16);  /* 装饰性分隔线（深底）*/
  --border-control-on-dark: #86988C;                /* 功能性控件边界（深底）*/

  /* ── 颜色 · 状态 ─────────────────────────── */
  --state-error:         #A93226;  /* 校验失败（浅底）*/
  --state-error-on-dark: #E8A79E;  /* 校验失败（深底）*/

  /* ── 颜色 · 媒体层遮罩（design.md §2.7）────── */
  /* 必须是纯色：渐变的遮罩没有单一 alpha，对比度就无法逐像素核算。
     定稿 .76 —— 素材最亮像素 ≤ 45% 时四个前景色全部过 AA（8.91 / 5.07 / 4.52 / 3.24）。 */
  --scrim-hero:          rgba(11,61,46,.76);

  /* ── 非颜色令牌 ───────────────────────────── */
  --radius:          0;
  --hairline:        1px;
  --hairline-width:  1px;
  --focus-ring:      2px solid var(--text-accent);
  --focus-ring-dark: 2px solid var(--text-on-dark);
  --focus-offset:    2px;

  /* ── 字体栈（零外链 · 零 Web Font，§3.1）—— 2 个栈，0 个下载字体 ── */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Roboto Mono", "DejaVu Sans Mono", monospace;

  /* ── 字阶 · 中文（无衬线）§3.2 ── */
  --fs-display: clamp(32px, 5.2vw, 52px);  --lh-display: 1.22;
  --fs-h2:      clamp(24px, 3.2vw, 32px);  --lh-h2:      1.3;
  --fs-h3:      20px;                      --lh-h3:      1.45;
  --fs-lede:    17px;                      --lh-lede:    1.75;
  --fs-body:    16px;                      --lh-body:    1.8;
  --fs-small:   14px;                      --lh-small:   1.7;

  /* ── 字阶 · 等宽 ── */
  --fs-num:      clamp(36px, 4.6vw, 56px); --lh-num:     1.05;
  --fs-mono-md:  17px;                     --lh-mono-md: 1.5;
  --fs-mono-sm:  14px;                     --lh-mono-sm: 1.6;
  --fs-mono-xs:  11px;                     --lh-mono-xs: 1.6;

  /* ── 间距阶梯（4px 基准，11 级）§5.1 ── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5: 24px;   --sp-6: 32px;   --sp-7: 48px;   --sp-8: 64px;
  --sp-9: 96px;   --sp-10: 128px; --sp-11: 160px;

  /* ── 区块纵向内边距（密度 L / M / H）§5.2 ── */
  --section-l: 128px;   /* 松：断言段、Hero、案例首屏 */
  --section-m:  96px;   /* 中：常规证据段 */
  --section-h:  64px;   /* 紧：高密度列表、深底段 */

  /* ── 布局 §4 ── */
  --container:        1200px;
  --container-narrow: 760px;
  --gutter:           clamp(20px, 4vw, 40px);
  --grid-gap:         24px;
  --nav-h:            76px;   /* 2026-10-22 由 64px 抬高。两个理由，先后不同：
                             · 当日早些时候的竖排方案下，品牌组实高 64.1px，
                               64px 栏高零余量（墨迹贴到 y=0、拉丁行压边线）；
                             · 同日二次裁定改回**横排**后，品牌组实高 41px，
                               76px 留出的比例是 41/76 ≈ 0.54，与企业演示稿的
                               34/62 ≈ 0.55 一致 —— 导航不显拥挤，也不虚浮。
                             两个理由指向同一数值，故不回退。留痕见 docs/design.md §15.5。 */
  --hero-min-media:   clamp(480px, 72vh, 720px);

  /* ── 动效 §9.1 · 尺度改用参考工程 MOIRÉ 的标准（2026-09-18 决议）──
     三档时长：micro 200 / panel 320 / entry 850。缓动统一 decelerate。
     （entry 2026-10-26 由 600 调至 850：用户实测「还没划到位动效就播完」，
       拉长时长让入场动画在滚动落定后仍在进行；同轮新增 --stagger-step
       级联步长令牌，原 calc(--dur-micro/4)=50ms 级联过密）
     位移只有 translateY 四档，**从不 translateX、从不做入场缩放**。
     组件只准引用令牌，不准写死数值 —— 这样"减少动效"是改一处变量的结果。 */
  --dur-micro:    200ms;   /* hover / focus / 下划线 */
  --dur-panel:    320ms;   /* 抽屉 / 面板 / 边缘导轨展开 */
  --dur-entry:    850ms;   /* 区块入场（2026-10-26 由 600ms 调至 850ms） */
  --stagger-step: 90ms;    /* 级联间隔（2026-10-26 新增，原 50ms 内联 calc） */
  --dur-idle-a:   4800ms;  /* 待机·快档：跃动 / 困惑摇摆（2026-10-27 新增，§12）*/
  --dur-idle-b:   6400ms;  /* 待机·中档：递物 / 倾听 / 展示 / 指引 */
  --dur-idle-c:   9000ms;  /* 待机·慢档：审视 / 专注 / 生长 / 托举 / 合影 */
  --sway-xs:      1.2deg;  /* 待机摇摆角（rotate 不是位移，不入 travel 档，motion.md §12）*/
  --sway-sm:      2deg;
  --ease-out:     cubic-bezier(.2, .7, .2, 1);   /* decelerate，入场 */
  --ease-in:      cubic-bezier(.4, 0, .7, .2);   /* accelerate，退出 */
  --travel-xs:    4px;
  --travel-sm:    8px;
  --travel-md:    16px;
  --travel-lg:    24px;    /* 区块入场位移 */
}

/* 密度在窄屏收敛（§5.2）*/
@media (max-width: 768px) {
  :root { --section-l: 72px; --section-m: 56px; --section-h: 40px; }
}


/* ==========================================================================
   2. 基础与全局
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 锚点跳转要抵消吸顶导航（site-map.md §4）*/
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 避头尾与长串防溢出（§3.4 第 5 条）——
     `ASME BPVC 第Ⅸ卷` 这类长串在窄屏上会撑破容器，overflow-wrap: anywhere 是必需的 */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 中文不用负字距（§3.4 第 1 条）*/
:lang(zh), [lang^="zh"] { letter-spacing: normal; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* 焦点态：全站必需，禁止去掉（§8.1）*/
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.surface-dark :focus-visible { outline: var(--focus-ring-dark); }

/* 跳到主内容：聚焦前不可见（§8.2）*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--surface-base);
  color: var(--text-ink);
  padding: var(--sp-3) var(--sp-4);
  border: var(--hairline) solid var(--border-control);
  text-decoration: none;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-2); }

/* 仅供读屏（§8.2）*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 等宽字体缺字形时的宽度兜底（§3.5）——
   多数等宽字体不含 U+2103（摄氏度符号），会回退成中文字体导致同一行字宽不齐。
   一排完美的等宽数字中间突然挤进一个宽度不同的符号，是本项目最容易露馅的细节。 */
.unit {
  font-family: var(--font-sans);
  font-size: .82em;
  display: inline-block;
  width: 1em;
}

/* 容器与区块 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-m); }
.section--low  { padding-block: var(--section-l); }
.section--mid  { padding-block: var(--section-m); }
.section--high { padding-block: var(--section-h); }

/* 底色修饰符：与 .surface-dark 由契约保证互斥（每个区块只选一种底色，
   见 docs/template-coverage.yaml globals.backgrounds）*/
.section--base { background: var(--surface-base); }
.section--alt  { background: var(--surface-alt); }

/* 深底容器只允许这一个类名，同时负责底色（§2.6 第 1 条）。
   曾经的缺陷就是"两个深底类名"导致覆盖漏半 —— 双轨命名是结构性成因，不是色值问题。
   这里额外声明容器级文字色：它是**兜底**，让任何一处漏写的元素至少不会消失；
   但它不是"依赖继承"的许可证 —— 每个组件仍必须在下面的深底块里显式重声明。 */
.surface-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

/* 栅格工具 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-8);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 垂直居中变体：用于短文字列 + 半身吉祥物的区块（如工作台"入口"）——
   默认 align-items:start 会让文字顶在上方、吉祥物垂直居中偏低，视觉错位。 */
.split--center { align-items: center; }
/* 场景侧栏变体（2026-10-27 二次裁定）：内容列 + 场景插画列，垂直居中。
   侧栏用固定钳宽（260–360px）而非比例 —— 场景图是方形构图，比例列在宽屏
   会把插画放大到 400px+，重新把板块撑高（首版横带式的教训）。 */
.split--side {
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 360px);
  align-items: center;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }

.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }


/* ==========================================================================
   3. 排印与秩序（§7.2）
   ========================================================================== */

/* 5 eyebrow —— 已撤除（2026-09-18）。原为章节眉标 `0 1 / REALITY CHECK`，
   属装饰性编号，撤除理由与影响见 docs/section-conformance.md §14。
   编号 5 留空不复用（避免既有文档引用错位）。 */

/* 6 section-header —— H2 → 导语 */
.section-header__h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  color: var(--text-ink);
  margin-top: 0;            /* 原为 --sp-5（眉标 → H2 的间距），眉标撤除后归零 */
}
.section-header__lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text-muted);  /* 导语级说明降次级色（2026-10-27 配色层次调整） */
  margin-top: var(--sp-4);
  max-width: 72ch;
}
/* 仅 CTA 区块居中 */
.section-header--center { text-align: center; }
.section-header--center .section-header__lede { margin-inline: auto; }

/* 区块头 → 内容 */
.section-header + .section-body { margin-top: var(--sp-7); }
/* cases 首屏的 case-deck 不经 .section-body 包裹，直接跟在标题后 —— 同节奏补距 */
.section-header + .case-deck { margin-top: var(--sp-7); }
.section--high .section-header + .section-body { margin-top: var(--sp-6); }

/* 8 hairline-list —— 发丝线列表。首行上线 + 末行下线，左右不出框 */
.hairline-list__row {
  padding-block: var(--sp-5);
  border-top: var(--hairline) solid var(--rule-hairline);
}
.hairline-list__row:last-child { border-bottom: var(--hairline) solid var(--rule-hairline); }

/* 12 step-flow —— 横向步骤条（2026-10-27 色块化）。
   原形态"1px 贯穿横线 + 裸排印"被并入色块语言：三格各自成块，
   推进方向由块的排列次序承担，贯穿横线与为它服务的 z-index 层退役。
   块底按所在区块底反衬：骨白底上用次级底块，次级底区块（--alt）上用骨白块。 */
.step-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.step-flow > * {
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-5);
}
.section--alt .step-flow > * { background: var(--surface-base); }
/* step-flow 结构上只出现在 .section--base / .section--alt 区块内
   （template-coverage 契约），不存在深底分支 —— 文字色随之按底色互斥前缀声明 */
.section--base :is(.step-flow__title),
.section--alt :is(.step-flow__title) {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.section--base :is(.step-flow__desc),
.section--alt :is(.step-flow__desc) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);  /* 步骤辅助说明降次级色（2026-10-27 配色层次调整） */
  margin-top: var(--sp-3);
}


/* ==========================================================================
   4. 六个真设计组件（§6）
   ========================================================================== */

/* 4.1 param-table —— 等宽参数表（最高优先级）*/
.param-table__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border-top: var(--hairline) solid var(--rule-hairline);
}
.param-table--3col .param-table__row {
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
}
.param-table__row:last-child { border-bottom: var(--hairline) solid var(--rule-hairline); }

.param-table__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 400;
  line-height: var(--lh-mono-sm);
  color: var(--text-muted);
  padding: var(--sp-3) 0;
}
.param-table__val {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  font-weight: 500;
  line-height: var(--lh-mono-md);
  color: var(--text-ink);
  padding: var(--sp-3) 0;
}
/* 重点前置档（2026-10-27）：#method 交付规格从右栏吉祥物下方迁入内容主栏 ——
   用户裁定"吉祥物下面的参数表才是我们能做的重点，不能放在不显眼的位置"。
   在主栏全宽呈现 + 值字号升一档（mono-md → h3），成为本板块的收束落点。
   同日四次裁定：参数行色块化，与 #gaps 五道坎同一语言。 */
.param-table--lead { display: grid; row-gap: var(--sp-3); }
/* 参数行色块按所在区块底反衬：骨白底上次级底块，次级底区块上骨白块。
   该修饰符结构上只用于 #method（次级底区块） */
.section--base .param-table--lead .param-table__row,
.section--alt .param-table--lead .param-table__row {
  border: none;
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-3) var(--sp-5);
}
.section--alt .param-table--lead .param-table__row { background: var(--surface-base); }
.param-table--lead .param-table__val {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* 4.2 standard-chip —— 标准号墙（全站最强视觉资产）*/
.chip-wall { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.standard-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  font-weight: 500;
  line-height: var(--lh-mono-md);
  color: var(--text-ink);
  padding: var(--sp-2) var(--sp-3);
  border: var(--hairline) solid var(--border-control);
  border-radius: var(--radius);
  background: transparent;
  /* 它是标签，不是按钮：无 hover、无 pointer（§6.2）*/
  cursor: default;
}

/* 4.3 stat-gauge —— 指标格 */
.stat-gauge { display: grid; gap: var(--sp-6); }
.stat-gauge--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-gauge--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-gauge--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-gauge__num {
  font-family: var(--font-mono);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: var(--lh-num);
  letter-spacing: -.01em;   /* 允许的例外：等宽数字在大字号下间隙偏松（§12.1）*/
  color: var(--text-accent);  /* 关键数字用强调色：数据是板块的视觉锚点（2026-10-27） */
}
.stat-gauge__curr { font-size: .62em; color: var(--text-muted); font-weight: 500; }
.stat-gauge__unit { font-size: .42em; color: var(--text-muted); margin-left: .25em; font-weight: 500; }
.stat-gauge__desc { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-3); }
.stat-gauge__sub  { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-2); opacity: .85; }

/* 4.4 numbered-item —— 标题列 280px、说明列 1fr（编号列已撤除 2026-10-21）*/
.num-item {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-top: var(--hairline) solid var(--rule-hairline);
}
.num-item:last-child { border-bottom: var(--hairline) solid var(--rule-hairline); }
.num-item__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.num-item__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* `#gaps` 五道坎 —— 2026-10-27 三次裁定：**色块化**。
   首版"排印行 + 短评右缘对齐"被用户截图裁定杂乱：标题列 280px 对 6 字标题
   留出大空腔、短评列 max-content 随行参差 —— 两处红框即这两个空隙。
   返工为令牌色块：每行一块次级底（--surface-alt）、左缘 3px 深墨绿竖条定位视线；
   三列 216 / 1fr / 192 锁死、列间距统一 --sp-6、行间距 --sp-4，
   "间距不统一"从结构上消失。全部用 17 色令牌，不引入新色。 */
.num-list--with-note { display: grid; row-gap: var(--sp-4); }
.num-list--with-note .num-item {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 176px;
  column-gap: var(--sp-6);
  align-items: baseline;
  background: var(--surface-alt);
  border: none;
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-6);
}
.num-list--with-note .num-item__title,
.num-list--with-note .num-item__desc,
.num-list--with-note .num-item__note { padding-top: 0; }
.num-item__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 400;
  line-height: var(--lh-mono-sm);
  /* 2026-10-26：--text-body → --text-ink。短评与中栏描述原先同灰度，
     扫读时两栏糊在一起；短评是本列的设计要点（点睛句），提到主墨色，
     与描述拉开一档。深底侧见 §surface-dark ① 组同步移动。 */
  color: var(--text-ink);
  text-align: right;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4.4b 色块化全站推广（2026-10-27 四次裁定 · 用户 9 张截图逐板块过）
   语言与 #gaps 五道坎完全一致：令牌色块 + 左缘 3px 深墨绿（深底档为薄荷）
   竖条，行/格间距统一，"间距不统一"从结构上消失。收口断言行（--stmt）
   与带状态标签的 timeline 保持排印形态，不块化 —— 全站语句层级要留出
   "块 / 线 / 裸排印"三档，不能句句成块。
   -------------------------------------------------------------------------- */

/* #reality 三句拷问：次级底区块上用骨白块反衬 */
#reality .hairline-list--mono { display: grid; row-gap: var(--sp-4); }
.section--alt#reality .hairline-list--mono .hairline-list__row {
  border: none;
  background: var(--surface-base);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-6);
}

/* #modules 六模块卡：骨白底上次级底块；格距收一档贴住块墙节奏 */
#modules .grid-2 { gap: var(--sp-4); }
.section--base#modules .evidence-block {
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-5);
}

/* #traceability / #engine 分组（合规交警 / 节点提醒 · 记忆沉淀 / 多引擎协同）：
   组成块后组内行线退役，节奏交给块内边距（#gaps 同款处理） */
.section--alt#traceability .grid-2 > .stack-4 {
  background: var(--surface-base);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-5);
}
.section--base#engine .grid-2 > .stack-4 {
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-5);
}
#traceability .grid-2 .hairline-list__row,
#engine .grid-2 .hairline-list__row { border: none; padding-block: var(--sp-2); }

/* #value 客户怎么说：指标与引言各自成块；引言的 2px 发丝竖线升级为块语言 */
#value .stat-gauge--2 { gap: var(--sp-4); }
#value .stat-gauge--2 > * {
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-4) var(--sp-5);
}
#value .grid-2 { gap: var(--sp-4); }
.section--base#value .quote {
  border-left: 3px solid var(--surface-dark);
  background: var(--surface-alt);
  padding: var(--sp-4) var(--sp-5);
}

/* 深底档：块底用 --surface-lift-on-dark（α=.08，见 :root 留痕），
   左缘竖条用薄荷成对令牌 —— 与 #gaps 深底分档同一语言 */
.surface-dark#command .stat-gauge--2 { gap: var(--sp-4); }
.surface-dark#command .stat-gauge--2 > * {
  background: var(--surface-lift-on-dark);
  border-left: 3px solid var(--text-accent-on-dark);
  padding: var(--sp-4) var(--sp-5);
}
.surface-dark#command .hairline-list { display: grid; row-gap: var(--sp-3); }
.surface-dark#command .hairline-list__row {
  border: none;
  background: var(--surface-lift-on-dark);
  border-left: 3px solid var(--text-accent-on-dark);
  padding: var(--sp-4) var(--sp-5);
}
.surface-dark#delivery .grid-3 { gap: var(--sp-4); }
.surface-dark#delivery .grid-3 > * {
  background: var(--surface-lift-on-dark);
  border-left: 3px solid var(--text-accent-on-dark);
  padding: var(--sp-4) var(--sp-5);
}
.surface-dark#delivery .grid-3 .hairline-list__row { border: none; padding-block: var(--sp-2); }

/* 4.5 tier-column —— 企业客户四档。一张表上做颜色递进色块（2026-10-27 用户裁定）：
   次级底 → 强调色 tint .05 → .11 → .16，承接深度与色深同向。
   「无价格」锁定项同日被用户推翻：价格由用户给出（200/900/4900 元起），非杜撰 —— 留痕 design.md §19.11。
   字色全部走规范令牌（--text-ink 即 #111 标题墨，非纯黑）。 */
.tier-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tier-col {
  padding: var(--sp-6) var(--sp-5);
}
.tier-col:nth-child(1) { background: var(--surface-alt); }
.tier-col:nth-child(2) { background: var(--surface-tint-1); }
.tier-col:nth-child(3) { background: var(--surface-tint-2); }
.tier-col:nth-child(4) { background: var(--surface-tint-3); }
.tier-col__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.tier-col__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
/* 观望派 / 刚需派 / 长期主义派 —— 全站最生动的一处表达，值得被看见 */
.tier-col__who { font-size: var(--fs-small); color: var(--text-accent); margin-top: var(--sp-1); }
.tier-col__price {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-accent);
  white-space: nowrap;
}
.tier-col__price-unit {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-body);
  margin-left: .2em;
}
.tier-col__scope {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-top: var(--sp-4);
}

/* 4.5b case-deck —— cases 前三版面的双案例切换（2026-10-27 二次裁定）。
   滚动条形态被用户否决（「滑块挤在内容边上」）→ 滚动条整条隐藏，
   翻页交给 .case-nav 左右箭头（main.js ⑥）；触屏原生手势保留。
   每片 100% 容器宽，吸附起点；版面高度不因切换而扩大（每片内容自行收敛）。 */
.case-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: var(--sp-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.case-deck::-webkit-scrollbar { display: none; }
.case-deck > .case-slide { scroll-snap-align: start; }
.case-slide { min-width: 0; }
.case-slide__kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-accent);
}
.case-slide__name {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  color: var(--text-ink);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-5);
}
/* 翻页箭头（main.js ⑥）：44px 方形点按目标，两端自动禁用 */
.case-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.case-nav__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--text-ink);
  background: var(--surface-base);
  border: var(--hairline) solid var(--border-control);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.case-nav__btn:hover:enabled { background: var(--surface-alt); border-color: var(--surface-dark); }
.case-nav__btn:active:enabled { background: var(--surface-dark); color: var(--text-on-dark); }
.case-nav__btn:disabled { opacity: .32; cursor: default; }
.case-nav__btn:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
/* 深底重声明（守卫 ③ 结构性契约）：case-deck / case-nav / tier-col 目前只出现在浅底区块，
   重声明按深底令牌语义预置 —— 若未来移入深底不会漏覆盖 */
.surface-dark .case-deck { scrollbar-width: none; }
.surface-dark .case-slide__kicker { color: var(--text-accent-on-dark); }
.surface-dark .case-slide__name { color: var(--text-on-dark); }
.surface-dark .case-nav__btn {
  color: var(--text-on-dark);
  background: var(--surface-lift-on-dark);
  border-color: var(--rule-on-dark);
}
.surface-dark .case-nav__btn:hover:enabled { background: var(--rule-on-dark); border-color: var(--text-accent-on-dark); }
.surface-dark .case-nav__btn:active:enabled { background: var(--text-accent-on-dark); color: var(--surface-dark); }
.surface-dark .case-nav__btn:focus-visible { outline-color: var(--text-accent-on-dark); }
.surface-dark .tier-col:nth-child(1),
.surface-dark .tier-col:nth-child(2),
.surface-dark .tier-col:nth-child(3),
.surface-dark .tier-col:nth-child(4) { background: var(--surface-lift-on-dark); }
.surface-dark .tier-col__price { color: var(--text-accent-on-dark); }
.surface-dark .tier-col__price-unit { color: var(--text-on-dark-muted); }

/* 4.6 timeline-step —— 横线贯穿，不用圆点、不用箭头 */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  position: relative;
}
/* 连接线与节点标记必须落在**同一条 y** 上，否则会读成"一条线 + 一个悬浮的短横"。
   §6.6 给的是线 top:7px / 标记 top:0，两者错开 5px；此处按设计意图收敛为同一基线。 */
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--hairline);
  background: var(--rule-hairline);
}
.timeline__step { position: relative; padding-top: var(--sp-6); }
.timeline__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--text-ink);
}
.timeline__step--current .timeline__mark { background: var(--text-accent); }
.timeline__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.timeline__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);  /* 节点辅助说明降次级色（2026-10-27 配色层次调整） */
  margin-top: var(--sp-3);
}

/* 状态标签：全站唯一使用实心色块的标签 */
.tag {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 4px 10px;
  border: var(--hairline) solid var(--border-control);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.tag--active {
  background: var(--surface-dark);
  border-color: var(--surface-dark);
  color: var(--text-on-dark);
}
/* 状态标签在 timeline 里收在文字末尾，需要自己的一档上间距 */
.timeline__step .tag { margin-top: var(--sp-3); }


/* ==========================================================================
   5. 内容单元（§7.3）
   ========================================================================== */

/* 14 evidence-block —— 外壳统一，内容槽可换 */
.evidence-block + .evidence-block { margin-top: var(--sp-7); }
.evidence-block__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.evidence-block__slot { margin-top: var(--sp-4); }
.evidence-block__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* 16 concern-item —— 编号 + 问句 + 三行内回答 */
.concern-item__q {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.concern-item__a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-top: var(--sp-3);
}

/* 17 team-card —— 无阴影、无圆角 */
.team-card {
  border: var(--hairline) solid var(--rule-hairline);
  padding: var(--sp-6);
}
.team-card__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
}
.team-card__role { font-size: var(--fs-small); color: var(--text-accent); margin-top: var(--sp-1); }
.team-card__bio {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-top: var(--sp-4);
}

/* 18 callout-bar —— 描边式，不是深底。
   若这里再铺深底，会突破 Gate 3 锁定的"深色区块恒 3 处"阈值 —— 约束优先于局部效果。 */
.callout-bar {
  border: var(--hairline) solid var(--surface-dark);
  background: var(--surface-base);
  color: var(--text-ink);
  padding: var(--sp-5);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
}

/* 19 quote —— 左侧 2px 竖线，不用引号大图标 */
.quote {
  border-left: 2px solid var(--rule-hairline);
  padding-left: var(--sp-5);
}
.quote__text { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text-body); }
.quote__cite { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-3); }

/* 左栏叙述段（T2.n2）*/
.prose__p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.prose__p + .prose__p { margin-top: var(--sp-4); }


/* --------------------------------------------------------------------------
   5.1 排印修饰符
   —— 全部是**对既有组件的修饰**，不是新组件：全站组件数仍为 27。
      用途是把"带标题的行 / 收口断言行 / 等宽点名行"这三种排印形态
      收敛到 hairline-list 这一个组件上，而不是为它们各开一个新组件。
   -------------------------------------------------------------------------- */

/* 三句拷问：等宽竖排，让它读起来像三记点名而非三个卖点 */
.hairline-list--mono .hairline-list__row {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  line-height: var(--lh-body);
}

/* 收口断言行：区块末尾那句"把话说死"的话 */
.hairline-list__row--stmt { font-size: var(--fs-lede); line-height: var(--lh-lede); }

/* 带标题的行：分组标题（T1.n6 合规交警 / T1.n7 记忆与引擎 / T1.n8 决策层视角）*/
.hairline-list__row--head {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-ink);
  margin-bottom: var(--sp-2);
}

/* grid 内并列的 evidence-block：取消相邻间距，否则第二、三格会整体下移 */
.evidence-block.evidence-block--flush { margin-top: 0; }

/* 表单区内的纵向节奏 */
.form-actions > * + * { margin-top: var(--sp-5); }

/* 未激活的面板与"提交后"提示默认不占位 */
[hidden] { display: none; }

/* 没有 JS 时的表单降级：两个面板同时铺开。
   非默认面板带着 hidden 属性，而摘掉它的只有 JS —— 若不在这里兜住，
   禁用 JS 时渠道伙伴那一栏就永远打不开，表单只剩一半。
   判据和滚动入场同一条：**去掉 main.js，页面必须完整可用。** */
html:not(.js-tabs) .form-panel[hidden] { display: block; }


/* ==========================================================================
   6. 交互与表单（§7.4）
   ========================================================================== */

/* 20 text-link-cta —— 下划线常驻（WCAG 1.4.1：链接不能只靠颜色区分）*/
.text-link-cta {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text-ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-hairline);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: .25em;
  transition: color var(--dur-micro), text-decoration-color var(--dur-micro);
}
.text-link-cta__arrow {
  display: inline-block;
  transition: transform var(--dur-micro);
}
.text-link-cta:hover { color: var(--text-accent); text-decoration-color: var(--text-accent); }
.text-link-cta:hover .text-link-cta__arrow { transform: translateX(2px); }

/* 21 button-outline —— 全站两种可点形制之一（另一种是文字链接）*/
.button-outline {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: var(--hairline) solid var(--border-control);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-ink);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-micro), background-color var(--dur-micro);
}
.button-outline:hover { border-color: var(--text-ink); background: rgba(11,61,46,.04); }
.button-outline:disabled { opacity: .45; cursor: not-allowed; }
.button-outline--loading { opacity: .7; cursor: progress; }

/* 22 form-tabs —— 不用药丸形制，语言与"导航当前页"一致 */
/* 表单结构外壳（非组件，无视觉样式）。它存在的唯一理由是**结构契约**：
   main.js 用 `[data-tabs].parentNode` 去找 [data-panel]，所以两个面板必须是
   .form-tabs 的兄弟节点 —— 中间再插一层容器，Tab 就会切不动。
   2026-10-27 色块化：外壳升为色块（次级底 + 3px 左缘竖条），表单读作一个整体；
   挂在次级底区块（cases #get-started）上时反衬为骨白。 */
.form-shell {
  display: block;
}
/* 色块化（2026-10-27）：外壳升为色块，表单读作一个整体；
   按所在区块底反衬 —— 骨白底上次级底块（index / partners），次级底区块上骨白块（cases） */
.section--base .form-shell {
  background: var(--surface-alt);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-5) var(--sp-6);
}
.section--alt .form-shell {
  background: var(--surface-base);
  border-left: 3px solid var(--surface-dark);
  padding: var(--sp-5) var(--sp-6);
}
.form-tabs__list { display: flex; gap: var(--sp-6); }
.form-tab {
  padding: 0 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.form-tab[aria-selected="true"] {
  color: var(--text-ink);
  border-bottom-color: var(--text-accent);
}

/* 23 form-field —— 透明底 + 仅底部 1px 线。这是最"工程"的做法 */
.form-panel { margin-top: var(--sp-6); }   /* 2026-10-23 由 --sp-7 收紧：满屏节奏下表单板块要收回一屏 */
.form-panel[hidden] { display: none; }
.field { margin-top: var(--sp-6); }
.field:first-child { margin-top: 0; }
/* 表单字段双列（2026-10-23 · 满屏节奏配套）：字段纵向堆叠是表单板块
   超屏的主因（4 字段 = 4 行 ≈ 288px）。双列后行数减半，行距交给
   row-gap，字段自身的 margin-top 在网格里退役；提交区跨双列。
   ≤768px 回落单列 —— 窄屏输入框仍需整行宽度。 */
form[data-form] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-5);
}
form[data-form] .field { margin-top: 0; }
form[data-form] .form-actions { grid-column: 1 / -1; margin-top: var(--sp-3); }
@media (max-width: 768px) {
  form[data-form] { grid-template-columns: 1fr; }
  form[data-form] .form-actions { margin-top: var(--sp-5); }
}
.field__label { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-2); }
.field input,
.field select {
  width: 100%;
  padding: 10px 0;                      /* 已登记例外：见 §5.1 与 tools/design-check.py */
  border: 0;
  border-bottom: var(--hairline) solid var(--border-control);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  transition: border-color var(--dur-micro);
}
.field input::placeholder { color: var(--text-muted); }
.field input:focus,
.field select:focus { border-bottom: 2px solid var(--text-accent); }
.field__err { font-size: var(--fs-small); color: var(--state-error); margin-top: var(--sp-2); }
.field--err input,
.field--err select { border-bottom-color: var(--state-error); }

/* 24 submit-feedback —— 无图标、无对勾、无动画 */
.form-actions { margin-top: var(--sp-7); }
.submit-feedback { font-size: var(--fs-body); color: var(--text-ink); }
.privacy-note { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-3); }


/* ==========================================================================
   7. 占位与状态（§7.5）
   ========================================================================== */

/* 26 image-placeholder —— 已于 2026-09-19 移除（用户裁定删掉 cases 页合影占位框，
   全站不再有使用处；组件计数 26 → 25）。素材到位后如需占位再按此规格重建：
   虚线框 + aspect-ratio 预留比例 + 诚实中文标签，绝不生成假图填充。 */

/* 27 pending-tag —— 文案必须诚实：写"示意数据" */
.pending-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  line-height: var(--lh-mono-xs);
  color: var(--text-muted);
  padding: 3px 8px;                     /* 已登记例外：见 §5.1 与 tools/design-check.py */
  border: var(--hairline) solid var(--border-control);
  border-radius: var(--radius);
  background: transparent;
}


/* ==========================================================================
   8. 全局外壳（§7.1）
   —— 导航与"跳到主内容"是 <header> 的直接子元素，结构上不在任何 <section> 内，
      因此不可能成为深底容器的后代；它们的颜色不写深底分支（守卫同步豁免）。
   ========================================================================== */

/* 1 nav-desktop —— 高 76px（2026-10-22 由 64px 抬高，见 --nav-h 处的实测留痕），
   常驻骨白底 + 1px 底边，**无滚动状态切换**。
   v1 的"初始透明 → 滚动实化"已撤销：媒体底首屏会同时面对深底与浅底两种落点，
   一条透明导航需要两套反色字标 + 一处 JS，换来的只是滚动时的一次底色渐变。 */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-base);
  border-bottom: var(--hairline) solid var(--rule-hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--nav-h);
}
/* 品牌组：**横排**组合标 —— 图形标在左，字标（汉字行 + 拉丁行）在右两行。
   2026-10-22 二次裁定：用户以演示稿为参（版式参照），推翻同日早先的竖排方案。
   横排的判据是「图形标与字标块**垂直居中对齐**」—— 二者视觉重量相当、
   并排读作一个整体；竖排会让图形标变成压在文字上的"帽子"，字标缩在下方。
   用 grid 让图形标跨两行、字标各占一行 —— 不改 HTML 结构。 */
.nav__brand {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}
.nav__brand-mark {
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
}
.nav__brand-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-ink);
}
.nav__brand-en {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.35;
  color: var(--text-muted);
}
.nav__links { display: flex; gap: var(--sp-6); }
.nav__link {
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  color: var(--text-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.nav__link:hover { color: var(--text-ink); }
/* 当前页态：2px 下划线 + 墨色加深。不用色块、不用胶囊标签 */
.nav__link--current { color: var(--text-ink); border-bottom-color: var(--text-accent); }

/* 2 nav-mobile —— ≤768px 两行：字标 + CTA 一行，三个一级项另起一行。
   不做汉堡、不做抽屉、不做焦点陷阱、不为此加任何 JS。

   **2026-09-18 改（原方案作废）：** 原方案把 .nav__links 整条 `display:none`，
   理由记在这里以便复核 ——「3 个链接不值得拿零 JS 基线去换，且导航项已完整
   下沉到页脚」。这个理由在桌面视角成立，在手机上是错的：三个一级页只能靠
   滑到页脚才进得去，等于把"全站导航"降级成"页面底部的彩蛋"。
   真实代价是可达性，不是美观。改法是让 flex 换行 —— 不新增标记、不新增组件、
   不加 JS，只是把第二行的位置让出来。
   行高代价：sticky 导航在手机上变厚（约 110px），用 `--nav-h` 同步抬高，
   锚点跳转的 scroll-padding 跟着走，不会把标题顶到导航底下。 */
@media (max-width: 768px) {
  :root { --nav-h: 166px; }              /* 仅供 scroll-padding 估算，实际高度由内容定。
                                             2026-10-22 横排方案下实测导航实际高 158px，
                                             166px 留 8px 余量。（当日早些的竖排方案
                                             实测 165px，同样容纳在这条估算里 ——
                                             换排布方式不必再改这个值。）
                                             估算值必须 ≥ 实际高度，否则锚点跳转
                                             会被导航盖住标题 */
  .nav__inner {
    flex-wrap: wrap;
    min-height: auto;
    gap: var(--sp-3) var(--sp-4);
    padding-block: var(--sp-3);
  }
  .nav__brand { margin-right: auto; }
  .nav__cta { margin-left: auto; }
  /* 移动端图形标 26px、字标 17/9px。
     拼音（15 字符等宽）在横排里是**宽度瓶颈** —— 它比 4 个汉字还宽，
     撑得品牌组到 150px，320px 视口上把 CTA 挤到第三行（实测导航 204px）。
     收到 9px / .12em 后品牌组 ≈ 118px，CTA 回到品牌同一行。
     26px 高于「16px 可辨」的品牌可辨识下限（docs/brand-logo.md §6）。 */
  .nav__brand-mark { width: 26px; height: 26px; }
  .nav__brand-name { font-size: 17px; }
  .nav__brand-en { font-size: 8px; letter-spacing: .06em; }
  .nav__links {
    order: 3;
    width: 100%;
    gap: var(--sp-5);
    padding-top: var(--sp-3);
    border-top: var(--hairline) solid var(--rule-hairline);
    overflow-x: auto;                     /* 极端窄屏可横滑，不挤压字号 */
    -webkit-overflow-scrolling: touch;
  }
  /* 触摸目标：15px 字 + 上下 12px ≈ 45px，够手指 */
  .nav__link { padding-block: var(--sp-3); white-space: nowrap; }
}

/* 3 footer —— 深底反白，4 栏。列间无竖线，靠间距分组 */
.footer { padding-top: var(--sp-9); padding-bottom: var(--sp-7); }
/* 品牌栏的四个元素。它们**在浅底区段里就写的是深底令牌** ——
   因为页脚恒为深底，这里不是"同一组件的浅底配色"，而是它唯一的一套配色；
   §10 的深底块再声明一遍，是为了让"页脚之外万一被复用"也不会失效。 */
/* 品牌栏：**竖排**组合标 —— 图形标在上，字标（汉字行 + 拉丁行）在下。
   2026-10-23 三次裁定（终版）：以用户参考稿（演示稿页脚）实测几何为准 ——
   @1920 参考稿实测：图形标 72×72（电子 bbox 359..430）、汉字墨迹宽 76、
   拼音行白墨迹 x 137..208 = 72 与图形标**同宽**（v4.2 两端对齐的成果）、
   字标中心 x 173.5 ≈ 图形标中心 172.5 → **互相居中**。
   站点取：图形标 72 / 汉字 18px（4 字墨迹 ≈ 72）/ 拼音 8px 字距反解至墨迹 72，
   三行严格等宽；整块 shrink-to-fit 后与「品牌」栏标题同左缘（栅格纪律）。

   历史教训（两轮翻车的根因，留痕勿删）：
   · v1 竖排但左对齐 + 拼音 .18em（墨迹 108px ≫ 图形标 64px）→ 右缘参差，"完全错误"；
   · v2 改横排 grid（用户说"logo放到红框位置"实指页脚整块，被误读为只修间距）；
   · v3 回竖排，对齐参考稿：互相居中 + 拼音两端对齐同宽。

   **inline-flex 而非 flex**：`.footer__brand` 是块级元素时容器宽 = 父列宽，
   `align-items:center` 会把三行居中到**整列**中心（1440 下缩进 ~90px）；
   inline-flex 让容器 shrink-to-fit（宽 ≈ 最宽子行），居中只发生在
   图形标与字标**之间**，整块仍与栏标题同左缘。
   （同类陷阱已在横排 grid 上踩过一次：auto 列摊分剩余空间，间距随视口漂移
   ——块级容器的"两项间距离"永远要量，不能看。） */
.footer__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.footer__brand-mark {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: var(--sp-3);
}
.footer__brand-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-on-dark);
  text-align: center;
}
.footer__brand-en {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .011em;   /* v4.2 两端对齐反解（实测校准）：Consolas 8px 实际
                               advance ≈ 0.59em（15 字 = 70.8px），补足至 72px
                               → (72−70.8)/14 ≈ .011em → 墨迹 ≈ 72px，与图形标同宽 */
  line-height: 1.35;
  color: var(--text-on-dark-muted);
  text-align: center;
}
.footer__tagline { font-size: 15px; line-height: var(--lh-small); color: var(--text-on-dark-muted); margin-top: var(--sp-4); }
.footer__slogan  { font-size: 15px; line-height: var(--lh-small); color: var(--text-on-dark-muted); margin-top: var(--sp-2); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--text-on-dark-muted);
}
.footer__links { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__link { font-size: 15px; color: var(--text-on-dark); text-decoration: none; }
.footer__link:hover { color: var(--text-accent-on-dark); text-decoration: underline; }

/* 4 compliance-line —— 中文站唯一的"正规感"装置，不可省略、不可缩成角落小字 */
.compliance-line {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid var(--rule-on-dark);
  font-size: 13px;
  line-height: var(--lh-small);
  color: var(--text-on-dark-muted);
}
.compliance-line__sep { padding-inline: var(--sp-2); color: var(--border-control-on-dark); }
.compliance-line__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.compliance-line__link:hover { border-bottom-color: currentColor; }


/* ==========================================================================
   9. 首屏（hero · T1.n1）
   —— 两种状态由**两个类名**决定：
      无素材态（当前上线状态）：.hero                → 骨白纯排印
      媒体底态（素材到位后）：  .hero--media + .surface-dark
   去掉 .hero--media / .surface-dark 两个类名即回到浅底纯排印首屏 ——
   这条设计必须满足"无素材时页面依然完整"。
   ========================================================================== */
/* 首屏文字层不再有 60ch 栏宽。
   原值 max-width:60ch 是**排版遗留**：它按 .hero 自身字号（继承 body 的 16px）计算，
   1ch ≈ 8.9px → 60ch ≈ 534px。而主标语「让研发软实力变成硬通货」是 11 个全角字，
   桌面 --fs-display 档 52px → 11 × 52 + .01em 字距 ≈ 578px > 534px，
   浏览器只好把「货」挤到第三行 —— 断在半个词上，观感是割裂。
   docs/design.md §3.2 已写明「11 字 × 52px = 572px，单行可容纳，不需要断行」，
   即单行是原设计意图，是这条栏宽破坏了它。
   栏宽的职责改由下面两个元素各司其职：
     · .hero__title--slogan —— 自己算字号，保证 11 字单行（见 §9）
     · .hero__sub —— 单独限制导语行宽，替代原先由 .hero 承担的可读行宽 */
.hero { max-width: none; }
/* 导语行宽：34rem ≈ 544px，与原 60ch（≈534px）基本等价，可读性不变。
   只作用于首屏 .hero 内 —— 内页的 .hero__sub 不在 .hero 里，不受此限 */
.hero .hero__sub { max-width: 34rem; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: .01em;     /* 仅 --fs-display 一级允许，且必须为正（§3.4 第 1 条）*/
  color: var(--text-ink);
  margin-top: 0;             /* 原为 --sp-6（眉标 → H1 的间距），眉标撤除后归零 */
}
/* H1 的两行是**排版决定**，不交给浏览器断行：
   "合规即资产 / 让研发软实力变成硬通货" 在任何宽度下都必须断在同一个位置 ——
   让它断在哪一半的字上，那句主标语就不再是原来那句了。 */
.hero__title > span { display: block; }
/* 主标语（11 个全角字）—— 解决"从字中间断开"。
   .hero__title 的通用字号 --fs-display：桌面档 52px → 11 字 + .01em 字距 ≈ 578px。
   桌面（容器内宽 1120px）放得下，但窄视口里 --fs-display 落到 32px 下限，
   11 字 ≈ 355px > 可用宽（320px 视口只有 280px），浏览器只能从字中间断开
   （"让研发软实力变成硬通 / 货"）—— 断在半个词上，观感是割裂。
   做法：让**整个 H1** 的字号由可用宽反推，而不是只救长句那一行
   （若只有长句变小，两行字号不等，同样是破的）：
     11 字 + .01em 字距 ≈ 11.3 × 字号 → 字号 = 可用宽 / 11.8
   可用宽取 .hero__body 的**布局实际宽度**（cqw，不含滚动条，不写死常数），
   所以 .hero__body 作为行内尺寸查询容器；上限仍交给 --fs-display，
   不新增字号数字，桌面端完全不受影响。
   （2026-10-26：倍率 11.3 → 11.8。11.3 是"恰好放满"的极限值，375 直截实测
   末字距视口右缘 <8px，且不同系统字宽有 ±2% 浮动，有被裁的真实风险；
   放宽到 11.8 用每行约 4% 的字号损失换回光学余量。桌面端被 --fs-display
   封顶，此改动只作用于窄视口。）
   实测：1440px 视口 → 可用宽 1120px → 取 --fs-display 52px（封顶，不变）；
        320px 视口 → 可用宽 280px → 23.7px，11 字 ≈ 264px，单行放下且留 16px ✓
   注：container-type 带来 layout containment（成为绝对定位的包含块），
   但 .hero__body 内无绝对定位元素（媒体层在它外面），无副作用。 */
.hero__body { container-type: inline-size; }
.hero__title--slogan {
  font-size: var(--fs-display);                        /* 不支持 cq 时的回退 */
  font-size: min(var(--fs-display), calc(100cqw / 11.8));
}
/* 断行位置由排版决定，不交给浏览器：锁死 nowrap，
   让"放不下"这件事由上面的字号封顶解决，而不是由浏览器随手断词解决。 */
.hero__title--slogan > span { white-space: nowrap; }
.hero__sub {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text-muted);  /* 导语级说明降次级色（2026-10-27 配色层次调整） */
  margin-top: var(--sp-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
}

/* 媒体底态：四层堆叠。层序写错任何一处，文字就会直接压在画面上 */
.hero--media {
  position: relative;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: var(--hero-min-media);
  padding-block: var(--sp-9);
  overflow: hidden;
}
/* ② 媒体层：不参与文档流 —— 它不占高度、不产生外边距、不推进后续区块的位置。
   "背景"与"独立区块"的分界线就在这里：素材到位与否，首屏之后所有区块的位置不变。 */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__media > video,
.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ③ 遮罩：唯一的对比度保证装置。必须是纯色，否则对比度无法核算 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* ④ 文字层 */
.hero--media .hero__body { position: relative; z-index: 1; width: 100%; }


/* ==========================================================================
   10. 深底重声明块（§2.6）
   --------------------------------------------------------------------------
   必须整体存在、不得删减分支 —— 哪怕某个组件当前不出现在深底区块里。
   背景是一次真实缺陷：Style Tile v1 的深底样张里指标数字渲染成 #111111，
   在深墨绿上实测 1.55，等同失明。成因不是"漏改一个色值"，而是
   **组件库的默认颜色全部是按浅底写的** —— 进入深底后它们会同时失效，
   而漏掉的那几处恰好是最重要的数字行。
   守卫脚本的 dark-coverage 检查项做差集，差集非空即失败。
   --------------------------------------------------------------------------
   覆盖 6 组：主文字 / 次级文字 / 强调 / 交互态 / 装饰线 / 功能性控件边界。
   ========================================================================== */

/* ① 主文字（原 --text-ink 在深底上只有 1.55）
   num-item__note 2026-10-26 从 ② 移入：浅底侧短评提到主墨色，深底侧同步给主白 */
.surface-dark .section-header__h2,
.surface-dark .num-item__title,
.surface-dark .num-item__note,
.surface-dark .param-table__val,
.surface-dark .standard-chip,
.surface-dark .timeline__title,
.surface-dark .evidence-block__title,
.surface-dark .tier-col__name,
.surface-dark .concern-item__q,
.surface-dark .team-card__name,
.surface-dark .callout-bar,
.surface-dark .hairline-list__row--head,
.surface-dark .submit-feedback,
.surface-dark .hero__title,
.surface-dark .field input,
.surface-dark .field select,
.surface-dark .button-outline,
.surface-dark .text-link-cta,
.surface-dark .footer__brand-name { color: var(--text-on-dark); }

/* ② 次级文字 / 单位（原 --text-muted 在深底上只有 2.02；编号列已撤除）*/
/* ②b 关键数字（2026-10-27 随浅底档改强调色，深底用薄荷成对令牌）*/
.surface-dark .stat-gauge__num { color: var(--text-accent-on-dark); }
.surface-dark .section-header__lede,
.surface-dark .num-item__desc,
.surface-dark .param-table__key,
.surface-dark .stat-gauge__curr,
.surface-dark .stat-gauge__unit,
.surface-dark .stat-gauge__desc,
.surface-dark .stat-gauge__sub,
.surface-dark .timeline__desc,
.surface-dark .evidence-block__body,
.surface-dark .tier-col__scope,
.surface-dark .concern-item__a,
.surface-dark .team-card__bio,
.surface-dark .quote__text,
.surface-dark .quote__cite,
.surface-dark .prose__p,
.surface-dark .privacy-note,
.surface-dark .pending-tag,
.surface-dark .tag,
.surface-dark .form-tab,
.surface-dark .field__label,
.surface-dark .hero__sub,
.surface-dark .footer__brand-en,
.surface-dark .footer__tagline,
.surface-dark .footer__slogan { color: var(--text-on-dark-muted); }

/* ③ 强调（原 --text-accent 在深底上只有 1.88）*/
.surface-dark .text-link-cta:hover,
.surface-dark .tier-col__who,
.surface-dark .team-card__role,
.surface-dark .form-tab[aria-selected="true"],
.surface-dark .field input:focus,
.surface-dark .field select:focus { color: var(--text-accent-on-dark); }

/* ④ 交互态 */
.surface-dark .text-link-cta { text-decoration-color: var(--rule-on-dark); }
.surface-dark .text-link-cta:hover { text-decoration-color: var(--text-accent-on-dark); }
.surface-dark .button-outline { border-color: var(--border-control-on-dark); }
.surface-dark .button-outline:hover {
  border-color: var(--text-on-dark);
  background: rgba(246,243,236,.06);
}
.surface-dark .form-tab { border-bottom-color: transparent; }
.surface-dark .form-tab[aria-selected="true"] { border-bottom-color: var(--text-accent-on-dark); }
/* 深底上的实心标签必须**反相**：深墨绿实心在深底上不可见（§2.6 第 4 条）*/
.surface-dark .tag--active {
  background: var(--surface-base);
  border-color: var(--surface-base);
  color: var(--surface-dark);
}
.surface-dark .field__err { color: var(--state-error-on-dark); }
.surface-dark .field--err input,
.surface-dark .field--err select { border-bottom-color: var(--state-error-on-dark); }
.surface-dark .field input:focus,
.surface-dark .field select:focus { border-bottom-color: var(--text-accent-on-dark); }

/* ⑤ 装饰线（原 --rule-hairline 在深底上是 8.42，过亮，会变成刺眼白线）*/
.surface-dark .hairline-list__row,
.surface-dark .num-item,
.surface-dark .param-table__row,
.surface-dark .team-card,
.surface-dark .quote { border-color: var(--rule-on-dark); }
.surface-dark .hairline-list__row { border-top-color: var(--rule-on-dark); }
.surface-dark .hairline-list__row:last-child { border-bottom-color: var(--rule-on-dark); }
.surface-dark .num-item { border-top-color: var(--rule-on-dark); }
.surface-dark .num-item:last-child { border-bottom-color: var(--rule-on-dark); }
.surface-dark .param-table__row { border-top-color: var(--rule-on-dark); }
.surface-dark .param-table__row:last-child { border-bottom-color: var(--rule-on-dark); }
.surface-dark .timeline::before { background: var(--rule-on-dark); }
.surface-dark .timeline__mark { background: var(--text-on-dark); }
.surface-dark .timeline__step--current .timeline__mark { background: var(--text-accent-on-dark); }
.surface-dark .num-list--with-note .num-item {
  background: var(--rule-on-dark);
  border-left-color: var(--text-accent-on-dark);
}

/* ⑥ 功能性控件边界（原 --border-control 在深底上 3.37，偏弱）*/
.surface-dark .standard-chip,
.surface-dark .tag,
.surface-dark .pending-tag,
.surface-dark .button-outline,
.surface-dark .field input,
.surface-dark .field select { border-color: var(--border-control-on-dark); }
.surface-dark .tier-table {
  border-top-color: var(--border-control-on-dark);
  border-bottom-color: var(--border-control-on-dark);
}
.surface-dark .tier-col { border-left-color: var(--rule-on-dark); }
.surface-dark .callout-bar { border-color: var(--border-control-on-dark); background: transparent; }
.surface-dark .field input::placeholder { color: var(--text-on-dark-muted); }
/* 深底上的图片与占位框必须有 1px 骨白 16% 描边，否则会失去边界（§2.6 第 6 条）*/
.surface-dark .hero__media { border: var(--hairline) solid var(--rule-on-dark); }
.surface-dark .hero__scrim { background: var(--scrim-hero); }

/* ⑦ 页脚与合规行（§7.1 组件 3 / 4）
   —— 页脚是**恒为深底**的一块（.footer 上直接挂 surface-dark），
      所以下面这些分支不是"同一组件的另一套配色"，而是把页脚的颜色
      写在深底块这一个地方 —— 浅底区段里只写它"用哪个深底令牌"。
      这样做的收益是：页脚永远不会出现"某一行忘了换色"的半成品状态。 */
.surface-dark .footer__col-title,
.surface-dark .compliance-line { color: var(--text-on-dark-muted); }
.surface-dark .footer__link { color: var(--text-on-dark); }
.surface-dark .footer__link:hover { color: var(--text-accent-on-dark); }
.surface-dark .compliance-line__sep { color: var(--border-control-on-dark); }
.surface-dark .compliance-line { border-top-color: var(--rule-on-dark); }


/* ==========================================================================
   10.5 摩尔纹场纹理 + 边缘章节导轨（2026-09-18 · 参考工程 MOIRÉ）
   --------------------------------------------------------------------------
   摩尔纹 = 两组等距细栅格以微小夹角叠印产生的干涉条纹，命名取自参考工程。
   用**内联 SVG 图案**实现，不用 CSS 渐变 —— 本站禁渐变（反 AI 味第 1 条），
   且 SVG 图案零素材、零依赖、零构建，双击即开。

   ★ 透明度是算出来的，不是挑出来的。最坏点 = 两组栅格的重叠处，
     那里合成底最暗，正文对比度在这里见底。脚本实测上限：
       骨白底 a ≤ .055 · 次级底 a ≤ .025（更暗，是约束侧）· 深底 a ≤ .039
     取最严侧的 .025 / .030，最坏点对比度 4.51 / 4.52。
     —— 想要"更明显"的摩尔纹，正解是把它移到没有正文的地方（见边缘导轨），
        不是把这里的数值调大。
   ========================================================================== */

/* ① 区块场纹理：极淡，只提供纸感，不承载任何信息 */
.section--moire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' width='6' height='6' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0V6' stroke='%230B3D2E' stroke-width='1' stroke-opacity='.025'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3Crect width='240' height='240' fill='url(%23g)' transform='rotate(3 120 120)'/%3E%3C/svg%3E");
}
.surface-dark.section--moire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' width='6' height='6' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0V6' stroke='%23F6F3EC' stroke-width='1' stroke-opacity='.03'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3Crect width='240' height='240' fill='url(%23g)' transform='rotate(3 120 120)'/%3E%3C/svg%3E");
}

/* ② 边缘导轨：摩尔纹在这里可以"放开"，因为它下面没有正文。
      只在大屏出现（容器 1200 + 两侧留白足够时），窄屏与打印一律不出现。
      2026-10-23 由 72px 收窄到 36px（用户裁定"收窄一半"）：导轨只是方向指示，
      不该和内容争夺视觉宽度 —— 72px 在 1440 视口吃掉了容器左侧 120px
      边距的六成；36px（8px 内边距 + 20px 指示条 + 8px）仍然承载
      悬停 / 当前态的全部反馈，信息量零损失。
      2026-10-23 二次修正（用户裁定「导轨不要压着标题行」）：top:0 时导轨
      （z-index 30）整条盖过固定导航栏（z-index 10）的左端，摩尔纹纹理与
      右缘发丝线从品牌标题行上穿过去 —— 导轨从导航栏下缘起步，与标题行脱开。 */
.rail { display: none; }

@media (min-width: 1400px) {
  .rail {
    display: block;
    position: fixed;
    top: var(--nav-h); left: 0;
    width: 36px;
    height: calc(100vh - var(--nav-h));
    z-index: 30;
    background-color: var(--surface-base);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' width='6' height='6' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0V6' stroke='%230B3D2E' stroke-width='1' stroke-opacity='.22'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3Crect width='240' height='240' fill='url(%23g)' transform='rotate(3 120 120)'/%3E%3C/svg%3E");
    border-right: var(--hairline) solid var(--rule-hairline);
  }
  .rail__list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-4);
    padding-inline: var(--sp-2);
    list-style: none;
  }
  .rail__link {
    display: block;
    height: 2px;
    background: var(--border-control);
    transition: background-color var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
    transform-origin: left center;
  }
  .rail__link:hover { background: var(--text-ink); transform: scaleY(2); }
  .rail__item.is-current .rail__link { background: var(--text-accent); transform: scaleY(2); }
  .rail__link:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
}

/* 无 JS 时导轨无从判断当前区块 —— 整条不出现，避免留一条"永远停在第一格"的死导轨 */
html:not(.js-reveal) .rail { display: none; }


/* ==========================================================================
   10.5b 满屏节奏（2026-10-23 · 用户裁定"每一个板块占满一屏"）
   --------------------------------------------------------------------------
   实测改前（1440×900）各板块 0.33–1.34 屏不等：首页一半板块不满一屏
   （gaps 0.62 / method 0.64），两个板块超屏（engine 1.34 / get-started 1.10）；
   内页同样碎（0.33–1.30）。板块边界与屏幕边界不对齐，滚动节奏是碎的。
   规则（对齐参考站"一屏一事"的节奏）：
   ① 桌面端每个板块 min-height = 一屏（100vh − 吸顶导航），内容垂直居中；
   ② 内容天然超过一屏的板块不硬塞 —— 取 1.5 屏（.section--x15），
      密度与呼吸都成立，而不是在 1.1 屏处尴尬断开；
   ③ 移动端（≤768px）不设 min-height —— 小屏"满屏"交给内容自然决定，
      硬凑 100vh 只会制造大段空白；打印同理（见 @media print 的重置）。
   层叠说明：本块必须位于 .hero--media（媒体底态四层堆叠）之后 ——
   两者同为 0-1-0 特异性，后出现的 min-height 生效，首屏因此同样满屏
   （改前 0.72 屏）；媒体层 inset:0 锚定 .hero--media（position:relative），
   会随区块一起长高，四层堆叠不变。
   ========================================================================== */
@media (min-width: 769px) {
  .section {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
  }
  /* flex 子项默认宽度收缩到 max-content —— container 必须 width:100%，
     才能继续由 max-width 与 margin-inline:auto 控宽居中 */
  .section > .container { width: 100%; }
  /* 超一屏板块的 1.5 屏档：内容天然体量 + 一半呼吸空间 */
  .section--x15 { min-height: calc((100vh - var(--nav-h)) * 1.5); }
}


/* ==========================================================================
   10.6 吉祥物（2026-09-18；落位五处调整同日，见 section-conformance.md §16）
   --------------------------------------------------------------------------
   三种用法：
     ① 每页"在场角色"（.mascot-slot）—— 占 split 的一整列，姿态随该页内容而变。
        不浮在文字上：这些区块的文案本来就占满整行，浮动必然压字。
        变体 --lg：证据墙这类高密度长区块，解除 394px 上限、贴列右缘放大。
     ② 内页首屏（.mascot-slot--hero）—— 首屏右列，比内容区大一号，贴列右缘。
        2026-09-19 起统一用**半身像**（mascot-*-bust.png，由全身像裁切）：
        全身像过高，文字列下方大片留白（用户裁定）。
     ③ 404 背景大姿态（.mascot-backdrop）已于 2026-10-27 整组移除：
        用户裁定吉祥物居中缩小 —— 404 整页改居中构图，吉祥物回常规流（见 §10 注释）。
   （页脚小标 .footer__mark 已于 2026-09-18 移除：用户裁定页脚保持纯排印，
     不留死代码。
     2026-10-22 用户新裁定推翻该结论：页脚品牌栏改为**竖排组合标**
     （图形标在上 + 字标在下），见 §3 .footer__brand。
     2026-10-23 三次裁定（终版）：竖排 + 图形标与字标互相居中 + 拼音两端对齐
     同宽 72px，几何以用户参考稿实测为准（详见 §3 .footer__brand 注释）。
     图形标用 brand/logo-mark-white.svg（单色白版）——
     彩色版的深墨绿笔画会沉进页脚深底，白版是「单色挖空 · 以墨保形」变体。）
   姿态是逐页生成的（参考既有形象保住角色一致），
   底色沿用三底合成比对的结论落骨白：深底其实更醒目，但 §2.6 要求深底图片
   带 1px 骨白描边，抠底的异形形象加矩形框反而怪。
   宽高属性写死，加载时不跳版。
   ========================================================================== */
.mascot-slot { margin: 0; align-self: center; justify-self: center; }
.mascot-slot__img { display: block; width: 100%; max-width: 394px; height: auto; }
/* 吉祥物在左：列宽反过来（5fr / 7fr）。但 **DOM 顺序仍恒为「内容在前」** ——
   只改视觉次序，读屏与键盘顺序不受影响；窄屏塌成单列时它自然落到内容上方。 */
.section-body--mascot-left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.section-body--mascot-left .mascot-slot { order: -1; }
/* 放大档：高密度长区块（五个证据块），列有多高就站多大，贴列右缘 */
.mascot-slot--lg { justify-self: end; }
.mascot-slot--lg .mascot-slot__img { max-width: none; }
/* 首屏档：比内容区大一号，贴列右缘 */
.mascot-slot--hero { justify-self: end; }
.mascot-slot--hero .mascot-slot__img { max-width: 480px; }
/* 场景插画档（2026-10-27）：板块级场景图（机器人 + 道具 + 环境的完整构图），
   与"在场角色"半身/全身像不同，它是一幅插画。
   【2026-10-27 二次裁定】首版"内容尾部横带"（居中限宽 560px）实测把每个板块
   撑到约 1.5 屏、吉祥物两侧大量空白 —— 用户裁定返工，改为占 .split--side 右列
   （内容左、场景右、垂直居中），整板块收回一屏；限宽 340px。
   抠透明底，三底色通用。 */
.mascot-slot--side { justify-self: center; width: 100%; }
.mascot-slot--side .mascot-slot__img { max-width: 340px; margin-inline: auto; }

/* ── 待机动效（2026-10-27 新增 · motion.md §12）──────────────────────────
   全站吉祥物按版面主题给轻量待机：float（translateY 循环，位移档复用
   --travel-xs/sm）与 sway（rotate 摆动，角档 --sway-xs/sm）。
   守卫「@keyframes 全站为 0」随真源修订开**两个具名口子**：
   · 只动 transform、只用于待机循环 —— 交互路径仍是可中断的 transition；
   · 缓动用系统关键字 ease-in-out（对称循环），不占 --ease-out/in 档；
   · reduced-motion 在令牌层归零（--dur-idle-* → 0ms）后等效静止。
   主题映射（姿态语义 × 待机节奏）：
   快档 a = 跃动/困惑 · 中档 b = 递物/倾听/展示/指引 · 慢档 c = 审视/专注/生长/托举/合影 */
.mascot-slot__img { animation: mascot-float var(--float-dur, var(--dur-idle-c)) ease-in-out infinite; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-1 * var(--float-travel, var(--travel-xs)))); }
}
@keyframes mascot-sway {
  0%, 100% { transform: rotate(calc(-1 * var(--sway-rot, var(--sway-xs)))); }
  50%      { transform: rotate(var(--sway-rot, var(--sway-xs))); }
}
/* 摇摆档：介绍展示 / 倾听 / 挠头困惑 / 404 耸肩无辜 */
#modules .mascot-slot__img,
#value .mascot-slot__img   { animation-name: mascot-sway; --float-dur: var(--dur-idle-b); --sway-rot: var(--sway-xs); }
#concerns .mascot-slot__img,
#not-found .mascot-slot__img { animation-name: mascot-sway; --float-dur: var(--dur-idle-a); --sway-rot: var(--sway-sm); }
/* 浮动档：逐板块定节奏 */
#reality .mascot-slot__img        { --float-dur: var(--dur-idle-c); --float-travel: var(--travel-xs); }
#gaps .mascot-slot__img           { --float-dur: var(--dur-idle-a); --float-travel: var(--travel-sm); }
#method .mascot-slot__img         { --float-dur: var(--dur-idle-b); --float-travel: var(--travel-xs); }
#traceability .mascot-slot__img   { --float-dur: var(--dur-idle-a); --float-travel: var(--travel-sm); }
#engine .mascot-slot__img         { --float-dur: var(--dur-idle-c); --float-travel: var(--travel-sm); }
#command .mascot-slot__img,
#case-evidence .mascot-slot__img,
#team-full .mascot-slot__img,
#channel .mascot-slot__img        { --float-dur: var(--dur-idle-c); --float-travel: var(--travel-xs); }
.mascot-slot--hero .mascot-slot__img { --float-dur: var(--dur-idle-b); --float-travel: var(--travel-xs); }

/* 高密度板块一屏收敛（2026-10-27）：engine / team-full 侧栏化后仍 ~1.3 屏，
   用户裁定"截图里的板块都要一屏" —— 两块内部垂直节奏整体收紧一档
   （全部走令牌，不写死像素），区块底距降为 H 档。
   满屏节奏规则②在这两块被实测推翻留痕：压缩后回到一屏，
   1.5 屏档（.section--x15）全站仅剩 case-evidence。
   engine 的收束句随迁到右栏场景插画下方 —— 左栏三个内容组 + 右栏插画 + 收束句，
   是本块能进一屏的唯一排布。 */
#engine { padding-block: var(--section-h); }
#engine .section-header + .section-body { margin-top: var(--sp-6); }
#engine .section-body .stack-6 > * + * { margin-top: var(--sp-4); }
#engine .hairline-list__row { padding-block: var(--sp-3); }
#engine .timeline__step { padding-top: var(--sp-4); }
#engine .timeline__desc { margin-top: var(--sp-2); }
#team-full { padding-block: var(--section-h); }
#team-full .section-header + .section-body { margin-top: var(--sp-6); }
#team-full .team-card { padding: var(--sp-5); }
#team-full .mascot-slot--side .mascot-slot__img { max-width: 220px; }
/* 404：2026-10-27 三次裁定 —— 吉祥物**居中 + 缩小**。
   上一版"贴右背景大姿态"（96% 高、右缘裁切）被用户截图否掉；
   早期"贴右"是为了避让左置文字，本轮直接把整页构图改为**居中堆叠**：
   文字水平居中、吉祥物回到常规流（.mascot-slot，320px）居中落在链接下方 ——
   居中是构图属性，不再是吉祥物的定位技巧。文字与吉祥物不再需要水平避让，
   .mascot-backdrop / .section--has-backdrop 全组规则随之移除（全站无使用处）。 */
#not-found .container { text-align: center; }
#not-found .section-body { margin-top: var(--sp-6); }
#not-found .mascot-slot { margin-top: var(--sp-7); }
#not-found .mascot-slot__img { max-width: 320px; margin-inline: auto; }
@media (max-width: 768px) {
  .mascot-slot__img { max-width: 220px; }
  .mascot-slot--hero .mascot-slot__img { max-width: 240px; }
  .mascot-slot--side .mascot-slot__img { max-width: 280px; }
  /* 404 吉祥物居中构图（流内）在窄屏走同一套规则：280px 居中，无需单独降级 */
  /* 触摸目标：Tab 与页脚链接在手机上原本只有约 30px 高，补到 44px */
  .form-tab { padding-bottom: var(--sp-3); min-height: 44px; }
  .footer__link { display: inline-block; padding-block: var(--sp-2); }
}



/* ==========================================================================
   11. 滚动入场（§7.4 组件 25 · docs/motion.md §3.1）
   --------------------------------------------------------------------------
   三条实现纪律，写反任何一条都会出事：
   ① 默认态是"可见"，隐藏态由 JS 添加的类触发 —— 写成"默认隐藏等 JS 打开"的话，
      JS 一挂整页空白。判据：**把 main.js 删掉，页面必须完整可读。**
   ② 首帧已在视口内的元素直接给最终态（main.js 负责）
   ③ unobserve 必须在加完类之后调用（main.js 负责）

   ★ 2026-09-18 修活：这里原本写的是 `.reveal`（class），而标记层写的是
     `data-reveal`（属性）、JS 只加 `is-in` —— 三条从来没接上，全站 46 处
     标记**一次都没有动过**。选择器改为属性选择器后才真正生效。
     教训：class / 属性 / JS 三方各写一个名字时，必须有一处把它们对齐，
     否则"写了动画但看不见"这种故障可以一直不被发现。
   ========================================================================== */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--travel-lg));
}
html.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-entry) var(--ease-out),
              transform var(--dur-entry) var(--ease-out);
}

/* ── 子项错峰（2026-09-18 新增 · 参考工程 MOIRÉ）
   ------------------------------------------------------------------
   区块整体入场之上，再让**内容块**依次落位：卡片、列表行、指标格。
   规则刻意收得很紧：
     · 错峰只做一层序列，步长按 --dur-micro 四等分推导（不引入新时长字面量，
       减少动效时随令牌一起归零）
     · 第 4 项起封顶，避免长列表越往下越慢（末项"延迟 + --dur-panel"仍短于 --dur-entry）
     · 位移只用 --travel-md（16px），比外层区块的 24px 小 —— 外层走得远、
       内层走得近，才有"整体落下、内部再对齐"的层次
     · 容器本身不再单独淡入（否则父与子两套透明度相乘，内部会发灰）
     · 隐藏态要求祖先里有一个 [data-reveal]：一旦有人把 data-reveal-stagger
       加到观察范围之外的容器上，结果是"不参与动画"，而不是"永久隐形"  */
html.js-reveal [data-reveal][data-reveal-stagger] { opacity: 1; transform: none; }
html.js-reveal [data-reveal] [data-reveal-stagger] > *,
html.js-reveal [data-reveal][data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--travel-md));
}
html.js-reveal [data-reveal].is-in [data-reveal-stagger] > *,
html.js-reveal [data-reveal][data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-panel) var(--ease-out),
              transform var(--dur-panel) var(--ease-out);
}
html.js-reveal [data-reveal].is-in [data-reveal-stagger] > *:nth-child(2),
html.js-reveal [data-reveal][data-reveal-stagger].is-in > *:nth-child(2) {
  transition-delay: var(--stagger-step);
}
html.js-reveal [data-reveal].is-in [data-reveal-stagger] > *:nth-child(3),
html.js-reveal [data-reveal][data-reveal-stagger].is-in > *:nth-child(3) {
  transition-delay: calc(var(--stagger-step) * 2);
}
html.js-reveal [data-reveal].is-in [data-reveal-stagger] > *:nth-child(n + 4),
html.js-reveal [data-reveal][data-reveal-stagger].is-in > *:nth-child(n + 4) {
  transition-delay: calc(var(--stagger-step) * 3);
}


/* ==========================================================================
   11.5 页面切换（2026-09-18 新增）
   --------------------------------------------------------------------------
   原本 docs/motion.md §10 把"跨页转场"列为不做 —— 那是"站点用普通导航"时的结论。
   用户明确要求后改为做，但做法必须遵守两条底线：
     ① **不用 @keyframes**：转场由 transition 承担，可随时被打断
     ② **默认态是可见**：opacity:0 只挂在 html.js-page-transition 之下，
        而这个类是 JS 加的 —— JS 没跑起来，页面就是普通导航，不会白屏

   只有 opacity 参与，**绝不用 transform 动 body**：
   transform 会给 position:fixed 的后代造出新的包含块，边缘导轨（.rail）
   会从"钉在视口"变成"跟着页面滚"。opacity 不会。
   ========================================================================== */
html.js-page-transition body {
  transition: opacity var(--dur-panel) var(--ease-out);
}
html.js-page-transition.is-entering body,
html.js-page-transition.is-leaving body { opacity: 0; }


/* ==========================================================================
   12. 响应式（§4 栅格用法）
   ========================================================================== */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-gauge--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 四档：2×2，保留竖线，第二列起去左线 */
  .tier-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
  /* 品牌组竖排后块宽仅 ~72px，2 列的单列（1024 档 440px）装得下，
     769–1024 段品牌列随栅格即可。 */
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split, .split--even { grid-template-columns: 1fr; }
  .stat-gauge--2, .stat-gauge--3, .stat-gauge--4 { grid-template-columns: 1fr; }

  /* 单列时横向连接线失去意义，去掉 */
  .step-flow { grid-template-columns: 1fr; gap: var(--sp-7); }
  .step-flow::before { display: none; }
  .timeline { grid-template-columns: 1fr; gap: var(--sp-7); }
  .timeline::before { display: none; }
  /* ≤768 品牌列独占整行：2 列单列仅 ~136px（375 档），
     页脚 slogan「合规即资产 · 让研发软实力变成硬通货」会被折成
     「……变成 / 硬通货」（实测）。独占整行后列宽 335px，一行放下。
     品牌组本身仍是竖排构图（与桌面同理），只是独占一行。 */
  .footer__cols > div:first-child { grid-column: 1 / -1; }

  /* 参数表：不做横向滚动 —— 横向滚动会把全站最重要的证据藏起来。
     键在上、值在下，两行读完。 */
  .param-table__row,
  .param-table--3col .param-table__row { grid-template-columns: 1fr; }
  .param-table__key { padding-bottom: 0; }
  .param-table__val { padding-top: var(--sp-1); }

  /* 色块列表（#gaps）：窄屏纵向流 —— 三列网格改单列，色块内边距收一档 */
  .num-item { grid-template-columns: minmax(0, 1fr); }
  .num-list--with-note .num-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
  }
  .num-list--with-note .num-item__note {
    text-align: left;
    white-space: normal;
  }

  /* 四档：1 列堆叠 —— 递进色块纵向排列，深浅顺序不变 */
  .tier-table { grid-template-columns: 1fr; }
  .tier-col { border-top: var(--hairline) solid var(--rule-hairline); }
  .tier-col:first-child { border-top: 0; }

  /* 双案例滑动：窄屏片间距收一档 */
  .case-deck { column-gap: var(--sp-5); }

  .hero__actions { gap: var(--sp-6); }
  .hero--media { min-height: 520px; }
}


/* ==========================================================================
   13. 减少动效（§9.1 · docs/motion.md §4）
   --------------------------------------------------------------------------
   归零写在**令牌层**，意味着"减少动效"是改一个变量的结果，
   而不是几十处逐属性绕开的集合。前者不可能漏，后者必然会漏。
   唯一的刻意保留：链接箭头的 2px 位移 —— 它不构成前庭刺激，
   而它是"这个能点"的唯一动态提示。归零的是"大位移与持续运动"，不是"所有变化"；
   一刀切会让减少动效变成减少可用性。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms; --dur-panel: 0ms; --dur-entry: 0ms; --stagger-step: 0ms;
    --dur-idle-a: 0ms; --dur-idle-b: 0ms; --dur-idle-c: 0ms;
    --travel-xs: 0px; --travel-sm: 0px; --travel-md: 0px; --travel-lg: 0px;
    --sway-xs: 0deg; --sway-sm: 0deg;
  }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   14. 打印样式（§8.3）—— 归档型站点的必需项
   —— 深底区块直接打印会变成一整片墨，因此打印时全部转为白底黑字。
   @media print 内用 3 位简写色值是刻意的：它是**独立于令牌表的一套打印覆盖**，
   不参与屏幕配色，守卫脚本也只允许简写出现在这个块内。
   ========================================================================== */
@media print {
  :root {
    --surface-base: #fff; --surface-alt: #fff; --surface-dark: #fff;
    --text-ink: #000; --text-body: #000; --text-muted: #444;
    --text-on-dark: #000; --text-on-dark-muted: #444;
    --text-accent: #000; --text-accent-on-dark: #000;
    --rule-hairline: #ccc; --rule-on-dark: #ccc;
    --border-control: #666; --border-control-on-dark: #666;
  }
  .nav, .skip-link, .hero__media, .hero__scrim { display: none; }
  /* 满屏节奏是屏幕概念 —— 打印按内容自然分页，min-height 归零避免每节强占一页 */
  .section { min-height: 0; }
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal-stagger] > * { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #444; }
  .param-table, .tier-table, .timeline, .step-flow { break-inside: avoid; }
  @page { margin: 18mm; }
}