.page-products {
  background: var(--paper);
  color: var(--ink);
}

.page-products img {
  max-width: 100%;
  height: auto;
}

/* ============ 首屏 ============ */
.page-products .pd-hero {
  padding-top: clamp(18px, 3vw, 36px);
}

.page-products .pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}

.page-products .pd-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}

.page-products .pd-hero .lede {
  margin-top: 18px;
  max-width: 48ch;
}

.page-products .pd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-products .pd-hero-aside {
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--lake);
  background: var(--frost);
  box-shadow: var(--shadow-hard);
  padding: 16px 18px 18px;
}

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

.page-products .pd-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mist);
}

.page-products .pd-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-fact-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--moss);
}

.page-products .pd-fact-label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.page-products .pd-hero-media {
  margin: clamp(24px, 4vw, 44px) 0 0;
}

.page-products .pd-hero-media img {
  display: block;
  width: 100%;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  object-fit: cover;
}

/* ============ 端索引条 ============ */
.page-products .pd-endbar {
  display: flex;
  overflow-x: auto;
  margin: 0 0 clamp(18px, 3vw, 28px);
  border: var(--line) solid var(--ink);
  background: var(--frost);
}

.page-products .pd-endbar-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border-right: var(--line) solid var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}

.page-products .pd-endbar-link:last-child {
  border-right: 0;
}

.page-products .pd-endbar-link:hover,
.page-products .pd-endbar-link:focus-visible {
  background: var(--lake);
  color: var(--paper);
}

.page-products .pd-endbar-link.is-on {
  background: var(--moss);
  color: var(--paper);
  box-shadow: inset 0 -4px 0 var(--lake);
}

.page-products .pd-endbar-num {
  font-size: 11px;
  opacity: 0.65;
}

/* ============ 下载列表 ============ */
.page-products .pd-dl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-dl-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-products .pd-dl-item {
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--moss);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 14px 16px 16px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.page-products .pd-dl-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
}

.page-products .pd-dl-item--win { border-left-color: var(--lake); }
.page-products .pd-dl-item--mac { border-left-color: var(--mist); }
.page-products .pd-dl-item--android { border-left-color: var(--spring); }
.page-products .pd-dl-item--ios { border-left-color: var(--amber); }
.page-products .pd-dl-item--web { border-left-color: var(--moss); }

.page-products .pd-dl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.page-products .pd-dl-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .pd-dl-ver {
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--wash);
  border: 1px solid var(--mist);
  border-radius: 999px;
  padding: 2px 9px;
}

.page-products .pd-dl-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 12px 0 0;
}

.page-products .pd-dl-spec dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-dl-spec dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.page-products .pd-dl-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
}

.page-products .pd-dl-check-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-dl-check-note {
  color: var(--muted);
  line-height: 1.6;
}

.page-products .pd-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  background: var(--frost);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
  word-break: break-all;
  transition: background-color 120ms var(--ease);
}

.page-products .pd-copy:hover,
.page-products .pd-copy:focus-visible {
  background: var(--spring);
}

.page-products .pd-dl-shot {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-dl-shot img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-bottom: var(--line) solid var(--ink);
}

.page-products .pd-shot-cap {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ============ 对照表 ============ */
.page-products .pd-diff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-products .pd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .pd-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease);
}

.page-products .pd-filter:hover {
  transform: translateY(-2px);
}

.page-products .pd-filter.is-on {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--paper);
}

.page-products .pd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
}

.page-products .pd-dot--add { background: var(--spring); }
.page-products .pd-dot--change { background: var(--amber); }
.page-products .pd-dot--remove { background: var(--brick); }

.page-products .pd-diff-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-matrix-wrap {
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  background: #fff;
  overflow: auto;
  max-height: 580px;
}

.page-products .pd-matrix {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pd-matrix th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--frost);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--moss);
  padding: 11px 12px;
  border-bottom: var(--line) solid var(--ink);
  white-space: nowrap;
}

.page-products .pd-matrix td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--mist);
  vertical-align: top;
  line-height: 1.65;
}

.page-products .pd-matrix tbody tr:nth-child(even) td {
  background: var(--wash);
}

.page-products .pd-matrix tbody tr.pd-row--add td:first-child { box-shadow: inset 4px 0 0 var(--spring); }
.page-products .pd-matrix tbody tr.pd-row--change td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
.page-products .pd-matrix tbody tr.pd-row--remove td:first-child { box-shadow: inset 4px 0 0 var(--brick); }

