.page-faq {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: 0;
}

.page-faq .faq-crumb {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}

/* ── 首屏 ── */
.page-faq .faq-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    padding: 48px var(--gutter) 48px;
    align-items: start;
  }
}

.page-faq .faq-hero__eyebrow {
  color: var(--ochre);
  margin-bottom: 12px;
}

.page-faq .faq-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.page-faq .faq-hero__lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 28px;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-faq .faq-hero__visual {
  margin: 0;
  border: var(--bd);
  box-shadow: var(--shadow);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

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

.page-faq .faq-hero__visual figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--lake-light);
  font-size: 11px;
  color: var(--grey);
  background: var(--cream);
}

/* ── 数据条 ── */
.page-faq .faq-facts {
  max-width: var(--wrap);
  margin: 0 auto 40px;
  padding: 0 var(--gutter);
}

.page-faq .faq-facts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

@media (min-width: 720px) {
  .page-faq .faq-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-faq .faq-fact {
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-fact:nth-child(even) {
  background: var(--cream);
}

.page-faq .faq-fact__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--ochre);
  line-height: 1;
}

.page-faq .faq-fact__label {
  font-size: 13px;
  color: var(--grey);
}

/* ── 两栏布局 ── */
.page-faq .faq-layout {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .page-faq .faq-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 96px;
    align-items: start;
  }
}

/* ── 左侧目录 ── */
.page-faq .faq-toc {
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
}

.page-faq .faq-toc .toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey);
  margin: 0 0 12px;
  text-transform: uppercase;
}

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

.page-faq .faq-toc .toc__link {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-faq .faq-toc .toc__link:hover {
  color: var(--ochre);
  border-bottom-color: var(--gold);
}

.page-faq .faq-toc .toc__link[aria-current="true"] {
  color: var(--ochre);
  font-weight: 700;
  border-bottom-color: var(--ochre);
}

@media (max-width: 899px) {
  .page-faq .faq-toc {
    padding: 16px;
  }

  .page-faq .faq-toc .toc__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .page-faq .faq-toc .toc__list > li {
    flex: 0 0 auto;
  }

  .page-faq .faq-toc .toc__link {
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--lake-light);
    border-bottom: 1px solid var(--lake-light);
    font-size: 12px;
  }

  .page-faq .faq-toc .toc__link[aria-current="true"] {
    background: var(--ochre);
    color: var(--paper);
    border-color: var(--ochre);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.page-faq .faq-toc__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lake-light);
}

.page-faq .faq-toc__note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey);
}

.page-faq .faq-toc__note .mono {
  font-size: 11px;
  color: var(--ochre);
  letter-spacing: 0.04em;
}

/* ── 右侧正文 ── */
.page-faq .guide-section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(127, 169, 164, 0.45);
}

.page-faq .guide-section:first-child {
  padding-top: 0;
}

.page-faq .guide-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

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

.page-faq .faq-section__num {
  color: var(--ochre);
  font-size: 12px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.page-faq .faq-section__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.2;
  margin: 0;
}

.page-faq .prose {
  max-width: 64ch;
  line-height: 1.85;
  margin: 0 0 14px;
}

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

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

.page-faq .faq-inline-link:hover {
  color: var(--flare);
}

/* 配图 */
.page-faq .faq-figure {
  margin: 24px 0;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}

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

.page-faq .faq-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--lake-light);
  font-size: 11px;
  color: var(--grey);
  background: var(--cream);
}

/* 条目结构列表 */
.page-faq .faq-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--lake-light);
  border-left: 4px solid var(--ochre);
  display: grid;
  gap: 10px;
}

.page-faq .faq-list li {
  font-size: 15px;
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}

.page-faq .faq-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--ochre);
}

.page-faq .faq-list strong {
  color: var(--ochre-deep);
}

/* ── 常见问题 ── */
.page-faq .faq-questions {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-faq .faq-question {
  padding: 16px 0;
  border-bottom: 1px dashed var(--lake-light);
}

.page-faq .faq-question:first-child {
  padding-top: 0;
}

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

.page-faq .faq-question dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.page-faq .faq-question dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--grey);
  max-width: 62ch;
}

