.page-faq {
  background: var(--paper);
  color: var(--ink-900);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--paper);
  padding: clamp(26px, 6vw, 54px) 0 clamp(40px, 8vw, 86px);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(25, 211, 230, 0.14) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(25deg, rgba(199, 210, 218, 0.09) 0 1px, transparent 1px 74px);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  top: -30vw;
  right: -20vw;
  width: 62vw;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(25, 211, 230, 0.22), transparent 62%);
}

.page-faq .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 5vw, 48px);
  align-items: center;
}

.page-faq .hero-copy {
  min-width: 0;
}

.page-faq .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(247, 243, 234, 0.6);
}

.page-faq .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.page-faq .breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.45rem;
  color: rgba(247, 243, 234, 0.32);
}

.page-faq .breadcrumb-link {
  color: var(--cyan-300);
  text-decoration: none;
}

.page-faq .breadcrumb-link:hover,
.page-faq .breadcrumb-link:focus-visible {
  text-decoration: underline;
}

.page-faq .breadcrumb-current {
  color: rgba(247, 243, 234, 0.78);
}

.page-faq .hero-kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan-500);
}

.page-faq h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(29px, 5.4vw, 54px);
  line-height: 1.16;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.page-faq .faq-hero .lede {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(247, 243, 234, 0.82);
}

.page-faq .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}

.page-faq .fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-faq .fact-num {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.1;
  color: var(--cyan-300);
  font-variant-numeric: tabular-nums;
}

.page-faq .fact-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(247, 243, 234, 0.62);
}

.page-faq .faq-hero-media {
  margin: 0;
  border: 1px solid rgba(25, 211, 230, 0.24);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--deck);
}

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

/* ---------- 热门问题 ---------- */
.page-faq .hot-section {
  background: var(--paper);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .hot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-faq .hot-copy {
  min-width: 0;
}

.page-faq .hot-lede {
  margin: 14px 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(7, 27, 47, 0.72);
}

.page-faq .hot-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .hot-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.page-faq .hot-link:hover,
.page-faq .hot-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cyan-500);
  box-shadow: var(--shadow-soft);
}

.page-faq .hot-index {
  flex: none;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--cyan-500);
  letter-spacing: 0.06em;
}

.page-faq .hot-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .hot-q {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.page-faq .hot-a {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.68);
}

.page-faq .hot-link .tag {
  flex: none;
  align-self: center;
}

.page-faq .hot-figure {
  margin: 0;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone-100);
  box-shadow: var(--shadow-soft);
}

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

.page-faq .hot-figure figcaption {
  padding: 12px 16px 15px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.66);
  border-top: 1px solid var(--stone-300);
  background: var(--surface);
}

/* ---------- 问答主体 ---------- */
.page-faq .qa-section {
  background: var(--stone-100);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .qa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.page-faq .qa-toc {
  background: var(--ink-700);
  color: var(--paper);
  border: 1px solid rgba(25, 211, 230, 0.22);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  align-self: start;
}

.page-faq .toc-title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.page-faq .toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247, 243, 234, 0.82);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  background: rgba(25, 211, 230, 0.14);
  color: var(--paper);
}

.page-faq .toc-num {
  flex: none;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange-500);
}

.page-faq .toc-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.58);
}

.page-faq .qa-body {
  min-width: 0;
}

.page-faq .qa-lede {
  margin: 12px 0 28px;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(7, 27, 47, 0.7);
}

.page-faq .qa-group {
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 96px;
}

.page-faq .qa-group + .qa-group {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-faq .group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-900);
}

.page-faq .group-num {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--orange-500);
}

.page-faq .group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.3vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.page-faq .group-note {
  margin: 12px 0 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.62);
}

/* ---------- 折叠答案 ---------- */
.page-faq .fold {
  border-top: 1px solid var(--stone-300);
}

.page-faq .qa-group .fold:first-of-type {
  border-top: 0;
}

