.page-faq {
  --faq-inset: clamp(10px, 1.6vw, 18px);
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow-x: clip;
}

/* 首屏：文案与切角色块错位并置 */
.page-faq .faq-mast {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(18px, 3.4vw, 32px) 0 clamp(28px, 5vw, 52px);
  align-items: end;
}

.page-faq .faq-mast-copy .lede {
  max-width: 46ch;
  margin-top: clamp(14px, 2vw, 20px);
}

.page-faq .faq-hero-media {
  margin: 0;
  overflow: hidden;
  background: var(--board-deep);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 900px) {
  .page-faq .faq-mast {
    grid-template-columns: minmax(0, 5.4fr) minmax(0, 6fr);
    column-gap: clamp(28px, 5vw, 64px);
  }
  .page-faq .faq-hero-media {
    transform: translateY(18px);
  }
}

/* 分组跳转条：一条琥珀色横贯细轨 */
.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--amber);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 6vw, 64px);
}

.page-faq .faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 clamp(12px, 2vw, 20px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  text-decoration: none;
  border-right: 1px solid var(--line-soft);
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink-night);
  background-color: var(--amber);
  outline: none;
}

/* 问答分组 */
.page-faq .faq-group {
  margin-bottom: clamp(40px, 7vw, 80px);
  scroll-margin-top: 120px;
}

.page-faq .faq-group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 clamp(14px, 2.4vw, 24px);
  padding-top: clamp(12px, 2vw, 18px);
  border-top: 3px solid var(--amber);
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-faq .faq-group-title span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

/* 问题与答复的梯形阅读路径 */
.page-faq .faq-item {
  padding: clamp(14px, 2vw, 20px) var(--faq-inset);
  margin-inline: calc(-1 * var(--faq-inset));
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.page-faq .faq-item:hover {
  background-color: rgba(18, 63, 53, 0.45);
  box-shadow: inset 2px 0 0 0 var(--cyan);
}

.page-faq .faq-q {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: baseline;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-faq .faq-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mist);
  opacity: 0.7;
}

.page-faq .faq-a {
  margin-left: 42px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(233, 244, 241, 0.86);
}

.page-faq .faq-a p {
  margin: 0 0 10px;
}

.page-faq .faq-a p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-a a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

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

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

.page-faq .faq-note {
  display: block;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--mist);
}

@media (min-width: 760px) {
  .page-faq .faq-q {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .page-faq .faq-a {
    margin-left: 72px;
  }
}

/* 反馈信息项清单块 */
.page-faq .faq-fields {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  display: grid;
}

.page-faq .faq-fields li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-fields li + li {
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-fields b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-fields span {
  color: rgba(233, 244, 241, 0.82);
}

@media (min-width: 600px) {
  .page-faq .faq-fields li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
}

.page-faq .faq-contact {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--cyan-soft);
  word-break: break-all;
}

/* 组内插入图 */
.page-faq .faq-figure {
  margin: clamp(20px, 3vw, 30px) 0 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.page-faq .faq-figure .media-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mist);
}

/* 收尾 */
.page-faq .faq-cta {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--line-strong);
}

.page-faq .faq-cta-body h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-faq .faq-cta-body p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(233, 244, 241, 0.82);
}

.page-faq .faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 820px) {
  .page-faq .faq-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .page-faq .faq-cta-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-jump a,
  .page-faq .faq-a a {
    transition: none;
  }
  .page-faq .faq-hero-media {
    transform: none;
  }
}
<<<END>>>

等等——输出标记说的是只出现一次，并且是三个尖括号。我应该严格按照标记来输出，不要额外加任何东西。我把最后的 `<<<END>>>` 去掉，让结尾停在 CSS 上。

实际上标记是 ``、``——只要这两个就行。那我把多余的收尾标记去掉。

但还有个小细节：`grid-template-columns: 34px minmax(0, 1fr);` 配 `gap: 4px 8px`——问题编号在窄屏也有 34px 的宽度，可以接受。

另外我在 .faq-cta-body h2 上用了 `display-3` 类，然后又写了 font-size 来覆盖——全局 .display-3 可能也设了字号；我设的 var(--fs-3) 也差不多。行，保留。

