/* ===== 帮助中心 · 页面专属样式 ===== */
.page-faq {
  --faq-edge: clamp(20px, 3vw, 34px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(24px, 3.6vw, 40px);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, transparent 42%);
  opacity: .75;
}

.page-faq .faq-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 14vw, 96px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--paper);
  margin: 14px 0 0;
  overflow-wrap: break-word;
}

.page-faq .faq-hero__claim {
  margin: 22px 0 0;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.62;
  color: var(--paper);
  max-width: 34em;
}

.page-faq .faq-hero__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 44em;
}

.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
  overflow: hidden;
}

.page-faq .faq-hero__meta-item {
  flex: 1 1 170px;
  min-width: 0;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero__meta-key {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
}

.page-faq .faq-hero__meta-val {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: .02em;
}

/* ---------- 快速跳转带 ---------- */
.page-faq .jumpbar {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--layer);
  -webkit-overflow-scrolling: touch;
}

.page-faq .jumpbar__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 15px 20px;
  border-right: 1px solid var(--line);
  color: var(--mist);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.page-faq .jumpbar__link:hover,
.page-faq .jumpbar__link:focus-visible {
  color: var(--cyan);
  background: var(--console);
}

.page-faq .jumpbar__num {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
}

/* ---------- 筛选带 ---------- */
.page-faq .faq-tools {
  padding: clamp(22px, 3vw, 32px) 0 0;
}

.page-faq .faq-tools .filter-bar {
  border-radius: var(--radius);
}

/* ---------- 区块骨架 ---------- */
.page-faq .qa-board {
  display: grid;
  gap: clamp(34px, 4.6vw, 56px);
}

.page-faq .faq-block {
  padding-top: clamp(40px, 5.5vw, 68px);
}

.page-faq .faq-block__head {
  display: grid;
  gap: 12px;
  max-width: 48em;
  margin-bottom: clamp(20px, 2.8vw, 32px);
}

.page-faq .faq-block__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
}

.page-faq .faq-block__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 46em;
}

/* ---------- 问答折叠组 ---------- */
.page-faq .qa-cluster {
  display: grid;
}

.page-faq .qa-cluster__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--cyan);
}

.page-faq .qa-cluster__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-mid);
}

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

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

.page-faq .qa-item__q {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: start;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}

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

.page-faq .qa-item__q:hover .qa-item__text,
.page-faq .qa-item__q:focus-visible .qa-item__text {
  color: var(--cyan);
}

.page-faq .qa-item__num {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  padding-top: 6px;
}

.page-faq .qa-item__text {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--paper);
  transition: color .2s var(--ease);
}

.page-faq .qa-item__mark {
  width: 0;
  height: 0;
  margin-top: 9px;
  justify-self: end;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--cyan);
  transition: transform .28s var(--ease);
}

.page-faq .qa-item[open] .qa-item__mark {
  transform: rotate(-180deg);
}

.page-faq .qa-item__a {
  padding: 0 0 22px 54px;
}

.page-faq .qa-item__a p {
  margin: 0;
  max-width: 52em;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-faq .qa-item[open] .qa-item__a {
  animation: faqOpen .3s var(--ease) both;
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 分类检索说明 ---------- */
.page-faq .retrieval {
  display: grid;
  gap: clamp(22px, 3vw, 30px);
}

.page-faq .retrieval__grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
  overflow: hidden;
}

.page-faq .retrieval__cell {
  padding: 20px 20px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

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

.page-faq .retrieval__idx {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
}

.page-faq .retrieval__name {
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.01em;
}

.page-faq .retrieval__desc {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-faq .retrieval__figure .figure__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 订阅查询高亮块 ---------- */
.page-faq .subscribe-card {
  position: relative;
  display: grid;
  gap: clamp(22px, 3vw, 30px);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(19, 60, 99, .55);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.page-faq .subscribe-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--cyan));
}

.page-faq .subscribe-card__head {
  display: grid;
  gap: 12px;
  max-width: 46em;
}

.page-faq .subscribe-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 38px);
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-faq .subscribe-card__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--paper);
}

.page-faq .subscribe-card__body {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

.page-faq .subscribe-card__col {
  display: grid;
  gap: 16px;
}

.page-faq .sub-info {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 33, 63, .55);
}

.page-faq .sub-info__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-soft);
}

.page-faq .sub-info__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .subscribe-card__figure {
  margin: 0;
}

.page-faq .subscribe-card__figure .figure__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 没找到答案 ---------- */
.page-faq .help-panel {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}

.page-faq .help-panel__subtitle {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-faq .help-panel__steps {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
}

.page-faq .help-panel__contact {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--console);
}

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

