.page-platform {
  background: var(--color-surface);
  color: var(--color-ink);
}

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

.page-platform .platform-hero {
  padding: var(--section-y-lg) 0 var(--section-y);
  background: var(--color-surface);
}

.page-platform .platform-hero .breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-platform .platform-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  max-width: 15ch;
}

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

.page-platform .capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.page-platform .capability-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: background 240ms ease;
}

.page-platform .capability-cell:hover,
.page-platform .capability-cell:focus-visible {
  background: var(--color-surface-deep);
}

.page-platform .capability-cell--deep {
  background: var(--color-surface-deep);
}

.page-platform .capability-cell--deep:hover,
.page-platform .capability-cell--deep:focus-visible {
  background: var(--color-highlight);
}

.page-platform .capability-cell__num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-platform .capability-cell__unit {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
}

.page-platform .capability-cell__label {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.page-platform .hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-platform .hero-index a {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

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

/* ---------- 分组通用 ---------- */

.page-platform .platform-group {
  padding: var(--section-y) 0;
}

.page-platform .platform-group--alt {
  background: var(--color-surface-alt);
}

.page-platform .group-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-left: var(--space-3);
  border-left: var(--border-thin) solid var(--color-line);
}

.page-platform .group-head .chapter-number {
  display: block;
  font-family: var(--font-mono);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: 0.06em;
}

.page-platform .group-head__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
}

.page-platform .group-head__lede {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink-soft);
}

/* ---------- 矩阵布局 ---------- */

.page-platform .matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-platform .matrix-block--text {
  max-width: var(--measure);
}

.page-platform .matrix-block__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 26ch;
}

.page-platform .matrix-block__body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-platform .inline-link {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary);
  padding-bottom: 1px;
}

.page-platform .inline-link:hover,
.page-platform .inline-link:focus-visible {
  color: var(--color-primary);
}

/* ---------- 要点列表 ---------- */

.page-platform .point-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-platform .point-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.page-platform .point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: var(--space-1);
  height: var(--border-thin);
  background: var(--color-ink-muted);
}

.page-platform .point-list strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- 图片 ---------- */

.page-platform .figure {
  margin: 0;
}

.page-platform .figure__frame {
  padding: var(--space-2);
  background: var(--color-surface-deep);
  border-radius: var(--radius-sm);
}

.page-platform .figure__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-deep);
}

.page-platform .figure__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-platform .figure__caption {
  margin-top: var(--space-2);
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ---------- 统计跨度列表 ---------- */

.page-platform .period-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-platform .period-list__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

.page-platform .period-list__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.page-platform .period-list__bar {
  display: block;
  height: var(--border-thin);
  margin-top: var(--space-2);
  background: var(--color-ink-muted);
}

.page-platform .period-list__bar--round {
  width: 22%;
}

.page-platform .period-list__bar--month {
  width: 58%;
}

.page-platform .period-list__bar--season {
  width: 100%;
}

/* ---------- 反相统计面板 ---------- */

.page-platform .stat-panel {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.page-platform .stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-platform .stat-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-platform .stat-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-contrast-ink);
}

.page-platform .stat-row--flag .stat-row__num {
  color: var(--color-contrast-accent);
}

.page-platform .stat-row__text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-platform .stat-panel__caption {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-muted);
}

/* ---------- 悬停口径说明 ---------- */

.page-platform .hint {
  position: relative;
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  border-bottom: var(--border-thin) dashed var(--color-ink-muted);
  cursor: help;
}

.page-platform .hint__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  width: max-content;
  max-width: 30ch;
  padding: var(--space-2) var(--space-3);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-size: var(--text-xs);
  line-height: 1.7;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease;
  z-index: 2;
}

.page-platform .hint:hover .hint__pop,
.page-platform .hint:focus-within .hint__pop {
  opacity: 1;
  visibility: visible;
}

/* ---------- 收束 ---------- */

