.page-faq {
  --faq-cut: 22px;
  --faq-rail-w: 214px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -52%;
  width: 78%;
  height: 460px;
  background: radial-gradient(circle at 40% 40%, rgba(31, 158, 154, .2), rgba(31, 158, 154, 0) 68%);
  pointer-events: none;
}

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

.page-faq .faq-hero__grid {
  display: grid;
  gap: 32px;
  margin-top: 26px;
}

.page-faq .faq-hero__text h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-faq .faq-hero__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-faq .faq-meta-chip {
  display: inline-block;
  padding: 7px 13px;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: rgba(251, 253, 255, .82);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* 首屏检索示例卡 */
.page-faq .faq-search-demo {
  position: relative;
  padding: 24px 22px 22px;
  background: var(--mist);
  box-shadow: var(--shadow-card);
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-search-demo__label {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--ink-mute);
}

.page-faq .faq-search-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid rgba(31, 158, 154, .42);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(31, 158, 154, .1);
}

.page-faq .faq-search-demo__glass {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  position: relative;
}

.page-faq .faq-search-demo__glass::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  background: var(--teal);
  transform: rotate(45deg);
  border-radius: 2px;
}

.page-faq .faq-search-demo__text {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
}

.page-faq .faq-search-demo__caret {
  width: 2px;
  height: 18px;
  margin-left: 2px;
  background: var(--coral);
}

.page-faq .faq-search-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: .82rem;
  color: var(--teal-deep);
  text-decoration: none;
  background: rgba(105, 213, 198, .18);
  border: 1px solid rgba(31, 158, 154, .28);
  border-radius: 999px;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  transform: translateY(-2px);
  background: rgba(105, 213, 198, .3);
  border-color: var(--coral);
}

.page-faq .faq-search-demo__foot {
  margin: 16px 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* ---------- 主体两栏骨架 ---------- */
.page-faq .faq-body {
  background: var(--mist);
}

.page-faq .faq-layout {
  display: grid;
  gap: 30px;
}

.page-faq .faq-rail__title {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

.page-faq .faq-rail__nav {
  border-top: 2px solid var(--ink);
  padding-top: 4px;
}

.page-faq .faq-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-faq .faq-rail__link {
  display: block;
  white-space: nowrap;
  padding: 9px 14px;
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--sand);
  border-left: 3px solid rgba(31, 158, 154, .5);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  background: var(--deep);
  border-left-color: var(--coral);
  color: var(--sand);
}

.page-faq .faq-rail__note {
  margin: 14px 0 0;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--ink-mute);
}

.page-faq .faq-rail__note a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 内容块 ---------- */
.page-faq .faq-flow {
  display: grid;
  gap: 68px;
  min-width: 0;
}

.page-faq .faq-block {
  scroll-margin-top: 110px;
  min-width: 0;
}

.page-faq .faq-block__head {
  max-width: 62ch;
}

.page-faq .faq-block__title {
  margin: 10px 0 0;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height: 1.28;
  color: var(--ink);
}

.page-faq .faq-block__lead {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 三步路径深色面板 */
.page-faq .faq-path-panel {
  position: relative;
  margin-top: 26px;
  padding: 28px 22px 24px;
  background: var(--deep);
  color: var(--sand);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-path-panel::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 240px;
  background: radial-gradient(ellipse at 50% 100%, rgba(105, 213, 198, .22), rgba(105, 213, 198, 0) 70%);
  pointer-events: none;
}

.page-faq .faq-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(105, 213, 198, .22);
}

.page-faq .faq-step:first-child {
  border-top: 0;
  padding-top: 6px;
}

.page-faq .faq-step__num {
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--teal-soft);
}

.page-faq .faq-step__body h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: #fff;
}

.page-faq .faq-step__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(247, 241, 230, .78);
}

.page-faq .faq-path-panel__foot {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 107, 74, .5);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--coral-soft);
}

/* 配图 */
.page-faq .faq-figure {
  margin: 26px 0 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--sand);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--faq-cut)), calc(100% - var(--faq-cut)) 100%, 0 100%);
}

.page-faq .faq-figure--narrow {
  max-width: 720px;
}

