.page-faq {
  --faq-line: rgba(26, 21, 18, 0.14);
  --faq-line-soft: rgba(26, 21, 18, 0.07);
  --faq-on-night: rgba(255, 249, 239, 0.78);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-faq .faq-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-faq .faq-crumb {
  padding-top: 18px;
  padding-bottom: 4px;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--warm-gray);
}

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

.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible {
  text-decoration: underline;
}

/* ---------- hero ---------- */

.page-faq .faq-hero {
  position: relative;
  margin-top: 14px;
  background: var(--night);
  color: var(--paper-white);
  overflow: hidden;
  border-bottom: 4px solid var(--fox);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(232, 69, 31, 0.24) 0 26%, transparent 26.2%),
    linear-gradient(118deg, transparent 62%, rgba(61, 224, 196, 0.12) 62.2%);
  pointer-events: none;
}

.page-faq .faq-hero-inner {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 68px) var(--gutter) clamp(28px, 5vw, 56px);
  display: grid;
  gap: 32px;
}

.page-faq .faq-hero .kicker {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 8.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.page-faq .faq-hero-lead {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.3vw, 17px);
  line-height: 1.75;
  color: var(--faq-on-night);
}

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

.page-faq .faq-hero-scale {
  border-left: 2px solid rgba(61, 224, 196, 0.55);
  padding-left: 18px;
  align-self: end;
}

.page-faq .faq-scale-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 249, 239, 0.22);
}

.page-faq .faq-scale-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.page-faq .faq-scale-label {
  font-size: 14px;
  color: var(--faq-on-night);
}

.page-faq .faq-scale-foot {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

.page-faq .faq-hero-ruler {
  height: 16px;
  border-top: 1px solid rgba(255, 249, 239, 0.18);
  background-image: repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 26px);
  opacity: 0.4;
}

/* ---------- section base ---------- */

.page-faq .faq-section {
  padding-block: clamp(46px, 7.5vw, 88px);
}

.page-faq .faq-head {
  max-width: 62ch;
}

.page-faq .faq-head .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ember);
}

.page-faq .faq-head h2,
.page-faq .faq-split-copy h2,
.page-faq .faq-sync-copy h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.page-faq .faq-head p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--slate);
}

/* ---------- steps ---------- */

.page-faq .faq-steps-grid {
  margin-top: 34px;
  display: grid;
  gap: 26px;
}

.page-faq .faq-steps-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-steps-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-faq .faq-steps-media figcaption,
.page-faq .faq-subscribe-media figcaption {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--slate);
  background: var(--paper-white);
  border-top: 1px solid var(--faq-line);
}

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

.page-faq .faq-step-card {
  display: flex;
  gap: 16px;
  padding: 20px 20px 22px;
  background: var(--paper-white);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-step-card:hover {
  border-color: var(--fox);
  transform: translateY(-2px);
}

.page-faq .faq-step-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fox);
}

.page-faq .faq-step-body h3 {
  margin: 0;
  font-size: clamp(17px, 2.5vw, 21px);
  font-weight: 900;
  letter-spacing: -0.015em;
}

.page-faq .faq-step-body p {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--slate);
}

/* ---------- subscribe ---------- */

.page-faq .faq-subscribe {
  background: var(--paper-white);
  border-block: 2px solid var(--ink);
}

.page-faq .faq-split {
  display: grid;
  gap: 30px;
}

.page-faq .faq-split-copy .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ember);
}

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

.page-faq .faq-mini-list {
  counter-reset: faqmini;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.page-faq .faq-mini-list li {
  position: relative;
  counter-increment: faqmini;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--slate);
}

.page-faq .faq-mini-list li::before {
  content: "0" counter(faqmini);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ember);
}

.page-faq .faq-mini-list strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.page-faq .faq-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink);
  background: rgba(242, 181, 68, 0.22);
  border-left: 4px solid var(--yellow);
}

.page-faq .faq-inline-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-faq .faq-subscribe-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  align-self: start;
}

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

/* ---------- home check ---------- */

.page-faq .faq-check-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}

.page-faq .faq-check-card {
  padding: 20px 18px 22px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-top: 6px solid var(--fox);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-check-card h3 {
  margin: 0 0 12px;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

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

.page-faq .faq-check-card li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--slate);
}

.page-faq .faq-check-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 2px;
  background: var(--ember);
}

