.page-faq {
  --faq-pad: clamp(34px, 5vw, 72px);
  --faq-gap: clamp(18px, 3vw, 34px);
  --faq-paper-ink: #0A1622;
  --faq-paper-sub: #3E5568;
  background: var(--ink-900);
  color: var(--paper);
  overflow-x: hidden;
}

.page-faq .mono {
  font-family: var(--font-mono);
}

.page-faq a {
  color: inherit;
}

/* ---------- hero ---------- */
.page-faq .faq-hero {
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 4.5vw, 56px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(53, 224, 208, .12), transparent 62%),
    linear-gradient(180deg, #0D2436 0%, var(--ink-900) 68%);
}

.page-faq .breadcrumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}

.page-faq .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .20em;
  color: var(--cyan);
}

.page-faq h1 {
  margin: 12px 0 0;
  font-size: clamp(34px, 7vw, 70px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero .lede {
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: #C2CFD9;
}

.page-faq .faq-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--sand);
}

.page-faq .faq-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-facts .mono {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--moss);
}

/* ---------- rail index ---------- */
.page-faq .rail {
  position: static;
  width: 100%;
}

.page-faq .faq-rail__label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .20em;
  color: var(--slate);
}

.page-faq .rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

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

.page-faq .rail__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  font-size: 14px;
  color: var(--sand);
  text-decoration: none;
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}

.page-faq .rail__link:hover,
.page-faq .rail__link.is-active {
  color: var(--cyan);
  padding-left: 6px;
}

.page-faq .faq-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--amber);
}

/* ---------- generic section ---------- */
.page-faq .faq-sec {
  padding: var(--faq-pad) 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-sec--alt {
  background: linear-gradient(180deg, #0C2031 0%, #0B1D2E 100%);
}

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

.page-faq .faq-head {
  max-width: 60ch;
  margin-bottom: clamp(22px, 3.2vw, 36px);
}

.page-faq .faq-head h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.page-faq .faq-head__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #B9C6D1;
}

/* ---------- figure ---------- */
.page-faq .faq-figure {
  position: relative;
  margin: 0 0 clamp(22px, 3vw, 36px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #143145 0%, #0B1D2E 68%, #10314A 100%);
}

.page-faq .faq-figure .media-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}

/* ---------- path ---------- */
.page-faq .faq-path__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
}

.page-faq .faq-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.page-faq .faq-step {
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--ink-800);
  clip-path: var(--cut);
  transition: background .22s var(--ease);
}

.page-faq .faq-step:hover {
  background: #16354C;
}

.page-faq .faq-step__num {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--amber);
}

.page-faq .faq-step__title {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--paper);
}

.page-faq .faq-step__text {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #B4C2CE;
}

.page-faq .faq-step__link {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
}

.page-faq .faq-step__link:hover {
  color: var(--paper);
  border-bottom-color: var(--amber);
}

.page-faq .faq-stairwrap {
  align-self: start;
}

.page-faq .faq-stair {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
}

.page-faq .faq-stair a {
  text-decoration: none;
}

.page-faq .faq-stair rect {
  fill: var(--ink-800);
  stroke: rgba(53, 224, 208, .34);
  stroke-width: 1.4;
  transition: fill .2s var(--ease), stroke .2s var(--ease);
}

.page-faq .faq-stair a:hover rect {
  fill: #17405A;
  stroke: var(--cyan);
}

.page-faq .faq-stair text {
  fill: var(--sand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .10em;
}

.page-faq .faq-stair a:hover text {
  fill: var(--cyan);
}

.page-faq .faq-stair__cap {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .10em;
  color: var(--slate);
}

/* ---------- check ---------- */
.page-faq .faq-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-faq .faq-check {
  padding: clamp(16px, 2.2vw, 24px);
  background: rgba(18, 42, 64, .78);
  border-top: 2px solid var(--line-amber);
}

.page-faq .faq-check__num {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-check__title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-check__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #A9B9C6;
}

.page-faq .faq-check__text .tag {
  margin: 0 6px 6px 0;
}

.page-faq .faq-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-prose p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  color: #BCC9D4;
}

.page-faq .faq-prose__foot {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--moss);
}

