.page-products{
  background:var(--deep);
  color:var(--ink);
}

.page-products .section{
  padding-block:clamp(2.25rem,6vw,4.25rem);
}

/* ---------- 面包屑下的首屏 ---------- */
.page-products .pd-hero{
  padding-top:clamp(1rem,2.5vw,1.75rem);
  padding-bottom:clamp(2.25rem,5vw,4rem);
  background-image:
    linear-gradient(to right,rgba(47,227,214,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(47,227,214,.055) 1px,transparent 1px);
  background-size:72px 72px;
}
.page-products .pd-hero__inner{
  display:grid;
  gap:clamp(1.5rem,4vw,2.5rem);
  align-items:center;
}
.page-products .pd-hero__copy h1{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.005em;
  color:var(--ink);
}
.page-products .pd-hero__copy .lead{
  margin:1.05rem 0 0;
  color:var(--mist);
  max-width:44ch;
}
.page-products .pd-hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.3rem 0 0;
  padding:0;
  list-style:none;
}
.page-products .pd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.7rem;
}
.page-products .pd-hero__figure{
  margin:0;
}
.page-products .pd-hero__figure .media,
.page-products .pd-access__figure .media,
.page-products .pd-tablet__figure .media,
.page-products .pd-versions__figure .media,
.page-products .pd-start__figure .media{
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--shadow-float);
  margin:0;
}
.page-products .media__img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 通用区块标题 ---------- */
.page-products .pd-head{
  max-width:62ch;
}
.page-products .pd-head h2{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-size:var(--fs-500);
  font-weight:700;
  line-height:1.26;
  letter-spacing:.005em;
  color:var(--ink);
}
.page-products .pd-head__text{
  margin:.9rem 0 0;
  color:var(--mist);
  font-size:var(--fs-300);
  line-height:1.78;
}

/* ---------- 三种打开方式 ---------- */
.page-products .pd-access__grid{
  display:grid;
  margin-top:clamp(1.75rem,4vw,2.75rem);
  border-top:1px solid var(--line);
}
.page-products .pd-lane{
  padding:1.4rem 0 1.6rem;
  border-bottom:1px solid var(--line);
}
.page-products .pd-lane__num{
  margin:0;
  font-size:var(--fs-400);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--cyan);
}
.page-products .pd-lane__title{
  margin:.45rem 0 0;
  font-size:var(--fs-400);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.page-products .pd-lane__text{
  margin:.7rem 0 0;
  color:var(--mist);
  font-size:var(--fs-200);
  line-height:1.75;
}
.page-products .pd-lane__list{
  margin:.95rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.45rem;
}
.page-products .pd-lane__list li{
  position:relative;
  padding-left:1.1rem;
  color:var(--ink);
  font-size:var(--fs-200);
  line-height:1.65;
}
.page-products .pd-lane__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:2px;
  background:var(--cyan);
  opacity:.8;
}
.page-products .pd-access__figure{
  margin:clamp(1.5rem,4vw,2.5rem) 0 0;
}
.page-products .pd-figcap{
  margin-top:.8rem;
  color:var(--mist);
  font-size:var(--fs-100);
  line-height:1.7;
}

/* ---------- 五个内容域折叠组 ---------- */
.page-products .pd-domains{
  background:var(--zone-indigo);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.page-products .pd-folds{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  border-top:1px solid var(--line);
}
.page-products .pd-fold{
  border-bottom:1px solid var(--line);
}
.page-products .pd-fold .fold__summary{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.7rem;
  padding:1.05rem 0;
  cursor:pointer;
  font-size:var(--fs-400);
  font-weight:600;
  color:var(--ink);
  list-style:none;
  transition:color var(--t-fast) var(--ease);
}
.page-products .pd-fold .fold__summary::-webkit-details-marker{
  display:none;
}
.page-products .pd-fold .fold__summary:hover{
  color:var(--cyan-soft);
}
.page-products .pd-fold__idx{
  font-size:var(--fs-100);
  letter-spacing:.1em;
  color:var(--cyan);
}
.page-products .pd-fold .fold__body{
  padding:0 0 1.35rem;
  color:var(--mist);
  font-size:var(--fs-200);
  line-height:1.8;
}
.page-products .pd-fold .fold__body p{
  margin:0 0 .65rem;
  max-width:74ch;
}
.page-products .pd-fold .pd-fold__meta{
  color:var(--cyan-soft);
  font-size:var(--fs-100);
  letter-spacing:.02em;
}
.page-products .pd-fold .pd-fold__more{
  margin:.55rem 0 0;
}
.page-products .pd-fold .pd-fold__more a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:.25em;
}

