/* ==========================================================================
   千岛出海 · 首页 v3
   版面结构照搬源站首页的 10 个区块；视觉沿用 design-standard.md
   （白为主调 · 红为辅色 · 黑体 · 圆角尺度 · 磨砂玻璃 · 平滑动效）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 头部：只有品牌、导航与图标按钮，不再显示电话
   （电话入口在联系页与页脚法务区，头部保持克制）
   -------------------------------------------------------------------------- */

/* 品牌 logo 不换行，避免窄屏被压变形 */
.brand { white-space: nowrap; }

/* --------------------------------------------------------------------------
   2. 区块标签：一小段红短线 + 标签文字
   源站每个区块都有 eyebrow，这里保留（它是内容不是装饰），
   但按准则把音量压低：小字、不加字距、不强制大写
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-foot);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
}

.kicker::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: var(--r-pill);
  background-color: var(--accent);
}

.kicker--on-dark { color: var(--on-deep-mid); }
.kicker--on-dark::before { background-color: var(--on-deep); }

/* --------------------------------------------------------------------------
   3. 首屏（复用 components.css 的 .hero，只改两处）
   -------------------------------------------------------------------------- */
/* 源站首屏底部是平的，卡片压在上面，所以去掉圆角 */
.hero--overlap {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 上方留白收紧：大字与其下内容整体上移，背景照片的底边也随之上移。
   只动上内边距 —— 下内边距与 .about-band 的负边距是配套的，动它会压到按钮 */
.hero {
  padding-block-start: clamp(1.25rem, 2.2vw, 2.25rem);
}

/* 品牌字标降为标识行，主标题让给中文价值主张 */
.hero__wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-foot);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  color: var(--ink-3);
}

.hero__wordmark span:first-child {
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
}

/* 窄屏没有横向余量：改成上下渐隐 —— 文字所在的上半段几乎全白，
   但把首屏留高一些，让照片在按钮下方仍有一整条可见的横向画面，
   否则流量最大的尺寸上会完全丢掉「目的地」的视觉冲击 */
@media (max-width: 767px) {
  .hero--overlap { min-height: 32rem; }

  .hero__veil {
    background-image: linear-gradient(180deg,
      var(--veil-2) 0%,
      var(--veil-2) 58%,
      var(--veil-3) 80%,
      var(--veil-4) 100%);
  }
}

/* --------------------------------------------------------------------------
   4. 累计成果：压在首屏底边上的玻璃卡
   -------------------------------------------------------------------------- */
.about-band {
  position: relative;
  z-index: 2;
  /* 与首屏的重叠量。原来 −72px 超过了首屏 64px 的下内边距，
     数据卡会顶到「会务案例 / 企业服务」两个按钮上；
     收到 −32px 左右后留出约 26px 净空 */
  margin-top: clamp(-3rem, -2.2vw, -1.5rem);
  padding-bottom: var(--section-y);
}

/* 窄屏首屏本身就短，再负边距会压住 CTA —— 手机上不重叠，改成正常间距 */
@media (max-width: 767px) {
  .about-band {
    margin-top: var(--space-8);
    padding-bottom: var(--section-y-tight, 4rem);
  }
}

.about-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
}

.about-card .grid { row-gap: var(--space-8); }

.about-card__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--ink);
  /* kicker 已独占上一行：标题只留底边距，行距由网格 row-gap 承担 */
  margin: 0 0 var(--space-4);
}

.about-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 30em;
  margin-bottom: var(--space-6);
}

/* 2×2 数据格：数字是展示级主角（bolder：提到 hero 字阶附近），
   标签保持安静（foot/ink-3），行距拉开形成独立节奏 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
}

.stat-cell { display: flex; flex-direction: column; gap: var(--space-2); }

/* 数据格随卡片揭示交错进入（100ms 步进）：序列传达层级，只播一次。
   卡片本身已有 data-reveal，这里只给内部格子加延迟，不另起触发器。 */