.page-faq .step-list__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.page-faq .step-list__idx {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
  padding-top: 5px;
}

.page-faq .step-list__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-faq .contact-list {
  margin: 0;
  display: grid;
  gap: 12px;
}

.page-faq .contact-list__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-faq .contact-list__key {
  font-size: 13px;
  color: var(--mist);
}

.page-faq .contact-list__val {
  margin: 0;
  font-size: 15px;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-faq .help-panel__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .help-panel__note a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .help-panel__note a:hover {
  color: var(--cyan-soft);
}

/* ---------- 下一步 ---------- */
.page-faq .faq-block--next {
  padding-top: clamp(40px, 5vw, 64px);
}

.page-faq .next-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-faq .next-card {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--layer);
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.page-faq .next-card:hover,
.page-faq .next-card:focus-visible {
  background: var(--console);
  border-left-color: var(--orange);
}

.page-faq .next-card__k {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-faq .next-card__d {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .retrieval__grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-faq .retrieval__cell:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .page-faq .retrieval__cell:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .page-faq .next-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-hero__meta-item {
    border-bottom: 0;
  }
}

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

  .page-faq .subscribe-card__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }

  .page-faq .help-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }
}

@media (min-width: 1120px) {
  .page-faq .qa-item__q {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
    gap: 16px;
    padding: 20px 0;
  }

  .page-faq .qa-item__a {
    padding-left: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa-item[open] .qa-item__a,
  .page-faq .qa-item__mark,
  .page-faq .qa-item__text,
  .page-faq .jumpbar__link,
  .page-faq .next-card {
    animation: none !important;
    transition: none !important;
  }

  .page-faq .qa-item[open] .qa-item__mark {
    transform: rotate(-180deg);
  }
}
<<<END>>>

第 12 条说任何页面都不能出现“核对”、“可核对”、“逐条核对”这类词？让我查一下：“同样禁止把内容治理词汇写给访客看：‘口径、边界、核对、可核对、逐条核对、资料性呈现、统一口径、跨页面一致、不代表、不做承诺、不设、不提供、本页只、这个页面只做、我们不做’等说法一律不得出现在标题、导语、正文或按钮里。”

“核对”被列出来了。但 current_page 的 required_sections 里包括“下载与版本核对”，primary_topics 里也有“订阅查询”。问题是，required_sections 的标题属于内部说明，落地时必须替换。而“核对”作为可见词是被禁掉的。

我得把所有可见文案里的“核对”都去掉。

出现位置：
- 跳转带里：`版本核对` → 改成 `对版本` 还是 `版本对不上`？用 `版本对不上` 吧？嗯，那个跳转条目 06 是 `还没解决`。那 05 改成……`文件版本` 更好。
- 区块 id 是 `version`，但跳转文字用的是 `版本核对` → 改成 `文件版本`。
- 区块标题 `下载与版本核对` → 改成 `下载与版本对照`？`对照`行不行？列表里没直接写“对照”……不过保险起见还是避开吧。用 `文件版本对不上怎么办`……嗯，有点长。
  改成：`下载与版本`——太单调了。还是用 `文件版本与更新包`。
- 版本区块里好几个段落都用了“核对”——都得改。
- `没用过 x`……不行。
- 还有“逐条列出”——“逐条”单独出现行不行？被禁的是“逐条核对”。但“逐条列出变更范围”本身是没问题的……嗯，“逐条”是否单独算风险？比较安全，因为被禁的短语是“逐条核对”。不过为了避免被当成“内容治理词汇”，还是改掉好了。“按版本列出”。
- “资料性呈现”“统一口径”都没有出现。
- “校验码对不上”是可以的。
- 还有“可核对”这类都不会出现。

再具体查一下：

1. 跳转带：`<a class="jumpbar__link" href="#version"><span class="jumpbar__num mono">05</span>版本核对</a>` → 改成 `文件版本`。

2. 区块标题 `下载与版本核对` → 改成 `下载与版本对照`？再用“版本对不上”……还是用 `文件版本与更新包` 吧。

嗯，这样能说得通。

3. 区块导语里：“手上这份文件是不是最新的、校验码对不对得上，是问得最多的两类问题。”——没问题。

4. 版本区块第 1 条 answer 的末尾：“两者一致，你手上的就是当前版本。”可以。

5. 第 1 条里：“拿文件名里的版本号，去更新记录里对照同栏目的最新条目。”好。

6. 第 3 条：“再重新取一次文件核对”——这里得改成“比对”。

7. 订阅区块里没有“核对”。

8. `faq-hero__note` 里没问题。

9. help-panel 第 3 步里：“先看清自己手上的是哪一版”——没问题。

10. `retrieval` 标题里没问题。

搜索其他禁用词：口径、边界、逐条、不提供、不设、本页只、我们不做。

“边界”没出现。“口径”没出现。

还有 image_opportunities 里的“检索路径图”——那是内部说明，不在可见文本里。好。

另外，`faq-hero__note` 里也不能出现“核对”。

还有，“订阅查询”这个词要不要出现？要，它分配在内容约束里。在 h2 和正文里各出现一次。

还有 content_rules 的第 12 条：`本站不做...` 这一句里“不做”是好词，但……“我们不做”被禁了。我后面没有用这个。

“只”这个词——用户列出的禁用短语是“本页只”“这个页面只做”。我可能用了单独的“只”……我检查一下：
- “只记得大概叫什么”——这是“只记得”，没问题，不是在讲内容治理。
- “只是不确定它归在哪一类”——没问题。
- “只在资源文件换版时发出”——没问题。
- “只在……”没问题。

这些都不是在描述网站的组织方式。没问题。

现在其他的修正：

还有，`faq-hero__claim` 里“拿不准手上的文件是不是最新的”——没问题。

我再把所有禁用词检查一遍。

现在还有第 10 条：不能出现“口径、边界、核对、可核对、逐条核对、资料性呈现、统一口径、跨页面一致、不代表、不做承诺、不设、不提供、本页只、这个页面只做、我们不做”。

我把所有文本里的“核对”都清掉。

- 跳转带 05。
- 区块标题和 id 没关系，标题文本要改。
- “再重新取一次文件核对” → “再重新取一次文件比对”。
- “把文件名、版本号和校验码一起发给我们”没问题。

还有“版本核对”在 faq-hero note 里？没有。

好。

另外，faq-tools 的 filter-bar 里有没有“高亮”？没有。

再说一遍 data-filter 的取值，必须和 data-tags 的 tokens 对上：`all`、`search`、`tools`、`version`、`subscribe`。所有 use 都一致。

现在检查一下每一条 data-filter-item 的 tags：
- 01 search ✓
- 02 search ✓
- 03 search ✓
- 04 version ✓
- 05 subscribe ✓
- tools 01 tools ✓
- tools 02 tools search ✓
- tools 03 tools search ✓
- tools 04 tools version ✓
- version 01 version ✓
- version 02 version ✓
- version 03 version ✓
- version 04 version ✓

没问题，13 条。

不过筛选后有的分组会变空——这是可以接受的。

现在再检查一下所有 href：
- / ✓
- #guides、#tools、#search-guide、#subscribe、#version、#no-answer —— 全都在页面内存在 ✓
- /business/、/reports/、/agreement/、/contact-us/ ✓

id：guides、tools、search-guide、subscribe、version、no-answer、qa-board、main-content ✓

图片：2 张。✓ 宽高和 src 匹配。

接下来再确认一下用到的 CSS 变量都真实存在：--line、--line-mid、--line-strong、--cyan、--cyan-soft、--orange、--amber、--mist、--paper、--layer、--console、--deep、--glass、--radius、--radius-lg、--shadow、--ease、--font-display、--font-mono。全部都在列表里 ✓。

--faq-edge 虽然定义了但一直没用——删掉它。

再看一遍订阅卡片里的 CSS：background 先写 rgba，然后又用 var(--glass) 覆盖，这没问题（是同一种颜色的兜底）。

嗯，其实 `--glass` 本身就是 rgba(19,60,99,.55)，跟前面的 rgba 一模一样。算了，也行。

再把 `.page-faq .subscribe-card__figure .figure__media img` 定下来——全局的 `.figure__media` 应该已经处理了宽高比。没问题。

现在还要确认一下 `filter-bar` 在 `.faq-tools` 里——共享样式会处理它。

再检查一下检索单元格的边框，在 640px 以上的媒体查询里：

4 个单元格按 2x2 网格排列，我给奇数格（1、3）加了右侧边框，然后 `nth-last-child(-n+2)`（也就是 3、4）去掉了底部边框。但第 3 格同时还有右边框——在 2x2 网格里，第 3 格是左下角，它的右边框就是中间那条垂直分隔线，正好对。

基础样式里每个单元格都有 `border-bottom: 1px`，最后一个子元素是 0。在 2 列布局下，第 3 格还是有底部边框，然后用 `nth-last-child(-n+2)` 把它去掉。

现在写最终版本吧。

不过还有一点：`page-faq .qa-item:last-child { border-bottom }` —— 其实 `.qa-item` 是在 `.qa-cluster` 里面的，而 `.qa-cluster` 里还包含 h3。最后一个子元素就是最后那个 `details`，没问题。

还有 `.qa-cluster` 用了 `display: grid` —— 在 grid 容器里，`details` 元素会拉伸，正常。

好了。

再检查一下 h1 —— 页面里只有一个。✓

没问题。

现在开始输出最终版本，把“核对”相关的都换掉。
<main id="main-content" class="page-faq">
  <div class="shell">

    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item"><span class="breadcrumb__current">帮助中心</span></li>
      </ol>
    </nav>

    <header class="faq-hero">
      <p class="eyebrow">使用指南 · 工具说明 · 分类检索 · 订阅查询</p>
      <h1 class="faq-hero__title">帮助中心</h1>
      <p class="faq-hero__claim">找不到入口、查不到订阅状态、拿不准手上的文件是不是最新的——你卡在哪一步，就从哪一段往下读。</p>
      <p class="faq-hero__note">365网站网把从检索到下载的常见疑问整理成 140 余篇说明，按你正在做的事分组。想直接跳到某一段，用下面的快速跳转；想顺着看，往下滚就行。</p>
      <div class="faq-hero__meta">
        <div class="faq-hero__meta-item">
          <span class="faq-hero__meta-key mono">说明文档</span>
          <span class="faq-hero__meta-val mono">140 余篇</span>
        </div>
        <div class="faq-hero__meta-item">
          <span class="faq-hero__meta-key mono">分类规模</span>
          <span class="faq-hero__meta-val mono">18 类 · 96 子类</span>
        </div>
        <div class="faq-hero__meta-item">
          <span class="faq-hero__meta-key mono">内容复核</span>
          <span class="faq-hero__meta-val mono">每周一次</span>
        </div>
      </div>
    </header>

    <nav class="jumpbar" aria-label="页面快速跳转">
      <a class="jumpbar__link" href="#guides"><span class="jumpbar__num mono">01</span>使用指南</a>
      <a class="jumpbar__link" href="#tools"><span class="jumpbar__num mono">02</span>工具说明</a>
      <a class="jumpbar__link" href="#search-guide"><span class="jumpbar__num mono">03</span>分类检索</a>
      <a class="jumpbar__link" href="#subscribe"><span class="jumpbar__num mono">04</span>订阅查询</a>
      <a class="jumpbar__link" href="#version"><span class="jumpbar__num mono">05</span>文件版本</a>
      <a class="jumpbar__link" href="#no-answer"><span class="jumpbar__num mono">06</span>还没解决</a>
    </nav>

    <div class="faq-tools">
      <div class="filter-bar" data-filter-bar data-filter-target="#qa-board">
        <span class="filter-bar__label">按问题类型筛选</span>
        <button class="filter-chip" type="button" data-filter="all" aria-pressed="false">全部</button>
        <button class="filter-chip" type="button" data-filter="search" aria-pressed="false">找网站</button>
        <button class="filter-chip" type="button" data-filter="tools" aria-pressed="false">用工具</button>
        <button class="filter-chip" type="button" data-filter="version" aria-pressed="false">对版本</button>
        <button class="filter-chip" type="button" data-filter="subscribe" aria-pressed="false">管订阅</button>
        <span class="filter-count" data-filter-count></span>
        <p class="filter-empty" data-filter-empty>这一类暂时没有对应条目，换个类型看看。</p>
      </div>
    </div>

    <div class="qa-board" id="qa-board" data-filter-scope>

      <section class="faq-block" id="guides">
        <div class="faq-block__head">
          <h2 class="faq-block__title">使用指南</h2>
          <p class="faq-block__lede">按你当下要完成的事情分组：先定位置，再缩小范围，最后把文件取回来。每一条都是可以直接照着做的操作顺序。</p>
        </div>

        <div class="qa-cluster">
          <h3 class="qa-cluster__title mono">从进入网站到找到目标</h3>

          <details class="qa-item" data-filter-item data-tags="search">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">01</span>
              <span class="qa-item__text">第一次进来，怎么最快找到想去的网站？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>顶部站内检索支持四种方式：名称、分类、字母索引、标签。只记得大概叫什么，直接输名字；知道它属于哪个领域，就从 18 个一级分类往下走两层。名字完全想不起来，用标签从“在线转格式”“文档模板”这类用途切入，往往比硬猜名字更快。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="search">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">02</span>
              <span class="qa-item__text">想把一整类网站一次看全，该怎么走？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>走分类路径。一级分类决定大方向，二级分类把同类站点排成一列，适合横向比看哪家更合适。站内共 96 个二级分类，每个分类页都会集中呈现该细分领域的全部条目，比一次次分开检索省事得多。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="search">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">03</span>
              <span class="qa-item__text">手机上和电脑上操作有什么差别？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>操作顺序完全一致，只是呈现方式不同。手机上顶部栏目会收进菜单按钮，长表格折叠成一组卡片，内容一条不少。移动端和桌面端的使用比例大约是 6:4，从检索到下载的完整流程两边都能走完。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">04</span>
              <span class="qa-item__text">下载 2026 版块的文件，要走哪几步？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>先打开资源与下载页，用栏目、版本、文件类型三条路径里的任意一条缩小范围，再点开对应的文件条目。每条都会标出文件大小、格式和更新版本，下载前顺手抄一下校验码，后面比对时用得上。2026 版块目前收录工具包、模板与清单三类资源，累计 1200 余个文件条目。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="subscribe">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">05</span>
              <span class="qa-item__text">想持续跟进某一类内容，有什么省事的办法？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>把常用的二级分类页存进浏览器收藏夹，或者开一档订阅推送。每周摘要会把当周新增和调整的条目一次带过来，不用自己反复翻。两种方式都适合长期盯同一类内容的人。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-block" id="tools">
        <div class="faq-block__head">
          <h2 class="faq-block__title">工具说明</h2>
          <p class="faq-block__lede">站内的筛选器、字母索引、标签和复制按钮各管一段事，搞清楚各自适合什么场景，能省掉不少来回点击。</p>
        </div>

        <div class="qa-cluster">
          <h3 class="qa-cluster__title mono">各类工具怎么用</h3>

          <details class="qa-item" data-filter-item data-tags="tools">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">01</span>
              <span class="qa-item__text">筛选器跟分类导航有什么区别？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>分类导航决定你在哪一片区域里看，筛选器是在这片区域里继续把范围收窄。资源与下载页提供按栏目、按版本、按文件类型三条筛选路径，点选之后列表立刻重排，不会跳到别的页面，也不会打断你当前的浏览位置。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="tools search">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">02</span>
              <span class="qa-item__text">字母索引适合查什么样的网站？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>你已经知道网站名字怎么念，但不清楚它归在哪一类，这时候字母索引最省事。按首字母定位之后，再用名称检索收窄一次，通常几步就能落在目标条目上。反过来，如果你只记得用途、完全不记得名字，就别从字母索引进。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="tools search">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">03</span>
              <span class="qa-item__text">标签和分类各回答什么问题？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>分类回答“这个网站是做什么的”，一个条目只归一个主分类；标签回答“它还能用在什么场景”，同一个站点可以挂多个。你要跨领域把同一类用途凑到一起，从标签进比从分类进快得多。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="tools version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">04</span>
              <span class="qa-item__text">页面上的复制按钮复制的是什么？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>复制的是当前条目的校验码或编号原文，一字不差，方便你粘到自己的清单里。校验码用来判断文件是否完整，编号用来在更新记录里定位对应的版本条目，两者用途不同，别混着用。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-block" id="search-guide">
        <div class="faq-block__head">
          <h2 class="faq-block__title">分类检索说明</h2>
          <p class="faq-block__lede">四种检索方式不是备选项，而是对应四种不同的记忆状态。先判断自己还记得什么，再挑入口，比四种都试一遍快得多。</p>
        </div>

        <div class="retrieval">
          <div class="retrieval__grid">
            <article class="retrieval__cell">
              <span class="retrieval__idx mono">A</span>
              <h3 class="retrieval__name">按名称</h3>
              <p class="retrieval__desc">知道网站叫什么，只是不确定它归在哪一类。输入名字后，从命中结果所属的分类顺藤摸瓜，往往还能发现几个同类站点。</p>
            </article>
            <article class="retrieval__cell">
              <span class="retrieval__idx mono">B</span>
              <h3 class="retrieval__name">按分类</h3>
              <p class="retrieval__desc">你想按领域横着看一批站。18 个一级分类往下走 96 个二级分类，每一层都在收窄范围，适合做选型比较或系统梳理。</p>
            </article>
            <article class="retrieval__cell">
              <span class="retrieval__idx mono">C</span>
              <h3 class="retrieval__name">按字母索引</h3>
              <p class="retrieval__desc">只记得开头大概是什么字，或者想按顺序从头翻一遍。适合做整体盘点，也适合名字很短、关键词检索容易命中太多无关结果的情况。</p>
            </article>
            <article class="retrieval__cell">
              <span class="retrieval__idx mono">D</span>
              <h3 class="retrieval__name">按标签</h3>
              <p class="retrieval__desc">按用途找，而不是按行业找。同一个站点可以挂多个标签，跨分类把同类用途凑齐，做批量整理清单时最顺手。</p>
            </article>
          </div>

          <figure class="figure figure--wide retrieval__figure">
            <div class="figure__media">
              <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="由中心向四个方向分岔的检索路径示意图，四条支线分别标注名称、分类、字母索引与标签" loading="lazy" decoding="async">
            </div>
            <figcaption class="figure__caption">四条检索路径从同一个入口分岔，选哪条取决于你还记得多少信息。</figcaption>
          </figure>
        </div>
      </section>

      <section class="faq-block" id="subscribe">
        <div class="subscribe-card">
          <div class="subscribe-card__head">
            <span class="tag tag--warm">同栏第 3 项</span>
            <h2 class="subscribe-card__title">订阅查询</h2>
            <p class="subscribe-card__lede">想确认自己还在不在推送名单里、推的是哪一档、下次什么时候到，在这里一次看完，不用发邮件问。</p>
          </div>

          <div class="subscribe-card__body">
            <div class="subscribe-card__col">
              <div class="sub-info">
                <h3 class="sub-info__title">查询前准备什么</h3>
                <p class="sub-info__text">订阅查询入口位于帮助中心同一栏的第 3 项。打开后用订阅时留下的邮箱，或者当初收到的订阅编号，任意一项就能查。</p>
              </div>
              <div class="sub-info">
                <h3 class="sub-info__title">两档推送，按需要切</h3>
                <p class="sub-info__text">每周摘要把当周新增与调整的条目汇总成一条；版本更新提醒只在资源文件换版时发出。两档可以只留一档，也可以同时开。</p>
              </div>
              <div class="sub-info">
                <h3 class="sub-info__title">随时调整或退订</h3>
                <p class="sub-info__text">推送频次、接收邮箱、是否继续接收，都能在订阅查询里改。改完立即生效，不需要额外的确认步骤。</p>
              </div>
            </div>

            <figure class="figure subscribe-card__figure">
              <div class="figure__media">
                <img src="{zhanqunpic:h:500w:900}" width="900" height="500" alt="三个订阅状态节点首尾相接的循环示意图，当前生效节点以暖橙色标注" loading="lazy" decoding="async">
              </div>
              <figcaption class="figure__caption">生效、暂停、退订三种状态之间可以来回切换，改完就生效。</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="faq-block" id="version">
        <div class="faq-block__head">
          <h2 class="faq-block__title">文件版本与更新包</h2>
          <p class="faq-block__lede">手上这份文件是不是最新的、校验码对不对得上，是问得最多的两类问题。下面几条基本能覆盖。</p>
        </div>

        <div class="qa-cluster">
          <h3 class="qa-cluster__title mono">文件与版本</h3>

          <details class="qa-item" data-filter-item data-tags="version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">01</span>
              <span class="qa-item__text">怎么确认手上的文件是不是最新版本？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>拿文件名里的版本号，去更新记录里对照同栏目的最新条目。更新记录按版本列出变更范围、涉及文件数与适用栏目，最新的那条排在最前面。两边一致，你手上的就是当前版本。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">02</span>
              <span class="qa-item__text">版本号该怎么读？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>版本号由年份、季度和序号三段拼成，例如 2026.1.07，就是 2026 年第一季度发布的第 7 个更新包。三段连起来读，既能看出新旧，也能看出它属于哪个季度的归档，按年份往回翻的时候尤其方便。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">03</span>
              <span class="qa-item__text">校验码对不上，一般是什么原因？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>最常见的是文件没有完整下载，中途断了但看起来像成功了。其次是拿到了上一个季度的更新包，和条目上标的版本不是同一个。先在更新记录里确认当前版本号，再重新取一次文件比对；如果还是对不上，把文件名、版本号和校验码一起发给我们。</p>
            </div>
          </details>

          <details class="qa-item" data-filter-item data-tags="version">
            <summary class="qa-item__q">
              <span class="qa-item__num mono">04</span>
              <span class="qa-item__text">2026 版块的更新包多久发一次？</span>
              <span class="qa-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="qa-item__a">
              <p>按季度发布，每个更新包都附带一份变更清单，写清楚这一季度动了哪些文件、属于哪个栏目。想在发布时收到提醒，可以开订阅里的版本更新提醒这一档。</p>
            </div>
          </details>
        </div>
      </section>

    </div>

    <section class="faq-block" id="no-answer">
      <div class="faq-block__head">
        <h2 class="faq-block__title">没找到答案怎么办</h2>
        <p class="faq-block__lede">先花一分钟自查，很多问题在这一步就解决了；确实还要问，把信息一次带全，我们能直接给出答案，不用来回两趟。</p>
      </div>

      <div class="help-panel">
        <div class="help-panel__steps">
          <h3 class="help-panel__subtitle">联系之前的三个动作</h3>
          <ol class="step-list">
            <li class="step-list__item">
              <span class="step-list__idx mono">01</span>
              <p class="step-list__text">换个关键词再搜一次。站内检索支持名称、分类、字母索引与标签四种方式，同一条目在不同方式下的命中结果不一样，换一种往往就出来了。</p>
            </li>
            <li class="step-list__item">
              <span class="step-list__idx mono">02</span>
              <p class="step-list__text">翻一下更新记录。条目可能刚刚调整过分类或下线，版本条目里会写明变更范围，对得上你遇到的情况就不用再问。</p>
            </li>
            <li class="step-list__item">
              <span class="step-list__idx mono">03</span>
              <p class="step-list__text">确认当前版本号。涉及文件的问题，先看清自己手上的是哪一版，能省掉一轮来回确认。</p>
            </li>
          </ol>
        </div>

        <div class="help-panel__contact">
          <h3 class="help-panel__subtitle">直接找我们</h3>
          <dl class="contact-list">
            <div class="contact-list__row">
              <dt class="contact-list__key">客服邮箱</dt>
              <dd class="contact-list__val mono">email@365-hub.com.cn</dd>
            </div>
            <div class="contact-list__row">
              <dt class="contact-list__key">联系电话</dt>
              <dd class="contact-list__val mono">15067312639</dd>
            </div>
            <div class="contact-list__row">
              <dt class="contact-list__key">在线时段</dt>
              <dd class="contact-list__val">工作日 9:00–18:00</dd>
            </div>
          </dl>
          <p class="help-panel__note">该邮箱为站点客服邮箱，工作日 9:00-18:00 在线，节假日可留言，我们会在下一个工作日优先处理。</p>
          <p class="help-panel__note">发邮件时把页面地址、你用过的关键词，以及涉及文件时的版本号和校验码一并写上，能少走一轮往返。完整的提交方式与合作咨询入口在<a href="/contact-us/">联系我们</a>页面。</p>
        </div>
      </div>
    </section>

    <section class="faq-block faq-block--next">
      <h2 class="faq-block__title">看完了，接下来去哪儿</h2>
      <div class="next-row">
        <a class="next-card" href="/business/">
          <span class="next-card__k mono">资源与下载</span>
          <span class="next-card__d">2026 版块的工具包、模板与清单，附带版本与校验码信息。</span>
        </a>
        <a class="next-card" href="/reports/">
          <span class="next-card__k mono">更新记录</span>
          <span class="next-card__d">按版本列出变更范围与适用栏目，往回翻很方便。</span>
        </a>
        <a class="next-card" href="/agreement/">
          <span class="next-card__k mono">使用协议</span>
          <span class="next-card__d">转载、引用或批量使用站内索引前，先看一眼允许做什么。</span>
        </a>
      </div>
    </section>

  </div>
</main>

/* ===== 帮助中心 · 页面专属样式 ===== */
.page-faq {
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: clamp(26px, 4.5vw, 52px) 0 clamp(24px, 3.6vw, 40px);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(34, 224, 214, 0) 42%);
  opacity: .75;
}

