/* ══════════════════════════════════════════════════════════════════
   services-layout-r29.css — 第 29 轮 · services 页五模块版式统一
   2026-09-24 · UI/UX

   委托:「排版也需要再打磨一下,5 個模塊的排版奇奇怪怪的」

   ── 本轮要治的是什么(全部为实测,量具 _svc-layout-evidence/probe-svc.mjs)──

   四个模块(#trading / #payments / #insight / #more)装的是**同一种东西**:
   五条并列能力,每条一个短标题 + 一段说明。但它们被塞进了三套不同组件,
   于是同样五条内容占出三种完全不同的高度 —— 1440 宽、中文实测:

       #payments  ul.split         5 条 = 606px   (整幅横行,右侧空)
       #insight   .tenets          5 条 = 326px   (三列,右下角恒空一格)
       #more      .deflist + 横滚   5 条 = 190px   (两条被推到屏幕外)

   同样的五条,606 / 326 / 190 —— **3.19 倍**。这就是「奇奇怪怪」的量化形态:
   读者看到的不是三种设计,是同一件事被讲了三遍,每遍换一个语气。

   另外两个实测事实:
   ① 横滚轨在**任何宽度**都开着(spreads-tabs.js:139 无条件加 .rail--on)。
      1440 宽下轨内 1664px、可视 1136px ⇒ **528px 被推到屏幕外**,
      第 4、5 条在一台 1440 的桌面显示器上根本不在画面里。860 宽藏 752px,
      375 宽藏 1184px。宽屏上把能力藏进横滚条是净损失,没有任何收益。
   ② .tenets 在 ≥860 是 repeat(3,1fr),5 条 ⇒ 3+2,右下角恒空一格。
      中英文、860 与 1440 四种组合下 rows 全部实测为 [3,2]。

   ── 解法:一个六列引擎,三种跨度,每一行都填满 ──────────────────

   不收敛成 5 列(1136 容器下每列只剩 208px,中文 13 字/行、英文 24 字/行,
   击穿可读最小列宽),也不留那个洞。改用 **6 列栅格 + 有意图的跨度**:

       ≥1024   第 1–3 条各 span 2(三上) · 第 4–5 条各 span 3(二下)
               1136 容器:三上每格 357px,二下每格 552px,两行都满
       768–1023 第 1–4 条各 span 3(两列两行) · 第 5 条 span 6(整幅收尾)
       <768    全部 span 6(单列)

   三个断点下**没有任何一行是半空的**,而且列数 3→2→1 单调收敛。
   「三上二下」不是为了填洞凑出来的,它本身是一个可读的节奏:
   前三条同宽并列,后两条加宽收束 —— #insight 的第 5 条恰好是
   .tenet--human(资讯边界,圆记号=具名的人裁定),放在加宽的收尾格里
   正好得到它该有的份量。其余三个模块的第 5 条也都是收束性的一条。

   ── 为什么条目装束统一到 .tenet 那一套 ──────────────────────────

   site.css 给 .tenets 写的口径是「规在上,条在下,像章程不像产品页」,
   且顶规的颜色承载全站方/圆语义(primary=按规则执行,accent=具名的人裁定)。
   .deflist__key 是 14px 等宽灰字、.split__label 是 17px —— 三种标题级别
   装同一种内容。统一到顶规 + fs-h3 标题之后,四个模块共用一套装束,
   而方/圆语义**原样保住**:#insight 第 5 条的 .tenet--human 仍是青色圆规,
   其余全部蓝色方规(它们确实都是按规则执行的能力,不是人裁定的)。

   ── 回退 ────────────────────────────────────────────────────────
   删掉 services.html(及 en/services.html)head 里引用本文件的那一行 <link>,
   整轮样式全部退回。HTML 那两处改动(.dual 挪位、两个 aria-label)另见
   同目录《services 页五模块版式统一-2026-09-24.md》的「HTML 改动清单」,
   各自单独可退。

   本文件只追加,不改动任何现有文件的原行;不定义任何颜色 token,
   不含颜色字面量,全部取自站上既有变量。
   ══════════════════════════════════════════════════════════════════ */


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

   ⚠️ 这一节必须排在 §1 前面,而且**不能包在媒体查询里**。
   pages-v1.css:203 那条注释写过一模一样的坑:
     「必须显式清空显式轨道…grid-auto-columns 只管隐式轨道 ⇒ 前两项仍落进
       那两条 1fr,而容器横向可滚、没有可分配的余量,于是它们塌成一字一行」
   反过来同样成立:轨道还开着的时候给它写 grid-template-columns,
   显式轨道会和 grid-auto-flow:column 打架。我第一版把 §1 写成全宽度生效、
   §0 只写在 ≥768,375 下当场量到格子变成 1915px 宽、轨内藏掉 7605px。
   所以:**轨道在所有宽度先关干净,格子再排。**

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

