.page-faq {
  --faq-pad: clamp(48px, 8vw, 96px);
  --faq-rail-w: 216px;
  background: var(--ink-900);
  color: var(--text-body);
}

/* ---------- 面包屑与共享元素在当前页的落色 ---------- */
.page-faq .breadcrumbs {
  margin-bottom: 18px;
}
.page-faq .breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
}
.page-faq .breadcrumbs__link:hover,
.page-faq .breadcrumbs__link:focus-visible {
  color: var(--text-strong);
}
.page-faq .breadcrumbs__sep,
.page-faq .breadcrumbs__current {
  color: var(--fog);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 56px) 0 clamp(44px, 8vw, 84px);
  background:
    radial-gradient(120% 92% at 90% 4%, rgba(240, 74, 29, 0.20), transparent 56%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 26%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 183, 194, 0.32), transparent);
  transform: rotate(-14deg);
  pointer-events: none;
}
.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 52px);
}
.page-faq .faq-hero__title {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.02;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  color: var(--text-strong);
}
.page-faq .faq-hero__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  background: var(--pulse);
}
.page-faq .faq-hero__lede {
  max-width: 60ch;
  margin: 0;
  color: var(--text-body);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
}
.page-faq .faq-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 40px);
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.page-faq .faq-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.page-faq .faq-stat__num {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 600;
  color: var(--signal);
  line-height: 1;
}
.page-faq .faq-stat__label {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.page-faq .faq-hero__side {
  display: grid;
  gap: 18px;
}
.page-faq .faq-hero__figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}
.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-faq .faq-hot {
  padding: 16px 18px 18px;
  background: rgba(36, 39, 43, 0.72);
  border-left: 2px solid var(--pulse);
}
.page-faq .faq-hot__title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.page-faq .faq-hot__list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: decimal;
  display: grid;
  gap: 8px;
}
.page-faq .faq-hot__list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}
.page-faq .faq-hot__list a {
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.page-faq .faq-hot__list a:hover,
.page-faq .faq-hot__list a:focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 三步走 ---------- */
.page-faq .faq-start {
  padding: var(--faq-pad) 0;
  background: var(--paper);
  color: var(--text-ink);
}
.page-faq .faq-start .section-head {
  margin-bottom: clamp(26px, 4vw, 44px);
}
.page-faq .faq-start .section-head__index {
  color: var(--ember);
}
.page-faq .faq-start .section-head__title {
  color: var(--text-ink);
}
.page-faq .faq-start .section-head__note {
  color: var(--text-ink-soft);
  max-width: 56ch;
}
.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 34px);
}
.page-faq .faq-step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line-ink);
}
.page-faq .faq-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--pulse);
}
.page-faq .faq-step__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-ink-soft);
}
.page-faq .faq-step__title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--text-ink);
  letter-spacing: 0.01em;
}
.page-faq .faq-step__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-ink-soft);
}
.page-faq .faq-step .link-arrow {
  color: var(--ember);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 46, 16, 0.4);
}
.page-faq .faq-step .link-arrow:hover,
.page-faq .faq-step .link-arrow:focus-visible {
  border-bottom-color: var(--ember);
}

/* ---------- 问答主体 ---------- */
.page-faq .faq-body {
  padding: var(--faq-pad) 0;
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
}
.page-faq .faq-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.page-faq .faq-rail {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.page-faq .faq-rail__title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.page-faq .faq-rail__list {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-faq .faq-rail__item {
  flex: 0 0 auto;
}
.page-faq .faq-rail__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.page-faq .faq-rail__coord {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fog);
}
.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  color: var(--text-strong);
  border-color: var(--pulse);
  background: rgba(244, 239, 228, 0.05);
}
.page-faq .faq-rail__link:focus-visible {
  outline: 1px solid var(--pulse);
  outline-offset: 2px;
}
.page-faq .faq-rail__cta {
  display: inline-flex;
}

