.page-faq {
  --faq-gap: clamp(1.25rem, 3.5vw, 2.25rem);
  --faq-track: clamp(2.6rem, 8vw, 4rem);
  --faq-step-line: #2A3F63;
}

/* ---------- hero ---------- */
.page-faq .faq-hero {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 200, .14) 0%, rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(19, 41, 79, .55) 0%, rgba(10, 20, 40, 0) 78%);
}
.page-faq .faq-hero__inner {
  display: grid;
  gap: .9rem;
  position: relative;
  padding-left: 0;
}
.page-faq .faq-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.4rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(0, 229, 200, 0) 82%);
  opacity: .7;
  display: none;
}
.page-faq .faq-hero__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 7.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.85;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .4rem;
}
.page-faq .faq-hero__meta .index-label {
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}
.page-faq .faq-hero__meta .index-label:first-child {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}

/* ---------- quick self-check ---------- */
.page-faq .faq-quick {
  padding-block: var(--pad-y);
}
.page-faq .faq-quick__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-quick__grid {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-quick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  counter-reset: none;
}
.page-faq .faq-quick__item {
  position: relative;
  padding: 1.15rem 1.15rem 1.15rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-md);
}
.page-faq .faq-quick__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan);
  display: block;
  margin-bottom: .35rem;
}
.page-faq .faq-quick__name {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  color: var(--text);
}
.page-faq .faq-quick__text {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-quick__hint {
  margin: .65rem 0 0;
  padding: .5rem .7rem;
  background: rgba(255, 196, 138, .12);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--amber-soft);
  font-size: .86rem;
  line-height: 1.7;
}
.page-faq .faq-quick__figure {
  margin: 0;
}
.page-faq .faq-quick__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.page-faq .faq-quick__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-quick__foot {
  margin: var(--faq-gap) 0 0;
  color: var(--text);
  font-size: .98rem;
}
.page-faq .faq-quick__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .9rem 0 0;
}

/* ---------- five steps ---------- */
.page-faq .faq-steps {
  padding-block: var(--pad-y);
  background:
    linear-gradient(180deg, rgba(15, 31, 61, .7) 0%, rgba(10, 20, 40, 0) 100%);
  border-top: 1px solid var(--line);
}
.page-faq .faq-steps__head {
  max-width: 64ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-steps__layout {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-steps__figure {
  margin: 0;
  order: 2;
}
.page-faq .faq-steps__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 18 / 25;
}
.page-faq .faq-steps__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-steps__flow {
  order: 1;
  display: grid;
  gap: .75rem;
  position: relative;
}
.page-faq .faq-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .24s var(--ease), background-color .24s var(--ease);
}
.page-faq .faq-step.is-open {
  border-color: rgba(0, 229, 200, .55);
  background: var(--panel-2);
}
.page-faq .faq-step--amber.is-open {
  border-color: rgba(255, 138, 61, .55);
}
.page-faq .faq-step__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.page-faq .faq-step__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}
.page-faq .faq-step__index {
  flex: 0 0 auto;
  width: var(--faq-track);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .06em;
  border-right: 1px solid var(--line);
  padding-right: .6rem;
  transition: color .24s var(--ease);
}
.page-faq .faq-step.is-open .faq-step__index {
  color: var(--cyan);
}
.page-faq .faq-step--amber.is-open .faq-step__index {
  color: var(--amber);
}
.page-faq .faq-step__label {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
}
.page-faq .faq-step__state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
  white-space: nowrap;
}
.page-faq .faq-step.is-open .faq-step__state {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}
.page-faq .faq-step__panel {
  padding: 0 1.1rem 1.15rem 1.1rem;
  border-top: 1px dashed var(--line);
  margin-top: -.25rem;
  padding-top: 1rem;
}
.page-faq .faq-step__panel[hidden] {
  display: none;
}
.page-faq .faq-step__conclusion {
  margin: 0 0 .7rem;
  color: var(--cyan-soft);
  font-size: .92rem;
}
.page-faq .faq-step--amber .faq-step__conclusion {
  color: var(--amber-soft);
}
.page-faq .faq-step__actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}
.page-faq .faq-step__actions li {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-step__actions a {
  color: var(--cyan);
}
.page-faq .faq-step__check {
  margin: .85rem 0 0;
  padding: .6rem .75rem;
  background: rgba(255, 196, 138, .12);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.7;
}
.page-faq .faq-step__check-tag {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid rgba(255, 138, 61, .5);
  border-radius: var(--r-pill);
  padding: .12rem .5rem;
}
.page-faq .faq-step__next {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}
.page-faq .faq-steps__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 0;
}
.page-faq .faq-steps__tools-note {
  color: var(--muted);
  font-size: .84rem;
}
.page-faq .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

/* ---------- switch ---------- */
.page-faq .faq-switch {
  padding-block: var(--pad-y);
}
.page-faq .faq-switch__box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  max-width: 76ch;
  border-left: 3px solid var(--amber);
}
.page-faq .faq-switch__lead {
  margin: .6rem 0 1rem;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-switch__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
  counter-reset: none;
}
.page-faq .faq-switch__list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.75;
}
.page-faq .faq-switch__list .mono {
  flex: 0 0 auto;
  font-size: .82rem;
  color: var(--amber);
}
.page-faq .faq-switch__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

