.page-faq {
  padding-top: var(--ry-main-offset);
  padding-bottom: clamp(48px, 8vw, 96px);
  background:
    radial-gradient(82% 46% at 88% 0%, rgba(79, 227, 208, 0.10), transparent 62%),
    radial-gradient(70% 42% at 4% 2%, rgba(242, 196, 107, 0.06), transparent 60%);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-top {
  padding-bottom: clamp(20px, 3vw, 32px);
}

.page-faq .faq-hero {
  padding-top: clamp(22px, 4vw, 38px);
}

.page-faq .faq-hero h1 {
  margin: 14px 0 0;
  max-width: 17ch;
  font-size: clamp(30px, 5.4vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.page-faq .faq-hero h1 em {
  font-style: normal;
  color: var(--ry-cyan);
  text-shadow: 0 0 26px var(--ry-glow);
}

.page-faq .faq-hero__lead {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--ry-muted);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-faq .faq-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-fact {
  padding: 16px 18px;
  border: 1px solid rgba(42, 52, 104, 0.8);
  border-radius: var(--ry-radius-sm);
  background: linear-gradient(160deg, rgba(22, 28, 58, 0.9), rgba(11, 16, 38, 0.45));
}

.page-faq .faq-fact strong {
  display: block;
  font-family: var(--ry-font-mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ry-cyan);
}

.page-faq .faq-fact:nth-child(2) strong {
  color: var(--ry-gold);
}

.page-faq .faq-fact:nth-child(3) strong {
  font-size: 17px;
  color: var(--ry-coral);
}

.page-faq .faq-fact span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ry-muted);
}

/* ---------- 场景索引条 ---------- */
.page-faq .faq-jump {
  position: sticky;
  top: calc(var(--ry-header-h) + 4px);
  z-index: 5;
  margin-bottom: 6px;
  padding: 10px 0;
  border-top: 1px solid rgba(42, 52, 104, 0.55);
  border-bottom: 1px solid rgba(42, 52, 104, 0.55);
  background: linear-gradient(180deg, rgba(11, 16, 38, 0.94), rgba(11, 16, 38, 0.76));
  backdrop-filter: blur(10px);
}

.page-faq .faq-jump__track {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-faq .faq-jump__track::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(42, 52, 104, 0.95);
  border-radius: 999px;
  background: rgba(22, 28, 58, 0.55);
  color: var(--ry-text);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.28s var(--ry-ease), border-color 0.28s var(--ry-ease),
    background 0.28s var(--ry-ease), box-shadow 0.28s var(--ry-ease);
}

.page-faq .faq-pill__num {
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ry-muted);
}

.page-faq .faq-pill:hover,
.page-faq .faq-pill:focus-visible {
  color: var(--ry-cyan);
  border-color: var(--ry-cyan);
  background: rgba(79, 227, 208, 0.08);
  box-shadow: 0 8px 20px -14px var(--ry-cyan);
}

.page-faq .faq-pill:hover .faq-pill__num,
.page-faq .faq-pill:focus-visible .faq-pill__num {
  color: var(--ry-cyan);
}

/* ---------- 场景区块 ---------- */
.page-faq .faq-scene {
  padding-top: clamp(34px, 5.5vw, 62px);
  scroll-margin-top: calc(var(--ry-header-h) + 88px);
}

