/* ══════════════════════════════════════════════════════════════════
   about-careers-layout-r32.css — 第 32 轮 · 关于我们 / 加入我们 版式细化
   2026-09-25 · UI/UX

   委托:「關於我們和加入我們,插圖和排版重新根據模塊的內容去細化和提升」
   本文件只做**排版那一半**。插图另一条线在做,本文件不画图、不动
   figmark-r14.js、不插 .figmark 钩子,只为它预留节奏(见 §6)。

   ── 本轮的诊断(全部实测,量具 _ac-layout-evidence/probe-ac.mjs)────

   这两页与 services 那一轮**不是同一个病**,所以不是同一个解法。
   services 是「同一种东西被讲了三遍」⇒ 收敛成一套。这两页 8 个模块装的
   是**四种不同性质**的内容,现在却用了 **7 个不同组件**去装 ——
   于是同性质的两块长得不一样,不同性质的两块又长得一样。

   逐模块定性(依据是文案本身的句式,不是观感):

     并列(同时成立、无先后、彼此对等)
       about#boundary    .tenets      6 条「不…」原则
       about#governance  .cards--3    系统执行 / 人工裁定 / 责任具名
       careers#work      .qa          3 个开放问题
       careers#structure .split       3 条结构保障
     对照(两侧必须对着读)
       about#what        .compare     「我们是」4 条 ↔「我们不是」4 条,严格 1:1
       about#vision      .split       普惠的是工具与结构 / 不普惠的是风险
       careers#who       .rows--pair  「看到 X」→「想 Y」三组对偶句
     顺序(串行的步骤)
       about#governance  .flow        识别 → 裁定 → 记录 → 复盘(<ol>,带序号)
     单件(不是列表)
       careers#apply     form         申请表

   7 个组件 → 3 套 + 1 个单件。**不拉成一个样**:
   site.css:672 自己写着「流程是串行,带序号与连接轨 —— 不是卡片组
   (卡片组在视觉上是并列语义)」,把 #governance 的四步和它上面那三条
   拉成同款,等于把「依次经过」读成「同时成立」。顺序必须和并列不同款。

   三个实测到的具体毛病:

   ① .qa 用反了。site.css:1268 给 .qa 的口径是「这一段的天然形式是**问→答**」,
      而 careers#work 三条**只有 .qa__q,没有 .qa__a**(全页 grep 零个)。
      它装的是三个并列的开放问题,不是问答表。
   ② #governance 三条在 768 档是 [2, 1],第三格半幅 ⇒ **右下角恒空一格**。
      site.css:1420 附近给 .deflist--3 写过同一句判据:「三项并列就排三列 ——
      落在两列里会空出右下角一格,读起来像少了一条。」
   ③ .split 一个组件装了两种语义:careers#structure 是 3 条并列保障,
      about#vision 是 2 条是/不是对照。同款版式 ⇒ 对照读不出对照。

   ── 实测反驳:委托里两条前提与量到的数不符(详见交付说明)──────

   ⛔ 「.rail 实测 scrollWidth == clientWidth == 1136,藏 0px,根本不能横滚」
      —— 不对。实测 1440 藏 **192px**、1024 藏 367、768 藏 543、
      375 藏 **890 / 全长 1218(73%)**。轨道是真能滚的,aria-label 现在
      **是真话**。真正的毛病是另一个:一组**有序**的四步,在桌面上就有
      192px 在画面外,手机上七成看不见;而且横过来会把串行读成并列。
      所以照样关轨 —— 但关掉之后「左右滚动查看」才变成假话,
      aria-label 要跟着改(顺序不能颠倒,见交付说明「HTML 改动清单」)。

   ⛔ 「体量」不是这两页的病。1440 中文实测内容模块高度:
      about 1083 / 1192 / 975 / 1136 ⇒ 极差 **1.22x**;
      careers 647 / 682 / 593 ⇒ **1.15x**(含 #apply 才 2.19x,而它是表单)。
      services 那一轮是 3.19x 才叫毛病。这两页已经很齐,
      **这条我推翻** —— 不为交活硬造一个「拉平体量」的改动。

   ── 解法:一个六列引擎(并列)+ 一条对照轴 + 一道竖梯(顺序)──────

   并列四块共用 6 列栅格 + 有意图的跨度,每一档每一行都填满:
       ≥1024    n=3 → 2,2,2 ⇒ [3](1136 容器每格 357px)
                n=6 → 2×6   ⇒ [3,3]
       768–1023 n=3 → 3,3,6 ⇒ [2,1](705 容器 336 / 336 / 705,末格整幅收尾)
                n=6 → 3×6   ⇒ [2,2,2](336px)
       <768     全部 span 6 ⇒ 单列
   跨度写死在 nth-child 上,**与文字长短无关** ⇒ 中英文行型逐格相同,
   洞是被取消掉的,不是被填满的。

   ── 回退 ────────────────────────────────────────────────────────
   删掉 about.html / careers.html / en/about.html / en/careers.html 四个 head
   里引用本文件的那一行 <link>,整轮样式全部退回。两处 aria-label 的 HTML
   改动另见《改动说明-关于我们与加入我们版式统一-2026-09-25.md》,单独可退。

   本文件只追加,不改动任何现有文件的原行;不定义任何颜色 token,
   不含颜色字面量,全部取自站上既有变量;不写任何浅色分支(全站 09-23 起只有深色)。
   ══════════════════════════════════════════════════════════════════ */


