/* ═══ r41 · 服务页「支付能力」换新文案 + 重排 + 新资金路径图(2026-09-29)═══
   新文案多了一条旧图画不出来的事:加密货币等去中心化支付走「补充身份核验」。
   所以旧的「一条竖轨三站」换成一张横向资金路径图:
     本人 ─┬─ 本地支付渠道(须与持有人一致)──┬─ 大额与异常审查 ── Retu 交易账户
           └─ 去中心化支付(补充身份核验)────┘
     第三方 ── 代付 / 代收 ✕ 不受理
     └ 底带:支付风险监控,持续监测三项
   图上的 01 / 02 / 03 / 05 小标与下方五张卡的序号一一对应,先看图、再按号读卡。
   版面:图整宽在上,五张卡在下(宽屏 3 + 2,下排两张加宽),不再左图右列。
   卡面按官网设计体系 v1:深灰底 + 极细白色半透明边框,不用投影;卡不可点,不加悬停。
   正交连线、无箭头、无斜段、无渐变走势(gate-no-trend 放行正交路由)。
   撤销 = 两页恢复 retu-home-v5/_bak/pay-r41-<时间戳> 里的备份(markup 已换,只删这一行 link 不够)。 */

.page-services #payments .paylay {
  margin-block-start: var(--sec-head-gap, var(--s-8));
  display: grid;
  gap: var(--s-6);
}

/* ── 图的底:与 r31 同一套「纹理底」—— 细网格 + 两道极缓的光 ── */
.page-services #payments .pflow {
  margin: 0;
  padding: var(--s-6) var(--s-5);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background-color: var(--c-surface);
  background-image:
    radial-gradient(112% 82% at 4% -14%,
      color-mix(in srgb, var(--c-text-3) 11%, transparent) 0, transparent 58%),
    radial-gradient(82% 68% at 106% 114%,
      color-mix(in srgb, var(--c-primary-500) 14%, transparent) 0, transparent 64%),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--cg-ink, var(--c-primary-500)) 10%, transparent) 0 1px,
      transparent 1px var(--cg-fine, 56.57px)),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--cg-ink, var(--c-primary-500)) 10%, transparent) 0 1px,
      transparent 1px var(--cg-fine, 56.57px));
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
@media (min-width: 1000px) {
  .page-services #payments .pflow { padding: var(--s-7) var(--s-8) var(--s-7); }
}

.page-services #payments .pflow .shape__eyebrow { margin: 0 0 var(--s-5); }

/* ── 节点(玻璃牌)── */
.page-services #payments .pflow__node {
  position: relative;
  padding: var(--s-4) var(--s-5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background-color: color-mix(in srgb, var(--c-canvas) 30%, var(--c-surface));
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .page-services #payments .pflow__node {
    background-color: color-mix(in srgb, var(--c-canvas) 30%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
            backdrop-filter: blur(14px) saturate(116%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .page-services #payments .pflow__node {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: color-mix(in srgb, var(--c-canvas) 30%, var(--c-surface));
  }
}

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

/* 终点:资金落到的地方 —— 全图唯一一块蓝面 */
.page-services #payments .pflow__node--dest {
  border-color: color-mix(in srgb, var(--c-primary-500) 55%, transparent);
  background-color: color-mix(in srgb, var(--c-primary-600) 16%, var(--c-surface));
}
.page-services #payments .pflow__node--dest .pflow__label { font-size: var(--fs-h4); }

/* 序号小标:与下方卡片的序号同一枚记号 */
.page-services #payments .pflow__tag,
.page-services #payments .pnotes__ix {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .04em;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--c-primary-500);
  border: 1px solid color-mix(in srgb, var(--c-primary-500) 42%, transparent);
  background: color-mix(in srgb, var(--c-primary-500) 8%, transparent);
}
.page-services #payments .pflow__node > .pflow__tag { margin-block-end: var(--s-2); }

