.page-faq{
  --faq-rail: 236px;
  --faq-card-line: rgba(46,66,87,.72);
  padding-bottom: clamp(56px,8vw,104px);
}

.page-faq .crumbs{
  padding-top: clamp(18px,3vw,30px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  display: grid;
  gap: var(--gap);
  margin: clamp(14px,3vw,26px) 0 clamp(32px,5vw,60px);
}

.page-faq .faq-hero__title{
  margin: .26em 0 .36em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px,7.2vw,74px);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--white);
}

.page-faq .faq-hero__title em{
  font-style: normal;
  color: var(--cyan);
}

.page-faq .faq-hero .lede{
  max-width: 58ch;
}

.page-faq .faq-stats{
  list-style: none;
  margin: clamp(20px,3vw,30px) 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.page-faq .faq-stats li{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-faq .faq-stats .mono{
  font-size: clamp(20px,3.2vw,30px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-faq .faq-stats li:nth-child(2) .mono{ color: var(--amber); }
.page-faq .faq-stats li:nth-child(3) .mono{ color: var(--white); }

.page-faq .faq-stats em{
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-faq .faq-hero__media{
  margin: 0;
  border: 2px solid var(--line);
  background: var(--ink-750);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

.page-faq .faq-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 600;
  object-fit: cover;
}

@media (min-width: 900px){
  .page-faq .faq-hero{
    grid-template-columns: 1.12fr .88fr;
    align-items: end;
  }
  .page-faq .faq-hero__media{ align-self: stretch; }
  .page-faq .faq-hero__media img{ height: 100%; aspect-ratio: auto; }
}

/* ---------- 索引 + 内容 ---------- */
.page-faq .faq-shell{
  display: grid;
  gap: clamp(22px,4vw,40px);
}

.page-faq .faq-index{
  border: 1px solid var(--line);
  background: rgba(10,22,37,.75);
  padding: 16px 16px 18px;
}

.page-faq .faq-index__title{
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
}

.page-faq .faq-index__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-faq .faq-index__list a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.page-faq .faq-index__list a:hover,
.page-faq .faq-index__list a:focus-visible{
  background: var(--ink-750);
  border-left-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

.page-faq .faq-index__list .mono{
  font-size: 11.5px;
  color: var(--amber);
}

.page-faq .faq-index__foot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.page-faq .faq-index__foot .btn{ flex: 1 1 auto; justify-content: center; }

@media (max-width: 959px){
  .page-faq .faq-index__list{
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .page-faq .faq-index__list li{ flex: 0 0 auto; }
  .page-faq .faq-index__list a{
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
  }
  .page-faq .faq-index__list a:hover,
  .page-faq .faq-index__list a:focus-visible{
    border-left-color: transparent;
    border-bottom-color: var(--cyan);
  }
}

@media (min-width: 960px){
  .page-faq .faq-shell{
    grid-template-columns: var(--faq-rail) minmax(0,1fr);
    align-items: start;
  }
  .page-faq .faq-index{
    position: sticky;
    top: calc(var(--strip-h) + 18px);
  }
}

/* ---------- 分组 ---------- */
.page-faq .faq-group{
  margin: 0 0 clamp(34px,5vw,58px);
  scroll-margin-top: calc(var(--strip-h) + 82px);
}

.page-faq .faq-group:last-of-type{ margin-bottom: 0; }

.page-faq .faq-group__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}

.page-faq .faq-group:target .faq-group__head{ border-bottom-color: var(--cyan); }

.page-faq .faq-group__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px,2.8vw,29px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-faq .faq-group__hint{
  flex: 1 1 100%;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- 问答卡 ---------- */
.page-faq .qa{
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.page-faq .qa + .qa{ margin-top: 10px; }

.page-faq .qa:hover{ border-left-color: var(--line); border-left-color: #3f5a72; }

.page-faq .qa[open]{
  border-left-color: var(--cyan);
  box-shadow: var(--shadow-hard);
}

.page-faq .qa__q{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--white);
}

.page-faq .qa__q::-webkit-details-marker{ display: none; }
.page-faq .qa__q::marker{ content: ""; }

.page-faq .qa__no{
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--amber);
}

.page-faq .qa__text{ min-width: 0; }

.page-faq .qa__icon{
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.page-faq .qa__icon::before,
.page-faq .qa__icon::after{
  content: "";
  position: absolute;
  background: var(--cyan);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.page-faq .qa__icon::before{ left: 0; right: 0; top: 6px; height: 2px; }
.page-faq .qa__icon::after{ top: 0; bottom: 0; left: 6px; width: 2px; }

.page-faq .qa[open] .qa__icon::after{ transform: scaleY(0); }

.page-faq .qa__a{
  padding: 14px 16px 18px;
  border-top: 1px solid var(--faq-card-line);
}

.page-faq .qa__a p{
  margin: 0;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
}

.page-faq .qa__a strong{
  color: var(--cyan);
  font-weight: 600;
}

/* ---------- 数据提示条 ---------- */
.page-faq .faq-note{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, rgba(255,178,74,.14), rgba(6,16,29,0) 72%);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-faq .faq-note b{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber);
}

/* ---------- 章节配图 ---------- */
.page-faq .faq-figure{
  margin: 0 0 18px;
  border: 1px solid var(--line);
  background: var(--ink-750);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.page-faq .faq-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 650;
  object-fit: cover;
}

.page-faq .faq-figure figcaption{
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
}

@media (min-width: 720px){
  .page-faq .faq-figure img{ aspect-ratio: 900 / 460; }
}

/* ---------- 收束联系卡 ---------- */
.page-faq .faq-contact{
  margin-top: clamp(36px,5vw,62px);
  padding: clamp(20px,3vw,34px);
  border: 2px solid var(--line);
  background:
    linear-gradient(135deg, rgba(46,242,216,.10), rgba(6,16,29,0) 58%),
    var(--ink-750);
  box-shadow: var(--shadow-hard);
  display: grid;
  gap: clamp(20px,3vw,32px);
  scroll-margin-top: calc(var(--strip-h) + 82px);
}

.page-faq .faq-contact__title{
  margin: .3em 0 .4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px,3.4vw,34px);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--white);
}

.page-faq .faq-contact__text{
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-contact__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.page-faq .faq-contact__cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-faq .faq-card{
  border: 1px solid var(--line);
  background: var(--ink-800);
  padding: 12px 14px;
  display: grid;
  gap: 5px;
}

.page-faq .faq-card__label{
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-card__value{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--white);
  word-break: break-word;
}

.page-faq .faq-card__value a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(46,242,216,.45);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-faq .faq-card__value a:hover,
.page-faq .faq-card__value a:focus-visible{
  color: var(--white);
  border-bottom-color: var(--white);
}

.page-faq .faq-card__sub{
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 820px){
  .page-faq .faq-contact{
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .qa,
  .page-faq .qa__icon::before,
  .page-faq .qa__icon::after,
  .page-faq .faq-index__list a,
  .page-faq .faq-card__value a,
  .page-faq .faq-group__head{
    transition: none;
  }
}
<<<END>>>

另外注意：第 1 条要求输出顺序严格为 MAIN_HTML、PAGE_CSS，实际也只输出这两段，不要额外的 END 标记。我刚才多写了 `<<<END>>>`，应删除。

修正后的结尾：PAGE_CSS 结束后不再有任何标记。既然要求只输出这些标记内容，那最后的 `<<<END>>>` 就不该出现。给出修正版本。
<main id="main-content" class="page-faq">
  <div class="wrap">
    <nav class="crumbs" aria-label="面包屑">
      <ol class="crumbs__list">
        <li class="crumbs__item"><a class="crumbs__link" href="/">首页</a></li>
        <li class="crumbs__item"><span class="crumbs__current">帮助中心</span></li>
      </ol>
    </nav>

    <header class="faq-hero">
      <div class="faq-hero__body">
        <p class="kicker">HELP DESK / 赛前咨询台</p>
        <h1 class="faq-hero__title">开赛前的问题，<br><em>在这里先找到答案</em></h1>
        <p class="lede">欧宝体育入口把球迷和内容团队最常卡住的几件事集中在这里：第一次进来眼睛先落在哪、名单什么时候定版、老界面还能不能翻、设备上显示不一样该怎么描述。答案都短，看完就能照着做。</p>
        <ul class="faq-stats">
          <li><span class="mono">64</span><em>条常见问题</em></li>
          <li><span class="mono">5</span><em>类主题分区</em></li>
          <li><span class="mono">24h</span><em>工作日回复目标</em></li>
        </ul>
      </div>
      <figure class="faq-hero__media">
        <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="深色背景上排列的问题索引卡、编号标签与折叠答案线示意">
      </figure>
    </header>

    <div class="faq-shell">
      <nav class="faq-index" aria-label="问题分类索引">
        <p class="faq-index__title mono">INDEX / 索引</p>
        <ol class="faq-index__list">
          <li><a href="#start"><span class="mono">01</span>开始使用前</a></li>
          <li><a href="#lineup"><span class="mono">02</span>阵容与赛程</a></li>
          <li><a href="#device"><span class="mono">03</span>面板与设备</a></li>
          <li><a href="#support"><span class="mono">04</span>联系与复盘</a></li>
          <li><a href="#updates"><span class="mono">05</span>更新与通知</a></li>
        </ol>
        <div class="faq-index__foot">
          <a class="btn btn--sm btn--ghost" href="/offerings/">服务与工具</a>
          <a class="btn btn--sm btn--ghost" href="/cooperation/">合作与联系</a>
        </div>
      </nav>

      <div class="faq-body">

        <section class="faq-group" id="start" aria-labelledby="start-title">
          <div class="faq-group__head">
            <span class="tag tag--cyan">01</span>
            <h2 class="faq-group__title" id="start-title">开始使用前</h2>
            <p class="faq-group__hint">第一次打开，或者隔了一阵没来，先把这三条看完。</p>
          </div>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q01</span>
              <span class="qa__text">第一次进来，先看哪里最快上手？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>看顶部状态条给出的开赛时间，然后从左侧索引进阵容页。项目、轮次、主客队、名单状态、更新时间这五个字段都排在同一屏，不用翻页。重点盯「名单状态」那一列，标成已发布的条目就是当天能用的版本，其余字段按需展开看细节。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q02</span>
              <span class="qa__text">首屏那个倒计时在数什么？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>数的是距本轮开赛还剩多少时间。数字走到十分钟以内会进入脉冲状态，意思是阵容页即将切换到当轮的最终版，此后看到的名单不会再变。看到脉冲就刷新一次，比反复下拉省事。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q03</span>
              <span class="qa__text">V4 简洁体验和之前用惯的界面差在哪？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>改动集中在三处：数字字重加粗，比分、时间、版本号统一等宽，扫读时眼睛不用来回找位；分栏对比度提高，主客队字段不再靠颜色区分；移动端触控区域放大，单手翻阵容不容易误触。想回到老界面，去对照中心看保留的栏目结构就行，位置和当年一致。</p>
            </div>
          </details>

          <div class="faq-note" data-reveal>
            <span><b class="mono">90</b> 分钟预发布</span>
            <span><b class="mono">10</b> 分钟锁定当轮版本</span>
            <span><b class="mono">5</b> 个核心字段同屏</span>
          </div>
        </section>

        <section class="faq-group" id="lineup" aria-labelledby="lineup-title">
          <div class="faq-group__head">
            <span class="tag tag--cyan">02</span>
            <h2 class="faq-group__title" id="lineup-title">阵容与赛程</h2>
            <p class="faq-group__hint">名单到手之后，怎么比、怎么找、怎么看回放。</p>
          </div>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q04</span>
              <span class="qa__text">赛前十分钟，怎么一项一项比过去？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>最终版出来以后进阵容页，从项目、轮次、主客队、名单状态、更新时间依次往下扫。「更新时间」排在最后是有意安排的——如果它落在倒计时结束之后，说明这条名单刚刷新过，值得回头再看一眼。要和上一轮并排比对，开两个标签页，两边字段位置完全对齐，横向扫过去不会错行。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q05</span>
              <span class="qa__text">轮次索引适合什么时候用？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>想知道下一整周有什么、或者回头补看某个时间段，用它最快。赛程中心按轮次排布，每一轮下面挂着当轮赛程、阵容入口和回看条目。索引每周一更新一次，周末过完的第一件事就是它已经换成新的一周。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q06</span>
              <span class="qa__text">回看条目是按什么归到一起的？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>同时按轮次和项目两个方向归档，目前整理到 <strong>1,860 条</strong>。按轮次找，看的是同一时段的全部场次；按项目找，看的是同一项目跨轮次的连续脉络。两个入口指向同一批条目，收藏哪个都能打开。</p>
            </div>
          </details>

          <div class="faq-note" data-reveal>
            <span><b class="mono">1,860</b> 条回看条目</span>
            <span><b class="mono">每周一</b> 更换轮次索引</span>
            <span><b class="mono">9</b> 个项目并行排布</span>
          </div>
        </section>

        <section class="faq-group" id="device" aria-labelledby="device-title">
          <div class="faq-group__head">
            <span class="tag tag--cyan">03</span>
            <h2 class="faq-group__title" id="device-title">面板与设备</h2>
            <p class="faq-group__hint">老栏目在哪、统计多久一换、屏幕不一样时看哪里。</p>
          </div>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:650w:900}" width="900" height="650" alt="手机、平板与桌面三种设备的抽象分栏示意图，高亮系统版本与列宽差异" loading="lazy" decoding="async">
            <figcaption>同一条目在手机、平板、桌面上的列宽表现</figcaption>
          </figure>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q07</span>
              <span class="qa__text">旧版面板为什么按原来的栏目顺序摆？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>因为不少人靠栏目位置记东西。对照中心保留了 2019 至 2023 年的 6 组主要栏目结构，按当年的顺序镜像呈现，改版前后左右并排，字段一一对得上。你按记忆里的位置走过去就行，不用重新学一套布局。也支持按栏目、赛季、项目三种方式筛选。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q08</span>
              <span class="qa__text">iOS 设备统计多久换一版？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>每 48 小时更新一次。统计按 iPhone 与 iPad 的 28 个机型分组、7 个系统版本区间分栏，能看出同一台机器在不同系统版本下的显示差别。想确认自己那台上是什么样，先把机型和系统版本两栏锁定，再看列宽和字段换行的位置。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q09</span>
              <span class="qa__text">换到别的设备上，列宽不一样是正常的吗？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>正常。手机端字段纵向堆叠，平板和桌面端保持横向排布，同一个表格在两种视图下宽度天然不同。想看真实效果，把屏幕转成横屏，或者拿统计页里同机型的视图做参照。确实影响阅读的，把机型、系统版本、页面名称记下来，通过联系入口提一条设备差异说明。</p>
            </div>
          </details>

          <div class="faq-note" data-reveal>
            <span><b class="mono">28</b> 个机型分组</span>
            <span><b class="mono">7</b> 个系统版本区间</span>
            <span><b class="mono">48</b> 小时刷新一次</span>
          </div>
        </section>

        <section class="faq-group" id="support" aria-labelledby="support-title">
          <div class="faq-group__head">
            <span class="tag tag--cyan">04</span>
            <h2 class="faq-group__title" id="support-title">联系与复盘</h2>
            <p class="faq-group__hint">自己解决不了的时候，把话说清楚就能省一半来回。</p>
          </div>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q10</span>
              <span class="qa__text">找人的入口在哪？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>每页最下面的邮箱和电话就是主入口。邮箱受理赛后复盘、设备差异说明和旧版面板版本对照申请；电话在工作日 09:00–18:00 有人接。地址用于资料递送与线下联络，具体安排以客服确认为准。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q11</span>
              <span class="qa__text">赛后复盘需要写清哪几样？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>四样：机型、系统版本、出现问题的页面名称、具体现象。有条件再附一张截图说明，标出你觉得不对的那一行。信息给全了，客服能直接判断是布局差异还是字段显示问题，一来一回就够，不用反复确认。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q12</span>
              <span class="qa__text">发出去多久会有回音？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>工作日 09:00–18:00 之间收到的邮件，目标在 24 小时内回复。赛季高峰日访问量会到 2.6 万上下，晚间提交的申请可能顺延到第二天处理，着急的话直接拨电话。</p>
            </div>
          </details>

          <div class="faq-note" data-reveal>
            <span>工作日 <b class="mono">09:00–18:00</b></span>
            <span><b class="mono">24</b> 小时内回复</span>
            <span>赛季高峰日约 <b class="mono">2.6</b> 万访问</span>
          </div>
        </section>

        <section class="faq-group" id="updates" aria-labelledby="updates-title">
          <div class="faq-group__head">
            <span class="tag tag--cyan">05</span>
            <h2 class="faq-group__title" id="updates-title">更新与通知</h2>
            <p class="faq-group__hint">想知道什么时候有新东西，看这三个节奏。</p>
          </div>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q13</span>
              <span class="qa__text">版本说明多久发一次，写些什么？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>每月一次，写清这个月动了哪些字段顺序、字重和分栏比例。V4 简洁体验就是某一期说明里的重点内容，条目按改动类型分块列出，看完大概能知道下个月界面会不会有变化。往期都在赛季专栏里。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q14</span>
              <span class="qa__text">季度巡检报告是给谁看的？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>给长期跟进的人和内容团队看。每季度发布一次，把这一季的栏目调整、设备适配情况和遗留问题整理成一份连贯的记录。想知道某个栏目为什么换了位置，翻那一季的报告通常能找到原因。</p>
            </div>
          </details>

          <details class="qa" data-reveal>
            <summary class="qa__q">
              <span class="qa__no mono">Q15</span>
              <span class="qa__text">想追着看这些更新，有固定入口吗？</span>
              <span class="qa__icon" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>赛季专栏按赛季阶段归档，版本说明、面板记录、设备适配笔记和轮次专题都在里面。团队协作需求比较多的，可以走合作与联系走一遍沟通，把关注点告诉内容团队。</p>
            </div>
          </details>

          <div class="faq-note" data-reveal>
            <span><b class="mono">每月</b> 版本说明</span>
            <span><b class="mono">每周一</b> 轮次索引</span>
            <span><b class="mono">每季度</b> 结构巡检报告</span>
          </div>
        </section>

        <section class="faq-contact" id="ask" aria-labelledby="ask-title">
          <div class="faq-contact__body">
            <p class="kicker">CONTACT / 还差一条</p>
            <h2 class="faq-contact__title" id="ask-title">上面没写到的，直接问我们</h2>
            <p class="faq-contact__text">赛前资料、设备适配、旧版栏目位置、区域内容协作，都可以从这里开口。写清设备和页面，回复会快很多。</p>
            <p class="faq-contact__actions">
              <a class="btn btn--primary" href="/cooperation/">进入合作与联系</a>
              <a class="btn btn--ghost" href="/offerings/">先看服务与工具</a>
            </p>
          </div>
          <ul class="faq-contact__cards">
            <li class="faq-card">
              <span class="faq-card__label mono">EMAIL</span>
              <span class="faq-card__value"><a href="mailto:support@ob-playzone.com.cn">support@ob-playzone.com.cn</a></span>
              <span class="faq-card__sub">赛后复盘 · 设备差异说明 · 面板对照申请</span>
            </li>
            <li class="faq-card">
              <span class="faq-card__label mono">TEL</span>
              <span class="faq-card__value">400-7849-2208</span>
              <span class="faq-card__sub">工作日 09:00–18:00</span>
            </li>
            <li class="faq-card">
              <span class="faq-card__label mono">ADDR</span>
              <span class="faq-card__value">黑龙江省哈尔滨市南岗区红旗大街162号欧宝体育服务中心</span>
              <span class="faq-card__sub">用于资料递送与线下联络，具体安排以客服确认为准</span>
            </li>
          </ul>
        </section>

      </div>
    </div>
  </div>
</main>

.page-faq{
  --faq-rail: 236px;
  --faq-card-line: rgba(46,66,87,.72);
  padding-bottom: clamp(56px,8vw,104px);
}

.page-faq .crumbs{
  padding-top: clamp(18px,3vw,30px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  display: grid;
  gap: var(--gap);
  margin: clamp(14px,3vw,26px) 0 clamp(32px,5vw,60px);
}

.page-faq .faq-hero__title{
  margin: .26em 0 .36em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px,7.2vw,74px);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--white);
}

.page-faq .faq-hero__title em{
  font-style: normal;
  color: var(--cyan);
}

.page-faq .faq-hero .lede{
  max-width: 58ch;
}

.page-faq .faq-stats{
  list-style: none;
  margin: clamp(20px,3vw,30px) 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.page-faq .faq-stats li{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-faq .faq-stats .mono{
  font-size: clamp(20px,3.2vw,30px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-faq .faq-stats li:nth-child(2) .mono{ color: var(--amber); }
.page-faq .faq-stats li:nth-child(3) .mono{ color: var(--white); }

.page-faq .faq-stats em{
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-faq .faq-hero__media{
  margin: 0;
  border: 2px solid var(--line);
  background: var(--ink-750);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

.page-faq .faq-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 600;
  object-fit: cover;
}

@media (min-width: 900px){
  .page-faq .faq-hero{
    grid-template-columns: 1.12fr .88fr;
    align-items: end;
  }
  .page-faq .faq-hero__media{ align-self: stretch; }
  .page-faq .faq-hero__media img{ height: 100%; aspect-ratio: auto; }
}

/* ---------- 索引 + 内容 ---------- */
.page-faq .faq-shell{
  display: grid;
  gap: clamp(22px,4vw,40px);
}

.page-faq .faq-index{
  border: 1px solid var(--line);
  background: rgba(10,22,37,.75);
  padding: 16px 16px 18px;
}

.page-faq .faq-index__title{
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
}

.page-faq .faq-index__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-faq .faq-index__list a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.page-faq .faq-index__list a:hover,
.page-faq .faq-index__list a:focus-visible{
  background: var(--ink-750);
  border-left-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

.page-faq .faq-index__list .mono{
  font-size: 11.5px;
  color: var(--amber);
}

.page-faq .faq-index__foot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.page-faq .faq-index__foot .btn{ flex: 1 1 auto; justify-content: center; }

@media (max-width: 959px){
  .page-faq .faq-index__list{
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .page-faq .faq-index__list li{ flex: 0 0 auto; }
  .page-faq .faq-index__list a{
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
  }
  .page-faq .faq-index__list a:hover,
  .page-faq .faq-index__list a:focus-visible{
    border-left-color: transparent;
    border-bottom-color: var(--cyan);
  }
}

@media (min-width: 960px){
  .page-faq .faq-shell{
    grid-template-columns: var(--faq-rail) minmax(0,1fr);
    align-items: start;
  }
  .page-faq .faq-index{
    position: sticky;
    top: calc(var(--strip-h) + 18px);
  }
}

/* ---------- 分组 ---------- */
.page-faq .faq-group{
  margin: 0 0 clamp(34px,5vw,58px);
  scroll-margin-top: calc(var(--strip-h) + 82px);
}

.page-faq .faq-group:last-of-type{ margin-bottom: 0; }

.page-faq .faq-group__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}

.page-faq .faq-group:target .faq-group__head{ border-bottom-color: var(--cyan); }

.page-faq .faq-group__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px,2.8vw,29px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-faq .faq-group__hint{
  flex: 1 1 100%;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- 问答卡 ---------- */
.page-faq .qa{
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.page-faq .qa + .qa{ margin-top: 10px; }

.page-faq .qa:hover{ border-left-color: #3f5a72; }

.page-faq .qa[open]{
  border-left-color: var(--cyan);
  box-shadow: var(--shadow-hard);
}

.page-faq .qa__q{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--white);
}

.page-faq .qa__q::-webkit-details-marker{ display: none; }
.page-faq .qa__q::marker{ content: ""; }

.page-faq .qa__no{
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--amber);
}

.page-faq .qa__text{ min-width: 0; }

.page-faq .qa__icon{
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.page-faq .qa__icon::before,
.page-faq .qa__icon::after{
  content: "";
  position: absolute;
  background: var(--cyan);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.page-faq .qa__icon::before{ left: 0; right: 0; top: 6px; height: 2px; }
.page-faq .qa__icon::after{ top: 0; bottom: 0; left: 6px; width: 2px; }

.page-faq .qa[open] .qa__icon::after{ transform: scaleY(0); }

.page-faq .qa__a{
  padding: 14px 16px 18px;
  border-top: 1px solid var(--faq-card-line);
}

.page-faq .qa__a p{
  margin: 0;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
}

.page-faq .qa__a strong{
  color: var(--cyan);
  font-weight: 600;
}

/* ---------- 数据提示条 ---------- */
.page-faq .faq-note{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, rgba(255,178,74,.14), rgba(6,16,29,0) 72%);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-faq .faq-note b{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber);
}

/* ---------- 章节配图 ---------- */
.page-faq .faq-figure{
  margin: 0 0 18px;
  border: 1px solid var(--line);
  background: var(--ink-750);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.page-faq .faq-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 650;
  object-fit: cover;
}

.page-faq .faq-figure figcaption{
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
}

@media (min-width: 720px){
  .page-faq .faq-figure img{ aspect-ratio: 900 / 460; }
}

/* ---------- 收束联系卡 ---------- */
.page-faq .faq-contact{
  margin-top: clamp(36px,5vw,62px);
  padding: clamp(20px,3vw,34px);
  border: 2px solid var(--line);
  background:
    linear-gradient(135deg, rgba(46,242,216,.10), rgba(6,16,29,0) 58%),
    var(--ink-750);
  box-shadow: var(--shadow-hard);
  display: grid;
  gap: clamp(20px,3vw,32px);
  scroll-margin-top: calc(var(--strip-h) + 82px);
}

.page-faq .faq-contact__title{
  margin: .3em 0 .4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px,3.4vw,34px);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--white);
}

.page-faq .faq-contact__text{
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-contact__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.page-faq .faq-contact__cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-faq .faq-card{
  border: 1px solid var(--line);
  background: var(--ink-800);
  padding: 12px 14px;
  display: grid;
  gap: 5px;
}

.page-faq .faq-card__label{
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-card__value{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--white);
  word-break: break-word;
}

.page-faq .faq-card__value a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(46,242,216,.45);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-faq .faq-card__value a:hover,
.page-faq .faq-card__value a:focus-visible{
  color: var(--white);
  border-bottom-color: var(--white);
}

.page-faq .faq-card__sub{
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 820px){
  .page-faq .faq-contact{
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .qa,
  .page-faq .qa__icon::before,
  .page-faq .qa__icon::after,
  .page-faq .faq-index__list a,
  .page-faq .faq-card__value a,
  .page-faq .faq-group__head{
    transition: none;
  }
}