.page-about {
  --about-rail-num: calc(var(--space-8) + var(--space-3));
  --about-rail-side: calc(var(--space-8) * 4 + var(--space-3));
}

/* ---------- 面包屑 ---------- */
.page-about .about-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-about .about-crumbs a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
}

.page-about .about-crumbs a:hover,
.page-about .about-crumbs a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.page-about .about-crumbs-sep {
  color: var(--color-line);
}

.page-about .about-crumbs [aria-current="page"] {
  color: var(--color-ink);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  background-color: var(--color-surface-alt);
  border-top: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-line);
  padding: var(--space-6) 0 var(--space-4);
}

.page-about .about-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.page-about .about-hero-copy {
  min-width: 0;
}

.page-about .about-hero h1 {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  max-width: 24ch;
}

.page-about .about-hero .lede {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-about .about-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-thin);
  background-color: var(--color-line);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-about .about-figures li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
}

.page-about .about-figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  font-weight: var(--weight-heading);
  color: var(--color-primary);
}

.page-about .about-figures .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.page-about .about-index a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
}

.page-about .about-index a:hover,
.page-about .about-index a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.page-about .about-index-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* ---------- 分组标签 ---------- */
.page-about .about-group {
  margin-top: var(--space-8);
}

.page-about .about-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
}

.page-about .about-group-label span {
  color: var(--color-accent);
}

.page-about .about-group-label::after {
  content: "";
  flex: 1 1 auto;
  height: var(--border-thin);
  background-color: var(--color-line);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-group .about-chapter:first-of-type {
  border-top: 0;
}

.page-about .about-chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: var(--weight-heading);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.page-about .about-chapter-body {
  min-width: 0;
}

.page-about .about-chapter-body h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  max-width: 26ch;
}

.page-about .about-chapter-body p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-about .about-chapter-body p:last-child {
  margin-bottom: 0;
}

/* ---------- 事实边栏 ---------- */
.page-about .about-facts {
  align-self: start;
  min-width: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-facts-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
}

.page-about .about-facts dl {
  margin: 0;
}

.page-about .about-facts dt {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.page-about .about-facts dt:first-of-type {
  margin-top: 0;
}

.page-about .about-facts dd {
  margin: calc(var(--space-1) / 4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink);
}

.page-about .about-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* ---------- 周期刻度 ---------- */
.page-about .about-scale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-scale li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
  transition: border-color 0.16s ease;
}

.page-about .about-scale li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-scale li:hover {
  border-bottom-color: var(--color-accent);
}

.page-about .about-scale-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-accent);
  min-width: 2.6em;
}

.page-about .about-scale b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-scale p {
  margin: calc(var(--space-1) / 4) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 图片与表格 ---------- */
.page-about .about-figure {
  margin: var(--space-4) 0 0;
}

.page-about .about-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-table {
  min-width: 30rem;
}

.page-about .about-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

/* ---------- 折叠明细 ---------- */
.page-about .about-disclosure {
  margin-top: var(--space-3);
}

.page-about .about-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-bullets li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.page-about .about-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-1) * 0.75);
  width: var(--space-2);
  height: var(--border-thin);
  background-color: var(--color-accent);
}

.page-about .about-bullets b {
  color: var(--color-ink);
  font-weight: var(--weight-heading);
}

/* ---------- 四组分工 ---------- */
.page-about .about-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-roles li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-about .about-roles li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-roles .about-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
}

