.page-products {
  --dl-line: rgba(34, 31, 27, 0.06);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--dl-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dl-line) 1px, transparent 1px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: var(--font-sans);
  padding-bottom: 72px;
  overflow-x: hidden;
}

.page-products .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ---------- 首屏 ---------- */
.page-products .dl-hero {
  display: grid;
  gap: 24px;
  padding: 22px 0 6px;
}

.page-products .dl-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-products .dl-hero__eyebrow .mono {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  border-radius: 3px;
}

.page-products .dl-hero__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 7.6vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.page-products .dl-hero__lede {
  margin: 0 0 22px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .dl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .dl-hero__side {
  background: var(--navy);
  color: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 16px 16px;
}

.page-products .dl-hero__side-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mint);
}

.page-products .vindex {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .vindex__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(246, 241, 230, 0.18);
}

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

.page-products .vindex__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.page-products .vindex__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--orange);
  align-self: center;
}

.page-products .vindex__meta {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: rgba(246, 241, 230, 0.72);
}

.page-products .dl-hero__side-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(246, 241, 230, 0.78);
}

.page-products .dl-hero__side-link {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-products .dl-hero__side-link:hover {
  color: var(--orange);
}

/* ---------- 章节通用 ---------- */
.page-products .section {
  padding: 40px 0 8px;
}

.page-products .section__head {
  margin-bottom: 20px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}

.page-products .section__index {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--orange);
}

.page-products .section__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-products .section__lede {
  margin: 0;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- 版本切换条 ---------- */
.page-products .vswitch {
  position: sticky;
  top: 54px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 9px 11px;
  background: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-products .vswitch__label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.page-products .vswitch__tab {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

.page-products .vswitch__tab:hover,
.page-products .vswitch__tab:focus-visible {
  background: var(--orange-soft);
  border-color: var(--orange);
}

.page-products .vswitch__tab--plain {
  margin-left: auto;
  border-style: dashed;
  color: var(--ink-soft);
}

/* ---------- 图注 ---------- */
.page-products .figure {
  margin: 0 0 22px;
}

.page-products .figure__frame {
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

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

.page-products .figure__caption {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-products .figure__index {
  font-family: var(--font-mono);
  color: var(--orange);
  flex: none;
}

/* ---------- 对照矩阵 ---------- */
.page-products .matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--white);
  border: var(--edge);
  font-size: 14px;
}

.page-products .matrix__caption {
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 0 8px;
  caption-side: top;
}

.page-products .matrix__col-dim {
  width: 22%;
}

.page-products .matrix__col-stable {
  width: 32%;
}

.page-products .matrix__col-other {
  width: 23%;
}

.page-products .matrix__head {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 14.5px;
  text-align: left;
  padding: 14px 14px;
  border: 1px solid var(--navy-2);
  scroll-margin-top: 130px;
}

.page-products .matrix__head--stable {
  background: var(--navy-2);
  box-shadow: inset 0 4px 0 var(--orange);
}

.page-products .matrix__head:target {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.page-products .matrix__ver {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mint);
}

.page-products .matrix__head:target .matrix__ver {
  color: var(--white);
}

.page-products .matrix__dim {
  background: var(--mint);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--grey);
  vertical-align: top;
}

.page-products .matrix tbody td {
  padding: 14px;
  vertical-align: top;
  line-height: 1.7;
  color: var(--ink-soft);
  border: 1px solid var(--grey);
}

.page-products .matrix tbody tr:nth-child(even) td:not(.matrix__dim) {
  background: #FBF7EE;
}

.page-products .matrix tbody tr {
  transition: background-color 140ms ease;
}

.page-products .matrix tbody tr:hover td,
.page-products .matrix tbody tr:focus-visible td {
  background: var(--orange-soft);
  color: var(--ink);
}

.page-products .matrix tbody tr:hover .matrix__dim,
.page-products .matrix tbody tr:focus-visible .matrix__dim {
  box-shadow: inset 3px 0 0 var(--orange);
}

.page-products .matrix tbody tr:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* ---------- 运行环境 ---------- */
.page-products .env {
  display: grid;
  gap: 22px;
}

.page-products .env__list {
  margin: 0;
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.page-products .env__row {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grey);
}

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

.page-products .env__row:nth-child(odd) {
  background: #FBF7EE;
}

.page-products .env__key {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-products .env__val {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .env__figure {
  margin: 0;
}

/* ---------- 场景卡片 ---------- */
.page-products .scenes {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}

.page-products .scene {
  position: relative;
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 30px 16px 18px;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.page-products .scene:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--orange);
}

.page-products .scene__tag {
  position: absolute;
  top: -2px;
  left: -2px;
  margin: 0;
  padding: 4px 12px 4px 10px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 0 0 var(--radius) 0;
}

.page-products .scene__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .scene__pick {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.page-products .scene__pick .mono {
  color: var(--orange);
  font-size: 12.5px;
}

.page-products .scene__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* ---------- 安装与校验 ---------- */
.page-products .install {
  display: grid;
  gap: 24px;
  margin-bottom: 22px;
}

.page-products .timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}

.page-products .timeline__item {
  position: relative;
  margin-left: 18px;
  padding: 0 0 26px 40px;
  border-left: 2px dashed var(--grey);
}

.page-products .timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}

.page-products .timeline__num {
  position: absolute;
  left: -19px;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--white);
  border: var(--edge);
  border-radius: 50%;
  font-size: 14px;
}

.page-products .timeline__title {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .timeline__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .copyblock {
  background: var(--navy);
  color: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 16px;
  align-self: start;
}

.page-products .copyblock__label {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mint);
}

.page-products .copyblock__list {
  margin: 0;
  padding: 0;
}

.page-products .copyblock__row {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(246, 241, 230, 0.18);
}

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

.page-products .copyblock__key {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(246, 241, 230, 0.66);
}

.page-products .copyblock__val {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--white);
  word-break: break-all;
}