/* ---------- small screen Q&A ---------- */
.page-faq .faq-scan {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--line);
}
.page-faq .faq-scan__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-scan__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-scan__card {
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.page-faq .faq-scan__card:hover {
  border-color: rgba(183, 156, 255, .45);
  transform: translateY(-2px);
}
.page-faq .faq-scan__q {
  margin: 0 0 .45rem;
  font-size: 1rem;
  color: var(--violet);
  line-height: 1.5;
}
.page-faq .faq-scan__a {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}

/* ---------- index check ---------- */
.page-faq .faq-index {
  padding-block: var(--pad-y);
}
.page-faq .faq-index__box {
  display: grid;
  gap: var(--faq-gap);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background:
    linear-gradient(120deg, rgba(19, 41, 79, .85) 0%, rgba(15, 31, 61, .6) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.page-faq .faq-index__lead {
  margin: .6rem 0 0;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.page-faq .faq-index__list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.page-faq .faq-index__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  border: 1px solid rgba(183, 156, 255, .4);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  line-height: 1.6;
}
.page-faq .faq-index__h {
  margin: 0 0 .3rem;
  font-size: .98rem;
  color: var(--text);
}
.page-faq .faq-index__list p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}
.page-faq .faq-index__list a {
  color: var(--cyan);
}

/* ---------- help ---------- */
.page-faq .faq-help {
  padding-block: 0 var(--pad-y);
}
.page-faq .faq-help__box {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 138, 61, .35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 138, 61, .16) 0%, rgba(10, 20, 40, 0) 65%),
    var(--panel);
}
.page-faq .faq-help__lead {
  margin: .6rem 0 1.4rem;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-help__grid {
  display: grid;
  gap: .9rem;
}
.page-faq .faq-help__cell {
  padding: 1rem 1.1rem;
  background: rgba(10, 20, 40, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.page-faq .faq-help__cell .index-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--amber);
}
.page-faq .faq-help__cell p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.8;
}
.page-faq .faq-help__cell a {
  color: var(--cyan);
}
.page-faq .faq-help__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.4rem 0 0;
}

