/* ══════════════════════════════════════════════════════════════════
   services-shape-r30.css — 第 30 轮 · services 页三节「各自一个形状」
   2026-09-24

   ── 上一轮做错了什么 ────────────────────────────────────────────
   r29 把 #trading / #payments / #insight / #more 四节压到同一套六列网格
   (3 上 2 下,每格 = 一条 3px 蓝顶规 + 小标题 + 一段小字)。
   「不一致」治好了,代价是四节长得一模一样 —— 读起来像小册子,不像官网。

   委托人这一轮的原话:
     「覺得純文字太乾」「有的模塊讀起來很難懂」「都是同樣的排版和樣式,
      根本不像官網,像小冊子,非常生硬死板」

   她要的不是统一,是**每节各自做好**。官网本来就该每节形状不同。

   ── 本轮的判断 ──────────────────────────────────────────────────
   全页唯一不闷的一节是 #trading,因为它下面挂着真实产品图(.dual)。
   ⇒ 有具体东西的那节就不闷。所以三节各给一件「具体东西」,
     而那件东西由这一节**实际要说的事**决定,不是装饰。

     #payments  最难懂的是「实名一致 / 不接受第三方代付代收」
                ⇒ 画一条**资金路径**:本人账户 → 本地渠道 → 交易账户 是通的,
                  第三方那条是断的。形状 = 左图右列的不对称双栏。
     #insight   最难懂的是「四段式事件解读」这五个字
                ⇒ 给一个**样例**:左边一条原始资讯的样子,右边它被拆成四段。
                  形状 = 一块横向对照面板 + 下方三条紧凑说明 + 一行边界声明。
     #more      最难懂的是「统一内核 + 策略插槽」
                ⇒ 画一张**装配图**:四类资产挂在同一条插槽带上,插槽带压在
                  同一块内核上。形状 = 全幅装配图 + 两列规格表。

   三种剪影互不相同,而颜色、字体、间距全部沿用站上既有的量。

   ── #trading 一字未动 ────────────────────────────────────────────
   本文件**不含任何 #trading 选择器**。它的五条能力卡与 .dual 产品图
   继续由 services-layout-r29.css 管,位置与结构原封不动。

   ── 硬约束(逐条对应委托)────────────────────────────────────────
   · 只做深色,无浅色分支。
   · 零十六进制色值:所有颜色取 var(--c-*),间距取 var(--s-*)。不新造 token。
   · 蓝色是点缀:品牌蓝只出现在三处**承载语义**的地方 ——
       资金路径那条「通」的主干线、样例面板「解析」那一侧的侧规、
       装配图内核块的顶规。其余一律中性深灰蓝。
       r29 给三节每张卡的 3px 蓝顶规 × 15 条,本轮全部退场。
   · 无任何有方向的走势线(判据 brand/figures/gate-no-trend.py)。
   · 中英文两版结构对齐;英文版内零中文。

   ── 回退 ────────────────────────────────────────────────────────
   删掉两个 services.html head 里引用本文件的那一行 <link>,样式全退;
   HTML 结构回退见 _bak/svc-shape-<时间戳>/(整文件覆盖即可)。
   本文件只追加,不改动任何现有文件的原行。
   ══════════════════════════════════════════════════════════════════ */


/* ── §0 · 三节公用的基调 ─────────────────────────────────────────
   只声明「这三节」的共同语汇:一条中性细规、一枚等宽序号、一个图题。
   四节之间共享颜色/字体/间距,差异只在**形状**上 —— 这是「像一个网站」
   与「像同一个模板铺四遍」的分界。 */

.page-services #payments .shape__eyebrow,
.page-services #insight  .shape__eyebrow,
.page-services #more     .shape__eyebrow {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.page-services #payments .shape__cap,
.page-services #insight  .shape__cap,
.page-services #more     .shape__cap {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}


/* ══ §1 · #payments —— 形状 A:左图右列的不对称双栏 ══════════════
   左栏一张竖向资金路径图(通路 + 被截断的第三方岔路),
   右栏五条说明竖排、等宽序号在外栏、零分隔线、零蓝色。
   读法:先看懂那条路,再读沿路的五件事。 */