.page-products .pd-cell-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.page-products .pd-diff-foot {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-diff-foot a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 装前三件事 ============ */
.page-products .pd-three {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .pd-three-item {
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--mist);
  background: var(--frost);
  box-shadow: var(--shadow-hard-sm);
  padding: 18px;
}

.page-products .pd-three-item:nth-child(1) { border-top-color: var(--spring); }
.page-products .pd-three-item:nth-child(2) { border-top-color: var(--lake); }
.page-products .pd-three-item:nth-child(3) { border-top-color: var(--amber); }

.page-products .pd-three-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .pd-three-item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ============ 适配检测 ============ */
.page-products .pd-fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.page-products .pd-fit-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--lake);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-fit-media img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.page-products .pd-fit h2 {
  margin: 10px 0 14px;
  font-size: clamp(28px, 5vw, 46px);
}

.page-products .pd-fit-body p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.page-products .pd-fit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px !important;
}

/* ============ 过渡带 ============ */
.page-products .pd-band {
  margin: clamp(30px, 5vw, 56px) 0 0;
}

.page-products .pd-band img {
  display: block;
  width: 100%;
  border-top: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  object-fit: cover;
}

/* ============ 安装三步 ============ */
.page-products .pd-install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-products .pd-install-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--spring);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-install-media img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.page-products .pd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .pd-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--moss);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 16px;
}

.page-products .pd-step-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--moss);
}

.page-products .pd-step-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

.page-products .pd-step-body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
}

.page-products .pd-step-fail {
  margin-top: 10px !important;
  padding: 8px 10px;
  background: var(--wash);
  border-left: 4px solid var(--brick);
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* ============ 版本号读法 ============ */
.page-products .pd-verse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-products .pd-verse-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 22px 12px;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
  font-size: clamp(46px, 13vw, 96px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.page-products .pd-verse-part--major { color: var(--moss); }
.page-products .pd-verse-part--minor { color: var(--lake); }
.page-products .pd-verse-part--patch { color: var(--amber); }
.page-products .pd-verse-dot { color: var(--mist); }

.page-products .pd-verse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pd-verse-item {
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--mist);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 14px 16px;
}

.page-products .pd-verse-item--major { border-left-color: var(--moss); }
.page-products .pd-verse-item--minor { border-left-color: var(--lake); }
.page-products .pd-verse-item--patch { border-left-color: var(--amber); }

.page-products .pd-verse-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.page-products .pd-verse-item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
}