/* ── 底部联系区 ── */
.page-faq .faq-cta {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

@media (min-width: 900px) {
  .page-faq .faq-cta {
    padding-bottom: 96px;
  }
}

.page-faq .faq-cta__inner {
  position: relative;
  border: var(--bd);
  box-shadow: var(--shadow);
  background: var(--paper);
  padding: 40px 24px 32px;
  overflow: hidden;
  display: grid;
  gap: 24px;
}

.page-faq .faq-cta__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to right, var(--ochre) 0 40%, var(--lake) 40% 75%, var(--gold) 75% 100%);
}

@media (min-width: 720px) {
  .page-faq .faq-cta__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    padding: 44px 36px 36px;
    gap: 32px;
  }
}

.page-faq .faq-cta__text .eyebrow {
  color: var(--ochre);
  margin-bottom: 8px;
}

.page-faq .faq-cta__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.page-faq .faq-cta__desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--grey);
  max-width: 56ch;
  margin: 0;
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 720px) {
  .page-faq .faq-cta__actions {
    align-items: flex-start;
  }
}

.page-faq .faq-cta__actions .btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 720px) {
  .page-faq .faq-cta__actions .btn {
    width: auto;
  }
}

/* 触控与可读性兜底 */
.page-faq .btn,
.page-faq .toc__link,
.page-faq .faq-inline-link {
  -webkit-tap-highlight-color: transparent;
}

.page-faq :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
<<<END>>>


