.page-about {
  --about-pad: clamp(56px, 9vw, 128px);
  position: relative;
  background: var(--bg);
  color: var(--text);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 96px);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -10%;
  width: 74%;
  height: 86%;
  background: var(--deep-sea);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -2;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.26;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 82%, transparent 100%);
}

.page-about .breadcrumb {
  margin-bottom: clamp(28px, 5vw, 56px);
}

.page-about .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.page-about .hero-copy h1 {
  margin: 16px 0 20px;
  font-size: clamp(32px, 6.4vw, 68px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--white);
}

.page-about .hero-lede {
  max-width: 34em;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.page-about .hero-facts b {
  font-size: 20px;
  color: var(--alert);
  letter-spacing: 0.04em;
}

.page-about .hero-media {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.page-about .hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-about .hero-media__cap {
  padding: 12px 2px 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 锚点条 ---------- */
.page-about .anchor-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 32, 54, 0.55);
}

.page-about .anchor-bar__list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 通用段落 ---------- */
.page-about .section {
  padding: var(--about-pad) 0;
}

.page-about .section__head {
  max-width: 46em;
  margin-bottom: clamp(36px, 6vw, 68px);
}

.page-about .section__title {
  margin: 14px 0 16px;
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .section__lede {
  margin: 0;
  max-width: 38em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 主张由来 ---------- */
.page-about .origin-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.page-about .origin-item {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--deep-dive);
  transition: transform 0.3s var(--ease), border-top-color 0.3s var(--ease);
}

.page-about .origin-item:hover {
  transform: translateY(-3px);
  border-top-color: var(--cyan);
}

.page-about .origin-item__idx {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-about .origin-item__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--white);
}

.page-about .origin-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .origin-note {
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 22px 0 22px 22px;
  max-width: 54em;
  border-left: 2px solid var(--alert);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--ice);
}

/* ---------- 阶段路线 ---------- */
.page-about .section--route {
  background: linear-gradient(180deg, transparent 0%, rgba(18, 59, 92, 0.22) 42%, transparent 100%);
}

.page-about .timeline-figure {
  margin: 0 0 clamp(48px, 7vw, 88px);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.page-about .timeline-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
  display: grid;
  gap: clamp(36px, 6vw, 76px);
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  width: 1px;
  background: var(--line);
}

.page-about .tl-item {
  position: relative;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--alert);
  transform: rotate(45deg);
}

.page-about .tl-card {
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  outline: none;
}

.page-about .tl-card:focus-visible {
  box-shadow: 0 0 0 2px var(--cyan);
}

.page-about .tl-stage {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-about .tl-year {
  display: block;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--alert);
}

.page-about .tl-title {
  margin: 14px 0 10px;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  color: var(--white);
}

.page-about .tl-text {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .tl-note {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cyan);
  transition: max-height 0.36s var(--ease), opacity 0.28s var(--ease), margin-top 0.36s var(--ease);
}

.page-about .tl-card:hover .tl-note,
.page-about .tl-card:focus-within .tl-note {
  max-height: 108px;
  margin-top: 12px;
  opacity: 1;
}

/* ---------- 数字带 ---------- */
.page-about .num-band {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--deep-sea);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-about .num-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
}

.page-about .num {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.page-about .num__v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-about .num__u {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--alert);
  letter-spacing: 0.04em;
}

.page-about .num__l {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 团队与分工 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 28px);
}

