.page-products{
  --pd-hair:1px solid var(--line-soft);
  --pd-sec-pad:40px;
  --pd-tight:12px;
}

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

/* ---------- 首屏 ---------- */
.page-products .pd-hero{
  display:grid;
  gap:24px;
  padding-block:26px 42px;
  border-bottom:var(--pd-hair);
}

.page-products .pd-kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--cyan);
}

.page-products .pd-hero h1{
  margin:0 0 14px;
  font-size:clamp(30px,7vw,54px);
  line-height:1.08;
  letter-spacing:-.02em;
}

.page-products .pd-hero .lead{
  max-width:56ch;
  margin:0 0 20px;
}

.page-products .pd-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
}

.page-products .pd-batch{
  align-self:start;
  padding:20px 18px 18px;
  border:2px solid var(--line);
  background:
    linear-gradient(160deg,var(--panel-2),var(--panel) 62%),
    var(--panel);
  box-shadow:var(--shadow-hard);
}

.page-products .pd-batch__label{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
}

.page-products .pd-batch__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.page-products .pd-batch__num{
  display:block;
  font-size:clamp(22px,6vw,34px);
  line-height:1;
  color:var(--cyan);
}

.page-products .pd-batch__cap{
  display:block;
  margin-top:8px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

.page-products .pd-batch__foot{
  margin:16px 0 10px;
  font-size:12.5px;
  line-height:1.6;
}

.page-products .pd-batch__copy{
  font-size:12px;
}

/* ---------- 页内目录 ---------- */
.page-products .pd-toc{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:14px 0;
  border-bottom:var(--pd-hair);
  scrollbar-width:thin;
}

.page-products .pd-toc a{
  flex:0 0 auto;
  padding:6px 12px;
  border:1px solid var(--line);
  font-size:13px;
  white-space:nowrap;
  color:var(--muted);
  text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-products .pd-toc a:hover,
.page-products .pd-toc a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
  background:rgba(0,229,255,.06);
}

.page-products .pd-toc a[aria-current="true"]{
  color:var(--ink);
  background:var(--cyan);
  border-color:var(--cyan);
}

/* ---------- 通用章节 ---------- */
.page-products .pd-sec{
  padding-block:var(--pd-sec-pad);
  border-bottom:var(--pd-hair);
}

.page-products .pd-sec--last{
  border-bottom:0;
  padding-bottom:64px;
}

.page-products .pd-sec__lead{
  max-width:66ch;
  margin:0 0 24px;
  color:var(--text);
}

.page-products .pd-sec .sec-head{
  margin-bottom:18px;
}

.page-products .pd-note{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.7;
}

.page-products .pd-fig{
  margin:0 0 24px;
}

.page-products .pd-fig .fig__cap{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- 工具轨道 ---------- */
.page-products .pd-track{
  gap:16px;
  padding-bottom:8px;
}

.page-products .pd-track .track__item{
  width:min(80vw,318px);
  scroll-snap-align:start;
}

.page-products .pd-tool{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
  padding:18px 16px 20px;
  border:2px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:var(--shadow-hard);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.page-products .pd-tool:hover{
  border-color:var(--cyan);
  box-shadow:var(--shadow-cyan);
  transform:translate(-2px,-2px);
}

.page-products .pd-tool__no{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--dim);
}

.page-products .pd-tool__name{
  margin:0;
  font-size:20px;
  line-height:1.3;
}

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

.page-products .pd-tool__tag{
  margin:auto 0 0;
}

/* ---------- 分类索引 ---------- */
.page-products .pd-cat-grid{
  display:grid;
  gap:24px;
}

.page-products .pd-idx{
  margin:0;
}

.page-products .pd-idx .idx__no{
  font-size:20px;
  color:var(--cyan);
}

.page-products .pd-idx .idx__title{
  font-size:17px;
  margin:0 0 4px;
}

.page-products .pd-idx .idx__desc{
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
}

.page-products .pd-idx .idx__meta{
  font-size:12px;
  color:var(--lime);
}

.page-products .pd-fig--side{
  margin:0;
}

/* ---------- 批次区块 ---------- */
.page-products .pd-batchblock{
  display:grid;
  gap:20px;
  margin-top:28px;
  padding-top:24px;
  border-top:var(--pd-hair);
}

.page-products .pd-batchblock__title{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.3;
}

.page-products .pd-batchblock p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}

.page-products .pd-steps{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:3px;
  margin:18px 0 0;
}

.page-products .pd-steps__cell{
  display:flex;
  align-items:center;
  justify-content:center;
  height:28px;
  border:1px solid var(--line);
  background:var(--panel);
  font-size:10px;
  color:var(--dim);
}

.page-products .pd-steps__cell--now{
  border-color:var(--lime);
  background:rgba(182,255,60,.12);
  color:var(--lime);
  box-shadow:0 0 0 1px rgba(182,255,60,.25);
}

.page-products .pd-batchblock .pd-batchblock__foot{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.7;
}

.page-products .pd-batchblock .pd-fig{
  margin:0;
}

/* ---------- 权益矩阵 ---------- */
.page-products .pd-matrix{
  border:2px solid var(--line);
  background:var(--panel);
}

.page-products .pd-matrix .matrix{
  min-width:620px;
  width:100%;
}

.page-products .pd-matrix th[scope="row"]{
  font-weight:500;
  color:var(--text);
}

/* ---------- 版本对照 ---------- */
.page-products .pd-diffgrid{
  margin-bottom:24px;
}

.page-products .pd-diffcard{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 18px;
  border:2px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}

.page-products .pd-diffcard__no{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--orange);
}