.page-services .rail.rail--on .rail__track {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: row;
  grid-auto-columns: auto;
  padding: 0;
  overflow-x: visible;
  scroll-snap-type: none;
}

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

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


/* ── §1 · 六列引擎 ────────────────────────────────────────────────
   四个列表容器用页级 + 节级选择器点名,零 HTML 改动。
   这套写法站上已有先例(typo-v2.css §1 的 .page-about #what > .container)。
   权重 (0,3,0),压得过 site.css 的 .tenets/.deflist 与 @media 里的重写。 */

.page-services #trading  .deflist,
.page-services #payments .split,
.page-services #insight  .tenets,
.page-services #more     .deflist {
  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-services #trading  .deflist > *,
.page-services #payments .split > *,
.page-services #insight  .tenets > *,
.page-services #more     .deflist > * {
  grid-column: span 6;
}

/* 768–1023:两列两行 + 整幅收尾。
   720 容器下每格 348px —— 中文 21 字/行、英文 41 字/行,两种语言都在
   可读区间内。第 5 条整幅,所以这一档也没有半空的行。 */
@media (min-width: 768px) {
  .page-services #trading  .deflist > *,
  .page-services #payments .split > *,
  .page-services #insight  .tenets > *,
  .page-services #more     .deflist > * {
    grid-column: span 3;
  }
  .page-services #trading  .deflist > *:nth-child(5),
  .page-services #payments .split > *:nth-child(5),
  .page-services #insight  .tenets > *:nth-child(5),
  .page-services #more     .deflist > *:nth-child(5) {
    grid-column: span 6;
  }
}

/* ≥1024:三上二下。 */
@media (min-width: 1024px) {
  .page-services #trading  .deflist > *,
  .page-services #payments .split > *,
  .page-services #insight  .tenets > *,
  .page-services #more     .deflist > * {
    grid-column: span 2;
  }
  .page-services #trading  .deflist > *:nth-child(4),
  .page-services #trading  .deflist > *:nth-child(5),
  .page-services #payments .split > *:nth-child(4),
  .page-services #payments .split > *:nth-child(5),
  .page-services #insight  .tenets > *:nth-child(4),
  .page-services #insight  .tenets > *:nth-child(5),
  .page-services #more     .deflist > *:nth-child(4),
  .page-services #more     .deflist > *:nth-child(5) {
    grid-column: span 3;
  }
}


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

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

/* 2.2 每一格:顶规 3px + 上内边距。与 site.css 的 .tenet 同值同写法。
       .deflist__item 原本在 .rail--on 下是卡(底 + 描边 + 24px 内边距),
       .split__item 原本是行(下分隔线 + 32px 上下内边距)—— 两者都收掉,
       换成同一记顶规。这样四个模块的第一眼是同一件东西。 */
.page-services #trading  .deflist__item,
.page-services #payments .split__item,
.page-services #more     .deflist__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;
}

