.page-faq {
  background: var(--paper);
  color: var(--ink-mid);
  font-family: var(--sans);
}

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

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, transparent 0 56%, rgba(180, 122, 60, 0.16) 56% 100%);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -34%;
  width: 54vw;
  height: 54vw;
  max-width: 620px;
  max-height: 620px;
  border: 1px solid rgba(217, 175, 121, 0.2);
  transform: rotate(16deg);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(24px, 4vw, 44px) clamp(48px, 8vw, 96px);
}

.page-faq .faq-hero__crumb {
  color: rgba(247, 243, 236, 0.62);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: clamp(28px, 5vw, 56px);
}

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

.page-faq .faq-hero__crumb a:hover {
  text-decoration: underline;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: end;
}

.page-faq .faq-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 6.6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 18px 0 0;
  color: var(--paper);
}

.page-faq .faq-hero__lede {
  margin: 22px 0 0;
  max-width: 40em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: rgba(247, 243, 236, 0.78);
}

.page-faq .faq-hero .btn {
  margin-top: 30px;
}

.page-faq .faq-hero__card {
  border: 1px solid var(--line-light);
  padding: clamp(20px, 3vw, 30px);
}

.page-faq .faq-hero__card-title {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
}

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

.page-faq .faq-stats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 243, 236, 0.14);
}

.page-faq .faq-stats li:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-faq .faq-stats__num {
  font-family: var(--mono);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--paper);
  line-height: 1;
}

.page-faq .faq-stats__label {
  font-size: 13px;
  color: rgba(247, 243, 236, 0.66);
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding-block: clamp(40px, 7vw, 88px);
  max-width: var(--shell-max);
}

.page-faq .faq-index__title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

.page-faq .faq-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-faq .faq-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--copper);
  color: var(--ink-mid);
}

.page-faq .faq-index__no {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--copper);
}

.page-faq .faq-index__note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--stone);
}

.page-faq .faq-index__note a {
  display: inline-flex;
  margin-left: 4px;
  color: var(--ink-soft);
}

/* ---------- 章节 ---------- */
.page-faq .faq-sec {
  padding-block: clamp(30px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.page-faq .faq-content > .faq-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-sec__no {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.page-faq .faq-sec h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.24;
  color: var(--ink-mid);
}

.page-faq .faq-sec__text {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-sub {
  margin: 26px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- 五步 ---------- */
.page-faq .steps {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px dashed var(--line);
}

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

.page-faq .step__no {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--copper);
  padding-top: 3px;
}

.page-faq .step__title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-mid);
}

.page-faq .step__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 三条路径 ---------- */
.page-faq .pathmap {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.page-faq .pathmap__node {
  position: relative;
  padding: 20px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
}

.page-faq .pathmap__no {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--copper);
}

.page-faq .pathmap__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-mid);
}

.page-faq .pathmap__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- 图片 ---------- */
.page-faq .faq-media {
  margin: 30px 0 0;
}

.page-faq .faq-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.02);
}

.page-faq .faq-media .media__caption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 筛选维度 ---------- */
.page-faq .dims {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .dim {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
}

.page-faq .dim::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--copper);
  transform: rotate(45deg);
}

/* ---------- 提示条 ---------- */
.page-faq .note {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 2px solid var(--copper);
  background: var(--paper-soft);
}

.page-faq .note__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 会员档位 ---------- */
.page-faq .tiers {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.page-faq .tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
}

.page-faq .tier--key {
  background: var(--ink);
  border-color: var(--copper);
  color: var(--paper);
}

.page-faq .tier__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-mid);
}

.page-faq .tier--key .tier__name {
  color: var(--paper);
}

.page-faq .tier__for {
  margin: 0;
  font-size: 12.5px;
  color: var(--stone);
}

.page-faq .tier--key .tier__for {
  color: var(--copper-light);
}

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

.page-faq .tier__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-faq .tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 2px;
  background: var(--copper);
}

.page-faq .tier--key .tier__list li {
  color: rgba(247, 243, 236, 0.82);
}

/* ---------- 深色问答区 ---------- */
.page-faq .faq-sec--ink {
  position: relative;
  margin-top: clamp(18px, 3vw, 30px);
  padding: clamp(26px, 4vw, 46px);
  background: var(--ink);
  border-top: 0;
  color: var(--paper);
}

.page-faq .faq-sec--ink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 3px;
  background: var(--copper);
}

.page-faq .faq-sec--ink h2 {
  color: var(--paper);
}

