.page-faq {
  --faq-line: rgba(199, 180, 154, 0.5);
  --faq-line-soft: rgba(199, 180, 154, 0.28);
  background: var(--mist);
  color: var(--ink);
  overflow-x: hidden;
}

.page-faq .section {
  padding: 56px 0;
}

.page-faq .mono {
  font-family: var(--font-mono);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 72px;
  background:
    radial-gradient(120% 130% at 88% 6%, rgba(70, 175, 196, 0.32) 0%, rgba(70, 175, 196, 0) 58%),
    linear-gradient(158deg, var(--qing) 0%, var(--night) 100%);
  color: var(--mist);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: var(--sand);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.page-faq .breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gravel);
}

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

.page-faq .breadcrumb a:hover,
.page-faq .breadcrumb a:focus-visible {
  color: var(--amber);
}

.page-faq .faq-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-faq .faq-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--glow);
  text-transform: uppercase;
}

.page-faq h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 8.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-faq .faq-lead {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

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

.page-faq .faq-hero-actions .btn-outline {
  border: 1px solid rgba(233, 225, 210, 0.45);
  color: var(--sand);
  background: transparent;
}

.page-faq .faq-hero-actions .btn-outline:hover,
.page-faq .faq-hero-actions .btn-outline:focus-visible {
  border-color: var(--glow);
  color: var(--glow);
}

.page-faq .faq-index {
  display: grid;
  gap: 2px;
  align-self: end;
  padding-left: 18px;
  border-left: 2px solid rgba(199, 180, 154, 0.35);
}

.page-faq .faq-index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--sand);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-faq .faq-index a .mono {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--glow);
}

.page-faq .faq-index a:hover,
.page-faq .faq-index a:focus-visible {
  color: #fff;
  transform: translateX(4px);
}

.page-faq .faq-index a:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* ---------- 章节抬头 ---------- */
.page-faq .chapter-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 20px;
  margin-bottom: 24px;
  border-top: 1px solid var(--faq-line);
}

.page-faq .chapter-num {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--flag);
}

.page-faq .chapter-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 4.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--qing);
}

.page-faq .faq-intro {
  margin: 0 0 28px;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-faq .faq-aside {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--glow);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-faq .faq-aside a,
.page-faq .faq-entry-note a,
.page-faq .contact-note a {
  color: var(--lake);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 111, 142, 0.4);
}

.page-faq .faq-aside a:hover,
.page-faq .faq-entry-note a:hover,
.page-faq .contact-note a:hover {
  color: var(--flag);
  border-bottom-color: var(--flag);
}

/* ---------- 三步流程 ---------- */
.page-faq .faq-switch {
  background: var(--sand);
  padding-top: 8px;
}

.page-faq .faq-figure {
  margin: 0 0 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--lake), var(--qing));
}

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

.page-faq .faq-figure figcaption {
  padding: 12px 18px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sand);
  background: var(--qing);
}

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

.page-faq .faq-step {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  background: var(--mist);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-faq .faq-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 70px -34px rgba(7, 36, 42, 0.72);
}

.page-faq .faq-step:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq .faq-step .step-num {
  display: block;
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--flag);
}

.page-faq .faq-step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--qing);
}

.page-faq .faq-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-step .step-tip {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lake);
}

/* ---------- 入口与浏览器 ---------- */
.page-faq .faq-entry {
  background: var(--mist);
}

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

.page-faq .faq-entry-copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.82;
  color: var(--ink-soft);
}

.page-faq .faq-entry-copy p:first-child {
  color: var(--ink);
  font-size: 17px;
}

.page-faq .faq-check {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-faq .faq-check li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--faq-line-soft);
  font-size: 15px;
  color: var(--ink);
}

.page-faq .faq-check li span:first-child {
  font-weight: 600;
}

.page-faq .faq-check li span:last-child {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lake);
}

.page-faq .faq-entry-note {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-figure--entry {
  margin-bottom: 0;
}

/* ---------- 自助排查 ---------- */
.page-faq .faq-check-zone {
  background: var(--sand);
}

.page-faq .faq-triage {
  display: grid;
  gap: 16px;
}

.page-faq .triage-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--radius-sm);
  background: var(--mist);
  transition: transform 0.25s var(--ease);
}