/* 2.3 标题:三种级别收敛成 .tenet__title 那一档(fs-h3 / 700 / .02em)。 */
.page-services #trading  .deflist__key,
.page-services #payments .split__label,
.page-services #more     .deflist__key {
  display: block;
  margin: 0 0 var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-text);
}

/* .split__label 自带一枚方/圆记号(::before)。顶规已经在承载同一套语义,
   同一格里出现两个记号,读者会去找它们的区别 —— 而并没有区别。
   记号撤掉,语义由顶规的颜色继续承担(memory 第 11 条:同一个记号
   一半有意义一半没有,正确的那几处也会一起作废)。 */
.page-services #payments .split__label::before {
  content: none;
}

/* 2.4 正文:行高与行宽与 .tenet__body 对齐。
       34em 的行宽上限在三上那档(357px)不生效,在二下那档(552px)
       收到 544px —— 与 #payments 现状实测的 544px 逐像素一致,
       所以这一档的观感和她已经看惯的那一栏是同一个。 */
.page-services #trading  .deflist__val,
.page-services #payments .split__body,
.page-services #more     .deflist__val {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 34em;
}

/* 2.5 分印(.ovp-imp):按 emph-r15 自己的判据逐格重新归类。

   emph-r15.css §3 撤掉「行型」宿主里的分印,判据写得很清楚:
   卡型(宽高比 1.31~2.55)留,行型(4.64~14.91)撤 —— 因为分印按定义是
   一枚 240px 宽、贴右下角的卡片角标,挂在一条扁长的行里就离它该修饰的
   那几十个字八百多像素远(那正是她说的「隨意毫無相關」)。

   改成网格之后每一格的宽高比变了,**两个方向都要重新判**,实测 1440 中文:

       三上那三格   357×143~149   宽高比 2.40~2.50   → 卡型,留
       二下那两格   552×115~121   宽高比 4.56~4.80   → 行型,撤

   所以:
   ① #payments 的前三格重新拿回分印(原先整节被 emph-r15 按「行」撤掉,
      现在它们确实是卡了);
   ② 四个模块二下那两格一律撤 —— 包括 #insight / #trading / #more
      这三处**原本有**分印的。不撤的话,这一轮等于把 emph-r15 治好的毛病
      按新的宽高比又种回去一遍,而那个毛病是她本人提出来的。
   ③ <768 单列时每格 343×~150(比 2.3),仍是卡型,全部留。 */

.page-services #payments .split__item .ovp-imp {
  display: block;
}

/* 768–1023:第 5 条整幅(720×~115,比 6.3)⇒ 撤。 */
@media (min-width: 768px) {
  .page-services #trading  .deflist__item:nth-child(5) .ovp-imp,
  .page-services #payments .split__item:nth-child(5) .ovp-imp,
  .page-services #insight  .tenet:nth-child(5) .ovp-imp,
  .page-services #more     .deflist__item:nth-child(5) .ovp-imp {
    display: none;
  }
}

/* ≥1024:第 4、5 条加宽(552×~120,比 4.6)⇒ 两格都撤。 */
@media (min-width: 1024px) {
  .page-services #trading  .deflist__item:nth-child(4) .ovp-imp,
  .page-services #payments .split__item:nth-child(4) .ovp-imp,
  .page-services #insight  .tenet:nth-child(4) .ovp-imp,
  .page-services #more     .deflist__item:nth-child(4) .ovp-imp {
    display: none;
  }
}


