.page-about {
  --about-ink-92: rgba(14, 22, 33, 0.92);
  --about-ink-15: rgba(14, 22, 33, 0.15);
  --about-paper-08: rgba(246, 241, 231, 0.08);
  background: var(--paper);
  color: var(--rock);
}

/* ============ 首屏 ============ */
.page-about .about-top {
  padding-top: clamp(18px, 3.5vw, 36px);
  padding-bottom: clamp(30px, 5vw, 60px);
  border-bottom: 1px solid var(--ink-a16);
  background:
    linear-gradient(180deg, var(--ink-a06), transparent 62%),
    var(--paper);
}

.page-about .about-hero {
  margin-top: clamp(26px, 5vw, 56px);
}

.page-about .about-hero .eyebrow {
  margin: 0 0 16px;
  color: var(--moss);
  font-size: 11px;
}

.page-about .about-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 800;
}

.page-about .about-lede {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 60ch;
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.85;
  color: var(--rock);
}

.page-about .hero-stats {
  margin: clamp(28px, 4.5vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
}

.page-about .hero-stats .stat {
  background: var(--paper);
  padding: 16px 15px 18px;
}

.page-about .hero-stats dt {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-about .hero-stats dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
}

.page-about .stat-num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-about .stat-unit {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--moss);
}

/* ============ 章节索引 + 正文 ============ */
.page-about .about-body {
  display: grid;
  gap: 34px;
  padding-top: clamp(34px, 5.5vw, 68px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.page-about .about-index {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  min-width: 0;
}

.page-about .index-title {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--moss);
  text-transform: uppercase;
}

.page-about .index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .index-list::-webkit-scrollbar {
  display: none;
}

.page-about .index-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  white-space: nowrap;
  border: 1px solid var(--ink-a16);
  color: var(--rock);
  text-decoration: none;
  font-size: 13px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-about .index-list a:hover,
.page-about .index-list a:focus-visible {
  border-color: var(--maple);
  color: var(--maple);
  background: var(--white);
}

.page-about .idx-num {
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.page-about .about-sections {
  min-width: 0;
}

.page-about .about-sec {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .about-sec + .about-sec {
  margin-top: clamp(46px, 6.5vw, 84px);
  padding-top: clamp(38px, 5.5vw, 62px);
  border-top: 1px solid var(--ink-a16);
}

.page-about .sec-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
}

.page-about .sec-num {
  flex: none;
  margin-top: 5px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--maple);
  border: 1px solid var(--maple);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-about .about-sec:target .sec-num {
  background: var(--maple);
  color: var(--white);
}

.page-about .sec-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 4.2vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 800;
}

.page-about .prose {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--rock);
}

.page-about .prose:last-child {
  margin-bottom: 0;
}

/* ============ 北境面板 ============ */
.page-about .north-panel {
  display: grid;
  margin: clamp(24px, 4vw, 38px) 0 0;
  background: var(--ink);
  overflow: hidden;
}

.page-about .north-panel img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: clamp(250px, 44vw, 420px);
  object-fit: cover;
  opacity: 0.7;
}

.page-about .north-panel-body {
  grid-area: 1 / 1;
  align-self: end;
  padding: clamp(20px, 3.6vw, 40px);
  background: linear-gradient(to top, var(--about-ink-92) 20%, var(--about-ink-15) 100%);
  color: var(--paper);
}

.page-about .north-panel-body h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.6vw, 23px);
  line-height: 1.35;
  color: var(--white);
}

.page-about .north-panel-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-a70);
}

/* ============ 定位三点 ============ */
.page-about .position-points {
  margin-top: clamp(20px, 3vw, 30px);
  display: grid;
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
  grid-template-columns: minmax(0, 1fr);
}

.page-about .point {
  background: var(--white);
  padding: 18px 16px 22px;
}

.page-about .point h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.page-about .point p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
}

/* ============ 时间轴 ============ */
.page-about .timeline-figure {
  margin: clamp(22px, 3.5vw, 34px) 0 0;
}

.page-about .timeline {
  list-style: none;
  margin: clamp(24px, 3.5vw, 34px) 0 0;
  padding: 0;
}

.page-about .tl-item {
  position: relative;
  border-left: 1px solid var(--ink-a16);
  padding: 0 0 clamp(20px, 3vw, 28px) 20px;
}

