.page-products {
  --prod-card: #FFFFFF;
  --prod-zebra: rgba(227, 218, 205, 0.30);
  --prod-row-hover: rgba(201, 51, 26, 0.07);
  --prod-line-soft: rgba(255, 255, 255, 0.16);
  --prod-on-dark: rgba(255, 255, 255, 0.78);
}

/* ---------- 面包屑 ---------- */
.page-products .prod-crumb-wrap {
  padding-top: clamp(18px, 3vw, 30px);
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  padding-block: clamp(22px, 3.6vw, 40px) clamp(48px, 6.5vw, 88px);
}

.page-products .prod-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 36px);
  align-items: start;
}

.page-products .prod-hero h1 {
  margin: 12px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
  max-width: 15em;
}

.page-products .prod-hero__lede {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.7vw, 17px);
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-hint {
  background: var(--lf-ink);
  color: #fff;
  border-radius: var(--lf-radius);
  padding: clamp(20px, 3vw, 26px);
  position: relative;
  overflow: hidden;
}

.page-products .prod-hint::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(255, 122, 69, 0.35);
  box-shadow: 0 0 0 22px rgba(255, 122, 69, 0.08);
  pointer-events: none;
}

.page-products .prod-hint__title {
  margin: 0 0 8px;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: #fff;
}

.page-products .prod-hint__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--prod-on-dark);
  position: relative;
}

.page-products .prod-hint__body .mono {
  color: var(--lf-spark);
  font-weight: 700;
}

/* ---------- 终端货架 ---------- */
.page-products .prod-shelf__title {
  margin: clamp(36px, 5vw, 56px) 0 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  letter-spacing: -0.01em;
  color: var(--lf-ink);
}

.page-products .prod-shelf {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .prod-term {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px 24px;
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  transition: border-color 0.2s ease, transform 0.24s ease;
}

.page-products .prod-term::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 0.2s ease;
}

.page-products .prod-term:hover,
.page-products .prod-term:focus-within {
  border-color: var(--lf-brand);
  transform: translateY(-2px);
}

.page-products .prod-term:hover::after,
.page-products .prod-term:focus-within::after {
  background: var(--lf-brand);
}

.page-products .prod-term__idx {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--lf-muted);
}

.page-products .prod-term__name {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--lf-ink);
  letter-spacing: -0.005em;
}

.page-products .prod-term__ver {
  margin: 4px 0 0;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--lf-brand);
}

.page-products .prod-term__pkg {
  margin: 2px 0 14px;
  font-size: 13px;
  color: var(--lf-muted);
}

.page-products .prod-term__check {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: grid;
  gap: 7px;
  border-top: 1px dashed var(--lf-line);
}

.page-products .prod-term__check li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lf-muted);
}

.page-products .prod-term__check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-spark);
}

/* ---------- 图像通用 ---------- */
.page-products .prod-figure {
  margin: clamp(32px, 4.5vw, 52px) 0 0;
}

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

/* ---------- 版本号构成 ---------- */
.page-products .prod-anat {
  padding-block: clamp(46px, 6vw, 82px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-anat__head {
  max-width: 42em;
}

.page-products .prod-anat h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
}

.page-products .prod-anat__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-seg {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .prod-seg__item {
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-top: 4px solid var(--lf-ink);
  border-radius: 4px var(--lf-radius) var(--lf-radius) var(--lf-radius);
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .prod-seg__item:nth-child(1) {
  border-top-color: var(--lf-brand);
}

.page-products .prod-seg__item:nth-child(2) {
  border-top-color: var(--lf-ink-2);
}

.page-products .prod-seg__item:nth-child(3) {
  border-top-color: var(--lf-signal);
}

.page-products .prod-seg__key {
  display: block;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--lf-ink);
}

.page-products .prod-seg__role {
  font-family: var(--lf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-muted);
}

.page-products .prod-seg__desc {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--lf-muted);
}

.page-products .prod-figure--anat {
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- 三条版本线 ---------- */
.page-products .prod-lines {
  background: var(--lf-ink);
  color: #fff;
  padding-block: clamp(48px, 6.5vw, 88px);
}

.page-products .prod-lines h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 20em;
}

.page-products .prod-lines .eyebrow {
  color: var(--lf-spark);
}

.page-products .prod-lines__list {
  margin-top: clamp(24px, 3.6vw, 40px);
  border-top: 1px solid var(--prod-line-soft);
}

.page-products .prod-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--prod-line-soft);
}

.page-products .prod-line__name {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.1;
}

