.page-faq {
  background: var(--ink);
  color: var(--dim);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-faq .container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 56px);
  box-sizing: border-box;
}

.page-faq a {
  color: var(--amber);
  text-decoration: none;
}

.page-faq .faq-hero {
  position: relative;
  padding-block: clamp(22px, 4.5vw, 40px) clamp(30px, 6vw, 60px);
  background:
    radial-gradient(110% 82% at 88% 2%, rgba(232, 178, 74, 0.16), transparent 62%),
    radial-gradient(92% 72% at 2% 98%, rgba(31, 111, 99, 0.20), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255, 217, 138, 0.045) 0 1px, transparent 1px 8px);
}

.page-faq .faq-hero > .container {
  position: relative;
  z-index: 1;
}

.page-faq .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 4vw, 32px);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--dim);
}

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

.page-faq .breadcrumbs a:hover {
  color: var(--amber);
}

.page-faq .breadcrumbs__sep {
  color: var(--amber);
  opacity: 0.6;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
}

.page-faq .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-faq .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber);
  flex: none;
}

.page-faq .faq-hero__title {
  margin: 0 0 clamp(14px, 2.4vw, 22px);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 3.55rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__title em {
  position: relative;
  font-style: normal;
  color: var(--amber);
  white-space: nowrap;
}

.page-faq .faq-hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.page-faq .faq-hero__lead {
  max-width: 36em;
  margin: 0;
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  line-height: 1.9;
  color: var(--dim);
}

.page-faq .faq-hero__stats {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: clamp(16px, 2.4vw, 22px) 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
}

.page-faq .faq-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-faq .faq-hero__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-faq .faq-hero__label {
  font-size: 0.77rem;
  line-height: 1.65;
  color: var(--dim);
}

.page-faq .faq-hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.page-faq .faq-hero__figure::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(232, 178, 74, 0.28), transparent 70%);
  pointer-events: none;
}

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

.page-faq .faq-index {
  padding-block: clamp(28px, 5vw, 52px);
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-index__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-faq .faq-index__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-index__sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--dim);
}

.page-faq .faq-search {
  position: relative;
  box-sizing: border-box;
  padding: 10px 14px 12px 17px;
  background: var(--ink-3);
  border: 1px solid var(--line);
}

.page-faq .faq-search::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber);
}

.page-faq .faq-search__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-faq .faq-search__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--paper);
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.page-faq .faq-search__input::placeholder {
  color: rgba(201, 192, 175, 0.55);
}

.page-faq .faq-search__input:focus {
  border-bottom-color: var(--amber);
}

.page-faq .faq-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-faq .faq-topics > li {
  display: flex;
}

.page-faq .faq-topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px 16px 18px;
  background: var(--ink-2);
  color: var(--dim);
  border-left: 2px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-topic:hover,
.page-faq .faq-topic:focus-visible {
  background: var(--ink-3);
  border-left-color: var(--amber);
}

.page-faq .faq-topic__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-faq .faq-topic__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-topic__desc {
  font-size: 0.77rem;
  line-height: 1.7;
  color: rgba(201, 192, 175, 0.85);
}

.page-faq .faq-body {
  padding-block: clamp(30px, 5vw, 58px) clamp(40px, 7vw, 84px);
  background: var(--ink);
}

.page-faq .faq-layout {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

.page-faq .faq-nav {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.page-faq .faq-nav__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.page-faq .faq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-faq .faq-nav__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--dim);
  border-left: 2px solid transparent;
  background: transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-faq .faq-nav__link:hover,
.page-faq .faq-nav__link:focus-visible {
  color: var(--paper);
  border-left-color: var(--amber);
  background: var(--ink-2);
}

.page-faq .faq-nav__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  flex: none;
}

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

.page-faq .faq-drawer {
  scroll-margin-top: 84px;
  padding-block: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-drawers > .faq-drawer:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-faq .faq-drawer__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.page-faq .faq-drawer__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 4vw, 2.05rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(232, 178, 74, 0.5);
  -webkit-text-stroke: 1px var(--amber);
}

.page-faq .faq-drawer__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.12rem, 3vw, 1.48rem);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--paper);
}