.page-services #payments .fundpath {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-block-start: var(--sec-head-gap);
}

@media (min-width: 900px) {
  .page-services #payments .fundpath {
    grid-template-columns: minmax(300px, 5fr) 7fr;
    column-gap: var(--s-9);
    align-items: start;
  }
}

/* 1.1 路径图本体 —— 这是本节唯一用品牌蓝的地方 */

.page-services #payments .fpath {
  margin: 0;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
}

/* 主干:一条竖线,三个停靠点。线是「通」的那条,所以它实底、是蓝的。 */
.page-services #payments .fpath__route {
  position: relative;
  margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-7);
  list-style: none;
}

.page-services #payments .fpath__route::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: var(--c-primary-600);
}

.page-services #payments .fpath__stop {
  position: relative;
  padding-block: 0 var(--s-6);
}

.page-services #payments .fpath__stop:last-child {
  padding-block-end: 0;
}

/* 停靠点记号:方端 = 站上既有的「人 / 治理 / 具名主体」语义(--r-human) */
.page-services #payments .fpath__stop::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: calc(var(--s-7) * -1);
  inline-size: 12px;
  block-size: 12px;
  background: var(--c-primary-600);
  border-radius: var(--r-human);
}

.page-services #payments .fpath__label {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
}

.page-services #payments .fpath__hint {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* 2026-09-25 已移除:此处曾写「入金与出金走同一条路径」。委托人指出这是错的 ——
   入金走银行转账、出金走电子钱包是允许的,两者路径不必相同。真正的约束是
   「渠道须与账户持有人一致」,那句由 #payments 第 02 条承担,图上不再重复。
   ⛔ 不要再加回任何类似措辞。 */

/* 1.2 被截断的那条岔路 —— 全中性,不用红也不用蓝。
       「断」由三样东西同时说:虚线、✕、以及「不受理」四个字。
       不靠颜色单独承载语义(色盲可读)。 */

.page-services #payments .fpath__cut {
  position: relative;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-9);
}

/* 从主干延下来的一截虚线 —— 它是「本来会通到这里」的那条 */
.page-services #payments .fpath__cut::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 5px;
  inline-size: 0;
  block-size: var(--s-9);
  border-inline-start: 2px dashed var(--c-text-3);
}

/* ✕ 骑在虚线中点上,用图底色打一个洞把线截断 ——
   「断」由三样东西同时说:虚线 + 这一刀 + 「不受理」三个字。
   不让颜色单独承载语义(色盲可读),所以这里不用红色。 */
.page-services #payments .fpath__cut::after {
  content: "✕";
  position: absolute;
  inset-block-start: var(--s-5);
  inset-inline-start: -7px;
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--c-text-2);
  background: var(--c-surface);
  border-radius: 999px;
}

/* 盒子贴齐图的内容左缘(不缩进到标签栏)——
   虚线正对着盒子的上边落下来,那一刀才读得出是「这条路没通到这里」。 */
.page-services #payments .fpath__cutbox {
  margin-inline-start: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-surface-sunken);
}

.page-services #payments .fpath__cutlabel {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-text-3);
}

.page-services #payments .fpath__cutstate {
  display: inline-block;
  margin-block-start: var(--s-2);
  padding: 2px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--c-text-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-human);
}

/* 1.3 右栏:五条说明。等宽序号走外栏,没有分隔线,没有卡,没有蓝顶规。 */

.page-services #payments .fnotes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-7);
}

.page-services #payments .fnotes__item {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
}

.page-services #payments .fnotes__ix {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--c-text-3);
}

.page-services #payments .fnotes__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c-text);
}

.page-services #payments .fnotes__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-text-2);
  max-width: 34em;
}

@media (max-width: 599px) {
  .page-services #payments .fnotes__item {
    grid-template-columns: 1fr;
    row-gap: var(--s-1);
  }
}