.page-products .prod-line__years {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.page-products .prod-line__status {
  margin: 4px 0 0;
}

.page-products .prod-line__desc {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--prod-on-dark);
}

.page-products .prod-line--retired .prod-line__name {
  color: rgba(255, 255, 255, 0.62);
}

.page-products .prod-lines .tag {
  display: inline-block;
  font-family: var(--lf-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
}

.page-products .prod-lines .tag--signal {
  background: rgba(11, 143, 130, 0.22);
  border-color: rgba(11, 143, 130, 0.55);
  color: #7FE3D6;
}

.page-products .prod-lines .tag--warn {
  background: rgba(242, 178, 51, 0.18);
  border-color: rgba(242, 178, 51, 0.5);
  color: #F5CE7C;
}

.page-products .prod-lines .tag {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.72);
}

.page-products .prod-notice {
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-left: 3px solid var(--lf-warn);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 var(--lf-radius) var(--lf-radius) 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.84);
}

.page-products .prod-notice .status-dot {
  flex: 0 0 auto;
  margin-top: 8px;
}

/* ---------- 对照表 ---------- */
.page-products .prod-table-sec {
  padding-block: clamp(46px, 6vw, 82px);
}

.page-products .prod-table-sec h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
}

.page-products .prod-table-sec__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-table-wrap {
  margin-top: clamp(24px, 3.6vw, 36px);
  max-height: 520px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  box-shadow: 0 1px 0 rgba(15, 36, 56, 0.04);
}

.page-products .prod-table-wrap:focus-visible {
  outline: 2px solid var(--lf-spark);
  outline-offset: 3px;
}

.page-products .prod-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}

.page-products .prod-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--lf-ink);
  color: #fff;
  font-family: var(--lf-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 14px 18px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.page-products .prod-table tbody tr:nth-child(even) {
  background: var(--prod-zebra);
}

.page-products .prod-table tbody tr:hover {
  background: var(--prod-row-hover);
}

.page-products .prod-table td {
  padding: 13px 18px;
  border-top: 1px solid var(--lf-line);
  color: var(--lf-text);
  vertical-align: top;
  line-height: 1.65;
}

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

.page-products .prod-table td[scope="row"],
.page-products .prod-table th[scope="row"] {
  font-weight: 600;
  color: var(--lf-ink);
  white-space: nowrap;
}

.page-products .prod-table-note {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 36px);
  align-items: center;
}

.page-products .prod-figure--table {
  margin: 0;
}

.page-products .prod-table-note__text p {
  margin: 0 0 18px;
  max-width: 34em;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--lf-muted);
}

/* ---------- 旧版文档 ---------- */
.page-products .prod-doc {
  padding-block: clamp(46px, 6vw, 82px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .prod-doc h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
}

.page-products .prod-doc__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-doc__list {
  margin-top: clamp(24px, 3.4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.page-products .prod-doc__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: baseline;
  padding: 15px 18px;
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-left: 3px solid var(--lf-ink-2);
  border-radius: 0 var(--lf-radius) var(--lf-radius) 0;
}

.page-products .prod-doc__code {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--lf-brand);
  font-weight: 700;
  grid-row: 1 / span 2;
}

.page-products .prod-doc__title {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--lf-ink);
  line-height: 1.5;
}

.page-products .prod-doc__meta {
  margin: 0;
  font-size: 13px;
  color: var(--lf-muted);
  grid-column: 2;
}

.page-products .prod-doc__tip {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: rgba(201, 51, 26, 0.06);
  border-radius: var(--lf-radius);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--lf-muted);
  max-width: 40em;
}

.page-products .prod-figure--doc {
  margin: 0;
}

/* ---------- 安装后自查 ---------- */
.page-products .prod-after {
  padding-block: clamp(46px, 6vw, 82px);
  background: linear-gradient(180deg, rgba(227, 218, 205, 0.34), rgba(250, 246, 240, 0));
}

.page-products .prod-after__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .prod-after h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
}

.page-products .prod-after__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-after__steps {
  list-style: none;
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: none;
}

.page-products .prod-after__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-after__step:last-child {
  border-bottom: 1px solid var(--lf-line);
}

.page-products .prod-after__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lf-brand);
  padding-top: 3px;
}

.page-products .prod-after__step h3 {
  margin: 0 0 4px;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--lf-ink);
}

.page-products .prod-after__step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--lf-muted);
  max-width: 34em;
}

.page-products .prod-after__main .prod-after__lede + .prod-after__lede {
  margin-top: 22px;
}

.page-products .prod-after__links {
  margin-top: 26px;
}