.page-faq .faq-sec--ink .faq-sec__text {
  color: rgba(247, 243, 236, 0.72);
}

.page-faq .faq-sec--ink a {
  color: var(--copper-light);
}

.page-faq .qa-group {
  margin-top: 26px;
}

.page-faq .qa {
  border-top: 1px solid rgba(247, 243, 236, 0.16);
}

.page-faq .qa:last-child {
  border-bottom: 1px solid rgba(247, 243, 236, 0.16);
}

.page-faq .qa__q {
  position: relative;
  padding: 18px 34px 18px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .qa__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--copper-light);
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
}

.page-faq .qa__a {
  padding: 0 0 20px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(247, 243, 236, 0.76);
}

/* ---------- 移动端贴士 ---------- */
.page-faq .mtips {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-faq .mtip {
  padding-left: 16px;
  border-left: 2px solid var(--copper);
}

.page-faq .mtip__title {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
}

.page-faq .mtip__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-soft);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-cta {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 5vw, 48px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 2px solid var(--ink);
}

.page-faq .faq-cta__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  color: var(--ink-mid);
}

.page-faq .faq-cta__text {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

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

.page-faq .faq-cta .link-arrow {
  color: var(--ink-soft);
}

/* ---------- 断点 ---------- */
@media (min-width: 700px) {
  .page-faq .pathmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }

  .page-faq .pathmap__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px;
    width: 26px;
    height: 1px;
    background: var(--copper);
  }

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

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

  .page-faq .faq-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-faq .faq-cta__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (min-width: 980px) {
  .page-faq .faq-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }

  .page-faq .faq-index {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-index__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-faq .faq-index__link {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 11px 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-index__link {
    transition: none;
  }
}
<<<END>>>
<main id="main-content" class="page-faq">

  <header class="faq-hero">
    <div class="shell faq-hero__inner">
      <nav class="breadcrumb faq-hero__crumb" aria-label="面包屑导航">
        <a href="/">首页</a>
        <span class="breadcrumb__sep">/</span>
        <span aria-current="page">使用指南</span>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__lead">
          <p class="eyebrow">操作手册 · 步骤索引</p>
          <h1>第一次进案例库，先走这五步</h1>
          <p class="lede faq-hero__lede">刚接触金博中心，问得最多的是两件事：资料在哪儿、拿到之后怎么用。这份指南把首次访问到会员权益的常用操作拆成一步步的路径，照着点几下就有结果，也可以直接转给刚加入贵团队的同事上手。</p>
          <a class="btn btn--copper" href="#step-01">从第一步开始</a>
        </div>

        <div class="faq-hero__card glass">
          <p class="faq-hero__card-title">手册速览</p>
          <ul class="faq-stats">
            <li>
              <span class="faq-stats__num">48</span>
              <span class="faq-stats__label">篇操作说明</span>
            </li>
            <li>
              <span class="faq-stats__num">5</span>
              <span class="faq-stats__label">个主题入口</span>
            </li>
            <li>
              <span class="faq-stats__num">v3.8</span>
              <span class="faq-stats__label">移动端当前版本</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div class="shell faq-body">

    <aside class="faq-index" aria-label="步骤索引">
      <p class="faq-index__title mono">步骤索引</p>
      <ol class="faq-index__list">
        <li><a class="faq-index__link" href="#step-01"><span class="faq-index__no">01</span><span>第一次来</span></a></li>
        <li><a class="faq-index__link" href="#step-02"><span class="faq-index__no">02</span><span>收藏查询路径</span></a></li>
        <li><a class="faq-index__link" href="#step-03"><span class="faq-index__no">03</span><span>检索与筛选</span></a></li>
        <li><a class="faq-index__link" href="#step-04"><span class="faq-index__no">04</span><span>收藏与订阅</span></a></li>
        <li><a class="faq-index__link" href="#step-05"><span class="faq-index__no">05</span><span>会员权益问答</span></a></li>
        <li><a class="faq-index__link" href="#step-06"><span class="faq-index__no">06</span><span>移动端贴士</span></a></li>
      </ol>
      <p class="faq-index__note">条目对不上您的情况？<a class="link-arrow" href="/connect/">直接问我们</a></p>
    </aside>

    <div class="faq-content">

      <section class="faq-sec" id="step-01" data-reveal="pending">
        <p class="faq-sec__no">STEP 01</p>
        <h2 class="h2">第一次来，五步找到你要的那一组</h2>
        <p class="faq-sec__text">案例库里的资料按行业和场景两层归位，越往里点越具体。新访客不必先弄懂结构，顺着下面五步走一遍，通常一两分钟就能落到和自己业务最接近的那一批案例上。</p>

        <ol class="steps">
          <li class="step">
            <span class="step__no">01</span>
            <div>
              <h3 class="step__title">先选行业</h3>
              <p class="step__text">智能制造、能源材料、消费零售、医疗健康、交通物流、数字服务，六个大类各对应一种色签。手上没有明确行业时，先挑和自家客户重叠最多的那一个。</p>
            </div>
          </li>
          <li class="step">
            <span class="step__no">02</span>
            <div>
              <h3 class="step__title">再选场景</h3>
              <p class="step__text">大类下面是 23 个细分场景，比如产线换型期间怎么留存过程资料、供应商年度复盘要准备哪几份底稿。场景选得越贴近，后面读起来越省时间。</p>
            </div>
          </li>
          <li class="step">
            <span class="step__no">03</span>
            <div>
              <h3 class="step__title">读摘要，别急着全文</h3>
              <p class="step__text">每篇案例分背景、路径、关键动作、结果指标、可复用清单五个区块。先扫一遍摘要和结果指标，判断它和您眼下要解决的问题是不是同一类。</p>
            </div>
          </li>
          <li class="step">
            <span class="step__no">04</span>
            <div>
              <h3 class="step__title">把用得上的收起来</h3>
              <p class="step__text">相关的那几条放进收藏夹，顺手写一句备注，说明贵团队打算拿它做什么。过两周再回来，靠这句备注就能想起当初为什么存它。</p>
            </div>
          </li>
          <li class="step">
            <span class="step__no">05</span>
            <div>
              <h3 class="step__title">订阅更新的那一叠</h3>
              <p class="step__text">关注的行业或专题系列有新案例上架时，版本订阅会在个人中心列出来。不用每天来翻，有变化它会告诉您。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="faq-sec" id="step-02" data-reveal="pending">
        <p class="faq-sec__no">STEP 02</p>
        <h2 class="h2">行业案例收藏查询的三条路径</h2>
        <p class="faq-sec__text">手头掌握的信息不一样，走的路也不一样。有人只知道自己在盯哪条业务线，有人已经拿着具体的项目词，这三种情况都各有对应入口，随时可以换着走。</p>

        <div class="pathmap">
          <div class="pathmap__node">
            <p class="pathmap__no mono">路径 A</p>
            <h3 class="pathmap__title">从主导航进入</h3>
            <p class="pathmap__text">主导航第二项直达案例合集，先看到的是六类色签的完整目录，适合还没想好从哪切进去的时候。</p>
          </div>
          <div class="pathmap__node">
            <p class="pathmap__no mono">路径 B</p>
            <h3 class="pathmap__title">按分类逐层点</h3>
            <p class="pathmap__text">行业、场景、案例摘要一层层往下，每层都会显示当前位置和同层的其他选项，走偏了退回上一层就行。</p>
          </div>
          <div class="pathmap__node">
            <p class="pathmap__no mono">路径 C</p>
            <h3 class="pathmap__title">关键词直接落位</h3>
            <p class="pathmap__text">手里有明确的产品词、项目词或指标名，敲进检索框直接跳到结果列表，省掉中间那几层点击。</p>
          </div>
        </div>

        <figure class="media media--4x3 faq-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上摊开的文件夹、六色索引签与一份手写收藏清单，旁边放着记号笔" loading="lazy" decoding="async">
          <figcaption class="media__caption">收藏夹里的彩色索引签，和案例库里六类行业的色签一一对得上。</figcaption>
        </figure>
      </section>

      <section class="faq-sec" id="step-03" data-reveal="pending">
        <p class="faq-sec__no">STEP 03</p>
        <h2 class="h2">检索、筛选与最近浏览</h2>
        <p class="faq-sec__text">检索框既认整句描述，也认精准词组。结果出来之后，用筛选把范围收窄，比反复改关键词快得多。</p>

        <p class="faq-sub mono">五个筛选维度</p>
        <ul class="dims">
          <li class="dim">行业</li>
          <li class="dim">场景</li>
          <li class="dim">年份</li>
          <li class="dim">资料类型</li>
          <li class="dim">版本号</li>
        </ul>

        <p class="faq-sec__text">常见的组合顺序是：先用行业加场景锁定大范围，再按年份看近几年的做法，最后用版本号确认手里那份是不是最新一版。指标名、工艺名这类专有说法单独搜，往往比长句更准。</p>

        <figure class="media media--16x9 faq-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="检索框、筛选标签与结果列表的屏幕局部特写，标签按行业与场景排列" loading="lazy" decoding="async">
          <figcaption class="media__caption">筛选标签在结果页左侧常驻，勾选后即时收窄，不用重新搜索。</figcaption>
        </figure>

        <div class="note">
          <p class="note__text">个人中心保留最近的检索记录。跨部门交接资料时，把这条记录连同收藏夹一起发过去，接手的人就不必从头再找一遍。</p>
        </div>
      </section>

      <section class="faq-sec" id="step-04" data-reveal="pending">
        <p class="faq-sec__no">STEP 04</p>
        <h2 class="h2">收藏夹、版本订阅与下载</h2>
        <p class="faq-sec__text">收藏的用处不在于点个星标，而在于让贵团队在半年、一年后还能回到同一组资料上，看清当时的判断依据和现在的差别。三档会员在这一块能做的事不一样。</p>

        <div class="tiers">
          <div class="tier">
            <p class="tier__name">探索版</p>
            <p class="tier__for">适合个人开始摸索分类</p>
            <ul class="tier__list">
              <li>基础检索与公开案例浏览</li>
              <li>每月 1 次资料包领取</li>
              <li>订阅关注的行业更新</li>
            </ul>
          </div>
          <div class="tier tier--key">
            <p class="tier__name">专业版</p>
            <p class="tier__for">适合持续做研究的个人</p>
            <ul class="tier__list">
              <li>无限收藏与版本对照</li>
              <li>离线资料包随身带走</li>
              <li>行业专题报告下载</li>
            </ul>
          </div>
          <div class="tier">
            <p class="tier__name">机构版</p>
            <p class="tier__for">适合需要共建知识库的团队</p>
            <ul class="tier__list">
              <li>团队账号与权限管理</li>
              <li>共享收藏夹对全组可见</li>
              <li>季度使用报告</li>
            </ul>
          </div>
        </div>

        <p class="faq-sec__text">旧版本资料可以回溯到 2019 年，按版本号调取，也能和当前版本并列摆在一起看，哪几条结论改过、哪几个指标换过写法，一眼就能分辨。</p>
      </section>

      <section class="faq-sec faq-sec--ink" id="step-05" data-reveal="pending">
        <p class="faq-sec__no">STEP 05</p>
        <h2 class="h2">会员权益使用问答</h2>
        <p class="faq-sec__text">开通之前，多数人关心的是这几件事，点开看对应答案。</p>

        <div class="qa-group">
          <details class="qa">
            <summary class="qa__q">探索版和专业版差在哪儿？</summary>
            <div class="qa__a">探索版提供基础检索、公开案例浏览，每月可以领 1 次资料包，适合先看分类、摸清资料长什么样。专业版把收藏、版本对照、离线资料包和专题报告下载都打开，适合每周都要出材料的研究岗。判断标准很简单：一周用三次以上，专业版更划算。</div>
          </details>

          <details class="qa">
            <summary class="qa__q">团队几个人共用一个账号可以吗？</summary>
            <div class="qa__a">建议使用机构版的团队账号，每位成员有独立身份。多人挤在一个账号里，检索历史和收藏会混在一起，交接时很难分清谁存的、为什么存。机构版还可以按项目或部门分配权限，新人进来只看到该看的那部分。</div>
          </details>

          <details class="qa">
            <summary class="qa__q">共享收藏夹怎么建起来？</summary>
            <div class="qa__a">机构版管理员在个人中心新建收藏夹并命名，再邀请成员加入。成员往里添加案例时可以写一句备注，说明这条资料在哪一步用得上，久而久之就形成一份带说明的团队资料地图。</div>
          </details>

          <details class="qa">
            <summary class="qa__q">版本订阅会提醒哪些内容？</summary>
            <div class="qa__a">订阅的行业或专题系列有新案例、新报告上架时，个人中心的列表会更新，移动端也会收到提示。您不需要每天登录翻找，关注的范围内一有变化就能知道。</div>
          </details>

          <details class="qa">
            <summary class="qa__q">三档权益的逐条对照在哪儿看？</summary>
            <div class="qa__a">可以在<a href="/services/">服务与工具</a>页按检索、收藏、下载、协作、培训五类逐一对照。开通前把自己的使用频率套进去，很快就能选到合适的那一档。</div>
          </details>

          <details class="qa">
            <summary class="qa__q">提交了资料需求，多久有回应？</summary>
            <div class="qa__a">客户成功团队会在 1 个工作日内给出类目建议和一份资料清单。如果清单方向不对，可以直接回复调整，不必重新提一遍需求。</div>
          </details>
        </div>
      </section>

      <section class="faq-sec" id="step-06" data-reveal="pending">
        <p class="faq-sec__no">STEP 06</p>
        <h2 class="h2">移动端使用小贴士</h2>
        <p class="faq-sec__text">移动端工具当前版本是 v3.8，每周二和周五更新内容。首页显著位置留有入口，点进去能看到版本号和这次改了什么。出差路上、客户现场，很多操作在手机上更顺手。</p>

        <div class="mtips">
          <div class="mtip">
            <h3 class="mtip__title">检索</h3>
            <p class="mtip__text">在会议间隙用一句话描述需求，结果会自动同步进收藏，回到电脑前接着看。</p>
          </div>
          <div class="mtip">
            <h3 class="mtip__title">离线收藏</h3>
            <p class="mtip__text">最近 20 条收藏支持离线查看，飞机上、地下车间都不影响翻阅。</p>
          </div>
          <div class="mtip">
            <h3 class="mtip__title">版本对照</h3>
            <p class="mtip__text">两版资料并排显示，左右滑动即可比对，改动的表述会高亮出来。</p>
          </div>
          <div class="mtip">
            <h3 class="mtip__title">行业速览</h3>
            <p class="mtip__text">六类行业的当期要点浓缩成一屏，见客户前五分钟过一遍就够。</p>
          </div>
          <div class="mtip">
            <h3 class="mtip__title">案例导读</h3>
            <p class="mtip__text">每篇案例的五块信息做成清单，先读摘要，决定要不要深读全文。</p>
          </div>
          <div class="mtip">
            <h3 class="mtip__title">离线资料包</h3>
            <p class="mtip__text">出发前把要用的资料包下载好，没有网络也能完整打开。</p>
          </div>
        </div>
      </section>

      <section class="faq-cta">
        <div class="faq-cta__lead">
          <p class="eyebrow">还差一步</p>
          <h2 class="h3 faq-cta__title">把需求说清楚，我们给您列资料清单</h2>
          <p class="faq-cta__text">不确定该从哪类案例入手，或者想给团队开通协作账号，都可以直接说。客户成功团队在工作日 9:00–17:30 接听电话，在线提交后 1 个工作日内回复。</p>
        </div>
        <div class="faq-cta__actions">
          <a class="btn btn--copper" href="/connect/">联系咨询</a>
          <a class="btn btn--line" href="/services/">查看服务与工具</a>
          <a class="link-arrow" href="/topics/">顺带翻翻行业专题</a>
        </div>
      </section>

    </div>
  </div>
</main>

.page-faq {
  background: var(--paper);
  color: var(--ink-mid);
  font-family: var(--sans);
}

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

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, transparent 0 56%, rgba(180, 122, 60, 0.16) 56% 100%);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -34%;
  width: 54vw;
  height: 54vw;
  max-width: 620px;
  max-height: 620px;
  border: 1px solid rgba(217, 175, 121, 0.2);
  transform: rotate(16deg);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(24px, 4vw, 44px) clamp(48px, 8vw, 96px);
}

