.page-faq {
  --faq-accent: var(--gold);
  --faq-line: rgba(167, 178, 194, .16);
  --faq-panel: rgba(17, 31, 54, .55);
  position: relative;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(900px 520px at 84% -6%, rgba(216, 166, 74, .13), transparent 62%),
    radial-gradient(720px 440px at 2% 26%, rgba(79, 167, 154, .09), transparent 66%),
    var(--ink-900);
}

/* ---------- Hero ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: 92px 0 48px;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 166, 74, .35), transparent);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 36px;
  align-items: center;
  margin-top: 26px;
}

.page-faq .faq-hero__copy h1 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: .05em;
  font-weight: 800;
  color: var(--cream);
}

.page-faq .faq-hero__copy .lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-hero__visual {
  margin: 0;
  position: relative;
  border-radius: 6px 42px 6px 42px;
  overflow: hidden;
  border: 1px solid rgba(216, 166, 74, .28);
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .9);
}

.page-faq .faq-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(216, 166, 74, .16), transparent 46%, rgba(5, 10, 18, .55));
  pointer-events: none;
  z-index: 1;
}

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

/* ---------- Layout ---------- */
.page-faq .faq-body {
  padding: 40px 0 72px;
}

.page-faq .faq-layout {
  display: block;
}

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

/* ---------- Index ---------- */
.page-faq .faq-index {
  margin-bottom: 30px;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-size: .74rem;
  letter-spacing: .24em;
  color: var(--mist);
}

.page-faq .faq-index__nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.page-faq .faq-index__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--faq-line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(216, 166, 74, .08);
}

.page-faq .faq-index__num {
  font-family: var(--font-num);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--gold);
  opacity: .8;
}

/* ---------- Group ---------- */
.page-faq .faq-group {
  --faq-accent: var(--gold);
  position: relative;
  counter-reset: qa;
  padding-bottom: 26px;
  margin-bottom: 26px;
}

.page-faq .faq-group--gold { --faq-accent: var(--gold); }
.page-faq .faq-group--jade { --faq-accent: var(--jade); }
.page-faq .faq-group--cinnabar { --faq-accent: var(--cinnabar); }

.page-faq .faq-group__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0 18px 18px;
}

.page-faq .faq-group__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 20px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--faq-accent), transparent);
}

.page-faq .faq-group__head::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--faq-accent), transparent 72%);
  opacity: .5;
}

.page-faq .faq-group__num {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--faq-accent);
  opacity: .55;
  padding-top: 2px;
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cream);
}

.page-faq .faq-group__note {
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--mist);
}

/* ---------- Accordion ---------- */
.page-faq .qa {
  counter-increment: qa;
  border-top: 1px solid var(--faq-line);
  transition: background .3s var(--ease);
}

.page-faq .qa[open] {
  background: var(--faq-panel);
}

.page-faq .qa__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 12px 17px 16px;
  list-style: none;
  cursor: pointer;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--cream);
  transition: color .25s var(--ease);
}

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

.page-faq .qa__q:hover,
.page-faq .qa__q:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

.page-faq .qa__q::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

.page-faq .qa[open] .qa__q {
  color: var(--gold-bright);
}

.page-faq .qa[open] .qa__q::after {
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(243, 206, 123, .65);
}

.page-faq .qa__num {
  flex: 0 0 auto;
  min-width: 2.1ch;
  padding-top: 1px;
  font-family: var(--font-num);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--faq-accent);
  opacity: .7;
}

.page-faq .qa__num::before {
  content: counter(qa, decimal-leading-zero);
}

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

.page-faq .qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

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

.page-faq .qa__mark::before {
  left: 1px;
  right: 1px;
  top: 9px;
  height: 1.6px;
}

.page-faq .qa__mark::after {
  top: 1px;
  bottom: 1px;
  left: 9px;
  width: 1.6px;
}

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

.page-faq .qa[open] .qa__mark::before {
  background: var(--gold-bright);
}

.page-faq .qa__a {
  padding: 0 16px 20px 16px;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--mist);
}

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

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

.page-faq .qa__a em {
  font-style: normal;
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(216, 166, 74, .5);
  padding-bottom: 1px;
}

.page-faq .qa__next {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 2px;
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 206, 123, .38);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-faq .qa__next:hover,
.page-faq .qa__next:focus-visible {
  color: var(--cream);
  border-color: var(--cream);
}