.page-faq .faq-cat + .faq-cat {
  margin-top: clamp(36px, 6vw, 64px);
}
.page-faq .faq-cat {
  scroll-margin-top: 88px;
}
.page-faq .faq-cat__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(169, 183, 194, 0.24);
}
.page-faq .faq-cat__coord {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--signal);
}
.page-faq .faq-cat__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}
.page-faq .faq-cat__figure {
  display: block;
  margin: 20px 0 6px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.page-faq .faq-cat__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-faq .faq-cat__figure .media-frame__caption {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--line-soft);
  background: var(--ink-800);
}

/* 手风琴 */
.page-faq .qa {
  border-bottom: 1px solid var(--line);
}
.page-faq .qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-strong);
  transition: color 0.18s var(--ease);
}
.page-faq .qa__q::-webkit-details-marker {
  display: none;
}
.page-faq .qa__q:hover,
.page-faq .qa__q:focus-visible {
  color: var(--pulse);
}
.page-faq .qa__q:focus-visible {
  outline: 1px solid var(--pulse);
  outline-offset: 3px;
}
.page-faq .qa__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  border: 1px solid rgba(169, 183, 194, 0.34);
}
.page-faq .qa__icon::before,
.page-faq .qa__icon::after {
  content: "";
  position: absolute;
  background: var(--pulse);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.page-faq .qa__icon::before {
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.page-faq .qa__icon::after {
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.page-faq .qa[open] .qa__icon::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.2);
}
.page-faq .qa__a {
  padding: 0 0 20px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
}
.page-faq .qa__a p {
  margin: 0 0 10px;
}
.page-faq .qa__a p:last-child {
  margin-bottom: 0;
}
.page-faq .qa__a a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 242, 176, 0.4);
}
.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible {
  border-bottom-color: var(--signal);
}
.page-faq .qa[open] .qa__a {
  animation: faq-answer-in 0.24s var(--ease) both;
}
@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 反馈收口 ---------- */
.page-faq .faq-esc {
  padding: var(--faq-pad) 0;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(118deg, rgba(240, 74, 29, 0.16) 0%, transparent 46%),
    var(--ink-800);
}
.page-faq .faq-esc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
}
.page-faq .faq-esc__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.page-faq .faq-esc__text {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
}
.page-faq .faq-esc__side {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  background: rgba(23, 25, 28, 0.6);
}
.page-faq .faq-esc__label {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--signal);
}
.page-faq .faq-esc__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-faq .faq-esc__item {
  display: grid;
  gap: 3px;
}
.page-faq .faq-esc__key {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.page-faq .faq-esc__value {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-strong);
  word-break: break-word;
}
.page-faq .faq-esc__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}
.page-faq .faq-esc__note a {
  color: var(--fog);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.page-faq .faq-esc__note a:hover,
.page-faq .faq-esc__note a:focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-faq .faq-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-hero__stats {
    justify-content: flex-start;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
  .page-faq .faq-hero__figure {
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  }
  .page-faq .faq-hero__side {
    margin-top: 12px;
  }
  .page-faq .faq-esc__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-body__inner {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(36px, 5vw, 72px);
  }
  .page-faq .faq-rail {
    position: sticky;
    top: 92px;
    border-top: none;
    padding-top: 0;
  }
  .page-faq .faq-rail__list {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    margin-bottom: 20px;
    padding-bottom: 0;
  }
  .page-faq .faq-rail__item {
    flex: none;
  }
  .page-faq .faq-rail__link {
    border: none;
    border-left: 2px solid transparent;
    padding: 10px 0 10px 12px;
    white-space: normal;
  }
  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link:focus-visible {
    background: transparent;
    border-left-color: var(--pulse);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa[open] .qa__a {
    animation: none;
  }
  .page-faq .qa__q,
  .page-faq .qa__icon::before,
  .page-faq .qa__icon::after,
  .page-faq .faq-rail__link {
    transition: none;
  }
  .page-faq .faq-step::before {
    background: var(--pulse);
  }
}


<main id="main-content" class="page-faq">
  <section class="faq-hero" aria-labelledby="faq-hero-title">
    <div class="container faq-hero__inner">
      <div class="faq-hero__text">
        <nav class="breadcrumbs" aria-label="面包屑">
          <ol class="breadcrumbs__list">
            <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">赛场首页</a></li>
            <li class="breadcrumbs__item"><span class="breadcrumbs__sep">/</span></li>
            <li class="breadcrumbs__item"><span class="breadcrumbs__current">帮助中心</span></li>
          </ol>
        </nav>
        <p class="eyebrow">HELP DESK / INDEX 05</p>
        <h1 class="faq-hero__title" id="faq-hero-title">帮助中心</h1>
        <p class="lede faq-hero__lede">入口点不开、订阅看不到更新、排名表读不懂，都能在这里找到下一步动作。火狐体育赛场把访客问得最多的情况分成入口、订阅、排名、联赛切换与设备五类，每题先给操作，再补一句说明，照着做通常当场就能解决。</p>
        <dl class="faq-hero__stats">
          <div class="faq-stat">
            <dt class="faq-stat__label">常见问题</dt>
            <dd class="faq-stat__num mono">48</dd>
          </div>
          <div class="faq-stat">
            <dt class="faq-stat__label">问题分类</dt>
            <dd class="faq-stat__num mono">05</dd>
          </div>
          <div class="faq-stat">
            <dt class="faq-stat__label">高频置顶</dt>
            <dd class="faq-stat__num mono">06</dd>
          </div>
        </dl>
      </div>
      <div class="faq-hero__side">
        <figure class="faq-hero__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="米白底上的细线路线图与五类坐标节点，苔绿、陶土与青绿标记的抽象信息图">
        </figure>
        <div class="faq-hot">
          <p class="faq-hot__title mono">高频 6 条</p>
          <ol class="faq-hot__list">
            <li><a href="#entry">第一次来，入口从哪儿进？</a></li>
            <li><a href="#sync">手机上没看到吸底入口条？</a></li>
            <li><a href="#subscribe">一个账号能订阅几支球队？</a></li>
            <li><a href="#subscribe">订阅后的动态在哪里看？</a></li>
            <li><a href="#ranking">排名表里的“近五场”指什么？</a></li>
            <li><a href="#sync">换手机以后订阅还跟着吗？</a></li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-start" id="start" aria-labelledby="faq-start-title">
    <div class="container">
      <div class="section-head">
        <span class="section-head__index mono">01 / FIRST VISIT</span>
        <h2 class="section-head__title" id="faq-start-title">第一次进站，先把这三步走通</h2>
        <p class="section-head__note">不用记复杂地址，走过一次之后，每次都能从同一个位置进来。</p>
      </div>
      <ol class="faq-steps">
        <li class="faq-step" data-reveal>
          <span class="faq-step__num mono">STEP 01</span>
          <h3 class="faq-step__title">从首页导航进入中文专区</h3>
          <p class="faq-step__text">打开赛场首页，顶部右侧的一级栏目就是主路径，其中的“入口与工具”直奔小屏稳定版与排名查询。首页的入口卡片和它指向同一个地方，点哪个都可以。</p>
          <a class="link-arrow" href="/">回到赛场首页</a>
        </li>
        <li class="faq-step" data-reveal style="--reveal-delay:90ms">
          <span class="faq-step__num mono">STEP 02</span>
          <h3 class="faq-step__title">挑一种合你习惯的入口</h3>
          <p class="faq-step__text">日常跟赛用手机小屏稳定版，临时查排名进入口工具页，关注球队动态进订阅面板。三个入口随时互跳，先选最顺手的那个即可。</p>
          <a class="link-arrow" href="/tools/">打开入口与工具</a>
        </li>
        <li class="faq-step" data-reveal style="--reveal-delay:180ms">
          <span class="faq-step__num mono">STEP 03</span>
          <h3 class="faq-step__title">认出手机底部的常驻入口</h3>
          <p class="faq-step__text">手机端首屏底部固定三格入口，页面怎么滑它都在原位。第一次用请先确认它可见，之后不管翻到哪一屏，都能一格回到入口页。</p>
          <a class="link-arrow" href="#entry">看入口相关的全部问题</a>
        </li>
      </ol>
    </div>
  </section>

  <section class="faq-body">
    <div class="container faq-body__inner">
      <aside class="faq-rail" aria-label="问题分类索引">
        <p class="faq-rail__title mono">问题索引</p>
        <ol class="faq-rail__list">
          <li class="faq-rail__item"><a class="faq-rail__link" href="#entry"><span class="faq-rail__coord mono">01</span>入口与导航</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#subscribe"><span class="faq-rail__coord mono">02</span>球队订阅</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#ranking"><span class="faq-rail__coord mono">03</span>联赛排名</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#switch"><span class="faq-rail__coord mono">04</span>多联赛切换</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#sync"><span class="faq-rail__coord mono">05</span>同步与设备</a></li>
        </ol>
        <a class="btn btn--primary btn--sm faq-rail__cta" href="/feedback/">问题没解决</a>
      </aside>

      <div class="faq-answers">
        <section class="faq-cat" id="entry" aria-labelledby="entry-title">
          <header class="faq-cat__head">
            <span class="faq-cat__coord mono">01</span>
            <h2 class="faq-cat__title" id="entry-title">入口与导航</h2>
          </header>
          <div class="faq-cat__list">
            <details class="qa" open>
              <summary class="qa__q">第一次来，从哪儿点进去最稳？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>打开赛场首页，看顶部右侧的一级栏目，点“入口与工具”就是小屏稳定版和排名查询的固定位置。首页上的入口卡片指向同一去处，两边点哪个都一样。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">手机上没看到底部的入口条怎么办？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>先把页面拉回最顶部，再轻滑一下屏幕，入口条会随首屏一起出现，之后固定在底部不随内容移动。如果开了浏览器的阅读模式，请先退出再看。</p>
                <p>依然看不到就直接进 <a href="/tools/">入口与工具</a>，功能和小屏稳定版一致。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">想存一个以后一直能用的地址？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>收藏赛场首页即可，其余栏目都能从首页导航一步到达。转给朋友时也建议发首页，让对方从同一个入口开始，不容易迷路。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">从搜索结果点进来，落在了别的页面？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>看页面顶部的一级栏目，点“赛场首页”就能回到主路径，再按第一次进站的三步走一遍。各栏目之间都互相通着，不会走到断头路。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-cat" id="subscribe" aria-labelledby="subscribe-title">
          <header class="faq-cat__head">
            <span class="faq-cat__coord mono">02</span>
            <h2 class="faq-cat__title" id="subscribe-title">球队订阅</h2>
          </header>
          <div class="faq-cat__list">
            <details class="qa" open>
              <summary class="qa__q">一个账号最多能关注多少支球队？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>最多 20 支。添加到上限时会提示先取关几支不常看的，腾出位置再加新的，避免订阅面板被无关动态挤满。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">不注册能不能订阅？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>能。浏览公开内容本来就不需要注册，订阅选择先保存在当前浏览器上，关掉页面再打开还在。登录之后，订阅状态可以在多台设备之间同步。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">订阅之后去哪儿看更新？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>进订阅面板。它按比赛日把您关注球队的动态聚在一起，哪天有新内容、哪天安静，一眼能看出来，不用逐个球队翻。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">订阅列表突然空了是怎么回事？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>多半是清过浏览器数据。未登录时订阅偏好只存在本机，清理后会一并清掉，重新勾选一次就能恢复。已登录的账号可以从同步状态里找回，具体范围见<a href="/privacy/">隐私政策</a>。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-cat" id="ranking" aria-labelledby="ranking-title">
          <header class="faq-cat__head">
            <span class="faq-cat__coord mono">03</span>
            <h2 class="faq-cat__title" id="ranking-title">联赛排名</h2>
          </header>
          <div class="faq-cat__list">
            <details class="qa" open>
              <summary class="qa__q">排名表那几列分别看什么？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>积分看总成绩，场次提醒您有没有少赛或多赛，净胜体现攻防差，近五场走势反映最近的状态起伏。四列放在一起读，比单看名次更接近球队当下的真实水平。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">排名多久更新一次？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>按比赛日滚动更新。单场结束后还要经过字段对齐和延迟校验才会发布，所以不会终场哨一响就立刻跳位，通常稍等片刻再看更准确。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">刚打完的比赛，排名还没动静？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>先刷新一次页面，多数情况是数据正在校验。如果已经过了下一个比赛日仍无变化，带上截图和您看到这条排名的入口路径，从<a href="/feedback/">反馈通道</a>发给我们。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">能查哪些联赛的排名？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>覆盖足球与篮球两大类共 12 个联赛频道，含欧洲五大联赛与国内篮球赛事。想临时查某个联赛，从<a href="/tools/">入口与工具</a>进去最快。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-cat" id="switch" aria-labelledby="switch-title">
          <header class="faq-cat__head">
            <span class="faq-cat__coord mono">04</span>
            <h2 class="faq-cat__title" id="switch-title">多联赛切换</h2>
          </header>
          <div class="faq-cat__list">
            <details class="qa" open>
              <summary class="qa__q">切换器在页面的哪个位置？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>电脑上在右侧栏，滚动时保持不动；手机上是底部的一条横向切换条，和入口条分层放置，互不遮挡。位置固定，找一次就够了。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">切换联赛以后页面会跳回顶部吗？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>不会。切换只改变内容区，您当前看的位置和切换器本身都留在原处，方便在几个联赛之间来回比对同一条信息。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">切换时表格闪一下是正常的吗？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>正常。那是新联赛数据接入的瞬间状态，内容到位后会稳定下来，不需要反复点击。若长时间空白，刷新页面再试一次。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-cat" id="sync" aria-labelledby="sync-title">
          <header class="faq-cat__head">
            <span class="faq-cat__coord mono">05</span>
            <h2 class="faq-cat__title" id="sync-title">同步与设备</h2>
          </header>
          <figure class="faq-cat__figure">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="手机屏幕近景显示入口卡片与帮助列表，深色桌面背景下有柔和灯光，画面中无人物面部" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">小屏上入口卡片与问题列表在首屏同屏可见，跟随手指即可到达</figcaption>
          </figure>
          <div class="faq-cat__list">
            <details class="qa" open>
              <summary class="qa__q">换了手机，订阅还跟着走吗？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>登录后可以同步，换设备打开还是原来那份关注清单。没登录时订阅只留在原来那台设备上，换机后需要重新选一次。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">小屏上字小、版面挤怎么办？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>走小屏稳定版入口，它针对 360–430px 宽度做过排布，首屏保留入口卡片、排名入口和订阅入口三块内容。从首页的“小屏入口”进去即可，不必再放大页面。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">横屏看排名表会错位吗？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>建议竖屏查看。吸底切换条和入口条的间距按竖屏排布，横屏时两者会靠得比较近，容易误触。</p>
              </div>
            </details>
            <details class="qa">
              <summary class="qa__q">用无痕模式浏览有影响吗？<span class="qa__icon" aria-hidden="true"></span></summary>
              <div class="qa__a">
                <p>有。退出无痕窗口后，本机保存的订阅与联赛偏好会被一起清掉，下次进来需要重新选择。想保留习惯设置，用普通窗口浏览并保持登录即可。</p>
              </div>
            </details>
          </div>
        </section>
      </div>
    </div>
  </section>

  <section class="faq-esc" id="feedback-more" aria-labelledby="faq-esc-title">
    <div class="container faq-esc__inner">
      <div class="faq-esc__main">
        <p class="eyebrow">ESCALATE / 06</p>
        <h2 class="faq-esc__title" id="faq-esc-title">自助没解决，把现场情况发给我们</h2>
        <p class="faq-esc__text">把三样东西一起发过来，基本一轮就能定位：您是从哪个页面哪个位置点进出的、当时用的设备和横竖屏状态、以及能说明问题的截图。入口相关的紧急问题，请在邮件主题里注明「入口」。</p>
        <a class="btn btn--primary" href="/feedback/">打开反馈通道<span class="btn__arrow" aria-hidden="true">→</span></a>
      </div>
      <div class="faq-esc__side">
        <p class="faq-esc__label mono">CONTACT</p>
        <ul class="faq-esc__list">
          <li class="faq-esc__item">
            <span class="faq-esc__key">客服邮箱</span>
            <span class="faq-esc__value">kefu@firefox-play.com.cn</span>
          </li>
          <li class="faq-esc__item">
            <span class="faq-esc__key">客服电话</span>
            <span class="faq-esc__value mono">400-7959-8718</span>
          </li>
          <li class="faq-esc__item">
            <span class="faq-esc__key">回复时间</span>
            <span class="faq-esc__value">工作日 9:00–18:00 内回复</span>
          </li>
        </ul>
        <p class="faq-esc__note">也是想看看最近有哪些变化？<a href="/press/">赛场快讯</a>里能看到入口公告与版本更新的说明。</p>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-pad: clamp(48px, 8vw, 96px);
  --faq-rail-w: 216px;
  background: var(--ink-900);
  color: var(--text-body);
}

/* ---------- 面包屑与共享元素在当前页的落色 ---------- */
.page-faq .breadcrumbs {
  margin-bottom: 18px;
}
.page-faq .breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
}
.page-faq .breadcrumbs__link:hover,
.page-faq .breadcrumbs__link:focus-visible {
  color: var(--text-strong);
}
.page-faq .breadcrumbs__sep,
.page-faq .breadcrumbs__current {
  color: var(--fog);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 56px) 0 clamp(44px, 8vw, 84px);
  background:
    radial-gradient(120% 92% at 90% 4%, rgba(240, 74, 29, 0.20), transparent 56%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 26%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 183, 194, 0.32), transparent);
  transform: rotate(-14deg);
  pointer-events: none;
}
.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 52px);
}
.page-faq .faq-hero__title {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.02;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  color: var(--text-strong);
}
.page-faq .faq-hero__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  background: var(--pulse);
}
.page-faq .faq-hero__lede {
  max-width: 60ch;
  margin: 0;
  color: var(--text-body);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
}
.page-faq .faq-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 40px);
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.page-faq .faq-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.page-faq .faq-stat__num {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 600;
  color: var(--signal);
  line-height: 1;
}
.page-faq .faq-stat__label {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.page-faq .faq-hero__side {
  display: grid;
  gap: 18px;
}
.page-faq .faq-hero__figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}
.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-faq .faq-hot {
  padding: 16px 18px 18px;
  background: rgba(36, 39, 43, 0.72);
  border-left: 2px solid var(--pulse);
}
.page-faq .faq-hot__title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.page-faq .faq-hot__list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: decimal;
  display: grid;
  gap: 8px;
}
.page-faq .faq-hot__list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}
.page-faq .faq-hot__list a {
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.page-faq .faq-hot__list a:hover,
.page-faq .faq-hot__list a:focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 三步走 ---------- */
.page-faq .faq-start {
  padding: var(--faq-pad) 0;
  background: var(--paper);
  color: var(--text-ink);
}
.page-faq .faq-start .section-head {
  margin-bottom: clamp(26px, 4vw, 44px);
}
.page-faq .faq-start .section-head__index {
  color: var(--ember);
}
.page-faq .faq-start .section-head__title {
  color: var(--text-ink);
}
.page-faq .faq-start .section-head__note {
  color: var(--text-ink-soft);
  max-width: 56ch;
}
.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 34px);
}
.page-faq .faq-step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line-ink);
}
.page-faq .faq-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--pulse);
}
.page-faq .faq-step__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-ink-soft);
}
.page-faq .faq-step__title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--text-ink);
  letter-spacing: 0.01em;
}
.page-faq .faq-step__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-ink-soft);
}
.page-faq .faq-step .link-arrow {
  color: var(--ember);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 46, 16, 0.4);
}
.page-faq .faq-step .link-arrow:hover,
.page-faq .faq-step .link-arrow:focus-visible {
  border-bottom-color: var(--ember);
}