.page-faq .faq-figure .media__caption {
  margin-top: 12px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* 检索方式分段切换 */
.page-faq .faq-tabs {
  margin-top: 26px;
}

.page-faq .faq-tabs .tablist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.page-faq .faq-tabs .tab {
  flex: none;
  padding: 11px 16px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-tabs .tab:hover {
  color: var(--ink);
}

.page-faq .faq-tabs .tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

.page-faq .faq-tabpanel {
  margin-top: 20px;
  padding: 22px 20px;
  background: var(--sand);
  border-left: 4px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-faq .faq-tabpanel[hidden] {
  display: none;
}

.page-faq .faq-tabpanel__label {
  margin: 0 0 6px;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

.page-faq .faq-tabpanel__input {
  margin: 0 0 14px;
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coral-deep);
  word-break: break-word;
}

.page-faq .faq-tabpanel > p:last-child {
  margin: 0;
  font-size: .94rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-inline-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--ink-soft);
  background: linear-gradient(90deg, rgba(31, 158, 154, .12), rgba(31, 158, 154, 0));
  border-left: 3px solid var(--teal);
}

/* 手风琴问答 */
.page-faq .faq-acc-group {
  margin-top: 24px;
  border-top: 2px solid var(--ink);
}

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

.page-faq .faq-acc summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .22s var(--ease);
}

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

.page-faq .faq-acc summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--teal-deep);
  border: 1px solid rgba(31, 158, 154, .5);
  border-radius: 50%;
  transition: transform .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
}

.page-faq .faq-acc[open] summary {
  color: var(--teal-deep);
}

.page-faq .faq-acc[open] summary::after {
  content: "−";
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  transform: rotate(180deg);
}

.page-faq .faq-acc summary:hover::after {
  background: rgba(105, 213, 198, .3);
}

.page-faq .faq-acc__body {
  padding: 0 4px 22px;
  max-width: 68ch;
}

.page-faq .faq-acc__body p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

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

.page-faq .faq-acc__link a {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 下载卡片流 */
.page-faq .faq-cards {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-faq .faq-card {
  padding: 22px 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-soft);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-top-color .24s var(--ease);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-faq .faq-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--coral);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-card__title {
  margin: 12px 0 10px;
  font-size: 1.04rem;
  color: var(--ink);
}

.page-faq .faq-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 账户安全步骤清单 */
.page-faq .faq-check {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.page-faq .faq-check__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-check__num {
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(10, 42, 67, .2);
}

.page-faq .faq-check__item h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--ink);
}

.page-faq .faq-check__item p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 结尾转化 */
.page-faq .faq-cta {
  position: relative;
  padding: 34px 24px 36px;
  background: var(--night);
  color: var(--sand);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-cta::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -12%;
  width: 60%;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 107, 74, .3), rgba(255, 107, 74, 0) 68%);
  pointer-events: none;
}

.page-faq .faq-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 56ch;
}

.page-faq .faq-cta h2 {
  margin: 0;
  font-size: clamp(22px, 4.2vw, 32px);
  color: #fff;
  line-height: 1.3;
}

