.page-faq{
  --faq-max: 1180px;
  position: relative;
  padding: 26px var(--gutter) 96px;
  background:
    radial-gradient(900px 520px at 84% -8%, rgba(59,242,210,.14), transparent 66%),
    radial-gradient(700px 460px at 2% 46%, rgba(15,142,126,.12), transparent 70%),
    var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

.page-faq a{
  color: var(--mint);
  text-decoration: none;
}

.page-faq h2{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-faq h3{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--paper);
}

.page-faq p{
  margin: 0;
}

.page-faq .faq-crumbs{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--faq-max);
  margin: 0 auto 26px;
  font-size: 13px;
  color: var(--mist);
}

.page-faq .faq-crumbs .ld-crumbs__link{
  color: var(--mist);
}

.page-faq .faq-crumbs .ld-crumbs__link:hover{
  color: var(--mint);
}

.page-faq .faq-crumbs .ld-crumbs__now{
  color: var(--paper);
}

/* 首屏 */
.page-faq .faq-hero{
  max-width: var(--faq-max);
  margin: 0 auto;
}

.page-faq .faq-hero__frame{
  position: relative;
  padding: clamp(26px, 4.4vw, 58px) clamp(20px, 3.6vw, 50px) clamp(26px, 4vw, 50px);
  border: 1px solid var(--hair-strong);
  background:
    linear-gradient(160deg, rgba(18,48,40,.7), rgba(11,21,18,.2) 62%),
    rgba(255,255,255,.04);
}

.page-faq .faq-hero__frame::before{
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--hair);
  pointer-events: none;
}

.page-faq .faq-hero__ticks{
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 10px;
  background-image: repeating-linear-gradient(90deg, var(--hair-mint) 0 1px, transparent 1px 34px);
  opacity: .75;
  pointer-events: none;
}

.page-faq .faq-hero__label{
  margin: 0;
}

.page-faq .faq-hero h1{
  margin: 14px 0 0;
  max-width: 14em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-faq .faq-hero__lede{
  max-width: 46em;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .faq-hero__stats{
  display: grid;
  gap: 16px;
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hair);
  list-style: none;
}

.page-faq .faq-hero__stat{
  display: grid;
  gap: 4px;
}

.page-faq .faq-hero__statnum{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.1;
  color: var(--mint);
}

.page-faq .faq-hero__stat--ver .faq-hero__statnum{
  color: var(--orange);
}

.page-faq .faq-hero__statlabel{
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

/* 三步路径 */
.page-faq .faq-start{
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
}

.page-faq .faq-start__lede{
  margin: 12px 0 0;
  max-width: 34em;
  color: var(--mist);
}

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

.page-faq .faq-path__node{
  position: relative;
  padding: 18px 0 0;
  border-top: 1px solid var(--hair-strong);
}

.page-faq .faq-path__node::before{
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 34px;
  height: 2px;
  background: var(--mint);
}

.page-faq .faq-path__num{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  line-height: 1;
  color: var(--teal);
}

.page-faq .faq-path__node p{
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
}

.page-faq .faq-start__media{
  margin: 0;
}

.page-faq .faq-start__media .ld-media__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hair);
}

/* 分组问答 */
.page-faq .faq-ask{
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
}

.page-faq .faq-ask__lede{
  margin: 12px 0 0;
  max-width: 40em;
  color: var(--mist);
}

.page-faq .faq-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}

.page-faq .faq-tabs .faq-tab{
  padding: 10px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--mist);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.page-faq .faq-tabs .faq-tab:hover{
  color: var(--paper);
  border-color: var(--hair-mint);
}

.page-faq .faq-tabs .faq-tab[aria-selected="true"]{
  color: var(--mint);
  border-color: var(--mint);
  background: rgba(59,242,210,.1);
}

