.page-faq{
  --faq-soft:rgba(247,245,239,.82);
  --faq-pad:clamp(26px,4vw,52px);
  color:var(--lj-ink);
}

.page-faq .faq-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-crumbs li{display:inline-flex;align-items:center;gap:8px;}
.page-faq .faq-crumbs li + li::before{content:"/";color:var(--lj-concrete);}
.page-faq .faq-crumbs a{color:var(--lj-ink-mid);text-decoration:none;}
.page-faq .faq-crumbs a:hover{color:var(--lj-ink-deep);text-decoration:underline;text-underline-offset:3px;}

.page-faq .faq-hero{
  display:grid;
  gap:clamp(24px,4vw,52px);
  align-items:end;
  padding:clamp(20px,3.2vw,38px) 0 clamp(26px,4vw,54px);
  border-bottom:1px solid var(--lj-rule);
}
.page-faq .faq-hero__head{min-width:0;}

.page-faq .faq-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:20px 0 0;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-ink-mid);
}
.page-faq .faq-kicker::before{
  content:"";
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--lj-yellow);
}

.page-faq .faq-hero__title{
  margin:16px 0 0;
  font-size:clamp(33px,6vw,64px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--lj-ink-deep);
}

.page-faq .faq-hero__lede{
  max-width:34em;
  margin:18px 0 0;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.72;
  color:var(--lj-ink-mid);
}

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

.page-faq .faq-figure{
  margin:0;
  min-width:0;
}
.page-faq .faq-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:var(--lj-radius-lg);
  object-fit:cover;
  background:var(--lj-concrete);
  box-shadow:var(--lj-shadow-soft);
}
.page-faq .faq-figure__cap{
  margin:12px 0 0;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--lj-concrete-deep);
}

.page-faq .faq-scenes-wrap{
  padding:clamp(20px,3vw,32px) 0 clamp(4px,1vw,10px);
}
.page-faq .faq-scenes__label{
  margin:0;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-scenes{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:12px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-scene{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border:1px solid var(--lj-rule-strong);
  border-radius:var(--lj-pill);
  background:var(--lj-paper-bright);
  color:var(--lj-ink);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.page-faq .faq-scene__no{
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-scene:hover,
.page-faq .faq-scene:focus-visible{
  background:var(--lj-yellow);
  border-color:var(--lj-yellow-deep);
  color:var(--lj-ink-deep);
  transform:translateY(-2px);
}
.page-faq .faq-scene:hover .faq-scene__no,
.page-faq .faq-scene:focus-visible .faq-scene__no{color:var(--lj-ink-deep);}

.page-faq .faq-body{
  display:grid;
  gap:clamp(22px,3vw,38px);
  padding:clamp(18px,2.6vw,28px) 0 clamp(44px,6vw,84px);
}
.page-faq .faq-toc{display:none;min-width:0;}
.page-faq .faq-toc__inner{position:sticky;top:118px;}
.page-faq .faq-toc__title{
  margin:0 0 12px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-toc ul{margin:0;padding:0;list-style:none;}
.page-faq .faq-toc a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--lj-rule);
  font-size:13px;
  line-height:1.5;
  color:var(--lj-ink-mid);
  text-decoration:none;
  transition:color .18s ease,padding-left .18s ease;
}
.page-faq .faq-toc a span{
  font-family:var(--lj-font-mono);
  font-size:11px;
  color:var(--lj-yellow-deep);
}
.page-faq .faq-toc a:hover{
  color:var(--lj-ink-deep);
  padding-left:6px;
}
.page-faq .faq-sections{min-width:0;}

.page-faq .faq-sec + .faq-sec{
  margin-top:clamp(36px,5vw,64px);
  padding-top:clamp(26px,3.6vw,44px);
  border-top:1px solid var(--lj-rule);
}
.page-faq .faq-sec__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin:0 0 clamp(14px,2vw,20px);
}
.page-faq .faq-sec__no{
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--lj-yellow-deep);
}
.page-faq .faq-sec__title{
  margin:0;
  font-size:clamp(21px,2.6vw,30px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--lj-ink-deep);
}
.page-faq .faq-sec__note{
  margin:0;
  margin-left:auto;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--lj-concrete-deep);
}

