.page-products{
  --pp-line:1px solid var(--line-gold-soft);
  --pp-line-strong:1px solid var(--line-gold);
  --pp-ink-soft:rgba(71,82,76,.95);
}

.page-products a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-gold);transition:color .2s var(--ease),border-color .2s var(--ease);}
.page-products a:hover{color:var(--green-700);border-bottom-color:var(--gold-500);}

.page-products .prod-crumb-bar{padding-top:calc(var(--header-h) + 1.1rem);padding-bottom:.6rem;background:var(--ivory-050);}
.page-products .prod-crumb-bar .breadcrumb{font-size:var(--fs-12);letter-spacing:.14em;color:var(--graphite-600);}
.page-products .prod-crumb-bar .breadcrumb a{border-bottom:0;}

.page-products .prod-block{padding-block:clamp(2.5rem,6vw,5rem);}
.page-products .prod-surface--ivory{background:var(--ivory-050);color:var(--ink-900);}
.page-products .prod-surface--tint{background:var(--ivory-100);color:var(--ink-900);border-top:var(--pp-line);border-bottom:var(--pp-line);}
.page-products .prod-surface--dark{background:var(--green-900);color:var(--ivory-050);}
.page-products .prod-surface--deep{background:var(--green-700);color:var(--ivory-050);border-top:var(--pp-line);}

.page-products .eyebrow{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 1rem;
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:.22em;text-transform:none;color:var(--gold-500);
}
.page-products .eyebrow::before{content:"";display:block;width:1.75rem;height:1px;background:var(--gold-500);}

.page-products .h-display,
.page-products .h-48,
.page-products .h-34,
.page-products .h-24{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.02em;
  margin:0 0 1rem;
}
.page-products .h-display{font-size:var(--fs-64);line-height:1.1;}
.page-products .h-48{font-size:var(--fs-48);line-height:1.15;}
.page-products .h-34{font-size:var(--fs-34);line-height:1.22;}
.page-products .h-24{font-size:var(--fs-24);line-height:1.3;letter-spacing:.01em;}

.page-products .lede{font-size:var(--fs-17);line-height:1.75;max-width:36em;margin:0;color:var(--pp-ink-soft);}
.page-products .prose{font-size:var(--fs-17);line-height:1.78;max-width:36em;margin:0 0 1.1rem;color:var(--pp-ink-soft);}
.page-products .prose-block{max-width:38em;}
.page-products .prod-surface--dark .lede,
.page-products .prod-surface--deep .lede{color:rgba(247,242,231,.82);}
.page-products .prod-surface--dark .prose,
.page-products .prod-surface--deep .prose{color:rgba(247,242,231,.8);}

.page-products .section-head{max-width:44rem;margin-bottom:clamp(1.75rem,3vw,2.75rem);}

/* ---------- 首屏 ---------- */
.page-products .prod-hero{padding-top:clamp(1.25rem,3vw,2.25rem);background:var(--ivory-050);}
.page-products .hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;}
.page-products .hero-main{min-width:0;}
.page-products .hero-main .h-display{margin-bottom:1.25rem;}

.page-products .hero-index{list-style:none;margin:2rem 0 0;padding:0;border-top:var(--pp-line-strong);}
.page-products .hero-index li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:.25rem .9rem;
  padding:.95rem 0;border-bottom:var(--pp-line);
}
.page-products .hi-num{font-family:var(--font-mono);font-size:var(--fs-13);font-weight:500;color:var(--gold-500);letter-spacing:.06em;padding-top:.2rem;}
.page-products .hi-name{font-family:var(--font-display);font-size:var(--fs-17);letter-spacing:.06em;color:var(--ink-900);}
.page-products .hi-note{grid-column:2;font-size:var(--fs-13);line-height:1.6;color:var(--graphite-600);}