/* ══ §2 · #insight —— 形状 B:一块横向对照面板 ═══════════════════
   左边一条原始资讯的样子,右边它被拆成四个字段。
   面板下面是三条紧凑说明 + 一行资讯边界声明。
   ⚠️ 面板里**没有任何具体品种、方向、点位、涨跌幅或收益预测** ——
      字段名是页面原文,字段内容一律排字块(示意条)。 */

.page-services #insight .parse {
  margin-block-start: var(--sec-head-gap);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
}

@media (min-width: 900px) {
  .page-services #insight .parse {
    grid-template-columns: 1fr auto 1.35fr;
    gap: var(--s-7);
    align-items: stretch;
    padding: var(--s-7);
  }
}

.page-services #insight .parse__tag {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--c-text-3);
}

/* 2.1 左:一条原始资讯的样子。排字块,不是内容。 */

/* 左侧这张卡拉满面板高度,底部那行声明用 margin-auto 钉在卡底 ——
   否则「原件比拆解短」会在面板左下角留一块空盒子。 */
.page-services #insight .parse__raw {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border);
  border-radius: 3px;
}

.page-services #insight .parse__doc {
  display: grid;
  gap: var(--s-3);
}

.page-services #insight .parse__bar {
  display: block;
  block-size: 10px;
  border-radius: 2px;
  background: var(--c-border-strong);
  opacity: .34;
}

/* 标题档:两条粗一点、亮一点,读成「这是标题」 */
.page-services #insight .parse__bar--head {
  block-size: 15px;
  opacity: .58;
}

.page-services #insight .parse__bar--meta {
  block-size: 8px;
  inline-size: 38%;
  opacity: .26;
}

.page-services #insight .parse__bar--w90 { inline-size: 90%; }
.page-services #insight .parse__bar--w72 { inline-size: 72%; }
.page-services #insight .parse__bar--w96 { inline-size: 96%; }
.page-services #insight .parse__bar--w84 { inline-size: 84%; }
.page-services #insight .parse__bar--w60 { inline-size: 60%; }

/* 2.2 中:一枚朝右的记号。三点折线,不构成走势。 */

.page-services #insight .parse__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
}

.page-services #insight .parse__link svg {
  inline-size: 22px;
  block-size: 22px;
}

@media (max-width: 899px) {
  .page-services #insight .parse__link svg {
    transform: rotate(90deg);
  }
}

/* 2.3 右:拆成四段。这一侧是本节唯一用品牌蓝的地方(一条侧规)。 */

.page-services #insight .parse__out {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--c-primary-600);
}

@media (max-width: 899px) {
  .page-services #insight .parse__out {
    padding-inline-start: var(--s-4);
  }
}

.page-services #insight .parse__fields {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-4);
}

.page-services #insight .parse__field {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  column-gap: var(--s-3);
  align-items: start;
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--c-border);
}

.page-services #insight .parse__field:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.page-services #insight .parse__ix {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
  line-height: 1.6;
}

.page-services #insight .parse__fname {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-text);
}

.page-services #insight .parse__fbars {
  display: grid;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}

/* 声明贴在示意条旁边,不排到面板外面去当第二句图注 ——
   它说的是「这些灰条不是内容」,离灰条越近越好。 */
.page-services #insight .parse__disclaim {
  margin: auto 0 0;
  padding-block-start: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* 2.4 面板下面:三条紧凑说明。三列,不是卡,靠一条上细规分栏。 */

.page-services #insight .briefs {
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 768px) {
  .page-services #insight .briefs {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s-7);
  }
}

.page-services #insight .briefs__item {
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-border-strong);
}

.page-services #insight .briefs__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-text);
}

.page-services #insight .briefs__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* 2.5 资讯边界:一行横贯的声明,不是第五张卡。
       站上既有的 --c-accent-* 是「具名的人裁定 / 边界」那一档,沿用。 */

/* 底色用中性面,不用 --c-accent-50 那块青底:整条横贯的色带在这一页上
   就是委托人说的「顏色也太過了」。边界的语义由左侧那道 3px 青规承担,
   一条线足够,不需要一整块面。 */