.page-about .team-card {
  position: relative;
  padding: 26px 22px 28px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.page-about .team-card__num {
  display: block;
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: var(--alert);
}

.page-about .team-card__role {
  margin: 14px 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}

.page-about .team-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-about .team-card__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-about .team-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

.page-about .team-figure {
  margin: clamp(36px, 6vw, 64px) 0 0;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

.page-about .team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .team-figure__cap {
  padding: 12px 2px 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 服务范围 ---------- */
.page-about .section--reach {
  background: rgba(15, 90, 78, 0.16);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-about .reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .reach-card {
  padding: 28px 24px 30px;
  background: var(--panel);
}

.page-about .reach-card--emerald {
  background: var(--emerald);
}

.page-about .reach-card--wine {
  background: var(--wine);
}

.page-about .reach-card__title {
  margin: 0 0 12px;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--white);
}

.page-about .reach-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ice);
}

.page-about .reach-card--emerald .reach-card__text,
.page-about .reach-card--wine .reach-card__text {
  color: rgba(232, 241, 248, 0.86);
}

/* ---------- 结尾 ---------- */
.page-about .closing {
  padding: var(--about-pad) 0 calc(var(--about-pad) * 1.1);
}

.page-about .closing-inner {
  max-width: 44em;
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 2px solid var(--cyan);
}

.page-about .closing-title {
  margin: 14px 0 16px;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .closing-text {
  margin: 0 0 clamp(26px, 4vw, 40px);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-about .closing-links .btn {
  min-width: 168px;
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .origin-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .origin-item:first-child {
    grid-column: 1 / -1;
  }

  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .reach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-about .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 80px);
  }

  .page-about .timeline {
    padding-left: 0;
  }

  .page-about .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-about .tl-item {
    width: 50%;
    padding-right: 56px;
  }

  .page-about .tl-item::before {
    left: auto;
    right: -7px;
    top: 20px;
  }

  .page-about .tl-item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 56px;
  }

  .page-about .tl-item:nth-child(even)::before {
    right: auto;
    left: -7px;
  }

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

  .page-about .origin-item:first-child {
    grid-column: auto;
  }
}

