.page-products{
  --pr-edge:1px solid var(--line-soft);
  --pr-gap:clamp(16px,3vw,28px);
  display:block;
  background:var(--ink);
  color:var(--text);
  padding-bottom:clamp(40px,7vw,88px);
}

.page-products > *{
  box-sizing:border-box;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.page-products a:focus-visible,
.page-products summary:focus-visible,
.page-products label:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* 面包屑 */
.page-products .breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:clamp(16px,3vw,28px);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-products .breadcrumbs a{
  color:var(--cool);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.page-products .breadcrumbs a:hover{
  color:var(--accent);
  border-color:var(--accent-dim);
}
.page-products .breadcrumbs__sep{ color:var(--line); }

/* 首屏 */
.page-products .pr-hero{
  display:grid;
  gap:clamp(24px,4vw,44px);
  padding-block:clamp(28px,5vw,56px) clamp(32px,5vw,64px);
  border-bottom:1px solid var(--line-soft);
}
.page-products .pr-hero h1{
  margin:.16em 0 .38em;
  font-size:clamp(32px,5.6vw,68px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:900;
  text-wrap:balance;
}
.page-products .lede{
  max-width:48ch;
  margin:0;
  color:var(--muted);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.8;
}
.page-products .pr-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,3vw,30px);
}
.page-products .pr-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:clamp(20px,3vw,28px) 0 0;
  padding:0;
  list-style:none;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.page-products .pr-hero__facts li{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding-right:22px;
  border-right:1px solid var(--line-soft);
}
.page-products .pr-hero__facts li:last-child{ border-right:0; padding-right:0; }
.page-products .pr-hero__facts span{
  color:var(--accent);
  font-weight:700;
  font-size:14px;
}

.page-products .pr-hero__visual{
  position:relative;
  padding:clamp(14px,3vw,26px);
  border:var(--pr-edge);
  background-color:var(--panel);
  background-image:
    repeating-linear-gradient(90deg,rgba(43,87,72,.34) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(0deg,rgba(43,87,72,.24) 0 1px,transparent 1px 28px);
  overflow:hidden;
}
.page-products .pr-hero__visual::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:.55;
}
.page-products .pr-phone{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  margin-inline:auto;
}

/* 章节骨架 */
.page-products .pr-section{
  padding-block:clamp(36px,6vw,72px);
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.page-products .pr-section--last{ border-bottom:0; }

.page-products .pr-head{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px,2vw,22px);
  margin-bottom:clamp(22px,4vw,40px);
}
.page-products .pr-head__num{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:clamp(26px,4vw,46px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:rgba(184,255,63,.42);
}
.page-products .pr-head__text{ display:grid; gap:12px; }
.page-products .pr-head h2{
  margin:0;
  max-width:26ch;
  font-size:clamp(23px,3.4vw,36px);
  line-height:1.14;
  letter-spacing:-.03em;
  font-weight:800;
  text-wrap:balance;
}
.page-products .pr-head p{
  margin:0;
  max-width:64ch;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

/* 版本矩阵 */
.page-products .pr-matrix{
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:var(--pr-edge);
}
.page-products .pr-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(20px,3vw,30px);
  background:var(--panel);
  transition:background-color .2s ease;
}
.page-products .pr-card:hover{ background:var(--panel-2); }
.page-products .pr-card__tag{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.page-products .pr-card--signal .pr-card__tag{ color:var(--signal); }
.page-products .pr-card h3{
  margin:0;
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:700;
}
.page-products .pr-card__desc{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.page-products .pr-card__list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13px;
  line-height:1.65;
  color:var(--cool);
}
.page-products .pr-card__list li{
  position:relative;
  padding-left:16px;
}
.page-products .pr-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:1px;
  background:var(--line);
}
.page-products .pr-card__link{
  margin-top:auto;
  align-self:flex-start;
  padding-bottom:3px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  transition:color .18s ease,border-color .18s ease;
}
.page-products .pr-card__link:hover{
  color:var(--text);
  border-color:var(--text);
}

/* 图片容器 */
.page-products .pr-figure{
  margin:0 0 clamp(20px,3vw,32px);
  padding:8px;
  border:var(--pr-edge);
  background:var(--panel);
}
.page-products .pr-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:1px solid rgba(43,87,72,.5);
}
.page-products .pr-figure figcaption{
  padding:9px 4px 2px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* 版本对照 */
.page-products .pr-compare{ display:grid; gap:clamp(20px,3vw,32px); }

.page-products .cmp{ position:relative; }
.page-products .cmp__radio{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.page-products .cmp__radio:focus-visible ~ .cmp__tabs{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.page-products .cmp__tabs{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:16px;
  border:var(--pr-edge);
}
.page-products .cmp__tab{
  flex:1 1 auto;
  padding:12px 14px;
  text-align:center;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  border-right:1px solid var(--line-soft);
  transition:color .18s ease,background-color .18s ease;
}
.page-products .cmp__tab:last-child{ border-right:0; }
.page-products .cmp__tab:hover{ color:var(--text); background:var(--panel-2); }
.page-products #cmp-view-1:checked ~ .cmp__tabs .cmp__tab:nth-child(1),
.page-products #cmp-view-2:checked ~ .cmp__tabs .cmp__tab:nth-child(2){
  color:var(--ink);
  background:var(--accent);
}
.page-products .cmp__panel{ display:none; }
.page-products #cmp-view-1:checked ~ .cmp__panels .cmp__panel--1,
.page-products #cmp-view-2:checked ~ .cmp__panels .cmp__panel--2{
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:var(--pr-edge);
}
.page-products .cmp__col{
  padding:clamp(16px,2.5vw,26px);
  background:var(--panel);
}
.page-products .cmp__col h3{
  margin:0;
  font-size:clamp(16px,2vw,19px);
  font-weight:700;
  letter-spacing:-.01em;
}
.page-products .cmp__sub{
  margin:4px 0 12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--signal);
}
.page-products .cmp__rows{ margin:0; display:grid; }
.page-products .cmp__row{
  padding:12px 0;
  border-top:1px dashed rgba(43,87,72,.75);
}
.page-products .cmp__row dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cool);
}
.page-products .cmp__row dd{
  margin:5px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--text);
}

