.page-faq {
  --faq-gap: clamp(28px, 5vw, 56px);
  background: var(--sky-paper);
  color: var(--sky-ink);
  font-family: var(--sky-font-body);
}

.page-faq .sky-crumbs a {
  color: var(--sky-ink-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--sky-ease), color .18s var(--sky-ease);
}

.page-faq .sky-crumbs a:hover,
.page-faq .sky-crumbs a:focus-visible {
  color: var(--sky-teal-deep);
  border-bottom-color: var(--sky-teal);
}

/* 首屏 */
.page-faq__hero {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  padding: clamp(18px, 4vw, 40px) 0 clamp(30px, 5vw, 56px);
  border-bottom: 1px solid var(--sky-line);
}

.page-faq__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky-gold);
}

.page-faq__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sky-gold);
}

.page-faq h1 {
  margin: 14px 0 0;
  font-family: var(--sky-font-title);
  font-weight: 900;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.16;
  letter-spacing: .03em;
  color: var(--sky-ink-blue);
}

.page-faq__lede {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(36, 28, 21, .88);
}

.page-faq__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sky-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--sky-ink-blue);
}

.page-faq__meta li {
  position: relative;
  padding-left: 14px;
}

.page-faq__meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-gold-soft);
}

.page-faq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq__hero-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sky-line-gold);
  border-radius: calc(var(--sky-radius) + 8px);
  background: var(--sky-card);
}

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

/* 类别 */
.page-faq__cats {
  padding: var(--faq-gap) 0 0;
}

.page-faq__section-head {
  max-width: 46em;
}

.page-faq__section-title {
  margin: 0;
  font-family: var(--sky-font-title);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--sky-ink-blue);
}

.page-faq__section-desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(36, 28, 21, .78);
}

.page-faq__cats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.page-faq__cat {
  position: relative;
  display: block;
  padding: 18px 16px 16px;
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-radius);
  background: var(--sky-card);
  color: inherit;
  text-decoration: none;
  transition: transform .18s var(--sky-ease), border-color .18s var(--sky-ease);
}

.page-faq__cat::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: var(--sky-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--sky-ease);
}

.page-faq__cat:hover,
.page-faq__cat:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sky-line-gold);
}

.page-faq__cat:hover::after,
.page-faq__cat:focus-visible::after {
  transform: scaleX(1);
}

.page-faq__cat:focus-visible {
  outline: 2px solid var(--sky-teal);
  outline-offset: 2px;
}

.page-faq__cat-count {
  display: block;
  font-family: var(--sky-font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--sky-ink-blue);
}

.page-faq__cat-count span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(36, 28, 21, .6);
}

.page-faq__cat-name {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sky-ink-blue);
}

.page-faq__cat-desc {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(36, 28, 21, .72);
}

.page-faq__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--sky-line);
}

.page-faq__quick-label {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-rust);
}

.page-faq__quick-link {
  font-size: 14px;
  color: var(--sky-ink-blue);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--sky-line-gold);
  transition: color .18s var(--sky-ease), border-color .18s var(--sky-ease);
}

.page-faq__quick-link:hover,
.page-faq__quick-link:focus-visible {
  color: var(--sky-teal-deep);
  border-bottom-color: var(--sky-teal);
}

/* 主区域：轨道 + 折叠册页 */
.page-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 80px);
}

.page-faq__content {
  min-width: 0;
}

.page-faq__group {
  scroll-margin-top: 96px;
}

.page-faq__group + .page-faq__group {
  margin-top: clamp(30px, 4.5vw, 52px);
}

.page-faq__group-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 14px 0 10px;
  background: var(--sky-paper);
  box-shadow: 0 1px 0 0 rgba(217, 164, 65, .55), 0 6px 12px -10px rgba(14, 27, 54, .35);
}

.page-faq__group-title {
  margin: 0;
  font-family: var(--sky-font-title);
  font-size: clamp(19px, 3.2vw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--sky-ink-blue);
}

.page-faq__group-count {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--sky-rust);
}

.page-faq__q {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  scroll-margin-top: 110px;
}

/* 折叠项 */
.page-faq .sky-panel {
  position: relative;
  border-bottom: 1px solid var(--sky-line);
}

.page-faq .sky-panel__trigger {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 17px 8px 17px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sky-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  color: var(--sky-ink);
  cursor: pointer;
  transition: background-color .18s var(--sky-ease), color .18s var(--sky-ease);
}

