.page-products {
  --pp-amber-tint: rgba(224, 138, 44, 0.14);
  --pp-ink-tint: rgba(15, 58, 49, 0.07);
  --pp-ink-tint-2: rgba(15, 58, 49, 0.04);
  width: 100%;
  max-width: var(--ax-shell);
  margin-inline: auto;
  padding-inline: var(--ax-gutter);
  padding-bottom: clamp(48px, 7vw, 96px);
  box-sizing: border-box;
  color: var(--ax-text);
}

.page-products *,
.page-products *::before,
.page-products *::after {
  box-sizing: border-box;
}

/* ---------- 面包屑 ---------- */
.page-products .pp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: clamp(16px, 2.4vw, 26px);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ax-slate-mid);
}

.page-products .pp-crumbs a {
  color: var(--ax-slate);
  text-decoration: none;
  border-bottom: 1px dashed var(--ax-line);
  padding-bottom: 1px;
  transition: border-color 140ms var(--ax-ease), color 140ms var(--ax-ease);
}

.page-products .pp-crumbs a:hover {
  color: var(--ax-ink);
  border-bottom-style: solid;
}

.page-products .pp-crumbs span[aria-current="page"] {
  color: var(--ax-ink);
  font-weight: 600;
}

/* ---------- 首屏 ---------- */
.page-products .pp-intro {
  padding-top: clamp(24px, 4vw, 46px);
  padding-bottom: clamp(24px, 3.4vw, 38px);
  border-bottom: 1px solid var(--ax-line);
}

.page-products .pp-intro__eyebrow {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ax-ink-mid);
  text-transform: uppercase;
}

.page-products .pp-intro__title {
  margin: 0.28em 0 0.34em;
  font-family: var(--ax-font-sans);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ax-ink);
  max-width: 14ch;
}

.page-products .pp-intro__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.78;
  color: var(--ax-slate);
}

.page-products .pp-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  background: var(--ax-line);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
}

.page-products .pp-stat {
  background: var(--ax-white);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .pp-stat__num {
  font-family: var(--ax-font-mono);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  font-weight: 600;
  color: var(--ax-ink);
  letter-spacing: 0.01em;
}

.page-products .pp-stat__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ax-slate-mid);
}

@media (min-width: 720px) {
  .page-products .pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pp-stat {
    padding: 20px 22px 22px;
  }
}

/* ---------- 章节索引 ---------- */
.page-products .pp-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 3vw, 34px);
  padding-bottom: 2px;
}

.page-products .pp-index__link {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ax-slate);
  text-decoration: none;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-index__link:hover,
.page-products .pp-index__link:focus-visible {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

/* ---------- 通用区块 ---------- */
.page-products .pp-block {
  margin-top: clamp(52px, 7.4vw, 100px);
}

.page-products .pp-lede {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.82;
  color: var(--ax-slate);
}

.page-products .pp-sub {
  margin: clamp(34px, 4.4vw, 52px) 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-sub__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ax-slate-mid);
  max-width: 46ch;
}

.page-products .pp-link {
  color: var(--ax-ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--ax-ink-mid);
  padding-bottom: 1px;
  transition: border-color 140ms var(--ax-ease), color 140ms var(--ax-ease);
}

.page-products .pp-link:hover {
  border-bottom-style: solid;
  border-bottom-color: var(--ax-ink);
}

/* ---------- 图片 ---------- */
.page-products .pp-figure {
  margin: clamp(26px, 3.8vw, 42px) 0 0;
}

.page-products .pp-figure__frame {
  border-radius: var(--ax-radius-lg);
  overflow: hidden;
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  box-shadow: var(--ax-shadow-soft);
}

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

.page-products .pp-figure__cap {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--ax-amber);
  font-size: 13px;
  line-height: 1.72;
  color: var(--ax-slate-mid);
}

/* ---------- 四栏结构 ---------- */
.page-products .pp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(28px, 4vw, 46px);
}

.page-products .pp-col {
  position: relative;
  padding: 22px 20px 24px;
  border-top: 2px solid var(--ax-line);
  background: transparent;
}

.page-products .pp-col__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--ax-radius-sm);
  background: var(--pp-ink-tint);
  font-family: var(--ax-font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ax-ink);
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease);
}

.page-products .pp-col__title {
  margin: 16px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-col__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ax-slate);
}

.page-products .pp-col__use {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ax-slate-mid);
}

.page-products .pp-col--3 {
  background: var(--ax-white);
  border-top-color: var(--ax-amber);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-soft);
  padding: 26px 24px 30px;
}

.page-products .pp-col--3 .pp-col__num {
  background: var(--ax-amber);
  color: var(--ax-white);
  min-width: 62px;
  height: 38px;
  font-size: 18px;
  font-weight: 600;
}

.page-products .pp-col--3 .pp-col__title {
  font-size: clamp(20px, 1.9vw, 25px);
}

.page-products .pp-col--3:hover .pp-col__num {
  background: var(--ax-ink-deep);
}

@media (min-width: 720px) {
  .page-products .pp-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
  }
}

@media (min-width: 1060px) {
  .page-products .pp-cols {
    grid-template-columns: 0.9fr 0.9fr 1.55fr 0.9fr;
    gap: 24px;
    align-items: start;
  }
  .page-products .pp-col--3 {
    margin-top: 34px;
  }
}

/* ---------- 第 3 栏 ---------- */
.page-products .pp-col3__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(28px, 3.6vw, 42px);
  background: var(--ax-line);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
}

.page-products .pp-col3__meta-item {
  margin: 0;
  padding: 14px 18px;
  background: var(--ax-white);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ax-slate);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.page-products .pp-col3__meta-key {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ax-slate-mid);
  min-width: 5.6em;
}

.page-products .pp-col3__meta-val {
  color: var(--ax-ink);
  font-weight: 600;
}

.page-products .pp-col3__meta-val.ax-num {
  font-family: var(--ax-font-mono);
  font-size: 19px;
  letter-spacing: 0.02em;
}

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

/* 格式筛选 */
.page-products .pp-filter {
  position: relative;
  margin-top: 14px;
}

