.page-products{
  --pp-rule: var(--line-on-paper);
  --pp-card: rgba(255,255,255,.62);
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

.page-products .pp-link{
  color: var(--deep-fern);
  border-bottom: 1px solid var(--signal);
  text-decoration: none;
  padding-bottom: 1px;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb{
  padding-top: clamp(16px,3vw,28px);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero{
  padding: clamp(20px,4vw,44px) 0 clamp(30px,5vw,58px);
}

.page-products .pp-hero__grid{
  display: grid;
  gap: clamp(26px,4vw,44px);
  align-items: start;
}

@media (min-width: 900px){
  .page-products .pp-hero__grid{
    grid-template-columns: 7fr 4fr;
    column-gap: clamp(32px,5vw,72px);
  }
}

.page-products .pp-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .18em;
  color: var(--deep-fern);
}

.page-products .pp-hero__kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}

.page-products .pp-hero__title{
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 8.4vw, 64px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink-moss);
}

.page-products .pp-hero__title em{
  font-style: normal;
  color: var(--terracotta);
}

.page-products .pp-hero__dek{
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: var(--step-2);
  line-height: 1.78;
  color: var(--charcoal);
}

.page-products .pp-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pp-hero__meta{
  border-top: 1px solid var(--pp-rule);
  padding-top: 18px;
}

.page-products .pp-hero__ver{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0;
}

.page-products .pp-hero__ver-cap{
  font-family: var(--font-mono);
  font-size: var(--step-3);
  letter-spacing: .06em;
  color: var(--ink-moss);
  line-height: 1;
}

.page-products .pp-hero__ver-note{
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--rock);
}

.page-products .pp-hero__facts{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: var(--step-1);
  line-height: 1.68;
  color: var(--rock);
}

.page-products .pp-hero__facts .mono{
  display: inline-block;
  min-width: 34px;
  margin-right: 6px;
  color: var(--deep-fern);
}

/* ---------- 分区标题 ---------- */
.page-products .pp-section-head{
  margin-bottom: clamp(20px,3vw,34px);
}

.page-products .pp-section-head__title{
  margin: 12px 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.6vw, 32px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ink-moss);
}

.page-products .pp-section-head__intro{
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: var(--step-2);
  line-height: 1.76;
  color: var(--rock);
}

/* ---------- 两条轨道总览 ---------- */
.page-products .pp-tracks{
  padding: clamp(32px,5vw,60px) 0;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-tracks__figure{
  margin: 0 0 clamp(24px,4vw,40px);
}

.page-products .pp-track-list{
  display: grid;
  gap: 20px;
}

@media (min-width: 900px){
  .page-products .pp-track-list{
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px,3vw,36px);
  }
  .page-products .pp-track--cn{
    margin-top: 56px;
  }
}

.page-products .pp-track{
  position: relative;
  padding: 24px clamp(16px,2.4vw,26px) 24px;
  background: var(--pp-card);
  border: 1px solid var(--pp-rule);
}

.page-products .pp-track::before{
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 3px;
  background: var(--deep-fern);
}

.page-products .pp-track--pc::before{
  background: var(--signal);
}

.page-products .pp-track__kicker{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .18em;
  color: var(--rock);
}

.page-products .pp-track h3{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-3);
  letter-spacing: -.01em;
  color: var(--ink-moss);
}

.page-products .pp-track p{
  margin: 10px 0 0;
  font-size: var(--step-2);
  line-height: 1.72;
  color: var(--rock);
}

.page-products .pp-track__line{
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
}

@media (min-width: 560px){
  .page-products .pp-track__line{
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-products .pp-track__node{
  position: relative;
  padding-top: 20px;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--charcoal);
}

.page-products .pp-track__node::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--pp-rule);
}

.page-products .pp-track__node::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--deep-fern);
  background: var(--paper);
}

.page-products .pp-track--pc .pp-track__node::after{
  border-color: var(--signal);
}

/* ---------- PC 端步骤 ---------- */
.page-products .pp-steps{
  padding: clamp(32px,5vw,60px) 0;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-steps__grid{
  display: grid;
  gap: clamp(26px,4vw,40px);
}

@media (min-width: 960px){
  .page-products .pp-steps__grid{
    grid-template-columns: 4fr 7fr;
    column-gap: clamp(32px,5vw,72px);
    align-items: start;
  }
  .page-products .pp-steps__aside{
    position: sticky;
    top: 32px;
  }
}

.page-products .pp-steps__aside .media-frame{
  margin: 0;
}

.page-products .pp-steps__annot{
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--terracotta);
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--rock);
}