.page-about .about-roles b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-roles em {
  display: block;
  margin-top: calc(var(--space-1) / 4);
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 相关栏目入口 ---------- */
.page-about .about-links {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-links li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-about .about-links a {
  justify-self: start;
  padding-bottom: calc(var(--space-1) / 4);
  font-size: var(--text-base);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary-soft);
}

.page-about .about-links a:hover,
.page-about .about-links a:focus-visible {
  color: var(--color-focus);
  border-bottom-color: var(--color-accent);
}

.page-about .about-links span {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 桌面栅格 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    padding: var(--space-8) 0 var(--space-4);
  }

  .page-about .about-hero-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: end;
  }

  .page-about .about-hero h1 {
    font-size: var(--text-3xl);
    max-width: 20ch;
  }

  .page-about .about-chapter {
    grid-template-columns: var(--about-rail-num) minmax(0, 1fr) var(--about-rail-side);
    gap: var(--space-6);
    padding: var(--space-8) 0;
  }

  .page-about .about-chapter-num {
    font-size: var(--text-3xl);
    padding-top: 0;
  }

  .page-about .about-chapter-body h2 {
    font-size: var(--text-2xl);
  }

  .page-about .about-facts {
    padding: 0 0 0 var(--space-3);
    border-top: 0;
    border-left: var(--border-thin) solid var(--color-line);
  }

  .page-about .about-links li {
    grid-template-columns: var(--about-rail-num) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
  }
}