/* ---------- desktop ---------- */
@media (min-width: 768px) {
  .page-faq .faq-hero__inner {
    padding-left: 1.6rem;
  }
  .page-faq .faq-hero__inner::before {
    display: block;
  }
  .page-faq .faq-quick__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-quick__figure {
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: translateY(1.1rem);
  }
  .page-faq .faq-index__box {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-steps__layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-steps__figure {
    order: 0;
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-steps__flow {
    order: 0;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: none;
  }
  .page-faq .faq-scan__card:nth-child(3n + 2) {
    transform: translateY(1.2rem);
  }
}
</｜｜DSML｜｜ parameter>
</invoke>
</longcat_thought>
<main id="main-content" class="page-faq">

  <section class="faq-hero" aria-labelledby="faq-hero-title">
    <div class="shell faq-hero__inner">
      <p class="crumbs">
        <span class="crumbs__item"><a href="/">首页</a></span>
        <span class="crumbs__item">使用指南</span>
      </p>
      <p class="eyebrow">使用指南 / 访问协助</p>
      <h1 id="faq-hero-title" class="display faq-hero__title">页面打不开或卡住时，先跟着往下走</h1>
      <p class="faq-hero__lead">
        MELBET手机版 把最常见的访问问题整理成一条从简到繁的路线。先花一分钟做三项快速自查，多数情况在这一步就能恢复；
        如果还没有好转，再按五步逐一排查，每一步都告诉你判断标准和没有解决时该往哪走。
      </p>
      <div class="faq-hero__meta">
        <span class="index-label">GUIDE 05 / 06</span>
        <span class="index-label">预计用时 3–10 分钟</span>
        <span class="index-label">大多数情况无需联系客服</span>
      </div>
    </div>
  </section>

  <section class="faq-quick" aria-labelledby="faq-quick-title">
    <div class="shell">
      <div class="faq-quick__head" data-reveal>
        <h2 id="faq-quick-title" class="section__title">先做这三项自查</h2>
        <p class="section__lead">动手之前先看一眼手机状态栏，两个小动作能省掉后面大半步骤。</p>
      </div>

      <div class="faq-quick__grid">
        <ol class="faq-quick__list" data-reveal>
          <li class="faq-quick__item">
            <span class="faq-quick__num">01</span>
            <h3 class="faq-quick__name">看信号格与网络类型</h3>
            <p class="faq-quick__text">顶部状态栏信号格如果只剩一格，或者正在 Wi-Fi 与移动数据之间反复跳，先切到稳定的那一路再刷新一次。</p>
            <p class="faq-quick__hint">判断标准：换成另一条网络后能在 3 秒内打开，就属于网络波动，不用继续往下。</p>
          </li>
          <li class="faq-quick__item">
            <span class="faq-quick__num">02</span>
            <h3 class="faq-quick__name">确认地址有没有输全</h3>
            <p class="faq-quick__text">从聊天记录或笔记里复制过的地址，容易被自动补齐带上多余字符。重新手动输入一遍主域名，再看能否打开。</p>
            <p class="faq-quick__hint">判断标准：手动输入后正常显示，说明是复制来源的问题，把正确地址重新存一次书签即可。</p>
          </li>
          <li class="faq-quick__item">
            <span class="faq-quick__num">03</span>
            <h3 class="faq-quick__name">下拉刷新，别停在旧页面</h3>
            <p class="faq-quick__text">页面从后台切回来时常常停在缓存画面。在屏幕中部向下拉动触发刷新，或者关掉这个标签页重新进一次。</p>
            <p class="faq-quick__hint">判断标准：刷新后内容更新，就无需清理缓存，直接正常使用。</p>
          </li>
        </ol>

        <figure class="faq-quick__figure" data-reveal>
          <img src="{zhanqunpic:h:960w:720}" width="720" height="960" alt="深墨蓝底手机界面局部特写，顶部显示信号格标尺与下拉刷新动作示意" loading="lazy" decoding="async">
          <figcaption class="media__cap">信号格、网络类型与下拉动作都集中在屏幕顶部，先从这里看起。</figcaption>
        </figure>
      </div>

      <p class="faq-quick__foot">三项都做完仍然打不开？直接进入下面的五步排查，从第一步开始按顺序做。</p>
      <p class="faq-quick__cta">
        <a class="btn btn--primary" href="#five-steps">开始五步排查</a>
        <a class="btn btn--ghost" href="/platform/">查看版本通道说明</a>
      </p>
    </div>
  </section>

  <section class="faq-steps" id="five-steps" data-anchor-section aria-labelledby="faq-steps-title">
    <div class="shell">
      <div class="faq-steps__head" data-reveal>
        <p class="eyebrow">五步排查</p>
        <h2 id="faq-steps-title" class="section__title">内地访问异常排查五步</h2>
        <p class="section__lead">按顺序做，每一步都给出通过条件和没有通过时的下一步。做到第几步恢复了，就可以停在那里。</p>
      </div>

      <div class="faq-steps__layout">
        <figure class="faq-steps__figure" data-reveal>
          <img src="{zhanqunpic:h:1000w:720}" width="720" height="1000" alt="竖屏流程图，五个节点自上而下由箭头串联，第四个节点用暖橙圆点标记" loading="lazy" decoding="async">
          <figcaption class="media__cap">五个节点依次向下：网络、域名解析、缓存、版本通道、人工协助。</figcaption>
        </figure>

        <div class="faq-steps__flow">
          <div class="faq-step" data-reveal>
            <button class="faq-step__toggle" type="button" aria-expanded="true" aria-controls="step-panel-1" data-step-toggle>
              <span class="faq-step__index">01</span>
              <span class="faq-step__label">网络自检</span>
              <span class="faq-step__state" aria-hidden="true">已展开</span>
            </button>
            <div class="faq-step__panel" id="step-panel-1">
              <p class="faq-step__conclusion">目的：确认手机确实连得上外网，而不是只连上了路由器。</p>
              <ul class="faq-step__actions">
                <li>打开手机浏览器，访问任意一个常用网站，看能否正常显示。</li>
                <li>如果连着 Wi-Fi，切到移动数据再试一次；反过来也可以。</li>
                <li>游戏加速、代理类工具先关掉，它们会改变出口线路。</li>
              </ul>
              <p class="faq-step__check"><span class="faq-step__check-tag">通过条件</span>换一条网络后能在 3 秒内响应。满足就跳到第 04 步试版本通道。</p>
              <p class="faq-step__next">没通过：两条网络都不通，说明问题不在本站，检查套餐余量或路由器后再回来。</p>
            </div>
          </div>

          <div class="faq-step" data-reveal>
            <button class="faq-step__toggle" type="button" aria-expanded="false" aria-controls="step-panel-2" data-step-toggle>
              <span class="faq-step__index">02</span>
              <span class="faq-step__label">域名解析核对</span>
              <span class="faq-step__state" aria-hidden="true">点击展开</span>
            </button>
            <div class="faq-step__panel" id="step-panel-2" hidden>
              <p class="faq-step__conclusion">目的：排除手机本地解析结果过期，导致指向了错误地址。</p>
              <ul class="faq-step__actions">
                <li>在手机设置里找到「网络与互联网」，把当前网络先关闭再打开。</li>
                <li>如果长期没重启过手机，重启一次设备，让解析记录重新获取。</li>
                <li>部分安卓机型可在 Wi-Fi 高级设置里把 DNS 改为自动获取。</li>
              </ul>
              <p class="faq-step__check"><span class="faq-step__check-tag">通过条件</span>网络重连后第二次打开就正常显示。满足说明是解析缓存，无需再做后续步骤。</p>
              <p class="faq-step__next">没通过：连续刷新三次都是同一个提示，进入第 03 步清理浏览器缓存。</p>
            </div>
          </div>

          <div class="faq-step" data-reveal>
            <button class="faq-step__toggle" type="button" aria-expanded="false" aria-controls="step-panel-3" data-step-toggle>
              <span class="faq-step__index">03</span>
              <span class="faq-step__label">浏览器缓存清理</span>
              <span class="faq-step__state" aria-hidden="true">点击展开</span>
            </button>
            <div class="faq-step__panel" id="step-panel-3" hidden>
              <p class="faq-step__conclusion">目的：清掉旧版本的样式与脚本文件，避免新旧内容混在一起。</p>
              <ul class="faq-step__actions">
                <li>在浏览器菜单里选择「清除浏览数据」，勾选缓存文件与 Cookie。</li>
                <li>只清本站的缓存即可，不必清空全部网站数据。</li>
                <li>无痕窗口可以先做验证：用无痕模式打开，正常则确认是缓存问题。</li>
              </ul>
              <p class="faq-step__check"><span class="faq-step__check-tag">通过条件</span>清理后页面恢复整齐排版与正常滚动。满足即结束排查。</p>
              <p class="faq-step__next">没通过：页面仍然空白或停在加载中，进入第 04 步换一条版本通道。</p>
            </div>
          </div>

          <div class="faq-step faq-step--amber" data-reveal>
            <button class="faq-step__toggle" type="button" aria-expanded="false" aria-controls="step-panel-4" data-step-toggle>
              <span class="faq-step__index">04</span>
              <span class="faq-step__label">版本通道切换</span>
              <span class="faq-step__state" aria-hidden="true">点击展开</span>
            </button>
            <div class="faq-step__panel" id="step-panel-4" hidden>
              <p class="faq-step__conclusion">目的：在弱网或夜间线路拥塞时，用更省流量的通道把页面拉起来。</p>
              <ul class="faq-step__actions">
                <li>打开 <a href="/platform/">平台服务</a>，在版本通道里选择「轻量版」。</li>
                <li>弱网环境下轻量版可减少约 40% 的数据传输量，打开更快。</li>
                <li>切换后等 <span class="mono">8</span> 秒左右，再手动刷新一次页面。</li>
              </ul>
              <p class="faq-step__check"><span class="faq-step__check-tag">通过条件</span>8 秒内整页加载完成并且可以正常滚动。满足后先留在这个通道，等网络好转再切回去。</p>
              <p class="faq-step__next">没通过：见下方「切换后没生效怎么办」一节；仍无效则进入第 05 步。</p>
            </div>
          </div>

          <div class="faq-step faq-step--amber" data-reveal>
            <button class="faq-step__toggle" type="button" aria-expanded="false" aria-controls="step-panel-5" data-step-toggle>
              <span class="faq-step__index">05</span>
              <span class="faq-step__label">人工协助</span>
              <span class="faq-step__state" aria-hidden="true">点击展开</span>
            </button>
            <div class="faq-step__panel" id="step-panel-5" hidden>
              <p class="faq-step__conclusion">目的：把已经做过的步骤交给客服，缩短定位时间。</p>
              <ul class="faq-step__actions">
                <li>写清楚手机型号、系统版本与使用的浏览器名称。</li>
                <li>说明卡在哪一步、看到什么提示，尽量附上截图。</li>
                <li>发送到 <a href="/consult/">咨询服务</a> 页面列出的官方渠道。</li>
              </ul>
              <p class="faq-step__check"><span class="faq-step__check-tag">响应时效</span>工作日 9:00–18:00（北京时间）优先回复，工单平均 4 小时内首次响应。</p>
              <p class="faq-step__next">复杂情况平均 1.5 个工作日给出结论，期间无需重复提交。</p>
            </div>
          </div>

          <p class="faq-steps__tools">
            <button class="btn btn--ghost" type="button" data-copy-steps>复制五步清单</button>
            <span class="faq-steps__tools-note">复制成纯文本，方便转给同事或家人照着做。</span>
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-switch" aria-labelledby="faq-switch-title">
    <div class="shell">
      <div class="faq-switch__box" data-reveal>
        <p class="eyebrow">版本通道</p>
        <h2 id="faq-switch-title" class="section__title">切换后没生效怎么办</h2>
        <p class="faq-switch__lead">
          常规版、稳定版、轻量版三条通道切换后通常在 <span class="mono">8</span> 秒内生效。切换动作本身很快，
          慢的是手机把旧页面放掉、重新取一次新资源。
        </p>
        <ol class="faq-switch__list">
          <li><span class="mono">01</span> 切完先别急着连点，给页面留 8 秒左右。</li>
          <li><span class="mono">02</span> 手动下拉刷新一次，让浏览器重新请求。</li>
          <li><span class="mono">03</span> 仍显示旧样式，关掉标签页重开一个新窗口。</li>
          <li><span class="mono">04</span> 用了省电模式或极端省流设置时，先临时关闭再切一次。</li>
        </ol>
        <p class="faq-switch__note">
          超过 <span class="mono">30</span> 秒还是旧样子，多半是缓存没放掉。回到第 03 步清理缓存后重试，或者把情况提交到咨询服务。
        </p>
      </div>
    </div>
  </section>

  <section class="faq-scan" aria-labelledby="faq-scan-title">
    <div class="shell">
      <div class="faq-scan__head" data-reveal>
        <p class="eyebrow">小屏浏览</p>
        <h2 id="faq-scan-title" class="section__title">小屏设备上的常见疑问</h2>
        <p class="section__lead">手机屏幕窄、握持姿势多变、夜里看屏幕时间长，这些问题大多在系统或浏览器里就能调好。</p>
      </div>

      <ul class="faq-scan__grid">
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">字看着偏小，要一直放大</h3>
          <p class="faq-scan__a">在浏览器的「字体大小」里调到 110%–120%，页面会整体放大且保持排版不乱；不要用双指把局部撑大，那样容易左右滑动。</p>
        </li>
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">横竖屏切换后位置跑掉了</h3>
          <p class="faq-scan__a">旋转屏幕后页面会重新计算宽度，建议转完之后再滚动一次。阅读长文时锁定竖屏更稳，也省电。</p>
        </li>
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">深色模式下界面偏暗看不清</h3>
          <p class="faq-scan__a">本站底色本身就是深墨蓝，若系统再叠一层深色滤镜会更闷。可在系统显示设置里关掉「增强对比度」，或把亮度调高两格。</p>
        </li>
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">夜间看一会儿眼睛发酸</h3>
          <p class="faq-scan__a">开启系统的护眼或夜间模式，再把浏览器的自动亮度关掉，避免屏幕在明暗之间反复跳。长文建议一次读两三屏就歇一会儿。</p>
        </li>
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">页面滚动发涩、卡顿</h3>
          <p class="faq-scan__a">先在后台关掉其他标签页，把内存腾出来；如果只是某个页面卡，切到轻量版通道一般就顺畅了。</p>
        </li>
        <li class="faq-scan__card" data-reveal>
          <h3 class="faq-scan__q">自己的机型在不在适配范围内</h3>
          <p class="faq-scan__a">小屏设备兼容性对照覆盖 42 款主流机型、6 个系统版本区间与 5 类浏览器内核，可在平台服务页按机型与系统版本查看。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="faq-index" aria-labelledby="faq-index-title">
    <div class="shell">
      <div class="faq-index__box" data-reveal>
        <div class="faq-index__col">
          <p class="eyebrow">检索核对</p>
          <h2 id="faq-index-title" class="section__title">检索结果对不上怎么办</h2>
          <p class="faq-index__lead">
            检索结果来自已经建好的索引，内容发布到索引生效之间会有一小段时间差。刚发布的公告短时间内搜不到，属于正常情况。
          </p>
        </div>
        <div class="faq-index__col">
          <ol class="faq-index__list">
            <li>
              <span class="faq-index__num">01</span>
              <div>
                <h3 class="faq-index__h">先看索引时间</h3>
                <p>首页状态核对条里的「检索索引」一栏可以直接展开，看到最近一次索引更新的时间点。</p>
              </div>
            </li>
            <li>
              <span class="faq-index__num">02</span>
              <div>
                <h3 class="faq-index__h">换个词再搜一次</h3>
                <p>标题匹配最准，正文匹配最全。用关键词换成更短的核心词，通常能捞到更完整的条目。</p>
              </div>
            </li>
            <li>
              <span class="faq-index__num">03</span>
              <div>
                <h3 class="faq-index__h">对照公告时间线</h3>
                <p>到<a href="/insights/">更新公告</a>按时间顺序看最近几条，能确认某条内容是否已经发布。</p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-help" aria-labelledby="faq-help-title">
    <div class="shell">
      <div class="faq-help__box" data-reveal>
        <p class="eyebrow">人工协助</p>
        <h2 id="faq-help-title" class="section__title">还没解决，把情况交给我们</h2>
        <p class="faq-help__lead">
          自助流程走完还是不通，直接把过程发过来。带上手机型号、系统版本、浏览器名称，以及卡住的步骤编号，
          客服就能少问几轮、更快给出结论。
        </p>
        <div class="faq-help__grid">
          <div class="faq-help__cell">
            <span class="index-label">响应安排</span>
            <p>工作日 9:00–18:00（北京时间）优先回复，工单平均 <span class="mono">4</span> 小时内首次响应，复杂排查问题平均 <span class="mono">1.5</span> 个工作日给出结论。</p>
          </div>
          <div class="faq-help__cell">
            <span class="index-label">建议附上</span>
            <p>出现问题的页面地址、卡在第几步、屏幕上的提示文字或截图，以及当时用的是 Wi-Fi 还是移动数据。</p>
          </div>
          <div class="faq-help__cell">
            <span class="index-label">还可以看</span>
            <p><a href="/platform/">平台服务</a>了解三条版本通道的差异，<a href="/insights/">更新公告</a>查看最近的检索规则与收录变化。</p>
          </div>
        </div>
        <p class="faq-help__cta">
          <a class="btn btn--amber" href="/consult/">前往咨询服务</a>
          <a class="btn btn--ghost" href="#five-steps">回到五步排查</a>
        </p>
      </div>
    </div>
  </section>

  <button class="to-top" type="button" data-to-top aria-label="返回页面顶部">返回顶部</button>

</main>

.page-faq {
  --faq-gap: clamp(1.25rem, 3.5vw, 2.25rem);
  --faq-track: clamp(2.6rem, 8vw, 4rem);
}

.page-faq .faq-hero {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 200, .14) 0%, rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(19, 41, 79, .55) 0%, rgba(10, 20, 40, 0) 78%);
}
.page-faq .faq-hero__inner {
  display: grid;
  gap: .9rem;
  position: relative;
}
.page-faq .faq-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.4rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(0, 229, 200, 0) 82%);
  opacity: .7;
  display: none;
}
.page-faq .faq-hero__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 7.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.85;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .4rem;
}
.page-faq .faq-hero__meta .index-label {
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}
.page-faq .faq-hero__meta .index-label:first-child {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}