@media (min-width: 1100px) {
  .page-about .num-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .page-about .about-hero::before {
    right: -30%;
    bottom: -6%;
    width: 118%;
    height: 62%;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .origin-item,
  .page-about .tl-note {
    transition: none;
  }

  .page-about .origin-item:hover {
    transform: none;
  }
}
</style>
<<<END>>>

等等——我不应该输出 `</style>`。`PAGE_CSS` 块的内容应该是原始 CSS，不带任何标签。这就去掉。

另外再检查一下：`data-anchor-bar` 已经用上了。`data-reveal` 也已经用上了。`data-top` 也已经用上了。

检查一下 `.to-top`——是来自共享样式的。可以。

检查一下数字块：“3分40秒”作为 `num__u` 的子元素——字体大小是 0.42em，偏小。其实这个应该更大一点。用 clamp 来设置一下 `.num__u`。不过先这样也行。

其实对于“3”——“分40秒”放在 0.42em 的单位里，看起来太迷你了。让我重新组织一下：`<span class="num__v mono">3<span class="num__u">分</span>40<span class="num__u">秒</span></span>`——不行。

更简单的办法：让 `.num__u` 相对更大一点，用 0.5em。不过还是先保持 0.42em 吧，问题不大。其实干脆换个数字，避免这种别扭的格式：“1.4秒 手机版首屏平均加载时间”。还是保留 3分40秒，但把单位调大一点。

把 num__u 的 fontSize 改成 0.5em。行。

现在检查一下时间线节点的位置：桌面端奇数项 `right: -7px`，`top: 20px`。卡片从 `padding: 18px 0 0` 开始，`border-top` 在顶部。没问题。

再检查 `.tl-item::before` 在移动端的 `left: -37px` —— 时间线 `padding-left: 40px`，线在 `left: 9px`。条目内容从 40px 开始。节点 12px 宽加 2px 边框，总共 16px。`left: -37px` 相对条目内容盒……条目在时间线网格里，时间线有 `padding-left: 40px`。条目的左边缘在 40px 处。`left: -37px` → 节点左边缘在 3px 处。宽度 16px → 中心在 11px 处。线在 9px 处。有点接近，但差 2px。用 `left: -35px` → 中心在 13px 处。嗯，那更远了。

重新算一下：节点总宽度是 12 + 2×2 = 16px。我们想让中心落在 9px（相对于时间线，也就是相对于条目左边缘的 -40px）。所以相对条目来说，左边就是 9 - 40 = -31px；再减去一半宽度（8），就是 -39px。

所以用 `left: -39px`。嗯，不过 box-sizing 我设了全局 border-box 吗？不太确定。假设是默认的 content-box，那 12px 宽度加 2px 边框，总宽就是 16px。对，左边就是 -39px。

用 -39px。

不过如果我设了 border-box，那总宽就是 12px，左边就应该是 -40 + 9 - 6 = -37px。这样有歧义，风险有点大。

更稳一点的办法：用 `left: -40px`，配 `margin-left: -8px`？算了。

还是直接用 transform 吧：

```css
.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 14px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  ...
}
```

嗯，用 margin 的话，在 border-box 下本来是 12px 总宽，加 -6 margin 就是左边缘在 -46，总宽 12，中心在 -40，相对条目就是 0……不对，等等。

干脆不搞那么复杂了，直接给 `.timeline` 设置 `box-sizing: content-box`……

算了，更简单的视觉思路是：别去精确对齐了。把线挪到 `left: 15px`，节点放到 `left: -32px`……

诶。换个思路：把时间轴容器加个 padding-left，用节点自己的 `left: 0` 相对定位已经能算了。

行，干脆试一个简单又稳的方案：用 `::before` 把节点放在 `left: 0`，然后设 `transform: translateX(-50%)`……

其实最省心的做法是：节点就放在那里，线也在那里，哪怕差几个像素，视觉上也没人看得出来。把线放在 `left: 9px`，节点留在 `left: -37px`——12px 的盒子加边框，如果按 border-box 算，总宽 12px，那左边缘在 -37，中心就在 -31，也就是相对容器坐标 40 - 31 = 9px。刚好对上线。

所以用 border-box（大概率会全局设置），`left: -37px` 没问题。

但如果是 content-box，中心会落在 11px——偏了 2px。也行吧，能接受。

保持 `left: -37px`。

桌面端：线在 50%。奇数项右边在 50%。节点 `right: -7px` → 右边缘在 50% + 7px 处，中心再往左 6px → 50% + 1px。按 border-box 算，宽度 12 的话就是 `right: -6px` → 中心正好在 50%。算了，用 `-6px`。

偶数项 `left: -6px` → 左边缘在 50% - 6px 处，中心在 50% 处。

奇数项用 `right: -6px`，偶数项用 `left: -6px`，就这样。

好了，现在定稿。

还有一个考虑：`.section__eyebrow` 里的 `<span>` 数字——共享样式大概率会处理。

收尾。确保所有内容都写完了。我现在把带修正的完整答案写出来。
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="wrap">
      <nav class="breadcrumb breadcrumb--dark" aria-label="当前位置">
        <a href="/">首页</a><span aria-hidden="true">/</span><span>品牌故事</span>
      </nav>

      <div class="hero-grid">
        <div class="hero-copy">
          <p class="section__eyebrow"><span>01</span>稳了就行</p>
          <h1>把访问这一件事做稳，剩下的时间留给你自己</h1>
          <p class="hero-lede">永利官网中国站从 2016 年上线运营至今。手机版与电脑端同时在线，版本号一直挂在页面上方，入口位置长期不变。你习惯用哪一端，就从哪一端进。</p>

          <ul class="hero-facts">
            <li><b class="mono">2016</b><span>上线运营</span></li>
            <li><b class="mono">v3.2</b><span>当前版本</span></li>
            <li><b class="mono">双端</b><span>并行在线</span></li>
          </ul>
        </div>

        <figure class="hero-media">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="等距视角的深色金属铭牌，刻有永利官网站名与稳了就行主张，边缘排列细线刻度" decoding="async">
          <figcaption class="hero-media__cap">站点铭牌 · 主张与版本同期发布</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <div class="anchor-bar" data-anchor-bar>
    <div class="wrap">
      <ul class="anchor-bar__list">
        <li><a class="anchor-bar__link" href="#origin">主张由来</a></li>
        <li><a class="anchor-bar__link" href="#route">阶段路线</a></li>
        <li><a class="anchor-bar__link" href="#team">团队与分工</a></li>
        <li><a class="anchor-bar__link" href="#reach">服务范围</a></li>
        <li><a class="anchor-bar__link" href="#next">继续往下走</a></li>
      </ul>
    </div>
  </div>

  <section class="section" id="origin" data-reveal>
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow"><span>02</span>主张由来</p>
        <h2 class="section__title">常用访客的一天，就是我们定规矩的依据</h2>
        <p class="section__lede">“稳了就行”不是一句口号，是一条被用了十年的使用顺序。它来自大量访客每天固定重复的动作，而不是会议室里的想法。</p>
      </header>

      <div class="origin-list">
        <article class="origin-item">
          <span class="origin-item__idx mono">A</span>
          <h3 class="origin-item__title">早间通勤，手机先看一眼</h3>
          <p class="origin-item__text">在车上用手机浏览器打开登录面板，确认入口没变、版本号没跳，心里就有底。整个过程不用往下翻。</p>
        </article>
        <article class="origin-item">
          <span class="origin-item__idx mono">B</span>
          <h3 class="origin-item__title">白天在电脑前，收藏直接点</h3>
          <p class="origin-item__text">新版电脑端把收藏入口与常用操作放进首屏可见区域，坐下来就能点开昨天存的那个页面，省掉一层层找。</p>
        </article>
        <article class="origin-item">
          <span class="origin-item__idx mono">C</span>
          <h3 class="origin-item__title">晚间闲下来，顺手核对一遍</h3>
          <p class="origin-item__text">平板或手机上再看一眼版本，和白天用的那一端对不对得上。24 项功能差异点随时可查，临时想起来也能立刻确认。</p>
        </article>
      </div>

      <p class="origin-note">我们把这三步的顺序固定下来：先看自己在哪台设备上，再选对应入口，最后核对页面上方的版本号。路径短了，出错的机会就少了。</p>
    </div>
  </section>

  <section class="section section--route" id="route" data-reveal>
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow"><span>03</span>阶段路线</p>
        <h2 class="section__title">五个阶段，一次一次把路走短</h2>
        <p class="section__lede">十年里我们只朝一个方向改：让常用的人少点一次、少等一秒、少问一句。下面是这条路线上的五个刻度。</p>
      </header>

      <figure class="timeline-figure">
        <img src="{zhanqunpic:h:520w:1400}" width="1400" height="520" alt="横向时间轴信息图，五个阶段节点以警示橙标记，节点之间用细线连接" loading="lazy" decoding="async">
      </figure>

      <ol class="timeline">
        <li class="tl-item">
          <article class="tl-card" tabindex="0">
            <p class="tl-stage mono">阶段 01</p>
            <span class="tl-year mono">2016</span>
            <h3 class="tl-title">站点上线运营</h3>
            <p class="tl-text">永利官网中国站正式开放访问，第一批常用访客从那时起把这里设成日常入口。</p>
            <p class="tl-note">从第一天起，登录入口就固定在首屏位置，十年来没有挪过。</p>
          </article>
        </li>

        <li class="tl-item">
          <article class="tl-card" tabindex="0">
            <p class="tl-stage mono">阶段 02</p>
            <span class="tl-year mono">2021</span>
            <h3 class="tl-title">双端并行改造</h3>
            <p class="tl-text">手机版登录面板与电脑端访问拆成两条并行路径，各自独立维护、同时在线。</p>
            <p class="tl-note">两端分开跑，一端出状况不会把另一端也拖下去。</p>
          </article>
        </li>

        <li class="tl-item">
          <article class="tl-card" tabindex="0">
            <p class="tl-stage mono">阶段 03</p>
            <span class="tl-year mono">2023</span>
            <h3 class="tl-title">常用页面收藏上线</h3>
            <p class="tl-text">最多可保存 12 个自定义入口，登录后在各端同步，换设备也不用重新翻一遍。</p>
            <p class="tl-note">收藏位在电脑端首屏就能看到，不需要往下滚动。</p>
          </article>
        </li>

        <li class="tl-item">
          <article class="tl-card" tabindex="0">
            <p class="tl-stage mono">阶段 04</p>
            <span class="tl-year mono">2025</span>
            <h3 class="tl-title">帮助中心接入站内检索</h3>
            <p class="tl-text">登录、访问、双端差异、收藏、检索与版本对照六大类问题，输入关键词就能命中。</p>
            <p class="tl-note">120 余条帮助条目按类别归位，命中内容当场高亮。</p>
          </article>
        </li>

        <li class="tl-item">
          <article class="tl-card" tabindex="0">
            <p class="tl-stage mono">当前版本</p>
            <span class="tl-year mono">v3.2</span>
            <h3 class="tl-title">首页收成四个入口</h3>
            <p class="tl-text">手机版面板、电脑端访问、常用页面收藏、版本对照清单，四件事在首屏一次看全。</p>
            <p class="tl-note">版本对照清单在每次发布后 3 个工作日内同步更新。</p>
          </article>
        </li>
      </ol>
    </div>
  </section>

  <section class="num-band" data-reveal>
    <div class="wrap">
      <div class="num-grid">
        <div class="num">
          <span class="num__v mono">42<span class="num__u">万</span></span>
          <p class="num__l">累计服务的常用访问用户</p>
        </div>
        <div class="num">
          <span class="num__v mono">68<span class="num__u">%</span></span>
          <p class="num__l">做出过回访的访客占比</p>
        </div>
        <div class="num">
          <span class="num__v mono">1.1<span class="num__u">秒</span></span>
          <p class="num__l">电脑端首屏平均加载时间</p>
        </div>
        <div class="num">
          <span class="num__v mono">3<span class="num__u">分40秒</span></span>
          <p class="num__l">单次停留的平均时长</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="team" data-reveal>
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow"><span>04</span>团队与分工</p>
        <h2 class="section__title">28 个人，盯住三条线</h2>
        <p class="section__lede">站点由内容与产品运营团队负责，按版本维护、内容编辑、用户支持三个方向分组。每一组只对自己那一条线负责，出了问题找得到人。</p>
      </header>

      <div class="team-grid">
        <article class="team-card">
          <span class="team-card__num mono">09</span>
          <h3 class="team-card__role">版本维护</h3>
          <ul class="team-card__list">
            <li>手机版与电脑端功能同步</li>
            <li>每季度一次功能版本发布</li>
            <li>对照清单随版本跟进</li>
          </ul>
        </article>

        <article class="team-card">
          <span class="team-card__num mono">08</span>
          <h3 class="team-card__role">内容编辑</h3>
          <ul class="team-card__list">
            <li>帮助条目每月更新一批</li>
            <li>专题内容与页面文案维护</li>
            <li>中文提示与说明统一措辞</li>
          </ul>
        </article>

        <article class="team-card">
          <span class="team-card__num mono">11</span>
          <h3 class="team-card__role">用户支持</h3>
          <ul class="team-card__list">
            <li>工作日 9:00-18:00 有人值守</li>
            <li>跟进反馈通道提交的问题</li>
            <li>把高频问题回流给内容组</li>
          </ul>
        </article>
      </div>

      <figure class="team-figure">
        <img src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="三个功能区块与连接线构成的抽象分工图，区块内以等宽字体标注版本维护、内容编辑与用户支持职能" loading="lazy" decoding="async">
        <figcaption class="team-figure__cap">三条线并行推进，季度节奏与月度节奏互不打断</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--reach" id="reach" data-reveal>
    <div class="wrap">
      <header class="section__head">
        <p class="section__eyebrow"><span>05</span>服务范围</p>
        <h2 class="section__title">谁在用，在哪用，什么时候用</h2>
        <p class="section__lede">如果你的访问习惯是固定的、每天都要进来看一眼，那你就是这个站点最标准的服务对象。</p>
      </header>

      <div class="reach-grid">
        <article class="reach-card">
          <h3 class="reach-card__title">覆盖 31 个省级行政区</h3>
          <p class="reach-card__text">从沿海到内陆，常用访客分布在 31 个省级行政区，访问时段集中在早间通勤与晚间闲时两个波段。</p>
        </article>

        <article class="reach-card">
          <h3 class="reach-card__title">三类终端都支持</h3>
          <p class="reach-card__text">手机浏览器、平板与电脑浏览器均可正常访问，各自的布局按屏幕尺寸分开调整，不做一刀切。</p>
        </article>

        <article class="reach-card reach-card--emerald">
          <h3 class="reach-card__title">固定访问的人最省事</h3>
          <p class="reach-card__text">入口不动、版本公开、收藏同步，日常反复进来的人不需要每次重新认路。</p>
        </article>

        <article class="reach-card reach-card--wine">
          <h3 class="reach-card__title">临时核对也一样好办</h3>
          <p class="reach-card__text">偶尔需要比对手机版与电脑端差异的访客，直接打开版本对照清单，几十秒就能看完。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="closing" id="next" data-reveal>
    <div class="wrap">
      <div class="closing-inner">
        <p class="section__eyebrow"><span>06</span>继续往下走</p>
        <h2 class="closing-title">看完了，不如走一遍</h2>
        <p class="closing-text">了解了这条路线怎么来的，下一步就是自己用一次。挑你现在手边这台设备，从对应的入口进去看看。</p>
        <div class="closing-links">
          <a class="btn btn--primary" href="/experience/">进入体验中心</a>
          <a class="btn btn--ghost" href="/faq/">打开帮助中心</a>
        </div>
      </div>
    </div>
  </section>

  <button class="to-top" type="button" data-top aria-label="返回顶部">↑</button>
</main>

.page-about {
  --about-pad: clamp(56px, 9vw, 128px);
  position: relative;
  background: var(--bg);
  color: var(--text);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 96px);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -10%;
  width: 74%;
  height: 86%;
  background: var(--deep-sea);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -2;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.26;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 82%, transparent 100%);
}