/* ── §3 · 横滚轨留不留:主方案是**全宽度都不留**(实现见 §0) ──────

   桌面宽屏那一问的答案是明确的「不留」,有数:
   1440 宽下轨内 1664px、可视 1136px ⇒ 藏掉 528px,第 4、5 条整条不在画面里;
   860 藏 752px;375 藏 1184px。而 1136px 的容器排三列每格 357px 绰绰有余。
   **把内容藏起来换空间,而空间本来就不缺** —— 这是净损失,没有收益。
   而且 spreads-tabs.js 是无条件开轨的,连「窄屏才开」这层保护都没有。

   手机端(<768)是一个真实的取舍,不是显然的:
   · 关掉(主方案):四个模块在任何宽度下都是同一套版式,#trading / #more
     的五条从横滑改成竖排。实测 375 代价:中文整页 8231 → 9623px(+1392)、
     英文 10338 → 12150px(+1812)。桌面几乎不涨:1440 中文 +35、英文 −22。
   · 留着(备选):375 整页短 1392(中)/ 1812(英)px,但代价是手机上四个
     模块又变回两种行为 —— 两个横滑、两个竖排,正是她这次提的那个毛病,
     只是换到了手机上。

   我选关。理由:这一轮的委托是「五个模块的排版奇奇怪怪」,一致性就是交付物
   本身;而竖排五条是手机上的原生读法,横滑要靠手势去发现剩下四条。
   她若更在意手机页长,把下面这段注释符去掉即可**只在手机端**把轨道放回去,
   其余断点不受影响:

@media (max-width: 767px) {
  .page-services .rail.rail--on .rail__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 300px);
    padding: var(--s-1) 0 var(--s-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .page-services .rail.rail--on .rail__nav { display: flex; }
}
*/


/* ── §4 · 节内纵向节奏:四个模块同一套 ───────────────────────────

   节头 → (插图) → 五条 → (收尾按钮),四段之间的距离在四个模块里取同一组值。
   现状是 .figmark 有自己的 32/48、.split 有自己的 32、.tenets 有自己的 32、
   .btn-row 又是另一组 —— 于是同一页上四个模块的呼吸节拍各不相同。

   全部落到既有刻度上,不新造尺寸:
       节头 → 插图      var(--s-6)  32px   (图是上一段的收束,离上面近)
       插图 → 五条      var(--s-8)  48px   (离下面远)
       节头 → 五条(无图)var(--s-7)  40px   (= --sec-head-gap,与全站节头同值)
       五条 → 收尾按钮  var(--s-8)  48px
       五条 → 点题句    var(--s-9)  64px   (.pivot 是一句独立的话,不是列表的尾巴) */

.page-services #trading  .section__head + .rail,
.page-services #more     .section__head + .rail,
.page-services #payments .section__head + .split,
.page-services #insight  .section__head + .tenets {
  margin-block-start: var(--sec-head-gap);
}

.page-services #payments .figmark,
.page-services #insight  .figmark {
  margin-block: var(--s-6) var(--s-8);
}

.page-services #trading  .rail + .btn-row,
.page-services #more     .rail + .btn-row,
.page-services #insight  .tenets + .btn-row,
.page-services #payments .split + .btn-row {
  margin-block-start: var(--s-8);
}

.page-services #payments .split + .pivot {
  margin-block-start: var(--s-9);
}


/* ── §5 · 顶部能力清单:让它读成「目录」,不读成「又一张五条表」 ──

   她说的「4 行 vs 5 条数字对不上」,核查下来**不是一处错**:
   顶部四行 = 四个模块各一行(每行的 href 就指向对应模块),
   模块内五条 = 那个模块自己的五项能力。4 与 5 本来就不该相等。

   但这个误读是版面造成的,不怪读者:顶部用 ul.rows 排成四条素行,
   下面每个模块又是一组并列条目,长得像同一族,于是「4」和「5」被放在
   同一个量纲上比较。而且它正上方就是 .anchornav,四个标签一字不差 ——
   连着两块内容说同样四件事,更像漏了一条。

   治法是把它**从内容列表改读成目录**,而不是硬凑成五行:
   上下各一道通栏细规把它框成一块(目录的排版语言),标题改等宽字
   与 .anchornav__link 同族,并把节的上下留白收到导语档。
   这样它和下面四个模块**不在同一族**,数字也就不再被拿来对齐。

   ⚠️ 没有用编号(01–04)。pages-v1.css §3 有一条在先的决定:
      「不给五页补编号 —— 编号是编辑决定,不是排版决定,这一轮没人拍过板。」
      编号版写在 §7,**默认不生效**,要用请见那一节。 */

