@charset "UTF-8";
/* Retu 官网 2.0 · 站体样式
 *
 * 规矩(自检时照着念):
 *   1. 本文件不含任何硬编码色值。颜色一律 var(--c-*),取值来自 brand/tokens-light.css
 *      与 brand/tokens-dark.css(委托人定稿),派生槽位见 assets/theme-bridge.css。
 *      grep '#[0-9A-Fa-f]\{3,6\}' 只应命中两处 mask-image 的 #000 —— 那是遮罩模板不是颜色。
 *   2. 间距只用 --s-*,圆角只用 --r-*,时长只用 --dur-*。表外的值就是没做完。
 *   3. 所有动效走 --dur-*,而 reduced-motion 把 --dur-* 压到 1ms(不是删掉动画 ——
 *      删掉会让入场动画把元素永久卡在 opacity:0)。
 */

/* ══════════════════════════════════════════════════════════════════
   1. 非颜色 token(字阶 / 间距 / 圆角 / 动效 / 焦点 / 栅格)
   来源:10-设计系统-tokens.md §10,叠加 20-视觉语言.md §4.2 对中文排版的四条修正。
   ══════════════════════════════════════════════════════════════════ */
:root {
  --font-sans: 'Inter', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC',
               'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Noto Sans Mono',
               'Noto Sans Mono CJK SC', monospace;

  --fs-h1: clamp(32px, 1.6rem + 2.4vw, 56px);
  --fs-sub: clamp(17px, 1rem + 0.5vw, 21px);
  --fs-h2: clamp(26px, 1.4rem + 1.2vw, 36px);
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-eyebrow: 13px;
  --fs-mono: 15px;
  --fs-risk: var(--fs-body);        /* 合规绑定,勿解绑 —— 10-设计系统-tokens.md §2.4 */

  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px;
  --s-11: 96px; --s-12: 128px;

  /* ── 纵向节奏梯级(2026-09-21)────────────────────────────────────
     一个节留多少白,取决于它承担什么,不是所有节共用一个数。
     四档都从上面的刻度里取值,没有新造尺寸。

     ⚠️ 断点里改的是这几个变量,**不许再在媒体查询里重写 .section 选择器**。
     `.section` 与 `.section--tight` 同为 (0,1,0),媒体查询不加权重;
     只要谁在后面又写一次 `.section { padding-block: … }`,--tight 当场失效。
     改这版之前站上就是这样:四处重写把所有节压成同一个 128px,
     `--tight` 与「节头 48px」两条规则都成了死规则 —— 写着,但量不到。 */
  --sec-pad: var(--s-9);         /* 主体节:承担一段完整论述 */
  --sec-pad-tight: var(--s-7);   /* 导语节:首屏之后的一两句引子 */
  --sec-pad-end: var(--s-8);     /* 收束节:页尾的一句话或一个动作 */
  --sec-pad-anchor: var(--s-9);  /* 承重节:横滚轨 / 整幅图版 / 表单 */
  --sec-head-gap: var(--s-7);        /* 节头 → 节身 */
  --sec-head-gap-tight: var(--s-6);  /* 导语节与收束节的同一间距 */

  --r-0: 0; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

  --container-max: 1200px;
  --measure: 68ch;
  --grid-size: 48px;

  /* 三档都落在设计规矩的 200–300ms 内(原为 160/240/320,两头都出界)。 */
  --dur-1: 200ms; --dur-2: 240ms; --dur-3: 300ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* 顶部固定层的实测高度,由 site.js 写入。页顶风险警示条已撤,该层高度为 0。 */
  --risk-h: 0px;
  --header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}

/* ══════════════════════════════════════════════════════════════════
   2. 基础
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.70;
  color: var(--c-text);
  background: var(--c-canvas);
  /* 顶部两层固定元素占掉的高度 */
  padding-top: calc(var(--risk-h) + var(--header-h));
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--c-primary-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--c-primary-700);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--c-surface);
  border-radius: var(--r-xs);
}

.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;
}

.skip-link {
  position: absolute; left: var(--s-4); top: calc(var(--risk-h) + var(--s-2));
  z-index: 90; padding: var(--s-3) var(--s-4);
  background: var(--c-surface); color: var(--c-primary-700);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   3. 版面
   ══════════════════════════════════════════════════════════════════ */
.container {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--s-4);
}

/* 节的角色四档。顺序即优先级(同权重,后写者胜):
   主体 → 承重 → 收束 → 导语,越往后越窄,最窄的写在最后最不容易被压掉。 */
.section { padding-block: var(--sec-pad); }
.section--band { background: var(--c-surface-subtle); }
.section--anchor { padding-block: var(--sec-pad-anchor); }
.section--end { padding-block: var(--sec-pad-end); }
.section--tight { padding-block: var(--sec-pad-tight); }

.section__head { margin-bottom: var(--sec-head-gap); }
.section--tight .section__head,
.section--end .section__head { margin-bottom: var(--sec-head-gap-tight); }

.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.2;
  letter-spacing: .04em; color: var(--c-text-3);
  text-transform: none; margin-bottom: var(--s-3);
}
.eyebrow--mono { font-family: var(--font-mono); }

h1, .h1 {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.10;
  letter-spacing: -.01em; color: var(--c-text);
  max-width: 17em;                 /* 视觉语言 §4.2①:行宽用 em,不用 ch */
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.18;
  letter-spacing: -.015em; color: var(--c-text); max-width: 20em;
  text-wrap: balance;
}
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.40; letter-spacing: -.01em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.50; }

.sub {
  font-size: var(--fs-sub); font-weight: 400; line-height: 1.55;
  color: var(--c-text-2); max-width: 34em; margin-top: var(--s-4);
}
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--c-text-2); max-width: var(--measure); }
.body { max-width: var(--measure); }
.body + .body { margin-top: var(--s-4); }
.muted { color: var(--c-text-3); font-size: var(--fs-sm); line-height: 1.60; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-mono); }

/* 换行符:断行点是语义问题,用显式 <br>,不靠容器宽度去凑(视觉语言 §4.2②) */
.brk-desktop { display: none; }
.brk-mobile { display: inline; }
@media (min-width: 768px) {
  .brk-desktop { display: inline; }
  .brk-mobile { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   4. ⬜ 待确认 —— 这是一个视觉元件,不是占位文字(视觉语言 §5.1)
   ══════════════════════════════════════════════════════════════════ */
.slot {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--c-text-2);
  padding: var(--s-1) var(--s-2);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-0);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 6px,
    color-mix(in srgb, var(--c-border-strong) 22%, transparent) 6px 7.2px);
}
.slot--block { display: block; max-width: var(--measure); padding: var(--s-4); }

/* ══════════════════════════════════════════════════════════════════
   5. 法定风险警示条 —— 合规强制版式
   规格:吸顶固定 / 上下滚都不动 / 不可关闭折叠 / 字号 = 正文 / 加粗 / 四边闭合边框 /
        直角 / 永不投影 / 六页每页都有 / 任何动效层不得压上或半透明穿过。
   本条只有 padding,没有 height —— 375 下必然折行,写死高度会撞 WCAG 1.4.12。
   ══════════════════════════════════════════════════════════════════ */
.risk-banner {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 100;                         /* 全站最高。任何浮层都不许盖过它 */
  box-shadow: none !important;          /* 法定文书,不是浮层 —— 永不投影 */
  background: var(--c-danger-50);
  border: 1px solid var(--c-danger-600);
  border-radius: var(--r-0);
  color: var(--c-danger-700);
  font-size: var(--fs-risk);
  font-weight: 700;
  line-height: 1.65;
  padding: var(--s-2) var(--s-4);
}
.risk-banner__inner {
  max-width: var(--container-max); margin-inline: auto;
  display: flex; gap: var(--s-3); align-items: baseline;
}
.risk-banner__label {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em;
}
.risk-banner .slot { color: var(--c-danger-700); border-color: var(--c-danger-600); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   6. 顶部导航
   ══════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; inset-block-start: var(--risk-h); inset-inline: 0;
  z-index: 80;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-border);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.site-header[data-scrolled="1"] { box-shadow: var(--sh-1); }
/* 手机:向下滚动收起,向上滚动回来。警示条永远不动(03 §5.3,写死不留选项) */
.site-header[data-hidden="1"] { transform: translateY(-100%); }

.site-header__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h);
}

/* 间距 9px 不是 --s-2:它是从委托人附图量出来的锁版比例(标记高 x 0.294,
   2026-09-30 取自附图矢量原件),跟着标记高走,不属于版面间距刻度。 */
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em;
  color: var(--c-text); text-decoration: none; flex: none;
}
.brand:hover { color: var(--c-primary-700); }
/* 品牌标记槽位 —— logo.svg 由美术那一路交付到 brand/,落地后填进这个槽,其余不用动。
   现在是空的,不占位、不自绘。 */
