.page-products{
  --ph-pad:clamp(1rem,4vw,2.5rem);
  --ph-card-pad:clamp(1.1rem,2.4vw,1.6rem);
  --ph-violet-veil:linear-gradient(180deg,rgba(123,44,255,.20),rgba(123,44,255,.04));
}

.page-products .ph-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rock-line);
  padding:1.5rem 0 clamp(2.5rem,6vw,4.5rem);
}
.page-products .ph-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.38;
}
.page-products .ph-hero__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(10,92,255,.36),transparent 58%),
    radial-gradient(90% 70% at 88% 10%,rgba(123,44,255,.28),transparent 62%),
    linear-gradient(180deg,rgba(11,14,19,.62),rgba(11,14,19,.94) 58%,var(--rock-deep));
}
.page-products .ph-hero__inner{
  position:relative;
  z-index:1;
}
.page-products .ph-hero__crumb{
  margin-bottom:clamp(1.5rem,4vw,2.6rem);
}
.page-products .ph-hero__eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 .7rem;
}
.page-products .ph-hero__title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.03;
  color:var(--bone);
  font-size:clamp(2.2rem,8vw,4.4rem);
  margin:0 0 1rem;
  max-width:16ch;
}
.page-products .ph-hero__lede{
  max-width:62ch;
  color:var(--bone);
  opacity:.88;
  margin:0 0 clamp(1.6rem,4vw,2.4rem);
}

.page-products .ph-quick{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}
.page-products .ph-quick__item a{
  display:block;
  position:relative;
  border:1px solid var(--rock-line);
  background:linear-gradient(180deg,rgba(20,25,34,.92),rgba(16,21,29,.82));
  padding:1rem 1rem 1rem 1.15rem;
  text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.page-products .ph-quick__item a::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--blue);
  transition:background-color .18s var(--ease);
}
.page-products .ph-quick__item a:hover,
.page-products .ph-quick__item a:focus-visible{
  border-color:var(--cyan);
  transform:translateY(-2px);
}
.page-products .ph-quick__item a:hover::before,
.page-products .ph-quick__item a:focus-visible::before{
  background:var(--cyan);
}
.page-products .ph-quick__num{
  display:block;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.16em;
  color:var(--mist);
  margin-bottom:.35rem;
}
.page-products .ph-quick__label{
  display:block;
  color:var(--bone);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.4;
}
.page-products .ph-quick__hint{
  display:block;
  margin-top:.35rem;
  font-size:.8125rem;
  color:var(--mist);
  line-height:1.5;
}

.page-products .ph-chapter{
  padding:clamp(2.5rem,6vw,4.5rem) 0;
  border-bottom:1px solid var(--rock-line);
}
.page-products .chapter__lede{
  max-width:64ch;
}
.page-products .chapter__num{
  font-family:var(--font-mono);
}

