.page-faq {
  --faq-pad: clamp(18px, 2.2vw, 28px);
  --faq-edge: 1px solid var(--line-600);
  --faq-body: var(--paper-200);
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-faq .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: clamp(20px, 3.4vw, 34px) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}

.page-faq .crumbs__item {
  color: var(--gray-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-faq .crumbs__item:hover,
.page-faq .crumbs__item:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

.page-faq .crumbs__sep {
  color: var(--line-600);
}

.page-faq .crumbs__current {
  color: var(--gold-500);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding: clamp(26px, 5vw, 64px) 0 clamp(26px, 4.4vw, 52px);
  border-bottom: var(--faq-edge);
  position: relative;
}

.page-faq .faq-hero h1 {
  margin: 20px 0 0;
  max-width: 19ch;
  font-size: clamp(30px, 6.2vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper-100);
  text-wrap: balance;
}

.page-faq .faq-hero h1::after {
  content: "";
  display: block;
  width: clamp(52px, 8vw, 96px);
  height: 3px;
  margin-top: clamp(18px, 2.6vw, 28px);
  background: linear-gradient(90deg, var(--gold-500), var(--magenta-500));
}

.page-faq .faq-hero__lede {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--faq-body);
}

/* ---------- 页内索引 ---------- */
.page-faq .faq-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3.4vw, 38px);
}

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  color: var(--paper-200);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.page-faq .faq-index__link span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-500);
  transition: color 0.2s ease;
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--cyan-400);
  background: var(--ink-800);
  color: var(--cyan-400);
  transform: translateY(-2px);
}

.page-faq .faq-index__link:hover span,
.page-faq .faq-index__link:focus-visible span {
  color: var(--cyan-400);
}

/* ---------- 通用章节 ---------- */
.page-faq .faq-sec {
  padding: clamp(44px, 7vw, 96px) 0;
  border-bottom: var(--faq-edge);
  scroll-margin-top: calc(var(--head-h) + 18px);
}

.page-faq .faq-sec:last-of-type {
  border-bottom: 0;
}

.page-faq .faq-sec__head {
  max-width: 72ch;
}

.page-faq .faq-sec__head h2 {
  margin: 16px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--paper-100);
  text-wrap: balance;
}

.page-faq .faq-sec__lede {
  margin: 18px 0 0;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--faq-body);
}

/* ---------- 配图 ---------- */
.page-faq .faq-media {
  margin: clamp(26px, 4vw, 46px) 0 0;
}

.page-faq .faq-media img,
.page-faq .faq-timeline__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line-600);
}

.page-faq .faq-media .media-frame__caption,
.page-faq .faq-timeline__media .media-frame__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}

/* ---------- 说明分组 ---------- */
.page-faq .faq-group {
  margin-top: clamp(34px, 4.8vw, 62px);
}

.page-faq .faq-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-500);
}

.page-faq .faq-group__title::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--gold-500);
}

.page-faq .faq-group__title--key {
  color: var(--magenta-500);
}

.page-faq .faq-group__title--key::before {
  background: var(--magenta-500);
}

.page-faq .faq-note {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold-500);
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--gray-400);
}

.page-faq .faq-note--tight {
  border-left-color: var(--cyan-400);
}

/* ---------- 卡片网格 ---------- */
.page-faq .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}

/* ---------- 折叠卡片 ---------- */
.page-faq .faq-card {
  position: relative;
  padding: var(--faq-pad);
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.page-faq .faq-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.page-faq .faq-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-3px);
}

.page-faq .faq-card:hover::before {
  border-top-color: var(--cyan-400);
  border-left-color: var(--cyan-400);
}

.page-faq .faq-card[data-open="true"] {
  border-color: var(--cyan-400);
  background: var(--ink-800);
}

.page-faq .faq-card--paper {
  background: var(--paper-100);
  border-color: var(--paper-200);
}

.page-faq .faq-card--paper:hover {
  border-color: var(--gold-500);
}

