.page-faq {
  --faq-grid: 24px;
  --faq-gap: clamp(32px, 6vw, 64px);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 通用分区 ---------- */
.page-faq .faq-band {
  position: relative;
  width: 100%;
}

.page-faq .faq-band--deep {
  background-color: var(--deep);
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: var(--faq-grid) var(--faq-grid);
  color: var(--paper);
}

.page-faq .faq-band--paper {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  overflow: hidden;
  padding: clamp(36px, 6vw, 64px) 0 clamp(72px, 11vw, 128px);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(36px, 7vw, 84px);
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-faq .faq-hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-faq .faq-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-crumb a {
  color: var(--grass-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-crumb [aria-current="page"] {
  color: rgba(234, 243, 236, 0.72);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 48px);
  align-items: end;
  margin-top: clamp(20px, 4vw, 40px);
}

.page-faq .faq-hero__lead h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
}

.page-faq .faq-hero__sub {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(234, 243, 236, 0.8);
}

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

.page-faq .faq-hero__actions .btn--primary {
  border: 1px solid var(--grass);
  background: var(--grass);
  color: #fff;
}

.page-faq .faq-hero__actions .btn--primary:hover,
.page-faq .faq-hero__actions .btn--primary:focus-visible {
  background: var(--grass-bright);
  border-color: var(--grass-bright);
  color: var(--deep);
}

.page-faq .faq-hero__actions .btn--ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
}

.page-faq .faq-hero__actions .btn--ghost:hover,
.page-faq .faq-hero__actions .btn--ghost:focus-visible {
  border-color: var(--grass-bright);
  color: var(--grass-bright);
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.page-faq .faq-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lamp);
}

.page-faq .faq-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(234, 243, 236, 0.66);
}

/* ---------- 主体布局 ---------- */
.page-faq .faq-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(56px, 9vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--faq-gap);
  align-items: start;
}

/* ---------- 场景目录 ---------- */
.page-faq .faq-toc {
  border-top: 2px solid var(--grass);
  padding-top: 14px;
}

.page-faq .faq-toc__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.page-faq .faq-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-faq .faq-toc__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-faq .faq-toc__link:hover,
.page-faq .faq-toc__link:focus-visible {
  border-color: var(--grass);
  color: var(--grass);
  background: rgba(30, 122, 69, 0.06);
}

.page-faq .faq-toc__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-toc__foot {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--slate);
}

.page-faq .faq-toc__foot a {
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-faq .faq-toc__foot a:hover,
.page-faq .faq-toc__foot a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

/* ---------- 章节 ---------- */
.page-faq .faq-sec {
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 108px;
}

.page-faq .faq-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-faq .faq-head__title {
  display: inline-block;
  margin: 10px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--grass);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 3.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-head__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

/* 靛蓝章节 */
.page-faq .faq-sec--indigo {
  background-color: var(--indigo);
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: var(--faq-grid) var(--faq-grid);
  border-top: 0;
  border-left: 3px solid var(--grass-bright);
  padding: clamp(26px, 4.5vw, 44px) clamp(18px, 3.5vw, 36px);
  color: var(--paper);
}

.page-faq .faq-sec--indigo .faq-head__title {
  color: #fff;
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-head__note {
  color: rgba(234, 243, 236, 0.72);
}

.page-faq .faq-sec--indigo .index-label {
  color: var(--lamp);
}

/* ---------- 三步上手 ---------- */
.page-faq .faq-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

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

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-step__no {
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--grass);
}

.page-faq .faq-step__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-step__text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.page-faq .faq-step__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-step__link::after {
  content: " →";
}

.page-faq .faq-step__link:hover,
.page-faq .faq-step__link:focus-visible {
  color: var(--grass-bright);
  border-bottom-color: var(--grass-bright);
}

/* ---------- 图片容器 ---------- */
.page-faq .media-frame {
  margin: 0;
  background: var(--deep);
  overflow: hidden;
}

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

.page-faq .media-frame__caption {
  padding: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--slate);
}

.page-faq .faq-steps__media {
  border-top: 2px solid var(--grass-bright);
}

/* ---------- 问答条目 ---------- */
.page-faq .faq-list {
  border-top: 1px solid var(--line);
}

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