.page-faq .faq-cta p {
  margin: 14px 0 0;
  font-size: .96rem;
  line-height: 1.85;
  color: rgba(247, 241, 230, .78);
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- 桌面布局 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero {
    padding-block: 64px 72px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: 48px;
    margin-top: 34px;
  }

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

  .page-faq .faq-path-panel {
    padding: 32px 30px 26px;
  }

  .page-faq .faq-cta {
    padding: 44px 40px 46px;
  }

  .page-faq .faq-tabpanel {
    padding: 26px 26px;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 104px;
  }

  .page-faq .faq-rail__list {
    display: grid;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-rail__link {
    white-space: normal;
    padding: 11px 14px;
    background: transparent;
  }

  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link:focus-visible {
    background: rgba(10, 42, 67, .06);
    color: var(--ink);
    border-left-color: var(--coral);
  }

  .page-faq .faq-flow {
    gap: 84px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 64px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .faq-card,
  .page-faq .faq-acc summary::after,
  .page-faq .faq-rail__link {
    transition: opacity .2s linear;
    transform: none;
  }

  .page-faq .faq-card:hover {
    transform: none;
  }
}
</final_css>
<<<END>>>

等一下，我好像不小心写了一个错误的结束标记。让我修正一下。最后的标记应该是 `` 后面直接跟 CSS 内容，然后结束。实际上我又多写了一个 `<<<END>>>` 标记——那是不对的。

让我重新整理一下，正确的输出应该是：


...（HTML 内容）

...（CSS 内容）

中间不要有其他标记。我重新组织一下。我注意到我在 CSS 末尾写了 `</final_css>` 和一个 `<<<END>>>`，这是错误的。我需要去掉这些。

另外我还得检查一下 CSS 中 `.faq-tabs .tab` 的样式——全局组件指南里已经定义了 `.tab` 和 `.tablist`，我在 `.page-faq` 作用域内重新定义是没问题的。

还有一个问题：`.faq-tabpanel[hidden]` 的样式——如果 JS 没有执行，隐藏的面板不会有 `hidden` 属性，那么所有面板都会显示。但这是渐进增强的做法——没有 JS 时内容全部可见。不过这样就不像选项卡了。我可以接受这一点，因为渐进增强允许无 JS 时降级为全部显示。其实更好的做法是让无 JS 时全部可见，有 JS 时通过 `.tabpanel` 的隐藏/显示来控制。这样是合理的。

再检查一下锚点：所有 `href="#xxx"` 的目标 id 都必须在 HTML 中存在。
- `#path` ✓
- `#search` ✓
- `#member` ✓
- `#download` ✓
- `#account` ✓

这些 id 都在 `faq-block` 元素上。

链接路由：`/`、`/inquiry/`、`/features/`、`/profile/`、`/insights/` —— 都在允许路由列表中。✓

图片：
1. `{zhanqunpic:h:620w:1100}` width=1100 height=620 ✓（首屏下方路径区）
2. `{zhanqunpic:h:600w:900}` width=900 height=600 ✓（检索区）

图片数量 2 张，在 minimum(1) 和 target(2) 和 maximum(15) 范围内 ✓

第一张图没有 lazy（首屏主图？它是路径区的图，不是真正的首屏主图，但为了安全我留着不加 lazy 也行，或者加上也行）。规则说“首屏主图不要 lazy，其余图片添加 loading=lazy”。第一张图在第一个内容区块，靠近首屏，可以不加。第二张图有 lazy ✓

h1 只有一个 ✓

品牌名：首屏导语里出现了“博鱼” ✓

关键词“新访客站内检索会员中心路径”在 #path 的 h2 里用了 —— 这是分配到这个页面的完整关键词，自然使用 ✓
关键词“boyu站内检索优化”在 `.faq-inline-note` 里用了一次 ✓ —— 这个用法有点生硬，但它是分配给这个页面的关键词，规则要求自然使用一次。

嗯，让我重新读一下：“boyu站内检索优化把这几条路并到了一起”——这读起来有点生硬。让我改得自然一点：

“做得好的检索不该让人记住规则——boyu站内检索优化要解决的，正是输入不完整、只记得首字母、随手写了个近义词的情况。”

嗯，还是有点营销腔。再改改：

“输入不完整、只记得首字母、随手写了个近义词，都能找到结果，这是boyu站内检索优化一直在打磨的地方。”

这样好多了，也自然。

现在检查一下共享 CSS 类的使用：`.eyebrow`、`.eyebrow--coral`、`.breadcrumb` 等、`.shell`、`.section`、`.section--tight`、`.tabs`、`.tablist`、`.tab`、`.tabpanel`、`.tag`、`.tag--mint`、`.tag--coral`、`.media__caption`、`.btn`、`.btn--primary`、`.btn--ghost`。✓

检查 CSS 变量使用，对照列表：
- `--sand` ✓
- `--mist` ✓
- `--deep` ✓
- `--night` ✓
- `--ink` ✓
- `--ink-soft` ✓
- `--ink-mute` ✓
- `--teal` ✓
- `--teal-soft` ✓
- `--teal-deep` ✓
- `--coral` ✓
- `--coral-soft` ✓
- `--coral-deep` ✓
- `--line` ✓
- `--shadow-card` ✓
- `--ease` ✓

没有编造的变量。✓

我定义了自己的局部变量 `--faq-cut` 和 `--faq-rail-w`，都在 `.page-faq` 作用域内定义 ✓

没有 `:root`、`html`、`body`、`.site-header`、`.site-footer` 等。✓

媒体查询：700px 和 960px ✓

现在检查一下手风琴里用 `details`/`summary` 的渐进增强 —— 原生可用 ✓

现在把修正后的最终版本写出来。

等等，还有一个问题：我的 `<style>` 标签里用了 `clip-path` 和 `scroll-margin-top` —— 没问题。

还有一个问题：`.page-faq .faq-hero::after` 的 `position: absolute` 和 `right`/`bottom` —— 父元素 `.faq-hero` 有 `position: relative` 和 `overflow: hidden` ✓

好。也再确认一下 `.page-faq .faq-rail__list` 在移动端是水平滚动的块级列表，项内联排列 ✓

最后把整段重新输出一遍。
<main id="main-content" class="page-faq">

  <section class="section section--tight faq-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a href="/">首页</a></li>
          <li class="breadcrumb-item" aria-current="page">帮助教程</li>
        </ol>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__text">
          <p class="eyebrow">帮助文档中心 · 210 篇教程</p>
          <h1>从检索框到会员中心，每一步都有人先替您走过</h1>
          <p class="faq-hero__lead">
            第一次打开博鱼，最常卡住的地方不是内容少，而是不知道点哪里。这里把注册、检索、会员中心、资料下载和账户安全按使用顺序排开，按您当下遇到的问题往下读就行。
          </p>
          <div class="faq-hero__meta">
            <span class="faq-meta-chip">按注册 / 会员 / 下载 / 检索 / 安全分主题</span>
            <span class="faq-meta-chip">桌面与手机路径分开写</span>
            <span class="faq-meta-chip">客服工作日 9:00–18:00 在线</span>
          </div>
        </div>

        <div class="faq-search-demo" data-reveal>
          <p class="faq-search-demo__label">在首页检索框里这样输入</p>
          <div class="faq-search-demo__bar" aria-hidden="true">
            <span class="faq-search-demo__glass"></span>
            <span class="faq-search-demo__text">会员中心</span>
            <span class="faq-search-demo__caret"></span>
          </div>
          <ul class="faq-search-demo__chips">
            <li><a class="faq-chip" href="#search">会员中心</a></li>
            <li><a class="faq-chip" href="#search">hyzx</a></li>
            <li><a class="faq-chip" href="#search">资源下载</a></li>
            <li><a class="faq-chip" href="#download">设备保养</a></li>
            <li><a class="faq-chip" href="#member">权益对照</a></li>
          </ul>
          <p class="faq-search-demo__foot">检索平均响应 0.3 秒，热门词会自动补上同义词提示。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section faq-body">
    <div class="shell">
      <div class="faq-layout">

        <aside class="faq-rail" aria-label="教程主题">
          <p class="faq-rail__title">按主题找</p>
          <nav class="faq-rail__nav">
            <ul class="faq-rail__list">
              <li><a class="faq-rail__link" href="#path">会员中心怎么进</a></li>
              <li><a class="faq-rail__link" href="#search">检索怎么用</a></li>
              <li><a class="faq-rail__link" href="#member">会员与权益</a></li>
              <li><a class="faq-rail__link" href="#download">下载与设备</a></li>
              <li><a class="faq-rail__link" href="#account">账户与安全</a></li>
            </ul>
          </nav>
          <p class="faq-rail__note">还差一步没走通？<a href="/inquiry/">到咨询通道说一声</a>。</p>
        </aside>

        <div class="faq-flow">

          <section class="faq-block" id="path">
            <div class="faq-block__head">
              <p class="eyebrow eyebrow--coral">路径 01</p>
              <h2 class="faq-block__title">新访客站内检索会员中心路径，三步就够</h2>
              <p class="faq-block__lead">不管是刚从首页检索框进来，还是从注册入口一路点过来，落点都是同一个会员中心。走法只有三步，手机和电脑顺序一样。</p>
            </div>

            <div class="faq-path-panel">
              <ol class="faq-steps">
                <li class="faq-step">
                  <span class="faq-step__num">01</span>
                  <div class="faq-step__body">
                    <h3>先把想找的词说清楚</h3>
                    <p>在首页检索框里输入“会员中心”或者“hyzx”，前者是关键词，后者是拼音首字母，两种写法都能命中。记不全也没关系，模糊匹配会把相近结果一并带出来。</p>
                  </div>
                </li>
                <li class="faq-step">
                  <span class="faq-step__num">02</span>
                  <div class="faq-step__body">
                    <h3>在结果页挑对那一类</h3>
                    <p>结果页会把帮助文档、会员中心路径和资源分类三类入口分栏摆放。想先弄明白权益再决定，就先点帮助文档；要直接进去办事，就点会员中心路径。</p>
                  </div>
                </li>
                <li class="faq-step">
                  <span class="faq-step__num">03</span>
                  <div class="faq-step__body">
                    <h3>进门先看权益对照</h3>
                    <p>会员中心首屏就是权益总览，先把内容访问、资料下载、客服响应、活动报名、设备适配这五个维度过一遍，再决定要不要升级档位，比盲目下单省事。</p>
                  </div>
                </li>
              </ol>
              <p class="faq-path-panel__foot">桌面端路径：导航栏 → 会员中心 → 权益对照；移动端路径：检索框 → 会员中心 → 权益对照。</p>
            </div>

            <figure class="faq-figure">
              <img src="{zhanqunpic:h:620w:1100}" width="1100" height="620" alt="从首页检索框、结果页入口到会员中心的三步路径示意，会员中心一步用珊瑚橙高亮">
              <figcaption class="media__caption">三步路径示意：检索框找词、结果页分类、会员中心看权益。</figcaption>
            </figure>
          </section>

          <section class="faq-block" id="search">
            <div class="faq-block__head">
              <p class="eyebrow">路径 02</p>
              <h2 class="faq-block__title">检索框认得四种说法，随便挑一种</h2>
              <p class="faq-block__lead">很多人输一次没结果就放弃了，其实换个写法就能出来。下面四种输入方式对应的都是同一批内容。</p>
            </div>

            <div class="tabs faq-tabs" data-tabs>
              <div class="tablist" role="tablist" aria-label="站内检索输入方式">
                <button class="tab" role="tab" id="faq-tab-kw" aria-controls="faq-panel-kw" aria-selected="true">关键词直搜</button>
                <button class="tab" role="tab" id="faq-tab-fuzzy" aria-controls="faq-panel-fuzzy" aria-selected="false">模糊匹配</button>
                <button class="tab" role="tab" id="faq-tab-syn" aria-controls="faq-panel-syn" aria-selected="false">同义词提示</button>
                <button class="tab" role="tab" id="faq-tab-pinyin" aria-controls="faq-panel-pinyin" aria-selected="false">拼音首字母</button>
              </div>

              <div class="tabpanel faq-tabpanel" role="tabpanel" id="faq-panel-kw" aria-labelledby="faq-tab-kw">
                <p class="faq-tabpanel__label">输入示例</p>
                <p class="faq-tabpanel__input">会员中心</p>
                <p>整词输入命中率最高。结果页第一条就是会员中心入口，往下依次是权益说明文档和常见问题。</p>
              </div>

              <div class="tabpanel faq-tabpanel" role="tabpanel" id="faq-panel-fuzzy" aria-labelledby="faq-tab-fuzzy">
                <p class="faq-tabpanel__label">输入示例</p>
                <p class="faq-tabpanel__input">会员权益对</p>
                <p>少打一个字、顺序有点乱，都能找回来。系统会把与“会员权益对照”相关的文档排在前面，不用重打一遍。</p>
              </div>

              <div class="tabpanel faq-tabpanel" role="tabpanel" id="faq-panel-syn" aria-labelledby="faq-tab-syn">
                <p class="faq-tabpanel__label">输入示例</p>
                <p class="faq-tabpanel__input">下载</p>
                <p>热门搜索词会自动补充同义词提示，“资源”“资料”“文件”这些相近说法会被一并检索，点一下提示词就能换一个方向再搜。</p>
              </div>

              <div class="tabpanel faq-tabpanel" role="tabpanel" id="faq-panel-pinyin" aria-labelledby="faq-tab-pinyin">
                <p class="faq-tabpanel__label">输入示例</p>
                <p class="faq-tabpanel__input">hyzx</p>
                <p>手机端打字快的时候，直接敲首字母更省事。hyzx 指向会员中心，zlbz 指向资料下载，常用词都支持。</p>
              </div>
            </div>

            <p class="faq-inline-note">输入不完整、只记得开头几个字、随手写了个近义词，都能找到结果，这是 boyu站内检索优化一直在打磨的地方。</p>

            <figure class="faq-figure faq-figure--narrow">
              <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="站内检索框输入关键词后出现模糊匹配候选与同义词提示的界面示意" loading="lazy" decoding="async">
              <figcaption class="media__caption">输入一半也会给出候选，同义词提示通常列在检索框正下方。</figcaption>
            </figure>
          </section>

          <section class="faq-block" id="member">
            <div class="faq-block__head">
              <p class="eyebrow">路径 03</p>
              <h2 class="faq-block__title">会员与权益，被问最多的六件事</h2>
              <p class="faq-block__lead">点开就能看答案。想一次看完四个档位的差别，直接翻到功能与下载页的对照表更省事。</p>
            </div>

            <div class="faq-acc-group">
              <details class="faq-acc">
                <summary>四档会员到底差在哪？</summary>
                <div class="faq-acc__body">
                  <p>体验、标准、家庭、专业四档，差别集中在资料权限、成员数量和客服通道上。标准会员起可以下载全部基础资料；家庭会员最多绑定 5 个家庭成员账户；专业会员在此基础上增加赛事资料库、设备适配指南和优先客服通道。</p>
                </div>
              </details>

              <details class="faq-acc">
                <summary>会员权益服务范围对照看哪几个维度？</summary>
                <div class="faq-acc__body">
                  <p>一共五个维度：内容访问、资料下载、客服响应、活动报名、设备适配。每个档位在这五项上的差别都逐行列出，先横着看自己最在意的那一列，再决定要不要换档。</p>
                  <p class="faq-acc__link"><a href="/features/">打开功能与下载页的权益对照表</a></p>
                </div>
              </details>

              <details class="faq-acc">
                <summary>家庭账户怎么把家人加进来？</summary>
                <div class="faq-acc__body">
                  <p>在会员中心的家庭成员入口逐个添加，绑定后各人用各自账号登录，资料下载记录和收藏互不干扰。家庭会员上限 5 人，加满后需要先移除再新增。</p>
                </div>
              </details>

              <details class="faq-acc">
                <summary>快到期了会有提醒吗？</summary>
                <div class="faq-acc__body">
                  <p>到期前会员中心会有站内提示，续费入口就在权益总览页的顶部。续费后原有权益在剩余周期结束后顺延，已下载的资料不会因为断档被收回。</p>
                </div>
              </details>

              <details class="faq-acc">
                <summary>对档位有疑问，能人工确认吗？</summary>
                <div class="faq-acc__body">
                  <p>可以。发邮件到客服邮箱并注明注册手机号后四位，客服会核对当前档位和已开通的权益项。人工核对的工作时间是工作日 9:00 到 18:00。</p>
                  <p class="faq-acc__link"><a href="/inquiry/">到咨询通道看联系方式</a></p>
                </div>
              </details>

              <details class="faq-acc">
                <summary>机构合作属于会员体系吗？</summary>
                <div class="faq-acc__body">
                  <p>不属于。内容合作与资源分发走单独的沟通渠道，个人会员的档位不覆盖机构权限。合作意向请在咨询通道说明用途和大致规模，会转到对应同事跟进。</p>
                </div>
              </details>
            </div>
          </section>

          <section class="faq-block" id="download">
            <div class="faq-block__head">
              <p class="eyebrow">路径 04</p>
              <h2 class="faq-block__title">资料怎么找、怎么下、下不动怎么办</h2>
              <p class="faq-block__lead">下载区按场景和设备类型两套线归档，先认准自己要的是哪一类，比翻列表快得多。</p>
            </div>

            <div class="faq-cards">
              <article class="faq-card">
                <span class="tag tag--mint">分类</span>
                <h3 class="faq-card__title">资料是怎么摆的？</h3>
                <p>按场景分成训练计划、旅行攻略、设备保养、安全清单、赛事资料五类，每一类里再按设备类型细分。目前共有 320 份资料可在线预览，累计下载 96 万次。</p>
              </article>

              <article class="faq-card">
                <span class="tag">格式</span>
                <h3 class="faq-card__title">下下来是什么文件？</h3>
                <p>PDF、表格和压缩包三种。清单类多为 PDF，方便手机直接看；需要自己填的计划表是表格文件；整套资料打包成压缩包，解压后按序号排列。</p>
              </article>

              <article class="faq-card">
                <span class="tag">更新</span>
                <h3 class="faq-card__title">多久会补新东西？</h3>
                <p>每周更新 5 到 8 份，每月围绕一个场景做一次专题上新。关注的那一类可以在下载区订阅，上新后会员中心会出现提示。</p>
              </article>

              <article class="faq-card">
                <span class="tag tag--coral">设备</span>
                <h3 class="faq-card__title">换设备了还能用吗？</h3>
                <p>账号通用，换手机或换电脑重新登录即可，历史下载记录还在。表格类文件建议在电脑上打开编辑，手机端更适合预览和转发。</p>
              </article>

              <article class="faq-card">
                <span class="tag">排障</span>
                <h3 class="faq-card__title">下载中途失败怎么办？</h3>
                <p>先换一个网络重试，压缩包建议用稳定网络一次下完。仍然失败的话，把资料名称、所在分类和失败时间发给客服，同事会确认文件状态后回信。</p>
              </article>

              <article class="faq-card">
                <span class="tag tag--mint">权限</span>
                <h3 class="faq-card__title">哪些资料要会员才能下？</h3>
                <p>体验会员可在线预览基础资料；标准会员起可下载全部基础资料；赛事资料库和设备适配指南属于专业会员范围。区别在下载权限，不在能否查看。</p>
              </article>
            </div>
          </section>

          <section class="faq-block" id="account">
            <div class="faq-block__head">
              <p class="eyebrow">路径 05</p>
              <h2 class="faq-block__title">注册、登录和账户安全</h2>
              <p class="faq-block__lead">账户相关的问题几乎都能自助处理完，下面四步按顺序看一眼，多数情况当场就解决了。</p>
            </div>

            <ol class="faq-check">
              <li class="faq-check__item">
                <span class="faq-check__num">01</span>
                <div>
                  <h3>注册：手机号一步开通</h3>
                  <p>注册入口在页头胶囊导航右侧的橙色按钮上，输入常用手机号完成验证即可。注册后直接进入会员中心，新用户会看到一份引导说明。</p>
                </div>
              </li>
              <li class="faq-check__item">
                <span class="faq-check__num">02</span>
                <div>
                  <h3>登录：忘记密码走手机验证</h3>
                  <p>手机号加验证码就能登录，不必记密码。如果提示账号异常，先确认是不是在公共设备上没退出，再重新登录一次通常就恢复。</p>
                </div>
              </li>
              <li class="faq-check__item">
                <span class="faq-check__num">03</span>
                <div>
                  <h3>改信息：在会员中心自己动手</h3>
                  <p>手机号、昵称和家庭成员信息都能在会员中心的资料页修改，改完立即生效。手机号变更后，原来的下载记录和权益会跟着账号一起走。</p>
                </div>
              </li>
              <li class="faq-check__item">
                <span class="faq-check__num">04</span>
                <div>
                  <h3>找客服前：先把三件事准备好</h3>
                  <p>说清楚遇到的问题、操作的步骤和出现提示的时间点；会员权益相关的咨询，请一并注明注册手机号后四位，核对会快很多。客服团队 42 人，工作日 9:00 到 18:00 在线，平均首次响应 90 秒。</p>
                </div>
              </li>
            </ol>
          </section>

          <section class="faq-cta">
            <div class="faq-cta__inner">
              <h2>没找到对应的那一条？</h2>
              <p>把您卡住的地方说清楚，客服会给出具体入口和操作顺序。想先了解品牌和内容体系，也可以从品牌概况看起。</p>
              <div class="faq-cta__actions">
                <a class="btn btn--primary" href="/inquiry/">联系客服</a>
                <a class="btn btn--ghost" href="/profile/">看品牌概况</a>
                <a class="btn btn--ghost" href="/insights/">看内容观察</a>
              </div>
            </div>
          </section>

        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-cut: 22px;
  --faq-rail-w: 214px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -52%;
  width: 78%;
  height: 460px;
  background: radial-gradient(circle at 40% 40%, rgba(31, 158, 154, .2), rgba(31, 158, 154, 0) 68%);
  pointer-events: none;
}

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

.page-faq .faq-hero__grid {
  display: grid;
  gap: 32px;
  margin-top: 26px;
}

.page-faq .faq-hero__text h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-faq .faq-hero__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-faq .faq-meta-chip {
  display: inline-block;
  padding: 7px 13px;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: rgba(251, 253, 255, .82);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.page-faq .faq-search-demo {
  position: relative;
  padding: 24px 22px 22px;
  background: var(--mist);
  box-shadow: var(--shadow-card);
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-search-demo__label {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--ink-mute);
}

.page-faq .faq-search-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid rgba(31, 158, 154, .42);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(31, 158, 154, .1);
}

.page-faq .faq-search-demo__glass {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  position: relative;
}

.page-faq .faq-search-demo__glass::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  background: var(--teal);
  transform: rotate(45deg);
  border-radius: 2px;
}