.page-products .prod-figure--after {
  margin: 0;
}

/* ---------- 结尾 ---------- */
.page-products .prod-next {
  padding-block: clamp(44px, 5.5vw, 76px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 3.6vw, 40px);
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  border-left: 6px solid var(--lf-brand);
  align-items: center;
}

.page-products .prod-next h2 {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--lf-ink);
}

.page-products .prod-next p {
  margin: 12px 0 0;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-next__actions {
  align-items: center;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-products .prod-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 880px) {
  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-products .prod-hero__lede {
    margin-top: 22px;
  }

  .page-products .prod-line {
    grid-template-columns: 90px 130px 150px minmax(0, 1fr);
    column-gap: 22px;
    align-items: baseline;
    padding: 26px 0;
  }

  .page-products .prod-line__status {
    margin: 0;
  }

  .page-products .prod-line__desc {
    margin: 0;
  }

  .page-products .prod-table-note {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .page-products .prod-doc__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .page-products .prod-after__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .page-products .prod-next__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1024px) {
  .page-products .prod-shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .prod-term {
    padding: 22px 20px 26px;
  }

  .page-products .prod-table {
    min-width: 100%;
  }
}

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

  .page-products .prod-term:hover,
  .page-products .prod-term:focus-within {
    transform: none;
  }
}
<<<END>>>

等等，除了标记之外，我不应该输出任何其他内容。让我检查一下——我刚才在 `` 之前和 `` 之后加了“等等，除了标记之外……”这种内容？不对。重新读一下：我写了 ``，然后是 HTML，接着 ``，再然后是 CSS，再接着是 `<<<END>>>`，还有一段乱入的文字。这不行。

重新输出干净的内容。另外要删掉那段多余的内容。

还有，我用了 `<<<END>>>`，这不在说明里。说明要求是 ``、`` 两个标记。`<<<END>>>` 不应该出现。等等，其实之前的例子通常用 `` 和 ``。那我就只输出这两个标记。

我重新干净地写一遍。
<main id="main-content" class="page-products">

  <div class="container prod-crumb-wrap">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a class="breadcrumb__item" href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span class="breadcrumb__item" aria-current="page">版本与下载</span>
    </nav>
  </div>

  <section class="prod-hero" data-section="01" data-section-label="按终端选包">
    <div class="container">
      <div class="prod-hero__grid">
        <div class="prod-hero__lead">
          <p class="eyebrow">01 / 按终端选包</p>
          <h1>选对版本号，一次装到位</h1>
          <p class="prod-hero__lede">已经决定安装或者回退，剩下的就是把版本定下来。四类终端各自对应哪个安装包、这条版本线还在不在维护、装完要验哪几项，都排在下面，走一遍就能定下来。</p>
        </div>
        <aside class="prod-hint" data-reveal>
          <p class="prod-hint__title">不确定自己在哪条版本线上？</p>
          <p class="prod-hint__body">打开客户端的「关于本机」，看版本号的第一位数字：<span class="mono">4</span> 是 V4，<span class="mono">3</span> 是 V3。拿准这条线索，下面的安装包和维护状态就好对上了。</p>
        </aside>
      </div>

      <h2 class="prod-shelf__title">四类终端的推荐安装包</h2>

      <div class="prod-shelf">
        <article class="prod-term" data-reveal>
          <span class="prod-term__idx mono">01</span>
          <h3 class="prod-term__name">Windows 桌面端</h3>
          <p class="prod-term__ver mono">4.6.2</p>
          <p class="prod-term__pkg">.exe 安装包</p>
          <ul class="prod-term__check">
            <li>确认系统为 64 位</li>
            <li>退出正在运行的旧版本</li>
            <li>预留 2 GB 以上可用空间</li>
          </ul>
        </article>

        <article class="prod-term" data-reveal>
          <span class="prod-term__idx mono">02</span>
          <h3 class="prod-term__name">macOS 桌面端</h3>
          <p class="prod-term__ver mono">4.6.2</p>
          <p class="prod-term__pkg">.dmg 磁盘映像</p>
          <ul class="prod-term__check">
            <li>核对芯片架构是 Intel 还是 Apple</li>
            <li>在系统设置中允许首次运行</li>
            <li>先移除旧的安装副本</li>
          </ul>
        </article>

        <article class="prod-term" data-reveal>
          <span class="prod-term__idx mono">03</span>
          <h3 class="prod-term__name">Android</h3>
          <p class="prod-term__ver mono">4.6.2</p>
          <p class="prod-term__pkg">.apk 安装包</p>
          <ul class="prod-term__check">
            <li>查看系统版本是否在支持范围</li>
            <li>临时开启未知来源安装权限</li>
            <li>装完把该权限关回</li>
          </ul>
        </article>

        <article class="prod-term" data-reveal>
          <span class="prod-term__idx mono">04</span>
          <h3 class="prod-term__name">iOS</h3>
          <p class="prod-term__ver mono">4.6.2</p>
          <p class="prod-term__pkg">应用商店版本</p>
          <ul class="prod-term__check">
            <li>确认系统版本满足最低要求</li>
            <li>检查应用商店账号所在地区</li>
            <li>留出一部分存储用于更新</li>
          </ul>
        </article>
      </div>

      <figure class="figure prod-figure">
        <div class="figure__frame">
          <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="Windows、macOS、Android、iOS 四台设备边框并排，屏幕内为暖白底墨蓝描边的界面示意">
        </div>
        <figcaption class="figure__caption">图 01 · 四类终端的安装形态</figcaption>
      </figure>
    </div>
  </section>

  <section class="prod-anat" data-section="02" data-section-label="版本号怎么读">
    <div class="container">
      <div class="section__head prod-anat__head">
        <p class="eyebrow">02 / 版本号怎么读</p>
        <h2>三段数字，各管一件事</h2>
        <p class="prod-anat__lede">版本号按主版本、次版本、修订号三段写。读懂了这三段，就能判断一次更新到底动到了哪一层，值不值得当天就装上去。</p>
      </div>

      <ol class="prod-seg">
        <li class="prod-seg__item" data-reveal>
          <span class="prod-seg__key mono">4</span>
          <span class="prod-seg__role">主版本</span>
          <p class="prod-seg__desc">架构层面的调整。从 V3 跨到 V4，界面分区和主要操作流程会跟着变化，部署前建议先通读一遍更新日志。</p>
        </li>
        <li class="prod-seg__item" data-reveal>
          <span class="prod-seg__key mono">6</span>
          <span class="prod-seg__role">次版本</span>
          <p class="prod-seg__desc">功能增加。新能力叠加在原有功能之上，已有的操作路径保持不变，团队通常不需要重新培训。</p>
        </li>
        <li class="prod-seg__item" data-reveal>
          <span class="prod-seg__key mono">2</span>
          <span class="prod-seg__role">修订号</span>
          <p class="prod-seg__desc">只做问题修复。界面结构、按钮位置、菜单层级都不会改动，看到修订号变化可以放心更新。</p>
        </li>
      </ol>

      <figure class="figure prod-figure prod-figure--anat">
        <div class="figure__frame">
          <img src="{zhanqunpic:h:520w:1000}" width="1000" height="520" alt="等宽数字 4、6、2 被拆成三段并用引线标注各自含义，主版本一段用橙红标出" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption">图 02 · 三段式版本号的构成</figcaption>
      </figure>
    </div>
  </section>

  <section class="prod-lines" data-section="03" data-section-label="三条版本线">
    <div class="container">
      <p class="eyebrow">03 / 三条版本线</p>
      <h2>哪条在推，哪条还维护，哪条该换了</h2>

      <div class="prod-lines__list">
        <article class="prod-line prod-line--live">
          <h3 class="prod-line__name mono">V4</h3>
          <p class="prod-line__years mono">2023 至今</p>
          <p class="prod-line__status"><span class="tag tag--signal">主推版本</span></p>
          <p class="prod-line__desc">新功能、兼容性复测结论和文档更新都优先落在这条线上。准备新装、或者正在规划升级的团队，从这里开始最省事。</p>
        </article>

        <article class="prod-line prod-line--keep">
          <h3 class="prod-line__name mono">V3</h3>
          <p class="prod-line__years mono">2019—2023</p>
          <p class="prod-line__status"><span class="tag tag--warn">维护中</span></p>
          <p class="prod-line__desc">继续接收问题修复与兼容性复核，不再引入新功能。仍在这条线上的部署可以继续跑，需要跨版本比对时，V3 的文档包随时能调出来。</p>
        </article>

        <article class="prod-line prod-line--retired">
          <h3 class="prod-line__name mono">V2</h3>
          <p class="prod-line__years mono">2017—2019</p>
          <p class="prod-line__status"><span class="tag">已停止维护</span></p>
          <p class="prod-line__desc">功能与文档均已冻结，资料以存档形式保留，旧版文档仍可导出 PDF 用于历史比对。新装设备建议直接跳到 V4。</p>
        </article>
      </div>

      <p class="prod-notice">
        <span class="status-dot status-dot--warn" aria-hidden="true"></span>
        <span>一条版本线停止维护前，我们会提前 90 天在专题中心发出退役公告，并同步更新这里的维护状态，方便技术对接人安排切换节奏。</span>
      </p>
    </div>
  </section>

  <section class="prod-table-sec" data-section="04" data-section-label="版本对照表">
    <div class="container container--wide">
      <div class="section__head">
        <p class="eyebrow">04 / 版本对照表</p>
        <h2>三条版本线并排看</h2>
        <p class="prod-table-sec__lede">做内部部署决策时，把这张表直接发给团队即可。左右滑动能看完整个对照，表头会一直停在顶部。</p>
      </div>

      <div class="prod-table-wrap" role="region" aria-label="V2、V3、V4 版本对照表，可横向滚动" tabindex="0">
        <table class="prod-table">
          <caption class="visually-hidden">V2、V3、V4 三条版本线的维护状态、文档与支持能力对照</caption>
          <thead>
            <tr>
              <th scope="col">对照项</th>
              <th scope="col">V2</th>
              <th scope="col">V3</th>
              <th scope="col">V4</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">维护状态</th>
              <td>已停止维护</td>
              <td>维护中</td>
              <td>主推版本</td>
            </tr>
            <tr>
              <th scope="row">配套文档</th>
              <td>旧版存档</td>
              <td>独立文档包</td>
              <td>独立文档包</td>
            </tr>
            <tr>
              <th scope="row">旧版文档导出 PDF</th>
              <td>支持</td>
              <td>支持</td>
              <td>支持</td>
            </tr>
            <tr>
              <th scope="row">更新日志</th>
              <td>已冻结</td>
              <td>按次版本发布</td>
              <td>按次版本发布</td>
            </tr>
            <tr>
              <th scope="row">已知问题清单</th>
              <td>存档</td>
              <td>持续更新</td>
              <td>持续更新</td>
            </tr>
            <tr>
              <th scope="row">兼容性复核</th>
              <td>历史结论</td>
              <td>按季度</td>
              <td>按季度</td>
            </tr>
            <tr>
              <th scope="row">在线工单</th>
              <td>仅文档支持</td>
              <td>可提交</td>
              <td>可提交</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="prod-table-note">
        <figure class="figure prod-figure--table">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="表格化信息图形，行列分别为版本与功能项，用色块深浅表示支持程度" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">图 03 · 版本与功能的支持程度示意</figcaption>
        </figure>
        <div class="prod-table-note__text">
          <p>需要更细的条目，可以在知识中心按问题域筛选：登录与账号、网络与连接、页面与兼容、下载与安装、数据与导出、通知与推送、权限与安全、版本与升级共八个分类，每条都标注了适用版本。</p>
          <a class="btn btn--quiet" href="/knowledge/">进入知识中心<span class="btn__arrow" aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="prod-doc" data-section="05" data-section-label="旧版文档导出">
    <div class="container">
      <div class="prod-doc__grid">
        <div class="prod-doc__main">
          <p class="eyebrow">05 / 旧版文档导出</p>
          <h2>旧版本还在跑，文档得跟得上</h2>
          <p class="prod-doc__lede">资料库累计收录 260 份文档，其中 96 份是旧版存档。需要离线留存或者内部传阅时，任意一份都能导出为 PDF，导出文件保留原来的版本号与章节编号——这意味着你可以把 V3 的某一章和 V4 的同一章并排摆在桌上，逐条看着改。</p>

          <div class="prod-doc__list">
            <article class="prod-doc__item" data-reveal>
              <span class="prod-doc__code mono">V3-DOC-014</span>
              <h3 class="prod-doc__title">页面兼容问题处理指引</h3>
              <p class="prod-doc__meta">适用于 V3 · 本季度已复核</p>
            </article>
            <article class="prod-doc__item" data-reveal>
              <span class="prod-doc__code mono">V3-DOC-022</span>
              <h3 class="prod-doc__title">登录异常排查手册</h3>
              <p class="prod-doc__meta">适用于 V3 · 本季度已复核</p>
            </article>
            <article class="prod-doc__item" data-reveal>
              <span class="prod-doc__code mono">V2-DOC-007</span>
              <h3 class="prod-doc__title">历史版本字段与接口说明</h3>
              <p class="prod-doc__meta">适用于 V2 · 存档版本</p>
            </article>
          </div>

          <p class="prod-doc__tip">对照方式很简单：打开两份 PDF，按相同的章节编号定位，改动过的段落会落在同一位置，逐条确认之后再决定要不要升级。</p>
        </div>

        <figure class="figure prod-figure--doc">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="两页导出的 PDF 文档并排对照，页角保留原版本号，差异段落用橙红细线框出" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">图 04 · 导出后的新旧版本文档对照</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="prod-after" data-section="06" data-section-label="安装后自查">
    <div class="container">
      <div class="prod-after__grid">
        <div class="prod-after__main">
          <p class="eyebrow">06 / 安装后自查</p>
          <h2>装完先跑这三步</h2>
          <p class="prod-after__lede">安装完成不等于可以交付使用。花两分钟做完下面三件事，能提前挡掉大部分「装上了却用不顺」的情况。</p>

          <ol class="prod-after__steps">
            <li class="prod-after__step">
              <span class="prod-after__num mono">01</span>
              <div>
                <h3>确认版本号对得上</h3>
                <p>打开客户端「关于本机」，核对显示的版本号与刚才安装的包一致。</p>
              </div>
            </li>
            <li class="prod-after__step">
              <span class="prod-after__num mono">02</span>
              <div>
                <h3>完整打开一个常用页面</h3>
                <p>看导航栏、按钮与列表是否完整显示；出现错位或空白，先记下浏览器与系统版本。</p>
              </div>
            </li>
            <li class="prod-after__step">
              <span class="prod-after__num mono">03</span>
              <div>
                <h3>在知识中心查一条已知问题</h3>
                <p>用当前版本号定位条目，确认更新日志与已知问题清单能正常打开，后续排查就有依据。</p>
              </div>
            </li>
          </ol>

          <p class="prod-after__lede">遇到页面打不开、按钮点不动这类情况，先查专题中心里的季度兼容观察：页面兼容问题在乐发平台按终端与浏览器逐条列了已知现象和建议动作，找到对应条目照着处理，通常不用等回复。</p>

          <div class="cluster prod-after__links">
            <a class="btn btn--primary" href="/topics/">查看兼容观察专题<span class="btn__arrow" aria-hidden="true">→</span></a>
            <a class="btn btn--ghost" href="/knowledge/">按问题域检索条目</a>
          </div>
        </div>

        <figure class="figure prod-figure--after">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="三步验证流程示意，用勾选标记与箭头依次连接，保持线性简洁" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">图 05 · 安装后的三项快速验证</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="prod-next">
    <div class="container">
      <div class="prod-next__inner">
        <div>
          <h2>批量部署拿不准，交给我们判断</h2>
          <p>告诉我终端型号、操作系统版本和当前在用的版本号，我们会给出对应的安装包，以及是否需要先回退的结论。企业批量部署可以一并说明终端数量与切换时间安排。</p>
        </div>
        <div class="cluster prod-next__actions">
          <a class="btn btn--primary" href="/cooperation/">联系对接团队<span class="btn__arrow" aria-hidden="true">→</span></a>
          <a class="btn btn--quiet" href="/company/">了解版本演进</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --prod-card: #FFFFFF;
  --prod-zebra: rgba(227, 218, 205, 0.30);
  --prod-row-hover: rgba(201, 51, 26, 0.07);
  --prod-line-soft: rgba(255, 255, 255, 0.16);
  --prod-on-dark: rgba(255, 255, 255, 0.78);
}