.page-products .pp-steplist{
  margin: clamp(18px,3vw,26px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-steplist > li{
  border-bottom: 1px solid var(--pp-rule);
}

.page-products .pp-step__head{
  display: grid;
  grid-template-columns: 34px 1fr 20px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 17px 0;
  text-align: left;
}

.page-products .pp-step__num{
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .08em;
  color: var(--terracotta);
}

.page-products .pp-step__inner{
  display: grid;
  gap: 12px;
  padding: 0 0 18px 46px;
  font-size: var(--step-2);
  line-height: 1.76;
  color: var(--charcoal);
}

.page-products .pp-step__inner p{
  margin: 0;
}

.page-products .pp-step__inner strong{
  display: inline-block;
  margin-right: 6px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--deep-fern);
}

.page-products .pp-step__note{
  padding: 10px 12px;
  border-left: 2px solid var(--signal);
  background: rgba(255,107,44,.07);
  font-size: var(--step-1) !important;
  line-height: 1.72;
  color: var(--charcoal);
}

@media (max-width: 560px){
  .page-products .pp-step__inner{
    padding-left: 0;
  }
}

/* ---------- 常用入口对照 ---------- */
.page-products .pp-entry{
  padding: clamp(32px,5vw,60px) 0;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-entry__grid{
  display: grid;
  gap: clamp(24px,4vw,40px);
}

@media (min-width: 960px){
  .page-products .pp-entry__grid{
    grid-template-columns: 7fr 4fr;
    column-gap: clamp(32px,5vw,64px);
    align-items: start;
  }
}

.page-products .pp-entry__media{
  margin: 0;
}

.page-products .pp-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--pp-rule);
  background: var(--pp-card);
}

.page-products .pp-table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.page-products .pp-table__caption{
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .12em;
  color: var(--rock);
  border-bottom: 1px solid var(--pp-rule);
}

.page-products .pp-table thead th{
  text-align: left;
  padding: 12px 14px;
  background: var(--mist);
  border-bottom: 1px solid var(--pp-rule);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--deep-fern);
  white-space: nowrap;
}

.page-products .pp-table tbody th,
.page-products .pp-table tbody td{
  padding: 15px 14px;
  border-bottom: 1px solid var(--pp-rule);
  font-size: var(--step-2);
  line-height: 1.6;
  vertical-align: top;
  text-align: left;
}

.page-products .pp-table tbody th{
  font-weight: 600;
  color: var(--ink-moss);
  white-space: nowrap;
}

.page-products .pp-table tbody td{
  color: var(--rock);
}

.page-products .pp-table tbody tr:nth-child(even){
  background: rgba(227,230,225,.5);
}

.page-products .pp-table tbody tr:last-child th,
.page-products .pp-table tbody tr:last-child td{
  border-bottom: 0;
}

/* ---------- 标签与版本 ---------- */
.page-products .pp-labels-section{
  padding: clamp(32px,5vw,60px) 0;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-labels{
  margin: clamp(18px,3vw,26px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-label{
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pp-rule);
}

@media (min-width: 760px){
  .page-products .pp-label{
    grid-template-columns: 160px 170px 1fr;
    column-gap: 20px;
    align-items: center;
  }
}

.page-products .pp-label__tag{
  justify-self: start;
  padding: 5px 10px;
  border-radius: 2px;
  background: var(--deep-fern);
  color: var(--fluoro);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .12em;
  white-space: nowrap;
}

.page-products .pp-label__ver{
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .06em;
  color: var(--rock);
}

.page-products .pp-label__desc{
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--charcoal);
}

/* ---------- 资料下载（深色第二屏） ---------- */
.page-products .pp-downloads{
  margin-top: clamp(32px,5vw,64px);
  padding: clamp(40px,6vw,80px) 0;
  background: var(--ink-moss);
  color: var(--paper);
}

.page-products .pp-downloads__head{
  margin-bottom: clamp(22px,4vw,36px);
}

.page-products .pp-downloads h2{
  margin: 14px 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-products .pp-downloads__lead{
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: var(--step-2);
  line-height: 1.8;
  color: var(--ink-1);
}

.page-products .pp-downloads .chapter-mark__num{
  color: var(--fluoro);
}

.page-products .pp-downloads .chapter-mark__label{
  color: var(--ink-2);
}

.page-products .pp-ver{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 clamp(24px,4vw,34px);
  padding: 14px 20px;
  border: 1px solid rgba(46,211,192,.5);
  background: rgba(46,211,192,.08);
}

.page-products .pp-ver__cap{
  font-family: var(--font-mono);
  font-size: var(--step-4);
  letter-spacing: .08em;
  line-height: 1;
  color: var(--fluoro);
}

.page-products .pp-ver__note{
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}

.page-products .pp-ways{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line-on-ink);
  border: 1px solid var(--line-on-ink);
}

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

.page-products .pp-way{
  padding: 22px 20px;
  background: var(--ink-moss);
}

.page-products .pp-way__idx{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .16em;
  color: var(--fluoro);
}

.page-products .pp-way h3{
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-3);
  color: var(--paper);
}

