.page-products{
  --pp-hair:rgba(244,239,230,.18);
  --pp-hair-ink:rgba(18,16,14,.14);
  --pp-indigo-card:#2A2050;
}

.page-products h1,
.page-products h2,
.page-products h3{
  margin:0;
  font-weight:900;
  letter-spacing:-.012em;
}

.page-products p{margin:0}

.page-products .xy-index{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--orange);
}

.page-products .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- 首屏 ---------- */
.page-products .pp-open{padding:26px 0 54px}
.page-products .pp-open .crumbs{margin-bottom:24px}

.page-products h1{
  font-size:clamp(30px,5.4vw,54px);
  line-height:1.08;
  max-width:20ch;
  color:var(--ink);
}

.page-products .pp-lede{
  margin-top:18px;
  font-size:17px;
  line-height:1.78;
  color:var(--ink-soft);
  max-width:44ch;
}

.page-products .pp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-products .pp-actions .btn--ghost{
  color:var(--ink);
  border-color:rgba(18,16,14,.38);
}
.page-products .pp-actions .btn--ghost:hover{
  background:rgba(18,16,14,.07);
}

.page-products .pp-open__grid{
  display:grid;
  gap:32px;
  margin-top:8px;
}
@media (min-width:1000px){
  .page-products .pp-open__grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);
    gap:52px;
    align-items:start;
  }
}

.page-products .pp-facts{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  background:var(--green-deep);
  border-top:3px solid var(--orange);
  align-self:start;
}
.page-products .pp-facts li{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 18px;
  border-bottom:1px solid var(--pp-hair);
}
.page-products .pp-facts li:last-child{border-bottom:0}
.page-products .pp-facts__k{
  font-size:22px;
  font-weight:700;
  line-height:1.15;
  color:var(--lime);
}
.page-products .pp-facts__v{
  font-size:13px;
  letter-spacing:.01em;
  color:var(--on-dark);
}

/* ---------- 电脑版 ---------- */
.page-products .pp-desktop{padding:56px 0 64px}
.page-products .pp-desktop .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--on-dark-strong);
}
.page-products .pp-desktop .xy-head__desc{
  margin-top:12px;
  max-width:52ch;
  line-height:1.8;
  color:var(--on-dark);
}

.page-products .pp-desktop__grid{margin-top:32px}

.page-products .pp-shot{margin:0}
.page-products .pp-shot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid rgba(46,110,112,.5);
  box-shadow:0 0 0 4px rgba(198,242,78,.07);
}
.page-products .pp-shot figcaption{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--on-dark);
}

.page-products .pp-paths{margin-top:24px}
@media (min-width:900px){
  .page-products .pp-paths{margin-top:0}
}
.page-products .pp-paths h3{
  font-size:18px;
  line-height:1.4;
  color:var(--on-dark-strong);
  padding-bottom:12px;
}
.page-products .pp-paths__list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pp-paths__list li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--pp-hair);
}
.page-products .pp-paths__list .mono{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  font-size:15px;
  font-weight:700;
  color:var(--orange);
  border:1px solid rgba(245,134,43,.5);
}
.page-products .pp-paths__list b{
  display:block;
  margin-bottom:5px;
  font-size:15px;
  color:var(--on-dark-strong);
}
.page-products .pp-paths__list p{
  font-size:14px;
  line-height:1.75;
  color:var(--on-dark);
}

/* ---------- 移动端 ---------- */
.page-products .pp-mobile{padding:56px 0 64px}
.page-products .pp-mobile .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--ink);
}
.page-products .pp-mobile .xy-head__desc{
  margin-top:12px;
  max-width:52ch;
  line-height:1.8;
  color:var(--ink-soft);
}

.page-products .pp-mobile__grid{margin-top:32px}
.page-products .pp-shot--tall img{aspect-ratio:9 / 16}
.page-products .pp-mobile .pp-shot figcaption{color:var(--ink-soft)}

.page-products .pp-mobile__body{margin-top:26px}
@media (min-width:900px){
  .page-products .pp-mobile__body{margin-top:0}
}