.page-faq .fold-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-900);
  transition: color 0.18s var(--ease);
}

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

.page-faq .fold-summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.45;
  color: var(--cyan-500);
}

.page-faq .fold[open] > .fold-summary::after {
  content: "\2212";
  color: var(--orange-500);
}

.page-faq .fold-summary:hover,
.page-faq .fold-summary:focus-visible {
  color: var(--ink-700);
}

.page-faq .fold-body {
  padding: 0 0 18px;
}

.page-faq .fold-body p {
  margin: 0 0 10px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(7, 27, 47, 0.78);
}

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

.page-faq .fold-body .path {
  padding-left: 12px;
  border-left: 2px solid var(--cyan-500);
  font-weight: 600;
  color: var(--ink-900);
}

.page-faq .table-scroll {
  overflow-x: auto;
  margin: 6px 0 14px;
}

.page-faq .version-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-faq .version-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(7, 27, 47, 0.6);
}

.page-faq .version-table th,
.page-faq .version-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--stone-300);
}

.page-faq .version-table thead th {
  background: var(--ink-700);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-bottom-color: var(--ink-700);
}

.page-faq .version-table tbody tr:nth-child(even) {
  background: var(--stone-100);
}

.page-faq .version-table .mono {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 收束 ---------- */
.page-faq .cta-section {
  background: var(--paper);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 4.5vw, 52px);
  border-radius: var(--radius);
  border: 1px solid rgba(25, 211, 230, 0.28);
  background:
    radial-gradient(circle at 88% 12%, rgba(25, 211, 230, 0.22), transparent 58%),
    linear-gradient(118deg, var(--ink-900), var(--ink-700));
  color: var(--paper);
}

.page-faq .cta-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.page-faq .cta-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1.32;
  letter-spacing: 0.03em;
}

.page-faq .cta-text {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(247, 243, 234, 0.78);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-faq .hot-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

@media (min-width: 940px) {
  .page-faq .hero-grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.8fr);
  }

  .page-faq .cta-panel {
    grid-template-columns: minmax(0, 1.45fr) auto;
    align-items: center;
  }
}