.page-faq .triage-item:hover {
  transform: translateY(-4px);
}

.page-faq .triage-dot {
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--flag);
  box-shadow: 0 0 0 5px rgba(222, 100, 55, 0.16);
}

.page-faq .triage-item--rare .triage-dot {
  background: var(--gravel);
  box-shadow: 0 0 0 5px rgba(199, 180, 154, 0.22);
}

.page-faq .triage-item h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qing);
}

.page-faq .triage-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .tag--flag {
  background: rgba(222, 100, 55, 0.14);
  color: var(--flag);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-faq .tag--dark {
  background: rgba(199, 180, 154, 0.32);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- 问答折叠 ---------- */
.page-faq .faq-ask {
  background: var(--mist);
}

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

.page-faq .faq-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--qing);
}

.page-faq .faq-group-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--flag);
}

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

.page-faq details.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

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

.page-faq details.faq-item > summary:hover {
  color: var(--lake);
}

.page-faq details.faq-item > summary:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq details.faq-item > summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--lake);
}

.page-faq details.faq-item[open] > summary::after {
  content: "–";
  color: var(--flag);
}

.page-faq .q-num {
  flex: 0 0 auto;
  padding-top: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gravel);
}

.page-faq .faq-answer {
  margin: 0;
  padding: 0 0 16px 34px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 深色收尾 ---------- */
.page-faq .faq-help {
  padding: 64px 0 76px;
  background:
    radial-gradient(100% 120% at 12% 0%, rgba(70, 175, 196, 0.24) 0%, rgba(70, 175, 196, 0) 60%),
    linear-gradient(160deg, var(--qing) 0%, var(--night) 100%);
  color: var(--mist);
}

.page-faq .faq-help-grid {
  display: grid;
  gap: 34px;
}

.page-faq .chapter-head--dark {
  border-top-color: rgba(199, 180, 154, 0.4);
}

.page-faq .chapter-head--dark .chapter-num {
  color: var(--flag);
}

.page-faq .chapter-head--dark .chapter-title {
  color: var(--mist);
}

.page-faq .faq-help-copy > p {
  margin: 0 0 18px;
  max-width: 40em;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--sand);
}

.page-faq .faq-help-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-help-list li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(199, 180, 154, 0.26);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--sand);
}

.page-faq .faq-help-list li .mono {
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--glow);
  padding-top: 3px;
}

.page-faq .faq-help-foot {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gravel);
}

.page-faq .faq-contact-card {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: rgba(7, 36, 42, 0.62);
  border: 1px solid rgba(199, 180, 154, 0.3);
}

.page-faq .faq-contact-label {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--glow);
}

.page-faq .faq-contact-card .contact-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(199, 180, 154, 0.22);
}

.page-faq .faq-contact-card .contact-key {
  font-size: 13px;
  color: var(--gravel);
}

.page-faq .faq-contact-card .contact-val {
  font-size: 14px;
  color: var(--mist);
  word-break: break-all;
}

.page-faq .faq-copy {
  display: inline-flex;
  align-items: center;
  margin: 16px 0 6px;
  padding: 7px 16px;
  border: 1px solid rgba(233, 225, 210, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-faq .faq-copy:hover,
.page-faq .faq-copy:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

.page-faq .faq-copy:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq .copy-status {
  min-height: 18px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--glow);
}

.page-faq .faq-contact-card .contact-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gravel);
}