.page-faq .sky-panel__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 3px;
  border-radius: 2px;
  background: var(--sky-rust);
  opacity: 0;
  transition: opacity .18s var(--sky-ease);
}

.page-faq .sky-panel__trigger[aria-expanded="true"]::before {
  opacity: 1;
}

.page-faq .sky-panel__trigger:hover {
  background: var(--sky-parchment);
  color: var(--sky-ink-blue);
}

.page-faq .sky-panel__trigger:focus-visible {
  outline: 2px solid var(--sky-teal);
  outline-offset: -2px;
}

.page-faq__chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-right: 2px solid var(--sky-gold);
  border-bottom: 2px solid var(--sky-gold);
  transform: rotate(45deg);
  transition: transform .2s var(--sky-ease), border-color .2s var(--sky-ease);
}

.page-faq .sky-panel__trigger[aria-expanded="true"] .page-faq__chev {
  transform: rotate(-135deg);
  border-color: var(--sky-rust);
}

.page-faq .sky-panel__inner {
  padding: 0 16px 20px 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(36, 28, 21, .86);
}

.page-faq .sky-panel__inner p {
  margin: 0 0 10px;
  max-width: 40em;
}

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

.page-faq .sky-panel__inner a {
  color: var(--sky-teal-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 158, 138, .45);
  transition: border-color .18s var(--sky-ease);
}

.page-faq .sky-panel__inner a:hover,
.page-faq .sky-panel__inner a:focus-visible {
  border-bottom-color: var(--sky-teal);
}

/* 规则查询路径 */
.page-faq__steps {
  margin-top: 26px;
  padding: 20px 16px;
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-radius);
  background: var(--sky-card);
}

.page-faq__steps-svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-faq .faq-track {
  stroke: var(--sky-line-gold);
  stroke-width: 2;
  stroke-dasharray: 7 9;
}

.page-faq .faq-node {
  fill: var(--sky-card);
  stroke: var(--sky-gold);
  stroke-width: 2;
}

.page-faq .faq-node-label {
  fill: var(--sky-ink-blue);
  font-family: var(--sky-font-mono);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.page-faq .faq-arrow {
  fill: var(--sky-rust);
}

.page-faq__steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq__step {
  padding-left: 12px;
  border-left: 2px solid var(--sky-gold-soft);
}

.page-faq__step-num {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-gold);
}

.page-faq__step-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sky-ink-blue);
}

.page-faq__step-desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(36, 28, 21, .74);
}

.page-faq__steps-figure {
  margin: 20px 0 0;
  overflow: hidden;
  border-radius: var(--sky-radius);
}

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

/* 收束区 */
.page-faq__support {
  margin: 0 0 clamp(40px, 6vw, 80px);
  padding: clamp(26px, 5vw, 52px) clamp(20px, 4vw, 48px);
  border-radius: calc(var(--sky-radius) + 8px);
  background:
    radial-gradient(120% 140% at 8% 0%, #1B2E55 0%, #0E1B36 56%, #0B1528 100%);
  color: var(--sky-cream-text);
}

.page-faq__support .page-faq__section-title {
  color: var(--sky-card);
  max-width: 22em;
}

.page-faq__support-note {
  max-width: 40em;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(247, 242, 232, .8);
}

.page-faq__support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

.page-faq__support-item {
  padding-top: 12px;
  border-top: 1px solid rgba(217, 164, 65, .4);
}

.page-faq__support-label {
  display: block;
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-gold);
}

.page-faq__support-value {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--sky-card);
  word-break: break-word;
}

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

.page-faq__support .sky-btn--ghost {
  border-color: rgba(247, 242, 232, .45);
  color: var(--sky-card);
}

.page-faq__support .sky-btn--ghost:hover,
.page-faq__support .sky-btn--ghost:focus-visible {
  border-color: var(--sky-gold);
  color: var(--sky-gold-soft);
}

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

  .page-faq__support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
  }
}

@media (min-width: 900px) {
  .page-faq__hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
  }

  .page-faq__layout {
    grid-template-columns: var(--sky-rail) minmax(0, 1fr);
    gap: clamp(26px, 3vw, 48px);
    align-items: start;
  }

  .page-faq .sky-rail {
    position: sticky;
    top: 18px;
    align-self: start;
  }

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

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

  .page-faq .sky-panel__trigger {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-faq .sky-panel__inner {
    padding-right: 24px;
    padding-left: 20px;
  }
}

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