.page-faq .faq-figure--square {
  margin-bottom: 0;
  aspect-ratio: 4 / 3;
}

/* ---------- qa ---------- */
.page-faq .faq-qa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

.page-faq .faq-qa__grouptitle {
  position: relative;
  margin: 0 0 6px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--paper);
}

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

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

.page-faq .faq-qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 14px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #E4EAEF;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-qa__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--cyan);
}

.page-faq details[open] .faq-qa__q::after {
  content: "−";
  color: var(--amber);
}

.page-faq details[open] .faq-qa__q {
  color: var(--paper);
}

.page-faq .faq-qa__a {
  margin: 0 0 16px;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: #A6B6C3;
}

.page-faq details[open] .faq-qa__a {
  animation: faq-qa-drop .24s var(--ease);
}

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

@keyframes faq-qa-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- paper block ---------- */
.page-faq .faq-paper {
  padding: var(--faq-pad) 0;
  background: var(--paper);
  color: var(--faq-paper-ink);
  border-bottom: 1px solid rgba(11, 29, 46, .10);
}

.page-faq .faq-paper .eyebrow {
  color: #1C7F74;
}

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

.page-faq .faq-paper .faq-head__text {
  color: var(--faq-paper-sub);
}

.page-faq .faq-paper__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 48px);
}

.page-faq .faq-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-faq .faq-signals__item {
  padding: 16px 0;
  border-top: 1px solid rgba(11, 29, 46, .14);
  font-size: 14.5px;
  line-height: 1.85;
  color: #33495C;
}

.page-faq .faq-signals__item .mono {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #9A6A18;
}

.page-faq .faq-mail {
  padding: clamp(20px, 2.8vw, 30px);
  background: #FFFFFF;
  border-left: 3px solid var(--amber);
  box-shadow: 0 18px 40px -32px rgba(11, 29, 46, .55);
}

.page-faq .faq-mail__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.page-faq .faq-mail__list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #33495C;
}

.page-faq .faq-mail__text {
  margin: 16px 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #33495C;
}

.page-faq .faq-mail__text a {
  color: #0F7268;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 114, 104, .4);
  word-break: break-all;
}

.page-faq .faq-mail .btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(11, 29, 46, .35);
  color: var(--ink-900);
  transition: background .2s var(--ease), color .2s var(--ease);
}

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

/* ---------- next ---------- */
.page-faq .faq-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-faq .faq-next__card {
  position: relative;
  display: block;
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--ink-800);
  clip-path: var(--cut);
  text-decoration: none;
  color: var(--paper);
  transition: background .22s var(--ease), transform .22s var(--ease);
}

.page-faq .faq-next__card:hover {
  background: #17405A;
  transform: translateY(-3px);
}

.page-faq .faq-next__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-next__title {
  margin: 10px 0 0;
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-next__text {
  margin: 10px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.85;
  color: #B4C2CE;
}

.page-faq .faq-next__arrow {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan);
}

.page-faq .faq-note {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--slate);
}

