.page-faq {
  color: var(--chalk);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-faq a {
  color: inherit;
}

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

/* 首屏 */
.page-faq .faq-hero {
  padding-block: clamp(22px, 4vw, 40px) clamp(30px, 5vw, 56px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 30px;
}

.page-faq .faq-hero__copy h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 10px 0 18px;
  max-width: 15ch;
}

.page-faq .faq-hero__copy .lede {
  max-width: 46ch;
  color: var(--mist);
}

.page-faq .faq-hero__copy .btn-row {
  margin-top: 24px;
}

.page-faq .faq-hero__figure {
  margin: 0;
  position: relative;
  background: var(--stand);
  border: 1px solid var(--line-strong);
  padding: 10px 10px 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid var(--lime);
}

.page-faq .faq-hero__figure figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
  padding: 10px 2px 14px;
}

/* 双栏骨架 */
.page-faq .guide-layout {
  display: grid;
  gap: 26px;
}

.page-faq .toc {
  background: var(--stand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  padding: 18px 18px 20px;
}

.page-faq .toc__title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--lime);
  margin: 0 0 14px;
}

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

.page-faq .toc__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 8px 9px 0;
  border-bottom: 1px dashed var(--line);
  text-decoration: none;
  font-size: 15px;
  color: var(--chalk);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}

.page-faq .toc__list a .num {
  font-size: 12px;
  color: var(--pitch);
}

.page-faq .toc__list a:hover,
.page-faq .toc__list a:focus-visible {
  color: var(--lime);
  background: rgba(221, 242, 71, .07);
}

.page-faq .toc__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist);
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.page-faq .toc__note .num {
  color: var(--chalk);
}

/* 分组 */
.page-faq .g-block {
  padding-top: 8px;
  scroll-margin-top: 96px;
}

.page-faq .g-block + .g-block {
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 1px solid var(--line-strong);
}

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

.page-faq .g-head__num {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  border-radius: var(--radius);
}

.page-faq .g-head h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 4vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

.page-faq .g-intro {
  margin: 12px 0 20px;
  color: var(--mist);
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.75;
}

/* 路径示意 */
.page-faq .route-map {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
  background: linear-gradient(120deg, rgba(47, 125, 78, .28), rgba(11, 31, 24, .1));
  border-left: 3px solid var(--pitch);
}

.page-faq .route-map li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chalk);
  flex-wrap: wrap;
}

.page-faq .route-map__step {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  background: var(--chalk);
  color: var(--ink);
  border-radius: 50%;
  flex: none;
}

.page-faq .route-map__desc {
  font-weight: 400;
  font-size: 13px;
  color: var(--mist);
}

.page-faq .route-map li + li::before {
  content: "↳";
  color: var(--lime);
  font-size: 14px;
  margin-right: 2px;
}

.page-faq .g-figure {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  background: var(--stand);
  padding: 8px;
}

.page-faq .g-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.page-faq .g-figure figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
  padding: 10px 4px 4px;
}

/* 问答手风琴 */
.page-faq .qa-stack {
  border-top: 1px solid var(--line-strong);
}

.page-faq .qa {
  border-bottom: 1px solid var(--line);
  background: rgba(18, 58, 42, .35);
  transition: background 180ms var(--ease);
}

.page-faq .qa[open] {
  background: rgba(18, 58, 42, .8);
}

.page-faq .qa__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--chalk);
  position: relative;
  transition: color 160ms var(--ease);
}

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

.page-faq .qa__q::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 18px;
  line-height: 1;
  color: var(--pitch);
  transition: color 160ms var(--ease), transform 180ms var(--ease);
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
  color: var(--lime);
}

.page-faq .qa__q:hover {
  color: var(--lime);
}

.page-faq .qa__q:focus-visible {
  outline: 2px solid var(--mist);
  outline-offset: -2px;
  box-shadow: inset 4px 0 0 var(--lime);
}