.page-products .pp-points{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pp-points li{
  display:grid;
  gap:6px;
  padding:18px 0 18px 18px;
  border-left:3px solid var(--orange);
  border-top:1px solid var(--pp-hair-ink);
}
.page-products .pp-points li:first-child{border-top:0}
.page-products .pp-points li:nth-child(2){border-left-color:var(--cyan)}
.page-products .pp-points li:nth-child(3){border-left-color:var(--lime)}
.page-products .pp-points b{font-size:16px;color:var(--ink)}
.page-products .pp-points p{
  font-size:14.5px;
  line-height:1.78;
  color:var(--ink-soft);
}

.page-products .pp-heat{
  display:grid;
  gap:1px;
  margin-top:30px;
  background:var(--pp-hair-ink);
  border:1px solid var(--pp-hair-ink);
}
@media (min-width:560px){
  .page-products .pp-heat{grid-template-columns:repeat(3,1fr)}
}
.page-products .pp-heat__item{
  padding:14px;
  background:var(--sand);
}
.page-products .pp-heat__item svg{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(46,110,112,.35);
}
.page-products .pp-heat__item span{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* ---------- 五维刻度尺 ---------- */
.page-products .pp-dims{padding:56px 0 64px}
.page-products .pp-dims .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--on-dark-strong);
}
.page-products .pp-dims .xy-head__desc{
  margin-top:12px;
  max-width:54ch;
  line-height:1.8;
  color:var(--on-dark);
}

.page-products .pp-ruler{
  display:grid;
  gap:1px;
  margin-top:32px;
  background:var(--pp-hair);
  border:1px solid var(--pp-hair);
}
@media (min-width:900px){
  .page-products .pp-ruler{grid-template-columns:repeat(5,1fr)}
}

.page-products .pp-dim{background:var(--pp-indigo-card)}
.page-products .pp-dim summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  gap:9px;
  padding:20px 16px;
  min-height:138px;
  align-content:start;
}
.page-products .pp-dim summary::-webkit-details-marker{display:none}
.page-products .pp-dim summary::after{
  content:"＋";
  justify-self:end;
  margin-top:6px;
  font-size:13px;
  line-height:1;
  color:var(--orange-soft);
}
.page-products .pp-dim[open] summary::after{content:"－"}
.page-products .pp-dim__no{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--orange);
}
.page-products .pp-dim__name{
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  color:var(--on-dark-strong);
}
.page-products .pp-dim__val{
  font-size:14px;
  color:var(--lime);
}
.page-products .pp-dim p{
  padding:14px 16px 20px;
  margin:0;
  border-top:1px solid var(--pp-hair);
  font-size:13.5px;
  line-height:1.78;
  color:var(--on-dark);
}

.page-products .pp-dims__figure{margin:30px 0 0}
.page-products .pp-dims__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid rgba(46,110,112,.5);
}
.page-products .pp-dims__figure figcaption{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--on-dark);
}

/* ---------- 分区入口 ---------- */
.page-products .pp-zones-sec{padding:56px 0 64px}
.page-products .pp-zones-sec .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--on-dark-strong);
}
.page-products .pp-zones-sec .xy-head__desc{
  margin-top:12px;
  max-width:54ch;
  line-height:1.8;
  color:var(--on-dark);
}

.page-products .pp-zone-wrap{margin-top:30px}

.page-products .pp-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.page-products .pp-chip{
  font:inherit;
  font-size:13px;
  letter-spacing:.02em;
  padding:8px 15px;
  color:var(--on-dark);
  background:transparent;
  border:1px solid var(--pp-hair);
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.page-products .pp-chip:hover{border-color:var(--orange-soft);color:var(--on-dark-strong)}
.page-products .pp-chip.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:#12100E;
  font-weight:700;
}

.page-products .pp-zones{
  display:grid;
  gap:1px;
  background:var(--pp-hair);
  border:1px solid var(--pp-hair);
}
@media (min-width:640px){
  .page-products .pp-zones{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .page-products .pp-zones{grid-template-columns:repeat(3,1fr)}
}

.page-products .pp-zone{
  display:grid;
  gap:7px;
  padding:22px 18px;
  text-decoration:none;
  color:inherit;
  background:var(--green);
  border-left:3px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.page-products .pp-zone:hover{
  background:#12463A;
  border-left-color:var(--orange);
}
.page-products .pp-zone.is-hidden{display:none}

.page-products .pp-zone__no{
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:var(--orange);
}
.page-products .pp-zone:nth-child(2) .pp-zone__no{color:var(--cyan)}
.page-products .pp-zone:nth-child(3) .pp-zone__no{color:var(--lime)}
.page-products .pp-zone:nth-child(4) .pp-zone__no{color:var(--orange-soft)}
.page-products .pp-zone:nth-child(5) .pp-zone__no{color:var(--cyan)}
.page-products .pp-zone:nth-child(6) .pp-zone__no{color:var(--lime)}
.page-products .pp-zone__name{
  font-size:17px;
  font-weight:700;
  color:var(--on-dark-strong);
}
.page-products .pp-zone__round{
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--cyan);
}

.page-products .pp-zones__figure{margin:30px 0 0}
.page-products .pp-zones__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid rgba(46,110,112,.5);
}
.page-products .pp-zones__figure figcaption{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--on-dark);
}

