.page-products{
  --pp-section-pad:clamp(48px,7vw,96px);
  --pp-hairline:1px solid var(--line-soft);
  background:var(--ink-bg);
  color:var(--paper);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero{
  position:relative;
  padding:calc(var(--header-h) + clamp(28px,7vw,84px)) 0 clamp(34px,5vw,62px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-products .pp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(120% 82% at 18% 0%,#000 18%,transparent 76%);
  mask-image:radial-gradient(120% 82% at 18% 0%,#000 18%,transparent 76%);
}
.page-products .pp-hero .shell{
  position:relative;
  z-index:1;
}
.page-products .pp-hero .breadcrumb{
  margin-bottom:clamp(20px,3.2vw,34px);
}
.page-products .pp-kicker{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tactical);
}
.page-products h1{
  margin:0;
  max-width:19ch;
  font-size:clamp(30px,6.4vw,60px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--paper);
}
.page-products .pp-lede{
  margin:clamp(18px,2.6vw,28px) 0 0;
  max-width:64ch;
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.75;
  color:var(--paper);
  opacity:.88;
}

/* 首屏数据条 */
.page-products .pp-hero-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:clamp(28px,4.2vw,48px) 0 0;
  padding:0;
  border:1px solid var(--line);
  background:var(--line-soft);
}
.page-products .pp-stat{
  padding:16px 18px;
  background:var(--ink-bg);
}
.page-products .pp-stat dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--moss);
}
.page-products .pp-stat dd{
  margin:10px 0 0;
  font-family:var(--mono);
  font-size:clamp(24px,3.6vw,34px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--tactical);
}
@media (min-width:720px){
  .page-products .pp-hero-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ---------- 通用分区 ---------- */
.page-products .pp-section{
  position:relative;
  padding:var(--pp-section-pad) 0;
  border-top:var(--pp-hairline);
}
.page-products .pp-overview{
  border-top:0;
}
.page-products .pp-h2{
  margin:0 0 14px;
  font-size:clamp(24px,3.6vw,38px);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-products .pp-sub{
  margin:0 0 clamp(24px,3.4vw,40px);
  max-width:62ch;
  font-size:16px;
  line-height:1.75;
  color:var(--moss);
}
.page-products .pp-note{
  margin:0 0 clamp(18px,2.6vw,26px);
  padding:14px 16px;
  border-left:3px solid var(--amber);
  background:rgba(255,154,46,.08);
  font-size:14px;
  line-height:1.72;
  color:var(--paper);
}
.page-products .pp-note--striped{
  border-left-color:var(--amber);
  background-image:repeating-linear-gradient(135deg,rgba(255,154,46,.14) 0 6px,transparent 6px 12px);
  background-color:rgba(10,52,44,.5);
}

/* ---------- 图片容器 ---------- */
.page-products .media{
  margin:0;
  border:1px solid var(--line);
  background:var(--carbon);
  overflow:hidden;
}
.page-products .media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .media-caption{
  padding:10px 14px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--moss);
}
.page-products .pp-overview-media{
  margin-bottom:clamp(24px,3.4vw,40px);
}

/* ---------- 能力对照表 ---------- */
.page-products .pp-table-wrap{
  border:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.page-products .pp-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.62;
}
.page-products .pp-table th{
  padding:13px 16px;
  border-bottom:1px solid var(--line-tactical);
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:left;
  white-space:nowrap;
  color:var(--moss);
  background:var(--ink-panel);
}
.page-products .pp-table td{
  padding:16px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  color:var(--paper);
}
.page-products .pp-table td:first-child{
  font-weight:600;
  white-space:nowrap;
  color:var(--tactical-soft);
}
.page-products .pp-table tbody tr:last-child td{
  border-bottom:0;
}
.page-products .pp-table tbody tr:hover td{
  background:rgba(23,229,184,.06);
}

/* ---------- 快捷索引 chip ---------- */
.page-products .pp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  list-style:none;
}
.page-products .pp-chip{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:var(--pill);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--paper);
  text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
.page-products .pp-chip:hover,
.page-products .pp-chip:focus-visible{
  border-color:var(--tactical);
  background:var(--tactical);
  color:var(--carbon);
}

/* ---------- 模块骨架：左索引轴 + 右内容流 ---------- */
.page-products .pp-module-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
}
.page-products .pp-rail{
  position:relative;
}
.page-products .pp-rail-num{
  display:block;
  margin-left:-.06em;
  font-family:var(--mono);
  font-size:clamp(38px,6vw,58px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--tactical);
  opacity:.32;
}
.page-products .pp-rail-title{
  margin:10px 0 6px;
  font-size:clamp(19px,2.4vw,24px);
  font-weight:800;
  line-height:1.3;
  color:var(--paper);
}
.page-products .pp-rail-note{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--moss);
}
@media (min-width:960px){
  .page-products .pp-module-inner{
    grid-template-columns:200px minmax(0,1fr);
    gap:clamp(28px,4.5vw,72px);
  }
  .page-products .pp-rail{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    align-self:start;
  }
}
.page-products .pp-body > p{
  max-width:66ch;
  line-height:1.78;
  color:var(--paper);
}
.page-products .pp-body > p + p{
  margin-top:1.1em;
}
.page-products .pp-lead{
  margin:0 0 clamp(20px,3vw,30px);
  max-width:62ch;
  font-size:clamp(17px,2.1vw,19px);
  line-height:1.72;
  color:var(--paper);
}
.page-products .pp-body a{
  color:var(--tactical);
  text-decoration:none;
  border-bottom:1px solid var(--line-tactical);
}
.page-products .pp-body a:hover{
  color:var(--tactical-soft);
}
.page-products .pp-body .media{
  margin-top:clamp(22px,3.2vw,34px);
}

