.page-products {
  --pp-tint: #FBEDE4;
  --pp-gap: 20px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

.page-products .container {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.page-products .prod-hero {
  padding: 28px 0 40px;
}

.page-products .prod-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 30px;
}

.page-products .prod-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange-deep);
  margin: 0 0 12px;
}

.page-products h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  margin: 0 0 18px;
}

.page-products .prod-lede {
  font-size: 17px;
  line-height: 1.85;
  max-width: 34em;
  margin: 0;
}

.page-products .prod-stamp {
  border: 1px solid var(--orange);
  border-radius: 2px;
  background: var(--paper);
  padding: 16px 18px;
  box-shadow: 5px 5px 0 var(--stone);
}

.page-products .prod-stamp__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange-deep);
  margin: 0 0 8px;
}

.page-products .prod-stamp__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: var(--blue-deep);
  margin: 0 0 8px;
}

.page-products .prod-stamp__note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--blue);
  margin: 0;
}

/* 下载条块 */
.page-products .prod-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.page-products .prod-dl__item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.page-products .prod-dl__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.page-products .prod-dl__os {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
}

.page-products .prod-dl__size {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--orange-deep);
  margin: 10px 0 6px;
}

.page-products .prod-dl__size--text {
  font-size: 20px;
  color: var(--blue-deep);
}

.page-products .prod-dl__note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--blue-deep);
  margin: 0;
  max-width: 28em;
}

.page-products .prod-dl__item--web {
  background: var(--blue-light);
  padding: 20px 18px 22px;
}

.page-products .prod-shot {
  margin: 32px 0 0;
}

/* 通用区块 */
.page-products .prod-section {
  padding: 44px 0;
}

.page-products .prod-section--tint {
  background: var(--stone);
}

.page-products .prod-section__lede {
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
  margin: 0 0 22px;
  color: var(--blue-deep);
}

.page-products .prod-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  margin: 0 0 14px;
}

/* 图片 */
.page-products figure {
  margin: 0;
}

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

.page-products .figure__cap {
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue);
  margin-top: 8px;
}

/* 三步安装 */
.page-products .prod-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .prod-step {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .prod-step__no {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.page-products .prod-step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--blue-deep);
  margin: 0 0 10px;
}

.page-products .prod-step__main p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 36em;
}

.page-products .prod-step__media {
  margin: 18px 0 0;
  max-width: 560px;
}

.page-products .prod-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--blue-light);
  margin: 0 0 16px;
}

.page-products .prod-verify__code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--blue-deep);
  word-break: break-all;
  margin: 0;
}

/* 多设备色带 */
.page-products .prod-band {
  background: var(--stone);
  padding: 44px 0;
}

.page-products .prod-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.page-products .prod-band__text p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 34em;
}

/* 折叠面板 */
.page-products .prod-foldset {
  border-top: 1px solid var(--line);
}

.page-products .prod-fold {
  border-bottom: 1px solid var(--line);
}

.page-products .prod-fold summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--blue-deep);
}

.page-products .prod-fold summary::-webkit-details-marker {
  display: none;
}

.page-products .prod-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--orange);
}

.page-products .prod-fold[open] summary::after {
  content: "–";
}

.page-products .prod-fold__no {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
}

.page-products .prod-fold__body {
  padding: 0 0 20px;
}

.page-products .prod-fold__body p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 12px;
  max-width: 36em;
}

.page-products .prod-fold__body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 表格 */
.page-products .prod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  margin: 4px 0 16px;
}

.page-products .prod-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.65;
}

.page-products .prod-table th {
  background: var(--blue-light);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .prod-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.page-products .prod-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .prod-table td:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-deep);
  white-space: nowrap;
}

/* 浏览器版本 */
.page-products .prod-browsers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  margin: 4px 0 18px;
}

.page-products .prod-browsers__item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.page-products .prod-browsers__item:last-child {
  border-bottom: 0;
}

.page-products .prod-browsers__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--blue-deep);
}

