.page-faq {
  --faq-rail-w: 300px;
  --faq-line: 1px solid var(--hair);
}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero {
  padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(30, 143, 99, .16) 0%, transparent 58%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-bottom: var(--faq-line);
}

.page-faq .faq-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.page-faq .faq-hero__frame {
  background: linear-gradient(200deg, rgba(13, 42, 68, .92) 0%, rgba(6, 23, 38, .92) 100%);
  border: var(--faq-line);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-faq .faq-hero__frame .breadcrumbs {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.page-faq .faq-hero__frame .breadcrumbs a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-faq .faq-hero__frame .breadcrumbs a:hover {
  color: var(--brand-bright);
  border-bottom-color: var(--brand-bright);
}

.page-faq .faq-hero__lede {
  max-width: 42ch;
  color: var(--text-2);
}

.page-faq .faq-hero__pulse {
  list-style: none;
  margin: clamp(8px, 2vw, 20px) 0 0;
  padding: clamp(16px, 2vw, 22px) 0 0;
  border-top: var(--faq-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-faq .faq-hero__pulse li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--moss);
}

.page-faq .faq-hero__pulse li:nth-child(2) {
  border-left-color: var(--amber);
}

.page-faq .faq-hero__pulse-num {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
}

.page-faq .faq-hero__pulse-label {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
}

.page-faq .faq-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-faq .faq-hero__aside .media-frame--portrait {
  aspect-ratio: 10 / 7;
  border: var(--faq-line);
  background: var(--panel);
  overflow: hidden;
}

.page-faq .faq-hero__aside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-faq .faq-hero__aside .media-frame__caption {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  padding-top: clamp(32px, 5vw, 64px);
}

.page-faq .faq-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

/* ---------- 左栏索引 ---------- */
.page-faq .faq-rail {
  border: var(--faq-line);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-faq .faq-rail__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 6px 0 0;
}

.page-faq .faq-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-faq .faq-filter__label {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
}

.page-faq .faq-filter__input {
  width: 100%;
  background: var(--ink);
  border: var(--faq-line);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 10px 12px;
  outline: none;
}

.page-faq .faq-filter__input::placeholder {
  color: var(--text-3);
}

.page-faq .faq-filter__input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.page-faq .faq-index__link {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: var(--faq-line);
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

.page-faq .faq-index__mark {
  width: 3px;
  height: 18px;
  background: transparent;
  transition: background-color .18s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link.is-current {
  color: var(--text);
  background: rgba(30, 143, 99, .08);
}

.page-faq .faq-index__link:hover .faq-index__mark,
.page-faq .faq-index__link.is-current .faq-index__mark {
  background: var(--amber);
}

.page-faq .faq-index__count {
  font-size: 13px;
  color: var(--text-3);
}

.page-faq .faq-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-rail__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
  border-top: var(--faq-line);
  padding-top: 14px;
}

/* ---------- 分组 ---------- */
.page-faq .faq-group {
  scroll-margin-top: 96px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(36px, 5vw, 64px);
}

.page-faq .faq-group__head {
  border-top: 2px solid var(--brand);
  padding-top: 18px;
  margin-bottom: 18px;
}

.page-faq .faq-group__intro {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.7;
  margin: 10px 0 0;
  max-width: 56ch;
}

/* ---------- 问答面板 ---------- */
.page-faq .faq-item {
  border: var(--faq-line);
  background: var(--panel);
  margin-bottom: 12px;
  position: relative;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: transparent;
  transition: background-color .2s var(--ease);
}

.page-faq .faq-item[data-open="true"] {
  border-color: rgba(63, 185, 138, .42);
  box-shadow: var(--shadow);
}

.page-faq .faq-item[data-open="true"]::before {
  background: var(--brand);
}

.page-faq .faq-item.is-filtered-out {
  display: none;
}

.page-faq .faq-item__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.page-faq .faq-item__trigger {
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 16px 16px 16px 20px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: background-color .18s var(--ease);
}

.page-faq .faq-item__trigger:hover {
  background: rgba(63, 185, 138, .06);
}

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

.page-faq .faq-item__q {
  font-weight: 500;
}

.page-faq .faq-item__tags {
  display: inline-flex;
  gap: 6px;
}

.page-faq .faq-item__arrow {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-item[data-open="true"] .faq-item__arrow {
  transform: rotate(225deg);
  border-color: var(--brand-bright);
}

.page-faq .faq-item__panel {
  display: none;
  border-top: var(--faq-line);
}

.page-faq .faq-item[data-open="true"] .faq-item__panel {
  display: block;
}

.page-faq .faq-item__body {
  padding: 16px 20px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
}

.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 a {
  color: var(--brand-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 185, 138, .45);
}

.page-faq .faq-item__body a:hover {
  border-bottom-color: var(--brand-bright);
}

/* 三步编号列表 */
.page-faq .faq-steps {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: faq-step;
}

.page-faq .faq-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ink);
  border-left: 2px solid var(--moss);
  color: var(--text);
  font-size: 15px;
}

.page-faq .faq-steps__num {
  color: var(--amber);
  font-size: 15px;
}

/* ---------- 图 ---------- */
.page-faq .faq-figure {
  margin: 0 0 16px;
}

.page-faq .faq-figure .media-frame--wide {
  border: var(--faq-line);
  background: var(--ink-2);
  overflow: hidden;
}

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

.page-faq .faq-figure .media-frame__caption {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.6;
}

/* ---------- 米白反转小节 ---------- */
.page-faq .faq-band {
  margin: clamp(36px, 5vw, 64px) 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--amber);
}

.page-faq .faq-band__inner {
  padding: clamp(26px, 4vw, 48px) clamp(20px, 3vw, 40px);
}

.page-faq .faq-band .index-label {
  color: rgba(6, 23, 38, .6);
}

.page-faq .faq-band__title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 8px 0 12px;
  color: var(--ink);
}