.page-faq .qa__num {
  font-size: 11px;
  color: var(--pitch);
  flex: none;
  padding-top: 2px;
}

.page-faq .qa[open] .qa__num {
  color: var(--lime);
}

.page-faq .qa__a {
  padding: 0 16px 18px 16px;
  border-left: 2px solid var(--lime);
  margin: 0 14px 0 26px;
  padding-left: 14px;
}

.page-faq .qa__a p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 62ch;
}

.page-faq .qa__a .num {
  color: var(--chalk);
}

.page-faq .qa__a .link-arrow {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 结尾引导 */
.page-faq .faq-cta {
  margin-top: 28px;
  padding: 22px 20px;
  display: grid;
  gap: 18px;
  background: linear-gradient(115deg, var(--stand), rgba(11, 31, 24, .55));
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.page-faq .faq-cta__title {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--chalk);
}

.page-faq .faq-cta__text p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
  max-width: 58ch;
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 54px;
  }

  .page-faq .faq-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 26px 28px;
  }

  .page-faq .faq-cta .btn-row {
    justify-content: flex-end;
  }
}

@media (min-width: 980px) {
  .page-faq .guide-layout {
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }

  .page-faq .toc {
    position: sticky;
    top: 92px;
  }

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

  .page-faq .route-map li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-faq .route-map li + li::before {
    display: none;
  }

  .page-faq .qa__q {
    padding: 18px 18px;
    font-size: 16px;
  }

  .page-faq .qa__a {
    margin-left: 30px;
    padding: 0 18px 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .toc__list a {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">看台首页</a></li>
        <li aria-current="page">使用指南</li>
      </ol>
    </nav>

    <header class="faq-hero">
      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="eyebrow">上手问答 · 五个动作</p>
          <h1>第一次进来，先学会筛一场比赛</h1>
          <p class="lede">新记看台每天把赛事动态、积分榜和伤停转会摆在一起，你只需要知道自己想找哪一场。下面按上手顺序列了五组问题：先进场、再筛选、然后收藏、数据有疑问怎么提，最后是找谁。</p>
          <div class="btn-row">
            <a class="btn btn--lime" href="#start">从第一个问题看起</a>
            <a class="btn btn--ghost" href="/platform/">直接去工具页</a>
          </div>
        </div>
        <figure class="faq-hero__figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="战术板上的编号卡片与箭头示意，纸面米白底配荧光黄标记" decoding="async">
          <figcaption>编号对应左侧问题目录，点开任意一条即展开答案。</figcaption>
        </figure>
      </div>
    </header>

    <div class="guide-layout">
      <aside class="toc" aria-label="问题目录">
        <p class="toc__title">问题目录</p>
        <ol class="toc__list">
          <li><a href="#start"><span class="num">01</span>第一次使用</a></li>
          <li><a href="#filter"><span class="num">02</span>筛选与轮次</a></li>
          <li><a href="#collect"><span class="num">03</span>收藏与回看</a></li>
          <li><a href="#fix"><span class="num">04</span>数据纠错</a></li>
          <li><a href="#contact-before"><span class="num">05</span>联系之前</a></li>
        </ol>
        <p class="toc__note">客服邮箱 <span class="num">kefu@arena-xinji.com.cn</span><br>工作日 <span class="num">9:00-18:00</span> 轮值回复</p>
      </aside>

      <div class="guide-body">
        <section class="g-block" id="start">
          <div class="g-head">
            <span class="g-head__num num">01</span>
            <h2>第一次使用从哪开始</h2>
          </div>
          <p class="g-intro">路径很短：首页认位置，赛事专栏认时间，工具页认条件。走一遍就能自己找到想看的那一场。</p>

          <ol class="route-map" aria-label="上手路径">
            <li><span class="route-map__step num">A</span>看台首页<span class="route-map__desc">积分榜与伤停转会左右并排</span></li>
            <li><span class="route-map__step num">B</span>赛事专栏<span class="route-map__desc">按轮次倒着翻战报</span></li>
            <li><span class="route-map__step num">C</span>平台与工具<span class="route-map__desc">日期与轮次组合筛</span></li>
          </ol>

          <div class="qa-stack">
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">01</span>第一次打开，先点哪儿？</summary>
              <div class="qa__a">
                <p>想看今天发生了什么，进赛事专栏；想按轮次一场场往回翻，进平台与工具。首页左列是积分榜，右列是伤停转会，先看清你关注的球队排在哪里，再决定往哪边走。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">02</span>从首页找到某一场战报要几步？</summary>
              <div class="qa__a">
                <p>三步。首页锁定球队，赛事专栏按轮次定位，工具页把日期和轮次叠上去，剩下的就是那一场。每页顶部都留着回首页和进筛选的入口，走岔了退回来重选就行。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">03</span>手机和电脑上的用法一样吗？</summary>
              <div class="qa__a">
                <p>内容一样，操作顺序略有差别。电脑端筛选条常驻在内容左侧，边筛边看；手机端筛选条收到内容上方，导航折叠成编号抽屉。iOS 端还能把页面收进本地书签，赛后随手点回来。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="g-block" id="filter">
          <div class="g-head">
            <span class="g-head__num num">02</span>
            <h2>筛选与轮次查询</h2>
          </div>
          <p class="g-intro">四个条件：日期、轮次、球队、赛事类型。能叠着用，也能单拎一个出来用。</p>

          <figure class="g-figure">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="日期刻度与筛选网格的抽象图形，浅灰蓝与冷白配色，无人物" loading="lazy" decoding="async">
            <figcaption>日期刻度定时间范围，轮次划区间，两个条件收紧后条目数会明显下降。</figcaption>
          </figure>

          <div class="qa-stack">
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">04</span>日期和轮次能一起用吗？</summary>
              <div class="qa__a">
                <p>能，而且这是最省时间的组合。先框一段日期，再选轮次，结果通常就收窄到几场。筛完点“全部战报”，马上回到完整的阅读流。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">05</span>球队和赛事类型在哪选？</summary>
              <div class="qa__a">
                <p>都在左侧那道筛选轨里。先选赛事类型能一次去掉大半无关条目，再选球队。选中的条件会亮成荧光黄底，扫一眼就知道现在压着几个筛选。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">06</span>筛完找不到想要的场次怎么办？</summary>
              <div class="qa__a">
                <p>先把日期放宽到整周，再看轮次是不是落在了上一阶段。要是仍然没有，把球队名和大概日期写进邮件发过来，我们按条目去查。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="g-block" id="collect">
          <div class="g-head">
            <span class="g-head__num num">03</span>
            <h2>收藏与回看</h2>
          </div>
          <p class="g-intro">把常看的页面存下来，赛后不用每次重新找。收藏只留在这台设备上。</p>

          <div class="qa-stack">
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">07</span>iOS 上怎么把内容存下来？</summary>
              <div class="qa__a">
                <p>用 iOS 自带浏览器打开新记看台，通过浏览器的收藏功能把页面存进本地书签，之后从收藏列表直接点回来。存的是入口，换设备不会自动带过去。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">08</span>收藏之后再打开，内容会变吗？</summary>
              <div class="qa__a">
                <p>会。你收藏的是一条路，点进去看到的永远是最新的赛事动态和伤停转会，不会停在收藏那一刻的旧版本。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">09</span>不登录能看吗？</summary>
              <div class="qa__a">
                <p>公开的赛事内容不用登录就能翻，收藏也只留在这台机器上。想了解本地存储怎么用，可以看一眼<a class="link-arrow" href="/data-protection/">数据保护说明</a>。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="g-block" id="fix">
          <div class="g-head">
            <span class="g-head__num num">04</span>
            <h2>数据纠错怎么提</h2>
          </div>
          <p class="g-intro">比分、轮次、伤停名单对不上，直接发邮件过来，写清楚定位信息就够。</p>

          <div class="qa-stack">
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">10</span>发现条目不对，往哪儿发？</summary>
              <div class="qa__a">
                <p>发到 <span class="num">kefu@arena-xinji.com.cn</span>，标题写“数据核验”。正文带上赛事名称、轮次、球队和具体那一条内容，我们照着这四项定位，不用来回追问。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">11</span>多久会有回音？</summary>
              <div class="qa__a">
                <p>工作日 <span class="num">9:00-18:00</span> 由运营团队轮值回复，标了“数据核验”的邮件优先处理。赛程密集的时段会稍慢一些，请留意邮件回复。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">12</span>积分榜和伤停信息多久更新一次？</summary>
              <div class="qa__a">
                <p>积分榜每日早间和赛后各刷一次；伤停转会集中在赛前与赛后更新，日均发布约 45 条。筛完没看到最新变化，隔一段时间再刷。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="g-block" id="contact-before">
          <div class="g-head">
            <span class="g-head__num num">05</span>
            <h2>联系客服前可先看</h2>
          </div>
          <p class="g-intro">大半问题在上面五组答案里已经能解决。要写邮件或打电话，这几条能帮你一次说清。</p>

          <div class="qa-stack">
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">13</span>合作咨询走哪个渠道？</summary>
              <div class="qa__a">
                <p>走<a class="link-arrow" href="/inquiry/">咨询通道</a>，邮件里写明贵方机构名称和想对接的方向：内容协作、数据服务还是使用问题，我们按类别分给对应的人。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">14</span>电话和邮箱什么时候有人接？</summary>
              <div class="qa__a">
                <p>电话 <span class="num">400-2043-2022</span>，工作日 <span class="num">9:00-18:00</span> 有人值守；邮件全天收，工作日回复。节假日的来信顺延到下一个工作日处理。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q"><span class="qa__num num">15</span>收藏夹和隐私的事问谁？</summary>
              <div class="qa__a">
                <p>先看<a class="link-arrow" href="/data-protection/">数据保护说明</a>，里面讲了收藏如何在本地保存、Cookie 怎么用、你有什么权利。看完仍有疑问，发邮件到客服邮箱即可。</p>
              </div>
            </details>
          </div>

          <div class="faq-cta">
            <div class="faq-cta__text">
              <p class="faq-cta__title">想直接动手试一遍？</p>
              <p>工具页左侧筛选轨一直亮着，日期、轮次、球队随你叠；赛事专栏按轮次倒着翻，赛后的动静都在那儿。</p>
            </div>
            <div class="btn-row">
              <a class="btn btn--signal" href="/platform/">去筛战报</a>
              <a class="btn btn--ghost" href="/articles/">看赛事专栏</a>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</main>

.page-faq {
  color: var(--chalk);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-faq a {
  color: inherit;
}

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

.page-faq .faq-hero {
  padding-block: clamp(22px, 4vw, 40px) clamp(30px, 5vw, 56px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 30px;
}

.page-faq .faq-hero__copy h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 10px 0 18px;
  max-width: 15ch;
}

.page-faq .faq-hero__copy .lede {
  max-width: 46ch;
  color: var(--mist);
}

.page-faq .faq-hero__copy .btn-row {
  margin-top: 24px;
}

.page-faq .faq-hero__figure {
  margin: 0;
  background: var(--stand);
  border: 1px solid var(--line-strong);
  padding: 10px 10px 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid var(--lime);
}

.page-faq .faq-hero__figure figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
  padding: 10px 2px 14px;
}

.page-faq .guide-layout {
  display: grid;
  gap: 26px;
}

.page-faq .toc {
  background: var(--stand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  padding: 18px 18px 20px;
}

.page-faq .toc__title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--lime);
  margin: 0 0 14px;
}

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

.page-faq .toc__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 8px 9px 0;
  border-bottom: 1px dashed var(--line);
  text-decoration: none;
  font-size: 15px;
  color: var(--chalk);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}

.page-faq .toc__list a .num {
  font-size: 12px;
  color: var(--pitch);
}

.page-faq .toc__list a:hover,
.page-faq .toc__list a:focus-visible {
  color: var(--lime);
  background: rgba(221, 242, 71, .07);
}

.page-faq .toc__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist);
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.page-faq .toc__note .num {
  color: var(--chalk);
}