.about-card .stat-cell {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.about-card.is-visible .stat-cell { opacity: 1; transform: none; }
.about-card.is-visible .stat-cell:nth-child(2) { transition-delay: 100ms; }
.about-card.is-visible .stat-cell:nth-child(3) { transition-delay: 200ms; }
.about-card.is-visible .stat-cell:nth-child(4) { transition-delay: 300ms; }

/* 降级：关动效时格子直接可见（与 data-reveal 的两处降级同规则） */
html[data-motion="off"] .about-card .stat-cell {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .about-card .stat-cell {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.stat-cell__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-hero);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-cell__num em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: var(--fw-semi);
  color: var(--accent);
  margin-left: 0.06em;
}

.stat-cell__label { font-size: var(--fs-foot); color: var(--ink-3); }

/* 常见手机宽度（≥360px）仍排两列，只有很窄时才落成单列 */
@media (max-width: 359px) {
  .stat-cards { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. 区块标题带（左标题 + 右侧链接）
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.sec-head__main { display: flex; flex-direction: column; gap: var(--space-3); }

/* 主标题保持粗体，区块标题降为半粗：字重反差代替字号竞赛 */
.sec-head__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  color: var(--ink);
  max-width: 20em;
}

.sec-head__note {
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   6. 服务卡：图片 + 标题 + 说明
   -------------------------------------------------------------------------- */
.svc-card {
  /* 4×2 排列（站点所有者要求）：12 栏里每张占 3 栏 = 一行 4 张。
     原来 span 4（一行 3 张），8 张会排成 3+3+2。 */
  grid-column-end: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur-base) var(--ease-spring);
}

.svc-card:hover { transform: translateY(-2px); }

@media (max-width: 1023px) { .svc-card { grid-column-end: span 6; } }
@media (max-width: 639px)  { .svc-card { grid-column-end: span 12; } }

.svc-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--bg-mute);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.svc-card:hover .svc-card__media { box-shadow: var(--sh-md), 0 16px 40px -16px var(--accent-glow); border-color: var(--accent-line); }

.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.svc-card__img[data-loaded="true"] { opacity: 1; transform: scale(1); }
.svc-card:hover .svc-card__img[data-loaded="true"] { transform: scale(1.02); }

.svc-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-card:hover .svc-card__title { color: var(--accent-deep); }

.svc-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7. 优势：左右分栏（照源站构图：左为图 + 深色，右为清单）
   -------------------------------------------------------------------------- */
.key-split { padding-block: var(--section-y); }

.key-split__wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

@media (max-width: 899px) {
  .key-split__wrap { grid-template-columns: minmax(0, 1fr); }
}

.key-panel { position: relative; padding: clamp(2rem, 5vw, 4rem); }

/* 左：图 + 深色压罩 */
.key-panel--media {
  display: flex;
  align-items: flex-end;
  min-height: clamp(20rem, 34vw, 28rem);
  color: #FFFFFF;
  isolation: isolate;
}

.key-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.key-panel__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(150deg,
    rgba(10, 12, 16, 0.86) 0%,
    rgba(10, 12, 16, 0.72) 46%,
    rgba(124, 15, 22, 0.62) 100%);
}

.key-panel__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

.key-panel__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  max-width: 14em;
}

.key-panel__title--dark { color: var(--ink); }

.key-panel__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.8);
  max-width: 30em;
}

/* 右：清单 */
.key-panel--list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  background-color: var(--bg-soft);
}

.key-panel__lead {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}

.key-list { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }

.key-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background-color: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}

.key-item:hover { transform: translateX(4px); box-shadow: var(--sh-md); }

/* 红勾：唯一的红色图形标记 */
.key-item__mark {
  flex: none;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-pill);
  background-color: var(--accent-soft);
}