.page-products .pp-filter__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-products .pp-filter__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.page-products .pp-filter__chip {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: var(--ax-white);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ax-slate);
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-filter__chip:hover {
  border-color: var(--ax-ink-mid);
  color: var(--ax-ink);
}

.page-products #ppfmt-all:checked ~ .pp-filter__bar [for="ppfmt-all"],
.page-products #ppfmt-pdf:checked ~ .pp-filter__bar [for="ppfmt-pdf"],
.page-products #ppfmt-csv:checked ~ .pp-filter__bar [for="ppfmt-csv"],
.page-products #ppfmt-xlsx:checked ~ .pp-filter__bar [for="ppfmt-xlsx"],
.page-products #ppfmt-png:checked ~ .pp-filter__bar [for="ppfmt-png"] {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

.page-products #ppfmt-pdf:focus-visible ~ .pp-filter__bar [for="ppfmt-pdf"],
.page-products #ppfmt-csv:focus-visible ~ .pp-filter__bar [for="ppfmt-csv"],
.page-products #ppfmt-xlsx:focus-visible ~ .pp-filter__bar [for="ppfmt-xlsx"],
.page-products #ppfmt-png:focus-visible ~ .pp-filter__bar [for="ppfmt-png"],
.page-products #ppfmt-all:focus-visible ~ .pp-filter__bar [for="ppfmt-all"] {
  outline: 2px solid var(--ax-amber);
  outline-offset: 2px;
}

.page-products #ppfmt-pdf:checked ~ .pp-files .pp-file:not([data-fmt="pdf"]),
.page-products #ppfmt-csv:checked ~ .pp-files .pp-file:not([data-fmt="csv"]),
.page-products #ppfmt-xlsx:checked ~ .pp-files .pp-file:not([data-fmt="xlsx"]),
.page-products #ppfmt-png:checked ~ .pp-files .pp-file:not([data-fmt="png"]) {
  display: none;
}

/* 文件清单 */
.page-products .pp-files {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--ax-line);
  transition: background-color 160ms var(--ax-ease);
}

.page-products .pp-file:hover {
  background: var(--pp-ink-tint-2);
}

.page-products .pp-file__no {
  flex: 0 0 auto;
  width: 2.9em;
  font-family: var(--ax-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ax-slate-mid);
}

.page-products .pp-file__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-products .pp-file__name {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ax-text);
}

.page-products .pp-file__note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ax-slate-mid);
}

.page-products .pp-chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: var(--ax-white);
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ax-slate);
}

.page-products .pp-chip--pdf {
  color: var(--ax-ink);
  border-color: rgba(15, 58, 49, 0.36);
}

.page-products .pp-chip--csv {
  color: var(--ax-ink-deep);
  border-color: rgba(20, 84, 74, 0.36);
}

.page-products .pp-chip--xlsx {
  color: var(--ax-slate);
  border-color: rgba(62, 90, 107, 0.4);
}

.page-products .pp-chip--png {
  color: var(--ax-slate-mid);
  border-color: rgba(124, 150, 166, 0.56);
}

/* ---------- 电脑端体验 ---------- */
.page-products .pp-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 3.8vw, 44px);
}

.page-products .pp-compare__col {
  padding: 24px 22px 26px;
  border-radius: var(--ax-radius-lg);
}

.page-products .pp-compare__col--desktop {
  background: var(--ax-ink);
  color: rgba(255, 255, 255, 0.86);
}

.page-products .pp-compare__col--desktop .pp-compare__title {
  color: var(--ax-white);
}

.page-products .pp-compare__col--desktop .pp-compare__list li::before {
  background: var(--ax-amber);
}

.page-products .pp-compare__col--mobile {
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  color: var(--ax-slate);
}

.page-products .pp-compare__col--mobile .pp-compare__title {
  color: var(--ax-ink);
}

.page-products .pp-compare__col--mobile .pp-compare__list li::before {
  background: var(--ax-slate-soft);
}

.page-products .pp-compare__title {
  margin: 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.005em;
}

.page-products .pp-compare__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-products .pp-compare__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.78;
}

.page-products .pp-compare__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
}

@media (min-width: 820px) {
  .page-products .pp-compare {
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
  }
  .page-products .pp-compare__col {
    padding: 30px 28px 32px;
  }
}

/* ---------- 更新节奏 ---------- */
.page-products .pp-cadence__list {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  position: relative;
}

.page-products .pp-cadence__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--ax-line);
}

.page-products .pp-cadence__item {
  position: relative;
  padding: 0 0 clamp(26px, 3.4vw, 38px) 36px;
}

.page-products .pp-cadence__item:last-child {
  padding-bottom: 0;
}

.page-products .pp-cadence__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--ax-ink-mid);
  background: var(--ax-paper);
}

.page-products .pp-cadence__when {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--ax-radius-pill);
  background: var(--pp-ink-tint);
  font-family: var(--ax-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ax-ink);
}

.page-products .pp-cadence__title {
  margin: 12px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-cadence__desc {
  margin: 9px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-slate);
}

/* ---------- 获取与导出 ---------- */
.page-products .pp-flow {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .pp-flow__step {
  position: relative;
  padding: 24px 22px 26px;
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  border-radius: var(--ax-radius-lg);
}

.page-products .pp-flow__idx {
  display: block;
  font-family: var(--ax-font-mono);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ax-slate-soft);
}

.page-products .pp-flow__step:last-child .pp-flow__idx {
  color: var(--ax-amber);
}

.page-products .pp-flow__step-title {
  margin: 16px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-flow__step-desc {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 860px) {
  .page-products .pp-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page-products .pp-flow__step {
    border-radius: 0;
    border-right: 0;
    padding: 30px 26px 32px;
  }
  .page-products .pp-flow__step:first-child {
    border-radius: var(--ax-radius-lg) 0 0 var(--ax-radius-lg);
  }
  .page-products .pp-flow__step:last-child {
    border-right: 1px solid var(--ax-line-soft);
    border-radius: 0 var(--ax-radius-lg) var(--ax-radius-lg) 0;
  }
}

.page-products .pp-access__note {
  margin: clamp(24px, 3.2vw, 34px) 0 0;
  padding: 18px 22px;
  border-radius: var(--ax-radius-md);
  background: var(--pp-amber-tint);
  border-left: 3px solid var(--ax-amber);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-text);
  max-width: 62ch;
}