还有 `.page-faq .faq-group` 用了 `wrap` 类——但 `.wrap` 的内边距会和我设的 `margin-inline` 负值相互影响，不过没什么问题。

行。
<main id="main-content" class="page-faq">
  <div class="wrap">
    <nav class="crumbs" aria-label="面包屑导航">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">答疑台</li>
      </ol>
    </nav>
  </div>

  <div class="wrap faq-mast">
    <div class="faq-mast-copy">
      <p class="eyebrow">答疑台 · 用起来之后才会问的那些事</p>
      <h1 class="display-1">查赛程卡住的那一步，<br>在这里找到答案</h1>
      <p class="lede">三亿赛场的赛程工具几分钟就能上手，真正的问题往往出现在用得越深之后：重点场次为什么越筛越少、某条赛程怎么忽然变了、换过联赛为什么日期没跟回来。下面按你最可能碰到的情况分组写清楚，找到对应那条就能接着用。</p>
    </div>
    <figure class="media-frame media-frame--wide faq-hero-media">
      <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="墨绿底色上由切角矩形与斜向细线组成的抽象几何构图，荧光青描边勾出网格骨架">
    </figure>
  </div>

  <div class="wrap">
    <nav class="faq-jump" aria-label="问题分组">
      <a href="#group-focus">01 重点场次</a>
      <a href="#group-records">02 更新记录</a>
      <a href="#group-switch">03 联赛切换</a>
      <a href="#group-feedback">04 数据纠错</a>
      <a href="#group-start">05 上手路径</a>
    </nav>
  </div>

  <section class="faq-group wrap" id="group-focus" aria-labelledby="group-focus-title">
    <h2 class="faq-group-title" id="group-focus-title"><span>01</span>重点场次，为什么和预想的不一样</h2>
    <div class="faq-items">
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">01</span>勾上开关，一天为什么只剩两三场？</h3>
        <div class="faq-a">
          <p>打开「只看重点场次 三亿体育」之后，日历会把符合判定条件的场次留下，其余收起来。同时追几个联赛时，一天筛完只剩两三场是常态，这几场通常就是真正值得守着看的。觉得收得太紧，关掉开关即可，当前联赛与日期位置都还在。</p>
          <span class="faq-note">筛完剩下的场次照样可以逐条展开，红黄牌与阵容变化照常显示。</span>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">02</span>同城对阵、淘汰赛节点、排名接近，几项之间谁说了算？</h3>
        <div class="faq-a">
          <p>重点场次由 <strong class="faq-hl">7 项判定规则</strong>合成，涵盖同城对阵、淘汰赛节点、排名接近、同日撞期等因素，逐项加权后得出一个分数再排序。权重随赛季阶段调整：小组赛阶段更看重同日撞期与排名接近，进入淘汰赛阶段则提高淘汰赛节点的分量。</p>
          <p>每个赛季会发布 <strong class="faq-hl">4 次</strong>判定规则版本说明，具体条目和调整方向在<a href="/business/">工具与中心</a>里可以查到。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">03</span>规则调整之后，之前标过的场次会跟着变吗？</h3>
        <div class="faq-a">
          <p>已经过去的场次会保留当时的判定结果，也保留修订前后的字段内容；后来上线的新规则只作用于之后同步的条目，不会回头改写旧记录。所以同一赛季前后两段，重点场的数量会有明显差别，那通常是因为规则换了版本。</p>
        </div>
      </article>
    </div>
    <figure class="faq-figure">
      <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="两组条目列表被一条琥珀色带分隔的抽象示意图，上行条目密集、下行稀疏" loading="lazy" decoding="async">
      <figcaption class="media-caption">筛掉的那部分并不会消失，关掉开关就回到完整日历。</figcaption>
    </figure>
  </section>

  <section class="faq-group wrap" id="group-records" aria-labelledby="group-records-title">
    <h2 class="faq-group-title" id="group-records-title"><span>02</span>更新记录，能往前查多远</h2>
    <div class="faq-items">
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">04</span>记录保留多长时间，怎么筛出我要的那条？</h3>
        <div class="faq-a">
          <p>最近 <strong class="faq-hl">12 个月</strong>的记录都在苹果 D5PQ 中心。筛选可以按联赛、日期、条目类型三个维度叠加，选中的条件会以标签形式显示在结果上方，点掉某个标签就撤掉那一项筛选。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">05</span>红黄牌和阵容变化，是另开一个列表吗？</h3>
        <div class="faq-a">
          <p>最近三轮的红黄牌与阵容变动直接标注在原赛程条目下方，顺着那场比赛往下看就能找到，不用跳到别的地方。更早的变动以修订记录的形式留在更新记录里，把日期筛过去就能看。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">06</span>一条赛程被改过，能看到前后差别吗？</h3>
        <div class="faq-a">
          <p>每条修订都保留修订前后的字段内容与操作时间。想看某一天的完整变动，把日期筛到那天、条目类型选赛程修订，时间顺序一列排开。完整的变动脉络在<a href="/updates/">更新日志</a>里也能顺着时间看下去。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="faq-group wrap" id="group-switch" aria-labelledby="group-switch-title">
    <h2 class="faq-group-title" id="group-switch-title"><span>03</span>换联赛，日期怎么不跳回来</h2>
    <div class="faq-items">
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">07</span>切换联赛以后，日期为什么还停在原来那天？</h3>
        <div class="faq-a">
          <p>侧边悬浮的联赛切换器会保留你当前的日期位置与滚动深度。换联赛时日历不跳回今天，这样做是为了让同一天的比赛能直接左右对照，翻回去重找位置的时间就省下来了。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">08</span>同一天有好几个联赛开赛，怎么放在一起看？</h3>
        <div class="faq-a">
          <p>先关掉重点场次开关，日历按天分行，同一天的开赛时间从上往下排，几场撞在一起的比赛会落在相邻位置。再用侧边切换器换联赛，日期不动，一天之内的条目就能横着比。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">09</span>导出的日历文件，能在常用日历应用里用吗？</h3>
        <div class="faq-a">
          <p>站内支持把赛程导出为 .ics 文件，导入常见的日历应用即可显示。出差或者没网的时候，离线状态下最近 <strong class="faq-hl">7 天</strong>的赛程照样能打开。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="faq-group wrap" id="group-feedback" aria-labelledby="group-feedback-title">
    <h2 class="faq-group-title" id="group-feedback-title"><span>04</span>赛程不对，往哪里说</h2>
    <div class="faq-items">
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">10</span>反馈赛程问题，需要写明什么？</h3>
        <div class="faq-a">
          <p>把下面三项写全，处理起来会快很多。</p>
          <ul class="faq-fields">
            <li><b>具体场次</b><span>对阵双方，有条件的话带上原定开赛时间</span></li>
            <li><b>联赛名称</b><span>全称或常用简称都可以</span></li>
            <li><b>看到的时间点</b><span>哪一天、大概几点看到的，方便回查当时的条目</span></li>
          </ul>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">11</span>发到哪里，什么时候能看到回复？</h3>
        <div class="faq-a">
          <p>发到 <b class="faq-contact">contact@san-yi-sprint.com.cn</b>。客服邮箱在工作日 10:00-18:00 内回复。赛程数据相关的问题请附上刚才那三项信息，缺一项都容易来回问。</p>
          <p>想一次把来龙去脉写清楚，也可以走<a href="/feedback/">反馈通道</a>，合作与媒体联系同样从那里进。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="faq-group wrap" id="group-start" aria-labelledby="group-start-title">
    <h2 class="faq-group-title" id="group-start-title"><span>05</span>第一次打开，先做哪一步</h2>
    <div class="faq-items">
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">12</span>第一次用，从哪儿开始？</h3>
        <div class="faq-a">
          <p>打开<a href="/">首页</a>就是当天的赛事日历，时间、对阵与状态排在同一行。先不勾任何开关，按天往下扫一遍，熟悉条目的排法，两分钟就能摸清节奏。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">13</span>只想盯几场，怎么把它设下来？</h3>
        <div class="faq-a">
          <p>在刊头右侧打开「只看重点场次」，日历立刻收紧到符合条件的场次。这个选择会记住，下次打开还是你上次的状态；关掉时，之前选的联赛也还在。</p>
        </div>
      </article>
      <article class="faq-item">
        <h3 class="faq-q"><span class="faq-index">14</span>怎么让下次打开更快？</h3>
        <div class="faq-a">
          <p>把首页存入浏览器书签，或者添加到桌面。离线状态下最近 7 天的赛程也能打开，出门在外不用再翻别的页面。想先看看工具到底能覆盖哪些联赛与杯赛，<a href="/who-we-are/">我们是谁</a>里有完整的覆盖范围与团队分工。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="faq-cta wrap" aria-labelledby="faq-cta-title">
    <div class="faq-cta-body">
      <h2 class="display-3" id="faq-cta-title">还有一条没对上？</h2>
      <p>把场次、联赛和看到的时间点写清楚发过来，工作日内会有人回你。想先摸清工具能做什么，也可以直接看功能说明。</p>
    </div>
    <div class="faq-cta-actions">
      <a class="btn btn--primary" href="/feedback/">去反馈通道</a>
      <a class="btn btn--ghost" href="/business/">看工具能力</a>
    </div>
  </section>