/* ---------- 面包屑 ---------- */
.page-products .prod-crumb-wrap {
  padding-top: clamp(18px, 3vw, 30px);
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  padding-block: clamp(22px, 3.6vw, 40px) clamp(48px, 6.5vw, 88px);
}

.page-products .prod-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 36px);
  align-items: start;
}

.page-products .prod-hero h1 {
  margin: 12px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
  max-width: 15em;
}

.page-products .prod-hero__lede {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.7vw, 17px);
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-hint {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 26px);
  background: var(--lf-ink);
  color: #fff;
  border-radius: var(--lf-radius);
}

.page-products .prod-hint::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(255, 122, 69, 0.35);
  box-shadow: 0 0 0 22px rgba(255, 122, 69, 0.08);
  pointer-events: none;
}

.page-products .prod-hint__title {
  margin: 0 0 8px;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: #fff;
}

.page-products .prod-hint__body {
  position: relative;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--prod-on-dark);
}

.page-products .prod-hint__body .mono {
  color: var(--lf-spark);
  font-weight: 700;
}

/* ---------- 终端货架 ---------- */
.page-products .prod-shelf__title {
  margin: clamp(36px, 5vw, 56px) 0 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  letter-spacing: -0.01em;
  color: var(--lf-ink);
}

.page-products .prod-shelf {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .prod-term {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px 24px;
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  transition: border-color 0.2s ease, transform 0.24s ease;
}

.page-products .prod-term::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 0.2s ease;
}

