.page-products{
  --pl-line:1px solid var(--steel);
  --pl-block-gap:calc(var(--unit) * 5);
  color:var(--fog);
}

.page-products .breadcrumb{padding:calc(var(--unit) * 3) 0 0;}

.page-products .pl-hero{
  display:grid;
  gap:calc(var(--unit) * 4);
  padding:calc(var(--unit) * 4) 0 calc(var(--unit) * 6);
}

.page-products .pl-hero__title{
  font-family:var(--font-display);
  font-size:clamp(2rem,7.4vw,4.2rem);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:calc(var(--unit) * 2) 0 calc(var(--unit) * 3);
  transform:skewX(-4deg);
  transform-origin:left bottom;
}

.page-products .pl-hero__title span{color:var(--cyan);}

.page-products .pl-hero__lead{
  margin:0;
  max-width:58ch;
  color:var(--ash);
  font-size:1.0625rem;
  line-height:1.8;
}

.page-products .pl-hero__aside{
  display:grid;
  gap:calc(var(--unit) * 1.5);
  align-content:start;
  justify-items:start;
  padding-left:calc(var(--unit) * 2.5);
  border-left:3px solid var(--orange);
}

.page-products .pl-hero__ver{
  margin:0;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--fog);
}

.page-products .pl-hero__aside-note{
  margin:0;
  font-size:.85rem;
  line-height:1.65;
  color:var(--smoke);
}

.page-products .pl-strip{
  display:flex;
  gap:calc(var(--unit) * 4);
  overflow-x:auto;
  padding:calc(var(--unit) * 3) 0;
  border-top:var(--pl-line);
  border-bottom:var(--pl-line);
  background:var(--night);
}

.page-products .pl-strip .data-strip__item{
  flex:0 0 auto;
  display:grid;
  gap:calc(var(--unit) * .5);
  color:var(--smoke);
  font-size:.78rem;
  letter-spacing:.04em;
}

.page-products .pl-strip .data-strip__value{
  font-family:var(--font-mono);
  font-size:1.3rem;
  font-weight:600;
  color:var(--cyan);
  letter-spacing:0;
}

.page-products .pl-strip--tight{background:var(--card);}

.page-products .pl-section{
  padding:calc(var(--unit) * 6) 0;
  border-bottom:var(--pl-line);
}

.page-products .pl-section--quiet{background:var(--night);}

.page-products .pl-section--last{border-bottom:0;}

.page-products .pl-section__head{margin-bottom:calc(var(--unit) * 4);}

.page-products .pl-section__num{
  display:block;
  margin-bottom:calc(var(--unit) * 1.5);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.34em;
  color:var(--cyan);
}

.page-products .pl-section__title{
  margin:0 0 calc(var(--unit) * 2);
  font-family:var(--font-display);
  font-size:clamp(1.45rem,4.6vw,2.3rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.01em;
}

.page-products .pl-section__sub{
  margin:0;
  max-width:64ch;
  color:var(--ash);
  line-height:1.8;
}

.page-products .pl-body{
  margin:0 0 calc(var(--unit) * 2);
  color:var(--ash);
  line-height:1.8;
  max-width:62ch;
}

.page-products .pl-note{
  margin:calc(var(--unit) * 3) 0 0;
  padding-left:calc(var(--unit) * 2);
  border-left:2px solid var(--orange);
  font-size:.86rem;
  line-height:1.7;
  color:var(--smoke);
}

/* 对比表 */
.page-products .pl-table-wrap{
  overflow-x:auto;
  border:var(--pl-line);
  background:var(--deep);
}

.page-products .pl-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:.92rem;
}

.page-products .pl-table__caption{
  caption-side:top;
  padding:calc(var(--unit) * 2) calc(var(--unit) * 2);
  text-align:left;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--smoke);
  border-bottom:var(--pl-line);
}

.page-products .pl-table thead th{
  background:var(--cyan);
  color:var(--deep);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.08em;
  text-align:left;
  padding:calc(var(--unit) * 1.75) calc(var(--unit) * 2);
  border-right:1px solid rgba(7,11,18,.18);
}

.page-products .pl-table thead th:last-child{border-right:0;}

.page-products .pl-table tbody th,
.page-products .pl-table tbody td{
  padding:calc(var(--unit) * 2.5) calc(var(--unit) * 2);
  border-top:var(--pl-line);
  border-right:1px solid var(--steel);
  vertical-align:top;
  text-align:left;
  line-height:1.7;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}

.page-products .pl-table tbody th:last-child,
.page-products .pl-table tbody td:last-child{border-right:0;}

.page-products .pl-table tbody th{
  color:var(--fog);
  font-weight:700;
  white-space:nowrap;
}