.page-faq .faq-sec__cols{
  display:grid;
  gap:clamp(20px,3vw,34px);
  align-items:start;
}
.page-faq .faq-figure--side img{border-radius:var(--lj-radius);}

.page-faq .faq-list{min-width:0;}

.page-faq .faq-q{
  border-top:1px solid var(--lj-rule);
}
.page-faq .faq-q:last-child{border-bottom:1px solid var(--lj-rule);}
.page-faq .faq-q summary{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
}
.page-faq .faq-q summary::-webkit-details-marker{display:none;}
.page-faq .faq-q summary::marker{content:"";}
.page-faq .faq-q__no{
  flex:0 0 auto;
  padding-top:4px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-q__text{
  margin:0;
  font-size:clamp(15px,1.6vw,18px);
  font-weight:600;
  line-height:1.55;
  color:var(--lj-ink-deep);
  transition:color .16s ease;
}
.page-faq .faq-q summary:hover .faq-q__text{color:var(--lj-yellow-deep);}
.page-faq .faq-q__icon{
  flex:0 0 auto;
  margin-top:5px;
  margin-left:auto;
  color:var(--lj-yellow-deep);
  transition:transform .2s ease;
}
.page-faq .faq-q[open] .faq-q__icon{transform:rotate(90deg);}
.page-faq .faq-q[open] .faq-q__text{color:var(--lj-ink-deep);}
.page-faq .faq-q__ans{padding:2px 0 22px 0;}
.page-faq .faq-q__ans p{
  max-width:62ch;
  margin:0 0 10px;
  padding-left:15px;
  border-left:3px solid var(--lj-yellow);
  font-size:15px;
  line-height:1.78;
  color:var(--lj-ink);
}
.page-faq .faq-q__ans p:last-child{margin-bottom:0;}
.page-faq .faq-q__ans a{
  color:var(--lj-ink-deep);
  text-decoration:underline;
  text-decoration-color:var(--lj-yellow-deep);
  text-underline-offset:3px;
}
.page-faq .faq-q__ans a:hover{color:var(--lj-yellow-deep);}

.page-faq .faq-help{
  margin-top:clamp(42px,6vw,80px);
  padding:var(--faq-pad);
  border-radius:var(--lj-radius-lg);
  background-color:var(--lj-ink);
  background-image:repeating-linear-gradient(90deg,var(--lj-yellow) 0 18px,transparent 18px 36px);
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:0 0;
  display:grid;
  gap:clamp(22px,3vw,40px);
  color:var(--lj-paper);
}
.page-faq .faq-help__main{min-width:0;}
.page-faq .faq-help__title{
  margin:0 0 14px;
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--lj-paper-bright);
}
.page-faq .faq-help__text{
  max-width:36em;
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--faq-soft);
}
.page-faq .faq-help__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding:12px 26px;
  border-radius:var(--lj-pill);
  background:var(--lj-yellow);
  color:var(--lj-ink-deep);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.page-faq .faq-help__arrow{transition:transform .18s ease;}
.page-faq .faq-help__btn:hover{background:var(--lj-yellow-soft);transform:translateX(3px);}
.page-faq .faq-help__btn:hover .faq-help__arrow{transform:translateX(3px);}
.page-faq .faq-help__side{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
}
.page-faq .faq-help__row{
  padding-bottom:12px;
  border-bottom:1px solid var(--lj-light-rule);
}
.page-faq .faq-help__row:last-child{border-bottom:0;padding-bottom:0;}
.page-faq .faq-help__k{
  display:block;
  margin-bottom:4px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lj-yellow);
}
.page-faq .faq-help__v{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--lj-paper);
  overflow-wrap:anywhere;
}

@media (min-width:720px){
  .page-faq .faq-q__ans{padding-left:34px;}
}

@media (min-width:900px){
  .page-faq .faq-hero{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  }
  .page-faq .faq-sec__cols{
    grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  }
  .page-faq .faq-help{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:start;
  }
}