.page-faq .faq-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 14vw, 96px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--paper);
  margin: 14px 0 0;
  overflow-wrap: break-word;
}

.page-faq .faq-hero__claim {
  margin: 22px 0 0;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.62;
  color: var(--paper);
  max-width: 34em;
}

.page-faq .faq-hero__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 44em;
}

.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
  overflow: hidden;
}

.page-faq .faq-hero__meta-item {
  flex: 1 1 170px;
  min-width: 0;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero__meta-key {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mist);
}

.page-faq .faq-hero__meta-val {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cyan);
}

/* ---------- 快速跳转带 ---------- */
.page-faq .jumpbar {
  display: flex;
  overflow-x: auto;
  background: var(--layer);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.page-faq .jumpbar__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 15px 20px;
  border-right: 1px solid var(--line);
  color: var(--mist);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.page-faq .jumpbar__link:hover,
.page-faq .jumpbar__link:focus-visible {
  color: var(--cyan);
  background: var(--console);
}

.page-faq .jumpbar__num {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
}

/* ---------- 筛选带 ---------- */
.page-faq .faq-tools {
  padding: clamp(22px, 3vw, 32px) 0 0;
}

.page-faq .faq-tools .filter-bar {
  border-radius: var(--radius);
}

/* ---------- 区块骨架 ---------- */
.page-faq .qa-board {
  display: grid;
  gap: clamp(34px, 4.6vw, 56px);
}

.page-faq .faq-block {
  padding-top: clamp(40px, 5.5vw, 68px);
}

.page-faq .faq-block__head {
  display: grid;
  gap: 12px;
  max-width: 48em;
  margin-bottom: clamp(20px, 2.8vw, 32px);
}

.page-faq .faq-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-faq .faq-block__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 46em;
}