/* ---------- 问答主体 ---------- */
.page-faq .faq-body {
  padding: var(--faq-pad) 0;
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
}
.page-faq .faq-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.page-faq .faq-rail {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.page-faq .faq-rail__title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.page-faq .faq-rail__list {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-faq .faq-rail__item {
  flex: 0 0 auto;
}
.page-faq .faq-rail__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.page-faq .faq-rail__coord {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fog);
}
.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  color: var(--text-strong);
  border-color: var(--pulse);
  background: rgba(244, 239, 228, 0.05);
}
.page-faq .faq-rail__link:focus-visible {
  outline: 1px solid var(--pulse);
  outline-offset: 2px;
}
.page-faq .faq-rail__cta {
  display: inline-flex;
}

.page-faq .faq-cat + .faq-cat {
  margin-top: clamp(36px, 6vw, 64px);
}
.page-faq .faq-cat {
  scroll-margin-top: 88px;
}
.page-faq .faq-cat__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(169, 183, 194, 0.24);
}
.page-faq .faq-cat__coord {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--signal);
}
.page-faq .faq-cat__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}
.page-faq .faq-cat__figure {
  display: block;
  margin: 20px 0 6px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.page-faq .faq-cat__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-faq .faq-cat__figure .media-frame__caption {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--line-soft);
  background: var(--ink-800);
}