</main>

.page-faq {
  --faq-inset: clamp(10px, 1.6vw, 18px);
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow-x: clip;
}

/* 首屏：文案与切角色块错位并置 */
.page-faq .faq-mast {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(18px, 3.4vw, 32px) 0 clamp(28px, 5vw, 52px);
  align-items: end;
}

.page-faq .faq-mast-copy .lede {
  max-width: 46ch;
  margin-top: clamp(14px, 2vw, 20px);
}

.page-faq .faq-hero-media {
  margin: 0;
  overflow: hidden;
  background: var(--board-deep);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 900px) {
  .page-faq .faq-mast {
    grid-template-columns: minmax(0, 5.4fr) minmax(0, 6fr);
    column-gap: clamp(28px, 5vw, 64px);
  }
  .page-faq .faq-hero-media {
    transform: translateY(18px);
  }
}

/* 分组跳转条：一条琥珀色横贯细轨 */
.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--amber);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 6vw, 64px);
}

.page-faq .faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 clamp(12px, 2vw, 20px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  text-decoration: none;
  border-right: 1px solid var(--line-soft);
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink-night);
  background-color: var(--amber);
  outline: none;
}

/* 问答分组 */
.page-faq .faq-group {
  margin-bottom: clamp(40px, 7vw, 80px);
  scroll-margin-top: 120px;
}