.page-products .hero-panel{
  position:relative;
  padding:clamp(1.35rem,3vw,1.85rem);
  background:linear-gradient(155deg,rgba(10,30,25,.96),rgba(20,52,43,.9));
  border:1px solid var(--line-gold);
  color:var(--ivory-050);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(230,205,139,.18);
}
.page-products .hero-panel::before{content:"";position:absolute;left:-1px;top:1.6rem;width:2px;height:3.2rem;background:var(--cinnabar-600);}
.page-products .panel-kicker{margin:0 0 .7rem;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.2em;color:var(--gold-300);}
.page-products .panel-title{font-family:var(--font-display);font-size:var(--fs-24);line-height:1.35;margin:0 0 .8rem;color:var(--ivory-050);}
.page-products .panel-text{margin:0 0 1.4rem;font-size:var(--fs-15);line-height:1.75;color:rgba(247,242,231,.82);}
.page-products .panel-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
.page-products .panel-btn{
  display:inline-flex;align-items:center;
  padding:.72rem 1.15rem;
  background:var(--cinnabar-600);border:1px solid var(--cinnabar-600);
  color:var(--ivory-050);font-size:var(--fs-15);letter-spacing:.06em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.page-products .panel-btn:hover{background:transparent;color:var(--gold-300);border-color:var(--gold-300);}
.page-products .panel-link{font-size:var(--fs-13);letter-spacing:.08em;color:var(--gold-300);border-bottom:1px solid var(--line-gold);}
.page-products .panel-link:hover{color:var(--ivory-050);}

.page-products .prod-figure{margin:0;background:var(--green-700);}
.page-products .prod-figure img{display:block;width:100%;height:100%;object-fit:cover;}
.page-products .prod-figure figcaption{
  padding:.7rem 0 0;
  font-size:var(--fs-12);letter-spacing:.1em;line-height:1.6;
  color:var(--graphite-600);
}
.page-products .prod-figure--hero{margin-top:clamp(1.75rem,4vw,3rem);}
.page-products .prod-figure--hero img{aspect-ratio:16/10;max-height:68vh;}
.page-products .prod-figure--hero figcaption{padding-inline:clamp(1.25rem,4vw,4.5rem);}
.page-products .prod-figure--side img{aspect-ratio:3/2;}
.page-products .prod-figure--sub img{aspect-ratio:3/2;}
.page-products .prod-figure--tall img{aspect-ratio:4/5;}

/* ---------- 规则中心 ---------- */
.page-products .cat-strip{
  list-style:none;margin:0 0 1.75rem;padding:.2rem 0 .9rem;
  display:flex;gap:.55rem;overflow-x:auto;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.page-products .cat-item{
  flex:0 0 auto;min-width:8.6rem;
  display:flex;flex-direction:column;gap:.3rem;
  padding:.8rem .95rem;
  border:var(--pp-line-strong);
  background:rgba(247,242,231,.75);
}
.page-products .cat-item strong{font-family:var(--font-display);font-weight:400;font-size:var(--fs-17);letter-spacing:.04em;color:var(--ink-900);}
.page-products .cat-count{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.1em;color:var(--gold-500);}

.page-products .table-wrap{overflow-x:auto;border:var(--pp-line-strong);background:var(--ivory-050);}
.page-products table{width:100%;min-width:40rem;border-collapse:collapse;font-size:var(--fs-15);}
.page-products .table-cap{
  caption-side:top;text-align:left;
  padding:.8rem 1rem;
  font-size:var(--fs-12);letter-spacing:.12em;color:var(--graphite-600);
  border-bottom:var(--pp-line);
}
.page-products thead th{
  text-align:left;padding:.75rem 1rem;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.14em;
  color:var(--green-700);background:var(--ivory-100);
  border-bottom:var(--pp-line-strong);
  white-space:nowrap;
}
.page-products tbody td{padding:.85rem 1rem;border-bottom:var(--pp-line);vertical-align:top;line-height:1.6;}
.page-products tbody tr:nth-child(even){background:rgba(237,227,208,.4);}
.page-products .t-mono{font-family:var(--font-mono);font-size:var(--fs-13);font-weight:500;color:var(--green-700);letter-spacing:.04em;}
.page-products .after-note{margin:1.25rem 0 0;font-size:var(--fs-13);line-height:1.8;color:var(--graphite-600);max-width:44em;}

/* ---------- 两栏分栏 ---------- */
.page-products .split{display:grid;grid-template-columns:1fr;gap:2rem;}
.page-products .split-main{min-width:0;}

/* ---------- 参数 ---------- */
.page-products .metric-row{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;
  margin:1.6rem 0 0;padding-top:1.1rem;
  border-top:var(--pp-line-strong);
}
.page-products .metric{display:flex;flex-direction:column;gap:.15rem;}
.page-products .metric-num{font-family:var(--font-mono);font-size:var(--fs-34);font-weight:500;line-height:1;color:var(--green-900);letter-spacing:-.01em;}
.page-products .metric-label{font-size:var(--fs-12);letter-spacing:.16em;color:var(--graphite-600);}

/* ---------- 筛选演示 ---------- */
.page-products .demo{margin-top:1.75rem;border:var(--pp-line-strong);background:var(--ivory-050);}
.page-products .demo-radio,
.page-products .sub-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 .demo-switch{display:flex;flex-wrap:wrap;border-bottom:var(--pp-line);}
.page-products .demo-switch label{
  flex:1 1 auto;text-align:center;cursor:pointer;
  padding:.78rem .5rem;
  font-size:var(--fs-13);letter-spacing:.1em;color:var(--graphite-600);
  border-right:var(--pp-line);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.page-products .demo-switch label:last-child{border-right:0;}
.page-products .demo-switch label:hover{color:var(--green-900);}
.page-products .demo-radio:focus-visible ~ .demo-switch{outline:2px solid var(--gold-500);outline-offset:2px;}
.page-products #f-time:checked ~ .demo-switch label[for="f-time"],
.page-products #f-type:checked ~ .demo-switch label[for="f-type"],
.page-products #f-device:checked ~ .demo-switch label[for="f-device"]{
  color:var(--green-900);background:var(--ivory-100);
  box-shadow:inset 0 -2px 0 var(--gold-500);font-weight:600;
}
.page-products .demo-stage{padding:.15rem 0;}
.page-products .demo-list{list-style:none;margin:0;padding:0;display:none;}
.page-products .demo-list li{
  display:grid;gap:.2rem;
  padding:.8rem 1rem;
  border-bottom:var(--pp-line);
}
.page-products .demo-list li:last-child{border-bottom:0;}
.page-products .dl-key{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.08em;color:var(--gold-500);}
.page-products .dl-val{font-size:var(--fs-15);color:var(--ink-900);}
.page-products #f-time:checked ~ .demo-stage .demo-list--time,
.page-products #f-type:checked ~ .demo-stage .demo-list--type,
.page-products #f-device:checked ~ .demo-stage .demo-list--device{display:block;}
.page-products .demo-foot{margin:0;padding:.8rem 1rem;border-top:var(--pp-line);font-size:var(--fs-12);line-height:1.7;color:var(--graphite-600);}

/* ---------- 导出用途 ---------- */
.page-products .use-list{list-style:none;margin:1.4rem 0;padding:0;}
.page-products .use-list li{
  display:grid;grid-template-columns:1.9rem 1fr;gap:.9rem;
  padding:.85rem 0;border-bottom:var(--pp-line);align-items:start;
}
.page-products .use-num{
  font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;
  color:var(--cinnabar-600);letter-spacing:.06em;
  border:1px solid var(--line-gold);width:1.6rem;height:1.6rem;
  display:flex;align-items:center;justify-content:center;
}
.page-products .use-text{font-size:var(--fs-15);line-height:1.75;color:var(--pp-ink-soft);}

/* ---------- 订阅 ---------- */
.page-products .sub-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;}
.page-products .sub-switch-wrap{min-width:0;}
.page-products .sub-tabs{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;}
.page-products .sub-tabs label{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;
  padding:.8rem 1rem;
  border:var(--pp-line-strong);
  background:rgba(247,242,231,.7);
  font-size:var(--fs-15);letter-spacing:.06em;color:var(--graphite-600);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.page-products .sub-tabs label:hover{color:var(--green-900);}
.page-products .sub-radio:focus-visible ~ .sub-tabs{outline:2px solid var(--gold-500);outline-offset:3px;}
.page-products .st-num{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.08em;color:var(--gold-500);}
.page-products #s-announce:checked ~ .sub-tabs label[for="s-announce"],
.page-products #s-weekly:checked ~ .sub-tabs label[for="s-weekly"],
.page-products #s-version:checked ~ .sub-tabs label[for="s-version"]{
  background:var(--green-900);color:var(--ivory-050);border-color:var(--green-900);
}
.page-products #s-announce:checked ~ .sub-tabs label[for="s-announce"] .st-num,
.page-products #s-weekly:checked ~ .sub-tabs label[for="s-weekly"] .st-num,
.page-products #s-version:checked ~ .sub-tabs label[for="s-version"] .st-num{color:var(--gold-300);}

.page-products .sub-panels{border:var(--pp-line-strong);background:var(--ivory-050);padding:1.15rem 1.2rem;}
.page-products .sub-panel{display:none;}
.page-products .sub-panel .h-24{margin-bottom:.7rem;}
.page-products .sub-panel .prose{font-size:var(--fs-15);margin-bottom:.9rem;}
.page-products #s-announce:checked ~ .sub-panels .sub-panel--announce,
.page-products #s-weekly:checked ~ .sub-panels .sub-panel--weekly,
.page-products #s-version:checked ~ .sub-panels .sub-panel--version{display:block;animation:pp-fade .18s var(--ease);}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}

.page-products .sub-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 .4rem;
  padding-top:.55rem;border-top:var(--pp-line);
  font-size:var(--fs-13);
}
.page-products .sm-key{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.12em;color:var(--gold-500);}
.page-products .sm-val{color:var(--ink-900);}
.page-products .sub-foot{margin:1.1rem 0 0;font-size:var(--fs-13);line-height:1.8;color:var(--graphite-600);}

