.page-about {
  --ab-rule-ink: rgba(8, 13, 11, .14);
  --ab-rule-dark: rgba(30, 91, 67, .65);
}

/* ---------- 首屏 ---------- */

.page-about .ab-hero {
  padding-top: clamp(18px, 3vw, 28px);
  padding-bottom: clamp(44px, 7vw, 88px);
}

.page-about .ab-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 52px);
  align-items: start;
  margin-top: clamp(22px, 4vw, 40px);
}

.page-about .ab-hero__title {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(29px, 6.4vw, 46px);
  line-height: 1.24;
  letter-spacing: .02em;
  color: var(--text);
  max-width: 17em;
}

.page-about .ab-hero__desc {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.82;
  color: var(--text-dim);
}

.page-about .ab-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-hero__facts .stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.page-about .ab-hero__facts .stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text);
}

.page-about .ab-hero__facts .stat--lime .stat__value {
  color: var(--lime);
}

.page-about .ab-hero__facts .stat__unit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--mist);
}

.page-about .ab-hero__facts .stat__label {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

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

.page-about .ab-hero__frame {
  padding: clamp(18px, 3vw, 26px);
  background: rgba(18, 58, 43, .55);
}

.page-about .ab-hero__frame-label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-about .ab-hero__index .index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 通用小节头 ---------- */

.page-about .sec-title {
  color: var(--text);
}

.page-about .section--paper .sec-title {
  color: var(--ink-text);
}

.page-about .section--paper .sec-desc {
  color: var(--ink-dim);
}

/* ---------- 发展脉络 ---------- */

.page-about .ab-track__media {
  margin: clamp(26px, 4vw, 42px) 0 clamp(28px, 4vw, 44px);
}

.page-about .ab-tl__rail {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 18px;
  margin: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-about .ab-tl__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-soft), rgba(30, 91, 67, .12));
  pointer-events: none;
}

.page-about .ab-tl__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 170px;
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  text-align: left;
  background: rgba(11, 42, 32, .7);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.page-about .ab-tl__node:hover {
  border-color: var(--lime);
  color: var(--text);
  transform: translateY(-2px);
}

.page-about .ab-tl__node:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-about .ab-tl__node[aria-selected="true"],
.page-about .ab-tl__node[data-tabs-active] {
  border-color: var(--lime);
  background: rgba(201, 242, 60, .09);
}

.page-about .ab-tl__node-num {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--mist);
}

.page-about .ab-tl__node-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-tl__node-hint {
  font-size: 12px;
  color: var(--text-dim);
}

.page-about .ab-tl__panels {
  margin-top: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 3vw, 32px);
}

.page-about .ab-tl__panel {
  max-width: 62em;
}

.page-about .ab-tl__panel-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 25px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-tl__panel p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.82;
  color: var(--text-dim);
}

.page-about .ab-track__foot {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

/* ---------- 栏目版图 ---------- */

.page-about .ab-map__rows {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--ab-rule-ink);
}

.page-about .ab-map__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--ab-rule-ink);
  transition: background-color .2s ease;
}

.page-about .ab-map__row:hover {
  background: rgba(30, 91, 67, .05);
}

.page-about .ab-map__code {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--turf);
}

.page-about .ab-map__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: .02em;
  color: var(--ink-text);
}

.page-about .ab-map__text {
  margin: 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-dim);
}

.page-about .ab-map__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
}

.page-about .ab-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ---------- 更新流程 ---------- */

.page-about .ab-flow__media {
  margin: clamp(26px, 4vw, 42px) 0 clamp(28px, 4vw, 44px);
}

.page-about .ab-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .ab-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 16px;
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-step__num {
  margin: 0;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--lime);
}

.page-about .ab-step__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 21px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-step__text {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-about .ab-step__time {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--mist);
}

.page-about .ab-flow .note {
  margin-top: clamp(24px, 3vw, 34px);
}

/* ---------- 运营团队 ---------- */

.page-about .ab-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 56px);
  align-items: start;
}

.page-about .ab-team__list {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-team__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--line);
}

.page-about .ab-team__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-about .ab-team__count {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 42px);
  line-height: 1;
  color: var(--lime);
}