.page-about .tl-item:last-child {
  padding-bottom: 0;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border: 1px solid var(--paper);
}

.page-about .tl-year {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--maple);
}

.page-about .tl-body h3 {
  margin: 5px 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}

.page-about .tl-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rock);
}

/* ============ 团队 ============ */
.page-about .team-layout {
  display: grid;
  gap: 26px;
}

.page-about .team-bars {
  margin-top: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 15px;
}

.page-about .bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  gap: 12px;
}

.page-about .bar-name {
  font-size: 14px;
  color: var(--ink);
}

.page-about .bar-count {
  font-size: 12.5px;
  color: var(--rock);
  transition: color 0.18s var(--ease);
}

.page-about .bar-row:hover .bar-count {
  color: var(--maple);
}

.page-about .bar-track {
  height: 8px;
  background: var(--mist);
}

.page-about .bar-fill {
  display: block;
  height: 100%;
}

.page-about .bar-fill--edit { width: 42.85%; background: var(--ice); }
.page-about .bar-fill--tech { width: 21.43%; background: var(--maple); }
.page-about .bar-fill--advisor { width: 19.05%; background: var(--aurora); }
.page-about .bar-fill--review { width: 16.67%; background: var(--gold); }

.page-about .team-cadence {
  margin-top: clamp(22px, 3vw, 30px);
  display: grid;
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
  grid-template-columns: minmax(0, 1fr);
}

.page-about .cadence {
  background: var(--white);
  padding: 16px 16px 18px;
}

.page-about .cadence-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  color: var(--ice);
  margin-bottom: 7px;
}

.page-about .cadence p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rock);
}

.page-about .team-figure {
  margin: 0;
}

/* ============ 服务主题矩阵 ============ */
.page-about .topic-matrix {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
}

.page-about .topic {
  background: var(--white);
  padding: 16px 15px 18px;
  transition: background-color 0.18s var(--ease);
}

.page-about .topic:hover {
  background: var(--paper);
}

.page-about .topic-num {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 9px;
}

.page-about .topic-name {
  display: block;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 5px;
}

.page-about .topic-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--moss);
}

/* ============ 认证 ============ */
.page-about .cert-row {
  margin-top: clamp(22px, 3.5vw, 32px);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.page-about .cert {
  border: 1px solid var(--ink-a16);
  background: var(--white);
}

.page-about .cert[open] {
  border-color: var(--gold);
}

.page-about .cert-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.page-about .cert-summary::-webkit-details-marker {
  display: none;
}

.page-about .cert-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--moss);
}

.page-about .cert[open] .cert-summary::after {
  content: "–";
  color: var(--maple);
}

.page-about .cert-shield {
  flex: none;
  width: 24px;
  height: 29px;
  color: var(--gold);
}

.page-about .cert--version .cert-shield { color: var(--ice); }
.page-about .cert--service .cert-shield { color: var(--aurora); }

.page-about .cert-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.page-about .cert-desc {
  margin: 0;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--ink-a06);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
}

.page-about .partner-note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--aurora);
  background: var(--ink-a06);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--rock);
}

/* ============ 下一页入口 ============ */
.page-about .about-next {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(38px, 6.5vw, 76px) 0;
  margin-top: clamp(40px, 6vw, 72px);
}

.page-about .about-next h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 3.6vw, 34px);
  line-height: 1.25;
  color: var(--white);
}

.page-about .about-next p {
  margin: 0 0 clamp(24px, 3.5vw, 32px);
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--paper-a70);
}

.page-about .next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--paper-a16);
  border: 1px solid var(--paper-a16);
}

.page-about .next-links a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 17px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.18s var(--ease);
}

.page-about .next-links a:hover,
.page-about .next-links a:focus-visible {
  background: var(--about-paper-08);
}

.page-about .next-link-label {
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--white);
}

.page-about .next-link-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-a70);
}

/* ============ 断点 ============ */
@media (min-width: 560px) {
  .page-about .team-cadence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 620px) {
  .page-about .topic-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .next-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .page-about .tl-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 20px;
  }
  .page-about .position-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .cert-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 860px) {
  .page-about .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .hero-stats .stat {
    padding: 20px 18px 22px;
  }
}