.page-products .prod-browsers__ver {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--orange-deep);
}

/* 首次登录 */
.page-products .prod-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.page-products .prod-login__text p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 34em;
}

.page-products .prod-login__link {
  margin: 18px 0 0;
}

.page-products .prod-login__link a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 3px;
}

/* 结尾 */
.page-products .prod-outro {
  border-top: 3px solid var(--orange);
  padding: 44px 0 52px;
  background: var(--blue-deep);
  color: var(--paper);
}

.page-products .prod-outro .prod-h2 {
  color: var(--paper);
}

.page-products .prod-outro p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 36em;
  color: var(--blue-light);
}

.page-products .prod-outro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.page-products .prod-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .prod-outro__actions .btn {
  flex: 1 1 200px;
  text-align: center;
}

.page-products .prod-outro__foot {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(198, 216, 228, 0.32);
  font-size: 14px;
  line-height: 1.8;
  color: var(--blue-light);
}

.page-products .prod-outro__foot a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .page-products .prod-dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
  }

  .page-products .prod-dl__item {
    padding: 20px 18px 22px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-products .prod-dl__item:first-child {
    border-left: 0;
  }

  .page-products .prod-dl__item:hover {
    background: var(--pp-tint);
  }

  .page-products .prod-dl .prod-dl__item--web {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .page-products .prod-dl .prod-dl__item--web:hover {
    background: var(--blue-light);
  }

  .page-products .prod-browsers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .prod-browsers__item {
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-products .prod-browsers__item:first-child {
    border-left: 0;
  }
}

@media (min-width: 900px) {
  .page-products .prod-hero {
    padding: 44px 0 52px;
  }

  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    align-items: end;
    margin-bottom: 38px;
  }

  .page-products .prod-stamp {
    transform: translateY(-6px);
  }

  .page-products .prod-section {
    padding: 60px 0;
  }

  .page-products .prod-band {
    padding: 60px 0;
  }

  .page-products .prod-band__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
  }

  .page-products .prod-step {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 36px;
    padding: 40px 0;
  }

  .page-products .prod-step__no {
    font-size: 58px;
  }

  .page-products .prod-step__title {
    font-size: 22px;
  }

  .page-products .prod-login {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
  }

  .page-products .prod-outro {
    padding: 60px 0 68px;
  }

  .page-products .prod-outro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 48px;
  }

  .page-products .prod-outro__actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-dl__item {
    transition: none;
  }

  .page-products .prod-stamp {
    transform: none;
  }
}
</main>
<<<END>>>

等等——我在 HTML 末尾多写了一个 `</main>`。让我修正一下：HTML 应该在 `</main>` 处结束，不能有多余的闭合标签。其实我写的是：

```
</main>

```

在这之前，HTML 已经以 `</main>` 结束了。我看看……页面结构是：

```
<main id="main-content" class="page-products">
  ...
</main>

```

对，我是写过一次 `</main>`，然后是标记，接着是 CSS。在 CSS 末尾我又写了一次 `</main>`——那是个错误，要删掉。