<main id="main-content" class="page-faq">
  <div class="sky-shell">
    <nav class="sky-crumbs" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="sky-crumbs__sep" aria-hidden="true">/</span>
      <span class="sky-crumbs__current" aria-current="page">答疑中心</span>
    </nav>

    <section class="page-faq__hero">
      <div class="page-faq__hero-copy">
        <p class="page-faq__kicker">Answers / 答疑中心</p>
        <h1>规则查不到、记录看不到，先从这一页翻起</h1>
        <p class="page-faq__lede">云顶娱乐的答疑中心把 86 条常见问题按五个类别归好。想查一项活动当前的规则，可以从首页左侧的分类标签逐项展开，规则原文和生效日期写在同一张条目上；设备、记录、版本上的小麻烦，也能在这里先自助解决。</p>
        <ul class="page-faq__meta">
          <li>五类共 86 条</li>
          <li>点开即看，答完即合</li>
          <li>人工协助 工作日 9:00–18:00</li>
        </ul>
        <div class="page-faq__actions">
          <a class="sky-btn sky-btn--primary" href="#category-index">按类别开始查</a>
          <a class="sky-btn sky-btn--ghost" href="/contact/">直接找人处理</a>
        </div>
      </div>
      <figure class="sky-figure page-faq__hero-figure">
        <div class="sky-figure__media">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="层叠展开的抽象纸页轮廓浮在柔和云层之上，像一册被翻开的问答集">
        </div>
        <figcaption class="sky-figure__caption">一层一类问题，翻到哪里都清楚</figcaption>
      </figure>
    </section>

    <section class="page-faq__cats" id="category-index" aria-labelledby="faq-cats-title">
      <div class="page-faq__section-head">
        <h2 class="page-faq__section-title" id="faq-cats-title">先认类别，再翻问题</h2>
        <p class="page-faq__section-desc">五个类别按提问频次排布，越靠前越常遇到。点开任一类，就直接落到对应的问题清单。</p>
      </div>

      <div class="page-faq__cats-grid">
        <a class="page-faq__cat" href="#rules">
          <span class="page-faq__cat-count">24<span>条</span></span>
          <span class="page-faq__cat-name">活动规则查询</span>
          <span class="page-faq__cat-desc">规则原文、生效日期、历史版本对照</span>
        </a>
        <a class="page-faq__cat" href="#start">
          <span class="page-faq__cat-count">18<span>条</span></span>
          <span class="page-faq__cat-name">账号与基础设置</span>
          <span class="page-faq__cat-desc">首次访问的三步设置与常见卡点</span>
        </a>
        <a class="page-faq__cat" href="#records">
          <span class="page-faq__cat-count">16<span>条</span></span>
          <span class="page-faq__cat-name">移动端记录查看</span>
          <span class="page-faq__cat-desc">记录找不到、筛选无结果、标签对不上</span>
        </a>
        <a class="page-faq__cat" href="#versions">
          <span class="page-faq__cat-count">15<span>条</span></span>
          <span class="page-faq__cat-name">版本与更新</span>
          <span class="page-faq__cat-desc">两个版本的区别与更新日志位置</span>
        </a>
        <a class="page-faq__cat" href="#support">
          <span class="page-faq__cat-count">13<span>条</span></span>
          <span class="page-faq__cat-name">工单与客服通道</span>
          <span class="page-faq__cat-desc">怎么找人、写什么、多久有回音</span>
        </a>
      </div>

      <div class="page-faq__quick">
        <span class="page-faq__quick-label">问得最多</span>
        <a class="page-faq__quick-link" href="#q-rules-1">活动规则在哪儿看</a>
        <a class="page-faq__quick-link" href="#q-records-1">手机上找不到记录</a>
        <a class="page-faq__quick-link" href="#q-versions-1">两个版本差在哪</a>
      </div>
    </section>
  </div>

  <div class="sky-shell">
    <div class="sky-layout page-faq__layout">
      <aside class="sky-rail" data-rail aria-label="答疑类别">
        <p class="sky-rail__head">问题分类</p>
        <ul class="sky-rail__list">
          <li><a class="sky-rail__link" href="#rules" data-index="01">活动规则查询</a></li>
          <li><a class="sky-rail__link" href="#start" data-index="02">账号与基础设置</a></li>
          <li><a class="sky-rail__link" href="#records" data-index="03">移动端记录查看</a></li>
          <li><a class="sky-rail__link" href="#versions" data-index="04">版本与更新</a></li>
          <li><a class="sky-rail__link" href="#support" data-index="05">工单与客服通道</a></li>
        </ul>
      </aside>

      <div class="page-faq__content" data-accordion="single">

        <section class="page-faq__group" id="rules" aria-labelledby="rules-title">
          <div class="page-faq__group-head">
            <h2 class="page-faq__group-title" id="rules-title">活动规则查询</h2>
            <span class="page-faq__group-count">24 条</span>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-rules-1">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-rules-1">
                <span>在哪里能查到某个活动当前的规则？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-rules-1" data-accordion-panel role="region" aria-labelledby="q-rules-1">
              <div class="sky-panel__inner">
                <p>打开<a href="/">首页</a>后看左侧的分类标签区，活动所属的类别逐项展开，就能看到对应的规则条目。条目顶部写着生效日期与版本号，正文按参与条件、执行方式、结束处理分段排列，从上往下读一遍，基本能判断自己是否符合。</p>
                <p>若只记得活动的大致方向，可到<a href="/tools/">工具中心</a>用标签检索把范围缩小，再回到条目里逐字确认。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-rules-2">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-rules-2">
                <span>规则调整以后，旧的说法还能对照吗？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-rules-2" data-accordion-panel role="region" aria-labelledby="q-rules-2">
              <div class="sky-panel__inner">
                <p>能。规则变更时保留最近 12 个月的历史版本，同一活动的新旧文本按生效日期先后排列。您可以先看当前有效的一份，再回看旧版，改动之处一目了然。</p>
                <p><a href="/information/">资讯中心</a>的规则解读会把调整点单列成段，配合版本号一起看，比逐句比对省事得多。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-rules-3">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-rules-3">
                <span>怎么确认自己看到的是最新一版？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-rules-3" data-accordion-panel role="region" aria-labelledby="q-rules-3">
              <div class="sky-panel__inner">
                <p>看条目顶部的生效日期即可判断：日期最晚的一条就是当前有效版本。页面上的版本标识与资讯中心的更新日志同步，两处写法一致。</p>
                <p>万一两边显示对不上，把活动名称和您看到的版本号发到客服邮箱，工作日内我们会回信说明处理结果。</p>
              </div>
            </div>
          </div>

          <div class="page-faq__steps">
            <svg class="page-faq__steps-svg" viewBox="0 0 720 130" aria-hidden="true" focusable="false">
              <line class="faq-track" x1="100" y1="46" x2="620" y2="46" />
              <circle class="faq-node" cx="100" cy="46" r="24" />
              <circle class="faq-node" cx="360" cy="46" r="24" />
              <circle class="faq-node" cx="620" cy="46" r="24" />
              <text class="faq-node-label" x="100" y="53">01</text>
              <text class="faq-node-label" x="360" y="53">02</text>
              <text class="faq-node-label" x="620" y="53">03</text>
              <path class="faq-arrow" d="M228 38 L250 46 L228 54 Z" />
              <path class="faq-arrow" d="M488 38 L510 46 L488 54 Z" />
            </svg>
            <ol class="page-faq__steps-list">
              <li class="page-faq__step">
                <span class="page-faq__step-num">STEP 01</span>
                <p class="page-faq__step-title">从首页左侧类别出发</p>
                <p class="page-faq__step-desc">活动所在类别点开，标签按统一命名排列。</p>
              </li>
              <li class="page-faq__step">
                <span class="page-faq__step-num">STEP 02</span>
                <p class="page-faq__step-title">定位到具体活动条目</p>
                <p class="page-faq__step-desc">条目按生效日期排序，最新的排在最上面。</p>
              </li>
              <li class="page-faq__step">
                <span class="page-faq__step-num">STEP 03</span>
                <p class="page-faq__step-title">读正文，对日期与版本号</p>
                <p class="page-faq__step-desc">规则文本与生效日期同屏展示，一次看完。</p>
              </li>
            </ol>
            <figure class="sky-figure sky-figure--wide page-faq__steps-figure">
              <div class="sky-figure__media">
                <img src="{zhanqunpic:h:450w:1200}" width="1200" height="450" alt="三个金色节点串联的路径示意，箭头简洁，表现从首页到规则文本的查找顺序" loading="lazy" decoding="async">
              </div>
              <figcaption class="sky-figure__caption">三步之内，从首页走到规则原文</figcaption>
            </figure>
          </div>
        </section>

        <section class="page-faq__group" id="start" aria-labelledby="start-title">
          <div class="page-faq__group-head">
            <h2 class="page-faq__group-title" id="start-title">账号与基础设置</h2>
            <span class="page-faq__group-count">18 条</span>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-start-1">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-start-1">
                <span>第一次访问，要先做哪几步？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-start-1" data-accordion-panel role="region" aria-labelledby="q-start-1">
              <div class="sky-panel__inner">
                <p>首页首屏的「新手指引」把基础设置拆成三步：确认正在使用的设备、勾选常去的栏目、保存偏好。多数人四分钟左右就能走完，中途随时可以退回上一步重来，已填的内容不会丢。</p>
                <p>设置完成后，下次打开会直接落在您选的栏目上，不用每次从头找入口。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-start-2">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-start-2">
                <span>设置到一半页面没反应，怎么办？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-start-2" data-accordion-panel role="region" aria-labelledby="q-start-2">
              <div class="sky-panel__inner">
                <p>先看网络是否稳定，再刷新一次页面。安卓手机建议使用系统自带浏览器或主流浏览器的最近两个大版本，页面在安卓中端机型上的首屏加载约 1.8 秒，多数等待属于网络波动。</p>
                <p>若始终停在同一个画面，把手机型号、系统版本与所在栏目发到客服邮箱，工作日内会有答复。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-start-3">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-start-3">
                <span>手机上的字太小、按钮不好点？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-start-3" data-accordion-panel role="region" aria-labelledby="q-start-3">
              <div class="sky-panel__inner">
                <p>移动适配版针对安卓机型做了 42 项触控与排版优化，列表与折叠面板的点击区域不小于 44 像素，正文字号随屏幕宽度调整。入口按钮都留了足够留白，不必担心误触相邻项。</p>
                <p>如果仍觉得偏小，把手机系统的显示字号调大一档，页面会跟着放大。更多细节见<a href="/instructions/">使用说明</a>。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="page-faq__group" id="records" aria-labelledby="records-title">
          <div class="page-faq__group-head">
            <h2 class="page-faq__group-title" id="records-title">移动端记录查看</h2>
            <span class="page-faq__group-count">16 条</span>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-records-1">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-records-1">
                <span>手机上看不到自己的访问记录？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-records-1" data-accordion-panel role="region" aria-labelledby="q-records-1">
              <div class="sky-panel__inner">
                <p>到<a href="/tools/">工具中心</a>打开记录面板，先确认筛选条件里只勾了时间范围，没有同时叠加标签和版本号，再下拉刷新列表。记录按时间倒序排列，最近一次访问排在最前。</p>
                <p>列表为空时，面板上方会显示当前生效的条件，逐条取消就能把记录找回来。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-records-2">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-records-2">
                <span>筛选之后列表空了，是本来就没有记录吗？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-records-2" data-accordion-panel role="region" aria-labelledby="q-records-2">
              <div class="sky-panel__inner">
                <p>多数情况是条件叠得太紧。分类标签、版本号、栏目这三个维度同时生效，去掉其中一个再筛通常就有结果；想放宽范围，先只留栏目这一项试试。</p>
                <p>工具中心的九个面板操作方式一致，在一个面板里熟悉了筛选，其余几处可以直接上手。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-records-3">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-records-3">
                <span>不同栏目里的标签名字为什么对不上？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-records-3" data-accordion-panel role="region" aria-labelledby="q-records-3">
              <div class="sky-panel__inner">
                <p>全站 24 个分类标签用的是同一套命名，同一含义在资讯、工具、答疑各处写法一致，所以跨栏目检索时能连着用。看到相近但不同的两个名称，多半是版本标签与内容标签混在了一起。</p>
                <p>点开标签旁的说明牌，可以看到它指代的内容类型，再回头筛选就不会绕弯。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="page-faq__group" id="versions" aria-labelledby="versions-title">
          <div class="page-faq__group-head">
            <h2 class="page-faq__group-title" id="versions-title">版本与更新</h2>
            <span class="page-faq__group-count">15 条</span>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-versions-1">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-versions-1">
                <span>稳定版和移动适配版，到底差在哪里？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-versions-1" data-accordion-panel role="region" aria-labelledby="q-versions-1">
              <div class="sky-panel__inner">
                <p>稳定版功能完整，适合在电脑上通读规则与长文；移动适配版面向安卓手机，把列表、筛选和折叠面板重新排过，滚动与点击的响应更跟手。目前已发布 27 个稳定版与 14 个移动适配版。</p>
                <p>两者内容同步更新，差别在呈现方式和操作手感，不在于能查到什么。具体对比可在工具中心并排查看。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-versions-2">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-versions-2">
                <span>更新日志在哪里看，多久出一次？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-versions-2" data-accordion-panel role="region" aria-labelledby="q-versions-2">
              <div class="sky-panel__inner">
                <p><a href="/information/">资讯中心</a>设有版本更新栏目，每周更新 3 至 5 条内容，版本日志按季度归档，回溯时按时间顺序翻阅最省力。</p>
                <p>想弄明白两个版本之间的具体变化，用工具中心的版本对比面板并排看，改动的条目会分列在两侧。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-versions-3">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-versions-3">
                <span>页面上的规则和我印象里的不一样？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-versions-3" data-accordion-panel role="region" aria-labelledby="q-versions-3">
              <div class="sky-panel__inner">
                <p>先看条目顶部的生效日期。规则调整后旧文本会转入历史版本，仍可查阅；如果手上的截图日期早于当前生效日期，两处表述不同属于正常情况。</p>
                <p>仍有疑问，把活动名称和截图时间发到客服邮箱，我们按日期找到对应版本再回复您。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="page-faq__group" id="support" aria-labelledby="support-title">
          <div class="page-faq__group-head">
            <h2 class="page-faq__group-title" id="support-title">工单与客服通道</h2>
            <span class="page-faq__group-count">13 条</span>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-support-1">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-support-1">
                <span>自助没解决，怎么找到人？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-support-1" data-accordion-panel role="region" aria-labelledby="q-support-1">
              <div class="sky-panel__inner">
                <p>「会员权益」页内嵌客服通道入口，点击即可与在线客服建立会话，不用跳到外部应用。也可以直接写客服邮件，工作日 9:00–18:00 内回复。</p>
                <p>经客服通道提交的工单，平均 2 小时内获得首次响应。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-support-2">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-support-2">
                <span>提交工单时写什么，处理会更快？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-support-2" data-accordion-panel role="region" aria-labelledby="q-support-2">
              <div class="sky-panel__inner">
                <p>写清手机型号、系统版本、所在栏目名称和问题出现的大致时间，再附上看到的提示文字或截图。信息越具体，越少来回确认。</p>
                <p>同一个问题只需提交一次，重复提交反而会让处理顺序靠后。</p>
              </div>
            </div>
          </div>

          <div class="sky-panel">
            <h3 class="page-faq__q" id="q-support-3">
              <button class="sky-panel__trigger" type="button" data-accordion-trigger aria-expanded="false" aria-controls="p-support-3">
                <span>合作与媒体的事，该走哪个入口？</span>
                <span class="page-faq__chev" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="sky-panel__body page-faq__answer" id="p-support-3" data-accordion-panel role="region" aria-labelledby="q-support-3">
              <div class="sky-panel__inner">
                <p>在<a href="/contact/">联系我们</a>页面说明合作方向与联络方式，我们按工作时段转给对应同事。内容协作、技术对接与媒体采访都可以从这一处进入。</p>
                <p>已有在办的工单，请在原会话里补充信息，便于客服接着之前的进度处理。</p>
              </div>
            </div>
          </div>
        </section>

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

  <div class="sky-shell">
    <section class="page-faq__support" id="help-now" aria-labelledby="faq-help-title">
      <h2 class="page-faq__section-title" id="faq-help-title">还是没解决？把问题直接交给我们</h2>
      <p class="page-faq__support-note">客服邮箱是官方联络通道，工作日 9:00–18:00 内回复；情况紧急，请从「会员权益」页的客服通道入口提交工单，在线客服会立即接上话。</p>
      <div class="page-faq__support-grid">
        <div class="page-faq__support-item">
          <span class="page-faq__support-label">客服邮箱</span>
          <span class="page-faq__support-value">service@skyland-yunding.com.cn</span>
        </div>
        <div class="page-faq__support-item">
          <span class="page-faq__support-label">联络电话</span>
          <span class="page-faq__support-value">18877429453</span>
        </div>
        <div class="page-faq__support-item">
          <span class="page-faq__support-label">联络地址</span>
          <span class="page-faq__support-value">上海市浦东新区世纪大道88号</span>
        </div>
        <div class="page-faq__support-item">
          <span class="page-faq__support-label">工单与咨询</span>
          <span class="page-faq__support-value">从联系我们页提交，按方向转给对应同事</span>
        </div>
      </div>
      <div class="page-faq__support-actions">
        <a class="sky-btn sky-btn--primary" href="/contact/">前往联系我们</a>
        <a class="sky-btn sky-btn--ghost" href="/instructions/">查看使用说明</a>
      </div>
    </section>
  </div>