.page-services .section--tight .rows {
  border-block: 1px solid var(--c-border-strong);
  padding-block: var(--s-2);
}

.page-services .section--tight .row__name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
}

.page-services .section--tight .row__state {
  font-size: var(--fs-sm);
}


/* ── §6 · .dual 不再压垮 #trading ────────────────────────────────

   实测 1440 中文:#trading 1697px,其中 .dual 一块 917px = **54%**。
   同页 #more 只有 724px。一个模块比另一个高 2.34 倍,而两者装的能力条数
   一样多(都是 5 条)—— 这就是「体量严重不均」的来源,它不在能力那五条上,
   在挂在后面的那一大块上。

   .dual 讲的不是「交易平台的一项能力」,是「在哪儿用它」——
   网页端 / 移动端 / 下载。那是**页级的去处**,不是模块级的能力。
   所以它该从 #trading 里搬出来,独立成页尾的收束节(HTML 改动清单第 1 项)。
   搬完之后 #trading ≈ 740px,与 #more 724px 基本齐平。

   下面这组规则是**搬出来之后**那一节的版式。搬之前它们不命中任何元素
   (.page-services #handover 不存在),不产生任何差异 —— 所以 CSS 可以先合,
   HTML later,两边互不阻塞。 */

.page-services #handover .dual {
  margin-block-start: 0;
}

.page-services #handover .dual__head {
  margin-block-end: var(--s-7);
}


/* ── §7 · 【默认不生效】目录编号 01–04 ──────────────────────────

   要启用:把下面这段的注释符去掉。
   要点:这是**编辑决定**(见 §5 的引文),需要 Yannie 拍板,不是排版可以
   自己定的。启用后顶部四行前面出现 01–04,模块内五条**仍然不编号**
   —— 编号=有序的索引,不编号=同时成立的并列项,两种记号各管一件事,
   4 与 5 从此分属两个量纲。

.page-services .section--tight .rows { counter-reset: svc-ix; }
.page-services .section--tight .row  { counter-increment: svc-ix; }
.page-services .section--tight .row__name::before {
  content: counter(svc-ix, decimal-leading-zero);
  margin-inline-end: var(--s-3);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
*/


/* ── §8 · 四张通栏插图的尺寸(2026-09-24 接入静态 SVG 时补)─────────

   r14 的通栏宽度是 figmark-r14.js 在运行时挂 .figmark--r14-wide 加上去的。
   这一轮四个模块换成静态手绘 SVG、那支脚本已停用,于是 .figmark 掉回
   figures-r10.css 的 `inline-size: min(330px, 62vw)` —— 实测渲染成 330×128,
   而图是按 1136×440 画的,四级明度的横向分层在 128px 高时全部塌掉。

   这里把四处一并声明成通栏。`.figmark` 单类权重不够压 figures-r10.css,
   所以带上 .page-services 的祖先选择器(与 §4 同一口径)。
   回退 = 删掉本节。 */

.page-services #trading  .figmark,
.page-services #payments .figmark,
.page-services #insight  .figmark,
.page-services #more     .figmark {
  inline-size: 100%;
  max-inline-size: none;
}

.page-services .figmark > svg {
  inline-size: 100%;
  block-size: auto;
}

/* 节头 → 图 → 五条 的纵向节拍:§4 只写了 payments / insight 两处,
   trading / more 这一轮新增了图,补齐同一组值。 */
.page-services #trading .figmark,
.page-services #more    .figmark {
  margin-block: var(--s-6) var(--s-8);
}

/* 有图的模块,节头到「五条」的距离由图接管,取消 §4 的无图值 */
.page-services #trading .figmark + .rail,
.page-services #more    .figmark + .rail {
  margin-block-start: 0;
}