.page-products{
  --p-card:rgba(243,240,230,.045);
  --p-ink-soft:rgba(243,240,230,.74);
  --p-ink-dim:rgba(243,240,230,.58);
  color:var(--fog);
}

.page-products .p-topbar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.2rem;
  align-items:baseline;
  justify-content:space-between;
  padding-top:clamp(1rem,3vw,1.8rem);
  padding-bottom:clamp(.7rem,2vw,1.1rem);
  border-bottom:1px solid var(--line-soft);
}
.page-products .p-topbar__meta{
  margin:0;
  font-family:var(--font-num);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-products .p-intro{
  padding-top:clamp(1.8rem,5vw,3.4rem);
  padding-bottom:clamp(1.4rem,4vw,2.4rem);
}
.page-products .p-intro h1{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-size:clamp(1.85rem,6.2vw,3.4rem);
  line-height:1.08;
  letter-spacing:.005em;
  color:var(--fog);
  max-width:22ch;
}
.page-products .p-intro .lede{
  margin-top:1rem;
  max-width:64ch;
  font-size:clamp(.98rem,2.4vw,1.08rem);
  line-height:1.75;
  color:var(--p-ink-soft);
}

.page-products .p-jump{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1.5rem;
}
.page-products .p-jump__link{
  display:inline-block;
  padding:.42rem .8rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-num);
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--fog);
  text-decoration:none;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.page-products .p-jump__link:hover,
.page-products .p-jump__link[aria-current="location"]{
  border-color:var(--sodium);
  color:var(--sodium);
  background:rgba(255,194,75,.09);
}

.page-products .section-head h2{
  font-family:var(--font-display);
  line-height:1.14;
  letter-spacing:.005em;
}

/* 四块功能牌 */
.page-products .p-cards{
  list-style:none;
  margin:clamp(1.3rem,4vw,2.2rem) 0 0;
  padding:0;
  display:grid;
  gap:1rem;
}
.page-products .p-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:1.25rem 1.2rem 1.45rem;
  background:var(--p-card);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),0 100%);
  transition:translate var(--speed) var(--ease),border-color var(--speed) var(--ease);
}
.page-products .p-card::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-14px;
  height:30px;
  background:linear-gradient(90deg,transparent,var(--card-accent,var(--sodium)),transparent);
  opacity:.28;
  transform:skewY(-2.5deg);
  pointer-events:none;
}
.page-products .p-card:hover{
  translate:0 -4px;
  border-color:var(--card-accent,var(--sodium));
}
.page-products .p-card--lamp{--card-accent:var(--sodium);}
.page-products .p-card--grass{--card-accent:var(--grass);}
.page-products .p-card--cyan{--card-accent:var(--cyan);}
.page-products .p-card--red{--card-accent:var(--red);}
.page-products .p-card__num{
  margin:0 0 .55rem;
  font-family:var(--font-num);
  font-size:1.9rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--card-accent,var(--sodium));
  opacity:.9;
}
.page-products .p-card__title{
  margin:.55rem 0 .5rem;
  font-family:var(--font-display);
  font-size:clamp(1.1rem,3vw,1.32rem);
  line-height:1.25;
}
.page-products .p-card__title a{
  color:var(--fog);
  text-decoration:none;
  transition:color var(--speed) var(--ease);
}
.page-products .p-card__title a:hover{color:var(--card-accent,var(--sodium));}
.page-products .p-card__body{
  margin:0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--p-ink-soft);
}
.page-products .p-card__who{
  margin:.9rem 0 0;
  padding-top:.7rem;
  border-top:1px solid var(--line-soft);
  font-size:.8rem;
  line-height:1.6;
  color:var(--p-ink-dim);
}

/* 双栏模块 */
.page-products .p-split{
  display:grid;
  gap:clamp(1.3rem,4vw,2.4rem);
  align-items:start;
}
.page-products .p-split__text > p{
  margin:.9rem 0 0;
  font-size:.96rem;
  line-height:1.78;
  color:var(--p-ink-soft);
}
.page-products .p-figure{
  margin:0;
  border-radius:var(--r-l);
  overflow:hidden;
}
.page-products .p-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-products .p-stats{
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  overflow:hidden;
}
.page-products .p-stat{
  background:var(--concrete);
  padding:.95rem 1rem;
}
.page-products .p-stat__num{
  display:block;
  font-family:var(--font-num);
  font-size:1.7rem;
  line-height:1.1;
  color:var(--sodium);
}
.page-products .p-stat__label{
  display:block;
  margin-top:.35rem;
  font-size:.8rem;
  line-height:1.55;
  color:var(--p-ink-soft);
}

.page-products .p-ticks{
  list-style:none;
  margin:1.3rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.page-products .p-ticks li{
  padding:.35rem .75rem;
  border:1px solid rgba(46,125,91,.55);
  border-radius:999px;
  background:rgba(46,125,91,.14);
  font-size:.8rem;
  color:var(--mint);
}

/* 桌面端记录 */
.page-products .p-desktop-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem 1.6rem;
}
.page-products .p-verline{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  margin:0;
  padding:.55rem .9rem;
  border:1px solid rgba(255,194,75,.5);
  border-radius:var(--r-m);
  background:rgba(255,194,75,.07);
  font-family:var(--font-num);
}
.page-products .p-verline__num{
  font-size:clamp(1.9rem,6vw,2.8rem);
  line-height:1;
  color:var(--sodium);
}
.page-products .p-verline__label{
  font-size:.72rem;
  letter-spacing:.07em;
  color:var(--sodium-soft);
}
.page-products .p-desk-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1rem;
  margin:1.3rem 0 0;
}
.page-products .p-desk-actions__hint{
  font-size:.78rem;
  color:var(--p-ink-dim);
}

