.page-faq {
  background: var(--ink);
  color: var(--fog);
  overflow-x: clip;
}

.page-faq a:focus-visible,
.page-faq button:focus-visible,
.page-faq summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-faq .faq-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(36px, 7vw, 88px));
  padding-bottom: clamp(48px, 9vw, 112px);
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(200, 255, 61, 0.1), transparent 55%),
    radial-gradient(90% 70% at 8% 92%, rgba(31, 58, 95, 0.5), transparent 62%),
    linear-gradient(160deg, var(--ink) 12%, var(--pine) 72%, var(--pine-2));
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-40), transparent);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.page-faq .breadcrumbs {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-faq .faq-hero-copy .lede {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--fog-70);
}

.page-faq .faq-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.page-faq .faq-hero-visual {
  position: relative;
  min-width: 0;
}

.page-faq .faq-hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.85);
}

.page-faq .faq-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-faq .faq-version-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 14, 0.84);
  border: 1px solid var(--lime-40);
  color: var(--fog-70);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.page-faq .faq-version-tag strong {
  color: var(--lime);
  font-size: 14px;
  text-shadow: 0 0 14px rgba(200, 255, 61, 0.36);
}

.page-faq .faq-block {
  padding-block: clamp(56px, 9vw, 120px);
}

.page-faq .faq-block--soft {
  background: linear-gradient(180deg, var(--pine) 0%, var(--ink) 100%);
}

.page-faq .faq-block--indigo {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(31, 58, 95, 0.55), transparent 60%),
    linear-gradient(150deg, var(--pine) 0%, var(--pine-2) 55%, var(--ink) 100%);
}

.page-faq .eyebrow {
  margin-bottom: 10px;
}

.page-faq .section-title {
  margin: 0 0 16px;
}

.page-faq .faq-start-grid {
  display: grid;
  gap: clamp(32px, 6vw, 64px);
}

.page-faq .faq-start-copy .body-text {
  color: var(--fog-70);
  margin-bottom: 24px;
}

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

.page-faq .faq-path-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-faq .faq-path-step:hover {
  border-color: var(--lime-40);
  background: rgba(200, 255, 61, 0.05);
}

.page-faq .faq-path-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 100%;
  width: 2px;
  height: 16px;
  background: var(--lime-40);
}

.page-faq .faq-step-num {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lime-14);
  border: 1px solid var(--lime-40);
  color: var(--lime);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
}

.page-faq .faq-path-step h3 {
  margin: 2px 0 6px;
  font-size: 1.06rem;
  color: var(--fog);
}

.page-faq .faq-path-step p {
  margin: 0;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-inline-link {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-40);
}

.page-faq .faq-inline-link:hover {
  border-bottom-color: var(--lime);
}

.page-faq .faq-split,
.page-faq .faq-feedback-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-faq .faq-split-copy .body-text {
  color: var(--fog-70);
}

.page-faq .faq-split-copy .note {
  margin-top: 24px;
  max-width: 54ch;
}

.page-faq .faq-list {
  border-top: 1px solid var(--fog-14);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--fog-14);
}

.page-faq .faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  font-weight: 500;
  color: var(--fog);
  transition: color 0.2s ease;
}

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

.page-faq .faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--fog-40);
  color: var(--lime);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

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

.page-faq .faq-item summary:hover::after {
  border-color: var(--lime-40);
}

.page-faq .faq-item[open] summary::after {
  content: "−";
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.page-faq .faq-answer {
  padding: 0 4px 22px;
  color: var(--fog-70);
}

.page-faq .faq-answer p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
}

.page-faq .faq-coverage-grid {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.page-faq .faq-coverage-copy .body-text {
  color: var(--fog-70);
}

.page-faq .faq-coverage-copy .btn {
  margin-top: 26px;
}

.page-faq .faq-league-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}

.page-faq .faq-league-list li {
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--indigo);
  border: 1px solid var(--fog-14);
  color: var(--fog);
  font-size: 14px;
  letter-spacing: 0.03em;
}