.page-faq .faq-quick {
  padding-block: var(--pad-y);
}
.page-faq .faq-quick__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-quick__grid {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-quick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-quick__item {
  padding: 1.15rem 1.15rem 1.15rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-md);
}
.page-faq .faq-quick__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan);
  display: block;
  margin-bottom: .35rem;
}
.page-faq .faq-quick__name {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  color: var(--text);
}
.page-faq .faq-quick__text {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-quick__hint {
  margin: .65rem 0 0;
  padding: .5rem .7rem;
  background: rgba(255, 196, 138, .12);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--amber-soft);
  font-size: .86rem;
  line-height: 1.7;
}
.page-faq .faq-quick__figure {
  margin: 0;
}
.page-faq .faq-quick__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.page-faq .faq-quick__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-quick__foot {
  margin: var(--faq-gap) 0 0;
  color: var(--text);
  font-size: .98rem;
}
.page-faq .faq-quick__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .9rem 0 0;
}

.page-faq .faq-steps {
  padding-block: var(--pad-y);
  background: linear-gradient(180deg, rgba(15, 31, 61, .7) 0%, rgba(10, 20, 40, 0) 100%);
  border-top: 1px solid var(--line);
}
.page-faq .faq-steps__head {
  max-width: 64ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-steps__layout {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-steps__figure {
  margin: 0;
  order: 2;
}
.page-faq .faq-steps__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 18 / 25;
}
.page-faq .faq-steps__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-steps__flow {
  order: 1;
  display: grid;
  gap: .75rem;
}
.page-faq .faq-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .24s var(--ease), background-color .24s var(--ease);
}
.page-faq .faq-step.is-open {
  border-color: rgba(0, 229, 200, .55);
  background: var(--panel-2);
}
.page-faq .faq-step--amber.is-open {
  border-color: rgba(255, 138, 61, .55);
}
.page-faq .faq-step__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.page-faq .faq-step__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}
.page-faq .faq-step__index {
  flex: 0 0 auto;
  width: var(--faq-track);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .06em;
  border-right: 1px solid var(--line);
  padding-right: .6rem;
  transition: color .24s var(--ease);
}
.page-faq .faq-step.is-open .faq-step__index {
  color: var(--cyan);
}
.page-faq .faq-step--amber.is-open .faq-step__index {
  color: var(--amber);
}
.page-faq .faq-step__label {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
}
.page-faq .faq-step__state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
  white-space: nowrap;
}
.page-faq .faq-step.is-open .faq-step__state {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}
.page-faq .faq-step__panel {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px dashed var(--line);
  margin-top: -.25rem;
}
.page-faq .faq-step__panel[hidden] {
  display: none;
}
.page-faq .faq-step__conclusion {
  margin: 0 0 .7rem;
  color: var(--cyan-soft);
  font-size: .92rem;
}
.page-faq .faq-step--amber .faq-step__conclusion {
  color: var(--amber-soft);
}
.page-faq .faq-step__actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}
.page-faq .faq-step__actions li {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-step__actions a {
  color: var(--cyan);
}
.page-faq .faq-step__check {
  margin: .85rem 0 0;
  padding: .6rem .75rem;
  background: rgba(255, 196, 138, .12);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.7;
}
.page-faq .faq-step__check-tag {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid rgba(255, 138, 61, .5);
  border-radius: var(--r-pill);
  padding: .12rem .5rem;
}
.page-faq .faq-step__next {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}
.page-faq .faq-steps__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 0;
}
.page-faq .faq-steps__tools-note {
  color: var(--muted);
  font-size: .84rem;
}
.page-faq .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.page-faq .faq-switch {
  padding-block: var(--pad-y);
}
.page-faq .faq-switch__box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  max-width: 76ch;
}
.page-faq .faq-switch__lead {
  margin: .6rem 0 1rem;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-switch__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}
