.page-faq {
  --faq-gap: clamp(1.5rem, 4vw, 3rem);
  --faq-line: 1px solid var(--sand);
  max-width: var(--shell-w);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

.page-faq a {
  color: var(--azurite);
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  gap: var(--faq-gap);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3.25rem);
  border-bottom: var(--faq-line);
}

.page-faq h1 {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.page-faq .faq-hero__lede {
  max-width: 46ch;
  margin: 1rem 0 0;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  color: var(--ink-soft);
}

.page-faq .faq-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--cinnabar);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.page-faq .faq-search__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding-right: 0.25rem;
}

.page-faq .faq-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--azurite);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid rgba(47, 100, 115, 0.35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  background: var(--azurite);
  border-color: var(--azurite);
  color: var(--paper);
}

.page-faq .faq-search__hint {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.page-faq .faq-hero__figure {
  margin: 0;
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: var(--faq-line);
}

/* ---------- 主体栅格 ---------- */
.page-faq .faq-body {
  display: grid;
  gap: var(--faq-gap);
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

.page-faq .faq-aside {
  border-top: 2px solid var(--ink);
  padding-top: 0.85rem;
}

.page-faq .faq-aside__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--cinnabar);
}

.page-faq .faq-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.page-faq .faq-aside__list a {
  display: block;
  padding: 0.5rem 0.6rem 0.5rem 0.85rem;
  border-left: 2px solid var(--sand);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-aside__list a:hover,
.page-faq .faq-aside__list a:focus-visible {
  border-left-color: var(--cinnabar);
  background: var(--paper-deep);
  color: var(--ink);
}

.page-faq .faq-copy {
  margin-top: 1rem;
}

/* ---------- 章节头 ---------- */
.page-faq .faq-section + .faq-section {
  margin-top: clamp(2.25rem, 6vw, 4rem);
}

.page-faq .faq-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--faq-line);
}

.page-faq .chapter-num {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
  color: var(--ochre);
}

.page-faq .faq-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.25;
}

.page-faq .faq-section__note {
  grid-column: 2;
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.page-faq .faq-download .faq-section__head {
  margin-bottom: 0.9rem;
}

/* ---------- 折叠面板 ---------- */
.page-faq .faq-folds {
  display: grid;
  gap: 0.55rem;
}

.page-faq .faq-fold {
  background: var(--paper-deep);
  border: var(--faq-line);
  border-left: 3px solid var(--azurite);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-fold[open] {
  background: var(--paper);
  border-left-color: var(--cinnabar);
}

.page-faq .faq-fold .fold__summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-fold .fold__summary::marker {
  content: "";
}

.page-faq .faq-fold .fold__summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ember);
}

.page-faq .faq-fold[open] .fold__summary::after {
  content: "–";
}

.page-faq .faq-fold .fold__body {
  padding: 0 1rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-fold .fold__body p {
  margin: 0 0 0.7rem;
}

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

/* ---------- 步骤与列表 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-faq .faq-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.page-faq .faq-step-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ochre);
  padding-top: 0.2rem;
}

.page-faq .faq-steps p {
  margin: 0;
}

.page-faq .faq-plain {
  list-style: none;
  margin: 0.2rem 0 0.7rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.page-faq .faq-plain li {
  position: relative;
  padding-left: 1rem;
}

.page-faq .faq-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--ochre);
  transform: rotate(45deg);
}

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

.page-faq .faq-code {
  display: block;
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--pine);
  background: var(--paper-deep);
  border-left: 2px solid var(--ochre);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------- 公告读法 ---------- */
.page-faq .faq-legend {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.page-faq .faq-legend__item {
  padding: 0.7rem 0.9rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--azurite);
}

.page-faq .faq-legend__item dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--azurite);
  margin-bottom: 0.2rem;
}

.page-faq .faq-legend__item dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-faq .faq-types {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-faq .faq-types li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--sand);
}

.page-faq .faq-types .tag {
  margin-right: 0.55rem;
}

.page-faq .faq-tip {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--pine);
  background: rgba(41, 71, 58, 0.07);
  border-left: 3px solid var(--pine);
}

/* ---------- 下载区 ---------- */
.page-faq .faq-download {
  display: grid;
  gap: 1.25rem;
}

