.page-about {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color: var(--paper);
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.75rem, 6vw, 4.5rem);
}

.page-about .ab-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(190deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(190deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
}

.page-about .ab-hero-inner {
  position: relative;
}

.page-about .ab-hero .breadcrumb-link {
  color: var(--mist);
}

.page-about .ab-hero .breadcrumb-current {
  color: var(--paper);
}

.page-about .ab-hero .eyebrow {
  color: var(--gold);
  margin-top: 1.25rem;
  letter-spacing: 0.14em;
}

.page-about .ab-hero-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0.85rem 0 0;
  max-width: 26ch;
  color: var(--paper);
}

.page-about .ab-hero-lede {
  margin: 1.25rem 0 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--on-dark);
}

.page-about .ab-hero-stats {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  border-top: 1px solid var(--hair-gold);
}

.page-about .ab-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.page-about .ab-stat-num {
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--gold);
}

.page-about .ab-stat-label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* ---------- 档案主体 ---------- */
.page-about .ab-archive {
  padding-top: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.page-about .ab-rail {
  min-width: 0;
}

.page-about .ab-rail-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--slate);
  margin: 0 0 0.6rem;
}

.page-about .ab-rail-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .ab-rail-item {
  flex: 0 0 auto;
}

.page-about .ab-rail-link {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--forest-2);
  font-size: 0.8125rem;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-about .ab-rail-link:hover,
.page-about .ab-rail-link:focus-visible {
  border-color: var(--gold);
  background: var(--sand);
}

.page-about .ab-rail-year {
  font-size: 0.875rem;
  color: var(--forest);
  font-weight: 500;
}

.page-about .ab-rail-text {
  color: var(--moss);
  font-size: 0.75rem;
}

.page-about .ab-flow {
  min-width: 0;
}

/* ---------- 内容块 ---------- */
.page-about .ab-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-organic);
  background: var(--paper);
  padding: clamp(1.35rem, 3.4vw, 2.6rem);
  margin-bottom: clamp(1.25rem, 3.5vw, 2.25rem);
}

.page-about .ab-block:last-of-type {
  margin-bottom: 0;
}

.page-about .ab-block--forest {
  background: var(--forest);
  border-color: transparent;
  color: var(--paper);
}

.page-about .ab-block--sand {
  background: var(--sand);
  border-color: transparent;
}

.page-about .ab-block .eyebrow {
  color: var(--moss);
  margin: 0 0 0.5rem;
  letter-spacing: 0.16em;
}

.page-about .ab-block--forest .eyebrow {
  color: var(--gold);
}

.page-about .ab-block-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.28;
  margin: 0 0 1rem;
  color: var(--forest);
}

.page-about .ab-block--forest .ab-block-title {
  color: var(--paper);
}

.page-about .ab-block p {
  margin: 0 0 0.9rem;
  line-height: 1.78;
  font-size: 1rem;
}

.page-about .ab-block p:last-child {
  margin-bottom: 0;
}

.page-about .ab-block--forest p {
  color: var(--on-dark);
}

.page-about .ab-block-lede {
  max-width: 56ch;
}

/* ---------- 时间线 ---------- */
.page-about .ab-timeline {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.page-about .ab-node {
  position: relative;
  padding: 0 0 1.6rem 1.6rem;
  border-left: 1px solid var(--hair-gold);
}

.page-about .ab-node:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page-about .ab-node::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 182, 120, 0.16);
}

.page-about .ab-node-year {
  display: block;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.page-about .ab-node-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0.5rem 0 0.5rem;
  color: var(--paper);
}

.page-about .ab-node p {
  font-size: 0.9375rem;
  color: var(--on-dark);
  margin-bottom: 0;
}

/* ---------- 折叠说明 ---------- */
.page-about .ab-more {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(216, 182, 120, 0.36);
}

.page-about .ab-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--forest-2);
}

.page-about .ab-block--forest .ab-more summary {
  color: var(--gold);
}

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

