.page-faq {
  --faq-block: clamp(52px, 7.5vw, 100px);
  --faq-gap: clamp(16px, 2.6vw, 32px);
  --faq-rule: rgba(247, 245, 238, 0.22);
  position: relative;
  overflow-x: hidden;
  background-color: var(--kg-paper);
  color: var(--kg-ink);
  font-family: var(--kg-font);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-block: clamp(18px, 2.6vw, 28px) clamp(34px, 5vw, 60px);
}

.page-faq .faq-hero__label {
  margin-top: clamp(18px, 3vw, 30px);
  color: var(--kg-skin);
}

.page-faq .faq-hero__title {
  margin: clamp(10px, 1.6vw, 16px) 0 0;
  max-width: 17em;
}

.page-faq .faq-hero__lead {
  margin-top: clamp(14px, 2vw, 22px);
  max-width: 48em;
}

.page-faq .faq-hero__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__quick a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--kg-line-strong);
  border-radius: var(--kg-radius);
  color: var(--kg-ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s var(--kg-ease), color 0.2s var(--kg-ease),
    border-color 0.2s var(--kg-ease);
}

.page-faq .faq-hero__quick a:hover,
.page-faq .faq-hero__quick a:focus-visible {
  background-color: var(--kg-flesh);
  border-color: var(--kg-flesh);
  color: var(--kg-paper);
}

/* ---------- 深色流程色带 ---------- */
.page-faq .faq-flow-band {
  position: relative;
  background-color: var(--kg-skin);
  color: var(--kg-on-dark);
  clip-path: polygon(0 clamp(22px, 4vw, 54px), 100% 0, 100% 100%, 0 100%);
  padding-block: clamp(58px, 8vw, 104px) clamp(44px, 6.5vw, 82px);
}

.page-faq .faq-flow-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.6vw, 40px);
}

.page-faq .faq-flow-band__heading {
  margin: 10px 0 0;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--kg-on-dark);
}

.page-faq .faq-flow-band__text {
  margin: 14px 0 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.78;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-rule);
}

.page-faq .faq-flow__item {
  padding: 16px 14px 16px 0;
  border-bottom: 1px solid var(--faq-rule);
}

.page-faq .faq-flow__num {
  display: block;
  font-family: var(--kg-mono);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kg-lime);
}

.page-faq .faq-flow__name {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-on-dark);
}

.page-faq .faq-flow__hint {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-flow-band__figure {
  margin: 0;
}

.page-faq .faq-flow-band__figure .kg-figure__caption {
  color: var(--kg-on-dark-muted);
}

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

/* ---------- 章节标题 ---------- */
.page-faq .faq-section-head {
  max-width: 64ch;
  margin-bottom: clamp(22px, 3.6vw, 40px);
}

.page-faq .faq-section-head .kg-title {
  margin-top: 10px;
}

.page-faq .faq-section-head .kg-lead {
  margin-top: 12px;
}

/* ---------- 登录四步详解 ---------- */
.page-faq .faq-login {
  padding-block: var(--faq-block) clamp(30px, 4.5vw, 52px);
  background-color: var(--kg-paper);
}

.page-faq .faq-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kg-line-strong);
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--kg-line);
  scroll-margin-top: 96px;
}

.page-faq .faq-step__num {
  font-family: var(--kg-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kg-flesh);
}

.page-faq .faq-step__title {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--kg-ink);
}

.page-faq .faq-step__dl {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.page-faq .faq-step__dl > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.page-faq .faq-step__dl dt {
  padding-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kg-wine);
}

.page-faq .faq-step__dl dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-ink-soft);
}

.page-faq .faq-step__dl a,
.page-faq .faq-submit__card a,
.page-faq .faq-detail__steps a,
.page-faq .faq-submit__note a {
  color: var(--kg-skin);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--kg-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-faq .faq-step__dl a:hover,
.page-faq .faq-submit__card a:hover,
.page-faq .faq-detail__steps a:hover,
.page-faq .faq-submit__note a:hover {
  color: var(--kg-flesh);
}

/* ---------- 收藏面板成因 ---------- */
.page-faq .faq-panel {
  background-color: var(--kg-slate-bg);
  color: var(--kg-slate-ink);
  padding-block: var(--faq-block);
}

.page-faq .faq-panel .kg-title {
  color: var(--kg-seed);
}

.page-faq .faq-panel .kg-lead,
.page-faq .faq-panel .kg-label {
  color: var(--kg-slate-ink);
}

.page-faq .faq-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.6vw, 44px);
}

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

.page-faq .faq-detail {
  background-color: rgba(247, 245, 238, 0.62);
  border-bottom: 1px solid rgba(72, 88, 106, 0.3);
}

.page-faq .faq-detail:first-child {
  border-top: 1px solid rgba(72, 88, 106, 0.3);
}

.page-faq .faq-detail__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 15px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--kg-seed);
}

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