.brand__mark:empty { display: none; }
.brand__mark svg { width: var(--icon-xl); height: var(--icon-xl); }

.nav { display: flex; gap: var(--s-1); margin-inline-start: var(--s-5); }
.nav__link {
  position: relative; display: block;
  padding: var(--s-2) var(--s-3);
  color: var(--c-text-2); text-decoration: none;
  font-size: var(--fs-body); border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  /* 导航项永不折行。英文标签(How We Operate / Start Trading)比中文长一倍,
     窗口一窄,flex 会把它们压到内容宽度以下,于是一个菜单项断成两行 —— 整条导航
     变成两层高,看着就是坏了。宁可靠下面那档收紧字号和内边距,也不许断词。 */
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-text); background: var(--c-surface-subtle); }
/* 当前项:颜色 + 2px 下划线,不靠颜色单独传达(视觉语言 §5.1) */
.nav__link[aria-current="page"] { color: var(--c-text); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline: var(--s-3); inset-block-end: 0;
  height: 2px; background: var(--c-primary-600);
}

.header__tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.header__tools .btn, .header__tools .lang { white-space: nowrap; flex: none; }
/* ⚠️ 窄桌面(1024–1279)那一档的收紧规则不在这里,在 quotes-r19.css 末尾 ——
   `.nav__link--menu` 在那个文件里重设了 font-size,写在这里会被它盖掉。 */

/* ══════════════════════════════════════════════════════════════════
   7. 按钮
   全站只有一个实心主按钮 = 注册(03 §3.4)。其余一律 secondary / ghost。
   ══════════════════════════════════════════════════════════════════ */
.btn {
  --btn-pad-y: var(--s-3);
  --btn-pad-x: var(--s-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.2;
  border-radius: var(--r-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { --btn-pad-y: var(--s-2); --btn-pad-x: var(--s-3); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--c-primary-600); color: var(--c-on-primary); border-color: var(--c-primary-600); }
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-700); }
.btn--primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); }

.btn--secondary { background: var(--c-surface); color: var(--c-primary-700); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-primary-50); border-color: var(--c-primary-600); }

.btn--ghost { color: var(--c-text-2); border-color: transparent; }
.btn--ghost:hover { color: var(--c-text); background: var(--c-surface-subtle); }

.btn[disabled], .btn[aria-disabled="true"] {
  color: var(--c-text-disabled); background: var(--c-surface-sunken);
  border-color: var(--c-border); cursor: not-allowed; transform: none;
}

.btn-note {
  margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--c-text-3); max-width: 30em;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* 按钮行紧贴在整块组件的末条分隔线下,会被读成列表的最后一行。
   按相邻关系顶开,不往 HTML 里写内联 margin —— 预览代理的 CSP 会把内联 style 剥掉。 */
.rows + .btn-row, .split + .btn-row, .cards + .btn-row,
.deflist + .btn-row, .tenets + .btn-row, .compare + .btn-row,
.vows + .btn-row, .qa + .btn-row { margin-block-start: var(--s-7); }

/* 图标按钮(汉堡 / 主题 / 语言) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-width: 44px; min-height: 44px; padding: var(--s-2);
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--c-text-2); cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.icon-btn:hover { color: var(--c-text); background: var(--c-surface-subtle); border-color: var(--c-border); }
.icon-btn svg { width: var(--icon-md); height: var(--icon-md); stroke: currentColor; fill: none;
                stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }

/* ══════════════════════════════════════════════════════════════════
   8. 语言切换(胶囊,--r-pill 在这套语言里专指「一个可通过的口子」)
   ══════════════════════════════════════════════════════════════════ */
.lang { position: relative; }
.lang__btn { border-radius: var(--r-pill); padding-inline: var(--s-3); font-size: var(--fs-sm); }
.lang__btn[aria-expanded="true"] { background: var(--c-surface-subtle); border-color: var(--c-border-strong); color: var(--c-text); }
.lang__current { white-space: nowrap; }

.lang__menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--s-2));
  min-width: 200px; padding: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-3); z-index: 85;
}
.lang__menu[hidden] { display: none; }
.lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  background: none; border: 0; border-radius: var(--r-sm);
  text-align: start; cursor: pointer; color: var(--c-text);
}
.lang__opt:hover { background: var(--c-surface-subtle); }
.lang__opt[aria-current="true"] { font-weight: 600; background: var(--c-primary-50); color: var(--c-primary-700); }
.lang__opt[aria-disabled="true"] { color: var(--c-text-disabled); cursor: not-allowed; }
.lang__opt[aria-disabled="true"]:hover { background: none; }
.lang__tag { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-3); }
.lang__note {
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--c-divider); color: var(--c-text-3);
  font-size: var(--fs-sm); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   9. 汉堡抽屉(<1024)
   ══════════════════════════════════════════════════════════════════ */
.burger { display: none; }

.drawer {
  position: fixed; inset: 0; z-index: 95;
  display: none;
}
.drawer[data-open="1"] { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-text) 55%, transparent);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.drawer[data-open="1"] .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(420px, 100%); height: 100%;
  background: var(--c-surface); border-inline-start: 1px solid var(--c-border);
  padding: var(--s-5) var(--s-5) var(--s-9);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease);
}
.drawer[data-open="1"] .drawer__panel { transform: translateX(0); }

.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.drawer__nav { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-6); }
.drawer__link {
  display: block; padding: var(--s-3) var(--s-3);
  font-size: var(--fs-h4); color: var(--c-text-2); text-decoration: none;
  border-radius: var(--r-sm); border-inline-start: 2px solid transparent;
}
.drawer__link:hover { background: var(--c-surface-subtle); color: var(--c-text); }
.drawer__link[aria-current="page"] {
  color: var(--c-text); font-weight: 600;
  border-inline-start-color: var(--c-primary-600); background: var(--c-primary-50);
}
.drawer__group { border-top: 1px solid var(--c-divider); padding-top: var(--s-5); margin-top: var(--s-5); }
.drawer__group-title { font-size: var(--fs-eyebrow); letter-spacing: .04em; color: var(--c-text-3); margin-bottom: var(--s-3); }
.drawer__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ══════════════════════════════════════════════════════════════════
   10. 首屏 —— 三层:背景层 / 遮罩层 / 文字层
   背景主视觉由美术那一路交付(brand/)。这里给的是程序化的兜底底纹,
   落地时把 .hero__art 的内容整体换掉即可,层级与遮罩不用动。
   ══════════════════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; background: var(--c-canvas); }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* 网格:48px 方格,纯装饰。禁止压在文字下面 —— 用 mask 让它在左侧文字区完全消失。
   mask-image 里的 #000 是**遮罩的不透明度模板**(mask-mode 默认取 alpha 通道),
   不是颜色,页面上不会显示这个黑;全站唯一两处 hex 字面量就是这两行。 */
.hero__grid {
  position: absolute; inset: 0;
  opacity: var(--hero-grid-opacity);
  background-image:
    repeating-linear-gradient(to right, var(--c-grid) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--c-grid) 0 1px, transparent 1px var(--grid-size));
  -webkit-mask-image: linear-gradient(to right, transparent 0 34%, #000 64%);
          mask-image: linear-gradient(to right, transparent 0 34%, #000 64%);
}
/* 光晕:alpha ≤ .10(浅)、半径大、只落在右侧无文字区 */
.hero__halo {
  position: absolute; inset-block-start: -20%; inset-inline-end: -14%;
  width: 1040px; height: 1040px; max-width: 120%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--c-primary-500) calc(var(--hero-halo-alpha) * 100%), transparent),
    transparent);
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right,
    var(--c-canvas) 0 26%,
    color-mix(in srgb, var(--c-canvas) 55%, transparent) 52%,
    transparent 78%);
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--s-10) var(--s-4) var(--s-9);
  display: grid; gap: var(--s-8);
}
.hero__copy { max-width: 700px; }
/* 中文主标题按语义断行。中文没有词间空格,浏览器可在任意两字之间换行 ——
   实测断出「智/能体」「去/向」「只/写」。把整句切成若干不可断的语段,
   换行只发生在语段之间;窄屏语段本身放不下时退回逐字断,是可接受的兜底。
   2026-09-19 首屏主标题去掉标点后改 block:原来是 inline-block,宽屏两段会并到
   同一行,读成「服务可以延伸标准」这种歧义串 —— 停顿原本由逗号承担,逗号拿掉了,
   就得由换行承担。 */
