.page-faq {
  --faq-rule: rgba(42, 59, 82, .7);
  --faq-rule-soft: rgba(42, 59, 82, .38);
  --faq-paper: var(--paper-050);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.page-faq .container {
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: var(--container);
}

/* ---------- 首屏 ---------- */

.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 56px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(80% 70% at 88% 2%, rgba(53, 230, 212, .18), transparent 62%),
    radial-gradient(70% 70% at 2% 96%, rgba(255, 178, 94, .10), transparent 68%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-850) 100%);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(169, 184, 204, .05) 0 1px, transparent 1px 5px);
}

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

.page-faq .faq-hero-grid {
  display: grid;
  gap: 30px;
  margin-top: 26px;
}

.page-faq .faq-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-faq .faq-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 7.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 900;
  max-width: 13em;
  color: var(--paper-050);
}

.page-faq .faq-lead {
  margin: 22px 0 0;
  max-width: 36em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--text-dim);
}

.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px 10px 13px;
  border: 1px solid var(--faq-rule);
  border-radius: var(--radius-pill);
  background: rgba(12, 27, 46, .7);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.page-faq .faq-jump-link .mono {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
}

.page-faq .faq-jump-link:hover,
.page-faq .faq-jump-link:focus-visible {
  border-color: var(--cyan-600);
  background: rgba(53, 230, 212, .12);
}

.page-faq .faq-hero-figure {
  margin: 0;
}

.page-faq .faq-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid rgba(53, 230, 212, .16);
  box-shadow: 0 26px 64px -34px rgba(0, 0, 0, .9);
}

/* ---------- 区块骨架 ---------- */

.page-faq .faq-block {
  padding: clamp(56px, 8vw, 104px) 0;
}

.page-faq .faq-block-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-faq .faq-block-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-faq .faq-block-title {
  margin: 0;
  font-size: clamp(25px, 3.6vw, 43px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  max-width: 20em;
}

.page-faq .faq-block-desc {
  margin: 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dim);
}

/* ---------- 文档分类 ---------- */

.page-faq .faq-index {
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
  border-top: 1px solid var(--faq-rule-soft);
}

.page-faq .faq-index-grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
}

.page-faq .faq-toc {
  padding: 20px;
  border: 1px solid var(--faq-rule);
  border-radius: var(--radius-m);
  background: rgba(6, 17, 31, .55);
}

.page-faq .faq-toc-label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog-300);
}

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

.page-faq .faq-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: var(--radius-s);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-toc-list a .mono {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cyan-600);
}

.page-faq .faq-toc-list a:hover,
.page-faq .faq-toc-list a:focus-visible {
  color: var(--text);
  background: rgba(53, 230, 212, .09);
  border-left-color: var(--accent);
}

.page-faq .faq-toc-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fog-300);
}

.page-faq .faq-toc-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--faq-rule-soft);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fog-300);
}

.page-faq .faq-cat {
  border-top: 1px solid var(--faq-rule);
}

.page-faq .faq-cat:last-child {
  border-bottom: 1px solid var(--faq-rule);
}

.page-faq .faq-cat summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-cat summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--accent);
  transition: transform .22s var(--ease);
}

.page-faq .faq-cat[open] summary::after {
  transform: rotate(45deg);
}

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

.page-faq .faq-cat-name {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-faq .faq-cat-count {
  font-size: 11px;
  color: var(--fog-300);
}

.page-faq .faq-entry-list {
  list-style: none;
  margin: 0 0 22px 12px;
  padding: 2px 0 2px 20px;
  border-left: 1px solid var(--faq-rule);
  display: grid;
  gap: 16px;
}

.page-faq .faq-entry-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper-050);
}

.page-faq .faq-entry-desc {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--text-dim);
}

/* ---------- 平板适配（浅色区） ---------- */

.page-faq .faq-fit {
  background: var(--faq-paper);
  color: var(--ink-900);
}

.page-faq .faq-fit .faq-block-kicker {
  color: var(--cyan-600);
}

.page-faq .faq-fit .faq-block-title {
  color: var(--ink-900);
}

.page-faq .faq-fit .faq-block-desc {
  color: var(--slate-600);
}

.page-faq .faq-ruler {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(24px, 4vw, 40px);
  overflow: visible;
}

.page-faq .faq-ruler-track {
  stroke: var(--slate-600);
  stroke-width: 2;
  opacity: .28;
}

.page-faq .faq-ruler-ticks line {
  stroke: var(--cyan-600);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.page-faq .faq-ruler-labels text {
  fill: var(--slate-600);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
}

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

.page-faq .faq-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(42, 59, 82, .16);
  border-radius: var(--radius-m);
  background: var(--faq-paper);
  overflow: hidden;
}

.page-faq .faq-check {
  padding: 17px 18px;
}