.page-products .prod-term:hover,
.page-products .prod-term:focus-within {
  border-color: var(--lf-brand);
  transform: translateY(-2px);
}

.page-products .prod-term:hover::after,
.page-products .prod-term:focus-within::after {
  background: var(--lf-brand);
}

.page-products .prod-term__idx {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--lf-muted);
}

.page-products .prod-term__name {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--lf-ink);
}

.page-products .prod-term__ver {
  margin: 4px 0 0;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--lf-brand);
}

.page-products .prod-term__pkg {
  margin: 2px 0 14px;
  font-size: 13px;
  color: var(--lf-muted);
}

.page-products .prod-term__check {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: grid;
  gap: 7px;
  border-top: 1px dashed var(--lf-line);
}

.page-products .prod-term__check li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lf-muted);
}

.page-products .prod-term__check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-spark);
}

/* ---------- 图像通用 ---------- */
.page-products .prod-figure {
  margin: clamp(32px, 4.5vw, 52px) 0 0;
}

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

/* ---------- 版本号构成 ---------- */
.page-products .prod-anat {
  padding-block: clamp(46px, 6vw, 82px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-anat__head {
  max-width: 42em;
}

.page-products .prod-anat h2,
.page-products .prod-table-sec h2,
.page-products .prod-doc h2,
.page-products .prod-after h2 {
  margin: 10px 0 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
}

.page-products .prod-anat__lede,
.page-products .prod-table-sec__lede,
.page-products .prod-doc__lede,
.page-products .prod-after__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-seg {
  list-style: none;
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .prod-seg__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 22px;
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-top: 4px solid var(--lf-ink);
  border-radius: 4px var(--lf-radius) var(--lf-radius) var(--lf-radius);
}

.page-products .prod-seg__item:nth-child(1) {
  border-top-color: var(--lf-brand);
}

.page-products .prod-seg__item:nth-child(2) {
  border-top-color: var(--lf-ink-2);
}

.page-products .prod-seg__item:nth-child(3) {
  border-top-color: var(--lf-signal);
}

.page-products .prod-seg__key {
  display: block;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--lf-ink);
}

.page-products .prod-seg__role {
  font-family: var(--lf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-muted);
}

.page-products .prod-seg__desc {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--lf-muted);
}