.page-faq .g-block {
  padding-top: 8px;
  scroll-margin-top: 96px;
}

.page-faq .g-block + .g-block {
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 1px solid var(--line-strong);
}

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

.page-faq .g-head__num {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  border-radius: var(--radius);
}

.page-faq .g-head h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 4vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

.page-faq .g-intro {
  margin: 12px 0 20px;
  color: var(--mist);
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.75;
}

.page-faq .route-map {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
  background: linear-gradient(120deg, rgba(47, 125, 78, .28), rgba(11, 31, 24, .1));
  border-left: 3px solid var(--pitch);
}

.page-faq .route-map li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chalk);
  flex-wrap: wrap;
}

.page-faq .route-map__step {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  background: var(--chalk);
  color: var(--ink);
  border-radius: 50%;
  flex: none;
}

.page-faq .route-map__desc {
  font-weight: 400;
  font-size: 13px;
  color: var(--mist);
}

.page-faq .route-map li + li::before {
  content: "↳";
  color: var(--lime);
  font-size: 14px;
  margin-right: 2px;
}

.page-faq .g-figure {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  background: var(--stand);
  padding: 8px;
}

.page-faq .g-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.page-faq .g-figure figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
  padding: 10px 4px 4px;
}

.page-faq .qa-stack {
  border-top: 1px solid var(--line-strong);
}