.page-faq .faq-scene h2 {
  margin: 12px 0 0;
  font-size: clamp(21px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.005em;
}

.page-faq .faq-scene__head {
  max-width: 74ch;
}

.page-faq .faq-scene__lead {
  max-width: 64ch;
  margin: 14px 0 0;
  color: var(--ry-muted);
  font-size: 15px;
  line-height: 1.85;
}

.page-faq .faq-scene__lead--tight {
  margin-top: 18px;
}

.page-faq .faq-scene__lead a {
  color: var(--ry-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 208, 0.4);
}

/* ---------- 换设备之后 ---------- */
.page-faq .faq-device {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.page-faq .faq-rows {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-row {
  display: grid;
  gap: 4px;
  padding: 13px 16px;
  border-radius: 10px;
  border-left: 2px solid rgba(79, 227, 208, 0.45);
  background: linear-gradient(100deg, rgba(22, 28, 58, 0.85), rgba(16, 21, 44, 0.4));
}

.page-faq .faq-row:nth-child(3) {
  border-left-color: rgba(242, 196, 107, 0.55);
}

.page-faq .faq-row__key {
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ry-cyan);
}

.page-faq .faq-row:nth-child(3) .faq-row__key {
  color: var(--ry-gold);
}

.page-faq .faq-row__val {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ry-text);
}

.page-faq .faq-device__figure {
  margin: 0;
}

.page-faq .faq-device__figure .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 手风琴 ---------- */
.page-faq .faq-stack {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.page-faq .faq-stack--tight {
  margin-top: 26px;
}

.page-faq .qa {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(42, 52, 104, 0.9);
  border-radius: var(--ry-radius-sm);
  background: linear-gradient(180deg, rgba(22, 28, 58, 0.9), rgba(14, 19, 40, 0.55));
  transition: border-color 0.3s var(--ry-ease), background 0.3s var(--ry-ease);
}

.page-faq .qa::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--ry-line);
  transition: background 0.3s var(--ry-ease), box-shadow 0.3s var(--ry-ease);
}

.page-faq .qa[open] {
  border-color: rgba(79, 227, 208, 0.42);
  background: linear-gradient(180deg, rgba(26, 34, 68, 0.95), rgba(14, 19, 40, 0.7));
}

.page-faq .qa[open]::before {
  background: var(--ry-cyan);
  box-shadow: 0 0 14px var(--ry-glow);
}

.page-faq .qa__head {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 16px 18px 16px 20px;
  list-style: none;
  cursor: pointer;
}

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

.page-faq .qa__head:focus-visible {
  outline: 2px solid var(--ry-cyan);
  outline-offset: -2px;
  border-radius: var(--ry-radius-sm);
}

.page-faq .qa__num {
  flex: none;
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ry-muted);
  transition: color 0.3s var(--ry-ease);
}

.page-faq .qa[open] .qa__num {
  color: var(--ry-cyan);
}

.page-faq .qa__q {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ry-text);
}

.page-faq .qa__mark {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: auto;
  border: 1px solid var(--ry-line);
  border-radius: 50%;
  transition: border-color 0.3s var(--ry-ease);
}

.page-faq .qa[open] .qa__mark {
  border-color: var(--ry-cyan);
}

.page-faq .qa__mark::before,
.page-faq .qa__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  background: var(--ry-muted);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ry-ease), opacity 0.3s var(--ry-ease),
    background 0.3s var(--ry-ease);
}

.page-faq .qa__mark::before {
  width: 7px;
  height: 1px;
}

.page-faq .qa__mark::after {
  width: 1px;
  height: 7px;
}

.page-faq .qa[open] .qa__mark::before,
.page-faq .qa[open] .qa__mark::after {
  background: var(--ry-cyan);
}

.page-faq .qa[open] .qa__mark::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.page-faq .qa__body {
  margin: 0 20px 18px 34px;
  padding-left: 15px;
  border-left: 1px solid rgba(42, 52, 104, 0.9);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ry-text);
}

.page-faq .qa__body p {
  margin: 0;
}

.page-faq .qa__body p + p {
  margin-top: 8px;
}

.page-faq .qa__body a {
  color: var(--ry-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 208, 0.4);
}

/* ---------- 反馈流程 ---------- */
.page-faq .faq-flow {
  margin: 22px 0 0;
}

.page-faq .faq-flow .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.page-faq .faq-step {
  padding: 18px 18px 20px;
  border: 1px solid rgba(42, 52, 104, 0.85);
  border-radius: var(--ry-radius-sm);
  background: linear-gradient(165deg, rgba(22, 28, 58, 0.92), rgba(11, 16, 38, 0.5));
}

.page-faq .faq-step:last-child {
  border-color: rgba(255, 122, 92, 0.42);
}

.page-faq .faq-step__num {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ry-muted);
}

.page-faq .faq-step:last-child .faq-step__num {
  color: var(--ry-coral);
}

.page-faq .faq-step h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ry-text);
}

.page-faq .faq-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ry-muted);
}