@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(28px, 4vw, 44px);
    align-items: start;
  }
  .page-about .team-figure {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (min-width: 960px) {
  .page-about .about-body {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .page-about .about-index {
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }
  .page-about .index-list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-about .index-list li + li {
    margin-top: 1px;
  }
  .page-about .index-list a {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    box-sizing: border-box;
  }
  .page-about .index-list a:hover,
  .page-about .index-list a:focus-visible {
    border-left-color: var(--maple);
    background: var(--ink-a06);
    color: var(--maple);
  }
  .page-about .prose {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .page-about .topic-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .next-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .index-list a,
  .page-about .topic,
  .page-about .next-links a,
  .page-about .bar-count,
  .page-about .sec-num {
    transition: none;
  }
}


<main id="main-content" class="page-about">
  <div class="about-top">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑导航">
        <ul>
          <li><a href="/">首页 · 官方入口</a></li>
          <li aria-current="page">品牌档案</li>
        </ul>
      </nav>

      <header class="about-hero">
        <p class="eyebrow">品牌档案 · 资料服务自 2017 年起</p>
        <h1 class="display display-xl">九年，<br>把资料服务做成一份档案</h1>
        <p class="about-lede">加拿大预测28 自 2017 年起为全球华人提供资料查阅与版本服务。官方入口、品牌认证徽章和版本编号，是您识别这份服务的三个标记；换一台设备回来核对账号与版本，也从这里开始。</p>

        <dl class="hero-stats">
          <div class="stat">
            <dt>持续运营</dt>
            <dd><span class="stat-num mono">9</span><span class="stat-unit">年</span></dd>
          </div>
          <div class="stat">
            <dt>覆盖国家和地区</dt>
            <dd><span class="stat-num mono">28</span><span class="stat-unit">个</span></dd>
          </div>
          <div class="stat">
            <dt>资料服务团队</dt>
            <dd><span class="stat-num mono">42</span><span class="stat-unit">人</span></dd>
          </div>
          <div class="stat">
            <dt>用户满意度调查</dt>
            <dd><span class="stat-num mono">96.4</span><span class="stat-unit">%</span></dd>
          </div>
        </dl>
      </header>
    </div>
  </div>

  <div class="shell about-body">
    <aside class="about-index" aria-label="档案章节索引">
      <p class="index-title mono">档案目录</p>
      <ol class="index-list">
        <li><a href="#positioning"><span class="idx-num mono">01</span><span>定位与运营</span></a></li>
        <li><a href="#timeline"><span class="idx-num mono">02</span><span>发展历程</span></a></li>
        <li><a href="#team"><span class="idx-num mono">03</span><span>团队构成</span></a></li>
        <li><a href="#service"><span class="idx-num mono">04</span><span>服务说明</span></a></li>
        <li><a href="#certification"><span class="idx-num mono">05</span><span>认证与伙伴</span></a></li>
      </ol>
    </aside>

    <div class="about-sections">
      <section id="positioning" class="about-sec" data-reveal>
        <div class="sec-head">
          <span class="sec-num mono" aria-hidden="true">01</span>
          <h2 class="display display-m">从一份说明文档，做到一份长期档案</h2>
        </div>

        <p class="prose">2017 年，这份资料服务从一份持续更新的说明文档起步。九年之后，注册用户累计 186,000，月活跃用户 42,000，其中约 72% 的访问来自手机。用户分布在 28 个国家和地区，多数是回访的老朋友——换设备、换网络、隔一段时间再回来，他们关心的是同一件事：这次看到的版本，和上次是不是同一条线。</p>

        <div class="north-panel">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="冰原裂纹与冷蓝极光交叠的抽象纹理，表面覆盖细线数据网格">
          <div class="north-panel-body">
            <h3>官方入口与认证徽章，是您辨认这份服务的起点</h3>
            <p>从任一官方入口进入，页面上都会同时出现当期的版本编号与更新时间。带认证徽章的页面，意味着这份内容由服务团队直接维护。您不需要记住某个具体网址，只要认这三样东西，就能确认自己站在正确的门口。</p>
          </div>
        </div>

        <div class="position-points">
          <div class="point">
            <h3>官方入口</h3>
            <p>手机、平板、电脑打开的是同一套资料，栏目位置保持稳定，换设备不用重新摸索路径。</p>
          </div>
          <div class="point">
            <h3>版本编号</h3>
            <p>每份资料的编号跟随内容走，苹果端与本机记录里的编号可以互相对照。</p>
          </div>
          <div class="point">
            <h3>更新时间</h3>
            <p>资料更新后，页面上的时间随之变动，回访时先看时间，就知道有没有新内容。</p>
          </div>
        </div>
      </section>

      <section id="timeline" class="about-sec" data-reveal>
        <div class="sec-head">
          <span class="sec-num mono" aria-hidden="true">02</span>
          <h2 class="display display-m">六个节点，连成一条服务线</h2>
        </div>

        <p class="prose">九年里，服务的形态改了几次：从只能看，到能按条件查；从只在电脑上打开，到手机上随手翻；从只讲资料本身，到把使用中遇到的问题也写进去。下面这几个年份，是回头看得最清楚的几步。</p>

        <figure class="figure figure--wide timeline-figure">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="从 2017 到 2026 的横向时间刻度与交错数据节点，暖金与冰原蓝配色" loading="lazy" decoding="async">
          <figcaption class="figure-caption">2017—2026，资料服务的关键节点与形态变化</figcaption>
        </figure>

        <ol class="timeline">
          <li class="tl-item">
            <span class="tl-year mono">2017</span>
            <div class="tl-body">
              <h3>资料服务启动</h3>
              <p>以持续更新的说明文档为主，服务最早一批回访用户，确立了版本编号的使用方式。</p>
            </div>
          </li>
          <li class="tl-item">
            <span class="tl-year mono">2019</span>
            <div class="tl-body">
              <h3>移动端资料中心上线</h3>
              <p>手机访问不再需要缩放着看，目录、正文与时间信息在小屏幕上重新排布，移动端使用量此后逐年上升。</p>
            </div>
          </li>
          <li class="tl-item">
            <span class="tl-year mono">2021</span>
            <div class="tl-body">
              <h3>华人服务介绍板块上线</h3>
              <p>把换设备登录、账号核对、反馈提交这些反复被问到的问题，整理成可以自己翻到的说明。</p>
            </div>
          </li>
          <li class="tl-item">
            <span class="tl-year mono">2023</span>
            <div class="tl-body">
              <h3>苹果端版本档案建立</h3>
              <p>为苹果端单独建立版本记录序列，用户可以按版本号找到对应日期的说明与变更内容。</p>
            </div>
          </li>
          <li class="tl-item">
            <span class="tl-year mono">2025</span>
            <div class="tl-body">
              <h3>测试版反馈汇总机制启用</h3>
              <p>测试阶段收到的意见进入汇总流程，每条反馈带上处理状态，方便提交者回头查进展。</p>
            </div>
          </li>
          <li class="tl-item">
            <span class="tl-year mono">2026</span>
            <div class="tl-body">
              <h3>品牌认证实力专区上线</h3>
              <p>入口认证、版本认证、服务认证三级徽章集中呈现，官方渠道的辨认方式从此一目了然。</p>
            </div>
          </li>
        </ol>
      </section>

      <section id="team" class="about-sec" data-reveal>
        <div class="sec-head">
          <span class="sec-num mono" aria-hidden="true">03</span>
          <h2 class="display display-m">42 个人，四道工序</h2>
        </div>

        <div class="team-layout">
          <div class="team-main">
            <p class="prose">团队 42 人，分为四组：资料编辑 18 人负责整理与撰写，技术支持 9 人处理设备与访问层面的问题，服务顾问 8 人对接咨询与版本核对，内容审核 7 人在发布前过一遍准确性与表达。四道工序串起来，一份资料从整理到上线，中间不会出现没人接手的情况。</p>
            <p class="prose">节奏上，每周进行 2 次常规资料更新，每月发布 1 次版本汇总。也就是说，您每周都能看到新内容，每月能看到一次完整的变更清单。</p>

            <div class="team-bars">
              <div class="bar-row">
                <div class="bar-meta">
                  <span class="bar-name">资料编辑</span>
                  <span class="bar-count mono">18 人</span>
                </div>
                <div class="bar-track"><span class="bar-fill bar-fill--edit"></span></div>
              </div>
              <div class="bar-row">
                <div class="bar-meta">
                  <span class="bar-name">技术支持</span>
                  <span class="bar-count mono">9 人</span>
                </div>
                <div class="bar-track"><span class="bar-fill bar-fill--tech"></span></div>
              </div>
              <div class="bar-row">
                <div class="bar-meta">
                  <span class="bar-name">服务顾问</span>
                  <span class="bar-count mono">8 人</span>
                </div>
                <div class="bar-track"><span class="bar-fill bar-fill--advisor"></span></div>
              </div>
              <div class="bar-row">
                <div class="bar-meta">
                  <span class="bar-name">内容审核</span>
                  <span class="bar-count mono">7 人</span>
                </div>
                <div class="bar-track"><span class="bar-fill bar-fill--review"></span></div>
              </div>
            </div>

            <div class="team-cadence">
              <div class="cadence">
                <span class="cadence-num mono">2</span>
                <p>每周常规资料更新次数</p>
              </div>
              <div class="cadence">
                <span class="cadence-num mono">1</span>
                <p>每月版本汇总发布次数</p>
              </div>
            </div>
          </div>

          <figure class="figure figure--4x3 team-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间工作台上的屏幕光影、键盘与资料卡片局部，画面中没有人物面部" loading="lazy" decoding="async">
            <figcaption class="figure-caption">资料编辑在夜间整理的发布前稿件</figcaption>
          </figure>
        </div>
      </section>

      <section id="service" class="about-sec" data-reveal>
        <div class="sec-head">
          <span class="sec-num mono" aria-hidden="true">04</span>
          <h2 class="display display-m">华人服务介绍板块：8 个主题，24 篇说明</h2>
        </div>

        <p class="prose">被问得最多的问题，都收在这里。华人服务介绍板块按使用场景分成 8 个主题，共 24 篇说明，从第一次打开到换设备回来，从下载资料到提交反馈，都能找到对应的那篇。每篇说明写得尽量短，先给结论，再给步骤，最后告诉您如果还是不通该找谁。</p>

        <ul class="topic-matrix">
          <li class="topic">
            <span class="topic-num mono">01</span>
            <span class="topic-name">账号核对</span>
            <span class="topic-desc">换设备后确认登录状态与账号信息是否对应。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">02</span>
            <span class="topic-name">换设备登录</span>
            <span class="topic-desc">从手机换到平板或电脑时的登录路径与注意点。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">03</span>
            <span class="topic-name">版本记录</span>
            <span class="topic-desc">按版本号、按更新时间找到历史记录的查阅方式。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">04</span>
            <span class="topic-name">下载说明</span>
            <span class="topic-desc">苹果端与移动端资料各自的获取方式与存放位置。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">05</span>
            <span class="topic-name">移动端使用</span>
            <span class="topic-desc">手机上查阅、回看与快速返回的常用操作。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">06</span>
            <span class="topic-name">反馈提交</span>
            <span class="topic-desc">测试版问题与建议的提交渠道和处理进度查看。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">07</span>
            <span class="topic-name">服务时间</span>
            <span class="topic-desc">客服在线时段、回复节奏与节假日安排。</span>
          </li>
          <li class="topic">
            <span class="topic-num mono">08</span>
            <span class="topic-name">常见问题</span>
            <span class="topic-desc">高频疑问的集中解答，附相关栏目入口。</span>
          </li>
        </ul>
      </section>

      <section id="certification" class="about-sec" data-reveal>
        <div class="sec-head">
          <span class="sec-num mono" aria-hidden="true">05</span>
          <h2 class="display display-m">三级认证，各管一段</h2>
        </div>

        <p class="prose">品牌认证徽章分为入口认证、版本认证、服务认证 3 级，编号统一采用 CN-2026 前缀加四位序号。三级并不是等级高低之分，而是各自覆盖一个环节——认入口、认版本、认服务，合起来才知道眼前这份资料是谁发的、发的哪一版、出了问题找谁。</p>

        <div class="cert-row">
          <details class="cert cert--entry">
            <summary class="cert-summary">
              <svg class="cert-shield" viewBox="0 0 40 48" aria-hidden="true" focusable="false">
                <path d="M20 2 37 9v16c0 10-8 18-17 21C11 43 3 35 3 25V9Z" fill="none" stroke="currentColor" stroke-width="2.4"></path>
                <path d="M13 24l5 5 10-11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="square"></path>
              </svg>
              <span class="cert-name">入口认证</span>
            </summary>
            <p class="cert-desc">显示在官方渠道的页面顶部，确认您进入的是团队直接维护的入口，并附带当期更新时间的标记。</p>
          </details>

          <details class="cert cert--version">
            <summary class="cert-summary">
              <svg class="cert-shield" viewBox="0 0 40 48" aria-hidden="true" focusable="false">
                <path d="M20 2 37 9v16c0 10-8 18-17 21C11 43 3 35 3 25V9Z" fill="none" stroke="currentColor" stroke-width="2.4"></path>
                <path d="M12 22h16M12 28h10" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="square"></path>
              </svg>
              <span class="cert-name">版本认证</span>
            </summary>
            <p class="cert-desc">与具体的版本编号绑定，说明这一版资料的发布日期、覆盖内容和它替换掉的上一版是哪一条记录。</p>
          </details>

          <details class="cert cert--service">
            <summary class="cert-summary">
              <svg class="cert-shield" viewBox="0 0 40 48" aria-hidden="true" focusable="false">
                <path d="M20 2 37 9v16c0 10-8 18-17 21C11 43 3 35 3 25V9Z" fill="none" stroke="currentColor" stroke-width="2.4"></path>
                <circle cx="20" cy="23" r="5" fill="none" stroke="currentColor" stroke-width="2.4"></circle>
                <path d="M20 13v3M20 30v3M10 23h3M27 23h3" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"></path>
              </svg>
              <span class="cert-name">服务认证</span>
            </summary>
            <p class="cert-desc">对应服务说明的分类与负责团队，方便您在遇到问题时，直接找到能接手的那一组人。</p>
          </details>
        </div>

        <p class="partner-note">服务走到今天，也依靠 12 家内容分发与技术监测伙伴的协作：一部分负责分发渠道的覆盖，另一部分负责访问可用性与版本变更的监测。遇到跨网络、跨设备的访问异常，通常就是从这些伙伴的回传数据里先发现的。</p>
      </section>
    </div>
  </div>

  <section class="about-next">
    <div class="shell">
      <h2 class="display display-m">下一步，看您最关心的那一块</h2>
      <p>想先拿资料，去产品与资料下载；想知道最近改了什么，去更新与反馈；手上有具体问题，知识中心通常能直接给出步骤；谈合作或找人对接，合作联系里有完整的联系方式。</p>
      <ul class="next-links">
        <li>
          <a href="/products/">
            <span class="next-link-label">产品与资料下载</span>
            <span class="next-link-desc">苹果端版本档案与移动端资料中心</span>
          </a>
        </li>
        <li>
          <a href="/updates/">
            <span class="next-link-label">更新与反馈</span>
            <span class="next-link-desc">近期变更、测试版反馈处理进展</span>
          </a>
        </li>
        <li>
          <a href="/knowledge/">
            <span class="next-link-label">知识中心</span>
            <span class="next-link-desc">换设备登录、版本记录与下载说明</span>
          </a>
        </li>
        <li>
          <a href="/cooperation/">
            <span class="next-link-label">合作联系</span>
            <span class="next-link-desc">品牌合作、资料服务与版本核对协助</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</main>

.page-about {
  --about-ink-92: rgba(14, 22, 33, 0.92);
  --about-ink-15: rgba(14, 22, 33, 0.15);
  --about-paper-08: rgba(246, 241, 231, 0.08);
  background: var(--paper);
  color: var(--rock);
}

/* ============ 首屏 ============ */
.page-about .about-top {
  padding-top: clamp(18px, 3.5vw, 36px);
  padding-bottom: clamp(30px, 5vw, 60px);
  border-bottom: 1px solid var(--ink-a16);
  background:
    linear-gradient(180deg, var(--ink-a06), transparent 62%),
    var(--paper);
}

.page-about .about-hero {
  margin-top: clamp(26px, 5vw, 56px);
}

.page-about .about-hero .eyebrow {
  margin: 0 0 16px;
  color: var(--moss);
  font-size: 11px;
}

.page-about .about-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 800;
}

.page-about .about-lede {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 60ch;
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.85;
  color: var(--rock);
}

.page-about .hero-stats {
  margin: clamp(28px, 4.5vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
}

.page-about .hero-stats .stat {
  background: var(--paper);
  padding: 16px 15px 18px;
}

.page-about .hero-stats dt {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-about .hero-stats dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
}

.page-about .stat-num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-about .stat-unit {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--moss);
}

/* ============ 章节索引 + 正文 ============ */
.page-about .about-body {
  display: grid;
  gap: 34px;
  padding-top: clamp(34px, 5.5vw, 68px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.page-about .about-index {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  min-width: 0;
}

.page-about .index-title {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--moss);
  text-transform: uppercase;
}

.page-about .index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .index-list::-webkit-scrollbar {
  display: none;
}

.page-about .index-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  white-space: nowrap;
  border: 1px solid var(--ink-a16);
  color: var(--rock);
  text-decoration: none;
  font-size: 13px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-about .index-list a:hover,
.page-about .index-list a:focus-visible {
  border-color: var(--maple);
  color: var(--maple);
  background: var(--white);
}

.page-about .idx-num {
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.page-about .about-sections {
  min-width: 0;
}

.page-about .about-sec {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .about-sec + .about-sec {
  margin-top: clamp(46px, 6.5vw, 84px);
  padding-top: clamp(38px, 5.5vw, 62px);
  border-top: 1px solid var(--ink-a16);
}

.page-about .sec-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
}

.page-about .sec-num {
  flex: none;
  margin-top: 5px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--maple);
  border: 1px solid var(--maple);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-about .about-sec:target .sec-num {
  background: var(--maple);
  color: var(--white);
}

.page-about .sec-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 4.2vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 800;
}

.page-about .prose {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--rock);
}

.page-about .prose:last-child {
  margin-bottom: 0;
}

/* ============ 北境面板 ============ */
.page-about .north-panel {
  display: grid;
  margin: clamp(24px, 4vw, 38px) 0 0;
  background: var(--ink);
  overflow: hidden;
}

.page-about .north-panel img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: clamp(250px, 44vw, 420px);
  object-fit: cover;
  opacity: 0.7;
}

.page-about .north-panel-body {
  grid-area: 1 / 1;
  align-self: end;
  padding: clamp(20px, 3.6vw, 40px);
  background: linear-gradient(to top, var(--about-ink-92) 20%, var(--about-ink-15) 100%);
  color: var(--paper);
}

.page-about .north-panel-body h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.6vw, 23px);
  line-height: 1.35;
  color: var(--white);
}