.page-faq .faq-check + .faq-check {
  border-top: 1px solid rgba(42, 59, 82, .14);
}

.page-faq .faq-check-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}

.page-faq .faq-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-600);
  box-shadow: 0 0 0 4px rgba(15, 168, 160, .14);
}

.page-faq .faq-dot--warm {
  background: var(--amber-650);
  box-shadow: 0 0 0 4px rgba(201, 122, 43, .16);
}

.page-faq .faq-check p {
  margin: 7px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--slate-600);
}

.page-faq .faq-fit-figure {
  margin: 0;
}

.page-faq .faq-fit-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid rgba(42, 59, 82, .14);
}

/* ---------- 换机登录 ---------- */

.page-faq .faq-switch {
  background:
    radial-gradient(90% 80% at 6% 0%, rgba(255, 178, 94, .09), transparent 62%),
    var(--ink-950);
}

.page-faq .faq-switch .faq-block-kicker {
  color: var(--amber-400);
}

.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  max-width: 52em;
}

.page-faq .faq-step {
  position: relative;
  padding: 0 0 34px 58px;
}

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

.page-faq .faq-step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 178, 94, .45), rgba(42, 59, 82, .18));
}

.page-faq .faq-step:last-child::before {
  display: none;
}

.page-faq .faq-step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 178, 94, .42);
  background: var(--ink-850);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--amber-400);
}

.page-faq .faq-step-title {
  margin: 6px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper-050);
}

.page-faq .faq-step-desc {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 40em;
}

/* ---------- 资料下载 ---------- */

.page-faq .faq-downloads {
  background: var(--mint-100);
  color: var(--ink-900);
}

.page-faq .faq-downloads .faq-block-kicker {
  color: var(--cyan-600);
}

.page-faq .faq-downloads .faq-block-title {
  color: var(--ink-900);
}

.page-faq .faq-downloads .faq-block-desc {
  color: var(--slate-600);
}

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

.page-faq .faq-dl {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(42, 59, 82, .14);
  background: var(--faq-paper);
  overflow: hidden;
}

.page-faq .faq-dl::before {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 230, 212, .26), transparent 68%);
}

.page-faq .faq-dl-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--mist-100);
  color: var(--slate-600);
  font-size: 11px;
  letter-spacing: .14em;
}

.page-faq .faq-dl-tag--web {
  background: rgba(255, 178, 94, .22);
  color: var(--amber-650);
}

.page-faq .faq-dl-title {
  position: relative;
  margin: 16px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.page-faq .faq-dl-desc {
  position: relative;
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate-600);
}

.page-faq .faq-dl-foot {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--slate-600);
}

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

/* ---------- 热门问题与人工支持 ---------- */

.page-faq .faq-hot {
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-850) 100%);
  border-top: 1px solid var(--faq-rule-soft);
}

.page-faq .faq-q-list {
  display: grid;
  border-top: 1px solid var(--faq-rule);
}

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

.page-faq .faq-q summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper-050);
  transition: color .2s var(--ease);
}

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

.page-faq .faq-q summary:hover {
  color: var(--accent);
}

.page-faq .faq-q-num {
  flex: none;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cyan-600);
}

.page-faq .faq-q-answer {
  margin: 0 0 20px 38px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 40em;
}

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

.page-faq .faq-support {
  display: grid;
  gap: 22px;
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 178, 94, .3);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 178, 94, .16), transparent 58%),
    var(--ink-850);
}

.page-faq .faq-support-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.page-faq .faq-support-title {
  margin: 12px 0 0;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--paper-050);
}

.page-faq .faq-support-desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 38em;
}

.page-faq .faq-support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.page-faq .faq-support-actions .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(53, 230, 212, .42);
  background: rgba(53, 230, 212, .1);
  color: var(--paper-050);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-support-actions .copy-btn:hover,
.page-faq .faq-support-actions .copy-btn:focus-visible {
  background: rgba(53, 230, 212, .18);
  border-color: var(--accent);
}

.page-faq .faq-support-actions .copy-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--accent);
}

.page-faq .faq-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  font-size: 14px;
  color: var(--amber-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 178, 94, .35);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-support-link:hover,
.page-faq .faq-support-link:focus-visible {
  color: var(--paper-050);
  border-color: var(--paper-050);
}

.page-faq .faq-related {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--faq-rule-soft);
  padding-top: 20px;
}

.page-faq .faq-related a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--faq-rule-soft);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.page-faq .faq-related a:hover,
.page-faq .faq-related a:focus-visible {
  color: var(--text);
  border-color: var(--cyan-600);
  background: rgba(53, 230, 212, .07);
}

/* ---------- 响应式 ---------- */

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

  .page-faq .faq-support {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
  }

  .page-faq .faq-support-actions {
    justify-content: flex-end;
  }

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

