@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   Retu site-2.0 · 内页版面 v1 —— 把首页 v4 的节奏搬到其余五页

   为什么要新开这一份:首页的那套节奏(模块底纹、章节眉、模块间距、滚动带)
   全写在 home-v2/v3/v4.css 里,而那三份只有 index.html 引。其余五页
   一个都拿不到,于是同一个站上有两种排版。这份把首页那套里**与首页专属
   版面无关**的部分抽出来,给五页共用。首页不引它,首页那三份照旧。

   来源对照(便于日后合并,不是复制粘贴):
     §1 模块底纹      ← home-v3.css §1,并补齐 r7 新增的「面」
     §2 章节节奏      ← home-v4.css
     §3 章节眉        ← home-v3.css .section__no 的画法,套在既有 .eyebrow 上
     §4 滚动带        ← home-v3.css .rail*,改成无 JS 时退化成竖列
     §5 深色档修补    ← 本轮新发现的三处「深色下线会消失」

   房规照旧:零十六进制色值;绝不用 --c-border / --c-divider 画需要看见的线
   (深色档它们与 --c-surface 同值)。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 模块底纹 ──────────────────────────────────────────────────
   一张读不出信息的插图,放在正文旁边是噪音,放在模块底下是纹理。
   首页 v4 已经这么处理过它的五张图;这里把同一套搬过来给内页降格的六张。 */

.section {
  position: relative;
  isolation: isolate;
  background: var(--sec-bg, transparent);
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* 四边都要化掉,底纹才不会在模块边界上切出硬边。
     上下是模块交界;左右是 --right / --left 偏置自己切出来的那条竖边 ——
     只化上下的话,一块底纹会在正文右侧立起一条看得见的直边,像个没关掉的面板。
     mask 只取 alpha,用 black 不是在取色,所以不走 token(房规管的是调色板)。 */
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* 底纹里的线一律不跟着缩放变粗 ——
   这是「降背景」最容易翻车的一处。preserveAspectRatio="slice" 会把 880×330 的画
   放大到盖满模块;模块越高,放大倍数越大(about#governance 那一块约 3.3 倍)。
   线宽跟着乘 3.3,最粗的 .f6-datum 就从 5.6px 变成 18.6px —— 那已经不是纹理,
   是一条横穿导语的灰色实带,实测把「后果由谁承担」那一行整个划掉。
   光压透明度救不了:压到 .16 的 18px 实带仍然是实带。
   non-scaling-stroke 让线宽回到画它时的值,于是背景与前景是同一张画的同一套线宽,
   只是淡;粗细层级(网 → 规 → 基准线)也原样保留。
   只在 .section__bg 里生效,前景图版不受影响。 */
.section__bg .motif--bg * { vector-effect: non-scaling-stroke; }

.motif--bg {
  position: absolute;
  inset-block: -8%;
  inline-size: 100%;
  block-size: 116%;
  opacity: var(--sec-bg-a, .85);
}

/* 底纹不要渐变底,也不要消隐罩 —— 模块自己就是底,再垫一层会出现一块方版。 */
.section__bg .f6-base,
.section__bg .f6-veil { display: none; }

.section__bg .f6-net-faint,
.section__bg .f6-net,
.section__bg .f6-net-2 { stroke-opacity: .085; }
.section__bg .f6-mesh { stroke-opacity: .10; }
.section__bg .f6-holdnet { stroke-opacity: .09; }
.section__bg .f6-rule,
.section__bg .f6-rule-2,
.section__bg .f6-rule-strong { stroke-opacity: .12; }
.section__bg .f6-datum { stroke-opacity: .16; }
.section__bg .f6-hold { stroke-opacity: .14; }
.section__bg .f6-arc,
.section__bg .f6-dot { opacity: .30; }
.section__bg .f6-stop { opacity: .26; }

/* r7 新增的「面」必须一起压 —— 这是把 r7 与「降作底纹」凑到一起时的坑:
   上面那一串只认 f6-*,面是 f7-*,不压的话场线掉到 .085 而面还在原浓度,
   整块底纹会变成几块浮出来的色片,反过来盖过正文。
   压到 .022 / .014 是按「面缩小不变淡」反推的:前景上面与场线的墨量比约 1:1,
   场线压了 0.63 倍,面按同一比例落到这一档,两者的相对关系不变。 */
.section__bg .f7-wash { fill-opacity: .022; }
.section__bg .f7-wash-2 { fill-opacity: .014; }
.section__bg .f7-box { stroke-opacity: .12; }
[data-theme="dark"] .section__bg .f7-wash { fill-opacity: .034; }
[data-theme="dark"] .section__bg .f7-wash-2 { fill-opacity: .020; }

[data-theme="dark"] .motif--bg { opacity: .62; }

.section__bg--right .motif--bg { inset-inline-start: 34%; inline-size: 66%; }
.section__bg--left .motif--bg { inset-inline-start: -10%; inline-size: 72%; }
.section__bg--wide .motif--bg { inset-inline-start: 0; inline-size: 100%; }
.section__bg--bottom .motif--bg { inset-block-start: 38%; block-size: 70%; }

/* 窄屏:偏置一律取消(66% 的一条在 375 上只剩 240px,读不出构图),
   整体再压一档,让正文始终是第一眼。 */
@media (max-width: 720px) {
  .section__bg .motif--bg { inset-inline-start: 0; inline-size: 100%; }
  .section__bg { --sec-bg-a: .6; }
}

.section > .container { position: relative; z-index: 1; }

/* ── §2 章节节奏 ──────────────────────────────────────────────────
   2026-09-21 改:这一节原来是「五页照抄首页 v4 同一组数」——
   `.section { padding-block: --s-12 }` + `.section .section__head { --s-9 }`。
   照抄的代价是六页每一个节都拿同一个 128px:承载 666 字的节和承载 23 字的节
   留一样多的白。实测 about 的导语节 288px 高,其中 256px 是留白(89%),
   正文只有 32px —— 那不是「留白大方」,那是一个洞。

   现在节奏由 site.css :root 的 --sec-pad-* 梯级统一带,六页共用同一套档位,
   本文件不再重写 .section 与 .section__head 的间距。
   `.section .section__head` 是 (0,2,0),曾把站体 §E 的 48px 压死,别再写回来。 */

.section__head .lead { font-size: var(--fs-sub); line-height: 1.6; max-width: 26em; }

/* 正文块的行宽与行高:卡片体与栏目体都收到 30em,行高 1.75。
   行宽是排版里唯一一处「越宽越难读」的量,宽屏上不跟着容器长。 */
.section .split__body,
.section .row__desc,
.section .vow__body,
.section .deflist__val,
.section .flow__body,
.section .tenet__body { max-width: 34em; line-height: 1.75; }

/* 插图与正文之间:图是一段话的收束,离上一段近、离下一段远。
   等距的 padding 会让人读不出它属于哪一段。 */
.section .figblock { margin-block: var(--s-6) var(--s-9); }
.section .figmark { margin-block: var(--s-6) var(--s-8); }

/* ── §3 章节眉 ────────────────────────────────────────────────────
   首页用 .section__no(「01 · 亮点」),五页用 .eyebrow(「治理结构」)。
   不给五页补编号 —— 编号是编辑决定,不是排版决定,这一轮没人拍过板。
   补的是那一记号:一段短横加等宽字,让两边的章节眉在同一套节奏上。 */

.section__head .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-text-2);
  margin-bottom: var(--s-4);
}