.page-faq .faq-detail__summary:focus-visible {
  outline: 2px solid var(--kg-orange);
  outline-offset: -2px;
}

.page-faq .faq-detail__tag {
  flex: none;
  font-family: var(--kg-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--kg-wine);
}

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

.page-faq .faq-detail__chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--kg-slate-ink);
  border-bottom: 2px solid var(--kg-slate-ink);
  transform: rotate(45deg);
  transition: transform 0.26s var(--kg-ease);
}

.page-faq .faq-detail[open] .faq-detail__chev {
  transform: rotate(225deg);
}

.page-faq .faq-detail__body {
  margin-left: 15px;
  padding: 2px 16px 20px 14px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--kg-slate-ink);
  transition: border-color 0.24s var(--kg-ease);
}

.page-faq .faq-detail[open] .faq-detail__body {
  border-left-color: var(--kg-lime);
}

.page-faq .faq-detail__check {
  margin: 0 0 12px;
  padding: 10px 12px;
  background-color: rgba(43, 46, 90, 0.08);
  border-radius: var(--kg-radius);
  font-size: 14px;
  color: var(--kg-indigo);
}

.page-faq .faq-detail__label {
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kg-wine);
}

.page-faq .faq-detail__steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.25em;
}

/* ---------- 提交与回传 ---------- */
.page-faq .faq-submit {
  padding-block: var(--faq-block);
  background-color: var(--kg-paper);
}

.page-faq .faq-submit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.6vw, 28px);
}

.page-faq .faq-submit__card {
  padding: clamp(20px, 3vw, 30px);
  background-color: var(--kg-paper);
  border: 1px solid var(--kg-line-strong);
  border-radius: var(--kg-radius);
  box-shadow: 6px 6px 0 rgba(20, 83, 45, 0.13);
}

.page-faq .faq-submit__card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kg-ink);
}

.page-faq .faq-submit__card ul,
.page-faq .faq-submit__card ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.72;
  color: var(--kg-ink-soft);
}

.page-faq .faq-submit__note {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--kg-slate-ink);
}

/* ---------- 速查表 ---------- */
.page-faq .faq-lookup {
  padding-block: clamp(30px, 4.5vw, 54px) var(--faq-block);
  background-color: var(--kg-paper);
}

.page-faq .faq-lookup__scroll {
  overflow-x: auto;
  border-top: 2px solid var(--kg-seed);
  scrollbar-width: thin;
}

.page-faq .faq-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-faq .faq-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background-color: var(--kg-seed);
  color: var(--kg-paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  white-space: nowrap;
}

.page-faq .faq-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--kg-line);
  vertical-align: top;
  line-height: 1.65;
  color: var(--kg-ink-soft);
}

.page-faq .faq-table tbody tr:nth-child(odd) {
  background-color: rgba(221, 227, 234, 0.46);
}

.page-faq .faq-table tbody tr:hover {
  background-color: rgba(198, 242, 74, 0.24);
}

.page-faq .faq-table__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kg-skin);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--kg-ease), color 0.2s var(--kg-ease);
}

.page-faq .faq-table__link:hover,
.page-faq .faq-table__link:focus-visible {
  color: var(--kg-flesh);
  border-bottom-color: var(--kg-flesh);
}

.page-faq .faq-table__link:focus-visible {
  outline: 2px solid var(--kg-orange);
  outline-offset: 3px;
}

.page-faq .faq-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--kg-slate-ink);
}

.page-faq .faq-dot--login {
  background-color: var(--kg-orange);
}

.page-faq .faq-dot--panel {
  background-color: var(--kg-flesh);
}

.page-faq .faq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: clamp(14px, 2vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kg-slate-ink);
}

.page-faq .faq-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ---------- 收尾指引 ---------- */
.page-faq .faq-next {
  background-color: var(--kg-indigo);
  color: var(--kg-on-dark);
  padding-block: clamp(38px, 6vw, 72px);
}

.page-faq .faq-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
}

.page-faq .faq-next h2 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kg-on-dark);
}

.page-faq .faq-next p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-next__links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(247, 245, 238, 0.26);
}

.page-faq .faq-next__links li {
  border-bottom: 1px solid rgba(247, 245, 238, 0.26);
}

.page-faq .faq-next__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  color: var(--kg-on-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s var(--kg-ease), padding-left 0.2s var(--kg-ease);
}

.page-faq .faq-next__links a::after {
  content: "\2192";
  font-family: var(--kg-mono);
  color: var(--kg-lime);
}

.page-faq .faq-next__links a:hover,
.page-faq .faq-next__links a:focus-visible {
  color: var(--kg-lime);
  padding-left: 8px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-step__dl > div {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
  }

  .page-faq .faq-step__dl dd {
    font-size: 15.5px;
  }
}