</main>

.page-faq {
  --faq-gap: clamp(28px, 5vw, 56px);
  background: var(--sky-paper);
  color: var(--sky-ink);
  font-family: var(--sky-font-body);
}

.page-faq .sky-crumbs a {
  color: var(--sky-ink-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--sky-ease), color .18s var(--sky-ease);
}

.page-faq .sky-crumbs a:hover,
.page-faq .sky-crumbs a:focus-visible {
  color: var(--sky-teal-deep);
  border-bottom-color: var(--sky-teal);
}

/* 首屏 */
.page-faq__hero {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  padding: clamp(18px, 4vw, 40px) 0 clamp(30px, 5vw, 56px);
  border-bottom: 1px solid var(--sky-line);
}

.page-faq__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky-gold);
}

.page-faq__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sky-gold);
}

.page-faq h1 {
  margin: 14px 0 0;
  font-family: var(--sky-font-title);
  font-weight: 900;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.16;
  letter-spacing: .03em;
  color: var(--sky-ink-blue);
}

.page-faq__lede {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(36, 28, 21, .88);
}

.page-faq__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sky-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--sky-ink-blue);
}

.page-faq__meta li {
  position: relative;
  padding-left: 14px;
}

.page-faq__meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-gold-soft);
}

.page-faq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq__hero-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sky-line-gold);
  border-radius: calc(var(--sky-radius) + 8px);
  background: var(--sky-card);
}

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