.page-products .pd-verse-foot {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-verse-foot a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 断点 ============ */
@media (min-width: 560px) {
  .page-products .pd-dl-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-products .pd-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-products .pd-three-item:nth-child(2) { margin-top: 30px; }
  .page-products .pd-three-item:nth-child(3) { margin-top: 14px; }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-products .pd-fit-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-verse-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

@media (min-width: 960px) {
  .page-products .pd-dl-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-products .pd-dl-shot {
    position: sticky;
    top: 96px;
  }

  .page-products .pd-install-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-dl-item,
  .page-products .pd-filter,
  .page-products .pd-endbar-link,
  .page-products .pd-copy {
    transition: none;
  }

  .page-products .pd-dl-item:hover,
  .page-products .pd-filter:hover {
    transform: 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><span class="breadcrumb-current">资源下载</span></li>
      </ol>
    </nav>
  </div>

  <section class="section pd-hero" aria-labelledby="pd-hero-title">
    <div class="wrap">
      <div class="pd-hero-grid">
        <div class="pd-hero-main">
          <p class="coord coord--summer">01 / 资源下载</p>
          <h1 id="pd-hero-title" class="display display--hero">下载四季CN 安装包，<br>新旧差异一次看明白</h1>
          <p class="lede">五个端的安装包都在这一页，文件大小、适用系统、发布批次和校验值逐项写明，选好端就能取走。手上还留着旧版本的，把版本号往对照表里一放，哪些是新加的、哪些改了做法、哪些已经停用，一条条看得见。</p>
          <div class="pd-hero-actions">
            <a class="btn btn--cta" href="#downloads">按端取包</a>
            <a class="btn btn--ghost" href="#diff">对照版本差异</a>
          </div>
        </div>
        <aside class="pd-hero-aside" aria-label="版本概况">
          <ul class="pd-facts">
            <li>
              <span class="pd-fact-num">24</span>
              <span class="pd-fact-label">个正式版本自 2018 年秋季发布至今，当前主线为 V3 系列</span>
            </li>
            <li>
              <span class="pd-fact-num">5</span>
              <span class="pd-fact-label">个端同批发布，桌面、移动与网页各有对应安装方式</span>
            </li>
            <li>
              <span class="pd-fact-num">11</span>
              <span class="pd-fact-label">个 V3 小版本陆续迭代，按季度出大版本、按月度出小版本</span>
            </li>
          </ul>
        </aside>
      </div>
      <figure class="pd-hero-media">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="三列版本卡片矩阵，卡片角上分别标注 V1、V2、V3 版本号与对应发布季度">
      </figure>
    </div>
  </section>

  <section id="downloads" class="section pd-downloads" aria-labelledby="pd-dl-title">
    <div class="wrap">
      <div class="section-head">
        <p class="coord coord--spring">02 / 五个端</p>
        <h2 id="pd-dl-title" class="display display--section">选好端，再挑版本</h2>
        <p class="section-lede">同一个账号，五个端的包可以一起取。装在哪台设备上，就先看那一栏的系统要求，对上了再动手。</p>
      </div>

      <div class="pd-endbar" role="navigation" aria-label="按端定位安装包">
        <a class="pd-endbar-link is-on" href="#dl-windows"><span class="pd-endbar-num">01</span>Windows</a>
        <a class="pd-endbar-link" href="#dl-macos"><span class="pd-endbar-num">02</span>macOS</a>
        <a class="pd-endbar-link" href="#dl-android"><span class="pd-endbar-num">03</span>Android</a>
        <a class="pd-endbar-link" href="#dl-ios"><span class="pd-endbar-num">04</span>iOS</a>
        <a class="pd-endbar-link" href="#dl-web"><span class="pd-endbar-num">05</span>网页版</a>
      </div>

      <div class="pd-dl-layout">
        <div class="pd-dl-list">
          <article class="pd-dl-item pd-dl-item--win" id="dl-windows">
            <div class="pd-dl-head">
              <h3 class="pd-dl-name">Windows</h3>
              <span class="pd-dl-ver mono">V3.4.2</span>
            </div>
            <dl class="pd-dl-spec">
              <div><dt>文件大小</dt><dd>86.4 MB</dd></div>
              <div><dt>适用系统</dt><dd>Windows 10 / 11（64 位）</dd></div>
              <div><dt>发布批次</dt><dd>本季度第 2 次小版本</dd></div>
            </dl>
            <p class="pd-dl-check">
              <span class="pd-dl-check-label">SHA-256</span>
              <button type="button" class="pd-copy mono" data-copy aria-label="复制 Windows 安装包校验值">83f1a9c47be2d05f6c1a9d348e7b205c</button>
            </p>
          </article>

          <article class="pd-dl-item pd-dl-item--mac" id="dl-macos">
            <div class="pd-dl-head">
              <h3 class="pd-dl-name">macOS</h3>
              <span class="pd-dl-ver mono">V3.4.2</span>
            </div>
            <dl class="pd-dl-spec">
              <div><dt>文件大小</dt><dd>92.1 MB</dd></div>
              <div><dt>适用系统</dt><dd>macOS 12 及以上，Apple 芯片与 Intel 通用</dd></div>
              <div><dt>发布批次</dt><dd>本季度第 2 次小版本</dd></div>
            </dl>
            <p class="pd-dl-check">
              <span class="pd-dl-check-label">SHA-256</span>
              <button type="button" class="pd-copy mono" data-copy aria-label="复制 macOS 安装包校验值">4d7e2b80cf3915a6d2748ee0b93c1f6a</button>
            </p>
          </article>

          <article class="pd-dl-item pd-dl-item--android" id="dl-android">
            <div class="pd-dl-head">
              <h3 class="pd-dl-name">Android</h3>
              <span class="pd-dl-ver mono">V3.4.2</span>
            </div>
            <dl class="pd-dl-spec">
              <div><dt>文件大小</dt><dd>61.8 MB</dd></div>
              <div><dt>适用系统</dt><dd>Android 9 及以上</dd></div>
              <div><dt>发布批次</dt><dd>本季度第 2 次小版本</dd></div>
            </dl>
            <p class="pd-dl-check">
              <span class="pd-dl-check-label">SHA-256</span>
              <button type="button" class="pd-copy mono" data-copy aria-label="复制 Android 安装包校验值">b62c5081ed4a37f9c8150bd2e6a73f04</button>
            </p>
          </article>

          <article class="pd-dl-item pd-dl-item--ios" id="dl-ios">
            <div class="pd-dl-head">
              <h3 class="pd-dl-name">iOS</h3>
              <span class="pd-dl-ver mono">V3.4.2</span>
            </div>
            <dl class="pd-dl-spec">
              <div><dt>文件大小</dt><dd>74.3 MB</dd></div>
              <div><dt>适用系统</dt><dd>iOS 15 及以上</dd></div>
              <div><dt>发布批次</dt><dd>本季度第 2 次小版本</dd></div>
            </dl>
            <p class="pd-dl-check">
              <span class="pd-dl-check-label">SHA-256</span>
              <button type="button" class="pd-copy mono" data-copy aria-label="复制 iOS 安装包校验值">0a9d37e5c14b6802fe5b9d27ac43e018</button>
            </p>
          </article>

          <article class="pd-dl-item pd-dl-item--web" id="dl-web">
            <div class="pd-dl-head">
              <h3 class="pd-dl-name">网页版</h3>
              <span class="pd-dl-ver mono">V3.4.2</span>
            </div>
            <dl class="pd-dl-spec">
              <div><dt>文件大小</dt><dd>无需安装，打开即用</dd></div>
              <div><dt>适用系统</dt><dd>Chrome / Edge / Safari 近两年版本</dd></div>
              <div><dt>发布批次</dt><dd>跟随主线自动更新</dd></div>
            </dl>
            <p class="pd-dl-check">
              <span class="pd-dl-check-label">校验说明</span>
              <span class="pd-dl-check-note">网页端由线上加载，不提供独立安装包，版本号与桌面端同步推进。</span>
            </p>
          </article>
        </div>

        <figure class="pd-dl-shot">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" loading="lazy" decoding="async" alt="含五个端标识的下载界面截图，每个端旁列出文件大小、适用系统与校验值">
          <figcaption class="pd-shot-cap">端切换后，文件信息与校验值在同一屏更新，不用来回翻页。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section id="diff" class="section pd-diff" aria-labelledby="pd-diff-title">
    <div class="wrap">
      <div class="section-head">
        <p class="coord coord--autumn">03 / 版本对照</p>
        <h2 id="pd-diff-title" class="display display--section">旧版本和新版本，究竟差在哪</h2>
        <p class="section-lede">四季CN版对照旧版本，在这里拆成 128 项条目，覆盖 V1、V2、V3 三代。按版本跨度可以先只看某一段，按类型也能只挑新增、变更或下线中的一类。</p>
      </div>

      <div class="pd-diff-bar">
        <div class="pd-filters" role="group" aria-label="按差异类型筛选">
          <button type="button" class="pd-filter is-on" aria-pressed="true"><span class="pd-dot pd-dot--add" aria-hidden="true"></span>新增</button>
          <button type="button" class="pd-filter" aria-pressed="false"><span class="pd-dot pd-dot--change" aria-hidden="true"></span>变更</button>
          <button type="button" class="pd-filter" aria-pressed="false"><span class="pd-dot pd-dot--remove" aria-hidden="true"></span>下线</button>
        </div>
        <p class="pd-diff-count mono">128 项差异 · 覆盖 V1 / V2 / V3</p>
      </div>

      <div class="pd-diff-bar pd-diff-bar--ver">
        <div class="pd-filters" role="group" aria-label="按版本跨度筛选">
          <button type="button" class="pd-filter is-on" aria-pressed="true">全部版本</button>
          <button type="button" class="pd-filter" aria-pressed="false">V1 → V2</button>
          <button type="button" class="pd-filter" aria-pressed="false">V2 → V3</button>
          <button type="button" class="pd-filter" aria-pressed="false">V1 → V3</button>
        </div>
      </div>

      <div class="matrix-wrap pd-matrix-wrap">
        <table class="matrix pd-matrix">
          <caption class="sr-only">三代版本差异条目摘录，含条目编号、涉及模块、版本跨度、类型与变化说明</caption>
          <thead>
            <tr>
              <th scope="col">条目编号</th>
              <th scope="col">涉及模块</th>
              <th scope="col">版本跨度</th>
              <th scope="col">类型</th>
              <th scope="col">变化说明</th>
            </tr>
          </thead>
          <tbody>
            <tr class="pd-row--add">
              <td class="pd-cell-code">CN-0107</td>
              <td>安装与激活</td>
              <td class="mono">V2 → V3</td>
              <td><span class="chip chip--change">变更</span></td>
              <td>激活改为在本地确认后完成，离线环境可用导入文件走完整个流程。</td>
            </tr>
            <tr class="pd-row--add">
              <td class="pd-cell-code">CN-0114</td>
              <td>账号与权限</td>
              <td class="mono">V2 → V3</td>
              <td><span class="chip chip--add">新增</span></td>
              <td>团队成员可按角色分配可见范围，管理员随时收回，交接不再靠口头说明。</td>
            </tr>
            <tr class="pd-row--change">
              <td class="pd-cell-code">CN-0126</td>
              <td>同步与备份</td>
              <td class="mono">V1 → V3</td>
              <td><span class="chip chip--change">变更</span></td>
              <td>备份保留份数由 3 份提高到 5 份，恢复时可以直接选回到某个时间点。</td>
            </tr>
            <tr class="pd-row--add">
              <td class="pd-cell-code">CN-0133</td>
              <td>界面与快捷</td>
              <td class="mono">V2 → V3</td>
              <td><span class="chip chip--add">新增</span></td>
              <td>常用操作支持自定义快捷键，设置冲突时当场提示，不用装完才发现按不动。</td>
            </tr>
            <tr class="pd-row--remove">
              <td class="pd-cell-code">CN-0141</td>
              <td>资源与素材</td>
              <td class="mono">V1 → V2</td>
              <td><span class="chip chip--remove">下线</span></td>
              <td>旧素材库入口停止使用，已有素材整体并入资源面板，按原分类仍能找到。</td>
            </tr>
            <tr class="pd-row--change">
              <td class="pd-cell-code">CN-0152</td>
              <td>兼容与适配</td>
              <td class="mono">V2 → V3</td>
              <td><span class="chip chip--change">变更</span></td>
              <td>高分屏缩放改为跟随系统设置，不再需要单独调数值，换显示器后回到正常大小。</td>
            </tr>
            <tr class="pd-row--remove">
              <td class="pd-cell-code">CN-0160</td>
              <td>安装与激活</td>
              <td class="mono">V1 → V2</td>
              <td><span class="chip chip--remove">下线</span></td>
              <td>旧版安装向导的静默安装参数停止支持，批量部署改由企业适配对接提供方案。</td>
            </tr>
            <tr class="pd-row--add">
              <td class="pd-cell-code">CN-0168</td>
              <td>同步与备份</td>
              <td class="mono">V2 → V3</td>
              <td><span class="chip chip--add">新增</span></td>
              <td>两份文件同时被改动时保留各自副本，并标出修改时间，谁覆盖谁一眼能分清。</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="pd-diff-foot">条目按版本号分段归档，V3 相关的部分在内容中心又按六个模块分了一遍。想连着上下文看某一类改动，<a href="/information/">去内容中心按模块翻</a>会更快。</p>
    </div>
  </section>

  <section class="section pd-before" aria-labelledby="pd-before-title">
    <div class="wrap">
      <div class="section-head">
        <p class="coord coord--winter">04 / 装前确认</p>
        <h2 id="pd-before-title" class="display display--section">装之前，先过这三道</h2>
        <p class="section-lede">装完才发现不兼容，最费时间。下面三栏对一遍，多数问题在动手前就能避开。</p>
      </div>

      <div class="pd-three">
        <article class="pd-three-item">
          <h3>系统版本够不够</h3>
          <p>每个包在适用系统一栏写的是最低版本，低于这条线，装完可能起不来或者功能缺一块。手头设备偏旧，先看这一栏，再决定是升系统还是换设备。</p>
        </article>
        <article class="pd-three-item">
          <h3>依赖组件有没有</h3>
          <p>部分系统要额外装运行组件，安装向导会先做一次检查，缺什么当场提示。企业内网连不上外网时，建议把组件和安装包一起取走，装的时候不中断。</p>
        </article>
        <article class="pd-three-item">
          <h3>和旧版冲不冲突</h3>
          <p>一台机器上还留着旧版本时，安装前先退出旧版的常驻进程，否则会提示文件被占用。确实需要两个版本并存的，装到不同目录，首次启动时各自指定配置位置。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section pd-fit" aria-labelledby="pd-fit-title">
    <div class="wrap pd-fit-grid">
      <figure class="pd-fit-media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="两列排布的适配说明表，左列列出系统版本要求，右列标注已知冲突与注意事项">
      </figure>
      <div class="pd-fit-body">
        <p class="coord coord--summer">05 / 适配检测</p>
        <h2 id="pd-fit-title" class="display display--section">68 种组合跑过一轮，才放到这里</h2>
        <p>每个版本发布前，都要在 68 种常见设备与系统组合上跑一遍适配检测，覆盖五个端里最常用的系统版本、屏幕尺寸与输入方式。检测不只是能不能装，还包括启动、切换账号、同步和长时间运行的表现。</p>
        <p>企业客户要把四季CN 铺到自有设备池的，由测试与适配团队的 9 人对接，跑完后出具一份适配报告，写明测过的机型、系统版本与结论。通过 12 家渠道服务商分发的安装包，走的是同一套检测流程。</p>
        <p class="pd-fit-links">
          <a class="btn btn--solid" href="/team/">看看谁在做适配</a>
          <a class="btn btn--ghost" href="/connect/">企业部署怎么对接</a>
        </p>
      </div>
    </div>
  </section>

  <figure class="pd-band">
    <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" loading="lazy" decoding="async" alt="湖蓝水面微距纹理与缩短路径条叠加的抽象图，作为下载与安装之间的过渡">
  </figure>

  <section class="section pd-install" aria-labelledby="pd-install-title">
    <div class="wrap">
      <div class="section-head">
        <p class="coord coord--spring">06 / 装上并跑起来</p>
        <h2 id="pd-install-title" class="display display--section">拿到包之后的三步</h2>
        <p class="section-lede">三步连着做，中途卡住也不用退回去重来，每一步都写了卡住时往下怎么走。</p>
      </div>

      <div class="pd-install-grid">
        <figure class="pd-install-media">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" loading="lazy" decoding="async" alt="三步纵向流程图，第二步显示校验值比对一致的结果">
        </figure>

        <ol class="pd-steps">
          <li class="pd-step">
            <span class="pd-step-num mono">01</span>
            <div class="pd-step-body">
              <h3>先比校验值</h3>
              <p>把这一行 SHA-256 值复制出来，用系统自带的校验工具算一遍，两个值一致说明包在传输途中没有缺失。</p>
              <p class="pd-step-fail">对不上时：重新取一次，再算一遍；仍然对不上，把端名和校验值发到客服邮箱，我们确认后给你换一份。</p>
            </div>
          </li>
          <li class="pd-step">
            <span class="pd-step-num mono">02</span>
            <div class="pd-step-body">
              <h3>按端安装</h3>
              <p>桌面端双击安装包，按向导走完；移动端允许来源后安装；网页版直接用浏览器打开，不需要这一步。</p>
              <p class="pd-step-fail">卡住时：先看上一节的三栏确认有没有遗漏；提示文件被占用，就先退出旧版本常驻进程再试。</p>
            </div>
          </li>
          <li class="pd-step">
            <span class="pd-step-num mono">03</span>
            <div class="pd-step-body">
              <h3>首次启动走一遍</h3>
              <p>第一次启动会检查运行环境并同步一次账号信息，这一步走完，快捷键、权限和备份设置都会照迁移前的习惯恢复。</p>
              <p class="pd-step-fail">没恢复时：到使用教程里按模块查分步卡，最长的一篇 9 步，单页打印出来照着做也行。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section pd-verse" aria-labelledby="pd-verse-title">
    <div class="wrap">
      <div class="section-head">
        <p class="coord coord--autumn">07 / 读懂编号</p>
        <h2 id="pd-verse-title" class="display display--section">V3.4.2 这样的编号怎么读</h2>
        <p class="section-lede">三段数字各管一件事。看懂之后，别人报出一个版本号，你就能判断自己要不要更新。</p>
      </div>

      <div class="pd-verse-grid">
        <p class="pd-verse-big mono" aria-label="示例版本号 V3.4.2"><span class="pd-verse-part pd-verse-part--major">V3</span><span class="pd-verse-dot">.</span><span class="pd-verse-part pd-verse-part--minor">4</span><span class="pd-verse-dot">.</span><span class="pd-verse-part pd-verse-part--patch">2</span></p>

        <ul class="pd-verse-list">
          <li class="pd-verse-item pd-verse-item--major">
            <h3>主版本 · V3</h3>
            <p>按季度推进的大版本，功能结构和操作方式可能一起调整。跨主版本时，建议先翻一遍对照表里的差异条目。</p>
          </li>
          <li class="pd-verse-item pd-verse-item--minor">
            <h3>次版本 · 4</h3>
            <p>按月发布，集中处理一批功能与适配问题。同主版本内升级，多数情况下直接覆盖安装就可以。</p>
          </li>
          <li class="pd-verse-item pd-verse-item--patch">
            <h3>修订号 · 2</h3>
            <p>临时修复与小幅调整，只动出问题的地方。看到修订号变化，说明这一版集中在修问题，可以直接更新。</p>
          </li>
        </ul>
      </div>

      <p class="pd-verse-foot">按这套规则，每年会有 4 个大版本和 12 个月度小版本，年度版本回顾会把这些变化一次汇总。拿不准手上这一版要不要动，<a href="/tutorial/">用一句话描述情况查步骤</a>，或者把版本号发到<a href="/connect/">联系通道</a>问我们。</p>
    </div>
  </section>
</main>


.page-products {
  background: var(--paper);
  color: var(--ink);
}

.page-products img {
  max-width: 100%;
  height: auto;
}

/* ============ 首屏 ============ */
.page-products .pd-hero {
  padding-top: clamp(18px, 3vw, 36px);
}

.page-products .pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}

.page-products .pd-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}

.page-products .pd-hero .lede {
  margin-top: 18px;
  max-width: 48ch;
}

.page-products .pd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-products .pd-hero-aside {
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--lake);
  background: var(--frost);
  box-shadow: var(--shadow-hard);
  padding: 16px 18px 18px;
}

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

.page-products .pd-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mist);
}