.page-products .prod-figure--anat {
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- 三条版本线 ---------- */
.page-products .prod-lines {
  padding-block: clamp(48px, 6.5vw, 88px);
  background: var(--lf-ink);
  color: #fff;
}

.page-products .prod-lines h2 {
  margin: 10px 0 0;
  max-width: 20em;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}

.page-products .prod-lines .eyebrow {
  color: var(--lf-spark);
}

.page-products .prod-lines__list {
  margin-top: clamp(24px, 3.6vw, 40px);
  border-top: 1px solid var(--prod-line-soft);
}

.page-products .prod-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--prod-line-soft);
}

.page-products .prod-line__name {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
}

.page-products .prod-line__years {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.page-products .prod-line__status {
  margin: 4px 0 0;
}

.page-products .prod-line__desc {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--prod-on-dark);
}

.page-products .prod-line--retired .prod-line__name {
  color: rgba(255, 255, 255, 0.62);
}

.page-products .prod-lines .tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--lf-font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
}

.page-products .prod-lines .tag--signal {
  background: rgba(11, 143, 130, 0.22);
  border-color: rgba(11, 143, 130, 0.55);
  color: #7FE3D6;
}

.page-products .prod-lines .tag--warn {
  background: rgba(242, 178, 51, 0.18);
  border-color: rgba(242, 178, 51, 0.5);
  color: #F5CE7C;
}