.page-faq .faq-contact-card .contact-note a {
  color: var(--glow);
  border-bottom-color: rgba(70, 175, 196, 0.45);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .section {
    padding: 72px 0;
  }

  .page-faq .faq-hero {
    padding: calc(var(--header-h) + 56px) 0 88px;
  }

  .page-faq .faq-steps {
    gap: 22px;
  }

  .page-faq .faq-step {
    padding: 30px 26px 26px;
  }

  .page-faq .faq-triage {
    gap: 18px;
  }

  .page-faq .triage-item {
    padding: 26px 26px;
  }

  .page-faq .faq-contact-card {
    padding: 32px 30px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: end;
  }

  .page-faq .faq-entry-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 44px;
    align-items: start;
  }

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

  .page-faq .faq-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -32px;
    width: 28px;
    height: 2px;
    background: var(--flag);
    opacity: 0.72;
    transform: rotate(-18deg);
    transform-origin: right center;
    pointer-events: none;
  }

  .page-faq .faq-help-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 52px;
    align-items: start;
  }

  .page-faq .faq-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 52px;
  }

  .page-faq .faq-group:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1160px) {
  .page-faq .section {
    padding: 84px 0;
  }

  .page-faq .faq-index {
    padding-left: 22px;
  }

  .page-faq .faq-index a {
    font-size: 15px;
    padding: 11px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-step,
  .page-faq .triage-item,
  .page-faq .faq-index a {
    transition: none;
  }

  .page-faq .faq-step:hover,
  .page-faq .triage-item:hover,
  .page-faq .faq-index a:hover {
    transform: none;
  }
}


<main id="main-content" class="page-faq">
  <section class="faq-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑"><a href="/">品牌首页</a> / 使用指南</nav>
      <div class="faq-hero-grid">
        <div class="faq-hero-text">
          <p class="faq-kicker mono">操作指南 · 60 余条问答</p>
          <h1>换设备接着看，入口和排障照着做就行</h1>
          <p class="faq-lead">赛程看到一半换了手机，或者第一次在浏览器里找入口，最怕从头再来。华体会体育中文站把换设备续看、首次访问、进度同步和反馈提交拆成了可以直接照做的步骤，先给做法，再讲原因。</p>
          <div class="faq-hero-actions">
            <a class="btn btn-amber" href="#switch">看换设备流程</a>
            <a class="btn btn-outline" href="#ask">直接查问答</a>
          </div>
        </div>
        <nav class="faq-index" aria-label="本页快速定位">
          <a href="#switch"><span class="mono">01</span>换设备续看</a>
          <a href="#entry"><span class="mono">02</span>入口与浏览器</a>
          <a href="#check"><span class="mono">03</span>进度不同步排查</a>
          <a href="#ask"><span class="mono">04</span>五类操作问答</a>
          <a href="#help"><span class="mono">05</span>还没解决</a>
        </nav>
      </div>
    </div>
  </section>

  <section class="section faq-switch" id="switch">
    <div class="shell">
      <header class="chapter-head" data-reveal>
        <span class="chapter-num mono">01</span>
        <h2 class="chapter-title">换个设备，三步回到刚才那一场</h2>
      </header>
      <p class="faq-intro">换设备最麻烦的从来不是登录，而是找不回刚才看到哪。整套动作只有三步：先停稳，再登录，最后直接落回原位。</p>

      <figure class="faq-figure" data-reveal>
        <img src="{zhanqunpic:h:800w:1600}" width="1600" height="800" alt="手机与平板之间由一条光线连接，背景为深青色渐变，示意赛程进度在两台设备之间衔接" decoding="async">
      </figure>

      <ol class="faq-steps">
        <li class="faq-step" data-reveal tabindex="0">
          <span class="step-num mono">01</span>
          <h3>先在旧设备上停稳</h3>
          <p>打开正在看的那场赛程，滑到当前页，确认页面顶部显示的赛程位置已经跟上，再锁屏或直接退出。这样新设备接管时，起点是准的，不会拉到上一轮去。</p>
          <p class="step-tip mono">约 10 秒完成</p>
        </li>
        <li class="faq-step" data-reveal tabindex="0">
          <span class="step-num mono">02</span>
          <h3>用同一个账号登新设备</h3>
          <p>手机、平板或桌面浏览器都行，打开中文站后用原来那个账号登录。三端共用一份关注列表，不需要在新设备上重新添加球队，也不用重新调一遍筛选条件。</p>
          <p class="step-tip mono">账号一致即可</p>
        </li>
        <li class="faq-step" data-reveal tabindex="0">
          <span class="step-num mono">03</span>
          <h3>点开赛程，落回原位</h3>
          <p>进入赛程页，你会被直接带回上次查看的那一场，不用翻日历，也不用记上一场打到第几轮。FVRN 换设备查赛程靠的就是这一步：把位置带着走，而不是把页面重新打开一遍。</p>
          <p class="step-tip mono">自动完成</p>
        </li>
      </ol>

      <p class="faq-aside">新设备第一次打开时如果没落回原位，先别急着重新找，按下面第 03 节的顺序查一遍，多数情况几分钟内就能接上。</p>
    </div>
  </section>

  <section class="section faq-entry" id="entry">
    <div class="shell">
      <header class="chapter-head" data-reveal>
        <span class="chapter-num mono">02</span>
        <h2 class="chapter-title">第一次找入口，地址栏直输就够了</h2>
      </header>

      <div class="faq-entry-grid">
        <div class="faq-entry-copy">
          <p>在浏览器最上面的地址栏输入 hua-ti-hui-h5.com.cn，回车就能打开中文站。比起在搜索结果里逐条辨认，直输更快，也不会被页面上的跳转带着绕远。</p>
          <p>打开之后，花十秒核对三处，就能确认自己已经在正确的位置上：</p>
          <ul class="faq-check">
            <li><span>顶部状态条</span><span>版本号与更新时间</span></li>
            <li><span>账号区域</span><span>与常用账号一致</span></li>
            <li><span>赛程日期</span><span>统一按东八区显示</span></li>
          </ul>
          <p class="faq-entry-note">浏览器方面，Chrome、Edge、Safari 近两年的版本都能正常打开；系统上 iOS 14 及以上、Android 9 及以上都在适配范围内。页面排版如果散乱，先把浏览器更新到较新的版本再试一次，比反复刷新有效。完整的三端适配情况可以在<a href="/download/">下载中心的适配清单</a>里对照机型查看。</p>
        </div>
        <figure class="faq-figure faq-figure--entry" data-reveal>
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="浏览器窗口上部的地址栏区域特写，地址栏被高亮标出，四周留白干净" loading="lazy" decoding="async">
          <figcaption>在地址栏直输域名，是找到中文站最快的一条路。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section faq-check-zone" id="check">
    <div class="shell">
      <header class="chapter-head" data-reveal>
        <span class="chapter-num mono">03</span>
        <h2 class="chapter-title">进度没接上？按这个顺序查三遍</h2>
      </header>
      <p class="faq-intro">绝大多数“换机后位置不对”都出在下面三种情况里。从上往下查，通常第一条就能解决。</p>

      <div class="faq-triage">
        <article class="triage-item" data-reveal>
          <span class="triage-dot" aria-hidden="true"></span>
          <div>
            <h3><span class="tag tag--flag">最常见</span>旧设备还停在同一个赛程页</h3>
            <p>两台设备同时开着同一场赛程时，同步会晚几秒。把旧设备退回赛程列表或者干脆关掉页面，再让新设备刷新一次，位置通常立刻对上。</p>
          </div>
        </article>
        <article class="triage-item" data-reveal>
          <span class="triage-dot" aria-hidden="true"></span>
          <div>
            <h3><span class="tag tag--flag">较常见</span>新设备登的不是同一个账号</h3>
            <p>换设备时顺手用了另一个账号，是最容易被忽略的一条。看首页账号区域显示的名称，与旧设备对一下；不一致就退出重登，关注列表和进度会跟着回来。</p>
          </div>
        </article>
        <article class="triage-item triage-item--rare" data-reveal>
          <span class="triage-dot" aria-hidden="true"></span>
          <div>
            <h3><span class="tag tag--dark">少见</span>浏览器停在无痕窗口</h3>
            <p>无痕窗口关闭后本地记录会被清掉，换设备时自然接不上。换成普通窗口重新登录一次，再按第一步的三步流程走一遍即可。</p>
          </div>
        </article>
      </div>

      <p class="faq-aside">三条都试过仍然对不上，去<a href="/reports/">观察报告</a>看一眼当前版本与最近更新，确认站点正在正常更新，然后带着设备型号和浏览器版本去反馈入口，处理会快很多。</p>
    </div>
  </section>

  <section class="section faq-ask" id="ask">
    <div class="shell">
      <header class="chapter-head" data-reveal>
        <span class="chapter-num mono">04</span>
        <h2 class="chapter-title">五类操作问答，点开看做法</h2>
      </header>
      <p class="faq-intro">累计整理的操作问答已有 60 余条。下面按入口访问、设备适配、进度同步、内容与更新、反馈与联系五类，各挑了几条最常被问到的。点标题展开，再点一次收起。</p>

      <div class="faq-groups">
        <section class="faq-group">
          <h3 class="faq-group-title">入口访问</h3>
          <details class="faq-item" open>
            <summary><span class="q-num mono">A1</span>地址栏输完域名一直转圈怎么办</summary>
            <p class="faq-answer">先换一个网络环境重试，比如从移动数据切到无线网，或者反过来。仍然转圈就把浏览器更新到较新的版本，再清一次缓存后重新打开。多数情况下这两步就能恢复正常。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">A2</span>从搜索结果点进来，和自己输域名有区别吗</summary>
            <p class="faq-answer">进的是同一个中文站，内容完全一致。区别只在于搜索结果里可能混着名称相近的页面，需要多花几秒辨认。想省事就记住域名，直接在地址栏输入。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">A3</span>手机上找不到地址栏在哪</summary>
            <p class="faq-answer">打开手机浏览器后向上滑一下页面，或者点底部工具栏的地址输入框，输入位置都会出现。输入域名后按键盘上的前往键即可，不必额外输入前缀也能打开。</p>
          </details>
        </section>

        <section class="faq-group">
          <h3 class="faq-group-title">设备适配</h3>
          <details class="faq-item" open>
            <summary><span class="q-num mono">B1</span>我的手机是 iOS 14，能正常用吗</summary>
            <p class="faq-answer">可以用，iOS 14 及以上都在适配范围内。平板与手机用的是同一套界面逻辑，横竖屏切换时排版会重排，但赛程位置不会丢。Android 方面对应 Android 9 及以上。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">B2</span>平板横屏和手机竖屏看到的排版不一样</summary>
            <p class="faq-answer">这是按屏幕宽度自动调整的结果，属于正常表现。宽屏会并排显示赛程与阵容信息，窄屏则改为上下堆叠，两种排法里的内容条目是一致的。切换方向时不需要重新登录。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">B3</span>桌面浏览器需要装插件吗</summary>
            <p class="faq-answer">不需要，Chrome、Edge、Safari 近两年的版本打开就能用，无需安装任何扩展。如果打开后样式异常，通常是浏览器版本偏旧，更新一次即可。</p>
          </details>
        </section>

        <section class="faq-group">
          <h3 class="faq-group-title">进度同步</h3>
          <details class="faq-item" open>
            <summary><span class="q-num mono">C1</span>换机后进度停在前一天的赛程</summary>
            <p class="faq-answer">先确认旧设备那边的页面是不是还开着，关掉后在新设备刷新一次。仍未更新就核对两边登录的账号是否一致。这两条都排除后，把登录状态重新走一遍即可。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">C2</span>同一账号在两台设备显示的位置不同</summary>
            <p class="faq-answer">两台设备都在线时，以最近一次操作的那台为准，另一台刷新后会对齐。如果差异持续存在，把其中一台退出登录再重新进入，位置会重新同步。</p>
          </details>
          <details class="faq-item" open>
            <summary><span class="q-num mono">C3</span>退出登录后进度会保留吗</summary>
            <p class="faq-answer">会。进度跟着账号走，不跟着设备走，重新登录后会回到上次查看的位置。需要注意的是，无痕窗口关闭后本地记录会被清掉，这也是建议在普通窗口里使用的原因。</p>
          </details>
        </section>

        <section class="faq-group">
          <h3 class="faq-group-title">内容与更新</h3>
          <details class="faq-item">
            <summary><span class="q-num mono">D1</span>阵容变动信息多久更新一次</summary>
            <p class="faq-answer">采用滚动更新的方式，关注球队的最近变化在首页第一屏就能看到。想看更完整的汇总和解读，去观察报告栏目翻最近的几期，那里按阵容变动、赛季观察、版本更新分好了类。</p>
          </details>
          <details class="faq-item">
            <summary><span class="q-num mono">D2</span>赛程能往前看多少天</summary>
            <p class="faq-answer">赛程日历最长可以提前 14 天查看，覆盖的赛事累计 180 余项。临时想确认某场比赛的开赛时间，直接在赛程页按日期翻即可，不需要额外设置提醒。</p>
          </details>
          <details class="faq-item">
            <summary><span class="q-num mono">D3</span>站点覆盖哪些项目</summary>
            <p class="faq-answer">内容覆盖足球、篮球、网球、赛车、冰雪等 12 个赛事大类。从首页的赛事入口进入后，每一类下面都按赛程与阵容两个维度展开，找起来不用来回跳页。</p>
          </details>
        </section>

        <section class="faq-group">
          <h3 class="faq-group-title">反馈与联系</h3>
          <details class="faq-item">
            <summary><span class="q-num mono">E1</span>提交反馈后多久会有回应</summary>
            <p class="faq-answer">工作日平均 4 小时内给出首次回应。需要进一步排查的复杂问题，会在 2 个工作日内给出处理进展。节假日提交的问题，会顺延到下一个工作日统一处理。</p>
          </details>
          <details class="faq-item">
            <summary><span class="q-num mono">E2</span>反馈里写哪些信息最有用</summary>
            <p class="faq-answer">写清三件事就够了：用的什么设备、浏览器是哪个版本、出问题的页面。如果问题出现在换设备时，补充一句旧设备和新设备分别是什么，定位会快很多。</p>
          </details>
          <details class="faq-item">
            <summary><span class="q-num mono">E3</span>除了反馈入口，还能怎么联系</summary>
            <p class="faq-answer">客服邮箱和电话都可以，工作日 9:00 到 18:00 在线。邮箱适合描述较长的问题，电话适合需要当场确认的操作。两条通道由同一批人处理，选顺手的那个就行。</p>
          </details>
        </section>
      </div>
    </div>
  </section>

  <section class="section faq-help" id="help">
    <div class="shell">
      <div class="faq-help-grid">
        <div class="faq-help-copy">
          <header class="chapter-head chapter-head--dark">
            <span class="chapter-num mono">05</span>
            <h2 class="chapter-title">照着做完还是不行，直接找我们</h2>
          </header>
          <p>上面几步走完仍然卡住，就把问题交给人工处理，不用自己反复试。写清楚设备型号、浏览器版本和出问题的页面，处理速度会明显快一些。</p>
          <ul class="faq-help-list">
            <li><span class="mono">01</span>写下用的设备与系统版本，例如手机型号或平板型号</li>
            <li><span class="mono">02</span>说明浏览器名称和版本，以及是直输域名还是从搜索进入</li>
            <li><span class="mono">03</span>描述现象出现的时间点，以及当时正在看哪一类赛程</li>
          </ul>
          <p class="faq-help-foot">反馈入口在工作日内平均 4 小时给出首次回应；描述越具体，来回确认的次数越少。</p>
        </div>

        <aside class="faq-contact-card" aria-label="客服联系方式">
          <p class="faq-contact-label mono">客服通道</p>
          <div class="contact-line">
            <span class="contact-key">客服邮箱</span>
            <span class="contact-val mono">support@hua-ti-hui-h5.com.cn</span>
          </div>
          <button class="faq-copy" type="button" data-copy-email="support@hua-ti-hui-h5.com.cn" data-copied="false">复制邮箱</button>
          <p class="copy-status" data-copy-status aria-live="polite"></p>
          <div class="contact-line">
            <span class="contact-key">服务电话</span>
            <span class="contact-val mono">400-5777-5448</span>
          </div>
          <p class="contact-note">工作日 9:00–18:00 在线。也可以通过页面底栏的反馈入口提交，两种方式都会进到同一批处理队列。更多联系方式见<a href="/contact/">联系我们</a>。</p>
        </aside>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-line: rgba(199, 180, 154, 0.5);
  --faq-line-soft: rgba(199, 180, 154, 0.28);
  background: var(--mist);
  color: var(--ink);
  overflow-x: hidden;
}

