.page-products{
  --pp-ink-line: rgba(242,246,251,.16);
  --pp-ink-line-strong: rgba(242,246,251,.3);
  --pp-navy-line: rgba(8,24,43,.14);
  background: var(--lt-navy);
  color: var(--lt-white);
  font-family: var(--lt-ff-body);
  line-height: 1.7;
}
.page-products *,
.page-products *::before,
.page-products *::after{ box-sizing: border-box; }
.page-products img{ display:block; max-width:100%; height:auto; }
.page-products h1,
.page-products h2,
.page-products h3{
  margin:0;
  font-family: var(--lt-ff-display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
}
.page-products p,
.page-products ul,
.page-products ol{ margin:0; }
.page-products ul,
.page-products ol{ padding:0; list-style:none; }
.page-products a{ color:inherit; }

/* 首屏面包屑 */
.page-products .lt-crumbs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-family: var(--lt-ff-mono);
  font-size:11px;
  letter-spacing:.12em;
  color: var(--lt-mist);
}
.page-products .lt-crumbs__link{ color: var(--lt-mist); text-decoration:none; }
.page-products .lt-crumbs__current{ color: var(--lt-white); }

/* 区块骨架 */
.pp-sec{ padding: clamp(40px,6vw,80px) 0; }
.pp-sec--ink{ background: var(--lt-ink); }
.pp-sec--ivory{ background: var(--lt-ivory); color: var(--lt-navy); }
.pp-sec--tactical{ background: var(--lt-tactical); }
.pp-sec--wine{ background: var(--lt-wine); }
.pp-sec--paper{ background: var(--lt-white); color: var(--lt-navy); }

.pp-eyebrow{
  font-family: var(--lt-ff-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--lt-signal);
  font-weight:500;
}
.pp-sec--ivory .pp-eyebrow,
.pp-sec--paper .pp-eyebrow{ color: var(--lt-teal); }
.pp-title{ font-size: clamp(26px,4vw,42px); margin-top:12px; }
.pp-h3{ font-size: clamp(18px,2vw,21px); margin-top:10px; }
.pp-sub{ margin-top:14px; max-width:34em; font-size:15.5px; }
.pp-muted{ color: var(--lt-mist); }
.pp-sec--ivory .pp-muted,
.pp-sec--paper .pp-muted{ color: rgba(8,24,43,.66); }
.pp-head{ margin-bottom: clamp(24px,3.5vw,40px); }

/* 首屏 */
.pp-hero{ padding-top: clamp(18px,3vw,30px); }
.pp-hero__grid{
  display:grid;
  gap: clamp(28px,5vw,48px);
  margin-top: clamp(22px,3vw,34px);
}
@media (min-width:960px){
  .pp-hero__grid{ grid-template-columns: minmax(0,5fr) minmax(0,7fr); align-items:center; }
}
.pp-hero__title{ font-size: clamp(34px,6.2vw,58px); line-height:1.02; margin-top:14px; }
.pp-lead{
  margin-top:18px;
  max-width:30em;
  font-size: clamp(15px,1.4vw,17px);
  color: rgba(242,246,251,.8);
}
.pp-points{ margin-top:22px; display:grid; gap:10px; }
.pp-points li{
  position:relative;
  padding-left:20px;
  font-size:14.5px;
  color: rgba(242,246,251,.78);
}
.pp-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  background: var(--lt-signal);
}
.pp-hero__actions{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* 设备框架 */
.pp-devices{ display:grid; gap:14px; }
.pp-devices__switch{ display:flex; flex-wrap:wrap; gap:8px; }
.pp-devices__stage{ position:relative; }
.pp-devices__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  opacity:.15;
  border-radius:2px;
}
.pp-devices__frames{ position:relative; display:grid; gap:16px; }
.pp-devices__frames > *{ min-width:0; }
@media (min-width:560px){
  .pp-devices__frames{
    grid-template-columns: minmax(0,178px) minmax(0,1fr);
    align-items:start;
    gap:18px;
  }
}
.pp-phone{
  margin:0;
  background: var(--lt-ink);
  border:1px solid var(--pp-ink-line-strong);
  border-radius:24px;
  padding:8px 8px 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}