/* ---------- Figure ---------- */
.page-faq .faq-figure {
  margin: 26px 0 4px;
  border: 1px solid var(--faq-line);
  border-radius: 4px 26px 4px 26px;
  overflow: hidden;
  background: var(--faq-panel);
}

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

.page-faq .faq-figure figcaption {
  padding: 12px 16px;
  font-size: .78rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--mist);
  border-top: 1px solid var(--faq-line);
}

/* ---------- Contact band ---------- */
.page-faq .faq-contact {
  position: relative;
  overflow: hidden;
  margin: 34px 0 30px;
  padding: 30px 20px 32px;
  border-radius: 4px 30px 4px 30px;
  border: 1px solid rgba(216, 166, 74, .26);
  background: linear-gradient(158deg, rgba(30, 51, 82, .9), rgba(10, 19, 36, .94));
}

.page-faq .faq-contact::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 166, 74, .24), transparent 70%);
  pointer-events: none;
}

.page-faq .faq-contact__title {
  position: relative;
  margin: 14px 0 0;
  font-size: 1.4rem;
  line-height: 1.35;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--cream);
}

.page-faq .faq-contact__text {
  position: relative;
  margin: 14px 0 0;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-faq .faq-contact__list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  margin: 22px 0;
}

.page-faq .faq-contact__list dt {
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--mist);
}

.page-faq .faq-contact__list dd {
  margin: 5px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--cream);
  word-break: break-word;
}

.page-faq .faq-contact__q {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--jade);
  border-radius: 0 14px 14px 0;
  background: rgba(5, 10, 18, .45);
}

.page-faq .faq-contact__q p {
  margin: 0 0 12px;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mist);
}

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

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

.page-faq .faq-contact .btn {
  position: relative;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .page-faq .faq-hero__copy .lead { font-size: 1.06rem; }
  .page-faq .faq-group__title { font-size: 1.5rem; }
  .page-faq .qa__q { padding-left: 20px; font-size: 1rem; }
  .page-faq .qa__a { padding-left: 58px; padding-right: 22px; }
  .page-faq .faq-contact { padding: 34px 30px 36px; }
  .page-faq .faq-contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-faq .faq-contact__title { font-size: 1.6rem; }
}

@media (min-width: 960px) {
  .page-faq .faq-hero { padding: 132px 0 68px; }
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 56px;
  }
  .page-faq .faq-hero__copy h1 {
    font-size: clamp(2.6rem, 3.6vw, 3.5rem);
    letter-spacing: .06em;
  }
  .page-faq .faq-body { padding: 56px 0 96px; }
  .page-faq .faq-layout {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .page-faq .faq-index {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    margin-bottom: 0;
  }
  .page-faq .faq-index__nav {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--faq-line);
  }
  .page-faq .faq-index__link {
    border: 0;
    border-radius: 0;
    padding: 10px 0 10px 16px;
    font-size: .9rem;
    color: var(--mist);
    position: relative;
    white-space: normal;
  }
  .page-faq .faq-index__link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
    transition: background .25s var(--ease);
  }
  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible {
    background: transparent;
    color: var(--gold-bright);
  }
  .page-faq .faq-index__link:hover::before,
  .page-faq .faq-index__link:focus-visible::before {
    background: var(--gold);
  }
  .page-faq .faq-group { padding-bottom: 34px; margin-bottom: 34px; }
  .page-faq .faq-group__head { padding: 26px 0 20px 22px; }
  .page-faq .faq-group__head::after { left: 22px; }
  .page-faq .qa__q { padding: 19px 16px 19px 22px; }
  .page-faq .qa__num { font-size: 1.5rem; }
  .page-faq .qa__a { padding: 0 26px 22px 62px; }
  .page-faq .faq-contact { margin: 44px 0 36px; padding: 40px 38px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .qa__mark::before,
  .page-faq .qa__mark::after,
  .page-faq .faq-index__link,
  .page-faq .faq-index__link::before,
  .page-faq .qa__next {
    transition: none;
  }
}
<<<END>>>

等等，我不该加 `<<<END>>>` 的，标记只有两个。我重新输出，去掉它。

另外注意：我之前用了 `<<<END>>>` 这种标记——并不是要求的标记。必须删掉。

修正后重新输出。

另外，圆点索引里已经用了编号（01–06），没问题。

再检查一下：`faq-group__head` 的 `::after` 用了绝对定位，父元素设了 `position: relative`，没问题。