<main id="main-content" class="page-faq">

  <nav class="breadcrumb faq-crumb" aria-label="面包屑">
    <ul>
      <li><a href="/">首页</a></li>
      <li aria-current="page">使用指南</li>
    </ul>
  </nav>

  <header class="faq-hero">
    <div class="faq-hero__copy">
      <p class="eyebrow faq-hero__eyebrow">04 / 使用指南</p>
      <h1>找到、对上、查清</h1>
      <p class="faq-hero__lede">皇官方版口把每条内容按栏目和标签两层归档，附上版本号与更新时间。不管你是带着关键词来查，还是按主题逐层往下走，最后都会落到同一个条目页。下面把最常用的几步操作讲清楚。</p>
      <div class="faq-hero__actions">
        <a class="btn btn--ochre" href="#start-tags">从标签开始</a>
        <a class="btn btn--ghost" href="#start-version">看版本对照</a>
      </div>
    </div>
    <figure class="faq-hero__visual">
      <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="档案卷宗索引图示：标签色块与版本编号按栏目分层排列">
      <figcaption class="mono">档案索引 · 标签 / 目录 / 版本</figcaption>
    </figure>
  </header>

  <div class="faq-facts">
    <div class="faq-facts__grid" aria-label="栏目与更新概况">
      <div class="faq-fact">
        <span class="faq-fact__num mono">18</span>
        <span class="faq-fact__label">个栏目</span>
      </div>
      <div class="faq-fact">
        <span class="faq-fact__num mono">264</span>
        <span class="faq-fact__label">个分类标签</span>
      </div>
      <div class="faq-fact">
        <span class="faq-fact__num mono">30</span>
        <span class="faq-fact__label">天更新逐条列明</span>
      </div>
      <div class="faq-fact">
        <span class="faq-fact__num mono">180</span>
        <span class="faq-fact__label">天使用记录回溯</span>
      </div>
    </div>
  </div>

  <div class="faq-layout">
    <aside class="faq-toc" aria-label="页内目录">
      <p class="toc__title">本页内容</p>
      <ul class="toc__list">
        <li><a class="toc__link" href="#start-tags" data-toc-link>01 标签和目录，两条路都能到</a></li>
        <li><a class="toc__link" href="#start-entry" data-toc-link>02 一条内容由什么组成</a></li>
        <li><a class="toc__link" href="#start-version" data-toc-link>03 版本号与适配清单</a></li>
        <li><a class="toc__link" href="#start-update" data-toc-link>04 更新时间在哪查</a></li>
        <li><a class="toc__link" href="#start-history" data-toc-link>05 查过的内容，可以回头找</a></li>
        <li><a class="toc__link" href="#start-questions" data-toc-link>06 常见问题</a></li>
      </ul>
      <div class="faq-toc__note">
        <p class="mono">工作日 09:00–18:00</p>
        <p class="faq-toc__mail">contact@emperor-huang.com.cn</p>
      </div>
    </aside>

    <div class="faq-body">

      <section id="start-tags" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">01</span>
          <h2 class="faq-section__title">标签和目录，两条路都能到</h2>
        </header>
        <p class="prose">栏目按主题分簇，一个栏目下收一组内容；标签是从内容里抽出来的短词，可以横跨栏目挂。皇官方版口有 18 个栏目、264 个分类标签，标签会随内容更新同步调整。如果你只记得关键词，先用标签做横向筛选，剩下的条目会少很多；如果方向明确，就直接沿左侧目录往下走。两条路的终点是同一个条目页，区别只在于你先缩小的是哪个维度。</p>
        <p class="prose">第一次来建议从标签入手：扫一遍标签条，看到和你要找的内容相关的词就点进去，比从目录一页页翻更快。找回查过的内容时则相反，目录的栏目归属更稳定，标签会随内容调整，按目录回溯更省事。</p>
      </section>

      <section id="start-entry" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">02</span>
          <h2 class="faq-section__title">一条内容由什么组成</h2>
        </header>
        <p class="prose">点开任意一条内容，最上面先看到编号条，往下依次是标题、栏目归属和标签，再往下是版本号、适配清单和更新时间。导出目录或做版本比对时，编号和版本号是两条最常用的对齐依据。</p>
        <figure class="faq-figure">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="内容条目结构示意：编号条、标题、栏目归属、标签与版本号自上而下排列" loading="lazy" decoding="async">
          <figcaption class="mono">条目结构 · 编号 / 标签 / 版本 / 更新时间</figcaption>
        </figure>
        <ul class="faq-list">
          <li><strong>编号条</strong>：条目在栏目内的序号，导出清单时按它排列对齐。</li>
          <li><strong>标签</strong>：横向挂的主题词，一般两到三个，方便交叉筛选。</li>
          <li><strong>版本号</strong>：标记修订次数，与适配清单配合说明这条内容对应哪一版设备与场景。</li>
          <li><strong>更新时间</strong>：这一条最近一次内容改动的日期，底部记录带里同样能查到。</li>
        </ul>
      </section>

      <section id="start-version" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">03</span>
          <h2 class="faq-section__title">版本号与适配清单</h2>
        </header>
        <p class="prose">版本号是标记内容修订次序的符号，适配清单列的是该版本适用的设备与场景。两列并排放在一起，同一行对应同一条目，逐项看过去就知道两个版本之间差了哪几项。需要确认手上的清单是不是最新时，先拿到你当前版本的版本号，再去条目页对一下线上版本号，一致就不用再往下翻。</p>
        <p class="prose">如果你在团队里负责整理资料，建议导出一份当前目录清单存档，每隔一段时间重新导一次，两次之间用版本号变化做索引，比逐条翻页面快得多。</p>
      </section>

      <section id="start-update" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">04</span>
          <h2 class="faq-section__title">更新时间在哪查</h2>
        </header>
        <p class="prose">页面底部有一条横向记录带，滚到最底下就能看到当前版本号、最近一次常规更新和归档范围。想看最近 30 天改了什么，<a class="faq-inline-link" href="/apps/">PC 端内容目录</a>按栏目逐条列出，从那里点进具体条目最快。历史版本保留 36 个月，需要追溯到更早的记录时也可能找到归档。</p>
        <p class="prose">如果你是在更新动态提示里进来的，直接看那条记录对应的版本号，再对一下你手上版本，两个数字一致就说明内容还是最新的。不一致的话，以页面上的版本号为准。</p>
      </section>

      <section id="start-history" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">05</span>
          <h2 class="faq-section__title">查过的内容，可以回头找</h2>
        </header>
        <p class="prose">使用记录保留最近 180 天的浏览条目，按时间倒序排列。回看以前查过的内容时，从记录里直接点回原条目，不用重新走一遍标签或目录。如果你在团队里负责整理资料，把使用记录和导出的目录清单放在一起看，最近查过哪些、对应哪个版本，一页就能翻完。</p>
      </section>

      <section id="start-questions" class="guide-section" data-section>
        <header class="faq-section__head">
          <span class="faq-section__num mono">06</span>
          <h2 class="faq-section__title">常见问题</h2>
        </header>
        <dl class="faq-questions">
          <div class="faq-question">
            <dt>我只记得关键词，不记得条目编号，怎么找？</dt>
            <dd>先用顶部标签条做横向筛选，把范围缩到一小簇相关条目；再沿目录进到对应栏目，一般两步就能定位。实在找不到时，去使用记录里翻最近查过的条目。</dd>
          </div>
          <div class="faq-question">
            <dt>版本号在页面的什么位置？</dt>
            <dd>条目顶部编号条旁边有版本号徽标，页面底部记录带里也有当前版本号。两边显示一致时，说明你看到的就是最新版。</dd>
          </div>
          <div class="faq-question">
            <dt>我手上的适配清单和线上不一致怎么办？</dt>
            <dd>先看页面底部记录带的最近更新日期，再比对条目页的版本号。如果版本号不同，以线上为准；如果是同一版本号但清单内容有出入，把页面截图和设备信息发到 contact@emperor-huang.com.cn，工作日会有回复。</dd>
          </div>
          <div class="faq-question">
            <dt>目录能直接导出来吗？</dt>
            <dd>PC 端内容目录支持导出当前筛选结果，导出的清单带条目编号、栏目归属和版本号，可以直接用于版本对照或存档。导出后再按编号排序，和旧清单比较时位置对得上。</dd>
          </div>
          <div class="faq-question">
            <dt>使用记录找不到了，怎么恢复？</dt>
            <dd>使用记录保留 180 天，超过期限的浏览记录会自动清出列表。如果你需要长期追踪某一类内容的变化，建议按固定周期导出目录清单，版本号的变化会在两次清单之间体现出来。</dd>
          </div>
          <div class="faq-question">
            <dt>查找过程中遇到问题，找谁？</dt>
            <dd>工作日 09:00–18:00 内发邮件到 contact@emperor-huang.com.cn，写清你要查的条目编号或栏目名称，并附上页面截图和设备信息，回复会快很多。</dd>
          </div>
        </dl>
      </section>

    </div>
  </div>

  <section class="faq-cta">
    <div class="faq-cta__inner">
      <div class="faq-cta__text">
        <p class="eyebrow">下一步</p>
        <h2 class="faq-cta__title">还有问题没找到答案？</h2>
        <p class="faq-cta__desc">工作日 09:00–18:00 内发邮件到 contact@emperor-huang.com.cn，写清你要查的条目或栏目，回复会快很多。想先自己翻翻看，可以直接进内容目录或从首页的标签条开始。</p>
      </div>
      <div class="faq-cta__actions">
        <a class="btn btn--ochre" href="/apps/">查看内容目录</a>
        <a class="btn btn--lake" href="/">返回首页</a>
      </div>
    </div>
  </section>