.page-faq .faq-drawer__intro {
  margin: 0 0 8px;
  padding: 14px 16px;
  background: var(--paper);
  color: var(--dark-text);
  border-left: 3px solid var(--clay);
  box-shadow: 4px 4px 0 rgba(232, 178, 74, 0.14);
  font-size: 0.85rem;
  line-height: 1.85;
}

.page-faq .faq-drawer__intro a {
  color: var(--clay);
  border-bottom: 1px solid rgba(122, 46, 34, 0.45);
  padding-bottom: 1px;
}

.page-faq .faq-drawer__intro a:hover {
  color: var(--dark-text);
}

.page-faq .qa {
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .qa:last-of-type {
  border-bottom: 0;
}

.page-faq .qa__q {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 34px 15px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(0.93rem, 2vw, 1.03rem);
  line-height: 1.6;
  color: var(--paper);
  transition: color 0.2s var(--ease);
}

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

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

.page-faq .qa__q::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--amber);
  border-bottom: 1.5px solid var(--amber);
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}

.page-faq .qa[open] .qa__q::after {
  transform: rotate(-135deg);
}

.page-faq .qa__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  padding-top: 0.28em;
}

.page-faq .qa__a {
  padding: 0 34px 18px 2px;
  animation: faqAnswer 0.26s var(--ease);
}

.page-faq .qa__a p {
  max-width: 40em;
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.9;
  color: var(--dim);
}

.page-faq .qa__a a {
  color: var(--amber);
  border-bottom: 1px solid var(--line);
}

@keyframes faqAnswer {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-faq .faq-help {
  position: relative;
  scroll-margin-top: 84px;
  margin-top: clamp(30px, 5vw, 48px);
  padding: clamp(22px, 4vw, 40px);
  background: var(--paper);
  color: var(--dark-text);
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-faq .faq-help::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--clay) 58%, transparent);
}

.page-faq .faq-help__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-faq .faq-help .eyebrow {
  margin-bottom: 0;
  color: var(--clay);
}

.page-faq .faq-help .eyebrow::before {
  background: var(--clay);
}

.page-faq .faq-help__title {
  margin: 10px 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 3.2vw, 1.58rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--dark-text);
}

.page-faq .faq-help__lead {
  margin: 0 0 16px;
  font-size: 0.89rem;
  line-height: 1.85;
  color: rgba(36, 31, 24, 0.82);
}

.page-faq .faq-help__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-faq .faq-help__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--dark-text);
}

.page-faq .faq-help__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--clay);
}

.page-faq .faq-help__contact {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(122, 46, 34, 0.28);
}

.page-faq .faq-help__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.page-faq .faq-help__label {
  flex: none;
  min-width: 62px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--clay);
}

.page-faq .faq-help__value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-text);
  word-break: break-all;
}

.page-faq .faq-help__note {
  margin: 6px 0 0;
  font-size: 0.77rem;
  line-height: 1.75;
  color: rgba(36, 31, 24, 0.7);
}

.page-faq .faq-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  font-size: 0.81rem;
}

.page-faq .faq-help__links a {
  color: var(--clay);
  border-bottom: 1px solid rgba(122, 46, 34, 0.42);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-help__links a:hover {
  color: var(--dark-text);
  border-bottom-color: var(--dark-text);
}

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

.page-faq .faq-help__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid rgba(36, 31, 24, 0.22);
}