@media (min-width: 1100px) {
  .page-about .about-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</final>
<<<END>>>

等等，我不该加 `</final>` 和 `<<<END>>>`。按要求的标记顺序输出：MAIN_HTML 块和 PAGE_CSS 块，不能有别的。

让我重新正确地输出。
<main id="main-content" class="page-about">
  <div class="container">
    <nav class="crumbs about-crumbs" aria-label="面包屑导航">
      <a href="/">总览首页</a>
      <span class="about-crumbs-sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌概况</span>
    </nav>
  </div>

  <header class="about-hero">
    <div class="container">
      <div class="about-hero-inner">
        <div class="about-hero-copy">
          <p class="eyebrow">品牌概况 · 当前第 7 个赛季周期</p>
          <h1>海德体育主站把赛事数据与赛季档案放在同一张工作台上</h1>
          <p class="lede">海德体育主站面向关注海德体育动态的成年用户，提供赛事数据聚合与赛季档案核对。这份概况用六段说明主体定位、发展节奏、能力边界、核对口径、团队协作与终端场景，不逐条复述功能清单。</p>
        </div>
        <ul class="about-figures">
          <li>
            <span class="stat-value about-figure-num">18</span>
            <span class="stat-label">个联赛与杯赛</span>
          </li>
          <li>
            <span class="stat-value about-figure-num">42</span>
            <span class="stat-label">个赛季切片</span>
          </li>
          <li>
            <span class="stat-value about-figure-num">7</span>
            <span class="stat-label">个赛季周期</span>
          </li>
          <li>
            <span class="stat-value about-figure-num">26</span>
            <span class="stat-label">人数据与运营团队</span>
          </li>
        </ul>
      </div>
      <nav class="about-index" aria-label="本页章节索引">
        <ol>
          <li><a href="#s1"><span class="about-index-num">01</span>定位与主题</a></li>
          <li><a href="#s2"><span class="about-index-num">02</span>发展节奏</a></li>
          <li><a href="#s3"><span class="about-index-num">03</span>能力边界</a></li>
          <li><a href="#s4"><span class="about-index-num">04</span>核对口径</a></li>
          <li><a href="#s5"><span class="about-index-num">05</span>团队协作</a></li>
          <li><a href="#s6"><span class="about-index-num">06</span>终端场景</a></li>
        </ol>
      </nav>
    </div>
  </header>

  <div class="container">
    <section class="about-group" aria-labelledby="g1">
      <p class="about-group-label" id="g1"><span>第一组</span>定位与节奏</p>

      <article class="about-chapter" id="s1">
        <div class="about-chapter-num" aria-hidden="true">01</div>
        <div class="about-chapter-body">
          <h2>为赛事对照而建的数据入口</h2>
          <p>主站把联赛排名、夺冠赔率对照和赛季趋势收进同一套面板。用户从大屏、平板或手机进入，看到的排名层级和赔率来源顺序是同一份口径，不会因为设备不同而换一套说法。</p>
          <p>赛季档案按切片存放，第3栏两步登录就能翻到某个轮次的历史记录。站点只做数据聚合与档案核对，不在内容之外延伸其他业务。</p>
          <figure class="media-frame media-frame--tint about-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍的多屏数据工作台，屏幕上并行显示联赛排名、夺冠赔率对照与赛季趋势折线" loading="lazy" decoding="async">
            <figcaption class="media-caption">多屏使用场景：排名、赔率与趋势三块面板并排铺开</figcaption>
          </figure>
        </div>
        <aside class="about-facts" aria-label="定位关键事实">
          <h3 class="about-facts-title">关键事实</h3>
          <dl>
            <dt>站点名称</dt>
            <dd>海德体育主站</dd>
            <dt>访问域名</dt>
            <dd class="about-mono">haide-arena.com.cn</dd>
            <dt>核心服务</dt>
            <dd>赛事数据聚合 · 赛季档案核对</dd>
            <dt>档案路径</dt>
            <dd>第3栏两步登录查阅</dd>
            <dt>备案号</dt>
            <dd class="about-mono">皖ICP备92162951号</dd>
          </dl>
        </aside>
      </article>

      <article class="about-chapter" id="s2">
        <div class="about-chapter-num" aria-hidden="true">02</div>
        <div class="about-chapter-body">
          <h2>运营刻度跟着赛季走</h2>
          <p>站点的节奏不按发布节点排，而按赛季周期排。一个周期内，面板先完成联赛与杯赛的口径同步，再补齐赔率对照与排名刷新，最后把整季归档成切片。</p>
          <p>刷新快、对照清晰、档案易查这三项体验，就是在这样的顺序里一段一段定型的，而不是在同一次改版里同时推出来。</p>
          <figure class="media-frame media-frame--21x9 about-figure">
            <img src="{zhanqunpic:h:625w:1000}" width="1000" height="625" alt="按赛季周期排列的运营节奏刻度条，附排名刷新频率的迷你折线示意" loading="lazy" decoding="async">
            <figcaption class="media-caption">七个赛季周期的节奏刻度与刷新频率变化</figcaption>
          </figure>
        </div>
        <aside class="about-facts" aria-label="赛季周期节奏">
          <h3 class="about-facts-title">周期刻度</h3>
          <ol class="about-scale">
            <li>
              <span class="about-scale-num">1-2</span>
              <div>
                <b>口径基线期</b>
                <p>联赛排名与赛程口径统一，面板开始稳定输出。</p>
              </div>
            </li>
            <li>
              <span class="about-scale-num">3</span>
              <div>
                <b>赔率对照加入期</b>
                <p>赔率对照与变动行高亮进入面板。</p>
              </div>
            </li>
            <li>
              <span class="about-scale-num">4-5</span>
              <div>
                <b>档案编目期</b>
                <p>赛季切片按类编目，两步登录查阅。</p>
              </div>
            </li>
            <li>
              <span class="about-scale-num">6</span>
              <div>
                <b>终端适配期</b>
                <p>平板横屏与移动端布局定型。</p>
              </div>
            </li>
            <li>
              <span class="about-scale-num">7</span>
              <div>
                <b>协作接口期</b>
                <p>与 12 家数据与内容机构对接复核。</p>
              </div>
            </li>
          </ol>
        </aside>
      </article>
    </section>

    <section class="about-group" aria-labelledby="g2">
      <p class="about-group-label" id="g2"><span>第二组</span>能力与口径</p>

      <article class="about-chapter" id="s3">
        <div class="about-chapter-num" aria-hidden="true">03</div>
        <div class="about-chapter-body">
          <h2>18 个联赛与杯赛，以及不覆盖的部分</h2>
          <p>数据面板覆盖 18 个联赛与杯赛，输出联赛排名、夺冠赔率对照和赛季趋势三类视图。赔率模块用琥珀底标记变动行，排名按冷色主色系分层，方便在大屏上一眼定位到区段。</p>
          <p>面板不做投注入口，不代兑、不保管任何资金，也不对赛事结果给出预测性承诺。所有赔率数字只作横向对照参考，不构成任何形式的建议。</p>
          <div class="disclosure about-disclosure">
            <button type="button" class="disclosure-btn" data-disclosure aria-expanded="false" aria-controls="about-boundary">展开口径与边界明细</button>
            <div class="disclosure-panel" id="about-boundary" data-disclosure-panel hidden>
              <ul class="about-bullets">
                <li><b>收录范围</b>：18 个联赛与杯赛，覆盖常规赛与杯赛阶段。</li>
                <li><b>赔率口径</b>：多来源对照值，逐一标注来源与抓取顺序，不合并成单一报价。</li>
                <li><b>排名口径</b>：按赛事官方积分规则排序，同分时以净胜与相互战绩决定层级。</li>
                <li><b>趋势口径</b>：同一指标可跨赛季纵向并排，保留各赛季原始取值。</li>
                <li><b>不做的部分</b>：不提供交易、代兑、结果预测，也不代替官方成绩公告。</li>
                <li><b>更新节奏</b>：比赛日按轮次滚动刷新，非比赛日按批次整轮同步。</li>
              </ul>
            </div>
          </div>
        </div>
        <aside class="about-facts" aria-label="数据口径摘要">
          <h3 class="about-facts-title">口径摘要</h3>
          <dl>
            <dt>排名刷新</dt>
            <dd>比赛日按轮次滚动刷新</dd>
            <dt>赔率来源</dt>
            <dd>多来源对照并标注顺序</dd>
            <dt>趋势跨度</dt>
            <dd>单指标可跨赛季纵向对比</dd>
            <dt>展示边界</dt>
            <dd>仅作数据对照，不含交易入口</dd>
          </dl>
        </aside>
      </article>

      <article class="about-chapter" id="s4">
        <div class="about-chapter-num" aria-hidden="true">04</div>
        <div class="about-chapter-body">
          <h2>先校验，再入库，最后留痕</h2>
          <p>每条数据进入面板前都要过一遍校验，数值异常时按来源回溯到原始轮次。纠错不是覆盖，而是登记：改动会写回对应的赛季切片说明，旧值仍可查。</p>
          <p>用户反馈由客服邮箱统一接收，涉及口径的调整会同步到档案说明里，避免同一指标在不同页面出现两种算法。</p>
          <div class="about-table-wrap">
            <table class="data-table about-table">
              <caption>核对链路的三个环节</caption>
              <thead>
                <tr>
                  <th scope="col">环节</th>
                  <th scope="col">动作</th>
                  <th scope="col">产出</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>入库前</td>
                  <td>多来源比对，标记异常值与缺失轮次</td>
                  <td>校验标记</td>
                </tr>
                <tr>
                  <td>入库时</td>
                  <td>按联赛、轮次与指标归并成可对照行</td>
                  <td>结构化数据行</td>
                </tr>
                <tr>
                  <td>入库后</td>
                  <td>切片留存，纠错回写并保留旧值</td>
                  <td>赛季档案条目</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <aside class="about-facts" aria-label="核对原则">
          <h3 class="about-facts-title">核对原则</h3>
          <dl>
            <dt>异常处理</dt>
            <dd>先回溯来源，再决定是否入库</dd>
            <dt>纠错方式</dt>
            <dd>登记改动，不直接覆盖旧值</dd>
            <dt>反馈渠道</dt>
            <dd>客服邮箱，工作日 9:00-18:00 内回复</dd>
            <dt>趋势核对</dt>
            <dd>保留原始切片，允许跨赛季对照</dd>
          </dl>
        </aside>
      </article>
    </section>

    <section class="about-group" aria-labelledby="g3">
      <p class="about-group-label" id="g3"><span>第三组</span>团队与场景</p>

      <article class="about-chapter" id="s5">
        <div class="about-chapter-num" aria-hidden="true">05</div>
        <div class="about-chapter-body">
          <h2>26 人，四个小组，一条校验链</h2>
          <p>数据工程与内容运营团队共 26 人，分为数据校验、档案编目、终端适配与客服支持四组。四组按一条链协作：校验组把关数值，编目组负责切片归档，适配组处理各终端的展示差异，客服组把用户反馈带回链路前端。</p>
          <p>站点与 12 家数据服务与内容协作机构保持接口，用于赛事数据校验和内容纠错。接口按赛季周期复核一次，变更过程保留记录。</p>
          <figure class="media-frame media-frame--tint about-figure">
            <img src="{zhanqunpic:h:625w:1000}" width="1000" height="625" alt="抽象数据接口节点与协作网络示意图，关键节点以竞技橙高亮" loading="lazy" decoding="async">
            <figcaption class="media-caption">协作接口节点：赛事数据校验与内容纠错的反馈路径</figcaption>
          </figure>
        </div>
        <aside class="about-facts" aria-label="四个小组分工">
          <h3 class="about-facts-title">四组分工</h3>
          <ul class="about-roles">
            <li>
              <span class="about-mono">01</span>
              <div>
                <b>数据校验</b>
                <em>来源比对 · 异常标记 · 回溯</em>
              </div>
            </li>
            <li>
              <span class="about-mono">02</span>
              <div>
                <b>档案编目</b>
                <em>赛季切片归类 · 索引维护</em>
              </div>
            </li>
            <li>
              <span class="about-mono">03</span>
              <div>
                <b>终端适配</b>
                <em>大屏 · 平板横屏 · 移动端布局</em>
              </div>
            </li>
            <li>
              <span class="about-mono">04</span>
              <div>
                <b>客服支持</b>
                <em>纠错接收 · 协作回访</em>
              </div>
            </li>
          </ul>
        </aside>
      </article>

      <article class="about-chapter" id="s6">
        <div class="about-chapter-num" aria-hidden="true">06</div>
        <div class="about-chapter-body">
          <h2>大屏、平板、手机，各看各的重点</h2>
          <p>大屏适合盯住联赛排名和赔率对照，值班时可以把多块面板同时铺开。平板横屏看青训梯队更顺手，7 个层级之间的升降关系一屏读完。手机端则更多用在赛后快速核对，先确认结果，再回看趋势。</p>
          <p>各终端的版本差异、安全机制和具体渠道说明分布在对应栏目里，可以从下面四个入口进入。</p>
          <ul class="about-links">
            <li>
              <a href="/get-app/">获取应用</a>
              <span>多端版本与安装准备对照，4 种方案按设备分组</span>
            </li>
            <li>
              <a href="/version/">版本说明</a>
              <span>数据面板、赛季档案与移动适配的更新记录</span>
            </li>
            <li>
              <a href="/security/">安全保障</a>
              <span>账号、传输、分级、设备与校验机制目录</span>
            </li>
            <li>
              <a href="/connect/">联系品牌</a>
              <span>客服邮箱、服务热线与通信地址</span>
            </li>
          </ul>
        </div>
        <aside class="about-facts" aria-label="终端场景对照">
          <h3 class="about-facts-title">场景对照</h3>
          <dl>
            <dt>大屏</dt>
            <dd>排名与赔率对照，多面板并排</dd>
            <dt>平板横屏</dt>
            <dd>青训梯队 7 个层级，一屏读完</dd>
            <dt>手机</dt>
            <dd>赛后快速核对，先结果后趋势</dd>
            <dt>入口</dt>
            <dd>获取应用 · 版本说明 · 安全保障</dd>
          </dl>
        </aside>
      </article>
    </section>
  </div>
</main>

.page-about {
  --about-rail-num: calc(var(--space-8) + var(--space-3));
  --about-rail-side: calc(var(--space-8) * 4 + var(--space-3));
}

/* ---------- 面包屑 ---------- */
.page-about .about-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-about .about-crumbs a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
}

