.page-faq {
  --faq-line: var(--xt-line);
  --faq-gap: clamp(28px, 5vw, 64px);
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-faq .xt-breadcrumb {
  padding: clamp(14px, 2vw, 22px) 0 0;
}

/* ---------- HERO ---------- */
.page-faq .faq-hero {
  padding-top: clamp(24px, 4vw, 48px);
}
.page-faq .faq-hero__frame {
  position: relative;
  border: 1px solid var(--xt-line-strong);
  background:
    linear-gradient(140deg, rgba(199,255,60,.06), rgba(11,26,20,0) 46%),
    var(--xt-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  padding: clamp(28px, 5vw, 60px) clamp(22px, 4.5vw, 64px) clamp(32px, 5vw, 58px);
}
.page-faq .faq-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, var(--xt-lime), rgba(199,255,60,0));
}
.page-faq .faq-hero__kicker {
  color: var(--xt-lime);
  margin: 0 0 14px;
}
.page-faq .faq-hero__title {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(28px, 5.2vw, 54px);
  line-height: 1.14;
  color: var(--xt-white);
  margin: 0 0 18px;
  max-width: 20em;
}
.page-faq .faq-hero__lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
  max-width: 38em;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  margin-top: 26px;
}
.page-faq .faq-hero__meta-item {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--xt-muted);
  border: 1px solid var(--xt-line);
  padding: 7px 12px;
}
.page-faq .faq-hero__meta-item b {
  color: var(--xt-lime);
  font-size: 15px;
  margin-right: 4px;
}

/* ---------- STEP INDEX ---------- */
.page-faq .faq-steps {
  padding-top: var(--faq-gap);
}
.page-faq .faq-steps__label {
  color: var(--xt-muted);
  margin: 0 0 18px;
}
.page-faq .faq-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.page-faq .faq-steps__item {
  display: block;
}
.page-faq .faq-steps__item:nth-child(1) { margin-left: 0; }
.page-faq .faq-steps__item:nth-child(2) { margin-left: 6%; }
.page-faq .faq-steps__item:nth-child(3) { margin-left: 12%; }
.page-faq .faq-steps__item:nth-child(4) { margin-left: 6%; }
.page-faq .faq-steps__item:nth-child(5) { margin-left: 12%; }
.page-faq .faq-steps__item:nth-child(6) { margin-left: 18%; }

.page-faq .faq-steps__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--xt-line);
  background: rgba(22,36,28,.5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  text-decoration: none;
  color: var(--xt-white);
  transition: border-color .18s var(--xt-ease), background-color .18s var(--xt-ease);
}
.page-faq .faq-steps__link:hover,
.page-faq .faq-steps__link:focus-visible {
  border-color: var(--xt-lime);
  background: var(--xt-lime-soft);
  outline: none;
}
.page-faq .faq-steps__num {
  font-family: var(--xt-mono);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--xt-lime);
  flex: 0 0 auto;
}
.page-faq .faq-steps__text {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--xt-silver);
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--xt-ease), color .18s var(--xt-ease);
}
.page-faq .faq-steps__link:hover .faq-steps__text {
  color: var(--xt-white);
  border-bottom-color: var(--xt-lime);
}
.page-faq .faq-steps__ticks {
  margin-top: 24px;
}

/* ---------- BLOCK SHELL ---------- */
.page-faq .faq-block {
  padding-top: var(--faq-gap);
  margin-top: var(--faq-gap);
  border-top: 1px solid var(--faq-line);
  scroll-margin-top: 130px;
}
.page-faq .faq-block--tight {
  padding-top: clamp(24px, 3.5vw, 44px);
  margin-top: clamp(24px, 3.5vw, 44px);
}
.page-faq .faq-block__head {
  margin-bottom: clamp(20px, 3vw, 34px);
  max-width: 42em;
}
.page-faq .faq-block__head .xt-index {
  color: var(--xt-muted);
  margin: 0 0 10px;
}
.page-faq .faq-block__title {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.2;
  color: var(--xt-white);
  margin: 0 0 12px;
}
.page-faq .faq-block__note {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
}
.page-faq .faq-block__more {
  margin: 26px 0 0;
}
.page-faq .faq-block__figure {
  margin: 0;
}

/* ---------- WALK CARDS ---------- */
.page-faq .faq-walk {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.page-faq .faq-walk__card {
  position: relative;
  border: 1px solid var(--xt-line);
  background: var(--xt-panel);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 24px 22px 26px;
  transition: border-color .18s var(--xt-ease);
}
.page-faq .faq-walk__card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--xt-lime);
  transition: height .24s var(--xt-ease);
}
.page-faq .faq-walk__card:hover {
  border-color: var(--xt-lime);
}
.page-faq .faq-walk__card:hover::after {
  height: 100%;
}
.page-faq .faq-walk__num {
  font-family: var(--xt-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--xt-lime);
  display: block;
  margin-bottom: 12px;
}
.page-faq .faq-walk__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--xt-white);
  margin: 0 0 10px;
}
.page-faq .faq-walk__card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0 0 12px;
}
.page-faq .faq-walk__mono {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--xt-muted);
  margin: 0;
}
.page-faq .faq-walk__card .faq-walk__mono {
  color: var(--xt-lime);
  opacity: .78;
}

/* ---------- SPLIT LAYOUT ---------- */
.page-faq .faq-block--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-faq .faq-block__col {
  min-width: 0;
}
.page-faq .faq-block--split .faq-block__figure {
  order: -1;
}