.page-products .pd-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-fact-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--moss);
}

.page-products .pd-fact-label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.page-products .pd-hero-media {
  margin: clamp(24px, 4vw, 44px) 0 0;
}

.page-products .pd-hero-media img {
  display: block;
  width: 100%;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  object-fit: cover;
}

/* ============ 端索引条 ============ */
.page-products .pd-endbar {
  display: flex;
  overflow-x: auto;
  margin: 0 0 clamp(18px, 3vw, 28px);
  border: var(--line) solid var(--ink);
  background: var(--frost);
}

.page-products .pd-endbar-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border-right: var(--line) solid var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}

.page-products .pd-endbar-link:last-child {
  border-right: 0;
}

.page-products .pd-endbar-link:hover,
.page-products .pd-endbar-link:focus-visible {
  background: var(--lake);
  color: var(--paper);
}

.page-products .pd-endbar-link.is-on {
  background: var(--moss);
  color: var(--paper);
  box-shadow: inset 0 -4px 0 var(--lake);
}

.page-products .pd-endbar-num {
  font-size: 11px;
  opacity: 0.65;
}

/* ============ 下载列表 ============ */
.page-products .pd-dl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

.page-products .pd-dl-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-products .pd-dl-item {
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--moss);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 14px 16px 16px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.page-products .pd-dl-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
}