@media (min-width: 860px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: end;
  }

  .page-faq .faq-fit-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-index-grid {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-faq .faq-switch .faq-block-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-jump-link,
  .page-faq .faq-toc-list a,
  .page-faq .faq-cat summary::after,
  .page-faq .faq-q summary,
  .page-faq .faq-support-actions .copy-btn,
  .page-faq .faq-support-link,
  .page-faq .faq-related a {
    transition: none;
  }
}


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

  <section class="faq-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑导航">
        <a href="/">首页</a>
        <span class="breadcrumb-sep" aria-hidden="true">/</span>
        <span aria-current="page">教程中心</span>
      </nav>

      <div class="faq-hero-grid">
        <div class="faq-hero-copy">
          <p class="faq-kicker mono">帮助文档 / 教程中心</p>
          <h1>换设备、调平板、取资料，按分类找到具体步骤</h1>
          <p class="faq-lead">博狗在线帮助文档分成六大分类、180 余篇条目，从入门指引一路排到常见故障。平板访问中文站要检查哪几项、换了新手机之后从哪里重新登录、PDF 和网页版文档去哪一栏取，翻到对应分类就有做法。要是文档没覆盖到你的情况，客服邮箱就在下面，工作日 9:00–18:00 内会回。</p>
          <ul class="faq-jump">
            <li><a class="faq-jump-link" href="#doc-index"><span class="mono">01</span>文档分类</a></li>
            <li><a class="faq-jump-link" href="#tablet-fit"><span class="mono">02</span>平板适配</a></li>
            <li><a class="faq-jump-link" href="#switch-login"><span class="mono">03</span>换机登录</a></li>
            <li><a class="faq-jump-link" href="#downloads"><span class="mono">04</span>资料下载</a></li>
            <li><a class="faq-jump-link" href="#hot-questions"><span class="mono">05</span>热门问题</a></li>
          </ul>
        </div>
        <figure class="faq-hero-figure">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="屏幕上的资料下载栏目与桌面上摊开的文档索引卡并排，分类标签和编号清晰可读" loading="eager" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-block faq-index" id="doc-index">
    <div class="container">
      <div class="faq-index-grid">

        <aside class="faq-toc">
          <p class="faq-toc-label mono">分类目录</p>
          <ul class="faq-toc-list">
            <li><a href="#cat-entry"><span class="mono">01</span>入门指引<span class="faq-toc-count">32</span></a></li>
            <li><a href="#cat-device"><span class="mono">02</span>设备适配<span class="faq-toc-count">28</span></a></li>
            <li><a href="#cat-member"><span class="mono">03</span>会员中心<span class="faq-toc-count">24</span></a></li>
            <li><a href="#cat-legacy"><span class="mono">04</span>旧版通道<span class="faq-toc-count">22</span></a></li>
            <li><a href="#cat-trouble"><span class="mono">05</span>常见故障<span class="faq-toc-count">46</span></a></li>
            <li><a href="#cat-download"><span class="mono">06</span>资料下载<span class="faq-toc-count">30</span></a></li>
          </ul>
          <p class="faq-toc-note">拿不准归到哪一类的时候，先扫一眼常见故障里的前几条，多数情况都能对上。</p>
        </aside>

        <div class="faq-docs">
          <div class="faq-block-head">
            <p class="faq-block-kicker mono">01 / 六大分类</p>
            <h2 class="faq-block-title">先找分类，再看条目</h2>
            <p class="faq-block-desc">每篇条目的标题都尽量写成你遇到的情况，而不是功能名。标题越贴近你眼前的画面，越接近你要的那一步。全部条目可按设备类型、使用场景和版本三个维度检索，单篇平均读下来大约 6 分钟。</p>
          </div>

          <details class="faq-cat" id="cat-entry" open>
            <summary>
              <span class="faq-cat-num mono">01</span>
              <span class="faq-cat-name">入门指引</span>
              <span class="faq-cat-count mono">32 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">第一次打开中文站，先确认这三件事</span>
                <span class="faq-entry-desc">地址、网络和浏览器版本，任何一项不对都会让首页显示不完整。</span>
              </li>
              <li>
                <span class="faq-entry-title">把常用账号信息提前整理好</span>
                <span class="faq-entry-desc">注册时使用的手机号或邮箱，是后面换机验证能一次通过的关键。</span>
              </li>
              <li>
                <span class="faq-entry-title">首页各区域分别能做什么</span>
                <span class="faq-entry-desc">从服务入口到帮助文档，一眼看清哪块对应你此刻要做的事。</span>
              </li>
            </ul>
          </details>

          <details class="faq-cat" id="cat-device">
            <summary>
              <span class="faq-cat-num mono">02</span>
              <span class="faq-cat-name">设备适配</span>
              <span class="faq-cat-count mono">28 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">平板访问中文站的适配检查</span>
                <span class="faq-entry-desc">7 到 13 英寸主流尺寸的检查项，含浏览器内核与阅读宽度。</span>
              </li>
              <li>
                <span class="faq-entry-title">横屏竖屏来回切，排版会怎样</span>
                <span class="faq-entry-desc">切换后怎么保持当前阅读位置，锚点会不会跑掉。</span>
              </li>
              <li>
                <span class="faq-entry-title">分屏浏览时，半屏宽度够不够用</span>
                <span class="faq-entry-desc">边看文档边操作时，目录收起后的展开方式。</span>
              </li>
            </ul>
          </details>

          <details class="faq-cat" id="cat-member">
            <summary>
              <span class="faq-cat-num mono">03</span>
              <span class="faq-cat-name">会员中心</span>
              <span class="faq-cat-count mono">24 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">资料下载栏目在会员中心的哪个位置</span>
                <span class="faq-entry-desc">独立栏目入口，按分类集中查阅与保存，不用逐页翻找。</span>
              </li>
              <li>
                <span class="faq-entry-title">会员中心里值得先设置的几项</span>
                <span class="faq-entry-desc">阅读偏好、字号与横竖屏习惯，设一次之后每台设备都省事。</span>
              </li>
            </ul>
          </details>

          <details class="faq-cat" id="cat-legacy">
            <summary>
              <span class="faq-cat-num mono">04</span>
              <span class="faq-cat-name">旧版通道</span>
              <span class="faq-cat-count mono">22 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">旧版界面入口放在哪里</span>
                <span class="faq-entry-desc">与新版入口并列展示，习惯旧界面的用户可以直接继续使用。</span>
              </li>
              <li>
                <span class="faq-entry-title">旧版通道的浏览器兼容提示怎么看</span>
                <span class="faq-entry-desc">覆盖 Chromium、WebKit 与 Firefox 三类内核的差异说明。</span>
              </li>
              <li>
                <span class="faq-entry-title">什么时候更适合走旧版</span>
                <span class="faq-entry-desc">按操作习惯和设备差异给出的切换建议。</span>
              </li>
            </ul>
          </details>

          <details class="faq-cat" id="cat-trouble">
            <summary>
              <span class="faq-cat-num mono">05</span>
              <span class="faq-cat-name">常见故障</span>
              <span class="faq-cat-count mono">46 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">页面加载不完整，按什么顺序排查</span>
                <span class="faq-entry-desc">先网络、再缓存、最后浏览器版本，多数问题三步内能定位。</span>
              </li>
              <li>
                <span class="faq-entry-title">平板切换横竖屏后排版错位</span>
                <span class="faq-entry-desc">刷新与重排的先后顺序，以及切换时该注意的手势。</span>
              </li>
              <li>
                <span class="faq-entry-title">大字号模式下文字被裁掉怎么办</span>
                <span class="faq-entry-desc">阅读设置与页面缩放的配合方式，避免横向滚动条出现。</span>
              </li>
            </ul>
          </details>

          <details class="faq-cat" id="cat-download">
            <summary>
              <span class="faq-cat-num mono">06</span>
              <span class="faq-cat-name">资料下载</span>
              <span class="faq-cat-count mono">30 篇</span>
            </summary>
            <ul class="faq-entry-list">
              <li>
                <span class="faq-entry-title">文档上的“适用版本”怎么读</span>
                <span class="faq-entry-desc">重要文档都会标注适用设备与版本，先对号再照着做。</span>
              </li>
              <li>
                <span class="faq-entry-title">PDF 和网页两种方式怎么选</span>
                <span class="faq-entry-desc">要保存和打印走 PDF，要收藏随时打开走网页版。</span>
              </li>
            </ul>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-block faq-fit" id="tablet-fit">
    <div class="container">
      <div class="faq-block-head">
        <p class="faq-block-kicker mono">02 / 设备适配清单</p>
        <h2 class="faq-block-title">7 英寸到 13 英寸，平板上的中文站逐项验过</h2>
        <p class="faq-block-desc">清单按季度复核，最近一轮新增了横竖屏切换、分屏浏览和大字号阅读三项检查。Chromium、WebKit、Firefox 等 5 类常见浏览器内核都在覆盖范围内，平板端的触控点击区域按不小于 44px 处理。</p>
      </div>

      <svg class="faq-ruler" viewBox="0 0 700 100" aria-hidden="true" focusable="false">
        <line class="faq-ruler-track" x1="50" y1="36" x2="650" y2="36"/>
        <g class="faq-ruler-ticks">
          <line x1="50" y1="26" x2="50" y2="48"/>
          <line x1="150" y1="26" x2="150" y2="48"/>
          <line x1="250" y1="26" x2="250" y2="48"/>
          <line x1="350" y1="26" x2="350" y2="48"/>
          <line x1="450" y1="26" x2="450" y2="48"/>
          <line x1="550" y1="26" x2="550" y2="48"/>
          <line x1="650" y1="26" x2="650" y2="48"/>
        </g>
        <g class="faq-ruler-labels">
          <text x="50" y="78" text-anchor="middle">7 英寸</text>
          <text x="150" y="78" text-anchor="middle">8 英寸</text>
          <text x="250" y="78" text-anchor="middle">9 英寸</text>
          <text x="350" y="78" text-anchor="middle">10 英寸</text>
          <text x="450" y="78" text-anchor="middle">11 英寸</text>
          <text x="550" y="78" text-anchor="middle">12 英寸</text>
          <text x="650" y="78" text-anchor="middle">13 英寸</text>
        </g>
      </svg>

      <div class="faq-fit-grid">
        <ul class="faq-check-list">
          <li class="faq-check">
            <span class="faq-check-head"><span class="faq-dot"></span>Chromium 内核</span>
            <p>横屏 13 英寸与竖屏 8 英寸下正文宽度自适应，按钮点击区域保持 44px 以上。</p>
          </li>
          <li class="faq-check">
            <span class="faq-check-head"><span class="faq-dot"></span>WebKit 内核</span>
            <p>放大字号后分屏显示不截断，页面标签仍可完整读到。</p>
          </li>
          <li class="faq-check">
            <span class="faq-check-head"><span class="faq-dot"></span>Firefox 内核</span>
            <p>横竖屏来回切换后，仍停留在切换前读到的那一段。</p>
          </li>
          <li class="faq-check">
            <span class="faq-check-head"><span class="faq-dot faq-dot--warm"></span>分屏浏览</span>
            <p>半屏宽度下侧边目录自动收起为可展开索引，正文不被挤压变形。</p>
          </li>
          <li class="faq-check">
            <span class="faq-check-head"><span class="faq-dot faq-dot--warm"></span>大字号阅读</span>
            <p>字号放大后行距同步拉开，不会出现横向滚动条把内容推到屏幕外。</p>
          </li>
        </ul>

        <figure class="faq-fit-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="平板横屏、竖屏和分屏三种状态并排展示中文站页面，旁边标有尺寸刻度和检查项" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-block faq-switch" id="switch-login">
    <div class="container">
      <div class="faq-block-head">
        <p class="faq-block-kicker mono">03 / 换机登录</p>
        <h2 class="faq-block-title">换了设备，按四步把账号接上</h2>
        <p class="faq-block-desc">从站内索引的换机登录专题进去，先认设备、再对入口，验证环节本身和平时登录一样。四步走完大概几分钟，不用重新注册。</p>
      </div>

      <ol class="faq-steps">
        <li class="faq-step">
          <span class="faq-step-num mono">01</span>
          <h3 class="faq-step-title">先认清手上这台设备</h3>
          <p class="faq-step-desc">手机、平板还是桌面，系统与浏览器内核属于哪一类。这一步决定了后面走哪条入口，也是咨询时最该说清楚的信息。</p>
        </li>
        <li class="faq-step">
          <span class="faq-step-num mono">02</span>
          <h3 class="faq-step-title">到换机登录专题里对号入座</h3>
          <p class="faq-step-desc">从首页的站内索引进专题，按设备类型选对应说明。平板用户可以顺手把上一节的适配清单过一遍，省得登录后再回头调。</p>
        </li>
        <li class="faq-step">
          <span class="faq-step-num mono">03</span>
          <h3 class="faq-step-title">用原有账号信息完成验证</h3>
          <p class="faq-step-desc">不需要新开账号，验证步骤与设备无关。按提示走完短信或邮箱环节即可，中途卡住可以截图记录下来。</p>
        </li>
        <li class="faq-step">
          <span class="faq-step-num mono">04</span>
          <h3 class="faq-step-title">登录后做一次阅读检查</h3>
          <p class="faq-step-desc">随手打开一篇文档，确认字号、横竖屏和分屏都正常，再把常用的几篇收进书签，下次换设备就不用重新找。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="faq-block faq-downloads" id="downloads">
    <div class="container">
      <div class="faq-block-head">
        <p class="faq-block-kicker mono">04 / 资料下载</p>
        <h2 class="faq-block-title">会员中心里有一个独立的资料下载栏目</h2>
        <p class="faq-block-desc">同一份文档提供 PDF 与网页两种阅读方式，重要文档都会标注适用设备与版本号。分类集中放在一栏里，方便一次性查阅和保存，不用在页面之间来回翻。</p>
      </div>

      <div class="faq-dl-grid">
        <div class="faq-dl">
          <span class="faq-dl-tag mono">PDF</span>
          <h3 class="faq-dl-title">下载下来，留着慢慢看</h3>
          <p class="faq-dl-desc">适合保存和打印，用常见阅读器打开即可，不需要额外装软件。每份都带适用设备与版本标注，回头核对也方便。</p>
        </div>
        <div class="faq-dl">
          <span class="faq-dl-tag faq-dl-tag--web mono">网页</span>
          <h3 class="faq-dl-title">直接在站内读，链接可收藏</h3>
          <p class="faq-dl-desc">适合随时点开看最新内容，不需要下载到本地。文档更新后，专题中心会同步给出提示，收藏的链接打开就是新版本。</p>
        </div>
      </div>

      <p class="faq-dl-foot">文档更新会在专题中心同步提示，想看最近改了什么，可以去 <a href="/topics/">专题中心</a> 翻更新类条目。</p>
    </div>
  </section>

  <section class="faq-block faq-hot" id="hot-questions">
    <div class="container">
      <div class="faq-block-head">
        <p class="faq-block-kicker mono">05 / 高频条目</p>
        <h2 class="faq-block-title">问得最多的几个问题</h2>
        <p class="faq-block-desc">文档索引每月整理一次热门问题，最近一期收录 24 个高频访问条目，覆盖平板访问、换机登录和旧版入口三类。</p>
      </div>

      <div class="faq-q-list">
        <details class="faq-q" open>
          <summary><span class="faq-q-num mono">Q1</span>平板打开中文站显示不全，先调哪一项？</summary>
          <p class="faq-q-answer">先看浏览器内核是否在覆盖范围内，再确认没有开启强制缩放。两项都正常的话，横竖屏切换一次通常能让排版重新排好。</p>
        </details>
        <details class="faq-q">
          <summary><span class="faq-q-num mono">Q2</span>换了新手机，旧账号还能直接登录吗？</summary>
          <p class="faq-q-answer">可以。用原来的账号信息走换机登录验证即可，不需要重新注册，验证流程和平时登录一致。</p>
        </details>
        <details class="faq-q">
          <summary><span class="faq-q-num mono">Q3</span>旧版界面入口在哪里，和新版差别大吗？</summary>
          <p class="faq-q-answer">旧版界面入口与新版入口并列展示，习惯旧界面的用户可以继续使用。差异主要在版式与操作位置，功能本身不受影响，具体对照可看 <a href="/instructions/">访问说明</a>。</p>
        </details>
        <details class="faq-q">
          <summary><span class="faq-q-num mono">Q4</span>资料下载里的 PDF 和网页版内容一样吗？</summary>
          <p class="faq-q-answer">同一份文档的两种呈现方式，内容一致。网页版随更新即时生效，PDF 适合归档与打印。</p>
        </details>
        <details class="faq-q">
          <summary><span class="faq-q-num mono">Q5</span>文档里标的“适用版本”怎么理解？</summary>
          <p class="faq-q-answer">指这篇说明写成时所对应的界面与设备范围。版本对不上时，先按步骤试一次，多数操作在不同版本间是通用的。</p>
        </details>
        <details class="faq-q">
          <summary><span class="faq-q-num mono">Q6</span>大字号阅读下文字被裁掉，怎么恢复？</summary>
          <p class="faq-q-answer">把页面缩放调回默认，再用系统字号放大，两个设置叠加时才容易出现裁切。调整后刷新一次最稳妥。</p>
        </details>
      </div>

      <div class="faq-support">
        <div class="faq-support-copy">
          <p class="faq-support-label mono">人工支持</p>
          <h3 class="faq-support-title">文档没写到的，写信过来</h3>
          <p class="faq-support-desc">服务团队由文档编辑、适配测试和客服支持三个小组组成，共 26 人。工作日平均首次响应时间约 2 小时。写信时附上设备类型、登录截图和问题描述，能省掉一来一回的确认。</p>
        </div>
        <div class="faq-support-actions">
          <button type="button" class="copy-btn" data-copy="email@zone-bogou.com.cn" data-copy-hint="#faq-copy-hint">
            <span class="copy-value">email@zone-bogou.com.cn</span>
          </button>
          <span class="copy-hint" id="faq-copy-hint" role="status" aria-live="polite"></span>
          <a class="faq-support-link" href="/cooperation/">电话咨询与合作洽谈 <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <ul class="faq-related">
        <li><a href="/platform/">平台服务：四阶段上手路径与多设备支持</a></li>
        <li><a href="/topics/">专题中心：适配清单与文档更新动态</a></li>
        <li><a href="/instructions/">访问说明：旧版通道兼容提示与使用规则</a></li>
      </ul>
    </div>
  </section>

