.page-faq{
  --faq-card:#FFFFFF;
  --faq-shadow:0 16px 36px rgba(7,18,35,.09);
  --faq-radius:var(--radius-lg);
  background:var(--light-bg);
  color:var(--light-text);
  font-family:var(--font-body);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  background:var(--ink-900);
  color:var(--text);
  padding:calc(var(--header-h) + 40px) 0 80px;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  top:-200px;
  right:-160px;
  width:640px;
  height:640px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,255,61,.2),rgba(198,255,61,0) 66%);
  pointer-events:none;
}
.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  left:-10%;
  bottom:11%;
  width:120%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,122,47,0),rgba(255,122,47,.5),rgba(198,255,61,.35),rgba(198,255,61,0));
  transform:rotate(-3deg);
  pointer-events:none;
}
.page-faq .faq-hero__inner{
  position:relative;
  z-index:1;
}
.page-faq .faq-hero .breadcrumb{
  margin-bottom:26px;
  color:var(--text-muted);
}
.page-faq .faq-hero .breadcrumb__link{
  color:var(--text-muted);
  text-decoration:none;
}
.page-faq .faq-hero .breadcrumb__link:hover,
.page-faq .faq-hero .breadcrumb__link:focus-visible{
  color:var(--accent);
}
.page-faq .faq-hero__eyebrow{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.page-faq .faq-hero__title{
  margin:0;
  max-width:16em;
  font-size:clamp(30px,6vw,58px);
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.page-faq .faq-hero__lead{
  margin:20px 0 0;
  max-width:60ch;
  font-size:16px;
  line-height:1.8;
  color:rgba(227,234,243,.78);
}
.page-faq .faq-hero__tags{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-faq .faq-hero__tags a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(227,234,243,.26);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.page-faq .faq-hero__tags a:hover,
.page-faq .faq-hero__tags a:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(198,255,61,.08);
}
.page-faq .faq-hero__meta{
  margin:22px 0 0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(227,234,243,.6);
}
.page-faq .faq-hero__num{
  color:var(--accent);
  font-size:18px;
  font-weight:700;
}

/* ---------- 版心布局 ---------- */
.page-faq .faq-layout{
  display:grid;
  gap:30px;
  padding-top:44px;
  padding-bottom:76px;
}

/* ---------- 左栏索引 ---------- */
.page-faq .faq-index{
  border-top:1px solid var(--light-line);
  padding-top:18px;
}
.page-faq .faq-index__title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--light-muted);
}
.page-faq .faq-index__list{
  list-style:none;
  margin:0;
  padding:0 0 4px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-index__list::-webkit-scrollbar{display:none;}
.page-faq .faq-index__link{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex:none;
  padding:8px 14px;
  border:1px solid var(--light-line);
  border-radius:999px;
  background:var(--faq-card);
  color:var(--light-text);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.page-faq .faq-index__num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--accent-ink);
}
.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{
  border-color:var(--ink-500);
  transform:translateY(-2px);
}

/* ---------- 分组 ---------- */
.page-faq .faq-group{
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-faq .faq-group + .faq-group{
  margin-top:54px;
  padding-top:38px;
  border-top:1px dashed var(--light-line);
}
.page-faq .faq-group__head{
  display:flex;
  align-items:center;
  gap:12px;
}
.page-faq .faq-group__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:13px;
  background:var(--ink-700);
  color:var(--lime-400);
}
.page-faq .faq-group__icon--violet{
  background:var(--violet-800);
  color:#D8C4FF;
}
.page-faq .faq-group__icon--jade{
  background:var(--jade-800);
  color:#8FE9D2;
}
.page-faq .faq-group__icon--warm{
  background:var(--orange-500);
  color:#3A1400;
}
.page-faq .faq-group__icon svg{
  width:19px;
  height:19px;
  display:block;
}
.page-faq .faq-group__title{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:clamp(21px,3.4vw,29px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}
.page-faq .faq-group__num{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--accent-ink);
}
.page-faq .faq-group__desc{
  margin:12px 0 0;
  max-width:64ch;
  font-size:15px;
  line-height:1.8;
  color:var(--light-muted);
}