.page-services #insight .boundary {
  margin-block-start: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border-inline-start: 3px solid var(--c-accent-700);
  border-radius: 0 3px 3px 0;
  display: grid;
  gap: var(--s-2);
}

@media (min-width: 900px) {
  .page-services #insight .boundary {
    grid-template-columns: 12em 1fr;
    column-gap: var(--s-6);
    align-items: baseline;
  }
}

.page-services #insight .boundary__title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-text);
}

.page-services #insight .boundary__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}


/* ══ §3 · #more —— 形状 C:全幅装配图 + 两列规格表 ════════════════
   上:四类资产 → 接入插槽 → 同一块内核,三层压在一起,
      「共用同一个内核」这件事一眼看得出来。
   下:五条来源排成两列规格表(左标题 / 右说明),像规格页不像卡片墙。 */

.page-services #more .asm {
  margin: var(--sec-head-gap) 0 0;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
}

/* 3.1 顶层:四类资产 */

.page-services #more .asm__assets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

@media (min-width: 720px) {
  .page-services #more .asm__assets {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }
}

.page-services #more .asm__asset {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-border-strong);
  border-radius: 3px;
}

/* 3.2 四根接脚:把资产挂到插槽带上。纯竖线,无方向含义。 */

.page-services #more .asm__pins {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  block-size: var(--s-5);
}

@media (min-width: 720px) {
  .page-services #more .asm__pins {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }
}

.page-services #more .asm__pin {
  justify-self: center;
  inline-size: 0;
  block-size: 100%;
  border-inline-start: 1px solid var(--c-border-strong);
}

/* 3.3 中层:插槽带。虚线上缘 = 「可插拔」;里面五个插槽名。 */

.page-services #more .asm__slots {
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface-subtle);
  border: 1px dashed var(--c-border-strong);
  border-radius: 3px;
}

.page-services #more .asm__slotlabel {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--c-text-3);
}

/* 五个插槽在宽屏上等分铺满整条带 —— 挤在左边一半会读成「一串标签」,
   铺满才读成「一条插槽轨」,而那正是这张图要说的事。 */
.page-services #more .asm__slotlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

@media (min-width: 720px) {
  .page-services #more .asm__slotlist {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-3);
  }
}

.page-services #more .asm__slot {
  padding: var(--s-2) var(--s-3);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 2px;
}

/* 3.4 底层:内核。整张图里唯一的品牌蓝(一条顶规),因为它是这节的论点。 */

.page-services #more .asm__joint {
  block-size: var(--s-4);
  inline-size: 0;
  margin-inline: auto;
  border-inline-start: 1px solid var(--c-border-strong);
}

.page-services #more .asm__core {
  padding: var(--s-5);
  text-align: center;
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-border-strong);
  border-block-start: 2px solid var(--c-primary-600);
  border-radius: 3px;
}

.page-services #more .asm__coretitle {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-text);
}

.page-services #more .asm__corebody {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}

/* 3.5 下:五条来源排成规格表 */

.page-services #more .spec {
  margin: var(--s-8) 0 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-services #more .spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-block-start: 1px solid var(--c-border);
}

.page-services #more .spec__row:last-child {
  border-block-end: 1px solid var(--c-border);
}

@media (min-width: 768px) {
  .page-services #more .spec__row {
    grid-template-columns: 15em 1fr;
    column-gap: var(--s-8);
    align-items: baseline;
  }
}

.page-services #more .spec__key {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c-text);
}

.page-services #more .spec__val {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-text-2);
  max-width: 44em;
}


/* ── §4 · 节内收尾件的间距(沿用 r29 的刻度,不新造)───────────── */

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

.page-services #insight  .boundary + .btn-row,
.page-services #more     .spec + .btn-row {
  margin-block-start: var(--s-8);
}


/* ── §5 · 动效克制 ──────────────────────────────────────────────
   站上 .reveal 由 main.js 驱动。三张图不挂 .reveal:
   它们是节的主体,不该在滚动到位之前是空的。 */

@media (prefers-reduced-motion: reduce) {
  .page-services #payments .fpath,
  .page-services #insight  .parse,
  .page-services #more     .asm {
    transition: none;
  }
}