.page-faq {
  --faq-pad: clamp(16px, 4vw, 32px);
  --faq-ring: rgba(47, 107, 94, 0.6);
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  padding: calc(var(--hdr-h, 66px) + 32px) 0 84px;
  overflow-x: hidden;
}

.page-faq *,
.page-faq *::before,
.page-faq *::after {
  box-sizing: border-box;
}

.page-faq h1,
.page-faq h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-faq p {
  margin: 0;
}

.page-faq ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq a {
  color: var(--cy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-faq a:hover,
.page-faq a:focus-visible {
  color: var(--cy-soft);
}

/* ------- 面包屑 ------- */
.page-faq .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin-bottom: 26px;
}

.page-faq .crumbs__item {
  color: var(--mist);
  text-decoration: none;
}

.page-faq .crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.page-faq .crumbs__item[aria-current="page"] {
  color: var(--cy);
}

/* ------- 首屏 ------- */
.page-faq .faq-hero {
  position: relative;
  padding-bottom: 42px;
  background-image:
    radial-gradient(115% 78% at 92% -14%, rgba(56, 242, 200, 0.17), transparent 62%),
    radial-gradient(85% 62% at -8% 4%, rgba(47, 107, 94, 0.45), transparent 68%);
  border-bottom: 2px solid var(--line);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 28px;
}

.page-faq .faq-hero__kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: 14px;
}

.page-faq .faq-hero__title {
  font-size: clamp(34px, 7.2vw, 72px);
  font-weight: 800;
  line-height: 0.98;
  color: var(--paper);
  max-width: 16ch;
  margin-bottom: 20px;
}

.page-faq .faq-hero__lead {
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.86);
  max-width: 54ch;
}

.page-faq .faq-hero__panel {
  border: 2px solid var(--line);
  background: rgba(18, 67, 58, 0.72);
  box-shadow: var(--shadow-hard);
  padding: 18px 18px 16px;
  display: grid;
  gap: 14px;
  align-self: start;
}

.page-faq .faq-hero__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.page-faq .faq-hero__ver-label {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-faq .faq-hero__ver-num {
  font-family: var(--font-mono);
  font-size: clamp(38px, 8vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.03em;
}

.page-faq .faq-hero__meta {
  margin: 0;
  display: grid;
  gap: 8px;
}

.page-faq .faq-hero__meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--faq-ring);
}

.page-faq .faq-hero__meta dt {
  font-size: 13px;
  color: var(--mist);
}

.page-faq .faq-hero__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
}

/* ------- 分组跳转 ------- */
.page-faq .faq-jump {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 22px 0 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-jump .chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--line);
  background: rgba(28, 35, 32, 0.62);
  color: var(--ink-text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-faq .faq-jump .chip:hover,
.page-faq .faq-jump .chip:focus-visible {
  border-color: var(--cy);
  color: var(--cy-soft);
  background: rgba(56, 242, 200, 0.12);
}

/* ------- 章节 ------- */
.page-faq .faq-sec {
  padding: 52px 0 16px;
  border-top: 2px solid var(--faq-ring);
  scroll-margin-top: calc(var(--hdr-h, 66px) + 24px);
}

.page-faq .faq-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-left: 6px solid var(--cy);
  background: linear-gradient(90deg, rgba(56, 242, 200, 0.16), rgba(56, 242, 200, 0) 74%);
}

.page-faq .faq-sec__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cy);
}

.page-faq .faq-sec__title {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--paper);
  line-height: 1.15;
}