.hero h1 .seg { display: block; }
.hero__art { display: none; }
.hero__aux { margin-top: var(--s-5); color: var(--c-text-2); max-width: 32em; }
.hero__cta { margin-top: var(--s-7); }
.hero__scroll {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-8); font-size: var(--fs-sm); color: var(--c-text-3);
  text-decoration: none;
}
.hero__scroll svg { width: var(--icon-sm); height: var(--icon-sm); stroke: currentColor; fill: none; stroke-width: 1.5; }
.hero__scroll:hover { color: var(--c-text); }
.hero__scroll .hero__scroll-arrow { animation: nudge 2.4s var(--ease) infinite; }

/* 内页首屏比首页矮一档,但同样是真首屏:主标题 + 副标题 + 背景主视觉 */
.hero--page .hero__inner { padding-block: var(--s-9) var(--s-8); }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ══════════════════════════════════════════════════════════════════
   11. 轨与闸(母题)—— 六页共用的结构示意图
   直角的轨 = 可以自动跑的流程;圆形节点 = 必须由人签字才过得去的闸。
   ⚠️ 委托人品牌板上没有金色,「智能体 / 人」的区分由**形状**承载:
      方 = 智能体(--c-primary-*),圆 = 人(--c-accent-*,现为中性墨占位)。
   ══════════════════════════════════════════════════════════════════ */
.motif { width: 100%; height: auto; }
.motif .rail { stroke: var(--c-border-strong); stroke-width: 1; fill: none; }
/* 深色档里 --c-border 与 --c-divider 都等于卡面色(#1B2A33)—— 那是给「深色不描边」
   定的,画进图里等于线没画。图内的线一律从 --c-border-strong 出发,深浅用 stroke-opacity
   拉开,两套主题才都看得见。 */
.motif .rail-dim { stroke: var(--c-border-strong); stroke-opacity: .45; stroke-width: 1; fill: none; }
.motif .node-agent { stroke: var(--c-primary-600); stroke-width: 1.5; fill: var(--c-surface); }
.motif .node-human { stroke: var(--c-accent-500); stroke-width: 1.5; fill: var(--c-surface); }
.motif .node-open { stroke: var(--c-border-strong); stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.motif .hatch { fill: var(--c-surface-sunken); stroke: var(--c-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.motif .ledger { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-opacity: .7; stroke-width: 1; }
.motif .ledger-line { stroke: var(--c-border-strong); stroke-opacity: .35; stroke-width: 1; }
.motif .label { fill: var(--c-text-3); font-family: var(--font-mono); font-size: 11px; }
/* 轨线没有方向就读不出「进」和「回」是两件事,箭头得跟轨线同色同权重。 */
.motif .tip { fill: var(--c-border-strong); stroke: none; }
.motif .pulse { fill: var(--c-primary-500); animation: pulse-run 6s linear infinite; }

@keyframes pulse-run {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--pulse-dist, 280px)); }
}

/* 出图冻结:data-static="1" 时把动画停在中途一帧。动画本身是真的,不是画上去的。 */
[data-static="1"] .motif .pulse,
[data-static="1"] .hero__scroll-arrow,
[data-static="1"] .ticker__track { animation-play-state: paused; animation-delay: -2.4s; }

/* ══════════════════════════════════════════════════════════════════
   12. 跑马灯公告
   位置:首屏内部的底部,随 hero 一起滚走 —— 不吸底(顶部已有一条法定固定条)。
   ══════════════════════════════════════════════════════════════════ */
.ticker {
  position: relative; z-index: 2;
  border-block-start: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}
.ticker__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.ticker__label {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .04em; color: var(--c-text-3);
  padding-block: var(--s-3);
}
.ticker__viewport { flex: 1 1 auto; overflow: hidden; padding-block: var(--s-3); }
.ticker__track {
  display: flex; gap: var(--s-8); width: max-content;
  animation: ticker-run var(--ticker-dur, 60s) linear infinite;
}
.ticker[data-paused="1"] .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: center; gap: var(--s-2);
  white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text-2);
}
.ticker__dot { flex: none; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--c-primary-500); }
.ticker__pause { flex: none; }

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* reduced-motion / 手机:变静态列表,不自动滚动 */
.ticker__static { display: none; padding-block: var(--s-3); }
.ticker__static .ticker__item { white-space: normal; }
.ticker[data-mode="static"] .ticker__viewport,
.ticker[data-mode="static"] .ticker__pause { display: none; }
.ticker[data-mode="static"] .ticker__static { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.ticker__more {
  align-self: flex-start; background: none; border: 0; padding: 0;
  color: var(--c-primary-700); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   13. 卡片 / 卡片组
   静止的卡片零阴影,靠 1px 描边立住。阴影只给「刚刚动了」的瞬时态。
   ══════════════════════════════════════════════════════════════════ */
.cards { display: grid; gap: var(--s-5); }
.cards--2 { grid-template-columns: 1fr; }
.cards--3 { grid-template-columns: 1fr; }
.cards--4 { grid-template-columns: 1fr; }

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-0);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card__num {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--c-text-3); letter-spacing: .04em;
}
.card__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; color: var(--c-text); }
.card__body { color: var(--c-text-2); font-size: var(--fs-body); line-height: 1.7; }

/* 可点卡:整卡可点,但卡内标题必须是真链接(读屏用户靠链接列表导航) */
/* 悬停上浮 4px + 边框高亮 —— 设计规矩明写的那一条。
   ⚠️ 这里原本刻意不做位移,依据是「实测十六家头部站位移与缩放零家」
   (benchmark-visual/01-视觉与交互拆解.md §维度六)。那份对标与规矩直接冲突,
   Yannie 2026-09-22「不符合的要改到符合」= 以规矩为准,对标作废。
   只给可点卡;.card--static 不得有任何「可点」暗示,见下。 */
.card--link { transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.card--link:hover { box-shadow: var(--sh-2); border-color: var(--c-border-strong); transform: translateY(-4px); }
.card--link .card__title a { color: inherit; text-decoration: none; }
.card--link .card__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.card--link:focus-within { box-shadow: var(--sh-2); }

/* 不可点卡:不得有 hover 抬起等「可点」暗示 */
.card--static { cursor: default; }

/* 虚线卡 = 这里现在是空的 / 不可点 / 等定稿 */
.card--dashed { border-style: dashed; border-color: var(--c-border-strong); background: none; }

/* 顶边 2px = 全站唯一的粗线,只用来标主体归属 */
.card--agent { border-block-start: 2px solid var(--c-primary-600); }
.card--human { border-block-start: 2px solid var(--c-accent-500); }

/* ══════════════════════════════════════════════════════════════════
   14. 状态标签
   三个值,全站统一:上线前 · 可试模拟 / 建设中 / 规划中。
   确定性由高到低 = 视觉重量由重到轻。形状同时区分,不只靠颜色。
   ══════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  border-radius: var(--r-0); border: 1px solid;
  white-space: nowrap;
}
.tag__glyph { width: 8px; height: 8px; flex: none; }
.tag--demo { color: var(--c-primary-700); border-color: var(--c-primary-600); background: var(--c-primary-50); }
.tag--demo .tag__glyph { background: var(--c-primary-600); }
.tag--building { color: var(--c-text-2); border-color: var(--c-border-strong); background: var(--c-surface); }
.tag--building .tag__glyph { border: 1.5px solid var(--c-border-strong); }
.tag--planned { color: var(--c-text-3); border-color: var(--c-border-strong); border-style: dashed; background: none; }
.tag--planned .tag__glyph {
  border: 1px solid var(--c-border-strong);
  background-image: repeating-linear-gradient(45deg, transparent 0 2px,
    color-mix(in srgb, var(--c-border-strong) 50%, transparent) 2px 3.2px);
}
.tag--human { color: var(--c-accent-700); border-color: var(--c-accent-500); background: var(--c-accent-50); border-radius: var(--r-pill); }
.tag--human .tag__glyph { border: 1.5px solid var(--c-accent-500); border-radius: var(--r-pill); }

/* ══════════════════════════════════════════════════════════════════
   15. 清单 / 流程 / 对比 / 定义列表
   ══════════════════════════════════════════════════════════════════ */
.rows { border-block-start: 1px solid var(--c-border); }
.row {
  display: grid; gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--c-divider);
  align-items: start;
}
.row__name { font-weight: 600; color: var(--c-text); }
.row__desc { color: var(--c-text-2); font-size: var(--fs-sm); }
.row__state { justify-self: start; }