/* 通道上的核验条件 */
.page-services #payments .pflow__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--c-text-2);
  border: 1px solid rgba(255, 255, 255, .16);
}
.page-services #payments .pflow__chip .pflow__tag { padding: 3px 5px; font-size: 10px; }
.page-services #payments .pflow__chip--hi {
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-primary-500) 50%, transparent);
  background: color-mix(in srgb, var(--c-primary-500) 12%, transparent);
}

/* ── 被切断的那一行:第三方 → 代付 / 代收 ✕ 不受理(全中性,不用红)── */
.page-services #payments .pflow__node--cutsrc,
.page-services #payments .pflow__lane--cut .pflow__node {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .22);
  background-color: color-mix(in srgb, var(--c-canvas) 55%, var(--c-surface));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-services #payments .pflow__node--cutsrc .pflow__label,
.page-services #payments .pflow__lane--cut .pflow__label { color: var(--c-text-3); }

.page-services #payments .pflow__lane--cut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.page-services #payments .pflow__x {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: 36px;
  font-size: 13px;
  line-height: 1;
  color: var(--c-text-2);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-human, 4px);
  background: var(--c-surface);
}
.page-services #payments .pflow__x::before {
  content: "";
  position: absolute;
  inset-inline-end: 100%;
  inset-block-start: 50%;
  inline-size: calc(36px + var(--s-3));
  border-block-start: 2px dashed color-mix(in srgb, var(--c-text-3) 70%, transparent);
}
.page-services #payments .pflow__state {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--c-text-2);
  padding: 3px var(--s-2);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-human, 4px);
}

/* ── 底带:支付风险监控,罩住整条路径 ── */
.page-services #payments .pflow__watch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-block-start: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c-primary-500) 34%, transparent);
  background: color-mix(in srgb, var(--c-primary-500) 7%, transparent);
}
.page-services #payments .pflow__watch .pflow__label { display: inline; }
.page-services #payments .pflow__watchnote {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.page-services #payments .pflow__watchitems {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-inline-start: auto;
}
.page-services #payments .pflow__watchitems > span {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ── 连线:主路蓝实线,切断那条中性虚线 ── */
.page-services #payments .pflow__wire { position: relative; }
.page-services #payments .pflow__wire::before,
.page-services #payments .pflow__wire::after,
.page-services #payments .pflow__lane--a::before,
.page-services #payments .pflow__lane--b::before,
.page-services #payments .pflow__lane--a::after,
.page-services #payments .pflow__lane--b::after {
  content: "";
  position: absolute;
  border-color: var(--c-primary-600);
  border-style: solid;
  border-width: 0;
}
.page-services #payments .pflow__lane--a,
.page-services #payments .pflow__lane--b { position: relative; }