.page-faq .section {
  padding: 56px 0;
}

.page-faq .mono {
  font-family: var(--font-mono);
}

/* 首屏 */
.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 72px;
  background:
    radial-gradient(120% 130% at 88% 6%, rgba(70, 175, 196, 0.32) 0%, rgba(70, 175, 196, 0) 58%),
    linear-gradient(158deg, var(--qing) 0%, var(--night) 100%);
  color: var(--mist);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: var(--sand);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.page-faq .breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gravel);
}

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

.page-faq .breadcrumb a:hover,
.page-faq .breadcrumb a:focus-visible {
  color: var(--amber);
}

.page-faq .faq-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-faq .faq-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--glow);
}

.page-faq h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 8.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-faq .faq-lead {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

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

.page-faq .faq-hero-actions .btn-outline {
  border: 1px solid rgba(233, 225, 210, 0.45);
  color: var(--sand);
  background: transparent;
}

.page-faq .faq-hero-actions .btn-outline:hover,
.page-faq .faq-hero-actions .btn-outline:focus-visible {
  border-color: var(--glow);
  color: var(--glow);
}

.page-faq .faq-index {
  display: grid;
  gap: 2px;
  align-self: end;
  padding-left: 18px;
  border-left: 2px solid rgba(199, 180, 154, 0.35);
}

.page-faq .faq-index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--sand);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-faq .faq-index a .mono {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--glow);
}