.page-about .north-panel-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-a70);
}

/* ============ 定位三点 ============ */
.page-about .position-points {
  margin-top: clamp(20px, 3vw, 30px);
  display: grid;
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
  grid-template-columns: minmax(0, 1fr);
}

.page-about .point {
  background: var(--white);
  padding: 18px 16px 22px;
}

.page-about .point h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.page-about .point p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
}

/* ============ 时间轴 ============ */
.page-about .timeline-figure {
  margin: clamp(22px, 3.5vw, 34px) 0 0;
}

.page-about .timeline {
  list-style: none;
  margin: clamp(24px, 3.5vw, 34px) 0 0;
  padding: 0;
}

.page-about .tl-item {
  position: relative;
  border-left: 1px solid var(--ink-a16);
  padding: 0 0 clamp(20px, 3vw, 28px) 20px;
}

.page-about .tl-item:last-child {
  padding-bottom: 0;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border: 1px solid var(--paper);
}

.page-about .tl-year {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--maple);
}

.page-about .tl-body h3 {
  margin: 5px 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}

.page-about .tl-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rock);
}

/* ============ 团队 ============ */
.page-about .team-layout {
  display: grid;
  gap: 26px;
}

.page-about .team-bars {
  margin-top: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 15px;
}

.page-about .bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  gap: 12px;
}