.page-faq .faq-sec__toggle {
  margin-left: auto;
  padding: 6px 12px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-faq .faq-sec__toggle:hover,
.page-faq .faq-sec__toggle:focus-visible {
  border-color: var(--cy);
  color: var(--cy);
  background: rgba(56, 242, 200, 0.1);
  outline: none;
}

.page-faq .faq-sec__toggle[aria-expanded="true"] {
  border-color: var(--cy);
  color: var(--cy);
  background: rgba(56, 242, 200, 0.14);
}

/* ------- 问答列表 ------- */
.page-faq .faq-list {
  display: grid;
  gap: 12px;
}

.page-faq .faq-item {
  border: 2px solid var(--line);
  background: rgba(28, 35, 32, 0.72);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-faq .faq-item:focus-within {
  border-color: var(--cy);
}

.page-faq .expand__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s var(--ease);
}

.page-faq .expand__btn:hover {
  color: var(--cy-soft);
}

.page-faq .expand__btn:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: -2px;
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .expand__icon {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 2px solid var(--mist);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-faq .expand__icon::before,
.page-faq .expand__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--mist);
  transform: translate(-50%, -50%);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-faq .expand__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.page-faq .expand__btn[aria-expanded="true"] {
  color: var(--cy-soft);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon {
  border-color: var(--cy);
  background: rgba(56, 242, 200, 0.16);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon::before,
.page-faq .expand__btn[aria-expanded="true"] .expand__icon::after {
  background: var(--cy);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.page-faq .expand__panel {
  border-top: 2px solid var(--line);
}

.page-faq .expand__panel[hidden] {
  display: none;
}

.page-faq .expand__body {
  padding: 16px 18px 20px 22px;
  background: var(--char);
  border-left: 4px solid var(--cy);
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.9);
}

.page-faq .expand__body a {
  color: var(--cy);
  font-weight: 600;
}

.page-faq .expand__body .mono {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
  letter-spacing: 0.01em;
}

/* ------- 配图 ------- */
.page-faq .faq-figure {
  margin: 22px 0 0;
  border: 2px solid var(--line);
  background: rgba(18, 67, 58, 0.5);
  box-shadow: var(--shadow-hard);
}

.page-faq .figure__box {
  position: relative;
  overflow: hidden;
  background: var(--char);
}

.page-faq .figure__box.ratio-4x3 {
  aspect-ratio: 4 / 3;
}

.page-faq .figure__box.ratio-7x3 {
  aspect-ratio: 7 / 3;
}

.page-faq .figure__box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 43, 38, 0.36), rgba(11, 43, 38, 0.08));
}

.page-faq .figure__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-faq .figure__cap {
  padding: 12px 14px;
  border-top: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
}

/* ------- 尾部行动 ------- */
.page-faq .faq-cta {
  padding: 60px 0 8px;
}

.page-faq .faq-cta__box {
  display: grid;
  gap: 22px;
  padding: 26px 22px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--gold);
  background: linear-gradient(120deg, rgba(18, 67, 58, 0.92), rgba(28, 35, 32, 0.92));
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-cta__title {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 10px;
}

.page-faq .faq-cta__text {
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.86);
  max-width: 52ch;
}

.page-faq .faq-cta__btn {
  justify-self: start;
  align-self: center;
  text-decoration: none;
  white-space: nowrap;
}

/* ------- 响应式 ------- */
@media (min-width: 720px) {
  .page-faq {
    padding-bottom: 104px;
  }

  .page-faq .faq-jump {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .page-faq .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
  }

  .page-faq .faq-list--single {
    grid-template-columns: 1fr;
  }

  .page-faq .faq-cta__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 32px 30px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
    align-items: end;
    gap: 44px;
  }

  .page-faq .faq-hero {
    padding-bottom: 54px;
  }
}

@media (min-width: 1040px) {
  .page-faq .faq-sec__body--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
  }

  .page-faq .faq-figure {
    margin-top: 2px;
  }
}