.page-faq .faq-index a:hover,
.page-faq .faq-index a:focus-visible {
  color: #fff;
  transform: translateX(4px);
}

.page-faq .faq-index a:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* 章节抬头 */
.page-faq .chapter-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 20px;
  margin-bottom: 24px;
  border-top: 1px solid var(--faq-line);
}

.page-faq .chapter-num {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--flag);
}

.page-faq .chapter-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 4.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--qing);
}

.page-faq .faq-intro {
  margin: 0 0 28px;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-faq .faq-aside {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--glow);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-faq .faq-aside a,
.page-faq .faq-entry-note a,
.page-faq .contact-note a {
  color: var(--lake);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 111, 142, 0.4);
}

.page-faq .faq-aside a:hover,
.page-faq .faq-entry-note a:hover,
.page-faq .contact-note a:hover {
  color: var(--flag);
  border-bottom-color: var(--flag);
}

/* 三步流程 */
.page-faq .faq-switch {
  background: var(--sand);
  padding-top: 8px;
}

.page-faq .faq-figure {
  margin: 0 0 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--lake), var(--qing));
}

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

.page-faq .faq-figure figcaption {
  padding: 12px 18px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sand);
  background: var(--qing);
}

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

.page-faq .faq-step {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  background: var(--mist);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-faq .faq-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 70px -34px rgba(7, 36, 42, 0.72);
}