.page-about .bar-name {
  font-size: 14px;
  color: var(--ink);
}

.page-about .bar-count {
  font-size: 12.5px;
  color: var(--rock);
  transition: color 0.18s var(--ease);
}

.page-about .bar-row:hover .bar-count {
  color: var(--maple);
}

.page-about .bar-track {
  height: 8px;
  background: var(--mist);
}

.page-about .bar-fill {
  display: block;
  height: 100%;
}

.page-about .bar-fill--edit { width: 42.85%; background: var(--ice); }
.page-about .bar-fill--tech { width: 21.43%; background: var(--maple); }
.page-about .bar-fill--advisor { width: 19.05%; background: var(--aurora); }
.page-about .bar-fill--review { width: 16.67%; background: var(--gold); }

.page-about .team-cadence {
  margin-top: clamp(22px, 3vw, 30px);
  display: grid;
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
  grid-template-columns: minmax(0, 1fr);
}

.page-about .cadence {
  background: var(--white);
  padding: 16px 16px 18px;
}

.page-about .cadence-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  color: var(--ice);
  margin-bottom: 7px;
}

.page-about .cadence p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rock);
}

.page-about .team-figure {
  margin: 0;
}

/* ============ 服务主题矩阵 ============ */
.page-about .topic-matrix {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-a16);
  border: 1px solid var(--ink-a16);
}