.page-faq .faq-card--paper[data-open="true"] {
  border-color: var(--gold-500);
  background: var(--paper-200);
}

.page-faq .faq-card .fold__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-faq .faq-card .fold__head:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
}

.page-faq .faq-card__no {
  flex: none;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--gold-500);
}

.page-faq .faq-card--paper .faq-card__no {
  color: var(--magenta-500);
}

.page-faq .faq-card__q {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper-100);
}

.page-faq .faq-card--paper .faq-card__q {
  color: var(--ink-950);
}

.page-faq .faq-card .fold__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.page-faq .faq-card .fold__sign::before,
.page-faq .faq-card .fold__sign::after {
  content: "";
  position: absolute;
  background: var(--gold-500);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-faq .faq-card .fold__sign::before {
  left: 0;
  top: 7px;
  width: 16px;
  height: 1px;
}

.page-faq .faq-card .fold__sign::after {
  left: 7px;
  top: 0;
  width: 1px;
  height: 16px;
}

.page-faq .faq-card[data-open="true"] .fold__sign::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-faq .faq-card .fold__body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-600);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--faq-body);
}

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

.page-faq .faq-card--paper .fold__body {
  border-top-color: var(--paper-200);
  color: #4A4130;
}

.page-faq .faq-card .fold__body p {
  margin: 0;
}

/* ---------- 活动规则时间线 ---------- */
.page-faq .faq-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.6vw, 48px);
  margin-top: clamp(30px, 4.2vw, 52px);
}

.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .faq-steps .steps__item {
  display: grid;
  grid-template-columns: clamp(44px, 8vw, 68px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line-600);
}

.page-faq .faq-steps .steps__item:last-child {
  border-bottom: 1px solid var(--line-600);
}

.page-faq .faq-steps .steps__index {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  line-height: 1;
  color: var(--line-600);
  transition: color 0.25s ease;
}

.page-faq .faq-steps .steps__item:hover .steps__index {
  color: var(--cyan-400);
}

.page-faq .faq-steps .steps__body h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper-100);
}

.page-faq .faq-steps .steps__body p {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-body);
}

.page-faq .faq-flag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--magenta-500);
  color: var(--magenta-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  vertical-align: middle;
}

.page-faq .faq-timeline__media {
  margin: 0;
  align-self: start;
}

/* ---------- 记录查询 ---------- */
.page-faq .lookup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-faq .lookup-item {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border: 1px solid var(--line-600);
  border-top: 2px solid var(--cyan-400);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-faq .lookup-item:hover {
  border-color: var(--cyan-400);
  transform: translateY(-3px);
}

.page-faq .lookup-item__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan-400);
}

.page-faq .lookup-item h3 {
  margin: 12px 0 0;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-100);
}

.page-faq .lookup-item > p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--faq-body);
}

.page-faq .lookup-item dl {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-600);
}

.page-faq .lookup-item dl > div + div {
  margin-top: 14px;
}

.page-faq .lookup-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-faq .lookup-item dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--faq-body);
}

/* ---------- 问题反馈 ---------- */
.page-faq .feedback {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-faq .feedback-flow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .feedback-flow li {
  display: grid;
  grid-template-columns: clamp(56px, 10vw, 76px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  padding: 18px 0;
  border-top: 1px solid var(--line-600);
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-body);
}

.page-faq .feedback-flow li:last-child {
  border-bottom: 1px solid var(--line-600);
}

.page-faq .feedback-flow b {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-faq .feedback-side {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  border-left: 3px solid var(--gold-500);
}

.page-faq .feedback-side__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-100);
}

.page-faq .feedback-side__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-600);
  font-size: 14px;
}

.page-faq .feedback-side__key {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gray-400);
}

.page-faq .feedback-side__val {
  color: var(--paper-100);
  text-align: right;
  word-break: break-all;
}

.page-faq .feedback-side__hint {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gray-400);
}

.page-faq .feedback-side__hint a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid var(--line-600);
  transition: border-color 0.2s ease;
}