.page-products .copyblock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.page-products .copy-hint {
  font-size: 12px;
  color: var(--mint);
}

.page-products .copyblock__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(246, 241, 230, 0.72);
}

.page-products .install__figure {
  margin-top: 6px;
}

/* ---------- 首次登录 ---------- */
.page-products .firstlogin {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .firstlogin__item {
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px 16px 18px;
}

.page-products .firstlogin__num {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  border-radius: 3px;
}

.page-products .firstlogin__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

.page-products .firstlogin__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--grey);
  text-underline-offset: 3px;
}

.page-products .inline-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.page-products .firstlogin__tip {
  margin: 0;
  padding: 14px 16px;
  background: var(--mint);
  border-left: 4px solid var(--navy);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 版本演进 ---------- */
.page-products .vlog {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-products .vlog__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--grey);
  transition: background-color 140ms ease;
}

.page-products .vlog__item:hover {
  background: var(--orange-soft);
}

.page-products .vlog__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.page-products .vlog__line {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.page-products .vlog__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-products .vlog__link {
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--grey);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.page-products .vlog__link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.page-products .vlog__figure {
  margin-top: 4px;
}

.page-products .vlog__more {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 响应式 ---------- */
@media (max-width: 767px) {
  .page-products .vswitch {
    position: static;
    box-shadow: var(--shadow-1);
  }

  .page-products .matrix {
    border: 0;
    background: none;
    table-layout: auto;
    font-size: 14.5px;
  }

  .page-products .matrix__caption {
    padding: 0 0 12px;
  }

  .page-products .matrix colgroup,
  .page-products .matrix thead {
    display: none;
  }

  .page-products .matrix tbody,
  .page-products .matrix tbody tr {
    display: block;
  }

  .page-products .matrix tbody tr {
    margin-bottom: 14px;
    background: var(--white);
    border: var(--edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }

  .page-products .matrix tbody td,
  .page-products .matrix tbody th {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--grey);
    padding: 12px 14px;
  }

  .page-products .matrix tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    align-self: start;
    padding-top: 2px;
  }

  .page-products .matrix tbody th.matrix__dim {
    display: block;
    background: var(--navy);
    color: var(--white);
    font-size: 16px;
  }

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

  .page-products .vlog__item {
    grid-template-columns: auto 1fr;
  }

  .page-products .vlog__link {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .page-products .env {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

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

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

  .page-products .install {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .dl-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: end;
    padding: 30px 0 10px;
  }

  .page-products .dl-hero__side {
    padding: 22px 20px 20px;
  }

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

  .page-products .section {
    padding: 48px 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .scene,
  .page-products .matrix tbody tr,
  .page-products .vlog__item,
  .page-products .vswitch__tab {
    transition: none;
  }
}


<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">入口首页</a></li>
        <li class="breadcrumb__item"><span class="breadcrumb__sep" aria-hidden="true">/</span></li>
        <li class="breadcrumb__item"><span class="breadcrumb__current">下载与版本中心</span></li>
      </ol>
    </nav>
  </div>

  <div class="wrap">
    <header class="dl-hero">
      <div class="dl-hero__text">
        <p class="dl-hero__eyebrow"><span class="mono">02</span> 下载与版本中心</p>
        <h1 class="dl-hero__title">选对版本，装完就能登录</h1>
        <p class="dl-hero__lede">电脑端用户对比 E尊国 的三条版本线，先看定位与更新节奏，再按你的系统与工位场景取安装包。确认版本、核对文件、走完三步登录，中途随时能翻回来重看一遍。</p>
        <div class="dl-hero__actions">
          <a class="btn btn--solid" href="#compare">看三条版本线</a>
          <a class="btn" href="#checklist">先对一遍运行环境</a>
        </div>
      </div>
      <aside class="dl-hero__side" aria-label="当前三条版本线索引">
        <p class="dl-hero__side-title">当前三条版本线</p>
        <ul class="vindex">
          <li class="vindex__item">
            <span class="vindex__name">稳定版</span>
            <span class="vindex__ver mono">3.4.2</span>
            <span class="vindex__meta">每两周更新 · 日常办公首选</span>
          </li>
          <li class="vindex__item">
            <span class="vindex__name">兼容版</span>
            <span class="vindex__ver mono">2.8.6</span>
            <span class="vindex__meta">每四周更新 · 旧系统与旧内核</span>
          </li>
          <li class="vindex__item">
            <span class="vindex__name">预览版</span>
            <span class="vindex__ver mono">3.5.0</span>
            <span class="vindex__meta">每周更新 · 想先试新调整</span>
          </li>
        </ul>
        <p class="dl-hero__side-note">每次调整都写进<a class="dl-hero__side-link" href="/journal/">更新日志</a>，按周推进，可按期号回看。</p>
      </aside>
    </header>
  </div>

  <div class="wrap">
    <section class="section" id="compare">
      <div class="section__head">
        <p class="section__index mono">01</p>
        <h2 class="section__title">三条版本线怎么选</h2>
        <p class="section__lede">绝大多数办公电脑走稳定版就够了；系统或浏览器偏旧时换兼容版；想提前看下一版调整的走预览版。</p>
      </div>

      <nav class="vswitch" aria-label="版本线快速定位">
        <span class="vswitch__label">定位到</span>
        <a class="vswitch__tab" href="#v-stable">稳定版</a>
        <a class="vswitch__tab" href="#v-compat">兼容版</a>
        <a class="vswitch__tab" href="#v-preview">预览版</a>
        <a class="vswitch__tab vswitch__tab--plain" href="#install">直接看安装步骤</a>
      </nav>

      <figure class="figure dl-figure">
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="三条版本线对照矩阵信息图，三列依次为稳定版、兼容版与预览版，单元格用短标签区分更新节奏与适用场景">
        </div>
        <figcaption class="figure__caption"><span class="figure__index mono">01</span> 横向看定位差异，纵向看同一维度的具体表现。</figcaption>
      </figure>

      <div class="matrix-wrap">
        <table class="matrix">
          <caption class="matrix__caption">三条版本线对照 · 版本号采用三段式书写，与更新记录保持一致</caption>
          <colgroup>
            <col class="matrix__col-dim">
            <col class="matrix__col-stable">
            <col class="matrix__col-other">
            <col class="matrix__col-other">
          </colgroup>
          <thead>
            <tr>
              <th scope="col" class="matrix__dim">对比维度</th>
              <th scope="col" id="v-stable" class="matrix__head matrix__head--stable">
                稳定版<span class="matrix__ver mono">3.4.2</span>
              </th>
              <th scope="col" id="v-compat" class="matrix__head">
                兼容版<span class="matrix__ver mono">2.8.6</span>
              </th>
              <th scope="col" id="v-preview" class="matrix__head">
                预览版<span class="matrix__ver mono">3.5.0</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">定位</th>
              <td data-label="稳定版">日常办公主力，功能完整、改动克制，出问题有现成说明可对照。</td>
              <td data-label="兼容版">给旧系统与旧浏览器兜底，牺牲部分新交互，换稳定打开。</td>
              <td data-label="预览版">提前试下一版的入口与登录调整，适合愿意反馈问题的人。</td>
            </tr>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">更新节奏</th>
              <td data-label="稳定版">每两周一次，改动集中发布，中间只做必要修复。</td>
              <td data-label="兼容版">每四周一次，主要跟随稳定版做兼容补齐。</td>
              <td data-label="预览版">每周一次，调整点拆得细，单次改动量小。</td>
            </tr>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">适合谁</th>
              <td data-label="稳定版">公司配发的办公电脑、双屏工位、需要长期不中断的岗位。</td>
              <td data-label="兼容版">Windows 7 / 8.1 老机、双核浏览器的兼容模式、远程桌面里的低配终端。</td>
              <td data-label="预览版">协助同事排查入口问题的人、想先确认新版是否合用的管理员。</td>
            </tr>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">已知取舍</th>
              <td data-label="稳定版">新调整要等下一个发布周期才会同步过来。</td>
              <td data-label="兼容版">部分新版交互简化了，界面比稳定版朴素一些。</td>
              <td data-label="预览版">个别入口位置可能在下一次更新里再挪动，需要跟着看记录。</td>
            </tr>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">已验证组合</th>
              <td data-label="稳定版">Windows 11 与 macOS 12 及以上，Chromium 与 Firefox 主流版本。</td>
              <td data-label="兼容版">Windows 7 及以上，旧内核与双核浏览器兼容模式。</td>
              <td data-label="预览版">与稳定版相同的系统范围，双屏切换场景做过专门回归。</td>
            </tr>
            <tr tabindex="0">
              <th scope="row" class="matrix__dim">安装包大小</th>
              <td data-label="稳定版">约 96 MB</td>
              <td data-label="兼容版">约 78 MB</td>
              <td data-label="预览版">约 98 MB</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>

  <div class="wrap">
    <section class="section" id="checklist">
      <div class="section__head">
        <p class="section__index mono">02</p>
        <h2 class="section__title">运行环境与兼容清单</h2>
        <p class="section__lede">装之前先对一遍系统、浏览器和屏幕，能省掉大半的“打不开”和“按钮点不到”。</p>
      </div>

      <div class="env">
        <dl class="env__list">
          <div class="env__row">
            <dt class="env__key">操作系统</dt>
            <dd class="env__val">Windows 10 与 Windows 11 的 64 位版本已验证可用；Windows 7 与 8.1 请走兼容版；macOS 12 及以上可装稳定版。</dd>
          </div>
          <div class="env__row">
            <dt class="env__key">浏览器内核</dt>
            <dd class="env__val">Chromium 100 及以上、Firefox 98 及以上、Safari 15.4 及以上已在回归范围内。国产双核浏览器请在设置里切到极速模式。</dd>
          </div>
          <div class="env__row">
            <dt class="env__key">需要走兼容版的组合</dt>
            <dd class="env__val">旧内核浏览器、双核浏览器的兼容模式、Windows 8.1 及更早系统，以及公司统一锁定内核版本的终端。</dd>
          </div>
          <div class="env__row">
            <dt class="env__key">屏幕分辨率</dt>
            <dd class="env__val">1366×768 起可完整显示；双屏工位建议单屏 1920×1080 及以上，避免窗口跨屏时缩放比例不一致。</dd>
          </div>
          <div class="env__row">
            <dt class="env__key">内存与磁盘</dt>
            <dd class="env__val">内存 4 GB 起，安装后占用约 320 MB。装在系统盘之外的分区同样可以正常启动。</dd>
          </div>
          <div class="env__row">
            <dt class="env__key">网络与时区</dt>
            <dd class="env__val">首次登录需要可用的网络连接；远程桌面或弱网环境下校验会变慢。系统时间与时区要准确，否则登录态可能被判为异常。</dd>
          </div>
        </dl>

        <figure class="figure env__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="兼容性矩阵信息图，用深浅色块区分已通过回归测试的系统与浏览器组合，以及建议改用兼容版的组合" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption"><span class="figure__index mono">02</span> 深浅色块对应已验证与建议走兼容版的两类组合。</figcaption>
        </figure>
      </div>
    </section>
  </div>

  <div class="wrap">
    <section class="section" id="scenes">
      <div class="section__head">
        <p class="section__index mono">03</p>
        <h2 class="section__title">换设备的时候选哪条</h2>
        <p class="section__lede">换电脑、换浏览器、加一块屏、进远程桌面，这四种情况最容易找不到入口，各自有对应的版本与注意点。</p>
      </div>

      <div class="scenes">
        <article class="scene">
          <p class="scene__tag mono">场景 01</p>
          <h3 class="scene__title">换新电脑</h3>
          <p class="scene__pick">推荐版本 <span class="mono">稳定版 3.4.2</span></p>
          <p class="scene__text">新机装好系统后先确认时区与系统时间，再装稳定版。登录态跟设备走，换机后需要重新走一遍三步指引。</p>
        </article>
        <article class="scene">
          <p class="scene__tag mono">场景 02</p>
          <h3 class="scene__title">换浏览器</h3>
          <p class="scene__pick">推荐版本 <span class="mono">稳定版 3.4.2</span></p>
          <p class="scene__text">收藏夹里存着的旧入口地址可能已经变了。回首页顶部导航重新取一次当前入口，别沿用半年前收藏的链接。</p>
        </article>
        <article class="scene">
          <p class="scene__tag mono">场景 03</p>
          <h3 class="scene__title">双屏工位</h3>
          <p class="scene__pick">推荐版本 <span class="mono">稳定版 3.4.2</span></p>
          <p class="scene__text">两块屏缩放比例不同会让窗口位置错乱。稳定版下建议把主屏缩放固定下来；预览版对窗口记忆做了调整，愿意尝鲜可以先试。</p>
        </article>
        <article class="scene">
          <p class="scene__tag mono">场景 04</p>
          <h3 class="scene__title">远程桌面</h3>
          <p class="scene__pick">推荐版本 <span class="mono">兼容版 2.8.6</span></p>
          <p class="scene__text">远程会话带宽波动会拖慢首次校验。建议先在本机完成登录，再进入远程环境，避免在会话里反复重试。</p>
        </article>
      </div>

      <figure class="figure scenes__figure">
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="四宫格场景图，分别为笔记本换机、浏览器切换、双屏工位与远程桌面的界面局部，每格标注序号与推荐版本线" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption"><span class="figure__index mono">03</span> 四类设备切换场景的推荐版本与界面位置对照。</figcaption>
      </figure>
    </section>
  </div>

  <div class="wrap">
    <section class="section" id="install">
      <div class="section__head">
        <p class="section__index mono">04</p>
        <h2 class="section__title">拿到安装包，核对文件，再装</h2>
        <p class="section__lede">从首页顶部导航进入版本中心，按版本线取包。落盘后先核对文件信息，再双击安装，能挡掉大部分装到一半出错的情况。</p>
      </div>

      <div class="install">
        <ol class="timeline">
          <li class="timeline__item">
            <span class="timeline__num mono">1</span>
            <h3 class="timeline__title">从正确的位置取包</h3>
            <p class="timeline__text">回到首页，用顶部导航进入版本中心，按上面对照表选中的版本线取对应安装包。别用搜索到的第三方镜像，文件名对不上就是取错了。</p>
          </li>
          <li class="timeline__item">
            <span class="timeline__num mono">2</span>
            <h3 class="timeline__title">核对文件信息</h3>
            <p class="timeline__text">把落盘后的文件名、版本号与右侧信息栏对一遍，版本号应当是三段式数字。三处一致，说明文件完整。</p>
          </li>
          <li class="timeline__item">
            <span class="timeline__num mono">3</span>
            <h3 class="timeline__title">下载中断就重取一次</h3>
            <p class="timeline__text">网络中断导致文件不完整时，先删掉已下载的部分再重新取包，不要在同名文件上续传。远程桌面下建议换到本机操作。</p>
          </li>
          <li class="timeline__item">
            <span class="timeline__num mono">4</span>
            <h3 class="timeline__title">安装并保留安装包</h3>
            <p class="timeline__text">安装完成后先别删安装包。同一台设备日后回退或给同事装机还用得上，等确认稳定运行再清掉。</p>
          </li>
        </ol>

        <aside class="copyblock" aria-label="安装包信息">
          <p class="copyblock__label mono">安装包信息 · 稳定版</p>
          <dl class="copyblock__list">
            <div class="copyblock__row">
              <dt class="copyblock__key">文件名</dt>
              <dd class="copyblock__val mono">ezunguo-setup-3.4.2-x64.exe</dd>
            </div>
            <div class="copyblock__row">
              <dt class="copyblock__key">版本号</dt>
              <dd class="copyblock__val mono">3.4.2</dd>
            </div>
            <div class="copyblock__row">
              <dt class="copyblock__key">文件校验值</dt>
              <dd class="copyblock__val mono">9c1e6b0f4a72d3e58b1c7f2a6d4e9b03</dd>
            </div>
            <div class="copyblock__row">
              <dt class="copyblock__key">文件大小</dt>
              <dd class="copyblock__val mono">96.3 MB</dd>
            </div>
          </dl>
          <div class="copyblock__actions">
            <button class="copy-btn" type="button" data-copy="9c1e6b0f4a72d3e58b1c7f2a6d4e9b03">
              <span data-copy-text>复制校验值</span>
            </button>
            <span class="copy-hint" data-copy-hint></span>
          </div>
          <p class="copyblock__note">复制后粘贴到文件属性面板的校验工具里，与本地文件对比一致即可安装。</p>
        </aside>
      </div>

      <figure class="figure install__figure">
        <div class="figure__frame">
          <img src="{zhanqunpic:h:620w:1000}" width="1000" height="620" alt="安装包属性面板局部截图，等宽字体显示版本号、文件大小与校验值，旁边用细线标注三处需要核对的位置" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption"><span class="figure__index mono">04</span> 属性面板里三处信息与右侧信息栏逐一对上即可开始安装。</figcaption>
      </figure>
    </section>
  </div>

  <div class="wrap">
    <section class="section" id="first-login">
      <div class="section__head">
        <p class="section__index mono">05</p>
        <h2 class="section__title">装完之后的第一次登录</h2>
        <p class="section__lede">安装只是开始，真正花时间的是登录。三步走完，后面换设备也能照着重复一遍。</p>
      </div>

      <ol class="firstlogin">
        <li class="firstlogin__item">
          <span class="firstlogin__num mono">01</span>
          <h3 class="firstlogin__title">看导航入口</h3>
          <p class="firstlogin__text">打开首页，顶部导航第一层就是品牌站选择入口，当前位置会有实心橙底标记。</p>
        </li>
        <li class="firstlogin__item">
          <span class="firstlogin__num mono">02</span>
          <h3 class="firstlogin__title">对照栏目页说明</h3>
          <p class="firstlogin__text">遇到验证码收不到、页面停在加载中，先翻<a class="inline-link" href="/questions/">常见问答</a>里对应的错误提示，按条目里的步骤处理。</p>
        </li>
        <li class="firstlogin__item">
          <span class="firstlogin__num mono">03</span>
          <h3 class="firstlogin__title">回首页核对版本</h3>
          <p class="firstlogin__text">登录顺利进去之后，回首页看一眼最近一期更新。入口位置若有调整，<a class="inline-link" href="/journal/">更新日志</a>里会写明改在哪一步。</p>
        </li>
      </ol>

      <p class="firstlogin__tip">按这三步操作的用户，首次登录平均耗时从 6 分钟缩短到约 90 秒。装完顺手把首页存成书签，下次换设备能少绕一圈。</p>
    </section>
  </div>

  <div class="wrap">
    <section class="section" id="history">
      <div class="section__head">
        <p class="section__index mono">06</p>
        <h2 class="section__title">版本演进与调整要点</h2>
        <p class="section__lede">近几期的调整方向按版本号列在这里，想看完整上下文可以去更新日志按期号回看。</p>
      </div>

      <ul class="vlog">
        <li class="vlog__item">
          <span class="vlog__ver mono">3.5.0</span>
          <span class="vlog__line">预览版</span>
          <p class="vlog__text">双屏工位的窗口记忆逻辑调整，切换显示器后回到上次所在位置。</p>
          <a class="vlog__link" href="/journal/">第 212 期</a>
        </li>
        <li class="vlog__item">
          <span class="vlog__ver mono">3.4.2</span>
          <span class="vlog__line">稳定版</span>
          <p class="vlog__text">登录态续期流程精简，换设备后少一次确认步骤。</p>
          <a class="vlog__link" href="/journal/">第 211 期</a>
        </li>
        <li class="vlog__item">
          <span class="vlog__ver mono">3.4.0</span>
          <span class="vlog__line">稳定版</span>
          <p class="vlog__text">安装包体积与首次启动速度优化，旧机装完的等待时间明显缩短。</p>
          <a class="vlog__link" href="/journal/">第 209 期</a>
        </li>
        <li class="vlog__item">
          <span class="vlog__ver mono">2.8.6</span>
          <span class="vlog__line">兼容版</span>
          <p class="vlog__text">补充旧版双核浏览器极速模式下的入口识别，减少空白页。</p>
          <a class="vlog__link" href="/journal/">第 208 期</a>
        </li>
        <li class="vlog__item">
          <span class="vlog__ver mono">2.8.4</span>
          <span class="vlog__line">兼容版</span>
          <p class="vlog__text">修正 1366×768 分辨率下登录按钮被遮住的位置问题。</p>
          <a class="vlog__link" href="/journal/">第 206 期</a>
        </li>
      </ul>

      <figure class="figure vlog__figure">
        <div class="figure__frame figure__frame--wide">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="横向版本演进路线图，等宽字体标注 2.8.4 至 3.5.0 的版本号，节点以信号橙圆点标记并区分稳定版、兼容版与预览版三条线" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption"><span class="figure__index mono">05</span> 三条版本线并行推进，橙色节点为各期更新记录对应的发布点。</figcaption>
      </figure>

      <p class="vlog__more">想先弄清这些入口与说明是怎么测绘出来的，可以看<a class="inline-link" href="/culture/">品牌文化</a>里的团队分工与校订流程；拿不准版本选择时，也可以直接<a class="inline-link" href="/find-us/">联系我们</a>。</p>
    </section>
  </div>
</main>

.page-products {
  --dl-line: rgba(34, 31, 27, 0.06);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--dl-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dl-line) 1px, transparent 1px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: var(--font-sans);
  padding-bottom: 72px;
  overflow-x: hidden;
}

.page-products .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ---------- 首屏 ---------- */
.page-products .dl-hero {
  display: grid;
  gap: 24px;
  padding: 22px 0 6px;
}

.page-products .dl-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-products .dl-hero__eyebrow .mono {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  border-radius: 3px;
}

.page-products .dl-hero__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 7.6vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.page-products .dl-hero__lede {
  margin: 0 0 22px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .dl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .dl-hero__side {
  background: var(--navy);
  color: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 16px 16px;
}

.page-products .dl-hero__side-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mint);
}

.page-products .vindex {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .vindex__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(246, 241, 230, 0.18);
}

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

.page-products .vindex__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.page-products .vindex__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--orange);
  align-self: center;
}