@media (min-width: 760px) {
  .page-faq .faq-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--faq-rule);
  }

  .page-faq .faq-flow__item {
    padding: 20px 16px;
    border-bottom: 0;
    border-left: 1px solid var(--faq-rule);
  }

  .page-faq .faq-flow__item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-faq .faq-step {
    grid-template-columns: clamp(54px, 7vw, 92px) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 42px);
  }

  .page-faq .faq-step__num {
    padding-top: 2px;
  }

  .page-faq .faq-lookup__scroll {
    overflow-x: visible;
  }

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-hero__quick a,
  .page-faq .faq-detail__chev,
  .page-faq .faq-detail__body,
  .page-faq .faq-table__link,
  .page-faq .faq-next__links a {
    transition: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

等等，我不应该加 `<<<PAGE_CSS_END>>>` 和 `<<<END>>>`。让我重新检查一下所要求格式：标记必须按顺序出现，每个只出现一次：
`` …… `` ……

所以一共有两个标记。我多加了一些。让我重新输出，文件末尾不要额外标记。

另外我还需要再检查一下 `faq-flow-band__inner` 在 900px 及以上的媒体查询把它设为单列——这其实并没什么用，因为移动端已经是 1 列了。让我删掉它，或者把它改得更有意义。其实我可以让 intro 在小屏幕上压在流程条上面——但网格现在就是把它们堆叠起来。行吧。

我还想再检查一下 `.faq-flow-band` 的 `clip-path` 配合负边距的问题——不需要负边距。

另外首屏和流程带之间没有衔接——首屏以纸色背景结束，然后流程带斜切的上边缘开始。这样挺好。

我再确认一下 `data-reveal` 不会把内容藏起来。行吧。

还有一点：`.kg-figure__media img` 那套规则在 `.page-faq` 作用域里——没问题。

还有我在 `.faq-step__dl a` 上设了 `text-decoration-color`，可以。

我把整体再顺一遍，然后干净地输出。

还有，`faq-flow-band__inner` 那段没用的 900px 媒体查询——去掉。

`@media (min-width: 900px)` 那条只保留面板网格和吸顶的 figure。

就这么定稿。

另外，关于首屏图片——“非懒加载”——首屏那块没有 `<img>`；第一张图在流程带区域，它在首屏以下。但具体算不算“首屏”？规则说：“首屏主图不要 lazy，其余图片添加 loading=‘lazy’”。既然流程带的图片是页面上第一张图，而且位置靠上，那就不给它加 lazy。第二张加 lazy。这样没问题。

好，定稿。
<main id="main-content" class="page-faq">

  <section class="faq-hero" aria-labelledby="faq-hero-title">
    <div class="kg-container">
      <nav class="kg-crumbs" aria-label="面包屑">
        <ol class="kg-crumbs__list">
          <li><a class="kg-crumbs__link" href="/">服务中心首页</a></li>
          <li><span class="kg-crumbs__current">常见问答</span></li>
        </ol>
      </nav>
      <p class="kg-label faq-hero__label">排障手册 · 第 01 辑</p>
      <h1 id="faq-hero-title" class="kg-title faq-hero__title">登录卡住、面板一片空白，先自己走一遍这几步</h1>
      <p class="kg-lead faq-hero__lead">桌面端点登录一直转圈、输完密码又跳回登录页，或者收藏面板打开就是空白——这类麻烦大多有明确的触发点。奇异果体育把最高频的两类情况拆成可以照着操作的顺序：先判断问题落在哪一环，再按对应步骤处理；自己走不通，也知道该把哪些现场信息提上来。</p>
      <ul class="faq-hero__quick">
        <li><a href="#login-steps">桌面端登不上</a></li>
        <li><a href="#panel-causes">收藏面板打不开</a></li>
        <li><a href="#submit">怎么提交记录</a></li>
        <li><a href="#lookup">速查表</a></li>
      </ul>
    </div>
  </section>

  <section class="faq-flow-band" aria-labelledby="faq-flow-heading">
    <div class="kg-container faq-flow-band__inner">
      <div class="faq-flow-band__intro">
        <p class="kg-label kg-label--lime">四个环节</p>
        <h2 class="faq-flow-band__heading" id="faq-flow-heading">从外往里查，比反复重装更省时间</h2>
        <p class="faq-flow-band__text">登录不上，问题通常落在下面四个位置之一。按 01 到 04 的顺序走，每一步都能得到一个明确结论，走完就知道该继续往下、还是该停下来提交记录。</p>
      </div>
      <ol class="faq-flow" data-track="四步流程">
        <li class="faq-flow__item">
          <span class="faq-flow__num">01</span>
          <span class="faq-flow__name">网络与 DNS</span>
          <span class="faq-flow__hint">请求能不能送到服务节点</span>
        </li>
        <li class="faq-flow__item">
          <span class="faq-flow__num">02</span>
          <span class="faq-flow__name">客户端完整性</span>
          <span class="faq-flow__hint">安装文件有没有缺损</span>
        </li>
        <li class="faq-flow__item">
          <span class="faq-flow__num">03</span>
          <span class="faq-flow__name">账号状态</span>
          <span class="faq-flow__hint">登录态与权限是否正常</span>
        </li>
        <li class="faq-flow__item">
          <span class="faq-flow__num">04</span>
          <span class="faq-flow__name">日志回传</span>
          <span class="faq-flow__hint">把现场留给工程师</span>
        </li>
      </ol>
      <figure class="kg-figure faq-flow-band__figure">
        <div class="kg-figure__media">
          <img src="{zhanqunpic:h:520w:900}" width="900" height="520" alt="桌面端登录排查的四个节点并列路径图，末端分别指向已定位与已恢复的状态色块">
        </div>
        <figcaption class="kg-figure__caption">四步走完，基本能判断问题出在本地网络、安装包、账号，还是需要工程师查看服务端日志。</figcaption>
      </figure>
    </div>
  </section>

  <section class="faq-login" id="login-steps" aria-labelledby="login-heading">
    <div class="kg-container">
      <header class="faq-section-head" data-reveal>
        <p class="kg-label">步骤详解</p>
        <h2 class="kg-title" id="login-heading">奇异果体育桌面端登录异常排查</h2>
        <p class="kg-lead">下面是四个步骤的具体做法。每一步都给出看什么、点哪里、看到什么算通过，照着对一遍就行。</p>
      </header>

      <ol class="faq-steps">
        <li class="faq-step" id="step-network" data-reveal="0">
          <div class="faq-step__num">01</div>
          <div class="faq-step__main">
            <h3 class="faq-step__title">先确认网络与 DNS 能把请求送出去</h3>
            <dl class="faq-step__dl">
              <div>
                <dt>现象</dt>
                <dd>点击登录后按钮长时间没有反应，或者弹出“连接超时”。</dd>
              </div>
              <div>
                <dt>操作</dt>
                <dd>先在浏览器打开一个常用网站，确认外网本身通畅；再进系统网络设置查看 DNS 是否被改成非常规地址，改回自动获取后重启客户端。</dd>
              </div>
              <div>
                <dt>判断</dt>
                <dd>常用网站能正常打开、客户端依旧超时，说明瓶颈在到服务节点的这一段，接着做第 02 步。</dd>
              </div>
            </dl>
          </div>
        </li>

        <li class="faq-step" id="step-integrity" data-reveal="1">
          <div class="faq-step__num">02</div>
          <div class="faq-step__main">
            <h3 class="faq-step__title">校验安装包，排除文件缺失</h3>
            <dl class="faq-step__dl">
              <div>
                <dt>现象</dt>
                <dd>能进到登录界面，输入账号后闪退，或提示某个文件缺失。</dd>
              </div>
              <div>
                <dt>操作</dt>
                <dd>打开客户端设置里的检查更新，执行一次完整性校验；校验报告列出缺失文件时，按提示重新获取安装包，安装前先把后台运行的旧进程关掉。</dd>
              </div>
              <div>
                <dt>判断</dt>
                <dd>校验无异常且能稳定停留在登录页，说明安装包这一环没问题，跳到第 03 步。各系统安装包与版本号可到<a href="/app-download/">客户端下载</a>页核对。</dd>
              </div>
            </dl>
          </div>
        </li>

        <li class="faq-step" id="step-account" data-reveal="2">
          <div class="faq-step__num">03</div>
          <div class="faq-step__main">
            <h3 class="faq-step__title">换一个端登录，看账号本身是否正常</h3>
            <dl class="faq-step__dl">
              <div>
                <dt>现象</dt>
                <dd>密码确认无误仍提示“账号或密码错误”，或登录成功却提示权限不足。</dd>
              </div>
              <div>
                <dt>操作</dt>
                <dd>用同一账号在网页端登录一次，观察是否出现相同提示；网页端进得去而客户端进不去，退出客户端后重新登录，刷新一次登录态即可。</dd>
              </div>
              <div>
                <dt>判断</dt>
                <dd>网页端同样被拒，说明问题在账号侧，直接看下方的提交说明，把提示原文一起带上。</dd>
              </div>
            </dl>
          </div>
        </li>

        <li class="faq-step" id="step-log" data-reveal="3">
          <div class="faq-step__num">04</div>
          <div class="faq-step__main">
            <h3 class="faq-step__title">把日志和截图打包提交</h3>
            <dl class="faq-step__dl">
              <div>
                <dt>现象</dt>
                <dd>前三步都正常，但仍然偶发登录失败，间隔一段时间又出现一次。</dd>
              </div>
              <div>
                <dt>操作</dt>
                <dd>在客户端设置里打开日志目录，取当次失败时间点前后的日志文件，连同页面截图打包，通过页面底部的反馈入口提交，写清设备型号与系统版本。</dd>
              </div>
              <div>
                <dt>判断</dt>
                <dd>收到工单编号即表示记录已进入队列，之后每一次状态变化都会回传到提交时填写的邮箱。</dd>
              </div>
            </dl>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="faq-panel" id="panel-causes" aria-labelledby="panel-heading">
    <div class="kg-container">
      <header class="faq-section-head" data-reveal>
        <p class="kg-label">三类成因</p>
        <h2 class="kg-title" id="panel-heading">P3JF订阅收藏面板打不开</h2>
        <p class="kg-lead">收藏面板负责跨赛事收藏、分组管理与开赛提醒，最多支持 60 个自定义分组。点开后空白、一直转圈或提示内容为空，多数落在这三类原因上。展开任意一条，先回答一个自检问题，再按步骤处理。</p>
      </header>

      <div class="faq-panel__grid">
        <div class="faq-panel__list" data-reveal="0">
          <details class="faq-detail" id="panel-cache">
            <summary class="faq-detail__summary">
              <span class="faq-detail__tag">成因 01</span>
              <span class="faq-detail__name">缓存冲突</span>
              <span class="faq-detail__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-detail__body">
              <p class="faq-detail__check"><span class="faq-detail__label">自检</span>同一账号在网页端能正常看到收藏，只有客户端打不开？</p>
              <ol class="faq-detail__steps">
                <li>退出客户端，在设置里找到缓存目录，清空其中的面板缓存文件。</li>
                <li>重新登录后打开收藏面板，观察分组是否恢复显示。</li>
                <li>分组回来了但个别赛事不在，重新收藏一次该赛事即可补齐。</li>
              </ol>
            </div>
          </details>

          <details class="faq-detail" id="panel-version">
            <summary class="faq-detail__summary">
              <span class="faq-detail__tag">成因 02</span>
              <span class="faq-detail__name">版本不匹配</span>
              <span class="faq-detail__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-detail__body">
              <p class="faq-detail__check"><span class="faq-detail__label">自检</span>问题是最近一次更新之后才出现的，且面板顶部显示的版本号与资料页不一致？</p>
              <ol class="faq-detail__steps">
                <li>到<a href="/app-download/">客户端下载</a>页核对当前主版本与子版本号，记下正确的那一串。</li>
                <li>回客户端执行检查更新，升到与资料页一致的最新版。</li>
                <li>升级后的首次启动会重建一次面板结构，稍等片刻再打开收藏面板。</li>
              </ol>
            </div>
          </details>

          <details class="faq-detail" id="panel-auth">
            <summary class="faq-detail__summary">
              <span class="faq-detail__tag">成因 03</span>
              <span class="faq-detail__name">账号权限异常</span>
              <span class="faq-detail__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-detail__body">
              <p class="faq-detail__check"><span class="faq-detail__label">自检</span>面板里只显示部分分组，或提示无权限查看？</p>
              <ol class="faq-detail__steps">
                <li>确认当前登录的是常用账号，没有误切到第二个账号。</li>
                <li>在网页端查看该账号的分组数量，判断是显示问题还是账号本身数据缺失。</li>
                <li>账号确实缺少分组时，把账号与缺失的分组名称一并提交，由工程师核对权限记录。</li>
              </ol>
            </div>
          </details>
        </div>

        <figure class="kg-figure faq-panel__figure" data-reveal="1">
          <div class="kg-figure__media">
            <img src="{zhanqunpic:h:520w:820}" width="820" height="520" alt="收藏面板三类成因以三组果籽聚簇表示，每组用不同标签色连向对应的处置步骤" loading="lazy" decoding="async">
          </div>
          <figcaption class="kg-figure__caption">缓存、版本、权限三类原因，处置的先后顺序也不一样，先自检再动手更省事。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-submit" id="submit" aria-labelledby="submit-heading">
    <div class="kg-container">
      <header class="faq-section-head" data-reveal>
        <p class="kg-label">记录提交与回传</p>
        <h2 class="kg-title" id="submit-heading">把现场信息凑齐，处理起来快得多</h2>
        <p class="kg-lead">不管卡在哪一步，只要决定提交记录，就顺手把下面几样带上。信息越完整，工程师越不需要来回追问，你也不用反复描述同一个现象。</p>
      </header>

      <div class="faq-submit__grid">
        <article class="faq-submit__card" data-reveal="0">
          <h3>提交时附上这些</h3>
          <ul>
            <li>出问题的页面截图，最好包含提示原文。</li>
            <li>设备型号与操作系统版本。</li>
            <li>客户端版本号，例如 V3.1。</li>
            <li>故障发生的日期与大致时间点。</li>
            <li>已经试过的步骤编号，方便跳过重复环节。</li>
          </ul>
        </article>

        <article class="faq-submit__card" data-reveal="1">
          <h3>提交之后会怎样</h3>
          <ol>
            <li>通过页面底部的反馈入口发送，或直接发到客服邮箱。</li>
            <li>记录生成一条工单编号，随首次回复一并回到提交邮箱。</li>
            <li>状态依次经历记录中、已定位、已恢复，每次变化都会通知到邮箱。</li>
            <li>同类问题的处理经过会整理进<a href="/stories/">更新与故事</a>，可按版本回看。</li>
          </ol>
        </article>
      </div>

      <p class="faq-submit__note">工作日 9:00-18:00 提交的工单，首次回复平均用时 40 分钟。客服邮箱 email@guo-play.com.cn，也可拨打 15652652460。需要当面沟通的合作事项，走<a href="/cooperation/">合作与反馈</a>页的渠道。</p>
    </div>
  </section>

  <section class="faq-lookup" id="lookup" aria-labelledby="lookup-heading">
    <div class="kg-container">
      <header class="faq-section-head" data-reveal>
        <p class="kg-label">速查</p>
        <h2 class="kg-title" id="lookup-heading">对号入座，直接跳到对应步骤</h2>
        <p class="kg-lead">熟悉这套流程的话，从现象一栏往下找就行，右侧链接会带你到具体的处置位置。</p>
      </header>

      <div class="faq-lookup__scroll" data-reveal="0">
        <table class="faq-table">
          <caption class="kg-visually-hidden">常见登录与收藏面板故障的现象、可能原因与对应处理步骤</caption>
          <thead>
            <tr>
              <th scope="col">现象</th>
              <th scope="col">可能原因</th>
              <th scope="col">对应步骤</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>点登录后按钮长时间无响应</td>
              <td>到服务节点的网络或 DNS 解析不通</td>
              <td><a class="faq-table__link" href="#step-network"><span class="faq-dot faq-dot--login" aria-hidden="true"></span>步骤 01</a></td>
            </tr>
            <tr>
              <td>输入账号后闪退，提示文件缺失</td>
              <td>客户端安装文件不完整</td>
              <td><a class="faq-table__link" href="#step-integrity"><span class="faq-dot faq-dot--login" aria-hidden="true"></span>步骤 02</a></td>
            </tr>
            <tr>
              <td>密码正确仍提示账号或密码错误</td>
              <td>登录态未同步，或账号侧异常</td>
              <td><a class="faq-table__link" href="#step-account"><span class="faq-dot faq-dot--login" aria-hidden="true"></span>步骤 03</a></td>
            </tr>
            <tr>
              <td>前三步正常，仍偶发登录失败</td>
              <td>需要工程师查看服务端日志</td>
              <td><a class="faq-table__link" href="#step-log"><span class="faq-dot faq-dot--login" aria-hidden="true"></span>步骤 04</a></td>
            </tr>
            <tr>
              <td>收藏面板打开一片空白</td>
              <td>面板缓存冲突</td>
              <td><a class="faq-table__link" href="#panel-cache"><span class="faq-dot faq-dot--panel" aria-hidden="true"></span>成因 01</a></td>
            </tr>
            <tr>
              <td>更新之后收藏面板才打不开</td>
              <td>客户端版本与资料页不一致</td>
              <td><a class="faq-table__link" href="#panel-version"><span class="faq-dot faq-dot--panel" aria-hidden="true"></span>成因 02</a></td>
            </tr>
            <tr>
              <td>收藏面板只显示部分分组</td>
              <td>登录账号与分组归属不匹配</td>
              <td><a class="faq-table__link" href="#panel-auth"><span class="faq-dot faq-dot--panel" aria-hidden="true"></span>成因 03</a></td>
            </tr>
          </tbody>
        </table>
      </div>

      <ul class="faq-legend">
        <li><span class="faq-dot faq-dot--login" aria-hidden="true"></span>登录相关</li>
        <li><span class="faq-dot faq-dot--panel" aria-hidden="true"></span>收藏面板相关</li>
      </ul>
    </div>
  </section>

  <section class="faq-next" aria-labelledby="faq-next-heading">
    <div class="kg-container faq-next__inner">
      <div>
        <h2 id="faq-next-heading">这两类之外的状况</h2>
        <p>安装包下载失败、球员数据没有按轮刷新、账号绑定异常也会零星出现。往期同类情况的处理经过整理在更新与故事栏目，可以按版本号往前翻；准备换设备的话，客户端下载页列了各系统的安装包与首启自检说明。想了解这套排障体系是怎么运转的，从平台介绍看起。</p>
      </div>
      <ul class="faq-next__links">
        <li><a href="/stories/">翻往期故障记录</a></li>
        <li><a href="/app-download/">下载各端安装包</a></li>
        <li><a href="/introduction/">了解版本沿革与团队</a></li>
        <li><a href="/cooperation/">谈内容与数据合作</a></li>
        <li><a href="/">回服务中心首页</a></li>
      </ul>
    </div>
  </section>

</main>

.page-faq {
  --faq-block: clamp(52px, 7.5vw, 100px);
  --faq-rule: rgba(247, 245, 238, 0.22);
  position: relative;
  overflow-x: hidden;
  background-color: var(--kg-paper);
  color: var(--kg-ink);
  font-family: var(--kg-font);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-block: clamp(18px, 2.6vw, 28px) clamp(34px, 5vw, 60px);
}

.page-faq .faq-hero__label {
  margin-top: clamp(18px, 3vw, 30px);
  color: var(--kg-skin);
}

.page-faq .faq-hero__title {
  margin: clamp(10px, 1.6vw, 16px) 0 0;
  max-width: 17em;
}

.page-faq .faq-hero__lead {
  margin-top: clamp(14px, 2vw, 22px);
  max-width: 48em;
}

.page-faq .faq-hero__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__quick a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--kg-line-strong);
  border-radius: var(--kg-radius);
  color: var(--kg-ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s var(--kg-ease), color 0.2s var(--kg-ease),
    border-color 0.2s var(--kg-ease);
}

