.page-faq {
  --faq-line: 1px solid var(--moss);
  --faq-index-gap: clamp(10px, 1.6vw, 14px);
  --faq-block-pad: clamp(30px, 5vw, 60px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-faq .breadcrumbs {
  padding-top: clamp(14px, 2vw, 22px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 54px) 0 clamp(36px, 6vw, 76px);
  background:
    radial-gradient(circle at 88% 6%, rgba(52, 216, 255, 0.14), transparent 46%),
    radial-gradient(circle at 4% 94%, rgba(200, 255, 61, 0.1), transparent 44%),
    linear-gradient(168deg, var(--ink-2) 0 54%, var(--ink) 54% 100%);
  border-bottom: var(--faq-line);
}

.page-faq .faq-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-faq .faq-hero__lead h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 6.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  color: var(--paper);
}

.page-faq .faq-hero__intro {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--stone);
}

.page-faq .faq-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faq-index-gap);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-faq .faq-index__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: var(--faq-line);
  background: rgba(15, 42, 34, 0.6);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-index__no {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sand);
  transition: color 0.25s var(--ease);
}

.page-faq .faq-index__item:hover,
.page-faq .faq-index__item:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(200, 255, 61, 0.08);
  outline: none;
}

.page-faq .faq-index__item:hover .faq-index__no,
.page-faq .faq-index__item:focus-visible .faq-index__no {
  color: var(--lime);
}

.page-faq .faq-hero__stack {
  position: relative;
  padding-bottom: 18px;
}

.page-faq .faq-hero__media {
  margin: 0;
  border: var(--faq-line);
  background: var(--ink-2);
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.4deg);
  overflow: hidden;
}

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

.page-faq .faq-hero__badge {
  position: absolute;
  right: 6px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sand);
  color: var(--ink);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-hero__badge-num {
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.page-faq .faq-hero__badge-text {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* ---------- 分组 ---------- */
.page-faq .faq-body {
  padding-top: clamp(10px, 2vw, 20px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

.page-faq .faq-group {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  padding: var(--faq-block-pad) 0;
  border-bottom: var(--faq-line);
  scroll-margin-top: 24px;
}

.page-faq .faq-group:last-child {
  border-bottom: 0;
}

.page-faq .faq-group__head {
  align-self: start;
}

.page-faq .faq-group__no {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--sand);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 5px;
}

.page-faq .faq-group__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(21px, 3.2vw, 29px);
  line-height: 1.25;
  margin: 14px 0 0;
  color: var(--paper);
}

.page-faq .faq-group__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--stone);
  max-width: 30ch;
}

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

.page-faq .faq-group__foot {
  margin: 18px 0 0;
}

.page-faq .faq-group__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(52, 216, 255, 0.45);
  padding-bottom: 3px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-faq .faq-group__link::after {
  content: "→";
  font-family: var(--font-mono);
  transition: transform 0.24s var(--ease);
}

.page-faq .faq-group__link:hover,
.page-faq .faq-group__link:focus-visible {
  color: var(--lime);
  border-color: var(--lime);
  outline: none;
}

.page-faq .faq-group__link:hover::after,
.page-faq .faq-group__link:focus-visible::after {
  transform: translateX(4px);
}

/* ---------- 问答手风琴 ---------- */
.page-faq .faq-list {
  border-top: var(--faq-line);
}

.page-faq .faq-item {
  border-bottom: var(--faq-line);
  transition: background 0.3s var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(200, 255, 61, 0.07), transparent 62%);
}

.page-faq .faq-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 14px;
  padding: 18px 6px 18px 12px;
  cursor: pointer;
  list-style: none;
}

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

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

.page-faq .faq-item__no {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
}

.page-faq .faq-item__q {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--paper);
  transition: color 0.24s var(--ease);
}

.page-faq .faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
  transition: transform 0.28s var(--ease);
}

.page-faq .faq-item[open] summary::after {
  content: "−";
}

.page-faq .faq-item summary:hover .faq-item__q {
  color: var(--lime);
}

.page-faq .faq-item[open] .faq-item__no {
  color: var(--sand);
}

.page-faq .faq-answer {
  padding: 0 18px 20px 42px;
  max-width: 66ch;
}

.page-faq .faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pale);
}

/* ---------- 移动端示意图 ---------- */
.page-faq .faq-mobile-figure {
  margin: 22px 0 0;
  border: var(--faq-line);
  background: var(--ink-2);
  padding: 10px;
  max-width: 300px;
}

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