/* ---------- 问答折叠组 ---------- */
.page-faq .qa-cluster {
  display: grid;
}

.page-faq .qa-cluster__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--cyan);
}

.page-faq .qa-cluster__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-mid);
}

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

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

.page-faq .qa-item__q {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: start;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}

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

.page-faq .qa-item__q:hover .qa-item__text,
.page-faq .qa-item__q:focus-visible .qa-item__text {
  color: var(--cyan);
}

.page-faq .qa-item__num {
  padding-top: 6px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
}

.page-faq .qa-item__text {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--paper);
  transition: color .2s var(--ease);
}

.page-faq .qa-item__mark {
  width: 0;
  height: 0;
  margin-top: 9px;
  justify-self: end;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--cyan);
  transition: transform .28s var(--ease);
}

.page-faq .qa-item[open] .qa-item__mark {
  transform: rotate(-180deg);
}

.page-faq .qa-item__a {
  padding: 0 0 22px 54px;
}

.page-faq .qa-item__a p {
  margin: 0;
  max-width: 52em;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-faq .qa-item[open] .qa-item__a {
  animation: faqOpen .3s var(--ease) both;
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 分类检索说明 ---------- */
.page-faq .retrieval {
  display: grid;
  gap: clamp(22px, 3vw, 30px);
}

.page-faq .retrieval__grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
  overflow: hidden;
}

.page-faq .retrieval__cell {
  padding: 20px 20px 22px;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .retrieval__idx {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
}

.page-faq .retrieval__name {
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-faq .retrieval__desc {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

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

.page-faq .retrieval__figure .figure__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 订阅查询高亮块 ---------- */
.page-faq .subscribe-card {
  position: relative;
  display: grid;
  gap: clamp(22px, 3vw, 30px);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(19, 60, 99, .55);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.page-faq .subscribe-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--cyan));
}

.page-faq .subscribe-card__head {
  display: grid;
  gap: 12px;
  max-width: 46em;
}

.page-faq .subscribe-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 38px);
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-faq .subscribe-card__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--paper);
}