.page-about .ab-more summary::after {
  content: "﹢";
  font-family: var(--font-mono);
  font-size: 1rem;
  flex: none;
}

.page-about .ab-more[open] summary::after {
  content: "−";
}

.page-about .ab-more p {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
}

.page-about .ab-block--forest .ab-more p {
  color: var(--on-dark);
}

/* ---------- 团队 ---------- */
.page-about .ab-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.page-about .ab-team-card {
  background: var(--forest);
  color: var(--paper);
  border-radius: 20px 6px 24px 8px;
  border-top: 3px solid var(--gold);
  padding: 1.35rem 1.25rem 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-about .ab-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(15, 59, 50, 0.18);
}

.page-about .ab-team-index {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.page-about .ab-team-role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0.6rem 0 0.6rem;
  color: var(--paper);
}

.page-about .ab-team-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--on-dark);
}

/* ---------- 服务范围 ---------- */
.page-about .ab-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.page-about .ab-cover-text {
  min-width: 0;
}

.page-about .ab-legend {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-about .ab-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--forest);
}

.page-about .ab-legend-key {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  transform: translateY(1px);
}

.page-about .ab-legend-key--forest {
  background: var(--forest);
}

.page-about .ab-legend-key--gold {
  background: var(--amber);
}

.page-about .ab-legend-key--mist {
  background: var(--mist);
}

/* ---------- 图片 ---------- */
.page-about .ab-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px 6px 22px 8px;
  background: var(--forest-2);
}

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

.page-about .ab-figure figcaption {
  padding: 0.7rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--moss);
  background: var(--paper);
}

.page-about .ab-block--sand .ab-figure figcaption {
  background: var(--sand);
}

.page-about .ab-figure--wide {
  margin-top: 1.75rem;
}

/* ---------- 流程步骤 ---------- */
.page-about .ab-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-about .ab-step {
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1rem;
}

.page-about .ab-step-num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 0.35rem;
}

.page-about .ab-step-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 0.45rem;
  color: var(--forest);
}

.page-about .ab-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--ink);
}

.page-about .ab-process-note {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--forest-2);
}

/* ---------- 荣誉 ---------- */
.page-about .ab-honor-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.page-about .ab-honor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-gold);
}

.page-about .ab-honor:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-about .ab-honor-year {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-about .ab-honor p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--on-dark);
}

/* ---------- CTA ---------- */
.page-about .ab-cta {
  background: var(--forest-deep);
  color: var(--paper);
  border-radius: var(--radius-organic);
  padding: clamp(1.5rem, 3.8vw, 2.75rem);
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
}

.page-about .ab-cta .ab-block-title {
  color: var(--paper);
  margin-bottom: 0.75rem;
}

.page-about .ab-cta-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--on-dark);
}

.page-about .ab-cta-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.page-about .ab-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid rgba(216, 182, 120, 0.36);
  border-radius: 14px 5px 16px 6px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-about .ab-cta-link:hover,
.page-about .ab-cta-link:focus-visible {
  background: var(--forest-2);
  border-color: var(--gold);
}

.page-about .ab-cta-arrow {
  font-family: var(--font-mono);
  color: var(--gold);
  transition: transform 0.2s ease;
}

.page-about .ab-cta-link:hover .ab-cta-arrow,
.page-about .ab-cta-link:focus-visible .ab-cta-arrow {
  transform: translateX(3px);
}

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

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

@media (min-width: 780px) {
  .page-about .ab-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .page-about .ab-honor {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .page-about .ab-archive {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
  }

  .page-about .ab-rail {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }

  .page-about .ab-rail-list {
    display: block;
    overflow: visible;
    padding-left: 1px;
  }

  .page-about .ab-rail-item + .ab-rail-item {
    margin-top: 0.15rem;
  }

  .page-about .ab-rail-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0 0.5rem 0.85rem;
    border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
    white-space: normal;
    background: transparent;
  }

  .page-about .ab-rail-link:hover,
  .page-about .ab-rail-link:focus-visible {
    border-left-color: var(--gold);
    background: transparent;
  }

  .page-about .ab-rail-text {
    font-size: 0.75rem;
  }
}