.page-about .breadcrumb {
  margin-bottom: clamp(28px, 5vw, 56px);
}

.page-about .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.page-about .hero-copy h1 {
  margin: 16px 0 20px;
  font-size: clamp(32px, 6.4vw, 68px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--white);
}

.page-about .hero-lede {
  max-width: 34em;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.page-about .hero-facts b {
  font-size: 20px;
  color: var(--alert);
  letter-spacing: 0.04em;
}

.page-about .hero-media {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.page-about .hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-about .hero-media__cap {
  padding: 12px 2px 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 锚点条 ---------- */
.page-about .anchor-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 32, 54, 0.55);
}

.page-about .anchor-bar__list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 通用段落 ---------- */
.page-about .section {
  padding: var(--about-pad) 0;
}

.page-about .section__head {
  max-width: 46em;
  margin-bottom: clamp(36px, 6vw, 68px);
}

.page-about .section__title {
  margin: 14px 0 16px;
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .section__lede {
  margin: 0;
  max-width: 38em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 主张由来 ---------- */
.page-about .origin-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.page-about .origin-item {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--deep-dive);
  transition: transform 0.3s var(--ease), border-top-color 0.3s var(--ease);
}

.page-about .origin-item:hover {
  transform: translateY(-3px);
  border-top-color: var(--cyan);
}

.page-about .origin-item__idx {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-about .origin-item__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--white);
}

.page-about .origin-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .origin-note {
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 22px 0 22px 22px;
  max-width: 54em;
  border-left: 2px solid var(--alert);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--ice);
}