.page-about .ab-team__name {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 21px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-team__text {
  margin: 0;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-team__aside {
  display: grid;
  gap: 16px;
}

.page-about .ab-team__aside .note {
  margin: 0;
}

/* ---------- 内容合作 ---------- */

.page-about .ab-coop__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 28px);
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-coop__item {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ab-rule-ink);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .55);
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.page-about .ab-coop__item:hover,
.page-about .ab-coop__item:focus-within {
  border-color: var(--turf);
  background: rgba(255, 255, 255, .9);
  transform: translateY(-2px);
}

.page-about .ab-coop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.page-about .ab-coop__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 22px);
  letter-spacing: .02em;
  color: var(--ink-text);
}

.page-about .ab-coop__tag {
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--turf);
}

.page-about .ab-coop__text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-dim);
}

.page-about .ab-coop__forms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  opacity: .58;
  transition: opacity .22s ease;
}

.page-about .ab-coop__item:hover .ab-coop__forms,
.page-about .ab-coop__item:focus-within .ab-coop__forms {
  opacity: 1;
}

.page-about .ab-coop__forms li {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-text);
  border: 1px solid var(--ab-rule-ink);
  border-radius: 999px;
}

/* ---------- 移动端设计 ---------- */

.page-about .ab-mobile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(26px, 4vw, 40px);
  align-items: start;
}

.page-about .ab-mobile__points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .ab-mobile__point {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-mobile__k {
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--lime);
}

.page-about .ab-mobile__v {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-mobile__stat {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(18, 58, 43, .55);
}

.page-about .ab-mobile__stat .stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.page-about .ab-mobile__stat .stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 10vw, 72px);
  line-height: 1;
  color: var(--lime);
}

.page-about .ab-mobile__stat .stat__unit {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--lime);
}

.page-about .ab-mobile__stat .stat__label {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-dim);
}

.page-about .ab-mobile__stat-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ---------- 收尾 ---------- */

.page-about .ab-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px);
  align-items: center;
}

.page-about .ab-cta__title {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-cta__text {
  margin: 12px 0 0;
  max-width: 42em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 560px) {
  .page-about .ab-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-about .ab-map__row {
    grid-template-columns: 78px minmax(0, 1fr) minmax(180px, .55fr);
    align-items: start;
  }

  .page-about .ab-map__when {
    justify-content: flex-start;
    padding-top: 4px;
  }

  .page-about .ab-coop__list {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
    gap: clamp(40px, 5vw, 72px);
  }

  .page-about .ab-team__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  }

  .page-about .ab-mobile__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
  }

  .page-about .ab-cta__inner {
    grid-template-columns: minmax(0, 1.6fr) auto;
  }

  .page-about .ab-step {
    grid-template-columns: 44px minmax(0, 1fr) 140px;
    align-items: start;
  }

  .page-about .ab-step__time {
    grid-column: 3;
    text-align: right;
    margin-top: 2px;
  }
}
</style>
<<<END>>>

等等，我加错了 `</style>` 标签和 `<<<END>>>` 标记。重新输出正确的结尾。

输出应该以 `</main>` 结束 MAIN_HTML，然后 PAGE_CSS 内容，没有别的。