/* ---------- 问答折叠 ---------- */
.page-faq .faq-list{
  margin-top:22px;
  display:grid;
  gap:10px;
}
.page-faq .faq-item{
  background:var(--faq-card);
  border:1px solid var(--light-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.page-faq .faq-item:hover{
  border-color:var(--ink-500);
  transform:translateY(-2px);
}
.page-faq .faq-item[open]{
  border-color:var(--ink-500);
  box-shadow:var(--faq-shadow);
}
.page-faq .faq-item__q{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  color:var(--light-text);
  transition:color .2s ease;
}
.page-faq .faq-item__q::-webkit-details-marker{display:none;}
.page-faq .faq-item__q:hover{color:var(--accent-ink);}
.page-faq .faq-item__q:focus-visible{
  outline:2px solid var(--lime-700);
  outline-offset:-2px;
}
.page-faq .faq-item__mark{
  position:relative;
  flex:none;
  width:18px;
  height:18px;
  margin-top:3px;
}
.page-faq .faq-item__mark::before,
.page-faq .faq-item__mark::after{
  content:"";
  position:absolute;
  background:var(--accent-ink);
  border-radius:2px;
  transition:transform .22s ease,opacity .22s ease;
}
.page-faq .faq-item__mark::before{
  left:2px;
  right:2px;
  top:8px;
  height:2px;
}
.page-faq .faq-item__mark::after{
  top:2px;
  bottom:2px;
  left:8px;
  width:2px;
}
.page-faq .faq-item[open] .faq-item__mark::after{
  transform:scaleY(0);
  opacity:0;
}
.page-faq .faq-item__a{
  padding:0 18px 18px;
  font-size:16px;
  line-height:1.8;
  color:var(--light-muted);
}
.page-faq .faq-item__a p{margin:0;}
.page-faq .faq-item__a a{
  color:var(--accent-ink);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.page-faq .faq-item__a a:hover,
.page-faq .faq-item__a a:focus-visible{
  border-bottom-color:var(--accent-ink);
}
.page-faq .faq-item[open] .faq-item__a{
  animation:faq-open .22s ease both;
}
@keyframes faq-open{
  from{opacity:0;transform:translateY(-5px);}
  to{opacity:1;transform:none;}
}

/* ---------- 图组 ---------- */
.page-faq .faq-figure{
  margin:22px 0 0;
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--light-line);
  border-radius:var(--faq-radius);
  background:linear-gradient(180deg,rgba(227,234,243,.55),rgba(247,250,255,.9));
}
.page-faq .faq-figure__media{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ink-900);
}
.page-faq .faq-figure__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
.page-faq .faq-figure--portrait .faq-figure__media img{
  max-height:340px;
  object-position:top center;
}
.page-faq .faq-figure__text{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--light-muted);
}
.page-faq .faq-figure__kicker{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-help{
  position:relative;
  margin-top:54px;
  padding:32px 24px 30px;
  border-radius:var(--radius-xl);
  background:var(--ink-900);
  color:var(--text);
  overflow:hidden;
  clip-path:polygon(0 3%,100% 0,100% 100%,0 100%);
}
.page-faq .faq-help::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-100px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,47,.22),rgba(255,122,47,0) 65%);
  pointer-events:none;
}
.page-faq .faq-help__kicker{
  position:relative;
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.page-faq .faq-help__title{
  position:relative;
  margin:0;
  font-size:clamp(21px,3.6vw,30px);
  line-height:1.25;
  font-weight:800;
}
.page-faq .faq-help__text{
  position:relative;
  margin:14px 0 22px;
  max-width:62ch;
  font-size:16px;
  line-height:1.8;
  color:var(--text-muted);
}
.page-faq .faq-help__text a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(198,255,61,.4);
  transition:border-color .18s ease;
}
.page-faq .faq-help__text a:hover,
.page-faq .faq-help__text a:focus-visible{
  border-bottom-color:var(--accent);
}

