/* =========================================================
   支持中心 /support/ —— 页面专属样式
   作用域：.page-help
   ========================================================= */

.page-help {
  --help-band: 100%;
  --help-dot: var(--space-2);
  --help-dot-lg: var(--space-4);
}

/* ---------- 面包屑 ---------- */
.page-help .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.page-help .breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
}
.page-help .breadcrumb a:hover,
.page-help .breadcrumb a:focus-visible {
  text-decoration: underline;
}
.page-help .breadcrumb span[aria-current] {
  color: var(--color-ink);
}

/* ---------- 首屏 ---------- */
.page-help .help-title {
  max-width: 15ch;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-ink);
}
.page-help .help-lead {
  max-width: 58ch;
  margin-bottom: var(--space-6);
}

/* 三组数字 —— 尺寸错落 */
.page-help .help-figures {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-6);
  margin-bottom: var(--space-6);
}
.page-help .help-figures::before,
.page-help .help-figures::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-line);
}
.page-help .help-figures::before {
  top: 0;
  height: var(--border-thin);
}
.page-help .help-figures::after {
  top: var(--space-1);
  height: var(--border-thin);
  opacity: .55;
}

.page-help .help-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.page-help .help-figure .figure-value {
  display: block;
  line-height: 1;
  color: var(--color-primary);
}
.page-help .help-figure--lead .figure-value {
  font-size: var(--text-figure);
}
.page-help .help-figure--mid .figure-value {
  font-size: var(--text-3xl);
  color: var(--color-accent);
}
.page-help .help-figure--base .figure-value {
  font-size: var(--text-2xl);
  color: var(--color-ink);
}
.page-help .help-figure-label {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 32ch;
}

/* ---------- 首屏横向进度带 ---------- */
.page-help .help-track {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-3) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-contrast-surface);
  box-shadow: var(--shadow-1);
}
.page-help .help-track-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-help .help-track-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-scrim);
}
.page-help .help-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--space-3);
  opacity: .65;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-contrast-line) 0 1px,
    transparent 1px var(--space-2)
  );
}
.page-help .help-track-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-node-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-contrast-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.page-help .help-node-link:hover,
.page-help .help-node-link:focus-visible {
  background: color-mix(in srgb, var(--color-contrast-ink) 14%, transparent);
}
.page-help .help-node-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--space-6);
}
.page-help .help-node-dot {
  display: block;
  width: var(--help-dot);
  height: var(--help-dot);
  border-radius: var(--radius-pill);
  background: var(--color-contrast-accent);
}
.page-help .help-node-idx {
  font-size: var(--text-xs);
  letter-spacing: .1em;
  color: var(--color-contrast-accent);
}
.page-help .help-node-name {
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--color-contrast-ink);
}
.page-help .help-node-meta {
  font-size: var(--text-xs);
  opacity: .66;
  color: var(--color-contrast-ink);
}

/* 迁移节点：最大，落在深色底上并带光晕 */
.page-help .help-node--big .help-node-dot {
  width: var(--help-dot-lg);
  height: var(--help-dot-lg);
  background: var(--color-primary);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-primary) 32%, transparent);
}
.page-help .help-node--big .help-node-name {
  font-size: var(--text-lg);
}
.page-help .help-node--big .help-node-idx {
  color: var(--color-primary-ink);
  background: color-mix(in srgb, var(--color-primary) 72%, transparent);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
}
.page-help .help-node--md .help-node-dot {
  width: var(--space-3);
  height: var(--space-3);
}

/* ---------- 阶段横带：宽窄交替 ---------- */
.page-help .help-stage--narrow,
.page-help .help-stage--mid,
.page-help .help-stage--wide {
  --help-band: 100%;
}
.page-help .help-stage > .container > .help-stage-inner {
  max-width: var(--help-band);
  margin-inline: auto;
}
.page-help .help-stage .section-head {
  margin-bottom: var(--space-4);
}
.page-help .help-stage h2 {
  margin-top: var(--space-1);
}