.page-faq .faq-tabs .faq-tab:focus-visible{
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

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

.page-faq .faq-panel[hidden]{
  display: none;
}

.page-faq .faq-panel + .faq-panel{
  margin-top: 34px;
}

.page-faq .faq-panel:not([hidden]){
  animation: faqPanelIn .18s var(--ease) both;
}

@keyframes faqPanelIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.page-faq .faq-q{
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.page-faq .faq-q[open]{
  border-left-color: var(--mint);
  background: rgba(243,234,218,.035);
}

.page-faq .faq-q__sum{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 6px 18px 14px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.5;
  color: var(--paper);
}

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

.page-faq .faq-q__sum::marker{
  content: "";
}

.page-faq .faq-q__sum::after{
  content: "+";
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--mint);
}

.page-faq .faq-q[open] .faq-q__sum::after{
  content: "\2013";
}

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

.page-faq .faq-q .faq-q__idx{
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--mist);
}

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

.page-faq .faq-q__ans{
  margin: 0 6px 18px 14px;
  padding: 16px 18px;
  border-left: 2px solid var(--mint);
  background: var(--paper);
  color: var(--cocoa);
  font-size: 15px;
  line-height: 1.78;
}

.page-faq .faq-q__ans p + p{
  margin-top: 10px;
}

.page-faq .faq-q__ans a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-subs__media{
  margin: 26px 0 0;
  max-width: 400px;
}

.page-faq .faq-subs__media .ld-media__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hair);
}

/* 会员中心 */
.page-faq .faq-member{
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
  padding-top: clamp(30px, 4.5vw, 54px);
  border-top: 1px solid var(--hair-strong);
}

.page-faq .faq-member__lede{
  margin: 12px 0 0;
  max-width: 30em;
  color: var(--mist);
}

.page-faq .faq-steps{
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-steps__item{
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 14px;
  padding-bottom: 26px;
}

.page-faq .faq-steps__item::before{
  content: "";
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--hair-mint), transparent);
}

.page-faq .faq-steps__item:last-child{
  padding-bottom: 0;
}

.page-faq .faq-steps__item:last-child::before{
  display: none;
}

.page-faq .faq-steps__num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mint);
}

.page-faq .faq-steps__body p{
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

/* 仍未解决 */
.page-faq .faq-help{
  position: relative;
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
  padding: clamp(28px, 4.6vw, 56px) clamp(20px, 4vw, 56px);
  border-left: 4px solid var(--mint);
  background:
    repeating-linear-gradient(180deg, rgba(34,26,19,.045) 0 1px, transparent 1px 6px),
    var(--paper);
  color: var(--cocoa);
}

.page-faq .faq-help__label{
  color: var(--teal);
}

.page-faq .faq-help h2{
  color: var(--cocoa);
}

.page-faq .faq-help h3{
  color: var(--cocoa);
}

.page-faq .faq-help__lede{
  margin: 12px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.78;
  color: var(--cocoa);
}

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

.page-faq .faq-help__list li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.page-faq .faq-help__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

.page-faq .faq-help__contact{
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--wheat);
}

.page-faq .faq-help__row{
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wheat);
}

.page-faq .faq-help__row:last-child{
  border-bottom: 0;
}

.page-faq .faq-help__k{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--teal);
}

.page-faq .faq-help__v{
  font-size: 15px;
  line-height: 1.7;
  color: var(--cocoa);
  word-break: break-word;
}

.page-faq .faq-help__links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--mist);
}

