.page-faq {
  --faq-gap: clamp(12px, 2vw, 18px);
  --faq-soft: #b7c4bb;
  --faq-lede: #cfd8d0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.page-faq .faq-hero,
.page-faq .faq-section,
.page-faq .faq-group {
  scroll-margin-top: 116px;
}

.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3.5vw, 36px) 0 clamp(32px, 5.5vw, 60px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(680px 400px at 88% 4%, rgba(184, 255, 61, 0.16), transparent 62%),
    radial-gradient(520px 380px at 0% 100%, rgba(22, 53, 43, 0.95), transparent 72%),
    var(--ink);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  left: 38%;
  right: -14%;
  bottom: -58%;
  height: 240px;
  transform: skewY(-7deg);
  background: linear-gradient(90deg, rgba(184, 255, 61, 0.09), transparent 78%);
  pointer-events: none;
}

.page-faq .faq-hero > .shell {
  position: relative;
  z-index: 1;
}

.page-faq .breadcrumb {
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
}

.page-faq .faq-hero__copy {
  min-width: 0;
}

.page-faq .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 14px;
}

.page-faq h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 6.2vw, 66px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
  color: var(--paper);
  text-wrap: balance;
}

.page-faq h1 em {
  font-style: normal;
  color: var(--lime);
}

.page-faq .faq-hero__lede {
  max-width: 48ch;
  margin: 0 0 24px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--faq-lede);
}

.page-faq .faq-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-faq .faq-hero__figure {
  margin: 0;
  position: relative;
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 85% 100%, 0 100%);
  filter: saturate(0.92) contrast(1.05);
}

.page-faq .faq-hero__figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--fog);
}

.page-faq .faq-section {
  padding: clamp(32px, 5.5vw, 68px) 0 0;
}

.page-faq .faq-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(18px, 3vw, 28px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-head__no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-faq .faq-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 3.4vw, 34px);
  line-height: 1.22;
  color: var(--paper);
}

.page-faq .diag-grid {
  display: grid;
  gap: var(--faq-gap);
  grid-template-columns: minmax(0, 1fr);
}

.page-faq .diag-card {
  display: block;
  position: relative;
  padding: 16px 16px 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.page-faq .diag-card--lime {
  border-top-color: var(--lime);
}

.page-faq .diag-card--amber {
  border-top-color: var(--amber);
}

.page-faq .diag-card--fog {
  border-top-color: var(--fog);
}

.page-faq .diag-card:hover,
.page-faq .diag-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--lime);
  background: #121d18;
}

.page-faq .diag-card:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.page-faq .diag-card__no {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fog);
}

.page-faq .diag-card__title {
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--paper);
}

.page-faq .diag-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--fog);
}

.page-faq .faq-layout {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-faq .faq-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 16px;
}

.page-faq .faq-side__title {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
}

.page-faq .faq-side__title--sub {
  margin-top: 18px;
}

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

.page-faq .faq-side__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #c8d3cb;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-faq .faq-side__link:hover,
.page-faq .faq-side__link:focus-visible {
  color: var(--lime-soft);
  border-left-color: var(--lime);
  background: rgba(184, 255, 61, 0.06);
}

.page-faq .faq-side__link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-faq .faq-side__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
}

.page-faq .faq-main {
  min-width: 0;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(22px, 3.5vw, 34px);
}

.page-faq .faq-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.3;
  color: var(--paper);
}

.page-faq .faq-group__no {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(184, 255, 61, 0.42);
  background: rgba(184, 255, 61, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
}

.page-faq .faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.page-faq .faq-item + .faq-item {
  margin-top: 8px;
}

.page-faq .faq-item:hover {
  border-color: rgba(184, 255, 61, 0.45);
}

.page-faq .faq-item[open] {
  border-color: var(--lime);
  background: #0d1714;
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  transition: color 0.2s var(--ease);
}

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

.page-faq .faq-item > summary::marker {
  content: "";
}

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

.page-faq .faq-item > summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-faq .faq-item > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 7px 2px 0 auto;
  border-right: 1.5px solid var(--lime);
  border-bottom: 1.5px solid var(--lime);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease), margin 0.25s var(--ease);
}