.page-faq .faq-hero__quick a:hover,
.page-faq .faq-hero__quick a:focus-visible {
  background-color: var(--kg-flesh);
  border-color: var(--kg-flesh);
  color: var(--kg-paper);
}

/* ---------- 深色流程色带 ---------- */
.page-faq .faq-flow-band {
  position: relative;
  background-color: var(--kg-skin);
  color: var(--kg-on-dark);
  clip-path: polygon(0 clamp(22px, 4vw, 54px), 100% 0, 100% 100%, 0 100%);
  padding-block: clamp(58px, 8vw, 104px) clamp(44px, 6.5vw, 82px);
}

.page-faq .faq-flow-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.6vw, 40px);
}

.page-faq .faq-flow-band__heading {
  margin: 10px 0 0;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--kg-on-dark);
}

.page-faq .faq-flow-band__text {
  margin: 14px 0 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.78;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-rule);
}

.page-faq .faq-flow__item {
  padding: 16px 14px 16px 0;
  border-bottom: 1px solid var(--faq-rule);
}

.page-faq .faq-flow__num {
  display: block;
  font-family: var(--kg-mono);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kg-lime);
}

.page-faq .faq-flow__name {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-on-dark);
}

.page-faq .faq-flow__hint {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-flow-band__figure {
  margin: 0;
}

.page-faq .faq-flow-band__figure .kg-figure__caption {
  color: var(--kg-on-dark-muted);
}

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

/* ---------- 章节标题 ---------- */
.page-faq .faq-section-head {
  max-width: 64ch;
  margin-bottom: clamp(22px, 3.6vw, 40px);
}

.page-faq .faq-section-head .kg-title {
  margin-top: 10px;
}

.page-faq .faq-section-head .kg-lead {
  margin-top: 12px;
}

/* ---------- 登录四步详解 ---------- */
.page-faq .faq-login {
  padding-block: var(--faq-block) clamp(30px, 4.5vw, 52px);
  background-color: var(--kg-paper);
}

.page-faq .faq-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kg-line-strong);
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--kg-line);
  scroll-margin-top: 96px;
}