.page-about .topic {
  background: var(--white);
  padding: 16px 15px 18px;
  transition: background-color 0.18s var(--ease);
}

.page-about .topic:hover {
  background: var(--paper);
}

.page-about .topic-num {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 9px;
}

.page-about .topic-name {
  display: block;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 5px;
}

.page-about .topic-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--moss);
}

/* ============ 认证 ============ */
.page-about .cert-row {
  margin-top: clamp(22px, 3.5vw, 32px);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.page-about .cert {
  border: 1px solid var(--ink-a16);
  background: var(--white);
}

.page-about .cert[open] {
  border-color: var(--gold);
}

.page-about .cert-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.page-about .cert-summary::-webkit-details-marker {
  display: none;
}

.page-about .cert-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--moss);
}

.page-about .cert[open] .cert-summary::after {
  content: "–";
  color: var(--maple);
}

.page-about .cert-shield {
  flex: none;
  width: 24px;
  height: 29px;
  color: var(--gold);
}

.page-about .cert--version .cert-shield { color: var(--ice); }
.page-about .cert--service .cert-shield { color: var(--aurora); }

.page-about .cert-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.page-about .cert-desc {
  margin: 0;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--ink-a06);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
}

.page-about .partner-note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--aurora);
  background: var(--ink-a06);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--rock);
}

