.page-faq {
  background: var(--cream-50);
  color: var(--text-900);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.page-faq .faq-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 44px);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(18px, 2.4vw, 30px);
  align-items: end;
}

.page-faq .faq-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 12px 0 18px;
  max-width: 16em;
}

.page-faq .faq-hero__lead .yrb-lead {
  max-width: 40em;
}

.page-faq .faq-hero__panel {
  background: var(--ink-900);
  color: var(--cyan-200);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hair-cyan);
}

.page-faq .faq-hero__panel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 18px;
}

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

.page-faq .faq-hero__panel-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--hair-cyan);
  padding-bottom: 14px;
}

.page-faq .faq-hero__panel-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-faq .faq-hero__panel-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-400);
  letter-spacing: 0.02em;
}

.page-faq .faq-hero__panel-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-100);
}

.page-faq .faq-hero__panel-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--moss-gray-500, rgba(184, 247, 229, 0.72));
}

.page-faq .faq-quicknav {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--cream-50);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 12px 0 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.page-faq .faq-quicknav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss-500);
  margin: 0 0 10px;
}

.page-faq .faq-quicknav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-quicknav__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--cream-100);
  color: var(--text-900);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out,
    border-color var(--t-fast) ease-out;
}

.page-faq .faq-chip__no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--moss-500);
  letter-spacing: 0.06em;
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  background: var(--ink-900);
  color: var(--cyan-400);
  border-color: var(--ink-900);
}

.page-faq .faq-chip:hover .faq-chip__no,
.page-faq .faq-chip:focus-visible .faq-chip__no {
  color: var(--cyan-200);
}

.page-faq .faq-scenes {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}

.page-faq .faq-scene {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--cream-100);
  overflow: hidden;
  transition: border-color var(--t-base) ease-out;
}

.page-faq .faq-scene::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cyan-400);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--t-base) ease-out;
}

.page-faq .faq-scene[open]::before {
  transform: scaleY(1);
}

.page-faq .faq-scene:hover,
.page-faq .faq-scene:target {
  border-color: var(--cyan-400);
}

.page-faq .faq-scene__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 34px);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  transition: background var(--t-fast) ease-out;
}

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

.page-faq .faq-scene__head:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: -3px;
}

.page-faq .faq-scene__head:hover {
  background: rgba(184, 247, 229, 0.28);
}

.page-faq .faq-scene__no {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--moss-500);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  background: var(--cream-50);
}

.page-faq .faq-scene[open] .faq-scene__no {
  color: var(--ink-900);
  border-color: var(--cyan-400);
  background: var(--cyan-400);
}

.page-faq .faq-scene__title {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-scene__mark {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--cream-50);
}

.page-faq .faq-scene__mark::before,
.page-faq .faq-scene__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink-900);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) ease-out, background var(--t-base) ease-out;
}

.page-faq .faq-scene__mark::before {
  width: 10px;
  height: 1.5px;
}

.page-faq .faq-scene__mark::after {
  width: 1.5px;
  height: 10px;
}

.page-faq .faq-scene[open] .faq-scene__mark {
  border-color: var(--ink-900);
  background: var(--ink-900);
}

.page-faq .faq-scene[open] .faq-scene__mark::before,
.page-faq .faq-scene[open] .faq-scene__mark::after {
  background: var(--cyan-400);
}

.page-faq .faq-scene[open] .faq-scene__mark::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.page-faq .faq-scene__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 34px);
  padding: 0 clamp(20px, 3vw, 34px) clamp(24px, 3vw, 36px);
}

.page-faq .faq-scene__aside {
  border-top: 2px solid var(--cyan-400);
  padding-top: 14px;
}

.page-faq .faq-scene__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin: 0 0 8px;
}

.page-faq .faq-scene__hint {
  font-size: 14px;
  line-height: 1.72;
  color: var(--moss-500);
  margin: 0;
}

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

.page-faq .faq-steps__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.page-faq .faq-steps__item p {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.page-faq .faq-steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--cyan-200);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}

.page-faq .faq-steps__item:hover .faq-steps__no {
  background: var(--orange-500);
  color: var(--cream-50);
}