/* ---------- ORDERED STEPS LIST ---------- */
.page-faq .faq-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--faq-line);
}
.page-faq .faq-steps-list__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(192,198,194,.18);
}
.page-faq .faq-steps-list__n {
  font-family: var(--xt-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--xt-ink);
  background: var(--xt-lime);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.page-faq .faq-steps-list__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 6px;
}
.page-faq .faq-steps-list__item p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0;
}

/* ---------- DISCOUNT ---------- */
.page-faq .faq-discount {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-faq .faq-discount__panel {
  padding: 22px;
}
.page-faq .faq-discount__panel--warm {
  background:
    linear-gradient(160deg, var(--xt-orange-soft), rgba(22,36,28,0) 70%),
    var(--xt-panel);
  border-color: rgba(255,138,43,.5);
}
.page-faq .faq-discount__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 10px;
}
.page-faq .faq-discount__panel p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0 0 12px;
}
.page-faq .faq-discount__panel--warm .faq-walk__mono {
  color: var(--xt-orange);
  opacity: .9;
}
.page-faq .faq-discount__hint {
  font-size: 13px;
  line-height: 1.8;
  color: var(--xt-muted);
  border-left: 2px solid var(--xt-orange);
  padding-left: 14px;
  margin: 22px 0 0;
  max-width: 46em;
}

/* ---------- FILTER ---------- */
.page-faq .faq-filter__bar {
  margin-bottom: 22px;
}
.page-faq .faq-filter__grid {
  gap: 16px;
}
.page-faq .faq-filter__card {
  padding: 20px;
  transition: border-color .18s var(--xt-ease);
}
.page-faq .faq-filter__card:hover {
  border-color: var(--xt-lime);
}
.page-faq .faq-filter__card[data-filtered="out"] {
  display: none;
}
.page-faq .faq-filter__tag {
  color: var(--xt-lime);
  margin: 0 0 8px;
}
.page-faq .faq-filter__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 8px;
}
.page-faq .faq-filter__card p:not(.xt-index) {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0;
}
.page-faq .faq-mistake {
  margin-top: clamp(24px, 3.5vw, 40px);
  border: 1px dashed rgba(192,198,194,.26);
  padding: 22px;
  background: rgba(16,19,17,.6);
}
.page-faq .faq-mistake__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--xt-white);
  margin: 0 0 14px;
}
.page-faq .faq-mistake__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-faq .faq-mistake__list li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  padding-left: 16px;
  position: relative;
}
.page-faq .faq-mistake__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--xt-lime);
}
.page-faq .faq-mistake__list b {
  color: var(--xt-white);
  font-weight: 700;
}

/* ---------- READ TABLES ---------- */
.page-faq .faq-read__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.page-faq .faq-read__side {
  border: 1px solid var(--xt-line);
  background: var(--xt-panel);
  padding: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.page-faq .faq-read__side--alt {
  background:
    linear-gradient(150deg, rgba(61,190,139,.10), rgba(22,36,28,0) 62%),
    var(--xt-panel);
}
.page-faq .faq-read__side-label {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--xt-lime);
  margin: 0 0 14px;
}
.page-faq .faq-read__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-faq .faq-read__fields li {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--xt-silver);
  padding-bottom: 10px;
  border-bottom: 1px dotted rgba(192,198,194,.2);
}
.page-faq .faq-read__fields li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.page-faq .faq-read__fields .faq-walk__mono {
  color: var(--xt-white);
  margin-right: 10px;
}
.page-faq .faq-read__tip {
  font-size: 14px;
  line-height: 1.85;
  color: var(--xt-silver);
  border-left: 3px solid var(--xt-green);
  padding-left: 16px;
  margin: 24px 0 0;
  max-width: 42em;
}

/* ---------- QA ACCORDION ---------- */
.page-faq .faq-qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 34px);
}
.page-faq .faq-qa__group-title {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--xt-lime);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--faq-line);
}
.page-faq .faq-qa__item {
  border: 1px solid transparent;
  border-left: 2px solid rgba(192,198,194,.24);
  padding: 14px 12px 14px 18px;
  transition: border-left-color .2s var(--xt-ease), background-color .2s var(--xt-ease);
}
.page-faq .faq-qa__item[open] {
  border-left-color: var(--xt-lime);
  background: var(--xt-lime-soft);
}
.page-faq .faq-qa__q {
  font-family: var(--xt-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--xt-white);
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.page-faq .faq-qa__q::-webkit-details-marker {
  display: none;
}
.page-faq .faq-qa__q::before {
  content: "+";
  font-family: var(--xt-mono);
  font-size: 15px;
  color: var(--xt-lime);
  flex: 0 0 auto;
  transition: transform .2s var(--xt-ease);
}
.page-faq .faq-qa__item[open] .faq-qa__q::before {
  content: "–";
}
.page-faq .faq-qa__a {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 10px 0 0 27px;
  max-width: 34em;
}

/* ---------- CTA ---------- */
.page-faq .faq-cta {
  padding-top: var(--faq-gap);
  margin-top: var(--faq-gap);
  border-top: 1px solid var(--faq-line);
}
.page-faq .faq-cta__panel {
  padding: clamp(26px, 4vw, 48px);
  background:
    linear-gradient(120deg, rgba(199,255,60,.08), rgba(22,36,28,0) 55%),
    var(--xt-panel);
}
.page-faq .faq-cta__panel .xt-index {
  color: var(--xt-muted);
  margin: 0 0 12px;
}
.page-faq .faq-cta__h {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--xt-white);
  margin: 0 0 14px;
}
.page-faq .faq-cta__p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
  max-width: 42em;
}
.page-faq .faq-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-faq .faq-cta__mail {
  font-size: 13px;
  color: var(--xt-muted);
  margin: 18px 0 0;
  word-break: break-all;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 700px) {
  .page-faq .faq-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .page-faq .faq-steps__item:nth-child(1) { margin-left: 0; }
  .page-faq .faq-steps__item:nth-child(2) { margin-left: 0; margin-top: 18px; }
  .page-faq .faq-steps__item:nth-child(3) { margin-left: 5%; }
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 5%; margin-top: 18px; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 10%; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 10%; margin-top: 18px; }

  .page-faq .faq-walk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .page-faq .faq-walk__card--offset {
    margin-top: 30px;
  }
  .page-faq .faq-discount {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .faq-qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .faq-read__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-faq .faq-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-steps__item:nth-child(1) { margin-left: 0; margin-top: 0; }
  .page-faq .faq-steps__item:nth-child(2) { margin-left: 0; margin-top: 22px; }
  .page-faq .faq-steps__item:nth-child(3) { margin-left: 0; margin-top: 44px; }
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 6%; margin-top: 20px; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 6%; margin-top: 42px; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 6%; margin-top: 64px; }

  .page-faq .faq-walk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .page-faq .faq-walk__card--offset {
    margin-top: 44px;
  }
  .page-faq .faq-block--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 4vw, 62px);
  }
  .page-faq .faq-block--flip {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
  .page-faq .faq-block--split .faq-block__figure {
    order: 0;
  }
  .page-faq .faq-block--flip .faq-block__figure {
    order: -1;
  }
  .page-faq .faq-discount {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
  }
}