/* ---------- 平板适配 ---------- */
.page-products .pd-tablet{
  background:var(--zone-teal);
  border-bottom:1px solid var(--line);
}
.page-products .pd-tablet__inner{
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
  align-items:center;
}
.page-products .pd-tablet__copy h2{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-size:var(--fs-500);
  font-weight:700;
  line-height:1.26;
  color:var(--ink);
}
.page-products .pd-tablet__lead{
  margin:.9rem 0 0;
  color:var(--mist);
  font-size:var(--fs-300);
  line-height:1.78;
}
.page-products .pd-scale{
  margin-top:1.8rem;
  padding:1rem 0 0;
}
.page-products .pd-scale__track{
  position:relative;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--cyan-10);
  overflow:hidden;
}
.page-products .pd-scale__fill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan-16),var(--cyan));
}
.page-products .pd-scale__ticks{
  display:flex;
  justify-content:space-between;
  margin:.6rem 0 0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  color:var(--mist);
}
.page-products .pd-specs{
  margin:1.6rem 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.page-products .pd-spec{
  display:grid;
  gap:.3rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
}
.page-products .pd-spec__key{
  color:var(--cyan-soft);
  font-size:var(--fs-100);
  letter-spacing:.1em;
}
.page-products .pd-spec__val{
  color:var(--ink);
  font-size:var(--fs-200);
  line-height:1.7;
}
.page-products .pd-tablet__figure{
  margin:0;
}

/* ---------- 版本对照表 ---------- */
.page-products .pd-versions{
  background:var(--deep-2);
}
.page-products .pd-table-wrap{
  margin-top:clamp(1.5rem,4vw,2.25rem);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:rgba(5,18,31,.5);
}
.page-products .pd-table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:var(--fs-200);
}
.page-products .pd-table__caption{
  padding:.85rem 1.1rem;
  text-align:left;
  font-size:var(--fs-100);
  color:var(--mist);
  letter-spacing:.06em;
  border-bottom:1px solid var(--line);
}
.page-products .pd-table th,
.page-products .pd-table td{
  padding:.95rem 1.1rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  line-height:1.65;
}
.page-products .pd-table thead th{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--mist);
  background:var(--cyan-08);
  white-space:nowrap;
}
.page-products .pd-table tbody th{
  font-family:var(--font-mono);
  font-size:var(--fs-300);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--cyan);
  white-space:nowrap;
}
.page-products .pd-table tbody tr{
  transition:background var(--t-fast) var(--ease);
}
.page-products .pd-table tbody tr:hover{
  background:var(--cyan-08);
}
.page-products .pd-table tbody tr:hover .tag{
  border-color:var(--cyan-24);
  color:var(--cyan-soft);
}
.page-products .pd-table tbody tr:last-child th,
.page-products .pd-table tbody tr:last-child td{
  border-bottom:0;
}
.page-products .pd-table__tag{
  display:inline-block;
  margin-left:.45rem;
  vertical-align:middle;
  font-size:var(--fs-100);
}
.page-products .pd-versions__figure{
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
}
.page-products .pd-note{
  margin:1.1rem 0 0;
  color:var(--mist);
  font-size:var(--fs-200);
  line-height:1.75;
}
.page-products .pd-note a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:.25em;
}

/* ---------- 设备与网络 ---------- */
.page-products .pd-req{
  margin-top:clamp(1.5rem,4vw,2.25rem);
  border-top:1px solid var(--line);
}
.page-products .pd-req__row{
  display:grid;
  gap:.35rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--line);
}
.page-products .pd-req__key{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--cyan-soft);
}
.page-products .pd-req__val{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-300);
  line-height:1.75;
}

/* ---------- 三步流程 ---------- */
.page-products .pd-steps{
  margin:clamp(1.75rem,4vw,2.75rem) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1.5rem;
}
.page-products .pd-step{
  position:relative;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.page-products .pd-step::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:2.75rem;
  height:2px;
  background:var(--lava);
}
.page-products .pd-step__num{
  display:block;
  font-size:var(--fs-num);
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  color:var(--cyan);
  opacity:.55;
  transition:opacity var(--t-mid) var(--ease);
}
.page-products .pd-step:hover .pd-step__num{
  opacity:1;
}
.page-products .pd-step__title{
  margin:.55rem 0 0;
  font-size:var(--fs-400);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.page-products .pd-step__text{
  margin:.6rem 0 0;
  color:var(--mist);
  font-size:var(--fs-200);
  line-height:1.75;
}
.page-products .pd-start__figure{
  margin:clamp(1.75rem,4vw,2.5rem) auto 0;
  max-width:22rem;
}

/* ---------- 收尾指引 ---------- */
.page-products .pd-help{
  border-top:1px solid var(--line);
  background:var(--deep-2);
}
.page-products .pd-help__inner{
  display:grid;
  gap:1.5rem;
  align-items:center;
}
.page-products .pd-help__copy h2{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-size:var(--fs-500);
  font-weight:700;
  line-height:1.26;
  color:var(--ink);
}
.page-products .pd-help__copy p{
  margin:.85rem 0 0;
  max-width:58ch;
  color:var(--mist);
  font-size:var(--fs-300);
  line-height:1.78;
}
.page-products .pd-help__links{
  display:grid;
  gap:.7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-products .pd-spec{
    grid-template-columns:8.5rem minmax(0,1fr);
    gap:1rem;
    align-items:baseline;
  }
  .page-products .pd-help__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:760px){
  .page-products .pd-req__row{
    grid-template-columns:11rem minmax(0,1fr);
    gap:1.5rem;
    align-items:baseline;
  }
}

@media (min-width:860px){
  .page-products .pd-access__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pd-lane{
    padding:1.7rem clamp(1rem,2.4vw,1.75rem) 1.9rem;
    border-bottom:0;
  }
  .page-products .pd-lane + .pd-lane{
    border-left:1px solid var(--line);
  }
  .page-products .pd-lane:first-child{
    padding-left:0;
  }
  .page-products .pd-lane:last-child{
    padding-right:0;
  }
  .page-products .pd-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.5rem,3vw,2.5rem);
  }
  .page-products .pd-start__figure{
    max-width:26rem;
  }
}

@media (min-width:920px){
  .page-products .pd-hero__inner{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-products .pd-tablet__inner{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-products .pd-help__inner{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(2rem,4vw,3.5rem);
  }
  .page-products .pd-help__links{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .pd-table tbody tr,
  .page-products .pd-step__num,
  .page-products .pd-fold .fold__summary{
    transition-duration:.01ms;
  }
}
<<<END>>>