/* ---------- 更新节奏 ---------- */
.page-products .pp-flow{padding:56px 0 64px}
.page-products .pp-flow .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--on-dark-strong);
}
.page-products .pp-flow .xy-head__desc{
  margin-top:12px;
  max-width:54ch;
  line-height:1.8;
  color:var(--on-dark);
}

.page-products .pp-flow__grid{margin-top:32px}

.page-products .pp-flow__steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--pp-hair);
  border:1px solid var(--pp-hair);
}
@media (min-width:760px){
  .page-products .pp-flow__steps{grid-template-columns:repeat(4,1fr)}
}
.page-products .pp-step{
  display:grid;
  gap:8px;
  align-content:start;
  padding:22px 18px;
  background:var(--green);
}
.page-products .pp-step__no{
  font-size:13px;
  letter-spacing:.16em;
  color:var(--orange);
}
.page-products .pp-step__t{
  font-size:16px;
  font-weight:700;
  color:var(--on-dark-strong);
}
.page-products .pp-step p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--on-dark);
}

.page-products .pp-flow__figure{margin:30px 0 0}
.page-products .pp-flow__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid rgba(46,110,112,.5);
}
.page-products .pp-flow__figure figcaption{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--on-dark);
}

/* ---------- 使用场景 ---------- */
.page-products .pp-scenes-sec{padding:56px 0 64px}
.page-products .pp-scenes-sec .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--ink);
}
.page-products .pp-scenes-sec .xy-head__desc{
  margin-top:12px;
  max-width:54ch;
  line-height:1.8;
  color:var(--ink-soft);
}

.page-products .pp-scenes{
  display:grid;
  gap:18px;
  margin-top:30px;
}
@media (min-width:760px){
  .page-products .pp-scenes{
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--pp-hair-ink);
    border:1px solid var(--pp-hair-ink);
  }
}
.page-products .pp-scene{
  display:grid;
  gap:8px;
  align-content:start;
  padding:24px 20px;
  background:var(--sand);
  border-left:3px solid var(--cyan);
}
.page-products .pp-scene:nth-child(2){border-left-color:var(--orange)}
.page-products .pp-scene:nth-child(3){border-left-color:var(--lime)}
.page-products .pp-scene:nth-child(4){border-left-color:var(--wine)}
.page-products .pp-scene__k{
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--wine);
}
.page-products .pp-scene h3{
  font-size:17px;
  line-height:1.45;
  color:var(--ink);
}
.page-products .pp-scene p{
  font-size:14.5px;
  line-height:1.78;
  color:var(--ink-soft);
}

/* ---------- 指向 ---------- */
.page-products .pp-next{padding:56px 0 68px}
.page-products .pp-next .xy-head__title{
  margin-top:10px;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.2;
  color:var(--ink);
}
.page-products .pp-next .xy-head__desc{
  margin-top:12px;
  max-width:54ch;
  line-height:1.8;
  color:var(--ink-soft);
}

.page-products .pp-next__list{
  list-style:none;
  margin:30px 0 0;
  padding:0;
  border-top:2px solid var(--orange);
}
.page-products .pp-next__list li{border-bottom:1px solid var(--pp-hair-ink)}
.page-products .pp-next__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:20px 4px;
  text-decoration:none;
  color:inherit;
  transition:background .2s var(--ease),padding-left .2s var(--ease);
}
.page-products .pp-next__item:hover{
  background:rgba(14,59,46,.06);
  padding-left:12px;
}
.page-products .pp-next__item .mono{
  font-size:16px;
  color:var(--orange);
  line-height:1.5;
}
.page-products .pp-next__item b{
  display:block;
  font-size:16px;
  color:var(--ink);
  margin-bottom:5px;
}
.page-products .pp-next__item i{
  display:block;
  font-style:normal;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}