.page-faq {
  --faq-gap: clamp(1.5rem, 4vw, 3rem);
  --faq-card-bg: var(--rb-paper);
  --faq-soft-line: rgba(27, 22, 17, 0.12);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-top: clamp(0.75rem, 2.5vw, 1.75rem);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.page-faq .faq-hero__title {
  margin: 0.7rem 0 1rem;
  font-size: clamp(2.15rem, 8.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-faq .faq-hero__lede {
  max-width: 42ch;
  color: var(--rb-graphite);
}

.page-faq .faq-hero__chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-faq .faq-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--faq-soft-line);
}

.page-faq .faq-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-faq .faq-stat .rb-num {
  font-size: clamp(1.85rem, 5.5vw, 2.6rem);
  line-height: 1;
}

.page-faq .faq-stat__k {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--rb-graphite);
}

.page-faq .faq-hero__visual {
  position: relative;
  border-radius: var(--rb-r-lg);
  background: var(--rb-navy);
  padding: clamp(1rem, 3vw, 1.75rem);
  overflow: hidden;
}

.page-faq .faq-hero__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-faq .faq-hero__visualcap {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(245, 238, 227, 0.72);
  max-width: 34ch;
}

/* ---------- 章节通用 ---------- */
.page-faq .faq-h2 {
  margin: 0.4rem 0 0;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-faq .faq-sub {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  color: var(--rb-graphite);
  font-size: 0.95rem;
  line-height: 1.8;
}

.page-faq .rb-section__head {
  margin-bottom: clamp(1.75rem, 5vw, 3rem);
}

/* ---------- 问答区 ---------- */
.page-faq .faq-qa__layout {
  display: grid;
  gap: var(--faq-gap);
}

.page-faq .faq-toc {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--faq-soft-line);
}

.page-faq .faq-toc > .rb-index {
  display: block;
  margin: 0 0 0.75rem;
}

.page-faq .faq-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.page-faq .faq-toc__link {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--rb-r-pill);
  border: 1px solid var(--faq-soft-line);
  background: var(--faq-card-bg);
  color: var(--rb-ink);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.page-faq .faq-toc__link:hover {
  border-color: var(--rb-red);
  color: var(--rb-red);
}

.page-faq .faq-toc__link:focus-visible {
  outline: 2px solid var(--rb-cyan);
  outline-offset: 2px;
}

.page-faq .faq-toc__link[aria-current] {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
  color: var(--rb-cream);
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
}

.page-faq .faq-group__head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(27, 22, 17, 0.28);
  margin-bottom: 1.35rem;
}

.page-faq .faq-group__no {
  flex: none;
  font-family: var(--rb-font-num);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 0.85;
  color: var(--rb-orange);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 500;
}

.page-faq .faq-group__desc {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--rb-graphite);
  max-width: 52ch;
}

/* 折叠问答 */
.page-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.page-faq .faq-item {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-soft-line);
  border-radius: var(--rb-r-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-faq .faq-item:hover {
  border-color: rgba(222, 58, 43, 0.42);
}

.page-faq .faq-item[open] {
  border-color: rgba(222, 58, 43, 0.5);
  box-shadow: 0 14px 30px -26px rgba(27, 22, 17, 0.9);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
}

.page-faq .faq-item__q::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--rb-font-mono);
  font-size: 1.05rem;
  color: var(--rb-graphite);
  transition: color 0.2s ease;
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "\2013";
  color: var(--rb-red);
}

.page-faq .faq-item__q:focus-visible {
  outline: 2px solid var(--rb-cyan);
  outline-offset: -2px;
  border-radius: var(--rb-r-sm);
}

.page-faq .faq-item__a {
  padding: 0 1.05rem 1.15rem;
  border-top: 1px solid var(--faq-soft-line);
}

.page-faq .faq-item__a p {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--rb-graphite);
  max-width: 64ch;
}

/* 组内配图 */
.page-faq .faq-fig {
  margin: 0 0 1.35rem;
}