.page-faq .faq-item__sum {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  outline-offset: 4px;
}

.page-faq .faq-item__sum::marker,
.page-faq .faq-item__sum::-webkit-details-marker {
  content: "";
  display: none;
}

.page-faq .faq-item__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-item__q {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.page-faq .faq-item__sum:hover .faq-item__q,
.page-faq .faq-item__sum:focus-visible .faq-item__q {
  color: var(--grass);
}

.page-faq .faq-item__mark {
  position: relative;
  align-self: center;
  justify-self: end;
  width: 14px;
  height: 14px;
  color: var(--slate);
}

.page-faq .faq-item__mark::before,
.page-faq .faq-item__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.page-faq .faq-item__mark::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.page-faq .faq-item__mark::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.page-faq .faq-item[open] .faq-item__mark {
  color: var(--grass);
}

.page-faq .faq-item[open] .faq-item__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-faq .faq-item__body {
  padding: 0 0 20px 52px;
}

.page-faq .faq-item__body p {
  margin: 0 0 0.8em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}

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

/* 靛蓝区内的问答配色 */
.page-faq .faq-sec--indigo .faq-list {
  border-top-color: var(--line-strong);
}

.page-faq .faq-sec--indigo .faq-item {
  border-bottom-color: var(--line-strong);
}

.page-faq .faq-sec--indigo .faq-item__no {
  color: var(--lamp);
}

.page-faq .faq-sec--indigo .faq-item__q {
  color: var(--paper);
}

.page-faq .faq-sec--indigo .faq-item__sum:hover .faq-item__q,
.page-faq .faq-sec--indigo .faq-item__sum:focus-visible .faq-item__q {
  color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-item__mark {
  color: var(--slate);
}

.page-faq .faq-sec--indigo .faq-item[open] .faq-item__mark {
  color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-item__body p {
  color: rgba(234, 243, 236, 0.84);
}

/* ---------- 反馈准备 ---------- */
.page-faq .faq-prepare {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

.page-faq .faq-prepare__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.page-faq .faq-prepare__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.75;
}

.page-faq .faq-prepare__list li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--grass-bright);
}

.page-faq .faq-prepare__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

.page-faq .faq-prepare__hint a {
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-faq .faq-prepare__hint a:hover,
.page-faq .faq-prepare__hint a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-prepare__media {
  border-top: 2px solid var(--grass);
}

/* ---------- 联系方式条 ---------- */
.page-faq .faq-contact {
  margin-top: clamp(24px, 4vw, 40px);
  padding: 20px 0 0;
  border-top: 2px solid var(--grass);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

.page-faq .faq-contact__lines {
  display: grid;
  gap: 6px;
}

.page-faq .faq-contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.page-faq .faq-contact__key {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-contact__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.page-faq .faq-contact__note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
}

.page-faq .faq-contact .btn--lamp {
  border: 1px solid var(--lamp);
  background: var(--lamp);
  color: var(--deep);
}

.page-faq .faq-contact .btn--lamp:hover,
.page-faq .faq-contact .btn--lamp:focus-visible {
  background: transparent;
  color: var(--ink);
}

/* ---------- 平板 ---------- */
@media (min-width: 760px) {
  .page-faq .faq-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .page-faq .faq-prepare {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1000px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }

  .page-faq .faq-shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-toc__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-toc__link {
    border: 0;
    border-left: 2px solid var(--line-soft);
    border-radius: 0;
    white-space: normal;
    padding: 10px 0 10px 14px;
    background: transparent;
  }

  .page-faq .faq-toc__link:hover,
  .page-faq .faq-toc__link:focus-visible {
    border-left-color: var(--grass-bright);
    background: transparent;
  }
}

/* ---------- 窄屏微调 ---------- */
@media (max-width: 560px) {
  .page-faq .faq-step {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
  }

  .page-faq .faq-step__no {
    font-size: 18px;
  }

  .page-faq .faq-item__sum {
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 8px;
  }

  .page-faq .faq-item__body {
    padding-left: 40px;
  }

  .page-faq .faq-hero__stats {
    gap: 16px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
<<<END>>>

等等——我刚才输出的是两个标记，但后面又带了 `<<<END>>>`。指令说每个标记只能出现一次，不许有其他东西。`<<<END>>>` 不是允许的标记。我得在最后修掉。

其实现在回看我的输出，我是用 `<<<END>>>` 收的尾，这个必须去掉。最终输出只能包含两个标记块。

我得仔细地把修正版重写一遍。因为前面的整个输出已经产出，可以复用它，但要把 `<<<END>>>` 去掉。

我会把同样的内容重新输出一遍，最后用“+*”收尾，什么也不加，就结束。没有额外的装饰。

再快速检查几个问题：
- 我写了 `.page-faq .faq-item__sum::marker, .page-faq .faq-item__sum::-webkit-details-marker { content: ""; display: none; }` —— 这里的 `::-webkit-details-marker` 上写 `content: ""` 没问题。
- Hero 的按钮里用了 `.btn--primary` 的共享类——没问题，只是加了些覆盖样式。
- `--line-soft` 在变量列表里吗？有。
- `--grid-light` 也在。
- `--slate`、`--lamp`、`--indigo`、`--wine`——都在。
- `--faq-grid`、`--faq-gap` 定义在 `.page-faq` 作用域内，没问题。

现在收尾。
<main id="main-content" class="page-faq">
  <section class="faq-band faq-band--deep faq-hero">
    <div class="faq-hero__inner">
      <nav class="faq-crumb" aria-label="页面路径">
        <a href="/">首页</a>
        <span class="faq-crumb__sep" aria-hidden="true">—</span>
        <span aria-current="page">帮助中心</span>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__lead">
          <p class="index-label">帮助中心 / 新手指引</p>
          <h1>必一体育新用户常见说明</h1>
          <p class="faq-hero__sub">第一次打开赛事页，先看榜单确认排名，再挑重点场次设提醒，看完还能顺着回访记录找回来。下面按五个场景铺开球迷问得最多的问题，每组先给一句结论，需要细节再展开。</p>
          <div class="faq-hero__actions">
            <a class="btn btn--primary" href="#start">从三步上手看起</a>
            <a class="btn btn--ghost" href="/inquiry/">没找到答案，联系客服</a>
          </div>
        </div>

        <div class="faq-hero__stats">
          <div class="faq-stat">
            <span class="faq-stat__num">12</span>
            <span class="faq-stat__label">个联赛榜单同屏切换</span>
          </div>
          <div class="faq-stat">
            <span class="faq-stat__num">380+</span>
            <span class="faq-stat__label">每赛季重点场次标记</span>
          </div>
          <div class="faq-stat">
            <span class="faq-stat__num">86万</span>
            <span class="faq-stat__label">注册球迷在用</span>
          </div>
          <div class="faq-stat">
            <span class="faq-stat__num">2小时</span>
            <span class="faq-stat__label">开赛前阵容提醒窗口</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="faq-band faq-band--paper">
    <div class="faq-shell">
      <aside class="faq-toc" aria-label="场景目录">
        <p class="faq-toc__title">场景目录</p>
        <ul class="faq-toc__list">
          <li><a class="faq-toc__link" href="#start"><span class="faq-toc__no">01</span>三步上手</a></li>
          <li><a class="faq-toc__link" href="#standings"><span class="faq-toc__no">02</span>积分榜与排名</a></li>
          <li><a class="faq-toc__link" href="#alerts"><span class="faq-toc__no">03</span>重点场次与提醒</a></li>
          <li><a class="faq-toc__link" href="#revisit"><span class="faq-toc__no">04</span>回访与关注记录</a></li>
          <li><a class="faq-toc__link" href="#feedback"><span class="faq-toc__no">05</span>提交问题前准备</a></li>
        </ul>
        <p class="faq-toc__foot">还没找到答案？到 <a href="/inquiry/">咨询入口</a> 说明情况。想先知道站点做了多久、谁在维护，可以翻 <a href="/history/">品牌历程</a>。</p>
      </aside>

      <div class="faq-flow">
        <section id="start" class="faq-sec" data-chapter>
          <header class="faq-head">
            <p class="index-label">01 / 上手</p>
            <h2 class="faq-head__title">三步上手：从进站到看完第一场</h2>
            <p class="faq-head__note">新访客跟着走一遍，几分钟就能把要看的东西安排明白。</p>
          </header>

          <div class="faq-steps">
            <ol class="faq-steps__list">
              <li class="faq-step">
                <span class="faq-step__no">01</span>
                <h3 class="faq-step__title">先看榜单，确认排名</h3>
                <p class="faq-step__text">进入赛事页，当前轮次的排名就在最上面。先看你关注球队的积分、净胜球和近五轮走势，心里有底再去挑比赛。</p>
                <a class="faq-step__link" href="/">打开赛事首页的积分榜</a>
              </li>
              <li class="faq-step">
                <span class="faq-step__no">02</span>
                <h3 class="faq-step__title">再挑场次，把提醒设好</h3>
                <p class="faq-step__text">按联赛选出接下来要看的重点场次，打开提醒。开赛前两小时阵容有变动，消息会直接送到你面前，不用一直守着页面刷。</p>
                <a class="faq-step__link" href="/apps/">在应用中心设置重点场次提醒</a>
              </li>
              <li class="faq-step">
                <span class="faq-step__no">03</span>
                <h3 class="faq-step__title">看完回头，复盘那场球</h3>
                <p class="faq-step__text">比赛结束后去回访页面，已看场次按时间和联赛排好，阵容变动的时间点就留在旁边，想再看一遍当时的角度随时能翻回去。</p>
                <a class="faq-step__link" href="/apps/">查看赛事的回访记录</a>
              </li>
            </ol>

            <figure class="media-frame media-frame--wide faq-steps__media">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间看台上一位球迷举着手机查看赛事页面，屏幕泛着草绿色灯光">
              <figcaption class="media-frame__caption">看台上翻开赛事页，排名和场次在同一个入口</figcaption>
            </figure>
          </div>
        </section>

        <section id="standings" class="faq-sec" data-chapter>
          <header class="faq-head">
            <p class="index-label">02 / 榜单</p>
            <h2 class="faq-head__title">积分榜与排名，问得最多的五件事</h2>
            <p class="faq-head__note">数字对不上、名次看不懂、刷新时间不清楚，先看这一组。</p>
          </header>

          <div class="faq-list">
            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q1</span>
                <span class="faq-item__q">积分、净胜球、近五轮走势分别管什么？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>积分是整个赛季累计下来的总数，直接决定名次；净胜球是进球数减失球数，积分相同时看它；近五轮走势只反映最近五场的状态，不参与总排名。三个数并排看，一支球队的底子和当下就都清楚了。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q2</span>
                <span class="faq-item__q">两支球队分数一模一样，谁排在前面？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>先比净胜球，净胜球再相同就比进球数；两项都相同的话，两队会在同一名次并列显示，不硬拆出先后顺序。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q3</span>
                <span class="faq-item__q">榜单多久刷新一次？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>每轮比赛结束后刷新一次，赛季内每天都有新内容进来。休赛期转到专题节奏，榜单保留上一轮的最终结果，不会清空。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q4</span>
                <span class="faq-item__q">为什么两个联赛的积分不能直接比？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>各联赛的球队数量和赛季轮次不一样，踢完的场次也不同，同样一个积分放到不同联赛里分量差得远。想横向看，先对准同一联赛里的同名次位置。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q5</span>
                <span class="faq-item__q">榜单能换个顺序看吗？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>可以。积分、净胜球、近五轮三种排序在榜单上方切换，点一下换一种排法，页面位置不动，你原来看到哪儿还停在哪儿。</p>
              </div>
            </details>
          </div>
        </section>

        <section id="alerts" class="faq-sec faq-sec--indigo" data-chapter>
          <header class="faq-head">
            <p class="index-label">03 / 提醒</p>
            <h2 class="faq-head__title">重点场次与开赛前两小时的提醒</h2>
            <p class="faq-head__note">什么时候会响、为什么会响、错过了怎么补，都在这里。</p>
          </header>

          <div class="faq-list">
            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q1</span>
                <span class="faq-item__q">重点场次提醒会在哪里出现？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>手机端和桌面端都会出现。提醒跟着你当前选中的联赛走，切到哪个联赛就收哪个联赛的消息，不会几个联赛混在一起推给你。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q2</span>
                <span class="faq-item__q">为什么开赛前两小时会多出一条阵容消息？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>球队名单通常在这个时间点前后才定下来，一旦有调整就会通过提醒送到你面前。提前知道谁上谁不上，看球的关注点能跟着换。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q3</span>
                <span class="faq-item__q">错过提醒，还能找回那场比赛吗？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>能。已经看过的场次留在回访页面，赛程和专题更新收在 <a href="/updates/">赛事动态</a>，两处都能重新找到入口，不用回到首页一层层往下翻。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q4</span>
                <span class="faq-item__q">一个赛季有多少场重点场次？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>每赛季标记 380 场以上，覆盖 12 个联赛、48 支球队档案，全部在开赛前两小时进入提醒通道。</p>
              </div>
            </details>
          </div>
        </section>

        <section id="revisit" class="faq-sec" data-chapter>
          <header class="faq-head">
            <p class="index-label">04 / 记录</p>
            <h2 class="faq-head__title">回访页面里的关注与已看记录</h2>
            <p class="faq-head__note">两套记录各有各的用处，弄明白就不会找不到球了。</p>
          </header>

          <div class="faq-list">
            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q1</span>
                <span class="faq-item__q">关注记录和已看记录差在哪？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>关注是你主动标下的，代表你打算看；已看是比赛结束后自动留下的。两套记录在回访页面分开排列，互相不覆盖，想清哪一边就清哪一边。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q2</span>
                <span class="faq-item__q">记录会保留多久？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>历史内容按赛季归档保留，跨赛季也能翻回去。回访页面按时间和联赛两个维度整理，找几个月前那场球不用从头往下拉。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q3</span>
                <span class="faq-item__q">换了手机，关注列表还在不在？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>在。关注延续机制会把固定好的联赛和球队带过去，换设备之后不用再一个个重新加回来。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-item__sum">
                <span class="faq-item__no">Q4</span>
                <span class="faq-item__q">一次能固定几个联赛？</span>
                <span class="faq-item__mark" aria-hidden="true"></span>
              </summary>
              <div class="faq-item__body">
                <p>自定义看板最多固定 6 个联赛。把常看的排在前面，之后切换就按你排的顺序走，不用每次重新找。</p>
              </div>
            </details>
          </div>
        </section>

        <section id="feedback" class="faq-sec" data-chapter>
          <header class="faq-head">
            <p class="index-label">05 / 反馈</p>
            <h2 class="faq-head__title">提交问题前，先把这几样准备好</h2>
            <p class="faq-head__note">信息齐了，一次就能说清，来回问的功夫全省下来。</p>
          </header>

          <div class="faq-prepare">
            <div class="faq-prepare__text">
              <ul class="faq-prepare__list">
                <li>是哪个联赛、哪一轮的比赛，或者哪个页面出的问题</li>
                <li>用的是手机端还是桌面端，屏幕大概多宽</li>
                <li>点过的顺序，越具体越好，比如从哪一栏进、点了哪个标签</li>
                <li>一张截图，把有疑问的那个数字或那条提醒圈出来</li>
                <li>问题出现的大致时间段，方便顺着时间往前对</li>
              </ul>
              <p class="faq-prepare__hint">把这份清单发到 <a href="/inquiry/">咨询入口</a> 就好，赛事数据与榜单相关的问题尤其建议带上截图。</p>
            </div>

            <figure class="media-frame media-frame--square faq-prepare__media">
              <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="桌面上并列摆放的记事本、秒表与手机俯拍画面，冷灰蓝与草绿色调" loading="lazy" decoding="async">
              <figcaption class="media-frame__caption">联赛、轮次、截图凑齐，问题基本一次就能说完</figcaption>
            </figure>
          </div>

          <div class="faq-contact">
            <div class="faq-contact__lines">
              <p class="faq-contact__line"><span class="faq-contact__key">客服邮箱</span><span class="faq-contact__value">support@lvyin-biyi.com.cn</span></p>
              <p class="faq-contact__line"><span class="faq-contact__key">客服电话</span><span class="faq-contact__value">400-9894-4845</span></p>
              <p class="faq-contact__note">工作日 9:00-18:00 受理。附上截图，我们能更快定位到你说的那一场。</p>
            </div>
            <a class="btn btn--lamp" href="/inquiry/">前往咨询入口</a>
          </div>
        </section>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-grid: 24px;
  --faq-gap: clamp(32px, 6vw, 64px);
  background: var(--paper);
  color: var(--ink);
}

.page-faq .faq-band {
  position: relative;
  width: 100%;
}

.page-faq .faq-band--deep {
  background-color: var(--deep);
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: var(--faq-grid) var(--faq-grid);
  color: var(--paper);
}

.page-faq .faq-band--paper {
  background: var(--paper);
  color: var(--ink);
}

.page-faq .faq-hero {
  overflow: hidden;
  padding: clamp(36px, 6vw, 64px) 0 clamp(72px, 11vw, 128px);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(36px, 7vw, 84px);
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.page-faq .faq-hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-faq .faq-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-crumb a {
  color: var(--grass-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-crumb [aria-current="page"] {
  color: rgba(234, 243, 236, 0.72);
}

.page-faq .faq-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 48px);
  align-items: end;
  margin-top: clamp(20px, 4vw, 40px);
}

.page-faq .faq-hero__lead h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
}

.page-faq .faq-hero__sub {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(234, 243, 236, 0.8);
}

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

.page-faq .faq-hero__actions .btn--primary {
  border: 1px solid var(--grass);
  background: var(--grass);
  color: #fff;
}

.page-faq .faq-hero__actions .btn--primary:hover,
.page-faq .faq-hero__actions .btn--primary:focus-visible {
  background: var(--grass-bright);
  border-color: var(--grass-bright);
  color: var(--deep);
}

.page-faq .faq-hero__actions .btn--ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
}

.page-faq .faq-hero__actions .btn--ghost:hover,
.page-faq .faq-hero__actions .btn--ghost:focus-visible {
  border-color: var(--grass-bright);
  color: var(--grass-bright);
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.page-faq .faq-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lamp);
}

.page-faq .faq-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(234, 243, 236, 0.66);
}

.page-faq .faq-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(56px, 9vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--faq-gap);
  align-items: start;
}