/* ── §0 · 先关横滚轨,再排格子(顺序不能反) ──────────────────────

   ⚠️ 这一节必须排在 §1 前面,而且**不能包在媒体查询里**。
   pages-v1.css:203 那条注释写过这个坑的正向版本;r29 踩过反向版本:
   轨道还开着的时候给它写 grid-template-columns,显式轨道会和
   grid-auto-flow:column 打架(r29 当场量到格子涨成 1915px、藏掉 7605px)。

   .rail--on 由 spreads-tabs.js:139 无条件加在 .rail 上(JS 不分断点),
   这里用 (1,3,0) 的 `.page-about #governance .rail.rail--on` 在 CSS 侧压掉,
   不动 JS —— 回退只需删 <link>。 */

.page-about #governance .rail.rail--on .rail__track {
  grid-template-columns: none;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0;
  padding: 0;
  overflow-x: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
}

/* 翻页钮在不滚的轨上是两个永远灰着的钮,收起。 */
.page-about #governance .rail.rail--on .rail__nav {
  display: none;
}

/* 轨道不再可滚,焦点环没有对象了;tabindex 由 HTML 写死,
   CSS 去不掉那个 tab 停留点 —— 见交付说明「可选的第三处改动」。 */
.page-about #governance .rail.rail--on .rail__track:focus-visible {
  outline-offset: 2px;
}


/* ── §1 · 并列引擎:六列 + 有意图的跨度 ───────────────────────────
   四个列表容器用页级 + 节级选择器点名,零 HTML 改动。
   这套写法站上已有先例(typo-v2.css §1 的 .page-about #what > .container)。
   权重 (1,1,0) / (1,2,0),压得过 site.css 与 pages-v1.css 里的重写
   —— 媒体查询不加权重,所以 @media 里那些 (0,1,0) 也压得过。 */

.page-about   #boundary   .tenets,
.page-about   #governance .cards--3,
.page-careers #work       .qa,
.page-careers #structure  .split {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--s-6);
  row-gap: var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 默认(<768):单列,每条占满六列。 */
.page-about   #boundary   .tenets > *,
.page-about   #governance .cards--3 > *,
.page-careers #work       .qa > *,
.page-careers #structure  .split > * {
  grid-column: span 6;
}

/* 768–1023 · n=3:3,3,6 —— 前两条半幅,第三条整幅收尾。
   705 容器下 336 / 336 / 705。
   不用 2,2,2(每格 224px:中文 14 字/行、英文 26 字/行,击穿可读最小列宽,
   而且同一档里 n=6 那块是 336px ⇒ 一套并列出现两种格宽)。
   也不用现状的 3,3,3(第三格半幅、右下角空一格,就是毛病 ②)。 */
@media (min-width: 768px) {
  .page-about   #governance .cards--3 > *,
  .page-careers #work       .qa > *,
  .page-careers #structure  .split > * {
    grid-column: span 3;
  }
  .page-about   #governance .cards--3 > *:nth-child(3),
  .page-careers #work       .qa > *:nth-child(3),
  .page-careers #structure  .split > *:nth-child(3) {
    grid-column: span 6;
  }
  /* n=6:两列三行,每格 336px,三行都满。 */
  .page-about #boundary .tenets > * {
    grid-column: span 3;
  }
}