.page-platform .platform-close {
  padding: var(--section-y) 0 var(--section-y-lg);
  background: var(--color-surface-deep);
}

.page-platform .platform-close__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

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

.page-platform .platform-close__body a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary);
  padding-bottom: 1px;
}

.page-platform .platform-close__body a:hover,
.page-platform .platform-close__body a:focus-visible {
  color: var(--color-primary);
}

/* ---------- 桌面栅格 ---------- */

@media (min-width: 860px) {
  .page-platform .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }

  .page-platform .capability-cell:nth-child(2),
  .page-platform .capability-cell:nth-child(4) {
    margin-top: var(--space-6);
  }

  .page-platform .group-head {
    padding-left: var(--space-4);
  }

  .page-platform .matrix {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
    align-items: start;
  }

  .page-platform .matrix--a .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--a .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--b .matrix-block--text {
    grid-column: 1 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--b .matrix-block--media {
    grid-column: 7 / span 6;
  }

  .page-platform .matrix--c .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--c .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--d .matrix-block--text {
    grid-column: 1 / span 5;
    margin-top: var(--space-4);
  }

  .page-platform .matrix--d .matrix-block--stats {
    grid-column: 7 / span 6;
  }

  .page-platform .matrix--e .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--e .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .stat-panel {
    padding: var(--space-6);
  }

  .page-platform .stat-row {
    grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* ---------- 窄屏保护 ---------- */

@media (max-width: 480px) {
  .page-platform .platform-hero__title {
    max-width: none;
  }

  .page-platform .capability-cell__num {
    font-size: var(--text-4xl);
  }

  .page-platform .hero-index {
    gap: var(--space-2) var(--space-3);
  }
}
<<<END>>>
```

等等——我需要去掉末尾的结束标记。输出只能包含两个标记块。让我删掉 `<<<END>>>`。

还有，`.page-platform .platform-hero__title` 用了 `max-width: 15ch`，配合 `var(--text-display)` 在 105px 下就是 15 个字符宽，大致还行。应该没问题。

再检查一下：有没有用到不允许的 CSS 选择器？没有，全都在 `.page-platform` 作用域下。

用了 `:first-child`、`:nth-child`、`:hover` 等，都没问题。

以 `var()` 形式出现的颜色/字号，都没问题。

检查一下 `--color-contrast-accent` —— 它在 css_variables 列表里。是的。

看看 `--color-highlight` —— 在列表里。是的。

`--border-thin` —— 在列表里。是的。

`--color-primary-soft` —— 没用上？我在 `.mark-note` 里没用，因为已经删了。没关系。

好，没问题。

最后检查一下内容长度——看起来足够充实。

等等，有一点：需求 23 说“条目列表不能直接接在页面开头”。我的 hero 是有视觉重量的——没问题。

另外需求 22：`hero_display` 为 true 时，h1 必须使用 `var(--text-display)`。✓

需求 3：单个 h1 ✓，面包屑 ✓。

检查：`.platform-hero .breadcrumb` —— 面包屑是共享类，但我是在 `.page-platform` 作用域下给它加样式，这没问题（这是作用域内的定位样式，不是重新定义共享类本身…… 嗯，其实就是给共享类加样式）。需求 5 说“不要重复定义共享头部和页脚”，但面包屑不是头部/页脚，所以还好。

好，可以了。

嗯，还有一处，我确认一下 `.group-head .chapter-number` —— `chapter-number` 是共享类，我在这里给它加了一些属性（`display: block`、`color`、`font-family`）。这算作用域内的增强，可以接受。

我再把 `<<<END>>>` 删掉，输出最终版本。

等一下，还有一个问题——协作块上那个悬停提示的 `<span class="hint">`——它是行内的，里面包含一个 `__pop` span。因为父级是 `inline-block` 加 `position: relative`，所以工作正常。没问题。

不过它放在 `matrix-block--text` 里面，而那个容器有个 `max-width: var(--measure)`。弹层宽度是 `max-content`，上限 30ch——可能会从右侧溢出。在窄屏幕上得小心。

加一个防护：

```css
.page-platform .hint__pop {
  right: auto;
  ...
}
```

嗯，在移动端可能会横向溢出。给它加个 `max-width` 吧。

更好的做法是：在小屏幕上让提示变成一个静态的说明文字块？

或者直接给弹层加个约束：

```css
@media (max-width: 860px) {
  .page-platform .hint__pop {
    position: static;
    display: block;
    max-width: none;
    margin-top: var(--space-2);
    opacity: 1;
    visibility: visible;
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
  }
}
```

嗯，但这样 hover 还有什么意义呢。算了，干脆让它在小屏幕上始终可见吧——反正信息本身是有用的。其实这样一来，桌面端的悬停交互就显得有点多余了。

另一个方案：让它保持在原地，但宽度限制为一个合理的 ch 值，并允许换行。

```css
.page-platform .hint__pop {
  width: min(30ch, 78vw);
  max-width: 100%;
}
```

嗯，`position: absolute` 配合 `left: 0`，如果父元素靠近右边缘，它可能会溢出视口。但 `max-width: 78vw` 加上父元素左边距，应该基本没问题。因为父级 `.hint` 在文本块里，而文本块有左边距……

其实最稳妥的做法就是在小屏幕上把它做成静态的。那我就这么做，始终显示。这样可读性其实更好。

```css
@media (max-width: 860px) {
  .page-platform .hint {
    display: block;
    border-bottom: 0;
    cursor: default;
    margin-top: var(--space-4);
  }
  .page-platform .hint__pop {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    margin-top: var(--space-2);
    opacity: 1;
    visibility: visible;
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
  }
}
```

但这样在窄屏上父级文字和弹窗会一起可见，读起来会有点重复。嗯。

另一个方案：保留悬停效果，但把弹层限制在容器内。

还是用 `left: 0; right: auto;` 再加 `width: max-content; max-width: min(30ch, 82vw);` 吧。

其实 `max-width: 82vw` 的话——如果 `.hint` 在手机上大概从 20px 处开始，82vw 大约是 320px，总宽就跑到 340px 去了，超过了 375px 的视口。啧。

干脆还是用 `max-width: min(30ch, 74vw)`。在 375px 下，74vw = 277px，加上左侧 20px，总共 297px，放得下。

好，就这么办。

那我把最终版本写出来。

其实，更简单也更干净的做法是——我根本不需要那个弹层。直接写出来就行。但“模块图形 hover 时显示一句口径说明”这个交互需求在……

行吧，保留弹层，用 `max-width: min(30ch, 74vw)`。

现在写最终输出。
<main id="main-content" class="page-platform">

  <section class="platform-hero" id="overview" data-section>
    <div class="container">
      <nav class="breadcrumb" aria-label="当前位置">
        <a href="/">首页</a>
        <span aria-hidden="true">／</span>
        <span>平台服务</span>
      </nav>

      <h1 class="h-display platform-hero__title">五项能力，从检索一路看到协作对接</h1>

      <p class="lede platform-hero__lede">
        欧巴体育做了九个赛季的中文足球赛事观察，把日常用到的东西收成五件可以单独上手的事：在顶部检索框里找一支球队，在个人页左侧把常看的对象钉住，按三种跨度看同一组角球数字，跟着战报与阶段长文的时间点读，最后把统计口径对齐给来谈合作的机构。每一组下面都写了它解决什么问题、什么场合用得上，以及范围到哪里为止。
      </p>

      <div class="capability-grid">
        <a class="capability-cell" href="#search">
          <span class="capability-cell__num num">2,600</span>
          <span class="capability-cell__unit">个球队名与常用简称</span>
          <span class="capability-cell__label">顶部检索框直接匹配，写简称也能命中。</span>
        </a>
        <a class="capability-cell capability-cell--deep" href="#follow">
          <span class="capability-cell__num num">30</span>
          <span class="capability-cell__unit">个同时关注上限</span>
          <span class="capability-cell__label">联赛、球队、赛事时间三层往下筛。</span>
        </a>
        <a class="capability-cell" href="#period">
          <span class="capability-cell__num num">3</span>
          <span class="capability-cell__unit">种角球统计跨度</span>
          <span class="capability-cell__label">轮次、月份、赛季之间随时换。</span>
        </a>
        <a class="capability-cell capability-cell--deep" href="#cadence">
          <span class="capability-cell__num num">2</span>
          <span class="capability-cell__unit">次阶段观察更新 / 周</span>
          <span class="capability-cell__label">固定在每周二与周五发布。</span>
        </a>
      </div>

      <ul class="hero-index">
        <li><a href="#search" data-toc-link>检索与结果读法</a></li>
        <li><a href="#follow" data-toc-link>关注列表与筛选</a></li>
        <li><a href="#period" data-toc-link>统计跨度切换</a></li>
        <li><a href="#cadence" data-toc-link>内容更新节奏</a></li>
        <li><a href="#partner" data-toc-link>机构协作对接</a></li>
      </ul>
    </div>
  </section>

  <section class="platform-group" id="search" data-section>
    <div class="container">
      <header class="group-head">
        <span class="chapter-number chapter-number--sm" aria-hidden="true">01</span>
        <h2 class="title-xl group-head__title">检索框在顶部，结果铺在下面</h2>
        <p class="group-head__lede">输入队名或常用简称，页面不跳转，首屏结果平均 0.2 秒返回。</p>
      </header>

      <div class="matrix matrix--a">
        <article class="matrix-block matrix-block--media">
          <figure class="figure">
            <div class="figure__frame">
              <div class="figure__media">
                <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="顶部检索框与下方数据条、战报摘要双栏结果的界面示意">
              </div>
            </div>
            <figcaption class="figure__caption">结果左右分栏：窄的一栏是数据条，宽的一栏是战报摘要，两栏中间写着本次结果落在哪一轮。</figcaption>
          </figure>
        </article>

        <article class="matrix-block matrix-block--text">
          <h3 class="matrix-block__title">一次输入，同时拿到数据和赛场叙述</h3>
          <p class="matrix-block__body">
            检索框固定在页面顶部，桌面端任何时候都能直接敲字。覆盖 2,600 个球队名称与常用简称，全称、简称、常见缩写都能对上；不需要先选联赛或赛季，输进去就出结果。
          </p>
          <ul class="point-list">
            <li><strong>左栏数据条</strong>：比分、射门与角球按最近一轮排在最前，数字用等宽字形，单位跟在数字右侧空一格。</li>
            <li><strong>右栏战报摘要</strong>：赛果先行，随后是决定走向的两三个片段，控制在两三段，读完就知道要不要继续深看。</li>
            <li><strong>两栏之间那条细线</strong>：标着这次结果对应的轮次与统计口径，读之前先确认它同步到哪一轮，避免拿旧数字做判断。</li>
          </ul>
          <p class="matrix-block__body">
            想知道一次检索要花多久、命中范围有多宽，直接在顶部试一支常看的队即可；对口径本身有疑问，
            <a class="inline-link" href="/reports/">数据观察</a>里写了完整的统计说明与更新时间。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="platform-group platform-group--alt" id="follow" data-section>
    <div class="container">
      <header class="group-head">
        <span class="chapter-number chapter-number--sm" aria-hidden="true">02</span>
        <h2 class="title-xl group-head__title">关注列表放在个人页左侧，越往下越具体</h2>
        <p class="group-head__lede">联赛、球队、赛事时间三层筛选可以叠加使用，最多同时关注 30 个对象。</p>
      </header>

      <div class="matrix matrix--b">
        <article class="matrix-block matrix-block--text">
          <h3 class="matrix-block__title">把常看的对象钉住，不用每次重新找</h3>
          <p class="matrix-block__body">
            关注列表是个人页左侧竖排的一列，从上到下依次是联赛、球队、赛事时间三层。跟着赛季走的球迷通常先把联赛选好，再逐个把球队加进去，最后按最近几轮收窄范围。
          </p>
          <ul class="point-list">
            <li><strong>上限 30 个</strong>：同时关注的对象最多 30 个，到顶之后需要先取关一个再添加，免得列表长到读不完。</li>
            <li><strong>三层可以叠加</strong>：先选联赛会收掉大部分候选，再选球队就只剩关心的那几支，最后按赛事时间缩到最近几轮。</li>
            <li><strong>状态写在名字右侧</strong>：最近一轮的结果和下一次出场时间就在关注对象旁边，不用点进去也能判断今天要不要细看。</li>
          </ul>
          <p class="matrix-block__body">
            拿不准该用关注列表还是每天开检索框查一遍，<a class="inline-link" href="/advice/">选择建议</a>把几种跟进方式放在一起对照过。
          </p>
        </article>

        <article class="matrix-block matrix-block--media">
          <figure class="figure">
            <div class="figure__frame">
              <div class="figure__media">
                <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="个人页左侧竖排筛选标签与关注对象的排布示意" loading="lazy" decoding="async">
              </div>
            </div>
            <figcaption class="figure__caption">左侧一列是筛选条件，右侧是关注对象；每一层都能单独收掉一批候选。</figcaption>
          </figure>
        </article>
      </div>
    </div>
  </section>

  <section class="platform-group" id="period" data-section>
    <div class="container">
      <header class="group-head">
        <span class="chapter-number chapter-number--sm" aria-hidden="true">03</span>
        <h2 class="title-xl group-head__title">同一组角球数字，换三种跨度分开读</h2>
        <p class="group-head__lede">切换只改变聚合方式，底层数据不动，读出来的结论却完全不同。</p>
      </header>

      <div class="matrix matrix--c">
        <article class="matrix-block matrix-block--media">
          <figure class="figure">
            <div class="figure__frame">
              <div class="figure__media">
                <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="同一组角球数据在轮次、月份、赛季三种跨度下的形态对比图" loading="lazy" decoding="async">
              </div>
            </div>
            <figcaption class="figure__caption">同一批角球，摊成一轮、一个月、一个赛季时呈现的走势完全不同。</figcaption>
          </figure>
        </article>

        <article class="matrix-block matrix-block--text">
          <h3 class="matrix-block__title">先想清楚要看什么，再决定切到哪一档</h3>
          <p class="matrix-block__body">
            中国体育赛事的角球数统计周期支持按轮次、按月份、按赛季三种跨度查看。三挡共用同一套底层数据，来回切换不会出现两套互相打架的数字。
          </p>
          <ul class="period-list">
            <li>
              <span class="period-list__name">按轮次</span>
              <span class="period-list__desc">只看最近一轮各队的角球数，赛后当晚复盘用这一档最快。</span>
              <span class="period-list__bar period-list__bar--round" aria-hidden="true"></span>
            </li>
            <li>
              <span class="period-list__name">按月份</span>
              <span class="period-list__desc">把一个月的角球收成一条走势，能看出球队在某段时间的定位球倾向。</span>
              <span class="period-list__bar period-list__bar--month" aria-hidden="true"></span>
            </li>
            <li>
              <span class="period-list__name">按赛季</span>
              <span class="period-list__desc">整季累计与场均放在一起，赛季中段做横向对照时用得上。</span>
              <span class="period-list__bar period-list__bar--season" aria-hidden="true"></span>
            </li>
          </ul>
          <p class="matrix-block__body">
            三种跨度的适用场合、以及俱乐部资料更新时间的轴怎么读，都写在
            <a class="inline-link" href="/reports/">数据观察</a>那一页里。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="platform-group platform-group--alt" id="cadence" data-section>
    <div class="container">
      <header class="group-head">
        <span class="chapter-number chapter-number--sm" aria-hidden="true">04</span>
        <h2 class="title-xl group-head__title">内容按三种节奏往外走</h2>
        <p class="group-head__lede">赛后当晚看战报，每周两次读阶段长文，赛季关键节点等专题。</p>
      </header>

      <div class="matrix matrix--d">
        <article class="matrix-block matrix-block--text">
          <h3 class="matrix-block__title">什么时候来，能看到什么</h3>
          <p class="matrix-block__body">
            站上的内容分成三层，更新频率差得比较远。知道每层多久动一次，就不会白等，也不会错过。
          </p>
          <ul class="point-list">
            <li><strong>赛后战报</strong>：每轮比赛结束 90 分钟内同步比分、角球与射门数据，关键数据经过三道校核才发布。当晚想看结果和几个关键片段，这一层就够。</li>
            <li><strong>阶段观察长文</strong>：固定在每周二与周五更新，一个赛季累计 420 份以上，写的是某支球队或某个赛段的状态走向。</li>
            <li><strong>赛季专题</strong>：在赛季关键节点增补，一个赛季 60 期，其中有 22 期是和地方体育媒体、青少年训练机构一起发布的。</li>
          </ul>
          <p class="matrix-block__body">
            想把更新节奏接到自己的编辑流程里，可以在
            <a class="inline-link" href="/plans/">服务档位</a>里看阶段简报的覆盖方式。
          </p>
        </article>

        <article class="matrix-block matrix-block--stats">
          <div class="stat-panel">
            <div class="stat-row">
              <span class="stat-row__num num">1,800</span>
              <span class="stat-row__text">篇以上赛后战报，每个赛季，读的是当晚发生的事。</span>
            </div>
            <div class="stat-row">
              <span class="stat-row__num num">420</span>
              <span class="stat-row__text">份阶段观察长文，每个赛季，周二与周五各出一批。</span>
            </div>
            <div class="stat-row stat-row--flag">
              <span class="stat-row__num num">60</span>
              <span class="stat-row__text">期赛季专题，跟着赛季关键节点走，不按固定日历排。</span>
            </div>
          </div>
          <p class="stat-panel__caption">
            这三层内容由 24 人的团队支撑：数据编辑 9 人、战术撰稿 5 人、校核与运营 6 人、技术与产品 4 人。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="platform-group" id="partner" data-section>
    <div class="container">
      <header class="group-head">
        <span class="chapter-number chapter-number--sm" aria-hidden="true">05</span>
        <h2 class="title-xl group-head__title">机构协作从口径对齐开始，不从报价开始</h2>
        <p class="group-head__lede">先说清楚要覆盖哪些赛事、用哪套统计，再谈发布节奏和署名方式。</p>
      </header>

      <div class="matrix matrix--e">
        <article class="matrix-block matrix-block--media">
          <figure class="figure">
            <div class="figure__frame">
              <div class="figure__media">
                <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="两个节点向中间汇聚的细线示意，标注口径对齐位置" loading="lazy" decoding="async">
              </div>
            </div>
            <figcaption class="figure__caption">合作的两端先落在同一套统计口径上，再往下谈发布时间与署名。</figcaption>
          </figure>
        </article>

        <article class="matrix-block matrix-block--text">
          <h3 class="matrix-block__title">能合作什么，需要先准备什么</h3>
          <p class="matrix-block__body">
            地方体育媒体、青少年训练机构与内容编辑团队，都可以在赛季周期内和我们建立内容合作。目前已有 18 家地方体育媒体、6 家青少年训练机构参与其中，联合发布的赛季专题累计 22 期。
          </p>
          <ul class="point-list">
            <li><strong>可以做的三件事</strong>：定期同步阶段简报、联合署名发布赛季专题、把双方在用的赛事资料口径对齐到同一套标准。</li>
            <li><strong>需要你先准备的</strong>：要覆盖的赛事范围、要看的统计项、打算在什么时间点发布。这三样定了，后面基本一轮就能谈完。</li>
            <li><strong>走的形式</strong>：站内不设下单与付款环节，费用构成与计费周期统一在服务档位页与页脚费用面板里说明，合作细节线下沟通。</li>
          </ul>
          <p class="matrix-block__body">
            对接渠道是客服邮箱 service@ouba-arena.com.cn，工作日 9:00 至 18:00 受理，邮件主题注明「欧巴体育官网网址＋事项」后 24 小时内回复；同一时间段也可以拨 18846858310 先做一轮口径确认。哪条渠道更合适，
            <a class="inline-link" href="/contact/">联系我们</a>那页写得更细。
          </p>
          <span class="hint">
            协作范围到什么程度
            <span class="hint__pop">覆盖范围以双方确认的赛事清单为准；涉及具体产能与价格的约定，在正式沟通中逐项确认。</span>
          </span>
        </article>
      </div>
    </div>
  </section>

  <section class="platform-close" id="next">
    <div class="container">
      <h2 class="title-lg platform-close__title">看完了，下一步落在哪里</h2>
      <p class="platform-close__body">
        还在几种跟进方式之间摇摆，就去
        <a href="/advice/">选择建议</a>把四种方式按省事程度和覆盖范围摆在一起比一遍；
        已经确定要用，就去<a href="/plans/">服务档位</a>看费用构成与计费周期，六个档位各自适合谁写得很直白；
        代表机构来谈口径，直接发邮件到 service@ouba-arena.com.cn，写清要覆盖的赛事范围，我们会带着同一套统计标准回你。
      </p>
    </div>
  </section>

</main>

.page-platform {
  background: var(--color-surface);
  color: var(--color-ink);
}

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

.page-platform .platform-hero {
  padding: var(--section-y-lg) 0 var(--section-y);
  background: var(--color-surface);
}

.page-platform .platform-hero .breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-platform .platform-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  max-width: 15ch;
}

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

.page-platform .capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.page-platform .capability-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: background 240ms ease;
}

.page-platform .capability-cell:hover,
.page-platform .capability-cell:focus-visible {
  background: var(--color-surface-deep);
}

.page-platform .capability-cell--deep {
  background: var(--color-surface-deep);
}

.page-platform .capability-cell--deep:hover,
.page-platform .capability-cell--deep:focus-visible {
  background: var(--color-highlight);
}

.page-platform .capability-cell__num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-platform .capability-cell__unit {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
}

.page-platform .capability-cell__label {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.page-platform .hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-platform .hero-index a {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

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

/* ---------- 分组通用 ---------- */

.page-platform .platform-group {
  padding: var(--section-y) 0;
}

.page-platform .platform-group--alt {
  background: var(--color-surface-alt);
}

.page-platform .group-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-left: var(--space-3);
  border-left: var(--border-thin) solid var(--color-line);
}

.page-platform .group-head .chapter-number {
  display: block;
  font-family: var(--font-mono);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: 0.06em;
}

.page-platform .group-head__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
}

.page-platform .group-head__lede {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink-soft);
}

/* ---------- 矩阵布局 ---------- */

.page-platform .matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-platform .matrix-block--text {
  max-width: var(--measure);
}

.page-platform .matrix-block__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 26ch;
}

.page-platform .matrix-block__body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-platform .inline-link {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary);
  padding-bottom: 1px;
}

.page-platform .inline-link:hover,
.page-platform .inline-link:focus-visible {
  color: var(--color-primary);
}

/* ---------- 要点列表 ---------- */

.page-platform .point-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-platform .point-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.page-platform .point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: var(--space-1);
  height: var(--border-thin);
  background: var(--color-ink-muted);
}

.page-platform .point-list strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- 图片 ---------- */

.page-platform .figure {
  margin: 0;
}

.page-platform .figure__frame {
  padding: var(--space-2);
  background: var(--color-surface-deep);
  border-radius: var(--radius-sm);
}

.page-platform .figure__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-deep);
}

.page-platform .figure__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-platform .figure__caption {
  margin-top: var(--space-2);
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ---------- 统计跨度列表 ---------- */

.page-platform .period-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-platform .period-list__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

.page-platform .period-list__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.page-platform .period-list__bar {
  display: block;
  height: var(--border-thin);
  margin-top: var(--space-2);
  background: var(--color-ink-muted);
}

.page-platform .period-list__bar--round {
  width: 22%;
}

.page-platform .period-list__bar--month {
  width: 58%;
}

.page-platform .period-list__bar--season {
  width: 100%;
}

/* ---------- 反相统计面板 ---------- */

.page-platform .stat-panel {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.page-platform .stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-platform .stat-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-platform .stat-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-contrast-ink);
}

.page-platform .stat-row--flag .stat-row__num {
  color: var(--color-contrast-accent);
}

.page-platform .stat-row__text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-platform .stat-panel__caption {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-muted);
}

/* ---------- 悬停口径说明 ---------- */

.page-platform .hint {
  position: relative;
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  border-bottom: var(--border-thin) dashed var(--color-ink-muted);
  cursor: help;
}

.page-platform .hint__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  width: max-content;
  max-width: min(30ch, 74vw);
  padding: var(--space-2) var(--space-3);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-size: var(--text-xs);
  line-height: 1.7;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease;
  z-index: 2;
}

.page-platform .hint:hover .hint__pop,
.page-platform .hint:focus-within .hint__pop {
  opacity: 1;
  visibility: visible;
}

/* ---------- 收束 ---------- */

.page-platform .platform-close {
  padding: var(--section-y) 0 var(--section-y-lg);
  background: var(--color-surface-deep);
}

.page-platform .platform-close__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

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

.page-platform .platform-close__body a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-primary);
  padding-bottom: 1px;
}

.page-platform .platform-close__body a:hover,
.page-platform .platform-close__body a:focus-visible {
  color: var(--color-primary);
}

/* ---------- 桌面栅格 ---------- */

@media (min-width: 860px) {
  .page-platform .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }

  .page-platform .capability-cell:nth-child(2),
  .page-platform .capability-cell:nth-child(4) {
    margin-top: var(--space-6);
  }

  .page-platform .group-head {
    padding-left: var(--space-4);
  }

  .page-platform .matrix {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
    align-items: start;
  }

  .page-platform .matrix--a .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--a .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--b .matrix-block--text {
    grid-column: 1 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--b .matrix-block--media {
    grid-column: 7 / span 6;
  }

  .page-platform .matrix--c .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--c .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .matrix--d .matrix-block--text {
    grid-column: 1 / span 5;
    margin-top: var(--space-4);
  }

  .page-platform .matrix--d .matrix-block--stats {
    grid-column: 7 / span 6;
  }

  .page-platform .matrix--e .matrix-block--media {
    grid-column: 1 / span 6;
  }

  .page-platform .matrix--e .matrix-block--text {
    grid-column: 8 / span 5;
    margin-top: var(--space-6);
  }

  .page-platform .stat-panel {
    padding: var(--space-6);
  }

  .page-platform .stat-row {
    grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* ---------- 窄屏保护 ---------- */

@media (max-width: 480px) {
  .page-platform .platform-hero__title {
    max-width: none;
  }

  .page-platform .capability-cell__num {
    font-size: var(--text-4xl);
  }

  .page-platform .hero-index {
    gap: var(--space-2) var(--space-3);
  }
}