.pp-phone__notch{
  display:block;
  width:46px;
  height:4px;
  border-radius:2px;
  background: rgba(242,246,251,.28);
  margin:6px auto 10px;
}
.pp-phone__screen{ display:grid; gap:0; }
.pp-phone__day{
  font-family: var(--lt-ff-mono);
  font-size:10px;
  letter-spacing:.14em;
  color: var(--lt-signal);
  padding:0 6px 8px;
}
.pp-fixture{ padding:9px 6px 10px; border-top:1px solid var(--pp-ink-line); }
.pp-window__screen .pp-fixture{ padding:10px 0; }
.pp-fixture__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.pp-fixture__meta{
  font-family: var(--lt-ff-mono);
  font-size:10px;
  color: var(--lt-mist);
}
.pp-fixture__score{
  font-family: var(--lt-ff-mono);
  font-weight:700;
  font-size:15px;
  color: var(--lt-white);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.pp-fixture__cards{ display:flex; gap:4px; margin-top:6px; }
.pp-mini{ display:block; width:8px; height:11px; border-radius:1px; }
.pp-mini--y{ background: var(--lt-card-yellow); }
.pp-mini--r{ background: var(--lt-red); }

.pp-window{
  border:1px solid var(--pp-ink-line-strong);
  border-radius:2px;
  background: rgba(4,12,22,.6);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  overflow:hidden;
}
.pp-window__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background: var(--lt-ink);
  border-bottom:1px solid var(--pp-ink-line);
}
.pp-dot{ display:block; width:7px; height:7px; border-radius:50%; background: rgba(242,246,251,.28); }
.pp-window__url{
  margin-left:6px;
  font-family: var(--lt-ff-mono);
  font-size:10.5px;
  color: var(--lt-mist);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pp-window__screen{ padding:14px; }
.pp-days{ display:flex; gap:6px; margin-bottom:8px; }
.pp-day{
  font-family: var(--lt-ff-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:3px 8px;
  border:1px solid var(--pp-ink-line);
  color: var(--lt-mist);
}
.pp-day--on{
  background: var(--lt-signal);
  border-color: var(--lt-signal);
  color: var(--lt-navy);
  font-weight:700;
}

/* 筛选 chips */
.pp-filterbar .lt-chip,
.pp-devices__switch .lt-chip{
  font-family: var(--lt-ff-mono);
  font-size:12px;
  letter-spacing:.06em;
  padding:7px 14px;
  border-radius:2px;
  border:1px solid rgba(242,246,251,.3);
  background: transparent;
  color: rgba(242,246,251,.85);
  cursor:pointer;
  transition: background .16s var(--lt-ease), color .16s var(--lt-ease), border-color .16s var(--lt-ease);
}
.pp-filterbar .lt-chip:hover,
.pp-devices__switch .lt-chip:hover{ border-color: var(--lt-signal); }
.pp-filterbar .lt-chip[aria-pressed="true"],
.pp-devices__switch .lt-chip[aria-pressed="true"]{
  background: var(--lt-signal);
  border-color: var(--lt-signal);
  color: var(--lt-navy);
  font-weight:700;
}

/* 图组 */
.pp-figure{ margin: clamp(24px,4vw,40px) 0 0; }
.pp-figure img{ width:100%; border-radius:2px; border:1px solid var(--pp-navy-line); object-fit:cover; }
.pp-sec--ink .pp-figure img,
.pp-sec--tactical .pp-figure img,
.pp-sec--wine .pp-figure img{ border-color: var(--pp-ink-line); }
.pp-caption{
  margin-top:8px;
  font-family: var(--lt-ff-mono);
  font-size:11px;
  letter-spacing:.06em;
  color: rgba(8,24,43,.55);
}
.pp-sec--ink .pp-caption,
.pp-sec--tactical .pp-caption,
.pp-sec--wine .pp-caption{ color: var(--lt-mist); }

/* 三种进入方式 */
.pp-ways{ display:grid; gap:14px; }
@media (min-width:760px){
  .pp-ways{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
}
.pp-way{
  background: #fff;
  border:1px solid var(--pp-navy-line);
  border-radius:2px;
  padding:20px;
  box-shadow: 0 2px 0 rgba(8,24,43,.04);
}
.pp-way .pp-way__idx{
  font-family: var(--lt-ff-mono);
  font-size:11px;
  letter-spacing:.14em;
  color: rgba(8,24,43,.5);
}
.pp-way h3{ color: var(--lt-navy); }
.pp-way p{ margin-top:8px; font-size:14.5px; color: rgba(8,24,43,.72); }

/* 功能矩阵 */
.pp-matrix{ display:grid; gap: clamp(24px,4vw,36px); }
@media (min-width:940px){
  .pp-matrix{ grid-template-columns: minmax(0,5fr) minmax(0,7fr); align-items:start; }
}
.pp-matrix__intro .pp-figure{ margin-top:26px; }
.pp-quads{ display:grid; gap:12px; }
@media (min-width:560px){
  .pp-quads{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.pp-quad{ padding:18px 18px 20px; border-radius:2px; border:1px solid transparent; }
.pp-quad__idx{
  font-family: var(--lt-ff-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
}
.pp-quad h3{ margin-top:8px; }
.pp-quad p{ margin-top:8px; font-size:14px; opacity:.86; }
.pp-quad--teal{ background: var(--lt-teal); color: var(--lt-white); border-color: rgba(242,246,251,.16); }
.pp-quad--indigo{ background: var(--lt-indigo); color: var(--lt-white); border-color: rgba(242,246,251,.14); }
.pp-quad--signal{ background: var(--lt-signal); color: var(--lt-navy); border-color: var(--lt-signal); }
.pp-quad--wine{ background: var(--lt-wine); color: var(--lt-white); border-color: rgba(242,246,251,.16); }

/* 红黄牌查询 */
.pp-paths{ display:grid; gap:14px; }
@media (min-width:760px){
  .pp-paths{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
}
.pp-path{
  background: rgba(4,12,22,.35);
  border:1px solid rgba(242,246,251,.18);
  border-radius:2px;
  padding:18px;
}
.pp-path__tag{
  font-family: var(--lt-ff-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color: var(--lt-signal);
}
.pp-path h3{ margin-top:8px; }
.pp-path p{ margin-top:8px; font-size:14px; color: rgba(242,246,251,.8); }

.pp-demo{ margin-top: clamp(28px,4vw,44px); }
.pp-filterbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pp-records{ margin-top:14px; display:grid; gap:8px; }
.pp-record{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background: rgba(4,12,22,.42);
  border:1px solid rgba(242,246,251,.14);
  border-left-width:3px;
  border-radius:2px;
}
.pp-record[data-tags="red"]{ border-left-color: var(--lt-red); }
.pp-record[data-tags="yellow"]{ border-left-color: var(--lt-card-yellow); }
.pp-record__card{ flex:0 0 auto; display:block; width:10px; height:14px; border-radius:1px; }
.pp-record__card--red{ background: var(--lt-red); }
.pp-record__card--yellow{ background: var(--lt-card-yellow); }
.pp-record__code{
  font-family: var(--lt-ff-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color: var(--lt-signal);
}
.pp-record__text{ margin-top:2px; font-size:14px; color: rgba(242,246,251,.85); }

/* 三步路径 */
.pp-steps{ display:grid; gap:14px; position:relative; }
@media (min-width:820px){
  .pp-steps{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
  .pp-steps::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:34px;
    height:1px;
    background: rgba(8,24,43,.16);
  }
}
.pp-step{
  position:relative;
  background: var(--lt-ivory);
  border:1px solid var(--pp-navy-line);
  border-radius:2px;
  padding:18px;
}
.pp-step__num{
  display:inline-block;
  font-family: var(--lt-ff-mono);
  font-weight:700;
  font-size:20px;
  line-height:1;
  padding:6px 9px;
  background: var(--lt-signal);
  color: var(--lt-navy);
  font-variant-numeric: tabular-nums;
}
.pp-step h3{ margin-top:12px; }
.pp-step p{ margin-top:8px; font-size:14px; color: rgba(8,24,43,.72); }
.pp-more{ margin-top:14px; border-top:1px solid var(--pp-navy-line); padding-top:10px; }
.pp-more summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  font-family: var(--lt-ff-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color: rgba(8,24,43,.7);
}
.pp-more summary::-webkit-details-marker{ display:none; }
.pp-more summary::after{ content:"+"; font-size:15px; line-height:1; }
.pp-more[open] summary::after{ content:"–"; }
.pp-more ul{ margin-top:10px; display:grid; gap:6px; font-size:13.5px; color: rgba(8,24,43,.72); }
.pp-more li{ position:relative; padding-left:14px; }
.pp-more li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  background: var(--lt-teal);
}
.page-products .pp-more a{ color: var(--lt-teal); text-decoration:none; border-bottom:1px solid rgba(12,59,58,.4); }

/* 浏览器支持 */
.pp-table-wrap{ margin-top:26px; overflow-x:auto; }
.pp-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:14px;
  text-align:left;
}
.pp-table caption{
  text-align:left;
  padding-bottom:10px;
  font-family: var(--lt-ff-mono);
  font-size:11px;
  letter-spacing:.1em;
  color: var(--lt-mist);
}
.pp-table thead th{
  padding:10px 12px;
  border-bottom:1px solid var(--pp-ink-line-strong);
  font-family: var(--lt-ff-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  color: var(--lt-mist);
}
.pp-table tbody th{
  padding:12px;
  border-bottom:1px solid var(--pp-ink-line);
  font-family: var(--lt-ff-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  color: var(--lt-white);
}
.pp-table td{
  padding:12px;
  border-bottom:1px solid var(--pp-ink-line);
  color: rgba(242,246,251,.84);
  vertical-align:top;
}
.pp-table tbody tr:hover{ background: rgba(255,210,63,.08); }
.pp-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family: var(--lt-ff-mono);
  font-size:12px;
}
.pp-status::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--lt-signal);
}
.pp-status--part::before{ background: var(--lt-card-yellow); }
.pp-status--std::before{ background: var(--lt-mist); }

.pp-notes{ display:grid; gap:16px; margin-top: clamp(28px,4vw,40px); }
@media (min-width:760px){
  .pp-notes{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:22px; }
}
.pp-note{ border-left:2px solid var(--lt-signal); padding-left:14px; }
.pp-note h3{ font-family: var(--lt-ff-body); font-size:15.5px; font-weight:600; letter-spacing:0; }
.pp-note p{ margin-top:6px; font-size:14px; color: rgba(242,246,251,.75); }

.pp-copyrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top: clamp(24px,3vw,32px);
  padding:16px 18px;
  border:1px solid var(--pp-ink-line-strong);
  background: rgba(4,12,22,.4);
  border-radius:2px;
}
.pp-copyrow__url{
  font-family: var(--lt-ff-mono);
  font-size:12.5px;
  color: var(--lt-mist);
  word-break:break-all;
}
.pp-links{
  margin-top: clamp(24px,3vw,32px);
  max-width:44em;
  font-size:14.5px;
  color: rgba(242,246,251,.75);
}
.page-products .pp-links a{
  color: var(--lt-signal);
  text-decoration:none;
  border-bottom:1px solid rgba(255,210,63,.4);
}
.page-products .pp-links a:hover{ border-bottom-color: var(--lt-signal); }

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