@media (min-width: 1000px) {
  .page-faq .qa-layout {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 62px);
    align-items: start;
  }

  .page-faq .qa-toc {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 420px) {
  .page-faq .hot-link {
    flex-wrap: wrap;
  }

  .page-faq .hot-link .tag {
    align-self: flex-start;
    margin-left: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .hot-link,
  .page-faq .fold-summary,
  .page-faq .toc-link {
    transition: none;
  }

  .page-faq .hot-link:hover,
  .page-faq .hot-link:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等，我写了 `<<<END>>>`，但要求说标记只有三个，而且每个只能出现一次。我多写了一个标记。删掉它。最后输出只保留两个标记。
<main id="main-content" class="page-faq">

  <header class="faq-hero">
    <div class="wrap hero-grid">
      <div class="hero-copy">
        <nav class="breadcrumb" aria-label="面包屑">
          <ol class="breadcrumb-list">
            <li><a class="breadcrumb-link" href="/">首页</a></li>
            <li><span class="breadcrumb-current">常见问答</span></li>
          </ol>
        </nav>
        <p class="hero-kicker mono">帮助索引 / 自助问答</p>
        <h1>换了设备找不到入口？先在这里把路走通</h1>
        <p class="lede">韦德亚洲把回访用户最常卡住的地方整理成通用品牌站常见说明，换设备、下载、版本、导航、联系五类归到 140 条问答里。每条先告诉你点哪里、按什么顺序走，再补上容易忽略的差别，多数情况不必等客服回复。</p>
        <div class="hero-facts">
          <div class="fact">
            <span class="fact-num mono">140</span>
            <span class="fact-label">条问答说明</span>
          </div>
          <div class="fact">
            <span class="fact-num mono">64</span>
            <span class="fact-label">个栏目入口</span>
          </div>
          <div class="fact">
            <span class="fact-num mono">每周</span>
            <span class="fact-label">适配清单更新</span>
          </div>
        </div>
      </div>
      <figure class="faq-hero-media">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深海蓝底色上电光青细线与纸白留白交织的问答页首视觉">
      </figure>
    </div>
  </header>

  <section class="hot-section" aria-labelledby="hot-title">
    <div class="wrap hot-grid">
      <div class="hot-copy">
        <p class="section-kicker mono">高频入口</p>
        <h2 class="section-title" id="hot-title">问得最多的四件事</h2>
        <p class="hot-lede">刚换完手机、或者在几个版本之间犹豫的人，基本都从这四条开始。点进去就是完整答案。</p>
        <ul class="hot-list">
          <li class="hot-item">
            <a class="hot-link" href="#g01">
              <span class="hot-index mono">01</span>
              <span class="hot-body">
                <span class="hot-q">换了手机，从哪里重新开始？</span>
                <span class="hot-a">从栏目与下载页进安卓版资源下载区，按新机型重选版本即可继续。</span>
              </span>
              <span class="tag tag--orange">高频</span>
            </a>
          </li>
          <li class="hot-item">
            <a class="hot-link" href="#g02">
              <span class="hot-index mono">02</span>
              <span class="hot-body">
                <span class="hot-q">稳定版、兼容版、轻量版到底选哪个？</span>
                <span class="hot-a">看机型和存储空间：常规机型走稳定版，旧机走兼容版，空间紧走轻量版。</span>
              </span>
              <span class="tag tag--orange">高频</span>
            </a>
          </li>
          <li class="hot-item">
            <a class="hot-link" href="#g04">
              <span class="hot-index mono">03</span>
              <span class="hot-body">
                <span class="hot-q">站点导航目录在哪里找？</span>
                <span class="hot-a">8 大类 64 个栏目入口，从栏目与下载页的目录区一路点进去。</span>
              </span>
            </a>
          </li>
          <li class="hot-item">
            <a class="hot-link" href="#g03">
              <span class="hot-index mono">04</span>
              <span class="hot-body">
                <span class="hot-q">页面文字挤、按钮点不到怎么办？</span>
                <span class="hot-a">先对照适配清单里自己机型的屏幕区间，再调缩放比例。</span>
              </span>
            </a>
          </li>
        </ul>
      </div>
      <figure class="hot-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="分类标签、步骤序号与折叠面板组成的问答分类信息图" loading="lazy" decoding="async">
        <figcaption>五类问题各自对应一条可执行路径，答案里标出的页面都能直接点进去。</figcaption>
      </figure>
    </div>
  </section>

  <section class="qa-section" aria-labelledby="qa-title">
    <div class="wrap qa-layout">
      <aside class="qa-toc">
        <p class="toc-title mono">问题分类</p>
        <nav aria-label="问答目录">
          <ol class="toc-list">
            <li><a class="toc-link" href="#g01"><span class="toc-num mono">01</span>换设备与注册步骤对照</a></li>
            <li><a class="toc-link" href="#g02"><span class="toc-num mono">02</span>下载与版本差异</a></li>
            <li><a class="toc-link" href="#g03"><span class="toc-num mono">03</span>适配清单与浏览问题</a></li>
            <li><a class="toc-link" href="#g04"><span class="toc-num mono">04</span>导航目录与常见说明</a></li>
            <li><a class="toc-link" href="#g05"><span class="toc-num mono">05</span>联系客服前准备</a></li>
          </ol>
        </nav>
        <p class="toc-note">答案按你可能遇到的先后排列：先换设备，再挑版本，然后才是显示、目录和找人。</p>
      </aside>

      <div class="qa-body">
        <h2 class="section-title" id="qa-title">按分类找答案</h2>
        <p class="qa-lede">点开任意一条就能看到完整说明。常见的卡点基本在前三条答案里就能解决。</p>

        <section class="qa-group" id="g01" aria-labelledby="g01-title">
          <div class="group-head">
            <span class="group-num mono">01</span>
            <h3 class="group-title" id="g01-title">换设备与注册步骤对照</h3>
          </div>
          <p class="group-note">换手机、换平板之后，位置会变，步骤顺序基本不变。</p>

          <details class="fold" open>
            <summary class="fold-summary">换了新手机，原来的入口还能用吗？</summary>
            <div class="fold-body">
              <p class="path">手机浏览器打开栏目与下载页 → 进入安卓版资源下载区 → 按新机型选一个版本。</p>
              <p>入口本身不跟设备绑定，换机后重新确认版本和屏幕区间就能接着用。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">注册步骤对照在哪里看？</summary>
            <div class="fold-body">
              <p class="path">下载区每份安装包旁都挂着对应的步骤对照 → 点开按 1 到 5 步顺序走。</p>
              <p>步骤里出现的字段名和页面上的写法一致，照着填就行，不用另外对照两套叫法。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">平板上操作和手机一样吗？</summary>
            <div class="fold-body">
              <p class="path">先看适配清单里平板那一栏 → 再回下载区选对应文件。</p>
              <p>步骤大体一致，差别在入口位置和屏幕区间，平板上按钮分布更散一些。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">桌面端需要另外装东西吗？</summary>
            <div class="fold-body">
              <p class="path">直接开浏览器就能浏览，不用安装。</p>
              <p>想确认桌面端和手机的差别，看适配清单里的桌面端记录，排布差异写得比较细。</p>
            </div>
          </details>
        </section>

        <section class="qa-group" id="g02" aria-labelledby="g02-title">
          <div class="group-head">
            <span class="group-num mono">02</span>
            <h3 class="group-title" id="g02-title">下载与版本差异</h3>
          </div>
          <p class="group-note">三个可用版本、九份历史说明，挑版本之前先看这一组。</p>

          <details class="fold" open>
            <summary class="fold-summary">稳定版、兼容版、轻量版怎么选？</summary>
            <div class="fold-body">
              <div class="table-scroll">
                <table class="version-table">
                  <caption>安卓版资源下载区当前提供的三个版本</caption>
                  <thead>
                    <tr>
                      <th scope="col">版本</th>
                      <th scope="col">版本号</th>
                      <th scope="col">适合哪种情况</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>稳定版</td>
                      <td class="mono">v3.4.2</td>
                      <td>常规机型首选，功能最全，日常回访够用</td>
                    </tr>
                    <tr>
                      <td>兼容版</td>
                      <td class="mono">v3.3.8</td>
                      <td>机型较早或系统偏旧，先保证装得上、跑得稳</td>
                    </tr>
                    <tr>
                      <td>轻量版</td>
                      <td class="mono">v3.2.6</td>
                      <td>存储紧张、配置偏低，安装包最小</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>拿不准就先装稳定版；装不上或打开卡顿，再退到兼容版。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">以前用过的老版本还查得到说明吗？</summary>
            <div class="fold-body">
              <p class="path">下载区保留了 9 个历史版本说明，按版本号对照。</p>
              <p>想确认某个旧版本改了什么，从历史说明里翻最快，比在正文里找描述省事。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">怎么确认下载到的文件没被改动过？</summary>
            <div class="fold-body">
              <p class="path">每个版本都标了安装包大小，并提供 SHA 校验说明。</p>
              <p>两处都对得上再安装；数字不一致就重新下一份，别硬装。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">安装包多大，用移动流量够不够？</summary>
            <div class="fold-body">
              <p class="path">大小标在每份文件旁边，轻量版最小。</p>
              <p>在户外用流量下载时，先看一眼数字再点，能省不少等待。</p>
            </div>
          </details>
        </section>

        <section class="qa-group" id="g03" aria-labelledby="g03-title">
          <div class="group-head">
            <span class="group-num mono">03</span>
            <h3 class="group-title" id="g03-title">适配清单与浏览问题</h3>
          </div>
          <p class="group-note">清单每周更新，覆盖 42 款常见手机与平板型号、12 类屏幕尺寸区间。</p>

          <details class="fold" open>
            <summary class="fold-summary">怎么判断我的机型在不在支持范围？</summary>
            <div class="fold-body">
              <p class="path">按品牌加型号在清单里查一次；查不到就按屏幕宽度找最接近的一档。</p>
              <p>同一屏幕区间的机型，浏览表现通常接近，按那一档的说明操作即可。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">清单里的屏幕区间该怎么用？</summary>
            <div class="fold-body">
              <p class="path">找到自己设备的屏幕宽度 → 落在哪一档就照哪一档的建议操作。</p>
              <p>手机、平板与桌面端的浏览差异在清单里分行记录，混着看容易对错行。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">文字挤在一起、按钮点不到，先调哪里？</summary>
            <div class="fold-body">
              <p class="path">先按清单里该机型的建议缩放比例调整 → 再确认屏幕区间是否落在支持范围内。</p>
              <p>调完仍旧异常，就截个图，工作日发给客服，比口头描述省一轮来回。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">清单里没有我的型号怎么办？</summary>
            <div class="fold-body">
              <p class="path">按屏幕宽度区间找最接近的一档，照那一档走。</p>
              <p>区间相同的设备，处理方式基本通用，不必因为型号没列出来就停在原地。</p>
            </div>
          </details>
        </section>

        <section class="qa-group" id="g04" aria-labelledby="g04-title">
          <div class="group-head">
            <span class="group-num mono">04</span>
            <h3 class="group-title" id="g04-title">导航目录与常见说明</h3>
          </div>
          <p class="group-note">目录每季度复核一次，入口有增有减，找不到时先看这里。</p>

          <details class="fold" open>
            <summary class="fold-summary">导航目录一共有多少入口？</summary>
            <div class="fold-body">
              <p class="path">8 大类 64 个栏目入口，从栏目与下载页的目录区进去。</p>
              <p>最近一次复核清理了 12 个失效入口，另补了 6 个新栏目，旧地址点不开多半是这原因。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">260 个主题栏目是怎么分组的？</summary>
            <div class="fold-body">
              <p class="path">按设备、版本、导航、常见说明四类归档。</p>
              <p>知道自己想看的是哪一类，就能跳过前面的层级直接落到位。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">以前的旧栏目现在还翻得到吗？</summary>
            <div class="fold-body">
              <p class="path">从目录里的旧栏目索引翻，或点页面上的随机推荐。</p>
              <p>栏目档案化改版之后，旧内容按分类留着，只是层级比原来深一层。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">常见说明的目录放在哪一块？</summary>
            <div class="fold-body">
              <p class="path">在导航目录的常见说明分类下，按换设备、下载、版本、导航、联系五组排开。</p>
              <p>想一次看全同类问题，从那一组进比逐条搜索快。</p>
            </div>
          </details>
        </section>

        <section class="qa-group" id="g05" aria-labelledby="g05-title">
          <div class="group-head">
            <span class="group-num mono">05</span>
            <h3 class="group-title" id="g05-title">联系客服前准备</h3>
          </div>
          <p class="group-note">把三样东西备齐，一轮沟通就能有结果。</p>

          <details class="fold" open>
            <summary class="fold-summary">联系客服前先准备什么？</summary>
            <div class="fold-body">
              <p class="path">设备型号、版本号、问题截图，三样备齐。</p>
              <p>版本号在下载区或安装包文件名上都能看到，先记下来再开口。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">什么时候会收到回复？</summary>
            <div class="fold-body">
              <p class="path">工作日 9:00-18:00 发到客服邮箱，当天处理。</p>
              <p>非工作日发来的消息，顺延到下一个工作日，附上截图能少一轮追问。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">电话和邮箱都能联系吗？</summary>
            <div class="fold-body">
              <p class="path">电话 17918908565，邮箱 email@weide-zhuanzhuan.com.cn，都在工作时间内。</p>
              <p>需要贴截图、发长描述的，走邮箱更清楚；三言两语能说清的，直接打电话。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold-summary">哪些情况先自己查更快？</summary>
            <div class="fold-body">
              <p class="path">换设备找入口、版本差异、目录查找这三类，先看下载区和本页答案。</p>
              <p>这几类问题大多能在几分钟内自己解决，也就不用排在客服队列里等。</p>
            </div>
          </details>
        </section>
      </div>
    </div>
  </section>

  <section class="cta-section" aria-labelledby="cta-title">
    <div class="wrap">
      <div class="cta-panel">
        <div>
          <p class="cta-kicker mono">还没解决</p>
          <h2 class="cta-title" id="cta-title">把型号和版本号带上，直接找我们</h2>
          <p class="cta-text">工作日 9:00-18:00 有人回复，浙江地区用户也可以先把截图发到客服邮箱，说明清楚问题出现在哪个页面，沟通会快很多。</p>
        </div>
        <div class="cta-actions">
          <a class="btn btn--primary" href="/consult/">联系客服</a>
          <a class="btn btn--accent" href="/features/">去下载区</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  background: var(--paper);
  color: var(--ink-900);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--paper);
  padding: clamp(26px, 6vw, 54px) 0 clamp(40px, 8vw, 86px);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(25, 211, 230, 0.14) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(25deg, rgba(199, 210, 218, 0.09) 0 1px, transparent 1px 74px);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  top: -30vw;
  right: -20vw;
  width: 62vw;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(25, 211, 230, 0.22), transparent 62%);
}