`qa__q` 的 `::after` 是金色竖线，父元素 `summary` 设了 `position: relative`，也没问题。

分组标题里的 `#05` 联系部分没有数字编号——索引里显示的是 05 联系与响应，而联系面板没有编号。小问题，但可以接受。其实可以加个标签“05”——这个展签是金色，没必要。

还有规则更新与版本那个分组的编号写的是 06——索引里也对得上。好。

输出最终结果。
<main id="main-content" class="page-faq">

  <section class="faq-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="当前位置">
        <a class="breadcrumb__item" href="/">首页</a>
        <span class="breadcrumb__item" aria-current="page">答疑中心</span>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="eyebrow">答疑中心 · 常见问题</p>
          <h1>遇到下载、对照与权益问题，万博在这里给您答案</h1>
          <p class="lead">
            装不上安卓版、移动端对照看不出差别、活动入口翻不到、老用户权益不确定在哪儿看——按主题找到对应答复，每条都先说结论，再告诉您下一步去哪一页继续看。
          </p>
          <div class="faq-hero__actions">
            <a class="btn btn--gold" href="/services/">查看平台目录</a>
            <a class="btn btn--ghost" href="/column/">去活动与规则专栏</a>
          </div>
        </div>

        <figure class="faq-hero__visual">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="深墨蓝背景上的抽象问号光斑与灯牌线条">
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-body" aria-label="常见问题解答">
    <div class="shell faq-layout">

      <aside class="faq-index">
        <p class="faq-index__title">按主题查看</p>
        <nav class="faq-index__nav" aria-label="答疑主题索引">
          <a class="faq-index__link" href="#download"><span class="faq-index__num">01</span>下载与安装</a>
          <a class="faq-index__link" href="#compare"><span class="faq-index__num">02</span>移动端对照与导出</a>
          <a class="faq-index__link" href="#activity"><span class="faq-index__num">03</span>活动查看与提醒</a>
          <a class="faq-index__link" href="#rights"><span class="faq-index__num">04</span>老用户权益栏目</a>
          <a class="faq-index__link" href="#contact"><span class="faq-index__num">05</span>联系与响应</a>
          <a class="faq-index__link" href="#version"><span class="faq-index__num">06</span>规则更新与版本</a>
        </nav>
      </aside>

      <div class="faq-content">

        <section class="faq-group faq-group--gold" id="download" data-reveal>
          <header class="faq-group__head">
            <span class="faq-group__num">01</span>
            <div>
              <h2 class="faq-group__title">下载与安装</h2>
              <p class="faq-group__note">版本号、包体积、系统要求，以及装不上时先查哪三处</p>
            </div>
          </header>

          <details class="qa" open>
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">当前安卓版是什么版本，安装包有多大？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>当前版本为 <em>3.8.2</em>，安装包约 38MB。版本号和体积都标在下载入口旁，安装前先对一眼，能省掉装错包的麻烦。装好之后如果看到新版本提示，说明又轮到一次小版本迭代了。</p>
              <a class="qa__next" href="/services/">看下载入口与版本说明</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">手机系统需要满足什么条件？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>支持 <em>Android 8.0 及以上</em>系统。低于这个版本，即使勉强装上，界面也可能错位、部分功能点不开。除了系统版本，还要给安装包留出解压和缓存的空间，别让存储卡在临界线上。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">安装失败了，先检查哪几处？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>按顺序看三项：存储剩余空间是否大于 38MB、系统版本是否达到 Android 8.0、安装来源权限有没有打开。三项都正常还是失败，把手机型号、系统版本和出错提示发到客服邮箱，定位起来会快很多。</p>
              <a class="qa__next" href="/find-us/">联系客服邮箱</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">装新版本前需要先卸载旧版本吗？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>一般不用。直接安装会覆盖旧版本，已有的对照记录通常保留下来。只有在旧版本启动不了或数据明显异常时，才建议卸载后重装；卸载前先把用得上的对照摘要导出保存，省得白做一遍。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">多久会有一次版本更新？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>安卓版保持 <em>每 4 周一次</em>小版本迭代，主要用于修正使用中碰到的问题、补充规则条目。涉及面较大的调整会提前在专栏里说明。更新提示出现时，建议连上 Wi-Fi 一次性完成，中途断掉容易装到一半。</p>
              <a class="qa__next" href="/column/">看版本发布动态</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">安装包从哪里获取更稳妥？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>统一入口在平台目录与下载栏目，页面上标了当前版本号和体积，方便您一边下载一边对照。从别处拿到的包看不出是哪个版本，出了问题也不好追查。下载完成后先核对版本号，再动手安装。</p>
              <a class="qa__next" href="/services/">前往平台目录与下载</a>
            </div>
          </details>
        </section>

        <section class="faq-group faq-group--jade" id="compare" data-reveal>
          <header class="faq-group__head">
            <span class="faq-group__num">02</span>
            <div>
              <h2 class="faq-group__title">移动端对照与导出</h2>
              <p class="faq-group__note">反馈线与导出线怎么分、版本标记怎么读、导出失败先动哪里</p>
            </div>
          </header>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">反馈线和导出线分别解决什么问题？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>两条线看的是同一组对照内容，用途不同。<em>反馈线</em>把移动端的实际表现回传，用来确认差异出在哪；<em>导出线</em>把当前结果整理成图片或文本清单，方便存档、发给同事。切换时留意两边的版本标记要一致。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">对照项旁的版本标记是什么意思？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>每个对照项都会保留版本标记，标出这一项依据的规则版本。两边标记对不上，说明对照基准已经变过，得按新版本重新看一遍。最近一次规则更新在 2024 年 6 月，那次给移动端对照补上了版本标记。</p>
              <a class="qa__next" href="/column/">查看规则更新摘要</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">对照结果一片空白，是什么原因？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>多数是筛选条件收得太窄，或者所选分类与当前终端不匹配。先把条件放宽一档再看；还是没有内容，确认移动端是不是 3.8.2，并检查网络是否稳定。仍然空白，把筛选条件和终端型号发邮件说明。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">导出一直失败怎么办？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>先确认列表里有内容、需要导出的条目已勾选。图片导出对存储空间要求更高，空间紧张时换成文本清单导出会稳一些。反复失败可以换个网络环境重试，或把导出方式和条目数量告诉客服。</p>
              <a class="qa__next" href="/find-us/">寻求客服协助</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">导出的文件能保存多久？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>导出的图片和文本清单存放在您自己指定的目录里，由您自行保管。规则按季度复核，内容会跟着调整，建议文件命名时带上导出当时的版本标记，日后回看就能分清是哪一期对照的结果。</p>
            </div>
          </details>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="移动端界面轮廓与青玉、鎏金双线切换示意">
            <figcaption>反馈线与导出线并列切换，每项对照都带版本标记</figcaption>
          </figure>
        </section>

        <section class="faq-group faq-group--cinnabar" id="activity" data-reveal>
          <header class="faq-group__head">
            <span class="faq-group__num">03</span>
            <div>
              <h2 class="faq-group__title">活动查看与提醒</h2>
              <p class="faq-group__note">从哪个入口进、怎么筛、灯牌提醒开还是关</p>
            </div>
          </header>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">活动内容从哪里进？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>集中在活动与规则专栏，分季节专题和版本专题两条线排列。安卓版里也能看，主题和网页端一致，只是排版更紧凑。从专栏进去后，可以直接按分类把当季条目缩到一屏之内。</p>
              <a class="qa__next" href="/column/">进入活动与规则专栏</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">怎么按分类和版本筛活动？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>专栏提供按分类、按版本、按权益类型三种筛选。选中后列表立即收窄，已选条件会留在页面上方，随时可以改。如果几个条件叠上去结果太少，逐项撤掉一两个再看，通常就能找回需要的条目。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">灯牌提醒开关有什么用？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>灯牌提醒专门标出新条目和规则有变化的栏目，打开后对应栏目会保持点亮，一眼就能看到。关掉也不影响正常浏览，只是不再突出显示。想回到未读状态重新过一遍，再打开开关就行。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">活动条目多久更新一批？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>专栏每季度更新 12 至 16 条条目，季节专题和版本专题交替上。与版本相关的条目，跟着每 4 周一次的迭代节奏出现。老用户权益的复核结果，也会以摘要形式在这里露面。</p>
              <a class="qa__next" href="/column/">看本季更新</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">往期活动还能翻到吗？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>可以。当季专题在期内完整展示，结束后入口会收拢到往期归类下，内容仍能回看。想长期留一份参考，先把要用的内容导出来，或在专栏里记下条目名称，之后按名称检索更省事。</p>
            </div>
          </details>
        </section>

        <section class="faq-group faq-group--gold" id="rights" data-reveal>
          <header class="faq-group__head">
            <span class="faq-group__num">04</span>
            <div>
              <h2 class="faq-group__title">老用户权益栏目</h2>
              <p class="faq-group__note">等级、权益对照与常见路径在哪里找</p>
            </div>
          </header>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">老用户权益在哪个栏目看？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>集中在品牌档案页的约平台栏目，分成等级说明、权益对照、常见路径和约平台入口说明四块。从首页或本页进入品牌档案即可，安卓版里也留了对应入口，两边讲的是同一套内容。</p>
              <a class="qa__next" href="/profile/">打开品牌档案</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">约平台栏目具体讲什么？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>讲清楚不同等级各对应哪些权益，以及从现在这一段走到下一段通常会经过哪些路径。等级说明和权益对照分开摆放，方便逐项比；常见路径部分整理了多数老用户会用到的查看顺序，照着走不容易漏项。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">权益说明多久复核一次？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>跟着规则库按季度复核，最近一次在 2024 年 6 月，那轮对移动端对照部分做了补充。复核完成后如有调整，会在活动与规则专栏出摘要，栏目里的文字同步更新，不必担心新旧说法并存。</p>
              <a class="qa__next" href="/column/">查看复核摘要</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">等级和权益对不上该怎么处理？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>先看是不是翻到了复核前留下的旧页面，旧页面不会自动刷新。确认过仍对不上，把等级名称和起疑的那条权益写进邮件发来，工作日有专人查阅，会回复处理进展。</p>
              <a class="qa__next" href="/find-us/">把情况发给我们</a>
            </div>
          </details>
        </section>

        <section class="faq-contact" id="contact" data-reveal>
          <p class="exhibit-tag exhibit-tag--gold">联系与响应</p>
          <h2 class="faq-contact__title">没翻到答案，直接找人说</h2>
          <p class="faq-contact__text">
            客服邮箱工作日 9:00-18:00 有专人查阅，栏目内容方面的反馈平均 2 个工作日内完成复核。电话留给紧急事务和合作对接；不是急事的话，写邮件说得更清楚，来回沟通也更从容。
          </p>

          <dl class="faq-contact__list">
            <div>
              <dt>客服邮箱</dt>
              <dd>service@platform-e-wanbo.com.cn</dd>
            </div>
            <div>
              <dt>联系电话</dt>
              <dd>18253695158</dd>
            </div>
            <div>
              <dt>联系地址</dt>
              <dd>河北省石家庄市长安区中山东路289号</dd>
            </div>
            <div>
              <dt>查阅时段</dt>
              <dd>工作日 9:00-18:00</dd>
            </div>
          </dl>

          <div class="faq-contact__q">
            <p><strong>写邮件时带什么信息更快？</strong>手机型号、系统版本、当前安卓版版本号，以及出错时的提示原文，这四项写全，基本一轮就能定位。</p>
            <p><strong>什么时候打电话更合适？</strong>需要即时确认的紧急事务，或者内容合作、技术对接、活动共建这类需要当面聊清的合作，直接拨电话更省时间。</p>
          </div>

          <a class="btn btn--gold" href="/find-us/">查看完整联络方式</a>
        </section>

        <section class="faq-group faq-group--jade" id="version" data-reveal>
          <header class="faq-group__head">
            <span class="faq-group__num">06</span>
            <div>
              <h2 class="faq-group__title">规则更新与版本</h2>
              <p class="faq-group__note">复核节奏、版本号位置与变更摘要怎么读</p>
            </div>
          </header>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">规则库多久复核一次？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>按季度复核，每季度末统一梳理一遍，同时检查栏目条目与移动端对照的版本标记是否对齐。最近一次规则库更新在 2024 年 6 月，主要补充了移动端对照的版本标记。规则说明经过栏目编辑、规则编辑、值班主编三级审校。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">在哪里能看到版本号和复核季度？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>每篇规则说明的开头都会标出版本号、复核季度和变更摘要。想确认某条活动对应哪版规则，去活动与规则专栏的条目页顶部，也能看到同样的标记，对照着看就不会把两期内容混在一起。</p>
              <a class="qa__next" href="/column/">前往活动与规则专栏</a>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">变更摘要里都写了什么？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>把这一轮调整过的条目按主题列出来，并注明改动的方向，看几眼就能判断和自己正在用的功能有没有关系。摘要按季度归档，往期的调整也能顺着专题翻回去，找起来不吃力。</p>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num" aria-hidden="true"></span>
              <span class="qa__text">规则更新后，之前的对照结果还能用吗？</span>
              <span class="qa__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa__a">
              <p>版本标记没变的对照项照常可用；标记变了的，需要按新版本重看一遍。导出文件在您手里，命名时带上当时的版本标记，遇到差异就能分清是规则调整了，还是终端表现不同，不用来回猜。</p>
            </div>
          </details>
        </section>

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