.page-products .pp-way p{
  margin: 10px 0 0;
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--ink-1);
}

.page-products .pp-downloads__foot{
  display: grid;
  gap: 16px;
  margin-top: clamp(24px,4vw,34px);
  padding-top: 20px;
  border-top: 1px solid var(--line-on-ink);
}

@media (min-width: 800px){
  .page-products .pp-downloads__foot{
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 32px;
  }
}

.page-products .pp-downloads__stat{
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--ink-2);
}

.page-products .pp-downloads__stat .mono{
  color: var(--fluoro);
  margin-right: 4px;
}

.page-products .pp-downloads__foot .btn{
  justify-self: start;
}

/* ---------- 使用记录反馈 ---------- */
.page-products .pp-feedback{
  padding: clamp(32px,5vw,60px) 0;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-feedback__grid{
  display: grid;
  gap: clamp(26px,4vw,40px);
}

@media (min-width: 960px){
  .page-products .pp-feedback__grid{
    grid-template-columns: 4fr 7fr;
    column-gap: clamp(32px,5vw,64px);
    align-items: start;
  }
}

.page-products .pp-feedback__aside .media-frame{
  margin: 0;
}

.page-products .pp-foldlist{
  margin: clamp(18px,3vw,26px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-foldlist > li{
  border-bottom: 1px solid var(--pp-rule);
}

.page-products .pp-feedback__flowtitle{
  margin: clamp(24px,4vw,32px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .14em;
  color: var(--deep-fern);
}

.page-products .pp-flow{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  background: var(--pp-rule);
  border: 1px solid var(--pp-rule);
}

@media (min-width: 700px){
  .page-products .pp-flow{
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-products .pp-flow li{
  padding: 14px 14px 16px;
  background: var(--paper);
  font-size: var(--step-1);
  line-height: 1.66;
  color: var(--charcoal);
}

.page-products .pp-flow b{
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--terracotta);
}

.page-products .pp-feedback__note{
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--fluoro);
  background: rgba(46,211,192,.09);
  font-size: var(--step-1);
  line-height: 1.78;
  color: var(--charcoal);
}

/* ---------- 异常分支 ---------- */
.page-products .pp-trouble{
  padding: clamp(32px,5vw,60px) 0 clamp(48px,7vw,90px);
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-trouble__list{
  display: grid;
  gap: 18px;
  margin: clamp(20px,3vw,30px) 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .pp-trouble__item{
  position: relative;
  padding: 20px 18px 22px 24px;
  border: 1px solid var(--pp-rule);
  background: var(--pp-card);
}

.page-products .pp-trouble__item::before{
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--terracotta);
}

.page-products .pp-trouble__idx{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .16em;
  color: var(--terracotta);
}

.page-products .pp-trouble__item h3{
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-3);
  color: var(--ink-moss);
}

.page-products .pp-trouble__item p{
  margin: 10px 0 0;
  font-size: var(--step-1);
  line-height: 1.78;
  color: var(--rock);
}

.page-products .pp-trouble__foot{
  display: grid;
  gap: 16px;
  margin-top: clamp(24px,4vw,34px);
  padding-top: 20px;
  border-top: 1px solid var(--pp-rule);
}

.page-products .pp-trouble__foot p{
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.76;
  color: var(--rock);
}

@media (min-width: 800px){
  .page-products .pp-trouble__foot{
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 32px;
  }
  .page-products .pp-trouble__foot .btn{
    justify-self: end;
  }
}

@media (max-width: 420px){
  .page-products .pp-hero__ver-cap{
    font-size: var(--step-2);
  }
  .page-products .pp-ver__cap{
    font-size: var(--step-3);
  }
}
<<<END>>>