.page-faq .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 5vw, 48px);
  align-items: center;
}

.page-faq .hero-copy {
  min-width: 0;
}

.page-faq .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(247, 243, 234, 0.6);
}

.page-faq .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.page-faq .breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.45rem;
  color: rgba(247, 243, 234, 0.32);
}

.page-faq .breadcrumb-link {
  color: var(--cyan-300);
  text-decoration: none;
}

.page-faq .breadcrumb-link:hover,
.page-faq .breadcrumb-link:focus-visible {
  text-decoration: underline;
}

.page-faq .breadcrumb-current {
  color: rgba(247, 243, 234, 0.78);
}

.page-faq .hero-kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan-500);
}

.page-faq h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(29px, 5.4vw, 54px);
  line-height: 1.16;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.page-faq .faq-hero .lede {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(247, 243, 234, 0.82);
}

.page-faq .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}

.page-faq .fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-faq .fact-num {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.1;
  color: var(--cyan-300);
  font-variant-numeric: tabular-nums;
}

.page-faq .fact-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(247, 243, 234, 0.62);
}

.page-faq .faq-hero-media {
  margin: 0;
  border: 1px solid rgba(25, 211, 230, 0.24);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--deck);
}

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

/* ---------- 热门问题 ---------- */
.page-faq .hot-section {
  background: var(--paper);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .hot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-faq .hot-copy {
  min-width: 0;
}

.page-faq .hot-lede {
  margin: 14px 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(7, 27, 47, 0.72);
}

.page-faq .hot-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .hot-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.page-faq .hot-link:hover,
.page-faq .hot-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cyan-500);
  box-shadow: var(--shadow-soft);
}