/* ---- 分类区 ---- */
.page-products .ph-catmap{
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
}
.page-products .cat-grid{
  display:grid;
  gap:1rem;
}
.page-products .cat-card{
  position:relative;
  background:var(--slate-panel);
  border:1px solid var(--rock-line);
  padding:var(--ph-card-pad);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.page-products .cat-card:hover,
.page-products .cat-card:focus-within{
  border-color:var(--cyan);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -22px rgba(0,229,208,.7);
}
.page-products .cat-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.85rem;
}
.page-products .cat-card__idx{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--mist);
}
.page-products .cat-card__count{
  white-space:nowrap;
}
.page-products .cat-card__desc{
  margin:0 0 .85rem;
  color:var(--bone);
  opacity:.9;
  line-height:1.65;
}
.page-products .cat-card__meta{
  margin:0 0 1rem;
  font-size:.8125rem;
  color:var(--mist);
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.page-products .cat-card__fold{
  border-top:1px solid var(--rock-line);
  padding-top:.85rem;
}
.page-products .cat-card__fold .foldable__body ul{
  margin:.6rem 0 0;
  padding-left:1.1rem;
  color:var(--mist);
  line-height:1.7;
  font-size:.9375rem;
}

/* ---- 版本卡片 ---- */
.page-products .ph-version-grid{
  align-items:start;
}
.page-products .ver-card{
  position:relative;
  background:linear-gradient(180deg,var(--slate-panel),var(--slate-deep));
  border:1px solid var(--rock-line);
  padding:var(--ph-card-pad);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.page-products .ver-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:72px;
  height:4px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
}
.page-products .ver-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1rem;
}
.page-products .ver-card__label{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--mist);
  text-transform:uppercase;
}
.page-products .ver-card__code{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(3rem,12vw,4.8rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--bone);
  margin:0 0 .6rem;
}
.page-products .ver-card__sub{
  margin:0 0 .85rem;
  color:var(--mist);
  font-size:.9375rem;
  line-height:1.6;
}
.page-products .ver-card__copyline{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:0 0 1.25rem;
}
.page-products .ver-card__facts{
  margin:0;
  border-top:1px solid var(--rock-line);
}
.page-products .ver-card__fact{
  display:grid;
  gap:.2rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--rock-line);
}
.page-products .ver-card__fact dt{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--cyan);
}
.page-products .ver-card__fact dd{
  margin:0;
  color:var(--bone);
  opacity:.9;
  line-height:1.65;
}
.page-products .ver-card__how{
  margin:1.1rem 0 0;
  font-size:.9375rem;
  color:var(--mist);
  line-height:1.7;
}
.page-products .ver-card__how .tag{
  margin-right:.4rem;
  vertical-align:middle;
}
.page-products .ph-vermap{
  margin:0;
}

/* ---- 导出四步 ---- */
.page-products .ph-steps{
  list-style:none;
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
  padding:0;
  display:grid;
  gap:1rem;
}
.page-products .ph-steps__item{
  position:relative;
  background:var(--slate-panel);
  border:1px solid var(--rock-line);
  border-left:3px solid var(--blue);
  padding:var(--ph-card-pad);
}
.page-products .ph-steps__item--done{
  border-left-color:var(--moss);
}
.page-products .ph-steps__num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.5rem;
  letter-spacing:.06em;
  color:var(--mist);
  margin-bottom:.5rem;
}
.page-products .ph-steps__item--done .ph-steps__num{
  color:var(--moss);
}
.page-products .ph-steps__title{
  font-size:1.0625rem;
  margin:0 0 .5rem;
  color:var(--bone);
  letter-spacing:.01em;
}
.page-products .ph-steps__item p{
  margin:0;
  color:var(--mist);
  line-height:1.7;
  font-size:.9375rem;
}
.page-products .ph-export-media{
  display:grid;
  gap:1rem;
}
.page-products .ph-export-media .media-frame{
  margin:0;
}

/* ---- 格式对照 ---- */
.page-products .fmt-switch{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.25rem;
}
.page-products .fmt-switch__chip{
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.12em;
  padding:.5rem .95rem;
  border:1px solid var(--rock-line);
  color:var(--bone);
  text-decoration:none;
  background:linear-gradient(180deg,rgba(123,44,255,.16),rgba(123,44,255,.02));
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.page-products .fmt-switch__chip:hover,
.page-products .fmt-switch__chip:focus-visible{
  border-color:var(--cyan);
  color:var(--cyan);
}
.page-products .fmt-grid{
  display:grid;
  gap:1rem;
}
.page-products .fmt-card{
  background:var(--slate-panel);
  border:1px solid var(--rock-line);
  padding:0 0 var(--ph-card-pad);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.page-products .fmt-card:target{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(0,229,208,.45);
}
.page-products .fmt-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;
  padding:.85rem var(--ph-card-pad);
  background:var(--ph-violet-veil);
  border-bottom:1px solid var(--rock-line);
  margin-bottom:.4rem;
}
.page-products .fmt-card__name{
  font-family:var(--font-mono);
  font-size:1.25rem;
  letter-spacing:.06em;
  margin:0;
  color:var(--bone);
}
.page-products .fmt-card__rows{
  margin:0;
}
.page-products .fmt-card__row{
  padding:.85rem var(--ph-card-pad) .85rem;
  border-bottom:1px solid var(--rock-line);
}
.page-products .fmt-card__row:last-child{
  border-bottom:0;
}
.page-products .fmt-card__row dt{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--mist);
  margin-bottom:.3rem;
}
.page-products .fmt-card__row dd{
  margin:0;
  color:var(--bone);
  opacity:.92;
  line-height:1.65;
}
.page-products .fmt-note{
  margin:1.1rem 0 0;
  color:var(--mist);
  font-size:.9375rem;
  line-height:1.7;
}