@media (min-width: 1200px) {
  .page-faq .faq-hero__title {
    max-width: 18ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .expand__btn,
  .page-faq .expand__icon,
  .page-faq .expand__icon::before,
  .page-faq .expand__icon::after,
  .page-faq .faq-jump .chip,
  .page-faq .faq-sec__toggle {
    transition: none;
  }
}
<<<END>>>

等一下，我输出的时候不能带 <<<END>>>。让我修掉。输出应当以 PAGE_CSS 内容结束。其实指令里说每个标记只出现一次，所以我就用  和 。不需要 END 标记。

让我重新正确地输出。另外我意识到我应该再检查一下 `.page-faq .faq-list--single` 在移动端——它本来就是 1fr，没问题。

还有 `.faq-sec__body--aside` 里有一个 `.faq-list--single`，它在 720px 及以上会变成单列。可以。

再验证一下所有锚点 id 都存在：sec-index、sec-schedule、sec-panel、sec-favorites、sec-data、sec-mobile。对。

aria-controls 的 id：q-index-1..5、q-sch-1..6、q-panel-1..6、q-fav-1..5、q-data-1..5、q-mob-1..5。全都存在。

好。按正确的格式重新输出。
<main id="main-content" class="page-faq">

  <section class="faq-hero">
    <div class="wrap">
      <nav class="crumbs" aria-label="面包屑">
        <a class="crumbs__item" href="/">首页</a>
        <span class="crumbs__item" aria-current="page">常见问答</span>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__main">
          <p class="faq-hero__kicker">使用支持</p>
          <h1 class="faq-hero__title">用起来卡在哪一步，这里直接给做法</h1>
          <p class="lead faq-hero__lead">版本号怎么看、赛程表怎么筛、面板里那条对照条代表什么、收藏的标记为什么不见了——BOB体育入口 把最常被问到的问题按场景归好类，每个答案都能直接照着操作。找到问题，点开，一分钟内通常就能解决。</p>
        </div>

        <aside class="faq-hero__panel" aria-label="站点运行状态">
          <p class="faq-hero__ver">
            <span class="faq-hero__ver-label">当前索引版本</span>
            <span class="faq-hero__ver-num">v48</span>
          </p>
          <dl class="faq-hero__meta">
            <div>
              <dt>赛程刷新批次</dt>
              <dd>09:30 / 21:30</dd>
            </div>
            <div>
              <dt>赛程调整补录</dt>
              <dd>15 分钟内</dd>
            </div>
            <div>
              <dt>客服服务时段</dt>
              <dd>工作日 9:00–18:00</dd>
            </div>
          </dl>
        </aside>
      </div>

      <nav class="faq-jump" aria-label="问答分组快速跳转">
        <a class="chip" href="#sec-index">01 索引与导航</a>
        <a class="chip" href="#sec-schedule">02 赛程对照</a>
        <a class="chip" href="#sec-panel">03 面板与榜单</a>
        <a class="chip" href="#sec-favorites">04 收藏区</a>
        <a class="chip" href="#sec-data">05 数据与反馈</a>
        <a class="chip" href="#sec-mobile">06 移动端与其他</a>
      </nav>
    </div>
  </section>

  <div class="wrap">

    <section class="faq-sec" id="sec-index" aria-labelledby="sec-index-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">01</span>
        <h2 class="faq-sec__title" id="sec-index-title">索引与导航</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-sec__body faq-sec__body--aside">
        <div class="faq-list faq-list--single">

          <article class="faq-item expand">
            <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-index-1">
              <span class="faq-item__q">页面顶部那个版本号是做什么用的？</span>
              <span class="expand__icon" aria-hidden="true"></span>
            </button>
            <div class="expand__panel" id="q-index-1" data-expand-panel>
              <div class="expand__body">
                <p>那是索引页的迭代编号。从上线到现在，索引页一共重排过 48 次，数字越大代表结构越新。最新一版把赛程按联赛聚成整块，找赛程、找榜单都比之前少走几步。</p>
                <p class="mono">版本号显示在悬浮导航的品牌标识旁，首页首屏右侧也会同步标出。</p>
              </div>
            </div>
          </article>

          <article class="faq-item expand">
            <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-index-2">
              <span class="faq-item__q">左侧那条窄竖栏是什么，怎么用？</span>
              <span class="expand__icon" aria-hidden="true"></span>
            </button>
            <div class="expand__panel" id="q-index-2" data-expand-panel>
              <div class="expand__body">
                <p>那是索引轨道。桌面端固定在屏幕左侧，随页面滚动标出你正读到哪一章；点任意一条，页面会平滑跳到对应位置。它只出现在结构较长的页面上，短页面不显示。</p>
                <p class="mono">窗口宽度小于 1120px 时自动收起，改为底部胶囊条。</p>
              </div>
            </div>
          </article>

          <article class="faq-item expand">
            <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-index-3">
              <span class="faq-item__q">赛程、面板、榜单分别在哪个栏目里？</span>
              <span class="expand__icon" aria-hidden="true"></span>
            </button>
            <div class="expand__panel" id="q-index-3" data-expand-panel>
              <div class="expand__body">
                <p>赛程对照、升级版面面板和射手榜都在<a href="/tools/">工具中心</a>；赛后复盘、观众回访词与赛季专题在<a href="/reports/">观察报告</a>；团队背景与更新节奏见<a href="/team/">品牌与团队</a>。六个主入口在导航胶囊里从左到右依次排开。</p>
              </div>
            </div>
          </article>

          <article class="faq-item expand">
            <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-index-4">
              <span class="faq-item__q">以前熟悉的栏目位置，更新后会变吗？</span>
              <span class="expand__icon" aria-hidden="true"></span>
            </button>
            <div class="expand__panel" id="q-index-4" data-expand-panel>
              <div class="expand__body">
                <p>栏目名不会变。迭代调整的是同一栏目内部的排列和分组方式，六个主入口的位置始终保持一致。如果你觉得某个入口和记忆里不一样，先看顶部版本号，再点进去确认当前结构即可。</p>
              </div>
            </div>
          </article>

          <article class="faq-item expand">
            <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-index-5">
              <span class="faq-item__q">为什么有时候左侧轨道一个条目都不亮？</span>
              <span class="expand__icon" aria-hidden="true"></span>
            </button>
            <div class="expand__panel" id="q-index-5" data-expand-panel>
              <div class="expand__body">
                <p>页面刚打开、还没开始滚动时，轨道默认停在第一条。开始滚动后，当前阅读位置对应的条目会自动亮起。如果长时间没有高亮，多数是浏览器窗口太窄，轨道已经折叠成了底部胶囊条。</p>
              </div>
            </div>
          </article>

        </div>

        <figure class="figure faq-figure">
          <div class="figure__box ratio-4x3">
            <img class="figure__img" src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="深色界面抽象示意，左侧窄轨道与右侧内容区块的几何图形排布">
          </div>
          <figcaption class="figure__cap">长页面里，左侧窄栏标出章节位置；窄屏下它会移动到屏幕底部。</figcaption>
        </figure>
      </div>
    </section>

    <section class="faq-sec" id="sec-schedule" aria-labelledby="sec-schedule-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">02</span>
        <h2 class="faq-sec__title" id="sec-schedule-title">赛程对照</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-list">

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-1">
            <span class="faq-item__q">只想看一个联赛的赛程，怎么操作？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-1" data-expand-panel>
            <div class="expand__body">
              <p>在<a href="/tools/">工具中心</a>的赛程栏目对照里，先用联赛轴切到一个具体联赛，再用日期轴挑出想看的比赛日。两轴都选好之后，列表只留下符合条件的场次。选中态是荧光青实底，一眼能看出当前筛的是什么。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-2">
            <span class="faq-item__q">同一天多个联赛都有比赛，怎么并排比对？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-2" data-expand-panel>
            <div class="expand__body">
              <p>把联赛轴切到“全部”，日期轴定在同一天，列表会按开赛先后把当天跨联赛的场次排开。你可以在同一条视线上比较不同联赛的开球时间，不用来回切换页面。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-3">
            <span class="faq-item__q">筛选条件点乱了，怎么回到最初的样子？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-3" data-expand-panel>
            <div class="expand__body">
              <p>日期轴点回默认那一天，联赛轴切回“全部”，列表就恢复完整排布。如果只是临时想换个联赛看，直接点新的联赛就行，日期选择会保留，不用从头再选一次。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-4">
            <span class="faq-item__q">筛完之后有几场球不见了，是漏了吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-4" data-expand-panel>
            <div class="expand__body">
              <p>多半是日期轴还停在别的比赛日。把它切回你真正想看的那天，场次就会回来。另一个常见原因是联赛轴收得太窄，切到“全部”即可看到当日所有条目。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-5">
            <span class="faq-item__q">能不能一次把一整轮看完？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-5" data-expand-panel>
            <div class="expand__body">
              <p>可以。日期轴切到整轮范围，联赛轴选定该联赛，列表就按轮次完整展开。整轮视图里的场次仍按开赛时间排序，方便你提前安排观看顺序。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-sch-6">
            <span class="faq-item__q">赛程条目上的时间是按哪个时区标的？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-sch-6" data-expand-panel>
            <div class="expand__body">
              <p>统一按北京时间标注。海外联赛的本地开球时间会换算后再展示，同一条目在不同设备上看到的时间一致，不用自己再做换算。</p>
            </div>
          </div>
        </article>

      </div>
    </section>

    <section class="faq-sec" id="sec-panel" aria-labelledby="sec-panel-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">03</span>
        <h2 class="faq-sec__title" id="sec-panel-title">面板与榜单</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-list">

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-1">
            <span class="faq-item__q">面板里的控球率该怎么读？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-1" data-expand-panel>
            <div class="expand__body">
              <p>控球率反映一场比赛里某队掌握球权的时间占比，以百分比呈现，两队相加约为百分之百。建议不要只盯这一个数字，配合射门次数和射正一起看，才能判断控球有没有真正转化成机会。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-2">
            <span class="faq-item__q">主客场表现是用什么方式呈现的？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-2" data-expand-panel>
            <div class="expand__body">
              <p>升级版面面板把同一支球队的主场与客场数据分成左右两条对照条，长度按数值比例绘制，长度差一眼可见。主客场差异越大的球队，两条对照条的长度差距就越明显。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-3">
            <span class="faq-item__q">面板里一共能查到多少项指标？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-3" data-expand-panel>
            <div class="expand__body">
              <p>升级版面面板共收录 60 余项比赛指标字段，除控球率与主客场表现外，还包括射正、传球成功率与定位球数据。默认只展示最常看的那几项，需要更多时展开完整指标区即可。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-4">
            <span class="faq-item__q">射手榜默认显示多少人？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-4" data-expand-panel>
            <div class="expand__body">
              <p>默认展示前 30 名，按进球数从高到低排列；进球相同时，依次比较助攻数与出场次数。排名和出场数据都用等宽数字呈现，纵向比对时不会看错位。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-5">
            <span class="faq-item__q">怎么看到 30 名之后的球员？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-5" data-expand-panel>
            <div class="expand__body">
              <p>在榜单底部点“查看完整名单”展开，就能看到 30 名之后的条目。展开状态下仍可继续用筛选条件收窄范围，想回到默认视图点收起即可。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-panel-6">
            <span class="faq-item__q">国内BOB射手榜能按哪些条件筛？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-panel-6" data-expand-panel>
            <div class="expand__body">
              <p>支持按联赛、球员位置与出场次数筛选，三个条件可以叠加。比如限定某一个联赛、只看中场球员、出场不少于十次。当前生效的条件会显示在顶部状态条上，随时能确认自己看的是哪一组。</p>
            </div>
          </div>
        </article>

      </div>
    </section>

    <section class="faq-sec" id="sec-favorites" aria-labelledby="sec-favorites-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">04</span>
        <h2 class="faq-sec__title" id="sec-favorites-title">收藏区</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-list">

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-fav-1">
            <span class="faq-item__q">收藏的标记存在哪里？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-fav-1" data-expand-panel>
            <div class="expand__body">
              <p>保存在你当前这台设备的浏览器本地。收藏不需要登录，下次用同一个浏览器打开本站，标记还在原处。也正因为如此，换一台设备是不会带过去的。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-fav-2">
            <span class="faq-item__q">换了手机或电脑，之前的标记还在吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-fav-2" data-expand-panel>
            <div class="expand__body">
              <p>新的设备上不会自动出现。如果两台设备都要长期关注同一批内容，各自收藏一次就行。想在新设备上快速找回，可以先进<a href="/tools/">工具中心</a>，用同样的联赛与日期筛一遍，再重新标记。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-fav-3">
            <span class="faq-item__q">清完浏览器数据之后，标记为什么消失了？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-fav-3" data-expand-panel>
            <div class="expand__body">
              <p>清理浏览器数据时，保存在本地的标记会一并被清除，我们这边无法帮你恢复。如果你习惯定期清缓存，建议先把重要的赛程或榜单截图存下来，再把标记重建一次。相关内容也可以看<a href="/data-privacy/">数据与隐私</a>里的说明。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-fav-4">
            <span class="faq-item__q">能一次收藏整份榜单吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-fav-4" data-expand-panel>
            <div class="expand__body">
              <p>收藏按条目标记，比如某一轮赛程、某位球员的榜单行。整份榜单更适合用截图分享带出去。两种方式各管一种场景：标记回来还能点开，截图方便直接发给朋友。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-fav-5">
            <span class="faq-item__q">收藏区入口在哪里？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-fav-5" data-expand-panel>
            <div class="expand__body">
              <p>在页面顶部悬浮导航的右端，图标旁标着收藏区。点进去能看到你标记过的赛程、面板与榜单条目，按收藏时间倒序排列，最近标的最先出现。</p>
            </div>
          </div>
        </article>

      </div>
    </section>

    <section class="faq-sec" id="sec-data" aria-labelledby="sec-data-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">05</span>
        <h2 class="faq-sec__title" id="sec-data-title">数据与反馈</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-list">

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-data-1">
            <span class="faq-item__q">赛程数据多久更新一次？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-data-1" data-expand-panel>
            <div class="expand__body">
              <p>每天有 09:30 与 21:30 两个刷新批次。批次之间如果出现赛程调整，会单独走补录流程，不必等到下一个批次才更新。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-data-2">
            <span class="faq-item__q">比赛改期或者打加时了，多久能同步过来？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-data-2" data-expand-panel>
            <div class="expand__body">
              <p>遇到加时、改期这类调整，会在 15 分钟内补录到对应条目。补录完成后，条目上的时间与状态会同步刷新，你收藏过的条目也会显示新信息。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-data-3">
            <span class="faq-item__q">发现某场数据对不上，怎么反馈？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-data-3" data-expand-panel>
            <div class="expand__body">
              <p>把出问题的页面、具体场次和正确信息一起发到客服邮箱，或者在工作日 9:00–18:00 拨打客服电话。附一张截图最省事，我们能直接定位到是哪个条目，核对起来更快。</p>
              <p class="mono">客服邮箱 support@bob-tiyuguanwang.com.cn｜客服电话 400-6582-1292</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-data-4">
            <span class="faq-item__q">提交之后大概多久有回应？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-data-4" data-expand-panel>
            <div class="expand__body">
              <p>工作时段内提交的问题，当天会收到回复。涉及赛程改期的核对，通常在下一次刷新批次前后给出确认结果。更详细的反馈路径可以看<a href="/contact-us/">联系我们</a>。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-data-5">
            <span class="faq-item__q">数据会不会有出错的时候？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-data-5" data-expand-panel>
            <div class="expand__body">
              <p>每场比赛条目发布前都经过两道人工核对，但赛程临时调整的密集期仍可能出现遗漏。发现问题直接反馈就好，核对属实后我们会尽快更新对应条目。</p>
              <p class="mono">内容团队共 18 人，其中数据校对 6 人。</p>
            </div>
          </div>
        </article>

      </div>

      <figure class="figure faq-figure faq-figure--wide">
        <div class="figure__box ratio-7x3">
          <img class="figure__img" src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="模糊的表格截图轮廓被框选标记，抽象示意数据核对场景" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">截图里圈出有疑问的那一行，连同页面链接一起发过来，定位最快。</figcaption>
      </figure>
    </section>

    <section class="faq-sec" id="sec-mobile" aria-labelledby="sec-mobile-title">
      <div class="faq-sec__head" data-expand-group>
        <span class="faq-sec__num">06</span>
        <h2 class="faq-sec__title" id="sec-mobile-title">移动端与其他</h2>
        <button class="faq-sec__toggle" type="button" data-expand-all data-expand-all-label="展开全部" aria-expanded="false">展开全部</button>
      </div>

      <div class="faq-list">

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-mob-1">
            <span class="faq-item__q">手机上左侧的索引轨道去哪了？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-mob-1" data-expand-panel>
            <div class="expand__body">
              <p>小屏上它会折叠成底部的胶囊条，随滚动高亮当前章节，点一下就能跳过去。作用和桌面端的左侧轨道一样，只是换了个位置，不会挤占正文宽度。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-mob-2">
            <span class="faq-item__q">手机端能用的功能和电脑端一样吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-mob-2" data-expand-panel>
            <div class="expand__body">
              <p>赛程对照、升级版面面板、射手榜和收藏区在手机上都能正常使用，切换方式针对触屏做了调整。手机端访客大约占六成，主要按钮都放在拇指容易够到的区域。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-mob-3">
            <span class="faq-item__q">赛程能导出到自己的手机日历里吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-mob-3" data-expand-panel>
            <div class="expand__body">
              <p>可以。先在赛程对照里筛好联赛与日期，再使用赛程日历导出，导出的就是你当前看到的那批场次，导入手机日历后会按时区正确显示开球时间。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-mob-4">
            <span class="faq-item__q">榜单想发给别人，怎么弄最快？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-mob-4" data-expand-panel>
            <div class="expand__body">
              <p>用榜单截图分享。打开射手榜或升级版面面板，切到你要的那一屏，截图后直接发送。截图上的排名与数值，与你当前筛选后的结果完全一致。</p>
            </div>
          </div>
        </article>

        <article class="faq-item expand">
          <button class="expand__btn" type="button" data-expand-toggle aria-expanded="false" aria-controls="q-mob-5">
            <span class="faq-item__q">在手机上提交问题方便吗？</span>
            <span class="expand__icon" aria-hidden="true"></span>
          </button>
          <div class="expand__panel" id="q-mob-5" data-expand-panel>
            <div class="expand__body">
              <p>方便。把截图和页面链接一起发到客服邮箱就行，不需要在手机上填写长表单。工作日 9:00–18:00 提交的内容当天会有回复。</p>
            </div>
          </div>
        </article>

      </div>
    </section>

    <section class="faq-cta">
      <div class="faq-cta__box">
        <div class="faq-cta__text-col">
          <h2 class="faq-cta__title">翻到这里还没解决？直接问就行</h2>
          <p class="faq-cta__text">把页面、操作步骤和截图一起发过来，数据问题、栏目用法、内容与数据合作走同一个入口，工作日 9:00–18:00 有人回。</p>
        </div>
        <a class="btn btn--gold faq-cta__btn" href="/contact-us/">联系客服</a>
      </div>
    </section>

  </div>
</main>

.page-faq {
  --faq-ring: rgba(47, 107, 94, 0.6);
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  padding: calc(var(--hdr-h, 66px) + 32px) 0 84px;
  overflow-x: hidden;
}

.page-faq *,
.page-faq *::before,
.page-faq *::after {
  box-sizing: border-box;
}

.page-faq h1,
.page-faq h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-faq p {
  margin: 0;
}

.page-faq a {
  color: var(--cy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-faq a:hover,
.page-faq a:focus-visible {
  color: var(--cy-soft);
}

.page-faq .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin-bottom: 26px;
}

.page-faq .crumbs__item {
  color: var(--mist);
  text-decoration: none;
}

.page-faq .crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.page-faq .crumbs__item[aria-current="page"] {
  color: var(--cy);
}

.page-faq .faq-hero {
  position: relative;
  padding-bottom: 42px;
  background-image:
    radial-gradient(115% 78% at 92% -14%, rgba(56, 242, 200, 0.17), transparent 62%),
    radial-gradient(85% 62% at -8% 4%, rgba(47, 107, 94, 0.45), transparent 68%);
  border-bottom: 2px solid var(--line);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 28px;
}

.page-faq .faq-hero__kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: 14px;
}

.page-faq .faq-hero__title {
  font-size: clamp(34px, 7.2vw, 72px);
  font-weight: 800;
  line-height: 0.98;
  color: var(--paper);
  max-width: 16ch;
  margin-bottom: 20px;
}

.page-faq .faq-hero__lead {
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.86);
  max-width: 54ch;
}