/* ---------- 路径树 ---------- */
.page-products .path-tree{list-style:none;margin:0;padding:0;}
.page-products .path-node{position:relative;padding-left:3.1rem;padding-bottom:1.9rem;}
.page-products .path-node::before{
  content:"";position:absolute;left:1.05rem;top:1.7rem;bottom:0;
  width:1px;background:var(--line-gold);
}
.page-products .path-node:last-child{padding-bottom:0;}
.page-products .path-node:last-child::before{display:none;}
.page-products .path-dot{
  position:absolute;left:.55rem;top:.35rem;
  width:1.05rem;height:1.05rem;
  background:var(--green-900);
  border:1px solid var(--gold-500);
  transform:rotate(45deg);
}
.page-products .path-node:first-child .path-dot{background:var(--cinnabar-600);border-color:var(--cinnabar-600);}
.page-products .path-card{
  border:1px solid var(--line-dark);
  background:rgba(20,52,43,.85);
  padding:1.1rem 1.2rem;
  max-width:36rem;
}
.page-products .path-step{
  margin:0 0 .5rem;
  font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;
  letter-spacing:.18em;color:var(--gold-300);
}
.page-products .path-card .h-24{font-size:var(--fs-17);letter-spacing:.04em;margin-bottom:.5rem;color:var(--ivory-050);}
.page-products .path-card p{margin:0;font-size:var(--fs-15);line-height:1.75;color:rgba(247,242,231,.78);}
.page-products .path-foot{margin:1.9rem 0 0;font-size:var(--fs-13);line-height:1.85;color:rgba(247,242,231,.72);max-width:44em;}
.page-products .prod-surface--dark a,
.page-products .prod-surface--deep a{color:var(--gold-300);border-bottom-color:var(--line-gold);}
.page-products .prod-surface--dark a:hover,
.page-products .prod-surface--deep a:hover{color:var(--ivory-050);}