@media (min-width: 1120px) {
  .page-faq .faq-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 12%; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 12%; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-steps__link,
  .page-faq .faq-steps__text,
  .page-faq .faq-walk__card,
  .page-faq .faq-walk__card::after,
  .page-faq .faq-filter__card,
  .page-faq .faq-qa__item,
  .page-faq .faq-qa__q::before {
    transition: none;
  }
  .page-faq .faq-walk__card:hover::after {
    height: 0;
  }
}


<main id="main-content" class="page-faq">
  <div class="xt-container">
    <nav class="xt-breadcrumb" aria-label="页面位置">
      <a href="/">看台首页</a>
      <span class="xt-breadcrumb__sep">/</span>
      <span aria-current="page">教程中心</span>
    </nav>
  </div>

  <section class="faq-hero xt-container">
    <div class="faq-hero__frame">
      <p class="xt-index faq-hero__kicker">MANUAL / 操作手册</p>
      <h1 class="faq-hero__title">第一次用 MANBETX看台，从这里一步步走完</h1>
      <p class="faq-hero__lead">开通、续费、查折扣、按标签找球队、读懂主客场数据——六组操作按顺序排开，遇到卡住的步骤，点击编号直达答案。</p>
      <div class="faq-hero__meta">
        <span class="faq-hero__meta-item"><b>6</b> 组操作指引</span>
        <span class="faq-hero__meta-item"><b>4</b> 类常见疑问</span>
        <span class="faq-hero__meta-item">客服邮箱工作日 9:00–18:00 回复</span>
      </div>
    </div>
  </section>

  <section class="faq-steps xt-container" aria-labelledby="steps-title">
    <h2 id="steps-title" class="xt-index faq-steps__label">STEP INDEX / 步骤索引</h2>
    <ol class="faq-steps__list">
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-find">
          <span class="faq-steps__num">01</span>
          <span class="faq-steps__text">三步找到目标球队</span>
        </a>
      </li>
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-member">
          <span class="faq-steps__num">02</span>
          <span class="faq-steps__text">开通与续费</span>
        </a>
      </li>
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-discount">
          <span class="faq-steps__num">03</span>
          <span class="faq-steps__text">折扣查询</span>
        </a>
      </li>
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-filter">
          <span class="faq-steps__num">04</span>
          <span class="faq-steps__text">标签筛选实操</span>
        </a>
      </li>
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-read">
          <span class="faq-steps__num">05</span>
          <span class="faq-steps__text">进失球怎么读</span>
        </a>
      </li>
      <li class="faq-steps__item">
        <a class="faq-steps__link" href="#step-qa">
          <span class="faq-steps__num">06</span>
          <span class="faq-steps__text">常见疑问</span>
        </a>
      </li>
    </ol>
    <div class="xt-ticks faq-steps__ticks" aria-hidden="true"></div>
  </section>

  <section id="step-find" class="faq-block xt-container" aria-labelledby="find-title">
    <header class="faq-block__head">
      <p class="xt-index">01 / 检索路径</p>
      <h2 id="find-title" class="faq-block__title">三步找到目标球队</h2>
      <p class="faq-block__note">多数人第一次进来只想确认一支球队的攻防节奏，三个动作就够了。</p>
    </header>
    <div class="faq-walk">
      <article class="faq-walk__card">
        <span class="faq-walk__num">01</span>
        <h3 class="faq-walk__h">在球队库里输入队名</h3>
        <p>顶部球队库入口支持中文队名、常见简称和联赛代号三种输入，输入两个字符就会给出候选，选错可以整段清空重来。</p>
        <p class="faq-walk__mono">搜索框 → 输入队名 → 选择候选</p>
      </article>
      <article class="faq-walk__card faq-walk__card--offset">
        <span class="faq-walk__num">02</span>
        <h3 class="faq-walk__h">用标签把范围收窄</h3>
        <p>结果列表左侧是联赛、地区、赛季、主客场四组标签，点一次就叠加一层条件。想看本季主场表现，就把赛季和主客场两组一起选上。</p>
        <p class="faq-walk__mono">联赛 → 地区 → 赛季 → 主客场</p>
      </article>
      <article class="faq-walk__card">
        <span class="faq-walk__num">03</span>
        <h3 class="faq-walk__h">打开档案看进失球分布</h3>
        <p>点球队名进入档案页，主客场两组各 6 项数据直接铺开，周末连看两场时把两个档案并排对照，攻防差异一眼能看出来。</p>
        <p class="faq-walk__mono">球队档案 → 主客场分布</p>
      </article>
    </div>
  </section>

  <section id="step-member" class="faq-block faq-block--split xt-container" aria-labelledby="member-title">
    <div class="faq-block__col">
      <header class="faq-block__head">
        <p class="xt-index">02 / 开通与续费</p>
        <h2 id="member-title" class="faq-block__title">赛季会员开通与续费</h2>
        <p class="faq-block__note">先看你一年会看多少场，再决定选哪一档。三档的名称和结算方式全站一致，选之前不用来回比对叫法。</p>
      </header>
      <ol class="faq-steps-list">
        <li class="faq-steps-list__item">
          <span class="faq-steps-list__n">A</span>
          <div>
            <h3 class="faq-steps-list__h">选择档位</h3>
            <p>月度观赛档适合先试一个月；整季档案档覆盖整个赛季的球队档案与标签回溯；三年期档案档再往前接三段完整赛季。</p>
          </div>
        </li>
        <li class="faq-steps-list__item">
          <span class="faq-steps-list__n">B</span>
          <div>
            <h3 class="faq-steps-list__h">确认赛季周期</h3>
            <p>费用按赛季周期结算，不是按自然月滚动。开通页会把当前赛季阶段和到期节点写在同一行，确认后再付款。</p>
          </div>
        </li>
        <li class="faq-steps-list__item">
          <span class="faq-steps-list__n">C</span>
          <div>
            <h3 class="faq-steps-list__h">完成开通</h3>
            <p>同一账号可管理最多 3 个关注球队，开通后立刻能订阅它们的赛程与进失球提醒，赛后数据在 60 分钟内进入档案。</p>
          </div>
        </li>
        <li class="faq-steps-list__item">
          <span class="faq-steps-list__n">D</span>
          <div>
            <h3 class="faq-steps-list__h">查看续费状态</h3>
            <p>账号页顶部会显示剩余赛季天数与下次结算时间。整季档案档和三年期档案档还能导出球队赛季汇总表，主客场 6 项字段齐全。</p>
          </div>
        </li>
      </ol>
      <p class="faq-block__more">
        <a class="xt-btn xt-btn--outline" href="/services/">对照三档会员权益</a>
      </p>
    </div>
    <figure class="xt-figure faq-block__figure">
      <img class="xt-figure__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="手机端会员档位选择界面的分步操作示意，深色底并高亮当前所选档位">
    </figure>
  </section>

  <section id="step-discount" class="faq-block faq-block--tight xt-container" aria-labelledby="discount-title">
    <header class="faq-block__head">
      <p class="xt-index">03 / 折扣</p>
      <h2 id="discount-title" class="faq-block__title">折扣查询与适用范围</h2>
      <p class="faq-block__note">老用户续费越早，梯度越高。查折扣只需要一个入口，看完再决定什么时候付款。</p>
    </header>
    <div class="faq-discount">
      <div class="xt-panel faq-discount__panel">
        <h3 class="faq-discount__h">在哪里查</h3>
        <p>刊头右侧的小号文字链就是折扣入口，登录后在「账号 → 续费」里也能看到同一组梯度，两处显示一致。</p>
        <p class="faq-walk__mono">刊头入口 / 账号 → 续费</p>
      </div>
      <div class="xt-panel faq-discount__panel faq-discount__panel--warm">
        <h3 class="faq-discount__h">什么时候续更省</h3>
        <p>当前赛季进入常规阶段后即可续费，越早下单梯度越高；跨过赛季节点，梯度会回落到新赛季的起始档。</p>
        <p class="faq-walk__mono">续费时间 → 折扣梯度</p>
      </div>
      <div class="xt-panel faq-discount__panel">
        <h3 class="faq-discount__h">适用条件</h3>
        <p>面向大陆版老用户，要求账号此前已完成过一次赛季付费。新注册账号不在折扣范围内，建议先从月度观赛档开始。</p>
        <p class="faq-walk__mono">老用户 / 大陆版 / 已付费一次</p>
      </div>
    </div>
    <p class="faq-discount__hint">折扣梯度与到期节点在账号页同步显示，如果看到的数值和预期不同，把账号信息发到客服邮箱，工作日 9:00–18:00 内会回复。</p>
  </section>

  <section id="step-filter" class="faq-block xt-container" aria-labelledby="filter-title">
    <header class="faq-block__head">
      <p class="xt-index">04 / 标签</p>
      <h2 id="filter-title" class="faq-block__title">分类标签筛选实操</h2>
      <p class="faq-block__note">四组标签是层层叠加的关系，不是单选替换。年费版解锁全部标签与历史赛季回溯。</p>
    </header>

    <div class="faq-filter" data-filter-scope>
      <div class="xt-filterbar faq-filter__bar" data-filter-group>
        <button class="xt-tag" type="button" data-filter="all" aria-pressed="true">全部</button>
        <button class="xt-tag" type="button" data-filter="联赛" aria-pressed="false">联赛</button>
        <button class="xt-tag" type="button" data-filter="地区" aria-pressed="false">地区</button>
        <button class="xt-tag" type="button" data-filter="赛季" aria-pressed="false">赛季</button>
        <button class="xt-tag" type="button" data-filter="主客场" aria-pressed="false">主客场</button>
        <span class="xt-filterbar__count">当前 <b data-filter-count>4</b> 条</span>
      </div>
      <div class="xt-grid xt-grid--2 faq-filter__grid">
        <article class="xt-panel faq-filter__card" data-filter-item data-tags="联赛 赛季">
          <p class="xt-index faq-filter__tag">联赛</p>
          <h3 class="faq-filter__h">先定赛事范围</h3>
          <p>平台收录 42 个联赛，选中一个联赛会把球队列表压缩到该联赛之内，再做下一层筛选。</p>
        </article>
        <article class="xt-panel faq-filter__card" data-filter-item data-tags="地区">
          <p class="xt-index faq-filter__tag">地区</p>
          <h3 class="faq-filter__h">再缩地理范围</h3>
          <p>地区标签适合按省份或赛区找球队，本地球迷组织整理区域资料时用得最多。</p>
        </article>
        <article class="xt-panel faq-filter__card" data-filter-item data-tags="赛季 主客场">
          <p class="xt-index faq-filter__tag">赛季</p>
          <h3 class="faq-filter__h">锁定到具体赛季</h3>
          <p>11 个完整赛季的档案都可以回看。选中某一季，页面上所有数字都换成那一季的结果。</p>
        </article>
        <article class="xt-panel faq-filter__card" data-filter-item data-tags="主客场">
          <p class="xt-index faq-filter__tag">主客场</p>
          <h3 class="faq-filter__h">切换主客视角</h3>
          <p>主场、客场或两者同时看。只想看客场表现时，把它单独点亮，列表会剔除主场的场次。</p>
        </article>
      </div>
    </div>

    <div class="faq-mistake">
      <h3 class="faq-mistake__h">三种常见的点错方式</h3>
      <ul class="faq-mistake__list">
        <li><b>把标签当单选。</b>再点一次同一标签是取消，不是切换成别的条件。</li>
        <li><b>赛季和联赛顺序反了。</b>先选联赛再选赛季，结果更准；反过来会看到大量空档。</li>
        <li><b>主客场只点了一半。</b>想对照主客差异，两个都要点亮，否则表里只有一列有数。</li>
      </ul>
    </div>
  </section>

  <section id="step-read" class="faq-block faq-block--split faq-block--flip xt-container" aria-labelledby="read-title">
    <figure class="xt-figure faq-block__figure faq-block__figure--tall">
      <img class="xt-figure__img" loading="lazy" decoding="async" src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="主客场两栏各六项指标的标注示意，字段名以等宽字体对齐排列">
    </figure>
    <div class="faq-block__col">
      <header class="faq-block__head">
        <p class="xt-index">05 / 读表</p>
        <h2 id="read-title" class="faq-block__title">进失球分布怎么读</h2>
        <p class="faq-block__note">主客场各 6 项，顺序固定。看单队就竖着读，看两支队就横着比。</p>
      </header>
      <div class="faq-read">
        <div class="faq-read__cols">
          <div class="faq-read__side">
            <p class="faq-read__side-label">主队列</p>
            <ol class="faq-read__fields">
              <li><span class="faq-walk__mono">进球数</span>该场或该季主场的总进球</li>
              <li><span class="faq-walk__mono">失球数</span>同期被对手打入的总数</li>
              <li><span class="faq-walk__mono">场均进球</span>总进球除以主场场次</li>
              <li><span class="faq-walk__mono">场均失球</span>总失球除以主场场次</li>
              <li><span class="faq-walk__mono">零封场次</span>主场未失球到底的比赛数</li>
              <li><span class="faq-walk__mono">进球场次</span>主场至少进一球的比赛数</li>
            </ol>
          </div>
          <div class="faq-read__side faq-read__side--alt">
            <p class="faq-read__side-label">客队列</p>
            <ol class="faq-read__fields">
              <li>同样的 6 项，换成客场数据排列</li>
              <li>场均两项是判断节奏快慢的第一眼指标</li>
              <li>零封与进球场次一起看，能分辨是锋线问题还是后防问题</li>
              <li>两队对照时，两列同名字段保持同行对齐</li>
              <li>手机横屏可并排显示，省去来回翻页</li>
              <li>整季档案档与三年期档案档支持导出为汇总表</li>
            </ol>
          </div>
        </div>
        <p class="faq-read__tip">周末连看两场时，先看场均进失球判断攻防基调，再看零封与进球场次判断稳定性，最后回到胜负结果，阅读顺序反过来容易得出片面的印象。</p>
      </div>
    </div>
  </section>

  <section id="step-qa" class="faq-block faq-block--qa xt-container" aria-labelledby="qa-title">
    <header class="faq-block__head">
      <p class="xt-index">06 / 疑问</p>
      <h2 id="qa-title" class="faq-block__title">常见疑问分组</h2>
      <p class="faq-block__note">按账号、费用周期、数据内容、移动端使用四组归集，答案控制在三行以内。</p>
    </header>

    <div class="faq-qa">
      <div class="faq-qa__group">
        <h3 class="faq-qa__group-title">账号</h3>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">一个账号能同时跟几支队？</summary>
          <p class="faq-qa__a">最多 3 支，可以在账号页随时替换，替换后原来的赛程提醒会自动停掉。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">换手机之后关注列表还在吗？</summary>
          <p class="faq-qa__a">在。关注球队、标签偏好和档案导出记录都挂在账号上，用同一账号登录就能接着看。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">能不能几条人共用？</summary>
          <p class="faq-qa__a">账号按单人使用设计。球迷组织需要多人查看，可以汇总需求发到客服邮箱，由我们来安排合适的方案。</p>
        </details>
      </div>

      <div class="faq-qa__group">
        <h3 class="faq-qa__group-title">费用周期</h3>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">赛季会员费用周期是怎么算的？</summary>
          <p class="faq-qa__a">按赛季结算：从开通当季算起到该赛季结束，中途开通不会补收前面已经过去的轮次费用。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">赛季中途开通还有意义吗？</summary>
          <p class="faq-qa__a">有。整季档案档开通后能回看本赛季已经完成的全部场次，前面落下的数据不会落下。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">续费会自动扣款吗？</summary>
          <p class="faq-qa__a">不会自动扣款。到期前账号页会提示结算时间，需要你自己确认后下单，折扣梯度也在这个节点生效。</p>
        </details>
      </div>

      <div class="faq-qa__group">
        <h3 class="faq-qa__group-title">数据内容</h3>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">比赛结束多久能看到数据？</summary>
          <p class="faq-qa__a">每个比赛日的球队数据在赛后 60 分钟内更新，赛季节点的复核在 24 小时内完成。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">能不能导出整季的主客场明细？</summary>
          <p class="faq-qa__a">可以。整季档案档与三年期档案档支持导出球队赛季汇总表，主客场 6 项字段都包含在内。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">淘汰赛和杯赛的数据也在里面吗？</summary>
          <p class="faq-qa__a">主要覆盖联赛与常规阶段，杯赛数据按赛季专题单独整理，可以在看台动态里按赛季阶段找到对应专题。</p>
        </details>
      </div>

      <div class="faq-qa__group">
        <h3 class="faq-qa__group-title">移动端使用</h3>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">手机上两支队怎么并排看？</summary>
          <p class="faq-qa__a">进入球队档案后把手机横过来，会自动切成横屏对照模式，两队的 6 项数据左右并列。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">标签点乱了怎么恢复？</summary>
          <p class="faq-qa__a">点「全部」一次清空所有已选标签，球队列表回到完整状态，再按需要重新叠加。</p>
        </details>
        <details class="faq-qa__item">
          <summary class="faq-qa__q">弱网环境下数据会丢吗？</summary>
          <p class="faq-qa__a">已经打开的档案会保留本地缓存，下次进入先显示缓存内容再补最新数据，网络恢复后自动对齐。</p>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-cta xt-container" aria-labelledby="cta-title">
    <div class="faq-cta__panel xt-panel">
      <p class="xt-index">还没解决？</p>
      <h2 id="cta-title" class="faq-cta__h">把问题连同账号信息一起发过来</h2>
      <p class="faq-cta__p">操作中卡住、折扣数值和预期不一致、标签筛选结果异常，都可以直接写信给客服邮箱，说清你用的档位和看到的页面，我们工作日 9:00–18:00 内回复。</p>
      <div class="faq-cta__row">
        <button class="xt-btn xt-btn--solid faq-copy" type="button" data-copy-mail>复制邮箱 email@manbet-x-mobile.com.cn</button>
        <a class="xt-btn xt-btn--outline" href="/contact/">查看其他联系方式</a>
        <a class="xt-btn xt-btn--warm" href="/press/">看数据更新记录</a>
      </div>
      <p class="faq-cta__mail xt-num">email@manbet-x-mobile.com.cn</p>
    </div>
  </section>