.page-faq .faq-help__links a{
  color: var(--cocoa);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-faq .faq-help__links a:hover{
  color: var(--teal);
}

.page-faq .faq-help__links a:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (min-width: 640px){
  .page-faq .faq-hero__stats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-faq .faq-path{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

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

  .page-faq .faq-help__row{
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }
}

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

  .page-faq .faq-member{
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
  }

  .page-faq .faq-q__sum{
    padding: 20px 10px 20px 18px;
  }

  .page-faq .faq-q__ans{
    margin-left: 18px;
    margin-right: 10px;
    padding: 18px 24px;
  }
}

@media (min-width: 1024px){
  .page-faq{
    padding-top: 34px;
  }

  .page-faq .faq-hero__lede{
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .faq-panel:not([hidden]){
    animation: none;
  }

  .page-faq .faq-tabs .faq-tab,
  .page-faq .faq-q{
    transition: none;
  }
}


<main id="main-content" class="page-faq">

  <nav class="ld-crumbs faq-crumbs" aria-label="面包屑">
    <a class="ld-crumbs__link" href="/">首页</a>
    <span class="ld-crumbs__sep" aria-hidden="true">/</span>
    <span class="ld-crumbs__now" aria-current="page">帮助中心</span>
  </nav>

  <header class="faq-hero">
    <div class="faq-hero__frame">
      <span class="faq-hero__ticks" aria-hidden="true"></span>
      <p class="ld-label faq-hero__label">HELP DESK / 问题速查</p>
      <h1>卡在订阅与战报之间，先查这里</h1>
      <p class="faq-hero__lede">订阅没收到提醒、升级后战报没同步、回看翻不到那一场，按步骤走一遍，多数情况当场就能解决。乐动体育官网客服在工作日 9:00-18:00 回复，自助处理不了把截图发过来即可。</p>
      <ul class="faq-hero__stats">
        <li class="faq-hero__stat">
          <span class="faq-hero__statnum">60 余条</span>
          <span class="faq-hero__statlabel">常见问题写成可照做的答案</span>
        </li>
        <li class="faq-hero__stat">
          <span class="faq-hero__statnum">4 组</span>
          <span class="faq-hero__statlabel">入口、订阅、版本、战报</span>
        </li>
        <li class="faq-hero__stat faq-hero__stat--ver">
          <span class="faq-hero__statnum">3.2.1</span>
          <span class="faq-hero__statlabel">安卓端 LD 板块当前版本</span>
        </li>
      </ul>
    </div>
  </header>

  <section class="faq-start" aria-labelledby="faq-start-title" data-reveal>
    <div class="faq-start__body">
      <p class="ld-label">FIRST VISIT / 第一次来</p>
      <h2 id="faq-start-title">三步走到订阅栏</h2>
      <p class="faq-start__lede">第一次进来不用满页翻，从落到首页到收到第一条提醒，通常不到一分钟。</p>
      <ol class="faq-path">
        <li class="faq-path__node">
          <span class="faq-path__num">01</span>
          <h3>落到首页首屏</h3>
          <p>首屏窗口右侧写着“订阅赛程与战报”，点开直接选项目，不用先展开菜单。</p>
        </li>
        <li class="faq-path__node">
          <span class="faq-path__num">02</span>
          <h3>勾项目和提醒类型</h3>
          <p>12 类项目里挑你常看的，再决定要赛程提醒、战报推送还是回看上架通知。</p>
        </li>
        <li class="faq-path__node">
          <span class="faq-path__num">03</span>
          <h3>填邮箱并确认状态</h3>
          <p>提交后去会员中心订阅管理看一眼，状态显示开启，接下来等第一条推送就行。</p>
        </li>
      </ol>
    </div>
    <figure class="ld-media ld-media--wide faq-start__media">
      <img class="ld-media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="暗色界面上的三段订阅路径示意，荧光青节点依次连向订阅按钮">
    </figure>
  </section>

  <section class="faq-ask" data-tabs aria-labelledby="faq-ask-title" data-reveal>
    <div class="faq-ask__head">
      <p class="ld-label">QUICK ANSWERS / 分组速查</p>
      <h2 id="faq-ask-title">按你最急的那件事挑一组</h2>
      <p class="faq-ask__lede">点标签切换分组，点问题展开答案。答案里的动作按顺序做完，多数问题停在前两步就能解决。</p>
    </div>

    <div class="faq-tabs" role="tablist" aria-label="问题分组">
      <button class="faq-tab" type="button" role="tab" id="tab-start" data-tab="start" aria-selected="true" aria-controls="panel-start">入口指引</button>
      <button class="faq-tab" type="button" role="tab" id="tab-subs" data-tab="subs" aria-selected="false" aria-controls="panel-subs">订阅提醒</button>
      <button class="faq-tab" type="button" role="tab" id="tab-ver" data-tab="ver" aria-selected="false" aria-controls="panel-ver">版本更新</button>
      <button class="faq-tab" type="button" role="tab" id="tab-review" data-tab="review" aria-selected="false" aria-controls="panel-review">战报回看</button>
    </div>

    <div class="faq-panel" role="tabpanel" id="panel-start" data-panel="start" aria-labelledby="tab-start">
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">01</span>
          <span class="faq-q__text">第一次打开首页，订阅入口在哪个位置？</span>
        </summary>
        <div class="faq-q__ans">
          <p>落在首页首屏，窗口内右侧就是“订阅赛程与战报”，点开即可选项目。滚到页面下方还有一处订阅收束区，两处进入的是同一个订阅栏。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">02</span>
          <span class="faq-q__text">只关心一支球队，能不能只订它？</span>
        </summary>
        <div class="faq-q__ans">
          <p>订阅时先选项目，再往下选联赛与球队，足球、篮球、网球、赛车这些项目都能单独勾。只想收赛后内容，把赛程提醒关掉、只留战报推送即可。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">03</span>
          <span class="faq-q__text">手机上打开，入口和电脑上不一样？</span>
        </summary>
        <div class="faq-q__ans">
          <p>移动端把主导航收成顶部 56px 条，页面底部另有一条固定操作条。点底部右侧按钮直接跳到订阅栏，左侧进最新战报，不用展开菜单再找。</p>
        </div>
      </details>
    </div>

    <div class="faq-panel" role="tabpanel" id="panel-subs" data-panel="subs" aria-labelledby="tab-subs">
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">01</span>
          <span class="faq-q__text">赛程提醒、战报推送、回看上架通知怎么开？</span>
        </summary>
        <div class="faq-q__ans">
          <p>在订阅栏勾选需要的那几类，选好项目再填邮箱提交。提交成功后页面会列出已开启的提醒类型，没看到这一栏说明没提交成功，重新来一次。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">02</span>
          <span class="faq-q__text">订阅了却没收到提醒，先查什么？</span>
        </summary>
        <div class="faq-q__ans">
          <p>先看会员中心订阅管理里的状态是不是开启，再看邮箱的垃圾邮件与推广分类。两项都正常就换一个邮箱重新提交，多数拦截发生在邮箱服务商这一层。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">03</span>
          <span class="faq-q__text">只想收战报，不想被赛程提醒打扰？</span>
        </summary>
        <div class="faq-q__ans">
          <p>进会员中心订阅管理，把赛程提醒与回看上架通知逐项关掉，只留战报推送。开关改完立即生效，不用退订再重订一遍。</p>
        </div>
      </details>
      <figure class="ld-media ld-media--square faq-subs__media">
        <img class="ld-media__img" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" loading="lazy" decoding="async" alt="暗色设置界面里的三类提醒开关与时间刻度，表示赛程、战报与回看订阅">
      </figure>
    </div>

    <div class="faq-panel" role="tabpanel" id="panel-ver" data-panel="ver" aria-labelledby="tab-ver">
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">01</span>
          <span class="faq-q__text">3.2.1 版本更新了什么？</span>
        </summary>
        <div class="faq-q__ans">
          <p>安卓端 LD 板块 3.2.1 把赛后战报同步进板块内，看完数据复盘不用再跳页面。上一版 3.2 加的是订阅中心，两个版本连起来用路径最顺。</p>
          <p>想看清板块里都有什么，可以到 <a href="/product/">LD板块页面</a> 对照着看。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">02</span>
          <span class="faq-q__text">怎么确认自己用的是不是 3.2.1？</span>
        </summary>
        <div class="faq-q__ans">
          <p>打开 LD 板块，在板块信息里能看到当前版本号。显示的不是 3.2.1 就去应用商店更新，更新前先留出一点存储空间，避免装到一半中断。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">03</span>
          <span class="faq-q__text">更新完战报还是旧的，怎么处理？</span>
        </summary>
        <div class="faq-q__ans">
          <p>先在战报列表下拉刷新一次，再完全退出应用重新进入。还停在旧数据就清理缓存后重试，最后把版本号与页面截图一起发给客服。</p>
        </div>
      </details>
    </div>

    <div class="faq-panel" role="tabpanel" id="panel-review" data-panel="review" aria-labelledby="tab-review">
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">01</span>
          <span class="faq-q__text">战报多久发布？</span>
        </summary>
        <div class="faq-q__ans">
          <p>比赛结束后 30 分钟内出初稿，2 小时内完成数据校对与更新。急着看结论可以先读初稿，等完整版出来再回来对照细节。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">02</span>
          <span class="faq-q__text">回看集锦什么时候能看？</span>
        </summary>
        <div class="faq-q__ans">
          <p>一般在赛后 2 小时内上架，重要场次最快 45 分钟。上架后会按你订阅的项目推送通知，最新一批内容也能在 <a href="/reports/">赛后战报栏目</a> 里翻到。</p>
        </div>
      </details>
      <details class="faq-q">
        <summary class="faq-q__sum">
          <span class="faq-q__idx">03</span>
          <span class="faq-q__text">找不到某一场的回看，怎么办？</span>
        </summary>
        <div class="faq-q__ans">
          <p>在 LD 板块用项目、联赛、球队、时间范围四种条件组合筛一遍，先把时间范围放宽。仍然没有就把赛事名称与开赛时间发给客服，让客服帮你查上架状态。</p>
        </div>
      </details>
    </div>
  </section>

  <section class="faq-member" aria-labelledby="faq-member-title" data-reveal>
    <div class="faq-member__intro">
      <p class="ld-label">MEMBER CENTER / 会员中心</p>
      <h2 id="faq-member-title">订阅、收藏、记录都能自己改</h2>
      <p class="faq-member__lede">四项功能放在同一个入口，改完立即生效，不用退订重来。从任意页面的账号位置进去，都能看到这四项。</p>
    </div>
    <ol class="faq-steps">
      <li class="faq-steps__item">
        <span class="faq-steps__num">01</span>
        <div class="faq-steps__body">
          <h3>订阅管理</h3>
          <p>三类提醒逐项开关，换项目、换邮箱都在这里改，保存后下一条推送就按新设置走。</p>
        </div>
      </li>
      <li class="faq-steps__item">
        <span class="faq-steps__num">02</span>
        <div class="faq-steps__body">
          <h3>收藏夹</h3>
          <p>看不完的战报和回看点收藏，下次从会员中心直接进，不用按条件重新筛一遍。</p>
        </div>
      </li>
      <li class="faq-steps__item">
        <span class="faq-steps__num">03</span>
        <div class="faq-steps__body">
          <h3>观看记录</h3>
          <p>按时间倒序留住你看过的回看，找上周那场关键球，从记录里点进去比翻列表快。</p>
        </div>
      </li>
      <li class="faq-steps__item">
        <span class="faq-steps__num">04</span>
        <div class="faq-steps__body">
          <h3>资料导出</h3>
          <p>把收藏条目与订阅偏好导出成文件，换设备时省去重新勾选，新机上导回去即可。</p>
        </div>
      </li>
    </ol>
  </section>

  <section class="faq-help" aria-labelledby="faq-help-title" data-reveal>
    <p class="ld-label faq-help__label">STILL STUCK / 还没解决</p>
    <h2 id="faq-help-title">把这几样带上，一次说清</h2>
    <p class="faq-help__lede">客服每天收到的邮件里，附了截图和版本号的问题往往一轮就能定位。写信前先把下面几项准备好。</p>
    <ul class="faq-help__list">
      <li>订阅时填写的邮箱地址</li>
      <li>手机型号与系统版本</li>
      <li>LD 板块当前版本号，例如 3.2.1</li>
      <li>赛事名称与开赛时间</li>
      <li>出问题页面的截图</li>
      <li>已经试过的处理步骤</li>
    </ul>
    <div class="faq-help__contact">
      <p class="faq-help__row">
        <span class="faq-help__k">客服邮箱</span>
        <span class="faq-help__v">info@pre-game-ledong.com.cn</span>
      </p>
      <p class="faq-help__row">
        <span class="faq-help__k">电话</span>
        <span class="faq-help__v">13820313426</span>
      </p>
      <p class="faq-help__row">
        <span class="faq-help__k">服务时间</span>
        <span class="faq-help__v">工作日 9:00-18:00 回复，赛事资料与版本问题请附截图</span>
      </p>
    </div>
    <p class="faq-help__links">
      <a href="/contact-us/">联系客服</a>
      <span aria-hidden="true">·</span>
      <a href="/instructions/">使用说明</a>
      <span aria-hidden="true">·</span>
      <a href="/reports/">赛后战报</a>
      <span aria-hidden="true">·</span>
      <a href="/product/">LD板块与版本</a>
    </p>
  </section>

</main>

.page-faq{
  --faq-max: 1180px;
  position: relative;
  padding: 26px var(--gutter) 96px;
  background:
    radial-gradient(900px 520px at 84% -8%, rgba(59,242,210,.14), transparent 66%),
    radial-gradient(700px 460px at 2% 46%, rgba(15,142,126,.12), transparent 70%),
    var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

.page-faq a{
  color: var(--mint);
  text-decoration: none;
}

.page-faq h2{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-faq h3{
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--paper);
}

.page-faq p{
  margin: 0;
}

.page-faq .faq-crumbs{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--faq-max);
  margin: 0 auto 26px;
  font-size: 13px;
  color: var(--mist);
}

.page-faq .faq-crumbs .ld-crumbs__link{
  color: var(--mist);
}

.page-faq .faq-crumbs .ld-crumbs__link:hover{
  color: var(--mint);
}

.page-faq .faq-crumbs .ld-crumbs__now{
  color: var(--paper);
}

/* 首屏 */
.page-faq .faq-hero{
  max-width: var(--faq-max);
  margin: 0 auto;
}

.page-faq .faq-hero__frame{
  position: relative;
  padding: clamp(26px, 4.4vw, 58px) clamp(20px, 3.6vw, 50px) clamp(26px, 4vw, 50px);
  border: 1px solid var(--hair-strong);
  background:
    linear-gradient(160deg, rgba(18,48,40,.7), rgba(11,21,18,.2) 62%),
    rgba(255,255,255,.04);
}

.page-faq .faq-hero__frame::before{
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--hair);
  pointer-events: none;
}

.page-faq .faq-hero__ticks{
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 10px;
  background-image: repeating-linear-gradient(90deg, var(--hair-mint) 0 1px, transparent 1px 34px);
  opacity: .75;
  pointer-events: none;
}

.page-faq .faq-hero__label{
  margin: 0;
}

.page-faq .faq-hero h1{
  margin: 14px 0 0;
  max-width: 13em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-faq .faq-hero__lede{
  max-width: 46em;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--mist);
}

.page-faq .faq-hero__stats{
  display: grid;
  gap: 16px;
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hair);
  list-style: none;
}