.page-products .pl-table tbody th .mono{color:var(--orange);margin-right:.4em;}

.page-products .pl-table tbody td{color:var(--ash);}

.page-products .pl-table tbody tr:hover th,
.page-products .pl-table tbody tr:hover td{
  background:var(--card);
  color:var(--fog);
}

/* 安卓端深读 */
.page-products .pl-android{
  display:grid;
  gap:var(--pl-block-gap);
  margin-top:calc(var(--unit) * 4);
}

.page-products .pl-block{margin-bottom:calc(var(--unit) * 4);}
.page-products .pl-block:last-child{margin-bottom:0;}

.page-products .pl-block__title{
  margin:0 0 calc(var(--unit) * 2);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--fog);
}

.page-products .pl-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:calc(var(--unit) * 1.5);
}

.page-products .pl-bullets li{
  padding:calc(var(--unit) * 1.5) 0 calc(var(--unit) * 1.5) calc(var(--unit) * 2);
  border-left:1px solid var(--steel);
  color:var(--ash);
  line-height:1.7;
  font-size:.94rem;
}

.page-products .pl-bullets .mono{
  color:var(--cyan);
  margin-right:.5em;
  font-size:.8rem;
  letter-spacing:.1em;
}

.page-products .pl-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:calc(var(--unit) * 1.5);
}

.page-products .pl-steps li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:calc(var(--unit) * 2);
  padding-top:calc(var(--unit) * 1.5);
  border-top:var(--pl-line);
  color:var(--ash);
  line-height:1.7;
  font-size:.94rem;
}

.page-products .pl-steps .n{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--orange);
  letter-spacing:.1em;
}

.page-products .pl-steps .mono{color:var(--fog);}

.page-products .figure__frame{
  border:var(--pl-line);
  background:var(--card);
  overflow:hidden;
}

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

.page-products .figure__caption{
  margin-top:calc(var(--unit) * 1.5);
  font-size:.78rem;
  line-height:1.6;
  color:var(--smoke);
}

/* 稳定版通道窄栏 */
.page-products .pl-narrow{
  max-width:680px;
  margin:0 auto;
}

.page-products .pl-narrow .pl-section__head{text-align:left;}

.page-products .pl-stable__figure{margin:calc(var(--unit) * 4) 0 0;}

.page-products .pl-details{
  margin-top:calc(var(--unit) * 5);
  border-top:var(--pl-line);
  border-bottom:var(--pl-line);
}

.page-products .pl-details summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:calc(var(--unit) * 2);
  padding:calc(var(--unit) * 2.5) 0;
  font-weight:700;
  font-size:.95rem;
  color:var(--fog);
  cursor:pointer;
  list-style:none;
}

.page-products .pl-details summary::-webkit-details-marker{display:none;}

.page-products .pl-details summary::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--cyan);
  font-size:1.1rem;
}

.page-products .pl-details[open] summary::after{content:"−";}

.page-products .pl-details[open] summary{
  border-left:3px solid var(--cyan);
  padding-left:calc(var(--unit) * 2);
}

.page-products .pl-details__body{padding-bottom:calc(var(--unit) * 3);}

.page-products .pl-compare{
  display:grid;
  gap:calc(var(--unit) * 3);
  margin-top:calc(var(--unit) * 2);
}

.page-products .pl-compare__col p{
  margin:calc(var(--unit) * .75) 0 0;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ash);
}

.page-products .pl-compare__label{
  margin:0;
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--orange);
  padding-bottom:calc(var(--unit));
  border-bottom:1px solid var(--steel);
}

/* 关注列表与追比分 */
.page-products .pl-follow{
  display:grid;
  gap:calc(var(--unit) * 4);
  margin-bottom:var(--pl-block-gap);
}

.page-products .pl-matrix{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--steel);
  border:var(--pl-line);
}

.page-products .pl-matrix__cell{
  position:relative;
  background:var(--deep);
  padding:calc(var(--unit) * 2.5) calc(var(--unit) * 2);
  transition:background var(--dur) var(--ease),transform var(--scan) var(--ease);
}

.page-products .pl-matrix__cell::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--scan) var(--ease);
}

.page-products .pl-matrix__cell:hover,
.page-products .pl-matrix__cell:focus-within{background:var(--card);}

.page-products .pl-matrix__cell:hover::after,
.page-products .pl-matrix__cell:focus-within::after{transform:scaleX(1);}

.page-products .pl-matrix__n{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--smoke);
  transition:color var(--dur) var(--ease);
}

.page-products .pl-matrix__cell:hover .pl-matrix__n{color:var(--cyan);}

.page-products .pl-matrix__name{
  margin:calc(var(--unit) * 1) 0 calc(var(--unit) * .75);
  font-weight:700;
  font-size:.98rem;
  color:var(--fog);
}