/* ---------- 问题处理 ---------- */
.page-products .pp-issues {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-issue {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--ax-line);
}

.page-products .pp-issue__title {
  margin: 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-issue__desc {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 800px) {
  .page-products .pp-issues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

.page-products .pp-support__panel {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--ax-radius-lg);
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
}

.page-products .pp-support__line {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ax-text);
}

.page-products .pp-support__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-support__label {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ax-slate-mid);
}

.page-products .pp-support__mail {
  font-family: var(--ax-font-mono);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ax-ink);
  word-break: break-all;
}

.page-products .pp-copy {
  padding: 6px 16px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: transparent;
  font-family: var(--ax-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ax-slate);
  cursor: pointer;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-copy:hover {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

.page-products .pp-support__hint {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ax-slate-mid);
}

/* ---------- 页尾引导 ---------- */
.page-products .pp-tail {
  margin-top: clamp(48px, 6.5vw, 88px);
  padding-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--ax-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pp-tail__label {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ax-ink-mid);
}

.page-products .pp-tail__text {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 780px) {
  .page-products .pp-tail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products *,
  .page-products *::before,
  .page-products *::after {
    transition: none !important;
    animation: none !important;
  }
}
</style>
<<<END>>>

等等，我输出结尾多了 `</style>` 和 `<<<END>>>`。规则说只能出现三个尖括号标记，而且每个只能出现一次。所以不应该有多余的标记。我应该删掉 `</style>` 和 `<<<END>>>`。

我再检查一下：标记只有 `` 和 `` 两个，之前我已经正确输出了。最后多了 `</style>` 和 `<<<END>>>` 是不必要的。

所以最后修正：删除末尾的 `</style>` 和 `<<<END>>>`。输出应该在 `.page-products` CSS 结束后直接停止。
<main id="main-content" class="page-products">

  <nav class="ax-crumbs pp-crumbs" aria-label="当前位置">
    <a class="ax-crumbs__link" href="/">首页</a>
    <span class="ax-crumbs__sep" aria-hidden="true">/</span>
    <span aria-current="page">平台服务</span>
  </nav>

  <header class="pp-intro" id="overview-top">
    <p class="pp-intro__eyebrow">平台服务 · 资料下载</p>
    <h1 class="pp-intro__title">电脑端资料下载页</h1>
    <p class="pp-intro__lede">需要成批取走桌面端资料的时候，从第 3 栏进最快。安信把 216 份文档按栏目和月份排成一条清单，PDF、CSV、XLSX、PNG 四种格式双击就开，不必在栏目之间来回翻找。</p>
    <ul class="pp-stats">
      <li class="pp-stat">
        <span class="pp-stat__num ax-num">4</span>
        <span class="pp-stat__label">个资料分区</span>
      </li>
      <li class="pp-stat">
        <span class="pp-stat__num ax-num">216</span>
        <span class="pp-stat__label">份桌面端资料</span>
      </li>
      <li class="pp-stat">
        <span class="pp-stat__num ax-num">12</span>
        <span class="pp-stat__label">个月单次导出上限</span>
      </li>
      <li class="pp-stat">
        <span class="pp-stat__num ax-num">68</span>
        <span class="pp-stat__label">% 建议采纳率</span>
      </li>
    </ul>
  </header>

  <nav class="pp-index" aria-label="本页章节">
    <a class="pp-index__link" href="#overview">四栏结构</a>
    <a class="pp-index__link" href="#col-3">第 3 栏</a>
    <a class="pp-index__link" href="#desktop">电脑端体验</a>
    <a class="pp-index__link" href="#cadence">更新节奏</a>
    <a class="pp-index__link" href="#access">获取与导出</a>
    <a class="pp-index__link" href="#support">问题处理</a>
  </nav>

  <section class="ax-section pp-block pp-overview" id="overview" data-section>
    <p class="ax-section__label">栏目结构 · A</p>
    <h2 class="ax-section__title">四栏结构总览</h2>
    <p class="pp-lede">下载页横向排开四个栏位，从确认入口到翻旧档案，每一栏只管一件事。按栏号顺序走一遍，通常两分钟内就能定位到自己要的那份文件。</p>

    <figure class="pp-figure">
      <div class="pp-figure__frame">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="电脑端资料下载页四栏结构示意，第 3 栏以高对比琥珀色序号块标出">
      </div>
      <figcaption class="pp-figure__cap">四栏横向排布，第 3 栏加宽并单独标出，桌面端专用资料集中在这里。</figcaption>
    </figure>

    <div class="pp-cols">
      <article class="pp-col pp-col--1">
        <span class="pp-col__num ax-num">01</span>
        <h3 class="pp-col__title">地址索引</h3>
        <p class="pp-col__desc">全部栏目入口的汇总表，按字母编号排列。地址有过调整的，以这一栏的当前内容为准。</p>
        <p class="pp-col__use">什么时候用：确认某个栏目往哪走、核对入口有没有换过。</p>
      </article>

      <article class="pp-col pp-col--2">
        <span class="pp-col__num ax-num">02</span>
        <h3 class="pp-col__title">栏目导航</h3>
        <p class="pp-col__desc">十二个一级栏目与四十八个二级栏目按主题分组，点一下就直接落到对应内容区。</p>
        <p class="pp-col__use">什么时候用：手上只有栏目名称、不清楚它挂在哪一类下面。</p>
      </article>

      <article class="pp-col pp-col--3">
        <span class="pp-col__num ax-num">03</span>
        <h3 class="pp-col__title">电脑端专用资料</h3>
        <p class="pp-col__desc">为桌面端准备的 216 份文档，覆盖 PDF、CSV、XLSX、PNG 四种格式，全部落到本地即可打开，适合批量整理与并排比对。</p>
        <p class="pp-col__use">什么时候用：需要一次性取走一批资料、或者要把数据拉进表格软件里做二次处理。</p>
      </article>

      <article class="pp-col pp-col--4">
        <span class="pp-col__num ax-num">04</span>
        <h3 class="pp-col__title">历史归档</h3>
        <p class="pp-col__desc">往期版本说明档案按月份单独留存，旧文件不做覆盖，需要和本月的资料对照时直接翻这一栏。</p>
        <p class="pp-col__use">什么时候用：追查某个字段以前的写法、确认某项调整是哪个月生效的。</p>
      </article>
    </div>
  </section>

  <section class="ax-section pp-block pp-col3" id="col-3" data-section>
    <p class="ax-section__label">桌面端专用 · B</p>
    <h2 class="ax-section__title">第 3 栏：为桌面端准备的那一栏</h2>
    <p class="pp-lede">第 3 栏放在中间偏右，宽度是其他栏的一倍半。这不是排版偏好，而是取用习惯决定的位置——左侧两栏回答「在哪里」，第 3 栏直接把文件交到您手上，右侧第 4 栏兜住过往版本。</p>

    <figure class="pp-figure">
      <div class="pp-figure__frame">
        <img src="{zhanqunpic:h:900w:1440}" width="1440" height="900" alt="桌面端资料下载页第 3 栏界面局部，含文件列表、四种格式标签与更新标记" loading="lazy" decoding="async">
      </div>
      <figcaption class="pp-figure__cap">第 3 栏的界面排布：左侧等宽序号，中间文件名与一句话说明，右侧格式标签。</figcaption>
    </figure>

    <div class="pp-col3__meta">
      <p class="pp-col3__meta-item"><span class="pp-col3__meta-key">当前收录</span><span class="pp-col3__meta-val ax-num">216</span> 份</p>
      <p class="pp-col3__meta-item"><span class="pp-col3__meta-key">文件格式</span><span class="pp-col3__meta-val">PDF / CSV / XLSX / PNG</span></p>
      <p class="pp-col3__meta-item"><span class="pp-col3__meta-key">同步周期</span><span class="pp-col3__meta-val">随版本说明页按月同步</span></p>
    </div>

    <h3 class="pp-sub">按格式挑文件</h3>
    <p class="pp-sub__note">想找某一类文件，先点格式按钮把清单收窄，再从序号往下看即可。</p>

    <div class="pp-filter">
      <input class="pp-filter__radio" type="radio" name="ppfmt" id="ppfmt-all" checked>
      <input class="pp-filter__radio" type="radio" name="ppfmt" id="ppfmt-pdf">
      <input class="pp-filter__radio" type="radio" name="ppfmt" id="ppfmt-csv">
      <input class="pp-filter__radio" type="radio" name="ppfmt" id="ppfmt-xlsx">
      <input class="pp-filter__radio" type="radio" name="ppfmt" id="ppfmt-png">

      <div class="pp-filter__bar" role="group" aria-label="按文件格式筛选">
        <label class="pp-filter__chip" for="ppfmt-all">全部格式</label>
        <label class="pp-filter__chip" for="ppfmt-pdf">PDF</label>
        <label class="pp-filter__chip" for="ppfmt-csv">CSV</label>
        <label class="pp-filter__chip" for="ppfmt-xlsx">XLSX</label>
        <label class="pp-filter__chip" for="ppfmt-png">PNG</label>
      </div>

      <ol class="pp-files">
        <li class="pp-file" data-fmt="pdf">
          <span class="pp-file__no">001</span>
          <span class="pp-file__body">
            <span class="pp-file__name">栏目地址总表</span>
            <span class="pp-file__note">全部栏目入口的汇总表，地址调整以这份为准</span>
          </span>
          <span class="pp-chip pp-chip--pdf">PDF</span>
        </li>
        <li class="pp-file" data-fmt="csv">
          <span class="pp-file__no">002</span>
          <span class="pp-file__body">
            <span class="pp-file__name">栏目索引对照表</span>
            <span class="pp-file__note">一级与二级栏目编号的对应关系，可直接导入表格软件</span>
          </span>
          <span class="pp-chip pp-chip--csv">CSV</span>
        </li>
        <li class="pp-file" data-fmt="xlsx">
          <span class="pp-file__no">003</span>
          <span class="pp-file__body">
            <span class="pp-file__name">桌面端资料清单</span>
            <span class="pp-file__note">216 份文档的完整目录，含格式、所在栏位与最近更新月份</span>
          </span>
          <span class="pp-chip pp-chip--xlsx">XLSX</span>
        </li>
        <li class="pp-file" data-fmt="png">
          <span class="pp-file__no">004</span>
          <span class="pp-file__body">
            <span class="pp-file__name">地址页导航结构图</span>
            <span class="pp-file__note">导航层级关系的高清示意图，适合放进内部说明材料</span>
          </span>
          <span class="pp-chip pp-chip--png">PNG</span>
        </li>
        <li class="pp-file" data-fmt="pdf">
          <span class="pp-file__no">005</span>
          <span class="pp-file__body">
            <span class="pp-file__name">版本说明档案封面</span>
            <span class="pp-file__note">按月归档的档案封面，标注版本号与整理完成时间</span>
          </span>
          <span class="pp-chip pp-chip--pdf">PDF</span>
        </li>
        <li class="pp-file" data-fmt="csv">
          <span class="pp-file__no">006</span>
          <span class="pp-file__body">
            <span class="pp-file__name">月份对照速查表</span>
            <span class="pp-file__note">把本月内容与上上月档案并排铺开，便于逐项比对</span>
          </span>
          <span class="pp-chip pp-chip--csv">CSV</span>
        </li>
        <li class="pp-file" data-fmt="xlsx">
          <span class="pp-file__no">007</span>
          <span class="pp-file__body">
            <span class="pp-file__name">栏目收藏一览</span>
            <span class="pp-file__note">会员中心收藏栏目的导出表，可用于团队内部同步关注点</span>
          </span>
          <span class="pp-chip pp-chip--xlsx">XLSX</span>
        </li>
        <li class="pp-file" data-fmt="png">
          <span class="pp-file__no">008</span>
          <span class="pp-file__body">
            <span class="pp-file__name">反馈处理流程示意</span>
            <span class="pp-file__note">从提交到给出结论的完整路径图，含两个时效节点</span>
          </span>
          <span class="pp-chip pp-chip--png">PNG</span>
        </li>
        <li class="pp-file" data-fmt="csv">
          <span class="pp-file__no">009</span>
          <span class="pp-file__body">
            <span class="pp-file__name">地址索引巡检记录</span>
            <span class="pp-file__note">每周一次的巡检结果逐条留痕，可追溯每次变动</span>
          </span>
          <span class="pp-chip pp-chip--csv">CSV</span>
        </li>
        <li class="pp-file" data-fmt="pdf">
          <span class="pp-file__no">010</span>
          <span class="pp-file__body">
            <span class="pp-file__name">资料完整性报告</span>
            <span class="pp-file__note">每季度发布一期，最近一期覆盖 48 个二级栏目中的 46 个</span>
          </span>
          <span class="pp-chip pp-chip--pdf">PDF</span>
        </li>
      </ol>
    </div>
  </section>

  <section class="ax-section pp-block pp-desktop" id="desktop" data-section>
    <p class="ax-section__label">使用环境 · C</p>
    <h2 class="ax-section__title">为什么建议在电脑上打开</h2>
    <p class="pp-lede">手机上翻一翻栏目没问题，但整理资料这件事，还是桌面端顺手。差别不在功能多少，而在一屏能同时摆下多少东西。</p>

    <figure class="pp-figure">
      <div class="pp-figure__frame">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="同一份资料在桌面端与移动端显示效果的并排对比示意" loading="lazy" decoding="async">
      </div>
      <figcaption class="pp-figure__cap">同一份清单，电脑端能并排铺开两栏，移动端则一次只显示一屏。</figcaption>
    </figure>

    <div class="pp-compare">
      <article class="pp-compare__col pp-compare__col--desktop">
        <h3 class="pp-compare__title">在电脑上</h3>
        <ul class="pp-compare__list">
          <li>地址索引与资料清单可以并排打开，一边核对入口一边取文件，不用来回切页。</li>
          <li>支持批量勾选多份文档一次取走，省去逐个点击的重复动作。</li>
          <li>CSV 与 XLSX 落到本地后能直接在表格软件里排序、筛选、套公式。</li>
          <li>高清 PNG 与多页 PDF 在大屏上翻起来完整，细节不会糊成一片。</li>
        </ul>
      </article>
      <article class="pp-compare__col pp-compare__col--mobile">
        <h3 class="pp-compare__title">在手机上</h3>
        <ul class="pp-compare__list">
          <li>适合临时确认某个栏目现在挂在哪儿，看一眼就走。</li>
          <li>受屏幕宽度限制，表格类文件需要反复缩放才能看清某一列。</li>
          <li>需要真正整理和归档的时候，还是回到桌面端更省时间。</li>
        </ul>
      </article>
    </div>
  </section>

  <section class="ax-section pp-block pp-cadence" id="cadence" data-section>
    <p class="ax-section__label">更新节奏 · D</p>
    <h2 class="ax-section__title">多久更新一次</h2>
    <p class="pp-lede">三条更新线各走各的周期：文件按月换，入口每周看，旧档案一直留着不动。</p>

    <ol class="pp-cadence__list">
      <li class="pp-cadence__item">
        <span class="pp-cadence__when">每月 5 日前</span>
        <h3 class="pp-cadence__title">上月的版本说明档案整理完毕</h3>
        <p class="pp-cadence__desc">第 3 栏里的文档随版本说明页同步更新，新一月的资料进来，旧版本同时进入第 4 栏归档，两边都不留空档。</p>
      </li>
      <li class="pp-cadence__item">
        <span class="pp-cadence__when">每周一次</span>
        <h3 class="pp-cadence__title">地址索引逐条巡检</h3>
        <p class="pp-cadence__desc">第 1 栏的入口地址每周核对一遍，发现失效或者跳转异常的，当天修好并记进修改记录。</p>
      </li>
      <li class="pp-cadence__item">
        <span class="pp-cadence__when">每季度一期</span>
        <h3 class="pp-cadence__title">资料完整性报告发布</h3>
        <p class="pp-cadence__desc">按季度盘一遍各栏目的资料齐备程度，最近一期覆盖 48 个二级栏目中的 46 个，缺项会写清原因。</p>
      </li>
    </ol>

    <figure class="pp-figure">
      <div class="pp-figure__frame">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="历史版本归档文件按月层叠排列的档案封面示意" loading="lazy" decoding="async">
      </div>
      <figcaption class="pp-figure__cap">往期档案按月层叠留存，任何一个月都能单独抽出来对照。</figcaption>
    </figure>
  </section>

  <section class="ax-section pp-block pp-access" id="access" data-section>
    <p class="ax-section__label">取用方式 · E</p>
    <h2 class="ax-section__title">怎么拿到并导出资料</h2>
    <p class="pp-lede">第 3 栏的文件打开浏览器就能取走，不需要额外步骤。如果要成批归档、和旧资料逐项比对，走下面这三步会更顺。</p>

    <ol class="pp-flow">
      <li class="pp-flow__step">
        <span class="pp-flow__idx">01</span>
        <h3 class="pp-flow__step-title">进入会员中心</h3>
        <p class="pp-flow__step-desc">注册后即可使用收藏、订阅提醒与档案导出三项功能。目前注册用户 26 万，其中桌面端用户约占七成。</p>
      </li>
      <li class="pp-flow__step">
        <span class="pp-flow__idx">02</span>
        <h3 class="pp-flow__step-title">把常看的栏目收藏起来</h3>
        <p class="pp-flow__step-desc">收藏之后，这些栏目的更新会集中出现在您的列表里，版本订阅提醒也会跟着推过来。</p>
      </li>
      <li class="pp-flow__step">
        <span class="pp-flow__idx">03</span>
        <h3 class="pp-flow__step-title">一键导出上月档案</h3>
        <p class="pp-flow__step-desc">导出可以直接生成上月版本说明档案，PDF 与 CSV 两种格式任选，单次最多导出 12 个月，正好够跨年度比对。</p>
      </li>
    </ol>

    <figure class="pp-figure">
      <div class="pp-figure__frame">
        <img src="{zhanqunpic:h:720w:1280}" width="1280" height="720" alt="会员中心收藏栏目并导出上月版本说明档案的三步操作示意" loading="lazy" decoding="async">
      </div>
      <figcaption class="pp-figure__cap">收藏、订阅、导出三步连在一起，中途随时可以回到第 3 栏直接取单份文件。</figcaption>
    </figure>

    <p class="pp-access__note">导出档案的用途很直接：把本月的内容和老档案摊在同一张表上，逐行看哪些字段改了、哪些栏目新增了条目。</p>
  </section>

  <section class="ax-section pp-block pp-support" id="support" data-section>
    <p class="ax-section__label">问题处理 · F</p>
    <h2 class="ax-section__title">下载遇到问题怎么办</h2>
    <p class="pp-lede">下载中断、文件打不开、格式对不上，这几类情况都走同一条路：修改记录旁的反馈入口，提交后能查看处理进度。</p>

    <ul class="pp-issues">
      <li class="pp-issue">
        <h3 class="pp-issue__title">下载到一半停了</h3>
        <p class="pp-issue__desc">先确认网络是否稳定，再重新点一次文件。大体积 PDF 和 PNG 建议在网络空闲时段取。反复中断的，把文件名和发生时间一并提交。</p>
      </li>
      <li class="pp-issue">
        <h3 class="pp-issue__title">文件打开是乱码或提示损坏</h3>
        <p class="pp-issue__desc">多半是下载未完成造成的。删掉本地那份重新取一次即可。若仍然如此，请说明您使用的阅读器或表格软件版本，我们会在处理结论里给出适配建议。</p>
      </li>
      <li class="pp-issue">
        <h3 class="pp-issue__title">格式在您的软件里打不开</h3>
        <p class="pp-issue__desc">CSV 与 XLSX 对软件版本有一定要求。告知您的软件名称与版本，我们会指出该换用哪一份同类文件，或者说明替代的取用方式。</p>
      </li>
      <li class="pp-issue">
        <h3 class="pp-issue__title">清单里有文件点不开</h3>
        <p class="pp-issue__desc">这类属于入口失效，巡检中通常会先一步发现。您也可以直接提交，我们会在修改记录里注明修复时间。</p>
      </li>
    </ul>

    <div class="pp-support__panel">
      <p class="pp-support__line">反馈入口就在修改记录旁边。常规勘误在两个工作日内给出处理结论，涉及跨栏目核对的复杂问题不超过五个工作日。平台累计处理勘误与反馈 3400 余条，建议采纳率约 68%。</p>
      <p class="pp-support__contact">
        <span class="pp-support__label">客服邮箱</span>
        <span class="ax-code pp-support__mail">service@anxin-login-portal.com.cn</span>
        <button type="button" class="ax-copy pp-copy" data-copy="service@anxin-login-portal.com.cn">复制</button>
      </p>
      <p class="pp-support__hint">工作日 9:00–18:00 内回复。想先看看别人常问什么，可以翻一翻<a class="pp-link" href="/faqs/">常见问答</a>；要谈资料互认或栏目共建，请走<a class="pp-link" href="/consult/">咨询服务</a>。</p>
    </div>
  </section>

  <aside class="pp-tail">
    <div class="pp-tail__col">
      <p class="pp-tail__label">还没弄清栏目怎么分</p>
      <p class="pp-tail__text">12 个一级栏目与 48 个二级栏目的划分方式、校对团队的分工，都在<a class="pp-link" href="/who-we-are/">我们是谁</a>里写清楚了。</p>
    </div>
    <div class="pp-tail__col">
      <p class="pp-tail__label">想知道本月改了什么</p>
      <p class="pp-tail__text">本月的栏目调整与勘误处理结论，集中放在<a class="pp-link" href="/information/">版本资讯中心</a>。</p>
    </div>
    <div class="pp-tail__col">
      <p class="pp-tail__label">要回到入口看状态</p>
      <p class="pp-tail__text">地址页当前版本与本周巡检结果，随时可以在<a class="pp-link" href="/">首页</a>的状态台查看。</p>
    </div>
  </aside>

</main>

.page-products {
  --pp-amber-tint: rgba(224, 138, 44, 0.14);
  --pp-ink-tint: rgba(15, 58, 49, 0.07);
  --pp-ink-tint-2: rgba(15, 58, 49, 0.04);
  width: 100%;
  max-width: var(--ax-shell);
  margin-inline: auto;
  padding-inline: var(--ax-gutter);
  padding-bottom: clamp(48px, 7vw, 96px);
  box-sizing: border-box;
  color: var(--ax-text);
}

.page-products *,
.page-products *::before,
.page-products *::after {
  box-sizing: border-box;
}

/* ---------- 面包屑 ---------- */
.page-products .pp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: clamp(16px, 2.4vw, 26px);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ax-slate-mid);
}