</main>

.page-faq {
  --faq-line: var(--xt-line);
  --faq-gap: clamp(28px, 5vw, 64px);
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-faq .xt-breadcrumb {
  padding: clamp(14px, 2vw, 22px) 0 0;
}

.page-faq .faq-hero {
  padding-top: clamp(24px, 4vw, 48px);
}
.page-faq .faq-hero__frame {
  position: relative;
  border: 1px solid var(--xt-line-strong);
  background:
    linear-gradient(140deg, rgba(199,255,60,.06), rgba(11,26,20,0) 46%),
    var(--xt-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  padding: clamp(28px, 5vw, 60px) clamp(22px, 4.5vw, 64px) clamp(32px, 5vw, 58px);
}
.page-faq .faq-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, var(--xt-lime), rgba(199,255,60,0));
}
.page-faq .faq-hero__kicker {
  color: var(--xt-lime);
  margin: 0 0 14px;
}
.page-faq .faq-hero__title {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(28px, 5.2vw, 54px);
  line-height: 1.14;
  color: var(--xt-white);
  margin: 0 0 18px;
  max-width: 20em;
}
.page-faq .faq-hero__lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
  max-width: 38em;
}
.page-faq .faq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.page-faq .faq-hero__meta-item {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--xt-muted);
  border: 1px solid var(--xt-line);
  padding: 7px 12px;
}
.page-faq .faq-hero__meta-item b {
  color: var(--xt-lime);
  font-size: 15px;
  margin-right: 4px;
}