.page-faq .faq-switch__list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.75;
}
.page-faq .faq-switch__list .mono {
  flex: 0 0 auto;
  font-size: .82rem;
  color: var(--amber);
}
.page-faq .faq-switch__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

.page-faq .faq-scan {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--line);
}
.page-faq .faq-scan__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-scan__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-scan__card {
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.page-faq .faq-scan__card:hover {
  border-color: rgba(183, 156, 255, .45);
  transform: translateY(-2px);
}
.page-faq .faq-scan__q {
  margin: 0 0 .45rem;
  font-size: 1rem;
  color: var(--violet);
  line-height: 1.5;
}
.page-faq .faq-scan__a {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}

.page-faq .faq-index {
  padding-block: var(--pad-y);
}
.page-faq .faq-index__box {
  display: grid;
  gap: var(--faq-gap);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: linear-gradient(120deg, rgba(19, 41, 79, .85) 0%, rgba(15, 31, 61, .6) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.page-faq .faq-index__lead {
  margin: .6rem 0 0;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.page-faq .faq-index__list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.page-faq .faq-index__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  border: 1px solid rgba(183, 156, 255, .4);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  line-height: 1.6;
}
.page-faq .faq-index__h {
  margin: 0 0 .3rem;
  font-size: .98rem;
  color: var(--text);
}
.page-faq .faq-index__list p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}
.page-faq .faq-index__list a {
  color: var(--cyan);
}

.page-faq .faq-help {
  padding-block: 0 var(--pad-y);
}
.page-faq .faq-help__box {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 138, 61, .35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 138, 61, .16) 0%, rgba(10, 20, 40, 0) 65%),
    var(--panel);
}
.page-faq .faq-help__lead {
  margin: .6rem 0 1.4rem;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-help__grid {
  display: grid;
  gap: .9rem;
}
.page-faq .faq-help__cell {
  padding: 1rem 1.1rem;
  background: rgba(10, 20, 40, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.page-faq .faq-help__cell .index-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--amber);
}
.page-faq .faq-help__cell p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.8;
}
.page-faq .faq-help__cell a {
  color: var(--cyan);
}
.page-faq .faq-help__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.4rem 0 0;
}