.page-faq .faq-fig--narrow {
  max-width: 640px;
}

.page-faq .faq-fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 术语表 ---------- */
.page-faq .faq-gloss {
  background: linear-gradient(180deg, rgba(23, 48, 92, 0.04), rgba(23, 48, 92, 0));
}

.page-faq .faq-gloss__grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.page-faq .faq-gloss__card {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-soft-line);
  border-radius: var(--rb-r-sm);
  padding: 1rem 1.05rem 1.1rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-faq .faq-gloss__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  border-radius: var(--rb-r-pill);
  background: var(--rb-red);
  opacity: 0.75;
}

.page-faq .faq-gloss__card:nth-child(3n + 2)::before {
  background: var(--rb-navy);
}

.page-faq .faq-gloss__card:nth-child(3n + 3)::before {
  background: var(--rb-orange);
}

.page-faq .faq-gloss__card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 223, 207, 0.75);
  box-shadow: 0 16px 32px -26px rgba(27, 22, 17, 0.85);
}

.page-faq .faq-gloss__term {
  display: block;
  font-family: var(--rb-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rb-ink);
  margin-bottom: 0.4rem;
  padding-left: 0.55rem;
}

.page-faq .faq-gloss__def {
  margin: 0;
  padding-left: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--rb-graphite);
}

/* ---------- 收尾行动区 ---------- */
.page-faq .faq-ask__panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--rb-r-lg);
  background: var(--rb-navy);
  color: var(--rb-cream);
}

.page-faq .faq-ask__panel .rb-index {
  color: var(--rb-cyan);
}

.page-faq .faq-ask__panel .faq-h2 {
  color: var(--rb-cream);
}

.page-faq .faq-ask__text {
  margin: 0.85rem 0 0;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(245, 238, 227, 0.78);
}

.page-faq .faq-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.page-faq .faq-ask__panel .rb-btn--ghost {
  color: var(--rb-cream);
  border-color: rgba(245, 238, 227, 0.4);
}

.page-faq .faq-ask__panel .rb-btn--ghost:hover {
  border-color: var(--rb-cyan);
  color: var(--rb-cyan);
}

.page-faq a:focus-visible,
.page-faq summary:focus-visible {
  outline: 2px solid var(--rb-cyan);
  outline-offset: 2px;
}

.page-faq .faq-ask__panel a:focus-visible {
  outline-color: var(--rb-orange);
}