@media (min-width: 960px) {
  .page-about .ab-cover {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: start;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-team-card,
  .page-about .ab-rail-link,
  .page-about .ab-cta-link,
  .page-about .ab-cta-arrow {
    transition: none;
  }

  .page-about .ab-team-card:hover {
    transform: none;
  }

  .page-about .ab-cta-link:hover .ab-cta-arrow {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <section class="ab-hero" aria-labelledby="ab-hero-title">
    <img class="ab-hero-bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深墨绿档案柜纹理与砂金索引线交织的抽象背景，铺在品牌档案页首屏">
    <div class="container ab-hero-inner">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
          <li class="breadcrumb-item breadcrumb-current" aria-current="page">品牌档案</li>
        </ol>
      </nav>
      <p class="eyebrow">档案编号 YY·ARCHIVE · 2019—2026</p>
      <h1 id="ab-hero-title" class="ab-hero-title">优越会指定站的服务档案：七年，一支常驻长沙的团队</h1>
      <p class="ab-hero-lede">
        从第一次找入口，到换设备后重新登录，您遇到的大多数问题都能在这里找到答案。优越会指定站自 2019 年起在长沙提供中文版会员服务与资料查询，七年下来，我们把入口变化、权益说明和排查步骤一件件整理成册，也把团队的成长轨迹留在了这份档案里。
      </p>
      <ul class="ab-hero-stats">
        <li class="ab-hero-stat">
          <span class="ab-stat-num mono">2019</span>
          <span class="ab-stat-label">中文版服务起步</span>
        </li>
        <li class="ab-hero-stat">
          <span class="ab-stat-num mono">35</span>
          <span class="ab-stat-label">团队规模（人）</span>
        </li>
        <li class="ab-hero-stat">
          <span class="ab-stat-num mono">31</span>
          <span class="ab-stat-label">覆盖省级地区</span>
        </li>
        <li class="ab-hero-stat">
          <span class="ab-stat-num mono">12.6万</span>
          <span class="ab-stat-label">累计服务会员</span>
        </li>
      </ul>
    </div>
  </section>

  <div class="container ab-archive">
    <aside class="ab-rail" aria-label="年份索引">
      <p class="ab-rail-title mono">年份刻度</p>
      <ol class="ab-rail-list">
        <li class="ab-rail-item"><a class="ab-rail-link" href="#y2019"><span class="ab-rail-year mono">2019</span><span class="ab-rail-text">服务起步</span></a></li>
        <li class="ab-rail-item"><a class="ab-rail-link" href="#y2022"><span class="ab-rail-year mono">2022</span><span class="ab-rail-text">设备验证</span></a></li>
        <li class="ab-rail-item"><a class="ab-rail-link" href="#y2024"><span class="ab-rail-year mono">2024</span><span class="ab-rail-text">检索改版</span></a></li>
        <li class="ab-rail-item"><a class="ab-rail-link" href="#y2025"><span class="ab-rail-year mono">2025</span><span class="ab-rail-text">变更提醒</span></a></li>
        <li class="ab-rail-item"><a class="ab-rail-link" href="#y2026"><span class="ab-rail-year mono">2026</span><span class="ab-rail-text">入口调整</span></a></li>
      </ol>
    </aside>

    <div class="ab-flow">
      <section class="ab-block" aria-labelledby="ab-origin-title">
        <p class="eyebrow">01 · 起点</p>
        <h2 id="ab-origin-title" class="ab-block-title">从一句“入口在哪”开始的七年</h2>
        <p>
          2019 年，几位在长沙做会员支持的同学发现，会员问得最多的问题其实只有三类：入口换了没有、我这个档位能用什么、换了手机为什么登不上。答案散落在邮件和聊天记录里，每次都要重新解释一遍。团队决定把这些答案固定下来，写成可以自己查、反复看的说明。
        </p>
        <p>
          七年过去，这套说明长成了包含 286 篇指引的资料库，会员从第一批增长到约 12.6 万人，月度活跃会员稳定在约 3.8 万人。团队也从一个小组变成 35 人的常设队伍，服务对象从湖南本地扩展到全国 31 个省级地区。
        </p>
        <p>
          如果您是第一次接触，最直接的判断方式是看两件事：入口最近一次调整是什么时候，以及出问题时有没有一套能照着做的步骤。这两件事，这份档案里都有。
        </p>
      </section>

      <section class="ab-block ab-block--forest" aria-labelledby="ab-timeline-title">
        <p class="eyebrow">02 · 节点</p>
        <h2 id="ab-timeline-title" class="ab-block-title">每一年的那一步，都对应一类具体麻烦</h2>
        <p class="ab-block-lede">下面几个年份不是里程碑式的口号，而是会员在当年最常卡住的位置，以及我们后来补上的解法。</p>

        <ol class="ab-timeline">
          <li class="ab-node" id="y2019">
            <span class="ab-node-year mono">2019</span>
            <h3 class="ab-node-title">中文版服务起步</h3>
            <p>
              第一批会员权益说明与常见问题整理完成，中文版会员服务与资料查询同时开放。最初的资料只有几十篇，几乎全部围绕“入口在哪”和“权益怎么用”两个问题展开。
            </p>
          </li>

          <li class="ab-node" id="y2022">
            <span class="ab-node-year mono">2022</span>
            <h3 class="ab-node-title">设备登录验证机制上线</h3>
            <p>
              换设备后重新登录需要重新验证身份。这条流程把账号与设备的关系讲清楚了，也让冒用会员资料的情况有了明确的拦截点。
            </p>
            <details class="ab-more">
              <summary>为什么换设备一定要重新验证一次</summary>
              <p>
                会员权益与资料记录都绑在账号上，验证的作用是确认此刻操作的是本人。换手机、换电脑、换网络环境都会触发，属于正常安全流程，并不表示账号出了问题。验证步骤按设备类型分别写在资料库里。
              </p>
            </details>
          </li>

          <li class="ab-node" id="y2023">
            <span class="ab-node-year mono">2023</span>
            <h3 class="ab-node-title">获得行业创新案例认可</h3>
            <p>
              省级互联网服务行业协会把会员服务创新案例授予平台，看中的是把入口变更、权益说明做成可自行查询的资料这件事。
            </p>
          </li>

          <li class="ab-node" id="y2024">
            <span class="ab-node-year mono">2024</span>
            <h3 class="ab-node-title">资料库检索改版</h3>
            <p>
              286 篇指引按入口与访问、设备与登录、权益使用、安全与隐私四个分类重新编排。找一篇指引通常两三次点击就能到位，不必再从长列表里一篇篇翻。
            </p>
          </li>

          <li class="ab-node" id="y2025">
            <span class="ab-node-year mono">2025</span>
            <h3 class="ab-node-title">入口变更订阅提醒推出</h3>
            <p>
              订阅用户约 4.2 万人。入口调整、资料库版本更新与设备验证流程变化会主动提醒到人，不用每天自己刷页面确认。
            </p>
            <details class="ab-more">
              <summary>提醒会覆盖哪几类变化</summary>
              <p>
                一是中文版入口地址或跳转路径发生变化；二是资料库新增与修订的版本说明；三是设备验证环节的流程调整。三类提醒各自独立，您可以只订阅其中关心的部分。
              </p>
            </details>
          </li>

          <li class="ab-node" id="y2026">
            <span class="ab-node-year mono">2026</span>
            <h3 class="ab-node-title">中文版入口完成一次调整</h3>
            <p>
              调整在 2026 年 3 月完成，跳转路径与验证环节都有变化，此前收藏的旧链接可能失效。入口当前状态以页面标注的更新时间为准，变更的完整记录可以到更新档案里逐条查看。
            </p>
          </li>
        </ol>
      </section>

      <section class="ab-block" aria-labelledby="ab-team-title">
        <p class="eyebrow">03 · 分工</p>
        <h2 id="ab-team-title" class="ab-block-title">35 个人，三条线，各管一段</h2>
        <p>资料库里每一条能查到的说明，背后都有人负责；您打进来的每一通电话，也都有对应的接应岗位。三支团队分工不同，交接时有同一套做法。</p>

        <div class="ab-team">
          <article class="ab-team-card">
            <span class="ab-team-index mono">01</span>
            <h3 class="ab-team-role">内容运营 · 12 人</h3>
            <p class="ab-team-desc">
              负责资料库的选题、撰写与维护。每周发布 2 至 3 篇新指引，入口或验证流程变化时同步修订旧篇目，每篇末尾标注适用设备与更新时间。
            </p>
          </article>
          <article class="ab-team-card">
            <span class="ab-team-index mono">02</span>
            <h3 class="ab-team-role">技术支持 · 8 人</h3>
            <p class="ab-team-desc">
              负责入口可用性监测与设备验证机制的稳定运行，日常与 3 家本地网络服务机构、2 家设备安全服务商协作处理链路异常与验证故障。
            </p>
          </article>
          <article class="ab-team-card">
            <span class="ab-team-index mono">03</span>
            <h3 class="ab-team-role">会员服务 · 15 人</h3>
            <p class="ab-team-desc">
              工作日 9:00–18:00 接听客服电话、回复客服邮箱。问到最多的仍然是入口找不到和验证过不去，团队会先给出排查顺序，再判断是否需要人工介入。
            </p>
          </article>
        </div>
      </section>

      <section class="ab-block ab-block--sand" aria-labelledby="ab-cover-title">
        <p class="eyebrow">04 · 范围</p>
        <h2 id="ab-cover-title" class="ab-block-title">线上一条线，湖南多一层贴近</h2>
        <div class="ab-cover">
          <div class="ab-cover-text">
            <p>
              全国 31 个省级地区的会员，通过线上渠道获得同样的入口更新、权益说明与排查支持，服务内容和响应方式一致。
            </p>
            <p>
              湖南地区另设本地化支持小组，负责本地区的入口可用性反馈、设备验证协助，以及与线上团队的日常衔接。本地与线上不是两套流程：小组处理过的共性问题会回流到资料库，变成所有会员都能查到的指引。
            </p>
            <ul class="ab-legend">
              <li class="ab-legend-item"><span class="ab-legend-key ab-legend-key--forest" aria-hidden="true"></span>线上服务：全国 31 个省级地区</li>
              <li class="ab-legend-item"><span class="ab-legend-key ab-legend-key--gold" aria-hidden="true"></span>本地支持：湖南地区支持小组</li>
              <li class="ab-legend-item"><span class="ab-legend-key ab-legend-key--mist" aria-hidden="true"></span>人工服务：工作日 9:00–18:00</li>
            </ul>
          </div>
          <figure class="ab-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="低饱和度的湖南本地建筑纹理抽象图案，叠加网格与坐标线，用于说明本地化支持范围">
            <figcaption>本地支持小组围绕入口可用性与设备验证提供协助，处理结果回流至资料库。</figcaption>
          </figure>
        </div>
      </section>

      <section class="ab-block" aria-labelledby="ab-process-title">
        <p class="eyebrow">05 · 流程</p>
        <h2 id="ab-process-title" class="ab-block-title">一道说明发出去之前，要过三道手</h2>
        <p>资料库里的每篇指引都要经过同样的三道流程，任何一步没过就退回修改。对您来说，这意味着照着做的时候不会被半路卡住。</p>

        <ol class="ab-steps">
          <li class="ab-step">
            <span class="ab-step-num mono">STEP 01</span>
            <h3 class="ab-step-title">编辑初审</h3>
            <p>判断选题是否对应真实咨询，步骤能不能照着走通，设备与浏览器前提有没有交代清楚。</p>
          </li>
          <li class="ab-step">
            <span class="ab-step-num mono">STEP 02</span>
            <h3 class="ab-step-title">业务复核</h3>
            <p>由对应业务线判断说法与当前的入口状态、权益规则是否一致，避免过期描述被继续引用。</p>
          </li>
          <li class="ab-step">
            <span class="ab-step-num mono">STEP 03</span>
            <h3 class="ab-step-title">发布前校对</h3>
            <p>检查适用设备、更新时间与站内跳转路径是否完整，确认读者能顺着说明走到下一步。</p>
          </li>
        </ol>

        <figure class="ab-figure ab-figure--wide">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="抽象工作台上的资料索引卡、校对标记与设备示意，用于说明内容与技术支持的工作方式">
          <figcaption>内容运营与技术支持共用一套校对标记，设备验证类指引会由两侧共同过一遍。</figcaption>
        </figure>

        <p class="ab-process-note">
          设备验证的逻辑同样遵循这条线：换设备重新登录需要重新验证身份，是保护会员资料的安全流程，而不是账号异常的提示。验证失败时，先按资料库里的顺序排查网络与浏览器，再联系会员服务。
        </p>
      </section>

      <section class="ab-block ab-block--forest" aria-labelledby="ab-recognition-title">
        <p class="eyebrow">06 · 外部视角</p>
        <h2 id="ab-recognition-title" class="ab-block-title">行业里怎么看这件事</h2>
        <ul class="ab-honor-list">
          <li class="ab-honor">
            <span class="ab-honor-year mono">2023</span>
            <p>省级互联网服务行业协会将年度会员服务创新案例授予平台，表彰方向是把入口变更与权益说明做成会员可自行查询的资料体系。</p>
          </li>
          <li class="ab-honor">
            <span class="ab-honor-year mono">年度</span>
            <p>每年发布一份会员服务年度回顾，最近一期覆盖 2025 年度，内容包括资料库使用情况、入口稳定性记录与设备验证流程的变化说明。</p>
          </li>
          <li class="ab-honor">
            <span class="ab-honor-year mono">协作</span>
            <p>与本地网络服务机构、设备安全服务商保持长期协作，用于入口可用性监测与设备验证环节的技术支持。</p>
          </li>
        </ul>
      </section>

      <section class="ab-cta" aria-labelledby="ab-cta-title">
        <h2 id="ab-cta-title" class="ab-block-title">想知道的问题，从这里继续</h2>
        <p class="ab-cta-lede">如果您关心的是入口现在是什么状态、自己的档位能用什么、或者正卡在某一步走不下去，下面的入口按用途分开，直接进对应的位置就行。</p>
        <div class="ab-cta-links">
          <a class="ab-cta-link" href="/updates/"><span>查看入口更新记录</span><span class="ab-cta-arrow" aria-hidden="true">→</span></a>
          <a class="ab-cta-link" href="/solutions/"><span>比较会员权益与方案</span><span class="ab-cta-arrow" aria-hidden="true">→</span></a>
          <a class="ab-cta-link" href="/knowledge/"><span>打开资料库排查指引</span><span class="ab-cta-arrow" aria-hidden="true">→</span></a>
          <a class="ab-cta-link" href="/find-us/"><span>联系会员服务团队</span><span class="ab-cta-arrow" aria-hidden="true">→</span></a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-about {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color: var(--paper);
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.75rem, 6vw, 4.5rem);
}

.page-about .ab-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(190deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(190deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
}

.page-about .ab-hero-inner {
  position: relative;
}

.page-about .ab-hero .breadcrumb-link {
  color: var(--mist);
}

.page-about .ab-hero .breadcrumb-current {
  color: var(--paper);
}

.page-about .ab-hero .eyebrow {
  color: var(--gold);
  margin-top: 1.25rem;
  letter-spacing: 0.14em;
}

.page-about .ab-hero-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0.85rem 0 0;
  max-width: 26ch;
  color: var(--paper);
}

.page-about .ab-hero-lede {
  margin: 1.25rem 0 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--on-dark);
}

.page-about .ab-hero-stats {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  border-top: 1px solid var(--hair-gold);
}

.page-about .ab-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.page-about .ab-stat-num {
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--gold);
}