/* ---------- 平板 ---------- */
@media (min-width:768px){
  .page-faq .faq-figure{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:22px;
    padding:20px;
  }
  .page-faq .faq-figure--wide{
    grid-template-columns:1fr;
  }
  .page-faq .faq-figure--portrait .faq-figure__media img{
    max-height:420px;
  }
  .page-faq .faq-figure--wide .faq-figure__text{
    padding:0 4px;
  }
  .page-faq .faq-help{
    padding:44px 40px 40px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width:1024px){
  .page-faq .faq-hero{
    padding:calc(var(--header-h) + 72px) 0 104px;
  }
  .page-faq .faq-layout{
    grid-template-columns:288px minmax(0,1fr);
    gap:56px;
    padding-top:60px;
    padding-bottom:96px;
  }
  .page-faq .faq-index{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    border-top:none;
    padding-top:0;
  }
  .page-faq .faq-index__list{
    display:block;
    overflow:visible;
    padding-bottom:0;
  }
  .page-faq .faq-index__title{
    margin-bottom:16px;
  }
  .page-faq .faq-index__link{
    display:flex;
    width:100%;
    padding:11px 0 11px 16px;
    border:none;
    border-left:2px solid var(--light-line);
    border-radius:0;
    background:transparent;
    font-weight:600;
    white-space:normal;
    transition:border-color .2s ease,color .2s ease,padding-left .2s ease;
  }
  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible{
    border-left-color:var(--accent-ink);
    color:var(--accent-ink);
    padding-left:20px;
    transform:none;
  }
  .page-faq .faq-item__q{
    padding:18px 22px;
    font-size:17px;
  }
  .page-faq .faq-item__a{
    padding:0 22px 20px;
    max-width:76ch;
  }
  .page-faq .faq-figure--portrait .faq-figure__media img{
    max-height:480px;
  }
}

@media (min-width:1280px){
  .page-faq .faq-layout{
    grid-template-columns:308px minmax(0,1fr);
    gap:64px;
  }
}
<<<END>>>
不对，我不该加 `<<<END>>>`。让我重新检查结果——协议说每个标记只能出现一次，而且顺序必须精确。我应该只输出 `` 块，然后 `` 块。`<<<END>>>` 标记不在协议里。让我修正一下。

实际上再看一下要求：“严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：`` ... ``”。所以只有两个标记。我需要去掉 `<<<END>>>`。既然我之前已经输出了，我再输出一次修正后的版本……不，等等。我已经完整写了回复。我现在能做的就是承认这个问题，然后重新输出正确的版本。不过让我重新检查一下，确保最终输出里没有别的错误。

再看一遍：我在末尾加了 `<<<END>>>`，这不是协议标记。我需要去掉它。让我重新输出干净版本，最后不要这个标记。

其实既然这是单一回复，我应该直接把修正后的最终版本输出出去。让我重新生成完整的干净文本。

嗯，但重新生成意味着要重写所有内容，这会有重复出错的风险。既然内容已经正确了，我干脆就重新输出，把 `<<<END>>>` 去掉。

其实等等——重读指令：“严格按以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号”——所以只应出现 `` 和 ``，按这个顺序。我应该重新输出完整的干净版本。

让我仔细重新生成完整输出，确保末尾没有多余标记。
<main id="main-content" class="page-faq">

  <section class="faq-hero">
    <div class="shell faq-hero__inner">
      <nav class="breadcrumb" aria-label="面包屑">
        <a class="breadcrumb__link" href="/">首页</a>
        <span class="breadcrumb__sep">/</span>
        <span aria-current="page">知识中心</span>
      </nav>
      <p class="eyebrow faq-hero__eyebrow">04 / 常见问题</p>
      <h1 class="faq-hero__title">看球遇到卡住的地方，先来这里翻一翻</h1>
      <p class="faq-hero__lead">
        第一次进站不知道从哪点、看不懂射门统计里的那几列数字、家里的收藏页突然多了一张说明卡片——
        你在使用 GOGO 体育站时会碰到的疑问，基本都按场景排在这四个分组里，翻到就能自己动手解决。
      </p>
      <ul class="faq-hero__tags">
        <li><a href="#start">快速上手</a></li>
        <li><a href="#mobile">移动端说明</a></li>
        <li><a href="#stats">射门统计</a></li>
        <li><a href="#follow">订阅与关注</a></li>
        <li><a href="#favorite">收藏与提醒</a></li>
        <li><a href="#account">账号与设备</a></li>
      </ul>
      <p class="faq-hero__meta"><span class="faq-hero__num">68</span> 个常见问题，按上手、数据、移动端、账号四类整理</p>
    </div>
  </section>

  <div class="shell faq-layout">

    <aside class="faq-index" aria-label="问题索引">
      <p class="faq-index__title">问题索引</p>
      <ol class="faq-index__list">
        <li><a class="faq-index__link" href="#start"><span class="faq-index__num">01</span><span class="faq-index__label">快速上手</span></a></li>
        <li><a class="faq-index__link" href="#mobile"><span class="faq-index__num">02</span><span class="faq-index__label">移动端说明在哪看</span></a></li>
        <li><a class="faq-index__link" href="#stats"><span class="faq-index__num">03</span><span class="faq-index__label">射门统计字段</span></a></li>
        <li><a class="faq-index__link" href="#follow"><span class="faq-index__num">04</span><span class="faq-index__label">订阅与关注合并</span></a></li>
        <li><a class="faq-index__link" href="#favorite"><span class="faq-index__num">05</span><span class="faq-index__label">收藏与轮次提醒</span></a></li>
        <li><a class="faq-index__link" href="#account"><span class="faq-index__num">06</span><span class="faq-index__label">账号与设备</span></a></li>
        <li><a class="faq-index__link" href="#help"><span class="faq-index__num">07</span><span class="faq-index__label">还没找到答案</span></a></li>
      </ol>
    </aside>

    <div class="faq-body">

      <section class="faq-group" id="start">
        <header class="faq-group__head">
          <span class="faq-group__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5 10.8 10.8 8.5 15.5l4.7-2.3z"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">01 /</span>快速上手</h2>
        </header>
        <p class="faq-group__desc">从进门到把自己常看的东西固定好，六步就能走完。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>第一次进来，先点哪里最快？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>从首页入口带或者 <a href="/offerings/">内容与功能</a> 进内容中心，先挑一个联赛。8 个联赛按赛季分区排列，选好之后这个联赛的轮次和球队动态在同一页连着往下看，不用来回切页面，一轮的安排一两分钟就能过完。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>怎么把我常看的球队固定下来？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在球队条目上点订阅即可。订阅对象会直接进入内容中心的关注列表，和你以前关注过的球队合在同一个入口，一次最多能订 30 支，赛季中间想换一批随时可以调整。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>轮次安排在哪里查？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>内容中心提供 8 个联赛的轮次日历，可以按周翻，也可以按轮次一条条看。给家里提前排看球时间，建议用按周视图；想复盘某一轮的完整安排，切到按轮次更清楚。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>收藏页是做什么用的？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>把你最常打开的页面收进去，下次一点就到。收藏页最多可以把 6 个入口钉在顶部，超出的仍然留在列表里，只是不再固定在最上面，顺序可以自己调。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>换一台设备，要重新设置一遍吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>不用。登录之后收藏页的置顶顺序会跟着账号走，手机上排好的顺序，换到电脑打开还是原来那样，新设备上直接接着用，不会从头再来。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>移动端最近有调整，我去哪里看？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>打开收藏页，最上面那张带编号的卡片就是。版本更新之后它会跟着刷新，读完点一下收起，想再回看就从版本说明入口重新打开，内容都还在。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="mobile">
        <header class="faq-group__head">
          <span class="faq-group__icon faq-group__icon--violet" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 6h2"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">02 /</span>移动端变更说明在哪里看</h2>
        </header>
        <p class="faq-group__desc">手机上做了调整，你不需要四处打听，位置一直是固定的那一个。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>说明卡片固定出现在哪里？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在收藏页的最上方。打开收藏页先看到它，再往下才是你置顶的入口。手机和电脑上的位置是一致的，不用在两个端上找不同的地方。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>什么时候会出现新的一条？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>移动端有调整的时候，说明会随版本更新一起刷新，出现在同一个位置。没有变动时就保持上一条内容，不会反复弹窗打断你看东西。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>看完了怎么让它让开？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>点卡片上的收起按钮即可，收走之后它不再占着收藏页顶部，置顶的入口会顺势往上移。收起只是把它挪到后面，内容并没有被删掉。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>过一阵子想再翻一遍怎么办？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>从版本说明入口进去，可以找到历次更新的记录，按迭代顺序排列。移动端和桌面端的调整都记在同一份记录里，想确认某个入口是什么时候变的，翻到对应版本就行。</p>
            </div>
          </details>
        </div>

        <figure class="faq-figure faq-figure--portrait">
          <div class="faq-figure__media">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机屏幕中的收藏页顶部置顶一张说明卡片，卡片带编号与收起按钮，深色主题">
          </div>
          <figcaption class="faq-figure__text">
            <p class="faq-figure__kicker">对照查找</p>
            <p>打开收藏页，最上面这张带编号的卡片就是移动端说明。点收起之后，置顶入口会顺势上移，卡片本身可以从版本说明里再调出来。</p>
          </figcaption>
        </figure>
      </section>

      <section class="faq-group" id="stats">
        <header class="faq-group__head">
          <span class="faq-group__icon faq-group__icon--jade" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V10"/><path d="M10 19V5"/><path d="M16 19v-7"/><path d="M21 19H3"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">03 /</span>射门统计字段怎么读</h2>
        </header>
        <p class="faq-group__desc">GOGO新用户射门统计里一共四个字段，每个都对应一个具体问题，看得懂就不怕数字多。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>射门数是看什么？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>一轮里完成的攻门次数总和，包括被封堵和打偏的那些。它衡量的是进攻尝试的量，数值高说明这支球队整场都在往前压，但不代表效率好。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>射正数和它差在哪？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>射正只统计打在门框范围内、需要门将出手处理的那部分。把它和射门数放在一起看，两三个数字之间就能大致判断出这批射门的成色。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>区域分布说明什么问题？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>按起脚位置把射门拆开，看进攻是集中在球门正面的核心区域，还是更多从外围远射。同样数量的射门，起脚位置不同，对比赛走势的含义完全不一样。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>转化率该怎么理解？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>转化率回答的是「这么多脚射门换回了几粒进球」。它和球队打法强相关，单独看一个数字意义有限，放在同一联赛的队伍之间横向比较才更容易读出差别。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>第一次看，建议按什么顺序读？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先看射门数知道产出，再看射正数判断威胁，接着用区域分布确认进攻从哪里发起，最后落到转化率上看效率。四步走下来，一轮的进攻轮廓就出来了。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>数据多久更新一次？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>每轮结束后 90 分钟内完成录入与复核，四个字段会一起出现，不会今天有射门数、明天才补齐转化率。本季统计已经覆盖全部轮次，中间不会缺段。</p>
            </div>
          </details>
        </div>

        <figure class="faq-figure faq-figure--wide">
          <div class="faq-figure__media">
            <img src="{zhanqunpic:h:760w:1200}" width="1200" height="760" alt="抽象信息图，射门数、射正数、区域分布与转化率四个字段以等宽标签标注并由细线连接" loading="lazy" decoding="async">
          </div>
          <figcaption class="faq-figure__text">四个字段连起来读才拼得出一轮进攻的完整轮廓，单独拎出任何一个都容易看偏。</figcaption>
        </figure>
      </section>

      <section class="faq-group" id="follow">
        <header class="faq-group__head">
          <span class="faq-group__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16"/><path d="M5 8h14"/><path d="M7 8l-3 6h6z"/><path d="M17 8l-3 6h6z"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">04 /</span>订阅球队与关注列表合并之后</h2>
        </header>
        <p class="faq-group__desc">原来分开的两份名单现在是一份，管理方式比以前省事。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>在哪里管理这两份名单？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在内容中心的一个入口里。订阅的球队和你之前关注过的对象并排列出，加一个或者去掉一个都在同一处完成，不用再为了找某支球队跑两个地方。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>一次能订多少支球队？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>最多 30 支。名额满了以后想再加新的，需要先取消一个已经不需要的，取消是立即生效的，不会拖着不放手。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>原来列表里的内容还在吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在。合并之前关注过的对象会原样出现在新列表里，连顺序都保留着，不需要重新添加一遍。打开内容中心确认一下，就能接着用。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>不想看了怎么取消？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在该球队的条目上点取消订阅，它就从列表里移出去了。之前的轮次和比赛记录仍然可以正常查看，取消只是不再往你的列表里推新内容。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="favorite">
        <header class="faq-group__head">
          <span class="faq-group__icon faq-group__icon--warm" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10a1 1 0 0 1 1 1v15l-6-3.6L6 20V5a1 1 0 0 1 1-1z"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">05 /</span>收藏与轮次提醒</h2>
        </header>
        <p class="faq-group__desc">把一家人看球要用的东西摆到顺手的位置，比赛日就不用现找。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>收藏页最多能置顶几个入口？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>6 个。这 6 个会被钉在收藏页最上面，打开就能点。超出的收藏项照常保留在下方列表中，只是不参与置顶，想换位置随时可以调整。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>换了设备，置顶顺序会乱吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>不会。登录状态下收藏页支持跨设备同步，你在手机上排好的顺序，用平板或者电脑打开还是原样，家里人换着设备看也不会找不到入口。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>家里一起看球，怎么设置最省事？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>把轮次日历置顶在收藏页第一位，再把常看的球队动态收进来。比赛日提前一天对着日历确认时间和先后顺序，开赛时两屏并排，一边看进程一边跟数据。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>轮次提醒什么时候会来？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在你关注的联赛进入下一个轮次之前提醒。提醒和收藏是配套使用的：先把轮次日历收好，比赛日到来时你手边就有一条最短的路径。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="account">
        <header class="faq-group__head">
          <span class="faq-group__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M8 20h8"/></svg>
          </span>
          <h2 class="faq-group__title"><span class="faq-group__num">06 /</span>账号与设备</h2>
        </header>
        <p class="faq-group__desc">换个端、换块屏幕，看到的应该是同一份内容。</p>

        <div class="faq-list">
          <details class="faq-item">
            <summary class="faq-item__q">
              <span>不登录能用吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>浏览轮次、球队动态和射门统计都不需要登录。收藏页的置顶顺序要在登录状态下才能跟着账号走，想让几台设备看到同一份安排，登录一下就行。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>手机和电脑上看到的内容一样吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>内容一致，排布会随屏幕宽度调整。页面适配 360 像素到 2560 像素之间的显示设备；宽度到 1440 像素以上时，桌面端会展开三栏布局，把轮次、动态和统计同时铺开。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>同一时间在几台设备上用会有影响吗？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>不会有冲突。收藏顺序和订阅列表都以账号为准，最后一台设备上做的调整会让你下次打开别的端时看到同样的结果，随时切换都可以。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>页面显示错位了怎么办？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先刷新一次页面，多数情况下就恢复正常。如果换设备后依然如此，把设备型号和出错页面的名称记下来，到 <a href="/consult/">咨询服务</a> 留给我们，排查会快很多。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span>收藏和订阅的数据会被怎么使用？</span>
              <span class="faq-item__mark" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>这些内容用于给你展示关注对象和相关条目。<a href="/privacy-center/">隐私中心</a> 里写明了收集范围、保存方式和删除途径，想了解细节可以直接过去看。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-help" id="help">
        <p class="faq-help__kicker">07 / 还没找到答案</p>
        <h2 class="faq-help__title">把情况说清楚，回复会更快</h2>
        <p class="faq-help__text">
          把设备型号、出问题的页面、涉及的联赛或轮次一并写下来，我们能直接定位到具体位置，省去来回确认的几轮沟通。
          工作日一般 4 小时以内回复，节假日 24 小时以内。想先了解内容团队怎么运营这些栏目，也可以去
          <a href="/culture/">品牌文化</a> 看看，或者翻 <a href="/topics/">动态专题</a> 里最近的更新记录。
        </p>
        <a class="btn btn--primary" href="/consult/">去咨询服务</a>
      </section>

    </div>
  </div>

</main>

.page-faq{
  --faq-card:#FFFFFF;
  --faq-shadow:0 16px 36px rgba(7,18,35,.09);
  --faq-radius:var(--radius-lg);
  background:var(--light-bg);
  color:var(--light-text);
  font-family:var(--font-body);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  background:var(--ink-900);
  color:var(--text);
  padding:calc(var(--header-h) + 40px) 0 80px;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  top:-200px;
  right:-160px;
  width:640px;
  height:640px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,255,61,.2),rgba(198,255,61,0) 66%);
  pointer-events:none;
}
.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  left:-10%;
  bottom:11%;
  width:120%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,122,47,0),rgba(255,122,47,.5),rgba(198,255,61,.35),rgba(198,255,61,0));
  transform:rotate(-3deg);
  pointer-events:none;
}
.page-faq .faq-hero__inner{
  position:relative;
  z-index:1;
}
.page-faq .faq-hero .breadcrumb{
  margin-bottom:26px;
  color:var(--text-muted);
}
.page-faq .faq-hero .breadcrumb__link{
  color:var(--text-muted);
  text-decoration:none;
}
.page-faq .faq-hero .breadcrumb__link:hover,
.page-faq .faq-hero .breadcrumb__link:focus-visible{
  color:var(--accent);
}
.page-faq .faq-hero__eyebrow{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.page-faq .faq-hero__title{
  margin:0;
  max-width:16em;
  font-size:clamp(30px,6vw,58px);
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.page-faq .faq-hero__lead{
  margin:20px 0 0;
  max-width:60ch;
  font-size:16px;
  line-height:1.8;
  color:rgba(227,234,243,.78);
}
.page-faq .faq-hero__tags{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-faq .faq-hero__tags a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(227,234,243,.26);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.page-faq .faq-hero__tags a:hover,
.page-faq .faq-hero__tags a:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(198,255,61,.08);
}
.page-faq .faq-hero__meta{
  margin:22px 0 0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(227,234,243,.6);
}
.page-faq .faq-hero__num{
  color:var(--accent);
  font-size:18px;
  font-weight:700;
}

/* ---------- 版心布局 ---------- */
.page-faq .faq-layout{
  display:grid;
  gap:30px;
  padding-top:44px;
  padding-bottom:76px;
}

/* ---------- 左栏索引 ---------- */
.page-faq .faq-index{
  border-top:1px solid var(--light-line);
  padding-top:18px;
}
.page-faq .faq-index__title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--light-muted);
}
.page-faq .faq-index__list{
  list-style:none;
  margin:0;
  padding:0 0 4px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-index__list::-webkit-scrollbar{display:none;}
.page-faq .faq-index__link{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex:none;
  padding:8px 14px;
  border:1px solid var(--light-line);
  border-radius:999px;
  background:var(--faq-card);
  color:var(--light-text);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.page-faq .faq-index__num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--accent-ink);
}
.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{
  border-color:var(--ink-500);
  transform:translateY(-2px);
}