.page-faq .faq-hero__stat{
  display: grid;
  gap: 4px;
}

.page-faq .faq-hero__statnum{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.1;
  color: var(--mint);
}

.page-faq .faq-hero__stat--ver .faq-hero__statnum{
  color: var(--orange);
}

.page-faq .faq-hero__statlabel{
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

/* 三步路径 */
.page-faq .faq-start{
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
}

.page-faq .faq-start__lede{
  margin: 12px 0 0;
  max-width: 34em;
  color: var(--mist);
}

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

.page-faq .faq-path__node{
  position: relative;
  padding: 18px 0 0;
  border-top: 1px solid var(--hair-strong);
}

.page-faq .faq-path__node::before{
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 34px;
  height: 2px;
  background: var(--mint);
}

.page-faq .faq-path__num{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  line-height: 1;
  color: var(--teal);
}

.page-faq .faq-path__node p{
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
}

.page-faq .faq-start__media{
  margin: 0;
}

.page-faq .faq-start__media .ld-media__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hair);
}

/* 分组问答 */
.page-faq .faq-ask{
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
}

.page-faq .faq-ask__lede{
  margin: 12px 0 0;
  max-width: 40em;
  color: var(--mist);
}

.page-faq .faq-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}

.page-faq .faq-tabs .faq-tab{
  padding: 10px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--mist);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.page-faq .faq-tabs .faq-tab:hover{
  color: var(--paper);
  border-color: var(--hair-mint);
}