.page-faq .feedback-side__hint a:hover,
.page-faq .feedback-side__hint a:focus-visible {
  border-bottom-color: var(--cyan-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-grid--2,
  .page-faq .faq-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .lookup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

  .page-faq .feedback {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-timeline {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 480px) {
  .page-faq .feedback-side__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-faq .feedback-side__val {
    text-align: left;
  }

  .page-faq .faq-index__link {
    flex: 1 1 calc(50% - 5px);
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-card,
  .page-faq .faq-index__link,
  .page-faq .lookup-item,
  .page-faq .faq-card .fold__sign::before,
  .page-faq .faq-card .fold__sign::after {
    transition: none;
  }

  .page-faq .faq-card:hover,
  .page-faq .faq-index__link:hover,
  .page-faq .lookup-item:hover {
    transform: none;
  }

  .page-faq .reveal {
    opacity: 1;
    transform: none;
  }
}
<<<END>>>

稍等，最后那个 `<<<END>>>` 不需要，我删掉。

另外确认一下：`.page-faq .reveal` 这个选择器——reveal 是全局类，在页面作用域内覆盖它是可以的。不过我不确定它到底有没有生效，毕竟不知道全局 CSS 里 `.reveal` 具体怎么定义的。如果全局 `.reveal` 本身用了 `opacity:0` 之类的，那这个覆盖就只是把最终状态改回可见，影响不大。

再检查一下整体输出：没有 Markdown 代码围栏，没有解释，`main_html` 和 `page_css` 各出现一次，结构也对。

现在把最后的 `<<<END>>>` 去掉，换成正确的结束标记。
<main id="main-content" class="page-faq">
  <div class="container">

    <nav class="crumbs" aria-label="您所在的位置">
      <a class="crumbs__item" href="/">首页</a>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <span class="crumbs__current">帮助教程</span>
    </nav>

    <header class="faq-hero">
      <p class="eyebrow">帮助教程 · 十二项说明</p>
      <h1>活动怎么约，规则怎么算，记录在哪看</h1>
      <p class="faq-hero__lede">
        第一次走进万能真人会馆，或者隔了一段时间再回来，流程上总有些拿不准的地方。下面按你实际走一遍的顺序，把最常被问到的十二项说明排开，每一条都能单独点开细看。
      </p>
      <nav class="faq-index" aria-label="本页内容索引">
        <a class="faq-index__link" href="#overview"><span>01</span>说明总览</a>
        <a class="faq-index__link" href="#timeline"><span>02</span>活动规则</a>
        <a class="faq-index__link" href="#lookup"><span>03</span>记录查询</a>
        <a class="faq-index__link" href="#feedback"><span>04</span>问题反馈</a>
      </nav>
    </header>

    <section id="overview" class="faq-sec">
      <div class="faq-sec__head reveal">
        <p class="eyebrow">01 · 说明总览</p>
        <h2>十二项说明，按你走一遍的顺序分类</h2>
        <p class="faq-sec__lede">
          预约之前看第一组，到了现场看第二组，活动结束之后看第三组和第四组。每组里的条目都可以单独展开，不用整页翻。
        </p>
      </div>

      <figure class="media-frame media-frame--wide faq-media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深墨背景上层层叠起暖纸色卡片，细线网格把卡片分成四块区域" decoding="async">
        <figcaption class="media-frame__caption">预约与到场、活动规则、记录查询、会员权益四组说明分区陈列</figcaption>
      </figure>

      <div class="faq-group">
        <h3 class="faq-group__title">预约与到场</h3>
        <div class="faq-grid faq-grid--3">

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-01">
              <span class="faq-card__no">01</span>
              <span class="faq-card__q">怎么预约一场体验</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-01">
              <p>说明想参加的主题和大致时段，会员顾问会帮你对应到具体场次。会员专场与主题夜的名额通常先向会员开放，确认后会收到场次信息与到店时间。</p>
            </div>
          </article>

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-02">
              <span class="faq-card__no">02</span>
              <span class="faq-card__q">到场核验需要准备什么</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-02">
              <p>到店后在接待区完成核验，出示预约时用的手机号或会员编号就行。第一次来的访客可以先在静音咨询区坐一会儿，由引导师把流程过一遍再入场。</p>
            </div>
          </article>

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-03">
              <span class="faq-card__no">03</span>
              <span class="faq-card__q">临时改期或不来怎么处理</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-03">
              <p>计划有变，尽量在活动当天之前告知。同一类型的场次通常可以挪到后面更合适的时间；已经完成记录归档的场次再重新安排，就按新场次的名额来算。</p>
            </div>
          </article>

        </div>
      </div>

      <div class="faq-group">
        <h3 class="faq-group__title faq-group__title--key">活动规则</h3>
        <div class="faq-grid faq-grid--2">

          <article class="fold faq-card faq-card--paper" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-04">
              <span class="faq-card__no">04</span>
              <span class="faq-card__q">一场活动分几个阶段</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-04">
              <p>预约、到场核验、体验、记录归档，四个阶段各自有对应的确认动作。前一步确认清楚了，后一步就不会卡住，也不会出现到了现场才发现信息对不上的情况。</p>
            </div>
          </article>

          <article class="fold faq-card faq-card--paper" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-05">
              <span class="faq-card__no">05</span>
              <span class="faq-card__q">主题夜与会员专场怎么参加</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-05">
              <p>会馆每年举办约 120 场主题活动，包括主题夜、会员专场和合作空间联动。主题夜偏向开放交流，气氛热闹；会员专场人数更少、节奏更从容，名额也放得更早。</p>
            </div>
          </article>

          <article class="fold faq-card faq-card--paper" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-06">
              <span class="faq-card__no">06</span>
              <span class="faq-card__q">合作空间联动怎么使用</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-06">
              <p>会馆与 12 家本地酒店、餐饮和文化空间建立合作。参加完活动后，凭当次记录即可享受对应的联动服务，具体内容以现场说明为准。</p>
            </div>
          </article>

          <article class="fold faq-card faq-card--paper" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-07">
              <span class="faq-card__no">07</span>
              <span class="faq-card__q">静音咨询区适合什么情况</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-07">
              <p>馆内设有 2 个静音咨询区。会员权益、记录疑问、合作洽谈这类需要安静聊的事情，都可以约在这里，不必挤在体验厅里说。</p>
            </div>
          </article>

        </div>
        <p class="faq-note">这一组讲的是万能真人活动规则里最容易被反复确认的部分：阶段怎么划分、名额怎么放、现场秩序怎么维持。看完仍有疑问，可以在下方提交给会员顾问。</p>
      </div>

      <div class="faq-group">
        <h3 class="faq-group__title">记录查询</h3>
        <div class="faq-grid faq-grid--3">

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-08">
              <span class="faq-card__no">08</span>
              <span class="faq-card__q">按会员编号查询</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-08">
              <p>记得注册时的会员编号，输入后就能定位到全部参与记录，包括较早的历史场次。</p>
            </div>
          </article>

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-09">
              <span class="faq-card__no">09</span>
              <span class="faq-card__q">按活动场次查询</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-09">
              <p>记得参加了哪一场、但记不清编号时，用场次定位更省事。场次号印在当次的活动确认信息上，翻一下就能找到。</p>
            </div>
          </article>

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-10">
              <span class="faq-card__no">10</span>
              <span class="faq-card__q">按参与时段查询</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-10">
              <p>只记得大概哪天来的，就给一个时间段，落在范围内的记录会一并列出来，再按场次逐个确认。</p>
            </div>
          </article>

        </div>
      </div>

      <div class="faq-group">
        <h3 class="faq-group__title">会员权益</h3>
        <div class="faq-grid faq-grid--2">

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-11">
              <span class="faq-card__no">11</span>
              <span class="faq-card__q">会员专场与优先安排</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-11">
              <p>会员专场的人数更少，预约窗口也更靠前。热门的主题夜通常先向会员开放名额，之后才逐步放出剩余位置。</p>
            </div>
          </article>

          <article class="fold faq-card" data-open="false">
            <button class="fold__head" type="button" data-fold-toggle aria-expanded="false" aria-controls="faq-12">
              <span class="faq-card__no">12</span>
              <span class="faq-card__q">记录归档与个人资料更新</span>
              <span class="fold__sign" aria-hidden="true"></span>
            </button>
            <div class="fold__body" id="faq-12">
              <p>每次活动结束后，参与记录会归入你的会员档案。换过联系方式、想补充资料，在帮助栏目里说一声就能更新，会员顾问会同步到后续的场次通知里。</p>
            </div>
          </article>

        </div>
      </div>
    </section>

    <section id="timeline" class="faq-sec">
      <div class="faq-sec__head reveal">
        <p class="eyebrow">02 · 活动规则</p>
        <h2>从预约到归档，规则落在四个节点上</h2>
        <p class="faq-sec__lede">
          很多人卡住不是因为规则复杂，而是不知道下一步该确认什么。按这四个节点走，每一步都会有明确的回执。
        </p>
      </div>

      <div class="faq-timeline">
        <ol class="steps faq-steps">
          <li class="steps__item">
            <span class="steps__index">01</span>
            <div class="steps__body">
              <h3>预约</h3>
              <p>确认主题、时段与人数，收到场次信息。名额从这一刻起为你保留，后续的改期也从这一步开始算。</p>
            </div>
          </li>
          <li class="steps__item">
            <span class="steps__index">02</span>
            <div class="steps__body">
              <h3>到场核验<span class="faq-flag">关键节点</span></h3>
              <p>到店后在接待区核对预约信息，领取当次场次标识。建议留出一点缓冲时间，避免因为路上耽误影响入场顺序。</p>
            </div>
          </li>
          <li class="steps__item">
            <span class="steps__index">03</span>
            <div class="steps__body">
              <h3>体验</h3>
              <p>由体验引导师带你进入主题体验厅，全程有工作人员在场。需要单独沟通的事情，可以转到静音咨询区继续谈。</p>
            </div>
          </li>
          <li class="steps__item">
            <span class="steps__index">04</span>
            <div class="steps__body">
              <h3>记录归档<span class="faq-flag">关键节点</span></h3>
              <p>活动结束后，参与记录归入会员档案。之后用编号、场次或时段任意一种方式，都能把这一场翻出来。</p>
            </div>
          </li>
        </ol>

        <figure class="media-frame media-frame--wide faq-timeline__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="四个抽象步骤节点沿光带依次排开，暗金线条与霓虹青光晕勾勒连接关系">
          <figcaption class="media-frame__caption">四个节点依次衔接，每个节点都有对应的确认动作</figcaption>
        </figure>
      </div>
    </section>

    <section id="lookup" class="faq-sec">
      <div class="faq-sec__head reveal">
        <p class="eyebrow">03 · 记录查询</p>
        <h2>手头有什么线索，就用哪种查法</h2>
        <p class="faq-sec__lede">
          三种方式指向同一份记录，区别只在于你先想起了哪条信息。记不清的时候，换一种线索往往更快。
        </p>
      </div>

      <div class="lookup-grid">

        <article class="lookup-item">
          <span class="lookup-item__no">A</span>
          <h3>按会员编号</h3>
          <p>最直接的一种。编号跟着你走，所有场次一次全出来。</p>
          <dl>
            <div>
              <dt>需要准备</dt>
              <dd>注册时分配到的会员编号</dd>
            </div>
            <div>
              <dt>适合场景</dt>
              <dd>想一次性看完自己的全部参与记录</dd>
            </div>
          </dl>
        </article>

        <article class="lookup-item">
          <span class="lookup-item__no">B</span>
          <h3>按活动场次</h3>
          <p>记得是哪一场，但编号一时想不起来，用场次定位最省事。</p>
          <dl>
            <div>
              <dt>需要准备</dt>
              <dd>当次活动确认信息上的场次号</dd>
            </div>
            <div>
              <dt>适合场景</dt>
              <dd>核对某一场的具体安排或到场时间</dd>
            </div>
          </dl>
        </article>

        <article class="lookup-item">
          <span class="lookup-item__no">C</span>
          <h3>按参与时段</h3>
          <p>只记得大概哪天来的，就给一个时间段，系统把范围内的记录列出来。</p>
          <dl>
            <div>
              <dt>需要准备</dt>
              <dd>大致的时间范围，前后放宽几天更好找</dd>
            </div>
            <div>
              <dt>适合场景</dt>
              <dd>回忆不起来具体场次，只知道大概日期</dd>
            </div>
          </dl>
        </article>

      </div>

      <p class="faq-note faq-note--tight">
        如果三种方式都没找到你要的那一条，把当时的大致情况和能想起来的细节一起提交，会员顾问会从场务侧再核一遍。这条路径的入口就在下面。
      </p>
    </section>

    <section id="feedback" class="faq-sec">
      <div class="faq-sec__head reveal">
        <p class="eyebrow">04 · 问题反馈</p>
        <h2>没找到答案，交给我们接着跟</h2>
        <p class="faq-sec__lede">
          提交之后不需要反复催问，进展和结果都留在同一个地方，随时能回来查看。
        </p>
      </div>

      <div class="feedback">
        <div class="feedback__main">
          <ol class="feedback-flow">
            <li>
              <b>提交</b>
              <span>在帮助栏目内写下你的问题。附上会员编号或活动场次，能省掉来回确认的时间。</span>
            </li>
            <li>
              <b>跟进</b>
              <span>会员顾问会核对活动场次与参与记录，涉及现场安排的，再与场务团队确认一次。</span>
            </li>
            <li>
              <b>查看</b>
              <span>处理进展回到帮助栏目继续看，结论也会同步进你的会员档案里。</span>
            </li>
          </ol>
        </div>

        <aside class="feedback-side">
          <h3 class="feedback-side__title">需要人工沟通</h3>
          <div class="feedback-side__row">
            <span class="feedback-side__key">电话</span>
            <span class="feedback-side__val">18882013054</span>
          </div>
          <div class="feedback-side__row">
            <span class="feedback-side__key">邮箱</span>
            <span class="feedback-side__val">service@wanneng-omni.com.cn</span>
          </div>
          <p class="feedback-side__hint">
            活动规则与记录查询相关的问题，优先通过帮助栏目提交，便于和你的会员档案对应起来。到访地址、服务地区与更多联系方式，可前往<a href="/contact/">联系我们</a>查看。
          </p>
          <p class="feedback-side__hint">
            对内容使用方式有疑问，请先阅读<a href="/terms-of-use/">使用条款</a>。
          </p>
        </aside>
      </div>
    </section>

  </div>
</main>

.page-faq {
  --faq-pad: clamp(18px, 2.2vw, 28px);
  --faq-edge: 1px solid var(--line-600);
  --faq-body: var(--paper-200);
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-faq .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: clamp(20px, 3.4vw, 34px) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}

.page-faq .crumbs__item {
  color: var(--gray-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-faq .crumbs__item:hover,
.page-faq .crumbs__item:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

.page-faq .crumbs__sep {
  color: var(--line-600);
}

.page-faq .crumbs__current {
  color: var(--gold-500);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: clamp(26px, 5vw, 64px) 0 clamp(26px, 4.4vw, 52px);
  border-bottom: var(--faq-edge);
}

.page-faq .faq-hero h1 {
  margin: 20px 0 0;
  max-width: 19ch;
  font-size: clamp(30px, 6.2vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper-100);
}

.page-faq .faq-hero h1::after {
  content: "";
  display: block;
  width: clamp(52px, 8vw, 96px);
  height: 3px;
  margin-top: clamp(18px, 2.6vw, 28px);
  background: linear-gradient(90deg, var(--gold-500), var(--magenta-500));
}

.page-faq .faq-hero__lede {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--faq-body);
}

/* ---------- 页内索引 ---------- */
.page-faq .faq-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3.4vw, 38px);
}

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  color: var(--paper-200);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.page-faq .faq-index__link span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-500);
  transition: color 0.2s ease;
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  border-color: var(--cyan-400);
  background: var(--ink-800);
  color: var(--cyan-400);
  transform: translateY(-2px);
}

.page-faq .faq-index__link:hover span,
.page-faq .faq-index__link:focus-visible span {
  color: var(--cyan-400);
}

/* ---------- 通用章节 ---------- */
.page-faq .faq-sec {
  padding: clamp(44px, 7vw, 96px) 0;
  border-bottom: var(--faq-edge);
  scroll-margin-top: calc(var(--head-h) + 18px);
}

.page-faq .faq-sec:last-of-type {
  border-bottom: 0;
}

.page-faq .faq-sec__head {
  max-width: 72ch;
}

.page-faq .faq-sec__head h2 {
  margin: 16px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--paper-100);
}