@media (min-width: 768px) {
  .page-faq .faq-hero__inner {
    padding-left: 1.6rem;
  }
  .page-faq .faq-hero__inner::before {
    display: block;
  }
  .page-faq .faq-quick__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-quick__figure {
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: translateY(1.1rem);
  }
  .page-faq .faq-index__box {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-steps__layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-steps__figure {
    order: 0;
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-steps__flow {
    order: 0;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: none;
  }
  .page-faq .faq-scan__card:nth-child(3n + 2) {
    transform: translateY(1.2rem);
  }
}
<<<END>>>

.page-faq {
  --faq-gap: clamp(1.25rem, 3.5vw, 2.25rem);
  --faq-track: clamp(2.6rem, 8vw, 4rem);
}

.page-faq .faq-hero {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 200, .14) 0%, rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(19, 41, 79, .55) 0%, rgba(10, 20, 40, 0) 78%);
}
.page-faq .faq-hero__inner {
  display: grid;
  gap: .9rem;
  position: relative;
}
.page-faq .faq-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.4rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(0, 229, 200, 0) 82%);
  opacity: .7;
  display: none;
}
.page-faq .faq-hero__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 7.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.85;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .4rem;
}
.page-faq .faq-hero__meta .index-label {
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}
.page-faq .faq-hero__meta .index-label:first-child {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}

.page-faq .faq-quick {
  padding-block: var(--pad-y);
}
.page-faq .faq-quick__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-quick__grid {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-quick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-quick__item {
  padding: 1.15rem 1.15rem 1.15rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-md);
}
.page-faq .faq-quick__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan);
  display: block;
  margin-bottom: .35rem;
}
.page-faq .faq-quick__name {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  color: var(--text);
}
.page-faq .faq-quick__text {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-quick__hint {
  margin: .65rem 0 0;
  padding: .5rem .7rem;
  background: rgba(255, 196, 138, .12);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--amber-soft);
  font-size: .86rem;
  line-height: 1.7;
}
.page-faq .faq-quick__figure {
  margin: 0;
}
.page-faq .faq-quick__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.page-faq .faq-quick__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-quick__foot {
  margin: var(--faq-gap) 0 0;
  color: var(--text);
  font-size: .98rem;
}
.page-faq .faq-quick__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .9rem 0 0;
}

.page-faq .faq-steps {
  padding-block: var(--pad-y);
  background: linear-gradient(180deg, rgba(15, 31, 61, .7) 0%, rgba(10, 20, 40, 0) 100%);
  border-top: 1px solid var(--line);
}
.page-faq .faq-steps__head {
  max-width: 64ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-steps__layout {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-steps__figure {
  margin: 0;
  order: 2;
}
.page-faq .faq-steps__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 18 / 25;
}
.page-faq .faq-steps__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-steps__flow {
  order: 1;
  display: grid;
  gap: .75rem;
}
.page-faq .faq-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .24s var(--ease), background-color .24s var(--ease);
}
.page-faq .faq-step.is-open {
  border-color: rgba(0, 229, 200, .55);
  background: var(--panel-2);
}
.page-faq .faq-step--amber.is-open {
  border-color: rgba(255, 138, 61, .55);
}
.page-faq .faq-step__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.page-faq .faq-step__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}
.page-faq .faq-step__index {
  flex: 0 0 auto;
  width: var(--faq-track);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .06em;
  border-right: 1px solid var(--line);
  padding-right: .6rem;
  transition: color .24s var(--ease);
}
.page-faq .faq-step.is-open .faq-step__index {
  color: var(--cyan);
}
.page-faq .faq-step--amber.is-open .faq-step__index {
  color: var(--amber);
}
.page-faq .faq-step__label {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
}
.page-faq .faq-step__state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
  white-space: nowrap;
}
.page-faq .faq-step.is-open .faq-step__state {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}
.page-faq .faq-step__panel {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px dashed var(--line);
  margin-top: -.25rem;
}
.page-faq .faq-step__panel[hidden] {
  display: none;
}
.page-faq .faq-step__conclusion {
  margin: 0 0 .7rem;
  color: var(--cyan-soft);
  font-size: .92rem;
}
.page-faq .faq-step--amber .faq-step__conclusion {
  color: var(--amber-soft);
}
.page-faq .faq-step__actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}
.page-faq .faq-step__actions li {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-step__actions a {
  color: var(--cyan);
}
.page-faq .faq-step__check {
  margin: .85rem 0 0;
  padding: .6rem .75rem;
  background: rgba(255, 196, 138, .12);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.7;
}
.page-faq .faq-step__check-tag {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid rgba(255, 138, 61, .5);
  border-radius: var(--r-pill);
  padding: .12rem .5rem;
}
.page-faq .faq-step__next {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}
.page-faq .faq-steps__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 0;
}
.page-faq .faq-steps__tools-note {
  color: var(--muted);
  font-size: .84rem;
}
.page-faq .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.page-faq .faq-switch {
  padding-block: var(--pad-y);
}
.page-faq .faq-switch__box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  max-width: 76ch;
}
.page-faq .faq-switch__lead {
  margin: .6rem 0 1rem;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-switch__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}