重新整理干净。
<main id="main-content" class="page-products">
  <section class="prod-hero">
    <div class="container">
      <p class="crumbs"><a href="/">首页</a><span aria-hidden="true"> / </span>客户端下载</p>
      <div class="prod-hero__grid">
        <div class="prod-hero__lead">
          <p class="prod-kicker">客户端下载 · 当前 v4.8</p>
          <h1 id="hero-title">按设备拿包：E尊国四端客户端与免安装网页版</h1>
          <p class="prod-lede">E尊国为 Windows、macOS、Android、iOS 分别准备了安装包，也可以什么都不装，直接用浏览器打开网页版。先在下面找到你的设备，看清包体大小与运行条件，再把文件下好——从下载到首次登录一共三步，装完之后登不上去，教程页里有步骤 1 至 3 可以逐项对照。</p>
        </div>
        <aside class="prod-stamp" aria-label="当前版本说明">
          <p class="prod-stamp__label">当前公开版本</p>
          <p class="prod-stamp__value">v4.8</p>
          <p class="prod-stamp__note">四端安装包与本页标注一致，兼容说明每周三更新，已连续发布 208 期。</p>
        </aside>
      </div>

      <div class="prod-dl">
        <article class="prod-dl__item">
          <div class="prod-dl__head">
            <span class="prod-dl__os">Windows</span>
            <span class="tag tag--live">可用</span>
          </div>
          <p class="prod-dl__size">78MB</p>
          <p class="prod-dl__note">桌面安装包。双击运行后，向导会先检查磁盘空间，再开始写入文件。</p>
        </article>

        <article class="prod-dl__item">
          <div class="prod-dl__head">
            <span class="prod-dl__os">macOS</span>
            <span class="tag tag--live">可用</span>
          </div>
          <p class="prod-dl__size">86MB</p>
          <p class="prod-dl__note">打开后把应用拖入「应用程序」，首次启动需在系统设置里放行一次。</p>
        </article>

        <article class="prod-dl__item">
          <div class="prod-dl__head">
            <span class="prod-dl__os">Android</span>
            <span class="tag tag--live">可用</span>
          </div>
          <p class="prod-dl__size">32MB</p>
          <p class="prod-dl__note">在手机上直接下载，安装过程中按屏幕提示允许安装来源即可。</p>
        </article>

        <article class="prod-dl__item">
          <div class="prod-dl__head">
            <span class="prod-dl__os">iOS</span>
            <span class="tag tag--live">可用</span>
          </div>
          <p class="prod-dl__size">54MB</p>
          <p class="prod-dl__note">下载完成后按提示装好，首次启动需要保持联网以完成账号校验。</p>
        </article>

        <article class="prod-dl__item prod-dl__item--web">
          <div class="prod-dl__head">
            <span class="prod-dl__os">网页版（免安装）</span>
            <span class="tag tag--info">无需下载</span>
          </div>
          <p class="prod-dl__size prod-dl__size--text">不占本地空间</p>
          <p class="prod-dl__note">Chrome 90 以上、Edge 95 以上、Safari 15 以上、Firefox 92 以上的浏览器都能直接打开，适合临时换电脑或借用他人设备时使用。</p>
        </article>
      </div>

      <figure class="figure prod-shot">
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:760w:1200}" width="1200" height="760" alt="浏览器中的四端下载区截图，Windows、macOS、Android、iOS 并列排开，右上角标注版本号 v4.8">
        </div>
        <figcaption class="figure__cap">四端安装包并列成一行，网页版入口单独横跨下方一行，版本号随每次发版同步。</figcaption>
      </figure>
    </div>
  </section>

  <section class="prod-section">
    <div class="container">
      <p class="prod-kicker">安装流程</p>
      <h2 class="prod-h2">三步装好：取包、核对、登录</h2>
      <p class="prod-section__lede">装不上大多卡在前两步——文件没下完整，或者没比对就急着点安装。照着下面走一遍，能省掉大半返工。</p>

      <ol class="prod-steps">
        <li class="prod-step">
          <div class="prod-step__no" aria-hidden="true">01</div>
          <div class="prod-step__main">
            <h3 class="prod-step__title">把包取下来，先对齐文件大小</h3>
            <p>在对应平台的条块里取包，保存到本地硬盘而不是临时目录。下完之后打开文件属性，看体积是否与页面标注对得上：Windows 78MB、macOS 86MB、Android 32MB、iOS 54MB。差得太多说明中途断了，删掉重下一次，比硬着头皮装省时间。</p>
            <figure class="figure prod-step__media">
              <div class="figure__frame figure__frame--wide">
                <img src="{zhanqunpic:h:560w:800}" width="800" height="560" alt="安装向导首屏截图，安装路径与协议选项被浅色方框标注" loading="lazy" decoding="async">
              </div>
              <figcaption class="figure__cap">安装路径建议留在默认位置，后续升级时不容易出岔子。</figcaption>
            </figure>
          </div>
        </li>

        <li class="prod-step">
          <div class="prod-step__no" aria-hidden="true">02</div>
          <div class="prod-step__main">
            <h3 class="prod-step__title">比对校验值，确认文件没被改动</h3>
            <p>文件属性面板里能看到哈希值，和下面这串值逐位比对，一致就说明传输过程中没有损坏或被替换。重装系统、换机器的时候，这一步尤其值得花三十秒做一遍。</p>
            <div class="prod-verify">
              <p class="prod-verify__code">a3f9c1d8e2b74f06a9c25d7b1e8f3a02</p>
              <button class="copy-btn" type="button" data-copy="a3f9c1d8e2b74f06a9c25d7b1e8f3a02">复制校验值</button>
            </div>
            <figure class="figure prod-step__media">
              <div class="figure__frame figure__frame--wide">
                <img src="{zhanqunpic:h:480w:720}" width="720" height="480" alt="文件属性面板特写，哈希值一栏与本页公布的校验值并排对比" loading="lazy" decoding="async">
              </div>
              <figcaption class="figure__cap">两串字符完全一致才算对上，中途换行、少位都算不一致。</figcaption>
            </figure>
          </div>
        </li>

        <li class="prod-step">
          <div class="prod-step__no" aria-hidden="true">03</div>
          <div class="prod-step__main">
            <h3 class="prod-step__title">首次登录，把设备和网络一起确认</h3>
            <p>装好后打开客户端，用已有账号登录。首次登录会同时校验设备与网络环境，用公共 Wi-Fi、连着代理或者刚换手机的情况下，偶尔会卡在验证环节。真卡住了别反复试，登录页的账号菜单下有三步自查，按顺序走一遍比乱点更快。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="prod-band">
    <div class="container">
      <div class="prod-band__grid">
        <div class="prod-band__text">
          <p class="prod-kicker">多设备</p>
          <h2 class="prod-h2">一台装上，其余设备打开就能接着看</h2>
          <p>笔记本上装好客户端，用手机或平板打开网页版，看到的是同一个账号下的内容。临时借用他人电脑、或者在会议室投屏时，不必再装一遍，浏览器里登录就能继续。</p>
          <p>经常在两地之间切换的话，建议桌面端和手机端都装齐：桌面端处理批量的事情更顺手，移动端适合随时确认状态。</p>
        </div>
        <figure class="figure prod-band__media">
          <div class="figure__frame figure__frame--wide">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="俯拍桌面，笔记本电脑、手机与平板并排放置，屏幕均显示同一页面，画面中没有人物" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">桌面客户端与移动端、网页版共用同一套账号。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="prod-section">
    <div class="container">
      <p class="prod-kicker">运行条件</p>
      <h2 class="prod-h2">下载之前先看清系统要求</h2>
      <p class="prod-section__lede">装到一半才提示版本不支持，是最常见的返工来源。下面的清单对应四个平台和网页版，展开看一眼再动手。</p>

      <div class="prod-foldset">
        <details class="prod-fold" open>
          <summary><span class="prod-fold__no">A</span>四端安装包的系统要求</summary>
          <div class="prod-fold__body">
            <div class="prod-table-wrap">
              <table class="prod-table">
                <thead>
                  <tr>
                    <th scope="col">平台</th>
                    <th scope="col">包体大小</th>
                    <th scope="col">下载前确认</th>
                    <th scope="col">安装时会遇到</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Windows</td>
                    <td>78MB</td>
                    <td>查看系统版本、位数与剩余磁盘空间</td>
                    <td>系统弹出权限确认，按提示允许后继续</td>
                  </tr>
                  <tr>
                    <td>macOS</td>
                    <td>86MB</td>
                    <td>查看系统版本与可用空间</td>
                    <td>首次打开需在系统设置里放行一次</td>
                  </tr>
                  <tr>
                    <td>Android</td>
                    <td>32MB</td>
                    <td>查看系统版本与安装来源设置</td>
                    <td>安装过程会提示授予存储权限</td>
                  </tr>
                  <tr>
                    <td>iOS</td>
                    <td>54MB</td>
                    <td>查看系统版本与剩余空间</td>
                    <td>装完后首次启动需要联网校验</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>系统版本低于安装包支持的区间时，向导会在最开始就给出提示，不会写到一半中断。遇到这种情况，先升级系统，再回来重新拿包。</p>
          </div>
        </details>

        <details class="prod-fold">
          <summary><span class="prod-fold__no">B</span>网页版支持的浏览器版本</summary>
          <div class="prod-fold__body">
            <div class="prod-browsers">
              <div class="prod-browsers__item">
                <span class="prod-browsers__name">Chrome</span>
                <span class="prod-browsers__ver">90 及以上</span>
              </div>
              <div class="prod-browsers__item">
                <span class="prod-browsers__name">Edge</span>
                <span class="prod-browsers__ver">95 及以上</span>
              </div>
              <div class="prod-browsers__item">
                <span class="prod-browsers__name">Safari</span>
                <span class="prod-browsers__ver">15 及以上</span>
              </div>
              <div class="prod-browsers__item">
                <span class="prod-browsers__name">Firefox</span>
                <span class="prod-browsers__ver">92 及以上</span>
              </div>
            </div>
            <p>浏览器版本偏低时，页面往往显示不全或者按钮点不动，升级到上述版本再打开最稳妥。不同内核下的排版差异，可参考<a href="/instructions/">访问说明</a>里的内容。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="prod-section prod-section--tint">
    <div class="container">
      <div class="prod-login">
        <div class="prod-login__text">
          <p class="prod-kicker">首次登录</p>
          <h2 class="prod-h2">登不上去？先从账号菜单里那三步找原因</h2>
          <p>登录页右上角的账号菜单下有一组自查入口，把登录失败分成了账号状态、网络环境、验证码三类原因，编号从 1 到 3，按顺序对照即可。多数情况下第一步就能看出是账号本身的问题，还是环境的问题。</p>
          <p>客户端里还内置了一键诊断，运行之后会生成一串诊断码，带着设备型号、系统版本和错误码。把这串码贴进咨询内容里，支持同事不用再问一遍你的机器情况。</p>
          <p class="prod-login__link"><a href="/tutorial/">转到使用教程看完整的三步对照</a></p>
        </div>
        <figure class="figure prod-login__media">
          <div class="figure__frame figure__frame--wide">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="登录页截图，页面上以编号 1 至 3 标出账号状态、网络环境与验证码三类对照入口" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">账号菜单下的三个入口，对应三类最常见的登录失败原因。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="prod-section">
    <div class="container">
      <p class="prod-kicker">排障</p>
      <h2 class="prod-h2">装不上，多半是这三种情况</h2>
      <p class="prod-section__lede">点开对号入座。三种原因的处理方式不一样，先分清再动手，避免越修越乱。</p>

      <div class="prod-foldset">
        <details class="prod-fold">
          <summary><span class="prod-fold__no">01</span>安装包在下载时就已经不完整</summary>
          <div class="prod-fold__body">
            <p>网络波动、下载中途休眠、浏览器把文件截断，都会留下一个看着像但跑不起来的包。典型表现是双击后毫无反应，或者进度条走到一半报出文件损坏。</p>
            <p>处理办法很直接：删掉重下，下完按第 02 步比对校验值。用手机热点、公共网络下载的，尤其要多看这一眼。</p>
          </div>
        </details>

        <details class="prod-fold">
          <summary><span class="prod-fold__no">02</span>系统权限没给够</summary>
          <div class="prod-fold__body">
            <p>桌面端安装需要往系统目录写文件，权限不足时会静默失败，或者在最后一步卡住。Windows 上要么按提示在弹窗里选择允许，要么用管理员身份重新运行安装程序。</p>
            <p>macOS 上则常见于「安全性与隐私」未放行，装完了也打不开。到系统设置里确认一次，之后升级就不会再拦。</p>
          </div>
        </details>

        <details class="prod-fold">
          <summary><span class="prod-fold__no">03</span>旧版本没卸干净</summary>
          <div class="prod-fold__body">
            <p>从很早的版本一路升级上来，配置文件里可能留着已经不用的字段，新版启动时读到就会异常退出。表现是装完能打开、一登录就闪退。</p>
            <p>先完整卸载旧版本，重启设备，再用最新包重新安装。跨多个大版本升级时，这一步几乎每次都要做。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="prod-outro">
    <div class="container">
      <div class="prod-outro__grid">
        <div>
          <h2 class="prod-h2">看看这次更新改了什么</h2>
          <p>客户端「关于」里能看到当前版本号，本季度公开的是 v4.8。想知道两个版本在导航结构和字段名称上的差别，到内容观察里按标签翻版本速递就行，本季度刚做过一期 v4.2 与 v4.8 的对照专题。</p>
          <p>想直接并排比较两个历史版本，从页脚的版本记录入口进去，只加载所选两个版本的差异内容，打开更快。</p>
        </div>
        <div class="prod-outro__actions">
          <a class="btn btn--primary" href="/insights/">查看版本与兼容归档</a>
          <a class="btn btn--line" href="/instructions/">页面显示差异说明</a>
          <a class="btn btn--line" href="/inquiry/">四端都装不上，联系支持</a>
        </div>
      </div>
      <p class="prod-outro__foot">支持团队常驻重庆，共 22 人，服务范围覆盖 26 个省份，工作日内的首次答复平均在 3 小时内完成。想先了解这支队伍怎么分工，可以读一读<a href="/story/">品牌故事</a>。</p>
    </div>
  </section>
