.page-faq {
  --faq-gap: clamp(1.4rem, 3.4vw, 2.4rem);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  padding-bottom: clamp(2.4rem, 6vw, 4rem);
}

.page-faq .crumbs {
  padding-top: clamp(1.4rem, 3.6vw, 2.2rem);
  margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

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

.page-faq .crumbs a:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: center;
  padding-bottom: clamp(1.8rem, 4.5vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero__eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--copper);
}

.page-faq .faq-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-faq .faq-hero__lede {
  margin: 0 0 1.4rem;
  max-width: 42em;
  font-size: clamp(0.94rem, 1.6vw, 1.05rem);
  line-height: 1.85;
  color: var(--text-soft);
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

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

.page-faq .faq-hero__figure .figure-frame,
.page-faq .faq-switch__figure .figure-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-hero__figure img,
.page-faq .faq-switch__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-hero__figure .figure-frame__label,
.page-faq .faq-switch__figure .figure-frame__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 区块标题 ---------- */
.page-faq .faq-check,
.page-faq .faq-switch,
.page-faq .faq-answers,
.page-faq .faq-prep {
  padding-block: clamp(2.2rem, 5.5vw, 3.6rem);
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

.page-faq .faq-block-head__num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--copper);
}

.page-faq .faq-block-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.22rem, 3.4vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-faq .faq-block-head__note {
  grid-column: 2;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 01 快速排查表 ---------- */
.page-faq .faq-check__table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
  overflow: hidden;
}

.page-faq .faq-check__head {
  display: none;
}

.page-faq .faq-check__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  padding: 1rem 1.05rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
}

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

.page-faq .faq-check__row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--copper);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.page-faq .faq-check__row:hover {
  background: var(--paper-shade);
}

.page-faq .faq-check__row:hover::before {
  opacity: 1;
}

.page-faq .faq-check__cell {
  min-width: 0;
}

.page-faq .faq-check__cell p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-check__cell:not(.faq-check__cell--symptom)::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.22rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-faq .tag {
  display: inline-block;
  padding: 0.2rem 0.68rem;
  border-radius: var(--pill);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
}

.page-faq .tag--amber {
  background: rgba(224, 165, 38, 0.2);
  color: #7a5303;
}

.page-faq .tag--slate {
  background: rgba(91, 124, 141, 0.16);
  color: #3b5563;
}

.page-faq .tag--seal {
  background: rgba(158, 75, 63, 0.14);
  color: var(--seal);
}

/* ---------- 02 换设备三步 ---------- */
.page-faq .faq-switch__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-switch__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-faq .faq-switch__steps::before {
  content: "";
  position: absolute;
  left: 2.375rem;
  top: 3rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--copper), rgba(184, 115, 51, 0.08));
  pointer-events: none;
}

.page-faq .faq-switch__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-faq .faq-switch__step:hover {
  transform: translateY(-3px);
  border-color: var(--copper);
  box-shadow: var(--shadow-lift);
}

.page-faq .faq-switch__num {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.84rem;
  font-weight: 600;
}

.page-faq .faq-switch__step:hover .faq-switch__num {
  background: var(--copper);
}

.page-faq .faq-switch__title {
  margin: 0 0 0.32rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.page-faq .faq-switch__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-soft);
}

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

/* ---------- 03 双栏问答 ---------- */
.page-faq .faq-answers__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
}

.page-faq .faq-answers__group {
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-faq .faq-item {
  margin-bottom: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.page-faq .faq-item[open] {
  border-color: var(--copper);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
}

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

.page-faq .faq-item__q:hover {
  color: var(--copper);
}

.page-faq .faq-item__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--copper);
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "–";
}

.page-faq .faq-item__a {
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-item__a p {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--text-soft);
}

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

/* ---------- 04 联系支持前准备 ---------- */
.page-faq .faq-prep__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-prep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  counter-reset: prep;
}