</main>

.page-faq {
  --faq-accent: var(--gold);
  --faq-line: rgba(167, 178, 194, .16);
  --faq-panel: rgba(17, 31, 54, .55);
  position: relative;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(900px 520px at 84% -6%, rgba(216, 166, 74, .13), transparent 62%),
    radial-gradient(720px 440px at 2% 26%, rgba(79, 167, 154, .09), transparent 66%),
    var(--ink-900);
}

/* ---------- Hero ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: 92px 0 48px;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 166, 74, .35), transparent);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 36px;
  align-items: center;
  margin-top: 26px;
}

.page-faq .faq-hero__copy h1 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: .05em;
  font-weight: 800;
  color: var(--cream);
}

.page-faq .faq-hero__copy .lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-hero__visual {
  margin: 0;
  position: relative;
  border-radius: 6px 42px 6px 42px;
  overflow: hidden;
  border: 1px solid rgba(216, 166, 74, .28);
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .9);
}

.page-faq .faq-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(216, 166, 74, .16), transparent 46%, rgba(5, 10, 18, .55));
  pointer-events: none;
  z-index: 1;
}

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

/* ---------- Layout ---------- */
.page-faq .faq-body {
  padding: 40px 0 72px;
}

.page-faq .faq-layout {
  display: block;
}

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