.page-faq .faq-mobile-figure .media__caption {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone);
}

/* ---------- 结尾 ---------- */
.page-faq .faq-outro {
  margin-top: clamp(10px, 2vw, 24px);
  padding: clamp(34px, 5vw, 68px) 0;
  background:
    linear-gradient(112deg, rgba(29, 59, 49, 0.9) 0%, rgba(8, 26, 21, 0.96) 62%),
    var(--ink-2);
  border-top: var(--faq-line);
}

.page-faq .faq-outro__inner {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-faq .faq-outro__text h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.25;
  margin: 12px 0 0;
  color: var(--paper);
}

.page-faq .faq-outro__text p {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--stone);
}

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

/* ---------- 中等宽度 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-answer {
    padding-left: 56px;
  }

  .page-faq .faq-mobile-figure {
    max-width: 340px;
  }
}

/* ---------- 桌面分栏 ---------- */
@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-faq .faq-group {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(26px, 4vw, 56px);
  }

  .page-faq .faq-group__note {
    max-width: 24ch;
  }

  .page-faq .faq-outro__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

@media (min-width: 1100px) {
  .page-faq .faq-group--mobile .faq-group__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(22px, 3vw, 40px);
    align-items: start;
  }

  .page-faq .faq-group--mobile .faq-mobile-figure {
    margin-top: 0;
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  .page-faq .faq-group {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-item__q,
  .page-faq .faq-item summary::after,
  .page-faq .faq-group__link,
  .page-faq .faq-index__item {
    transition: none;
  }

  .page-faq .faq-hero__media {
    transform: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

<main id="main-content" class="page-faq">
  <nav class="breadcrumbs" aria-label="面包屑">
    <div class="container">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a href="/">品牌首页</a></li>
        <li class="breadcrumbs__item" aria-current="page">答疑中心</li>
      </ol>
    </div>
  </nav>

  <section class="faq-hero">
    <div class="container faq-hero__inner">
      <div class="faq-hero__lead">
        <p class="eyebrow">答疑中心 · 高频问题速查</p>
        <h1>关于会员与数据，球迷最常问的几件事</h1>
        <p class="faq-hero__intro">刚开通会员、在苹果电脑上第一次打开，或者赛后想回看一场比赛的射门分布，最容易卡住的地方我们都在下面按主题排好了。盈嘉体育把这批高频疑问拆成五组，点开标题先看结论，条件接在后面。</p>

        <nav class="faq-index" aria-label="问题主题索引">
          <a class="faq-index__item" href="#membership">
            <span class="faq-index__no mono">01</span>
            <span class="faq-index__label">会员权益与苹果电脑端</span>
          </a>
          <a class="faq-index__item" href="#standings">
            <span class="faq-index__no mono">02</span>
            <span class="faq-index__label">积分榜与战报更新</span>
          </a>
          <a class="faq-index__item" href="#mobile">
            <span class="faq-index__no mono">03</span>
            <span class="faq-index__label">移动端入口与跨端</span>
          </a>
          <a class="faq-index__item" href="#metrics">
            <span class="faq-index__no mono">04</span>
            <span class="faq-index__label">复盘数据怎么看</span>
          </a>
          <a class="faq-index__item" href="#account">
            <span class="faq-index__no mono">05</span>
            <span class="faq-index__label">账号与咨询</span>
          </a>
        </nav>
      </div>

      <div class="faq-hero__stack">
        <figure class="faq-hero__media">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深墨绿底上的问答卡片堆叠与荧光编号示意">
        </figure>
        <div class="faq-hero__badge">
          <span class="faq-hero__badge-num mono">20</span>
          <span class="faq-hero__badge-text">个高频问题<br>分 5 组排列</span>
        </div>
      </div>
    </div>
  </section>

  <div class="container faq-body">

    <section class="faq-group" id="membership" data-reveal>
      <header class="faq-group__head">
        <span class="faq-group__no mono">01</span>
        <h2 class="faq-group__title">会员权益与苹果电脑端</h2>
        <p class="faq-group__note">权益范围、设备条件和到期提醒，是开通前后问得最多的三件事。</p>
      </header>
      <div class="faq-group__main">
        <div class="faq-list">
          <details class="faq-item" id="q-apple">
            <summary>
              <span class="faq-item__no mono">01</span>
              <span class="faq-item__q">在苹果电脑上怎么查看盈嘉体育的会员权益？</span>
            </summary>
            <div class="faq-answer">
              <p>先打开会员与功能页读中国区正式版说明，权益范围、设备条件和有效期都写在那里，读完再对照权益卡确认自己那一档。苹果电脑端支持 Safari 与 Chrome 的最新两个大版本，系统版本过旧会看不到部分数据卡片。</p>
            </div>
          </details>

          <details class="faq-item" id="q-tiers">
            <summary>
              <span class="faq-item__no mono">02</span>
              <span class="faq-item__q">三档会员差在哪里？</span>
            </summary>
            <div class="faq-answer">
              <p>看台、战术板、数据席三档按赛季开通，深度依次增加。看台覆盖每轮战报与基础统计，战术板加入关键传球和控球区间的详细视图，数据席再开放近 5 个赛季的历史复盘与积分榜变化。逐条权益在会员与功能页列得更细。</p>
            </div>
          </details>

          <details class="faq-item" id="q-expire">
            <summary>
              <span class="faq-item__no mono">03</span>
              <span class="faq-item__q">权益快到期了会有提醒吗？</span>
            </summary>
            <div class="faq-answer">
              <p>会员中心会在临近到期时给出提示，同时显示当前档位与续期入口。提醒跟着账号走，换一台设备登录同样能看到。</p>
            </div>
          </details>

          <details class="faq-item" id="q-devices">
            <summary>
              <span class="faq-item__no mono">04</span>
              <span class="faq-item__q">一个账号可以同时在几台设备上用？</span>
            </summary>
            <div class="faq-answer">
              <p>桌面端与移动端共用同一套账号体系，权益跨端同步。已登录的设备可以在会员中心的设备管理里查看，不常用的那一台直接退出即可。</p>
            </div>
          </details>
        </div>
        <p class="faq-group__foot"><a class="faq-group__link" href="/features/">看完整的会员权益与设备速查表</a></p>
      </div>
    </section>

    <section class="faq-group" id="standings" data-reveal data-reveal-delay="80">
      <header class="faq-group__head">
        <span class="faq-group__no mono">02</span>
        <h2 class="faq-group__title">积分榜与战报更新</h2>
        <p class="faq-group__note">什么时候更新、按什么顺序排、一屏能看到哪些字段。</p>
      </header>
      <div class="faq-group__main">
        <div class="faq-list">
          <details class="faq-item" id="q-standings-time">
            <summary>
              <span class="faq-item__no mono">01</span>
              <span class="faq-item__q">积分榜多久更新一次？</span>
            </summary>
            <div class="faq-answer">
              <p>每周一上午更新。更新完成后，首页摘要卡与战报列表会同步打上“周一上午”标签，看到标签就说明已经是最新一版。榜单覆盖积分、净胜球、近期战绩与主客场拆分。</p>
            </div>
          </details>

          <details class="faq-item" id="q-standings-switch">
            <summary>
              <span class="faq-item__no mono">02</span>
              <span class="faq-item__q">首页那张积分榜摘要卡能切换视角吗？</span>
            </summary>
            <div class="faq-answer">
              <p>可以切主客场，也可以切近期状态。切换只改变你在这一屏看到的内容，不影响榜单本身，刷新后回到默认视图。</p>
            </div>
          </details>

          <details class="faq-item" id="q-report-order">
            <summary>
              <span class="faq-item__no mono">03</span>
              <span class="faq-item__q">战报是按什么顺序排的？</span>
            </summary>
            <div class="faq-answer">
              <p>按完赛时间倒序，最近结束的排在最前。这样上下班路上先把刚踢完的几场刷完，不用一路往下翻找。</p>
            </div>
          </details>

          <details class="faq-item" id="q-report-inside">
            <summary>
              <span class="faq-item__no mono">04</span>
              <span class="faq-item__q">点进一场战报能看到什么？</span>
            </summary>
            <div class="faq-answer">
              <p>有完赛时间轴、首发阵容、射门分布与控球区间图。建议先顺着时间轴过一遍关键节点，再对着数据图看那几个时段发生了什么。</p>
            </div>
          </details>
        </div>
        <p class="faq-group__foot"><a class="faq-group__link" href="/reports/">翻战报与复盘列表</a></p>
      </div>
    </section>

    <section class="faq-group faq-group--mobile" id="mobile" data-reveal data-reveal-delay="80">
      <header class="faq-group__head">
        <span class="faq-group__no mono">03</span>
        <h2 class="faq-group__title">移动端入口与跨端</h2>
        <p class="faq-group__note">手机上从哪进、换设备要不要重开、看惯了的视图能不能带走。</p>
      </header>
      <div class="faq-group__main">
        <div class="faq-list">
          <details class="faq-item" id="q-mobile-entry">
            <summary>
              <span class="faq-item__no mono">01</span>
              <span class="faq-item__q">手机上从哪里进入？</span>
            </summary>
            <div class="faq-answer">
              <p>入口固定在页面底部第二栏，往下滚动时一直可见，不用回到顶部再找一遍。文案是一根短条，位置固定，习惯之后基本靠手指记忆就能点到。</p>
            </div>
          </details>

          <details class="faq-item" id="q-cross-device">
            <summary>
              <span class="faq-item__no mono">02</span>
              <span class="faq-item__q">手机上看到的内容和电脑上一样吗？</span>
            </summary>
            <div class="faq-answer">
              <p>权益和阅读偏好跨端同步，内容一致。移动端改用单列排版，横向时间轴改成左右滑动，其余数据字段保持同一套。</p>
            </div>
          </details>

          <details class="faq-item" id="q-preference">
            <summary>
              <span class="faq-item__no mono">03</span>
              <span class="faq-item__q">能设定默认联赛和数据视图密度吗？</span>
            </summary>
            <div class="faq-answer">
              <p>可以，在会员中心的阅读偏好里设置。设完之后两个端都按这个偏好展示，不用每次重新选一遍。</p>
            </div>
          </details>

          <details class="faq-item" id="q-new-phone">
            <summary>
              <span class="faq-item__no mono">04</span>
              <span class="faq-item__q">换新手机还需要重新开通会员吗？</span>
            </summary>
            <div class="faq-answer">
              <p>不需要。会员权益跟着账号而不是设备，用原账号登录就能继续用。旧设备建议在设备管理里退出，避免占用登录位。</p>
            </div>
          </details>
        </div>
        <figure class="faq-mobile-figure">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="移动端界面底部第二栏入口高亮的抽象示意" loading="lazy" decoding="async">
          <figcaption class="media__caption">底部第二栏入口在滚动过程中保持可见</figcaption>
        </figure>
      </div>
    </section>

    <section class="faq-group" id="metrics" data-reveal data-reveal-delay="80">
      <header class="faq-group__head">
        <span class="faq-group__no mono">04</span>
        <h2 class="faq-group__title">复盘数据怎么看</h2>
        <p class="faq-group__note">射门分布、控球区间和关键传球，是赛后回看时最常被追问的几项。</p>
      </header>
      <div class="faq-group__main">
        <div class="faq-list">
          <details class="faq-item" id="q-shots">
            <summary>
              <span class="faq-item__no mono">01</span>
              <span class="faq-item__q">射门统计具体能看出什么？</span>
            </summary>
            <div class="faq-answer">
              <p>射门分布把每一次起脚的位置和结果标在球场图上，配合同屏的射正次数，能判断一支队是射得多还是射得准。看的时候建议把射门点和进球位置对照着看。</p>
            </div>
          </details>

          <details class="faq-item" id="q-possession">
            <summary>
              <span class="faq-item__no mono">02</span>
              <span class="faq-item__q">控球区间是什么意思？</span>
            </summary>
            <div class="faq-answer">
              <p>把整场切分为若干时段，看每一段里双方控球比例的变化。换人或进球前后那几分钟的走向，往往在区间折线上最明显。</p>
            </div>
          </details>

          <details class="faq-item" id="q-keypass">
            <summary>
              <span class="faq-item__no mono">03</span>
              <span class="faq-item__q">关键传球是怎么划出来的？</span>
            </summary>
            <div class="faq-answer">
              <p>指直接形成射门的那一脚传球，标注传球者与接球点。它和角球、犯规等数据放在同一屏，横向比较两场比赛时更方便。</p>
            </div>
          </details>

          <details class="faq-item" id="q-compare">
            <summary>
              <span class="faq-item__no mono">04</span>
              <span class="faq-item__q">能把两场比赛放在一起对比吗？</span>
            </summary>
            <div class="faq-answer">
              <p>可以。复盘页支持收藏比赛、对比两场的数据，并把你的判断写成个人复盘笔记。笔记随账号保存，下次打开还在原处。</p>
            </div>
          </details>
        </div>
        <p class="faq-group__foot"><a class="faq-group__link" href="/reports/">去复盘页试试数据对比</a></p>
      </div>
    </section>

    <section class="faq-group" id="account" data-reveal data-reveal-delay="80">
      <header class="faq-group__head">
        <span class="faq-group__no mono">05</span>
        <h2 class="faq-group__title">账号与咨询</h2>
        <p class="faq-group__note">什么时候能收到回复、什么事该找谁、写邮件时带哪些信息更省事。</p>
      </header>
      <div class="faq-group__main">
        <div class="faq-list">
          <details class="faq-item" id="q-reply">
            <summary>
              <span class="faq-item__no mono">01</span>
              <span class="faq-item__q">发邮件多久会有回复？</span>
            </summary>
            <div class="faq-answer">
              <p>客服邮箱在工作日 9:00 至 18:00 内回复。会员权益和苹果电脑端的问题，先把中国区正式版说明看一遍再发信，通常能省掉一轮来回。</p>
            </div>
          </details>

          <details class="faq-item" id="q-coop">
            <summary>
              <span class="faq-item__no mono">02</span>
              <span class="faq-item__q">内容合作找哪个渠道？</span>
            </summary>
            <div class="faq-answer">
              <p>走咨询服务页留下的联系方式，说明合作方向、覆盖范围和大致时间安排即可。信息够具体，我们会直接转到对应的内容或数据团队跟进。</p>
            </div>
          </details>

          <details class="faq-item" id="q-field-ask">
            <summary>
              <span class="faq-item__no mono">03</span>
              <span class="faq-item__q">对某个数据字段有疑问怎么问？</span>
            </summary>
            <div class="faq-answer">
              <p>把具体比赛和字段名一起写进邮件，回复会附上这个字段在页面上的查看路径。如果只是想弄明白含义，先翻上一组“复盘数据怎么看”通常就有答案。</p>
            </div>
          </details>

          <details class="faq-item" id="q-terms">
            <summary>
              <span class="faq-item__no mono">04</span>
              <span class="faq-item__q">会员权益的使用条件在哪里确认？</span>
            </summary>
            <div class="faq-answer">
              <p>使用说明页写明了内容使用范围与权益使用条件，中国区正式版说明则按赛季列出权益规则。两处对照着看，开通前就能把能做什么、什么时候生效弄明白。</p>
            </div>
          </details>
        </div>
        <p class="faq-group__foot"><a class="faq-group__link" href="/disclaimer/">查使用说明</a></p>
      </div>
    </section>
  </div>

  <section class="faq-outro">
    <div class="container faq-outro__inner">
      <div class="faq-outro__text">
        <p class="eyebrow">还没解决</p>
        <h2>问题没在上面找到，直接问我们</h2>
        <p>把场景、设备和你想确认的那一步写清楚，盈嘉体育的内容与会员支持团队会在工作日按顺序回复。会员和苹果电脑端相关的询问，附上你已经看过的说明页面会更快。</p>
      </div>
      <div class="faq-outro__actions">
        <a class="btn btn--lime" href="/consult/">联系咨询</a>
        <a class="btn btn--ghost" href="/features/">会员与功能</a>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-line: 1px solid var(--moss);
  --faq-index-gap: clamp(10px, 1.6vw, 14px);
  --faq-block-pad: clamp(30px, 5vw, 60px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-faq .breadcrumbs {
  padding-top: clamp(14px, 2vw, 22px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 54px) 0 clamp(36px, 6vw, 76px);
  background:
    radial-gradient(circle at 88% 6%, rgba(52, 216, 255, 0.14), transparent 46%),
    radial-gradient(circle at 4% 94%, rgba(200, 255, 61, 0.1), transparent 44%),
    linear-gradient(168deg, var(--ink-2) 0 54%, var(--ink) 54% 100%);
  border-bottom: var(--faq-line);
}

.page-faq .faq-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-faq .faq-hero__lead h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 6.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  color: var(--paper);
}

.page-faq .faq-hero__intro {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--stone);
}

.page-faq .faq-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faq-index-gap);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-faq .faq-index__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: var(--faq-line);
  background: rgba(15, 42, 34, 0.6);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-index__no {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sand);
  transition: color 0.25s var(--ease);
}