.page-faq .subscribe-card__body {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

.page-faq .subscribe-card__col {
  display: grid;
  gap: 16px;
}

.page-faq .sub-info {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 33, 63, .55);
}

.page-faq .sub-info__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-soft);
}

.page-faq .sub-info__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .subscribe-card__figure {
  margin: 0;
}

.page-faq .subscribe-card__figure .figure__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 没找到答案 ---------- */
.page-faq .help-panel {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}

.page-faq .help-panel__subtitle {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-faq .help-panel__steps {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer);
}

.page-faq .help-panel__contact {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--console);
}

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

.page-faq .step-list__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.page-faq .step-list__idx {
  padding-top: 5px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
}

.page-faq .step-list__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-faq .contact-list {
  margin: 0;
  display: grid;
  gap: 12px;
}

.page-faq .contact-list__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-faq .contact-list__key {
  font-size: 13px;
  color: var(--mist);
}

.page-faq .contact-list__val {
  margin: 0;
  font-size: 15px;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-faq .help-panel__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .help-panel__note a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .help-panel__note a:hover {
  color: var(--cyan-soft);
}

/* ---------- 下一步 ---------- */
.page-faq .faq-block--next {
  padding-top: clamp(40px, 5vw, 64px);
}

.page-faq .next-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-faq .next-card {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--layer);
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.page-faq .next-card:hover,
.page-faq .next-card:focus-visible {
  background: var(--console);
  border-left-color: var(--orange);
}

.page-faq .next-card__k {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-faq .next-card__d {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-hero__meta-item {
    border-bottom: 0;
  }

  .page-faq .retrieval__grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-faq .retrieval__cell:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .page-faq .retrieval__cell:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .page-faq .next-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .page-faq .subscribe-card__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }

  .page-faq .help-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
  }
}

@media (min-width: 1120px) {
  .page-faq .qa-item__q {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
    gap: 16px;
    padding: 20px 0;
  }

  .page-faq .qa-item__a {
    padding-left: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa-item[open] .qa-item__a,
  .page-faq .qa-item__mark,
  .page-faq .qa-item__text,
  .page-faq .jumpbar__link,
  .page-faq .next-card {
    animation: none !important;
    transition: none !important;
  }

  .page-faq .qa-item[open] .qa-item__mark {
    transform: rotate(-180deg);
  }
}