/* ---------- 环节 01 / 02 ---------- */
.page-help .help-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.page-help .help-entry-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  box-shadow: var(--shadow-1);
}
.page-help .help-entry-card--accent {
  background: var(--color-primary-soft);
  border-color: transparent;
}
.page-help .help-entry-kicker {
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: .12em;
}
.page-help .help-entry-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0;
}
.page-help .help-entry-card p {
  margin: 0;
  color: var(--color-ink-soft);
}
.page-help .help-entry-card a {
  color: var(--color-accent);
}
.page-help .help-entry-fact {
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink) !important;
}
.page-help .help-entry-card--accent .help-entry-fact {
  border-top-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.page-help .help-entry-note {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-primary);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* ---------- 环节 03：六步 ---------- */
.page-help .help-setup {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.page-help .help-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-step::before {
  content: "";
  position: absolute;
  top: calc(var(--border-thin) * -1);
  left: 0;
  width: var(--space-6);
  height: var(--border-thin);
  background: var(--color-primary);
}
.page-help .help-step-num {
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: .1em;
}
.page-help .help-step-title {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-ink);
}
.page-help .help-step-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.page-help .help-setup-figure {
  margin: 0;
}
.page-help .help-setup-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-setup-foot p {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-ink-soft);
}
.page-help .help-setup-foot a {
  color: var(--color-accent);
}

/* ---------- 环节 04：深色迁移模块 ---------- */
.page-help .help-migrate-panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.page-help .help-migrate-inner {
  padding: var(--space-6) var(--space-4);
}
.page-help .help-migrate-head {
  max-width: var(--measure);
}
.page-help .help-migrate-head h2 {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-head p {
  margin: 0;
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}
.page-help .help-migrate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.page-help .help-migrate-h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-migrate-order li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}
.page-help .help-migrate-order li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.page-help .help-migrate-n {
  font-size: var(--text-sm);
  color: var(--color-contrast-accent);
  letter-spacing: .08em;
}
.page-help .help-migrate-result {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-contrast-accent);
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-figure {
  margin: 0;
}
.page-help .help-migrate-figure .media-caption {
  color: color-mix(in srgb, var(--color-contrast-ink) 68%, transparent);
}

/* ---------- 环节 05：日常 ---------- */
.page-help .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.page-help .help-shift-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.page-help .help-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
.page-help .help-shift-time {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.page-help .help-shift-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.page-help .help-daily-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.page-help .help-daily-note {
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-daily-note h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.page-help .help-daily-note p {
  margin: 0;
  color: var(--color-ink-soft);
}

/* ---------- 出口 ---------- */
.page-help .help-exit-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-exit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.page-help .help-exit-idx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: var(--text-sm);
}
.page-help .help-exit-body {
  min-width: 0;
}
.page-help .help-exit-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  word-break: break-word;
}
.page-help .help-exit-title a {
  color: var(--color-accent);
}
.page-help .help-exit-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-help .help-prep {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.page-help .help-prep h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.page-help .help-prep-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-prep-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.page-help .help-prep-list li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.page-help .help-prep-foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.page-help .help-prep-foot a {
  color: var(--color-accent);
}

/* ---------- 图片统一处理 ---------- */
.page-help .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-help .media-caption {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
}

/* =========================================================
   响应式
   ========================================================= */
@media (min-width: 640px) {
  .page-help .help-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-3);
  }
  .page-help .help-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-shift-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-daily-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-exit-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-help .help-prep-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-help .help-stage--narrow {
    --help-band: 80%;
  }
  .page-help .help-stage--mid {
    --help-band: 90%;
  }
  .page-help .help-stage--wide {
    --help-band: 100%;
  }

  .page-help .help-track {
    padding: var(--space-8) var(--space-6) var(--space-8);
  }
  .page-help .help-track-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: end;
  }

  .page-help .help-setup {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
  .page-help .help-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .page-help .help-migrate-inner {
    padding: var(--space-8) var(--space-6);
  }
  .page-help .help-migrate-grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--space-6);
    align-items: start;
  }

  .page-help .help-shift-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-help .help-entry-card {
    padding: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .page-help .help-track-list {
    gap: var(--space-3);
  }
}
<<<END>>>

等等——最后一行的 `<<<END>>>` 并不在要求的标记里。让我把它去掉。输出应该到 PAGE_CSS 结束就完了。

另外我还得再检查一下：`.page-help .help-entry-fact { color: var(--color-ink) !important; }` 用了 `!important`——还是避免掉比较好。不如换成更具体的写法：

```css
.page-help .help-entry-card p.help-entry-fact { color: var(--color-ink); }
```

这样就够了。

还要检查一下 `.page-help .media-frame img`——`.media-frame` 是共享类，里面放图片；我这样做是覆盖了它的样式，没什么问题。