.page-faq .faq-index__item:hover,
.page-faq .faq-index__item:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(200, 255, 61, 0.08);
  outline: none;
}

.page-faq .faq-index__item:hover .faq-index__no,
.page-faq .faq-index__item:focus-visible .faq-index__no {
  color: var(--lime);
}

.page-faq .faq-hero__stack {
  position: relative;
  padding-bottom: 18px;
}

.page-faq .faq-hero__media {
  margin: 0;
  border: var(--faq-line);
  background: var(--ink-2);
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.4deg);
  overflow: hidden;
}

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

.page-faq .faq-hero__badge {
  position: absolute;
  right: 6px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sand);
  color: var(--ink);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-hero__badge-num {
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.page-faq .faq-hero__badge-text {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* ---------- 分组 ---------- */
.page-faq .faq-body {
  padding-top: clamp(10px, 2vw, 20px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

.page-faq .faq-group {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  padding: var(--faq-block-pad) 0;
  border-bottom: var(--faq-line);
  scroll-margin-top: 24px;
}

.page-faq .faq-group:last-child {
  border-bottom: 0;
}

.page-faq .faq-group__head {
  align-self: start;
}

.page-faq .faq-group__no {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--sand);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 5px;
}

.page-faq .faq-group__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(21px, 3.2vw, 29px);
  line-height: 1.25;
  margin: 14px 0 0;
  color: var(--paper);
}

.page-faq .faq-group__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--stone);
  max-width: 30ch;
}

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