.page-products .pl-matrix__desc{
  margin:0;
  font-size:.83rem;
  line-height:1.65;
  color:var(--ash);
}

.page-products .pl-score{
  display:grid;
  gap:calc(var(--unit) * 4);
  margin-top:var(--pl-block-gap);
  padding-top:calc(var(--unit) * 4);
  border-top:var(--pl-line);
}

.page-products .pl-score__figure{margin:0;}

/* 覆盖与时效 */
.page-products .pl-cover{
  display:grid;
  gap:calc(var(--unit) * 4);
  margin-top:calc(var(--unit) * 5);
}

/* 版本轨 */
.page-products .pl-version__texture{margin:0 0 calc(var(--unit) * 4);}

.page-products .pl-track{
  border-top:1px solid var(--steel);
  overflow-x:auto;
  scrollbar-color:var(--cyan) var(--deep);
}

.page-products .pl-track:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.page-products .pl-track__rail{
  display:flex;
  gap:calc(var(--unit) * 3);
  margin:0;
  padding:calc(var(--unit) * 4) 0 calc(var(--unit) * 5);
  list-style:none;
  scroll-snap-type:x mandatory;
}

.page-products .pl-track__node{
  flex:0 0 82%;
  scroll-snap-align:start;
  padding:0 0 0 calc(var(--unit) * 2.5);
  border-left:2px solid var(--steel);
  transition:border-color var(--dur) var(--ease);
}

.page-products .pl-track__node:hover{border-color:var(--cyan);}

.page-products .pl-track__node--now{border-color:var(--orange);}

.page-products .pl-track__ver{
  margin:0 0 calc(var(--unit) * 1.5);
  font-family:var(--font-mono);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--cyan);
}

.page-products .pl-track__node--now .pl-track__ver{color:var(--orange);}

.page-products .pl-track__name{
  margin:0 0 calc(var(--unit));
  font-weight:800;
  font-size:.98rem;
  color:var(--fog);
}

.page-products .pl-track__desc{
  margin:0;
  font-size:.86rem;
  line-height:1.7;
  color:var(--ash);
}

/* 站内下一步 */
.page-products .pl-next{
  padding:calc(var(--unit) * 6) 0 calc(var(--unit) * 8);
}

.page-products .pl-next__title{
  margin:0 0 calc(var(--unit) * 3);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--smoke);
}

.page-products .pl-next__grid{
  display:grid;
  gap:1px;
  background:var(--steel);
  border:var(--pl-line);
}

.page-products .pl-next__link{
  position:relative;
  display:grid;
  gap:calc(var(--unit) * .75);
  padding:calc(var(--unit) * 3) calc(var(--unit) * 2.5);
  background:var(--deep);
  color:var(--fog);
  text-decoration:none;
  transition:background var(--dur) var(--ease);
}

.page-products .pl-next__link:hover,
.page-products .pl-next__link:focus-visible{background:var(--card);}

.page-products .pl-next__link:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.page-products .pl-next__label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--cyan);
}

.page-products .pl-next__text{
  font-size:.92rem;
  line-height:1.65;
  color:var(--ash);
}

.page-products .pl-next__arrow{
  font-family:var(--font-mono);
  color:var(--orange);
  transition:transform var(--dur) var(--ease);
}

.page-products .pl-next__link:hover .pl-next__arrow{transform:translateX(4px);}

@media (min-width:640px){
  .page-products .pl-matrix{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .pl-compare{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .pl-next__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .pl-track__node{flex:0 0 46%;}
}

@media (min-width:900px){
  .page-products .pl-hero{
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:end;
    gap:calc(var(--unit) * 6);
    padding:calc(var(--unit) * 5) 0 calc(var(--unit) * 7);
  }
  .page-products .pl-android{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);
    gap:calc(var(--unit) * 6);
    align-items:start;
  }
  .page-products .pl-follow{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:calc(var(--unit) * 6);
    align-items:center;
  }
  .page-products .pl-score{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:calc(var(--unit) * 6);
    align-items:center;
  }
  .page-products .pl-cover{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(var(--unit) * 6);
  }
  .page-products .pl-track__node{flex:0 0 30%;}
  .page-products .pl-section{padding:calc(var(--unit) * 8) 0;}
}

@media (min-width:1200px){
  .page-products .pl-hero__title{font-size:4.2rem;}
  .page-products .pl-track__node{flex:0 0 23%;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pl-matrix__cell,
  .page-products .pl-matrix__cell::after,
  .page-products .pl-next__arrow,
  .page-products .pl-table tbody th,
  .page-products .pl-table tbody td{transition:none;}
  .page-products .pl-hero__title{transform:none;}
}