.key-item__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translate(-50%, -62%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   优势板块 · 右侧 01-04 编号清单（站点所有者 2026-10-04 定稿）
   --------------------------------------------------------------------------
   原来是「客户的信赖」大标 + 一句 lead + 四条勾选清单（红勾 + 一行短句）。
   现在换成四条「编号 + 标题 + 说明」，所以：
   · 换掉红勾（.key-item__mark 不再出现在这个面板里）
   · 编号用 display 字体 + tabular-nums，等宽对齐
   · 标题是真 h3（进了文档大纲），说明是小字
   · hover 位移从原来的 translateX(4px) 改成 translateY(-2px)：
     这四行比原来高得多，横向平移看着像被推出去，竖向才像「抬起」
   · 条与条之间用发丝线分隔而不是各自一张卡：四条同属一组，
     给四张卡会把这个面板切成碎片（skill 4.4：卡片只在承载层级时用）
   -------------------------------------------------------------------------- */
.key-list--num {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.key-item--num {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-weight: var(--fw-regular);
}

.key-item--num + .key-item--num { border-top: 1px solid var(--line); }

.key-item--num:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.key-item__no {
  flex: none;
  /* 编号占位宽度固定，否则 01-09 与 10 的字宽不同会让标题左右跳 */
  min-width: 2.25rem;
  padding-top: 0.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.key-item__body { min-width: 0; }

.key-item__t {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.key-item__d {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
  overflow-wrap: break-word;
}




/* --------------------------------------------------------------------------
   9. 团队卡（源站是红色面板；按准则改为白底卡片 + 红点标记）
   -------------------------------------------------------------------------- */
.team-card {
  grid-column-end: span 6;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--accent-line);
}

@media (max-width: 767px) { .team-card { grid-column-end: span 12; } }

.team-card__avatar {
  position: relative;
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background-color: var(--bg-mute);
  box-shadow: var(--sh-halo);
}

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.team-card__img[data-loaded="true"] { opacity: 1; }

.team-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.team-card__name { font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--ink); }

.team-card__role {
  font-size: var(--fs-foot);
  font-weight: var(--fw-medium);
  color: var(--accent-deep);
}

.team-card__bio {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   10. 联系（复用 .contact-card / .contact-list，仅补标题与必填星号）
   -------------------------------------------------------------------------- */
.contact-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-bottom: var(--space-5);
}

.contact-list__v--sm { font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* 邮箱这类无空格长串允许任意处断行，避免撑破卡片 */
.contact-list__v { overflow-wrap: anywhere; }

.field__req { color: var(--accent); font-weight: var(--fw-semi); }

/* --------------------------------------------------------------------------
   12. 页脚
   结构与样式统一由 components.css 的 K 节定义（品牌声明 / 搜索 / 法务行）。
   这里不再重复定义，避免两处规则互相覆盖。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. 浅底区块
   -------------------------------------------------------------------------- */
.section--tint { background-color: var(--bg-soft); }

/* --------------------------------------------------------------------------
   14. 减少动效：面板直接展开，不做高度动画
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .key-item:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. 服务业务线标签
   源站把「会务服务」与「企业服务」两条线拍平成一张六格清单，
   加一个极小标签让归属可读 —— 不改结构
   -------------------------------------------------------------------------- */
.svc-card__tag {
  align-self: flex-start;
  margin-bottom: calc(var(--space-3) * -1);
  padding: 3px var(--space-3);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  color: var(--accent-deep);
  background-color: var(--accent-soft);
}

.section--evidence .sec-head__title { color: var(--on-deep); }
.section--evidence .sec-head__note { color: var(--on-deep-lo); }
.section--evidence .kicker { color: var(--on-deep-lo); }
.section--evidence .kicker::before { background-color: #FFFFFF; }


/* --------------------------------------------------------------------------
   首页新增板块（构建注入，站点所有者 2026-10-04 确认）
   -------------------------------------------------------------------------- */


/* ==========================================================================
   合作流程 · 推进轨道（flow）
   --------------------------------------------------------------------------
   站点所有者 2026-10-04 要求重做：要有背景、圆角矩形按钮、交互特效，
   以及「进度逐步推进」的动感。

   设计判断：这是首页里唯一一块「讲顺序」的内容，所以不画成四张一样的卡片
   （skill 9.C「NO 3-column equal feature cards」），而是把四步串到一条轨道上，
   靠留白分组（skill 4.4：卡片只在承载层级时用）。轨道推进 = 这块内容
   本身在讲的事，属于 storytelling，是 skill 5「MOTION MUST BE MOTIVATED」
   允许的那一类。

   遵守的几条硬约束（都是 skill 原文，编号可查）：
   · 9.F NO generic step labels ： 所以不写 01/02/03，也不写「步骤一」。
     步骤内容本身就是标签。
   · 9.G em-dash 全禁 ： 这块一个字都没用。
   · 6.A 只动 transform / opacity ： 推进段用 scaleX / scaleY，
     绝不 anim width / height / top / left。
   · 5.D 不用 window scroll 监听 ： 推进动画由已有的 IntersectionObserver
     揭示机制（motion.js 的 data-reveal）触发，JS 只算一次圆点位置。
   · 6.B 动效必须降级 ： prefers-reduced-motion 或站点「关闭动效」开关打开时，
     取消逐拍推进、取消过渡，直接呈现完成态。
   · 4.4 Shape Consistency Lock ： 节点是「可点的步骤牌」，形态跟卡片走，
     取 --r-md（20px）；站点的 --r-pill 仍然只给 CTA 按钮与标签。
     这是一条写下来的例外规则，不是随手混用。
   · 9.F 圆点不是装饰 ： 它表示「这一步走到了没有」，是真实状态。

   无 JS 时的兜底：HTML 里第一步已带 data-on 与 aria-current，
   CSS 里 --flow-pos 默认 1（轨道满格），所以关掉 JS 也是完成态。
   ========================================================================== */

.flow {
  /* 当前推进位置 0→1。JS 按圆点的真实位置写入（桌面横向、移动纵向都靠实测，
     不用百分比公式 ： 各栏等分但格子高度不等，算式会错位）。 */
  --flow-pos: 1;
  --flow-dot: 14px;
  --flow-beat: 260ms;

  position: relative;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-color: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

/* 面板右上角一层很淡的品牌红晕，给白面板一点纵深。
   不是玻璃态（站内玻璃只保留首屏那一处），也不是霓虹外发光（9.A），
   就是 --accent-soft 的径向淡出。 */
.flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 92% at 100% 0%, var(--accent-soft), transparent 62%);
}

/* --- 轨道 ---------------------------------------------------------------
   轨道挂在 .flow__track 上，**不是 .flow 上**。
   这一点是踩过坑的：圆点相对「所属那一步的顶边」定位，轨道若相对 .flow 的
   padding 盒定位，两者就差了 .flow 的 padding-top（桌面 48px）： 圆点会整排
   掉到轨道下方 41px 处。必须让轨道和圆点共用同一个定位祖先（.flow__track，
   它的顶边就是四步那一行的顶边），圆点位置才是从同一条基线量出来的。
   另：不用 div 直塞 <ol>（那样不合法），所以多一层 .flow__track 包裹。
   推进段两端圆角，用 transform: scaleX 生长。 */
.flow__track { position: relative; }

.flow__rail {
  position: absolute;
  /* 2px 的线要让「中轴」对上圆点圆心，所以上移 1px */
  top: calc(var(--flow-dot) / 2 - 1px);
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background-color: var(--line);
}

.flow__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--accent);
  transform: scaleX(var(--flow-pos));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* --- 四步 --------------------------------------------------------------- */
.flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.flow__step {
  position: relative;
  /* 圆点坐在轨道上，所以每步先让出圆点那么高 */
  padding-top: calc(var(--flow-dot) + var(--space-4));
  padding-left: calc(var(--flow-dot) + var(--space-4));
}

/* 圆点：走到的实心红 + 一圈红晕，没走到的空心灰。
   尺寸不变，只换填充与描边，所以状态切换时文字不位移。
   居中用 margin-left 而不是 transform: translate(-50%)：少一层换算，
   也就少一处「算错了但看不出来」的地方（这坑真踩过）。 */
.flow__dot {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--flow-dot) / -2);
  width: var(--flow-dot);
  height: var(--flow-dot);
  border-radius: 50%;
  border: 2px solid var(--line);
  background-color: var(--surface);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.flow__step[data-on] .flow__dot {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--sh-dot-halo);
}