.section__head .eyebrow::before {
  content: "";
  flex: none;
  inline-size: var(--s-6);
  block-size: 3px;
  background: var(--sec-ink, var(--c-primary-600));
}

/* 带底色的模块换一记强调色,和首页 m1…m5 的轮换同一个用法:
   颜色在这里标的是「这一段属于哪一类」,不是装饰。 */
.section--band { --sec-ink: var(--c-accent-500); }

/* ── 自带主题的模块:必须自己铺底 ──────────────────────────────────
   一个节写了自己的 data-theme(如 about.html #boundary 的 dark),它的文字、描边、
   图形不透明度会整块换成另一套 token —— 但底色不会,因为上面 :25 的
   `.section{background:var(--sec-bg,transparent)}` 默认透明,透出来的仍是页面底。
   浅底 + 浅字 = 那一节读不出来。实测就是这样:ink 已经是 #F4F6F6,bg 还是 transparent。

   ⚠️ 别指望 site.css:143 的 `.section--band{background:var(--c-surface-subtle)}` ——
   它和本文件 :25 的 `.section` 同为 (0,1,0),而本文件后加载,那条背景早就是死规则。
   真正生效的入口只有 --sec-bg。

   取 --c-canvas 而不是 --c-surface-subtle:这一块要读成「另一套主题的一整页」,
   不是「同一页里深一度的承重带」;而且深色档下 canvas 与页面底同值,
   深色页里这条规则等于什么都没做,渲染与从前一致。 */
.section[data-theme] { --sec-bg: var(--c-canvas); }