/* 流程:串行,带序号与连接轨 —— 不是卡片组(卡片组在视觉上是并列语义) */
.flow { counter-reset: step; display: grid; gap: 0; }
.flow__step {
  position: relative; display: grid; grid-template-columns: 40px 1fr;
  gap: var(--s-4); padding-block: var(--s-5);
}
.flow__step:not(:last-child)::before {
  content: ''; position: absolute; inset-block: calc(var(--s-5) + 28px) 0;
  inset-inline-start: 19px; width: 1px; background: var(--c-border-strong);
}
.flow__marker {
  position: relative; z-index: 1;
  width: 40px; height: 28px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-primary-700); background: var(--c-canvas);
  border: 1.5px solid var(--c-primary-600); border-radius: var(--r-0);
}
/* 人签字的节点 = 圆(形状承载语义,不靠颜色) */
.flow__step--human .flow__marker {
  color: var(--c-accent-700); border-color: var(--c-accent-500); border-radius: var(--r-pill);
}
/* 故意留空的那一步:虚线边 + 强描边色 + ⬜待确认 + 一句话说明,三重信号 */
.flow__step--open .flow__marker { border-style: dashed; color: var(--c-text-3); border-color: var(--c-border-strong); }
.flow__title { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--s-2); }
.flow__body { color: var(--c-text-2); max-width: var(--measure); }
.flow__note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-text-3); }

/* 六段的标记有三种形状,形状承载语义。没有图例,读者只会把虚线那一步和圆的那一步
   读成排版出错 —— 所以图例必须和形状一起出现,不能只活在这份样式表的注释里。 */
.flow-key {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  margin: 0 0 var(--s-6); padding: 0; list-style: none;
  font-size: var(--fs-sm); color: var(--c-text-3);
}
.flow-key__item { display: flex; align-items: center; gap: var(--s-2); }
.flow-key__mark {
  inline-size: .7em; block-size: .7em; flex: none;
  border: 1.5px solid var(--c-primary-600);
}
.flow-key__item--open .flow-key__mark { border-style: dashed; border-color: var(--c-border-strong); }
.flow-key__item--human .flow-key__mark { border-color: var(--c-accent-500); border-radius: var(--r-pill); }

/* 对比两栏:手机上下堆叠,两栏各自保留小标题,绝不做左右滑 */
.compare { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
.compare__col {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5);
}
.compare__col--agent { border-block-start: 2px solid var(--c-primary-600); }
.compare__col--human { border-block-start: 2px solid var(--c-accent-500); }
.compare__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.compare__title { font-size: var(--fs-h3); font-weight: 600; }
.compare__list { display: grid; gap: var(--s-3); }
.compare__list li { display: grid; grid-template-columns: var(--icon-sm) 1fr; gap: var(--s-3); color: var(--c-text-2); }
.compare__list li::before {
  content: ''; width: 8px; height: 8px; margin-top: 10px;
  border: 1.5px solid var(--c-primary-600);
}
.compare__col--human .compare__list li::before { border-color: var(--c-accent-500); border-radius: var(--r-pill); }

/* 定义列表(手机上表格转成它) */
.deflist { display: grid; gap: var(--s-4); }
.deflist__item { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-block-end: 1px solid var(--c-divider); }
.deflist__key { font-size: var(--fs-sm); color: var(--c-text-3); font-family: var(--font-mono); }
.deflist__val { color: var(--c-text); }

/* 定稿原句:左杠 + 出处标,让后面任何人在版面上就看出这几个字不许动 */
.quote {
  border-inline-start: 3px solid var(--c-accent-500);
  padding-inline-start: var(--s-4); margin-block: var(--s-4);
  color: var(--c-text); max-width: var(--measure);
}
.quote__src {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-accent-700);
}

/* 页内锚点二级导航(只有关于我们页需要) */
.anchornav {
  position: sticky; inset-block-start: calc(var(--risk-h) + var(--header-h));
  z-index: 40; background: var(--c-canvas);
  border-block-end: 1px solid var(--c-border);
  margin-block-start: var(--s-6);
}
.anchornav__list {
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--s-4);
  display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: thin;
}
.anchornav__link {
  display: block; padding: var(--s-3) var(--s-3); white-space: nowrap;
  color: var(--c-text-2); text-decoration: none; font-size: var(--fs-sm);
  border-block-end: 2px solid transparent;
}
.anchornav__link:hover { color: var(--c-text); }
.anchornav__link[aria-current="true"] { color: var(--c-text); font-weight: 600; border-block-end-color: var(--c-primary-600); }

/* 插图容器 */
.figure {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5);
}

/* .figure__cap / .figure__badge(「〔示意〕」图注)于 2026-09-21 整类撤除:
   委托人要求「把所有插图的示意描述都去掉」。全站 12 处标记已删,这里的规则
   一并清空,免得留下一套没有对象的样式,让后来的人以为图注还在用。
   图例 .figure__keys 保留 —— 那是记号表,不是示意描述。 */

/* 图内标签必须写在 HTML 里,不能写进 SVG。
   .motif 是 width:100% + viewBox,整幅按容器宽等比缩放 —— 画在 SVG 里的 11px 文字
   在 375 宽的手机上实测只剩约 4px,等于没有。图形交给 SVG,字交给 HTML:
   下面这条栏与图中节点同列数、同顺序,窄屏改成两列继续读得出来。 */
.figure__keys {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.figure__key { display: flex; align-items: baseline; gap: var(--s-2); }
.figure__key::before {
  content: ""; flex: none; inline-size: .6em; block-size: .6em;
  border: 1.5px solid var(--c-primary-600); translate: 0 -.05em;
}
.figure__key--open::before { border-style: dashed; border-color: var(--c-border-strong); }
.figure__key--human::before { border-color: var(--c-accent-500); border-radius: var(--r-pill); }
.figure__key--off::before { border-color: var(--c-border-strong); opacity: .5; }
.figure__key b { font-weight: 600; color: var(--c-text); }
/* --axis:这一栏当的是图中节点的横轴刻度,不是图例。节点画在 viewBox 的等分中点上,
   标签也要落在各自格子的中点,否则整排会整体左偏半格,看上去像对错了行。 */
@media (min-width: 768px) {
  .figure__keys--axis .figure__key { justify-content: center; }
}
@media (min-width: 768px) {
  /* 桌面按图中节点数分列,标签落在各自节点正下方 */
  .figure__keys--3 { grid-template-columns: repeat(3, 1fr); }
  .figure__keys--4 { grid-template-columns: repeat(4, 1fr); }
  .figure__keys--5 { grid-template-columns: repeat(5, 1fr); }
  .figure__keys--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   16. 表单
   浅色系里表单最容易垮:输入框的边一律 --c-border-strong,绝不用 --c-border。
   ══════════════════════════════════════════════════════════════════ */
.form { max-width: 640px; }
.form__intro { margin-bottom: var(--s-6); }
.field { margin-bottom: var(--s-5); }
.field__label { display: block; font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--s-2); }
.field__req { color: var(--c-danger-700); font-weight: 700; }
.field__hint { display: block; font-size: var(--fs-sm); color: var(--c-text-3); margin-bottom: var(--s-2); line-height: 1.6; }

.input, .select, .textarea {
  width: 100%; padding: var(--s-3) var(--s-4);
  font: inherit; font-size: var(--fs-body); color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.select { appearance: none; padding-inline-end: var(--s-9); cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; inset-inline-end: var(--s-4); inset-block-start: 50%;
  width: 9px; height: 9px; margin-block-start: -6px;
  border-inline-end: 1.5px solid var(--c-text-2); border-block-end: 1.5px solid var(--c-text-2);
  transform: rotate(45deg); pointer-events: none;
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-disabled); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-2); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--c-danger-600); border-width: 2px;
}
.input[readonly], .textarea[readonly] { background: var(--c-surface-sunken); }

/* 错误不得只用颜色表示 —— 必须有文字,并带一个形状标记 */
.field__error {
  display: none; align-items: baseline; gap: var(--s-2);
  margin-top: var(--s-2); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--c-danger-700); font-weight: 600;
}
.field[data-invalid="1"] .field__error { display: flex; }
.field__error::before {
  content: '!'; flex: none;
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-danger-600); font-size: 11px; font-weight: 700;
}

/* 文件上传:拖放区同时是一个真正的 input[type=file] 的 label,键盘用户才上得了 */
.upload {
  display: grid; gap: var(--s-2); justify-items: center; text-align: center;
  padding: var(--s-6) var(--s-5);
  border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm);
  background: var(--c-surface); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.upload:hover, .upload[data-drag="1"] { border-color: var(--c-primary-600); background: var(--c-primary-50); }
.upload__strong { font-weight: 600; color: var(--c-primary-700); }
.upload__hint { font-size: var(--fs-sm); color: var(--c-text-3); }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__file {
  display: none; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface);
}
.upload__file[data-has="1"] { display: flex; }
.upload__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.upload__size { flex: none; color: var(--c-text-3); font-size: var(--fs-sm); }