/* 类别 */
.page-faq__cats {
  padding: var(--faq-gap) 0 0;
}

.page-faq__section-head {
  max-width: 46em;
}

.page-faq__section-title {
  margin: 0;
  font-family: var(--sky-font-title);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--sky-ink-blue);
}

.page-faq__section-desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(36, 28, 21, .78);
}

.page-faq__cats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.page-faq__cat {
  position: relative;
  display: block;
  padding: 18px 16px 16px;
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-radius);
  background: var(--sky-card);
  color: inherit;
  text-decoration: none;
  transition: transform .18s var(--sky-ease), border-color .18s var(--sky-ease);
}

.page-faq__cat::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: var(--sky-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--sky-ease);
}

.page-faq__cat:hover,
.page-faq__cat:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sky-line-gold);
}

.page-faq__cat:hover::after,
.page-faq__cat:focus-visible::after {
  transform: scaleX(1);
}

.page-faq__cat:focus-visible {
  outline: 2px solid var(--sky-teal);
  outline-offset: 2px;
}

.page-faq__cat-count {
  display: block;
  font-family: var(--sky-font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--sky-ink-blue);
}

.page-faq__cat-count span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(36, 28, 21, .6);
}

.page-faq__cat-name {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sky-ink-blue);
}

.page-faq__cat-desc {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(36, 28, 21, .72);
}