/* ── §4 滚动带 ────────────────────────────────────────────────────
   不做自动轮播。理由与首页牌照带同一条:这些是合规与能力口径,
   自己跑起来等于替看的人决定他看到哪一张,而他可能正在读被换掉的那张。

   无 JS 时:.rail--on 加不上 ⇒ 轨道保持竖列、翻页钮不显示。
   内容一条不少,只是不横滚。横滚是增强,不是承载方式。 */

.rail { position: relative; }

.rail__track {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rail__nav { display: none; }

.rail--on .rail__track {
  /* 必须显式清空显式轨道:site.css 在 ≥768 给 .deflist 排了 repeat(2, 1fr)。
     grid-auto-columns 只管隐式轨道 ⇒ 前两项仍落进那两条 1fr,而容器横向可滚、
     没有可分配的余量,于是它们塌成一字一行,后三项才是 320。
     不是「轮播没生效」,是前两张被上游模板宽度接管了。 */
  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;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--s-1);
  scrollbar-width: thin;
}

.rail--on .rail__track > * { scroll-snap-align: start; }
.rail--on .rail__track::-webkit-scrollbar { block-size: 6px; }
.rail--on .rail__track::-webkit-scrollbar-thumb { background: var(--c-border-strong); }
.rail--on .rail__track::-webkit-scrollbar-track { background: var(--c-surface-subtle); }

/* 轨道本身可聚焦(左右键翻),焦点环必须看得见 —— 键盘用户要知道
   现在按方向键会动的是哪一块。 */
.rail__track:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 4px;
}

.rail--on .rail__nav {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-block-start: calc(var(--s-3) * -1);
}

.rail__btn {
  appearance: none;
  cursor: pointer;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-0);
  transition: background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.rail__btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail__btn:hover { background: var(--c-surface-subtle); }
.rail__btn[disabled] { opacity: .35; cursor: default; }

/* 两头都到底 = 没有可翻的 ⇒ 整组收起,不留两个永远灰着的钮。 */
.rail__nav:has([data-rail-prev][disabled]):has([data-rail-next][disabled]) { display: none; }

@media (min-width: 900px) {
  .rail--on .rail__track { grid-auto-columns: 320px; }
}

/* 滚动带里的条目:原本是竖排的定义项/流程段,横排之后要各自成块。 */
.rail--on .deflist__item,
.rail--on .flow__step {
  block-size: 100%;
  margin: 0;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-0);
}
.rail--on .flow__step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }

/* 竖排那条连接轨换向,**不是取消**。
   site.css 给 .flow 写死了一句话:「串行,带序号与连接轨 —— 不是卡片组
   (卡片组在视觉上是并列语义)」。横过来之后若只剩六个等大的方框并排,
   读到的就是「六件并列的事」,而这一节讲的是一笔指令依次经过的六段。
   序号还在,但序号是标签,连接轨才是「下一段接着上一段」那个意思。
   所以竖轨(::before)收起,改成一段横轨(::after)架在卡与卡之间,
   高度对齐序号盒中线:上内边距 24 + 盒高 28 的一半 = 38。
   宽度跨过 1px 右框 + 16px 列距 + 1px 左框。 */
.rail--on .flow__step::before { content: none; }
.rail--on .flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 38px;
  inline-size: calc(var(--s-4) + 2px);
  block-size: 1px;
  background: var(--c-border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .rail__track { scroll-behavior: auto; }
}

/* ── §5 深色档修补 ────────────────────────────────────────────────
   深色 token 里 --c-border 与 --c-divider 都等于 --c-surface(#1B2A33)。
   拿它们画的线在深色下不是「淡」,是**整条不存在**。
   全站 site.css 里这样的写法有 25 处 —— 那是一条要拍板的系统性修法(见交付说明),
   不在这一轮自作主张。这里只补这一轮实际动到的那几类列表与图版,
   不改 token、不改槽位名,只在深色档换一个来源。 */

[data-theme="dark"] .pivot {
  border-block-color: color-mix(in srgb, var(--c-border-strong) 34%, transparent);
}

[data-theme="dark"] .figure {
  border-color: color-mix(in srgb, var(--c-border-strong) 34%, transparent);
}

[data-theme="dark"] .deflist__item,
[data-theme="dark"] .rows,
[data-theme="dark"] .row,
[data-theme="dark"] .split__item,
[data-theme="dark"] .vow {
  border-color: color-mix(in srgb, var(--c-border-strong) 30%, transparent);
}