.page-faq .faq-band__lede {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(6, 23, 38, .72);
  max-width: 62ch;
  margin: 0 0 22px;
}

.page-faq .faq-band__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border-top: 1px solid rgba(6, 23, 38, .16);
  padding-top: 22px;
}

.page-faq .faq-band__col-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.page-faq .faq-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.page-faq .faq-band__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(6, 23, 38, .78);
}

.page-faq .faq-band__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--brand);
}

.page-faq .faq-band__foot {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(6, 23, 38, .7);
}

.page-faq .faq-band__foot a {
  color: #14694a;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 105, 74, .5);
}

.page-faq .faq-band__foot a:hover {
  border-bottom-color: #14694a;
}

/* ---------- 联系说明牌 ---------- */
.page-faq .faq-contact {
  scroll-margin-top: 96px;
}

.page-faq .faq-contact__plate {
  border: var(--faq-line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(160deg, var(--panel) 0%, var(--ink) 100%);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 40px);
}

.page-faq .faq-contact__title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  margin: 8px 0 12px;
  color: var(--text);
}

.page-faq .faq-contact__lede {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 0 22px;
}

.page-faq .faq-contact__list {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-faq .faq-contact__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 12px 0;
  border-top: var(--faq-line);
}

.page-faq .faq-contact__row dt {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-3);
}

.page-faq .faq-contact__row dd {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-mono);
  word-break: break-word;
}

.page-faq .faq-contact__row dd a {
  color: var(--brand-bright);
  text-decoration: none;
}

.page-faq .faq-contact__row dd a:hover {
  border-bottom: 1px solid var(--brand-bright);
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 1.35fr .9fr;
    align-items: stretch;
  }

  .page-faq .faq-band__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .page-faq .faq-contact__row {
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 16px;
  }

  .page-faq .faq-item__trigger {
    grid-template-columns: 1fr auto 20px;
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-body__grid {
    grid-template-columns: var(--faq-rail-w) 1fr;
    gap: clamp(28px, 3vw, 52px);
  }

  .page-faq .faq-hero__inner {
    grid-template-columns: 1.6fr .85fr;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 88px;
  }
}