/* ≥1024 · n=3 → 三列(每格 357px);n=6 → 三列两行(同样 357px)。
   两块同宽 ⇒ 一眼看出是同一套并列。 */
@media (min-width: 1024px) {
  .page-about   #boundary   .tenets > *,
  .page-about   #governance .cards--3 > *,
  .page-careers #work       .qa > *,
  .page-careers #structure  .split > * {
    grid-column: span 2;
  }
  .page-about   #governance .cards--3 > *:nth-child(3),
  .page-careers #work       .qa > *:nth-child(3),
  .page-careers #structure  .split > *:nth-child(3) {
    grid-column: span 2;
  }
}


/* ── §2 · 并列条目装束统一到「顶规 + 标题 + 正文」 ────────────────

   基准取 site.css 的 .tenet:「顶部一道粗规 + 放大的四字标题 = 条款的
   排版语言:规在上,条在下,像章程不像产品页」。#boundary 本来就是这一套,
   另外三块收敛过来 —— 而全站方/圆蓝/青语义**原样保住**:
   顶规的颜色继续承载它(primary=按规则执行,accent=具名的人裁定)。 */

/* 2.1 容器自己别再画线。.qa 顶上那道 1px 是「问答表」的表头线,
       .split 顶上那道也是「竖排定义表」的表头线 —— 变成网格之后
       它横贯整幅却不属于任何一格。 */
.page-careers #work      .qa,
.page-careers #structure .split {
  border-block-start: 0;
}

/* 2.2 每一格:顶规 3px + 上内边距,与 site.css 的 .tenet 同值同写法。
       .card 原本是卡(底 + 1px 全框 + 圆角 + 24px 内边距 + 阴影),
       .qa__item / .split__item 原本是行(下分隔线 + 上下内边距)。
       两类都收掉,换成同一记顶规。 */
.page-about   #governance .card,
.page-careers #work       .qa__item,
.page-careers #structure  .split__item {
  display: block;
  block-size: auto;
  margin: 0;
  padding: var(--s-4) 0 0;
  background: none;
  border: 0;
  border-block-start: 3px solid var(--c-primary-600);
  border-radius: 0;
  box-shadow: none;
}

/* 2.3 人裁定的那几条换青规。这不是新记号:与 .tenet--human、
       .flow__step--human、.rows--roles .row--human 同一套。
       #governance 第 2、3 条是 .card--human,#work 第 1、3 条是
       .qa__item--human —— markup 里本来就分好了,这里只是让顶规接手。
       ⚠️ 必须压得过 site.css:1497 那条 [data-theme="dark"] .card--agent
       (0,2,0);本文件 (1,2,0) 赢,而且蓝/青两侧都显式写出来,
       不靠继承 —— pages-v1.css:407 记过一次「那条蓝线被刷白过」。 */
.page-about   #governance .card--agent { border-block-start-color: var(--c-primary-600); }
.page-about   #governance .card--human { border-block-start-color: var(--c-accent-500); }
.page-careers #work .qa__item--human   { border-block-start-color: var(--c-accent-500); }

/* 2.4 标题收敛到 .tenet__title 那一档(fs-h3 / 700 / .02em)。
       .card__title 是 fs-h3/600、.qa__q 是 fs-h3/600、.split__label 是
       fs-h4/600 —— 三种级别装同一种内容。 */
.page-about   #governance .card__title,
.page-careers #work       .qa__q,
.page-careers #structure  .split__label {
  display: block;
  margin: 0 0 var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--c-text);
}

/* .qa__q 与 .split__label 各自自带一枚方/圆记号(::before),而顶规已经在
   承载同一套语义。同一格里出现两个记号,读者会去找它们的区别 —— 并没有区别。
   记号撤掉(连带撤掉给它让位的那条 16px 栅格,否则标题左边空一格),
   语义由顶规的颜色继续承担。
   依据 site.css:1311 的原话:「一个记号一半有意义一半没有,它就一个意义
   都没有了,连带把那几处正确的也废掉。」 */