.page-faq .faq-prep__item {
  counter-increment: prep;
  position: relative;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-prep__item::before {
  content: counter(prep, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--copper);
}

.page-faq .faq-prep__item strong {
  font-weight: 700;
  color: var(--ink);
}

.page-faq .faq-prep__contact {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
}

.page-faq .faq-prep__contact h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-prep__row {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(244, 239, 230, 0.16);
}

.page-faq .faq-prep__row:first-of-type {
  border-top: 0;
}

.page-faq .faq-prep__key {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 230, 0.55);
}

.page-faq .faq-prep__val {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--paper-warm);
  word-break: break-word;
}

.page-faq .faq-prep__note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(244, 239, 230, 0.72);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--moss);
}

.page-faq .faq-tail p {
  margin: 0;
  max-width: 42em;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-tail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* ---------- 桌面端 ---------- */
@media (min-width: 880px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .page-faq .faq-check__head {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr) minmax(0, 1.3fr);
    gap: 1.1rem;
    padding: 0.65rem 1.05rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .page-faq .faq-check__row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr) minmax(0, 1.3fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.05rem;
  }

  .page-faq .faq-check__cell:not(.faq-check__cell--symptom)::before {
    display: none;
  }

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

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

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

@media (min-width: 1120px) {
  .page-faq .faq-hero {
    gap: clamp(2.4rem, 5vw, 4rem);
  }

  .page-faq .faq-block-head {
    gap: 0.35rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-check__row,
  .page-faq .faq-check__row::before,
  .page-faq .faq-switch__step,
  .page-faq .faq-item,
  .page-faq .faq-switch__num {
    transition: none;
  }

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


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

    <nav class="crumbs" aria-label="当前位置">
      <span class="crumbs__item"><a href="/">首页</a></span>
      <span class="crumbs__item">支持中心</span>
    </nav>

    <header class="faq-hero">
      <div class="faq-hero__text">
        <p class="faq-hero__eyebrow mono">SUPPORT / 支持中心</p>
        <h1>查不到存档、入口点不开，先照症状排一遍</h1>
        <p class="faq-hero__lede">澳门新京葡站把访问时最常遇到的几类状况整理成了一份按症状出发的排查顺序。您可以从下表找到与眼前情况最接近的一行，照原因和处理办法走一遍；走不通，再带上页面路径和设备信息联系我们，工作日 9:00-18:00 都有人回复。</p>
        <div class="faq-hero__actions">
          <a class="btn btn--solid" href="#check">看快速排查表</a>
          <a class="btn btn--ghost" href="/consult/">联系支持</a>
        </div>
      </div>
      <figure class="faq-hero__figure">
        <div class="figure-frame figure-frame--ratio-3x2 figure-frame--paper">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="纸面上的三列排查表与放大镜，行首标有手机、平板和桌面设备图标">
        </div>
        <figcaption class="figure-frame__label mono">排查表 · 症状 / 原因 / 处理</figcaption>
      </figure>
    </header>

    <section class="faq-check" id="check">
      <header class="faq-block-head">
        <span class="faq-block-head__num mono">01</span>
        <h2 class="faq-block-head__title">快速排查表</h2>
        <p class="faq-block-head__note">先认准症状属于哪一种，再动手处理；处理完仍有问题，记下当时的版本号。</p>
      </header>

      <div class="faq-check__table">
        <div class="faq-check__head" aria-hidden="true">
          <span>症状</span>
          <span>常见原因</span>
          <span>可以这样处理</span>
        </div>

        <div class="faq-check__row">
          <div class="faq-check__cell faq-check__cell--symptom" data-label="症状">
            <span class="tag tag--amber">查不到存档</span>
          </div>
          <div class="faq-check__cell" data-label="常见原因">
            <p>入口选在了另一处；或者检索时用的是上一回记下的版本号与栏目名。</p>
          </div>
          <div class="faq-check__cell" data-label="可以这样处理">
            <p>从首页的存档入口或存档与下载页重新进入存档查询，把日期、栏目其中一项换掉再搜一次；结果为空时，记下当时输入的版本号。</p>
          </div>
        </div>

        <div class="faq-check__row">
          <div class="faq-check__cell faq-check__cell--symptom" data-label="症状">
            <span class="tag tag--slate">换设备后找不到入口</span>
          </div>
          <div class="faq-check__cell" data-label="常见原因">
            <p>换了浏览器或终端，原设备上保存的入口没有跟过来。</p>
          </div>
          <div class="faq-check__cell" data-label="可以这样处理">
            <p>重新登录后打开存档查询，用条目编号找回同一条记录，再从记录里的路径进入。下方三步走法写得更细一些。</p>
          </div>
        </div>

        <div class="faq-check__row">
          <div class="faq-check__cell faq-check__cell--symptom" data-label="症状">
            <span class="tag tag--seal">下载入口点了没反应</span>
          </div>
          <div class="faq-check__cell" data-label="常见原因">
            <p>浏览器拦住了下载、网络环境受限、入口已过保留期，或者选错了包。</p>
          </div>
          <div class="faq-check__cell" data-label="可以这样处理">
            <p>先看地址栏右侧有没有拦截提示，允许后重试；再换一个网络环境试一次；仍不行时，到下方问答里逐项对照排查。</p>
          </div>
        </div>

        <div class="faq-check__row">
          <div class="faq-check__cell faq-check__cell--symptom" data-label="症状">
            <span class="tag tag--slate">版本号或日期对不上</span>
          </div>
          <div class="faq-check__cell" data-label="常见原因">
            <p>打开的是上一个版本，或者页面缓存还停留在旧内容。</p>
          </div>
          <div class="faq-check__cell" data-label="可以这样处理">
            <p>刷新页面后看页面上标注的版本号与存档日期，再和您记下的编号比一比；比对的方法在下方问答里。</p>
          </div>
        </div>

        <div class="faq-check__row">
          <div class="faq-check__cell faq-check__cell--symptom" data-label="症状">
            <span class="tag tag--amber">字体错位、日期差一天</span>
          </div>
          <div class="faq-check__cell" data-label="常见原因">
            <p>浏览器字体回退，或者设备时区与页面显示的时区不一致。</p>
          </div>
          <div class="faq-check__cell" data-label="可以这样处理">
            <p>换一个浏览器再看；把设备时区调成与所在地一致，然后重新打开页面。设备组合可以到存档与下载页按标签对一下。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="faq-switch" id="switch">
      <header class="faq-block-head">
        <span class="faq-block-head__num mono">02</span>
        <h2 class="faq-block-head__title">换设备重新登录，三步接上原来那一页</h2>
        <p class="faq-block-head__note">换手机、换浏览器、换电脑之后找不到原来那一页，按这三步走，通常一次就能接上。</p>
      </header>

      <div class="faq-switch__layout">
        <ol class="faq-switch__steps">
          <li class="faq-switch__step">
            <span class="faq-switch__num mono">01</span>
            <div>
              <h3 class="faq-switch__title">重新登录后先打开存档查询</h3>
              <p class="faq-switch__text">不要凭印象去猜原来的入口。从首页的存档入口，或者存档与下载页进入存档查询，首页与栏目页两类记录都在这里列出，按日期、栏目、版本号、设备类型都能筛。</p>
            </div>
          </li>
          <li class="faq-switch__step">
            <span class="faq-switch__num mono">02</span>
            <div>
              <h3 class="faq-switch__title">用条目编号找回同一条记录</h3>
              <p class="faq-switch__text">每一条结果都带条目编号、存档日期、适用设备和版本号。用您记得的版本号或日期把范围缩小，选中与原设备上一致的那一条。</p>
            </div>
          </li>
          <li class="faq-switch__step">
            <span class="faq-switch__num mono">03</span>
            <div>
              <h3 class="faq-switch__title">从记录里的路径直达目标页面</h3>
              <p class="faq-switch__text">对应路径就写在结果里，点进去看到的就是同一个版本，不用再从导航一层层翻找。栏目页的入口同样适用这三步。</p>
            </div>
          </li>
        </ol>

        <figure class="faq-switch__figure">
          <div class="figure-frame figure-frame--ratio-3x2 figure-frame--paper">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三张索引卡依次排列，卡片上分别是登录、查存档、进入页面三个步骤图示" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure-frame__label mono">换设备路径 · 登录 → 查存档 → 进入页面</figcaption>
        </figure>
      </div>
    </section>

    <section class="faq-answers" id="answers">
      <header class="faq-block-head">
        <span class="faq-block-head__num mono">03</span>
        <h2 class="faq-block-head__title">还没解决，展开看处理细节</h2>
        <p class="faq-block-head__note">下面几类问题比较常见，点开对应标题就能看到具体做法。</p>
      </header>

      <div class="faq-answers__columns">
        <div class="faq-answers__col">
          <h3 class="faq-answers__group">下载入口与打开异常</h3>

          <details class="faq-item">
            <summary class="faq-item__q">点了下载入口没有反应，先查哪几项？</summary>
            <div class="faq-item__a">
              <p>先看浏览器有没有把文件拦下来，地址栏右侧通常会留一个拦截提示，允许后重试即可。</p>
              <p>其次换一个网络环境再试一次，公司网络和公共 Wi-Fi 有时会限制大文件传输。</p>
              <p>再看入口是否还在保留期内：简体版页面包按季度归档，在线入口只保留最近三个季度，更早的期次要从存档查询里找。</p>
              <p>最后确认选对了包。简体版页面包、离线索引包和适配清单包用途不同，选错会拿到暂时用不上的内容。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">打开后提示链接失效或内容不全，怎么办？</summary>
            <div class="faq-item__a">
              <p>链接失效多半是打开了往期的入口。回到存档与下载页，用存档日期挑一个仍在保留期内的期次重新进入。</p>
              <p>如果内容看起来缺了一块，先强制刷新一次，多数浏览器是 Ctrl+F5，也可以在刷新按钮上长按；仍然不全，就把页面路径和版本号记下来发给我们。</p>
            </div>
          </details>
        </div>

        <div class="faq-answers__col">
          <h3 class="faq-answers__group">显示、时区与版本</h3>

          <details class="faq-item">
            <summary class="faq-item__q">字体挤在一起、日期差一天，从哪里调？</summary>
            <div class="faq-item__a">
              <p>日期和版本号按设备所在时区显示，时区设置偏了，看到的日期就会差一天。把设备时区调回所在地，再重新打开页面即可。</p>
              <p>字体方面，目前覆盖 6 种字体渲染环境，标题挤压或缺字通常是浏览器字体回退造成的，换一个浏览器或调整系统字体设置再看。</p>
              <p>设备范围按手机、平板、桌面、折叠屏、车载浏览器和投屏环境六组划分，共 12 类设备、8 种主流浏览器、18 个地区与时区，可以在存档与下载页用设备标签对一下自己的组合。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">怎么确认打开的是同一个版本？</summary>
            <div class="faq-item__a">
              <p>版本号写成主版本.期次.修订号，例如 2025.2.3 表示 2025 年第 2 期第 3 次修订。</p>
              <p>先看页面标注的版本号，再比对存档日期：常规更新在每周二、周五发布，重大改版 48 小时内补录，日期落在更新日之后是正常的。</p>
              <p>设备类型也要对得上。同一条记录在不同设备视口下可能分属不同条目，手机和平板看到的编号不一定是同一个。</p>
            </div>
          </details>
        </div>
      </div>
    </section>

    <section class="faq-prep" id="prepare">
      <header class="faq-block-head">
        <span class="faq-block-head__num mono">04</span>
        <h2 class="faq-block-head__title">联系我们之前，准备好这四样</h2>
        <p class="faq-block-head__note">资料齐全，一次沟通就能定位到具体条目和版本，省去来回问。</p>
      </header>

      <div class="faq-prep__layout">
        <ol class="faq-prep__list">
          <li class="faq-prep__item"><strong>页面路径</strong>：从浏览器地址栏复制，形如 /business/ 或 /notes/ 的路径最有用，写着这一小段就够。</li>
          <li class="faq-prep__item"><strong>设备信息</strong>：说明用的是手机、平板、桌面、折叠屏、车载浏览器还是投屏环境，写清具体型号更好定位。</li>
          <li class="faq-prep__item"><strong>问题截图</strong>：截一张出问题的页面，保留地址栏和页面上标注的版本号。</li>
          <li class="faq-prep__item"><strong>版本号</strong>：页面上那串主版本.期次.修订号，例如 2025.2.3。</li>
        </ol>

        <aside class="faq-prep__contact">
          <h3>联系方式</h3>
          <div class="faq-prep__row">
            <span class="faq-prep__key mono">EMAIL</span>
            <span class="faq-prep__val">service@jingpu-archive.com.cn</span>
          </div>
          <div class="faq-prep__row">
            <span class="faq-prep__key mono">TEL</span>
            <span class="faq-prep__val">13760384273</span>
          </div>
          <div class="faq-prep__row">
            <span class="faq-prep__key mono">ADDRESS</span>
            <span class="faq-prep__val">甘肃省兰州市城关区雁宁路128号</span>
          </div>
          <p class="faq-prep__note">工作日 9:00-18:00 内回复。发信时附上页面路径和设备信息，处理会快一些。</p>
        </aside>
      </div>

      <div class="faq-tail">
        <p>想直接找最新一期的存档，从存档与下载页进入；想知道最近改了什么，更新记录里按版本迭代、入口调整、适配增补、维护手记分好了条目。</p>
        <div class="faq-tail__actions">
          <a class="btn btn--copper btn--sm" href="/business/">去存档与下载</a>
          <a class="btn btn--ghost btn--sm" href="/notes/">看更新记录</a>
        </div>
      </div>
    </section>

  </div>
</main>

.page-faq {
  --faq-gap: clamp(1.4rem, 3.4vw, 2.4rem);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  padding-bottom: clamp(2.4rem, 6vw, 4rem);
}

.page-faq .crumbs {
  padding-top: clamp(1.4rem, 3.6vw, 2.2rem);
  margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

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

.page-faq .crumbs a:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: center;
  padding-bottom: clamp(1.8rem, 4.5vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero__eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--copper);
}

.page-faq .faq-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-faq .faq-hero__lede {
  margin: 0 0 1.4rem;
  max-width: 42em;
  font-size: clamp(0.94rem, 1.6vw, 1.05rem);
  line-height: 1.85;
  color: var(--text-soft);
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

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

.page-faq .faq-hero__figure .figure-frame,
.page-faq .faq-switch__figure .figure-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-hero__figure img,
.page-faq .faq-switch__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-hero__figure .figure-frame__label,
.page-faq .faq-switch__figure .figure-frame__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 区块标题 ---------- */
.page-faq .faq-check,
.page-faq .faq-switch,
.page-faq .faq-answers,
.page-faq .faq-prep {
  padding-block: clamp(2.2rem, 5.5vw, 3.6rem);
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

.page-faq .faq-block-head__num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--copper);
}

.page-faq .faq-block-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.22rem, 3.4vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-faq .faq-block-head__note {
  grid-column: 2;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 01 快速排查表 ---------- */
.page-faq .faq-check__table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
  overflow: hidden;
}

.page-faq .faq-check__head {
  display: none;
}

.page-faq .faq-check__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  padding: 1rem 1.05rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
}

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

.page-faq .faq-check__row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--copper);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.page-faq .faq-check__row:hover {
  background: var(--paper-shade);
}

.page-faq .faq-check__row:hover::before {
  opacity: 1;
}

.page-faq .faq-check__cell {
  min-width: 0;
}

.page-faq .faq-check__cell p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-check__cell:not(.faq-check__cell--symptom)::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.22rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-faq .tag {
  display: inline-block;
  padding: 0.2rem 0.68rem;
  border-radius: var(--pill);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
}

.page-faq .tag--amber {
  background: rgba(224, 165, 38, 0.2);
  color: #7a5303;
}

.page-faq .tag--slate {
  background: rgba(91, 124, 141, 0.16);
  color: #3b5563;
}

.page-faq .tag--seal {
  background: rgba(158, 75, 63, 0.14);
  color: var(--seal);
}

/* ---------- 02 换设备三步 ---------- */
.page-faq .faq-switch__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-switch__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-faq .faq-switch__steps::before {
  content: "";
  position: absolute;
  left: 2.375rem;
  top: 3rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--copper), rgba(184, 115, 51, 0.08));
  pointer-events: none;
}