@media (min-width: 1280px) {
  .page-faq .faq-band__inner {
    padding-left: clamp(32px, 4vw, 72px);
    padding-right: clamp(32px, 4vw, 72px);
  }

  .page-faq .faq-band__cols {
    gap: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-item__arrow,
  .page-faq .faq-index__mark,
  .page-faq .faq-index__link,
  .page-faq .faq-item__trigger {
    transition: none;
  }
}
</main>
<<<END>>>

Wait — I made an error. The output must start with the main_html marker and end properly. Let me re-emit the full answer correctly.


<main id="main-content" class="page-faq">
  <section class="faq-hero" aria-labelledby="faq-title">
    <div class="container faq-hero__inner">
      <div class="faq-hero__frame tick-frame">
        <span class="tick-frame__marks" aria-hidden="true"></span>
        <nav class="breadcrumbs" aria-label="当前位置">
          <a href="/">首页</a>
          <span aria-hidden="true">/</span>
          <span aria-current="page">知识中心</span>
        </nav>
        <p class="index-label">KNOWLEDGE / 答疑索引</p>
        <h1 id="faq-title" class="display-title">操作卡住的那一刻，答案就在下一行</h1>
        <p class="lede faq-hero__lede">
          半岛体育中文站把联赛筛选、额度刷新、跨端同步这些最常被追问的细节整理成可以直接照做的回答。找到问题，展开，按编号点两下，回到你常看的那一栏。
        </p>
        <ul class="faq-hero__pulse" role="list">
          <li><span class="faq-hero__pulse-num num">21</span><span class="faq-hero__pulse-label label">联赛与杯赛栏目</span></li>
          <li><span class="faq-hero__pulse-num num num--amber">15</span><span class="faq-hero__pulse-label label">分钟刷新一次</span></li>
          <li><span class="faq-hero__pulse-num num">30</span><span class="faq-hero__pulse-label label">分钟内完成同步</span></li>
        </ul>
      </div>
      <div class="faq-hero__aside">
        <div class="media-frame media-frame--portrait">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="深色背景上由圆点与连线组成的抽象问答节点图" decoding="async">
        </div>
        <p class="media-frame__caption">问题按操作、数据、账号三条线索分组，展开即可读完整答案。</p>
      </div>
    </div>
  </section>

  <section class="section faq-body" aria-labelledby="faq-index-title">
    <div class="container faq-body__grid">
      <aside class="rail rail--sticky faq-rail">
        <div class="faq-rail__head">
          <p class="index-label">FILTER / 快速定位</p>
          <h2 id="faq-index-title" class="faq-rail__title">先按分组找，或直接搜关键词</h2>
        </div>
        <label class="faq-filter" for="faq-filter-input">
          <span class="faq-filter__label">输入关键词</span>
          <input id="faq-filter-input" class="faq-filter__input" type="search" placeholder="如：筛选、额度、收藏" autocomplete="off">
        </label>
        <nav class="faq-index" aria-label="问题分组索引">
          <ul class="faq-index__list" role="list">
            <li><a class="faq-index__link" href="#group-operate"><span class="faq-index__mark" aria-hidden="true"></span><span class="faq-index__text">操作类问题</span><span class="faq-index__count num">5</span></a></li>
            <li><a class="faq-index__link" href="#group-data"><span class="faq-index__mark" aria-hidden="true"></span><span class="faq-index__text">数据类问题</span><span class="faq-index__count num">4</span></a></li>
            <li><a class="faq-index__link" href="#group-account"><span class="faq-index__mark" aria-hidden="true"></span><span class="faq-index__text">账号与访问</span><span class="faq-index__count num">4</span></a></li>
            <li><a class="faq-index__link" href="#group-contact"><span class="faq-index__mark" aria-hidden="true"></span><span class="faq-index__text">还没找到答案</span><span class="faq-index__count num">1</span></a></li>
          </ul>
        </nav>
        <div class="faq-rail__actions">
          <button class="btn btn--ghost btn--small" type="button" data-faq-expand-all>展开全部</button>
          <button class="btn btn--ghost btn--small" type="button" data-faq-collapse-all>收起全部</button>
        </div>
        <p class="faq-rail__note note">答案控制在三步以内，涉及操作的部分可以直接照着点。</p>
      </aside>

      <div class="content-col faq-col">
        <section class="faq-group" id="group-operate" aria-labelledby="group-operate-title">
          <header class="faq-group__head">
            <p class="index-label">01 / OPERATION</p>
            <h2 id="group-operate-title" class="section-title">操作类问题</h2>
            <p class="faq-group__intro">筛选条件、收藏数量、换设备之后怎么找回，都在这里说清楚。</p>
          </header>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="operate">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">切换联赛筛选费用时，具体要点哪几步？</span>
                <span class="faq-item__tags"><span class="tag tag--brand">操作</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>固定三步，不需要来回切页：</p>
                <ol class="faq-steps">
                  <li><span class="faq-steps__num num">1</span>在栏目标题下选联赛或杯赛。</li>
                  <li><span class="faq-steps__num num">2</span>选赛季阶段，常规赛与窗口期分开展示。</li>
                  <li><span class="faq-steps__num num">3</span>拖动费用区间后确认，列表即时重排。</li>
                </ol>
                <p class="note">条件组合可以叠加赛事、赛季阶段、费用区间三种，改完立刻生效，不用刷新页面。</p>
              </div>
            </div>
          </div>

          <figure class="faq-figure">
            <div class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="三个编号方块与箭头连接的三步操作示意" loading="lazy" decoding="async">
            </div>
            <figcaption class="media-frame__caption">选联赛、选赛季、确认区间，三步完成后列表按你的条件重排。</figcaption>
          </figure>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="operate">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">筛选条件会不会丢？下次打开还在原位吗？</span>
                <span class="faq-item__tags"><span class="tag tag--brand">操作</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>会保留。收藏夹与筛选条件都存在本地，未登录也能恢复上次的浏览位置，关掉浏览器再回来就是离开时的那一栏。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="operate">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">常看的栏目可以收藏多少个？</span>
                <span class="faq-item__tags"><span class="tag tag--brand">操作</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>最多 20 个栏目入口。把常跟的两三个联赛、一个位置对照栏目放进去，就够日常来回切换了。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="operate">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">换了手机或电脑，怎么找回原来那一页？</span>
                <span class="faq-item__tags"><span class="tag tag--brand">操作</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>登录同一账号即可。Web、iOS、Android 与桌面端四个入口登录后，收藏与筛选条件自动同步，换设备不用重新设一遍。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="operate">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">想按球员或球队直接查，会不会只能靠联赛一层层点？</span>
                <span class="faq-item__tags"><span class="tag tag--brand">操作</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>不用。站内搜索支持按联赛、球队、球员、费用区间四种方式检索，输入名称或金额范围都能直接落点。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="faq-group" id="group-data" aria-labelledby="group-data-title">
          <header class="faq-group__head">
            <p class="index-label">02 / DATA</p>
            <h2 id="group-data-title" class="section-title">数据类问题</h2>
            <p class="faq-group__intro">刷新节奏、条目数量、指标口径，合作前你会想确认的几件事。</p>
          </header>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="data">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">薪资结构多久更新一次？</span>
                <span class="faq-item__tags"><span class="tag tag--amber">数据</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>每轮赛事结束后 30 分钟内完成同步。窗口期条目密集时，夜间也保持刷新。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="data">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">转会动态每天能看到多少条？</span>
                <span class="faq-item__tags"><span class="tag tag--amber">数据</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>焕新版客户端的转会动态额度为每日 120 条，覆盖 12 个主要联赛的转入与转出记录，按 15 分钟粒度刷新，赛季窗口期加密到 5 分钟一次。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="data">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">数据来自哪里？会不会只有一家来源？</span>
                <span class="faq-item__tags"><span class="tag tag--amber">数据</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>站内数据与 9 家公开数据服务商对接，交叉比对后再发布。内容团队共 32 人，其中 11 人专职赛事数据校对。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="data">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">覆盖多少联赛，薪资结构按什么拆？</span>
                <span class="faq-item__tags"><span class="tag tag--amber">数据</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>覆盖 21 个联赛与杯赛。薪资结构按位置、合同年限、出场贡献三个维度拆解，配套 48 项可比指标，横向对照时同一套标准不会打架。</p>
                <p class="note">想直接看差值和对比图，可以进<a href="/platform/">数据平台</a>的薪资结构栏目。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="faq-band" aria-labelledby="faq-band-title">
          <div class="faq-band__inner">
            <p class="index-label">03 / ACCOUNT</p>
            <h2 id="faq-band-title" class="faq-band__title">不登录也能读，登录之后才同步</h2>
            <p class="faq-band__lede">大部分人只是来看数字，所以我们把阅读门槛压到最低；需要跨设备带走自己的设置时，再登录。</p>
            <div class="faq-band__cols">
              <div class="faq-band__col">
                <h3 class="faq-band__col-title">不登录可以做什么</h3>
                <ul class="faq-band__list" role="list">
                  <li>浏览 21 个联赛与杯赛的薪资结构栏目</li>
                  <li>使用三步筛选与站内四种方式检索</li>
                  <li>收藏最多 20 个栏目入口，本地保存</li>
                </ul>
              </div>
              <div class="faq-band__col">
                <h3 class="faq-band__col-title">登录之后多出什么</h3>
                <ul class="faq-band__list" role="list">
                  <li>收藏与筛选条件在四个客户端之间同步</li>
                  <li>换设备后自动回到上次停留的栏目</li>
                  <li>夜间值班时段照常刷新，不受影响</li>
                </ul>
              </div>
            </div>
            <p class="faq-band__foot">记录了什么、保存多久，见<a href="/data-protection/">数据保护说明</a>。</p>
          </div>
        </section>

        <section class="faq-group" id="group-account" aria-labelledby="group-account-title">
          <header class="faq-group__head">
            <p class="index-label">04 / ACCESS</p>
            <h2 id="group-account-title" class="section-title">账号与访问类问题</h2>
            <p class="faq-group__intro">夜间看球的人问得最多的几条，都放在这里。</p>
          </header>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="account">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">客户端有哪几个版本，我该用哪个？</span>
                <span class="faq-item__tags"><span class="tag">账号</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>提供 Web、iOS、Android 与桌面端四个入口。白天用桌面端铺开对照，赛后随手用手机看刷新，收藏一致。版本从 v1.0 迭代到 v3.6，经历三次界面重排，主栏目入口由 6 个精简为 4 个。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="account">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">北京时间凌晨看球，数据还在更新吗？</span>
                <span class="faq-item__tags"><span class="tag tag--clay">变更</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>赛事窗口期提供夜间值班，北京时间 0:00 至 6:00 保持数据刷新，睡醒再看也不会落下一整晚的窗口变化。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="account">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">收藏按钮在页面的什么位置？</span>
                <span class="faq-item__tags"><span class="tag">账号</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p>常驻在顶部栏右端，与下载入口并排。点一下变成实心即为已收藏，再点一下取消，随时可改。下载入口固定在每个页面底部，一次点击进入客户端版本列表。</p>
              </div>
            </div>
          </div>

          <div class="disclosure faq-item" data-disclosure data-open="false" data-faq-group="account">
            <h3 class="faq-item__heading">
              <button class="disclosure__trigger faq-item__trigger" type="button" data-disclosure-trigger aria-expanded="false">
                <span class="faq-item__q">想看持续的专题记录，去哪里翻？</span>
                <span class="faq-item__tags"><span class="tag">账号</span></span>
                <span class="disclosure__arrow faq-item__arrow" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="disclosure__panel faq-item__panel" data-disclosure-panel>
              <div class="faq-item__body">
                <p><a href="/topics/">专题中心</a>运行 6 个常设专题：薪酬观察、转会窗口、联赛对照、位置价值、合同周期、新人合约。每月新增约 240 条薪资与合同条目，想连着看一整个赛季就收藏对应专题。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="faq-contact" id="group-contact" aria-labelledby="group-contact-title">
          <div class="faq-contact__plate">
            <p class="index-label">05 / CONTACT</p>
            <h2 id="group-contact-title" class="faq-contact__title">还没找到答案</h2>
            <p class="faq-contact__lede">上面没有覆盖到的情况，直接发邮件或打电话。工作日内回复薪资结构、转会动态额度与联赛筛选相关的操作咨询。</p>
            <dl class="faq-contact__list">
              <div class="faq-contact__row">
                <dt>客服邮箱</dt>
                <dd><a href="mailto:service@bandao-sports-scene.com.cn">service@bandao-sports-scene.com.cn</a></dd>
              </div>
              <div class="faq-contact__row">
                <dt>服务电话</dt>
                <dd><a href="tel:13898715003">13898715003</a></dd>
              </div>
              <div class="faq-contact__row">
                <dt>通信地址</dt>
                <dd>广西省南宁市青秀区民族大道131号</dd>
              </div>
            </dl>
            <div class="faq-contact__actions">
              <a class="btn btn--primary" href="/connect/">进入联系通道</a>
              <a class="btn btn--ghost" href="/platform/">先看数据平台</a>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-rail-w: 300px;
  --faq-line: 1px solid var(--hair);
}