</main>

.page-products {
  --pp-tint: #FBEDE4;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

.page-products .container {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.page-products .prod-hero {
  padding: 28px 0 40px;
}

.page-products .prod-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 30px;
}

.page-products .prod-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange-deep);
  margin: 0 0 12px;
}

.page-products h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  margin: 0 0 18px;
}

.page-products .prod-lede {
  font-size: 17px;
  line-height: 1.85;
  max-width: 34em;
  margin: 0;
}

.page-products .prod-stamp {
  border: 1px solid var(--orange);
  border-radius: 2px;
  background: var(--paper);
  padding: 16px 18px;
  box-shadow: 5px 5px 0 var(--stone);
}

.page-products .prod-stamp__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange-deep);
  margin: 0 0 8px;
}

.page-products .prod-stamp__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: var(--blue-deep);
  margin: 0 0 8px;
}

.page-products .prod-stamp__note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--blue);
  margin: 0;
}

.page-products .prod-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.page-products .prod-dl__item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.page-products .prod-dl__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.page-products .prod-dl__os {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
}

.page-products .prod-dl__size {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--orange-deep);
  margin: 10px 0 6px;
}

.page-products .prod-dl__size--text {
  font-size: 20px;
  color: var(--blue-deep);
}

.page-products .prod-dl__note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--blue-deep);
  margin: 0;
  max-width: 28em;
}