.page-faq .faq-steps {
  padding-top: var(--faq-gap);
}
.page-faq .faq-steps__label {
  color: var(--xt-muted);
  margin: 0 0 18px;
}
.page-faq .faq-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.page-faq .faq-steps__item:nth-child(2) { margin-left: 6%; }
.page-faq .faq-steps__item:nth-child(3) { margin-left: 12%; }
.page-faq .faq-steps__item:nth-child(4) { margin-left: 6%; }
.page-faq .faq-steps__item:nth-child(5) { margin-left: 12%; }
.page-faq .faq-steps__item:nth-child(6) { margin-left: 18%; }

.page-faq .faq-steps__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--xt-line);
  background: rgba(22,36,28,.5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  text-decoration: none;
  color: var(--xt-white);
  transition: border-color .18s var(--xt-ease), background-color .18s var(--xt-ease);
}
.page-faq .faq-steps__link:hover,
.page-faq .faq-steps__link:focus-visible {
  border-color: var(--xt-lime);
  background: var(--xt-lime-soft);
  outline: none;
}
.page-faq .faq-steps__num {
  font-family: var(--xt-mono);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--xt-lime);
  flex: 0 0 auto;
}
.page-faq .faq-steps__text {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--xt-silver);
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--xt-ease), color .18s var(--xt-ease);
}
.page-faq .faq-steps__link:hover .faq-steps__text {
  color: var(--xt-white);
  border-bottom-color: var(--xt-lime);
}
.page-faq .faq-steps__ticks {
  margin-top: 24px;
}