.page-faq .faq-check-card-accent {
  background: var(--night);
  color: var(--paper-white);
  border-color: var(--night);
  border-top-color: var(--cyan);
}

.page-faq .faq-check-card-accent p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-on-night);
}

.page-faq .faq-text-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.page-faq .faq-text-link:hover,
.page-faq .faq-text-link:focus-visible {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ---------- sync ---------- */

.page-faq .faq-sync {
  background: var(--night);
  color: var(--paper-white);
}

.page-faq .faq-sync-inner {
  display: grid;
  gap: 28px;
}

.page-faq .faq-sync-copy .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-faq .faq-sync-copy p {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--faq-on-night);
}

.page-faq .faq-sync-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-faq .faq-sync-item {
  padding: 16px 14px;
  border: 1px solid rgba(61, 224, 196, 0.36);
  background: rgba(13, 27, 42, 0.6);
}

.page-faq .faq-sync-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

.page-faq .faq-sync-label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faq-on-night);
}

.page-faq .faq-sync-foot {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 249, 239, 0.2);
  font-size: 14px;
  line-height: 1.72;
  color: var(--faq-on-night);
}

/* ---------- venue fields ---------- */

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

.page-faq .faq-field-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-field-key {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ember);
}

.page-faq .faq-field-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.74;
  color: var(--slate);
}

.page-faq .faq-note-wide {
  max-width: 68ch;
}

/* ---------- qa ---------- */

.page-faq .faq-qa-list {
  margin-top: 30px;
}

.page-faq .faq-qa {
  background: var(--paper-white);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  margin-bottom: 12px;
}

.page-faq .faq-qa summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 18px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

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

.page-faq .faq-qa summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--fox);
}

.page-faq .faq-qa[open] summary::after {
  content: "−";
}

.page-faq .faq-qa[open] {
  border-left: 6px solid var(--fox);
}

.page-faq .faq-qa summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-faq .faq-qa-body {
  padding: 0 18px 18px;
  font-size: 14.8px;
  line-height: 1.78;
  color: var(--slate);
}

.page-faq .faq-qa-body a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-qa-body a:hover,
.page-faq .faq-qa-body a:focus-visible {
  color: var(--fox);
}

/* ---------- cta ---------- */

.page-faq .faq-cta {
  background: var(--fox);
  color: var(--paper-white);
  border-top: 4px solid var(--ink);
  padding-block: clamp(38px, 6vw, 68px);
}

.page-faq .faq-cta-inner {
  display: grid;
  gap: 26px;
  align-items: center;
}

.page-faq .faq-cta-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 249, 239, 0.82);
}

.page-faq .faq-cta h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.page-faq .faq-cta p {
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.76;
  color: rgba(255, 249, 239, 0.9);
}

.page-faq .faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.page-faq .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  background: var(--paper-white);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.page-faq .faq-cta-btn:hover,
.page-faq .faq-cta-btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-faq .faq-cta-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--paper-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 249, 239, 0.7);
}

.page-faq .faq-cta-link:hover,
.page-faq .faq-cta-link:focus-visible {
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}

/* ---------- responsive ---------- */

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

@media (min-width: 900px) {
  .page-faq .faq-hero-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: end;
    gap: 48px;
  }
  .page-faq .faq-steps-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 42px;
    align-items: start;
  }
  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 46px;
    align-items: start;
  }
  .page-faq .faq-field-row {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
  }
  .page-faq .faq-qa-list {
    column-count: 2;
    column-gap: 18px;
  }
  .page-faq .faq-qa {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .page-faq .faq-cta-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 40px;
  }
  .page-faq .faq-cta-actions {
    justify-content: flex-end;
  }
  .page-faq .faq-sync-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-step-card,
  .page-faq .faq-cta-btn {
    transition: none;
  }
  .page-faq .faq-step-card:hover,
  .page-faq .faq-cta-btn:hover {
    transform: none;
  }
}