.page-faq .faq-group__foot {
  margin: 18px 0 0;
}

.page-faq .faq-group__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(52, 216, 255, 0.45);
  padding-bottom: 3px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.page-faq .faq-group__link::after {
  content: "→";
  font-family: var(--font-mono);
  transition: transform 0.24s var(--ease);
}

.page-faq .faq-group__link:hover,
.page-faq .faq-group__link:focus-visible {
  color: var(--lime);
  border-color: var(--lime);
  outline: none;
}

.page-faq .faq-group__link:hover::after,
.page-faq .faq-group__link:focus-visible::after {
  transform: translateX(4px);
}

/* ---------- 问答手风琴 ---------- */
.page-faq .faq-list {
  border-top: var(--faq-line);
}

.page-faq .faq-item {
  border-bottom: var(--faq-line);
  transition: background 0.3s var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(200, 255, 61, 0.07), transparent 62%);
}

.page-faq .faq-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 14px;
  padding: 18px 6px 18px 12px;
  cursor: pointer;
  list-style: none;
}

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

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

.page-faq .faq-item__no {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
}

.page-faq .faq-item__q {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--paper);
  transition: color 0.24s var(--ease);
}

.page-faq .faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
  transition: transform 0.28s var(--ease);
}

.page-faq .faq-item[open] summary::after {
  content: "−";
}