.form__summary {
  display: none; margin-bottom: var(--s-5); padding: var(--s-4);
  border: 1px solid var(--c-danger-600); border-radius: var(--r-sm);
  background: var(--c-danger-50); color: var(--c-danger-700);
}
.form__summary[data-show="1"] { display: block; }
.form__summary ul { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.form__summary a { color: var(--c-danger-700); }

.form__privacy {
  margin-block: var(--s-5); padding: var(--s-4);
  border-inline-start: 2px solid var(--c-border-strong);
  color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7;
}

.form__success { display: none; }
.form__success[data-show="1"] { display: block; }
.success-panel {
  border: 1px solid var(--c-success-600); border-radius: var(--r-md);
  background: var(--c-success-50); padding: var(--s-6);
}
.success-panel__title { font-size: var(--fs-h2); color: var(--c-success-700); margin-bottom: var(--s-4); }
.success-panel__title:focus-visible { outline-color: var(--c-success-700); }
.success-panel dl { margin-block: var(--s-5); display: grid; gap: var(--s-3); }
.success-panel dt { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-3); }
.success-panel dd { margin: 0; color: var(--c-text); }

/* ══════════════════════════════════════════════════════════════════
   17. 提示条
   ══════════════════════════════════════════════════════════════════ */
.alert {
  display: grid; gap: var(--s-2);
  padding: var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7;
  max-width: var(--measure);
}
.alert__title { font-weight: 700; color: var(--c-text); font-size: var(--fs-body); }
.alert--info { border-color: var(--c-primary-600); background: var(--c-primary-50); }
.alert--info .alert__title { color: var(--c-primary-700); }

/* ══════════════════════════════════════════════════════════════════
   18. 页脚
   D 区合规声明不是「小字区」:字号 ≥ 正文,任何时候都不折叠。
   ══════════════════════════════════════════════════════════════════ */
.footer { border-block-start: 1px solid var(--c-border); background: var(--c-surface-subtle); margin-block-start: var(--s-10); }
.footer__top { padding-block: var(--s-8) var(--s-7); }
.footer__brand { margin-bottom: var(--s-6); }
.footer__tagline { color: var(--c-text-2); max-width: 34em; margin-top: var(--s-2); }
.footer__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.footer__coltitle { font-size: var(--fs-eyebrow); letter-spacing: .04em; color: var(--c-text-3); margin-bottom: var(--s-3); }
.footer__list { display: grid; gap: var(--s-2); }
.footer__list a { color: var(--c-text-2); text-decoration: none; font-size: var(--fs-sm); }
.footer__list a:hover { color: var(--c-primary-700); text-decoration: underline; }
.footer__list span { color: var(--c-text-3); font-size: var(--fs-sm); }

.footer__risk {
  border-block-start: 1px solid var(--c-border);
  border-block-end: 1px solid var(--c-border);
  padding-block: var(--s-6);
}
.footer__risk-title { font-size: var(--fs-eyebrow); letter-spacing: .04em; color: var(--c-text-3); margin-bottom: var(--s-3); }
.footer__risk .slot { font-size: var(--fs-risk); font-weight: 700; color: var(--c-text); }
.footer__legal { padding-block: var(--s-5) var(--s-7); color: var(--c-text-3); font-size: var(--fs-sm); }

/* ══════════════════════════════════════════════════════════════════
   19. 滚动入场
   位移 ≤8px,只用 transform / opacity,不触发 layout。
   无 JS 时 .reveal 保持终态(下面的规则只在 html[data-anim="1"] 下生效)。

   ⚠️ 这一节的门是 data-anim,**不是 data-js**,这一字之差是内容可见性的保险丝:
   data-js 在 main.js 第一行就置上,一旦后面任何一段抛错,整页正文会永久停在
   opacity:0 —— 用户看到的是空白页,而不是「动效没了但字还在」。data-anim 由动效段
   自己在装观察器前一刻置上,上游出任何事,页面都只是没有入场动画,内容照常可读。
   ══════════════════════════════════════════════════════════════════ */