让我修正一下。
<main id="main-content" class="page-about">

  <section class="section section--pitch ab-hero">
    <div class="shell">
      <nav class="crumbs" aria-label="当前位置">
        <a class="crumbs__link" href="/">首页</a>
        <span class="crumbs__sep" aria-hidden="true">/</span>
        <span class="crumbs__current">品牌总览</span>
      </nav>

      <div class="ab-hero__grid">
        <div class="ab-hero__lede">
          <p class="sec-kicker mono">BRAND / 00</p>
          <h1 class="ab-hero__title">谈球吧体育：把一场比赛，整理成你打开手机就想看的那一屏</h1>
          <p class="ab-hero__desc">上下班的地铁上、开赛前的十分钟，你大概不想翻十几个页面去拼一支球队的近况。谈球吧体育做的事，是把走势、纪律和两队碰面的结果提前排好，各归各的位置，你只要找到那一栏。</p>

          <ul class="ab-hero__facts">
            <li class="stat stat--lime">
              <span class="stat__value">8</span>
              <span class="stat__unit">个赛季</span>
              <span class="stat__label">进球与失球走势可回溯</span>
            </li>
            <li class="stat stat--lime">
              <span class="stat__value">2</span>
              <span class="stat__unit">小时</span>
              <span class="stat__label">终场后完成基础数据录入</span>
            </li>
            <li class="stat stat--lime">
              <span class="stat__value">12万+</span>
              <span class="stat__unit">条记录</span>
              <span class="stat__label">联赛与杯赛对阵持续归档</span>
            </li>
            <li class="stat stat--lime">
              <span class="stat__value">60万</span>
              <span class="stat__unit">次 / 月</span>
              <span class="stat__label">近一年月均访问量</span>
            </li>
          </ul>
        </div>

        <aside class="ab-hero__index" aria-label="本页内容索引">
          <div class="frame ab-hero__frame">
            <p class="ab-hero__frame-label mono">本页索引 / INDEX</p>
            <ol class="index-list">
              <li class="index-list__item">
                <a class="index-list__link" href="#track">
                  <span class="index-list__num mono">01</span>
                  <span class="index-list__title">发展脉络</span>
                  <span class="index-list__meta">四个阶段</span>
                </a>
              </li>
              <li class="index-list__item">
                <a class="index-list__link" href="#map">
                  <span class="index-list__num mono">02</span>
                  <span class="index-list__title">栏目版图</span>
                  <span class="index-list__meta">四类问题</span>
                </a>
              </li>
              <li class="index-list__item">
                <a class="index-list__link" href="#flow">
                  <span class="index-list__num mono">03</span>
                  <span class="index-list__title">更新流程</span>
                  <span class="index-list__meta">录入到上线</span>
                </a>
              </li>
              <li class="index-list__item">
                <a class="index-list__link" href="#team">
                  <span class="index-list__num mono">04</span>
                  <span class="index-list__title">运营团队</span>
                  <span class="index-list__meta">三个小组</span>
                </a>
              </li>
              <li class="index-list__item">
                <a class="index-list__link" href="#coop">
                  <span class="index-list__num mono">05</span>
                  <span class="index-list__title">内容合作</span>
                  <span class="index-list__meta">赛季专题</span>
                </a>
              </li>
              <li class="index-list__item">
                <a class="index-list__link" href="#mobile">
                  <span class="index-list__num mono">06</span>
                  <span class="index-list__title">移动端设计</span>
                  <span class="index-list__meta">通勤优先</span>
                </a>
              </li>
            </ol>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--deep ab-track" id="track" data-reveal>
    <div class="shell">
      <header class="sec-head">
        <p class="sec-kicker mono">01 / 发展脉络</p>
        <h2 class="sec-title">从一张赛果页，到四条并行的数据栏目</h2>
        <p class="sec-desc">站点不是一开始就长这样。每一次扩展，都对应读者反复问过的同一句话：这个能不能也一起看到？</p>
      </header>

      <figure class="media media--wide ab-track__media">
        <div class="media__frame">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光下的看台远景，深绿色调，线条干净" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__caption">夜间球场，是这张数据看台最开始的地方。</figcaption>
      </figure>

      <div class="tabs ab-tl" data-tabs>
        <div class="tabs__list ab-tl__rail" role="tablist" aria-label="站点发展阶段">
          <button class="tabs__btn ab-tl__node" type="button" role="tab" data-tab="stage-1" data-tabs-active aria-selected="true">
            <span class="ab-tl__node-num mono">01</span>
            <span class="ab-tl__node-name">赛果速览</span>
            <span class="ab-tl__node-hint">起步阶段</span>
          </button>
          <button class="tabs__btn ab-tl__node" type="button" role="tab" data-tab="stage-2" aria-selected="false">
            <span class="ab-tl__node-num mono">02</span>
            <span class="ab-tl__node-name">走势维度</span>
            <span class="ab-tl__node-hint">按时间段拆开</span>
          </button>
          <button class="tabs__btn ab-tl__node" type="button" role="tab" data-tab="stage-3" aria-selected="false">
            <span class="ab-tl__node-num mono">03</span>
            <span class="ab-tl__node-name">纪律与对阵</span>
            <span class="ab-tl__node-hint">记录可翻查</span>
          </button>
          <button class="tabs__btn ab-tl__node" type="button" role="tab" data-tab="stage-4" aria-selected="false">
            <span class="ab-tl__node-num mono">04</span>
            <span class="ab-tl__node-name">通勤专区</span>
            <span class="ab-tl__node-hint">窄屏重建版式</span>
          </button>
        </div>

        <div class="ab-tl__panels">
          <div class="tabs__panel ab-tl__panel" id="stage-1" data-panel="stage-1" role="tabpanel">
            <h3 class="ab-tl__panel-title">先把比分做准</h3>
            <p>站点最早只做一件事：把当轮比赛的赛果和比分同步出来。那段时间养成的录入习惯，后来成了整套数据流程的底子——先保证结果对，再谈维度多。</p>
            <p>直到今天，比分与赛果仍然是每一栏数据的起点，任何一条走势都从这场比赛的结果算起。</p>
          </div>

          <div class="tabs__panel ab-tl__panel" id="stage-2" data-panel="stage-2" role="tabpanel">
            <h3 class="ab-tl__panel-title">把一场球拆成几段看</h3>
            <p>比分之外，读者开始问「这球是上半场丢的还是补时丢的」。进球与失球随之按赛季、主客场和比赛阶段三个维度拆开，同一支球队在不同阶段的表现可以单独对比。</p>
            <p>同一场比赛的攻防节奏差异，因此有了可以横向比较的读法。</p>
          </div>

          <div class="tabs__panel ab-tl__panel" id="stage-3" data-panel="stage-3" role="tabpanel">
            <h3 class="ab-tl__panel-title">那些决定下一轮谁不能上场的数字</h3>
            <p>黄牌累积到哪一张要停赛、哪次判罚改变了走势、两队近几个赛季碰面是什么结果——这些信息过去散在赛后稿里，现在被整理成可以按球队和球员翻查的记录，还有两队交锋的时间轴与胜负分布。</p>
            <p>关注停赛与纪律变化的读者，不用再一场一场往回翻。</p>
          </div>

          <div class="tabs__panel ab-tl__panel" id="stage-4" data-panel="stage-4" role="tabpanel">
            <h3 class="ab-tl__panel-title">把首屏留给最重要的那一屏</h3>
            <p>越来越多人是在上下班路上打开站点。我们围绕窄屏重新排了版式：核心数据先加载，装饰内容往后放，弱网环境下也能在首屏看到比分和走势。</p>
            <p>触控区域和字号也按单手操作调整过，站着扶着扶手也能翻完一栏。</p>
          </div>
        </div>
      </div>

      <p class="ab-track__foot">
        <a class="more-link" href="/reports/">看每个阶段的赛季复盘与栏目更新记录</a>
      </p>
    </div>
  </section>

  <section class="section section--paper ab-map" id="map" data-reveal>
    <div class="shell">
      <header class="sec-head">
        <p class="sec-kicker mono">02 / 栏目版图</p>
        <h2 class="sec-title">四类内容，对应四种看数据的方式</h2>
        <p class="sec-desc">同一场比赛，有人只想知道比分，有人要算下一轮谁会停赛，有人要拿两队近况做赛前准备。栏目按问题分，而不是按比赛分。</p>
      </header>

      <div class="ab-map__rows">
        <article class="ab-map__row">
          <p class="ab-map__code mono">C-01</p>
          <div class="ab-map__body">
            <h3 class="ab-map__title">进球与失球走势</h3>
            <p class="ab-map__text">支持按赛季、主客场和比赛阶段切换，覆盖近 8 个赛季的进球与失球走势。想判断一支球队是慢热还是后程发力，或者主场客场的差别有多大，看这一栏比翻赛后稿快得多。</p>
          </div>
          <p class="ab-map__when"><span class="tag tag--lime">什么时候看</span>赛前摸清两队攻防节奏</p>
        </article>

        <article class="ab-map__row">
          <p class="ab-map__code mono">C-02</p>
          <div class="ab-map__body">
            <h3 class="ab-map__title">红黄牌与停赛记录</h3>
            <p class="ab-map__text">累计停赛、关键场次的判罚、球员维度的纪律记录整理在一起。关心下一轮谁不能上场，或者想长期跟踪一支球队的纪律变化，可以按球队和按球员两条路径查看。</p>
          </div>
          <p class="ab-map__when"><span class="tag tag--amber">什么时候看</span>关注停赛与判罚走向</p>
        </article>

        <article class="ab-map__row">
          <p class="ab-map__code mono">C-03</p>
          <div class="ab-map__body">
            <h3 class="ab-map__title">两队交锋对照</h3>
            <p class="ab-map__text">近几个赛季的碰面被排成时间轴，旁边是对应的胜负分布。做赛前准备的时候，谁在主场占上风、最近几次交手是什么走势，两种视角能互相对得上。</p>
          </div>
          <p class="ab-map__when"><span class="tag tag--lime">什么时候看</span>赛前十分钟快速过一遍</p>
        </article>

        <article class="ab-map__row">
          <p class="ab-map__code mono">C-04</p>
          <div class="ab-map__body">
            <h3 class="ab-map__title">通勤移动专区</h3>
            <p class="ab-map__text">这一版页面是围绕手机重新排的，主要数据在窄屏首屏就能看完，触控区域按单手操作调整。地铁上滑两下，比分、走势和纪律要点都在。</p>
          </div>
          <p class="ab-map__when"><span class="tag tag--lime">什么时候看</span>上下班路上刷一眼</p>
        </article>
      </div>

      <p class="ab-map__foot">四条栏目都配了订阅入口，可以按球队或按栏目订阅更新提醒，重要场次结束后收到一次汇总。<a class="more-link" href="/product/">进入数据栏目总览</a></p>
    </div>
  </section>

  <section class="section section--pitch ab-flow" id="flow" data-reveal>
    <div class="shell">
      <header class="sec-head">
        <p class="sec-kicker mono">03 / 更新流程</p>
        <h2 class="sec-title">从终场哨到你能看到的那一屏</h2>
        <p class="sec-desc">多久能看到、看到的是不是准的，这两件事决定一个栏目能不能长期用下去。下面是我们跑了多个赛季的一套固定动作。</p>
      </header>

      <figure class="media ab-flow__media">
        <div class="media__frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="数据运营工作台上的多屏显示与笔记本，光线偏冷，画面中不出现人物面孔" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__caption">赛事结束后，录入与复核通常在同一班次里完成。</figcaption>
      </figure>

      <ol class="ab-steps">
        <li class="ab-step">
          <p class="ab-step__num mono">01</p>
          <div class="ab-step__body">
            <h3 class="ab-step__title">基础数据录入</h3>
            <p class="ab-step__text">终场后，赛果、比分与关键事件由数据标注组录入，通常在这个窗口内完成，先进系统的部分先可查。</p>
          </div>
          <p class="ab-step__time mono">≤ 2 小时</p>
        </li>
        <li class="ab-step">
          <p class="ab-step__num mono">02</p>
          <div class="ab-step__body">
            <h3 class="ab-step__title">交叉复核</h3>
            <p class="ab-step__text">同一场比赛的数据由另一名标注人员再走一遍，记录之间出现冲突时先解决冲突，再进入对外呈现的环节。</p>
          </div>
          <p class="ab-step__time mono">≤ 24 小时</p>
        </li>
        <li class="ab-step">
          <p class="ab-step__num mono">03</p>
          <div class="ab-step__body">
            <h3 class="ab-step__title">栏目上线</h3>
            <p class="ab-step__text">走势、纪律与对阵数据同步落到对应栏目，移动端首屏优先加载，核心数据先于装饰内容出现。</p>
          </div>
          <p class="ab-step__time mono">复核通过后</p>
        </li>
      </ol>

      <p class="note">订阅了某支球队或某个栏目的话，重要场次结束后会收到一次汇总提醒，不必自己反复刷新。</p>
    </div>
  </section>

  <section class="section section--deep ab-team" id="team" data-reveal>
    <div class="shell">
      <div class="ab-team__grid">
        <div class="ab-team__main">
          <header class="sec-head">
            <p class="sec-kicker mono">04 / 运营团队</p>
            <h2 class="sec-title">三个小组，27 个人守着这张看台</h2>
            <p class="sec-desc">编辑、数据标注、前端与设计各自负责一段，中间靠一套共同的栏目约定对齐节奏。</p>
          </header>

          <ul class="ab-team__list">
            <li class="ab-team__item">
              <p class="ab-team__count mono">12</p>
              <div class="ab-team__info">
                <h3 class="ab-team__name">编辑组</h3>
                <p class="ab-team__text">按联赛和杯赛分组，负责栏目选题、赛季复盘与专题整理。哪个赛季值得回头做一期专题，通常由这一组先提出来。</p>
              </div>
            </li>
            <li class="ab-team__item">
              <p class="ab-team__count mono">9</p>
              <div class="ab-team__info">
                <h3 class="ab-team__name">数据标注组</h3>
                <p class="ab-team__text">负责赛果、纪律与对阵数据的录入和交叉复核，是数据从赛场走到页面的第一道关口，也是最后一道。</p>
              </div>
            </li>
            <li class="ab-team__item">
              <p class="ab-team__count mono">6</p>
              <div class="ab-team__info">
                <h3 class="ab-team__name">前端与设计组</h3>
                <p class="ab-team__text">负责栏目页面、移动端适配与版本迭代。窄屏上哪块内容先出现、哪些信息往后放，由这一组反复调试。</p>
              </div>
            </li>
          </ul>
        </div>

        <aside class="ab-team__aside">
          <figure class="media media--square">
            <div class="media__frame">
              <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="俯拍的战术板，上面摆放着数据记录纸、铅笔与计时器，画面中没有品牌标识" loading="lazy" decoding="async">
            </div>
            <figcaption class="media__caption">赛季复盘前，纸质记录和线上数据会一起摆开对照。</figcaption>
          </figure>
          <p class="note">运营中心设在河北石家庄，访问的用户来自全国各地。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--paper ab-coop" id="coop" data-reveal>
    <div class="shell">
      <header class="sec-head">
        <p class="sec-kicker mono">05 / 内容合作</p>
        <h2 class="sec-title">和数据团队、本地媒体一起做赛季专题</h2>
        <p class="sec-desc">有些选题只靠站内的数据做不透，需要别处的方法和视角补上。</p>
      </header>

      <ul class="ab-coop__list">
        <li class="ab-coop__item">
          <div class="ab-coop__head">
            <h3 class="ab-coop__name">省内高校数据实验室</h3>
            <p class="ab-coop__tag mono">数据方法</p>
          </div>
          <p class="ab-coop__text">围绕赛季数据做联合整理，把一支球队在不同阶段的表现拆成可以顺着读下来的专题。</p>
          <ul class="ab-coop__forms">
            <li>赛季阶段对比专题</li>
            <li>主客场差异梳理</li>
          </ul>
        </li>
        <li class="ab-coop__item">
          <div class="ab-coop__head">
            <h3 class="ab-coop__name">地方体育媒体</h3>
            <p class="ab-coop__tag mono">内容产出</p>
          </div>
          <p class="ab-coop__text">把赛季数据专题做成适合本地读者阅读的形式，从选题到成稿两边一起参与。</p>
          <ul class="ab-coop__forms">
            <li>赛季专题合辑</li>
            <li>赛后数据速读</li>
          </ul>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--ink ab-mobile" id="mobile" data-reveal>
    <div class="shell">
      <header class="sec-head">
        <p class="sec-kicker mono">06 / 移动端设计</p>
        <h2 class="sec-title">把最好的那一屏，留给等地铁的时候</h2>
        <p class="sec-desc">手机访问占了大多数。这个比例决定了版面的先后顺序：核心数据先出现，其他都往后排。</p>
      </header>

      <div class="ab-mobile__grid">
        <ul class="ab-mobile__points">
          <li class="ab-mobile__point">
            <p class="ab-mobile__k mono">01</p>
            <p class="ab-mobile__v">弱网环境下做首屏优先加载，比分与走势这类核心数据先于装饰内容出现。</p>
          </li>
          <li class="ab-mobile__point">
            <p class="ab-mobile__k mono">02</p>
            <p class="ab-mobile__v">字号与触控区域按单手滑动调整，站着扶扶手也能翻完一栏，不需要放大页面。</p>
          </li>
          <li class="ab-mobile__point">
            <p class="ab-mobile__k mono">03</p>
            <p class="ab-mobile__v">5.5 英寸以上的屏幕都能完整阅读正文与数据表，窄屏不丢内容。</p>
          </li>
          <li class="ab-mobile__point">
            <p class="ab-mobile__k mono">04</p>
            <p class="ab-mobile__v">2026 年度完成了三次较大版本迭代，移动端体验始终排在优先级最前面。</p>
          </li>
        </ul>

        <div class="ab-mobile__stat">
          <p class="stat stat--lime">
            <span class="stat__value">70</span>
            <span class="stat__unit">%</span>
            <span class="stat__label">访问来自移动设备</span>
          </p>
          <p class="ab-mobile__stat-note">这个数字不是摆在墙上的口号，它决定了每一次改版先动哪一块。</p>
          <a class="btn btn--accent btn--block" href="/answers/">订阅与使用问题，去答疑中心</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--deep ab-cta" data-reveal>
    <div class="shell ab-cta__inner">
      <div class="ab-cta__copy">
        <p class="sec-kicker mono">NEXT</p>
        <h2 class="ab-cta__title">先看一栏数据，再决定要不要常来</h2>
        <p class="ab-cta__text">数据栏目按问题分成了几条路径，需要合作、反馈数据或询问订阅相关事项，走咨询通道找运营中心。</p>
      </div>
      <div class="ab-cta__actions">
        <a class="btn btn--accent" href="/product/">浏览数据栏目</a>
        <a class="btn btn--outline" href="/inquiry/">联系运营中心</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --ab-rule-ink: rgba(8, 13, 11, .14);
}