.page-products .pp-crumbs a {
  color: var(--ax-slate);
  text-decoration: none;
  border-bottom: 1px dashed var(--ax-line);
  padding-bottom: 1px;
  transition: border-color 140ms var(--ax-ease), color 140ms var(--ax-ease);
}

.page-products .pp-crumbs a:hover {
  color: var(--ax-ink);
  border-bottom-style: solid;
}

.page-products .pp-crumbs span[aria-current="page"] {
  color: var(--ax-ink);
  font-weight: 600;
}

/* ---------- 首屏 ---------- */
.page-products .pp-intro {
  padding-top: clamp(24px, 4vw, 46px);
  padding-bottom: clamp(24px, 3.4vw, 38px);
  border-bottom: 1px solid var(--ax-line);
}

.page-products .pp-intro__eyebrow {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ax-ink-mid);
  text-transform: uppercase;
}

.page-products .pp-intro__title {
  margin: 0.28em 0 0.34em;
  font-family: var(--ax-font-sans);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ax-ink);
  max-width: 14ch;
}

.page-products .pp-intro__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.78;
  color: var(--ax-slate);
}

.page-products .pp-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  background: var(--ax-line);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
}

.page-products .pp-stat {
  background: var(--ax-white);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .pp-stat__num {
  font-family: var(--ax-font-mono);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  font-weight: 600;
  color: var(--ax-ink);
  letter-spacing: 0.01em;
}

.page-products .pp-stat__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ax-slate-mid);
}