.page-about .ab-stat-label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* ---------- 档案主体 ---------- */
.page-about .ab-archive {
  padding-top: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.page-about .ab-rail {
  min-width: 0;
}

.page-about .ab-rail-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--slate);
  margin: 0 0 0.6rem;
}

.page-about .ab-rail-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .ab-rail-item {
  flex: 0 0 auto;
}

.page-about .ab-rail-link {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--forest-2);
  font-size: 0.8125rem;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-about .ab-rail-link:hover,
.page-about .ab-rail-link:focus-visible {
  border-color: var(--gold);
  background: var(--sand);
}

.page-about .ab-rail-year {
  font-size: 0.875rem;
  color: var(--forest);
  font-weight: 500;
}

.page-about .ab-rail-text {
  color: var(--moss);
  font-size: 0.75rem;
}

.page-about .ab-flow {
  min-width: 0;
}

/* ---------- 内容块 ---------- */
.page-about .ab-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-organic);
  background: var(--paper);
  padding: clamp(1.35rem, 3.4vw, 2.6rem);
  margin-bottom: clamp(1.25rem, 3.5vw, 2.25rem);
}

.page-about .ab-block:last-of-type {
  margin-bottom: 0;
}

.page-about .ab-block--forest {
  background: var(--forest);
  border-color: transparent;
  color: var(--paper);
}