.page-faq .faq-sec__lede {
  margin: 18px 0 0;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--faq-body);
}

/* ---------- 配图 ---------- */
.page-faq .faq-media {
  margin: clamp(26px, 4vw, 46px) 0 0;
}

.page-faq .faq-media img,
.page-faq .faq-timeline__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line-600);
}

.page-faq .faq-media .media-frame__caption,
.page-faq .faq-timeline__media .media-frame__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}

/* ---------- 说明分组 ---------- */
.page-faq .faq-group {
  margin-top: clamp(34px, 4.8vw, 62px);
}

.page-faq .faq-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-500);
}

.page-faq .faq-group__title::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--gold-500);
}

.page-faq .faq-group__title--key {
  color: var(--magenta-500);
}

.page-faq .faq-group__title--key::before {
  background: var(--magenta-500);
}

.page-faq .faq-note {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold-500);
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--gray-400);
}

.page-faq .faq-note--tight {
  border-left-color: var(--cyan-400);
}

/* ---------- 卡片网格 ---------- */
.page-faq .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}

/* ---------- 折叠卡片 ---------- */
.page-faq .faq-card {
  position: relative;
  padding: var(--faq-pad);
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.page-faq .faq-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.page-faq .faq-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-3px);
}

.page-faq .faq-card:hover::before {
  border-top-color: var(--cyan-400);
  border-left-color: var(--cyan-400);
}