/* ---------- Index ---------- */
.page-faq .faq-index {
  margin-bottom: 30px;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-size: .74rem;
  letter-spacing: .24em;
  color: var(--mist);
}

.page-faq .faq-index__nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.page-faq .faq-index__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--faq-line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(216, 166, 74, .08);
}

.page-faq .faq-index__num {
  font-family: var(--font-num);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--gold);
  opacity: .8;
}

/* ---------- Group ---------- */
.page-faq .faq-group {
  --faq-accent: var(--gold);
  position: relative;
  counter-reset: qa;
  padding-bottom: 26px;
  margin-bottom: 26px;
}

.page-faq .faq-group--gold { --faq-accent: var(--gold); }
.page-faq .faq-group--jade { --faq-accent: var(--jade); }
.page-faq .faq-group--cinnabar { --faq-accent: var(--cinnabar); }

.page-faq .faq-group__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0 18px 18px;
}

.page-faq .faq-group__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 20px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--faq-accent), transparent);
}

.page-faq .faq-group__head::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--faq-accent), transparent 72%);
  opacity: .5;
}

.page-faq .faq-group__num {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--faq-accent);
  opacity: .55;
  padding-top: 2px;
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cream);
}

.page-faq .faq-group__note {
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--mist);
}

/* ---------- Accordion ---------- */
.page-faq .qa {
  counter-increment: qa;
  border-top: 1px solid var(--faq-line);
  transition: background .3s var(--ease);
}