.page-faq .faq-filter-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.page-faq .faq-filter-list li {
  position: relative;
  padding-left: 22px;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-filter-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
  transform: rotate(45deg);
}

.page-faq .faq-coverage-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
}

.page-faq .faq-coverage-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-faq .faq-feedback-grid .body-text {
  color: var(--fog-70);
}

.page-faq .faq-feedback-grid .btn {
  margin-top: 26px;
}

.page-faq .faq-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .faq-flow li {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--pine-2);
  border: 1px solid var(--fog-14);
}

.page-faq .faq-flow-num {
  display: block;
  margin-bottom: 8px;
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.page-faq .faq-flow strong {
  display: block;
  margin-bottom: 5px;
  color: var(--fog);
  font-size: 15px;
}

.page-faq .faq-flow-desc {
  display: block;
  color: var(--fog-70);
  font-size: 13.5px;
  line-height: 1.65;
}

.page-faq .faq-support-panel {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(24px, 5vw, 48px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--lime-40);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(200, 255, 61, 0.1), transparent 60%),
    linear-gradient(140deg, var(--pine-2) 0%, var(--pine) 55%, var(--ink) 100%);
}

.page-faq .faq-support-panel .body-text {
  color: var(--fog-70);
}

.page-faq .faq-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-contact-card {
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--fog-14);
  background: rgba(11, 15, 14, 0.44);
}

.page-faq .faq-contact-title {
  margin: 0;
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-faq .faq-contact-card .contact-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.page-faq .faq-contact-card .contact-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fog-14);
}

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

.page-faq .faq-contact-card .contact-label {
  display: block;
  color: var(--moss);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.page-faq .faq-contact-card .contact-value {
  display: block;
  margin-top: 4px;
  color: var(--fog);
  word-break: break-word;
}

.page-faq .faq-contact-card .contact-value a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-40);
}

.page-faq .faq-contact-card .contact-value a:hover {
  border-bottom-color: var(--lime);
}

.page-faq .faq-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-faq .copy-btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lime-40);
  background: transparent;
  color: var(--lime);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-faq .copy-btn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.page-faq .faq-device-layout {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-faq .faq-device-layout .body-text {
  color: var(--fog-70);
}

.page-faq .faq-device-layout .body-text + .body-text {
  margin-top: 14px;
}

.page-faq .faq-spec-list {
  margin: 0;
  padding: 0;
}

.page-faq .faq-spec-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--fog-14);
}

.page-faq .faq-spec-row:last-child {
  border-bottom: 1px solid var(--fog-14);
}

.page-faq .faq-spec-row dt {
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-faq .faq-spec-row dd {
  margin: 0;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-end-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 40px);
}

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

  .page-faq .faq-spec-row {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

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

  .page-faq .faq-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-faq .faq-coverage-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-faq .faq-feedback-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .page-faq .faq-support-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-faq .faq-device-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .page-faq .faq-hero-visual {
    transform: translateY(18px);
  }
}