.page-faq .hot-index {
  flex: none;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--cyan-500);
  letter-spacing: 0.06em;
}

.page-faq .hot-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .hot-q {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.page-faq .hot-a {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.68);
}

.page-faq .hot-link .tag {
  flex: none;
  align-self: center;
}

.page-faq .hot-figure {
  margin: 0;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone-100);
  box-shadow: var(--shadow-soft);
}

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

.page-faq .hot-figure figcaption {
  padding: 12px 16px 15px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.66);
  border-top: 1px solid var(--stone-300);
  background: var(--surface);
}

/* ---------- 问答主体 ---------- */
.page-faq .qa-section {
  background: var(--stone-100);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .qa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.page-faq .qa-toc {
  background: var(--ink-700);
  color: var(--paper);
  border: 1px solid rgba(25, 211, 230, 0.22);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  align-self: start;
}

.page-faq .toc-title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.page-faq .toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247, 243, 234, 0.82);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  background: rgba(25, 211, 230, 0.14);
  color: var(--paper);
}

.page-faq .toc-num {
  flex: none;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange-500);
}

.page-faq .toc-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.58);
}

.page-faq .qa-body {
  min-width: 0;
}

.page-faq .qa-lede {
  margin: 12px 0 28px;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(7, 27, 47, 0.7);
}