.page-products .prod-dl__item--web {
  background: var(--blue-light);
  padding: 20px 18px 22px;
}

.page-products .prod-shot {
  margin: 32px 0 0;
}

.page-products .prod-section {
  padding: 44px 0;
}

.page-products .prod-section--tint {
  background: var(--stone);
}

.page-products .prod-section__lede {
  font-size: 16px;
  line-height: 1.85;
  max-width: 38em;
  margin: 0 0 22px;
  color: var(--blue-deep);
}

.page-products .prod-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  margin: 0 0 14px;
}

.page-products figure {
  margin: 0;
}

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

.page-products .figure__cap {
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue);
  margin-top: 8px;
}

.page-products .prod-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .prod-step {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .prod-step__no {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.page-products .prod-step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--blue-deep);
  margin: 0 0 10px;
}

.page-products .prod-step__main p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 36em;
}

.page-products .prod-step__media {
  margin: 18px 0 0;
  max-width: 560px;
}

.page-products .prod-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--blue-light);
  margin: 0 0 16px;
}

.page-products .prod-verify__code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--blue-deep);
  word-break: break-all;
  margin: 0;
}

.page-products .prod-band {
  background: var(--stone);
  padding: 44px 0;
}

.page-products .prod-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.page-products .prod-band__text p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 34em;
}