/* ---------- 一致性清单 ---------- */
.page-products .check-list{list-style:none;margin:1.5rem 0 0;padding:0;border-top:var(--pp-line-strong);}
.page-products .check-list li{
  position:relative;padding:.8rem 0 .8rem 1.6rem;
  border-bottom:var(--pp-line);
  font-size:var(--fs-15);line-height:1.7;color:var(--pp-ink-soft);
}
.page-products .check-list li::before{
  content:"";position:absolute;left:0;top:1.28rem;
  width:.42rem;height:.42rem;background:var(--gold-500);transform:rotate(45deg);
}

/* ---------- 收尾 ---------- */
.page-products .next-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:start;}
.page-products .next-main{min-width:0;}
.page-products .next-actions{display:flex;flex-direction:column;gap:.65rem;}
.page-products .next-btn{
  display:block;text-align:center;padding:.9rem 1.2rem;
  border:1px solid var(--gold-500);
  font-size:var(--fs-15);letter-spacing:.08em;
  color:var(--gold-300);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.page-products .next-btn:hover{background:rgba(201,162,39,.14);color:var(--ivory-050);}
.page-products .next-btn--solid{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500);}
.page-products .next-btn--solid:hover{background:var(--gold-300);color:var(--green-900);}
.page-products .next-btn--ghost{border-color:rgba(201,162,39,.4);color:rgba(247,242,231,.85);}
.page-products .next-note{margin:1.75rem 0 0;padding-top:1rem;border-top:var(--pp-line);font-size:var(--fs-13);line-height:1.8;color:rgba(247,242,231,.75);}