@media (min-width: 720px) {
  .page-products .pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pp-stat {
    padding: 20px 22px 22px;
  }
}

/* ---------- 章节索引 ---------- */
.page-products .pp-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 3vw, 34px);
  padding-bottom: 2px;
}

.page-products .pp-index__link {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ax-slate);
  text-decoration: none;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-index__link:hover,
.page-products .pp-index__link:focus-visible {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

/* ---------- 通用区块 ---------- */
.page-products .pp-block {
  margin-top: clamp(52px, 7.4vw, 100px);
}

.page-products .pp-lede {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.82;
  color: var(--ax-slate);
}

.page-products .pp-sub {
  margin: clamp(34px, 4.4vw, 52px) 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-sub__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ax-slate-mid);
  max-width: 46ch;
}

.page-products .pp-link {
  color: var(--ax-ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--ax-ink-mid);
  padding-bottom: 1px;
  transition: border-color 140ms var(--ax-ease), color 140ms var(--ax-ease);
}

.page-products .pp-link:hover {
  border-bottom-style: solid;
  border-bottom-color: var(--ax-ink);
}

/* ---------- 图片 ---------- */
.page-products .pp-figure {
  margin: clamp(26px, 3.8vw, 42px) 0 0;
}

.page-products .pp-figure__frame {
  border-radius: var(--ax-radius-lg);
  overflow: hidden;
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  box-shadow: var(--ax-shadow-soft);
}

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