.page-faq .faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 12px;
}

.page-faq .faq-item__no {
  flex: none;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fog);
}

.page-faq .faq-item__q {
  min-width: 0;
}

.page-faq .faq-item__body {
  padding: 14px 16px 18px 45px;
  border-top: 1px solid rgba(44, 74, 63, 0.6);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--faq-soft);
}

.page-faq .faq-item__body p {
  margin: 0 0 10px;
}

.page-faq .faq-item__body p:last-child {
  margin-bottom: 0;
}

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

.page-faq .step-layout {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.page-faq .step-list {
  display: grid;
  gap: var(--faq-gap);
}

.page-faq .step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 16px;
  transition: border-color 0.25s var(--ease);
}

.page-faq .step-card:hover {
  border-color: rgba(184, 255, 61, 0.4);
}

.page-faq .step-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.page-faq .step-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: var(--paper);
}

.page-faq .step-card__list {
  counter-reset: faqstep;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-faq .step-card__list li {
  counter-increment: faqstep;
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--faq-soft);
}

.page-faq .step-card__list li::before {
  content: counter(faqstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
}

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

.page-faq .step-figure {
  margin: 0;
}

.page-faq .step-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
}

.page-faq .step-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fog);
}

.page-faq .verdict {
  display: grid;
  gap: 12px;
}

.page-faq .verdict__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 18px 16px;
}

.page-faq .verdict__col--new {
  border-top: 2px solid var(--lime);
}

.page-faq .verdict__col--old {
  border-top: 2px solid var(--amber);
}

.page-faq .verdict__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.page-faq .verdict__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 23px);
  line-height: 1.3;
  color: var(--paper);
}

.page-faq .verdict__col--old .verdict__title {
  color: var(--amber);
}

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

.page-faq .verdict__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--faq-soft);
}

.page-faq .verdict__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--lime);
}

.page-faq .verdict__col--old .verdict__list li::before {
  background: var(--amber);
}

.page-faq .verdict__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  transform: rotate(90deg);
}

.page-faq .verdict__arrow svg {
  display: block;
}

.page-faq .help-bar {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 20px;
  padding: clamp(20px, 3.4vw, 34px);
  border: 1px solid rgba(242, 178, 75, 0.45);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(242, 178, 75, 0.18), transparent 66%),
    var(--ink-2);
}

.page-faq .help-bar__text {
  min-width: 0;
}

.page-faq .help-bar .eyebrow {
  color: var(--amber);
  margin-bottom: 10px;
}

.page-faq .help-bar__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.25;
  color: var(--paper);
}

.page-faq .help-bar__desc {
  margin: 0 0 16px;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--faq-soft);
}

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

.page-faq .help-bar__contact li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

.page-faq .help-bar__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fog);
}

.page-faq .help-bar__val {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--paper);
}

.page-faq .help-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-faq .faq-copy {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 16px;
  border: 1px solid rgba(242, 178, 75, 0.55);
  border-radius: var(--radius);
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-copy:hover,
.page-faq .faq-copy:focus-visible {
  background: rgba(242, 178, 75, 0.14);
}

.page-faq .faq-copy:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

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

.page-faq .help-bar__privacy {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}

.page-faq .help-bar__privacy:hover,
.page-faq .help-bar__privacy:focus-visible {
  color: var(--lime-soft);
}

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

.page-faq .next-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.page-faq .next-link:hover,
.page-faq .next-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--lime);
  background: #121d18;
}

.page-faq .next-link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.page-faq .next-link__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-faq .next-link__t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .next-link__d {
  font-size: 13px;
  line-height: 1.65;
  color: var(--fog);
}

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

  .page-faq .step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .next-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    align-items: end;
  }

  .page-faq .verdict {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: stretch;
  }

  .page-faq .verdict__arrow {
    transform: none;
  }

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

  .page-faq .help-bar__actions {
    justify-content: flex-end;
    max-width: 220px;
  }
}

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

  .page-faq .step-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.78fr);
    align-items: start;
  }

  .page-faq .next-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-side {
    position: sticky;
    top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .diag-card,
  .page-faq .faq-item,
  .page-faq .faq-item > summary::after,
  .page-faq .next-link,
  .page-faq .faq-copy {
    transition: none;
  }

  .page-faq .diag-card:hover,
  .page-faq .next-link:hover {
    transform: none;
  }
}