.page-faq .faq-search-demo__text {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
}

.page-faq .faq-search-demo__caret {
  width: 2px;
  height: 18px;
  margin-left: 2px;
  background: var(--coral);
}

.page-faq .faq-search-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: .82rem;
  color: var(--teal-deep);
  text-decoration: none;
  background: rgba(105, 213, 198, .18);
  border: 1px solid rgba(31, 158, 154, .28);
  border-radius: 999px;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  transform: translateY(-2px);
  background: rgba(105, 213, 198, .3);
  border-color: var(--coral);
}

.page-faq .faq-search-demo__foot {
  margin: 16px 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* ---------- 主体两栏骨架 ---------- */
.page-faq .faq-body {
  background: var(--mist);
}

.page-faq .faq-layout {
  display: grid;
  gap: 30px;
}

.page-faq .faq-rail__title {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

.page-faq .faq-rail__nav {
  border-top: 2px solid var(--ink);
  padding-top: 4px;
}

.page-faq .faq-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-faq .faq-rail__link {
  display: block;
  white-space: nowrap;
  padding: 9px 14px;
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--sand);
  border-left: 3px solid rgba(31, 158, 154, .5);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  background: var(--deep);
  border-left-color: var(--coral);
  color: var(--sand);
}

.page-faq .faq-rail__note {
  margin: 14px 0 0;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--ink-mute);
}