.page-faq .faq-card[data-open="true"] {
  border-color: var(--cyan-400);
  background: var(--ink-800);
}

.page-faq .faq-card--paper {
  background: var(--paper-100);
  border-color: var(--paper-200);
}

.page-faq .faq-card--paper:hover {
  border-color: var(--gold-500);
}

.page-faq .faq-card--paper[data-open="true"] {
  border-color: var(--gold-500);
  background: var(--paper-200);
}

.page-faq .faq-card .fold__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-faq .faq-card .fold__head:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
}

.page-faq .faq-card__no {
  flex: none;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--gold-500);
}

.page-faq .faq-card--paper .faq-card__no {
  color: var(--magenta-500);
}

.page-faq .faq-card__q {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper-100);
}

.page-faq .faq-card--paper .faq-card__q {
  color: var(--ink-950);
}

.page-faq .faq-card .fold__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.page-faq .faq-card .fold__sign::before,
.page-faq .faq-card .fold__sign::after {
  content: "";
  position: absolute;
  background: var(--gold-500);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-faq .faq-card .fold__sign::before {
  left: 0;
  top: 7px;
  width: 16px;
  height: 1px;
}

.page-faq .faq-card .fold__sign::after {
  left: 7px;
  top: 0;
  width: 1px;
  height: 16px;
}

.page-faq .faq-card[data-open="true"] .fold__sign::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-faq .faq-card .fold__body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-600);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--faq-body);
}

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