/* ---------- 平板 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-ask__panel {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
  }

  .page-faq .faq-ask__actions {
    justify-content: flex-end;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 960px) {
  .page-faq .faq-qa__layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--rb-header-h) + 1.5rem);
    padding-bottom: 0;
    border-bottom: 0;
  }

  .page-faq .faq-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
  }

  .page-faq .faq-toc__link {
    display: block;
    border: 0;
    border-left: 2px solid var(--faq-soft-line);
    border-radius: 0;
    background: transparent;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
  }

  .page-faq .faq-toc__link[aria-current] {
    background: transparent;
    border-left-color: var(--rb-red);
    color: var(--rb-red);
    font-weight: 500;
  }

  .page-faq .faq-item__q {
    padding: 1.1rem 1.35rem;
    font-size: 1.02rem;
  }

  .page-faq .faq-item__a {
    padding: 0 1.35rem 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-gloss__card,
  .page-faq .faq-item,
  .page-faq .faq-toc__link {
    transition: none;
  }
}
<<<END>>>

等等——`<<<END>>>` 并不在协议里。只应存在 `` 和 `` 两个标记。我得把 `<<<END>>>` 去掉。另外核对一下，`rb-crumbs` 和 `rb-crumbs__list` 是否在全局类列表里：有的。`rb-kicker`、`rb-lede`、`rb-index`、`rb-num`、`rb-num--red`、`rb-num--blue`、`rb-num--cyan`、`rb-pill`、`rb-pill--red`、`rb-pill--blue`、`rb-pill--cyan`、`rb-pill--orange`、`rb-btn--red`、`rb-btn--ghost`、`rb-figure`、`rb-figure--wide`、`rb-figure__cap`、`rb-section`、`rb-section__head`、`rb-shell`、`rb-display`、`rb-main`——全部确认存在。

`--rb-header-h` 在变量列表里吗？在，它在设计标记里。

好。重新输出，不带 END 标记。
<main id="main-content" class="page-faq">

  <div class="rb-shell">
    <nav class="rb-crumbs" aria-label="面包屑">
      <ol class="rb-crumbs__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">知识中心</li>
      </ol>
    </nav>
  </div>

  <section class="rb-section faq-hero" aria-labelledby="faq-h1">
    <div class="rb-shell faq-hero__grid">
      <div class="faq-hero__copy">
        <p class="rb-kicker">知识中心 / KNOWLEDGE</p>
        <h1 id="faq-h1" class="rb-display faq-hero__title">把积分榜、球员数据<br>和复盘看懂</h1>
        <p class="rb-lede faq-hero__lede">
          看比赛时遇上对不上的数字，先别怀疑自己。英皇体育把读者最常卡住的地方一条条拆开来讲：同一支球队在两个赛段排名为什么不同、评分由哪几部分构成、换人信息什么时候进库、梯队名单里的年龄段怎么读。每条先给结论，再往下展开，方便你按需跳读。
        </p>
        <ul class="faq-hero__chips" aria-label="问答分组">
          <li><span class="rb-pill rb-pill--red">数据使用</span></li>
          <li><span class="rb-pill rb-pill--blue">积分榜</span></li>
          <li><span class="rb-pill rb-pill--cyan">球员数据</span></li>
          <li><span class="rb-pill rb-pill--orange">复盘阅读</span></li>
          <li><span class="rb-pill">青训梯队</span></li>
        </ul>
        <div class="faq-hero__stats">
          <div class="faq-stat">
            <span class="rb-num rb-num--red">15</span>
            <span class="faq-stat__k">条常见问题</span>
          </div>
          <div class="faq-stat">
            <span class="rb-num rb-num--blue">5</span>
            <span class="faq-stat__k">个分组</span>
          </div>
          <div class="faq-stat">
            <span class="rb-num rb-num--cyan">12</span>
            <span class="faq-stat__k">个高频术语</span>
          </div>
        </div>
      </div>

      <div class="faq-hero__visual">
        <svg class="faq-hero__svg" viewBox="0 0 440 340" role="img" aria-label="红蓝两条数据曲线在坐标网格中交错上升，交点上标记一个问号">
          <defs>
            <pattern id="faqGrid" width="22" height="22" patternUnits="userSpaceOnUse">
              <path d="M22 0H0V22" fill="none" stroke="rgba(53,223,207,0.18)" stroke-width="1"/>
            </pattern>
          </defs>
          <rect width="440" height="340" fill="url(#faqGrid)"/>
          <line x1="40" y1="300" x2="420" y2="300" stroke="rgba(255,252,246,0.35)" stroke-width="1.5"/>
          <line x1="40" y1="34" x2="40" y2="300" stroke="rgba(255,252,246,0.35)" stroke-width="1.5"/>
          <polyline points="40,262 100,236 160,252 220,180 280,196 340,120 400,86" fill="none" stroke="#DE3A2B" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
          <polyline points="40,286 100,258 160,212 220,226 280,168 340,182 400,130" fill="none" stroke="#35DFCF" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
          <circle cx="220" cy="180" r="6" fill="#DE3A2B"/>
          <circle cx="220" cy="226" r="6" fill="#35DFCF"/>
          <text x="234" y="172" fill="#F5EEE3" font-size="17" font-family="ui-monospace, monospace">?</text>
          <text x="60" y="322" fill="rgba(255,252,246,0.55)" font-size="11" font-family="ui-monospace, monospace">赛段</text>
        </svg>
        <p class="faq-hero__visualcap">红方与蓝方在同一坐标系里各走一条线，交点处就是最容易被误读的地方。</p>
      </div>
    </div>
  </section>

  <section class="rb-section faq-qa" aria-labelledby="faq-qa-h">
    <div class="rb-shell">
      <header class="rb-section__head faq-qa__head">
        <p class="rb-index">01 — 逐条排查</p>
        <h2 id="faq-qa-h" class="faq-h2">按你手上的问题找答案</h2>
        <p class="faq-sub">五个分组对应五个容易卡住的环节。左边是目录，点了直接跳过去；右边每条点开就是完整回答。</p>
      </header>

      <div class="faq-qa__layout">
        <aside class="faq-toc" aria-label="问答目录">
          <p class="rb-index">目录</p>
          <ul class="faq-toc__list">
            <li><a class="faq-toc__link" href="#grp-data" data-toc-link>数据使用</a></li>
            <li><a class="faq-toc__link" href="#grp-table" data-toc-link>积分榜</a></li>
            <li><a class="faq-toc__link" href="#grp-player" data-toc-link>球员数据</a></li>
            <li><a class="faq-toc__link" href="#grp-read" data-toc-link>复盘阅读</a></li>
            <li><a class="faq-toc__link" href="#grp-youth" data-toc-link>青训梯队</a></li>
          </ul>
        </aside>

        <div class="faq-qa__body">

          <article id="grp-data" class="faq-group">
            <header class="faq-group__head">
              <span class="faq-group__no" aria-hidden="true">A</span>
              <div>
                <h3 class="faq-group__title">数据使用</h3>
                <p class="faq-group__desc">数据从哪来、多久刷新一次、筛选条件怎么组合，这几件事先弄清楚，后面看表就顺了。</p>
              </div>
            </header>
            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">积分榜多久刷新一次？</summary>
                <div class="faq-item__a">
                  <p>一场比赛终场后 10 分钟内，积分榜会按最新结果重排；进球、红黄牌、伤停换人这类关键事件在终场后 15 分钟内进入球员数据。同一时段有多场比赛时，页面先把已经结束的场次更新掉，还在踢的保持上一轮状态，不会出现半场数据混进去的情况。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">筛选项可以叠加使用吗？</summary>
                <div class="faq-item__a">
                  <p>可以。联赛、球队、球员、赛事阶段四个维度能任意组合。比如先锁定中甲，再点一支球队，看到的就是这支球队在整个常规赛阶段的表现。切换条件时列的排序不会重置，你正看的那一列始终留在原位。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">数据是谁整理的，能信到什么程度？</summary>
                <div class="faq-item__a">
                  <p>赛事公开信息提供原始记录，9 家地方青训机构与 4 家数据服务商补充梯队和专项数据，再由编辑部分类整理成可查的字段。一条球员数据要经过标注员初核、数据编辑复核两道，才会出现在页面里；发现疑问可以在咨询与合作页面直接反馈，编辑部会回到原始记录核对。</p>
                </div>
              </details>
            </div>
          </article>

          <article id="grp-table" class="faq-group">
            <header class="faq-group__head">
              <span class="faq-group__no" aria-hidden="true">B</span>
              <div>
                <h3 class="faq-group__title">积分榜</h3>
                <p class="faq-group__desc">排名为什么会跳、颜色条代表什么、积分打平看哪一项，这三个问题占了积分榜相关提问的绝大多数。</p>
              </div>
            </header>

            <figure class="rb-figure rb-figure--wide faq-fig">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="积分榜界面局部特写，左侧是红蓝分段升降级色带，右上方是一排胶囊形筛选条件" loading="lazy" decoding="async">
              <figcaption class="rb-figure__cap">左侧色带标出升降级区域，右上的胶囊用来收窄联赛与赛段。</figcaption>
            </figure>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">切换赛段后，排名为什么会变？</summary>
                <div class="faq-item__a">
                  <p>常规赛、季后赛、升降级附加赛的参赛范围和计分方式本来就不一样，所以同一支球队在不同赛段的位置自然不同。切换赛段时看到的是该阶段本身的成绩，前一个阶段的积分不会带过来，这也是淘汰赛阶段经常出现名次大挪动的直接原因。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">表格左侧的颜色条代表什么？</summary>
                <div class="faq-item__a">
                  <p>颜色条标出这个赛段里的升降级区域：红色一段对应降级或需要打附加赛的位置，蓝色一段对应升级或争冠区。它只说明当前所处的位置，不预测后面的结果，赛季越往后色带覆盖的行数越接近最终格局。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">积分相同时按什么排序？</summary>
                <div class="faq-item__a">
                  <p>先比净胜球，净胜球相同再比进球数，之后看两队相互交锋的战绩。三个条件都拉不开差距时，页面按球队名称排列并加一枚说明标记，提醒你这两支队伍在当前赛段确实没有可分的依据。</p>
                </div>
              </details>
            </div>
          </article>

          <article id="grp-player" class="faq-group">
            <header class="faq-group__head">
              <span class="faq-group__no" aria-hidden="true">C</span>
              <div>
                <h3 class="faq-group__title">球员数据</h3>
                <p class="faq-group__desc">18 个字段摆在一起容易看花眼，这里说清每个数字在回答什么问题。</p>
              </div>
            </header>
            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">评分由哪几部分组成？</summary>
                <div class="faq-item__a">
                  <p>评分由出场时间、对抗成功率、关键事件、跑动分布这几项按位置权重加权后合成。前锋和中卫的权重并不相同，所以不要拿同一个分数直接横向比较位置不同的球员，跨位置比较更适合看雷达图上的形状差异。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">对抗成功率和关键事件分别指什么？</summary>
                <div class="faq-item__a">
                  <p>对抗成功率统计球员参与的地面与空中拼抢中成功的比例；关键事件记录进球、助攻、射门、抢断、失误这类改变局面的动作。两个数字一起看，能区分开“数据好看但没影响比赛”和“数据一般但每次触球都很关键”这两种完全不同的球员。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">雷达图和趋势折线各看什么？</summary>
                <div class="faq-item__a">
                  <p>雷达图适合把两名球员放在同一组字段上比对，形状的差异一眼就能看出谁偏进攻、谁偏防守，谁更均衡。趋势折线看的是同一个人在常规赛、季后赛之间的变化，用来判断状态是往上走还是回落，追一名球员整个赛季时更好用。</p>
                </div>
              </details>
            </div>
          </article>

          <article id="grp-read" class="faq-group">
            <header class="faq-group__head">
              <span class="faq-group__no" aria-hidden="true">D</span>
              <div>
                <h3 class="faq-group__title">复盘阅读</h3>
                <p class="faq-group__desc">长文怎么追更、手机上读会不会乱，这些阅读习惯相关的问题集中放在这里。</p>
              </div>
            </header>

            <figure class="rb-figure faq-fig faq-fig--narrow">
              <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="平板设备上的长文阅读界面，正文两侧留有分节锚点与数据栏目" loading="lazy" decoding="async">
              <figcaption class="rb-figure__cap">分节锚点和数据栏在窄屏上仍在，读到哪一节一眼能认出来。</figcaption>
            </figure>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">复盘多久更新一期？</summary>
                <div class="faq-item__a">
                  <p>每周更新两期，一个赛季下来大约 80 期。其中战术拆解约占六成，关键回合分镜约占四成，两类交替排期，所以同一周的两期通常会一深一快，赶时间的时候可以先读分镜那篇。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">专题系列怎么追更？</summary>
                <div class="faq-item__a">
                  <p>角球、点球、伤停、青训四条线各自编号，文章列表里带专题标签。想只追一条线，按标签筛选即可，列表会保留最近几期的期号和所处阶段，往回翻也容易找到上一次读到哪。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">手机和平板上读长文方便吗？</summary>
                <div class="faq-item__a">
                  <p>方便。长文在 iOS 与 iPadOS 的浏览器阅读模式下保持完整排版，分节锚点和侧边数据栏都不会丢。桌面端则可以一边读正文一边对旁边那栏数字，看到结论时顺手验证一下。</p>
                </div>
              </details>
            </div>
          </article>

          <article id="grp-youth" class="faq-group">
            <header class="faq-group__head">
              <span class="faq-group__no" aria-hidden="true">E</span>
              <div>
                <h3 class="faq-group__title">青训梯队</h3>
                <p class="faq-group__desc">46 支梯队的名单怎么看、年龄结构说明什么、晋升通道记录哪些去向，教练和家长问得最多。</p>
              </div>
            </header>
            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">报名名单里都有哪些内容？</summary>
                <div class="faq-item__a">
                  <p>名单按梯队分组，列出球员的位置、年龄段、注册状态和在队时长，并标注当季是否有人事变动。教练选材时可以先看名单稳不稳定，再决定要不要逐个调个人数据细看。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">年龄结构能说明什么？</summary>
                <div class="faq-item__a">
                  <p>年龄结构把一支梯队的球员按年龄段分档展示，看得出这支队伍是挤在某一段还是横跨好几个年龄段。跨档多的梯队通常内部流动更活跃，也更容易观察一支队伍的长期培养节奏。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-item__q">晋升通道记录的是什么？</summary>
                <div class="faq-item__a">
                  <p>记录梯队球员向上一级队伍流动的情况，分为上调、外租、留队三类去向，按赛季阶段归档。对家长来说，这是判断一支梯队能不能把人送上去最直接的依据；对内容创作者来说，则是观察一家青训机构这些年做了什么的切入口。</p>
                </div>
              </details>
            </div>
          </article>

        </div>
      </div>
    </div>
  </section>

  <section class="rb-section faq-gloss" aria-labelledby="faq-gloss-h">
    <div class="rb-shell">
      <header class="rb-section__head faq-gloss__head">
        <p class="rb-index">02 — 随手回查</p>
        <h2 id="faq-gloss-h" class="faq-h2">数据术语表</h2>
        <p class="faq-sub">读数据时最常撞见的十二个词，一句话讲清楚它指的是什么。遇到不确定的，回来扫一眼就行。</p>
      </header>

      <div class="faq-gloss__grid">
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">赛段</span>
          <p class="faq-gloss__def">常规赛、季后赛、升降级附加赛各自独立的计分区间，成绩不跨段累加。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">净胜球</span>
          <p class="faq-gloss__def">进球数减去失球数，积分打平时用来排序的第一项。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">对抗成功率</span>
          <p class="faq-gloss__def">球员参与的地面与空中拼抢里成功那部分所占的比例。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">关键事件</span>
          <p class="faq-gloss__def">进球、助攻、射门、抢断、失误这类会改变比赛走向的动作记录。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">评分权重</span>
          <p class="faq-gloss__def">各字段按球员所处位置分配不同比重，再合成为总分的方式。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">跑动分布</span>
          <p class="faq-gloss__def">球员在不同区域活动的占比，用来看活动范围偏向哪一侧。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">升降级色带</span>
          <p class="faq-gloss__def">排名表左侧的颜色分段，标出升级与降级区域所在的行。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">初核 / 复核</span>
          <p class="faq-gloss__def">标注员先查一遍、数据编辑再审一遍的两道环节，通过后才发布。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">报名名单</span>
          <p class="faq-gloss__def">梯队按位置列出的在册球员，含年龄段、注册状态与在队时长。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">年龄结构</span>
          <p class="faq-gloss__def">一支梯队的球员在各年龄段上的分布，反映内部年龄跨度。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">晋升通道</span>
          <p class="faq-gloss__def">梯队球员上调、外租、留队三类去向按赛季阶段汇总的记录。</p>
        </div>
        <div class="faq-gloss__card">
          <span class="faq-gloss__term">专题标签</span>
          <p class="faq-gloss__def">文章所归属的角球、点球、伤停或青训系列标识，用来按线追更。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="rb-section faq-ask" aria-labelledby="faq-ask-h">
    <div class="rb-shell">
      <div class="faq-ask__panel">
        <div class="faq-ask__copy">
          <p class="rb-index">03 — 还没解决</p>
          <h2 id="faq-ask-h" class="faq-h2">问题没在这儿找到答案</h2>
          <p class="faq-ask__text">机构用户想了解数据合作、字段定制或赛季报告的适用范围，读者发现数据与文章对不上，都可以直接说清楚场景。客服邮箱工作日 9:00-18:00 回复，一般当天给出处理方向。</p>
        </div>
        <div class="faq-ask__actions">
          <a class="rb-btn rb-btn--red" href="/inquiry/">去咨询与合作</a>
          <a class="rb-btn rb-btn--ghost" href="/product/">看数据产品总览</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-gap: clamp(1.5rem, 4vw, 3rem);
  --faq-card-bg: var(--rb-paper);
  --faq-soft-line: rgba(27, 22, 17, 0.12);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-top: clamp(0.75rem, 2.5vw, 1.75rem);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.page-faq .faq-hero__title {
  margin: 0.7rem 0 1rem;
  font-size: clamp(2.15rem, 8.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-faq .faq-hero__lede {
  max-width: 42ch;
  color: var(--rb-graphite);
}

.page-faq .faq-hero__chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-faq .faq-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--faq-soft-line);
}

.page-faq .faq-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-faq .faq-stat .rb-num {
  font-size: clamp(1.85rem, 5.5vw, 2.6rem);
  line-height: 1;
}

.page-faq .faq-stat__k {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--rb-graphite);
}

.page-faq .faq-hero__visual {
  position: relative;
  border-radius: var(--rb-r-lg);
  background: var(--rb-navy);
  padding: clamp(1rem, 3vw, 1.75rem);
  overflow: hidden;
}

.page-faq .faq-hero__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-faq .faq-hero__visualcap {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(245, 238, 227, 0.72);
  max-width: 34ch;
}

/* ---------- 章节通用 ---------- */
.page-faq .faq-h2 {
  margin: 0.4rem 0 0;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-faq .faq-sub {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  color: var(--rb-graphite);
  font-size: 0.95rem;
  line-height: 1.8;
}

.page-faq .rb-section__head {
  margin-bottom: clamp(1.75rem, 5vw, 3rem);
}

/* ---------- 问答区 ---------- */
.page-faq .faq-qa__layout {
  display: grid;
  gap: var(--faq-gap);
}

.page-faq .faq-toc {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--faq-soft-line);
}