还有 `.page-help .help-track-bg` 的 `z-index: 0`，以及 `.help-track-scrim` 的 `z-index: 1`——`::after` 是 `z-index: 3`，列表是 `z-index: 2`。顺序是：背景 0、遮罩 1、列表 2——没问题，刻度 3 在列表上面，但只在底部区域。

好。

让我把最后的 CSS 整理干净，去掉 `!important`。

另外我需要再确认一下 `.help-node--md .help-node-dot` 是不是覆盖了 `.help-node-dot` 的基础尺寸——没错，基础是 `var(--space-2)`，`--md` 是 `var(--space-3)`，`--big` 是 `var(--space-4)`。不错。

还有一点：在 640px 断点里我设置了 `help-figures` 为 3 列，`align-items: end`。可能会有点紧，不过问题不大。

最终内容。输出。
<main id="main-content" class="page-help">

  <section class="section section--surface help-hero" aria-labelledby="help-title">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">支持中心</span>
      </nav>

      <p class="eyebrow">支持中心</p>
      <h1 id="help-title" class="display help-title">装上只是开头，五个环节一次走完</h1>
      <p class="lead help-lead">这一页把从第一次打开 HD 2025 新版，到换设备、迁旧资料、按周看班次这条线完整画出来：每一步谁来做、大概花多久、做完手上多了什么。路径由安装游艺的客服受理组、时段编排组和技术支持组共同维护，走到哪一步卡住，末尾都有对应的出口。</p>

      <div class="help-figures">
        <div class="help-figure help-figure--lead">
          <span class="figure-value mono-num">5</span>
          <span class="help-figure-label">个环节，串成一条线。手边有原来的账号和旧设备，全程大约一小时。</span>
        </div>
        <div class="help-figure help-figure--mid">
          <span class="figure-value mono-num">14</span>
          <span class="help-figure-label">份旧版本说明，和换设备设置放在同一个模块里，不用两边翻。</span>
        </div>
        <div class="help-figure help-figure--base">
          <span class="figure-value mono-num">12</span>
          <span class="help-figure-label">个荷官班次，覆盖 06:00 至次日 02:00，按周滚动。</span>
        </div>
      </div>

      <div class="help-track">
        <img class="help-track-bg" src="{zhanqunpic:h:720w:1600}" width="1600" height="720" alt="横向光轨沿刻度延伸的抽象构图，冷色底配暖金节点">
        <div class="help-track-scrim" aria-hidden="true"></div>
        <ol class="help-track-list">
          <li class="help-node help-node--sm">
            <a class="help-node-link" href="#stage-entry">
              <span class="help-node-slot"><span class="help-node-dot" aria-hidden="true"></span></span>
              <span class="help-node-idx mono-num">01</span>
              <span class="help-node-name">拿到入口</span>
              <span class="help-node-meta">约 5 分钟</span>
            </a>
          </li>
          <li class="help-node help-node--sm">
            <a class="help-node-link" href="#stage-nav">
              <span class="help-node-slot"><span class="help-node-dot" aria-hidden="true"></span></span>
              <span class="help-node-idx mono-num">02</span>
              <span class="help-node-name">认清第三栏</span>
              <span class="help-node-meta">约 10 分钟</span>
            </a>
          </li>
          <li class="help-node help-node--md">
            <a class="help-node-link" href="#stage-setup">
              <span class="help-node-slot"><span class="help-node-dot" aria-hidden="true"></span></span>
              <span class="help-node-idx mono-num">03</span>
              <span class="help-node-name">换设备设置</span>
              <span class="help-node-meta">约 15 分钟</span>
            </a>
          </li>
          <li class="help-node help-node--big">
            <a class="help-node-link" href="#stage-migrate">
              <span class="help-node-slot"><span class="help-node-dot" aria-hidden="true"></span></span>
              <span class="help-node-idx mono-num">04</span>
              <span class="help-node-name">旧版迁移</span>
              <span class="help-node-meta">约 30 分钟</span>
            </a>
          </li>
          <li class="help-node help-node--sm">
            <a class="help-node-link" href="#stage-daily">
              <span class="help-node-slot"><span class="help-node-dot" aria-hidden="true"></span></span>
              <span class="help-node-idx mono-num">05</span>
              <span class="help-node-name">日常与找人</span>
              <span class="help-node-meta">随时可用</span>
            </a>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section id="stage-entry" class="section section--alt help-stage help-stage--narrow">
    <div class="container">
      <div class="help-stage-inner">
        <header class="section-head">
          <p class="eyebrow">环节 01 · 02</p>
          <h2>先认得入口，再认清第三栏</h2>
          <p class="lead">安装完成后第一次打开，你会先落在首页。桌面浏览器和大屏终端上，页面分成三栏，最右边那栏就是分类导航；手机和平板上它会收成一个栏目按钮，点开同样是那一份内容。这一段没有需要你判断的地方，确认两件事就行。</p>
        </header>

        <div class="help-entry-grid">
          <article class="help-entry-card">
            <p class="help-entry-kicker mono-num">01</p>
            <h3>打开就能看见首页</h3>
            <p>顶部是站点字标“安装HD”和一条命令栏；中间是主体内容；第三栏集中展示改版后的分类导航。九个一级分类全部落在这一栏，点进去还能再往下走两层。</p>
            <p class="help-entry-fact"><span class="mono-num">32</span> 个二级入口分布在九个一级分类之下，每栏最多两层，不需要来回找。</p>
          </article>

          <article id="stage-nav" class="help-entry-card help-entry-card--accent">
            <p class="help-entry-kicker mono-num">02</p>
            <h3>第三栏是这一版的重点</h3>
            <p>改版把分类集中到了第三栏，就是为了让你在一个地方看完再决定点哪里。先扫一遍九个分类的名字，找到自己常用的那一类，把它当成以后每次进站的第一落点。</p>
            <p class="help-entry-fact">还不确定自己该走哪条版本线，<a href="/capability/">能力对照</a>把旧版资料页、2025 新版和改版网页版的差别并排放在一起，看完就能定。</p>
          </article>
        </div>

        <p class="help-entry-note">这两步由你完成，站点这边已经排好，不需要额外申请或等待。手机端把栏目按钮放在右上角，横屏时会自动摊开成第三栏。</p>
      </div>
    </div>
  </section>

  <section id="stage-setup" class="section section--surface help-stage help-stage--wide">
    <div class="container">
      <div class="help-stage-inner">
        <header class="section-head">
          <p class="eyebrow">环节 03</p>
          <h2>换设备登录，六步改完这几处</h2>
          <p class="lead">换手机、换平板、换到桌面浏览器或者大屏终端，登录方式要跟着走一遍。下面六步就是全部要动的地方，走完一次，之后换机不用从头再来。</p>
        </header>

        <div class="help-setup">
          <ol class="help-steps">
            <li class="help-step">
              <span class="help-step-num mono-num">1</span>
              <span class="help-step-title">在新设备上打开站点</span>
              <span class="help-step-meta">你操作 · 约 2 分钟</span>
            </li>
            <li class="help-step">
              <span class="help-step-num mono-num">2</span>
              <span class="help-step-title">输入原来的账号标识</span>
              <span class="help-step-meta">你操作 · 约 3 分钟</span>
            </li>
            <li class="help-step">
              <span class="help-step-num mono-num">3</span>
              <span class="help-step-title">选你原来的设备类型</span>
              <span class="help-step-meta">你操作 · 约 3 分钟</span>
            </li>
            <li class="help-step">
              <span class="help-step-num mono-num">4</span>
              <span class="help-step-title">确认常用的使用时段</span>
              <span class="help-step-meta">你操作 · 约 2 分钟</span>
            </li>
            <li class="help-step">
              <span class="help-step-num mono-num">5</span>
              <span class="help-step-title">把当前设备设为常用</span>
              <span class="help-step-meta">系统自动 · 约 2 分钟</span>
            </li>
            <li class="help-step">
              <span class="help-step-num mono-num">6</span>
              <span class="help-step-title">核对第三栏与班次显示</span>
              <span class="help-step-meta">你操作 · 约 3 分钟</span>
            </li>
          </ol>

          <figure class="help-setup-figure">
            <div class="media-frame media-frame--4x3">
              <img src="{zhanqunpic:h:667w:1000}" width="1000" height="667" alt="设置项列表的界面特写，未显示任何账号或验证信息" loading="lazy" decoding="async">
            </div>
            <figcaption class="media-caption">第三步选设备类型时会列出手机、平板、桌面浏览器与大屏终端四种，选错也能在第 6 步改回来。</figcaption>
          </figure>
        </div>

        <div class="help-setup-foot">
          <p>这套设备切换的做法写在<a href="/standards/">执行标准</a>里，每一步对应哪条标准都能逐项对照。如果场地或门店要同时安排多台设备与多组班次，<a href="/consult/">选型咨询</a>里列了六种接入方式，按你的规模挑一种就行。</p>
        </div>
      </div>
    </div>
  </section>

  <section id="stage-migrate" class="section section--deep help-stage help-stage--mid">
    <div class="container">
      <div class="help-stage-inner">
        <div class="panel-contrast help-migrate-panel">
          <div class="help-migrate-inner">
            <header class="help-migrate-head">
              <span class="chip chip--on-dark">环节 04 · 迁移</span>
              <h2>旧版本的东西，和新设置在一个模块里办完</h2>
              <p>从旧版资料页升上来的人，最容易被绊住的地方是登录方式对不上。所以这里没有把旧版本说明和换设备设置分成两页——十四份说明按版本线排好，六步设置紧挨着放，中间不用切页面。</p>
            </header>

            <div class="help-migrate-grid">
              <div class="help-migrate-col">
                <h3 class="help-migrate-h3">按这个顺序走，不会乱</h3>
                <ol class="help-migrate-order">
                  <li>
                    <span class="help-migrate-n mono-num">01</span>
                    <span>先确认自己原来在哪条版本线上，旧版资料页、2025 新版还是改版网页版，三条线的做法不一样。</span>
                  </li>
                  <li>
                    <span class="help-migrate-n mono-num">02</span>
                    <span>打开对应的那一份旧版本说明，只看登录与分类两段，其余内容可以先跳过。</span>
                  </li>
                  <li>
                    <span class="help-migrate-n mono-num">03</span>
                    <span>接着做上面的六步换设备设置，把登录方式落到当前这台设备上。</span>
                  </li>
                  <li>
                    <span class="help-migrate-n mono-num">04</span>
                    <span>回到第三栏核对九个一级分类，确认名字和层级都跟你印象里一致。</span>
                  </li>
                </ol>
                <p class="help-migrate-result">走完这四步，你手上会有三样东西：统一的登录方式、随时可查的旧版本说明、和当前设备一致的分类与班次显示。</p>
              </div>

              <figure class="help-migrate-figure">
                <div class="media-frame media-frame--4x3">
                  <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="两列信息并排的界面局部，一列为历史说明条目，一列为设置项" loading="lazy" decoding="async">
                </div>
                <figcaption class="media-caption">左边是旧版本说明的条目，右边是换设备设置项，两边同屏对照着看。</figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="stage-daily" class="section section--alt help-stage help-stage--wide">
    <div class="container">
      <div class="help-stage-inner">
        <header class="section-head">
          <p class="eyebrow">环节 05</p>
          <h2>日常就三件事：查班次、找人、留句话</h2>
          <p class="lead">班次表按周滚动更新，当前更新到 3 月第 2 周，共十二个班次，从 06:00 一直排到次日 02:00，分成早班、午班、晚班、深夜班四段。下面这十二个是本周的时段示例，按你常用的时段筛一下更快。</p>
        </header>

        <div class="filter-bar" data-filter-group="shifts" role="group" aria-label="按时段筛选班次">
          <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部 12</button>
          <button type="button" class="filter-btn" data-filter="morning" aria-pressed="false">早班 3</button>
          <button type="button" class="filter-btn" data-filter="noon" aria-pressed="false">午班 3</button>
          <button type="button" class="filter-btn" data-filter="evening" aria-pressed="false">晚班 3</button>
          <button type="button" class="filter-btn" data-filter="night" aria-pressed="false">深夜班 3</button>
        </div>

        <ul class="help-shift-list">
          <li class="help-shift" data-filter-item data-tags="morning">
            <span class="help-shift-time mono-num">06:00–07:40</span>
            <span class="help-shift-name">早班 · 开场台面</span>
            <span class="chip chip--line">已更新</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="morning">
            <span class="help-shift-time mono-num">07:40–09:20</span>
            <span class="help-shift-name">早班 · 晨间轮换</span>
            <span class="chip chip--line">排班中</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="morning">
            <span class="help-shift-time mono-num">09:20–11:00</span>
            <span class="help-shift-name">早班 · 上午主力</span>
            <span class="chip chip--line">在线</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="noon">
            <span class="help-shift-time mono-num">11:00–12:40</span>
            <span class="help-shift-name">午班 · 午前衔接</span>
            <span class="chip chip--line">排班中</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="noon">
            <span class="help-shift-time mono-num">12:40–14:20</span>
            <span class="help-shift-name">午班 · 午后高峰</span>
            <span class="chip chip--line">已更新</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="noon">
            <span class="help-shift-time mono-num">14:20–16:00</span>
            <span class="help-shift-name">午班 · 下午常规</span>
            <span class="chip chip--line">排班中</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="evening">
            <span class="help-shift-time mono-num">16:00–17:40</span>
            <span class="help-shift-name">晚班 · 交班准备</span>
            <span class="chip chip--line">在线</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="evening">
            <span class="help-shift-time mono-num">17:40–19:20</span>
            <span class="help-shift-name">晚班 · 晚间开场</span>
            <span class="chip chip--line">排班中</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="evening">
            <span class="help-shift-time mono-num">19:20–21:00</span>
            <span class="help-shift-name">晚班 · 夜间主力</span>
            <span class="chip chip--line">已更新</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="night">
            <span class="help-shift-time mono-num">21:00–22:40</span>
            <span class="help-shift-name">深夜班 · 跨场衔接</span>
            <span class="chip chip--line">排班中</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="night">
            <span class="help-shift-time mono-num">22:40–00:20</span>
            <span class="help-shift-name">深夜班 · 跨日值守</span>
            <span class="chip chip--line">在线</span>
          </li>
          <li class="help-shift" data-filter-item data-tags="night">
            <span class="help-shift-time mono-num">00:20–02:00</span>
            <span class="help-shift-name">深夜班 · 收尾轮转</span>
            <span class="chip chip--line">排班中</span>
          </li>
        </ul>

        <div class="help-daily-notes">
          <div class="help-daily-note">
            <h3>什么时候能找到人</h3>
            <p>每天 10:00–22:00 有真人接住邮箱与电话，这个时段内一般是当场回。服务时段之外发来的内容，会在下一个服务时段开头处理。团队 38 人分成客服受理、时段编排、技术支持三组，日均受理咨询约 320 次。</p>
          </div>
          <div class="help-daily-note">
            <h3>想留句话从哪写</h3>
            <p>发到客服邮箱 contact@h5-hd-temple.com.cn 就行，说明哪一栏、哪一步没对上，比截图更快定位。站点不使用表单收集信息，留下联系方式也只是方便我们回给你。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--surface help-stage help-stage--narrow help-exit">
    <div class="container">
      <div class="help-stage-inner">
        <header class="section-head">
          <p class="eyebrow">出口</p>
          <h2>卡住了，按这条线往下走</h2>
          <p class="lead">按顺序走通常最快：先自查，再发文字说明，最后打电话。三种方式用的都是同一批人，不会出现转来转去没人认的情况。</p>
        </header>

        <ol class="help-exit-line">
          <li class="help-exit-item">
            <span class="help-exit-idx mono-num">01</span>
            <div class="help-exit-body">
              <p class="help-exit-title"><a href="/support/issues/">问题排查</a></p>
              <p class="help-exit-desc">安装中断、第三栏没出来、换设备后设置没同步、版本线对不上、班次显示不一致——六种常见异常各自对应一个位置，照着看通常几分钟就能找到症结。</p>
            </div>
          </li>
          <li class="help-exit-item">
            <span class="help-exit-idx mono-num">02</span>
            <div class="help-exit-body">
              <p class="help-exit-title">发邮件到 contact@h5-hd-temple.com.cn</p>
              <p class="help-exit-desc">适合讲得清但一时半会说不完的情况。把设备类型、版本线、出问题的栏目名写进去，客服受理组会转给对应的组。</p>
            </div>
          </li>
          <li class="help-exit-item">
            <span class="help-exit-idx mono-num">03</span>
            <div class="help-exit-body">
              <p class="help-exit-title">打 400-9555-6546</p>
              <p class="help-exit-desc">10:00–22:00 之间有人接。适合必须当场确认、或者前面两步没解决的情况。写清楚需求再打，比边想边说快很多。</p>
            </div>
          </li>
        </ol>

        <div class="help-prep">
          <h3>提问前准备好这几样，一次就能说清</h3>
          <ul class="help-prep-list">
            <li>你用的是哪条版本线：旧版资料页、2025 新版，还是改版网页版</li>
            <li>出问题的设备类型：手机、平板、桌面浏览器，还是大屏终端</li>
            <li>涉及的分类在第几栏、叫什么名字，或者班次大概在哪个时段</li>
            <li>大概什么时候开始的，是不是某一次换设备之后才出现</li>
          </ul>
          <p class="help-prep-foot">完整的受理时段、邮箱与联系地址写在<a href="/connect/">联系通道</a>里。客服电话 400-9555-6546，每日 10:00–22:00 受理。</p>
        </div>
      </div>
    </div>
  </section>