.page-faq .faq-step__num {
  font-family: var(--kg-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kg-flesh);
}

.page-faq .faq-step__title {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--kg-ink);
}

.page-faq .faq-step__dl {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.page-faq .faq-step__dl > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.page-faq .faq-step__dl dt {
  padding-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kg-wine);
}

.page-faq .faq-step__dl dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-ink-soft);
}

.page-faq .faq-step__dl a,
.page-faq .faq-submit__card a,
.page-faq .faq-detail__steps a,
.page-faq .faq-submit__note a {
  color: var(--kg-skin);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--kg-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-faq .faq-step__dl a:hover,
.page-faq .faq-submit__card a:hover,
.page-faq .faq-detail__steps a:hover,
.page-faq .faq-submit__note a:hover {
  color: var(--kg-flesh);
}

/* ---------- 收藏面板成因 ---------- */
.page-faq .faq-panel {
  background-color: var(--kg-slate-bg);
  color: var(--kg-slate-ink);
  padding-block: var(--faq-block);
}

.page-faq .faq-panel .kg-title {
  color: var(--kg-seed);
}

.page-faq .faq-panel .kg-lead,
.page-faq .faq-panel .kg-label {
  color: var(--kg-slate-ink);
}

.page-faq .faq-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.6vw, 44px);
}

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