.page-products .vindex__meta {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: rgba(246, 241, 230, 0.72);
}

.page-products .dl-hero__side-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(246, 241, 230, 0.78);
}

.page-products .dl-hero__side-link {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-products .dl-hero__side-link:hover {
  color: var(--orange);
}

/* ---------- 章节通用 ---------- */
.page-products .section {
  padding: 40px 0 8px;
}

.page-products .section__head {
  margin-bottom: 20px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}

.page-products .section__index {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--orange);
}

.page-products .section__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-products .section__lede {
  margin: 0;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- 版本切换条 ---------- */
.page-products .vswitch {
  position: sticky;
  top: 54px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 9px 11px;
  background: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-products .vswitch__label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.page-products .vswitch__tab {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

.page-products .vswitch__tab:hover,
.page-products .vswitch__tab:focus-visible {
  background: var(--orange-soft);
  border-color: var(--orange);
}

.page-products .vswitch__tab--plain {
  margin-left: auto;
  border-style: dashed;
  color: var(--ink-soft);
}

/* ---------- 图注 ---------- */
.page-products .figure {
  margin: 0 0 22px;
}

.page-products .figure__frame {
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

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

.page-products .figure__caption {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-products .figure__index {
  font-family: var(--font-mono);
  color: var(--orange);
  flex: none;
}

/* ---------- 对照矩阵 ---------- */
.page-products .matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--white);
  border: var(--edge);
  font-size: 14px;
}

.page-products .matrix__caption {
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 0 8px;
  caption-side: top;
}

.page-products .matrix__col-dim {
  width: 22%;
}

.page-products .matrix__col-stable {
  width: 32%;
}

.page-products .matrix__col-other {
  width: 23%;
}

.page-products .matrix__head {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 14.5px;
  text-align: left;
  padding: 14px 14px;
  border: 1px solid var(--navy-2);
  scroll-margin-top: 130px;
}

.page-products .matrix__head--stable {
  background: var(--navy-2);
  box-shadow: inset 0 4px 0 var(--orange);
}

.page-products .matrix__head:target {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.page-products .matrix__ver {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mint);
}

.page-products .matrix__head:target .matrix__ver {
  color: var(--white);
}

.page-products .matrix__dim {
  background: var(--mint);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--grey);
  vertical-align: top;
}

.page-products .matrix tbody td {
  padding: 14px;
  vertical-align: top;
  line-height: 1.7;
  color: var(--ink-soft);
  border: 1px solid var(--grey);
}

.page-products .matrix tbody tr:nth-child(even) td:not(.matrix__dim) {
  background: #FBF7EE;
}

.page-products .matrix tbody tr {
  transition: background-color 140ms ease;
}

.page-products .matrix tbody tr:hover td,
.page-products .matrix tbody tr:focus-visible td {
  background: var(--orange-soft);
  color: var(--ink);
}

.page-products .matrix tbody tr:hover .matrix__dim,
.page-products .matrix tbody tr:focus-visible .matrix__dim {
  box-shadow: inset 3px 0 0 var(--orange);
}

.page-products .matrix tbody tr:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* ---------- 运行环境 ---------- */
.page-products .env {
  display: grid;
  gap: 22px;
}

.page-products .env__list {
  margin: 0;
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.page-products .env__row {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grey);
}

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

.page-products .env__row:nth-child(odd) {
  background: #FBF7EE;
}

.page-products .env__key {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-products .env__val {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .env__figure {
  margin: 0;
}

/* ---------- 场景卡片 ---------- */
.page-products .scenes {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}

.page-products .scene {
  position: relative;
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 30px 16px 18px;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.page-products .scene:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--orange);
}

.page-products .scene__tag {
  position: absolute;
  top: -2px;
  left: -2px;
  margin: 0;
  padding: 4px 12px 4px 10px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 0 0 var(--radius) 0;
}

.page-products .scene__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .scene__pick {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.page-products .scene__pick .mono {
  color: var(--orange);
  font-size: 12.5px;
}

.page-products .scene__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* ---------- 安装与校验 ---------- */
.page-products .install {
  display: grid;
  gap: 24px;
  margin-bottom: 22px;
}

.page-products .timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}

.page-products .timeline__item {
  position: relative;
  margin-left: 18px;
  padding: 0 0 26px 40px;
  border-left: 2px dashed var(--grey);
}

.page-products .timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}

.page-products .timeline__num {
  position: absolute;
  left: -19px;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--white);
  border: var(--edge);
  border-radius: 50%;
  font-size: 14px;
}

.page-products .timeline__title {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .timeline__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .copyblock {
  background: var(--navy);
  color: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 16px;
  align-self: start;
}

.page-products .copyblock__label {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mint);
}

.page-products .copyblock__list {
  margin: 0;
  padding: 0;
}

.page-products .copyblock__row {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(246, 241, 230, 0.18);
}

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

.page-products .copyblock__key {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(246, 241, 230, 0.66);
}

.page-products .copyblock__val {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--white);
  word-break: break-all;
}