/* ============ 下一页入口 ============ */
.page-about .about-next {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(38px, 6.5vw, 76px) 0;
  margin-top: clamp(40px, 6vw, 72px);
}

.page-about .about-next h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 3.6vw, 34px);
  line-height: 1.25;
  color: var(--white);
}

.page-about .about-next p {
  margin: 0 0 clamp(24px, 3.5vw, 32px);
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--paper-a70);
}

.page-about .next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--paper-a16);
  border: 1px solid var(--paper-a16);
}

.page-about .next-links a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 17px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.18s var(--ease);
}

.page-about .next-links a:hover,
.page-about .next-links a:focus-visible {
  background: var(--about-paper-08);
}

.page-about .next-link-label {
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--white);
}

.page-about .next-link-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-a70);
}

/* ============ 断点 ============ */
@media (min-width: 560px) {
  .page-about .team-cadence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 620px) {
  .page-about .topic-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .next-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .page-about .tl-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 20px;
  }
  .page-about .position-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .cert-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 860px) {
  .page-about .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .hero-stats .stat {
    padding: 20px 18px 22px;
  }
}

@media (min-width: 900px) {
  .page-about .team-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(28px, 4vw, 44px);
    align-items: start;
  }
  .page-about .team-figure {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (min-width: 960px) {
  .page-about .about-body {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .page-about .about-index {
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }
  .page-about .index-list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-about .index-list li + li {
    margin-top: 1px;
  }
  .page-about .index-list a {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    box-sizing: border-box;
  }
  .page-about .index-list a:hover,
  .page-about .index-list a:focus-visible {
    border-left-color: var(--maple);
    background: var(--ink-a06);
    color: var(--maple);
  }
  .page-about .prose {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .page-about .topic-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .next-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .index-list a,
  .page-about .topic,
  .page-about .next-links a,
  .page-about .bar-count,
  .page-about .sec-num {
    transition: none;
  }
}