[data-anim="1"] .reveal { opacity: 0; transform: translateY(8px); }
[data-anim="1"] .reveal[data-in="1"] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 首屏入场:一次性,≤400ms,不循环。首帧即最终排版位置,不产生布局位移。 */
[data-anim="1"] .hero__copy > * { opacity: 0; transform: translateY(8px); }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > * {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(2) { transition-delay: 60ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(3) { transition-delay: 120ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(4) { transition-delay: 180ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(n+5) { transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  [data-anim="1"] .reveal,
  [data-anim="1"] .hero__copy > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__scroll .hero__scroll-arrow, .motif .pulse, .ticker__track { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   20. 响应式
   设计从 375 往回推,验收在 320 跑一遍(WCAG 1.4.10 的门槛是 320px CSS 宽)。
   ══════════════════════════════════════════════════════════════════ */

/* — 手机(<768) — */
@media (max-width: 767px) {
  .hero__inner { padding-block: var(--s-8) var(--s-7); }
  .hero__grid { -webkit-mask-image: none; mask-image: none; opacity: calc(var(--hero-grid-opacity) * .5); }
  .hero__veil { background: linear-gradient(to bottom,
      color-mix(in srgb, var(--c-canvas) 80%, transparent) 0 62%, transparent); }
  .anchornav { position: static; }
  .flow__step { grid-template-columns: 32px 1fr; gap: var(--s-3); }
  .flow__step:not(:last-child)::before { inset-inline-start: 15px; }
  .flow__marker { width: 32px; }
}

/* — 平板(≥768) — */
@media (min-width: 768px) {
  .container, .hero__inner, .site-header__inner, .risk-banner__inner,
  .ticker__inner, .anchornav__list { padding-inline: var(--s-5); }
  /* 梯级整体上一档 —— 改变量,不改 .section 选择器(见 :root 里那条警告) */
  :root {
    --sec-pad: var(--s-10); --sec-pad-tight: var(--s-8);
    --sec-pad-end: var(--s-9); --sec-pad-anchor: var(--s-10);
  }
  .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr 1fr; }
  /* 轨道必须由 .rows 持有:每个 .row 各自成网格时,第三条 auto 轨道按本行状态文字定宽,
     四行宽度各不相同,描述列与状态列的左边缘因此逐行错开。subgrid 让四行共用一套轨道,
     auto 取的是全部行里最长那条状态文字。.rows--pair 是另一套两列排法,排除在外。 */
  .rows:not(.rows--pair) {
    display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto;
    column-gap: var(--s-5);
  }
  .rows:not(.rows--pair) > .row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .row { grid-template-columns: minmax(180px, 1fr) 2fr auto; align-items: baseline; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .deflist { grid-template-columns: repeat(2, 1fr); }
  /* 三项并列就排三列 —— 落在两列里会空出右下角一格,读起来像少了一条。 */
  .deflist--3 { grid-template-columns: repeat(3, 1fr); }
}

/* — 导航形态切换点(≥1024)+ 桌面 — */
@media (max-width: 1023px) {
  .nav, .header__tools .lang, .header__tools .theme-toggle, .header__tools .btn--login { display: none; }
  .burger { display: inline-flex; }
  .site-header__inner { gap: var(--s-3); }
  /* 注册按钮不进抽屉:转化主路径不该藏在两次点击之后 */
  .header__tools .btn--primary { margin-inline-start: auto; }
}

@media (min-width: 1024px) {
  .drawer { display: none !important; }
  /* 桌面档。承重节吃满 --s-12(横滚轨/整幅图版/表单 —— 高度由结构决定,
     需要最大的分隔量才不与邻节混读);导语节只有 --s-9,是承重节的一半。
     改这版之前这两类都是 128px,于是一句话的引子和一整幅图版占一样的白。 */
  :root {
    --sec-pad: var(--s-11); --sec-pad-tight: var(--s-9);
    --sec-pad-end: var(--s-10); --sec-pad-anchor: var(--s-12);
    --sec-head-gap: var(--s-8); --sec-head-gap-tight: var(--s-7);
  }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
}

/* — 桌面(≥1280):出图 1440、验收 1280 — */
@media (min-width: 1280px) {
  .container, .hero__inner, .site-header__inner, .risk-banner__inner,
  .ticker__inner, .anchornav__list { padding-inline: var(--s-6); }
  /* 1280 不再单独抬节留白 —— 梯级在 1024 那档已经到位。
     原来这里的 `.section { padding-block: --s-11 }` 是压死 --tight 的四处之一。 */
  .hero__inner { grid-template-columns: minmax(0, 700px) minmax(0, 1fr); align-items: center; padding-block: var(--s-12) var(--s-10); }
  .hero__art { display: block; }
  .hero--page .hero__inner { padding-block: var(--s-10) var(--s-9); }
}

/* ══════════════════════════════════════════════════════════════════
   21. 品牌资产落位(brand/ 已交付后补)
   logo 与首屏主视觉都是 brand/ 的真文件,这里只负责「放在哪、多大、
   哪套主题显哪一张」,不重画、不改色。
   ══════════════════════════════════════════════════════════════════ */

/* 主题互斥显示:<html data-theme> 由 index.html 头部的内联脚本在首帧前写好。
   无 JS 时保持标签上写死的 light,不会两张都显示。 */
[data-theme="light"] .on-dark { display: none !important; }
[data-theme="dark"] .on-light { display: none !important; }

/* 标志:mark 是 403×268 的非方形,锁高不锁宽,绝不塞进方框里拉变形 */
.brand__mark { display: inline-flex; flex: none; }
.brand__mark img { height: 30px; width: auto; display: block; }

/* 字标是描出来的轮廓,不是活字 —— 站上没有任何 @font-face,
   排出来的字标到了别人机器上会掉成回退字体,锁不住形。
   高度 = 标记高 x 0.60,量自委托人 2026-09-30 附图的矢量横版锁版(字标只留「Retu」)。 */
.brand__word { display: inline-flex; flex: none; }
.brand__word img { height: 18px; width: auto; display: block; }

/* 首屏主视觉:brand/hero-<page>-<theme>.svg,1440×810,自带左侧遮罩渐变。
   它就是「背景层」;.hero__veil 的活已经画进 SVG 里了,所以首页不再叠第二层遮罩,
   叠两层会把左侧压成灰板。网格与光晕保留 —— 它们在 SVG 的透明区里补细节。 */
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}

/* hero 完全离开视口时停掉它自己的循环动效(JS 打 data-offscreen)。
   不做「滚动中逐帧驱动」—— 那会让滚动手感变重。 */
.hero[data-offscreen="1"] .hero__scroll-arrow { animation-play-state: paused; }

/* 主题切换:两个图标叠在一个按钮里,按当前主题显示「切过去会变成什么」 */
.theme-toggle .theme-toggle__label { font-size: var(--fs-sm); }

/* 跑马灯手机降级(03 §3.2 / §5.4):不横向滚,只显示最新一条,可展开全文 */
.ticker__static .ticker__item[hidden] { display: none; }
.ticker[data-mode="static"] .ticker__inner { align-items: flex-start; }
.ticker[data-mode="static"] .ticker__label { padding-block: var(--s-3) 0; }

/* 合作伙伴「此栏留空」原先是一张 .card--dashed。虚线卡说的是「这里将来会变成一张卡」,
   而它将来会变成一份名单 —— 站上表达「暂缺」的记号是 .slot(about#ask 就是这么用的),
   已改用 .slot,.partners 这条一次性规则随之废除。间距见 § 21 的 .rows + .btn-note。 */

/* 页脚里的品牌标志比顶栏大一档 —— 字标与间距按同一套比例跟着放大 */
.footer__brand .brand__mark img { height: 40px; }
.footer__brand .brand__word img { height: 24px; }
.footer__brand .brand { gap: 12px; }

/* 窄屏顶栏按整体等比缩小(字标 2026-09-30 已从「RetuTrade」改回「Retu」,宽度约减半,
   只在最窄一档还留一次缩小,防 320px 上把「立即交易」挤成两行)。0.60 / 0.294 的比例不变。 */
@media (max-width: 359px) {
  .site-header .brand { gap: 7px; }
  .site-header .brand__mark img { height: 24px; }
  .site-header .brand__word img { height: 14.4px; }
}

/* — 320px 回流底线:不得出现横向滚动 — */
@media (max-width: 359px) {
  :root { --s-9: 48px; --s-10: 56px; }
  .container, .hero__inner, .site-header__inner, .risk-banner__inner,
  .ticker__inner { padding-inline: var(--s-3); }
  .brand { font-size: var(--fs-h4); }
  .btn { --btn-pad-x: var(--s-4); }
  .card { padding: var(--s-4); }
  .upload { padding: var(--s-5) var(--s-3); }
}

/* =========================================================================
   第五阶段(2026-09-17)· 逐屏版式
   委托人指示三:「首頁每一屏要根據內容去做排版的設計和構思,不要生硬的直接放上」
   四个块,各自只服务首页某一段的内容形态;#services 那段版式本来就对,未新增块。
   ⚠️ 色值一律复用既有 token 对(与 .card / .compare 同源),不新造配色 ——
      check-contrast.py 测的是 token 对,不新增对就不新增对比度风险。
   ========================================================================= */

/* ① 断言体 —— 首页导语。内容是一条编辑方针,不是过渡段,所以比 .lead 重一级。 */
.statement {
  max-width: 32em;
  font-size: var(--fs-sub);
  line-height: 1.65;
  color: var(--c-text);
  border-inline-start: 2px solid var(--c-primary-600);
  padding-inline-start: var(--s-5);
}

/* ② 二分块 —— 首页运营模式。三条约束在 markup 里本就分属 agent / human 两侧
      (card--agent ×2 / card--human ×1),此处把那个分法显示出来。
      3fr:2fr 的不对称是内容本身的不对称,不是构图偏好。 */
.pivot {
  margin-block: var(--s-7);
  padding-block: var(--s-5);
  border-block: 1px solid var(--c-divider);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
}
/* 深色档下 --c-divider 与页面底色几乎同亮度,这两条线整条看不见。
   同一修法本已写在 pages-v1.css,但首页不加载那个文件 —— 而首页正是用到它的页之一。 */
[data-theme="dark"] .pivot {
  border-block-color: color-mix(in srgb, var(--c-border-strong) 34%, transparent);
}
.duo { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
.duo__side {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.duo__side--agent { border-block-start: 2px solid var(--c-primary-600); }
.duo__side--human { border-block-start: 2px solid var(--c-accent-500); }
.duo__who {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--c-text-3); letter-spacing: .04em; margin-bottom: var(--s-2);
}
.duo__what {
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.4;
  color: var(--c-text); margin-bottom: var(--s-6);
}
.duo__list { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.duo__k { font-size: var(--fs-h4); font-weight: 600; color: var(--c-text); margin-bottom: var(--s-2); }
.duo__v { color: var(--c-text-2); line-height: 1.7; }

/* ③ 承诺块 —— 首页资金。一条不设例外的承诺,单点强调;去处降为文末文字链,
      不占与承诺对等的版面。 */
.pledge {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-inline-start: 3px solid var(--c-accent-500);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6);
}
.pledge__line {
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.45;
  color: var(--c-text); max-width: 28em;
}
.pledge__body {
  margin-top: var(--s-4); color: var(--c-text-2);
  line-height: 1.75; max-width: var(--measure);
}
.pledge__more {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--c-divider);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: var(--fs-sm);
}

/* ④ 收束段 —— 首页开始。终点要看得出是终点,所以居中收窄,与前六段的左对齐拉开。
   头→身的距离不在这里写死,走 --sec-head-gap-tight(见 :root 的节奏梯级)。 */
.closer { max-width: 36em; margin-inline: auto; text-align: center; }
.closer h2 { max-width: none; }
.closer .lead { max-width: none; }
.closer .btn-row { justify-content: center; }
.closer h2 + .btn-row { margin-block-start: var(--s-7); }
.closer .btn-note { max-width: none; }

@media (min-width: 900px) {
  /* 不用 align-items:start —— 右栏只有一条,会比左栏短一截,「交给智能体 / 留给具名的人」
     这组对照的对称感就塌了。两卡等高,对照才立得住。 */
  .duo { grid-template-columns: 3fr 2fr; }
}

/* ⑤ 首屏眉标 —— 委托人指示四「保副標題,優化小字更大氣」。
      改的不只是词:原来是 eyebrow--mono 等宽 + 点分隔的三段标签串,那是元数据的排版语言;
      首屏这一行是公司身份,所以去掉等宽、去掉点分隔,字号 13→16、字距放开、颜色提一级。 */
.eyebrow--hero {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: .10em;
  color: var(--c-text-2);
  margin-bottom: var(--s-5);
}

/* ⑥ 弃权表 —— 关于我们·边界。委托人指示五「不要死板的 123456 排序」。
      这三条是**并列的否定**,不是流程:1→2→3 的编号会把「同时成立的三条底线」
      读成「先做一再做二」。而且三句原文本来就都以「不」起头 —— 那个「不」才是
      这一段真正的强调物,所以把它拎出来当版面主角,编号整个撤掉。
      左规用 danger 而非 accent:这是拒做,不是承诺(.pledge 才是承诺,用 accent)。 */
.vows { border-block-start: 1px solid var(--c-border-strong); }
.vow {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--c-divider);
}
/* 这一行是 h3(「不」必须在标题内,否则读屏把三条底线读成反面),要清掉标题默认字号与外边距 */
.vow__line {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-4); align-items: baseline;
  margin: 0; font-size: inherit; font-weight: inherit;
}
.vow__no {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1;
  color: var(--c-danger-600); font-feature-settings: normal;
}
.vow__what {
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.45;
  color: var(--c-text);
}
.vow__body { color: var(--c-text-2); line-height: 1.75; max-width: var(--measure); }

/* ⑦ 问答表 —— 关于我们·治理结构。同样撤编号,但换的形式不同:
      这一段的导语自己就说「治理结构要答三件事」,所以它的天然形式是**问→答**,
      不是三张并列卡。方块/圆点 + 蓝/青的分法不是新发明,逐字沿用 .compare__list
      的语义标记:方=智能体按规则执行,圆=具名的人裁定。 */
.qa { border-block-start: 1px solid var(--c-border-strong); }
.qa__item {
  display: grid; gap: var(--s-3);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--c-divider);
}
.qa__q {
  display: grid; grid-template-columns: var(--icon-sm) 1fr;
  gap: var(--s-3); align-items: baseline;
  font-size: var(--fs-h3); font-weight: 600; color: var(--c-text);
  margin: 0;
}
.qa__q::before {
  content: ""; inline-size: .5em; block-size: .5em;
  border: 1.5px solid var(--c-primary-600);
  translate: 0 -.1em;
}
.qa__item--human .qa__q::before {
  border-color: var(--c-accent-500); border-radius: var(--r-pill);
}
.qa__a { color: var(--c-text-2); line-height: 1.75; max-width: var(--measure); }

@media (min-width: 720px) {
  .vow { grid-template-columns: 1fr; }
  .vow__body { padding-inline-start: calc(var(--fs-h1) + var(--s-4)); }
  .qa__a { padding-inline-start: calc(var(--icon-sm) + var(--s-3)); }
}

/* ⑧ 主张—对照两栏 —— 关于我们·落地方式。不新造组件,只是给已有的 .rows 加一个两栏变体:
      这三条原文本来就写成「主张,对照」的对偶句(…分层运行,每层有唯一真相源)。
      版面照那个逗号切开即可 —— 一个字没改,而编号没有了,对偶本身成了版式。

      ⚠️ .rows--pair 只管两栏排法,不带任何记号。方/圆记号在 .rows--roles 上,
      它与 .qa、.flow、.tenets 同源:方=智能体按规则执行,圆=具名的人裁定。
      两者分开是因为站上 7 个两栏节里只有 3 个真的在说「谁执行」——
      另外 4 个是名词→说明,挂上方块等于宣称有个智能体在执行「合作期内」。
      一个记号一半有意义一半没有,它就一个意义都没有了,连带把那 3 处正确的也废掉。
      加 .rows--roles 之前先问:这一条是不是真有执行者? 不是就别加。 */
.rows--roles .row__name {
  display: grid; grid-template-columns: var(--icon-sm) 1fr;
  gap: var(--s-3); align-items: baseline;
}
.rows--roles .row__name::before {
  content: ""; inline-size: .5em; block-size: .5em;
  border: 1.5px solid var(--c-primary-600);
  translate: 0 -.1em;
}
.rows--roles .row--human .row__name::before {
  border-color: var(--c-accent-500); border-radius: var(--r-pill);
}
.rows--pair .row { padding-block: var(--s-5); }
.rows--pair .row__state { font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .rows--pair .row { grid-template-columns: 1.5fr 1fr; align-items: baseline; }
  .rows--pair .row__state { justify-self: start; }
}

/* ⑨ 标签—正文定义表 —— 市场·拆解结构。四段各有一个 4 字标签(来源与时点 / 受影响品种 /
      历史同类 / 不确定项)。有标签就不需要编号:标签本身已经是索引,01-04 只是重复它。
      竖排两栏能让四个标签在左侧对齐成一列,眼睛一扫就知道「拆成哪四段」——
      这是 4 张并排卡做不到的,卡片把标签埋在各自的框里。 */
.split { border-block-start: 1px solid var(--c-border-strong); }
.split__item {
  display: grid; gap: var(--s-2);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--c-divider);
}
.split__label {
  margin: 0;
  display: grid; grid-template-columns: var(--icon-sm) 1fr;
  gap: var(--s-3); align-items: baseline;
  font-size: var(--fs-h4); font-weight: 600; color: var(--c-text);
}
.split__label::before {
  content: ""; inline-size: .5em; block-size: .5em;
  border: 1.5px solid var(--c-primary-600);
  translate: 0 -.1em;
}
.split__item--human .split__label::before {
  border-color: var(--c-accent-500); border-radius: var(--r-pill);
}
.split__body { margin: 0; color: var(--c-text-2); line-height: 1.75; max-width: var(--measure); }

@media (min-width: 860px) {
  .split__item { grid-template-columns: minmax(160px, 1fr) 3fr; gap: var(--s-6); align-items: baseline; }
}

/* ⑩ 纲领三栏 —— 运作方式·约束。这三条是**同时成立的约束**,不是先后步骤,
      所以既不能编号、也不该做成带框的卡(框会把它们读成三个并列的功能点)。
      顶部一道粗规 + 放大的四字标题 = 条款的排版语言:规在上,条在下,像章程不像产品页。
      粗规用 primary,人裁定那一条换 accent —— 和全站方/圆蓝/青的分法同一套。 */
.tenets { display: grid; gap: var(--s-6); }
.tenet { padding-block-start: var(--s-4); border-block-start: 3px solid var(--c-primary-600); }
.tenet--human { border-block-start-color: var(--c-accent-500); }
.tenet__title {
  margin: 0 0 var(--s-3); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: .02em; color: var(--c-text);
}
.tenet__body { margin: 0; color: var(--c-text-2); line-height: 1.75; }

@media (min-width: 860px) {
  .tenets { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}


/* ══════════════════════════════════════════════════════════════════
   § 21 · 版式与信息层级修复(2026-09-19 复核落地)
   来源:site/_review/ux-layout-review/复核.md + proposed.css
   每条前面那句是「为什么」。不新建组件、不定义颜色 token、不含颜色字面量。
   § G(缺眉标时抬高标题基线)未采纳 —— 改为直接补上那三个节的眉标文案。
   § I 已由复核人自行撤回(.duo 栏比实测推翻,现状即最优解)。
   ══════════════════════════════════════════════════════════════════ */

/* ── § A · 锚点跳转不再把节标题埋进固定头部 ──
   实测固定头部 1280 下 173px、375 下 145px,而 .section 顶内边距只有 96 / 64px,
   全站 scroll-margin 零命中 —— 4 页 17 个锚点目标跳转后眉标 34/34 全被遮。 */
:root {
  /* 与 --risk-h / --header-h 同一套写法:CSS 给默认值,JS 可写实测值。实测 51px,取 4px 档 52px。 */
  --anchornav-h: 52px;
}

main > section[id] {
  scroll-margin-block-start: calc(var(--risk-h) + var(--header-h) + var(--s-5));
}

/* 锚点导航只在 ≥768 下 sticky,窄屏随页滚走,不计入遮挡 */
@media (min-width: 768px) {
  body:has(.anchornav) main > section[id] {
    scroll-margin-block-start: calc(var(--risk-h) + var(--header-h) + var(--anchornav-h) + var(--s-5));
  }
}


/* ── § B · 把靠内联 style 撑着的间距落进类 ──
   预览代理 CSP 会剥掉 style=,剥后这 8 处塌成 0px(about 整页矮 173px)。 */
.rows + .body,
.deflist + .body,
.vows + .body,
.qa + .body,
.split + .body,
.tenets + .body,
.cards + .body,
.compare + .body,
.figure + .body {
  margin-block-start: var(--s-6);
}

/* .btn-note 自带的 12px 是给「按钮下面那行小字」的。当它承担 .slot「此栏留空」并
   紧跟一张 .rows 时,12px 会让它被读成表格的第三行 —— 隔开才看得出是另一件事。 */
.rows + .btn-note { margin-block-start: var(--s-6); }

/* .duo 是唯一没进上面那张兄弟表的块组件 */
.duo + .btn-row { margin-block-start: var(--s-7); }

.drawer__row + .drawer__row { margin-block-start: var(--s-3); }
.footer ul + .muted { margin-block-start: var(--s-3); }
.success-panel .muted { margin-block-start: var(--s-4); }
.alert--info { margin-block-end: var(--s-6); }


/* ── § C · 节标题与导语之间给出 16px ──
   15 个节里 h2(36px/行高 42.48)与 p.body.lead(18px/行高 31.5)贴到 0px。
   全站只有 index#services 用 .sub 才靠自带 margin 拿到 16px —— 同槽位两种做法。 */
.section__head h2 + .body,
.section__head .h2 + .body {
  margin-block-start: var(--s-4);
}


/* ── § D · .figure 补相邻间距 ──
   八个块组件都有兄弟规则,唯独 .figure 没有,4 处与邻块贴到 0px:
   清单收尾横线与图框上边框重合成一条,读者分不清那条线属于谁。 */
* + .figure,
.figure + * {
  margin-block-start: var(--s-7);
}

.figure > :first-child { margin-block-start: 0; }


/* ── § E · 节内留白分两档 ──
   实测 27 个节的「头→身」与「身内同级块」全部 40px。只有一个间距值等于没有
   间距语言,读者无法靠留白判断从属还是并列。头→身抬到 48px,身内保持 40px。

   2026-09-21:这条当时被 pages-v1 / home-v4 的 `.section .section__head`(0,2,0)
   压成 64px,五页与首页都没吃到 —— 写着,但量不到。现在它的值由 --sec-head-gap 带,
   桌面档正好是 §E 当初要的 48px,窄屏落到 40px。不要再写死。 */


/* ── § F · .rows--pair 词条列收窄 ──
   1.5fr:1fr 让词条列占 699px,而最长词条文字只有 404px,19 行里词条与说明之间
   空出 359–599px(中位 519)。同表里 .split 做同一件事用的是 1fr:3fr。 */
@media (min-width: 768px) {
  .rows--pair .row {
    grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
    column-gap: var(--s-6);
  }
}


/* ── § H · 深色档给图框与卡片一条看得见的边 ──
   深色档 --c-border = --c-divider = --c-surface,描边对卡面对比度正好 1.00,整条看不见。
   设计规矩要的是「深灰背景 + 极细白色半透明边框」,所以这里用半透明白而不是不透明灰:
   14% 白压在卡面 #1B2A33 上实解 rgb(59,72,80),对卡面 1.55、对画布 1.78 —— 看得见,
   又不会把边描成一条实线。原先那版 color-mix(#3E4F57) 对比度更高但**是不透明灰**,不合规矩。 */
[data-theme="dark"] .figure,
[data-theme="dark"] .card,
[data-theme="dark"] .compare__col {
  border-color: rgba(255, 255, 255, .14);
}

/* .usp__item / .crest 的四条边本来也吃 --c-border(= 卡面同值,整条不存在)。
   只改左右与下:它们的上边是蓝色语义强调条,不能被抹掉。 */
[data-theme="dark"] .usp__item,
[data-theme="dark"] .crest {
  border-inline-color: rgba(255, 255, 255, .14);
  border-block-end-color: rgba(255, 255, 255, .14);
}

/* .card--dashed 本来就用 --c-border-strong,别被上面盖掉 */
[data-theme="dark"] .card--dashed { border-color: var(--c-border-strong); }

/* 🔴 智能体/人 的那条顶部语义强调条**不是装饰**,与图例同一套口径,
   上面那条 border-color 会把它一并刷成白,必须在这里补回来。 */
[data-theme="dark"] .card--agent,
[data-theme="dark"] .compare__col--agent { border-block-start-color: var(--c-primary-600); }
[data-theme="dark"] .card--human,
[data-theme="dark"] .compare__col--human { border-block-start-color: var(--c-accent-500); }


/* ── § J · 节头里导语右缘与标题右缘对齐 ──
   实测同一节头三条右缘:eyebrow 1208、h2 792(20em×36px=720)、
   p.body.lead 844.2(68ch=772.17)。导语比标题多伸 52.2px,读成「属于下面那块」。
   40em × 18px = 720px,与 h2 同宽。--measure 本身不动,只在节头里收。
   故意不含 .sub:index#services 右缘 786,比 h2 短 6px、方向相反,
   抹平要写 34.2857em —— 不为 6px 发明第四个数,留作已知残差。 */
.section__head .body { max-width: 40em; }


/* ── § K · .split__label 用 <h3> 时归零默认外边距 ──
   四页的 .split 统一成 markets 那套 ul/li + h3.split__label(h3 进文档大纲,
   读屏软件能按标题逐条跳;p 不进),h3 的浏览器默认 margin 要压掉。 */
h3.split__label { margin-block: 0; }


/* ── § L · 把「说明 → 被说明物」定成 32px 一档 ──
   how-it-works#path 的 .flow-key → .flow 是 32px,同节其它是 40px,
   32 在那页只出现一次像随手给的。这里命名下来:说明性小字与它说明的对象
   之间 32px(比同级块的 40px 近一档),.figure__keys 走同一档。 */
.flow-key { margin-block-end: var(--s-6); }
.figure__keys { margin-block-start: var(--s-6); }


/* ── § M · 固定头部默认高度对上实测值,首屏不再跳 ──
   默认 44/64,实测 1280 下 50/72、375 下 73/72。main.js 要等 JS 跑完才写回实测值,
   在那之前整页按 108px 排,JS 一跑内容下移 14(1280)–37px(375)。
   取 4px 尺度上最近档,把这一跳压到 2–25px。 */
:root {
  --risk-h: 0px;
  --header-h: 72px;
}

/* ═══ 页脚法定文本区 · 全站六页共用 ═══════════════════════════════════
   2026-09-21 从 home-v2.css 搬到这里。搬的原因:委托人要求「底部 footer
   所有页面都一样」,而这几条原本只有首页评审档加载得到,另外五页拿不到,
   于是同一段 HTML 在五页上是裸的。页脚是站体家具,规则就该住在站体样式表。
   ⚠️ 必须排在本文件 :996 那条 .footer__cols 4 栏规则之后 —— 靠的是位置,不是权重。 */
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(5, 1fr); }
}