</main>


.page-faq {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: 0;
}

.page-faq .faq-crumb {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}

/* ── 首屏 ── */
.page-faq .faq-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    padding: 48px var(--gutter) 48px;
    align-items: start;
  }
}

.page-faq .faq-hero__eyebrow {
  color: var(--ochre);
  margin-bottom: 12px;
}

.page-faq .faq-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.page-faq .faq-hero__lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 28px;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-faq .faq-hero__visual {
  margin: 0;
  border: var(--bd);
  box-shadow: var(--shadow);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

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

.page-faq .faq-hero__visual figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--lake-light);
  font-size: 11px;
  color: var(--grey);
  background: var(--cream);
}

/* ── 数据条 ── */
.page-faq .faq-facts {
  max-width: var(--wrap);
  margin: 0 auto 40px;
  padding: 0 var(--gutter);
}

.page-faq .faq-facts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

@media (min-width: 720px) {
  .page-faq .faq-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-faq .faq-fact {
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-fact:nth-child(even) {
  background: var(--cream);
}

.page-faq .faq-fact__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--ochre);
  line-height: 1;
}

.page-faq .faq-fact__label {
  font-size: 13px;
  color: var(--grey);
}

/* ── 两栏布局 ── */
.page-faq .faq-layout {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .page-faq .faq-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 96px;
    align-items: start;
  }
}