.page-products .pp-figure__cap {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--ax-amber);
  font-size: 13px;
  line-height: 1.72;
  color: var(--ax-slate-mid);
}

/* ---------- 四栏结构 ---------- */
.page-products .pp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(28px, 4vw, 46px);
}

.page-products .pp-col {
  position: relative;
  padding: 22px 20px 24px;
  border-top: 2px solid var(--ax-line);
  background: transparent;
}

.page-products .pp-col__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--ax-radius-sm);
  background: var(--pp-ink-tint);
  font-family: var(--ax-font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ax-ink);
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease);
}

.page-products .pp-col__title {
  margin: 16px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-col__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ax-slate);
}

.page-products .pp-col__use {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ax-slate-mid);
}

.page-products .pp-col--3 {
  background: var(--ax-white);
  border-top-color: var(--ax-amber);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-soft);
  padding: 26px 24px 30px;
}

.page-products .pp-col--3 .pp-col__num {
  background: var(--ax-amber);
  color: var(--ax-white);
  min-width: 62px;
  height: 38px;
  font-size: 18px;
  font-weight: 600;
}

.page-products .pp-col--3 .pp-col__title {
  font-size: clamp(20px, 1.9vw, 25px);
}

.page-products .pp-col--3:hover .pp-col__num {
  background: var(--ax-ink-deep);
}