.page-faq .faq-note a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

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

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

  .page-faq .faq-figure {
    aspect-ratio: 21 / 9;
  }

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

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

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

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

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

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

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

  .page-faq .faq-step:nth-child(2) {
    margin-left: clamp(0px, 2.2vw, 26px);
  }

  .page-faq .faq-step:nth-child(3) {
    margin-left: clamp(0px, 4.4vw, 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-next__card,
  .page-faq .faq-step,
  .page-faq .rail__link {
    transition: none;
  }

  .page-faq details[open] .faq-qa__a {
    animation: none;
  }
}

<main id="main-content" class="page-faq">
  <header class="faq-hero">
    <div class="page-shell">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <a class="breadcrumbs__link" href="/">首页</a>
        <span class="breadcrumbs__sep">/</span>
        <span class="breadcrumbs__current">使用指南</span>
      </nav>
      <div class="faq-hero__grid">
        <div class="faq-hero__lead">
          <p class="eyebrow">回访指引</p>
          <h1>回来第一件事：<br>看清这一季变了什么</h1>
          <p class="lede">隔一季再回到韦德亚洲，你想知道的往往只有一件事：上次看过的那几条，如今还在不在、改成了什么样。从当季入口进去，沿三级台阶依次确认本期期号、你关注的那一类，以及两次查看之间的差别，多数人三五分钟就能走完。</p>
        </div>
        <nav class="rail" aria-label="本页章节索引">
          <p class="faq-rail__label mono">章节索引</p>
          <ul class="rail__list">
            <li class="rail__item"><a class="rail__link" href="#faq-path" data-spy><span class="faq-idx">01</span><span>回访路径</span></a></li>
            <li class="rail__item"><a class="rail__link" href="#faq-check" data-spy><span class="faq-idx">02</span><span>确认变化</span></a></li>
            <li class="rail__item"><a class="rail__link" href="#faq-qa" data-spy><span class="faq-idx">03</span><span>常见疑问</span></a></li>
            <li class="rail__item"><a class="rail__link" href="#faq-history" data-spy><span class="faq-idx">04</span><span>找回旧版本</span></a></li>
            <li class="rail__item"><a class="rail__link" href="#faq-next" data-spy><span class="faq-idx">05</span><span>接下来</span></a></li>
          </ul>
        </nav>
      </div>
      <ul class="faq-facts">
        <li><span class="mono">最近版本</span>2025 年 3 月</li>
        <li><span class="mono">已归档</span>16 期季度汇总</li>
        <li><span class="mono">邮件回应</span>工作日 4 小时以内</li>
      </ul>
    </div>
  </header>

  <section class="faq-sec" id="faq-path">
    <div class="page-shell">
      <div class="faq-head">
        <p class="eyebrow">01 / 回访路径</p>
        <h2>三步回到你上次停下的位置</h2>
        <p class="faq-head__text">回访不必从首页重新翻一遍。记住下面三个动作：先站对期次，再缩小到分类，最后只看差别。</p>
      </div>
      <figure class="media-frame faq-figure" data-reveal>
        <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="抽象三级台阶图形，高度依次递增，台阶节点以电光青与暖琥珀标记">
      </figure>
      <div class="faq-path__grid">
        <div class="faq-steps">
          <article class="faq-step" id="step-1" data-reveal>
            <p class="faq-step__num mono">01</p>
            <h3 class="faq-step__title">先走进当季入口</h3>
            <p class="faq-step__text">韦德亚洲当季回访用户入口设在更新观察页顶部，一条季度横幅写明本期期号与 2025 年 3 月的更新时间。认准它，你之后看到的每一条都属于这一期，不会把旧版当成新版读。</p>
            <a class="faq-step__link" href="/insights/">打开更新观察</a>
          </article>
          <article class="faq-step" id="step-2" data-reveal>
            <p class="faq-step__num mono">02</p>
            <h3 class="faq-step__title">再缩小到你关注的那一类</h3>
            <p class="faq-step__text">12 个一级分类在清单页一目了然，回访时只看自己那一类就够。点进去后留意二级标签是否增减：2024 年体系重构把二级标签由 71 个精简到 54 个，被合并的标签都在当期清单里写明了去向。</p>
            <a class="faq-step__link" href="/offerings/">看分类清单</a>
          </article>
          <article class="faq-step" id="step-3" data-reveal>
            <p class="faq-step__num mono">03</p>
            <h3 class="faq-step__title">最后只比两次之间的差别</h3>
            <p class="faq-step__text">版本对比视图能把相邻两个季度并排放。左边选你上次看过的那期，右边选当前这期，新增、调整、归档会用不同颜色标出，扫一眼就知道哪几条动过，不必从头重读。</p>
            <a class="faq-step__link" href="/insights/">进版本对比</a>
          </article>
        </div>
        <aside class="faq-stairwrap" data-reveal>
          <svg class="faq-stair" viewBox="0 0 320 236" role="img" aria-label="三级台阶示意图，依次对应入口、分类与差异三个步骤">
            <path class="faq-stair__trail" d="M8 208 H104 V152 H200 V96 H304" fill="none" stroke="rgba(201,185,163,.30)" stroke-width="1" stroke-dasharray="4 6"/>
            <a href="#step-1">
              <rect x="16" y="176" width="88" height="56"></rect>
              <text x="60" y="166" text-anchor="middle">01 入口</text>
            </a>
            <a href="#step-2">
              <rect x="112" y="120" width="88" height="112"></rect>
              <text x="156" y="110" text-anchor="middle">02 分类</text>
            </a>
            <a href="#step-3">
              <rect x="208" y="56" width="88" height="176"></rect>
              <text x="252" y="46" text-anchor="middle">03 差异</text>
            </a>
          </svg>
          <p class="faq-stair__cap mono">点任意一级台阶，可直接跳到那一步的做法</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="faq-sec faq-sec--alt" id="faq-check">
    <div class="page-shell">
      <div class="faq-head">
        <p class="eyebrow">02 / 确认变化</p>
        <h2>三个线索指向同一件事，你就可以放心用</h2>
        <p class="faq-head__text">一处内容动没动过，会在期号、动作标签和条目状态上同时留下痕迹。三处说的是同一件事，再引用它就不会错。</p>
      </div>
      <div class="faq-checks">
        <article class="faq-check">
          <p class="faq-check__num mono">季度编号</p>
          <h3 class="faq-check__title">它属于哪一期</h3>
          <p class="faq-check__text">每条记录的页脚都带着「2025 年第 1 季」这样的期号，标明它出自哪一次汇总，翻到哪一页都能对回时间。</p>
        </article>
        <article class="faq-check">
          <p class="faq-check__num mono">变更标签</p>
          <h3 class="faq-check__title">它被怎样处理过</h3>
          <p class="faq-check__text">
            <span class="tag tag--cyan">新增</span>
            <span class="tag tag--amber">调整</span>
            <span class="tag tag--moss">归档</span>
          </p>
          <p class="faq-check__text">三类标签贴在记录顶部，颜色一眼可分：首次出现、内容改写、退出当季清单。</p>
        </article>
        <article class="faq-check">
          <p class="faq-check__num mono">条目状态</p>
          <h3 class="faq-check__title">它现在还在不在</h3>
          <p class="faq-check__text">状态栏写明这一条从哪一季起下线、由哪一条接续，顺着看就能把前后关系接上。</p>
        </article>
      </div>
      <div class="faq-check__grid">
        <div class="faq-prose" data-reveal>
          <p>记录已累计 268 条，每一条都同时带期号与动作标签：期号说明时间，标签说明动作。当你在两条相近记录之间犹豫时，先看期号——相邻两期的差别最集中，跨三期的变化通常已经写进中间某一期的调整说明里。</p>
          <p>我们与 7 家行业数据机构的引用合作，也要求每条被引内容注明出处。你把站内条目转述到对外材料时，连同期号一起写上，对方回查会省下很多来回。</p>
          <p class="faq-prose__foot mono">最近一次内容版本更新至 2025 年 3 月</p>
        </div>
        <figure class="media-frame faq-figure faq-figure--square" data-reveal>
          <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="两个版本面板并排的界面局部，差异条目被高亮标出，俯视视角，画面中无人物" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-sec" id="faq-qa">
    <div class="page-shell">
      <div class="faq-head">
        <p class="eyebrow">03 / 常见疑问</p>
        <h2>回访时最常被问到的九件事</h2>
        <p class="faq-head__text">按入口、版本、订阅三组整理，展开即可看到答案。若你的情况不在其中，写信过来，我们照实回你。</p>
      </div>
      <div class="faq-qa">
        <div class="faq-qa__group">
          <h3 class="faq-qa__grouptitle">入口使用</h3>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">用平板打开时分类是收起的，怎么展开？</summary>
            <p class="faq-qa__a">平板端默认收成一行提示，点击后展开完整的分类栅格。手机端与桌面端看到的分类内容一致，只是排布方式随屏幕调整。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">从哪进当季版本最快？</summary>
            <p class="faq-qa__a">记住一条路径就够：主导航第 4 项「更新观察」，进页面后看顶部的季度横幅。订阅过的读者也可以从每季摘要邮件里的链接直达当期。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">忘了上次看的是哪一季，还能找到吗？</summary>
            <p class="faq-qa__a">订阅过的，翻邮件里的期号最快；没订阅的，从最近一期往前看页脚的季度标记，通常两三期之内就能认出你熟悉的那一版。</p>
          </details>
        </div>
        <div class="faq-qa__group">
          <h3 class="faq-qa__grouptitle">版本理解</h3>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">同一个标签连着两季都在，算不算变过？</summary>
            <p class="faq-qa__a">标签本身没变，但挂在它下面的条目可能变了。看条目顶部的动作标签：标了「调整」说明内容改写，什么都没标就是原样保留。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">归档是不是等于删掉了？</summary>
            <p class="faq-qa__a">归档的条目仍留在历史版本里，只是不再出现在当季清单。状态栏会写明它从哪一季起下线，以及由哪条内容接续。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">二级标签怎么比以前少了？</summary>
            <p class="faq-qa__a">2024 年的分类体系重构把原本 71 个二级标签合并为 54 个。合并去向写在那几期的合并标签清单里，按季度翻到对应期就能看到一一对应关系。</p>
          </details>
        </div>
        <div class="faq-qa__group">
          <h3 class="faq-qa__grouptitle">订阅相关</h3>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">订阅之后会收到什么？</summary>
            <p class="faq-qa__a">每季一封更新摘要，全年 4 期，内容包含本期新增、合并、下线的条数以及重点分类提示，篇幅控制在一屏之内。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">写信过去多久有人回？</summary>
            <p class="faq-qa__a">客服邮箱在工作日 9:00-18:00 内有人值守，平均 4 小时以内答复。节前集中来信较多时会稍晚一些，我们仍会在当天处理完。</p>
          </details>
          <details class="faq-qa__item">
            <summary class="faq-qa__q">不想再收摘要了怎么办？</summary>
            <p class="faq-qa__a">每封摘要底部都有退订入口，点一下即可；也可以直接写信说明，我们处理完会回你一封确认。个人信息的处理方式可查阅<a href="/privacy-policy/">隐私政策</a>。</p>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-paper" id="faq-history">
    <div class="page-shell">
      <div class="faq-head">
        <p class="eyebrow">04 / 找回旧版本</p>
        <h2>旧版本没有消失，只是换了个位置</h2>
        <p class="faq-head__text">已归档的 16 期季度汇总按时间倒序留在更新观察页的历史列表里。要找得更快，换一种线索就行。</p>
      </div>
      <div class="faq-paper__grid">
        <div>
          <ul class="faq-signals">
            <li class="faq-signals__item"><span class="mono">按标签</span>记得分类名或具体标签，直接从标签进去，会列出它出现过的每一期。</li>
            <li class="faq-signals__item"><span class="mono">按季度</span>只记得大概是哪段时间，按季度逐期翻，页脚期号帮你快速定位。</li>
            <li class="faq-signals__item"><span class="mono">按关键词</span>只记得一句话，输入关键词，命中的条目会带着所属期号一起出现。</li>
          </ul>
        </div>
        <div class="faq-mail">
          <h3 class="faq-mail__title">这几种情况，写信给我们更快</h3>
          <ul class="faq-mail__list">
            <li>记得某条内容的样子，却想不起它落在哪个分类下</li>
            <li>对外引用时要写期号，但你手上只有一张截图</li>
            <li>打开历史版本后，发现内容和手边的打印稿对不上</li>
          </ul>
          <p class="faq-mail__text">来信请发到 <a href="mailto:email@weide-playbook.com.cn">email@weide-playbook.com.cn</a>，工作日 9:00-18:00 内有专人处理，平均 4 小时以内回复。邮件里带上分类名、期号或你记得的那句话，我们会更快找到你看的那一版。</p>
          <a class="btn btn--ghost" href="/insights/">去历史版本列表</a>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-sec faq-sec--last" id="faq-next">
    <div class="page-shell">
      <div class="faq-head">
        <p class="eyebrow">05 / 接下来</p>
        <h2>这一步走完，挑一条继续</h2>
        <p class="faq-head__text">想接着看内容，就往分类里去；想省下下次回访的时间，就让摘要每季主动找上你。</p>
      </div>
      <div class="faq-next">
        <a class="faq-next__card" href="/offerings/">
          <p class="faq-next__kicker mono">内容分类</p>
          <p class="faq-next__title">按分类继续往下翻</p>
          <p class="faq-next__text">12 个一级分类、54 个二级标签，顺着你关心的方向逐层看，每一层都能点到具体条目。</p>
          <span class="faq-next__arrow" aria-hidden="true">→</span>
        </a>
        <a class="faq-next__card" href="/contact/">
          <p class="faq-next__kicker mono">订阅摘要</p>
          <p class="faq-next__title">每季收到一封变更摘要</p>
          <p class="faq-next__text">目前有 3.6 万名订阅者，覆盖 31 个省级行政区。三步就能完成订阅，下一期发布当天送达。</p>
          <span class="faq-next__arrow" aria-hidden="true">→</span>
        </a>
      </div>
      <p class="faq-note">订阅邮箱只用于发送季度摘要，退订方式写在每封邮件底部；具体处理方式见<a href="/privacy-policy/">隐私政策</a>。</p>
    </div>
  </section>
</main>

.page-faq {
  --faq-pad: clamp(34px, 5vw, 72px);
  --faq-gap: clamp(18px, 3vw, 34px);
  --faq-paper-ink: #0A1622;
  --faq-paper-sub: #3E5568;
  background: var(--ink-900);
  color: var(--paper);
  overflow-x: hidden;
}

.page-faq .mono {
  font-family: var(--font-mono);
}

.page-faq a {
  color: inherit;
}

/* ---------- hero ---------- */
.page-faq .faq-hero {
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 4.5vw, 56px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(53, 224, 208, .12), transparent 62%),
    linear-gradient(180deg, #0D2436 0%, var(--ink-900) 68%);
}

.page-faq .breadcrumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}