.page-faq__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--sky-line);
}

.page-faq__quick-label {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-rust);
}

.page-faq__quick-link {
  font-size: 14px;
  color: var(--sky-ink-blue);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--sky-line-gold);
  transition: color .18s var(--sky-ease), border-color .18s var(--sky-ease);
}

.page-faq__quick-link:hover,
.page-faq__quick-link:focus-visible {
  color: var(--sky-teal-deep);
  border-bottom-color: var(--sky-teal);
}

/* 主区域：标签轨道 + 折叠册页 */
.page-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 80px);
}

.page-faq__content {
  min-width: 0;
}

.page-faq__group {
  scroll-margin-top: 96px;
}

.page-faq__group + .page-faq__group {
  margin-top: clamp(30px, 4.5vw, 52px);
}

.page-faq__group-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 14px 0 10px;
  background: var(--sky-paper);
  box-shadow: 0 1px 0 0 rgba(217, 164, 65, .55), 0 6px 12px -10px rgba(14, 27, 54, .35);
}

.page-faq__group-title {
  margin: 0;
  font-family: var(--sky-font-title);
  font-size: clamp(19px, 3.2vw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--sky-ink-blue);
}

.page-faq__group-count {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--sky-rust);
}

.page-faq__q {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  scroll-margin-top: 110px;
}