/* ---------- 双列对照 ---------- */
.page-products .pp-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin:0 0 clamp(20px,3vw,28px);
}
.page-products .pp-col{
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--moss);
  background:rgba(10,52,44,.55);
}
.page-products .pp-col--mainland{
  border-left-color:var(--tactical);
  background:linear-gradient(180deg,rgba(23,229,184,.09),rgba(10,52,44,.5));
}
.page-products .pp-col h3{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tactical);
}
.page-products .pp-col--general h3{
  color:var(--moss);
}
.page-products .pp-col ul{
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .pp-col li{
  position:relative;
  padding:7px 0 7px 16px;
  border-bottom:1px dashed var(--line-soft);
  font-size:15px;
  line-height:1.62;
  color:var(--paper);
}
.page-products .pp-col li:last-child{
  border-bottom:0;
}
.page-products .pp-col li::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  width:6px;
  height:6px;
  background:var(--tactical);
}
.page-products .pp-col--general li::before{
  background:var(--moss);
}
@media (min-width:760px){
  .page-products .pp-cols{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .page-products .pp-cols--tri{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* ---------- 筛选标签条 ---------- */
.page-products .pp-filterbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 clamp(18px,2.6vw,26px);
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(10,52,44,.45);
}
.page-products .pp-filter-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--moss);
  margin-right:4px;
}

/* ---------- 教练任期甘特 ---------- */
.page-products .pp-terms{
  display:grid;
  gap:10px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.page-products .pp-term{
  display:grid;
  gap:9px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(10,52,44,.42);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
}
.page-products .pp-term:hover,
.page-products .pp-term:focus-within{
  border-color:var(--tactical);
  background:rgba(23,229,184,.07);
  transform:translateY(-2px);
}
.page-products .pp-term-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.page-products .pp-term-span{
  font-family:var(--mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tactical-soft);
}
.page-products .pp-term-league{
  font-size:13px;
  color:var(--moss);
}
.page-products .pp-term-track{
  position:relative;
  height:12px;
  background-color:rgba(147,173,166,.12);
  background-image:repeating-linear-gradient(to right,rgba(147,173,166,.24) 0 1px,transparent 1px 10%);
  overflow:hidden;
}
.page-products .pp-term-bar{
  display:block;
  height:100%;
  background:var(--tactical);
}
.page-products .pp-t1{width:22%;}
.page-products .pp-t2{width:22%;background:var(--tactical-soft);}
.page-products .pp-t3{
  width:9%;
  background-color:var(--amber);
  background-image:repeating-linear-gradient(135deg,rgba(2,12,10,.5) 0 4px,transparent 4px 9px);
}
.page-products .pp-t4{width:30%;}
.page-products .pp-t5{width:18%;background:var(--data-blue);}
@media (min-width:640px){
  .page-products .pp-term{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ---------- 导出格式 ---------- */
.page-products .pp-export-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin:0 0 clamp(20px,3vw,30px);
}
@media (min-width:760px){
  .page-products .pp-export-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
}
.page-products .pp-format{
  padding:20px 22px;
  border:1px solid var(--line);
  border-top:2px solid var(--tactical);
  background:var(--ink-panel);
}
.page-products .pp-format-icon{
  display:block;
  color:var(--tactical);
}
.page-products .pp-format-name{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:20px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--paper);
}
.page-products .pp-format-desc{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.68;
  color:var(--moss);
}
.page-products .pp-format-file{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--line-soft);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--tactical-soft);
  word-break:break-all;
}

/* ---------- 迭代节奏 ---------- */
.page-products .pp-cycle{
  display:grid;
  gap:12px;
  margin:0 0 clamp(20px,3vw,30px);
  padding:0;
  list-style:none;
}
.page-products .pp-cycle-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:18px 20px;
  border:1px solid var(--line);
  background:rgba(10,52,44,.42);
}
.page-products .pp-cycle-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid var(--line-tactical);
  border-radius:var(--pill);
  font-family:var(--mono);
  font-size:15px;
  font-weight:800;
  color:var(--tactical);
}
.page-products .pp-cycle-item h3{
  margin:0 0 8px;
  font-size:17px;
  font-weight:800;
  color:var(--paper);
}
.page-products .pp-cycle-item p{
  margin:0;
  max-width:58ch;
  font-size:15px;
  line-height:1.72;
  color:var(--moss);
}

/* ---------- 收尾 ---------- */
.page-products .pp-cta{
  background:linear-gradient(180deg,var(--ink-bg),var(--carbon));
  border-top:1px solid var(--line);
}
.page-products .pp-cta-text{
  margin:0 0 clamp(22px,3vw,32px);
  max-width:58ch;
  font-size:16px;
  line-height:1.75;
  color:var(--moss);
}
.page-products .pp-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
</main>