.page-faq .faq-hero__panel {
  border: 2px solid var(--line);
  background: rgba(18, 67, 58, 0.72);
  box-shadow: var(--shadow-hard);
  padding: 18px 18px 16px;
  display: grid;
  gap: 14px;
  align-self: start;
}

.page-faq .faq-hero__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.page-faq .faq-hero__ver-label {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-faq .faq-hero__ver-num {
  font-family: var(--font-mono);
  font-size: clamp(38px, 8vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.03em;
}

.page-faq .faq-hero__meta {
  margin: 0;
  display: grid;
  gap: 8px;
}

.page-faq .faq-hero__meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--faq-ring);
}

.page-faq .faq-hero__meta dt {
  font-size: 13px;
  color: var(--mist);
}

.page-faq .faq-hero__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
}

.page-faq .faq-jump {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 22px 0 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-jump .chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--line);
  background: rgba(28, 35, 32, 0.62);
  color: var(--ink-text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-faq .faq-jump .chip:hover,
.page-faq .faq-jump .chip:focus-visible {
  border-color: var(--cy);
  color: var(--cy-soft);
  background: rgba(56, 242, 200, 0.12);
}

.page-faq .faq-sec {
  padding: 52px 0 16px;
  border-top: 2px solid var(--faq-ring);
  scroll-margin-top: calc(var(--hdr-h, 66px) + 24px);
}

.page-faq .faq-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-left: 6px solid var(--cy);
  background: linear-gradient(90deg, rgba(56, 242, 200, 0.16), rgba(56, 242, 200, 0) 74%);
}