/* 折叠项 */
.page-faq .sky-panel {
  position: relative;
  border-bottom: 1px solid var(--sky-line);
}

.page-faq .sky-panel__trigger {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 17px 8px 17px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sky-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  color: var(--sky-ink);
  cursor: pointer;
  transition: background-color .18s var(--sky-ease), color .18s var(--sky-ease);
}

.page-faq .sky-panel__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 3px;
  border-radius: 2px;
  background: var(--sky-rust);
  opacity: 0;
  transition: opacity .18s var(--sky-ease);
}

.page-faq .sky-panel__trigger[aria-expanded="true"]::before {
  opacity: 1;
}

.page-faq .sky-panel__trigger:hover {
  background: var(--sky-parchment);
  color: var(--sky-ink-blue);
}

.page-faq .sky-panel__trigger:focus-visible {
  outline: 2px solid var(--sky-teal);
  outline-offset: -2px;
}

.page-faq__chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-right: 2px solid var(--sky-gold);
  border-bottom: 2px solid var(--sky-gold);
  transform: rotate(45deg);
  transition: transform .2s var(--sky-ease), border-color .2s var(--sky-ease);
}

.page-faq .sky-panel__trigger[aria-expanded="true"] .page-faq__chev {
  transform: rotate(-135deg);
  border-color: var(--sky-rust);
}