/* ═ 宽屏:横向流程 ═ */
@media (min-width: 1000px) {
  .page-services #payments .pflow__grid {
    display: grid;
    grid-template-columns:
      minmax(0, .9fr) 44px minmax(0, 1.35fr) 44px minmax(0, 1.05fr) 44px minmax(0, .9fr);
    grid-template-rows: 1fr 1fr auto;
  }
  .page-services #payments .pflow__node--src    { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  .page-services #payments .pflow__wire--split  { grid-area: 1 / 2 / 3 / 3; }
  .page-services #payments .pflow__lane--a      { grid-area: 1 / 3 / 2 / 4; }
  .page-services #payments .pflow__lane--b      { grid-area: 2 / 3 / 3 / 4; }
  .page-services #payments .pflow__wire--join   { grid-area: 1 / 4 / 3 / 5; }
  .page-services #payments .pflow__node--review { grid-area: 1 / 5 / 3 / 6; align-self: center; }
  .page-services #payments .pflow__wire--run    { grid-area: 1 / 6 / 3 / 7; }
  .page-services #payments .pflow__node--dest   { grid-area: 1 / 7 / 3 / 8; align-self: center; }
  .page-services #payments .pflow__node--cutsrc { grid-area: 3 / 1 / 4 / 2; }
  .page-services #payments .pflow__wire--cut    { grid-area: 3 / 2 / 4 / 3; }
  .page-services #payments .pflow__lane--cut    { grid-area: 3 / 3 / 4 / 8; }
  .page-services #payments .pflow__node--cutsrc,
  .page-services #payments .pflow__wire--cut,
  .page-services #payments .pflow__lane--cut    { margin-block-start: var(--s-6); }

  /* 两条通道各占一行、上下留缝;行等高 ⇒ 两条通道中线恰在 25% / 75% */
  .page-services #payments .pflow__lane--a,
  .page-services #payments .pflow__lane--b { padding-block: var(--s-2); display: flex; }
  .page-services #payments .pflow__lane--a > .pflow__node,
  .page-services #payments .pflow__lane--b > .pflow__node { flex: 1; }

  /* 分叉:本人 → 两条通道 */
  .page-services #payments .pflow__wire--split::before {
    inset-inline-start: 50%; inset-block: 25%; border-inline-start-width: 2px; margin-inline-start: -1px;
  }
  .page-services #payments .pflow__wire--split::after {
    inset-inline: 0 50%; inset-block-start: 50%; border-block-start-width: 2px; margin-block-start: -1px;
  }
  .page-services #payments .pflow__lane--a::before,
  .page-services #payments .pflow__lane--b::before {
    inset-inline: -22px 100%; inset-block-start: 50%; border-block-start-width: 2px; margin-block-start: -1px;
  }
  /* 汇合:两条通道 → 审查 */
  .page-services #payments .pflow__lane--a::after,
  .page-services #payments .pflow__lane--b::after {
    inset-inline: 100% -22px; inset-block-start: 50%; border-block-start-width: 2px; margin-block-start: -1px;
  }
  .page-services #payments .pflow__wire--join::before {
    inset-inline-start: 50%; inset-block: 25%; border-inline-start-width: 2px; margin-inline-start: -1px;
  }
  .page-services #payments .pflow__wire--join::after {
    inset-inline: 50% 0; inset-block-start: 50%; border-block-start-width: 2px; margin-block-start: -1px;
  }
  .page-services #payments .pflow__wire--run::before {
    inset-inline: 0; inset-block-start: 50%; border-block-start-width: 2px; margin-block-start: -1px;
  }
  /* 第三方那条:中性虚线 */
  .page-services #payments .pflow__wire--cut::before {
    inset-inline: 0; inset-block-start: 50%; margin-block-start: -1px;
    border-block-start: 2px dashed color-mix(in srgb, var(--c-text-3) 70%, transparent);
  }
  .page-services #payments .pflow__lane--cut .pflow__node { min-inline-size: 0; }
}