.page-products .p-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:1.2rem 0 1rem;
}
.page-products .p-chip{
  font:inherit;
  font-size:.8rem;
  padding:.38rem .82rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--fog);
  cursor:pointer;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.page-products .p-chip:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}
.page-products .p-chip[aria-pressed="true"]{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#04110d;
  font-weight:600;
}

.page-products .p-record-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.page-products .p-rec{
  display:grid;
  gap:.45rem;
  padding:.85rem .95rem;
  border:1px solid var(--line-soft);
  border-left:3px solid var(--cyan);
  border-radius:var(--r-m);
  background:var(--p-card);
}
.page-products .p-rec[hidden]{display:none;}
.page-products .p-rec__body{
  margin:0;
  font-size:.88rem;
  line-height:1.68;
  color:var(--p-ink-soft);
}

/* 测试版 */
.page-products .p-beta{
  display:grid;
  gap:clamp(1.3rem,4vw,2.4rem);
  align-items:center;
}
.page-products .p-beta__text > p{
  margin:.9rem 0 0;
  font-size:.96rem;
  line-height:1.78;
  color:var(--p-ink-soft);
}
.page-products .p-beta__panel{
  margin-top:1.2rem;
  border:1px solid rgba(232,70,58,.45);
  border-radius:var(--r-m);
  background:rgba(232,70,58,.07);
}
.page-products .p-beta__panel summary{
  cursor:pointer;
  padding:.82rem 1rem;
  font-size:.9rem;
  color:var(--sodium-soft);
  list-style:none;
}
.page-products .p-beta__panel summary::-webkit-details-marker{display:none;}
.page-products .p-beta__panel summary::after{
  content:"+";
  float:right;
  font-family:var(--font-num);
  color:var(--red);
}
.page-products .p-beta__panel[open] summary::after{content:"–";}
.page-products .p-beta__rows{
  display:grid;
  gap:.55rem;
  padding:0 1rem 1rem;
  font-size:.88rem;
  line-height:1.68;
  color:var(--p-ink-soft);
}
.page-products .p-beta__rows p{margin:0;}
.page-products .p-beta__rows strong{
  color:var(--fog);
  font-weight:600;
}

/* 对照表 */
.page-products .p-band{
  position:relative;
  margin:clamp(1.2rem,3vw,2rem) 0 0;
  border-radius:var(--r-l);
  overflow:hidden;
  line-height:0;
}
.page-products .p-band img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:12 / 4.4;
  object-fit:cover;
  opacity:.78;
}
.page-products .p-table-wrap{
  margin-top:clamp(1rem,2.6vw,1.6rem);
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  -webkit-overflow-scrolling:touch;
}
.page-products .p-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.87rem;
}
.page-products .p-table th,
.page-products .p-table td{
  padding:.78rem .9rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.page-products .p-table thead th{
  background:var(--concrete);
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.07em;
  color:var(--sodium);
}
.page-products .p-table tbody th{
  font-weight:600;
  color:var(--fog);
  white-space:nowrap;
}
.page-products .p-table td{
  color:var(--p-ink-soft);
  line-height:1.65;
}
.page-products .p-table tbody tr:hover td,
.page-products .p-table tbody tr:hover th{
  background:rgba(53,208,192,.08);
}
.page-products .p-table tbody tr:last-child th,
.page-products .p-table tbody tr:last-child td{
  border-bottom:0;
}

/* 后续入口 */
.page-products .p-next{
  display:grid;
  gap:1rem;
}
.page-products .p-next__lead{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  color:var(--fog);
}
.page-products .p-next__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.page-products .p-next__link{
  display:block;
  padding:.72rem .9rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-m);
  font-size:.9rem;
  line-height:1.55;
  color:var(--fog);
  text-decoration:none;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.page-products .p-next__link:hover{
  border-color:var(--sodium);
  color:var(--sodium);
  background:rgba(255,194,75,.07);
}

@media (min-width:640px){
  .page-products .p-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .p-rec{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.8rem;
  }
  .page-products .p-rec .tag{align-self:center;}
}

@media (min-width:860px){
  .page-products .p-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.3rem 1.5rem;
    padding-bottom:2.4rem;
  }
  .page-products .p-card:nth-child(2){transform:translateY(2.2rem);}
  .page-products .p-card:nth-child(4){transform:translateY(2.2rem);}
}

@media (min-width:900px){
  .page-products .p-split{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
  .page-products .p-beta{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }
  .page-products .p-next{
    grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
    align-items:start;
    gap:2rem;
  }
}

@media (min-width:1080px){
  .page-products .p-intro{padding-bottom:2.8rem;}
  .page-products .p-table{font-size:.9rem;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .p-card,
  .page-products .p-jump__link,
  .page-products .p-chip,
  .page-products .p-next__link{
    transition:none;
  }
  .page-products .p-card:hover{translate:none;}
}
<<<END>>>