.page-products .prod-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--lf-warn);
  border-radius: 0 var(--lf-radius) var(--lf-radius) 0;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.84);
}

.page-products .prod-notice .status-dot {
  flex: 0 0 auto;
  margin-top: 8px;
}

/* ---------- 对照表 ---------- */
.page-products .prod-table-sec {
  padding-block: clamp(46px, 6vw, 82px);
}

.page-products .prod-table-wrap {
  margin-top: clamp(24px, 3.6vw, 36px);
  max-height: 520px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  box-shadow: 0 1px 0 rgba(15, 36, 56, 0.04);
}

.page-products .prod-table-wrap:focus-visible {
  outline: 2px solid var(--lf-spark);
  outline-offset: 3px;
}

.page-products .prod-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}

.page-products .prod-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 18px;
  background: var(--lf-ink);
  color: #fff;
  font-family: var(--lf-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.page-products .prod-table tbody tr:nth-child(even) {
  background: var(--prod-zebra);
}

.page-products .prod-table tbody tr:hover {
  background: var(--prod-row-hover);
}

.page-products .prod-table td,
.page-products .prod-table tbody th {
  padding: 13px 18px;
  border-top: 1px solid var(--lf-line);
  color: var(--lf-text);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
}

.page-products .prod-table tbody tr:first-child td,
.page-products .prod-table tbody tr:first-child th {
  border-top: 0;
}

.page-products .prod-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--lf-ink);
  white-space: nowrap;
}