/* ---------- 首屏 ---------- */

.page-about .ab-hero {
  padding-top: clamp(18px, 3vw, 28px);
  padding-bottom: clamp(44px, 7vw, 88px);
}

.page-about .ab-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 52px);
  align-items: start;
  margin-top: clamp(22px, 4vw, 40px);
}

.page-about .ab-hero__title {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(29px, 6.4vw, 46px);
  line-height: 1.24;
  letter-spacing: .02em;
  color: var(--text);
  max-width: 17em;
}

.page-about .ab-hero__desc {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.82;
  color: var(--text-dim);
}

.page-about .ab-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-hero__facts .stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.page-about .ab-hero__facts .stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1;
  color: var(--text);
}

.page-about .ab-hero__facts .stat--lime .stat__value {
  color: var(--lime);
}

.page-about .ab-hero__facts .stat__unit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--mist);
}

.page-about .ab-hero__facts .stat__label {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

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

.page-about .ab-hero__frame {
  padding: clamp(18px, 3vw, 26px);
  background: rgba(18, 58, 43, .55);
}

.page-about .ab-hero__frame-label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-about .ab-hero__index .index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 小节标题颜色 ---------- */

.page-about .sec-title {
  color: var(--text);
}

.page-about .section--paper .sec-title {
  color: var(--ink-text);
}

.page-about .section--paper .sec-desc {
  color: var(--ink-dim);
}

/* ---------- 发展脉络 ---------- */

.page-about .ab-track__media {
  margin: clamp(26px, 4vw, 42px) 0 clamp(28px, 4vw, 44px);
}

.page-about .ab-tl__rail {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 18px;
  margin: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-about .ab-tl__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-soft), rgba(30, 91, 67, .12));
  pointer-events: none;
}