.page-faq .faq-step:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq .faq-step .step-num {
  display: block;
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--flag);
}

.page-faq .faq-step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--qing);
}

.page-faq .faq-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .faq-step .step-tip {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lake);
}

/* 入口与浏览器 */
.page-faq .faq-entry {
  background: var(--mist);
}

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

.page-faq .faq-entry-copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.82;
  color: var(--ink-soft);
}

.page-faq .faq-entry-copy p:first-child {
  color: var(--ink);
  font-size: 17px;
}

.page-faq .faq-check {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-faq .faq-check li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--faq-line-soft);
  font-size: 15px;
  color: var(--ink);
}

.page-faq .faq-check li span:first-child {
  font-weight: 600;
}

.page-faq .faq-check li span:last-child {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lake);
}

.page-faq .faq-entry-note {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-faq .faq-figure--entry {
  margin-bottom: 0;
}

/* 自助排查 */
.page-faq .faq-check-zone {
  background: var(--sand);
}

.page-faq .faq-triage {
  display: grid;
  gap: 16px;
}

.page-faq .triage-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--radius-sm);
  background: var(--mist);
  transition: transform 0.25s var(--ease);
}

.page-faq .triage-item:hover {
  transform: translateY(-4px);
}

.page-faq .triage-dot {
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--flag);
  box-shadow: 0 0 0 5px rgba(222, 100, 55, 0.16);
}