.page-faq .qa-group {
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 96px;
}

.page-faq .qa-group + .qa-group {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-faq .group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-900);
}

.page-faq .group-num {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--orange-500);
}

.page-faq .group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.3vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.page-faq .group-note {
  margin: 12px 0 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(7, 27, 47, 0.62);
}

/* ---------- 折叠答案 ---------- */
.page-faq .fold {
  border-top: 1px solid var(--stone-300);
}

.page-faq .qa-group .fold:first-of-type {
  border-top: 0;
}

.page-faq .fold-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-900);
  transition: color 0.18s var(--ease);
}

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

.page-faq .fold-summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.45;
  color: var(--cyan-500);
}

.page-faq .fold[open] > .fold-summary::after {
  content: "\2212";
  color: var(--orange-500);
}

.page-faq .fold-summary:hover,
.page-faq .fold-summary:focus-visible {
  color: var(--ink-700);
}

.page-faq .fold-body {
  padding: 0 0 18px;
}

.page-faq .fold-body p {
  margin: 0 0 10px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(7, 27, 47, 0.78);
}

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

.page-faq .fold-body .path {
  padding-left: 12px;
  border-left: 2px solid var(--cyan-500);
  font-weight: 600;
  color: var(--ink-900);
}

.page-faq .table-scroll {
  overflow-x: auto;
  margin: 6px 0 14px;
}