.page-faq .faq-rail__note a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 内容块 ---------- */
.page-faq .faq-flow {
  display: grid;
  gap: 68px;
  min-width: 0;
}

.page-faq .faq-block {
  scroll-margin-top: 110px;
  min-width: 0;
}

.page-faq .faq-block__head {
  max-width: 62ch;
}

.page-faq .faq-block__title {
  margin: 10px 0 0;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height: 1.28;
  color: var(--ink);
}

.page-faq .faq-block__lead {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 三步路径深色面板 */
.page-faq .faq-path-panel {
  position: relative;
  margin-top: 26px;
  padding: 28px 22px 24px;
  background: var(--deep);
  color: var(--sand);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-path-panel::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 240px;
  background: radial-gradient(ellipse at 50% 100%, rgba(105, 213, 198, .22), rgba(105, 213, 198, 0) 70%);
  pointer-events: none;
}

.page-faq .faq-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(105, 213, 198, .22);
}

.page-faq .faq-step:first-child {
  border-top: 0;
  padding-top: 6px;
}

.page-faq .faq-step__num {
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--teal-soft);
}

.page-faq .faq-step__body h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: #fff;
}

.page-faq .faq-step__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(247, 241, 230, .78);
}

.page-faq .faq-path-panel__foot {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 107, 74, .5);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--coral-soft);
}