</main>

/* =========================================================
   支持中心 /support/ —— 页面专属样式
   作用域：.page-help
   ========================================================= */

.page-help {
  --help-band: 100%;
  --help-dot: var(--space-2);
  --help-dot-lg: var(--space-4);
}

/* ---------- 面包屑 ---------- */
.page-help .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.page-help .breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
}
.page-help .breadcrumb a:hover,
.page-help .breadcrumb a:focus-visible {
  text-decoration: underline;
}
.page-help .breadcrumb span[aria-current] {
  color: var(--color-ink);
}

/* ---------- 首屏 ---------- */
.page-help .help-title {
  max-width: 15ch;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-ink);
}
.page-help .help-lead {
  max-width: 58ch;
  margin-bottom: var(--space-6);
}

/* 三组数字 —— 尺寸错落 */
.page-help .help-figures {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-6);
  margin-bottom: var(--space-6);
}
.page-help .help-figures::before,
.page-help .help-figures::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-line);
}
.page-help .help-figures::before {
  top: 0;
  height: var(--border-thin);
}
.page-help .help-figures::after {
  top: var(--space-1);
  height: var(--border-thin);
  opacity: .55;
}

.page-help .help-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.page-help .help-figure .figure-value {
  display: block;
  line-height: 1;
  color: var(--color-primary);
}
.page-help .help-figure--lead .figure-value {
  font-size: var(--text-figure);
}
.page-help .help-figure--mid .figure-value {
  font-size: var(--text-3xl);
  color: var(--color-accent);
}
.page-help .help-figure--base .figure-value {
  font-size: var(--text-2xl);
  color: var(--color-ink);
}
.page-help .help-figure-label {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 32ch;
}