.page-faq .faq-download__text p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-download__text .btn {
  margin-top: 0.35rem;
}

.page-faq .faq-download__figure {
  margin: 0;
}

.page-faq .faq-download__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border: var(--faq-line);
}

/* ---------- 仍未解决 ---------- */
.page-faq .faq-help {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--pine);
  color: var(--paper);
}

.page-faq .faq-help__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--ochre);
}

.page-faq .faq-help h2 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--paper);
}

.page-faq .faq-help p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: rgba(246, 240, 228, 0.82);
}

.page-faq .faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.page-faq .faq-help__actions .btn--ghost {
  color: var(--paper);
  border-color: rgba(246, 240, 228, 0.45);
}

.page-faq .faq-help__actions .btn--ghost:hover,
.page-faq .faq-help__actions .btn--ghost:focus-visible {
  background: rgba(246, 240, 228, 0.12);
  color: var(--paper);
}

.page-faq .faq-help__meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(246, 240, 228, 0.62);
}

.page-faq .faq-backtop {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--sand);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-backtop:hover,
.page-faq .faq-backtop:focus-visible {
  background: var(--paper-deep);
  border-color: var(--ochre);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-download {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-faq .faq-hero__figure img {
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 1000px) {
  .page-faq .faq-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    align-items: start;
  }

  .page-faq .faq-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-faq .faq-download {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .faq-aside__list a,
  .page-faq .faq-fold,
  .page-faq .faq-backtop {
    transition: none;
  }
}
<<<END>>>

等等——我需要在最后输出 `<<<END>>>` 吗？说明里写的是“严格按照以下标记顺序输出，每个标记只能出现一次”，并且给出了 MAIN_HTML 和 PAGE_CSS 两个标记。没有要求 END 标记。我应该移除 `<<<END>>>`。

还有，“按关键词”这个标签指向 #faq-list——那没问题，但“按栏目”指向 #handbook，而 #handbook 是“五个最常被问到的操作”，这不太算栏目。算了，“按栏目”在语义上指向操作帮助。嗯，也许把“按栏目”指向 /features/ 更好？但那样就跨页面了。还是保持指向 #handbook 吧。

其实我再想想：这三个标签应该分别引导到检索方法上。按栏目 → #handbook（教你怎么按栏目找）——可以接受。

再检查一下 copy-btn 的 data-copy 值：`/help-center/`——没问题。

移除 END 标记。
<main id="main-content" class="page-faq">
  <nav class="breadcrumb" aria-label="面包屑">
    <ol class="breadcrumb__list">
      <li><a href="/">首页</a></li>
      <li class="breadcrumb__current" aria-current="page">帮助文档</li>
    </ol>
  </nav>

  <header class="faq-hero" data-reveal>
    <div class="faq-hero__copy">
      <p class="eyebrow">帮助文档</p>
      <h1>临时查一个信息，从这一步开始</h1>
      <p class="faq-hero__lede">牌乐门把查资料这件事做得直一些：如果您只是临时查一个信息，用下面的标签按栏目、按时间线或按关键词去找；要读公告、认版本、取文件，照着步骤做就能走完。</p>
      <div class="faq-search" role="group" aria-label="选择检索方式">
        <span class="faq-search__label">按什么找</span>
        <a class="faq-chip" href="#handbook">按栏目</a>
        <a class="faq-chip" href="#press-reading">按时间线</a>
        <a class="faq-chip" href="#faq-list">按关键词</a>
      </div>
      <p class="faq-search__hint">手机端从首页直达入口进来，落点就是这块检索区，不用再往回翻一层。</p>
    </div>
    <figure class="faq-hero__figure">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="门形轮廓围合检索栏与分叉路径箭头的抽象图形，石青与土黄色块横向展开">
    </figure>
  </header>

  <div class="faq-body">
    <aside class="faq-aside" aria-labelledby="faq-hot-title">
      <p class="faq-aside__title" id="faq-hot-title">大家都在这几处卡住</p>
      <ul class="faq-aside__list">
        <li><a href="#q-first">第一次来，先看哪里</a></li>
        <li><a href="#q-mobile">手机上怎么查</a></li>
        <li><a href="#q-cadence">公告多久更新一次</a></li>
        <li><a href="#q-mail">邮件标题怎么写</a></li>
        <li><a href="#q-cite">引用资料要标什么</a></li>
      </ul>
      <button class="copy-btn faq-copy" type="button" data-copy="/help-center/">复制本页链接</button>
    </aside>

    <div class="faq-content">
      <section class="faq-section" id="handbook" aria-labelledby="handbook-title" data-reveal>
        <div class="faq-section__head">
          <span class="chapter-num" aria-hidden="true">01</span>
          <h2 class="faq-section__title" id="handbook-title">五个最常被问到的操作</h2>
          <p class="faq-section__note">点开标题就能看到完整步骤，跟着做一遍就熟了</p>
        </div>

        <div class="faq-folds">
          <details class="fold faq-fold">
            <summary class="fold__summary">某个栏目最近动过没有，在哪里看？</summary>
            <div class="fold__body">
              <ol class="faq-steps">
                <li><span class="faq-step-num">01</span><p>打开「公告与变更」，页面顶部是按时间排的条目，最新的排在最前。</p></li>
                <li><span class="faq-step-num">02</span><p>看每条旁边的「影响栏目」，确认是不是您关心的那一块。</p></li>
                <li><span class="faq-step-num">03</span><p>用栏目筛选把范围收窄，只留下相关记录，再逐条读摘要。</p></li>
                <li><span class="faq-step-num">04</span><p>需要细节时点进对应栏目，看改动落在哪一段、哪一张表。</p></li>
              </ol>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">目录更新和网页变更说明，是两个东西吗？</summary>
            <div class="fold__body">
              <p>是两个角度，但摆在同一条时间线上，方便对照着看。</p>
              <ul class="faq-plain">
                <li><strong>目录更新</strong>讲的是栏目本身的调整：新增、合并、改名或者换了所在位置。</li>
                <li><strong>网页变更说明</strong>讲的是某一页里的内容变化：文字改了、数据换了、附件补了。</li>
              </ul>
              <p>读的时候先看标签判断是哪一类，再决定要不要点进原页面。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">要用的模板和资料，去哪里取？</summary>
            <div class="fold__body">
              <p>资源下载区就在公告专区下方，不用再绕回首页。</p>
              <ol class="faq-steps">
                <li><span class="faq-step-num">01</span><p>先在公告专区找到对应当前任务的条目，读它的说明和适用场景。</p></li>
                <li><span class="faq-step-num">02</span><p>确认版本号和日期，避免拿到已经换过结构的旧文件。</p></li>
                <li><span class="faq-step-num">03</span><p>再进下载区取文件，文件里保留了来源标识，方便日后追溯。</p></li>
              </ol>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">版本号那一串数字，怎么读？</summary>
            <div class="fold__body">
              <p>采用「主版本.次版本.修订号」三段式，越往左改动越大。当前内容规范为 4.2 版。</p>
              <ul class="faq-plain">
                <li><strong>主版本</strong>：整体目录结构或分类方式重做时才会进位。</li>
                <li><strong>次版本</strong>：新增栏目、调整栏目层级时进位。</li>
                <li><strong>修订号</strong>：只做文字修正、条目补充时进位。</li>
              </ul>
              <p>看到 4.2 说明这是一次结构调整后的版本，读细则请回到对应公告条目。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">资料能直接引用吗，标注怎么写？</summary>
            <div class="fold__body">
              <p>可以引用。为了让对方能找回原文，标注要带齐三项：栏目、版本号、公告条目。</p>
              <code class="faq-code">牌乐门 · 栏目：渠道资料包 · 版本：4.2 · 条目：目录更新-034</code>
              <p>下载的文件另外保留来源标识，转发给同事时不要删掉。更细的规则写在<a href="/instructions/">使用说明</a>里。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-section" id="press-reading" aria-labelledby="press-title" data-reveal>
        <div class="faq-section__head">
          <span class="chapter-num" aria-hidden="true">02</span>
          <h2 class="faq-section__title" id="press-title">一条公告里，先看这四项</h2>
          <p class="faq-section__note">每一条都标好了，从上往下读一遍就知道要不要跟进</p>
        </div>

        <dl class="faq-legend">
          <div class="faq-legend__item">
            <dt>版本号</dt>
            <dd>这条改动属于哪一版，和您手头文件的版本对得上就不用重做。</dd>
          </div>
          <div class="faq-legend__item">
            <dt>影响栏目</dt>
            <dd>改动落在哪些栏目，据此判断要不要回去重看那几页。</dd>
          </div>
          <div class="faq-legend__item">
            <dt>变更类型</dt>
            <dd>决定这条是结构变了还是内容变了，处理方式不一样。</dd>
          </div>
          <div class="faq-legend__item">
            <dt>摘要</dt>
            <dd>一两句话说清改了什么，多数时候读完这段就够了。</dd>
          </div>
        </dl>

        <ul class="faq-types">
          <li><span class="tag tag--cinnabar">目录更新</span>栏目名称、层级或所在位置发生调整。</li>
          <li><span class="tag tag--azurite">页面变更</span>某一页的文字、图表或附件发生变化。</li>
          <li><span class="tag tag--ochre">资料补充</span>已有栏目里加进了新的条目和文件。</li>
          <li><span class="tag tag--pine">服务通知</span>接待时间、协作方式一类的运营信息。</li>
          <li><span class="tag tag--ochre">专题归档</span>按主题把一段时间内的资料归到一处。</li>
        </ul>

        <p class="faq-tip">一周两次例行更新，重大改动当天另发一条说明。想按主题翻旧账，去专题归档看丝路纹样、品牌视觉资产、渠道资料包、帮助文档这四个主题。</p>
      </section>

      <section class="faq-section" id="downloads" aria-labelledby="downloads-title" data-reveal>
        <div class="faq-download">
          <div class="faq-download__text">
            <div class="faq-section__head">
              <span class="chapter-num" aria-hidden="true">03</span>
              <h2 class="faq-section__title" id="downloads-title">取文件之前，先花一分钟看说明</h2>
            </div>
            <p>下载区一共备了 9 类文档模板和 23 份品牌资料汇编，覆盖日常提案、渠道分发和归档三种用途。顺序建议是先看说明、再取文件。</p>
            <ul class="faq-plain">
              <li>模板类文件按用途分开放，拿到手改几处就能用。</li>
              <li>汇编类文件体量大，先看目录页确认是不是您要的那一版。</li>
              <li>文件里保留了来源标识，二次转发请一并带上。</li>
            </ul>
            <a class="btn btn--ghost btn--sm" href="/press/">去公告与变更取文件</a>
          </div>
          <figure class="faq-download__figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="叠放的纸质索引卡与折叠面板抽象静物，丝路线条穿插其间" loading="lazy" decoding="async">
          </figure>
        </div>
      </section>

      <section class="faq-section" id="faq-list" aria-labelledby="faqlist-title" data-reveal>
        <div class="faq-section__head">
          <span class="chapter-num" aria-hidden="true">04</span>
          <h2 class="faq-section__title" id="faqlist-title">十个常见问题</h2>
          <p class="faq-section__note">按顺序排的，从上往下看通常能连起来</p>
        </div>

        <div class="faq-folds">
          <details class="fold faq-fold" id="q-first">
            <summary class="fold__summary">第一次来，先看哪里比较快？</summary>
            <div class="fold__body">
              <p>看您手里有什么线索。只想确认某个栏目动没动，直接进<a href="/press/">公告与变更</a>看最上面几条；已经知道栏目名，从<a href="/features/">资料整合服务</a>找到对应记录区，路径更短。</p>
            </div>
          </details>

          <details class="fold faq-fold" id="q-mobile">
            <summary class="fold__summary">在手机上能查吗？</summary>
            <div class="fold__body">
              <p>能。移动端首页设了查信息的直达入口，比旧版路径少一步，点进来就是本页的检索区。三个标签在窄屏上横向排列，手指滑动就能选。</p>
            </div>
          </details>

          <details class="fold faq-fold" id="q-cadence">
            <summary class="fold__summary">公告多久更新一次？</summary>
            <div class="fold__body">
              <p>每周二、周五做例行更新，碰上重大改动当天再加发一条说明。所以您隔两三天来看，基本都能碰到新条目。</p>
            </div>
          </details>

          <details class="fold faq-fold" id="q-mail">
            <summary class="fold__summary">发邮件咨询，标题怎么写？</summary>
            <div class="fold__body">
              <p>标题里注明「牌乐门信息查询」，正文写清要查的栏目名或公告条目，能附上您看到的版本号更好。工作日的邮件会在 1 个工作日内回复。</p>
            </div>
          </details>

          <details class="fold faq-fold" id="q-cite">
            <summary class="fold__summary">引用资料要标什么？</summary>
            <div class="fold__body">
              <p>栏目、版本号、公告条目三项缺一不可，这样对方能顺着标回原文。下载的文件保留来源标识，对外分享时别把那行字裁掉。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">三种筛选方式，我该用哪个？</summary>
            <div class="fold__body">
              <ul class="faq-plain">
                <li>记得栏目名，用<strong>按栏目</strong>，一步到位。</li>
                <li>不记得栏目但大概知道时间，用<strong>按时间线</strong>，顺着日期往回翻。</li>
                <li>只记得一个词，比如文件名里的关键词，用<strong>按关键词</strong>。</li>
              </ul>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">专题归档是怎么分的？</summary>
            <div class="fold__body">
              <p>按主题归到四处：丝路纹样、品牌视觉资产、渠道资料包、帮助文档。做活动物料的同事常看第一和第三类，做门店分发的同事常看第三类。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">「影响栏目」这一项到底有什么用？</summary>
            <div class="fold__body">
              <p>它直接告诉您这次改动波及哪些栏目。如果您手头的文件和被点名的栏目有关，就值得点进去重看一遍；没点名，就可以先放着。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">资料补充和目录更新差在哪？</summary>
            <div class="fold__body">
              <p>资料补充是在原有栏目里加东西，栏目本身没变，路径照旧；目录更新是栏目结构动了，原来的入口位置可能挪了，需要重新记一下怎么走。</p>
            </div>
          </details>

          <details class="fold faq-fold">
            <summary class="fold__summary">实在找不到要的那份，怎么办？</summary>
            <div class="fold__body">
              <p>带上您记得的栏目名、大概时间和用途，从<a href="/reach-us/">联系与对接</a>找到对应渠道说一声，我们帮您定位到具体条目。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-section" id="still-stuck" aria-labelledby="stuck-title" data-reveal>
        <div class="cut-panel cut-panel--pine faq-help">
          <p class="faq-help__label">还没找到答案</p>
          <h2 id="stuck-title">把要查的东西说清楚，我们帮您定位</h2>
          <p>写清栏目名、公告标题里能记住的几个字，以及您打算拿这份资料做什么。信息给得越具体，回复时能直接给到条目和文件。</p>
          <div class="faq-help__actions">
            <a class="btn btn--solid" href="/reach-us/">联系与对接</a>
            <a class="btn btn--ghost" href="/instructions/">查看使用说明</a>
          </div>
          <p class="faq-help__meta">邮件标题请注明「牌乐门信息查询」· 工作日 9:30-17:30 接待 · 1 个工作日内回复</p>
        </div>
        <button class="faq-backtop" type="button" data-to-top>回到顶部</button>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-gap: clamp(1.5rem, 4vw, 3rem);
  --faq-line: 1px solid var(--sand);
  max-width: var(--shell-w);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

.page-faq a {
  color: var(--azurite);
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  gap: var(--faq-gap);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3.25rem);
  border-bottom: var(--faq-line);
}

.page-faq h1 {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.page-faq .faq-hero__lede {
  max-width: 46ch;
  margin: 1rem 0 0;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  color: var(--ink-soft);
}

.page-faq .faq-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--cinnabar);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.page-faq .faq-search__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding-right: 0.25rem;
}