/* 手风琴 */
.page-faq .qa {
  border-bottom: 1px solid var(--line);
}
.page-faq .qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-strong);
  transition: color 0.18s var(--ease);
}
.page-faq .qa__q::-webkit-details-marker {
  display: none;
}
.page-faq .qa__q:hover,
.page-faq .qa__q:focus-visible {
  color: var(--pulse);
}
.page-faq .qa__q:focus-visible {
  outline: 1px solid var(--pulse);
  outline-offset: 3px;
}
.page-faq .qa__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  border: 1px solid rgba(169, 183, 194, 0.34);
}
.page-faq .qa__icon::before,
.page-faq .qa__icon::after {
  content: "";
  position: absolute;
  background: var(--pulse);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.page-faq .qa__icon::before {
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.page-faq .qa__icon::after {
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.page-faq .qa[open] .qa__icon::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.2);
}
.page-faq .qa__a {
  padding: 0 0 20px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
}
.page-faq .qa__a p {
  margin: 0 0 10px;
}
.page-faq .qa__a p:last-child {
  margin-bottom: 0;
}
.page-faq .qa__a a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 242, 176, 0.4);
}
.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible {
  border-bottom-color: var(--signal);
}
.page-faq .qa[open] .qa__a {
  animation: faq-answer-in 0.24s var(--ease) both;
}
@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 反馈收口 ---------- */
.page-faq .faq-esc {
  padding: var(--faq-pad) 0;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(118deg, rgba(240, 74, 29, 0.16) 0%, transparent 46%),
    var(--ink-800);
}
.page-faq .faq-esc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
}
.page-faq .faq-esc__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.page-faq .faq-esc__text {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
}
.page-faq .faq-esc__side {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  background: rgba(23, 25, 28, 0.6);
}
.page-faq .faq-esc__label {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--signal);
}
.page-faq .faq-esc__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-faq .faq-esc__item {
  display: grid;
  gap: 3px;
}
.page-faq .faq-esc__key {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.page-faq .faq-esc__value {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-strong);
  word-break: break-word;
}
.page-faq .faq-esc__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}
.page-faq .faq-esc__note a {
  color: var(--fog);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.page-faq .faq-esc__note a:hover,
.page-faq .faq-esc__note a:focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-faq .faq-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-hero__stats {
    justify-content: flex-start;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
  .page-faq .faq-hero__figure {
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  }
  .page-faq .faq-hero__side {
    margin-top: 12px;
  }
  .page-faq .faq-esc__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-body__inner {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(36px, 5vw, 72px);
  }
  .page-faq .faq-rail {
    position: sticky;
    top: 92px;
    border-top: none;
    padding-top: 0;
  }
  .page-faq .faq-rail__list {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    margin-bottom: 20px;
    padding-bottom: 0;
  }
  .page-faq .faq-rail__item {
    flex: none;
  }
  .page-faq .faq-rail__link {
    border: none;
    border-left: 2px solid transparent;
    padding: 10px 0 10px 12px;
    white-space: normal;
  }
  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link:focus-visible {
    background: transparent;
    border-left-color: var(--pulse);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa[open] .qa__a {
    animation: none;
  }
  .page-faq .qa__q,
  .page-faq .qa__icon::before,
  .page-faq .qa__icon::after,
  .page-faq .faq-rail__link {
    transition: none;
  }
  .page-faq .faq-step::before {
    background: var(--pulse);
  }
}