.page-about .ab-tl__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 170px;
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  text-align: left;
  background: rgba(11, 42, 32, .7);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.page-about .ab-tl__node:hover {
  border-color: var(--lime);
  color: var(--text);
  transform: translateY(-2px);
}

.page-about .ab-tl__node:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-about .ab-tl__node[aria-selected="true"],
.page-about .ab-tl__node[data-tabs-active] {
  border-color: var(--lime);
  background: rgba(201, 242, 60, .09);
}

.page-about .ab-tl__node-num {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--mist);
}

.page-about .ab-tl__node-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-tl__node-hint {
  font-size: 12px;
  color: var(--text-dim);
}

.page-about .ab-tl__panels {
  margin-top: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 3vw, 32px);
}

.page-about .ab-tl__panel {
  max-width: 62em;
}

.page-about .ab-tl__panel-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 25px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-tl__panel p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.82;
  color: var(--text-dim);
}

.page-about .ab-track__foot {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

/* ---------- 栏目版图 ---------- */

.page-about .ab-map__rows {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--ab-rule-ink);
}

.page-about .ab-map__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--ab-rule-ink);
  transition: background-color .2s ease;
}

.page-about .ab-map__row:hover {
  background: rgba(30, 91, 67, .05);
}

.page-about .ab-map__code {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--turf);
}