.page-faq .triage-item--rare .triage-dot {
  background: var(--gravel);
  box-shadow: 0 0 0 5px rgba(199, 180, 154, 0.22);
}

.page-faq .triage-item h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qing);
}

.page-faq .triage-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-faq .tag--flag {
  background: rgba(222, 100, 55, 0.14);
  color: var(--flag);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-faq .tag--dark {
  background: rgba(199, 180, 154, 0.32);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 问答折叠 */
.page-faq .faq-ask {
  background: var(--mist);
}

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

.page-faq .faq-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--qing);
}

.page-faq .faq-group-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--flag);
}

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

.page-faq details.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

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

.page-faq details.faq-item > summary:hover {
  color: var(--lake);
}

.page-faq details.faq-item > summary:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq details.faq-item > summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--lake);
}

.page-faq details.faq-item[open] > summary::after {
  content: "–";
  color: var(--flag);
}

.page-faq .q-num {
  flex: 0 0 auto;
  padding-top: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gravel);
}

.page-faq .faq-answer {
  margin: 0;
  padding: 0 0 16px 34px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 深色收尾 */
.page-faq .faq-help {
  padding: 64px 0 76px;
  background:
    radial-gradient(100% 120% at 12% 0%, rgba(70, 175, 196, 0.24) 0%, rgba(70, 175, 196, 0) 60%),
    linear-gradient(160deg, var(--qing) 0%, var(--night) 100%);
  color: var(--mist);
}

.page-faq .faq-help-grid {
  display: grid;
  gap: 34px;
}

.page-faq .chapter-head--dark {
  border-top-color: rgba(199, 180, 154, 0.4);
}

.page-faq .chapter-head--dark .chapter-title {
  color: var(--mist);
}

.page-faq .faq-help-copy > p {
  margin: 0 0 18px;
  max-width: 40em;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--sand);
}