.page-faq .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .20em;
  color: var(--cyan);
}

.page-faq h1 {
  margin: 12px 0 0;
  font-size: clamp(34px, 7vw, 70px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero .lede {
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: #C2CFD9;
}

.page-faq .faq-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--sand);
}

.page-faq .faq-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-facts .mono {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--moss);
}

/* ---------- rail index ---------- */
.page-faq .rail {
  position: static;
  width: 100%;
}

.page-faq .faq-rail__label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .20em;
  color: var(--slate);
}

.page-faq .rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

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

.page-faq .rail__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  font-size: 14px;
  color: var(--sand);
  text-decoration: none;
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}

.page-faq .rail__link:hover,
.page-faq .rail__link.is-active {
  color: var(--cyan);
  padding-left: 6px;
}

.page-faq .faq-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--amber);
}

/* ---------- generic section ---------- */
.page-faq .faq-sec {
  padding: var(--faq-pad) 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-sec--alt {
  background: linear-gradient(180deg, #0C2031 0%, #0B1D2E 100%);
}

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

.page-faq .faq-head {
  max-width: 60ch;
  margin-bottom: clamp(22px, 3.2vw, 36px);
}

.page-faq .faq-head h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.page-faq .faq-head__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #B9C6D1;
}

/* ---------- figure ---------- */
.page-faq .faq-figure {
  position: relative;
  margin: 0 0 clamp(22px, 3vw, 36px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #143145 0%, #0B1D2E 68%, #10314A 100%);
}

.page-faq .faq-figure .media-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}

/* ---------- path ---------- */
.page-faq .faq-path__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
}