/* 节点 = 圆角矩形按钮。整块 48px 高，够手指点。 */
.flow__node {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background-color: var(--bg-soft);
  font-family: inherit;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.flow__node:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--sh-sm);
}

.flow__node:active { transform: translateY(0) scale(0.98); }

/* 当前步：品牌红描边 + 红字，和轨道推进段同一个色，视觉上是一条线 */
.flow__node[aria-current="step"] {
  color: var(--accent-deep);
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.flow__node:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring-glow);
}

.flow__d {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid transparent;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
  overflow-wrap: break-word;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* 当前步的说明文字压成正文墨色并亮出红边。
   只换颜色与边框，不动字号与行高，所以切换时没有布局抖动。 */
.flow__step[data-on] .flow__d {
  color: var(--ink);
  border-left-color: var(--accent);
}

/* --- 桌面：四步一行，轨道横穿 -------------------------------------------- */
@media (min-width: 900px) {
  .flow { padding: var(--space-12) var(--space-12) var(--space-10); }
  .flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
  /* 横向时圆点占满每格（纵向时才靠左贴着竖轨） */
  .flow__step { padding-left: 0; }
}

/* --- 移动 / 平板：一列一步，轨道转竖 --------------------------------------
   四步在 900px 以下不再横排 ： 每格只有 220px 宽，说明文字会挤成四行。
   竖轨让「进度」这个说法在窄屏也成立。 */
@media (max-width: 899px) {
  .flow__rail {
    top: 0;
    bottom: 0;
    left: calc(var(--flow-dot) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .flow__fill {
    transform: scaleY(var(--flow-pos));
    transform-origin: center top;
  }
  /* 竖轨下圆点的横向位置要对准轨道中轴（left 取 7px = 2px 线的中心）；
     纵向位置只是「在轨道上的哪一点」，对齐行间距即可 */
  .flow__dot {
    top: var(--space-2);
    left: calc(var(--flow-dot) / 2);
    margin-left: calc(var(--flow-dot) / -2);
  }
}

/* ==========================================================================
   降级（skill 6.B 强制）：站点「关闭动效」开关或系统减少动效时，
   逐拍推进与过渡全部取消，进度条直接呈现完成态。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .flow__fill { transition: none; }
  .flow__node,
  .flow__node:hover,
  .flow__node:active,
  .flow__dot,
  .flow__d { transition: none; }
  .flow__node:hover,
  .flow__node:active { transform: none; }
}