/* ---------- 阶段路线 ---------- */
.page-about .section--route {
  background: linear-gradient(180deg, transparent 0%, rgba(18, 59, 92, 0.22) 42%, transparent 100%);
}

.page-about .timeline-figure {
  margin: 0 0 clamp(48px, 7vw, 88px);
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-about .timeline-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
  display: grid;
  gap: clamp(36px, 6vw, 76px);
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  width: 1px;
  background: var(--line);
}

.page-about .tl-item {
  position: relative;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--alert);
  transform: rotate(45deg);
}

.page-about .tl-card {
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  outline: none;
}

.page-about .tl-card:focus-visible {
  box-shadow: 0 0 0 2px var(--cyan);
}

.page-about .tl-stage {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-about .tl-year {
  display: block;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--alert);
}

.page-about .tl-title {
  margin: 14px 0 10px;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  color: var(--white);
}

.page-about .tl-text {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .tl-note {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cyan);
  transition: max-height 0.36s var(--ease), opacity 0.28s var(--ease), margin-top 0.36s var(--ease);
}

.page-about .tl-card:hover .tl-note,
.page-about .tl-card:focus-within .tl-note {
  max-height: 108px;
  margin-top: 12px;
  opacity: 1;
}

/* ---------- 数字带 ---------- */
.page-about .num-band {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--deep-sea);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-about .num-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
}