@media (min-width:1080px){
  .page-faq .faq-body{
    grid-template-columns:190px minmax(0,1fr);
    gap:clamp(30px,4vw,64px);
  }
  .page-faq .faq-toc{display:block;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-scene,
  .page-faq .faq-q__icon,
  .page-faq .faq-q__text,
  .page-faq .faq-help__btn,
  .page-faq .faq-help__arrow,
  .page-faq .faq-toc a{transition:none;}
  .page-faq .faq-scene:hover,
  .page-faq .faq-scene:focus-visible,
  .page-faq .faq-help__btn:hover,
  .page-faq .faq-help__btn:hover .faq-help__arrow{transform:none;}
}

<main id="main-content" class="page-faq">
  <div class="lj-container">

    <section class="faq-hero" aria-labelledby="faq-title">
      <div class="faq-hero__head" data-reveal>
        <nav class="lj-crumbs faq-crumbs" aria-label="面包屑">
          <ol>
            <li><a href="/">首页</a></li>
            <li aria-current="page">答疑中心</li>
          </ol>
        </nav>
        <p class="faq-kicker">答疑中心 · Answers</p>
        <h1 class="faq-hero__title" id="faq-title">下载、切换、导出，卡在哪一步</h1>
        <p class="faq-hero__lede">
          第一次装利记桌面端、换一台电脑重新登录、月底把维护记录导出来——这些步骤走不通的时候，先在这里找答案。
          每一问都直接给到从哪里点、点完之后会看到什么。
        </p>
        <div class="faq-hero__actions">
          <a class="lj-btn lj-btn--dark" href="#scenes">按场景挑问题<span class="lj-arrow">→</span></a>
          <a class="lj-btn lj-btn--ghost" href="/offerings/">看桌面端与入口</a>
        </div>
      </div>
      <figure class="faq-figure" data-reveal data-reveal-delay="120">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="城市街角的问路指示牌与箭头特写，画面中没有人物">
        <figcaption class="faq-figure__cap">方向看清了，第一步就不难。</figcaption>
      </figure>
    </section>

    <section class="faq-scenes-wrap" id="scenes" aria-label="按场景挑选问题">
      <p class="faq-scenes__label">你现在属于哪种情况</p>
      <div class="faq-scenes">
        <a class="faq-scene" href="#install"><span class="faq-scene__no">01</span>第一次来</a>
        <a class="faq-scene" href="#switch"><span class="faq-scene__no">02</span>换设备</a>
        <a class="faq-scene" href="#export"><span class="faq-scene__no">03</span>回访导出</a>
        <a class="faq-scene" href="#column"><span class="faq-scene__no">04</span>栏目页改版</a>
      </div>
    </section>

    <div class="faq-body">
      <aside class="faq-toc" aria-label="问答目录">
        <div class="faq-toc__inner">
          <p class="faq-toc__title">目录</p>
          <ul>
            <li><a href="#install"><span>01</span>下载与安装</a></li>
            <li><a href="#switch"><span>02</span>桌面端切换</a></li>
            <li><a href="#export"><span>03</span>回访用户导出</a></li>
            <li><a href="#column"><span>04</span>栏目页与入口卡</a></li>
            <li><a href="#device"><span>05</span>账号与兼容</a></li>
            <li><a href="#help"><span>06</span>还没解决</a></li>
          </ul>
        </div>
      </aside>

      <div class="faq-sections">

        <section class="faq-sec" id="install" data-reveal>
          <header class="faq-sec__head">
            <span class="faq-sec__no">01</span>
            <h2 class="faq-sec__title">下载与安装</h2>
            <p class="faq-sec__note">从拿到安装包到第一次登录</p>
          </header>
          <div class="faq-list">
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q1.1</span>
                <h3 class="faq-q__text">安装包多大，装到哪些系统上能跑？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>桌面端安装包平均 86 MB，Windows 10 及以上、macOS 12 及以上都可以安装。手机和平板不用另装，用浏览器登录同一个账号就能查看栏目页。</p>
                <p>安装包和快速开始说明都放在<a href="/offerings/">桌面端与入口</a>这一栏，进去取用即可，不需要另行申请。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q1.2</span>
                <h3 class="faq-q__text">装好之后从哪里开始，第一次该看什么？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>打开客户端，用现有账号登录就能进入栏目页。第一次用时建议先把页面顶部的横向方向带看一遍：它写着当前栏目和下一步去哪儿，认两遍就顺手了。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q1.3</span>
                <h3 class="faq-q__text">安装过程被打断，重新装一次会不会覆盖原来的内容？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>账号里的栏目路径、筛选条件和维护记录都存在账号内，重装客户端不影响它们。装完登录，最近访问的位置仍在原处。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-sec" id="switch" data-reveal>
          <header class="faq-sec__head">
            <span class="faq-sec__no">02</span>
            <h2 class="faq-sec__title">桌面端切换</h2>
            <p class="faq-sec__note">换一台机器继续干活</p>
          </header>
          <div class="faq-sec__cols">
            <div class="faq-list">
              <details class="faq-q">
                <summary>
                  <span class="faq-q__no">Q2.1</span>
                  <h3 class="faq-q__text">换了电脑，切换入口在导航的哪一项？</h3>
                  <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </summary>
                <div class="faq-q__ans">
                  <p>2026 年 6 月版本起，切换入口位于主导航第二项。换设备后直接登录即可，不必再绕到其他页面去找。</p>
                  <p>旧书签如果还指着原来的位置，改成新入口后重新保存一次，下次就能一步到位。</p>
                </div>
              </details>
              <details class="faq-q">
                <summary>
                  <span class="faq-q__no">Q2.2</span>
                  <h3 class="faq-q__text">桌面端和手机来回切，之前的进度会丢吗？</h3>
                  <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </summary>
                <div class="faq-q__ans">
                  <p>不会。同一账号在桌面端与移动端之间切换时，最近访问的栏目路径与筛选条件会保留下来，换个屏幕接着看就行。</p>
                </div>
              </details>
              <details class="faq-q">
                <summary>
                  <span class="faq-q__no">Q2.3</span>
                  <h3 class="faq-q__text">切换之后看不到原来那批栏目，怎么查？</h3>
                  <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </summary>
                <div class="faq-q__ans">
                  <p>先在方向带上确认当前栏目编号，再核对登录的账号是不是原来那一个。编号对得上、栏目却没出现，把编号和登录时间发到客服邮箱，我们按编号往下查。</p>
                </div>
              </details>
            </div>
            <figure class="faq-figure faq-figure--side" data-reveal data-reveal-delay="80">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面端主导航第二项切换入口的局部界面截图，已做抽象化处理" loading="lazy" decoding="async">
              <figcaption class="faq-figure__cap">切换入口就在主导航第二项。</figcaption>
            </figure>
          </div>
        </section>

        <section class="faq-sec" id="export" data-reveal>
          <header class="faq-sec__head">
            <span class="faq-sec__no">03</span>
            <h2 class="faq-sec__title">回访用户导出</h2>
            <p class="faq-sec__note">把记录拿走、交出去</p>
          </header>
          <div class="faq-list">
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q3.1</span>
                <h3 class="faq-q__text">导出的文件里有哪些字段，能给什么格式？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>文件包含栏目编号、入口位置、更新时间与维护状态四项，支持 CSV 与 XLSX 两种格式。按栏目编号导出时只出这个栏目的记录，方便直接交给同事或并入周报。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q3.2</span>
                <h3 class="faq-q__text">记录能往前追多久，多久导一次合适？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>维护记录保存最近 24 个月，超过这个期限的记录可以按栏目编号申请归档包。</p>
                <p>多数回访团队按月导一次，和维护日志一起存档；回访用户导出月均约 1.7 万次，这套节奏跑起来并不费事。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q3.3</span>
                <h3 class="faq-q__text">点了导出却没拿到文件，该从哪儿查起？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>先确认栏目编号的记录是否还在保存期限内，再看筛选条件有没有把结果筛空，然后换另一种格式重试一次。</p>
                <p>仍然没有结果，就把栏目编号、导出时间和登录账号发到客服邮箱，主题注明「利记咨询」，我们会顺着编号查这条记录的出口。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-sec" id="column" data-reveal>
          <header class="faq-sec__head">
            <span class="faq-sec__no">04</span>
            <h2 class="faq-sec__title">栏目页与入口卡</h2>
            <p class="faq-sec__note">改版前后怎么对得上</p>
          </header>
          <div class="faq-list">
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q4.1</span>
                <h3 class="faq-q__text">栏目编号在哪里能看到？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>每个栏目页顶部都有一条横向方向带，标着当前栏目与下一步入口，编号和入口卡片一一对应。这套写法自 2023 年起在全站沿用，位置几年下来没怎么动过。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q4.2</span>
                <h3 class="faq-q__text">入口位置调整过，以前的截图还能参考吗？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>2024 年统一过入口卡片样式，导航顺序后来又调整过一次，素材和界面对不上属于正常。以方向带上的编号为准，编号没变，就还是同一个栏目。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q4.3</span>
                <h3 class="faq-q__text">栏目页改版完，怎么确认入口没有漏掉？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>平台提供栏目页健康检查，看四项：入口可达性、方向带完整性、编号连续性、导出字段完整性。栏目页模板共 12 个版式，分入口指引、设备切换、下载与导出、维护记录四类，按类别逐项过一遍就齐了。</p>
                <p>改版后的差异，也可以到<a href="/column/">维护专栏</a>看对应版本的说明。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-sec" id="device" data-reveal>
          <header class="faq-sec__head">
            <span class="faq-sec__no">05</span>
            <h2 class="faq-sec__title">账号与兼容</h2>
            <p class="faq-sec__note">设备换着用，权限别掉队</p>
          </header>
          <div class="faq-list">
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q5.1</span>
                <h3 class="faq-q__text">一个账号能在几台设备上用？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>同一账号可以在桌面端与移动端同时使用，两边的栏目路径与筛选条件保持一致。团队里多人协作时，建议一个栏目固定由一个人维护编号，省得来回对不上。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q5.2</span>
                <h3 class="faq-q__text">系统版本比较旧，还能不能装桌面端？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>Windows 10 及以上、macOS 12 及以上都支持。低于这两个版本的系统请先用浏览器访问，栏目页照常可用；需要长年留在旧系统的机器，可以把情况写进咨询邮件，我们给出替代路径。</p>
              </div>
            </details>
            <details class="faq-q">
              <summary>
                <span class="faq-q__no">Q5.3</span>
                <h3 class="faq-q__text">账号、设备与导出记录里的信息是怎么处理的？</h3>
                <svg class="faq-q__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </summary>
              <div class="faq-q__ans">
                <p>收集范围、使用方式、保存期限和你可行使的权利，都写在<a href="/personal-data/">个人信息说明</a>里，需要时逐条查看即可。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-help" id="help" aria-labelledby="help-title" data-reveal>
          <div class="faq-help__main">
            <h2 class="faq-help__title" id="help-title">还没解决？直接问人</h2>
            <p class="faq-help__text">
              把问题、栏目编号和设备系统写进邮件正文，主题注明「利记咨询」，处理起来会快一些。
              客服邮箱工作日 9:00-18:00 有专人查阅；电话和地址同样可以联系到我们。
            </p>
            <a class="faq-help__btn" href="/find-us/">查看联系方式<span class="faq-help__arrow" aria-hidden="true">→</span></a>
          </div>
          <div class="faq-help__side">
            <div class="faq-help__row">
              <span class="faq-help__k">邮箱</span>
              <p class="faq-help__v">contact@zhidao-liji.com.cn</p>
            </div>
            <div class="faq-help__row">
              <span class="faq-help__k">电话</span>
              <p class="faq-help__v">400-4821-2070</p>
            </div>
            <div class="faq-help__row">
              <span class="faq-help__k">地址</span>
              <p class="faq-help__v">北京市朝阳区利泽中一路1号院2号楼8层801</p>
            </div>
            <div class="faq-help__row">
              <span class="faq-help__k">查阅时间</span>
              <p class="faq-help__v">工作日 9:00-18:00</p>
            </div>
          </div>
        </section>

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

.page-faq{
  --faq-soft:rgba(247,245,239,.82);
  --faq-pad:clamp(26px,4vw,52px);
  color:var(--lj-ink);
}

.page-faq .faq-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-crumbs li{display:inline-flex;align-items:center;gap:8px;}
.page-faq .faq-crumbs li + li::before{content:"/";color:var(--lj-concrete);}
.page-faq .faq-crumbs a{color:var(--lj-ink-mid);text-decoration:none;}
.page-faq .faq-crumbs a:hover{color:var(--lj-ink-deep);text-decoration:underline;text-underline-offset:3px;}

.page-faq .faq-hero{
  display:grid;
  gap:clamp(24px,4vw,52px);
  align-items:end;
  padding:clamp(20px,3.2vw,38px) 0 clamp(26px,4vw,54px);
  border-bottom:1px solid var(--lj-rule);
}
.page-faq .faq-hero__head{min-width:0;}

.page-faq .faq-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:20px 0 0;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-ink-mid);
}
.page-faq .faq-kicker::before{
  content:"";
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--lj-yellow);
}