.page-about .ab-block--sand {
  background: var(--sand);
  border-color: transparent;
}

.page-about .ab-block .eyebrow {
  color: var(--moss);
  margin: 0 0 0.5rem;
  letter-spacing: 0.16em;
}

.page-about .ab-block--forest .eyebrow {
  color: var(--gold);
}

.page-about .ab-block-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.28;
  margin: 0 0 1rem;
  color: var(--forest);
}

.page-about .ab-block--forest .ab-block-title {
  color: var(--paper);
}

.page-about .ab-block p {
  margin: 0 0 0.9rem;
  line-height: 1.78;
  font-size: 1rem;
}

.page-about .ab-block p:last-child {
  margin-bottom: 0;
}

.page-about .ab-block--forest p {
  color: var(--on-dark);
}

.page-about .ab-block-lede {
  max-width: 56ch;
}

/* ---------- 时间线 ---------- */
.page-about .ab-timeline {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.page-about .ab-node {
  position: relative;
  padding: 0 0 1.6rem 1.6rem;
  border-left: 1px solid var(--hair-gold);
}

.page-about .ab-node:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page-about .ab-node::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 182, 120, 0.16);
}

.page-about .ab-node-year {
  display: block;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.page-about .ab-node-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0.5rem 0 0.5rem;
  color: var(--paper);
}