</main>

.page-faq {
  --faq-rule: rgba(42, 59, 82, .7);
  --faq-rule-soft: rgba(42, 59, 82, .38);
  --faq-paper: var(--paper-050);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.page-faq .container {
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: var(--container);
}

.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 56px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(80% 70% at 88% 2%, rgba(53, 230, 212, .18), transparent 62%),
    radial-gradient(70% 70% at 2% 96%, rgba(255, 178, 94, .10), transparent 68%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-850) 100%);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(169, 184, 204, .05) 0 1px, transparent 1px 5px);
}

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

.page-faq .faq-hero-grid {
  display: grid;
  gap: 30px;
  margin-top: 26px;
}

.page-faq .faq-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-faq .faq-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 7.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 900;
  max-width: 13em;
  color: var(--paper-050);
}

.page-faq .faq-lead {
  margin: 22px 0 0;
  max-width: 36em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--text-dim);
}

.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px 10px 13px;
  border: 1px solid var(--faq-rule);
  border-radius: var(--radius-pill);
  background: rgba(12, 27, 46, .7);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.page-faq .faq-jump-link .mono {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
}

.page-faq .faq-jump-link:hover,
.page-faq .faq-jump-link:focus-visible {
  border-color: var(--cyan-600);
  background: rgba(53, 230, 212, .12);
}