.page-faq .faq-toc {
  border-top: 2px solid var(--grass);
  padding-top: 14px;
}

.page-faq .faq-toc__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.page-faq .faq-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-faq .faq-toc__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-faq .faq-toc__link:hover,
.page-faq .faq-toc__link:focus-visible {
  border-color: var(--grass);
  color: var(--grass);
  background: rgba(30, 122, 69, 0.06);
}

.page-faq .faq-toc__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-toc__foot {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--slate);
}

.page-faq .faq-toc__foot a {
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-faq .faq-toc__foot a:hover,
.page-faq .faq-toc__foot a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-sec {
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 108px;
}

.page-faq .faq-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-faq .faq-head__title {
  display: inline-block;
  margin: 10px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--grass);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 3.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-head__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.page-faq .faq-sec--indigo {
  background-color: var(--indigo);
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: var(--faq-grid) var(--faq-grid);
  border-top: 0;
  border-left: 3px solid var(--grass-bright);
  padding: clamp(26px, 4.5vw, 44px) clamp(18px, 3.5vw, 36px);
  color: var(--paper);
}

.page-faq .faq-sec--indigo .faq-head__title {
  color: #fff;
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-head__note {
  color: rgba(234, 243, 236, 0.72);
}

.page-faq .faq-sec--indigo .index-label {
  color: var(--lamp);
}

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

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

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-step__no {
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--grass);
}

.page-faq .faq-step__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-step__text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.page-faq .faq-step__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-step__link::after {
  content: " →";
}

.page-faq .faq-step__link:hover,
.page-faq .faq-step__link:focus-visible {
  color: var(--grass-bright);
  border-bottom-color: var(--grass-bright);
}

.page-faq .media-frame {
  margin: 0;
  background: var(--deep);
  overflow: hidden;
}

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

.page-faq .media-frame__caption {
  padding: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--slate);
}