.page-faq .faq-tabs .faq-tab[aria-selected="true"]{
  color: var(--mint);
  border-color: var(--mint);
  background: rgba(59,242,210,.1);
}

.page-faq .faq-tabs .faq-tab:focus-visible{
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

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

.page-faq .faq-panel[hidden]{
  display: none;
}

.page-faq .faq-panel + .faq-panel{
  margin-top: 34px;
}

.page-faq .faq-panel:not([hidden]){
  animation: faqPanelIn .18s var(--ease) both;
}

@keyframes faqPanelIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.page-faq .faq-q{
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.page-faq .faq-q[open]{
  border-left-color: var(--mint);
  background: rgba(243,234,218,.035);
}

.page-faq .faq-q__sum{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 6px 18px 14px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.5;
  color: var(--paper);
}

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

.page-faq .faq-q__sum::marker{
  content: "";
}

.page-faq .faq-q__sum::after{
  content: "+";
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--mint);
}

.page-faq .faq-q[open] .faq-q__sum::after{
  content: "\2013";
}

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

.page-faq .faq-q .faq-q__idx{
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--mist);
}

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

.page-faq .faq-q__ans{
  margin: 0 6px 18px 14px;
  padding: 16px 18px;
  border-left: 2px solid var(--mint);
  background: var(--paper);
  color: var(--cocoa);
  font-size: 15px;
  line-height: 1.78;
}