.page-products .pd-dl-item--win { border-left-color: var(--lake); }
.page-products .pd-dl-item--mac { border-left-color: var(--mist); }
.page-products .pd-dl-item--android { border-left-color: var(--spring); }
.page-products .pd-dl-item--ios { border-left-color: var(--amber); }
.page-products .pd-dl-item--web { border-left-color: var(--moss); }

.page-products .pd-dl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.page-products .pd-dl-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .pd-dl-ver {
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--wash);
  border: 1px solid var(--mist);
  border-radius: 999px;
  padding: 2px 9px;
}

.page-products .pd-dl-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 12px 0 0;
}

.page-products .pd-dl-spec dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-dl-spec dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.page-products .pd-dl-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
}

.page-products .pd-dl-check-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-dl-check-note {
  color: var(--muted);
  line-height: 1.6;
}

.page-products .pd-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  background: var(--frost);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
  word-break: break-all;
  transition: background-color 120ms var(--ease);
}

.page-products .pd-copy:hover,
.page-products .pd-copy:focus-visible {
  background: var(--spring);
}

.page-products .pd-dl-shot {
  margin: 0;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-dl-shot img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-bottom: var(--line) solid var(--ink);
}

.page-products .pd-shot-cap {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ============ 对照表 ============ */
.page-products .pd-diff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-products .pd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .pd-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease);
}