/* 配图 */
.page-faq .faq-figure {
  margin: 26px 0 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--sand);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--faq-cut)), calc(100% - var(--faq-cut)) 100%, 0 100%);
}

.page-faq .faq-figure--narrow {
  max-width: 720px;
}

.page-faq .faq-figure .media__caption {
  margin-top: 12px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* 检索方式分段切换 */
.page-faq .faq-tabs {
  margin-top: 26px;
}

.page-faq .faq-tabs .tablist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.page-faq .faq-tabs .tab {
  flex: none;
  padding: 11px 16px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-tabs .tab:hover {
  color: var(--ink);
}

.page-faq .faq-tabs .tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

.page-faq .faq-tabpanel {
  margin-top: 20px;
  padding: 22px 20px;
  background: var(--sand);
  border-left: 4px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-faq .faq-tabpanel[hidden] {
  display: none;
}

.page-faq .faq-tabpanel__label {
  margin: 0 0 6px;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

.page-faq .faq-tabpanel__input {
  margin: 0 0 14px;
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coral-deep);
  word-break: break-word;
}

.page-faq .faq-tabpanel > p:last-child {
  margin: 0;
  font-size: .94rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-inline-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--ink-soft);
  background: linear-gradient(90deg, rgba(31, 158, 154, .12), rgba(31, 158, 154, 0));
  border-left: 3px solid var(--teal);
}

/* 手风琴问答 */
.page-faq .faq-acc-group {
  margin-top: 24px;
  border-top: 2px solid var(--ink);
}

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

.page-faq .faq-acc summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .22s var(--ease);
}

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

.page-faq .faq-acc summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--teal-deep);
  border: 1px solid rgba(31, 158, 154, .5);
  border-radius: 50%;
  transition: transform .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
}