@media (min-width: 620px) {
  .page-faq .faq-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
    align-items: end;
  }

  .page-faq .faq-index__head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 352px);
    align-items: end;
  }

  .page-faq .faq-help__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

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

  .page-faq .faq-nav {
    position: sticky;
    top: clamp(20px, 4vw, 44px);
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }

  .page-faq .faq-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-nav__link {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1000px) {
  .page-faq .faq-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .page-faq .qa__q {
    padding-right: 28px;
  }

  .page-faq .qa__a {
    padding-right: 16px;
  }

  .page-faq .faq-hero__title em {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa__a {
    animation: none;
  }

  .page-faq .qa__q::after,
  .page-faq .faq-topic,
  .page-faq .faq-nav__link {
    transition: none;
  }
}
<<<END>>>

等等，输出格式要求以  开头，然后是 ，不要 END 标记。我把 END 删掉，顺便修一下 HTML 里两个手滑打错的地方（`< a>` 应该是 `<a>`）。再检查一下。

另外 `.faq-search__input` 的输入框——虽然没接 JS，但也没关系。

`.page-faq .faq-help__note` 里那个破折号都没问题。

把 `< a>` 改掉，输出。
<main id="main-content" class="page-faq">
  <div class="faq-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <a href="/">金版封面</a>
        <span class="breadcrumbs__sep" aria-hidden="true">/</span>
        <span aria-current="page">帮助中心</span>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="eyebrow">客服组答疑 · 第 2407-674 批次</p>
          <h1 class="faq-hero__title">卡在哪一步，<br>就从<em>哪一步</em>往下找</h1>
          <p class="faq-hero__lead">换版本、找条目、翻旧批次，最常见的障碍都收在这里。澳门黄金金版把每个答案写成先做什么、再做什么，照着走一遍通常就能通；实在不通，末尾有直接找到客服的方式。</p>
          <ul class="faq-hero__stats">
            <li>
              <span class="faq-hero__num">96</span>
              <span class="faq-hero__label">条问答，按六个主题归类</span>
            </li>
            <li>
              <span class="faq-hero__num">24</span>
              <span class="faq-hero__label">条最常被问到的，排在最前</span>
            </li>
            <li>
              <span class="faq-hero__num">6</span>
              <span class="faq-hero__label">位客服在工作日 9:00–18:00 接信</span>
            </li>
          </ul>
        </div>
        <figure class="faq-hero__figure media media--4x3">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="深色档案抽屉半开，露出成排金色索引标签的微距质感">
        </figure>
      </div>
    </div>
  </div>

  <section class="faq-index" id="topics" aria-labelledby="faq-index-title">
    <div class="container">
      <div class="faq-index__head">
        <div>
          <h2 class="faq-index__title" id="faq-index-title">先挑一个主题</h2>
          <p class="faq-index__sub">问题一般落在六个方向之一，选对了能省掉一半翻找。</p>
        </div>
        <div class="faq-search">
          <label class="faq-search__label" for="faq-filter">输入关键字过滤问题</label>
          <input class="faq-search__input" id="faq-filter" name="faq-filter" type="search" placeholder="版本号、批次号、回访说明…" autocomplete="off">
        </div>
      </div>

      <ol class="faq-topics">
        <li>
          <a class="faq-topic" href="#q-version">
            <span class="faq-topic__num">01</span>
            <span class="faq-topic__name">版本切换与下载</span>
            <span class="faq-topic__desc">v3.2 与 v2.8 怎么选、兼容版留多久、下载后怎么确认批次</span>
          </a>
        </li>
        <li>
          <a class="faq-topic" href="#q-list">
            <span class="faq-topic__num">02</span>
            <span class="faq-topic__name">服务清单查询</span>
            <span class="faq-topic__desc">28 项条目分在六个功能域里，怎么快速定位到具体一项</span>
          </a>
        </li>
        <li>
          <a class="faq-topic" href="#q-archive">
            <span class="faq-topic__num">03</span>
            <span class="faq-topic__name">旧版资料检索</span>
            <span class="faq-topic__desc">手上只有版本号或者只有批次号，各自怎么查得到</span>
          </a>
        </li>
        <li>
          <a class="faq-topic" href="#q-visit">
            <span class="faq-topic__num">04</span>
            <span class="faq-topic__name">回访与通知</span>
            <span class="faq-topic__desc">回访说明里有什么、多久回复、提醒怎么按需订阅</span>
          </a>
        </li>
        <li>
          <a class="faq-topic" href="#q-account">
            <span class="faq-topic__num">05</span>
            <span class="faq-topic__name">账号与权限</span>
            <span class="faq-topic__desc">查看、编辑、管理三级怎么给，成员进出怎么处理</span>
          </a>
        </li>
        <li>
          <a class="faq-topic" href="#q-privacy">
            <span class="faq-topic__num">06</span>
            <span class="faq-topic__name">隐私与使用范围</span>
            <span class="faq-topic__desc">提交的信息用在哪里，想查询或者想删除时怎么办</span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <div class="faq-body">
    <div class="container">
      <div class="faq-layout">
        <aside class="faq-nav" aria-label="主题目录">
          <p class="faq-nav__title">主题目录</p>
          <ol class="faq-nav__list">
            <li><a class="faq-nav__link" href="#q-version"><span class="faq-nav__num">01</span>版本切换与下载</a></li>
            <li><a class="faq-nav__link" href="#q-list"><span class="faq-nav__num">02</span>服务清单查询</a></li>
            <li><a class="faq-nav__link" href="#q-archive"><span class="faq-nav__num">03</span>旧版资料检索</a></li>
            <li><a class="faq-nav__link" href="#q-visit"><span class="faq-nav__num">04</span>回访与通知</a></li>
            <li><a class="faq-nav__link" href="#q-account"><span class="faq-nav__num">05</span>账号与权限</a></li>
            <li><a class="faq-nav__link" href="#q-privacy"><span class="faq-nav__num">06</span>隐私与使用范围</a></li>
          </ol>
        </aside>

        <div class="faq-drawers">
          <section class="faq-drawer" id="q-version" aria-labelledby="q-version-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">01</span>
              <h2 class="faq-drawer__title" id="q-version-title">版本切换与下载</h2>
            </header>
            <p class="faq-drawer__intro">刚拿到面板，或者准备把整个团队从旧版迁过去，先看这一组。两个版本现在都能下载，切换的节奏可以按自己的排期来。头一次接触的话，<a href="/instructions/">使用说明</a>里把版本号和批次号的关系讲得更细。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>v3.2 和 v2.8 该怎么选？</summary>
              <div class="qa__a"><p>日常检索和版本对照用得多的团队，直接上 v3.2，一级分类从四类变成六类，找条目的路径更短。现有文档已经按旧的四级分类建好映射关系的，可以先留 v2.8 跑一段时间，两个版本目前并行提供下载，不必一次全换。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>换到 v3.2 以后，原来的资料还找得到吗？</summary>
              <div class="qa__a"><p>找得到。v3.2 为旧版资料留了独立检索入口，按版本号、批次号、功能域都能定位。建议切换前把常用的批次号先记下来，换过去之后用批次号回查一遍，确认路径对得上，再把团队固定的那几条索引更新掉。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>兼容版会保留多久？</summary>
              <div class="qa__a"><p>v2.8 是上一稳定版本，只要还有客户在用，就继续保留可下载状态。团队规模大、需要较长时间并行过渡的，可以在领取回访说明时说明实际使用情况，会拿到一份按您排期给出的过渡建议。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q4</span>下载之后怎么确认拿到的是最新批次？</summary>
              <div class="qa__a"><p>打开面板首屏的版本铭牌，看批次号是不是第 2407-674 批次，再和下载页上标注的编号对一遍。两处一致就是本批次资料；对不上就回下载页重新取一次，把旧文件替换掉，避免两份混着用。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q5</span>手机上看面板方便吗？</summary>
              <div class="qa__a"><p>可以。面板在桌面端和移动端都做了自适应，首屏内容在常规网络下 1.2 秒内可见。在外面临时查一条服务条目，用手机打开就够；回到电脑前接着做版本对照，看到的还是同一份资料。</p></div>
            </details>
          </section>

          <section class="faq-drawer" id="q-list" aria-labelledby="q-list-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">02</span>
              <h2 class="faq-drawer__title" id="q-list-title">服务清单查询</h2>
            </header>
            <p class="faq-drawer__intro">清单重排之后按功能分组，先弄明白一件事属于哪个功能域，剩下的就好办了。这一组讲的就是怎么在最短时间里落到具体条目。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>怎么查澳门黄金金版网站下服务清单里的某一项？</summary>
              <div class="qa__a"><p>打开<a href="/download/">下载页</a>，清单按六个功能域分组列出，一共 28 项条目。先判断这项落在哪个域，再从对应分组里找，比从头翻要快得多。分组顺序固定，用两次基本就记住位置了。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>六个功能域分别管什么？</summary>
              <div class="qa__a"><p>账号与权限管谁能看什么；资料检索管找不找得到；版本对照管两个版本之间的差别怎么看；回访服务管后续跟进；通知提醒管什么时候该有消息；帮助支持管出了问题找谁。知道一项功能落在哪个域，基本就知道去哪个页面找说明。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>条目名称和我手上的旧文档对不上怎么办？</summary>
              <div class="qa__a"><p>重排后有部分条目换了归类位置，名称也做了统一。按功能域去比对，不要只按名称找。如果还是对不上，把旧文档里的条目名和您认为它该在的域一起发给客服，会有人帮您确认现在对应的位置。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q4</span>28 项是不是每一项都要用上？</summary>
              <div class="qa__a"><p>多数团队常用的是十来项，其余按需开启。清单完整列出，是为了让您在评估阶段就能看清有哪些可用功能，而不是要求全部启用。先按日常动作挑出必需项，用顺了再逐步加。</p></div>
            </details>
          </section>

          <section class="faq-drawer" id="q-archive" aria-labelledby="q-archive-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">03</span>
              <h2 class="faq-drawer__title" id="q-archive-title">旧版资料检索</h2>
            </header>
            <p class="faq-drawer__intro">手里的线索往往不完整——只剩一个批次号，或者只记得大概哪一年。这一组按线索多少给出三条路径，先宽后窄地筛，通常两次就能落到具体那份资料卡上。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>手里只有一个批次号，怎么找资料？</summary>
              <div class="qa__a"><p>在面板的检索入口选「按批次号」，把批次号原样输入，会返回该批次归档的清单、问答与说明。批次号一般印在文件页脚或资料卡右下角，一串数字，抄全了再查，少一位就对不上。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>只记得大概是哪一年用的版本呢？</summary>
              <div class="qa__a"><p>走版本号检索。资料档案库覆盖 v1.0 到 v3.2，共 1,240 份资料卡，先圈定版本区间，再按功能域缩一次范围。<a href="/insights/">更新记录</a>里每个版本都有发布说明，翻到对应那一期，也能反推出当时用的是哪一版。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>三种检索方式该怎么用？</summary>
              <div class="qa__a"><p>版本号检索适合只记得大概时间的情况；批次号检索最准，手里有原始文件时优先用它；功能域检索适合找「这类事当时是怎么规定的」。三种方式可以叠着用，先放宽再收窄，两次基本就能落到具体资料卡。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q4</span>档案库里最早能追到哪一版？</summary>
              <div class="qa__a"><p>能追到 v1.0。面板自 v1.0 起累计完成 37 次版本迭代，每一次的说明都留在更新记录里，按发布时间往下翻就能看到完整轨迹。要确认某个做法从哪一版开始有的，从最早那一期倒着找比正着找快。</p></div>
            </details>
          </section>

          <section class="faq-drawer" id="q-visit" aria-labelledby="q-visit-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">04</span>
              <h2 class="faq-drawer__title" id="q-visit-title">回访与通知</h2>
            </header>
            <p class="faq-drawer__intro">评估阶段想让人按自己的情况梳理一遍，或者只想收到某一类更新提醒，看这一组。情况比较复杂、涉及多人多角色的，直接去<a href="/cooperation/">回访与合作</a>说明会更省事。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>回访说明里都会写什么？</summary>
              <div class="qa__a"><p>一份版本适用建议、一份资料索引附表，加上后续使用提示。适用建议会结合您当前用的版本和团队规模给出切换节奏；索引附表列出与您场景相关的资料卡位置，拿到就能直接照着找。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>多久能收到？</summary>
              <div class="qa__a"><p>收到申请后 2 个工作日内发出。工作日上午发来的，通常当天或次日就能到。版本发布前后咨询会集中一些，按提交顺序依次回复；时间紧的话，在邮件标题里写明期望的时段即可。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>通知提醒能只订某一类吗？</summary>
              <div class="qa__a"><p>可以按功能域订阅。只关心版本对照和资料检索的，订这两类就够，其余关掉，邮箱里不会堆无关消息。版本发布属于全局通知，默认保留，避免错过批次更新。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q4</span>团队人多，能不能一次性把事情办完？</summary>
              <div class="qa__a"><p>涉及多人使用的，建议在回访与合作里说明团队规模与角色分工，会按权限分级给出一套配置建议，比自己一个个试省事。这种情况通常也适合约一场专场答疑，把版本切换和旧资料整理一起过一遍。</p></div>
            </details>
          </section>

          <section class="faq-drawer" id="q-account" aria-labelledby="q-account-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">05</span>
              <h2 class="faq-drawer__title" id="q-account-title">账号与权限</h2>
            </header>
            <p class="faq-drawer__intro">人多起来之后，权限怎么给往往比功能本身更费神。这一组的答案都按「稳一点、后续好改」的思路来，适合刚建团队或者准备调整分工的时候看。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>权限分级一般怎么设？</summary>
              <div class="qa__a"><p>常见的做法是三级：查看、编辑、管理。查看级能检索和阅读，编辑级能维护本团队的索引与备注，管理级能调整成员和订阅。按岗位给而不是按人给，人员变动的时候改起来省事。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>新成员进来从哪里开始？</summary>
              <div class="qa__a"><p>先给查看级，让他按主题过一遍这里最常问的条目，再去下载页对照服务清单熟悉六个功能域。一周后再按实际需要提权限，比一开始全开稳妥，也少出误操作。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>成员离开后原来的权限怎么处理？</summary>
              <div class="qa__a"><p>在管理级里把该成员移出，权限随账号一起失效，他维护过的索引和备注会留在团队空间里。每季度过一遍成员名单，把不再参与的人清掉，权限结构会一直保持清爽。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q4</span>不同团队之间会看到彼此的资料吗？</summary>
              <div class="qa__a"><p>不会。团队空间彼此独立，检索结果只返回本团队可见的资料卡。确实需要共享某份资料的，由管理级导出后按内部流程传递，比直接开权限更好追溯来源。</p></div>
            </details>
          </section>

          <section class="faq-drawer" id="q-privacy" aria-labelledby="q-privacy-title">
            <header class="faq-drawer__head">
              <span class="faq-drawer__num" aria-hidden="true">06</span>
              <h2 class="faq-drawer__title" id="q-privacy-title">隐私与使用范围</h2>
            </header>
            <p class="faq-drawer__intro">留下联系方式之前，多数人想先弄清楚会被用在哪里。这一组先回答最常问的三件事，逐条内容在<a href="/privacy-center/">隐私中心</a>里展开。</p>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q1</span>申请回访要提供哪些信息？</summary>
              <div class="qa__a"><p>常用的是联系人称呼、邮箱、当前使用的版本和大致的使用场景。这些信息只用来回复这一次申请，以及后续必要的版本提示。与申请无关的个人信息不必提供，提供了也只会用在回复本身。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q2</span>留下的邮箱会被用来做什么？</summary>
              <div class="qa__a"><p>用来发出回访说明和您订阅的通知，不会转给第三方。想停止接收时，在邮件里回复说明，或者下次沟通时告诉客服，之后就不再发送。</p></div>
            </details>

            <details class="qa">
              <summary class="qa__q"><span class="qa__mark">Q3</span>想查或者删掉之前提交的信息呢？</summary>
              <div class="qa__a"><p>用页脚标注的客服邮箱提出申请，写明提交时用的邮箱和大致时间，客服确认后会告知处理结果。信息类型、保存期限和可选择的做法，隐私中心里有逐条说明。</p></div>
            </details>
          </section>

          <section class="faq-help" id="q-help" aria-labelledby="q-help-title">
            <div class="faq-help__grid">
              <div>
                <p class="eyebrow">仍未解决</p>
                <h2 class="faq-help__title" id="q-help-title">把情况说清楚，一次就能问到点上</h2>
                <p class="faq-help__lead">按上面的主题走一遍还卡着，就直接联系客服。把下面几项写在信里，回复会快很多，也少来回几轮。</p>
                <ul class="faq-help__list">
                  <li>当前用的是 v3.2 还是 v2.8，两个版本的处理路径不一样</li>
                  <li>手上的批次号或资料卡编号，记得几位写几位</li>
                  <li>卡住的具体位置，比如哪个功能域、哪一步操作</li>
                  <li>方便接听电话的时段，需要电话沟通时用得上</li>
                </ul>
                <div class="faq-help__contact">
                  <div class="faq-help__row">
                    <span class="faq-help__label">客服邮箱</span>
                    <span class="faq-help__value">email@macau-golden.com.cn</span>
                  </div>
                  <div class="faq-help__row">
                    <span class="faq-help__label">电话</span>
                    <span class="faq-help__value">18743995617</span>
                  </div>
                  <p class="faq-help__note">该邮箱为站点客服邮箱，工作日 9:00–18:00 内回复；如需电话沟通，请在邮件中留下联系方式与方便接听时段。</p>
                </div>
                <p class="faq-help__links">
                  <a href="/cooperation/">领取版本回访说明</a>
                  <a href="/download/">查看面板下载</a>
                  <a href="/insights/">翻阅更新记录</a>
                </p>
              </div>
              <figure class="faq-help__figure">
                <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="细金线连接多个节点的抽象流程图，表现从提问到解决的处理路径" loading="lazy" decoding="async">
              </figure>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</main>

.page-faq {
  background: var(--ink);
  color: var(--dim);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-faq .container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 56px);
  box-sizing: border-box;
}