.page-faq .faq-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.page-faq .faq-step {
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--ink-800);
  clip-path: var(--cut);
  transition: background .22s var(--ease);
}

.page-faq .faq-step:hover {
  background: #16354C;
}

.page-faq .faq-step__num {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--amber);
}

.page-faq .faq-step__title {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--paper);
}

.page-faq .faq-step__text {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #B4C2CE;
}

.page-faq .faq-step__link {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
}

.page-faq .faq-step__link:hover {
  color: var(--paper);
  border-bottom-color: var(--amber);
}

.page-faq .faq-stairwrap {
  align-self: start;
}

.page-faq .faq-stair {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
}

.page-faq .faq-stair a {
  text-decoration: none;
}

.page-faq .faq-stair rect {
  fill: var(--ink-800);
  stroke: rgba(53, 224, 208, .34);
  stroke-width: 1.4;
  transition: fill .2s var(--ease), stroke .2s var(--ease);
}

.page-faq .faq-stair a:hover rect {
  fill: #17405A;
  stroke: var(--cyan);
}

.page-faq .faq-stair text {
  fill: var(--sand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .10em;
}

.page-faq .faq-stair a:hover text {
  fill: var(--cyan);
}

.page-faq .faq-stair__cap {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .10em;
  color: var(--slate);
}

/* ---------- check ---------- */
.page-faq .faq-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-faq .faq-check {
  padding: clamp(16px, 2.2vw, 24px);
  background: rgba(18, 42, 64, .78);
  border-top: 2px solid var(--line-amber);
}

.page-faq .faq-check__num {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-check__title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-check__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #A9B9C6;
}

.page-faq .faq-check__text .tag {
  margin: 0 6px 6px 0;
}

.page-faq .faq-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-prose p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  color: #BCC9D4;
}