.page-about .about-crumbs a:hover,
.page-about .about-crumbs a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.page-about .about-crumbs-sep {
  color: var(--color-line);
}

.page-about .about-crumbs [aria-current="page"] {
  color: var(--color-ink);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  background-color: var(--color-surface-alt);
  border-top: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-line);
  padding: var(--space-6) 0 var(--space-4);
}

.page-about .about-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.page-about .about-hero-copy {
  min-width: 0;
}

.page-about .about-hero h1 {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  max-width: 24ch;
}

.page-about .about-hero .lede {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-about .about-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-thin);
  background-color: var(--color-line);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-about .about-figures li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
}

.page-about .about-figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  font-weight: var(--weight-heading);
  color: var(--color-primary);
}

.page-about .about-figures .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

/* ---------- 章节索引 ---------- */
.page-about .about-index {
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.page-about .about-index a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
}

.page-about .about-index a:hover,
.page-about .about-index a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.page-about .about-index-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* ---------- 分组标签 ---------- */
.page-about .about-group {
  margin-top: var(--space-8);
}

.page-about .about-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
}

.page-about .about-group-label span {
  color: var(--color-accent);
}

.page-about .about-group-label::after {
  content: "";
  flex: 1 1 auto;
  height: var(--border-thin);
  background-color: var(--color-line);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-group .about-chapter:first-of-type {
  border-top: 0;
}

.page-about .about-chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: var(--weight-heading);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.page-about .about-chapter-body {
  min-width: 0;
}

.page-about .about-chapter-body h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  max-width: 26ch;
}