/* ---------- 首屏横向进度带 ---------- */
.page-help .help-track {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-3) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-contrast-surface);
  box-shadow: var(--shadow-1);
}
.page-help .help-track-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-help .help-track-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-scrim);
}
.page-help .help-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--space-3);
  opacity: .65;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-contrast-line) 0 1px,
    transparent 1px var(--space-2)
  );
}
.page-help .help-track-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-node-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-contrast-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.page-help .help-node-link:hover,
.page-help .help-node-link:focus-visible {
  background: color-mix(in srgb, var(--color-contrast-ink) 14%, transparent);
}
.page-help .help-node-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--space-6);
}
.page-help .help-node-dot {
  display: block;
  width: var(--help-dot);
  height: var(--help-dot);
  border-radius: var(--radius-pill);
  background: var(--color-contrast-accent);
}
.page-help .help-node-idx {
  font-size: var(--text-xs);
  letter-spacing: .1em;
  color: var(--color-contrast-accent);
}
.page-help .help-node-name {
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--color-contrast-ink);
}
.page-help .help-node-meta {
  font-size: var(--text-xs);
  opacity: .66;
  color: var(--color-contrast-ink);
}

/* 迁移节点：最大，落在深色底上并带光晕 */
.page-help .help-node--big .help-node-dot {
  width: var(--help-dot-lg);
  height: var(--help-dot-lg);
  background: var(--color-primary);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-primary) 32%, transparent);
}
.page-help .help-node--big .help-node-name {
  font-size: var(--text-lg);
}
.page-help .help-node--big .help-node-idx {
  color: var(--color-primary-ink);
  background: color-mix(in srgb, var(--color-primary) 72%, transparent);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
}
.page-help .help-node--md .help-node-dot {
  width: var(--space-3);
  height: var(--space-3);
}