.page-products .pd-diffcard__name{
  margin:0;
  font-size:17px;
  line-height:1.35;
}

.page-products .pd-diffcard p{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}

.page-products .pd-scene{
  padding:20px 18px;
  border-left:4px solid var(--orange);
  background:var(--panel);
}

.page-products .pd-scene__title{
  margin:0 0 12px;
  font-size:16px;
}

.page-products .pd-scene__list{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:10px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}

.page-products .pd-scene__list strong{
  color:var(--text);
  font-weight:600;
}

/* ---------- 取用流程 ---------- */
.page-products .pd-flow{
  display:grid;
  gap:18px;
}

.page-products .pd-flow__step{
  padding-top:14px;
  border-top:3px solid var(--cyan);
}

.page-products .pd-flow__no{
  display:block;
  font-size:30px;
  line-height:1;
  color:var(--cyan);
}

.page-products .pd-flow__name{
  margin:10px 0 8px;
  font-size:18px;
}

.page-products .pd-flow__step p{
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}

.page-products .pd-flow__hint{
  font-size:12.5px !important;
  color:var(--orange) !important;
  line-height:1.65 !important;
}

/* ---------- 帮助区 ---------- */
.page-products .pd-help{
  display:grid;
  gap:22px;
  padding:22px 20px;
  border:2px solid var(--line);
  background:linear-gradient(160deg,var(--panel-2),var(--panel) 70%);
  box-shadow:var(--shadow-hard);
}

.page-products .pd-help__text p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
}

.page-products .pd-help__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px !important;
}

.page-products .pd-help__aside{
  padding:16px;
  border:1px dashed var(--line);
  background:var(--bg);
}

.page-products .pd-help__aside-title{
  margin:0 0 12px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--lime);
}

.page-products .pd-help__list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width:768px){
  .page-products{
    --pd-sec-pad:56px;
  }

  .page-products .pd-hero{
    grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);
    gap:36px;
    align-items:end;
    padding-block:40px 56px;
  }

  .page-products .pd-cat-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
    gap:32px;
    align-items:start;
  }

  .page-products .pd-batchblock{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:32px;
    align-items:start;
  }

  .page-products .pd-flow{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
  }

  .page-products .pd-help{
    grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
    gap:28px;
    padding:26px 24px;
  }

  .page-products .pd-steps__cell{
    height:34px;
    font-size:11px;
  }
}

@media (min-width:1024px){
  .page-products .pd-sec__lead{
    font-size:15.5px;
  }

  .page-products .pd-toc{
    gap:10px;
  }
}
<<<END>>>