.page-products {
  --p-line: 1px solid var(--rock);
  --p-line-soft: 1px solid rgba(42, 51, 70, .62);
  --p-surface: rgba(14, 26, 51, .72);
  --p-surface-soft: rgba(19, 31, 58, .62);
  color: var(--ivory);
}

.page-products .crumbs {
  margin-bottom: 26px;
}

/* ---------- 首屏 ---------- */
.page-products .p-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.page-products .p-lede {
  margin: 18px 0 0;
  max-width: 40em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--mist);
}

.page-products .p-ver {
  color: var(--gold);
  font-size: 16px;
}

.page-products .p-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.page-products .p-hero-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .p-fact {
  border: var(--p-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--p-surface-soft), rgba(7, 10, 18, .88));
  padding: 16px 18px;
  transition: border-color var(--dur) var(--ease);
}

.page-products .p-fact:hover {
  border-color: rgba(53, 224, 210, .5);
}

.page-products .p-fact-num {
  display: block;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gold);
}

.page-products .p-fact-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
}

@media (min-width: 960px) {
  .page-products .p-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: 56px;
  }
  .page-products .p-hero-facts {
    margin-top: 46px;
  }
}

/* ---------- 下载对照 ---------- */
.page-products .dl-layout {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.page-products .dl-table {
  border: var(--p-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}

.page-products .dl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 16px 18px;
  border-top: var(--p-line-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .dl-row:first-child {
  border-top: 0;
}

.page-products .dl-row--head {
  display: none;
}

.page-products .dl-row--current {
  background: rgba(53, 224, 210, .06);
  box-shadow: inset 3px 0 0 0 var(--cyan);
}

.page-products .dl-platform {
  color: var(--ivory);
  font-weight: 500;
}

.page-products .dl-ver {
  color: var(--gold);
  font-size: 14px;
}

.page-products .dl-sys,
.page-products .dl-xfer {
  font-size: 13px;
}

.page-products .dl-xfer {
  color: rgba(138, 151, 173, .92);
}

@media (min-width: 720px) {
  .page-products .dl-row {
    grid-template-columns: 1fr .95fr 1.25fr 1.5fr;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
  }
  .page-products .dl-row--head {
    display: grid;
    background: rgba(42, 51, 70, .38);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--mist);
  }
  .page-products .dl-sys,
  .page-products .dl-xfer {
    font-size: 14px;
  }
}

@media (min-width: 1040px) {
  .page-products .dl-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* ---------- 媒体框 ---------- */
.page-products .media-frame {
  margin: 0;
  border: var(--p-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}

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

.page-products .media-caption {
  padding: 12px 16px;
  border-top: var(--p-line-soft);
  font-size: 12px;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 版本时间线 ---------- */
.page-products .tl-track {
  list-style: none;
  position: relative;
  margin: 34px 0 0;
  padding: 0 0 0 28px;
  display: grid;
  gap: 26px;
}

.page-products .tl-track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, rgba(232, 180, 74, .6), rgba(42, 51, 70, .85));
}

.page-products .tl-item {
  position: relative;
  padding-bottom: 22px;
  border-bottom: var(--p-line-soft);
}

.page-products .tl-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.page-products .tl-item--now::before {
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(53, 224, 210, .16), 0 0 18px rgba(53, 224, 210, .55);
}

.page-products .tl-when {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gold);
}

.page-products .tl-item--now .tl-when {
  color: var(--cyan);
}

.page-products .tl-desc {
  margin: 8px 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .tl-figure {
  margin-top: 34px;
}

@media (min-width: 900px) {
  .page-products .tl-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 26px;
    padding-left: 30px;
  }
  .page-products .tl-track::before {
    bottom: 12px;
  }
}

/* ---------- 家庭订阅 ---------- */
.page-products .sub-layout {
  display: grid;
  gap: 26px;
  margin-top: 34px;
}

.page-products .sub-facts {
  display: grid;
  gap: 0;
  align-content: start;
}

.page-products .sub-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: var(--p-line-soft);
}

.page-products .sub-fact:first-child {
  border-top: var(--p-line-soft);
}

.page-products .sub-fact p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .sub-num {
  font-size: 32px;
  line-height: 1;
  color: var(--cyan);
  min-width: 34px;
}

@media (min-width: 1040px) {
  .page-products .sub-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
  }
}

.page-products .tier-grid {
  display: grid;
  gap: 18px;
  margin-top: 44px;
  align-items: end;
}