.page-products .copyblock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.page-products .copy-hint {
  font-size: 12px;
  color: var(--mint);
}

.page-products .copyblock__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(246, 241, 230, 0.72);
}

.page-products .install__figure {
  margin-top: 6px;
}

/* ---------- 首次登录 ---------- */
.page-products .firstlogin {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .firstlogin__item {
  background: var(--white);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px 16px 18px;
}

.page-products .firstlogin__num {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  border-radius: 3px;
}

.page-products .firstlogin__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

.page-products .firstlogin__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-products .inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--grey);
  text-underline-offset: 3px;
}

.page-products .inline-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.page-products .firstlogin__tip {
  margin: 0;
  padding: 14px 16px;
  background: var(--mint);
  border-left: 4px solid var(--navy);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- 版本演进 ---------- */
.page-products .vlog {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-products .vlog__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--grey);
  transition: background-color 140ms ease;
}

.page-products .vlog__item:hover {
  background: var(--orange-soft);
}

.page-products .vlog__ver {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.page-products .vlog__line {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.page-products .vlog__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-products .vlog__link {
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--grey);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.page-products .vlog__link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.page-products .vlog__figure {
  margin-top: 4px;
}

.page-products .vlog__more {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 响应式 ---------- */
@media (max-width: 767px) {
  .page-products .vswitch {
    position: static;
    box-shadow: var(--shadow-1);
  }

  .page-products .matrix {
    border: 0;
    background: none;
    table-layout: auto;
    font-size: 14.5px;
  }

  .page-products .matrix__caption {
    padding: 0 0 12px;
  }

  .page-products .matrix colgroup,
  .page-products .matrix thead {
    display: none;
  }

  .page-products .matrix tbody,
  .page-products .matrix tbody tr {
    display: block;
  }

  .page-products .matrix tbody tr {
    margin-bottom: 14px;
    background: var(--white);
    border: var(--edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }

  .page-products .matrix tbody td,
  .page-products .matrix tbody th {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--grey);
    padding: 12px 14px;
  }

  .page-products .matrix tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    align-self: start;
    padding-top: 2px;
  }

  .page-products .matrix tbody th.matrix__dim {
    display: block;
    background: var(--navy);
    color: var(--white);
    font-size: 16px;
  }

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

  .page-products .vlog__item {
    grid-template-columns: auto 1fr;
  }

  .page-products .vlog__link {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .page-products .env {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

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

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

  .page-products .install {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .dl-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: end;
    padding: 30px 0 10px;
  }

  .page-products .dl-hero__side {
    padding: 22px 20px 20px;
  }

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

  .page-products .section {
    padding: 48px 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .scene,
  .page-products .matrix tbody tr,
  .page-products .vlog__item,
  .page-products .vswitch__tab {
    transition: none;
  }
}