.page-careers #work      .qa__q::before,
.page-careers #structure .split__label::before {
  content: none;
}

/* 2.5 正文:行高与行宽与 .tenet__body 对齐。
       34em 上限在 357px 那档不生效,在 705px 整幅那格收到 544px。 */
.page-about   #governance .card__body,
.page-careers #structure  .split__body {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 34em;
}

/* 2.6 分印(.ovp-imp):按 emph-r15 §3 自己的判据重新归类,不新立判据。
       判据:卡型(宽高比 1.31~2.55)留,行型(4.64~14.91)撤 ——
       分印是一枚贴右下角的卡片角标,挂在扁长的行上就离它该修饰的字很远。

       实测与推算:
       · #governance .card 现状 363×145 = 比 2.5(卡型,现在 display:block)。
         收掉卡壳之后 357×~112 = 比 **3.2** ⇒ 出了卡型区间,**撤**。
         (不撤的话,这一轮等于按新的宽高比把 emph-r15 治好的毛病种回去。)
       · #work .qa__item 现状 357×77 = 比 4.6、#structure .split__item
         现状 1136×93 = 比 12.2,两处本来就被 emph-r15 撤着 —— 改完
         357×~60 / 357×~112 仍在卡型之外,**继续撤**,本文件不做动作。
       · #who .row 1136×76 = 比 14.9,同上,不动。 */
.page-about #governance .card > .ovp-imp {
  display: none;
}


/* ── §3 · 对照:两侧要真的对着,而且要有一条看得见的轴 ────────────

   三块共一套语言:**左右两侧 + 一条轴**。<768 一律上下堆叠(328px 容器
   分不出两侧),≥768 才成对。三块的行型在四个断点、两种语言下逐格相同。 */

/* 3.1 about#what .compare —— 两栏本身不动(这是全站唯一一处严格 1:1 的
       是/不是对照,两个对置的框就是它的正确形态;实测两栏已经等高
       556×240,没有漂移)。**这一块我只加一件事**:
       让左右两列的 4 条 li 逐行对齐,读者才看得出第 3 条对第 3 条。
       现在两列各自独立排,中英文下同序号的两条不在同一水平线上。

       做法用 subgrid,零 HTML 改动。站上已有先例:
       site.css:1017 `.rows:not(.rows--pair) > .row { grid-template-columns: subgrid }`。
       两列内边距完全相同(各 var(--s-5)),subgrid 的 padding 由首尾轨吸收,
       两侧吸收量相同 ⇒ 中间那三条轨的边界逐像素对齐。 */
@media (min-width: 768px) {
  .page-about #what .compare {
    /* 1 条表头行 + 4 条 li 行 */
    grid-template-rows: auto repeat(4, auto);
    column-gap: var(--s-5);
    row-gap: var(--s-3);   /* 这一档起,行距由母栅格统一给 */
  }
  .page-about #what .compare__col {
    display: grid;
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
    /* ⚠️ 三层的 row-gap 必须**同值**。subgrid 在被继承的那个轴上,
       若自己的 gutter 与母栅格不同,差额会从轨道里扣(或补)——
       第一版这里没写 row-gap(=0)、而 .compare__list 写了 row-gap:0,
       当场量到四条 li 的间距塌成 0px(母栅格那 12px 被轨道吸走了)。
       同值之后不再有差额可扣。 */
    row-gap: var(--s-3);
    align-content: start;
  }
  .page-about #what .compare__head {
    grid-row: 1;
    margin-bottom: var(--s-2);
  }
  .page-about #what .compare__list {
    grid-row: 2 / span 4;
    grid-template-rows: subgrid;
    row-gap: var(--s-3);   /* 与 site.css 的 .compare__list gap 同值,别改 */
  }
}

/* 3.2 about#vision .split(2 条)—— 现状是两条 1136×93 的整幅横行上下叠,
       「普惠的是 / 不普惠的是」这个对照在版面上**完全看不见**。
       改成左右两格,并借 .compare 那一对是/不是配色:
       左 = 品牌主色(这是我们要做的),右 = 中性灰(这是我们不做的)。

       ⚠️ 这不是新口径,是照搬在册的那一条。pages-v1.css:400 原话:
         「站上蓝=智能体按规则执行、青=具名的人裁定是一套固定记号,
           四处 figure__keys 图例和 .compare__list 共用它 —— 借过来会改口径,
           所以另给一对:左列品牌主色(这是我们),右列中性灰(这不是我们)。」
       #vision 这两条正是「是 / 不是」,所以用的是那一对,不是方/圆那一套。
       —— 若你认为 #vision 不算「是/不是」,删掉本小节即可,其余不受影响。 */