.page-about .num {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.page-about .num__v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-about .num__u {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--alert);
  letter-spacing: 0.04em;
}

.page-about .num__l {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 团队与分工 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 28px);
}

.page-about .team-card {
  padding: 26px 22px 28px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.page-about .team-card__num {
  display: block;
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: var(--alert);
}

.page-about .team-card__role {
  margin: 14px 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}

.page-about .team-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-about .team-card__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-about .team-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

.page-about .team-figure {
  margin: clamp(36px, 6vw, 64px) 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-about .team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .team-figure__cap {
  padding: 12px 2px 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 服务范围 ---------- */
.page-about .section--reach {
  background: rgba(15, 90, 78, 0.16);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-about .reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .reach-card {
  padding: 28px 24px 30px;
  background: var(--panel);
}

.page-about .reach-card--emerald {
  background: var(--emerald);
}

.page-about .reach-card--wine {
  background: var(--wine);
}

.page-about .reach-card__title {
  margin: 0 0 12px;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--white);
}

.page-about .reach-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .reach-card--emerald .reach-card__text,
.page-about .reach-card--wine .reach-card__text {
  color: rgba(232, 241, 248, 0.86);
}

/* ---------- 结尾 ---------- */
.page-about .closing {
  padding: var(--about-pad) 0 calc(var(--about-pad) * 1.1);
}

.page-about .closing-inner {
  max-width: 44em;
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 2px solid var(--cyan);
}

.page-about .closing-title {
  margin: 14px 0 16px;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--white);
}

.page-about .closing-text {
  margin: 0 0 clamp(26px, 4vw, 40px);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-about .closing-links .btn {
  min-width: 168px;
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-about .origin-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .origin-item:first-child {
    grid-column: 1 / -1;
  }

  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-about .reach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-about .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 80px);
  }

  .page-about .timeline {
    padding-left: 0;
  }

  .page-about .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-about .tl-item {
    width: 50%;
    padding-right: 56px;
  }

  .page-about .tl-item::before {
    left: auto;
    right: -6px;
    top: 22px;
  }

  .page-about .tl-item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 56px;
  }

  .page-about .tl-item:nth-child(even)::before {
    right: auto;
    left: -6px;
  }

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

  .page-about .origin-item:first-child {
    grid-column: auto;
  }
}

@media (min-width: 1100px) {
  .page-about .num-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .page-about .about-hero::before {
    right: -30%;
    bottom: -6%;
    width: 118%;
    height: 62%;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .origin-item,
  .page-about .tl-note {
    transition: none;
  }

  .page-about .origin-item:hover {
    transform: none;
  }
}