.page-faq .qa[open] {
  background: var(--faq-panel);
}

.page-faq .qa__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 12px 17px 16px;
  list-style: none;
  cursor: pointer;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--cream);
  transition: color .25s var(--ease);
}

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

.page-faq .qa__q:hover,
.page-faq .qa__q:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

.page-faq .qa__q::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

.page-faq .qa[open] .qa__q {
  color: var(--gold-bright);
}

.page-faq .qa[open] .qa__q::after {
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(243, 206, 123, .65);
}

.page-faq .qa__num {
  flex: 0 0 auto;
  min-width: 2.1ch;
  padding-top: 1px;
  font-family: var(--font-num);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--faq-accent);
  opacity: .7;
}

.page-faq .qa__num::before {
  content: counter(qa, decimal-leading-zero);
}

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

.page-faq .qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

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

.page-faq .qa__mark::before {
  left: 1px;
  right: 1px;
  top: 9px;
  height: 1.6px;
}

.page-faq .qa__mark::after {
  top: 1px;
  bottom: 1px;
  left: 9px;
  width: 1.6px;
}

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

.page-faq .qa[open] .qa__mark::before {
  background: var(--gold-bright);
}

.page-faq .qa__a {
  padding: 0 16px 20px 16px;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--mist);
}

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

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