@media (max-width: 479px) {
  .page-faq .faq-path-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .page-faq .faq-step-num {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .page-faq .faq-path-step:not(:last-child)::after {
    left: 37px;
  }

  .page-faq .faq-hero-actions .btn,
  .page-faq .faq-support-actions .btn,
  .page-faq .faq-end-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

<main id="main-content" class="page-faq">
  <section class="faq-hero bleed-top" aria-labelledby="faq-title">
    <div class="container faq-hero-grid">
      <div class="faq-hero-copy">
        <nav class="breadcrumbs" aria-label="面包屑">
          <ol>
            <li><a class="breadcrumb-link" href="/">首页</a></li>
            <li><a class="breadcrumb-link" href="/guide/" aria-current="page">使用指南</a></li>
          </ol>
        </nav>
        <p class="eyebrow">使用指南 / 看台换新</p>
        <h1 id="faq-title" class="display-title">看台换新后，第一场比赛这样看</h1>
        <p class="lede">9博体育看台把换新后的入口收成三步：先选联赛和球队，再打开场次卡，比分与赛后数据就位。PC 大屏复盘、手机上补看，或者赛后翻数据卡，都可以按下面的路径直接操作。</p>
        <div class="faq-hero-actions">
          <a class="btn btn-lime" href="#quick-start">从三步开始</a>
          <a class="btn btn-ghost" href="#support">联系客服</a>
        </div>
        <div class="faq-chips chip-row" aria-label="页面内快速跳转">
          <a class="chip" href="#refresh">比分刷新</a>
          <a class="chip" href="#coverage">适配清单</a>
          <a class="chip" href="#feedback">订阅反馈</a>
          <a class="chip" href="#devices">设备与版本</a>
        </div>
      </div>
      <div class="faq-hero-visual">
        <figure class="faq-hero-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="由看台台阶抽象出的快速上手三步路径，青柠色节点在深色底上依次点亮">
        </figure>
        <div class="faq-version-tag"><span>当前版本</span> <strong>V3.2</strong></div>
      </div>
    </div>
  </section>

  <section id="quick-start" class="faq-block faq-block--soft" aria-labelledby="quick-start-title">
    <div class="container">
      <div class="faq-start-grid">
        <div class="faq-start-copy">
          <p class="eyebrow">01 / 快速上手</p>
          <h2 id="quick-start-title" class="section-title">选联赛、开卡片、看数据</h2>
          <p class="body-text">在适配清单里选定联赛和球队，场次卡会把关注的比赛收拢到一屏；点进卡片，比分和赛后数据就按顺序展开。第一次来也能照着走完。</p>
          <a class="btn btn-ghost" href="/tools/">查看换新看台</a>
        </div>
        <ol class="faq-path">
          <li class="faq-path-step">
            <span class="faq-step-num" aria-hidden="true">01</span>
            <div>
              <h3>先定联赛与球队</h3>
              <p>在适配清单里点选联赛标签，或者直接按球队名查找，场次卡会跟着筛选结果收拢，不用在列表里来回翻。</p>
            </div>
          </li>
          <li class="faq-path-step">
            <span class="faq-step-num" aria-hidden="true">02</span>
            <div>
              <h3>打开关注的场次卡</h3>
              <p>点进卡片后，当前比分、半场比分和关键事件入口都在同一张卡上，向下轻滑即可看全。</p>
            </div>
          </li>
          <li class="faq-path-step">
            <span class="faq-step-num" aria-hidden="true">03</span>
            <div>
              <h3>看比分，再去翻赛后数据</h3>
              <p>比赛进行中看即时刷新的比分；赛后到 <a class="faq-inline-link" href="/notes/">内容笔记</a> 翻看赛后数据卡，按赛季、联赛、球队、场次逐层找即可。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section id="refresh" class="faq-block" aria-labelledby="refresh-title">
    <div class="container">
      <div class="faq-split">
        <div class="faq-split-copy">
          <p class="eyebrow">02 / 比分与赛果</p>
          <h2 id="refresh-title" class="section-title">比分刷新时，你先看到什么</h2>
          <p class="body-text">看台卡上的比分会随场次即时刷新，单场比分变化在 5 秒内更新。遇到半场、关键事件或赛后数据，按下面的问答走一遍就能找到。</p>
          <div class="note">正在进行的场次直接显示当前比分；还没开赛的场次可以先看对阵与开赛时间，开赛后场次卡转入即时刷新。</div>
        </div>
        <div class="faq-list">
          <details class="faq-item" open>
            <summary>比分多久刷新一次？</summary>
            <div class="faq-answer">
              <p>赛果与比分按场次即时刷新，单场比分变化会在 5 秒内更新到看台卡上，你不用手动刷新页面来确认当前比分。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>半场比分和关键事件在哪里看？</summary>
            <div class="faq-answer">
              <p>打开场次卡后，半场比分与关键事件和当前比分在同一张卡片里，顺着比分栏往下看就能找到对应时段的信息。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>赛后数据卡包含哪些内容？</summary>
            <div class="faq-answer">
              <p>每张赛后数据卡包含比分、半场比分、射门、控球、角球、犯规、黄牌、换人、关键事件和场次时间，共 10 个维度。赛后 24 小时内更新，适合按场次做复盘。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>看台卡上的时间和场次对不上怎么办？</summary>
            <div class="faq-answer">
              <p>先确认联赛筛选是否选在当前联赛，再核对场次卡上的对阵名称。如果仍然对不上，可以通过客服邮箱把场次名称发给我们，工作日 9:00–18:00 内会有人跟进。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section id="coverage" class="faq-block faq-block--indigo" aria-labelledby="coverage-title">
    <div class="container">
      <div class="faq-coverage-grid">
        <div class="faq-coverage-copy">
          <p class="eyebrow">03 / 适配清单</p>
          <h2 id="coverage-title" class="section-title">8 个联赛与杯赛，按标签收拢场次</h2>
          <p class="body-text">适配清单固定覆盖英超、西甲、意甲、德甲、法甲、欧冠、中超、亚冠 8 个联赛与杯赛范围。先选联赛再定位球队，场次卡会随之收拢，想换其他联赛重新点选对应标签即可。</p>
          <ul class="faq-league-list" aria-label="适配清单覆盖的联赛与杯赛范围">
            <li>英超</li>
            <li>西甲</li>
            <li>意甲</li>
            <li>德甲</li>
            <li>法甲</li>
            <li>欧冠</li>
            <li>中超</li>
            <li>亚冠</li>
          </ul>
          <ul class="faq-filter-list">
            <li>点联赛胶囊：把场次卡缩小到单个联赛或杯赛范围。</li>
            <li>按球队名找：定位关注球队的场次，再打开卡片查看比分与赛后数据。</li>
            <li>换联赛：重新点选对应标签，清单回到该联赛的场次列表。</li>
          </ul>
          <a class="btn btn-ghost" href="/tools/">打开完整适配清单</a>
        </div>
        <figure class="faq-coverage-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="新换看台座椅与通道细节，暖铜色灯光沿阶梯扫过" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section id="feedback" class="faq-block faq-block--soft" aria-labelledby="feedback-title">
    <div class="container">
      <div class="faq-feedback-grid">
        <div>
          <p class="eyebrow">04 / 订阅反馈</p>
          <h2 id="feedback-title" class="section-title">提交订阅球队反馈，附上手机号后四位</h2>
          <p class="body-text">提交订阅球队反馈时，带上注册手机号后四位，我们就能顺着订阅记录找到你关心的场次。反馈支持按球队、联赛、场次三个维度筛选。</p>
          <ol class="faq-flow">
            <li>
              <span class="faq-flow-num">01</span>
              <strong>提交</strong>
              <span class="faq-flow-desc">写下球队、联赛或场次，并附注册手机号后四位。</span>
            </li>
            <li>
              <span class="faq-flow-num">02</span>
              <strong>受理</strong>
              <span class="faq-flow-desc">工作日 9:00–18:00 内进入受理队列。</span>
            </li>
            <li>
              <span class="faq-flow-num">03</span>
              <strong>数据核对</strong>
              <span class="faq-flow-desc">对照场次与球队信息，确认反馈指向的比赛。</span>
            </li>
            <li>
              <span class="faq-flow-num">04</span>
              <strong>回复</strong>
              <span class="faq-flow-desc">按你留下的联系方式给出处理结果。</span>
            </li>
          </ol>
          <a class="btn btn-lime" href="/find-us/">去提交订阅反馈</a>
        </div>
        <div class="faq-list">
          <details class="faq-item" open>
            <summary>提交订阅球队反馈时要附什么？</summary>
            <div class="faq-answer">
              <p>请附注册手机号后四位，方便我们对应到你的订阅记录；把球队名、联赛或场次名称一并写清，处理会更快。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>反馈能按什么筛选？</summary>
            <div class="faq-answer">
              <p>支持按球队、联赛、场次三个维度筛选，便于你定位具体一场比赛或一支球队的反馈记录。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>提交之后多久有结果？</summary>
            <div class="faq-answer">
              <p>反馈按提交、受理、数据核对、回复四步处理，工作日 9:00–18:00 内受理，回复会通过你留下的联系方式发出。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>除了邮箱，还能通过哪里提交？</summary>
            <div class="faq-answer">
              <p>可以拨打客服电话 400-7105-5202，或到 <a class="faq-inline-link" href="/find-us/">找到我们</a> 查看客服通道和运营中心地址。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section id="support" class="faq-block" aria-labelledby="support-title">
    <div class="container">
      <div class="faq-support-panel">
        <div>
          <p class="eyebrow">05 / 客服时间</p>
          <h2 id="support-title" class="section-title">工作日 9:00–18:00，电话和邮箱都有人看</h2>
          <p class="body-text">需要人工协助时，可以直接拨打客服电话，或把问题发到客服邮箱。涉及订阅球队反馈的邮件，请附注册手机号后四位，回复时我们就能直接对应到你的记录。</p>
          <div class="faq-support-actions">
            <a class="btn btn-lime" href="tel:400-7105-5202">拨打 400-7105-5202</a>
            <a class="btn btn-ghost" href="mailto:service@stadium-jiubo.com.cn">发邮件给客服</a>
          </div>
        </div>
        <div class="faq-contact-card">
          <p class="faq-contact-title">联系通道</p>
          <div class="contact-list">
            <div class="contact-item">
              <span class="contact-label">客服电话</span>
              <span class="contact-value"><a href="tel:400-7105-5202">400-7105-5202</a></span>
            </div>
            <div class="contact-item">
              <span class="contact-label">客服邮箱</span>
              <span class="contact-value"><a href="mailto:service@stadium-jiubo.com.cn">service@stadium-jiubo.com.cn</a></span>
            </div>
            <div class="contact-item">
              <span class="contact-label">支持邮箱</span>
              <span class="contact-value"><a href="mailto:support@stadium-jiubo.com.cn">support@stadium-jiubo.com.cn</a></span>
            </div>
            <div class="contact-item">
              <span class="contact-label">服务时间</span>
              <span class="contact-value">工作日 9:00–18:00</span>
            </div>
          </div>
          <div class="faq-copy-row">
            <button type="button" class="copy-btn" data-copy="service@stadium-jiubo.com.cn">复制客服邮箱</button>
            <button type="button" class="copy-btn" data-copy="400-7105-5202">复制客服电话</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="devices" class="faq-block faq-block--soft" aria-labelledby="devices-title">
    <div class="container">
      <div class="faq-device-layout">
        <div>
          <p class="eyebrow">06 / 设备与版本</p>
          <h2 id="devices-title" class="section-title">PC 端优先换新，移动端照样顺手</h2>
          <p class="body-text">PC 端看台已完成第 3 次大规模换新，当前版本为 V3.2，场次卡和适配清单在同一屏展开；移动端保留场次卡横向滑动，点击后同样能看比分与赛后数据。</p>
          <p class="body-text">换新计划分三阶段推进：分区座椅翻新、比分刷新链路升级、适配清单与内容目录合并上线。更细的使用规则见 <a class="faq-inline-link" href="/usage/">使用说明</a>。</p>
        </div>
        <dl class="faq-spec-list">
          <div class="faq-spec-row">
            <dt>PC 端</dt>
            <dd>已完成第 3 次大规模换新，当前版本 V3.2；场次卡与适配清单同屏展开。</dd>
          </div>
          <div class="faq-spec-row">
            <dt>移动端</dt>
            <dd>保留场次卡横向滑动，页面单列阅读，比分和赛后数据入口保持一致。</dd>
          </div>
          <div class="faq-spec-row">
            <dt>换新阶段</dt>
            <dd>分区座椅翻新 → 比分刷新链路升级 → 适配清单与内容目录合并上线。</dd>
          </div>
          <div class="faq-spec-row">
            <dt>数据节奏</dt>
            <dd>赛后 2 小时内更新赛果与比分，赛后 24 小时内更新赛后数据卡。</dd>
          </div>
        </dl>
      </div>
      <div class="faq-end-cta">
        <a class="btn btn-lime" href="/tools/">去换新看台试一遍</a>
        <a class="btn btn-quiet" href="/notes/">翻看内容笔记</a>
      </div>
    </div>
  </section>
</main>

.page-faq {
  background: var(--ink);
  color: var(--fog);
  overflow-x: clip;
}

.page-faq a:focus-visible,
.page-faq button:focus-visible,
.page-faq summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-faq .faq-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(36px, 7vw, 88px));
  padding-bottom: clamp(48px, 9vw, 112px);
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(200, 255, 61, 0.1), transparent 55%),
    radial-gradient(90% 70% at 8% 92%, rgba(31, 58, 95, 0.5), transparent 62%),
    linear-gradient(160deg, var(--ink) 12%, var(--pine) 72%, var(--pine-2));
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-40), transparent);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.page-faq .breadcrumbs {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-faq .faq-hero-copy .lede {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--fog-70);
}