/* ── 左侧目录 ── */
.page-faq .faq-toc {
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
}

.page-faq .faq-toc .toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey);
  margin: 0 0 12px;
  text-transform: uppercase;
}

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

.page-faq .faq-toc .toc__link {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-faq .faq-toc .toc__link:hover {
  color: var(--ochre);
  border-bottom-color: var(--gold);
}

.page-faq .faq-toc .toc__link[aria-current="true"] {
  color: var(--ochre);
  font-weight: 700;
  border-bottom-color: var(--ochre);
}

@media (max-width: 899px) {
  .page-faq .faq-toc {
    padding: 16px;
  }

  .page-faq .faq-toc .toc__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .page-faq .faq-toc .toc__list > li {
    flex: 0 0 auto;
  }

  .page-faq .faq-toc .toc__link {
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--lake-light);
    border-bottom: 1px solid var(--lake-light);
    font-size: 12px;
  }

  .page-faq .faq-toc .toc__link[aria-current="true"] {
    background: var(--ochre);
    color: var(--paper);
    border-color: var(--ochre);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.page-faq .faq-toc__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lake-light);
}

.page-faq .faq-toc__note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey);
}

.page-faq .faq-toc__note .mono {
  font-size: 11px;
  color: var(--ochre);
  letter-spacing: 0.04em;
}

/* ── 右侧正文 ── */
.page-faq .guide-section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(127, 169, 164, 0.45);
}

.page-faq .guide-section:first-child {
  padding-top: 0;
}

.page-faq .guide-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

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

.page-faq .faq-section__num {
  color: var(--ochre);
  font-size: 12px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.page-faq .faq-section__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.2;
  margin: 0;
}

.page-faq .prose {
  max-width: 64ch;
  line-height: 1.85;
  margin: 0 0 14px;
}

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

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

.page-faq .faq-inline-link:hover {
  color: var(--flare);
}

/* 配图 */
.page-faq .faq-figure {
  margin: 24px 0;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
}

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

.page-faq .faq-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--lake-light);
  font-size: 11px;
  color: var(--grey);
  background: var(--cream);
}

/* 条目结构列表 */
.page-faq .faq-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--lake-light);
  border-left: 4px solid var(--ochre);
  display: grid;
  gap: 10px;
}

.page-faq .faq-list li {
  font-size: 15px;
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}

.page-faq .faq-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--ochre);
}

.page-faq .faq-list strong {
  color: var(--ochre-deep);
}

/* ── 常见问题 ── */
.page-faq .faq-questions {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-faq .faq-question {
  padding: 16px 0;
  border-bottom: 1px dashed var(--lake-light);
}

.page-faq .faq-question:first-child {
  padding-top: 0;
}

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

.page-faq .faq-question dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.page-faq .faq-question dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--grey);
  max-width: 62ch;
}

/* ── 底部联系区 ── */
.page-faq .faq-cta {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

@media (min-width: 900px) {
  .page-faq .faq-cta {
    padding-bottom: 96px;
  }
}

.page-faq .faq-cta__inner {
  position: relative;
  border: var(--bd);
  box-shadow: var(--shadow);
  background: var(--paper);
  padding: 40px 24px 32px;
  overflow: hidden;
  display: grid;
  gap: 24px;
}

.page-faq .faq-cta__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to right, var(--ochre) 0 40%, var(--lake) 40% 75%, var(--gold) 75% 100%);
}

@media (min-width: 720px) {
  .page-faq .faq-cta__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    padding: 44px 36px 36px;
    gap: 32px;
  }
}

.page-faq .faq-cta__text .eyebrow {
  color: var(--ochre);
  margin-bottom: 8px;
}

.page-faq .faq-cta__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.page-faq .faq-cta__desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--grey);
  max-width: 56ch;
  margin: 0;
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 720px) {
  .page-faq .faq-cta__actions {
    align-items: flex-start;
  }
}

.page-faq .faq-cta__actions .btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 720px) {
  .page-faq .faq-cta__actions .btn {
    width: auto;
  }
}

/* 触控与可读性兜底 */
.page-faq .btn,
.page-faq .toc__link,
.page-faq .faq-inline-link {
  -webkit-tap-highlight-color: transparent;
}

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