.page-faq .faq-prose__foot {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--moss);
}

.page-faq .faq-figure--square {
  margin-bottom: 0;
  aspect-ratio: 4 / 3;
}

/* ---------- qa ---------- */
.page-faq .faq-qa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

.page-faq .faq-qa__grouptitle {
  position: relative;
  margin: 0 0 6px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--paper);
}

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

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

.page-faq .faq-qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 14px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #E4EAEF;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-qa__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--cyan);
}

.page-faq details[open] .faq-qa__q::after {
  content: "−";
  color: var(--amber);
}

.page-faq details[open] .faq-qa__q {
  color: var(--paper);
}

.page-faq .faq-qa__a {
  margin: 0 0 16px;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: #A6B6C3;
}

.page-faq details[open] .faq-qa__a {
  animation: faq-qa-drop .24s var(--ease);
}

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

@keyframes faq-qa-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- paper block ---------- */
.page-faq .faq-paper {
  padding: var(--faq-pad) 0;
  background: var(--paper);
  color: var(--faq-paper-ink);
  border-bottom: 1px solid rgba(11, 29, 46, .10);
}

.page-faq .faq-paper .eyebrow {
  color: #1C7F74;
}

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

.page-faq .faq-paper .faq-head__text {
  color: var(--faq-paper-sub);
}