/* ---------- 阶段横带：宽窄交替 ---------- */
.page-help .help-stage--narrow,
.page-help .help-stage--mid,
.page-help .help-stage--wide {
  --help-band: 100%;
}
.page-help .help-stage > .container > .help-stage-inner {
  max-width: var(--help-band);
  margin-inline: auto;
}
.page-help .help-stage .section-head {
  margin-bottom: var(--space-4);
}
.page-help .help-stage h2 {
  margin-top: var(--space-1);
}

/* ---------- 环节 01 / 02 ---------- */
.page-help .help-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.page-help .help-entry-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  box-shadow: var(--shadow-1);
}
.page-help .help-entry-card--accent {
  background: var(--color-primary-soft);
  border-color: transparent;
}
.page-help .help-entry-kicker {
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: .12em;
}
.page-help .help-entry-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0;
}
.page-help .help-entry-card p {
  margin: 0;
  color: var(--color-ink-soft);
}
.page-help .help-entry-card a {
  color: var(--color-accent);
}
.page-help .help-entry-card p.help-entry-fact {
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.page-help .help-entry-card--accent p.help-entry-fact {
  border-top-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.page-help .help-entry-note {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-primary);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* ---------- 环节 03：六步 ---------- */
.page-help .help-setup {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.page-help .help-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-step::before {
  content: "";
  position: absolute;
  top: calc(var(--border-thin) * -1);
  left: 0;
  width: var(--space-6);
  height: var(--border-thin);
  background: var(--color-primary);
}
.page-help .help-step-num {
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: .1em;
}
.page-help .help-step-title {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-ink);
}
.page-help .help-step-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.page-help .help-setup-figure {
  margin: 0;
}
.page-help .help-setup-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-setup-foot p {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-ink-soft);
}
.page-help .help-setup-foot a {
  color: var(--color-accent);
}

/* ---------- 环节 04：深色迁移模块 ---------- */
.page-help .help-migrate-panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.page-help .help-migrate-inner {
  padding: var(--space-6) var(--space-4);
}
.page-help .help-migrate-head {
  max-width: var(--measure);
}
.page-help .help-migrate-head h2 {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-head p {
  margin: 0;
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}
.page-help .help-migrate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.page-help .help-migrate-h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-migrate-order li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}
.page-help .help-migrate-order li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.page-help .help-migrate-n {
  font-size: var(--text-sm);
  color: var(--color-contrast-accent);
  letter-spacing: .08em;
}
.page-help .help-migrate-result {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-contrast-accent);
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
}
.page-help .help-migrate-figure {
  margin: 0;
}
.page-help .help-migrate-figure .media-caption {
  color: color-mix(in srgb, var(--color-contrast-ink) 68%, transparent);
}