.page-faq .faq-switch__list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.75;
}
.page-faq .faq-switch__list .mono {
  flex: 0 0 auto;
  font-size: .82rem;
  color: var(--amber);
}
.page-faq .faq-switch__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

.page-faq .faq-scan {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--line);
}
.page-faq .faq-scan__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-scan__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-scan__card {
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.page-faq .faq-scan__card:hover {
  border-color: rgba(183, 156, 255, .45);
  transform: translateY(-2px);
}
.page-faq .faq-scan__q {
  margin: 0 0 .45rem;
  font-size: 1rem;
  color: var(--violet);
  line-height: 1.5;
}
.page-faq .faq-scan__a {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}

.page-faq .faq-index {
  padding-block: var(--pad-y);
}
.page-faq .faq-index__box {
  display: grid;
  gap: var(--faq-gap);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: linear-gradient(120deg, rgba(19, 41, 79, .85) 0%, rgba(15, 31, 61, .6) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.page-faq .faq-index__lead {
  margin: .6rem 0 0;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.page-faq .faq-index__list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.page-faq .faq-index__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  border: 1px solid rgba(183, 156, 255, .4);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  line-height: 1.6;
}
.page-faq .faq-index__h {
  margin: 0 0 .3rem;
  font-size: .98rem;
  color: var(--text);
}
.page-faq .faq-index__list p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}
.page-faq .faq-index__list a {
  color: var(--cyan);
}

.page-faq .faq-help {
  padding-block: 0 var(--pad-y);
}
.page-faq .faq-help__box {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 138, 61, .35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 138, 61, .16) 0%, rgba(10, 20, 40, 0) 65%),
    var(--panel);
}
.page-faq .faq-help__lead {
  margin: .6rem 0 1.4rem;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-help__grid {
  display: grid;
  gap: .9rem;
}
.page-faq .faq-help__cell {
  padding: 1rem 1.1rem;
  background: rgba(10, 20, 40, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.page-faq .faq-help__cell .index-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--amber);
}
.page-faq .faq-help__cell p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.8;
}
.page-faq .faq-help__cell a {
  color: var(--cyan);
}
.page-faq .faq-help__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.4rem 0 0;
}

@media (min-width: 768px) {
  .page-faq .faq-hero__inner {
    padding-left: 1.6rem;
  }
  .page-faq .faq-hero__inner::before {
    display: block;
  }
  .page-faq .faq-quick__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-quick__figure {
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: translateY(1.1rem);
  }
  .page-faq .faq-index__box {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-steps__layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-steps__figure {
    order: 0;
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-steps__flow {
    order: 0;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: none;
  }
  .page-faq .faq-scan__card:nth-child(3n + 2) {
    transform: translateY(1.2rem);
  }
}
<<<END>>>

.page-faq {
  --faq-gap: clamp(1.25rem, 3.5vw, 2.25rem);
  --faq-track: clamp(2.6rem, 8vw, 4rem);
}

.page-faq .faq-hero {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 229, 200, .14) 0%, rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(19, 41, 79, .55) 0%, rgba(10, 20, 40, 0) 78%);
}
.page-faq .faq-hero__inner {
  display: grid;
  gap: .9rem;
  position: relative;
}
.page-faq .faq-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.4rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(0, 229, 200, 0) 82%);
  opacity: .7;
  display: none;
}
.page-faq .faq-hero__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 7.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.85;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .4rem;
}
.page-faq .faq-hero__meta .index-label {
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}
.page-faq .faq-hero__meta .index-label:first-child {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}

.page-faq .faq-quick {
  padding-block: var(--pad-y);
}
.page-faq .faq-quick__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-quick__grid {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-quick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-quick__item {
  padding: 1.15rem 1.15rem 1.15rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-md);
}
.page-faq .faq-quick__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan);
  display: block;
  margin-bottom: .35rem;
}
.page-faq .faq-quick__name {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  color: var(--text);
}
.page-faq .faq-quick__text {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-quick__hint {
  margin: .65rem 0 0;
  padding: .5rem .7rem;
  background: rgba(255, 196, 138, .12);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--amber-soft);
  font-size: .86rem;
  line-height: 1.7;
}
.page-faq .faq-quick__figure {
  margin: 0;
}
.page-faq .faq-quick__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.page-faq .faq-quick__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-quick__foot {
  margin: var(--faq-gap) 0 0;
  color: var(--text);
  font-size: .98rem;
}
.page-faq .faq-quick__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .9rem 0 0;
}