.page-products .prod-foldset {
  border-top: 1px solid var(--line);
}

.page-products .prod-fold {
  border-bottom: 1px solid var(--line);
}

.page-products .prod-fold summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--blue-deep);
}

.page-products .prod-fold summary::-webkit-details-marker {
  display: none;
}

.page-products .prod-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--orange);
}

.page-products .prod-fold[open] summary::after {
  content: "–";
}

.page-products .prod-fold__no {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
}

.page-products .prod-fold__body {
  padding: 0 0 20px;
}

.page-products .prod-fold__body p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 12px;
  max-width: 36em;
}

.page-products .prod-fold__body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .prod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  margin: 4px 0 16px;
}

.page-products .prod-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.65;
}

.page-products .prod-table th {
  background: var(--blue-light);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .prod-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.page-products .prod-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .prod-table td:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-deep);
  white-space: nowrap;
}

.page-products .prod-browsers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  margin: 4px 0 18px;
}

.page-products .prod-browsers__item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.page-products .prod-browsers__item:last-child {
  border-bottom: 0;
}

.page-products .prod-browsers__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--blue-deep);
}

.page-products .prod-browsers__ver {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--orange-deep);
}

.page-products .prod-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.page-products .prod-login__text p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 34em;
}

.page-products .prod-login__link {
  margin: 18px 0 0;
}