/* ---------- 兜底联系 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 24px;
  margin-top: 24px;
  padding: clamp(22px, 4vw, 38px);
}

.page-faq .faq-contact__list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-contact__list li {
  display: grid;
  gap: 3px;
}

.page-faq .faq-contact__key {
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ry-muted);
}

.page-faq .faq-contact__val {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ry-text);
}

.page-faq .faq-contact__side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-faq .faq-contact__side p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ry-muted);
}

.page-faq .faq-contact__side .btn {
  justify-content: center;
  width: 100%;
}

/* ---------- 断点 ---------- */
@media (min-width: 560px) {
  .page-faq .faq-row {
    grid-template-columns: minmax(6.5em, 8.5em) minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }

  .page-faq .faq-contact__list li {
    grid-template-columns: 6em minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
  }
}

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

@media (min-width: 900px) {
  .page-faq .faq-device {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    align-items: start;
  }

  .page-faq .faq-contact {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: center;
  }

  .page-faq .faq-contact__side .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .page-faq .qa__body {
    margin: 0 16px 16px 20px;
    padding-left: 12px;
  }

  .page-faq .qa__q {
    font-size: 15px;
  }

  .page-faq .faq-pill {
    padding: 7px 13px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa::before,
  .page-faq .qa__mark,
  .page-faq .qa__mark::before,
  .page-faq .qa__mark::after,
  .page-faq .faq-pill {
    transition: none;
  }
}

<main id="main-content" class="page-faq">
  <div class="faq-top">
    <div class="shell">
      <nav class="crumbs" aria-label="面包屑">
        <ol class="crumbs__list">
          <li><a class="crumbs__link" href="/">首页</a></li>
          <li class="crumbs__sep" aria-hidden="true">/</li>
          <li class="crumbs__current" aria-current="page">使用指南</li>
        </ol>
      </nav>

      <header class="faq-hero">
        <p class="idx"><span class="idx__num">00</span>GUIDE / 操作问答台</p>
        <h1>换设备、找入口、提反馈，答案就在手边</h1>
        <p class="faq-hero__lead">遇到具体操作问题的时候，最怕翻三页还没找到那句话。荣一娱乐把高频问题按场景排成一张问答台：先挑你正处在的场景，再挑那条对得上的问题，多数情况看一眼就能接着往下做。</p>
        <ul class="faq-facts">
          <li class="faq-fact">
            <strong>60 余条</strong>
            <span>四组场景内的操作问答，随双周梳理同步更新</span>
          </li>
          <li class="faq-fact">
            <strong>1 个工作日</strong>
            <span>通过反馈通道提交后，通常的回复节奏</span>
          </li>
          <li class="faq-fact">
            <strong>9:00–21:00</strong>
            <span>客服电话服务时段，节假日照常</span>
          </li>
        </ul>
      </header>
    </div>
  </div>

  <div class="faq-jump">
    <div class="shell">
      <nav class="faq-jump__track" aria-label="场景快速跳转">
        <a class="faq-pill" href="#scene-device"><span class="faq-pill__num">01</span>换设备之后</a>
        <a class="faq-pill" href="#scene-start"><span class="faq-pill__num">02</span>入门上手</a>
        <a class="faq-pill" href="#scene-activity"><span class="faq-pill__num">03</span>活动与周期</a>
        <a class="faq-pill" href="#scene-mobile"><span class="faq-pill__num">04</span>手机与快捷位</a>
        <a class="faq-pill" href="#scene-feedback"><span class="faq-pill__num">05</span>反馈怎么提</a>
        <a class="faq-pill" href="#scene-contact"><span class="faq-pill__num">06</span>仍然没解决</a>
      </nav>
    </div>
  </div>

  <section class="faq-scene" id="scene-device" data-section>
    <div class="shell">
      <div class="faq-device">
        <div class="faq-device__text" data-reveal>
          <p class="idx"><span class="idx__num">01</span>换设备之后</p>
          <h2>换了电脑重新登录，设置项还在原来的位置</h2>
          <p class="faq-scene__lead">换新机、重装系统、在别处临时登录，最烦的是把设置一项项重找一遍。现在不用了：账号下的设置项集中放在同一块面板里，一次滚动就能看完，不必在多个页面之间来回折返。</p>
          <ul class="faq-rows">
            <li class="faq-row">
              <span class="faq-row__key">第一屏</span>
              <span class="faq-row__val">常用入口五个快捷位，与电脑端设置项一一对应</span>
            </li>
            <li class="faq-row">
              <span class="faq-row__key">设置区</span>
              <span class="faq-row__val">账号、显示与提醒类选项汇聚一处，顺序固定</span>
            </li>
            <li class="faq-row">
              <span class="faq-row__key">同步</span>
              <span class="faq-row__val">手机、平板、电脑三端配置自动对齐，无需重新摆一遍</span>
            </li>
            <li class="faq-row">
              <span class="faq-row__key">变动提示</span>
              <span class="faq-row__val">位置或名称有调整时，面板内会留出标注，指向对应说明</span>
            </li>
          </ul>
        </div>
        <figure class="faq-device__figure" data-reveal>
          <div class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="手机界面局部示意，五个圆角快捷位以霓虹青描边标出，位置对应电脑端的设置分组" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-frame__caption">手机端常用入口的排布，与电脑端设置项位置对应</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-scene" id="scene-start" data-section>
    <div class="shell">
      <header class="faq-scene__head" data-reveal>
        <p class="idx"><span class="idx__num">02</span>入门上手</p>
        <h2>第一次进来，先弄清楚这几件事</h2>
        <p class="faq-scene__lead">不必把整块面板都看完，先知道东西放在哪一层，后面就顺手了。</p>
      </header>
      <div class="faq-stack" data-reveal>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q01</span>
            <span class="qa__q">第一次打开面板，从哪里看起最快？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>先看顶部条，再看第一屏的常用入口。</p>
            <p>顶部条交代账号状态与面板版本，常用入口则覆盖了日常八成操作，其余内容按需往下翻即可。</p>
          </div>
        </details>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q02</span>
            <span class="qa__q">栏目这么多，怎么判断哪块跟我有关？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>看类目标签，不用逐条读标题。</p>
            <p>六个一级类目各有自己的标签颜色与编号区间，扫一眼所属类目，就知道这一块是不是你要找的方向。</p>
          </div>
        </details>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q03</span>
            <span class="qa__q">手机上第一次用，需要额外设置吗？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>不需要，登录后即为可用状态。</p>
            <p>如果想让入口更靠前，可以在手机桌面创建快捷方式，之后一步就能进到常用入口。</p>
          </div>
        </details>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q04</span>
            <span class="qa__q">面板版本号在哪里看，有什么用？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>顶部右侧的等宽小字，当前为 v3.7。</p>
            <p>版本号变了，说明入口位置或说明文案有调整，对照专栏笔记里的改动记录就能知道改了什么。</p>
          </div>
        </details>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q05</span>
            <span class="qa__q">只想找某一类内容，怎么筛更快？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>到内容目录按类目筛，再按更新时间收窄。</p>
            <p>两个条件叠起来用，通常两三次点击就能落到具体条目上，比从头翻列表省事得多。</p>
          </div>
        </details>
        <details class="qa" name="start">
          <summary class="qa__head">
            <span class="qa__num">Q06</span>
            <span class="qa__q">用了一段时间，怎么知道有没有新变化？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>看专栏笔记的更新条目，带珊瑚橙标记的就是刚改过的。</p>
            <p>每轮梳理后会留下改动记录，按时间倒序排列，扫一眼最近几条即可。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-scene" id="scene-activity" data-section>
    <div class="shell">
      <header class="faq-scene__head" data-reveal>
        <p class="idx"><span class="idx__num">03</span>活动与周期</p>
        <h2>一期两周，起止时间写得很明确</h2>
        <p class="faq-scene__lead">活动专栏以十四天为一个周期，和全站双周梳理同一步调。想知道这一期什么时候结束、下一期什么时候接上，看条目上的日期就行。</p>
      </header>
      <div class="faq-stack" data-reveal>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q07</span>
            <span class="qa__q">一期活动持续多久？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>十四天，固定不变。</p>
            <p>这个长度与全站双周梳理节奏一致，一年下来正好二十六轮，方便你按周记账式地安排参与。</p>
          </div>
        </details>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q08</span>
            <span class="qa__q">周期是从周一开始算，还是按上线日算？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>按该期专栏的起始日算，不绑定星期。</p>
            <p>每一期的起止日期都会在条目里写明，与其记规律，不如直接看那期标注的日期区间。</p>
          </div>
        </details>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q09</span>
            <span class="qa__q">在哪里查当前这一期的安排？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>内容目录里的活动专栏入口，是查周期最快的一处。</p>
            <p>进去后按类目或更新时间筛一下，当前周期的起止与内容都在条目摘要里。</p>
          </div>
        </details>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q10</span>
            <span class="qa__q">往期的安排还能翻得到吗？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>能，最近十二个周期的记录都保留着。</p>
            <p>想复盘上一期是怎么安排的，直接回看对应条目即可，不必重新问一遍。</p>
          </div>
        </details>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q11</span>
            <span class="qa__q">周期中途会不会临时改时间？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>有可能，但改动会留下明确标注。</p>
            <p>调整会写进当轮的改动记录，并注明适用的终端与生效范围，以最新那条为准就不会错。</p>
          </div>
        </details>
        <details class="qa" name="activity">
          <summary class="qa__head">
            <span class="qa__num">Q12</span>
            <span class="qa__q">为什么每期结束都要重新梳理一次？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>因为栏目归属和入口位置会随着内容增加而变钝。</p>
            <p>每轮梳理都会重新核对类目归属、入口位置与说明文案，让下一个周期开始时路径依然清楚。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-scene" id="scene-mobile" data-section>
    <div class="shell">
      <header class="faq-scene__head" data-reveal>
        <p class="idx"><span class="idx__num">04</span>手机与快捷位</p>
        <h2>五个快捷位，把手机端最常用的都摆在第一屏</h2>
        <p class="faq-scene__lead">移动端访问占到六成左右，所以手机端的常用入口被单独收进第一屏的快捷区，点开就是常用面板，不用一层层往里走。</p>
      </header>
      <div class="faq-stack" data-reveal>
        <details class="qa" name="mobile">
          <summary class="qa__head">
            <span class="qa__num">Q13</span>
            <span class="qa__q">手机荣一娱乐常用入口在哪个位置？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>登录后在首页第一屏，横向排列的五个快捷位就是。</p>
            <p>它们与电脑端的设置项一一对应，顺序也一致，所以在哪一端的记忆都能直接搬过去用。</p>
          </div>
        </details>
        <details class="qa" name="mobile">
          <summary class="qa__head">
            <span class="qa__num">Q14</span>
            <span class="qa__q">快捷位和电脑端设置项是怎么对应的？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>按顺序一一对上，位置不同但次序相同。</p>
            <p>习惯电脑端从左往右数的顺序，就能在手机上直接定位第几个快捷位，不必重新认一遍。</p>
          </div>
        </details>
        <details class="qa" name="mobile">
          <summary class="qa__head">
            <span class="qa__num">Q15</span>
            <span class="qa__q">能把入口放到手机桌面上吗？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>可以，支持在手机桌面创建快捷方式。</p>
            <p>创建之后一步直达，省掉打开浏览器、输地址、找入口这几步，日常使用顺手很多。</p>
          </div>
        </details>
        <details class="qa" name="mobile">
          <summary class="qa__head">
            <span class="qa__num">Q16</span>
            <span class="qa__q">换手机之后快捷位要重新配吗？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>不用，登录后自动同步。</p>
            <p>平板端和手机端共用同一套常用入口配置，换到哪一台设备上看到的都是同一组快捷位。</p>
          </div>
        </details>
        <details class="qa" name="mobile">
          <summary class="qa__head">
            <span class="qa__num">Q17</span>
            <span class="qa__q">手机端和电脑端看到的内容一样吗？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>一样，排列更紧凑。</p>
            <p>内容条目没有差别，只是手机端把信息压成一列，方便单手上下滑动阅读。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-scene" id="scene-feedback" data-section>
    <div class="shell">
      <header class="faq-scene__head" data-reveal>
        <p class="idx"><span class="idx__num">05</span>反馈怎么提</p>
        <h2>提交只需三步，把情况说清就行</h2>
        <p class="faq-scene__lead">反馈通道在面板底部，滚到最下面就能看到。想直接联系客服反馈荣一娱乐使用时遇到的问题，按下面三步走，通常一个工作日内会有回音。</p>
      </header>
      <figure class="faq-flow" data-reveal>
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:560w:1000}" width="1000" height="560" alt="三步式反馈路径示意，圆角矩形依次连接，末步以珊瑚橙高亮标出回复完成" loading="lazy" decoding="async">
        </div>
        <figcaption class="media-frame__caption">从面板底部进入，填写描述，等待回复</figcaption>
      </figure>
      <ol class="faq-steps" data-reveal>
        <li class="faq-step">
          <span class="faq-step__num">01 / 找到入口</span>
          <h3>滚到面板底部</h3>
          <p>反馈通道固定在面板最下方，任何页面滚到底都能看到，不需要先绕去别处。</p>
        </li>
        <li class="faq-step">
          <span class="faq-step__num">02 / 写清情况</span>
          <h3>把细节带上</h3>
          <p>说明你在哪个终端、用了哪个入口、看到什么现象，附上大致时间点，处理起来会快很多。</p>
        </li>
        <li class="faq-step">
          <span class="faq-step__num">03 / 等待回复</span>
          <h3>通常一个工作日</h3>
          <p>客服会按提交顺序回复；涉及多个环节的情况，会先给一个明确的处理说明。</p>
        </li>
      </ol>
      <div class="faq-stack faq-stack--tight" data-reveal>
        <details class="qa" name="feedback">
          <summary class="qa__head">
            <span class="qa__num">Q18</span>
            <span class="qa__q">提交前需要准备什么？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>三样东西：现象、位置、时间。</p>
            <p>现象是你看到什么不对，位置是哪个入口或哪个类目下，时间是大概什么时候发生。三样齐了，客服就不用再回头问你一遍。</p>
          </div>
        </details>
        <details class="qa" name="feedback">
          <summary class="qa__head">
            <span class="qa__num">Q19</span>
            <span class="qa__q">提交之后多久能看到回复？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>通常在一个工作日内。</p>
            <p>如遇提交集中时段，回复会稍晚一些，但仍按先后顺序处理，不会漏掉。</p>
          </div>
        </details>
        <details class="qa" name="feedback">
          <summary class="qa__head">
            <span class="qa__num">Q20</span>
            <span class="qa__q">反馈内容会不会被别人看到？</span>
            <span class="qa__mark" aria-hidden="true"></span>
          </summary>
          <div class="qa__body">
            <p>不会，反馈只进入客服处理流程。</p>
            <p>提交的内容用于定位和处理你反馈的问题，不会作为公开内容展示。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="faq-scene" id="scene-contact" data-section>
    <div class="shell">
      <div class="panel panel--glow faq-contact" data-reveal>
        <div class="faq-contact__main">
          <p class="idx"><span class="idx__num">06</span>仍然没解决</p>
          <h2>还是没找到答案，直接找人说更快</h2>
          <p class="faq-scene__lead">有些情况确实不在问答覆盖范围内，比如涉及具体账号状态、具体一期的归属判断。这时候把情况直接说清楚，比自己反复试要省时间。</p>
          <ul class="faq-contact__list">
            <li>
              <span class="faq-contact__key">客服邮箱</span>
              <span class="faq-contact__val">kefu@fun-rongyi.com.cn</span>
            </li>
            <li>
              <span class="faq-contact__key">客服电话</span>
              <span class="faq-contact__val">400-3814-3749</span>
            </li>
            <li>
              <span class="faq-contact__key">服务时段</span>
              <span class="faq-contact__val">每日 9:00 至 21:00，节假日照常</span>
            </li>
            <li>
              <span class="faq-contact__key">回复时效</span>
              <span class="faq-contact__val">邮件通常在一个工作日内回复</span>
            </li>
          </ul>
        </div>
        <div class="faq-contact__side">
          <p>想先自己再查一遍，从内容目录按类目和更新时间筛选，命中率最高；最近的改动记录在专栏笔记里。</p>
          <a class="btn btn--primary" href="/contact-us/">前往联系页</a>
          <a class="btn btn--ghost" href="/notes/">看改动记录</a>
        </div>
      </div>
    </div>
  </section>
</main>