.page-faq .faq-card--paper .fold__body {
  border-top-color: var(--paper-200);
  color: #4A4130;
}

.page-faq .faq-card .fold__body p {
  margin: 0;
}

/* ---------- 活动规则时间线 ---------- */
.page-faq .faq-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.6vw, 48px);
  margin-top: clamp(30px, 4.2vw, 52px);
}

.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .faq-steps .steps__item {
  display: grid;
  grid-template-columns: clamp(44px, 8vw, 68px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line-600);
}

.page-faq .faq-steps .steps__item:last-child {
  border-bottom: 1px solid var(--line-600);
}

.page-faq .faq-steps .steps__index {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  line-height: 1;
  color: var(--line-600);
  transition: color 0.25s ease;
}

.page-faq .faq-steps .steps__item:hover .steps__index {
  color: var(--cyan-400);
}

.page-faq .faq-steps .steps__body h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper-100);
}

.page-faq .faq-steps .steps__body p {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-body);
}

.page-faq .faq-flag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--magenta-500);
  color: var(--magenta-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  vertical-align: middle;
}

.page-faq .faq-timeline__media {
  margin: 0;
  align-self: start;
}

/* ---------- 记录查询 ---------- */
.page-faq .lookup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-faq .lookup-item {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border: 1px solid var(--line-600);
  border-top: 2px solid var(--cyan-400);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-faq .lookup-item:hover {
  border-color: var(--cyan-400);
  transform: translateY(-3px);
}

.page-faq .lookup-item__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan-400);
}

