.page-products{
  --pp-hair:1px solid var(--ink-600);
  background:var(--ink-800);
  color:var(--paper);
  padding-bottom:clamp(40px,6vw,88px);
}

.page-products img{max-width:100%;height:auto;}
.page-products [id]{scroll-margin-top:104px;}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
}

.page-products .lede{
  max-width:56ch;
  color:var(--rock);
  font-size:16px;
  line-height:1.85;
}

.page-products .breadcrumb{margin-top:clamp(18px,3vw,28px);}

/* ---------- 首屏 ---------- */
.svc-hero{
  display:grid;
  gap:16px;
  max-width:880px;
  padding-block:clamp(22px,4vw,42px) clamp(26px,4vw,48px);
}

.svc-hero h1{
  margin:0;
  font-size:clamp(30px,6.4vw,58px);
  line-height:1.06;
  letter-spacing:-.025em;
}

.svc-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:8px 0 0;
  background:var(--ink-600);
  border:1px solid var(--ink-600);
}

.svc-fact{
  background:var(--ink-700);
  padding:14px 16px;
}

.svc-fact dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--rock);
}

.svc-fact dd{
  margin:8px 0 0;
  font-size:15px;
  color:var(--paper);
}

.svc-fact-num{
  font-family:var(--font-mono);
  font-size:24px;
  color:var(--signal);
  letter-spacing:.02em;
}

/* ---------- 章节骨架 ---------- */
.svc-section{padding-block:clamp(32px,5vw,64px);}
.svc-section + .svc-section{border-top:var(--pp-hair);}

.branch{display:grid;gap:14px;}

.branch-spine{
  display:flex;
  align-items:center;
  gap:12px;
}

.branch-no{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--terracotta);
  background:var(--ink-700);
  border:1px solid var(--ink-600);
  padding:6px 10px;
}

.branch-spine::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--ink-600);
}

.branch-body{
  display:grid;
  gap:16px;
  min-width:0;
}

.branch-body h2{margin:0;font-size:clamp(24px,4.2vw,38px);line-height:1.14;}
.branch-body h3{margin:0;font-size:18px;line-height:1.3;}

@media (min-width:900px){
  .branch{
    grid-template-columns:72px minmax(0,1fr);
    column-gap:clamp(20px,3vw,44px);
  }
  .branch-spine{
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .branch-spine::after{
    width:1px;
    height:auto;
    flex:1;
    min-height:48px;
    margin-top:14px;
  }
}

/* ---------- 路径列表 ---------- */
.route-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--pp-hair);
}

.route-link{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:2px 12px;
  padding:14px 10px;
  border-bottom:var(--pp-hair);
  text-decoration:none;
  color:var(--paper);
  transition:background .18s var(--ease);
}

.route-no{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--terracotta);
  padding-top:3px;
  transition:color .18s var(--ease);
}

.route-name{font-size:17px;font-weight:700;}

.route-text{
  grid-column:2;
  font-size:14px;
  line-height:1.7;
  color:var(--rock);
}

.route-link:hover,
.route-link:focus-visible{background:var(--ink-700);}
.route-link:hover .route-no,
.route-link:focus-visible .route-no{color:var(--signal);}
.route-link:focus-visible{outline:2px solid var(--celadon);outline-offset:-2px;}

/* ---------- 图片 ---------- */
.pp-figure{margin:0;}

.pp-figure .media-frame{
  overflow:hidden;
  border:1px solid var(--ink-600);
  background:var(--ink-700);
}

.pp-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  filter:saturate(.72);
}

.pp-figure .media-caption{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--rock);
}

/* ---------- 分类方阵 ---------- */
.cat-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:1px;
  background:var(--ink-600);
  border:1px solid var(--ink-600);
}

.cat-grid li{
  background:var(--ink-700);
  padding:12px 12px 14px;
  transition:background .18s var(--ease);
}

.cat-grid li:hover{background:var(--ink-600);}

.cat-code{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--terracotta);
}

.cat-name{
  display:block;
  margin-top:6px;
  font-size:14px;
  line-height:1.5;
  color:var(--paper);
}

/* ---------- 等宽信息表 ---------- */
.spec{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.spec caption{
  text-align:left;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--rock);
}