.page-faq .faq-hero__crumb {
  color: rgba(247, 243, 236, 0.62);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: clamp(28px, 5vw, 56px);
}

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

.page-faq .faq-hero__crumb a:hover {
  text-decoration: underline;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: end;
}

.page-faq .faq-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 6.6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 18px 0 0;
  color: var(--paper);
}

.page-faq .faq-hero__lede {
  margin: 22px 0 0;
  max-width: 40em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: rgba(247, 243, 236, 0.78);
}

.page-faq .faq-hero .btn {
  margin-top: 30px;
}

.page-faq .faq-hero__card {
  border: 1px solid var(--line-light);
  padding: clamp(20px, 3vw, 30px);
}

.page-faq .faq-hero__card-title {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
}

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

.page-faq .faq-stats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 243, 236, 0.14);
}

.page-faq .faq-stats li:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-faq .faq-stats__num {
  font-family: var(--mono);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--paper);
  line-height: 1;
}

.page-faq .faq-stats__label {
  font-size: 13px;
  color: rgba(247, 243, 236, 0.66);
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding-block: clamp(40px, 7vw, 88px);
  max-width: var(--shell-max);
}

.page-faq .faq-index__title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

.page-faq .faq-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--copper);
  color: var(--ink-mid);
}

.page-faq .faq-index__no {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--copper);
}