.page-products .tier {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px;
  border: var(--p-line);
  border-radius: var(--radius);
  background: var(--p-surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .tier:hover {
  border-color: rgba(53, 224, 210, .55);
  transform: translateY(-4px);
}

.page-products .tier--family {
  border-color: rgba(232, 180, 74, .45);
}

.page-products .tier-name {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ivory);
}

.page-products .tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .tier-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

.page-products .tier-bar {
  display: block;
  width: 100%;
  border-radius: var(--radius-s);
  border: 1px solid rgba(53, 224, 210, .28);
  background: linear-gradient(180deg, rgba(53, 224, 210, .3), rgba(53, 224, 210, .05));
  margin-top: auto;
}

.page-products .tier--base .tier-bar {
  height: 34px;
}

.page-products .tier--family .tier-bar {
  height: 62px;
  border-color: rgba(232, 180, 74, .38);
  background: linear-gradient(180deg, rgba(232, 180, 74, .34), rgba(232, 180, 74, .05));
}

.page-products .tier--biz .tier-bar {
  height: 96px;
}

@media (min-width: 760px) {
  .page-products .tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* ---------- 资源分类 ---------- */
.page-products .cat-layout {
  display: grid;
  gap: 30px;
  margin-top: 34px;
}

.page-products .cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rock);
  border: var(--p-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .cat-item {
  background: var(--navy);
  padding: 16px 18px;
  transition: background var(--dur) var(--ease);
}

.page-products .cat-item:hover {
  background: var(--navy-soft);
}

.page-products .cat-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory);
}

.page-products .cat-use {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
}

@media (min-width: 560px) {
  .page-products .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (min-width: 1000px) {
  .page-products .cat-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
    gap: 36px;
    align-items: start;
  }
}

.page-products .tag-cloud {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .tag-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: var(--p-line);
  border-radius: 999px;
  background: var(--p-surface-soft);
  font-size: 13px;
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .tag-item:hover,
.page-products .tag-item:focus-within {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-products .tag-name {
  color: var(--ivory);
}

.page-products .tag-use {
  font-size: 12px;
  color: var(--mist);
}

/* ---------- 收藏同步 ---------- */
.page-products .sync-layout {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.page-products .sync-steps {
  list-style: none;
  counter-reset: sync;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .sync-steps li {
  counter-increment: sync;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: var(--p-line);
  border-radius: var(--radius);
  background: var(--navy);
  transition: border-color var(--dur) var(--ease);
}

.page-products .sync-steps li:hover {
  border-color: rgba(53, 224, 210, .45);
}

.page-products .sync-steps li::before {
  content: counter(sync, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan);
  padding-top: 3px;
}

.page-products .sync-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .sync-side {
  border: var(--p-line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(232, 180, 74, .09), var(--p-surface) 55%);
  padding: 24px 22px;
}

.page-products .sync-side-head {
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
}

.page-products .sync-side-label {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .sync-side-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .sync-side-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mist);
}

.page-products .sync-side-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral);
}

@media (min-width: 900px) {
  .page-products .sync-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
    gap: 34px;
    align-items: start;
  }
}

/* ---------- 系统要求 ---------- */
.page-products .req-layout {
  display: grid;
  gap: 30px;
  margin-top: 34px;
}

.page-products .req-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.page-products .req-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 15px 0;
  border-bottom: var(--p-line-soft);
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .req-list li:first-child {
  border-top: var(--p-line-soft);
}

.page-products .req-key {
  color: var(--ivory);
  font-weight: 500;
}

.page-products .req-note {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--moss);
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

@media (min-width: 560px) {
  .page-products .req-list li {
    grid-template-columns: 92px 1fr;
    gap: 18px;
    align-items: baseline;
  }
}

@media (min-width: 1000px) {
  .page-products .req-layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 46px;
    align-items: center;
  }
}

/* ---------- 上手路径 ---------- */
.page-products .path-list {
  list-style: none;
  counter-reset: path;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .path-step {
  border: var(--p-line);
  border-radius: var(--radius);
  padding: 22px 20px;
  background: linear-gradient(180deg, var(--p-surface-soft), rgba(7, 10, 18, .9));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .path-step:hover {
  border-color: rgba(255, 107, 74, .5);
  transform: translateY(-4px);
}

.page-products .path-num {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-products .path-title {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ivory);
}

.page-products .path-desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

@media (min-width: 820px) {
  .page-products .path-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.page-products .path-cta {
  margin-top: 30px;
  padding: 22px 24px;
  border: var(--p-line);
  border-radius: var(--radius);
  background: rgba(14, 26, 51, .6);
  display: grid;
  gap: 18px;
}

.page-products .path-cta-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .path-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

@media (min-width: 900px) {
  .page-products .path-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .p-fact,
  .page-products .tier,
  .page-products .tag-item,
  .page-products .path-step,
  .page-products .sync-steps li {
    transition: none;
  }
  .page-products .tier:hover,
  .page-products .tag-item:hover,
  .page-products .path-step:hover {
    transform: none;
  }
}
<<<END>>>