/* 联赛赛道 */
.page-products .pr-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.page-products .pr-track::-webkit-scrollbar{ height:6px; }
.page-products .pr-track::-webkit-scrollbar-track{ background:rgba(43,87,72,.25); }
.page-products .pr-track::-webkit-scrollbar-thumb{ background:var(--line); }
.page-products .pr-lane{
  flex:0 0 auto;
  min-width:148px;
  display:grid;
  gap:6px;
  padding:14px 16px;
  scroll-snap-align:start;
  border:var(--pr-edge);
  background:var(--panel);
  transition:border-color .18s ease,transform .18s ease;
}
.page-products .pr-lane:hover{
  border-color:var(--accent-dim);
  transform:translateY(-2px);
}
.page-products .pr-lane__name{
  font-size:15px;
  font-weight:700;
  line-height:1.3;
}
.page-products .pr-lane__state{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-products .pr-lane--focus{
  border-color:rgba(255,107,44,.5);
  background:linear-gradient(180deg,rgba(18,53,42,.95),rgba(13,34,27,.95));
}
.page-products .pr-lane--focus .pr-lane__state{ color:var(--signal); }

/* 战报区 */
.page-products .pr-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(18px,3vw,28px);
}
.page-products .pr-chip{
  padding:5px 10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cool);
  background:rgba(143,174,191,.07);
  border:1px solid var(--line-soft);
}
.page-products .pr-chip--accent{
  color:var(--accent);
  border-color:var(--accent-dim);
  background:rgba(184,255,63,.07);
}
.page-products .pr-chip--signal{
  color:var(--signal);
  border-color:rgba(255,107,44,.42);
  background:rgba(255,107,44,.08);
}

.page-products .pr-reports{
  display:grid;
  gap:14px;
  padding-bottom:24px;
}
.page-products .pr-report{
  display:grid;
  gap:10px;
  padding:clamp(16px,2.5vw,24px);
  border:var(--pr-edge);
  background:var(--panel);
  transition:border-color .2s ease,background-color .2s ease;
}
.page-products .pr-report:hover{
  border-color:var(--accent-dim);
  background:var(--panel-2);
}
.page-products .pr-report__meta{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cool);
}
.page-products .pr-report h3{
  margin:0;
  font-size:clamp(16px,2vw,19px);
  line-height:1.45;
  font-weight:700;
}
.page-products .pr-report p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-products .pr-report__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--accent);
}
.page-products .pr-report__tags span{
  padding-left:12px;
  position:relative;
}
.page-products .pr-report__tags span::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:5px;
  height:1px;
  background:var(--line);
}

/* 下载流程 */
.page-products .pr-steps{
  display:grid;
  gap:1px;
  margin:0 0 clamp(20px,3vw,32px);
  padding:0;
  list-style:none;
  background:var(--line-soft);
  border:var(--pr-edge);
}
.page-products .pr-step{
  display:grid;
  gap:10px;
  padding:clamp(18px,3vw,28px);
  background:var(--ink);
}
.page-products .pr-step__num{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
}
.page-products .pr-step__num::after{
  content:"";
  flex:0 0 26px;
  height:1px;
  background:var(--accent-dim);
}
.page-products .pr-step h3{
  margin:0;
  font-size:clamp(16px,2vw,19px);
  line-height:1.35;
  font-weight:700;
}
.page-products .pr-step p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}

/* 问题出口 */
.page-products .pr-faq{
  display:grid;
  border-top:1px solid var(--line-soft);
}
.page-products .pr-faq__item{ border-bottom:1px solid var(--line-soft); }
.page-products .pr-faq__summary{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  font-size:clamp(15px,1.8vw,17px);
  font-weight:600;
  line-height:1.55;
  color:var(--text);
  transition:color .18s ease;
}
.page-products .pr-faq__summary::-webkit-details-marker{ display:none; }
.page-products .pr-faq__summary::marker{ content:""; }
.page-products .pr-faq__summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--mono);
  font-size:16px;
  line-height:1;
  color:var(--accent);
}
.page-products .pr-faq__item[open] .pr-faq__summary{ color:var(--accent); }
.page-products .pr-faq__item[open] .pr-faq__summary::after{ content:"–"; }
.page-products .pr-faq__summary:hover{ color:var(--accent); }
.page-products .pr-faq__body{
  display:grid;
  gap:10px;
  max-width:62ch;
  padding:0 0 18px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.page-products .pr-faq__body p{ margin:0; }
.page-products .pr-inline-link{
  justify-self:start;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--cool);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.page-products .pr-inline-link:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* 断点 */
@media (min-width:720px){
  .page-products .pr-reports{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-products .pr-report:nth-child(even){ transform:translateY(24px); }
  .page-products .pr-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

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

@media (min-width:900px){
  .page-products .pr-hero{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:center;
  }
}

@media (min-width:960px){
  .page-products .pr-compare{
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    align-items:start;
  }
  .page-products .pr-compare .pr-figure{ position:sticky; top:calc(var(--header-h) + 24px); margin-bottom:0; }
  .page-products .cmp__panel--1,
  .page-products .cmp__panel--2{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1100px){
  .page-products .pr-figure--wide{ margin-bottom:clamp(24px,3vw,38px); }
}
<<<END>>>