.page-faq .faq-timeline {
  margin-top: 22px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--cyan-200);
}

.page-faq .faq-timeline__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 14px;
}

.page-faq .faq-timeline__track {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--cyan-400) 0%,
    var(--cyan-400) 70%,
    var(--orange-500) 70%,
    var(--orange-500) 100%
  );
  opacity: 0.94;
}

.page-faq .faq-timeline__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 14px;
}

.page-faq .faq-timeline__mark {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.6;
}

.page-faq .faq-timeline__mark--orange {
  color: var(--orange-500);
}

.page-faq .faq-timeline__mark--cyan {
  color: var(--cyan-400);
}

.page-faq .faq-figure {
  margin: 22px 0 0;
}

.page-faq .faq-callout {
  margin-top: 22px;
}

.page-faq .faq-callout__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-faq .faq-callout__list li {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-900);
}

.page-faq .faq-contact__line {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 10px;
}

.page-faq .faq-contact__line .yrb-num {
  color: var(--orange-500);
}

.page-faq .faq-scene--final {
  background: var(--cream-50);
}

.page-faq .faq-backtop {
  position: fixed;
  right: clamp(14px, 3vw, 30px);
  bottom: clamp(14px, 3vw, 30px);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--cyan-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--hair-cyan);
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out,
    border-color var(--t-fast) ease-out;
}

.page-faq .faq-backtop:hover,
.page-faq .faq-backtop:focus-visible {
  background: var(--cyan-400);
  color: var(--ink-900);
  border-color: var(--cyan-400);
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-faq .faq-scene__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  }

  .page-faq .faq-scene__aside {
    border-top: 0;
    border-left: 3px solid var(--cyan-400);
    padding-top: 0;
    padding-left: 18px;
  }

  .page-faq .faq-quicknav__list {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .page-faq .faq-steps__item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
  }

  .page-faq .faq-hero__panel-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .page-faq .faq-scene__head {
    flex-wrap: wrap;
  }

  .page-faq .faq-scene__mark {
    order: -1;
  }

  .page-faq .faq-backtop {
    padding: 10px 16px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-scene::before,
  .page-faq .faq-scene__mark::before,
  .page-faq .faq-scene__mark::after,
  .page-faq .faq-chip,
  .page-faq .faq-steps__no,
  .page-faq .faq-backtop {
    transition: none;
  }
}
<<<END>>>