.page-faq .faq-toc > .rb-index {
  display: block;
  margin: 0 0 0.75rem;
}

.page-faq .faq-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.page-faq .faq-toc__link {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--rb-r-pill);
  border: 1px solid var(--faq-soft-line);
  background: var(--faq-card-bg);
  color: var(--rb-ink);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.page-faq .faq-toc__link:hover {
  border-color: var(--rb-red);
  color: var(--rb-red);
}

.page-faq .faq-toc__link[aria-current] {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
  color: var(--rb-cream);
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
}

.page-faq .faq-group__head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(27, 22, 17, 0.28);
  margin-bottom: 1.35rem;
}

.page-faq .faq-group__no {
  flex: none;
  font-family: var(--rb-font-num);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 0.85;
  color: var(--rb-orange);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 500;
}

.page-faq .faq-group__desc {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--rb-graphite);
  max-width: 52ch;
}

/* 折叠问答 */
.page-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.page-faq .faq-item {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-soft-line);
  border-radius: var(--rb-r-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-faq .faq-item:hover {
  border-color: rgba(222, 58, 43, 0.42);
}

.page-faq .faq-item[open] {
  border-color: rgba(222, 58, 43, 0.5);
  box-shadow: 0 14px 30px -26px rgba(27, 22, 17, 0.9);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
}

.page-faq .faq-item__q::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--rb-font-mono);
  font-size: 1.05rem;
  color: var(--rb-graphite);
  transition: color 0.2s ease;
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "\2013";
  color: var(--rb-red);
}