.spec th,
.spec td{
  border-bottom:var(--pp-hair);
  padding:12px 10px;
  text-align:left;
  vertical-align:top;
  overflow-wrap:break-word;
}

.spec th{
  width:104px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--rock);
}

.spec td{
  color:var(--paper);
  line-height:1.75;
}

.spec td .mono{
  font-family:var(--font-mono);
  color:var(--celadon);
  letter-spacing:.02em;
}

@media (min-width:560px){
  .spec th{width:132px;}
}

/* ---------- 订阅块 ---------- */
.subscribe{
  display:grid;
  gap:12px;
  padding:20px;
  background:var(--ink-700);
  border:1px solid var(--ink-600);
  border-left:3px solid var(--signal);
}

.subscribe p{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--rock);
}

.subscribe .mono{
  font-family:var(--font-mono);
  color:var(--celadon);
}

.svc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px;
}

/* ---------- 安卓版 ---------- */
.android-grid{display:grid;gap:22px;}

.android-main{display:grid;gap:18px;min-width:0;}

.pkg-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.pkg{
  padding:16px;
  background:var(--ink-700);
  border:1px solid var(--ink-600);
  border-left:3px solid var(--celadon);
}

.pkg-code{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--terracotta);
}

.pkg h3{margin:8px 0 6px;font-size:16px;}

.pkg p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--rock);
}

@media (min-width:720px){
  .pkg-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:860px){
  .android-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);
    align-items:start;
    column-gap:clamp(20px,3vw,40px);
  }
}

/* ---------- 会员服务列表 ---------- */
.svc-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--pp-hair);
}

.svc-list li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:2px 12px;
  padding:13px 8px;
  border-bottom:var(--pp-hair);
}

.svc-count{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--terracotta);
  padding-top:3px;
}

.svc-name{font-size:15px;font-weight:700;color:var(--paper);}

.svc-desc{
  grid-column:2;
  font-size:14px;
  line-height:1.7;
  color:var(--rock);
}

/* ---------- 折叠块 ---------- */
.fold{
  border:1px solid var(--ink-600);
  background:var(--ink-700);
}

.fold > summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  list-style:none;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  color:var(--paper);
}

.fold > summary::-webkit-details-marker{display:none;}

.fold > summary:focus-visible{
  outline:2px solid var(--celadon);
  outline-offset:-2px;
}

.fold-no{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--terracotta);
}

.fold-mark{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--rock);
  transition:color .18s var(--ease);
}

.fold-mark::after{content:"＋";}
.fold[open] .fold-mark{color:var(--celadon);}
.fold[open] .fold-mark::after{content:"−";}

.fold-body{
  padding:0 14px 16px;
  font-size:14px;
  line-height:1.85;
  color:var(--rock);
}

.fold-body p{margin:0 0 10px;}
.fold-body p:last-child{margin-bottom:0;}
.fold-body a{color:var(--celadon);text-decoration:underline;text-underline-offset:3px;}
.fold-body .mono{font-family:var(--font-mono);color:var(--celadon);}

/* ---------- 支持数据条 ---------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:1px;
  background:var(--ink-600);
  border:1px solid var(--ink-600);
}

.stat-strip > div{
  background:var(--ink-700);
  padding:14px 16px;
}

.stat-num{
  display:block;
  font-family:var(--font-mono);
  font-size:20px;
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--celadon);
}

.stat-label{
  display:block;
  margin-top:7px;
  font-size:13px;
  line-height:1.6;
  color:var(--rock);
}

/* ---------- 下一步链接 ---------- */
.pp-next{
  display:grid;
  gap:1px;
  background:var(--ink-600);
  border:1px solid var(--ink-600);
}

.pp-next a{
  display:block;
  padding:16px;
  background:var(--ink-700);
  color:var(--paper);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background .18s var(--ease);
}

.pp-next a span{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:400;
  line-height:1.7;
  color:var(--rock);
}

.pp-next a:hover,
.pp-next a:focus-visible{background:var(--ink-600);}
.pp-next a:focus-visible{outline:2px solid var(--celadon);outline-offset:-2px;}

@media (min-width:640px){
  .pp-next{grid-template-columns:1fr 1fr;}
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-products *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}
<<<PAGE_CSS_END>>>