.page-about .ab-node p {
  font-size: 0.9375rem;
  color: var(--on-dark);
  margin-bottom: 0;
}

/* ---------- 折叠说明 ---------- */
.page-about .ab-more {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(216, 182, 120, 0.36);
}

.page-about .ab-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--forest-2);
}

.page-about .ab-block--forest .ab-more summary {
  color: var(--gold);
}

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

.page-about .ab-more summary::after {
  content: "﹢";
  font-family: var(--font-mono);
  font-size: 1rem;
  flex: none;
}

.page-about .ab-more[open] summary::after {
  content: "−";
}

.page-about .ab-more p {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
}

.page-about .ab-block--forest .ab-more p {
  color: var(--on-dark);
}

/* ---------- 团队 ---------- */
.page-about .ab-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.page-about .ab-team-card {
  background: var(--forest);
  color: var(--paper);
  border-radius: 20px 6px 24px 8px;
  border-top: 3px solid var(--gold);
  padding: 1.35rem 1.25rem 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-about .ab-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(15, 59, 50, 0.18);
}

.page-about .ab-team-index {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.page-about .ab-team-role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0.6rem 0 0.6rem;
  color: var(--paper);
}

.page-about .ab-team-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--on-dark);
}

/* ---------- 服务范围 ---------- */
.page-about .ab-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.page-about .ab-cover-text {
  min-width: 0;
}