.page-faq .faq-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.page-faq .faq-hero-visual {
  position: relative;
  min-width: 0;
}

.page-faq .faq-hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.85);
}

.page-faq .faq-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-faq .faq-version-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 14, 0.84);
  border: 1px solid var(--lime-40);
  color: var(--fog-70);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.page-faq .faq-version-tag strong {
  color: var(--lime);
  font-size: 14px;
  text-shadow: 0 0 14px rgba(200, 255, 61, 0.36);
}

.page-faq .faq-block {
  padding-block: clamp(56px, 9vw, 120px);
}

.page-faq .faq-block--soft {
  background: linear-gradient(180deg, var(--pine) 0%, var(--ink) 100%);
}

.page-faq .faq-block--indigo {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(31, 58, 95, 0.55), transparent 60%),
    linear-gradient(150deg, var(--pine) 0%, var(--pine-2) 55%, var(--ink) 100%);
}

.page-faq .eyebrow {
  margin-bottom: 10px;
}

.page-faq .section-title {
  margin: 0 0 16px;
}

.page-faq .faq-start-grid {
  display: grid;
  gap: clamp(32px, 6vw, 64px);
}

.page-faq .faq-start-copy .body-text {
  color: var(--fog-70);
  margin-bottom: 24px;
}

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

.page-faq .faq-path-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-faq .faq-path-step:hover {
  border-color: var(--lime-40);
  background: rgba(200, 255, 61, 0.05);
}