.page-faq .faq-q__ans p + p{
  margin-top: 10px;
}

.page-faq .faq-q__ans a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-subs__media{
  margin: 26px 0 0;
  max-width: 400px;
}

.page-faq .faq-subs__media .ld-media__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hair);
}

/* 会员中心 */
.page-faq .faq-member{
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
  padding-top: clamp(30px, 4.5vw, 54px);
  border-top: 1px solid var(--hair-strong);
}

.page-faq .faq-member__lede{
  margin: 12px 0 0;
  max-width: 30em;
  color: var(--mist);
}

.page-faq .faq-steps{
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-steps__item{
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 14px;
  padding-bottom: 26px;
}

.page-faq .faq-steps__item::before{
  content: "";
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--hair-mint), transparent);
}

.page-faq .faq-steps__item:last-child{
  padding-bottom: 0;
}

.page-faq .faq-steps__item:last-child::before{
  display: none;
}

.page-faq .faq-steps__num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mint);
}

.page-faq .faq-steps__body p{
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

/* 仍未解决 */
.page-faq .faq-help{
  position: relative;
  max-width: var(--faq-max);
  margin: clamp(60px, 9vw, 118px) auto 0;
  padding: clamp(28px, 4.6vw, 56px) clamp(20px, 4vw, 56px);
  border-left: 4px solid var(--mint);
  background:
    repeating-linear-gradient(180deg, rgba(34,26,19,.045) 0 1px, transparent 1px 6px),
    var(--paper);
  color: var(--cocoa);
}

.page-faq .faq-help__label{
  color: var(--teal);
}

.page-faq .faq-help h2{
  color: var(--cocoa);
}

.page-faq .faq-help h3{
  color: var(--cocoa);
}

.page-faq .faq-help__lede{
  margin: 12px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.78;
  color: var(--cocoa);
}

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

.page-faq .faq-help__list li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.page-faq .faq-help__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

.page-faq .faq-help__contact{
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--wheat);
}