.page-faq .faq-block {
  padding-top: var(--faq-gap);
  margin-top: var(--faq-gap);
  border-top: 1px solid var(--faq-line);
  scroll-margin-top: 130px;
}
.page-faq .faq-block--tight {
  padding-top: clamp(24px, 3.5vw, 44px);
  margin-top: clamp(24px, 3.5vw, 44px);
}
.page-faq .faq-block__head {
  margin-bottom: clamp(20px, 3vw, 34px);
  max-width: 42em;
}
.page-faq .faq-block__head .xt-index {
  color: var(--xt-muted);
  margin: 0 0 10px;
}
.page-faq .faq-block__title {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.2;
  color: var(--xt-white);
  margin: 0 0 12px;
}
.page-faq .faq-block__note {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
}
.page-faq .faq-block__more {
  margin: 26px 0 0;
}
.page-faq .faq-block__figure {
  margin: 0;
}

.page-faq .faq-walk {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.page-faq .faq-walk__card {
  position: relative;
  border: 1px solid var(--xt-line);
  background: var(--xt-panel);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 24px 22px 26px;
  transition: border-color .18s var(--xt-ease);
}
.page-faq .faq-walk__card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--xt-lime);
  transition: height .24s var(--xt-ease);
}
.page-faq .faq-walk__card:hover {
  border-color: var(--xt-lime);
}
.page-faq .faq-walk__card:hover::after {
  height: 100%;
}
.page-faq .faq-walk__num {
  font-family: var(--xt-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--xt-lime);
  display: block;
  margin-bottom: 12px;
}
.page-faq .faq-walk__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--xt-white);
  margin: 0 0 10px;
}
.page-faq .faq-walk__card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0 0 12px;
}
.page-faq .faq-walk__mono {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--xt-muted);
  margin: 0;
}
.page-faq .faq-walk__card .faq-walk__mono {
  color: var(--xt-lime);
  opacity: .78;
}