<main id="main-content" class="page-faq">
  <div class="faq-hero">
    <div class="yrb-container">
      <nav class="yrb-crumbs" aria-label="页面位置">
        <ol class="yrb-crumbs__list">
          <li class="yrb-crumbs__item"><a class="yrb-crumbs__link" href="/">首页</a></li>
          <li class="yrb-crumbs__item"><a class="yrb-crumbs__link" href="/tutorial/" aria-current="page">使用教程</a></li>
        </ol>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__lead">
          <p class="yrb-kicker">操作指引</p>
          <h1 class="faq-hero__title">从登录到资料下载，每一步都有对应做法</h1>
          <p class="yrb-lead">刚接触 28体育 的人，卡住的地方往往不在内容本身，而在登录状态什么时候过期、订阅从哪里开、资料用什么格式带走。下面按使用场景把整条流程拆开，每一段都是可以直接照着走的步骤，遇到问题先在这里找一遍，多半就能自己解决。</p>
        </div>

        <aside class="faq-hero__panel" aria-label="常见操作速查">
          <p class="faq-hero__panel-label">常见操作速查</p>
          <ul class="faq-hero__panel-list">
            <li class="faq-hero__panel-item">
              <span class="faq-hero__panel-num">7</span>
              <span class="faq-hero__panel-text">天 · PC 端登录后会话保持</span>
            </li>
            <li class="faq-hero__panel-item">
              <span class="faq-hero__panel-num">3</span>
              <span class="faq-hero__panel-text">台 · 可同时保持会话的电脑</span>
            </li>
            <li class="faq-hero__panel-item">
              <span class="faq-hero__panel-num">3</span>
              <span class="faq-hero__panel-text">档 · 反馈提交的处理优先级</span>
            </li>
          </ul>
          <p class="faq-hero__panel-note">订阅档位与费用构成在工具中心可查，赛前专题按目录编号定位最快。</p>
        </aside>
      </div>
    </div>
  </div>

  <div class="faq-quicknav" id="tutorial-index">
    <div class="yrb-container">
      <p class="faq-quicknav__label">场景索引</p>
      <ul class="faq-quicknav__list">
        <li><a class="faq-chip" href="#login-session"><span class="faq-chip__no">01</span>登录与会话</a></li>
        <li><a class="faq-chip" href="#subscribe"><span class="faq-chip__no">02</span>开通订阅</a></li>
        <li><a class="faq-chip" href="#download"><span class="faq-chip__no">03</span>下载资料</a></li>
        <li><a class="faq-chip" href="#catalog"><span class="faq-chip__no">04</span>目录定位</a></li>
        <li><a class="faq-chip" href="#feedback"><span class="faq-chip__no">05</span>提交反馈</a></li>
        <li><a class="faq-chip" href="#security"><span class="faq-chip__no">06</span>账号安全</a></li>
        <li><a class="faq-chip" href="#contact-help"><span class="faq-chip__no">07</span>联系支持</a></li>
      </ul>
    </div>
  </div>

  <div class="yrb-container faq-scenes">

    <details class="faq-scene" id="login-session" open>
      <summary class="faq-scene__head">
        <span class="faq-scene__no">01</span>
        <span class="faq-scene__title">登录后能撑多久，什么时候要重新验证</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">PC 端会话保持</p>
          <p class="faq-scene__hint">经常在电脑上连着查几天资料的人，最先关心的就是登录状态会不会断。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>用常用的电脑浏览器打开站点完成登录，主流浏览器都能正常使用。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>登录成功后默认保持 <b class="yrb-num">7</b> 天会话，这段时间里再次访问不需要重复验证。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>连续 <b class="yrb-num">30</b> 分钟没有任何操作，页面会要求重新验证一次，属于正常的保护机制。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>同一账号最多在 <b class="yrb-num">3</b> 台电脑浏览器上保持有效会话，超出之后最早登录的那一台会自动退出。</p>
            </li>
          </ol>

          <div class="faq-timeline">
            <p class="faq-timeline__cap">会话时间刻度</p>
            <div class="faq-timeline__track" aria-hidden="true"></div>
            <div class="faq-timeline__marks">
              <span class="faq-timeline__mark faq-timeline__mark--orange"><b class="yrb-num">30</b> 分钟无操作 → 重新验证</span>
              <span class="faq-timeline__mark faq-timeline__mark--cyan"><b class="yrb-num">7</b> 天 → 会话到期</span>
            </div>
          </div>

          <figure class="yrb-media yrb-media--wide faq-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="浏览器窗口与横向时间刻度构成的会话保持抽象示意图，荧光青标注 7 天会话时段，暖橙标注 30 分钟无操作刻度" decoding="async">
            <figcaption class="yrb-media__caption">PC 端会话保持示意 · 默认 7 天，连续 30 分钟无操作重新验证</figcaption>
          </figure>
        </div>
      </div>
    </details>

    <details class="faq-scene" id="subscribe">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">02</span>
        <span class="faq-scene__title">怎么开通球队库订阅，费用在哪里看</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">订阅与费用</p>
          <p class="faq-scene__hint">三档之间的差别，主要在能看多少档案、能往上回溯多久、能下载多少份资料。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>进入<a class="yrb-link" href="/tools/">工具中心</a>，找到球队库订阅主入口。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>在赛季、季度、单赛事三档之间对照权益差异，按自己的查阅周期挑一档。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>选好档位后查看费用构成，确认这一档覆盖的档案数量、历史回溯深度和下载额度。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>完成开通，订阅会与账号绑定，之后按上一节的会话规则登录即可使用。</p>
            </li>
          </ol>
          <p class="yrb-note">单赛季一档覆盖全部球队档案与积分榜历史数据回溯至 2016 赛季，并附当季前瞻目录的完整下载权限。</p>
        </div>
      </div>
    </details>

    <details class="faq-scene" id="download">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">03</span>
        <span class="faq-scene__title">按赛事、赛季、球队找文件，PDF 还是 CSV</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">资料下载</p>
          <p class="faq-scene__hint">一次找不准，多半是筛选维度没选对。三个维度可以叠加使用。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>打开资料下载中心，先按赛事维度缩小范围，锁定你要看的联赛或杯赛。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>再叠加赛季维度，积分榜快照按比赛日归档，可以按赛季连续往上追溯做长周期对比。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>需要球队相关档案时，换成球队维度筛选，六个运动项目的档案都在同一套筛选里。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>拿走文件时按用途选格式：PDF 适合直接阅读和转发，CSV 适合自己排序、做表和二次统计。</p>
            </li>
          </ol>
          <p class="yrb-note">下载中心目前提供 <b class="yrb-num">1,860</b> 余份资料，涵盖积分榜快照、前瞻目录、费用说明与规则文档。</p>
        </div>
      </div>
    </details>

    <details class="faq-scene" id="catalog">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">04</span>
        <span class="faq-scene__title">赛前要找的东西，怎么靠目录编号快速定位</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">目录对照</p>
          <p class="faq-scene__hint">赛前要看的专题多，按目录走比一页页翻快得多，也方便和同事对同一份内容。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>先定位赛事类型。整个目录分成 <b class="yrb-num">9</b> 个一级目录，每个对应一类赛事场景。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>在一级目录里找到你关心的赛季阶段，再往下展开二级专题。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>二级专题共 <b class="yrb-num">76</b> 个，每个都带编号，和团队沟通时直接报编号最省事。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>选中的专题可以在资料下载模块里整份带走，目录与文件是对应好的。</p>
            </li>
          </ol>

          <figure class="yrb-media yrb-media--wide faq-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="层级目录与编号标签构成的抽象结构示意图，米色纸面配墨绿线条，标注一级目录与二级专题的从属关系" loading="lazy" decoding="async">
            <figcaption class="yrb-media__caption">目录层级示意 · 9 个一级目录下分设 76 个二级专题</figcaption>
          </figure>
        </div>
      </div>
    </details>

    <details class="faq-scene" id="feedback">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">05</span>
        <span class="faq-scene__title">发现问题怎么提交，多久能等到回复</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">反馈提交</p>
          <p class="faq-scene__hint">提交条数与处理优先级决定费用，三档的差别主要体现在响应速度上。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>从<a class="yrb-link" href="/connect/">联系品牌</a>页进入反馈提交入口。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>写清涉及的赛事、赛季和具体问题，如果有对应的页面或资料编号一并附上，处理会快很多。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>在普通、优先、加急三档中选一档提交，档位决定处理优先级。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>提交完成后按所选档位等待回复，工作时段内的加急反馈最快能在一小时内得到响应。</p>
            </li>
          </ol>

          <div class="yrb-callout faq-callout">
            <p class="yrb-callout__label">响应时效</p>
            <ul class="faq-callout__list">
              <li><b class="yrb-num">24</b> 小时内 · 普通反馈</li>
              <li><b class="yrb-num">4</b> 小时内 · 优先反馈</li>
              <li><b class="yrb-num">60</b> 分钟内 · 加急反馈（工作时段）</li>
            </ul>
          </div>
        </div>
      </div>
    </details>

    <details class="faq-scene" id="security">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">06</span>
        <span class="faq-scene__title">异地登录提示、会话突然结束、下载中断怎么办</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">异常处理</p>
          <p class="faq-scene__hint">大多数异常都能自己处理，按下面的顺序排查通常就够。</p>
        </div>
        <div class="faq-scene__main">
          <ol class="faq-steps">
            <li class="faq-steps__item">
              <span class="faq-steps__no">1</span>
              <p>看到异地登录提示，先回忆一下是不是自己在另一台电脑上登过，这是最常见的原因。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">2</span>
              <p>如果不是本人操作，按同时最多 3 台电脑的规则，退出不认识的会话，并更新账号验证信息。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">3</span>
              <p>会话比预期提前结束时，检查浏览器是否禁用了 Cookie，或者装了会自动清理浏览数据的插件。</p>
            </li>
            <li class="faq-steps__item">
              <span class="faq-steps__no">4</span>
              <p>下载中途断了大多是网络波动，重新进入下载中心按同样的筛选条件取一次就行，不用重新选档。</p>
            </li>
          </ol>
        </div>
      </div>
    </details>

    <details class="faq-scene faq-scene--final" id="contact-help">
      <summary class="faq-scene__head">
        <span class="faq-scene__no">07</span>
        <span class="faq-scene__title">自己排查完还是没解决，直接找人</span>
        <span class="faq-scene__mark" aria-hidden="true"></span>
      </summary>
      <div class="faq-scene__body">
        <div class="faq-scene__aside">
          <p class="faq-scene__tag">联系渠道</p>
          <p class="faq-scene__hint">赛事资料、订阅规则、登录问题，走邮件比电话更容易说清楚细节。</p>
        </div>
        <div class="faq-scene__main">
          <p class="faq-contact__line">客服邮箱：<a class="yrb-link" href="mailto:service@flip-28tiyu.com.cn">service@flip-28tiyu.com.cn</a></p>
          <p class="faq-contact__line">客服电话：<b class="yrb-num">13794635844</b>，工作日 <b class="yrb-num">9:00</b> 至 <b class="yrb-num">18:00</b> 在线。</p>
          <p>来函时把账号、涉及的赛事与赛季、具体卡在哪一步写清楚，处理会顺畅很多。完整的提交要求与商务对接方式，可以在<a class="yrb-link" href="/connect/">联系品牌</a>页看到；资料引用与转载的约定则在<a class="yrb-link" href="/instructions/">使用说明</a>页。</p>
        </div>
      </div>
    </details>

  </div>

  <a class="faq-backtop" href="#tutorial-index">回到场景索引</a>