.page-faq .faq-paper__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 48px);
}

.page-faq .faq-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-faq .faq-signals__item {
  padding: 16px 0;
  border-top: 1px solid rgba(11, 29, 46, .14);
  font-size: 14.5px;
  line-height: 1.85;
  color: #33495C;
}

.page-faq .faq-signals__item .mono {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #9A6A18;
}

.page-faq .faq-mail {
  padding: clamp(20px, 2.8vw, 30px);
  background: #FFFFFF;
  border-left: 3px solid var(--amber);
  box-shadow: 0 18px 40px -32px rgba(11, 29, 46, .55);
}

.page-faq .faq-mail__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.page-faq .faq-mail__list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #33495C;
}

.page-faq .faq-mail__text {
  margin: 16px 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #33495C;
}

.page-faq .faq-mail__text a {
  color: #0F7268;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 114, 104, .4);
  word-break: break-all;
}

.page-faq .faq-mail .btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(11, 29, 46, .35);
  color: var(--ink-900);
  transition: background .2s var(--ease), color .2s var(--ease);
}

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

/* ---------- next ---------- */
.page-faq .faq-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-faq .faq-next__card {
  position: relative;
  display: block;
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--ink-800);
  clip-path: var(--cut);
  text-decoration: none;
  color: var(--paper);
  transition: background .22s var(--ease), transform .22s var(--ease);
}

.page-faq .faq-next__card:hover {
  background: #17405A;
  transform: translateY(-3px);
}

.page-faq .faq-next__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--amber);
}

.page-faq .faq-next__title {
  margin: 10px 0 0;
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-next__text {
  margin: 10px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.85;
  color: #B4C2CE;
}

.page-faq .faq-next__arrow {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan);
}

.page-faq .faq-note {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--slate);
}

.page-faq .faq-note a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

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

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

  .page-faq .faq-figure {
    aspect-ratio: 21 / 9;
  }

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

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

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

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

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

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

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

  .page-faq .faq-step:nth-child(2) {
    margin-left: clamp(0px, 2.2vw, 26px);
  }

  .page-faq .faq-step:nth-child(3) {
    margin-left: clamp(0px, 4.4vw, 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-next__card,
  .page-faq .faq-step,
  .page-faq .rail__link {
    transition: none;
  }

  .page-faq details[open] .faq-qa__a {
    animation: none;
  }
}