.page-faq .faq-block--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-faq .faq-block__col {
  min-width: 0;
}
.page-faq .faq-block--split .faq-block__figure {
  order: -1;
}

.page-faq .faq-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--faq-line);
}
.page-faq .faq-steps-list__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(192,198,194,.18);
}
.page-faq .faq-steps-list__n {
  font-family: var(--xt-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--xt-ink);
  background: var(--xt-lime);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.page-faq .faq-steps-list__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 6px;
}
.page-faq .faq-steps-list__item p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0;
}

.page-faq .faq-discount {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-faq .faq-discount__panel {
  padding: 22px;
}
.page-faq .faq-discount__panel--warm {
  background:
    linear-gradient(160deg, var(--xt-orange-soft), rgba(22,36,28,0) 70%),
    var(--xt-panel);
  border-color: rgba(255,138,43,.5);
}
.page-faq .faq-discount__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 10px;
}
.page-faq .faq-discount__panel p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0 0 12px;
}
.page-faq .faq-discount__panel--warm .faq-walk__mono {
  color: var(--xt-orange);
  opacity: .9;
}
.page-faq .faq-discount__hint {
  font-size: 13px;
  line-height: 1.8;
  color: var(--xt-muted);
  border-left: 2px solid var(--xt-orange);
  padding-left: 14px;
  margin: 22px 0 0;
  max-width: 46em;
}

.page-faq .faq-filter__bar {
  margin-bottom: 22px;
}
.page-faq .faq-filter__grid {
  gap: 16px;
}
.page-faq .faq-filter__card {
  padding: 20px;
  transition: border-color .18s var(--xt-ease);
}
.page-faq .faq-filter__card:hover {
  border-color: var(--xt-lime);
}
.page-faq .faq-filter__card[data-filtered="out"] {
  display: none;
}
.page-faq .faq-filter__tag {
  color: var(--xt-lime);
  margin: 0 0 8px;
}
.page-faq .faq-filter__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--xt-white);
  margin: 0 0 8px;
}
.page-faq .faq-filter__card p:not(.xt-index) {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 0;
}
.page-faq .faq-mistake {
  margin-top: clamp(24px, 3.5vw, 40px);
  border: 1px dashed rgba(192,198,194,.26);
  padding: 22px;
  background: rgba(16,19,17,.6);
}
.page-faq .faq-mistake__h {
  font-family: var(--xt-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--xt-white);
  margin: 0 0 14px;
}
.page-faq .faq-mistake__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-faq .faq-mistake__list li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  padding-left: 16px;
  position: relative;
}
.page-faq .faq-mistake__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--xt-lime);
}
.page-faq .faq-mistake__list b {
  color: var(--xt-white);
  font-weight: 700;
}