/* ---------- 平板 ---------- */
@media (min-width:760px){
  .page-products .hero-index{display:grid;grid-template-columns:1fr 1fr;border-top:0;}
  .page-products .hero-index li{border-top:var(--pp-line-strong);padding-right:1.25rem;}
  .page-products .demo-list li{grid-template-columns:11rem 1fr;align-items:baseline;}
  .page-products .sub-tabs{flex-direction:row;}
  .page-products .sub-tabs label{flex:1 1 auto;justify-content:center;font-size:var(--fs-13);padding:.85rem .6rem;}
  .page-products .next-actions{flex-direction:row;flex-wrap:wrap;}
  .page-products .next-btn{flex:1 1 12rem;}
}

/* ---------- 桌面 ---------- */
@media (min-width:960px){
  .page-products .hero-grid{grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
  .page-products .hero-panel{margin-top:.5rem;}
  .page-products .split{grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
  .page-products .split--flip{grid-template-columns:5fr 7fr;}
  .page-products .split--flip .split-main{order:2;}
  .page-products .sub-grid{grid-template-columns:5fr 7fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
  .page-products .next-grid{grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
  .page-products .next-actions{flex-direction:column;}
  .page-products .next-btn{flex:0 0 auto;}
  .page-products .path-node{padding-left:3.6rem;padding-bottom:2.3rem;}
  .page-products .path-node::before{left:1.35rem;}
  .page-products .path-dot{left:.85rem;width:1.15rem;height:1.15rem;}
  .page-products .prod-figure--hero img{aspect-ratio:16/9;}
}

@media (min-width:1200px){
  .page-products .hero-index{grid-template-columns:1fr 1fr;}
  .page-products .metric-row{gap:2rem 3.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .page-products *{animation:none !important;transition:none !important;}
}