.page-faq .faq-index__note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--stone);
}

.page-faq .faq-index__note a {
  display: inline-flex;
  margin-left: 4px;
  color: var(--ink-soft);
}

/* ---------- 章节 ---------- */
.page-faq .faq-sec {
  padding-block: clamp(30px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.page-faq .faq-content > .faq-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-sec__no {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.page-faq .faq-sec h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.24;
  color: var(--ink-mid);
}

.page-faq .faq-sec__text {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-sec__text a {
  color: var(--ink-mid);
  text-decoration-color: var(--copper);
}

.page-faq .faq-sub {
  margin: 26px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- 五步 ---------- */
.page-faq .steps {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px dashed var(--line);
}

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

.page-faq .step__no {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--copper);
  padding-top: 3px;
}

.page-faq .step__title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-mid);
}

.page-faq .step__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 三条路径 ---------- */
.page-faq .pathmap {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.page-faq .pathmap__node {
  position: relative;
  padding: 20px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
}

.page-faq .pathmap__no {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--copper);
}

.page-faq .pathmap__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-mid);
}

.page-faq .pathmap__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- 图片 ---------- */
.page-faq .faq-media {
  margin: 30px 0 0;
}

.page-faq .faq-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.02);
}

.page-faq .faq-media .media__caption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 筛选维度 ---------- */
.page-faq .dims {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .dim {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
}

.page-faq .dim::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--copper);
  transform: rotate(45deg);
}