</main>

.page-faq {
  background: var(--cream-50);
  color: var(--text-900);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.page-faq .faq-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 44px);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(18px, 2.4vw, 30px);
  align-items: end;
}

.page-faq .faq-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 12px 0 18px;
  max-width: 16em;
}

.page-faq .faq-hero__lead .yrb-lead {
  max-width: 40em;
}

.page-faq .faq-hero__panel {
  background: var(--ink-900);
  color: var(--cyan-200);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hair-cyan);
}

.page-faq .faq-hero__panel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 18px;
}

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

.page-faq .faq-hero__panel-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--hair-cyan);
  padding-bottom: 14px;
}

.page-faq .faq-hero__panel-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-faq .faq-hero__panel-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-400);
  letter-spacing: 0.02em;
}

.page-faq .faq-hero__panel-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-100);
}

.page-faq .faq-hero__panel-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cyan-200);
  opacity: 0.78;
}

.page-faq .faq-quicknav {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--cream-50);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 12px 0 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.page-faq .faq-quicknav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss-500);
  margin: 0 0 10px;
}

.page-faq .faq-quicknav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-quicknav__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--cream-100);
  color: var(--text-900);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out,
    border-color var(--t-fast) ease-out;
}

.page-faq .faq-chip__no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--moss-500);
  letter-spacing: 0.06em;
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  background: var(--ink-900);
  color: var(--cyan-400);
  border-color: var(--ink-900);
}