.page-faq .faq-path-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 100%;
  width: 2px;
  height: 16px;
  background: var(--lime-40);
}

.page-faq .faq-step-num {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lime-14);
  border: 1px solid var(--lime-40);
  color: var(--lime);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
}

.page-faq .faq-path-step h3 {
  margin: 2px 0 6px;
  font-size: 1.06rem;
  color: var(--fog);
}

.page-faq .faq-path-step p {
  margin: 0;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-inline-link {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-40);
}

.page-faq .faq-inline-link:hover {
  border-bottom-color: var(--lime);
}

.page-faq .faq-split,
.page-faq .faq-feedback-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-faq .faq-split-copy .body-text {
  color: var(--fog-70);
}

.page-faq .faq-split-copy .note {
  margin-top: 24px;
  max-width: 54ch;
}

.page-faq .faq-list {
  border-top: 1px solid var(--fog-14);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--fog-14);
}

.page-faq .faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  font-weight: 500;
  color: var(--fog);
  transition: color 0.2s ease;
}

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

.page-faq .faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--fog-40);
  color: var(--lime);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

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

.page-faq .faq-item summary:hover::after {
  border-color: var(--lime-40);
}

.page-faq .faq-item[open] summary::after {
  content: "−";
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.page-faq .faq-answer {
  padding: 0 4px 22px;
  color: var(--fog-70);
}

.page-faq .faq-answer p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
}