.page-faq .faq-help__row{
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wheat);
}

.page-faq .faq-help__row:last-child{
  border-bottom: 0;
}

.page-faq .faq-help__k{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--teal);
}

.page-faq .faq-help__v{
  font-size: 15px;
  line-height: 1.7;
  color: var(--cocoa);
  word-break: break-word;
}

.page-faq .faq-help__links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--mist);
}

.page-faq .faq-help__links a{
  color: var(--cocoa);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-faq .faq-help__links a:hover{
  color: var(--teal);
}

.page-faq .faq-help__links a:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (min-width: 640px){
  .page-faq .faq-hero__stats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-faq .faq-path{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

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

  .page-faq .faq-help__row{
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }
}

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

  .page-faq .faq-member{
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
  }

  .page-faq .faq-q__sum{
    padding: 20px 10px 20px 18px;
  }

  .page-faq .faq-q__ans{
    margin-left: 18px;
    margin-right: 10px;
    padding: 18px 24px;
  }
}

@media (min-width: 1024px){
  .page-faq{
    padding-top: 34px;
  }

  .page-faq .faq-hero__lede{
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .faq-panel:not([hidden]){
    animation: none;
  }

  .page-faq .faq-tabs .faq-tab,
  .page-faq .faq-q{
    transition: none;
  }
}