@media (min-width: 720px) {
  .page-products .pp-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
  }
}

@media (min-width: 1060px) {
  .page-products .pp-cols {
    grid-template-columns: 0.9fr 0.9fr 1.55fr 0.9fr;
    gap: 24px;
    align-items: start;
  }
  .page-products .pp-col--3 {
    margin-top: 34px;
  }
}

/* ---------- 第 3 栏 ---------- */
.page-products .pp-col3__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(28px, 3.6vw, 42px);
  background: var(--ax-line);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
}

.page-products .pp-col3__meta-item {
  margin: 0;
  padding: 14px 18px;
  background: var(--ax-white);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ax-slate);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.page-products .pp-col3__meta-key {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ax-slate-mid);
  min-width: 5.6em;
}

.page-products .pp-col3__meta-val {
  color: var(--ax-ink);
  font-weight: 600;
}

.page-products .pp-col3__meta-val.ax-num {
  font-family: var(--ax-font-mono);
  font-size: 19px;
  letter-spacing: 0.02em;
}

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

/* 格式筛选 */
.page-products .pp-filter {
  position: relative;
  margin-top: 14px;
}

.page-products .pp-filter__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-products .pp-filter__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.page-products .pp-filter__chip {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: var(--ax-white);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ax-slate);
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-filter__chip:hover {
  border-color: var(--ax-ink-mid);
  color: var(--ax-ink);
}

.page-products #ppfmt-all:checked ~ .pp-filter__bar [for="ppfmt-all"],
.page-products #ppfmt-pdf:checked ~ .pp-filter__bar [for="ppfmt-pdf"],
.page-products #ppfmt-csv:checked ~ .pp-filter__bar [for="ppfmt-csv"],
.page-products #ppfmt-xlsx:checked ~ .pp-filter__bar [for="ppfmt-xlsx"],
.page-products #ppfmt-png:checked ~ .pp-filter__bar [for="ppfmt-png"] {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

.page-products #ppfmt-pdf:focus-visible ~ .pp-filter__bar [for="ppfmt-pdf"],
.page-products #ppfmt-csv:focus-visible ~ .pp-filter__bar [for="ppfmt-csv"],
.page-products #ppfmt-xlsx:focus-visible ~ .pp-filter__bar [for="ppfmt-xlsx"],
.page-products #ppfmt-png:focus-visible ~ .pp-filter__bar [for="ppfmt-png"],
.page-products #ppfmt-all:focus-visible ~ .pp-filter__bar [for="ppfmt-all"] {
  outline: 2px solid var(--ax-amber);
  outline-offset: 2px;
}

.page-products #ppfmt-pdf:checked ~ .pp-files .pp-file:not([data-fmt="pdf"]),
.page-products #ppfmt-csv:checked ~ .pp-files .pp-file:not([data-fmt="csv"]),
.page-products #ppfmt-xlsx:checked ~ .pp-files .pp-file:not([data-fmt="xlsx"]),
.page-products #ppfmt-png:checked ~ .pp-files .pp-file:not([data-fmt="png"]) {
  display: none;
}

/* 文件清单 */
.page-products .pp-files {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--ax-line);
  transition: background-color 160ms var(--ax-ease);
}