.page-faq a {
  color: var(--amber);
  text-decoration: none;
}

.page-faq .faq-hero {
  position: relative;
  padding-block: clamp(22px, 4.5vw, 40px) clamp(30px, 6vw, 60px);
  background:
    radial-gradient(110% 82% at 88% 2%, rgba(232, 178, 74, 0.16), transparent 62%),
    radial-gradient(92% 72% at 2% 98%, rgba(31, 111, 99, 0.20), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255, 217, 138, 0.045) 0 1px, transparent 1px 8px);
}

.page-faq .faq-hero > .container {
  position: relative;
  z-index: 1;
}

.page-faq .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 4vw, 32px);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--dim);
}

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

.page-faq .breadcrumbs a:hover {
  color: var(--amber);
}

.page-faq .breadcrumbs__sep {
  color: var(--amber);
  opacity: 0.6;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
}

.page-faq .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-faq .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber);
  flex: none;
}

.page-faq .faq-hero__title {
  margin: 0 0 clamp(14px, 2.4vw, 22px);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 3.55rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__title em {
  position: relative;
  font-style: normal;
  color: var(--amber);
  white-space: nowrap;
}

.page-faq .faq-hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.page-faq .faq-hero__lead {
  max-width: 36em;
  margin: 0;
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  line-height: 1.9;
  color: var(--dim);
}

.page-faq .faq-hero__stats {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: clamp(16px, 2.4vw, 22px) 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
}

.page-faq .faq-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-faq .faq-hero__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-faq .faq-hero__label {
  font-size: 0.77rem;
  line-height: 1.65;
  color: var(--dim);
}

.page-faq .faq-hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.page-faq .faq-hero__figure::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(232, 178, 74, 0.28), transparent 70%);
  pointer-events: none;
}

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