.page-about .about-chapter-body p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-about .about-chapter-body p:last-child {
  margin-bottom: 0;
}

/* ---------- 事实边栏 ---------- */
.page-about .about-facts {
  align-self: start;
  min-width: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-facts-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
}

.page-about .about-facts dl {
  margin: 0;
}

.page-about .about-facts dt {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.page-about .about-facts dt:first-of-type {
  margin-top: 0;
}

.page-about .about-facts dd {
  margin: calc(var(--space-1) / 4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink);
}

.page-about .about-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* ---------- 周期刻度 ---------- */
.page-about .about-scale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-scale li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
  transition: border-color 0.16s ease;
}

.page-about .about-scale li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-scale li:hover {
  border-bottom-color: var(--color-accent);
}

.page-about .about-scale-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-accent);
  min-width: 2.6em;
}

.page-about .about-scale b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-scale p {
  margin: calc(var(--space-1) / 4) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 图片与表格 ---------- */
.page-about .about-figure {
  margin: var(--space-4) 0 0;
}

.page-about .about-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-table {
  min-width: 30rem;
}

.page-about .about-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

/* ---------- 折叠明细 ---------- */
.page-about .about-disclosure {
  margin-top: var(--space-3);
}

.page-about .about-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-bullets li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.page-about .about-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-1) * 0.75);
  width: var(--space-2);
  height: var(--border-thin);
  background-color: var(--color-accent);
}