.page-faq .faq-hero-figure {
  margin: 0;
}

.page-faq .faq-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid rgba(53, 230, 212, .16);
  box-shadow: 0 26px 64px -34px rgba(0, 0, 0, .9);
}

.page-faq .faq-block {
  padding: clamp(56px, 8vw, 104px) 0;
}

.page-faq .faq-block-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-faq .faq-block-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-faq .faq-block-title {
  margin: 0;
  font-size: clamp(25px, 3.6vw, 43px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  max-width: 20em;
}

.page-faq .faq-block-desc {
  margin: 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dim);
}

.page-faq .faq-index {
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
  border-top: 1px solid var(--faq-rule-soft);
}

.page-faq .faq-index-grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
}

.page-faq .faq-toc {
  padding: 20px;
  border: 1px solid var(--faq-rule);
  border-radius: var(--radius-m);
  background: rgba(6, 17, 31, .55);
}

.page-faq .faq-toc-label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog-300);
}

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

.page-faq .faq-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: var(--radius-s);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-toc-list a .mono {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cyan-600);
}

.page-faq .faq-toc-list a:hover,
.page-faq .faq-toc-list a:focus-visible {
  color: var(--text);
  background: rgba(53, 230, 212, .09);
  border-left-color: var(--accent);
}

.page-faq .faq-toc-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fog-300);
}