.page-about #vision .split {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-5);
  margin: 0;
  padding: 0;
  border-block-start: 0;
  list-style: none;
}
.page-about #vision .split__item {
  display: block;
  padding: var(--s-4) 0 0;
  border: 0;
  border-block-start: 2px solid var(--c-primary-600);
}
.page-about #vision .split__item:nth-child(2) {
  border-block-start-color: var(--c-text-3);
}
.page-about #vision .split__label {
  display: block;
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-text);
}
/* 方记号撤掉:颜色对已经在承载「是 / 不是」,同一格两个记号 = 没有记号。
   而且第二条挂着蓝方 = 宣称「有个智能体在按规则执行『不普惠风险』」,本来就不对。 */
.page-about #vision .split__label::before {
  content: none;
}
.page-about #vision .split__body {
  margin: 0;
  color: var(--c-text-2);
  line-height: 1.75;
  max-width: 34em;
}
@media (min-width: 768px) {
  .page-about #vision .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* 3.3 careers#who .rows--pair(3 组对偶句)—— 对照轴在**行内**(左「看到 X」、
       右「想 Y」),不是列间,所以它保持行的形态,不跟 #what / #vision 做两栏。
       实测现状的毛病:1136 宽下 1.5fr / 1fr ⇒ 右侧那半句从 ~682px 处才开始,
       两个半句之间空着四百多像素,读不成一对。

       两件事:
       ① 左列改成 auto(按最长那条的实宽收),用 subgrid 让三行的两侧对齐
          —— 与 site.css:1017 同一手法;
       ② 中间加一条 1px 的轴,负外边距吃掉行的上下内边距 ⇒ 三段接成一条
          连续竖线,配上各行原有的下分隔线,读出来就是一张对照表。 */
@media (min-width: 768px) {
  /* ⚠️ column-gap 母子必须**同值**(与 §3.1 同一个坑)。
     第一版只在 .row 上写了 var(--s-7),母栅格 .rows--pair 是 0 ⇒
     差额从两侧轨道各扣 20px,那条 1px 的轴轨被扣成负数、**实测宽 0px**
     (轴整条看不见,而 computed height 是对的,光看高度会误判成已生效)。 */
  .page-careers #who .rows--pair {
    display: grid;
    /* 右列用 auto 而不是 1fr,整张表 max-content 收到自己的实宽。
       ⚠️ 先说清这一节的真实容器:#who .container 实测是
       `display:grid; grid-template-columns: 758px 330px`(1440 档)——
       右边那 330 是 figmark-r14 的 side 档,#who **本来就有一张图**
       (careers.html:257,viewBox 330×110,实渲 330×165,x=951)。
       所以这张表可用宽是 **758**,不是 1136。
       1fr 的版本我截图看过:轨道 auto/1px/1fr = 188 / 1 / 489,
       表右缘顶到 903,而三条右半句实测只有 84 / 112 / 120 宽
       ⇒ 右列里恒空 369px 以上,横分隔线却一路画到 903,
       轴反而把「右半边是空的」这件事显示得更清楚。
       收到 max-content 之后实测表宽 389(188+1+120.4+两个 40 沟),
       三对句子紧挨着轴,横分隔线只画到表的右缘,读出来才是一张对照表。
       max-inline-size:100% 是 768 档英文的兜底(长句会把 max-content 撑过容器;
       实测 en@768 表宽 573 < 容器 705,没触发,留着当护栏)。 */
    grid-template-columns: auto 1px auto;
    column-gap: var(--s-7);
    inline-size: max-content;
    max-inline-size: 100%;
  }
  .page-careers #who .rows--pair .row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--s-7);
    align-items: baseline;
  }
  .page-careers #who .rows--pair .row__name  { grid-column: 1; }
  .page-careers #who .rows--pair .row__state { grid-column: 3; justify-self: start; }
  .page-careers #who .rows--pair .row::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    inline-size: 1px;      /* 不靠 stretch 兜底,显式给足 */
    justify-self: stretch;
    align-self: stretch;
    /* 行有 var(--s-5) 的上下内边距;吃掉它,竖线才接得上下一行 */
    margin-block: calc(var(--s-5) * -1);
    background: var(--c-border-strong);
  }
  /* 左列别被英文那条长句撑到把右侧挤没:实测 en@768 需要设上限。 */
  .page-careers #who .rows--pair .row__name { max-inline-size: 18em; }
}