/* ── §6 ⬜待确认的槽 ──────────────────────────────────────────────
   这些槽是「此处事实尚未确认,故意不填」的记号,不是待办垃圾,语义一个字不动。

   本来想给它换一条实的左侧标尺。放弃了:站上已经用「等宽字 + 四周虚线框」
   表示「这一格是空的、等人来填」,虚线本身就是那个意思。再叠一条实线标尺
   等于同一件事写两套记号,读的人得先猜这两者有没有区别。沿用既有那一套。

   ⚠️ 一律限定在 main 之内。.slot 同时被法定风险提示那一层用(site.css 的
   .risk-banner .slot / .footer__risk .slot),那层版面这一轮不许动 ——
   不限定的话,这里随手一条 display 就会改到它。 */

@media (max-width: 420px) {
  /* 槽里是一整句话时,inline-block 会连着前后文挤在同一行里断字。
     375 下改成独占一行 —— 换行可以,挤没了不行。字号不缩。 */
  main .slot { display: block; }
}

/* ── §7 关于我们页 · 文案压薄后的版面校正(2026-09-21) ──────────────
   本页正文被改写成只剩短句:治理三问各 3–6 字,四条「不」各 10–14 字,
   原来挂在每条下面的解释段全部撤掉了。

   .qa__item / .vow 的竖列参数(每条上下 var(--s-6) + 一道分隔线)是为
   「标题 + 一段解释」设计的。条目只剩标题时,同一套参数把三个短词摊成
   三屏,读起来像三个没填完的空条目。

   实测(CDP,视口 800):改前本页 124 字/千px,而服务页 339、运营模式页 317
   —— 是全站最稀的一页,稀在版面没跟着内容改,不在留白本身。

   只横排、不动字号与分隔线:条款那套「一条一行、行下一道线」的读法要留着。
   ⚠️ 全部限定在 .page-about 内 —— .qa 与 .vows 是五页共用的类。 */

@media (min-width: 720px) {
  .page-about .qa,
  .page-careers .qa {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s-6);
  }
  .page-about .vows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-7);
  }
}

/* 条目只剩一行标题时,上下各 32px 是为解释段留的余量,留着就是空。收到 20px。
   分隔线与字号不动 —— 要的是行距变紧,不是条款读法变样。 */
.page-about .vow,
.page-about .qa__item,
.page-careers .qa__item {
  padding-block: var(--s-5);
}

/* 市场·拆解方法:每一维度是「一句判据 + 一句口径 + 一条示例」三段,不是一段。
   .split__body 在别处是单个 <p>,这里是包住三段的容器 —— 全局 p{margin:0} 会让它们黏成一坨。 */
.page-markets .split__body {
  display: grid;
  gap: var(--s-3);
}

/* 中文可以在任意字之间断行,自动换行会把「服务」「登录」「整套系统」劈成两行。
   断点只能由标点定,所以把这几句切成 .seg 段,段长压在一行容量(列宽÷字号)以内。
   只在 ≥860px 生效 —— 窄屏一行只放得下十来个字,再强制分段只会多出半行空白。 */
@media (min-width: 860px) {
  .page-about .hero .sub .seg,
  .page-about h2 .seg,
  .page-about .lead .seg,
  .page-careers .lead .seg,
  .page-markets .hero .sub .seg {
    display: block;
  }

  /* 最长的一段是 26 个字加一个逗号,按 21px 字号要 556px;原来的 546 差 10px,
     那一段就会自己再折一次,把「服务」劈开。列宽放到 580 是为了容下它。 */
  .page-about .lead {
    max-width: 580px;
  }
}

/* ── 关于我们 · 我们如何定义自己 ──────────────────────────────
   这张对照表的两列是「我们是 / 我们不是」,不是「智能体 / 人」。
   站上蓝=智能体按规则执行、青=具名的人裁定是一套固定记号,
   四处 figure__keys 图例和 .compare__list 共用它 —— 借过来会改口径,
   所以另给一对:左列品牌主色(这是我们),右列中性灰(这不是我们)。 */
.compare__col--is { border-block-start: 2px solid var(--c-primary-600); }
.compare__col--isnt { border-block-start: 2px solid var(--c-text-3); }
.compare__col--isnt .compare__list li::before { border-color: var(--c-text-3); }

/* site.css §H 的 [data-theme="dark"] .compare__col{border-color:…} 是 (0,2,0),
   会盖掉上面两条 (0,1,0) 的语义边。同权重、本文件在后 ⇒ 这里赢。
   .card--agent 那条蓝线被刷白过一次,就是漏了这一步。 */
[data-theme="dark"] .compare__col--is { border-block-start-color: var(--c-primary-600); }
[data-theme="dark"] .compare__col--isnt { border-block-start-color: var(--c-text-3); }