.page-faq .faq-read__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.page-faq .faq-read__side {
  border: 1px solid var(--xt-line);
  background: var(--xt-panel);
  padding: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.page-faq .faq-read__side--alt {
  background:
    linear-gradient(150deg, rgba(61,190,139,.10), rgba(22,36,28,0) 62%),
    var(--xt-panel);
}
.page-faq .faq-read__side-label {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--xt-lime);
  margin: 0 0 14px;
}
.page-faq .faq-read__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-faq .faq-read__fields li {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--xt-silver);
  padding-bottom: 10px;
  border-bottom: 1px dotted rgba(192,198,194,.2);
}
.page-faq .faq-read__fields li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.page-faq .faq-read__fields .faq-walk__mono {
  color: var(--xt-white);
  margin-right: 10px;
}
.page-faq .faq-read__tip {
  font-size: 14px;
  line-height: 1.85;
  color: var(--xt-silver);
  border-left: 3px solid var(--xt-green);
  padding-left: 16px;
  margin: 24px 0 0;
  max-width: 42em;
}

.page-faq .faq-qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 34px);
}
.page-faq .faq-qa__group-title {
  font-family: var(--xt-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--xt-lime);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--faq-line);
}
.page-faq .faq-qa__item {
  border: 1px solid transparent;
  border-left: 2px solid rgba(192,198,194,.24);
  padding: 14px 12px 14px 18px;
  transition: border-left-color .2s var(--xt-ease), background-color .2s var(--xt-ease);
}
.page-faq .faq-qa__item[open] {
  border-left-color: var(--xt-lime);
  background: var(--xt-lime-soft);
}
.page-faq .faq-qa__q {
  font-family: var(--xt-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--xt-white);
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.page-faq .faq-qa__q::-webkit-details-marker {
  display: none;
}
.page-faq .faq-qa__q::before {
  content: "+";
  font-family: var(--xt-mono);
  font-size: 15px;
  color: var(--xt-lime);
  flex: 0 0 auto;
}
.page-faq .faq-qa__item[open] .faq-qa__q::before {
  content: "–";
}
.page-faq .faq-qa__a {
  font-size: 14px;
  line-height: 1.8;
  color: var(--xt-silver);
  margin: 10px 0 0 27px;
  max-width: 34em;
}

.page-faq .faq-cta {
  padding-top: var(--faq-gap);
  margin-top: var(--faq-gap);
  border-top: 1px solid var(--faq-line);
}
.page-faq .faq-cta__panel {
  padding: clamp(26px, 4vw, 48px);
  background:
    linear-gradient(120deg, rgba(199,255,60,.08), rgba(22,36,28,0) 55%),
    var(--xt-panel);
}
.page-faq .faq-cta__panel .xt-index {
  color: var(--xt-muted);
  margin: 0 0 12px;
}
.page-faq .faq-cta__h {
  font-family: var(--xt-head);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--xt-white);
  margin: 0 0 14px;
}
.page-faq .faq-cta__p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--xt-silver);
  margin: 0;
  max-width: 42em;
}
.page-faq .faq-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-faq .faq-cta__mail {
  font-size: 13px;
  color: var(--xt-muted);
  margin: 18px 0 0;
  word-break: break-all;
}

@media (min-width: 700px) {
  .page-faq .faq-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .page-faq .faq-steps__item:nth-child(1) { margin-left: 0; margin-top: 0; }
  .page-faq .faq-steps__item:nth-child(2) { margin-left: 0; margin-top: 18px; }
  .page-faq .faq-steps__item:nth-child(3) { margin-left: 5%; margin-top: 0; }
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 5%; margin-top: 18px; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 10%; margin-top: 0; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 10%; margin-top: 18px; }

  .page-faq .faq-walk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .page-faq .faq-walk__card--offset {
    margin-top: 30px;
  }
  .page-faq .faq-discount {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .faq-qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .faq-read__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-faq .faq-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .page-faq .faq-steps__item:nth-child(1) { margin-left: 0; margin-top: 0; }
  .page-faq .faq-steps__item:nth-child(2) { margin-left: 0; margin-top: 22px; }
  .page-faq .faq-steps__item:nth-child(3) { margin-left: 0; margin-top: 44px; }
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 6%; margin-top: 20px; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 6%; margin-top: 42px; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 6%; margin-top: 64px; }

  .page-faq .faq-walk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .page-faq .faq-walk__card--offset {
    margin-top: 44px;
  }
  .page-faq .faq-block--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 4vw, 62px);
  }
  .page-faq .faq-block--flip {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
  .page-faq .faq-block--split .faq-block__figure {
    order: 0;
  }
  .page-faq .faq-block--flip .faq-block__figure {
    order: -1;
  }
  .page-faq .faq-discount {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .faq-qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
  }
}

@media (min-width: 1120px) {
  .page-faq .faq-steps__item:nth-child(4) { margin-left: 12%; }
  .page-faq .faq-steps__item:nth-child(5) { margin-left: 12%; }
  .page-faq .faq-steps__item:nth-child(6) { margin-left: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-steps__link,
  .page-faq .faq-steps__text,
  .page-faq .faq-walk__card,
  .page-faq .faq-walk__card::after,
  .page-faq .faq-filter__card,
  .page-faq .faq-qa__item {
    transition: none;
  }
  .page-faq .faq-walk__card:hover::after {
    height: 0;
  }
}