/* ═══ r29 · 「为什么选择我们」四步带:从纯文字改成卡面 + 结构图 ═══════════
   2026-09-24 委托人:「這個頁面也太素了,都是文字,根本不想看」。

   做法与边界(照抄这一节原有的视觉语言,不另起一套):
   - 图形走 §信任和合规 已有的 .ovp 抽象路线 —— 结构关系,不是图标库。
   - ⛔ 一个字、一个数字都不进图:既不用做 i18n,也避开「产品图上不许出现编造数值」。
   - ⛔ 不画有方向的走势:四块高度是打乱的(26/34/20/30),留痕四行是等高的。
     理由见 2026-09-15 的红线——左低右高 = 暗示收益曲线,交易平台官网上不许出现。
   - 色值全部取自 tokens,一个都没新造。--c-accent-500 仍然只给「具名问责」一处。
   本文件只加,不改 home-v6.css 里那一节的既有规则(轴线与节点仍归它管)。 */

.hflow__card {
  block-size: 100%;
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 24%, transparent);
}
.hflow__card > .hflow__title { margin: 0; }
.hflow__card > .hflow__body { margin: 0; }

/* 图区:卡面内再压一层更暗的底,让插图和正文分开,不然又糊成一片 */
.hflow__viz {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background:
    linear-gradient(142deg,
      color-mix(in srgb, var(--c-primary-600) 10%, var(--c-surface)) 0%,
      var(--c-surface-sunken) 78%);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 16%, transparent);
}
.hflow__viz svg { display: block; inline-size: 100%; block-size: auto; }

.hflow__step--human .hflow__card {
  border-color: color-mix(in srgb, var(--c-accent-500) 34%, transparent);
}
.hflow__step--human .hflow__viz {
  background:
    linear-gradient(142deg,
      color-mix(in srgb, var(--c-accent-500) 11%, var(--c-surface)) 0%,
      var(--c-surface-sunken) 78%);
}

/* 桌面:卡面顶端要给上方那条轴线和节点让出位置(节点归 home-v6.css 画) */
@media (min-width: 900px) {
  .hflow__step { padding-block-start: var(--s-6); }
}
/* 手机:纵向链条那条竖线在卡外侧,卡自己不再另加左内边距 */
@media (max-width: 899px) {
  .hflow__track { gap: var(--s-5); }
}

/* ── 图形笔画:只用 token,不写裸色 ────────────────────────────────── */
.wz-axis      { fill: none; stroke: var(--c-border-strong); stroke-opacity: .48; stroke-width: 1; }
.wz-line      { fill: none; stroke: var(--c-primary-600); stroke-opacity: .9; stroke-width: 2; stroke-linecap: round; }
.wz-dash      { fill: none; stroke: var(--c-border-strong); stroke-opacity: .6; stroke-width: 1.6;
                stroke-linecap: round; stroke-dasharray: 4 5; }
.wz-fill      { fill: var(--c-primary-600); fill-opacity: .58; }
.wz-fill-2    { fill: var(--c-primary-600); fill-opacity: .26; }
.wz-dim       { fill: var(--c-border-strong); fill-opacity: .26; }
.wz-acc       { fill: var(--c-accent-500); }
.wz-acc-soft  { fill: var(--c-accent-500); fill-opacity: .2; }
.wz-acc-line  { fill: none; stroke: var(--c-accent-500); stroke-width: 2; stroke-linecap: round; }