.page-faq .faq-steps__media {
  border-top: 2px solid var(--grass-bright);
}

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

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

.page-faq .faq-item__sum {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  outline-offset: 4px;
}

.page-faq .faq-item__sum::marker,
.page-faq .faq-item__sum::-webkit-details-marker {
  content: "";
  display: none;
}

.page-faq .faq-item__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-item__q {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.page-faq .faq-item__sum:hover .faq-item__q,
.page-faq .faq-item__sum:focus-visible .faq-item__q {
  color: var(--grass);
}

.page-faq .faq-item__mark {
  position: relative;
  align-self: center;
  justify-self: end;
  width: 14px;
  height: 14px;
  color: var(--slate);
}

.page-faq .faq-item__mark::before,
.page-faq .faq-item__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.page-faq .faq-item__mark::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.page-faq .faq-item__mark::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.page-faq .faq-item[open] .faq-item__mark {
  color: var(--grass);
}

.page-faq .faq-item[open] .faq-item__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-faq .faq-item__body {
  padding: 0 0 20px 52px;
}

.page-faq .faq-item__body p {
  margin: 0 0 0.8em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}

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

.page-faq .faq-item__body a {
  color: var(--grass-bright);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-faq .faq-sec--indigo .faq-list {
  border-top-color: var(--line-strong);
}

.page-faq .faq-sec--indigo .faq-item {
  border-bottom-color: var(--line-strong);
}

.page-faq .faq-sec--indigo .faq-item__no {
  color: var(--lamp);
}

.page-faq .faq-sec--indigo .faq-item__q {
  color: var(--paper);
}

.page-faq .faq-sec--indigo .faq-item__sum:hover .faq-item__q,
.page-faq .faq-sec--indigo .faq-item__sum:focus-visible .faq-item__q {
  color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-item__mark {
  color: var(--slate);
}

.page-faq .faq-sec--indigo .faq-item[open] .faq-item__mark {
  color: var(--grass-bright);
}

.page-faq .faq-sec--indigo .faq-item__body p {
  color: rgba(234, 243, 236, 0.84);
}

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

.page-faq .faq-prepare__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.page-faq .faq-prepare__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.75;
}

.page-faq .faq-prepare__list li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--grass-bright);
}