.page-faq .faq-detail {
  background-color: rgba(247, 245, 238, 0.62);
  border-bottom: 1px solid rgba(72, 88, 106, 0.3);
}

.page-faq .faq-detail:first-child {
  border-top: 1px solid rgba(72, 88, 106, 0.3);
}

.page-faq .faq-detail__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 15px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--kg-seed);
}

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

.page-faq .faq-detail__summary:focus-visible {
  outline: 2px solid var(--kg-orange);
  outline-offset: -2px;
}

.page-faq .faq-detail__tag {
  flex: none;
  font-family: var(--kg-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--kg-wine);
}

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

.page-faq .faq-detail__chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--kg-slate-ink);
  border-bottom: 2px solid var(--kg-slate-ink);
  transform: rotate(45deg);
  transition: transform 0.26s var(--kg-ease);
}

.page-faq .faq-detail[open] .faq-detail__chev {
  transform: rotate(225deg);
}

.page-faq .faq-detail__body {
  margin-left: 15px;
  padding: 2px 16px 20px 14px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--kg-slate-ink);
  transition: border-color 0.24s var(--kg-ease);
}

.page-faq .faq-detail[open] .faq-detail__body {
  border-left-color: var(--kg-lime);
}

.page-faq .faq-detail__check {
  margin: 0 0 12px;
  padding: 10px 12px;
  background-color: rgba(43, 46, 90, 0.08);
  border-radius: var(--kg-radius);
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-indigo);
}