.page-faq .faq-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--azurite);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid rgba(47, 100, 115, 0.35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  background: var(--azurite);
  border-color: var(--azurite);
  color: var(--paper);
}

.page-faq .faq-search__hint {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.page-faq .faq-hero__figure {
  margin: 0;
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: var(--faq-line);
}

/* ---------- 主体栅格 ---------- */
.page-faq .faq-body {
  display: grid;
  gap: var(--faq-gap);
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

.page-faq .faq-aside {
  border-top: 2px solid var(--ink);
  padding-top: 0.85rem;
}

.page-faq .faq-aside__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--cinnabar);
}

.page-faq .faq-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.page-faq .faq-aside__list a {
  display: block;
  padding: 0.5rem 0.6rem 0.5rem 0.85rem;
  border-left: 2px solid var(--sand);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-aside__list a:hover,
.page-faq .faq-aside__list a:focus-visible {
  border-left-color: var(--cinnabar);
  background: var(--paper-deep);
  color: var(--ink);
}

.page-faq .faq-copy {
  margin-top: 1rem;
}

/* ---------- 章节头 ---------- */
.page-faq .faq-section + .faq-section {
  margin-top: clamp(2.25rem, 6vw, 4rem);
}

.page-faq .faq-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--faq-line);
}

.page-faq .chapter-num {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
  color: var(--ochre);
}