.page-products .prod-table-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 36px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
}

.page-products .prod-figure--table {
  margin: 0;
}

.page-products .prod-table-note__text p {
  margin: 0 0 18px;
  max-width: 34em;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--lf-muted);
}

/* ---------- 旧版文档 ---------- */
.page-products .prod-doc {
  padding-block: clamp(46px, 6vw, 82px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .prod-doc__list {
  margin-top: clamp(24px, 3.4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.page-products .prod-doc__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: baseline;
  padding: 15px 18px;
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-left: 3px solid var(--lf-ink-2);
  border-radius: 0 var(--lf-radius) var(--lf-radius) 0;
}

.page-products .prod-doc__code {
  grid-row: 1 / span 2;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lf-brand);
}

.page-products .prod-doc__title {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lf-ink);
}

.page-products .prod-doc__meta {
  grid-column: 2;
  margin: 0;
  font-size: 13px;
  color: var(--lf-muted);
}

.page-products .prod-doc__tip {
  margin: 20px 0 0;
  max-width: 40em;
  padding: 16px 18px;
  background: rgba(201, 51, 26, 0.06);
  border-radius: var(--lf-radius);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--lf-muted);
}

.page-products .prod-figure--doc {
  margin: 0;
}

/* ---------- 安装后自查 ---------- */
.page-products .prod-after {
  padding-block: clamp(46px, 6vw, 82px);
  background: linear-gradient(180deg, rgba(227, 218, 205, 0.34), rgba(250, 246, 240, 0));
}

.page-products .prod-after__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .prod-after__steps {
  list-style: none;
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.page-products .prod-after__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-after__step:last-child {
  border-bottom: 1px solid var(--lf-line);
}

.page-products .prod-after__num {
  padding-top: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lf-brand);
}

.page-products .prod-after__step h3 {
  margin: 0 0 4px;
  font-family: var(--lf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--lf-ink);
}

.page-products .prod-after__step p {
  margin: 0;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--lf-muted);
}

.page-products .prod-after__main .prod-after__steps + .prod-after__lede {
  margin-top: 22px;
}

.page-products .prod-after__links {
  margin-top: 26px;
}

.page-products .prod-figure--after {
  margin: 0;
}

/* ---------- 结尾 ---------- */
.page-products .prod-next {
  padding-block: clamp(44px, 5.5vw, 76px);
  border-top: 1px solid var(--lf-line);
}

.page-products .prod-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  padding: clamp(24px, 3.6vw, 40px);
  background: var(--prod-card);
  border: 1px solid var(--lf-line);
  border-left: 6px solid var(--lf-brand);
  border-radius: var(--lf-radius);
}

.page-products .prod-next h2 {
  margin: 0;
  font-family: var(--lf-font-display);
  font-weight: 900;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--lf-ink);
}

.page-products .prod-next p {
  margin: 12px 0 0;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--lf-muted);
}

.page-products .prod-next__actions {
  align-items: center;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-products .prod-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 880px) {
  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-products .prod-hero__lede {
    margin-top: 22px;
  }

  .page-products .prod-line {
    grid-template-columns: 90px 130px 150px minmax(0, 1fr);
    column-gap: 22px;
    align-items: baseline;
    padding: 26px 0;
  }

  .page-products .prod-line__status,
  .page-products .prod-line__desc {
    margin: 0;
  }

  .page-products .prod-table-note {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .page-products .prod-doc__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .page-products .prod-after__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .page-products .prod-next__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1024px) {
  .page-products .prod-shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .prod-term {
    padding: 22px 20px 26px;
  }

  .page-products .prod-table {
    min-width: 100%;
  }
}

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

  .page-products .prod-term:hover,
  .page-products .prod-term:focus-within {
    transform: none;
  }
}