<main id="main-content" class="page-faq">
  <nav class="breadcrumb faq-crumb" aria-label="面包屑">
    <a href="/">首页</a>
    <span class="breadcrumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">新手知识库</span>
  </nav>

  <header class="faq-hero">
    <div class="faq-hero-inner">
      <div class="faq-hero-copy">
        <p class="kicker">ROOKIE GUIDE · 第一次来</p>
        <h1>三步查清场馆，一场不落看完</h1>
        <p class="faq-hero-lead">
          第一次用火狐体育入口，最常卡住的无非两件事：到了城市却找不到场馆怎么走，忙起来又忘了开赛时间。
          下面把这两件事拆成能立刻照做的动作，你跟着走一遍，下次就能自己安排整晚。
        </p>
        <div class="faq-hero-actions">
          <a class="btn btn-primary" href="#three-steps">从第一步开始</a>
          <a class="btn btn-ghost" href="#faq-list">直接看问答</a>
        </div>
      </div>
      <div class="faq-hero-scale" aria-hidden="true">
        <div class="faq-scale-row">
          <span class="faq-scale-num">01</span>
          <span class="faq-scale-label">选城市与场馆</span>
        </div>
        <div class="faq-scale-row">
          <span class="faq-scale-num">02</span>
          <span class="faq-scale-label">看交通与入场</span>
        </div>
        <div class="faq-scale-row">
          <span class="faq-scale-num">03</span>
          <span class="faq-scale-label">设开赛提醒</span>
        </div>
        <p class="faq-scale-foot">18:00 — 06:00 / 夜场时段</p>
      </div>
    </div>
    <div class="faq-hero-ruler" aria-hidden="true"></div>
  </header>

  <section class="faq-section" id="three-steps" aria-labelledby="steps-title">
    <div class="faq-shell">
      <div class="faq-head">
        <span class="index-num">01 / 07</span>
        <h2 id="steps-title">第一次来，先做这三步</h2>
        <p>顺序别打乱。三步走完，场馆怎么走、几点该出门、什么时候该打开直播，你心里都有数了。</p>
      </div>

      <div class="faq-steps-grid">
        <figure class="media media-tall faq-steps-media" data-reveal>
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="夜间场馆入口的指示牌与通道灯光，画面中没有可识别的场馆名称">
          <figcaption>夜场入口常按看台分区，别只盯着大门编号。</figcaption>
        </figure>

        <ol class="faq-step-list">
          <li class="faq-step-card" data-reveal>
            <span class="faq-step-num">01</span>
            <div class="faq-step-body">
              <h3>选城市，再选场馆</h3>
              <p>先定城市，再按场馆名或当晚对阵来找。场馆信息库收录了 240 个城市的 1,860 个条目，
                搜不到就把名字缩短一点，去掉「体育馆」「中心」这类后缀，命中率会高不少。</p>
            </div>
          </li>
          <li class="faq-step-card" data-reveal data-reveal-delay="120">
            <span class="faq-step-num">02</span>
            <div class="faq-step-body">
              <h3>看交通与入场提示</h3>
              <p>每个条目都写清了地铁公交怎么到、从几号门进场、看台视野大概什么样。重点场馆的交通和
                入场变化每周复核一轮，遇到临时改道会跟着调整。</p>
            </div>
          </li>
          <li class="faq-step-card" data-reveal data-reveal-delay="240">
            <span class="faq-step-num">03</span>
            <div class="faq-step-body">
              <h3>设置开赛提醒</h3>
              <p>选好场次点提醒，开赛前 30 分钟和 10 分钟各推一次。两个时间点能分别关掉，
                只想留最后一次也完全没问题。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="faq-section faq-subscribe" id="subscribe-start" aria-labelledby="subscribe-title">
    <div class="faq-shell">
      <div class="faq-split">
        <div class="faq-split-copy">
          <span class="index-num">02 / 07</span>
          <h2 id="subscribe-title">PC 端订阅：从筛场次到设提醒</h2>
          <p class="faq-lead">
            夜场观众最大的痛点是场次太密，一晚上十几场根本看不完。先筛掉不想看的，剩下的才值得订阅。
          </p>
          <ol class="faq-mini-list">
            <li>把时间范围拉到 <strong>18:00–06:00</strong>，白天的场次就不再挤在列表里。</li>
            <li>联赛、队伍、开赛时间三样叠加筛选，订阅中心 3.0 支持组合条件。</li>
            <li>点订阅加入清单，同一批场次不用一场一场重复点。</li>
            <li>在清单里勾开赛提醒，30 分钟和 10 分钟各是一个独立开关。</li>
            <li>想同步到自己的日程，导出 ICS 日历文件一次带走。</li>
          </ol>
          <p class="faq-note">
            看的时候还能顺手用上画中画、多窗口比分浮层和键盘快捷键，一边盯着主画面，一边不忘别的场次比分。
          </p>
          <div class="faq-inline-actions">
            <a class="btn btn-primary" href="/business/">去订阅中心</a>
            <a class="btn btn-ghost" href="/topics/">看今晚战报</a>
          </div>
        </div>
        <figure class="media media-wide faq-subscribe-media" data-reveal>
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="手机与电脑并排展示订阅步骤界面，屏幕中没有人物面部" loading="lazy" decoding="async">
          <figcaption>手机上勾好的订阅，登录电脑后原样躺在列表里。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-section" id="home-check" aria-labelledby="home-check-title">
    <div class="faq-shell">
      <div class="faq-head">
        <span class="index-num">03 / 07</span>
        <h2 id="home-check-title">投屏卡了？先按这几组查一遍</h2>
        <p>家庭观赛的小毛病，多数几个动作就能排掉。先自查再反馈，能少一轮来回。</p>
      </div>

      <div class="faq-check-grid">
        <article class="faq-check-card">
          <h3>投屏画面出不来</h3>
          <ul>
            <li>手机和电视确认连在同一个 Wi-Fi 下</li>
            <li>先在电视端打开投屏接收，再点手机发送</li>
            <li>还是不行就重启路由器，再重启电视</li>
          </ul>
        </article>
        <article class="faq-check-card">
          <h3>画面延迟、跟不上比分</h3>
          <ul>
            <li>能用有线就用有线，无线换到 5G 频段</li>
            <li>关掉后台的下载和网盘同步</li>
            <li>同一网络下同时用的设备越少越稳</li>
          </ul>
        </article>
        <article class="faq-check-card">
          <h3>声音与字幕</h3>
          <ul>
            <li>先看系统输出设备选的是电视还是手机</li>
            <li>字幕开关和音轨选择是两处设置，分别确认</li>
            <li>电视音量过低时，检查是否开了夜间音量限制</li>
          </ul>
        </article>
        <article class="faq-check-card">
          <h3>多屏不同步</h3>
          <ul>
            <li>两端登录同一个账号，订阅列表才会一致</li>
            <li>检查设备时间是否自动校准</li>
            <li>切换设备后等几秒再刷新画面</li>
          </ul>
        </article>
        <article class="faq-check-card">
          <h3>儿童模式</h3>
          <ul>
            <li>开启后可观看范围会收窄，先和孩子说清楚</li>
            <li>顺手设一个音量上限，深夜不惊动邻居</li>
            <li>看完退出儿童模式，避免下次找不到场次</li>
          </ul>
        </article>
        <article class="faq-check-card faq-check-card-accent">
          <h3>自查完还是不行</h3>
          <p>把设备型号、网络方式和出问题的场次记下来，从反馈入口提交，排查会快很多。</p>
          <a class="faq-text-link" href="/consult/">去反馈入口</a>
        </article>
      </div>
    </div>
  </section>

  <section class="faq-section faq-sync" id="account-sync" aria-labelledby="sync-title">
    <div class="faq-shell">
      <div class="faq-sync-inner">
        <div class="faq-sync-copy">
          <span class="index-num">04 / 07</span>
          <h2 id="sync-title">手机和电脑，一个账号一条订阅</h2>
          <p>在地铁上用手机勾的场次，回家打开电脑还是那一份。移动端与 PC 端账号互通，订阅列表和提醒设置都跟着账号走，两边不用各设一遍。</p>
        </div>
        <div class="faq-sync-grid">
          <div class="faq-sync-item">
            <span class="faq-sync-num">5.4 万</span>
            <span class="faq-sync-label">条家庭观赛反馈已处理</span>
          </div>
          <div class="faq-sync-item">
            <span class="faq-sync-num">36 小时</span>
            <span class="faq-sync-label">平均给出首次回复</span>
          </div>
          <div class="faq-sync-item">
            <span class="faq-sync-num">02 次</span>
            <span class="faq-sync-label">开赛前提醒，可分别关闭</span>
          </div>
          <div class="faq-sync-item">
            <span class="faq-sync-num">12 类</span>
            <span class="faq-sync-label">夜场专题覆盖的赛事类别</span>
          </div>
        </div>
      </div>
      <p class="faq-sync-foot">赛日客服安排夜间值班，投屏和延迟的问题优先接；工作日 9:00–22:00 在线，赛日延到次日 1:00。</p>
    </div>
  </section>

  <section class="faq-section" id="venue-fields" aria-labelledby="venue-title">
    <div class="faq-shell">
      <div class="faq-head">
        <span class="index-num">05 / 07</span>
        <h2 id="venue-title">场馆条目里那几行字怎么读</h2>
        <p>点开任意一个场馆，会看到四组信息。看懂它们，现场基本不会绕路。</p>
      </div>
      <div class="faq-field-list">
        <div class="faq-field-row">
          <span class="faq-field-key">交通</span>
          <p>地铁几号线哪站下、出站后步行几分钟、公交有哪几路。有临时施工改道时会额外标注。</p>
        </div>
        <div class="faq-field-row">
          <span class="faq-field-key">入口</span>
          <p>哪个门对应哪片看台。夜场人多，走错门要绕大半圈，提前看一眼能省十几分钟。</p>
        </div>
        <div class="faq-field-row">
          <span class="faq-field-key">座位视野</span>
          <p>看台高低、是否正对场地、有没有立柱遮挡。挑座位前先看一眼描述，比对着平面图猜更直观。</p>
        </div>
        <div class="faq-field-row">
          <span class="faq-field-key">入场提示</span>
          <p>安检要求、可带物品、建议提前多久到。重点场馆的入场规则每周跟着实际情况调整。</p>
        </div>
      </div>
      <p class="faq-note faq-note-wide">
        这些信息由 7 人的场馆核录小组维护，并与 26 家场馆信息渠道同步变更。想了解更细的维护方式，可以到品牌档案里看。
      </p>
    </div>
  </section>

  <section class="faq-section" id="faq-list" aria-labelledby="faq-list-title">
    <div class="faq-shell">
      <div class="faq-head">
        <span class="index-num">06 / 07</span>
        <h2 id="faq-list-title">新手常问的几件事</h2>
        <p>这些都是新用户问得最多的。答案写得短，看完就能照着做。</p>
      </div>

      <div class="faq-qa-list">
        <details class="faq-qa">
          <summary>订阅了场次，为什么没收到提醒？</summary>
          <div class="faq-qa-body">
            先确认这个场次的提醒开关是开着的——30 分钟和 10 分钟是两个独立开关，可能只关掉了其中一个。
            再看手机的通知权限有没有被系统拦下。两项都没问题，就在订阅列表里重新保存一次该场次。
          </div>
        </details>
        <details class="faq-qa">
          <summary>战报是按什么顺序排的？</summary>
          <div class="faq-qa-body">
            严格按比赛结束时间排序，最新完赛的排在最前。同一时段结束的多场比赛会并列出现，
            点进你要看的联赛即可，不必一直往下翻。
          </div>
        </details>
        <details class="faq-qa">
          <summary>手机上设的订阅，电脑上还要重设吗？</summary>
          <div class="faq-qa-body">
            不用。移动端和 PC 端账号互通，订阅列表和提醒设置跟着账号走。
            两端登录同一个账号，打开订阅列表就是同一份内容。
          </div>
        </details>
        <details class="faq-qa">
          <summary>能把赛程放进自己的日历吗？</summary>
          <div class="faq-qa-body">
            可以。订阅清单支持导出 ICS 日历文件，导入手机或电脑自带日历后，开赛时间会跟其他日程排在一起。
          </div>
        </details>
        <details class="faq-qa">
          <summary>家庭观赛的问题去哪反馈？</summary>
          <div class="faq-qa-body">
            走咨询与反馈页的专门入口，选好问题类型后先给你一组自查步骤，照做完还不行再提交。
            投屏和延迟类的问题在赛日会优先接入夜间值班客服。
          </div>
        </details>
        <details class="faq-qa">
          <summary>我的订阅偏好和反馈记录怎么查看？</summary>
          <div class="faq-qa-body">
            账号信息、订阅偏好、设备日志和反馈记录的处理方式写在个人信息说明里，看清楚了再决定要不要联系客服调整。
            <a href="/personal-data/">查看个人信息说明</a>
          </div>
        </details>
        <details class="faq-qa">
          <summary>刚接触这项运动，从哪看起？</summary>
          <div class="faq-qa-body">
            先按上面的三步查一个离家最近的场馆，再去战报专栏翻两篇最近的比赛，看懂比分和关键事件时间轴，
            基本就入门了。夜场专题覆盖 12 个赛事类别，挑一个你感兴趣的看就行。
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-cta" aria-labelledby="cta-title">
    <div class="faq-shell faq-cta-inner">
      <div>
        <span class="faq-cta-kicker">STILL STUCK · 还没解决</span>
        <h2 id="cta-title">还是没解决，直接找我们</h2>
        <p>把设备型号、网络方式和出问题的场次写清楚，我们按顺序帮你排。家庭观赛的问题走专门通道，赛日晚上也有人接。</p>
      </div>
      <div class="faq-cta-actions">
        <a class="faq-cta-btn" href="/consult/">提交反馈</a>
        <a class="faq-cta-link" href="#three-steps">回到第一步</a>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-line: rgba(26, 21, 18, 0.14);
  --faq-line-soft: rgba(26, 21, 18, 0.07);
  --faq-on-night: rgba(255, 249, 239, 0.78);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-faq .faq-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-faq .faq-crumb {
  padding-top: 18px;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--warm-gray);
}

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