.page-faq .faq-sec__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cy);
}

.page-faq .faq-sec__title {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--paper);
  line-height: 1.15;
}

.page-faq .faq-sec__toggle {
  margin-left: auto;
  padding: 6px 12px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-faq .faq-sec__toggle:hover,
.page-faq .faq-sec__toggle:focus-visible {
  border-color: var(--cy);
  color: var(--cy);
  background: rgba(56, 242, 200, 0.1);
  outline: none;
}

.page-faq .faq-sec__toggle[aria-expanded="true"] {
  border-color: var(--cy);
  color: var(--cy);
  background: rgba(56, 242, 200, 0.14);
}

.page-faq .faq-list {
  display: grid;
  gap: 12px;
}

.page-faq .faq-item {
  border: 2px solid var(--line);
  background: rgba(28, 35, 32, 0.72);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-faq .faq-item:focus-within {
  border-color: var(--cy);
}

.page-faq .expand__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s var(--ease);
}

.page-faq .expand__btn:hover {
  color: var(--cy-soft);
}

.page-faq .expand__btn:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: -2px;
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .expand__icon {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 2px solid var(--mist);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-faq .expand__icon::before,
.page-faq .expand__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--mist);
  transform: translate(-50%, -50%);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-faq .expand__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.page-faq .expand__btn[aria-expanded="true"] {
  color: var(--cy-soft);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon {
  border-color: var(--cy);
  background: rgba(56, 242, 200, 0.16);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon::before,
.page-faq .expand__btn[aria-expanded="true"] .expand__icon::after {
  background: var(--cy);
}

.page-faq .expand__btn[aria-expanded="true"] .expand__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.page-faq .expand__panel {
  border-top: 2px solid var(--line);
}

.page-faq .expand__panel[hidden] {
  display: none;
}

.page-faq .expand__body {
  padding: 16px 18px 20px 22px;
  background: var(--char);
  border-left: 4px solid var(--cy);
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.9);
}

.page-faq .expand__body a {
  color: var(--cy);
  font-weight: 600;
}

.page-faq .expand__body .mono {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
  letter-spacing: 0.01em;
}

.page-faq .faq-figure {
  margin: 22px 0 0;
  border: 2px solid var(--line);
  background: rgba(18, 67, 58, 0.5);
  box-shadow: var(--shadow-hard);
}

.page-faq .figure__box {
  position: relative;
  overflow: hidden;
  background: var(--char);
}

.page-faq .figure__box.ratio-4x3 {
  aspect-ratio: 4 / 3;
}

.page-faq .figure__box.ratio-7x3 {
  aspect-ratio: 7 / 3;
}

.page-faq .figure__box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 43, 38, 0.36), rgba(11, 43, 38, 0.08));
}