.page-faq .faq-toc-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--faq-rule-soft);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fog-300);
}

.page-faq .faq-cat {
  border-top: 1px solid var(--faq-rule);
}

.page-faq .faq-cat:last-child {
  border-bottom: 1px solid var(--faq-rule);
}

.page-faq .faq-cat summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-cat summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--accent);
  transition: transform .22s var(--ease);
}

.page-faq .faq-cat[open] summary::after {
  transform: rotate(45deg);
}

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

.page-faq .faq-cat-name {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-faq .faq-cat-count {
  font-size: 11px;
  color: var(--fog-300);
}

.page-faq .faq-entry-list {
  list-style: none;
  margin: 0 0 22px 12px;
  padding: 2px 0 2px 20px;
  border-left: 1px solid var(--faq-rule);
  display: grid;
  gap: 16px;
}

.page-faq .faq-entry-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper-050);
}

.page-faq .faq-entry-desc {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--text-dim);
}

.page-faq .faq-fit {
  background: var(--faq-paper);
  color: var(--ink-900);
}

.page-faq .faq-fit .faq-block-kicker {
  color: var(--cyan-600);
}

.page-faq .faq-fit .faq-block-title {
  color: var(--ink-900);
}

.page-faq .faq-fit .faq-block-desc {
  color: var(--slate-600);
}