.page-products .prod-login__link a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 3px;
}

.page-products .prod-outro {
  border-top: 3px solid var(--orange);
  padding: 44px 0 52px;
  background: var(--blue-deep);
  color: var(--paper);
}

.page-products .prod-outro .prod-h2 {
  color: var(--paper);
}

.page-products .prod-outro p {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 14px;
  max-width: 36em;
  color: var(--blue-light);
}

.page-products .prod-outro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.page-products .prod-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .prod-outro__actions .btn {
  flex: 1 1 200px;
  text-align: center;
}

.page-products .prod-outro__foot {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(198, 216, 228, 0.32);
  font-size: 14px;
  line-height: 1.8;
  color: var(--blue-light);
}

.page-products .prod-outro__foot a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .page-products .prod-dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
  }

  .page-products .prod-dl__item {
    padding: 20px 18px 22px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-products .prod-dl__item:first-child {
    border-left: 0;
  }

  .page-products .prod-dl__item:hover {
    background: var(--pp-tint);
  }

  .page-products .prod-dl .prod-dl__item--web {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .page-products .prod-dl .prod-dl__item--web:hover {
    background: var(--blue-light);
  }

  .page-products .prod-browsers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .prod-browsers__item {
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-products .prod-browsers__item:first-child {
    border-left: 0;
  }
}

@media (min-width: 900px) {
  .page-products .prod-hero {
    padding: 44px 0 52px;
  }

  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    align-items: end;
    margin-bottom: 38px;
  }

  .page-products .prod-stamp {
    transform: translateY(-6px);
  }

  .page-products .prod-section {
    padding: 60px 0;
  }

  .page-products .prod-band {
    padding: 60px 0;
  }

  .page-products .prod-band__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
  }

  .page-products .prod-step {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 36px;
    padding: 40px 0;
  }

  .page-products .prod-step__no {
    font-size: 58px;
  }

  .page-products .prod-step__title {
    font-size: 22px;
  }

  .page-products .prod-login {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
  }

  .page-products .prod-outro {
    padding: 60px 0 68px;
  }

  .page-products .prod-outro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 48px;
  }

  .page-products .prod-outro__actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-dl__item {
    transition: none;
  }

  .page-products .prod-stamp {
    transform: none;
  }
}