.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible {
  text-decoration: underline;
}

/* ---------- hero ---------- */

.page-faq .faq-hero {
  position: relative;
  margin-top: 14px;
  background: var(--night);
  color: var(--paper-white);
  overflow: hidden;
  border-bottom: 4px solid var(--fox);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(232, 69, 31, 0.24) 0 26%, transparent 26.2%),
    linear-gradient(118deg, transparent 62%, rgba(61, 224, 196, 0.12) 62.2%);
  pointer-events: none;
}

.page-faq .faq-hero-inner {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 68px) var(--gutter) clamp(28px, 5vw, 56px);
  display: grid;
  gap: 32px;
}

.page-faq .faq-hero .kicker {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 8.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.page-faq .faq-hero-lead {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.3vw, 17px);
  line-height: 1.75;
  color: var(--faq-on-night);
}

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

.page-faq .faq-hero-scale {
  border-left: 2px solid rgba(61, 224, 196, 0.55);
  padding-left: 18px;
  align-self: end;
}

.page-faq .faq-scale-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 249, 239, 0.22);
}

.page-faq .faq-scale-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.page-faq .faq-scale-label {
  font-size: 14px;
  color: var(--faq-on-night);
}

.page-faq .faq-scale-foot {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

.page-faq .faq-hero-ruler {
  height: 16px;
  border-top: 1px solid rgba(255, 249, 239, 0.18);
  background-image: repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 26px);
  opacity: 0.4;
}