.page-faq .qa__a em {
  font-style: normal;
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(216, 166, 74, .5);
  padding-bottom: 1px;
}

.page-faq .qa__next {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 2px;
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 206, 123, .38);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-faq .qa__next:hover,
.page-faq .qa__next:focus-visible {
  color: var(--cream);
  border-color: var(--cream);
}

/* ---------- Figure ---------- */
.page-faq .faq-figure {
  margin: 26px 0 4px;
  border: 1px solid var(--faq-line);
  border-radius: 4px 26px 4px 26px;
  overflow: hidden;
  background: var(--faq-panel);
}

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

.page-faq .faq-figure figcaption {
  padding: 12px 16px;
  font-size: .78rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--mist);
  border-top: 1px solid var(--faq-line);
}

/* ---------- Contact band ---------- */
.page-faq .faq-contact {
  position: relative;
  overflow: hidden;
  margin: 34px 0 30px;
  padding: 30px 20px 32px;
  border-radius: 4px 30px 4px 30px;
  border: 1px solid rgba(216, 166, 74, .26);
  background: linear-gradient(158deg, rgba(30, 51, 82, .9), rgba(10, 19, 36, .94));
}

.page-faq .faq-contact::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 166, 74, .24), transparent 70%);
  pointer-events: none;
}

.page-faq .faq-contact__title {
  position: relative;
  margin: 14px 0 0;
  font-size: 1.4rem;
  line-height: 1.35;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--cream);
}

.page-faq .faq-contact__text {
  position: relative;
  margin: 14px 0 0;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--mist);
}

.page-faq .faq-contact__list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  margin: 22px 0;
}

.page-faq .faq-contact__list dt {
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--mist);
}

.page-faq .faq-contact__list dd {
  margin: 5px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--cream);
  word-break: break-word;
}

.page-faq .faq-contact__q {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--jade);
  border-radius: 0 14px 14px 0;
  background: rgba(5, 10, 18, .45);
}

.page-faq .faq-contact__q p {
  margin: 0 0 12px;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mist);
}

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

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

.page-faq .faq-contact .btn {
  position: relative;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .page-faq .faq-hero__copy .lead { font-size: 1.06rem; }
  .page-faq .faq-group__title { font-size: 1.5rem; }
  .page-faq .qa__q { padding-left: 20px; font-size: 1rem; }
  .page-faq .qa__a { padding-left: 58px; padding-right: 22px; }
  .page-faq .faq-contact { padding: 34px 30px 36px; }
  .page-faq .faq-contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-faq .faq-contact__title { font-size: 1.6rem; }
}

@media (min-width: 960px) {
  .page-faq .faq-hero { padding: 132px 0 68px; }
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 56px;
  }
  .page-faq .faq-hero__copy h1 {
    font-size: clamp(2.6rem, 3.6vw, 3.5rem);
    letter-spacing: .06em;
  }
  .page-faq .faq-body { padding: 56px 0 96px; }
  .page-faq .faq-layout {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .page-faq .faq-index {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    margin-bottom: 0;
  }
  .page-faq .faq-index__nav {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--faq-line);
  }
  .page-faq .faq-index__link {
    border: 0;
    border-radius: 0;
    padding: 10px 0 10px 16px;
    font-size: .9rem;
    color: var(--mist);
    position: relative;
    white-space: normal;
  }
  .page-faq .faq-index__link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
    transition: background .25s var(--ease);
  }
  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible {
    background: transparent;
    color: var(--gold-bright);
  }
  .page-faq .faq-index__link:hover::before,
  .page-faq .faq-index__link:focus-visible::before {
    background: var(--gold);
  }
  .page-faq .faq-group { padding-bottom: 34px; margin-bottom: 34px; }
  .page-faq .faq-group__head { padding: 26px 0 20px 22px; }
  .page-faq .faq-group__head::after { left: 22px; }
  .page-faq .qa__q { padding: 19px 16px 19px 22px; }
  .page-faq .qa__num { font-size: 1.5rem; }
  .page-faq .qa__a { padding: 0 26px 22px 62px; }
  .page-faq .faq-contact { margin: 44px 0 36px; padding: 40px 38px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .qa__mark::before,
  .page-faq .qa__mark::after,
  .page-faq .faq-index__link,
  .page-faq .faq-index__link::before,
  .page-faq .qa__next {
    transition: none;
  }
}