.page-faq .faq-ruler {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(24px, 4vw, 40px);
  overflow: visible;
}

.page-faq .faq-ruler-track {
  stroke: var(--slate-600);
  stroke-width: 2;
  opacity: .28;
}

.page-faq .faq-ruler-ticks line {
  stroke: var(--cyan-600);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.page-faq .faq-ruler-labels text {
  fill: var(--slate-600);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
}

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

.page-faq .faq-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(42, 59, 82, .16);
  border-radius: var(--radius-m);
  background: var(--faq-paper);
  overflow: hidden;
}

.page-faq .faq-check {
  padding: 17px 18px;
}

.page-faq .faq-check + .faq-check {
  border-top: 1px solid rgba(42, 59, 82, .14);
}

.page-faq .faq-check-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}

.page-faq .faq-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-600);
  box-shadow: 0 0 0 4px rgba(15, 168, 160, .14);
}

.page-faq .faq-dot--warm {
  background: var(--amber-650);
  box-shadow: 0 0 0 4px rgba(201, 122, 43, .16);
}

.page-faq .faq-check p {
  margin: 7px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--slate-600);
}

.page-faq .faq-fit-figure {
  margin: 0;
}

.page-faq .faq-fit-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid rgba(42, 59, 82, .14);
}

.page-faq .faq-switch {
  background:
    radial-gradient(90% 80% at 6% 0%, rgba(255, 178, 94, .09), transparent 62%),
    var(--ink-950);
}