.page-about .about-bullets b {
  color: var(--color-ink);
  font-weight: var(--weight-heading);
}

/* ---------- 四组分工 ---------- */
.page-about .about-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-about .about-roles li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-about .about-roles li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-about .about-roles .about-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
}

.page-about .about-roles b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-about .about-roles em {
  display: block;
  margin-top: calc(var(--space-1) / 4);
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 相关栏目入口 ---------- */
.page-about .about-links {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-about .about-links li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-about .about-links a {
  justify-self: start;
  padding-bottom: calc(var(--space-1) / 4);
  font-size: var(--text-base);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary-soft);
}

.page-about .about-links a:hover,
.page-about .about-links a:focus-visible {
  color: var(--color-focus);
  border-bottom-color: var(--color-accent);
}

.page-about .about-links span {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- 桌面栅格 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    padding: var(--space-8) 0 var(--space-4);
  }

  .page-about .about-hero-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: end;
  }

  .page-about .about-hero h1 {
    font-size: var(--text-3xl);
    max-width: 20ch;
  }

  .page-about .about-chapter {
    grid-template-columns: var(--about-rail-num) minmax(0, 1fr) var(--about-rail-side);
    gap: var(--space-6);
    padding: var(--space-8) 0;
  }

  .page-about .about-chapter-num {
    font-size: var(--text-3xl);
    padding-top: 0;
  }

  .page-about .about-chapter-body h2 {
    font-size: var(--text-2xl);
  }

  .page-about .about-facts {
    padding: 0 0 0 var(--space-3);
    border-top: 0;
    border-left: var(--border-thin) solid var(--color-line);
  }

  .page-about .about-links li {
    grid-template-columns: var(--about-rail-num) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
  }
}