/* ---------- section base ---------- */

.page-faq .faq-section {
  padding-block: clamp(46px, 7.5vw, 88px);
}

.page-faq .faq-head {
  max-width: 62ch;
}

.page-faq .faq-head .index-num,
.page-faq .faq-split-copy .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ember);
}

.page-faq .faq-head h2,
.page-faq .faq-split-copy h2,
.page-faq .faq-sync-copy h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.page-faq .faq-head p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--slate);
}

/* ---------- steps ---------- */

.page-faq .faq-steps-grid {
  margin-top: 34px;
  display: grid;
  gap: 26px;
}

.page-faq .faq-steps-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-steps-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-faq .faq-steps-media figcaption,
.page-faq .faq-subscribe-media figcaption {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--slate);
  background: var(--paper-white);
  border-top: 1px solid var(--faq-line);
}

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

.page-faq .faq-step-card {
  display: flex;
  gap: 16px;
  padding: 20px 20px 22px;
  background: var(--paper-white);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-step-card:hover {
  border-color: var(--fox);
  transform: translateY(-2px);
}

.page-faq .faq-step-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fox);
}

.page-faq .faq-step-body h3 {
  margin: 0;
  font-size: clamp(17px, 2.5vw, 21px);
  font-weight: 900;
  letter-spacing: -0.015em;
}