.page-faq .faq-steps {
  padding-block: var(--pad-y);
  background: linear-gradient(180deg, rgba(15, 31, 61, .7) 0%, rgba(10, 20, 40, 0) 100%);
  border-top: 1px solid var(--line);
}
.page-faq .faq-steps__head {
  max-width: 64ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-steps__layout {
  display: grid;
  gap: var(--faq-gap);
}
.page-faq .faq-steps__figure {
  margin: 0;
  order: 2;
}
.page-faq .faq-steps__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 18 / 25;
}
.page-faq .faq-steps__figure .media__cap {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.page-faq .faq-steps__flow {
  order: 1;
  display: grid;
  gap: .75rem;
}
.page-faq .faq-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .24s var(--ease), background-color .24s var(--ease);
}
.page-faq .faq-step.is-open {
  border-color: rgba(0, 229, 200, .55);
  background: var(--panel-2);
}
.page-faq .faq-step--amber.is-open {
  border-color: rgba(255, 138, 61, .55);
}
.page-faq .faq-step__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.page-faq .faq-step__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}
.page-faq .faq-step__index {
  flex: 0 0 auto;
  width: var(--faq-track);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .06em;
  border-right: 1px solid var(--line);
  padding-right: .6rem;
  transition: color .24s var(--ease);
}
.page-faq .faq-step.is-open .faq-step__index {
  color: var(--cyan);
}
.page-faq .faq-step--amber.is-open .faq-step__index {
  color: var(--amber);
}
.page-faq .faq-step__label {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
}
.page-faq .faq-step__state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
  white-space: nowrap;
}
.page-faq .faq-step.is-open .faq-step__state {
  color: var(--cyan);
  border-color: rgba(0, 229, 200, .5);
}
.page-faq .faq-step__panel {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px dashed var(--line);
  margin-top: -.25rem;
}
.page-faq .faq-step__panel[hidden] {
  display: none;
}
.page-faq .faq-step__conclusion {
  margin: 0 0 .7rem;
  color: var(--cyan-soft);
  font-size: .92rem;
}
.page-faq .faq-step--amber .faq-step__conclusion {
  color: var(--amber-soft);
}
.page-faq .faq-step__actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}
.page-faq .faq-step__actions li {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.75;
}
.page-faq .faq-step__actions a {
  color: var(--cyan);
}
.page-faq .faq-step__check {
  margin: .85rem 0 0;
  padding: .6rem .75rem;
  background: rgba(255, 196, 138, .12);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.7;
}
.page-faq .faq-step__check-tag {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid rgba(255, 138, 61, .5);
  border-radius: var(--r-pill);
  padding: .12rem .5rem;
}
.page-faq .faq-step__next {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}
.page-faq .faq-steps__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 0;
}
.page-faq .faq-steps__tools-note {
  color: var(--muted);
  font-size: .84rem;
}
.page-faq .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.page-faq .faq-switch {
  padding-block: var(--pad-y);
}
.page-faq .faq-switch__box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  max-width: 76ch;
}
.page-faq .faq-switch__lead {
  margin: .6rem 0 1rem;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-switch__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}
.page-faq .faq-switch__list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.75;
}
.page-faq .faq-switch__list .mono {
  flex: 0 0 auto;
  font-size: .82rem;
  color: var(--amber);
}
.page-faq .faq-switch__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

.page-faq .faq-scan {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--line);
}
.page-faq .faq-scan__head {
  max-width: 62ch;
  margin-bottom: var(--faq-gap);
}
.page-faq .faq-scan__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.page-faq .faq-scan__card {
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.page-faq .faq-scan__card:hover {
  border-color: rgba(183, 156, 255, .45);
  transform: translateY(-2px);
}
.page-faq .faq-scan__q {
  margin: 0 0 .45rem;
  font-size: 1rem;
  color: var(--violet);
  line-height: 1.5;
}
.page-faq .faq-scan__a {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}

.page-faq .faq-index {
  padding-block: var(--pad-y);
}
.page-faq .faq-index__box {
  display: grid;
  gap: var(--faq-gap);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: linear-gradient(120deg, rgba(19, 41, 79, .85) 0%, rgba(15, 31, 61, .6) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.page-faq .faq-index__lead {
  margin: .6rem 0 0;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.page-faq .faq-index__list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.page-faq .faq-index__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  border: 1px solid rgba(183, 156, 255, .4);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  line-height: 1.6;
}
.page-faq .faq-index__h {
  margin: 0 0 .3rem;
  font-size: .98rem;
  color: var(--text);
}
.page-faq .faq-index__list p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}
.page-faq .faq-index__list a {
  color: var(--cyan);
}

.page-faq .faq-help {
  padding-block: 0 var(--pad-y);
}
.page-faq .faq-help__box {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 138, 61, .35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 138, 61, .16) 0%, rgba(10, 20, 40, 0) 65%),
    var(--panel);
}
.page-faq .faq-help__lead {
  margin: .6rem 0 1.4rem;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.85;
}
.page-faq .faq-help__grid {
  display: grid;
  gap: .9rem;
}
.page-faq .faq-help__cell {
  padding: 1rem 1.1rem;
  background: rgba(10, 20, 40, .55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.page-faq .faq-help__cell .index-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--amber);
}
.page-faq .faq-help__cell p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.8;
}
.page-faq .faq-help__cell a {
  color: var(--cyan);
}
.page-faq .faq-help__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.4rem 0 0;
}

@media (min-width: 768px) {
  .page-faq .faq-hero__inner {
    padding-left: 1.6rem;
  }
  .page-faq .faq-hero__inner::before {
    display: block;
  }
  .page-faq .faq-quick__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-quick__figure {
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: translateY(1.1rem);
  }
  .page-faq .faq-index__box {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-steps__layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .page-faq .faq-steps__figure {
    order: 0;
    position: sticky;
    top: 6rem;
  }
  .page-faq .faq-steps__flow {
    order: 0;
  }
  .page-faq .faq-scan__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-scan__card:nth-child(even) {
    transform: none;
  }
  .page-faq .faq-scan__card:nth-child(3n + 2) {
    transform: translateY(1.2rem);
  }
}
<<<END>>>