.page-faq .figure__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-faq .figure__cap {
  padding: 12px 14px;
  border-top: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
}

.page-faq .faq-cta {
  padding: 60px 0 8px;
}

.page-faq .faq-cta__box {
  display: grid;
  gap: 22px;
  padding: 26px 22px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--gold);
  background: linear-gradient(120deg, rgba(18, 67, 58, 0.92), rgba(28, 35, 32, 0.92));
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-cta__title {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 10px;
}

.page-faq .faq-cta__text {
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(217, 213, 201, 0.86);
  max-width: 52ch;
}

.page-faq .faq-cta__btn {
  justify-self: start;
  align-self: center;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .page-faq {
    padding-bottom: 104px;
  }

  .page-faq .faq-jump {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .page-faq .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
  }

  .page-faq .faq-list--single {
    grid-template-columns: 1fr;
  }

  .page-faq .faq-cta__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 32px 30px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
    align-items: end;
    gap: 44px;
  }

  .page-faq .faq-hero {
    padding-bottom: 54px;
  }
}

@media (min-width: 1040px) {
  .page-faq .faq-sec__body--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
  }

  .page-faq .faq-figure {
    margin-top: 2px;
  }
}

@media (min-width: 1200px) {
  .page-faq .faq-hero__title {
    max-width: 18ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .expand__btn,
  .page-faq .expand__icon,
  .page-faq .expand__icon::before,
  .page-faq .expand__icon::after,
  .page-faq .faq-jump .chip,
  .page-faq .faq-sec__toggle {
    transition: none;
  }
}