.page-faq .faq-index {
  padding-block: clamp(28px, 5vw, 52px);
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-index__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-faq .faq-index__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-index__sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--dim);
}

.page-faq .faq-search {
  position: relative;
  box-sizing: border-box;
  padding: 10px 14px 12px 17px;
  background: var(--ink-3);
  border: 1px solid var(--line);
}

.page-faq .faq-search::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber);
}

.page-faq .faq-search__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-faq .faq-search__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--paper);
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.page-faq .faq-search__input::placeholder {
  color: rgba(201, 192, 175, 0.55);
}

.page-faq .faq-search__input:focus {
  border-bottom-color: var(--amber);
}

.page-faq .faq-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-faq .faq-topics > li {
  display: flex;
}

.page-faq .faq-topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px 16px 18px;
  background: var(--ink-2);
  color: var(--dim);
  border-left: 2px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-topic:hover,
.page-faq .faq-topic:focus-visible {
  background: var(--ink-3);
  border-left-color: var(--amber);
}

.page-faq .faq-topic__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-faq .faq-topic__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-faq .faq-topic__desc {
  font-size: 0.77rem;
  line-height: 1.7;
  color: rgba(201, 192, 175, 0.85);
}

.page-faq .faq-body {
  padding-block: clamp(30px, 5vw, 58px) clamp(40px, 7vw, 84px);
  background: var(--ink);
}