.page-faq .faq-item__q:focus-visible {
  outline: 2px solid var(--rb-cyan);
  outline-offset: -2px;
  border-radius: var(--rb-r-sm);
}

.page-faq .faq-item__a {
  padding: 0 1.05rem 1.15rem;
  border-top: 1px solid var(--faq-soft-line);
}

.page-faq .faq-item__a p {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--rb-graphite);
  max-width: 64ch;
}

/* 组内配图 */
.page-faq .faq-fig {
  margin: 0 0 1.35rem;
}

.page-faq .faq-fig--narrow {
  max-width: 640px;
}

.page-faq .faq-fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 术语表 ---------- */
.page-faq .faq-gloss {
  background: linear-gradient(180deg, rgba(23, 48, 92, 0.05), rgba(23, 48, 92, 0));
}

.page-faq .faq-gloss__grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.page-faq .faq-gloss__card {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-soft-line);
  border-radius: var(--rb-r-sm);
  padding: 1rem 1.05rem 1.1rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-faq .faq-gloss__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  border-radius: var(--rb-r-pill);
  background: var(--rb-red);
  opacity: 0.75;
}

.page-faq .faq-gloss__card:nth-child(3n + 2)::before {
  background: var(--rb-navy);
}

.page-faq .faq-gloss__card:nth-child(3n + 3)::before {
  background: var(--rb-orange);
}