.page-about .ab-legend {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-about .ab-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--forest);
}

.page-about .ab-legend-key {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  transform: translateY(1px);
}

.page-about .ab-legend-key--forest {
  background: var(--forest);
}

.page-about .ab-legend-key--gold {
  background: var(--amber);
}

.page-about .ab-legend-key--mist {
  background: var(--mist);
}

/* ---------- 图片 ---------- */
.page-about .ab-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px 6px 22px 8px;
  background: var(--forest-2);
}

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

.page-about .ab-figure figcaption {
  padding: 0.7rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--moss);
  background: var(--paper);
}

.page-about .ab-block--sand .ab-figure figcaption {
  background: var(--sand);
}

.page-about .ab-figure--wide {
  margin-top: 1.75rem;
}

/* ---------- 流程步骤 ---------- */
.page-about .ab-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-about .ab-step {
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1rem;
}

.page-about .ab-step-num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 0.35rem;
}

.page-about .ab-step-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 0.45rem;
  color: var(--forest);
}

.page-about .ab-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--ink);
}

.page-about .ab-process-note {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--forest-2);
}

/* ---------- 荣誉 ---------- */
.page-about .ab-honor-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.page-about .ab-honor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-gold);
}

.page-about .ab-honor:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-about .ab-honor-year {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-about .ab-honor p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--on-dark);
}