.footer__legals {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--c-border);
  border-block-end: 1px solid var(--c-border);
}
.footer__legalgrid {
  display: grid;
  gap: var(--s-5) var(--s-7);
}
/* 通栏的风险警示 + 三节披露 ⇒ 三栏。两栏会让第三节独占一行、右半边空着。
   列数跟着内容条数定,节数一改就要回头看这条。 */
@media (min-width: 900px) {
  .footer__legalgrid { grid-template-columns: repeat(3, 1fr); }
}
.footer__legalsec { display: grid; gap: var(--s-2); }
.footer__legaltitle {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--c-text-2);
}
.footer__legalsec p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

/* 风险警示:合规绑定档,不得降到 --fs-sm。
   --fs-risk 必须 = --fs-body 且字重 700,依据 10-设计系统-tokens.md §2.4
   (塞舌尔 S.I. 118/2024 附表 7(7)(a)(b):字号至少等于主导字号、须粗体)。
   前景色刻意复用 --c-text / --c-text-2 / --c-text-3,不另调更浅的灰:
   这几对已在对比度清单里,新调一个色等于新增一对没被测过的组合。 */
.footer__legalsec--risk { grid-column: 1 / -1; }
.footer__legalsec--risk .footer__legaltitle { color: var(--c-text); }
.footer__legalsec--risk p {
  font-size: var(--fs-risk);
  font-weight: 700;
  line-height: 1.65;
  color: var(--c-text);
  max-width: var(--measure);
}