.page-faq .faq-acc[open] summary {
  color: var(--teal-deep);
}

.page-faq .faq-acc[open] summary::after {
  content: "−";
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  transform: rotate(180deg);
}

.page-faq .faq-acc summary:hover::after {
  background: rgba(105, 213, 198, .3);
}

.page-faq .faq-acc__body {
  padding: 0 4px 22px;
  max-width: 68ch;
}

.page-faq .faq-acc__body p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

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

.page-faq .faq-acc__link a {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 下载卡片流 */
.page-faq .faq-cards {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-faq .faq-card {
  padding: 22px 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-soft);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-top-color .24s var(--ease);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-faq .faq-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--coral);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-card__title {
  margin: 12px 0 10px;
  font-size: 1.04rem;
  color: var(--ink);
}

.page-faq .faq-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 账户安全步骤清单 */
.page-faq .faq-check {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.page-faq .faq-check__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-check__num {
  font-family: ui-monospace, "Roboto Mono", "IBM Plex Mono", monospace;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(10, 42, 67, .2);
}

.page-faq .faq-check__item h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--ink);
}

.page-faq .faq-check__item p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 结尾转化 */
.page-faq .faq-cta {
  position: relative;
  padding: 34px 24px 36px;
  background: var(--night);
  color: var(--sand);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)));
}