.page-faq .faq-group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 clamp(14px, 2.4vw, 24px);
  padding-top: clamp(12px, 2vw, 18px);
  border-top: 3px solid var(--amber);
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-faq .faq-group-title span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

/* 问题与答复的梯形阅读路径 */
.page-faq .faq-item {
  padding: clamp(14px, 2vw, 20px) var(--faq-inset);
  margin-inline: calc(-1 * var(--faq-inset));
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.page-faq .faq-item:hover {
  background-color: rgba(18, 63, 53, 0.45);
  box-shadow: inset 2px 0 0 0 var(--cyan);
}

.page-faq .faq-q {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: baseline;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-faq .faq-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mist);
  opacity: 0.7;
}

.page-faq .faq-a {
  margin-left: 42px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(233, 244, 241, 0.86);
}

.page-faq .faq-a p {
  margin: 0 0 10px;
}

.page-faq .faq-a p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-a a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

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

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

.page-faq .faq-note {
  display: block;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--mist);
}

@media (min-width: 760px) {
  .page-faq .faq-q {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .page-faq .faq-a {
    margin-left: 72px;
  }
}

/* 反馈信息项清单块 */
.page-faq .faq-fields {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  display: grid;
}

.page-faq .faq-fields li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-fields li + li {
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-fields b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-fields span {
  color: rgba(233, 244, 241, 0.82);
}

@media (min-width: 600px) {
  .page-faq .faq-fields li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
}

.page-faq .faq-contact {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--cyan-soft);
  word-break: break-all;
}

/* 组内插入图 */
.page-faq .faq-figure {
  margin: clamp(20px, 3vw, 30px) 0 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.page-faq .faq-figure .media-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mist);
}

/* 收尾 */
.page-faq .faq-cta {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--line-strong);
}

.page-faq .faq-cta-body h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-faq .faq-cta-body p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(233, 244, 241, 0.82);
}

.page-faq .faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 820px) {
  .page-faq .faq-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .page-faq .faq-cta-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-jump a,
  .page-faq .faq-a a {
    transition: none;
  }
  .page-faq .faq-hero-media {
    transform: none;
  }
}