/* ═ 窄屏:竖向流程,两条通道并排(≥560)或上下(<560)═ */
@media (max-width: 999.98px) {
  .page-services #payments .pflow__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-4);
  }
  .page-services #payments .pflow__grid > * { grid-column: 1 / -1; }
  .page-services #payments .pflow__lane--a { grid-column: 1 / 2; display: flex; }
  .page-services #payments .pflow__lane--b { grid-column: 2 / 3; display: flex; }
  .page-services #payments .pflow__lane--a > .pflow__node,
  .page-services #payments .pflow__lane--b > .pflow__node { flex: 1; }

  .page-services #payments .pflow__wire { block-size: 28px; }
  .page-services #payments .pflow__wire--split::before,
  .page-services #payments .pflow__wire--join::before,
  .page-services #payments .pflow__wire--run::before {
    inset-inline-start: 50%; margin-inline-start: -1px; border-inline-start-width: 2px;
  }
  .page-services #payments .pflow__wire--split::before { inset-block: 0 50%; }
  .page-services #payments .pflow__wire--join::before  { inset-block: 50% 0; }
  .page-services #payments .pflow__wire--run::before   { inset-block: 0; }
  /* 分叉 / 汇合的横梁落在两条通道的中线上 */
  .page-services #payments .pflow__wire--split::after {
    inset-inline: calc(25% - var(--s-4) / 4); inset-block: 50% 0;
    border-width: 2px 2px 0 2px; border-radius: 6px 6px 0 0;
  }
  .page-services #payments .pflow__wire--join::after {
    inset-inline: calc(25% - var(--s-4) / 4); inset-block: 0 50%;
    border-width: 0 2px 2px 2px; border-radius: 0 0 6px 6px;
  }
  .page-services #payments .pflow__wire--cut { block-size: 22px; }
  .page-services #payments .pflow__wire--cut::before {
    inset-inline-start: 50%; inset-block: 0; margin-inline-start: -1px;
    border-inline-start: 2px dashed color-mix(in srgb, var(--c-text-3) 70%, transparent);
  }
  .page-services #payments .pflow__node--cutsrc { margin-block-start: var(--s-6); }
  .page-services #payments .pflow__lane--cut { justify-content: center; }
  .page-services #payments .pflow__lane--cut .pflow__node { flex: 1 1 100%; text-align: center; }
  .page-services #payments .pflow__x { margin-inline-start: 0; }
  .page-services #payments .pflow__x::before { display: none; }
  .page-services #payments .pflow__node--src,
  .page-services #payments .pflow__node--review,
  .page-services #payments .pflow__node--dest,
  .page-services #payments .pflow__node--cutsrc { text-align: center; }
  .page-services #payments .pflow__watchitems { margin-inline-start: 0; }
}
@media (max-width: 559.98px) {
  .page-services #payments .pflow__grid { grid-template-columns: minmax(0, 1fr); }
  .page-services #payments .pflow__lane--a,
  .page-services #payments .pflow__lane--b { grid-column: 1 / -1; }
  .page-services #payments .pflow__lane--a { margin-block-end: var(--s-3); }
  .page-services #payments .pflow__wire--split::after,
  .page-services #payments .pflow__wire--join::after { display: none; }
  .page-services #payments .pflow__wire--split::before,
  .page-services #payments .pflow__wire--join::before { inset-block: 0; }
}

/* ── 五张说明卡:宽屏 3 + 2(下排两张加宽),中屏 2 列,手机 1 列 ── */
.page-services #payments .pnotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 640px) {
  .page-services #payments .pnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-services #payments .pnotes__item:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .page-services #payments .pnotes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-services #payments .pnotes__item { grid-column: span 2; }
  .page-services #payments .pnotes__item:nth-child(4),
  .page-services #payments .pnotes__item:nth-child(5) { grid-column: span 3; }
}
.page-services #payments .pnotes__item {
  padding: var(--s-6);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-surface) 72%, transparent),
    color-mix(in srgb, var(--c-surface) 44%, transparent));
}
.page-services #payments .pnotes__title {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--c-text);
}
.page-services #payments .pnotes__body {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm, .9375rem);
  line-height: 1.8;
  color: var(--c-text-2);
}

/* 两条通道等高,内容少的那张(无序号小标)竖向居中,不留下半截空底 */
.page-services #payments .pflow__lane--a > .pflow__node,
.page-services #payments .pflow__lane--b > .pflow__node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* 卡内三行(序号 / 标题 / 正文)跨同排卡片共享行高:英文标题折行时同排正文仍对齐 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .page-services #payments .pnotes { row-gap: 0; }
    .page-services #payments .pnotes__item {
      display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
      margin-block-end: var(--s-5);
    }
    .page-services #payments .pnotes__ix { justify-self: start; align-self: start; }
  }
}

/* 避免末行只剩一两个字(孤字) */
.page-services #payments .pnotes__body,
.page-services #payments .pflow__hint { text-wrap: pretty; }