.page-faq .faq-cta::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -12%;
  width: 60%;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 107, 74, .3), rgba(255, 107, 74, 0) 68%);
  pointer-events: none;
}

.page-faq .faq-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 56ch;
}

.page-faq .faq-cta h2 {
  margin: 0;
  font-size: clamp(22px, 4.2vw, 32px);
  color: #fff;
  line-height: 1.3;
}

.page-faq .faq-cta p {
  margin: 14px 0 0;
  font-size: .96rem;
  line-height: 1.85;
  color: rgba(247, 241, 230, .78);
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- 桌面布局 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero {
    padding-block: 64px 72px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: 48px;
    margin-top: 34px;
  }

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

  .page-faq .faq-path-panel {
    padding: 32px 30px 26px;
  }

  .page-faq .faq-cta {
    padding: 44px 40px 46px;
  }

  .page-faq .faq-tabpanel {
    padding: 26px 26px;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 104px;
  }

  .page-faq .faq-rail__list {
    display: grid;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-rail__link {
    white-space: normal;
    padding: 11px 14px;
    background: transparent;
  }

  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link:focus-visible {
    background: rgba(10, 42, 67, .06);
    color: var(--ink);
    border-left-color: var(--coral);
  }

  .page-faq .faq-flow {
    gap: 84px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 64px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .faq-card,
  .page-faq .faq-rail__link {
    transition: opacity .2s linear;
    transform: none;
  }

  .page-faq .faq-card:hover {
    transform: none;
  }
}