/* ---------- 环节 05：日常 ---------- */
.page-help .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.page-help .help-shift-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.page-help .help-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
.page-help .help-shift-time {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.page-help .help-shift-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.page-help .help-daily-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.page-help .help-daily-note {
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}
.page-help .help-daily-note h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.page-help .help-daily-note p {
  margin: 0;
  color: var(--color-ink-soft);
}

/* ---------- 出口 ---------- */
.page-help .help-exit-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-exit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.page-help .help-exit-idx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: var(--text-sm);
}
.page-help .help-exit-body {
  min-width: 0;
}
.page-help .help-exit-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  word-break: break-word;
}
.page-help .help-exit-title a {
  color: var(--color-accent);
}
.page-help .help-exit-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-help .help-prep {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.page-help .help-prep h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.page-help .help-prep-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-help .help-prep-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.page-help .help-prep-list li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.page-help .help-prep-foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.page-help .help-prep-foot a {
  color: var(--color-accent);
}

/* ---------- 图片统一处理 ---------- */
.page-help .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-help .media-caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* =========================================================
   响应式
   ========================================================= */
@media (min-width: 640px) {
  .page-help .help-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-3);
  }
  .page-help .help-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-shift-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-daily-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-help .help-exit-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-help .help-prep-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-help .help-stage--narrow {
    --help-band: 80%;
  }
  .page-help .help-stage--mid {
    --help-band: 90%;
  }
  .page-help .help-stage--wide {
    --help-band: 100%;
  }

  .page-help .help-track {
    padding: var(--space-8) var(--space-6) var(--space-8);
  }
  .page-help .help-track-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: end;
  }

  .page-help .help-setup {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
  .page-help .help-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .page-help .help-migrate-inner {
    padding: var(--space-8) var(--space-6);
  }
  .page-help .help-migrate-grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--space-6);
    align-items: start;
  }

  .page-help .help-shift-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-help .help-entry-card {
    padding: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .page-help .help-track-list {
    gap: var(--space-3);
  }
}