.page-faq .faq-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.25;
}

.page-faq .faq-section__note {
  grid-column: 2;
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.page-faq .faq-download .faq-section__head {
  margin-bottom: 0.9rem;
}

/* ---------- 折叠面板 ---------- */
.page-faq .faq-folds {
  display: grid;
  gap: 0.55rem;
}

.page-faq .faq-fold {
  background: var(--paper-deep);
  border: var(--faq-line);
  border-left: 3px solid var(--azurite);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-fold[open] {
  background: var(--paper);
  border-left-color: var(--cinnabar);
}

.page-faq .faq-fold .fold__summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-fold .fold__summary::marker {
  content: "";
}

.page-faq .faq-fold .fold__summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ember);
}

.page-faq .faq-fold[open] .fold__summary::after {
  content: "–";
}

.page-faq .faq-fold .fold__body {
  padding: 0 1rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-fold .fold__body p {
  margin: 0 0 0.7rem;
}

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

/* ---------- 步骤与列表 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-faq .faq-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.page-faq .faq-step-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ochre);
  padding-top: 0.2rem;
}

.page-faq .faq-steps p {
  margin: 0;
}

.page-faq .faq-plain {
  list-style: none;
  margin: 0.2rem 0 0.7rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.page-faq .faq-plain li {
  position: relative;
  padding-left: 1rem;
}

.page-faq .faq-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--ochre);
  transform: rotate(45deg);
}

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

.page-faq .faq-code {
  display: block;
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--pine);
  background: var(--paper-deep);
  border-left: 2px solid var(--ochre);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------- 公告读法 ---------- */
.page-faq .faq-legend {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.page-faq .faq-legend__item {
  padding: 0.7rem 0.9rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--azurite);
}

.page-faq .faq-legend__item dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--azurite);
  margin-bottom: 0.2rem;
}