/* ---- 订阅 ---- */
.page-products .ph-sub-grid{
  align-items:start;
}
.page-products .ph-sub-text p{
  color:var(--bone);
  opacity:.9;
}
.page-products .ph-sub-mail{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.page-products .ph-sub-note{
  font-size:.9375rem;
  color:var(--mist);
}
.page-products .sub-panel{
  background:var(--slate-deep);
  border:1px solid var(--rock-line);
  padding:var(--ph-card-pad);
}
.page-products .sub-panel__title{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--cyan);
  text-transform:uppercase;
  margin:0 0 .9rem;
}
.page-products .sub-panel__list{
  list-style:none;
  margin:0 0 .9rem;
  padding:0;
  display:grid;
  gap:.75rem;
}
.page-products .sub-panel__list li{
  padding-left:.9rem;
  border-left:2px solid var(--rock-line);
  color:var(--mist);
  font-size:.9375rem;
  line-height:1.6;
}
.page-products .sub-panel__key{
  display:block;
  color:var(--bone);
  font-weight:700;
}
.page-products .sub-panel__foot{
  margin:0;
  padding-top:.85rem;
  border-top:1px solid var(--rock-line);
  font-size:.8125rem;
  color:var(--mist);
  line-height:1.6;
}

/* ---- 问题处理 ---- */
.page-products .ph-faqs{
  display:grid;
  gap:.75rem;
}
.page-products .ph-faqs .foldable{
  border:1px solid var(--rock-line);
  background:var(--slate-panel);
  padding:0 var(--ph-card-pad);
  transition:border-color .18s var(--ease);
}
.page-products .ph-faqs .foldable[open]{
  border-color:var(--cyan);
}
.page-products .ph-faqs .foldable__trigger{
  cursor:pointer;
  padding:.95rem 0;
  color:var(--bone);
  font-weight:700;
  line-height:1.5;
}
.page-products .ph-faqs .foldable__body{
  padding:0 0 1rem;
}
.page-products .ph-faqs .foldable__body p{
  margin:0;
  color:var(--mist);
  line-height:1.7;
  font-size:.9375rem;
}

.page-products .ph-closing{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  border-top:1px solid var(--rock-line);
  padding-top:1.5rem;
}
.page-products .ph-closing__text{
  margin:0 0 1.25rem;
  color:var(--bone);
  opacity:.9;
  line-height:1.7;
  max-width:66ch;
}
.page-products .ph-closing__links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0;
}

@media (min-width:640px){
  .page-products .ph-quick{
    grid-template-columns:repeat(3,1fr);
  }
  .page-products .ph-export-media{
    grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);
    align-items:start;
  }
}

@media (min-width:900px){
  .page-products .ph-hero{
    padding-top:2.25rem;
  }
  .page-products .cat-grid{
    grid-template-columns:repeat(12,1fr);
    gap:1.25rem;
  }
  .page-products .cat-card:nth-child(1){grid-column:span 5;}
  .page-products .cat-card:nth-child(2){grid-column:span 4;margin-top:2rem;}
  .page-products .cat-card:nth-child(3){grid-column:span 3;}
  .page-products .cat-card:nth-child(4){grid-column:span 4;}
  .page-products .cat-card:nth-child(5){grid-column:span 5;margin-top:2rem;}
  .page-products .cat-card:nth-child(6){grid-column:span 3;}

  .page-products .ph-version-grid{
    gap:2rem;
  }
  .page-products .ph-steps{
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
  }
  .page-products .ph-steps__item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:3.1rem;
    right:-1.15rem;
    width:1.05rem;
    border-top:2px dashed var(--rock-line);
  }
  .page-products .fmt-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
  }
}