.page-faq .faq-detail__label {
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kg-wine);
}

.page-faq .faq-detail__steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.25em;
}

/* ---------- 提交与回传 ---------- */
.page-faq .faq-submit {
  padding-block: var(--faq-block);
  background-color: var(--kg-paper);
}

.page-faq .faq-submit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.6vw, 28px);
}

.page-faq .faq-submit__card {
  padding: clamp(20px, 3vw, 30px);
  background-color: var(--kg-paper);
  border: 1px solid var(--kg-line-strong);
  border-radius: var(--kg-radius);
  box-shadow: 6px 6px 0 rgba(20, 83, 45, 0.13);
}

.page-faq .faq-submit__card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kg-ink);
}

.page-faq .faq-submit__card ul,
.page-faq .faq-submit__card ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.72;
  color: var(--kg-ink-soft);
}

.page-faq .faq-submit__note {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--kg-slate-ink);
}

/* ---------- 速查表 ---------- */
.page-faq .faq-lookup {
  padding-block: clamp(30px, 4.5vw, 54px) var(--faq-block);
  background-color: var(--kg-paper);
}

.page-faq .faq-lookup__scroll {
  overflow-x: auto;
  border-top: 2px solid var(--kg-seed);
  scrollbar-width: thin;
}

.page-faq .faq-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-faq .faq-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background-color: var(--kg-seed);
  color: var(--kg-paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  white-space: nowrap;
}