.page-faq .faq-hero {
  padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(30, 143, 99, .16) 0%, transparent 58%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-bottom: var(--faq-line);
}

.page-faq .faq-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.page-faq .faq-hero__frame {
  position: relative;
  background: linear-gradient(200deg, rgba(13, 42, 68, .92) 0%, rgba(6, 23, 38, .92) 100%);
  border: var(--faq-line);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-faq .faq-hero__frame .breadcrumbs {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.page-faq .faq-hero__frame .breadcrumbs a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-faq .faq-hero__frame .breadcrumbs a:hover {
  color: var(--brand-bright);
  border-bottom-color: var(--brand-bright);
}

.page-faq .faq-hero__lede {
  max-width: 46ch;
  color: var(--text-2);
}

.page-faq .faq-hero__pulse {
  list-style: none;
  margin: clamp(8px, 2vw, 20px) 0 0;
  padding: clamp(16px, 2vw, 22px) 0 0;
  border-top: var(--faq-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-faq .faq-hero__pulse li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--moss);
}

.page-faq .faq-hero__pulse li:nth-child(2) {
  border-left-color: var(--amber);
}

.page-faq .faq-hero__pulse-num {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
}

.page-faq .faq-hero__pulse-label {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
}

.page-faq .faq-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-faq .faq-hero__aside .media-frame--portrait {
  aspect-ratio: 10 / 7;
  border: var(--faq-line);
  background: var(--panel);
  overflow: hidden;
}

.page-faq .faq-hero__aside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-faq .faq-hero__aside .media-frame__caption {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

.page-faq .faq-body {
  padding-top: clamp(32px, 5vw, 64px);
}

.page-faq .faq-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.page-faq .faq-rail {
  border: var(--faq-line);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-faq .faq-rail__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 6px 0 0;
}

.page-faq .faq-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-faq .faq-filter__label {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
}

.page-faq .faq-filter__input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ink);
  border: var(--faq-line);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 10px 12px;
  outline: none;
}

.page-faq .faq-filter__input::placeholder {
  color: var(--text-3);
}

.page-faq .faq-filter__input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

.page-faq .faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.page-faq .faq-index__link {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: var(--faq-line);
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

.page-faq .faq-index__mark {
  width: 3px;
  height: 18px;
  background: transparent;
  transition: background-color .18s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link.is-current {
  color: var(--text);
  background: rgba(30, 143, 99, .08);
}

.page-faq .faq-index__link:hover .faq-index__mark,
.page-faq .faq-index__link.is-current .faq-index__mark {
  background: var(--amber);
}

.page-faq .faq-index__count {
  font-size: 13px;
  color: var(--text-3);
}

.page-faq .faq-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-rail__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
  border-top: var(--faq-line);
  padding-top: 14px;
  margin: 0;
}

.page-faq .faq-group {
  scroll-margin-top: 96px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(36px, 5vw, 64px);
}

.page-faq .faq-group__head {
  border-top: 2px solid var(--brand);
  padding-top: 18px;
  margin-bottom: 18px;
}

.page-faq .faq-group__intro {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.7;
  margin: 10px 0 0;
  max-width: 56ch;
}

.page-faq .faq-item {
  border: var(--faq-line);
  background: var(--panel);
  margin-bottom: 12px;
  position: relative;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.page-faq .faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: transparent;
  transition: background-color .2s var(--ease);
}

.page-faq .faq-item[data-open="true"] {
  border-color: rgba(63, 185, 138, .42);
  box-shadow: var(--shadow);
}

.page-faq .faq-item[data-open="true"]::before {
  background: var(--brand);
}

.page-faq .faq-item.is-filtered-out {
  display: none;
}

.page-faq .faq-item__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.page-faq .faq-item__trigger {
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 16px 16px 16px 20px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: background-color .18s var(--ease);
}

.page-faq .faq-item__trigger:hover {
  background: rgba(63, 185, 138, .06);
}

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

.page-faq .faq-item__q {
  font-weight: 500;
}

.page-faq .faq-item__tags {
  display: inline-flex;
  gap: 6px;
}

.page-faq .faq-item__arrow {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}

.page-faq .faq-item[data-open="true"] .faq-item__arrow {
  transform: rotate(225deg);
  border-color: var(--brand-bright);
}

.page-faq .faq-item__panel {
  display: none;
  border-top: var(--faq-line);
}

.page-faq .faq-item[data-open="true"] .faq-item__panel {
  display: block;
}

.page-faq .faq-item__body {
  padding: 16px 20px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
}

.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 a {
  color: var(--brand-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 185, 138, .45);
}

.page-faq .faq-item__body a:hover {
  border-bottom-color: var(--brand-bright);
}

.page-faq .faq-item__body .note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.7;
}

.page-faq .faq-steps {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-faq .faq-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ink);
  border-left: 2px solid var(--moss);
  color: var(--text);
  font-size: 15px;
}