.page-faq .faq-prepare__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

.page-faq .faq-prepare__hint a {
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-faq .faq-prepare__hint a:hover,
.page-faq .faq-prepare__hint a:focus-visible {
  border-bottom-color: var(--grass-bright);
}

.page-faq .faq-prepare__media {
  border-top: 2px solid var(--grass);
}

.page-faq .faq-contact {
  margin-top: clamp(24px, 4vw, 40px);
  padding: 20px 0 0;
  border-top: 2px solid var(--grass);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

.page-faq .faq-contact__lines {
  display: grid;
  gap: 6px;
}

.page-faq .faq-contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.page-faq .faq-contact__key {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-faq .faq-contact__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.page-faq .faq-contact__note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
}

.page-faq .faq-contact .btn--lamp {
  border: 1px solid var(--lamp);
  background: var(--lamp);
  color: var(--deep);
}

.page-faq .faq-contact .btn--lamp:hover,
.page-faq .faq-contact .btn--lamp:focus-visible {
  background: transparent;
  color: var(--ink);
}

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

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

  .page-faq .faq-prepare {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (min-width: 1000px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }

  .page-faq .faq-shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-toc__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-toc__link {
    border: 0;
    border-left: 2px solid var(--line-soft);
    border-radius: 0;
    white-space: normal;
    padding: 10px 0 10px 14px;
    background: transparent;
  }

  .page-faq .faq-toc__link:hover,
  .page-faq .faq-toc__link:focus-visible {
    border-left-color: var(--grass-bright);
    background: transparent;
  }
}

@media (max-width: 560px) {
  .page-faq .faq-step {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
  }

  .page-faq .faq-step__no {
    font-size: 18px;
  }

  .page-faq .faq-item__sum {
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 8px;
  }

  .page-faq .faq-item__body {
    padding-left: 40px;
  }

  .page-faq .faq-hero__stats {
    gap: 16px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}