.page-faq .sky-panel__inner {
  padding: 0 16px 20px 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(36, 28, 21, .86);
}

.page-faq .sky-panel__inner p {
  margin: 0 0 10px;
  max-width: 40em;
}

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

.page-faq .sky-panel__inner a {
  color: var(--sky-teal-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 158, 138, .45);
  transition: border-color .18s var(--sky-ease);
}

.page-faq .sky-panel__inner a:hover,
.page-faq .sky-panel__inner a:focus-visible {
  border-bottom-color: var(--sky-teal);
}

/* 规则查询路径 */
.page-faq__steps {
  margin-top: 26px;
  padding: 20px 16px;
  border: 1px solid var(--sky-line);
  border-radius: var(--sky-radius);
  background: var(--sky-card);
}

.page-faq__steps-svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-faq .faq-track {
  stroke: var(--sky-line-gold);
  stroke-width: 2;
  stroke-dasharray: 7 9;
}

.page-faq .faq-node {
  fill: var(--sky-card);
  stroke: var(--sky-gold);
  stroke-width: 2;
}

.page-faq .faq-node-label {
  fill: var(--sky-ink-blue);
  font-family: var(--sky-font-mono);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.page-faq .faq-arrow {
  fill: var(--sky-rust);
}

.page-faq__steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq__step {
  padding-left: 12px;
  border-left: 2px solid var(--sky-gold-soft);
}

.page-faq__step-num {
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-gold);
}

.page-faq__step-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sky-ink-blue);
}

.page-faq__step-desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(36, 28, 21, .74);
}

.page-faq__steps-figure {
  margin: 20px 0 0;
  overflow: hidden;
  border-radius: var(--sky-radius);
}

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

/* 收束区 */
.page-faq__support {
  margin: 0 0 clamp(40px, 6vw, 80px);
  padding: clamp(26px, 5vw, 52px) clamp(20px, 4vw, 48px);
  border-radius: calc(var(--sky-radius) + 8px);
  background: radial-gradient(120% 140% at 8% 0%, #1B2E55 0%, #0E1B36 56%, #0B1528 100%);
  color: var(--sky-cream-text);
}

.page-faq__support .page-faq__section-title {
  max-width: 22em;
  color: var(--sky-card);
}

.page-faq__support-note {
  max-width: 40em;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(247, 242, 232, .8);
}

.page-faq__support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

.page-faq__support-item {
  padding-top: 12px;
  border-top: 1px solid rgba(217, 164, 65, .4);
}

.page-faq__support-label {
  display: block;
  font-family: var(--sky-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sky-gold);
}

.page-faq__support-value {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--sky-card);
  word-break: break-word;
}

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

.page-faq__support .sky-btn--ghost {
  border-color: rgba(247, 242, 232, .45);
  color: var(--sky-card);
}

.page-faq__support .sky-btn--ghost:hover,
.page-faq__support .sky-btn--ghost:focus-visible {
  border-color: var(--sky-gold);
  color: var(--sky-gold-soft);
}

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

  .page-faq__support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
  }
}

@media (min-width: 900px) {
  .page-faq__hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
  }

  .page-faq__layout {
    grid-template-columns: var(--sky-rail) minmax(0, 1fr);
    gap: clamp(26px, 3vw, 48px);
    align-items: start;
  }

  .page-faq .sky-rail {
    position: sticky;
    top: 18px;
    align-self: start;
  }

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

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

  .page-faq .sky-panel__trigger {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-faq .sky-panel__inner {
    padding-right: 24px;
    padding-left: 20px;
  }
}

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