.page-products .pd-filter:hover {
  transform: translateY(-2px);
}

.page-products .pd-filter.is-on {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--paper);
}

.page-products .pd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
}

.page-products .pd-dot--add { background: var(--spring); }
.page-products .pd-dot--change { background: var(--amber); }
.page-products .pd-dot--remove { background: var(--brick); }

.page-products .pd-diff-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-matrix-wrap {
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  background: #fff;
  overflow: auto;
  max-height: 580px;
}

.page-products .pd-matrix {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pd-matrix th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--frost);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--moss);
  padding: 11px 12px;
  border-bottom: var(--line) solid var(--ink);
  white-space: nowrap;
}

.page-products .pd-matrix td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--mist);
  vertical-align: top;
  line-height: 1.65;
}

.page-products .pd-matrix tbody tr:nth-child(even) td {
  background: var(--wash);
}

.page-products .pd-matrix tbody tr.pd-row--add td:first-child { box-shadow: inset 4px 0 0 var(--spring); }
.page-products .pd-matrix tbody tr.pd-row--change td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
.page-products .pd-matrix tbody tr.pd-row--remove td:first-child { box-shadow: inset 4px 0 0 var(--brick); }

.page-products .pd-cell-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.page-products .pd-diff-foot {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-diff-foot a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 装前三件事 ============ */
.page-products .pd-three {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .pd-three-item {
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--mist);
  background: var(--frost);
  box-shadow: var(--shadow-hard-sm);
  padding: 18px;
}

.page-products .pd-three-item:nth-child(1) { border-top-color: var(--spring); }
.page-products .pd-three-item:nth-child(2) { border-top-color: var(--lake); }
.page-products .pd-three-item:nth-child(3) { border-top-color: var(--amber); }

.page-products .pd-three-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .pd-three-item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ============ 适配检测 ============ */
.page-products .pd-fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.page-products .pd-fit-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  border-top: 8px solid var(--lake);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-fit-media img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.page-products .pd-fit h2 {
  margin: 10px 0 14px;
  font-size: clamp(28px, 5vw, 46px);
}

.page-products .pd-fit-body p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.page-products .pd-fit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px !important;
}