.page-faq .faq-step-body p {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--slate);
}

/* ---------- subscribe ---------- */

.page-faq .faq-subscribe {
  background: var(--paper-white);
  border-block: 2px solid var(--ink);
}

.page-faq .faq-split {
  display: grid;
  gap: 30px;
}

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

.page-faq .faq-mini-list {
  counter-reset: faqmini;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.page-faq .faq-mini-list li {
  position: relative;
  counter-increment: faqmini;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--slate);
}

.page-faq .faq-mini-list li::before {
  content: "0" counter(faqmini);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ember);
}

.page-faq .faq-mini-list strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.page-faq .faq-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink);
  background: rgba(242, 181, 68, 0.22);
  border-left: 4px solid var(--yellow);
}

.page-faq .faq-note-wide {
  max-width: 68ch;
}

.page-faq .faq-inline-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-faq .faq-subscribe-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  align-self: start;
}

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

/* ---------- home check ---------- */

.page-faq .faq-check-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}

.page-faq .faq-check-card {
  padding: 20px 18px 22px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-top: 6px solid var(--fox);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-check-card h3 {
  margin: 0 0 12px;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

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

.page-faq .faq-check-card li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--slate);
}

.page-faq .faq-check-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 2px;
  background: var(--ember);
}

.page-faq .faq-check-card-accent {
  background: var(--night);
  color: var(--paper-white);
  border-color: var(--night);
  border-top-color: var(--cyan);
}