.page-faq .faq-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--kg-line);
  vertical-align: top;
  line-height: 1.65;
  color: var(--kg-ink-soft);
}

.page-faq .faq-table tbody tr:nth-child(odd) {
  background-color: rgba(221, 227, 234, 0.46);
}

.page-faq .faq-table tbody tr:hover {
  background-color: rgba(198, 242, 74, 0.24);
}

.page-faq .faq-table__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kg-skin);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--kg-ease), color 0.2s var(--kg-ease);
}

.page-faq .faq-table__link:hover,
.page-faq .faq-table__link:focus-visible {
  color: var(--kg-flesh);
  border-bottom-color: var(--kg-flesh);
}

.page-faq .faq-table__link:focus-visible {
  outline: 2px solid var(--kg-orange);
  outline-offset: 3px;
}

.page-faq .faq-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--kg-slate-ink);
}

.page-faq .faq-dot--login {
  background-color: var(--kg-orange);
}

.page-faq .faq-dot--panel {
  background-color: var(--kg-flesh);
}

.page-faq .faq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: clamp(14px, 2vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kg-slate-ink);
}

.page-faq .faq-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ---------- 收尾指引 ---------- */
.page-faq .faq-next {
  background-color: var(--kg-indigo);
  color: var(--kg-on-dark);
  padding-block: clamp(38px, 6vw, 72px);
}

.page-faq .faq-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
}

.page-faq .faq-next h2 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kg-on-dark);
}

.page-faq .faq-next p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--kg-on-dark-muted);
}

.page-faq .faq-next__links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(247, 245, 238, 0.26);
}

.page-faq .faq-next__links li {
  border-bottom: 1px solid rgba(247, 245, 238, 0.26);
}

.page-faq .faq-next__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  color: var(--kg-on-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s var(--kg-ease), padding-left 0.2s var(--kg-ease);
}

.page-faq .faq-next__links a::after {
  content: "\2192";
  font-family: var(--kg-mono);
  color: var(--kg-lime);
}

.page-faq .faq-next__links a:hover,
.page-faq .faq-next__links a:focus-visible {
  color: var(--kg-lime);
  padding-left: 8px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-step__dl > div {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
  }

  .page-faq .faq-step__dl dd {
    font-size: 15.5px;
  }
}

@media (min-width: 760px) {
  .page-faq .faq-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--faq-rule);
  }

  .page-faq .faq-flow__item {
    padding: 20px 16px;
    border-bottom: 0;
    border-left: 1px solid var(--faq-rule);
  }

  .page-faq .faq-flow__item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-faq .faq-step {
    grid-template-columns: clamp(54px, 7vw, 92px) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 42px);
  }

  .page-faq .faq-step__num {
    padding-top: 2px;
  }

  .page-faq .faq-lookup__scroll {
    overflow-x: visible;
  }

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-hero__quick a,
  .page-faq .faq-detail__chev,
  .page-faq .faq-detail__body,
  .page-faq .faq-table__link,
  .page-faq .faq-next__links a {
    transition: none;
  }
}