.page-faq .faq-legend__item dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-faq .faq-types {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-faq .faq-types li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--sand);
}

.page-faq .faq-types .tag {
  margin-right: 0.55rem;
}

.page-faq .faq-tip {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--pine);
  background: rgba(41, 71, 58, 0.07);
  border-left: 3px solid var(--pine);
}

/* ---------- 下载区 ---------- */
.page-faq .faq-download {
  display: grid;
  gap: 1.25rem;
}

.page-faq .faq-download__text p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-download__text .btn {
  margin-top: 0.35rem;
}

.page-faq .faq-download__figure {
  margin: 0;
}

.page-faq .faq-download__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border: var(--faq-line);
}

/* ---------- 仍未解决 ---------- */
.page-faq .faq-help {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--pine);
  color: var(--paper);
}

.page-faq .faq-help__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--ochre);
}

.page-faq .faq-help h2 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--paper);
}

.page-faq .faq-help p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: rgba(246, 240, 228, 0.82);
}

.page-faq .faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.page-faq .faq-help__actions .btn--ghost {
  color: var(--paper);
  border-color: rgba(246, 240, 228, 0.45);
}

.page-faq .faq-help__actions .btn--ghost:hover,
.page-faq .faq-help__actions .btn--ghost:focus-visible {
  background: rgba(246, 240, 228, 0.12);
  color: var(--paper);
}

.page-faq .faq-help__meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(246, 240, 228, 0.62);
}

.page-faq .faq-backtop {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--sand);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-backtop:hover,
.page-faq .faq-backtop:focus-visible {
  background: var(--paper-deep);
  border-color: var(--ochre);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-download {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-faq .faq-hero__figure img {
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 1000px) {
  .page-faq .faq-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    align-items: start;
  }

  .page-faq .faq-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-faq .faq-download {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .faq-aside__list a,
  .page-faq .faq-fold,
  .page-faq .faq-backtop {
    transition: none;
  }
}