.page-faq .faq-coverage-grid {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.page-faq .faq-coverage-copy .body-text {
  color: var(--fog-70);
}

.page-faq .faq-coverage-copy .btn {
  margin-top: 26px;
}

.page-faq .faq-league-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}

.page-faq .faq-league-list li {
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--indigo);
  border: 1px solid var(--fog-14);
  color: var(--fog);
  font-size: 14px;
  letter-spacing: 0.03em;
}

.page-faq .faq-filter-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.page-faq .faq-filter-list li {
  position: relative;
  padding-left: 22px;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-filter-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
  transform: rotate(45deg);
}

.page-faq .faq-coverage-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--fog-14);
  background: var(--pine-2);
}

.page-faq .faq-coverage-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-faq .faq-feedback-grid .body-text {
  color: var(--fog-70);
}

.page-faq .faq-feedback-grid .btn {
  margin-top: 26px;
}

.page-faq .faq-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .faq-flow li {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--pine-2);
  border: 1px solid var(--fog-14);
}

.page-faq .faq-flow-num {
  display: block;
  margin-bottom: 8px;
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.page-faq .faq-flow strong {
  display: block;
  margin-bottom: 5px;
  color: var(--fog);
  font-size: 15px;
}

.page-faq .faq-flow-desc {
  display: block;
  color: var(--fog-70);
  font-size: 13.5px;
  line-height: 1.65;
}

.page-faq .faq-support-panel {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(24px, 5vw, 48px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--lime-40);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(200, 255, 61, 0.1), transparent 60%),
    linear-gradient(140deg, var(--pine-2) 0%, var(--pine) 55%, var(--ink) 100%);
}