.page-faq .faq-steps__num {
  color: var(--amber);
  font-size: 15px;
}

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

.page-faq .faq-figure .media-frame--wide {
  border: var(--faq-line);
  background: var(--ink-2);
  overflow: hidden;
}

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

.page-faq .faq-figure .media-frame__caption {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.6;
}

.page-faq .faq-band {
  margin: clamp(36px, 5vw, 64px) 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--amber);
}

.page-faq .faq-band__inner {
  padding: clamp(26px, 4vw, 48px) clamp(20px, 3vw, 40px);
}

.page-faq .faq-band .index-label {
  color: rgba(6, 23, 38, .62);
}

.page-faq .faq-band__title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 8px 0 12px;
  color: var(--ink);
}

.page-faq .faq-band__lede {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(6, 23, 38, .74);
  max-width: 62ch;
  margin: 0 0 22px;
}

.page-faq .faq-band__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border-top: 1px solid rgba(6, 23, 38, .16);
  padding-top: 22px;
}

.page-faq .faq-band__col-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.page-faq .faq-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.page-faq .faq-band__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(6, 23, 38, .8);
}

.page-faq .faq-band__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--brand);
}

.page-faq .faq-band__foot {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(6, 23, 38, .72);
}

.page-faq .faq-band__foot a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 143, 99, .5);
}