/* ============ 过渡带 ============ */
.page-products .pd-band {
  margin: clamp(30px, 5vw, 56px) 0 0;
}

.page-products .pd-band img {
  display: block;
  width: 100%;
  border-top: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  object-fit: cover;
}

/* ============ 安装三步 ============ */
.page-products .pd-install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-products .pd-install-media {
  margin: 0;
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--spring);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
}

.page-products .pd-install-media img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.page-products .pd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .pd-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--moss);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 16px;
}

.page-products .pd-step-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--moss);
}

.page-products .pd-step-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

.page-products .pd-step-body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
}

.page-products .pd-step-fail {
  margin-top: 10px !important;
  padding: 8px 10px;
  background: var(--wash);
  border-left: 4px solid var(--brick);
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* ============ 版本号读法 ============ */
.page-products .pd-verse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-products .pd-verse-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 22px 12px;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--frost);
  font-size: clamp(46px, 13vw, 96px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.page-products .pd-verse-part--major { color: var(--moss); }
.page-products .pd-verse-part--minor { color: var(--lake); }
.page-products .pd-verse-part--patch { color: var(--amber); }
.page-products .pd-verse-dot { color: var(--mist); }

.page-products .pd-verse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pd-verse-item {
  border: var(--line) solid var(--ink);
  border-left: 8px solid var(--mist);
  background: #fff;
  box-shadow: var(--shadow-hard-sm);
  padding: 14px 16px;
}

.page-products .pd-verse-item--major { border-left-color: var(--moss); }
.page-products .pd-verse-item--minor { border-left-color: var(--lake); }
.page-products .pd-verse-item--patch { border-left-color: var(--amber); }

.page-products .pd-verse-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.page-products .pd-verse-item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
}

.page-products .pd-verse-foot {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-verse-foot a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 断点 ============ */
@media (min-width: 560px) {
  .page-products .pd-dl-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .page-products .pd-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-products .pd-three-item:nth-child(2) { margin-top: 30px; }
  .page-products .pd-three-item:nth-child(3) { margin-top: 14px; }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-products .pd-fit-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-verse-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

@media (min-width: 960px) {
  .page-products .pd-dl-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-products .pd-dl-shot {
    position: sticky;
    top: 96px;
  }

  .page-products .pd-install-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-dl-item,
  .page-products .pd-filter,
  .page-products .pd-endbar-link,
  .page-products .pd-copy {
    transition: none;
  }

  .page-products .pd-dl-item:hover,
  .page-products .pd-filter:hover {
    transform: none;
  }
}