.page-faq .faq-item summary:hover .faq-item__q {
  color: var(--lime);
}

.page-faq .faq-item[open] .faq-item__no {
  color: var(--sand);
}

.page-faq .faq-answer {
  padding: 0 18px 20px 42px;
  max-width: 66ch;
}

.page-faq .faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pale);
}

/* ---------- 移动端示意图 ---------- */
.page-faq .faq-mobile-figure {
  margin: 22px 0 0;
  border: var(--faq-line);
  background: var(--ink-2);
  padding: 10px;
  max-width: 300px;
}

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

.page-faq .faq-mobile-figure .media__caption {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone);
}

/* ---------- 结尾 ---------- */
.page-faq .faq-outro {
  margin-top: clamp(10px, 2vw, 24px);
  padding: clamp(34px, 5vw, 68px) 0;
  background:
    linear-gradient(112deg, rgba(29, 59, 49, 0.9) 0%, rgba(8, 26, 21, 0.96) 62%),
    var(--ink-2);
  border-top: var(--faq-line);
}

.page-faq .faq-outro__inner {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-faq .faq-outro__text h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.25;
  margin: 12px 0 0;
  color: var(--paper);
}

.page-faq .faq-outro__text p {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--stone);
}

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

/* ---------- 中等宽度 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-answer {
    padding-left: 56px;
  }

  .page-faq .faq-mobile-figure {
    max-width: 340px;
  }
}

/* ---------- 桌面分栏 ---------- */
@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-faq .faq-group {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(26px, 4vw, 56px);
  }

  .page-faq .faq-group__note {
    max-width: 24ch;
  }

  .page-faq .faq-outro__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

@media (min-width: 1100px) {
  .page-faq .faq-group--mobile .faq-group__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(22px, 3vw, 40px);
    align-items: start;
  }

  .page-faq .faq-group--mobile .faq-mobile-figure {
    margin-top: 0;
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  .page-faq .faq-group {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-item__q,
  .page-faq .faq-item summary::after,
  .page-faq .faq-group__link,
  .page-faq .faq-index__item {
    transition: none;
  }

  .page-faq .faq-hero__media {
    transform: none;
  }
}