/* ---------- 分组 ---------- */
.page-faq .faq-group{
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-faq .faq-group + .faq-group{
  margin-top:54px;
  padding-top:38px;
  border-top:1px dashed var(--light-line);
}
.page-faq .faq-group__head{
  display:flex;
  align-items:center;
  gap:12px;
}
.page-faq .faq-group__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:13px;
  background:var(--ink-700);
  color:var(--lime-400);
}
.page-faq .faq-group__icon--violet{
  background:var(--violet-800);
  color:#D8C4FF;
}
.page-faq .faq-group__icon--jade{
  background:var(--jade-800);
  color:#8FE9D2;
}
.page-faq .faq-group__icon--warm{
  background:var(--orange-500);
  color:#3A1400;
}
.page-faq .faq-group__icon svg{
  width:19px;
  height:19px;
  display:block;
}
.page-faq .faq-group__title{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:clamp(21px,3.4vw,29px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}
.page-faq .faq-group__num{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--accent-ink);
}
.page-faq .faq-group__desc{
  margin:12px 0 0;
  max-width:64ch;
  font-size:15px;
  line-height:1.8;
  color:var(--light-muted);
}

/* ---------- 问答折叠 ---------- */
.page-faq .faq-list{
  margin-top:22px;
  display:grid;
  gap:10px;
}
.page-faq .faq-item{
  background:var(--faq-card);
  border:1px solid var(--light-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.page-faq .faq-item:hover{
  border-color:var(--ink-500);
  transform:translateY(-2px);
}
.page-faq .faq-item[open]{
  border-color:var(--ink-500);
  box-shadow:var(--faq-shadow);
}
.page-faq .faq-item__q{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  color:var(--light-text);
  transition:color .2s ease;
}
.page-faq .faq-item__q::-webkit-details-marker{display:none;}
.page-faq .faq-item__q:hover{color:var(--accent-ink);}
.page-faq .faq-item__q:focus-visible{
  outline:2px solid var(--lime-700);
  outline-offset:-2px;
}
.page-faq .faq-item__mark{
  position:relative;
  flex:none;
  width:18px;
  height:18px;
  margin-top:3px;
}
.page-faq .faq-item__mark::before,
.page-faq .faq-item__mark::after{
  content:"";
  position:absolute;
  background:var(--accent-ink);
  border-radius:2px;
  transition:transform .22s ease,opacity .22s ease;
}
.page-faq .faq-item__mark::before{
  left:2px;
  right:2px;
  top:8px;
  height:2px;
}
.page-faq .faq-item__mark::after{
  top:2px;
  bottom:2px;
  left:8px;
  width:2px;
}
.page-faq .faq-item[open] .faq-item__mark::after{
  transform:scaleY(0);
  opacity:0;
}
.page-faq .faq-item__a{
  padding:0 18px 18px;
  font-size:16px;
  line-height:1.8;
  color:var(--light-muted);
}
.page-faq .faq-item__a p{margin:0;}
.page-faq .faq-item__a a{
  color:var(--accent-ink);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.page-faq .faq-item__a a:hover,
.page-faq .faq-item__a a:focus-visible{
  border-bottom-color:var(--accent-ink);
}
.page-faq .faq-item[open] .faq-item__a{
  animation:faq-open .22s ease both;
}
@keyframes faq-open{
  from{opacity:0;transform:translateY(-5px);}
  to{opacity:1;transform:none;}
}

/* ---------- 图组 ---------- */
.page-faq .faq-figure{
  margin:22px 0 0;
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--light-line);
  border-radius:var(--faq-radius);
  background:linear-gradient(180deg,rgba(227,234,243,.55),rgba(247,250,255,.9));
}
.page-faq .faq-figure__media{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ink-900);
}
.page-faq .faq-figure__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
.page-faq .faq-figure--portrait .faq-figure__media img{
  max-height:340px;
  object-position:top center;
}
.page-faq .faq-figure__text{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--light-muted);
}
.page-faq .faq-figure__kicker{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
}