.page-faq .faq-layout {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

.page-faq .faq-nav {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.page-faq .faq-nav__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.page-faq .faq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-faq .faq-nav__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--dim);
  border-left: 2px solid transparent;
  background: transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-faq .faq-nav__link:hover,
.page-faq .faq-nav__link:focus-visible {
  color: var(--paper);
  border-left-color: var(--amber);
  background: var(--ink-2);
}

.page-faq .faq-nav__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  flex: none;
}

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

.page-faq .faq-drawer {
  scroll-margin-top: 84px;
  padding-block: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-drawers > .faq-drawer:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-faq .faq-drawer__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.page-faq .faq-drawer__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 4vw, 2.05rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(232, 178, 74, 0.5);
  -webkit-text-stroke: 1px var(--amber);
}

.page-faq .faq-drawer__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.12rem, 3vw, 1.48rem);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--paper);
}

.page-faq .faq-drawer__intro {
  margin: 0 0 8px;
  padding: 14px 16px;
  background: var(--paper);
  color: var(--dark-text);
  border-left: 3px solid var(--clay);
  box-shadow: 4px 4px 0 rgba(232, 178, 74, 0.14);
  font-size: 0.85rem;
  line-height: 1.85;
}

.page-faq .faq-drawer__intro a {
  color: var(--clay);
  border-bottom: 1px solid rgba(122, 46, 34, 0.45);
  padding-bottom: 1px;
}