.page-faq .faq-hero__title{
  margin:16px 0 0;
  font-size:clamp(33px,6vw,64px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--lj-ink-deep);
}

.page-faq .faq-hero__lede{
  max-width:34em;
  margin:18px 0 0;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.72;
  color:var(--lj-ink-mid);
}

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

.page-faq .faq-figure{
  margin:0;
  min-width:0;
}
.page-faq .faq-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:var(--lj-radius-lg);
  object-fit:cover;
  background:var(--lj-concrete);
  box-shadow:var(--lj-shadow-soft);
}
.page-faq .faq-figure__cap{
  margin:12px 0 0;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--lj-concrete-deep);
}

.page-faq .faq-scenes-wrap{
  padding:clamp(20px,3vw,32px) 0 clamp(4px,1vw,10px);
}
.page-faq .faq-scenes__label{
  margin:0;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-scenes{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:12px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-scene{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border:1px solid var(--lj-rule-strong);
  border-radius:var(--lj-pill);
  background:var(--lj-paper-bright);
  color:var(--lj-ink);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.page-faq .faq-scene__no{
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-scene:hover,
.page-faq .faq-scene:focus-visible{
  background:var(--lj-yellow);
  border-color:var(--lj-yellow-deep);
  color:var(--lj-ink-deep);
  transform:translateY(-2px);
}
.page-faq .faq-scene:hover .faq-scene__no,
.page-faq .faq-scene:focus-visible .faq-scene__no{color:var(--lj-ink-deep);}

.page-faq .faq-body{
  display:grid;
  gap:clamp(22px,3vw,38px);
  padding:clamp(18px,2.6vw,28px) 0 clamp(44px,6vw,84px);
}
.page-faq .faq-toc{display:none;min-width:0;}
.page-faq .faq-toc__inner{position:sticky;top:118px;}
.page-faq .faq-toc__title{
  margin:0 0 12px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-toc ul{margin:0;padding:0;list-style:none;}
.page-faq .faq-toc a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--lj-rule);
  font-size:13px;
  line-height:1.5;
  color:var(--lj-ink-mid);
  text-decoration:none;
  transition:color .18s ease,padding-left .18s ease;
}
.page-faq .faq-toc a span{
  font-family:var(--lj-font-mono);
  font-size:11px;
  color:var(--lj-yellow-deep);
}
.page-faq .faq-toc a:hover{
  color:var(--lj-ink-deep);
  padding-left:6px;
}
.page-faq .faq-sections{min-width:0;}

.page-faq .faq-sec + .faq-sec{
  margin-top:clamp(36px,5vw,64px);
  padding-top:clamp(26px,3.6vw,44px);
  border-top:1px solid var(--lj-rule);
}
.page-faq .faq-sec__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin:0 0 clamp(14px,2vw,20px);
}
.page-faq .faq-sec__no{
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--lj-yellow-deep);
}
.page-faq .faq-sec__title{
  margin:0;
  font-size:clamp(21px,2.6vw,30px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--lj-ink-deep);
}
.page-faq .faq-sec__note{
  margin:0;
  margin-left:auto;
  font-family:var(--lj-font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--lj-concrete-deep);
}

.page-faq .faq-sec__cols{
  display:grid;
  gap:clamp(20px,3vw,34px);
  align-items:start;
}
.page-faq .faq-figure--side img{border-radius:var(--lj-radius);}

.page-faq .faq-list{min-width:0;}

.page-faq .faq-q{
  border-top:1px solid var(--lj-rule);
}
.page-faq .faq-q:last-child{border-bottom:1px solid var(--lj-rule);}
.page-faq .faq-q summary{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
}
.page-faq .faq-q summary::-webkit-details-marker{display:none;}
.page-faq .faq-q summary::marker{content:"";}
.page-faq .faq-q__no{
  flex:0 0 auto;
  padding-top:4px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--lj-concrete-deep);
}
.page-faq .faq-q__text{
  margin:0;
  font-size:clamp(15px,1.6vw,18px);
  font-weight:600;
  line-height:1.55;
  color:var(--lj-ink-deep);
  transition:color .16s ease;
}
.page-faq .faq-q summary:hover .faq-q__text{color:var(--lj-yellow-deep);}
.page-faq .faq-q__icon{
  flex:0 0 auto;
  margin-top:5px;
  margin-left:auto;
  color:var(--lj-yellow-deep);
  transition:transform .2s ease;
}
.page-faq .faq-q[open] .faq-q__icon{transform:rotate(90deg);}
.page-faq .faq-q[open] .faq-q__text{color:var(--lj-ink-deep);}
.page-faq .faq-q__ans{padding:2px 0 22px 0;}
.page-faq .faq-q__ans p{
  max-width:62ch;
  margin:0 0 10px;
  padding-left:15px;
  border-left:3px solid var(--lj-yellow);
  font-size:15px;
  line-height:1.78;
  color:var(--lj-ink);
}
.page-faq .faq-q__ans p:last-child{margin-bottom:0;}
.page-faq .faq-q__ans a{
  color:var(--lj-ink-deep);
  text-decoration:underline;
  text-decoration-color:var(--lj-yellow-deep);
  text-underline-offset:3px;
}
.page-faq .faq-q__ans a:hover{color:var(--lj-yellow-deep);}