.page-faq .faq-switch .faq-block-kicker {
  color: var(--amber-400);
}

.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  max-width: 52em;
}

.page-faq .faq-step {
  position: relative;
  padding: 0 0 34px 58px;
}

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

.page-faq .faq-step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 178, 94, .45), rgba(42, 59, 82, .18));
}

.page-faq .faq-step:last-child::before {
  display: none;
}

.page-faq .faq-step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 178, 94, .42);
  background: var(--ink-850);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--amber-400);
}

.page-faq .faq-step-title {
  margin: 6px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper-050);
}

.page-faq .faq-step-desc {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 40em;
}

.page-faq .faq-downloads {
  background: var(--mint-100);
  color: var(--ink-900);
}

.page-faq .faq-downloads .faq-block-kicker {
  color: var(--cyan-600);
}

.page-faq .faq-downloads .faq-block-title {
  color: var(--ink-900);
}

.page-faq .faq-downloads .faq-block-desc {
  color: var(--slate-600);
}

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

.page-faq .faq-dl {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(42, 59, 82, .14);
  background: var(--faq-paper);
  overflow: hidden;
}

.page-faq .faq-dl::before {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 230, 212, .26), transparent 68%);
}

.page-faq .faq-dl-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--mist-100);
  color: var(--slate-600);
  font-size: 11px;
  letter-spacing: .14em;
}

.page-faq .faq-dl-tag--web {
  background: rgba(255, 178, 94, .22);
  color: var(--amber-650);
}

.page-faq .faq-dl-title {
  position: relative;
  margin: 16px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.page-faq .faq-dl-desc {
  position: relative;
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate-600);
}

.page-faq .faq-dl-foot {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--slate-600);
}

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

.page-faq .faq-hot {
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-850) 100%);
  border-top: 1px solid var(--faq-rule-soft);
}

.page-faq .faq-q-list {
  display: grid;
  border-top: 1px solid var(--faq-rule);
}

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

.page-faq .faq-q summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper-050);
  transition: color .2s var(--ease);
}

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

.page-faq .faq-q summary:hover {
  color: var(--accent);
}

.page-faq .faq-q-num {
  flex: none;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cyan-600);
}

.page-faq .faq-q-answer {
  margin: 0 0 20px 38px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 40em;
}

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

.page-faq .faq-support {
  display: grid;
  gap: 22px;
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 178, 94, .3);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 178, 94, .16), transparent 58%),
    var(--ink-850);
}

.page-faq .faq-support-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.page-faq .faq-support-title {
  margin: 12px 0 0;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--paper-050);
}

.page-faq .faq-support-desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 38em;
}

.page-faq .faq-support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.page-faq .faq-support-actions .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(53, 230, 212, .42);
  background: rgba(53, 230, 212, .1);
  color: var(--paper-050);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-support-actions .copy-btn:hover,
.page-faq .faq-support-actions .copy-btn:focus-visible {
  background: rgba(53, 230, 212, .18);
  border-color: var(--accent);
}

.page-faq .faq-support-actions .copy-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--accent);
}

.page-faq .faq-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  font-size: 14px;
  color: var(--amber-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 178, 94, .35);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-support-link:hover,
.page-faq .faq-support-link:focus-visible {
  color: var(--paper-050);
  border-color: var(--paper-050);
}

.page-faq .faq-related {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 20px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--faq-rule-soft);
}

.page-faq .faq-related a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--faq-rule-soft);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.page-faq .faq-related a:hover,
.page-faq .faq-related a:focus-visible {
  color: var(--text);
  border-color: var(--cyan-600);
  background: rgba(53, 230, 212, .07);
}

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

  .page-faq .faq-support {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
  }

  .page-faq .faq-support-actions {
    justify-content: flex-end;
  }

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

@media (min-width: 860px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: end;
  }

  .page-faq .faq-fit-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-index-grid {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-jump-link,
  .page-faq .faq-toc-list a,
  .page-faq .faq-cat summary::after,
  .page-faq .faq-q summary,
  .page-faq .faq-support-actions .copy-btn,
  .page-faq .faq-support-link,
  .page-faq .faq-related a {
    transition: none;
  }
}