/* ── 关于我们 · 我们相信 ──────────────────────────────────────
   Yannie 的版式要求:引用语单独成行、字号放大、左侧竖线。
   站上已有 .quote(site.css:730)就是「左杠 + 定稿原句」这个用途,
   不另造组件,只补字号。
   杠的颜色改成品牌主色:.quote 默认用 --c-accent-500,而本页上一节
   (.card--human / .flow__step--human)正拿青色当「具名的人裁定」的记号,
   紧挨着再出现一条青杠会被读成「这句是人裁的」。蓝色与上一节
   .compare__col--is「这是我们」同口径,这句正是公司自陈。 */
.quote--creed {
  border-inline-start-color: var(--c-primary-600);
  /* 这是整页的落点,Yannie 要的是「字号放大」。第一版借 --fs-h3(20px)
     反而比它上面的小标题「我们相信」(26px)还小,读出来是附注不是结论。
     插在小标题与节标题之间:1440 下 29 / 27 / 36。 */
  font-size: clamp(24px, 1.1rem + 0.8vw, 30px);
  font-weight: 600;
  line-height: 1.5;
  margin-block: var(--s-6);
}

/* ── 不可拆词组 ────────────────────────────────────────────────
   中文任意处都能断。实测 375:「系统执行,人工裁定,责任具名」折成
   「系统执行,人工 / 裁定,责任具名」——「人工裁定」被劈开。
   .seg 管不到这里:.page-about h2 .seg{display:block} 只在 ≥860 生效,
   而劈词恰恰发生在窄屏。给词组本身加 nowrap,断点只能落在词组之间,
   与视口宽度无关,不用逐档加断点。 */
.nb { white-space: nowrap; }

/* ── 节内小标题的垂直节奏 ──────────────────────────────────────
   站上原本只有「h2 + 导语」一个层级(site.css §C),节内再分组这件事
   以前没发生过 —— 于是我这轮插进去的每一个 .h3 上下都是 0px,
   #governance 里 .cards 底下那个甚至量到 -8px(卡片组和小标题叠着)。
   Yannie 2026-09-22 的原话:「有的很紧凑,很压缩」。

   实测(1440,逐对量兄弟间距):
     h3「AI 原生,意味着什么」 ⇢ p.lead          0px
     p.lead ⇢ h3「我们如何定义自己」             0px
     h3「我们如何定义自己」 ⇢ .compare           8px
     .cards ⇢ h3「我们如何处理例外」            -8px
     h3「我们如何处理例外」 ⇢ p.lead             0px
     p.lead ⇢ .rail                              0px
     h3「我们所说的「普惠」」 ⇢ .split           0px
     .split ⇢ h3「我们相信」                     0px

   小标题上方要读成「这里起一组新的」,所以给 --s-9(桌面 64 / 窄屏 48,
   站上自己的响应式档位,不另设断点);下方 --s-5 让标题贴住它带的内容。 */
.subhead {
  font-size: var(--fs-subhead);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--c-text);
  margin-block-start: var(--s-9);
  margin-block-end: var(--s-5);
}
/* 小标题若正好是节内第一件东西,上方那 64px 会和 section padding 叠成两段空白 */
.section__head + .subhead { margin-block-start: var(--s-7); }

/* site.css §B 那张兄弟表没有「导语 ⇢ 横滚轨」这一对(以前没有节内出现过 .rail) */
.page-about .body + .rail { margin-block-start: var(--s-6); }

/* 两段各自独立的论述之间只有 16px,与段内行距(31.5px)相比反而更窄,
   读出来是一段而不是两段。抬到 24px —— 仍小于小标题那一档,层级不乱。 */
.page-about .section .body + .body { margin-block-start: var(--s-5); }


/* ── 节内小标题的字号档 ────────────────────────────────────────
   站上的字号梯子原本是 h1 56 / h2 36 / sub 21 / h3 20 / h4 17。
   「节内再分一组」这个层级以前不存在,我第一版直接借了 .h3 ⇒ 量出来:
     节标题 h2        36px
     节内小标题 .h3   20px
     它下面的导语     21px   ← 比小标题还大,层级是倒的
     卡片内标题       20px   ← 与小标题完全同级,读者分不出谁统辖谁
   所以补一档 27px 插在 36 与 20 之间,两边都拉开,梯子才连得上。
   clamp 的斜率抄 --fs-h2。下限不能按公式取(375 算出来 20.5px,与卡片标题
   20px 只差 0.5px,等于没分级 —— --fs-h3 是死的 20px,不跟着窄屏缩)。
   钉到 23px:375 下仍是 26.9 / 23 / 20,三级都分得开。 */
:root { --fs-subhead: clamp(23px, 1.15rem + 0.55vw, 27px); }