/* ── §4 · 顺序:把四步还原成一道竖梯(所有宽度) ──────────────────

   #governance 的四步是 <ol>、带序号、带连接轨,site.css:672 的口径是
   「串行,带序号与连接轨 —— 不是卡片组」。三条理由让它竖下来:
     ① 横过来之后是四个等大的并排方框,读到的是「四件并列的事」,
        而它上面那三条 .card 才是并列 —— 同一节里两块同款 = 本轮要治的病;
     ② 实测桌面 1440 就有 192px 在画面外,375 藏 890/1218(73%);
     ③ 竖梯在四个断点两种语言下都是 [1,1,1,1],**行型无洞是构造出来的**。

   §0 已经把轨道的滚动行为关掉;这里把 .rail--on 给条目穿上的卡壳脱掉,
   并把竖连接轨(::before)接回来、横连接轨(::after)取消。
   pages-v1.css:266 那段注释正是为了「横过来之后不要读成并列」才把竖轨
   换成横轨的 —— 现在不横了,换回去。 */

.page-about #governance .rail.rail--on .flow__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-4);
  block-size: auto;
  margin: 0;
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-items: start;
}

/* 竖连接轨接回来 —— 与 site.css:676 同值同写法(上内边距 24 + 序号盒 28)。 */
.page-about #governance .rail.rail--on .flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-block: calc(var(--s-5) + 28px) 0;
  inset-inline-start: 19px;
  inline-size: 1px;
  background: var(--c-border-strong);
}

/* 横连接轨取消:它架在卡与卡之间,现在没有卡也没有「之间」。 */
.page-about #governance .rail.rail--on .flow__step:not(:last-child)::after {
  content: none;
}


/* ── §5 · 节内节奏 ────────────────────────────────────────────────
   只订本轮实际动到的那几对相邻块;没动到的沿用 site.css §B 的表,
   不为交活重订一遍站上已有的间距。 */

/* 列表容器上下:节头/小标题 → 列表,列表 → 点题句 / 收束段。 */
.page-about   #boundary   .section__head + .figblock,
.page-about   #governance .section__head + .cards--3,
.page-careers #work       .section__head + .qa,
.page-careers #structure  .section__head + .split {
  margin-block-start: var(--sec-head-gap);
}
.page-about   #boundary   .figblock + .tenets,
.page-about   #vision     .subhead  + .split,
.page-about   #what       .subhead  + .compare {
  margin-block-start: var(--s-8);
}
.page-about   #governance .cards--3 + .subhead,
.page-careers #work       .qa       + .pivot,
.page-careers #who        .rows     + .body {
  margin-block-start: var(--s-9);
}
/* 竖梯前面那句导语 → 轨:pages-v1.css:471 给的是 --s-6(横轨自带 4px 上内边距)。
   轨不滚了,内边距归零 ⇒ 这里补到 --s-7,与节头间距同级。 */
.page-about #governance .body + .rail {
  margin-block-start: var(--s-7);
}


/* ── §6 · 给插图那条线预留的位置(现在一条都不匹配) ──────────────

   插图线会往下面四个模块的 .section__head 之后、内容列表之前插一个
   .figmark 钩子:about#boundary / about#governance /
   careers#work / careers#structure。

   下面这些规则**在钩子出现之前一条都不生效**(选择器匹配不到),
   所以本轮的实测数字里它们等于不存在;钩子插进来的当天,
   节奏立刻就位,不需要再改本文件。这是 r29 §6 用过的写法。

   ⚠️ 两件要交接给插图线的事(不是我的活,写在这里免得两条线撞):
   ① **about#boundary 现在已经有图了** —— .figblock > .figure.figure--plate
      实测 1136×426(外壳 463),外加一张三项 .figure__keys--3 图例,
      是本页最大的一块图。往这一节再插 .figmark 会变成**一节两张图**。
      委托里把 #boundary 列进「现在没有图的四个模块」,与实测不符。
   ② 这四个模块在 figmark-r14.js 的 registry 里**没有条目**(只有
      about#what / about#vision / careers#who / careers#apply / 三个 wide),
      所以钩子插进来不会拿到 figmark--r14-{tier} 类,宽度档要那条线自己加。
      本文件只管节奏,**一行宽度都不写**,免得和它的档位打架。 */