.page-faq .faq-help{
  margin-top:clamp(42px,6vw,80px);
  padding:var(--faq-pad);
  border-radius:var(--lj-radius-lg);
  background-color:var(--lj-ink);
  background-image:repeating-linear-gradient(90deg,var(--lj-yellow) 0 18px,transparent 18px 36px);
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:0 0;
  display:grid;
  gap:clamp(22px,3vw,40px);
  color:var(--lj-paper);
}
.page-faq .faq-help__main{min-width:0;}
.page-faq .faq-help__title{
  margin:0 0 14px;
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--lj-paper-bright);
}
.page-faq .faq-help__text{
  max-width:36em;
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--faq-soft);
}
.page-faq .faq-help__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding:12px 26px;
  border-radius:var(--lj-pill);
  background:var(--lj-yellow);
  color:var(--lj-ink-deep);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.page-faq .faq-help__arrow{transition:transform .18s ease;}
.page-faq .faq-help__btn:hover{background:var(--lj-yellow-soft);transform:translateX(3px);}
.page-faq .faq-help__btn:hover .faq-help__arrow{transform:translateX(3px);}
.page-faq .faq-help__side{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
}
.page-faq .faq-help__row{
  padding-bottom:12px;
  border-bottom:1px solid var(--lj-light-rule);
}
.page-faq .faq-help__row:last-child{border-bottom:0;padding-bottom:0;}
.page-faq .faq-help__k{
  display:block;
  margin-bottom:4px;
  font-family:var(--lj-font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lj-yellow);
}
.page-faq .faq-help__v{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--lj-paper);
  overflow-wrap:anywhere;
}

@media (min-width:720px){
  .page-faq .faq-q__ans{padding-left:34px;}
}

@media (min-width:900px){
  .page-faq .faq-hero{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  }
  .page-faq .faq-sec__cols{
    grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  }
  .page-faq .faq-help{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:start;
  }
}

@media (min-width:1080px){
  .page-faq .faq-body{
    grid-template-columns:190px minmax(0,1fr);
    gap:clamp(30px,4vw,64px);
  }
  .page-faq .faq-toc{display:block;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-scene,
  .page-faq .faq-q__icon,
  .page-faq .faq-q__text,
  .page-faq .faq-help__btn,
  .page-faq .faq-help__arrow,
  .page-faq .faq-toc a{transition:none;}
  .page-faq .faq-scene:hover,
  .page-faq .faq-scene:focus-visible,
  .page-faq .faq-help__btn:hover,
  .page-faq .faq-help__btn:hover .faq-help__arrow{transform:none;}
}