<main id="main-content" class="page-faq">
  <section class="faq-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑">
        <a href="/">看台首页</a>
        <span class="breadcrumb__sep">/</span>
        <span aria-current="page">问题排查</span>
      </nav>
      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="eyebrow">第12轮赛前 · 通道指引</p>
          <h1>比分进不去、版本对不上？<em>先在这里分诊</em></h1>
          <p class="faq-hero__lede">开赛前十几分钟最容易被入口绊住：比分带被页面放大挤没了、iPhone 上绕了两圈还没看到场馆、旧版资料里的字段跟新版对不齐。YABO看台按你遇到的具体情况，把判断方式和操作路径排好，照着走几步就能回到你要看的那一页。</p>
          <div class="faq-hero__cta">
            <a class="btn btn--lime" href="#diagnose">按问题分类查</a>
            <a class="btn btn--ghost" href="/trends/">直达赛前风向</a>
          </div>
        </div>
        <figure class="faq-hero__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场通道与指示牌的抽象构图，冷色灯光下多条路径指向不同入口">
          <figcaption>找到正确的入口，比在通道里多绕两圈有用得多。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-section" id="diagnose">
    <div class="shell">
      <div class="faq-head">
        <span class="faq-head__no">01</span>
        <h2 class="faq-head__title">你的问题属于哪一类</h2>
      </div>
      <div class="diag-grid">
        <a class="diag-card diag-card--lime" href="#entry">
          <span class="diag-card__no">01</span>
          <span class="tag tag--lime">可直达</span>
          <h3 class="diag-card__title">比分与轮次入口</h3>
          <p class="diag-card__desc">比分带收起后怎么找回来，第12轮对阵从哪个位置点进去。</p>
        </a>
        <a class="diag-card diag-card--lime" href="#iosvenue">
          <span class="diag-card__no">02</span>
          <span class="tag tag--lime">可直达</span>
          <h3 class="diag-card__title">场馆信息查看</h3>
          <p class="diag-card__desc">手机上看场馆要不要跳出去，页面空白或转圈时先动哪里。</p>
        </a>
        <a class="diag-card diag-card--amber" href="#legacy">
          <span class="diag-card__no">03</span>
          <span class="tag tag--amber">需对照</span>
          <h3 class="diag-card__title">旧版回看对照</h3>
          <p class="diag-card__desc">金色标签的旧版入口在哪，新旧字段怎么并排比对。</p>
        </a>
        <a class="diag-card diag-card--fog" href="#injury">
          <span class="diag-card__no">04</span>
          <span class="tag">常规</span>
          <h3 class="diag-card__title">伤停信息同步</h3>
          <p class="diag-card__desc">摘要和清单为什么先后不一，条目上的颜色标签怎么读。</p>
        </a>
      </div>
    </div>
  </section>

  <section class="faq-section" id="questions">
    <div class="shell">
      <div class="faq-head">
        <span class="faq-head__no">02</span>
        <h2 class="faq-head__title">常见问题：按场景找答案</h2>
      </div>
      <div class="faq-layout">
        <aside class="faq-side">
          <nav aria-label="问题分类导航">
            <p class="faq-side__title">问题分类</p>
            <ul class="faq-side__list">
              <li><a class="faq-side__link" href="#entry"><span class="faq-side__mark">01</span>比分与轮次入口</a></li>
              <li><a class="faq-side__link" href="#iosvenue"><span class="faq-side__mark">02</span>场馆信息查看</a></li>
              <li><a class="faq-side__link" href="#legacy"><span class="faq-side__mark">03</span>旧版回看对照</a></li>
              <li><a class="faq-side__link" href="#injury"><span class="faq-side__mark">04</span>伤停信息同步</a></li>
            </ul>
            <p class="faq-side__title faq-side__title--sub">再往下走</p>
            <ul class="faq-side__list">
              <li><a class="faq-side__link" href="#steps"><span class="faq-side__mark">→</span>分场景操作步骤</a></li>
              <li><a class="faq-side__link" href="#compare"><span class="faq-side__mark">→</span>该用新版还是旧版</a></li>
              <li><a class="faq-side__link" href="#support"><span class="faq-side__mark">→</span>联系客服</a></li>
            </ul>
          </nav>
        </aside>

        <div class="faq-main">
          <div class="faq-group" id="entry">
            <h3 class="faq-group__title"><span class="faq-group__no">A</span>比分与轮次入口</h3>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">01</span>
                <span class="faq-item__q">首页顶部的轮次和比分带，往下滚动后还能找回来吗？</span>
              </summary>
              <div class="faq-item__body">
                <p>能。第12轮对阵与实时比分入口固定在页面最上方，往下滚动时它会收起来贴着浏览器顶部，不会跟着页面滑走，随时点得回来。</p>
                <p>如果你在手机上把页面放大过，比分带会被压成两行，轮次在左边、伤停摘要链接在右边。把缩放恢复到默认比例，就能看到完整的一行。</p>
              </div>
            </details>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">02</span>
                <span class="faq-item__q">点了比分入口没有反应，先把哪几处检查一遍？</span>
              </summary>
              <div class="faq-item__body">
                <p>按顺序看三点：第一，浏览器是否开着阅读模式或极简模式，这类模式会隐藏页面顶部的固定条；第二，页面是否卡在旧缓存上，返回首页重新加载一次通常就恢复；第三，链接是从聊天软件内直接点开的，改用系统浏览器重新打开一次。</p>
                <p>三处都试过仍然打不开，把当前页面截图和发生时间发给客服邮箱，工作日 9:00–18:00 会有人跟进。</p>
              </div>
            </details>
          </div>

          <div class="faq-group" id="iosvenue">
            <h3 class="faq-group__title"><span class="faq-group__no">B</span>场馆信息查看</h3>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">03</span>
                <span class="faq-item__q">在 iPhone 上看场馆信息，需要跳到别的页面去吗？</span>
              </summary>
              <div class="faq-item__body">
                <p>不需要。iOS 端可以直接查看场馆信息，打开<a class="link-lime" href="/projects/">场馆与版本</a>，选好你要看的场馆，详细信息就在当前页展开，中途不会把你带去第三方页面。</p>
                <p>2024 年手机端界面重整过一次，iOS 上从进入页面到看到场馆信息缩到了两步，单手操作也不用反复返回。</p>
              </div>
            </details>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">04</span>
                <span class="faq-item__q">场馆页打开后一直空白或者转圈，怎么处理？</span>
              </summary>
              <div class="faq-item__body">
                <p>先换一次网络：从移动数据切到 Wi-Fi，或反过来，然后刷新页面。接着看手机是否开着低电量模式，低电量模式下部分机型会限制图片和脚本加载，暂时关掉再试。</p>
                <p>仍然不行的话，记下三样东西——手机系统版本、出问题的场馆名称、出现问题的具体时间，发给客服邮箱，我们按这组信息回查，省掉来回追问。</p>
              </div>
            </details>
          </div>

          <div class="faq-group" id="legacy">
            <h3 class="faq-group__title"><span class="faq-group__no">C</span>旧版回看对照</h3>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">05</span>
                <span class="faq-item__q">旧版回看从哪里进？为什么它是金色的？</span>
              </summary>
              <div class="faq-item__body">
                <p>旧版回看和其他入口并排放在<a class="link-lime" href="/projects/">场馆与版本</a>里，用暖琥珀金标签单独标出来，就是为了让习惯旧路径的人一眼认出来，不用在一堆入口里逐个点。</p>
                <p>旧版入口延续原有的访问路径，2023 年加入对照模式后地址没有变过，以前收藏的入口可以直接用。</p>
              </div>
            </details>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">06</span>
                <span class="faq-item__q">我该用新版还是旧版？对照模式到底有什么用？</span>
              </summary>
              <div class="faq-item__body">
                <p>日常查场馆信息、看第12轮对阵，用新版就够，路径更短、手机上更顺手。</p>
                <p>要确认旧记录里的某个字段、某一步操作位置，走旧版回看，打开对照模式后左右分屏，旧版在左、新版在右，同一个字段在两边的位置和叫法并排呈现，几分钟就能确认差异出在哪。</p>
              </div>
            </details>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">07</span>
                <span class="faq-item__q">发邮件说明旧版问题，标题和正文怎么写更快解决？</span>
              </summary>
              <div class="faq-item__body">
                <p>邮件标题里注明「旧版回看」，客服会直接分到对应的处理线上。</p>
                <p>正文写清三件事：你在对照的是哪个版本阶段（共有 3 个主要版本阶段）、卡住的是哪个字段或哪一步操作、截图是什么时候截的。信息齐了，回复一般一次就能说到点子上。</p>
              </div>
            </details>
          </div>

          <div class="faq-group" id="injury">
            <h3 class="faq-group__title"><span class="faq-group__no">D</span>伤停信息同步</h3>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">08</span>
                <span class="faq-item__q">伤停条目多久更新一次，赛前看到的是最新的吗？</span>
              </summary>
              <div class="faq-item__body">
                <p>伤停条目按赛前节点滚动同步，每日进行两次赛前摘要更新，当日主要条目平均在开赛前 6 小时完成更新。</p>
                <p>首页比分带上挂的是摘要，完整清单在<a class="link-lime" href="/trends/">赛前风向</a>页，两边内容会随着更新一起往前走。想确认某场比赛的完整情况，以赛前风向页的清单为准。</p>
              </div>
            </details>
            <details class="faq-item">
              <summary>
                <span class="faq-item__no">09</span>
                <span class="faq-item__q">伤停条目旁边的颜色标签分别代表什么？</span>
              </summary>
              <div class="faq-item__body">
                <p>青柠色表示这条跟在当前轮次的常规条目里；琥珀金表示这条牵涉出场情况，值得停下来多看两眼；雾灰色表示已经归档的历史条目，翻看旧轮次时才需要。</p>
                <p>颜色只是让你扫读时快一点，具体影响还是看条目里的文字说明。</p>
              </div>
            </details>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-section" id="steps">
    <div class="shell">
      <div class="faq-head">
        <span class="faq-head__no">03</span>
        <h2 class="faq-head__title">四个场景，照着点就行</h2>
      </div>
      <div class="step-layout">
        <div class="step-list">
          <article class="step-card">
            <div class="step-card__head">
              <span class="tag tag--lime">可直达</span>
              <h3 class="step-card__title">找回比分入口</h3>
            </div>
            <ol class="step-card__list">
              <li>回到<a class="link-lime" href="/">看台首页</a>，视线放在页面最上端，比分带在品牌栏上方。</li>
              <li>页面向下滚动后它会收起贴顶，点左侧的轮次数字即可展开。</li>
              <li>要看完整清单，点比分带右端指向赛前风向的入口。</li>
            </ol>
          </article>

          <article class="step-card">
            <div class="step-card__head">
              <span class="tag tag--lime">可直达</span>
              <h3 class="step-card__title">手机上查看场馆</h3>
            </div>
            <ol class="step-card__list">
              <li>打开<a class="link-lime" href="/projects/">场馆与版本</a>，页面默认停在新版入口。</li>
              <li>选中你要看的场馆，信息在当前页直接展开，无需跳转。</li>
              <li>想比对旧记录，切到金色标签的旧版回看，再开对照模式。</li>
            </ol>
          </article>

          <article class="step-card">
            <div class="step-card__head">
              <span class="tag tag--amber">需对照</span>
              <h3 class="step-card__title">核对旧版资料</h3>
            </div>
            <ol class="step-card__list">
              <li>在场馆与版本页找到暖琥珀金的旧版回看入口。</li>
              <li>打开对照模式，旧版在左、新版在右，并排看同一组字段。</li>
              <li>记下你对照的版本阶段；仍有疑问，把阶段和截图一起发给客服。</li>
            </ol>
          </article>

          <article class="step-card">
            <div class="step-card__head">
              <span class="tag">常规</span>
              <h3 class="step-card__title">确认当日伤停</h3>
            </div>
            <ol class="step-card__list">
              <li>先在首页比分带看摘要，判断有没有你关心的变化。</li>
              <li>进赛前风向页看完整条目，按轮次逐场比赛往下翻。</li>
              <li>赛前 6 小时再看一次，当日主要更新基本在这个节点完成。</li>
            </ol>
          </article>
        </div>

        <figure class="step-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="手机屏幕显示抽象的问题排查界面与步骤编号，背景是深色看台灯带">
          <figcaption>手机端从入口到答案通常在两步以内，截图里是排查步骤的编号结构示意。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-section" id="compare">
    <div class="shell">
      <div class="faq-head">
        <span class="faq-head__no">04</span>
        <h2 class="faq-head__title">拿不准用哪一边，看这两栏</h2>
      </div>
      <div class="verdict">
        <article class="verdict__col verdict__col--new">
          <p class="verdict__kicker">日常使用</p>
          <h3 class="verdict__title">走新版入口</h3>
          <ul class="verdict__list">
            <li>查第12轮对阵、翻当日伤停摘要。</li>
            <li>iOS 上查看场馆信息，两步之内到位。</li>
            <li>信息在当前页展开，不用跳去第三方页面。</li>
          </ul>
        </article>
        <div class="verdict__arrow" aria-hidden="true">
          <svg viewBox="0 0 40 24" width="40" height="24" focusable="false">
            <path d="M2 12h30" stroke="#B8FF3D" stroke-width="1.5" fill="none"/>
            <path d="M27 6l7 6-7 6" stroke="#B8FF3D" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <article class="verdict__col verdict__col--old">
          <p class="verdict__kicker">对照旧记录</p>
          <h3 class="verdict__title">走旧版回看</h3>
          <ul class="verdict__list">
            <li>以前收藏的旧入口要继续用，路径原样保留。</li>
            <li>手里有旧资料，需要确认字段名称和操作位置。</li>
            <li>开启对照模式，新旧两边同屏比对，差异一眼看清。</li>
          </ul>
        </article>
      </div>
    </div>
  </section>

  <section class="faq-section" id="support">
    <div class="shell">
      <div class="help-bar">
        <div class="help-bar__text">
          <p class="eyebrow">还没解决？</p>
          <h2 class="help-bar__title">把问题发过来，工作时间内会有人接</h2>
          <p class="help-bar__desc">比分、场馆、伤停三类问题都可以走客服邮箱；涉及旧版资料的，邮件标题注明「旧版回看」，能更快分到对应的处理线上。</p>
          <ul class="help-bar__contact">
            <li><span class="help-bar__key">邮箱</span><span class="help-bar__val">kefu@yabo-sprint.com.cn</span></li>
            <li><span class="help-bar__key">电话</span><span class="help-bar__val">400-4838-8083</span></li>
            <li><span class="help-bar__key">时间</span><span class="help-bar__val">工作日 9:00–18:00</span></li>
          </ul>
        </div>
        <div class="help-bar__actions">
          <button class="faq-copy" type="button" data-copy data-copy-value="kefu@yabo-sprint.com.cn">复制客服邮箱</button>
          <a class="btn btn--amber" href="/contact-us/">联系与到访</a>
          <a class="help-bar__privacy" href="/privacy-notice/">信息处理方式</a>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-section" id="next">
    <div class="shell">
      <div class="faq-head">
        <span class="faq-head__no">05</span>
        <h2 class="faq-head__title">回到你要看的那一页</h2>
      </div>
      <ul class="next-list">
        <li>
          <a class="next-link" href="/">
            <span class="next-link__k">HOME</span>
            <span class="next-link__t">看台首页</span>
            <span class="next-link__d">顶部比分带、第12轮对阵与伤停摘要都在这里。</span>
          </a>
        </li>
        <li>
          <a class="next-link" href="/projects/">
            <span class="next-link__k">VENUE</span>
            <span class="next-link__t">场馆与版本</span>
            <span class="next-link__d">手机端场馆信息查看，金色入口通往旧版回看。</span>
          </a>
        </li>
        <li>
          <a class="next-link" href="/trends/">
            <span class="next-link__k">TRENDS</span>
            <span class="next-link__t">赛前风向</span>
            <span class="next-link__d">每日前瞻与完整伤停清单，按轮次逐场展开。</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</main>