/* ══════════════════════════════════════════════════════════════════
   r24 · 卡片组内的横向对齐(2026-09-23,Yannie 第 4、6 条)
   一组并排卡片里,同一个元素必须落在同一条水平线上。
   卡片本身靠 grid 的 stretch 已经等高了,错位的是**卡内**:
   正文长短不一 ⇒ 按钮跟着正文走,有的高有的低。
   ══════════════════════════════════════════════════════════════════ */

/* ① 卡内按钮一律沉到卡底。.card 已是 flex column,auto 外边距吃掉剩余空白。
   只作用于卡片的**直接**子级 .btn-row —— 段落级 .btn-row 不受影响。 */
.card > .btn-row { margin-block-start: auto; }

/* ② 卡内各行共用一套行轨 —— 指标条那种「小标签 / 大数字 / 说明」三段式,
   小标签折成两行时,它下面的大数字就比邻卡低一行。subgrid 让一排卡共用行轨,
   每条轨按该排里最高的那格定高,于是三段各自对齐。
   （站上 .rows 已经在用同一手法,见 site.css 的 ≥768 段。）
   .ovp-imp 是绝对定位,不是网格项,不占行。 */
@supports (grid-template-rows: subgrid) {
  .cards--4 > .card:has(> .card__num) {
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
  }
  .cards--4 > .card:not(:has(> .card__num)) {
    display: grid; grid-template-rows: subgrid; grid-row: span 2;
  }
}