.page-about .ab-map__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: .02em;
  color: var(--ink-text);
}

.page-about .ab-map__text {
  margin: 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-dim);
}

.page-about .ab-map__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
}

.page-about .ab-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ---------- 更新流程 ---------- */

.page-about .ab-flow__media {
  margin: clamp(26px, 4vw, 42px) 0 clamp(28px, 4vw, 44px);
}

.page-about .ab-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .ab-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 16px;
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-step__num {
  margin: 0;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--lime);
}

.page-about .ab-step__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 21px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-step__text {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-about .ab-step__time {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--mist);
}

.page-about .ab-flow .note {
  margin-top: clamp(24px, 3vw, 34px);
}

/* ---------- 运营团队 ---------- */

.page-about .ab-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 56px);
  align-items: start;
}

.page-about .ab-team__list {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-team__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--line);
}

.page-about .ab-team__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-about .ab-team__count {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 42px);
  line-height: 1;
  color: var(--lime);
}

.page-about .ab-team__name {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 21px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-team__text {
  margin: 0;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-team__aside {
  display: grid;
  gap: 16px;
}

.page-about .ab-team__aside .note {
  margin: 0;
}

/* ---------- 内容合作 ---------- */

.page-about .ab-coop__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 28px);
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.page-about .ab-coop__item {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ab-rule-ink);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .55);
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.page-about .ab-coop__item:hover,
.page-about .ab-coop__item:focus-within {
  border-color: var(--turf);
  background: rgba(255, 255, 255, .92);
  transform: translateY(-2px);
}