.page-about   #boundary   .section__head + .figmark,
.page-about   #governance .section__head + .figmark,
.page-careers #work       .section__head + .figmark,
.page-careers #structure  .section__head + .figmark {
  margin-block: var(--s-6) 0;
}

.page-about   #boundary   .figmark + .figblock,
.page-about   #governance .figmark + .cards--3,
.page-careers #work       .figmark + .qa,
.page-careers #structure  .figmark + .split {
  margin-block-start: var(--s-8);
}

/* 钩子在时,节头 → 列表那条直连间距要让位给「节头 → 图 → 列表」。 */
.page-about   #governance .figmark + .cards--3,
.page-careers #work       .figmark + .qa,
.page-careers #structure  .figmark + .split,
.page-about   #boundary   .figmark + .figblock {
  margin-block-start: var(--s-8);
}


/* ── §7 · 默认关掉的几条(要她拍板才开) ──────────────────────────

   7.1 #boundary 第 4 条是 .tenet--human(青规),它在 6 格里排第 4 ⇒
       ≥1024 时落在第二行第一格。如果你希望「人裁定」那一条落在收尾格
       (第 6 格)以取得更重的份量,把下面两行的注释去掉即可 ——
       但那会把文案顺序和视觉顺序拆开(读屏仍按 DOM 顺序念第 4 条),
       所以**默认不开**。
       @media (min-width: 1024px) {
         .page-about #boundary .tenet:nth-child(4) { order: 6; }
         .page-about #boundary .tenet:nth-child(6) { order: 4; }
       }

   7.2 #governance 那条 <ol class="flow rail__track" tabindex="0"> 的 tabindex
       写死在 HTML 里。轨道不滚之后它是一个「按 tab 会停、停下来什么也不能做」
       的空停留点。CSS 去不掉 tabindex ⇒ 需要改 HTML 一个属性。
       见交付说明「可选的第三处改动」,默认不改(改了也只有键盘用户察觉)。

   7.3 #what 的两栏框(background + 1px 全框 + 圆角)是本页改完之后唯一
       还带卡壳的块。留着是故意的:对照的正确形态就是两个对置的框,
       而并列那四块已经统一成无框顶规 —— 两套语言各自成立。
       若你要连 #what 也脱框,那对照就只剩颜色在承载,**不建议**。 */


/* ── §8 · 节间距:量了,是站级 token 的值,本文件不动 ──────────────

   设计体系「深色版」要求区块间距 80–120px。实测 about 中文:
     1440  hero→lead 147 · lead→what 160 · what→boundary 224 ·
           boundary→governance 224 · governance→vision 192
     375   133 / 104 / 128 / 128 / 128
   careers 同量级(1440 下 147 / 160 / 232 / 192 / 224)。

   这些数**不是这两页的写法造成的**,是 site.css:142 `.section{padding-block:var(--sec-pad)}`
   这个**站级** token:--sec-pad 64→80→96(随断点),--sec-pad-anchor 64→80→128。
   两节相邻 ⇒ 视觉空白 = 上节 padB + 下节 padT = 96+96 = 192,
   遇到 .section--anchor 那一节就是 96+128 = 224。

   设计体系文档自己那张「已经符合」表把区块间距记作「80 / 128px(128 略超上限)」
   —— 也就是全站口径把这条规矩读成**单侧 section 内边距**,不是相邻两节之和。
   按单侧读:96 ✓ 在区间内;128 就是文档已经记下来的那个「略超」。

   ⇒ 这条我**推翻**「这两页节奏超标」的说法:它是站级值,
   在页级文件里改会让这两页和另外五页脱节。128 那一档要不要收到 120,
   是一条**站级**待拍板项,见交付说明 ⬜ 清单,本轮不自作主张。 */