.page-faq .qa {
  border-bottom: 1px solid var(--line);
  background: rgba(18, 58, 42, .35);
  transition: background 180ms var(--ease);
}

.page-faq .qa[open] {
  background: rgba(18, 58, 42, .8);
}

.page-faq .qa__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--chalk);
  position: relative;
  transition: color 160ms var(--ease);
}

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

.page-faq .qa__q::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 18px;
  line-height: 1;
  color: var(--pitch);
  transition: color 160ms var(--ease);
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
  color: var(--lime);
}

.page-faq .qa__q:hover {
  color: var(--lime);
}

.page-faq .qa__q:focus-visible {
  outline: 2px solid var(--mist);
  outline-offset: -2px;
  box-shadow: inset 4px 0 0 var(--lime);
}

.page-faq .qa__num {
  font-size: 11px;
  color: var(--pitch);
  flex: none;
  padding-top: 2px;
}

.page-faq .qa[open] .qa__num {
  color: var(--lime);
}

.page-faq .qa__a {
  margin: 0 14px 0 26px;
  padding: 0 0 18px 14px;
  border-left: 2px solid var(--lime);
}

.page-faq .qa__a p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 62ch;
}

.page-faq .qa__a .num {
  color: var(--chalk);
}

.page-faq .qa__a .link-arrow {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-cta {
  margin-top: 28px;
  padding: 22px 20px;
  display: grid;
  gap: 18px;
  background: linear-gradient(115deg, var(--stand), rgba(11, 31, 24, .55));
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.page-faq .faq-cta__title {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--chalk);
}

.page-faq .faq-cta__text p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
  max-width: 58ch;
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 54px;
  }

  .page-faq .faq-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 26px 28px;
  }

  .page-faq .faq-cta .btn-row {
    justify-content: flex-end;
  }
}

@media (min-width: 980px) {
  .page-faq .guide-layout {
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }

  .page-faq .toc {
    position: sticky;
    top: 92px;
  }

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

  .page-faq .route-map li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-faq .route-map li + li::before {
    display: none;
  }

  .page-faq .qa__q {
    padding: 18px 18px;
    font-size: 16px;
  }

  .page-faq .qa__a {
    margin-left: 30px;
    padding: 0 18px 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .toc__list a {
    transition: none;
  }
}