.page-faq .version-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-faq .version-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(7, 27, 47, 0.6);
}

.page-faq .version-table th,
.page-faq .version-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--stone-300);
}

.page-faq .version-table thead th {
  background: var(--ink-700);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-bottom-color: var(--ink-700);
}

.page-faq .version-table tbody tr:nth-child(even) {
  background: var(--stone-100);
}

.page-faq .version-table .mono {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 收束 ---------- */
.page-faq .cta-section {
  background: var(--paper);
  padding: clamp(44px, 7vw, 84px) 0;
}

.page-faq .cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 4.5vw, 52px);
  border-radius: var(--radius);
  border: 1px solid rgba(25, 211, 230, 0.28);
  background:
    radial-gradient(circle at 88% 12%, rgba(25, 211, 230, 0.22), transparent 58%),
    linear-gradient(118deg, var(--ink-900), var(--ink-700));
  color: var(--paper);
}

.page-faq .cta-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.page-faq .cta-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1.32;
  letter-spacing: 0.03em;
}

.page-faq .cta-text {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(247, 243, 234, 0.78);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-faq .hot-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

@media (min-width: 940px) {
  .page-faq .hero-grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.8fr);
  }

  .page-faq .cta-panel {
    grid-template-columns: minmax(0, 1.45fr) auto;
    align-items: center;
  }
}

@media (min-width: 1000px) {
  .page-faq .qa-layout {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 62px);
    align-items: start;
  }

  .page-faq .qa-toc {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 420px) {
  .page-faq .hot-link {
    flex-wrap: wrap;
  }

  .page-faq .hot-link .tag {
    align-self: flex-start;
    margin-left: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .hot-link,
  .page-faq .fold-summary,
  .page-faq .toc-link {
    transition: none;
  }

  .page-faq .hot-link:hover,
  .page-faq .hot-link:focus-visible {
    transform: none;
  }
}