.page-faq .faq-band__foot a:hover {
  border-bottom-color: var(--brand);
}

.page-faq .faq-contact {
  scroll-margin-top: 96px;
}

.page-faq .faq-contact__plate {
  border: var(--faq-line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(160deg, var(--panel) 0%, var(--ink) 100%);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 40px);
}

.page-faq .faq-contact__title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  margin: 8px 0 12px;
  color: var(--text);
}

.page-faq .faq-contact__lede {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 0 22px;
}

.page-faq .faq-contact__list {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-faq .faq-contact__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 12px 0;
  border-top: var(--faq-line);
}

.page-faq .faq-contact__row dt {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-3);
}

.page-faq .faq-contact__row dd {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-mono);
  word-break: break-word;
}

.page-faq .faq-contact__row dd a {
  color: var(--brand-bright);
  text-decoration: none;
}

.page-faq .faq-contact__row dd a:hover {
  border-bottom: 1px solid var(--brand-bright);
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 720px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 1.35fr .9fr;
  }

  .page-faq .faq-band__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .page-faq .faq-contact__row {
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 16px;
  }

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

@media (min-width: 1024px) {
  .page-faq .faq-body__grid {
    grid-template-columns: var(--faq-rail-w) 1fr;
    gap: clamp(28px, 3vw, 52px);
  }

  .page-faq .faq-hero__inner {
    grid-template-columns: 1.6fr .85fr;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 88px;
  }

  .page-faq .faq-index__link {
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  .page-faq .faq-band__inner {
    padding-left: clamp(32px, 4vw, 72px);
    padding-right: clamp(32px, 4vw, 72px);
  }

  .page-faq .faq-band__cols {
    gap: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item,
  .page-faq .faq-item::before,
  .page-faq .faq-item__arrow,
  .page-faq .faq-index__mark,
  .page-faq .faq-index__link,
  .page-faq .faq-item__trigger {
    transition: none;
  }
}