.page-faq .faq-gloss__card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 223, 207, 0.75);
  box-shadow: 0 16px 32px -26px rgba(27, 22, 17, 0.85);
}

.page-faq .faq-gloss__term {
  display: block;
  font-family: var(--rb-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rb-ink);
  margin-bottom: 0.4rem;
  padding-left: 0.55rem;
}

.page-faq .faq-gloss__def {
  margin: 0;
  padding-left: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--rb-graphite);
}

/* ---------- 收尾行动区 ---------- */
.page-faq .faq-ask__panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--rb-r-lg);
  background: var(--rb-navy);
  color: var(--rb-cream);
}

.page-faq .faq-ask__panel .rb-index {
  color: var(--rb-cyan);
}

.page-faq .faq-ask__panel .faq-h2 {
  color: var(--rb-cream);
}

.page-faq .faq-ask__text {
  margin: 0.85rem 0 0;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(245, 238, 227, 0.78);
}

.page-faq .faq-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.page-faq .faq-ask__panel .rb-btn--ghost {
  color: var(--rb-cream);
  border-color: rgba(245, 238, 227, 0.4);
}

.page-faq .faq-ask__panel .rb-btn--ghost:hover {
  border-color: var(--rb-cyan);
  color: var(--rb-cyan);
}

.page-faq a:focus-visible,
.page-faq summary:focus-visible {
  outline: 2px solid var(--rb-cyan);
  outline-offset: 2px;
}

.page-faq .faq-ask__panel a:focus-visible {
  outline-color: var(--rb-orange);
}

/* ---------- 平板 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-ask__panel {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
  }

  .page-faq .faq-ask__actions {
    justify-content: flex-end;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 960px) {
  .page-faq .faq-qa__layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--rb-header-h) + 1.5rem);
    padding-bottom: 0;
    border-bottom: 0;
  }

  .page-faq .faq-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
  }

  .page-faq .faq-toc__link {
    display: block;
    border: 0;
    border-left: 2px solid var(--faq-soft-line);
    border-radius: 0;
    background: transparent;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
  }

  .page-faq .faq-toc__link[aria-current] {
    background: transparent;
    border-left-color: var(--rb-red);
    color: var(--rb-red);
    font-weight: 500;
  }

  .page-faq .faq-item__q {
    padding: 1.1rem 1.35rem;
    font-size: 1.02rem;
  }

  .page-faq .faq-item__a {
    padding: 0 1.35rem 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-gloss__card,
  .page-faq .faq-item,
  .page-faq .faq-toc__link {
    transition: none;
  }
}