.page-faq .lookup-item h3 {
  margin: 12px 0 0;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-100);
}

.page-faq .lookup-item > p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--faq-body);
}

.page-faq .lookup-item dl {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-600);
}

.page-faq .lookup-item dl > div + div {
  margin-top: 14px;
}

.page-faq .lookup-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-faq .lookup-item dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--faq-body);
}

/* ---------- 问题反馈 ---------- */
.page-faq .feedback {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-faq .feedback-flow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .feedback-flow li {
  display: grid;
  grid-template-columns: clamp(56px, 10vw, 76px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  padding: 18px 0;
  border-top: 1px solid var(--line-600);
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-body);
}

.page-faq .feedback-flow li:last-child {
  border-bottom: 1px solid var(--line-600);
}

.page-faq .feedback-flow b {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-faq .feedback-side {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  border-left: 3px solid var(--gold-500);
}

.page-faq .feedback-side__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-100);
}

.page-faq .feedback-side__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-600);
  font-size: 14px;
}

.page-faq .feedback-side__key {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gray-400);
}

.page-faq .feedback-side__val {
  color: var(--paper-100);
  text-align: right;
  word-break: break-all;
}

.page-faq .feedback-side__hint {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gray-400);
}

.page-faq .feedback-side__hint a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid var(--line-600);
  transition: border-color 0.2s ease;
}

.page-faq .feedback-side__hint a:hover,
.page-faq .feedback-side__hint a:focus-visible {
  border-bottom-color: var(--cyan-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-grid--2,
  .page-faq .faq-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .lookup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

  .page-faq .feedback {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-timeline {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 480px) {
  .page-faq .feedback-side__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-faq .feedback-side__val {
    text-align: left;
  }

  .page-faq .faq-index__link {
    flex: 1 1 calc(50% - 5px);
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-card,
  .page-faq .faq-index__link,
  .page-faq .lookup-item,
  .page-faq .faq-card .fold__sign::before,
  .page-faq .faq-card .fold__sign::after {
    transition: none;
  }

  .page-faq .faq-card:hover,
  .page-faq .faq-index__link:hover,
  .page-faq .lookup-item:hover {
    transform: none;
  }

  .page-faq .reveal {
    opacity: 1;
    transform: none;
  }
}