.page-faq .faq-chip:hover .faq-chip__no,
.page-faq .faq-chip:focus-visible .faq-chip__no {
  color: var(--cyan-200);
}

.page-faq .faq-scenes {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}

.page-faq .faq-scene {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--cream-100);
  overflow: hidden;
  transition: border-color var(--t-base) ease-out;
}

.page-faq .faq-scene::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cyan-400);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--t-base) ease-out;
}

.page-faq .faq-scene[open]::before {
  transform: scaleY(1);
}

.page-faq .faq-scene:hover,
.page-faq .faq-scene:target {
  border-color: var(--cyan-400);
}

.page-faq .faq-scene__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 34px);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  transition: background var(--t-fast) ease-out;
}

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

.page-faq .faq-scene__head:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: -3px;
}

.page-faq .faq-scene__head:hover {
  background: rgba(184, 247, 229, 0.28);
}

.page-faq .faq-scene__no {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--moss-500);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  background: var(--cream-50);
}

.page-faq .faq-scene[open] .faq-scene__no {
  color: var(--ink-900);
  border-color: var(--cyan-400);
  background: var(--cyan-400);
}

.page-faq .faq-scene__title {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-scene__mark {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--cream-50);
}

.page-faq .faq-scene__mark::before,
.page-faq .faq-scene__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink-900);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) ease-out, background var(--t-base) ease-out;
}