.page-faq .faq-check-card-accent p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-on-night);
}

.page-faq .faq-text-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.page-faq .faq-text-link:hover,
.page-faq .faq-text-link:focus-visible {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ---------- sync ---------- */

.page-faq .faq-sync {
  background: var(--night);
  color: var(--paper-white);
}

.page-faq .faq-sync-inner {
  display: grid;
  gap: 28px;
}

.page-faq .faq-sync-copy .index-num {
  color: var(--cyan);
}

.page-faq .faq-sync-copy p {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--faq-on-night);
}

.page-faq .faq-sync-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-faq .faq-sync-item {
  padding: 16px 14px;
  border: 1px solid rgba(61, 224, 196, 0.36);
  background: rgba(13, 27, 42, 0.6);
}

.page-faq .faq-sync-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

.page-faq .faq-sync-label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faq-on-night);
}

.page-faq .faq-sync-foot {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 249, 239, 0.2);
  font-size: 14px;
  line-height: 1.72;
  color: var(--faq-on-night);
}

/* ---------- venue fields ---------- */

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

.page-faq .faq-field-row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-field-key {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ember);
}

.page-faq .faq-field-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.74;
  color: var(--slate);
}

/* ---------- qa ---------- */

.page-faq .faq-qa-list {
  margin-top: 30px;
}

.page-faq .faq-qa {
  background: var(--paper-white);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-paper);
  margin-bottom: 12px;
}

.page-faq .faq-qa summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 18px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
}

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

.page-faq .faq-qa summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--fox);
}

.page-faq .faq-qa[open] summary::after {
  content: "−";
}

.page-faq .faq-qa[open] {
  border-left: 6px solid var(--fox);
}

.page-faq .faq-qa summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-faq .faq-qa-body {
  padding: 0 18px 18px;
  font-size: 14.8px;
  line-height: 1.78;
  color: var(--slate);
}

.page-faq .faq-qa-body a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- cta ---------- */

.page-faq .faq-cta {
  background: var(--fox);
  color: var(--paper-white);
  border-top: 4px solid var(--ink);
  padding-block: clamp(38px, 6vw, 68px);
}

.page-faq .faq-cta-inner {
  display: grid;
  gap: 26px;
  align-items: center;
}

.page-faq .faq-cta-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 249, 239, 0.82);
}

.page-faq .faq-cta h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.page-faq .faq-cta p {
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.76;
  color: rgba(255, 249, 239, 0.9);
}

.page-faq .faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.page-faq .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  background: var(--paper-white);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.page-faq .faq-cta-btn:hover,
.page-faq .faq-cta-btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-faq .faq-cta-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--paper-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 249, 239, 0.7);
}

.page-faq .faq-cta-link:hover,
.page-faq .faq-cta-link:focus-visible {
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}

/* ---------- responsive ---------- */

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

@media (min-width: 900px) {
  .page-faq .faq-hero-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: end;
    gap: 48px;
  }
  .page-faq .faq-steps-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 42px;
    align-items: start;
  }
  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 46px;
    align-items: start;
  }
  .page-faq .faq-field-row {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
  }
  .page-faq .faq-qa-list {
    column-count: 2;
    column-gap: 18px;
  }
  .page-faq .faq-qa {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .page-faq .faq-cta-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 40px;
  }
  .page-faq .faq-cta-actions {
    justify-content: flex-end;
  }
  .page-faq .faq-sync-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-step-card,
  .page-faq .faq-cta-btn {
    transition: none;
  }
  .page-faq .faq-step-card:hover,
  .page-faq .faq-cta-btn:hover,
  .page-faq .faq-cta-btn:focus-visible {
    transform: none;
  }
}