/* ---------- 提示条 ---------- */
.page-faq .note {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 2px solid var(--copper);
  background: var(--paper-soft);
}

.page-faq .note__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 会员档位 ---------- */
.page-faq .tiers {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.page-faq .tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
}

.page-faq .tier--key {
  background: var(--ink);
  border-color: var(--copper);
  color: var(--paper);
}

.page-faq .tier__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-mid);
}

.page-faq .tier--key .tier__name {
  color: var(--paper);
}

.page-faq .tier__for {
  margin: 0;
  font-size: 12.5px;
  color: var(--stone);
}

.page-faq .tier--key .tier__for {
  color: var(--copper-light);
}

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

.page-faq .tier__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-faq .tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 2px;
  background: var(--copper);
}

.page-faq .tier--key .tier__list li {
  color: rgba(247, 243, 236, 0.82);
}

/* ---------- 深色问答区 ---------- */
.page-faq .faq-sec--ink {
  position: relative;
  margin-top: clamp(18px, 3vw, 30px);
  padding: clamp(26px, 4vw, 46px);
  background: var(--ink);
  border-top: 0;
  color: var(--paper);
}

.page-faq .faq-sec--ink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 3px;
  background: var(--copper);
}

.page-faq .faq-sec--ink h2 {
  color: var(--paper);
}