.page-about .ab-coop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.page-about .ab-coop__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 22px);
  letter-spacing: .02em;
  color: var(--ink-text);
}

.page-about .ab-coop__tag {
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--turf);
}

.page-about .ab-coop__text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-dim);
}

.page-about .ab-coop__forms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  opacity: .58;
  transition: opacity .22s ease;
}

.page-about .ab-coop__item:hover .ab-coop__forms,
.page-about .ab-coop__item:focus-within .ab-coop__forms {
  opacity: 1;
}

.page-about .ab-coop__forms li {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-text);
  border: 1px solid var(--ab-rule-ink);
  border-radius: 999px;
}

/* ---------- 移动端设计 ---------- */

.page-about .ab-mobile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(26px, 4vw, 40px);
  align-items: start;
}

.page-about .ab-mobile__points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .ab-mobile__point {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-mobile__k {
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--lime);
}

.page-about .ab-mobile__v {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-mobile__stat {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(18, 58, 43, .55);
}

.page-about .ab-mobile__stat .stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.page-about .ab-mobile__stat .stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 10vw, 70px);
  line-height: 1;
  color: var(--lime);
}

.page-about .ab-mobile__stat .stat__unit {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--lime);
}

.page-about .ab-mobile__stat .stat__label {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-dim);
}

.page-about .ab-mobile__stat-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ---------- 收尾 ---------- */

.page-about .ab-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px);
  align-items: center;
}

.page-about .ab-cta__title {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: .02em;
  color: var(--text);
}

.page-about .ab-cta__text {
  margin: 12px 0 0;
  max-width: 42em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dim);
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 560px) {
  .page-about .ab-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-about .ab-map__row {
    grid-template-columns: 78px minmax(0, 1fr) minmax(180px, .55fr);
    align-items: start;
  }

  .page-about .ab-map__when {
    padding-top: 4px;
  }

  .page-about .ab-coop__list {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
    gap: clamp(40px, 5vw, 72px);
  }

  .page-about .ab-team__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  }

  .page-about .ab-mobile__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
  }

  .page-about .ab-cta__inner {
    grid-template-columns: minmax(0, 1.6fr) auto;
  }

  .page-about .ab-step {
    grid-template-columns: 44px minmax(0, 1fr) 140px;
    align-items: start;
  }

  .page-about .ab-step__time {
    grid-column: 3;
    text-align: right;
    margin-top: 2px;
  }
}