.page-products .pp-file:hover {
  background: var(--pp-ink-tint-2);
}

.page-products .pp-file__no {
  flex: 0 0 auto;
  width: 2.9em;
  font-family: var(--ax-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ax-slate-mid);
}

.page-products .pp-file__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-products .pp-file__name {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ax-text);
}

.page-products .pp-file__note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ax-slate-mid);
}

.page-products .pp-chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: var(--ax-white);
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ax-slate);
}

.page-products .pp-chip--pdf {
  color: var(--ax-ink);
  border-color: rgba(15, 58, 49, 0.36);
}

.page-products .pp-chip--csv {
  color: var(--ax-ink-deep);
  border-color: rgba(20, 84, 74, 0.36);
}

.page-products .pp-chip--xlsx {
  color: var(--ax-slate);
  border-color: rgba(62, 90, 107, 0.4);
}

.page-products .pp-chip--png {
  color: var(--ax-slate-mid);
  border-color: rgba(124, 150, 166, 0.56);
}

/* ---------- 电脑端体验 ---------- */
.page-products .pp-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 3.8vw, 44px);
}

.page-products .pp-compare__col {
  padding: 24px 22px 26px;
  border-radius: var(--ax-radius-lg);
}

.page-products .pp-compare__col--desktop {
  background: var(--ax-ink);
  color: rgba(255, 255, 255, 0.86);
}

.page-products .pp-compare__col--desktop .pp-compare__title {
  color: var(--ax-white);
}

.page-products .pp-compare__col--desktop .pp-compare__list li::before {
  background: var(--ax-amber);
}

.page-products .pp-compare__col--mobile {
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  color: var(--ax-slate);
}

.page-products .pp-compare__col--mobile .pp-compare__title {
  color: var(--ax-ink);
}

.page-products .pp-compare__col--mobile .pp-compare__list li::before {
  background: var(--ax-slate-soft);
}

.page-products .pp-compare__title {
  margin: 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.005em;
}

.page-products .pp-compare__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-products .pp-compare__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.78;
}

.page-products .pp-compare__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
}

@media (min-width: 820px) {
  .page-products .pp-compare {
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
  }
  .page-products .pp-compare__col {
    padding: 30px 28px 32px;
  }
}

/* ---------- 更新节奏 ---------- */
.page-products .pp-cadence__list {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  position: relative;
}

.page-products .pp-cadence__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--ax-line);
}

.page-products .pp-cadence__item {
  position: relative;
  padding: 0 0 clamp(26px, 3.4vw, 38px) 36px;
}

.page-products .pp-cadence__item:last-child {
  padding-bottom: 0;
}

.page-products .pp-cadence__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--ax-ink-mid);
  background: var(--ax-paper);
}

.page-products .pp-cadence__when {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--ax-radius-pill);
  background: var(--pp-ink-tint);
  font-family: var(--ax-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ax-ink);
}

.page-products .pp-cadence__title {
  margin: 12px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-cadence__desc {
  margin: 9px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-slate);
}

/* ---------- 获取与导出 ---------- */
.page-products .pp-flow {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .pp-flow__step {
  position: relative;
  padding: 24px 22px 26px;
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
  border-radius: var(--ax-radius-lg);
}

.page-products .pp-flow__idx {
  display: block;
  font-family: var(--ax-font-mono);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ax-slate-soft);
}

.page-products .pp-flow__step:last-child .pp-flow__idx {
  color: var(--ax-amber);
}

.page-products .pp-flow__step-title {
  margin: 16px 0 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-flow__step-desc {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 860px) {
  .page-products .pp-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page-products .pp-flow__step {
    border-radius: 0;
    border-right: 0;
    padding: 30px 26px 32px;
  }
  .page-products .pp-flow__step:first-child {
    border-radius: var(--ax-radius-lg) 0 0 var(--ax-radius-lg);
  }
  .page-products .pp-flow__step:last-child {
    border-right: 1px solid var(--ax-line-soft);
    border-radius: 0 var(--ax-radius-lg) var(--ax-radius-lg) 0;
  }
}

.page-products .pp-access__note {
  margin: clamp(24px, 3.2vw, 34px) 0 0;
  padding: 18px 22px;
  border-radius: var(--ax-radius-md);
  background: var(--pp-amber-tint);
  border-left: 3px solid var(--ax-amber);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-text);
  max-width: 62ch;
}

/* ---------- 问题处理 ---------- */
.page-products .pp-issues {
  list-style: none;
  margin: clamp(28px, 3.8vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-issue {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--ax-line);
}

.page-products .pp-issue__title {
  margin: 0;
  font-family: var(--ax-font-sans);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.005em;
  color: var(--ax-ink);
}

.page-products .pp-issue__desc {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 800px) {
  .page-products .pp-issues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

.page-products .pp-support__panel {
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--ax-radius-lg);
  background: var(--ax-white);
  border: 1px solid var(--ax-line-soft);
}

.page-products .pp-support__line {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ax-text);
}

.page-products .pp-support__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ax-line);
}

.page-products .pp-support__label {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ax-slate-mid);
}

.page-products .pp-support__mail {
  font-family: var(--ax-font-mono);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ax-ink);
  word-break: break-all;
}

.page-products .pp-copy {
  padding: 6px 16px;
  border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-line);
  background: transparent;
  font-family: var(--ax-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ax-slate);
  cursor: pointer;
  transition: background-color 160ms var(--ax-ease), color 160ms var(--ax-ease), border-color 160ms var(--ax-ease);
}

.page-products .pp-copy:hover {
  background: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}

.page-products .pp-support__hint {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ax-slate-mid);
}

/* ---------- 页尾引导 ---------- */
.page-products .pp-tail {
  margin-top: clamp(48px, 6.5vw, 88px);
  padding-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--ax-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pp-tail__label {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ax-ink-mid);
}

.page-products .pp-tail__text {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ax-slate);
}

@media (min-width: 780px) {
  .page-products .pp-tail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products *,
  .page-products *::before,
  .page-products *::after {
    transition: none !important;
    animation: none !important;
  }
}