.page-faq .faq-drawer__intro a:hover {
  color: var(--dark-text);
}

.page-faq .qa {
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .qa:last-of-type {
  border-bottom: 0;
}

.page-faq .qa__q {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 34px 15px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(0.93rem, 2vw, 1.03rem);
  line-height: 1.6;
  color: var(--paper);
  transition: color 0.2s var(--ease);
}

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

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

.page-faq .qa__q::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--amber);
  border-bottom: 1.5px solid var(--amber);
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}

.page-faq .qa[open] .qa__q::after {
  transform: rotate(-135deg);
}

.page-faq .qa__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  padding-top: 0.28em;
}

.page-faq .qa__a {
  padding: 0 34px 18px 2px;
  animation: faqAnswer 0.26s var(--ease);
}

.page-faq .qa__a p {
  max-width: 40em;
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.9;
  color: var(--dim);
}

.page-faq .qa__a a {
  color: var(--amber);
  border-bottom: 1px solid var(--line);
}

@keyframes faqAnswer {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-faq .faq-help {
  position: relative;
  scroll-margin-top: 84px;
  margin-top: clamp(30px, 5vw, 48px);
  padding: clamp(22px, 4vw, 40px);
  background: var(--paper);
  color: var(--dark-text);
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-faq .faq-help::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--clay) 58%, transparent);
}