/* ---------- CTA ---------- */
.page-about .ab-cta {
  background: var(--forest-deep);
  color: var(--paper);
  border-radius: var(--radius-organic);
  padding: clamp(1.5rem, 3.8vw, 2.75rem);
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
}

.page-about .ab-cta .ab-block-title {
  color: var(--paper);
  margin-bottom: 0.75rem;
}

.page-about .ab-cta-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--on-dark);
}

.page-about .ab-cta-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.page-about .ab-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid rgba(216, 182, 120, 0.36);
  border-radius: 14px 5px 16px 6px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-about .ab-cta-link:hover,
.page-about .ab-cta-link:focus-visible {
  background: var(--forest-2);
  border-color: var(--gold);
}

.page-about .ab-cta-arrow {
  font-family: var(--font-mono);
  color: var(--gold);
  transition: transform 0.2s ease;
}

.page-about .ab-cta-link:hover .ab-cta-arrow,
.page-about .ab-cta-link:focus-visible .ab-cta-arrow {
  transform: translateX(3px);
}

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

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

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

  .page-about .ab-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .page-about .ab-honor {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .page-about .ab-archive {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
  }

  .page-about .ab-rail {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }

  .page-about .ab-rail-list {
    display: block;
    overflow: visible;
    padding-left: 1px;
  }

  .page-about .ab-rail-item + .ab-rail-item {
    margin-top: 0.15rem;
  }

  .page-about .ab-rail-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0 0.5rem 0.85rem;
    border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
    white-space: normal;
    background: transparent;
  }

  .page-about .ab-rail-link:hover,
  .page-about .ab-rail-link:focus-visible {
    border-left-color: var(--gold);
    background: transparent;
  }

  .page-about .ab-rail-text {
    font-size: 0.75rem;
  }
}

@media (min-width: 960px) {
  .page-about .ab-cover {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: start;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-team-card,
  .page-about .ab-rail-link,
  .page-about .ab-cta-link,
  .page-about .ab-cta-arrow {
    transition: none;
  }

  .page-about .ab-team-card:hover {
    transform: none;
  }

  .page-about .ab-cta-link:hover .ab-cta-arrow {
    transform: none;
  }
}