/* ---------- 收尾 ---------- */
.page-faq .faq-help{
  position:relative;
  margin-top:54px;
  padding:32px 24px 30px;
  border-radius:var(--radius-xl);
  background:var(--ink-900);
  color:var(--text);
  overflow:hidden;
  clip-path:polygon(0 3%,100% 0,100% 100%,0 100%);
}
.page-faq .faq-help::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-100px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,47,.22),rgba(255,122,47,0) 65%);
  pointer-events:none;
}
.page-faq .faq-help__kicker{
  position:relative;
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.page-faq .faq-help__title{
  position:relative;
  margin:0;
  font-size:clamp(21px,3.6vw,30px);
  line-height:1.25;
  font-weight:800;
}
.page-faq .faq-help__text{
  position:relative;
  margin:14px 0 22px;
  max-width:62ch;
  font-size:16px;
  line-height:1.8;
  color:var(--text-muted);
}
.page-faq .faq-help__text a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(198,255,61,.4);
  transition:border-color .18s ease;
}
.page-faq .faq-help__text a:hover,
.page-faq .faq-help__text a:focus-visible{
  border-bottom-color:var(--accent);
}

/* ---------- 平板 ---------- */
@media (min-width:768px){
  .page-faq .faq-figure{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:22px;
    padding:20px;
  }
  .page-faq .faq-figure--wide{
    grid-template-columns:1fr;
  }
  .page-faq .faq-figure--portrait .faq-figure__media img{
    max-height:420px;
  }
  .page-faq .faq-figure--wide .faq-figure__text{
    padding:0 4px;
  }
  .page-faq .faq-help{
    padding:44px 40px 40px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width:1024px){
  .page-faq .faq-hero{
    padding:calc(var(--header-h) + 72px) 0 104px;
  }
  .page-faq .faq-layout{
    grid-template-columns:288px minmax(0,1fr);
    gap:56px;
    padding-top:60px;
    padding-bottom:96px;
  }
  .page-faq .faq-index{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    border-top:none;
    padding-top:0;
  }
  .page-faq .faq-index__list{
    display:block;
    overflow:visible;
    padding-bottom:0;
  }
  .page-faq .faq-index__title{
    margin-bottom:16px;
  }
  .page-faq .faq-index__link{
    display:flex;
    width:100%;
    padding:11px 0 11px 16px;
    border:none;
    border-left:2px solid var(--light-line);
    border-radius:0;
    background:transparent;
    font-weight:600;
    white-space:normal;
    transition:border-color .2s ease,color .2s ease,padding-left .2s ease;
  }
  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible{
    border-left-color:var(--accent-ink);
    color:var(--accent-ink);
    padding-left:20px;
    transform:none;
  }
  .page-faq .faq-item__q{
    padding:18px 22px;
    font-size:17px;
  }
  .page-faq .faq-item__a{
    padding:0 22px 20px;
    max-width:76ch;
  }
  .page-faq .faq-figure--portrait .faq-figure__media img{
    max-height:480px;
  }
}

@media (min-width:1280px){
  .page-faq .faq-layout{
    grid-template-columns:308px minmax(0,1fr);
    gap:64px;
  }
}