.page-faq .faq-scene__mark::before {
  width: 10px;
  height: 1.5px;
}

.page-faq .faq-scene__mark::after {
  width: 1.5px;
  height: 10px;
}

.page-faq .faq-scene[open] .faq-scene__mark {
  border-color: var(--ink-900);
  background: var(--ink-900);
}

.page-faq .faq-scene[open] .faq-scene__mark::before,
.page-faq .faq-scene[open] .faq-scene__mark::after {
  background: var(--cyan-400);
}

.page-faq .faq-scene[open] .faq-scene__mark::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.page-faq .faq-scene__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 34px);
  padding: 0 clamp(20px, 3vw, 34px) clamp(24px, 3vw, 36px);
}

.page-faq .faq-scene__aside {
  border-top: 2px solid var(--cyan-400);
  padding-top: 14px;
}

.page-faq .faq-scene__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin: 0 0 8px;
}

.page-faq .faq-scene__hint {
  font-size: 14px;
  line-height: 1.72;
  color: var(--moss-500);
  margin: 0;
}

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

.page-faq .faq-steps__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.page-faq .faq-steps__item p {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.page-faq .faq-steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--cyan-200);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}

.page-faq .faq-steps__item:hover .faq-steps__no {
  background: var(--orange-500);
  color: var(--cream-50);
}

.page-faq .faq-timeline {
  margin-top: 22px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--cyan-200);
}

.page-faq .faq-timeline__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 14px;
}

.page-faq .faq-timeline__track {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--cyan-400) 0%,
    var(--cyan-400) 70%,
    var(--orange-500) 70%,
    var(--orange-500) 100%
  );
  opacity: 0.94;
}

.page-faq .faq-timeline__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 14px;
}

.page-faq .faq-timeline__mark {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.6;
}

.page-faq .faq-timeline__mark--orange {
  color: var(--orange-500);
}

.page-faq .faq-timeline__mark--cyan {
  color: var(--cyan-400);
}

.page-faq .faq-figure {
  margin: 22px 0 0;
}

.page-faq .faq-callout {
  margin-top: 22px;
}

.page-faq .faq-callout__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-faq .faq-callout__list li {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-900);
}

.page-faq .faq-contact__line {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 10px;
}

.page-faq .faq-contact__line .yrb-num {
  color: var(--orange-500);
}

.page-faq .faq-scene--final {
  background: var(--cream-50);
}

.page-faq .faq-backtop {
  position: fixed;
  right: clamp(14px, 3vw, 30px);
  bottom: clamp(14px, 3vw, 30px);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--cyan-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--hair-cyan);
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out,
    border-color var(--t-fast) ease-out;
}

.page-faq .faq-backtop:hover,
.page-faq .faq-backtop:focus-visible {
  background: var(--cyan-400);
  color: var(--ink-900);
  border-color: var(--cyan-400);
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-faq .faq-scene__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  }

  .page-faq .faq-scene__aside {
    border-top: 0;
    border-left: 3px solid var(--cyan-400);
    padding-top: 0;
    padding-left: 18px;
  }

  .page-faq .faq-quicknav__list {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .page-faq .faq-steps__item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
  }

  .page-faq .faq-hero__panel-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .page-faq .faq-scene__head {
    flex-wrap: wrap;
  }

  .page-faq .faq-scene__mark {
    order: -1;
  }

  .page-faq .faq-backtop {
    padding: 10px 16px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-scene::before,
  .page-faq .faq-scene__mark::before,
  .page-faq .faq-scene__mark::after,
  .page-faq .faq-chip,
  .page-faq .faq-steps__no,
  .page-faq .faq-backtop {
    transition: none;
  }
}
<<<END>>>

.page-faq {
  --moss-gray-500: currentColor;
}