.page-faq .faq-support-panel .body-text {
  color: var(--fog-70);
}

.page-faq .faq-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-contact-card {
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--fog-14);
  background: rgba(11, 15, 14, 0.44);
}

.page-faq .faq-contact-title {
  margin: 0;
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-faq .faq-contact-card .contact-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.page-faq .faq-contact-card .contact-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fog-14);
}

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

.page-faq .faq-contact-card .contact-label {
  display: block;
  color: var(--moss);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.page-faq .faq-contact-card .contact-value {
  display: block;
  margin-top: 4px;
  color: var(--fog);
  word-break: break-word;
}

.page-faq .faq-contact-card .contact-value a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-40);
}

.page-faq .faq-contact-card .contact-value a:hover {
  border-bottom-color: var(--lime);
}

.page-faq .faq-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-faq .copy-btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lime-40);
  background: transparent;
  color: var(--lime);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-faq .copy-btn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.page-faq .faq-device-layout {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-faq .faq-device-layout .body-text {
  color: var(--fog-70);
}

.page-faq .faq-device-layout .body-text + .body-text {
  margin-top: 14px;
}

.page-faq .faq-spec-list {
  margin: 0;
  padding: 0;
}

.page-faq .faq-spec-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--fog-14);
}

.page-faq .faq-spec-row:last-child {
  border-bottom: 1px solid var(--fog-14);
}

.page-faq .faq-spec-row dt {
  color: var(--copper);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-faq .faq-spec-row dd {
  margin: 0;
  color: var(--fog-70);
  line-height: 1.7;
}

.page-faq .faq-end-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 40px);
}

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

  .page-faq .faq-spec-row {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

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

  .page-faq .faq-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-faq .faq-coverage-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-faq .faq-feedback-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .page-faq .faq-support-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-faq .faq-device-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .page-faq .faq-hero-visual {
    transform: translateY(18px);
  }
}

@media (max-width: 479px) {
  .page-faq .faq-path-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .page-faq .faq-step-num {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .page-faq .faq-path-step:not(:last-child)::after {
    left: 37px;
  }

  .page-faq .faq-hero-actions .btn,
  .page-faq .faq-support-actions .btn,
  .page-faq .faq-end-cta .btn {
    width: 100%;
    justify-content: center;
  }
}