.page-faq .faq-switch__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-faq .faq-switch__step:hover {
  transform: translateY(-3px);
  border-color: var(--copper);
  box-shadow: var(--shadow-lift);
}

.page-faq .faq-switch__num {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.84rem;
  font-weight: 600;
}

.page-faq .faq-switch__step:hover .faq-switch__num {
  background: var(--copper);
}

.page-faq .faq-switch__title {
  margin: 0 0 0.32rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.page-faq .faq-switch__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-soft);
}

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

/* ---------- 03 双栏问答 ---------- */
.page-faq .faq-answers__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
}

.page-faq .faq-answers__group {
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-faq .faq-item {
  margin-bottom: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.page-faq .faq-item[open] {
  border-color: var(--copper);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
}

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

.page-faq .faq-item__q:hover {
  color: var(--copper);
}

.page-faq .faq-item__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--copper);
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "–";
}

.page-faq .faq-item__a {
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-item__a p {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--text-soft);
}

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

/* ---------- 04 联系支持前准备 ---------- */
.page-faq .faq-prep__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-prep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  counter-reset: prep;
}

.page-faq .faq-prep__item {
  counter-increment: prep;
  position: relative;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-prep__item::before {
  content: counter(prep, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--copper);
}

.page-faq .faq-prep__item strong {
  font-weight: 700;
  color: var(--ink);
}

.page-faq .faq-prep__contact {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
}

.page-faq .faq-prep__contact h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-prep__row {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(244, 239, 230, 0.16);
}

.page-faq .faq-prep__row:first-of-type {
  border-top: 0;
}

.page-faq .faq-prep__key {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 230, 0.55);
}

.page-faq .faq-prep__val {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--paper-warm);
  word-break: break-word;
}

.page-faq .faq-prep__note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(244, 239, 230, 0.72);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--moss);
}

.page-faq .faq-tail p {
  margin: 0;
  max-width: 42em;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-faq .faq-tail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* ---------- 桌面端 ---------- */
@media (min-width: 880px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .page-faq .faq-check__head {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr) minmax(0, 1.3fr);
    gap: 1.1rem;
    padding: 0.65rem 1.05rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .page-faq .faq-check__row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr) minmax(0, 1.3fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.05rem;
  }

  .page-faq .faq-check__cell:not(.faq-check__cell--symptom)::before {
    display: none;
  }

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

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

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

@media (min-width: 1120px) {
  .page-faq .faq-hero {
    gap: clamp(2.4rem, 5vw, 4rem);
  }

  .page-faq .faq-block-head {
    gap: 0.35rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-check__row,
  .page-faq .faq-check__row::before,
  .page-faq .faq-switch__step,
  .page-faq .faq-item,
  .page-faq .faq-switch__num {
    transition: none;
  }

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