.page-faq .faq-sec--ink .faq-sec__text {
  color: rgba(247, 243, 236, 0.72);
}

.page-faq .faq-sec--ink a {
  color: var(--copper-light);
}

.page-faq .qa-group {
  margin-top: 26px;
}

.page-faq .qa {
  border-top: 1px solid rgba(247, 243, 236, 0.16);
}

.page-faq .qa:last-child {
  border-bottom: 1px solid rgba(247, 243, 236, 0.16);
}

.page-faq .qa__q {
  position: relative;
  padding: 18px 34px 18px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .qa__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--copper-light);
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
}

.page-faq .qa__a {
  padding: 0 0 20px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(247, 243, 236, 0.76);
}

/* ---------- 移动端贴士 ---------- */
.page-faq .mtips {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-faq .mtip {
  padding-left: 16px;
  border-left: 2px solid var(--copper);
}

.page-faq .mtip__title {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
}

.page-faq .mtip__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-soft);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-cta {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 5vw, 48px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 2px solid var(--ink);
}

.page-faq .faq-cta__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  color: var(--ink-mid);
}

.page-faq .faq-cta__text {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

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

.page-faq .faq-cta .link-arrow {
  color: var(--ink-soft);
}

/* ---------- 断点 ---------- */
@media (min-width: 700px) {
  .page-faq .pathmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }

  .page-faq .pathmap__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px;
    width: 26px;
    height: 1px;
    background: var(--copper);
  }

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

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

  .page-faq .faq-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-faq .faq-cta__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (min-width: 980px) {
  .page-faq .faq-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }

  .page-faq .faq-index {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-index__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-faq .faq-index__link {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 11px 0;
  }

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

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