.page-faq .faq-help__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-faq .faq-help .eyebrow {
  margin-bottom: 0;
  color: var(--clay);
}

.page-faq .faq-help .eyebrow::before {
  background: var(--clay);
}

.page-faq .faq-help__title {
  margin: 10px 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 3.2vw, 1.58rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--dark-text);
}

.page-faq .faq-help__lead {
  margin: 0 0 16px;
  font-size: 0.89rem;
  line-height: 1.85;
  color: rgba(36, 31, 24, 0.82);
}

.page-faq .faq-help__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-faq .faq-help__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--dark-text);
}

.page-faq .faq-help__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--clay);
}

.page-faq .faq-help__contact {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(122, 46, 34, 0.28);
}

.page-faq .faq-help__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.page-faq .faq-help__label {
  flex: none;
  min-width: 62px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--clay);
}

.page-faq .faq-help__value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-text);
  word-break: break-all;
}

.page-faq .faq-help__note {
  margin: 6px 0 0;
  font-size: 0.77rem;
  line-height: 1.75;
  color: rgba(36, 31, 24, 0.7);
}

.page-faq .faq-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  font-size: 0.81rem;
}

.page-faq .faq-help__links a {
  color: var(--clay);
  border-bottom: 1px solid rgba(122, 46, 34, 0.42);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-help__links a:hover {
  color: var(--dark-text);
  border-bottom-color: var(--dark-text);
}

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

.page-faq .faq-help__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid rgba(36, 31, 24, 0.22);
}

@media (min-width: 620px) {
  .page-faq .faq-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
    align-items: end;
  }

  .page-faq .faq-index__head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 352px);
    align-items: end;
  }

  .page-faq .faq-help__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

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

  .page-faq .faq-nav {
    position: sticky;
    top: clamp(20px, 4vw, 44px);
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }

  .page-faq .faq-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-nav__link {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1000px) {
  .page-faq .faq-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .page-faq .qa__q {
    padding-right: 28px;
  }

  .page-faq .qa__a {
    padding-right: 16px;
  }

  .page-faq .faq-hero__title em {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa__a {
    animation: none;
  }

  .page-faq .qa__q::after,
  .page-faq .faq-topic,
  .page-faq .faq-nav__link {
    transition: none;
  }
}