.page-faq .faq-help-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-help-list li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(199, 180, 154, 0.26);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--sand);
}

.page-faq .faq-help-list li .mono {
  flex: 0 0 auto;
  padding-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--glow);
}

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

.page-faq .faq-contact-card {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: rgba(7, 36, 42, 0.62);
  border: 1px solid rgba(199, 180, 154, 0.3);
}

.page-faq .faq-contact-label {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--glow);
}

.page-faq .faq-contact-card .contact-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(199, 180, 154, 0.22);
}

.page-faq .faq-contact-card .contact-key {
  font-size: 13px;
  color: var(--gravel);
}

.page-faq .faq-contact-card .contact-val {
  font-size: 14px;
  color: var(--mist);
  word-break: break-all;
}

.page-faq .faq-copy {
  display: inline-flex;
  align-items: center;
  margin: 16px 0 6px;
  padding: 7px 16px;
  border: 1px solid rgba(233, 225, 210, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-faq .faq-copy:hover,
.page-faq .faq-copy:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

.page-faq .faq-copy:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

.page-faq .copy-status {
  min-height: 18px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--glow);
}

.page-faq .faq-contact-card .contact-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gravel);
}

.page-faq .faq-contact-card .contact-note a {
  color: var(--glow);
  border-bottom-color: rgba(70, 175, 196, 0.45);
}

/* 响应式 */
@media (min-width: 720px) {
  .page-faq .section {
    padding: 72px 0;
  }

  .page-faq .faq-hero {
    padding: calc(var(--header-h) + 56px) 0 88px;
  }

  .page-faq .faq-steps {
    gap: 22px;
  }

  .page-faq .faq-step {
    padding: 30px 26px 26px;
  }

  .page-faq .faq-triage {
    gap: 18px;
  }

  .page-faq .triage-item {
    padding: 26px;
  }

  .page-faq .faq-contact-card {
    padding: 32px 30px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: end;
  }

  .page-faq .faq-entry-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 44px;
    align-items: start;
  }

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

  .page-faq .faq-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -32px;
    width: 28px;
    height: 2px;
    background: var(--flag);
    opacity: 0.72;
    transform: rotate(-18deg);
    transform-origin: right center;
    pointer-events: none;
  }

  .page-faq .faq-help-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 52px;
    align-items: start;
  }

  .page-faq .faq-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 52px;
  }

  .page-faq .faq-group:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1160px) {
  .page-faq .section {
    padding: 84px 0;
  }

  .page-faq .faq-index {
    padding-left: 22px;
  }

  .page-faq .faq-index a {
    font-size: 15px;
    padding: 11px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-step,
  .page-faq .triage-item,
  .page-faq .faq-index a {
    transition: none;
  }

  .page-faq .faq-step:hover,
  .page-faq .triage-item:hover,
  .page-faq .faq-index a:hover {
    transform: none;
  }
}