.page-products {
  --pp-gap: 18px;
  --pp-rail-w: 248px;
  --pp-line: rgba(143, 184, 177, 0.18);
  color: var(--paper);
}

.page-products .section {
  padding-block: 64px;
}

.page-products .shell {
  width: 100%;
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: 20px;
}

.page-products .pp-hero__crumb {
  color: var(--mist);
}

/* ---------- Hero ---------- */
.page-products .pp-hero {
  position: relative;
  padding-block: 28px 48px;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(102, 242, 194, 0.10) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(201, 106, 61, 0.12) 0%, transparent 62%);
}

.page-products .pp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 20px;
}

.page-products .pp-hero__copy h1 {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 7.4vw, 56px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.page-products .pp-hero__copy .lede {
  max-width: 34em;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.8;
}

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

.page-products .pp-board {
  position: relative;
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(15, 42, 53, 0.9), rgba(6, 25, 35, 0.6));
  box-shadow: var(--shadow-panel);
}

.page-products .pp-board svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pp-board__score {
  position: absolute;
  right: 16px;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: clamp(52px, 15vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 0 18px rgba(102, 242, 194, 0.55), 0 0 2px rgba(102, 242, 194, 0.9);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.page-products .pp-board__score span {
  font-size: 0.36em;
  color: var(--mint);
  margin-left: 2px;
}

.page-products .pp-board__tag {
  position: absolute;
  left: 20px;
  bottom: 22px;
  padding: 5px 10px;
  border: 1px solid var(--edge-mint);
  border-radius: 999px;
  background: rgba(6, 25, 35, 0.8);
  color: var(--mint);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.page-products .pp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-stats .stat {
  padding: 16px 18px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.55);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .pp-stats .stat__value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  color: var(--mint);
  text-shadow: 0 0 14px rgba(102, 242, 194, 0.28);
  line-height: 1;
}

.page-products .pp-stats .stat__label {
  font-size: 12.5px;
  color: var(--mist);
  line-height: 1.5;
}

/* ---------- Zone: rail + bento ---------- */
.page-products .pp-zone__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-products .pp-rail {
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.62);
  padding: 16px;
}

.page-products .pp-rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pp-rail__link {
  display: inline-block;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  color: var(--mist);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-products .pp-rail__link:hover,
.page-products .pp-rail__link:focus-visible {
  color: var(--paper);
  border-color: var(--edge-strong);
}

.page-products .pp-rail__link.is-active {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  font-weight: 700;
}

.page-products .pp-rail__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--rock);
}

.page-products .pp-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .pp-cell {
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.55);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-cell--wide {
  padding: 14px;
  background: linear-gradient(150deg, rgba(15, 42, 53, 0.95), rgba(6, 25, 35, 0.75));
}

.page-products .pp-cell__media {
  margin: 0 0 4px;
}

.page-products .pp-cell__body {
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-cell__body .panel__title {
  margin: 0;
  font-size: clamp(20px, 4.4vw, 27px);
  line-height: 1.3;
  font-weight: 900;
}

.page-products .pp-cell__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-cell__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-cell__big {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(46px, 13vw, 68px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
  text-shadow: 0 0 20px rgba(102, 242, 194, 0.45);
  letter-spacing: -0.04em;
}

.page-products .pp-cell__big span {
  font-size: 0.32em;
  color: var(--paper);
  margin-left: 4px;
  letter-spacing: 0;
}

.page-products .pp-cell__mid {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 6vw, 30px);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.15;
}

.page-products .pp-cell--pulse {
  border-color: var(--edge-mint);
  background: linear-gradient(165deg, rgba(102, 242, 194, 0.10), rgba(15, 42, 53, 0.7));
}

.page-products .pp-cell--line {
  border-left: 3px solid var(--clay);
}

.page-products .pp-cell__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--arena);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .pp-cell__link span {
  margin-left: 6px;
}

.page-products .pp-cell__link:hover,
.page-products .pp-cell__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--arena);
}

/* ---------- Section heads ---------- */
.page-products .pp-head {
  max-width: 780px;
  margin-bottom: 34px;
}

.page-products .pp-head h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 5.2vw, 38px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page-products .pp-head__lede {
  margin: 0;
  color: var(--mist);
  font-size: 15.5px;
  line-height: 1.8;
  max-width: 40em;
}

/* ---------- Dimensions ---------- */
.page-products .pp-dims__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-products .pp-dims__figure {
  margin: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(15, 42, 53, 0.5);
  padding: 14px;
}

.page-products .pp-dims__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.page-products .pp-dims__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-dims__item {
  padding: 18px 20px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.45);
}

.page-products .pp-dims__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--moss);
  margin-bottom: 6px;
}

.page-products .pp-dims__item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .pp-dims__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-table-scroll {
  margin-top: 34px;
  overflow-x: auto;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.4);
  -webkit-overflow-scrolling: touch;
}

.page-products .pp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pp-table caption {
  padding: 16px 20px 6px;
  text-align: left;
  color: var(--rock);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.page-products .pp-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(70, 90, 96, 0.34);
  border-bottom: 1px solid var(--edge-strong);
  white-space: nowrap;
}

.page-products .pp-table tbody th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  color: var(--paper);
  white-space: nowrap;
}

.page-products .pp-table td {
  padding: 14px 18px;
  color: var(--mist);
  line-height: 1.6;
  border-bottom: 1px solid rgba(143, 184, 177, 0.10);
}

.page-products .pp-table tbody tr:nth-child(odd) {
  background: rgba(15, 42, 53, 0.62);
}

.page-products .pp-table tbody tr:hover {
  background: rgba(102, 242, 194, 0.07);
}

.page-products .pp-table tbody tr:last-child td,
.page-products .pp-table tbody tr:last-child th {
  border-bottom: 0;
}

/* ---------- Cases ---------- */
.page-products .pp-cases {
  background: linear-gradient(180deg, rgba(6, 25, 35, 0) 0%, rgba(15, 42, 53, 0.35) 50%, rgba(6, 25, 35, 0) 100%);
}

.page-products .pp-cases__banner {
  margin: 0 0 26px;
}

.page-products .pp-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .pp-case {
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.62);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-case--lg {
  background: linear-gradient(155deg, rgba(15, 42, 53, 0.95), rgba(6, 25, 35, 0.7));
  border-color: var(--edge-strong);
}

.page-products .pp-case h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--paper);
}

.page-products .pp-case > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 2px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(143, 184, 177, 0.12);
}

.page-products .pp-case__meta div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.page-products .pp-case__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rock);
  text-transform: uppercase;
}

.page-products .pp-case__meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--mint);
  font-weight: 600;
}

.page-products .pp-case__more {
  margin-top: 4px;
  border-top: 1px dashed rgba(143, 184, 177, 0.2);
  padding-top: 10px;
}

.page-products .pp-case__more summary {
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--arena);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s var(--ease);
}

.page-products .pp-case__more summary::-webkit-details-marker {
  display: none;
}

.page-products .pp-case__more summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--arena);
  width: 16px;
}

.page-products .pp-case__more[open] summary::before {
  content: "−";
}

.page-products .pp-case__more summary:hover,
.page-products .pp-case__more summary:focus-visible {
  color: var(--paper);
}

.page-products .pp-case__more p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  border-left: 2px solid var(--edge-mint);
  padding-left: 12px;
}

/* ---------- Choose ---------- */
.page-products .pp-choose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .pp-pick {
  padding: 24px 20px 20px;
  border: 1px solid var(--pp-line);
  border-top: 3px solid var(--clay);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-pick:nth-child(2) {
  border-top-color: var(--mint);
}

.page-products .pp-pick:nth-child(3) {
  border-top-color: var(--moss);
}

.page-products .pp-pick:nth-child(4) {
  border-top-color: var(--arena);
}

.page-products .pp-pick__who {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-pick h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
  line-height: 1.4;
}

.page-products .pp-pick p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-pick__hint {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(143, 184, 177, 0.2);
  font-size: 12.5px;
  color: var(--mint);
  font-weight: 600;
}

/* ---------- Follow ---------- */
.page-products .pp-follow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

.page-products .pp-follow__media {
  margin: 0;
}

.page-products .pp-follow__body h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.28;
}

.page-products .pp-follow__body > p {
  margin: 0 0 18px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.8;
}

.page-products .pp-follow__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .pp-follow__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--paper);
}

.page-products .pp-follow__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(102, 242, 194, 0.14);
}

/* ---------- Log ---------- */
.page-products .pp-log__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.page-products .pp-log__body h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.28;
}

.page-products .pp-log__body > p {
  margin: 0 0 22px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.8;
}

.page-products .pp-log__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-products .pp-log__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(143, 184, 177, 0.12);
}

.page-products .pp-log__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pp-log__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  border: 1px solid var(--edge-clay);
  border-radius: 999px;
  color: var(--arena);
  white-space: nowrap;
}

.page-products .pp-log__list h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .pp-log__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .pp-log__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pp-log__media {
  margin: 0;
}

/* ---------- CTA ---------- */
.page-products .pp-cta {
  padding-block: 20px 72px;
}

.page-products .pp-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 24px;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(201, 106, 61, 0.14), rgba(6, 25, 35, 0.2) 46%, rgba(102, 242, 194, 0.10));
}

.page-products .pp-cta__inner h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.8vw, 30px);
  font-weight: 900;
  line-height: 1.3;
}

.page-products .pp-cta__inner p {
  margin: 0;
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 40em;
}

.page-products .pp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Media helpers (page scope) ---------- */
.page-products .media {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--pp-line);
  background: rgba(6, 25, 35, 0.6);
}

.page-products .media__frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .media--wide .media__frame img {
  aspect-ratio: 16 / 9;
}

.page-products .media--tall .media__frame img {
  aspect-ratio: 4 / 3;
}

.page-products .media__caption {
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rock);
  border-top: 1px solid rgba(143, 184, 177, 0.12);
}

/* ---------- Responsive ---------- */
@media (min-width: 560px) {
  .page-products .pp-bento,
  .page-products .pp-matrix,
  .page-products .pp-choose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pp-dims__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .section {
    padding-block: 84px;
  }

  .page-products .pp-hero {
    padding-block: 36px 72px;
  }

  .page-products .pp-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }

  .page-products .pp-zone__grid {
    grid-template-columns: var(--pp-rail-w) minmax(0, 1fr);
    gap: 36px;
  }

  .page-products .pp-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .pp-rail__list {
    flex-direction: column;
    overflow: visible;
    gap: 6px;
  }

  .page-products .pp-rail__link {
    display: block;
    border-radius: var(--radius-sm);
    border-color: transparent;
    padding: 10px 12px;
  }

  .page-products .pp-rail__link:hover,
  .page-products .pp-rail__link:focus-visible {
    background: rgba(143, 184, 177, 0.08);
    border-color: var(--pp-line);
  }

  .page-products .pp-dims__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px;
  }

  .page-products .pp-dims__figure {
    position: sticky;
    top: 96px;
  }

  .page-products .pp-follow__grid,
  .page-products .pp-log__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .page-products .pp-log__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .page-products .pp-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 36px 40px;
  }

  .page-products .pp-cta__actions {
    flex: none;
  }
}

@media (min-width: 1080px) {
  .page-products .pp-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
  }

  .page-products .pp-cell--wide {
    grid-column: span 2;
  }

  .page-products .pp-matrix {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .pp-case--lg {
    grid-column: span 4;
  }

  .page-products .pp-case--sm {
    grid-column: span 2;
  }

  .page-products .pp-choose__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products * {
    transition-duration: 0.01ms !important;
  }
}
</main>
<<<END>>>

等等——我必须去掉末尾的 `</main>` 重复，并修正输出。`</main>` 应该只由 MAIN_HTML 块输出一次。让我重新正确地输出。

还要注意：“media--tall”用于 pp-follow__media 和 pp-log__media 时，我设置了 aspect-ratio 为 4/3——对于移动端 800x1400 的竖屏图片来说，这个比例不对。让我把 pp-log__media 的宽高比改成 4/5。其实更简单的是保留 `.media--tall`，但给 log 单独设置宽高比。

让我在页面作用域内加几条更具体的规则：

```css
.page-products .pp-log__media .media__frame img { aspect-ratio: 4 / 5; }
```

还有 pp-follow__media 用的是 1200x800，也就是 3:2——`.media--tall` 给的是 4/3，但接近；更好的做法是用 16/9？它是景深图，没关系。用 16/10 吧。我加一条 `.page-products .pp-follow__media .media__frame img { aspect-ratio: 3 / 2; }`。

还要确认一下——我在 MAIN_HTML 里写了两次 `</main>`？没有，只写了一次。但我在 CSS 后又加了 `<<<END>>>`——那是错的，因为格式就是两个标记。删掉它。

等等，看我的输出：结尾是 `</main>`，然后是 PAGE_CSS，然后是 CSS，再然后是 `<<<END>>>`……而且我要确保 MAIN_HTML 里没有多出来的 `</main>`。在 MAIN_HTML 结尾只有一次 `</main>`。

现在再检查：我在 HTML 里用了 `.pp-cell__body .panel__title`，`panel__title` 是全局类，没问题。

`h2` 使用 `panel__title` 类——可以接受。

再看一下 hero 里的 `.eyebrow`、`.lede`、`.btn`、`.breadcrumb`、`.stat` 这些类——都是全局的。

检查锚点：#dimensions、#cases、#choose、#follow、#log 都存在。很好。

数据属性：在几个单元格和卡片上用了 `data-reveal`。它包含在允许的列表里，没问题。

需要确保没有横向溢出——rail 列表在移动端有 overflow-x auto。表格滚动也处理了。

现在写最终版本。
<main id="main-content" class="page-products">
  <section class="pp-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑导航">
        <a class="breadcrumb__link" href="/">首页</a>
        <span class="breadcrumb__sep">/</span>
        <span class="pp-hero__crumb">赛事专区</span>
      </nav>

      <div class="pp-hero__grid">
        <div class="pp-hero__copy">
          <p class="eyebrow">Season Board · 赛事专区</p>
          <h1>频道版本、栏目结构、复盘案例，摊开在同一块板面上</h1>
          <p class="lede">非凡体育CN 把栏目对照、频道版本与赛后复盘收进了同一屏。您在左边选好赛季与版本，右边就能逐项比对栏目结构、数据颗粒度、回看时效和适配情况，再顺着案例卡片落到具体的观赛与复盘场景里。</p>
          <div class="pp-hero__cta">
            <a class="btn btn--primary" href="#dimensions">看四项对照</a>
            <a class="btn btn--ghost" href="#cases">翻案例合集</a>
          </div>
        </div>

        <div class="pp-hero__visual">
          <div class="pp-board">
            <svg viewBox="0 0 440 440" role="img" aria-label="版本维度四象限战术板示意">
              <rect x="1" y="1" width="438" height="438" rx="26" fill="none" stroke="rgba(143,184,177,0.28)" />
              <line x1="220" y1="34" x2="220" y2="406" stroke="rgba(143,184,177,0.26)" stroke-dasharray="6 9" />
              <line x1="34" y1="220" x2="406" y2="220" stroke="rgba(143,184,177,0.26)" stroke-dasharray="6 9" />
              <circle cx="220" cy="220" r="148" fill="none" stroke="rgba(102,242,194,0.20)" stroke-dasharray="3 8" />
              <circle cx="220" cy="220" r="88" fill="none" stroke="rgba(102,242,194,0.14)" />
              <path d="M148 148 L320 166 L330 302 L194 314 Z" fill="rgba(102,242,194,0.06)" stroke="#66F2C2" stroke-opacity="0.45" stroke-width="2" />
              <path d="M148 148 L194 314" stroke="rgba(240,138,75,0.55)" stroke-width="1.5" stroke-dasharray="4 6" />
              <path d="M320 166 L330 302" stroke="rgba(201,106,61,0.55)" stroke-width="1.5" stroke-dasharray="4 6" />
              <circle cx="148" cy="148" r="7" fill="#66F2C2" />
              <circle cx="320" cy="166" r="5.5" fill="#F08A4B" />
              <circle cx="194" cy="314" r="5.5" fill="#C96A3D" />
              <circle cx="330" cy="302" r="4.5" fill="#6F8E73" />
              <text x="60" y="72" fill="rgba(143,184,177,0.75)" font-size="13" font-family="monospace">Q1</text>
              <text x="368" y="72" fill="rgba(143,184,177,0.75)" font-size="13" font-family="monospace">Q2</text>
              <text x="60" y="386" fill="rgba(143,184,177,0.75)" font-size="13" font-family="monospace">Q3</text>
              <text x="368" y="386" fill="rgba(143,184,177,0.75)" font-size="13" font-family="monospace">Q4</text>
            </svg>
            <span class="pp-board__score">30<span>s</span></span>
            <span class="pp-board__tag">单节结束刷新</span>
          </div>
        </div>
      </div>

      <ul class="pp-stats">
        <li class="stat">
          <span class="stat__value">240+</span>
          <span class="stat__label">国内赛事栏目版本样本</span>
        </li>
        <li class="stat">
          <span class="stat__value">36</span>
          <span class="stat__label">赛事频道对照样本</span>
        </li>
        <li class="stat">
          <span class="stat__value">1,860</span>
          <span class="stat__label">赛事案例合集条目</span>
        </li>
        <li class="stat">
          <span class="stat__value">60+</span>
          <span class="stat__label">每月新增案例</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section pp-zone" id="zone">
    <div class="shell pp-zone__grid">
      <aside class="pp-rail" aria-label="版本与段落选择">
        <p class="pp-rail__title">版本与段落</p>
        <ul class="pp-rail__list">
          <li><a class="pp-rail__link is-active" href="#dimensions">四项对照</a></li>
          <li><a class="pp-rail__link" href="#cases">案例合集</a></li>
          <li><a class="pp-rail__link" href="#choose">版本组合</a></li>
          <li><a class="pp-rail__link" href="#follow">关注与刷新</a></li>
          <li><a class="pp-rail__link" href="#log">更新简报</a></li>
        </ul>
        <p class="pp-rail__note">赛季切换在页首刊头，选好赛季再进对照，看到的样本与案例就跟着换。</p>
      </aside>

      <div class="pp-bento">
        <article class="pp-cell pp-cell--wide" data-reveal>
          <figure class="media media--wide pp-cell__media">
            <div class="media__frame">
              <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="暗色桌面上并排的赛事版本卡片、战术板线条与数据标注" decoding="async">
            </div>
            <figcaption class="media__caption">版本卡片与坐标标注并排铺开，一屏内完成频道与栏目的比对</figcaption>
          </figure>
          <div class="pp-cell__body">
            <p class="tag tag--mint">同页对照</p>
            <h2 class="panel__title">从频道到复盘，少走三层跳转</h2>
            <p class="pp-cell__text">旧版要翻三层菜单才能摸到目标栏目，现在左侧选定版本、右侧直接展开栏目结构与回看时效。看完对照顺手点开案例，赛后复盘在同一处收尾。</p>
            <a class="pp-cell__link" href="#dimensions">进入对照表<span aria-hidden="true">→</span></a>
          </div>
        </article>

        <article class="pp-cell pp-cell--pulse" data-reveal>
          <p class="pp-cell__kicker">刷新状态</p>
          <p class="pp-cell__big">30<span>秒</span></p>
          <p class="pp-cell__text">每节结束 30 秒内，比分与回看集锦同步落到页面上。</p>
        </article>

        <article class="pp-cell" data-reveal>
          <p class="pp-cell__kicker">样本规模</p>
          <p class="pp-cell__mid">240+ / 36</p>
          <p class="pp-cell__text">栏目版本样本与赛事频道对照样本，覆盖篮球、足球、综合赛事与地方赛事四类。</p>
        </article>

        <article class="pp-cell" data-reveal>
          <p class="pp-cell__kicker">案例库</p>
          <p class="pp-cell__mid">1,860 条</p>
          <p class="pp-cell__text">按场景归好的复盘条目，每月再补 60 条以上。</p>
        </article>

        <article class="pp-cell pp-cell--line" data-reveal>
          <p class="pp-cell__kicker">版本节奏</p>
          <p class="pp-cell__text">每日巡检比分与集锦，每月出一份版本对照简报，每季度回头梳理一次版本库。</p>
          <a class="pp-cell__link" href="/trends/">看趋势观察<span aria-hidden="true">→</span></a>
        </article>
      </div>
    </div>
  </section>

  <section class="section pp-dims" id="dimensions">
    <div class="shell">
      <header class="pp-head">
        <p class="eyebrow">01 / 对照维度</p>
        <h2>非凡体育赛事栏目对比评测，四项维度逐一摊开</h2>
        <p class="pp-head__lede">同样是国内赛事频道，差别往往藏在栏目怎么分区、数据细到什么程度、回看迟不迟。拿这四项过一遍，选哪个版本心里就有数了。</p>
      </header>

      <div class="pp-dims__grid">
        <figure class="pp-dims__figure">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="手绘四象限坐标板，标注栏目结构、数据颗粒度、回看时效与版本适配" loading="lazy" decoding="async">
        </figure>

        <ol class="pp-dims__list">
          <li class="pp-dims__item">
            <span class="pp-dims__no">01</span>
            <h3>栏目结构</h3>
            <p>频道下面怎么分赛事、赛事下面怎么挂复盘。分区清楚，找一场比赛和它的回看不会绕路。</p>
          </li>
          <li class="pp-dims__item">
            <span class="pp-dims__no">02</span>
            <h3>数据颗粒度</h3>
            <p>从整场比分到单节、单项乃至事件级。带球队复盘的人需要更细的颗粒，只看胜负的人不必。</p>
          </li>
          <li class="pp-dims__item">
            <span class="pp-dims__no">03</span>
            <h3>回看时效</h3>
            <p>比分与集锦什么时候到位。节间刷新够快，临场讨论和赛后写稿都赶得上节奏。</p>
          </li>
          <li class="pp-dims__item">
            <span class="pp-dims__no">04</span>
            <h3>版本适配</h3>
            <p>桌面、平板、手机上的排布差异。手机端版面重排得好不好，直接决定路上还能不能看完一节。</p>
          </li>
        </ol>
      </div>

      <div class="pp-table-scroll">
        <table class="pp-table">
          <caption>四类常见频道版本的能力对照</caption>
          <thead>
            <tr>
              <th scope="col">版本类型</th>
              <th scope="col">栏目结构</th>
              <th scope="col">数据颗粒度</th>
              <th scope="col">回看时效</th>
              <th scope="col">适合谁</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">现行对照版</th>
              <td>频道 → 赛事 → 复盘，一屏分区</td>
              <td>单节 / 单项 / 事件级</td>
              <td>单节结束 30 秒内</td>
              <td>深度复盘与临场跟赛</td>
            </tr>
            <tr>
              <th scope="row">旧版三级菜单</th>
              <td>三层折叠，逐级进入</td>
              <td>整场级</td>
              <td>延后一场到位</td>
              <td>偶尔看一眼结果</td>
            </tr>
            <tr>
              <th scope="row">地方赛事频道版</th>
              <td>按地区分组，赛事并列</td>
              <td>场次级</td>
              <td>单节结束 30 秒内</td>
              <td>本地赛事跟踪</td>
            </tr>
            <tr>
              <th scope="row">综合赛事版</th>
              <td>多项目并列，分项入口</td>
              <td>项目级</td>
              <td>时段结束后同步</td>
              <td>多项目轮换观看</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="section pp-cases" id="cases">
    <div class="shell">
      <header class="pp-head">
        <p class="eyebrow">02 / 案例合集</p>
        <h2>非凡体育赛事案例合集评测，从真实场景倒推版本</h2>
        <p class="pp-head__lede">先看别人怎么用，再决定自己选哪个版本。案例按运动类型归好，每张卡片标注刷新时效，点开就是复盘场景。</p>
      </header>

      <figure class="media media--wide pp-cases__banner">
        <div class="media__frame">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="球场俯视线条与案例卡片网格叠合的低对比抽象图形" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__caption">案例卡片按运动类型排布，大小错落，先抓重点再看细项</figcaption>
      </figure>

      <div class="pp-matrix">
        <article class="pp-case pp-case--lg" data-reveal>
          <p class="tag tag--clay">篮球</p>
          <h3>节间抢发稿的内容团队</h3>
          <p>一节打完就要出图文，靠的是节间 30 秒内的比分与集锦同步，加上事件级数据直接抄进稿子。</p>
          <dl class="pp-case__meta">
            <div><dt>刷新时效</dt><dd>单节结束 30 秒内</dd></div>
            <div><dt>推荐维度</dt><dd>数据颗粒度 + 回看时效</dd></div>
          </dl>
          <details class="pp-case__more">
            <summary>展开复盘场景</summary>
            <p>赛前把关注的球队固定好，比赛中盯节间刷新，节末立刻调取本节的比分变化和关键事件；稿件落地后再用回看集锦补画面描述，整条链路不用切出专区。</p>
          </details>
        </article>

        <article class="pp-case pp-case--sm" data-reveal>
          <p class="tag tag--mint">足球</p>
          <h3>半场集中复盘的教练组</h3>
          <p>半场结束前把上半场的失球过程和阵型变化翻出来，逐段对照。</p>
          <dl class="pp-case__meta">
            <div><dt>刷新时效</dt><dd>阶段结束即同步</dd></div>
          </dl>
          <details class="pp-case__more">
            <summary>展开复盘场景</summary>
            <p>选用颗粒度更细的版本，把上半场切成若干片段；中场休息时逐段回看，配合栏目结构里串好的事件时间轴，快速定位问题段落。</p>
          </details>
        </article>

        <article class="pp-case pp-case--sm" data-reveal>
          <p class="tag tag--moss">综合赛事</p>
          <h3>多项目轮换的编辑台</h3>
          <p>一天里几场比赛接着来，需要分项入口来回切而不丢上下文。</p>
          <dl class="pp-case__meta">
            <div><dt>刷新时效</dt><dd>时段结束后同步</dd></div>
          </dl>
          <details class="pp-case__more">
            <summary>展开复盘场景</summary>
            <p>综合赛事版按项目并列分区，编辑台把当天赛程铺开，哪场结束就先处理哪场，回看集锦与比分在同一个入口调取，省去反复跳转。</p>
          </details>
        </article>

        <article class="pp-case pp-case--lg" data-reveal>
          <p class="tag tag--clay">地方赛事</p>
          <h3>地方频道的赛季跟踪</h3>
          <p>本地球队比赛散在不同时段，按地区分组后整季脉络一眼看得清，长期跟踪不用每次重建入口。</p>
          <dl class="pp-case__meta">
            <div><dt>刷新时效</dt><dd>单节结束 30 秒内</dd></div>
            <div><dt>推荐维度</dt><dd>栏目结构 + 版本适配</dd></div>
          </dl>
          <details class="pp-case__more">
            <summary>展开复盘场景</summary>
            <p>地方频道版把同一地区的赛事收进一组，赛季中反复回到同一栏位即可；手机端重排后标签横向排开，外出采访也能随时核对比分。</p>
          </details>
        </article>
      </div>
    </div>
  </section>

  <section class="section pp-choose" id="choose">
    <div class="shell">
      <header class="pp-head">
        <p class="eyebrow">03 / 版本组合</p>
        <h2>国内体育赛事版本选择参考：按您的位置来挑</h2>
        <p class="pp-head__lede">没有哪个版本对所有场景都合适。把观赛设备、复盘深度和关注球队放进同一张表里看，答案通常自己就浮出来了。</p>
      </header>

      <div class="pp-choose__grid">
        <article class="pp-pick" data-reveal>
          <p class="pp-pick__who">普通球迷 · 手机为主</p>
          <h3>现行对照版 + 关注球队</h3>
          <p>路上刷比分、回家看集锦。把球队固定下来，首页进去就是自己的赛程和结果，节间刷新足够跟上直播节奏。</p>
          <p class="pp-pick__hint">优先看：回看时效、版本适配</p>
        </article>

        <article class="pp-pick" data-reveal>
          <p class="pp-pick__who">赛事内容团队 · 桌面办公</p>
          <h3>现行对照版 + 事件级数据</h3>
          <p>写稿要抓细节，事件级颗粒能支撑完整的叙述；分区清楚的栏目结构让素材按比赛归档，出稿更快。</p>
          <p class="pp-pick__hint">优先看：数据颗粒度、栏目结构</p>
        </article>

        <article class="pp-pick" data-reveal>
          <p class="pp-pick__who">地方频道运营者 · 手机与平板</p>
          <h3>地方赛事频道版 + 横向标签</h3>
          <p>地区分组贴合日常排期，移动端横向滑动切栏目，现场拍摄间隙也能核对比分和进度。</p>
          <p class="pp-pick__hint">优先看：栏目结构、版本适配</p>
        </article>

        <article class="pp-pick" data-reveal>
          <p class="pp-pick__who">媒体与品牌合作方 · 多项目并行</p>
          <h3>综合赛事版 + 对照表</h3>
          <p>跨项目观察需要并排信息，分项入口把一天赛程铺平；需要对外说明时，直接引用四项维度的对照结果。</p>
          <p class="pp-pick__hint">优先看：四项维度综合比较</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section pp-follow" id="follow">
    <div class="shell pp-follow__grid">
      <figure class="media media--tall pp-follow__media">
        <div class="media__frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场比分牌数字与刷新状态灯的抽象特写" loading="lazy" decoding="async">
        </div>
      </figure>

      <div class="pp-follow__body">
        <p class="eyebrow">04 / 关注与刷新</p>
        <h2>把球队固定下来，比分和集锦自己会送到眼前</h2>
        <p>在赛事专区关注球队之后，相关比分、回看集锦和赛后复盘都归到同一个入口。节间休息那几十秒，页面会把刚结束一节的比分和关键片段推上来，您不用来回翻菜单找人。</p>
        <ul class="pp-follow__list">
          <li><span class="pp-follow__dot" aria-hidden="true"></span>每节结束 30 秒内，比分与集锦同步落在页面上</li>
          <li><span class="pp-follow__dot" aria-hidden="true"></span>关注的球队跨越篮球、足球、综合赛事与地方赛事四类</li>
          <li><span class="pp-follow__dot" aria-hidden="true"></span>桌面端与移动端看到的是同一份对照结果</li>
          <li><span class="pp-follow__dot" aria-hidden="true"></span>发现比分或集锦异常，附截图与时间戳发给客服即可</li>
        </ul>
        <a class="btn btn--ghost" href="/support/">遇到问题去支持中心</a>
      </div>
    </div>
  </section>

  <section class="section pp-log" id="log">
    <div class="shell pp-log__grid">
      <div class="pp-log__body">
        <p class="eyebrow">05 / 更新简报</p>
        <h2>版本对照简报，每月跟着赛季走</h2>
        <p>频道改版、栏目合并、回看规则调整，都会在下一个月度简报里出现。每季度我们还会把版本库整体回看一遍，把不再适用的对照样本替换掉，让您下次再来挑版本时看到的是当下的样子。</p>
        <ul class="pp-log__list">
          <li>
            <span class="pp-log__tag">每月</span>
            <div>
              <h3>版本对照简报</h3>
              <p>汇总当月国内赛事频道的栏目变化与对照结论，趋势观察里长期挂着。</p>
            </div>
          </li>
          <li>
            <span class="pp-log__tag">每季度</span>
            <div>
              <h3>版本库回顾</h3>
              <p>把 240+ 个栏目版本样本与 36 个频道样本过一遍，整理出仍然有效的对照维度。</p>
            </div>
          </li>
          <li>
            <span class="pp-log__tag">每日</span>
            <div>
              <h3>比分与集锦巡检</h3>
              <p>逐场核对刷新是否按时到位，异常当场记录。</p>
            </div>
          </li>
        </ul>
        <div class="pp-log__links">
          <a class="btn btn--primary" href="/trends/">去趋势观察看专题</a>
          <a class="btn btn--ghost" href="/overview/">了解十年运营</a>
        </div>
      </div>

      <figure class="media media--tall pp-log__media">
        <div class="media__frame">
          <img src="{zhanqunpic:h:1400w:800}" width="800" height="1400" alt="暗色移动端赛事界面抽象框线，标签横向排列并显示比分" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__caption">手机上标签横向滑动，卡片顺序自动重排</figcaption>
      </figure>
    </div>
  </section>

  <section class="section--tight pp-cta">
    <div class="shell pp-cta__inner">
      <div>
        <h2>还没定下来选哪个版本？</h2>
        <p>把您的观赛习惯或频道排期说清楚，客服会给出一份具体的对照建议。</p>
      </div>
      <div class="pp-cta__actions">
        <a class="btn btn--primary" href="/reach-us/">联系客服</a>
        <a class="btn btn--ghost" href="/support/">先看常见问题</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pp-gap: 18px;
  --pp-rail-w: 248px;
  --pp-line: rgba(143, 184, 177, 0.18);
  color: var(--paper);
}

.page-products .section {
  padding-block: 64px;
}

.page-products .shell {
  width: 100%;
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: 20px;
}

.page-products .pp-hero__crumb {
  color: var(--mist);
}

/* ---------- Hero ---------- */
.page-products .pp-hero {
  position: relative;
  padding-block: 28px 48px;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(102, 242, 194, 0.10) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(201, 106, 61, 0.12) 0%, transparent 62%);
}

.page-products .pp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 20px;
}

.page-products .pp-hero__copy h1 {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 7.4vw, 56px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.page-products .pp-hero__copy .lede {
  max-width: 34em;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.8;
}

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

.page-products .pp-board {
  position: relative;
  padding: 22px 22px 40px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(15, 42, 53, 0.9), rgba(6, 25, 35, 0.6));
  box-shadow: var(--shadow-panel);
}

.page-products .pp-board svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pp-board__score {
  position: absolute;
  right: 16px;
  bottom: 4px;
  font-family: var(--font-mono);
  font-size: clamp(52px, 15vw, 92px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 0 18px rgba(102, 242, 194, 0.55), 0 0 2px rgba(102, 242, 194, 0.9);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.page-products .pp-board__score span {
  font-size: 0.36em;
  color: var(--mint);
  margin-left: 2px;
}

.page-products .pp-board__tag {
  position: absolute;
  left: 20px;
  bottom: 22px;
  padding: 5px 10px;
  border: 1px solid var(--edge-mint);
  border-radius: 999px;
  background: rgba(6, 25, 35, 0.8);
  color: var(--mint);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.page-products .pp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.55);
}

.page-products .pp-stats .stat__value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
  text-shadow: 0 0 14px rgba(102, 242, 194, 0.28);
}

.page-products .pp-stats .stat__label {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist);
}

/* ---------- Zone: rail + bento ---------- */
.page-products .pp-zone__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-products .pp-rail {
  padding: 16px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.62);
}

.page-products .pp-rail__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pp-rail__link {
  display: inline-block;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  color: var(--mist);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-products .pp-rail__link:hover,
.page-products .pp-rail__link:focus-visible {
  color: var(--paper);
  border-color: var(--edge-strong);
}

.page-products .pp-rail__link.is-active {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--mint);
  font-weight: 700;
}

.page-products .pp-rail__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--rock);
}

.page-products .pp-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .pp-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.55);
}

.page-products .pp-cell--wide {
  padding: 14px;
  background: linear-gradient(150deg, rgba(15, 42, 53, 0.95), rgba(6, 25, 35, 0.75));
}

.page-products .pp-cell__media {
  margin: 0 0 4px;
}

.page-products .pp-cell__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 4px;
}

.page-products .pp-cell__body .panel__title {
  margin: 0;
  font-size: clamp(20px, 4.4vw, 27px);
  font-weight: 900;
  line-height: 1.3;
}

.page-products .pp-cell__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-cell__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-cell__big {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(46px, 13vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mint);
  text-shadow: 0 0 20px rgba(102, 242, 194, 0.45);
}

.page-products .pp-cell__big span {
  margin-left: 4px;
  font-size: 0.32em;
  letter-spacing: 0;
  color: var(--paper);
}

.page-products .pp-cell__mid {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--paper);
}

.page-products .pp-cell--pulse {
  border-color: var(--edge-mint);
  background: linear-gradient(165deg, rgba(102, 242, 194, 0.10), rgba(15, 42, 53, 0.7));
}

.page-products .pp-cell--line {
  border-left: 3px solid var(--clay);
}

.page-products .pp-cell__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--arena);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .pp-cell__link span {
  margin-left: 6px;
}

.page-products .pp-cell__link:hover,
.page-products .pp-cell__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--arena);
}

/* ---------- Section heads ---------- */
.page-products .pp-head {
  max-width: 780px;
  margin-bottom: 34px;
}

.page-products .pp-head h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 5.2vw, 38px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page-products .pp-head__lede {
  margin: 0;
  max-width: 40em;
  color: var(--mist);
  font-size: 15.5px;
  line-height: 1.8;
}

/* ---------- Dimensions ---------- */
.page-products .pp-dims__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-products .pp-dims__figure {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.5);
}

.page-products .pp-dims__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.page-products .pp-dims__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-dims__item {
  padding: 18px 20px;
  border: 1px solid var(--pp-line);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.45);
}

.page-products .pp-dims__no {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--moss);
}

.page-products .pp-dims__item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .pp-dims__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-table-scroll {
  margin-top: 34px;
  overflow-x: auto;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.4);
  -webkit-overflow-scrolling: touch;
}

.page-products .pp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pp-table caption {
  padding: 16px 20px 6px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-table thead th {
  padding: 14px 18px;
  text-align: left;
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(70, 90, 96, 0.34);
  border-bottom: 1px solid var(--edge-strong);
}

.page-products .pp-table tbody th {
  padding: 14px 18px;
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  color: var(--paper);
}

.page-products .pp-table td {
  padding: 14px 18px;
  color: var(--mist);
  line-height: 1.6;
  border-bottom: 1px solid rgba(143, 184, 177, 0.10);
}

.page-products .pp-table tbody tr:nth-child(odd) {
  background: rgba(15, 42, 53, 0.62);
}

.page-products .pp-table tbody tr:hover {
  background: rgba(102, 242, 194, 0.07);
}

.page-products .pp-table tbody tr:last-child td,
.page-products .pp-table tbody tr:last-child th {
  border-bottom: 0;
}

/* ---------- Cases ---------- */
.page-products .pp-cases {
  background: linear-gradient(180deg, rgba(6, 25, 35, 0) 0%, rgba(15, 42, 53, 0.35) 50%, rgba(6, 25, 35, 0) 100%);
}

.page-products .pp-cases__banner {
  margin: 0 0 26px;
}

.page-products .pp-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .pp-case {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(15, 42, 53, 0.62);
}

.page-products .pp-case--lg {
  border-color: var(--edge-strong);
  background: linear-gradient(155deg, rgba(15, 42, 53, 0.95), rgba(6, 25, 35, 0.7));
}

.page-products .pp-case h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--paper);
}

.page-products .pp-case > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 2px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(143, 184, 177, 0.12);
}

.page-products .pp-case__meta div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.page-products .pp-case__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-case__meta dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
}

.page-products .pp-case__more {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(143, 184, 177, 0.2);
}

.page-products .pp-case__more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--arena);
  transition: color 0.2s var(--ease);
}

.page-products .pp-case__more summary::-webkit-details-marker {
  display: none;
}

.page-products .pp-case__more summary::before {
  content: "+";
  width: 16px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--arena);
}

.page-products .pp-case__more[open] summary::before {
  content: "−";
}

.page-products .pp-case__more summary:hover,
.page-products .pp-case__more summary:focus-visible {
  color: var(--paper);
}

.page-products .pp-case__more p {
  margin: 10px 0 0;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
  border-left: 2px solid var(--edge-mint);
}

/* ---------- Choose ---------- */
.page-products .pp-choose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .pp-pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px 20px;
  border: 1px solid var(--pp-line);
  border-top: 3px solid var(--clay);
  border-radius: var(--radius-sm);
  background: rgba(15, 42, 53, 0.5);
}

.page-products .pp-pick:nth-child(2) {
  border-top-color: var(--mint);
}

.page-products .pp-pick:nth-child(3) {
  border-top-color: var(--moss);
}

.page-products .pp-pick:nth-child(4) {
  border-top-color: var(--arena);
}

.page-products .pp-pick__who {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rock);
}

.page-products .pp-pick h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--paper);
}

.page-products .pp-pick p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-products .pp-pick__hint {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(143, 184, 177, 0.2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mint);
}

/* ---------- Follow ---------- */
.page-products .pp-follow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

.page-products .pp-follow__media {
  margin: 0;
}

.page-products .pp-follow__media .media__frame img {
  aspect-ratio: 3 / 2;
}

.page-products .pp-follow__body h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.28;
}

.page-products .pp-follow__body > p {
  margin: 0 0 18px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.8;
}

.page-products .pp-follow__list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.page-products .pp-follow__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--paper);
}

.page-products .pp-follow__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(102, 242, 194, 0.14);
}

/* ---------- Log ---------- */
.page-products .pp-log__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.page-products .pp-log__body h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.28;
}

.page-products .pp-log__body > p {
  margin: 0 0 22px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.8;
}

.page-products .pp-log__list {
  display: grid;
  gap: 16px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.page-products .pp-log__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(143, 184, 177, 0.12);
}

.page-products .pp-log__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .pp-log__tag {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--edge-clay);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--arena);
  white-space: nowrap;
}

.page-products .pp-log__list h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .pp-log__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .pp-log__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pp-log__media {
  margin: 0;
}

.page-products .pp-log__media .media__frame img {
  aspect-ratio: 4 / 5;
}

/* ---------- CTA ---------- */
.page-products .pp-cta {
  padding-block: 20px 72px;
}

.page-products .pp-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 24px;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(201, 106, 61, 0.14), rgba(6, 25, 35, 0.2) 46%, rgba(102, 242, 194, 0.10));
}

.page-products .pp-cta__inner h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.8vw, 30px);
  font-weight: 900;
  line-height: 1.3;
}

.page-products .pp-cta__inner p {
  margin: 0;
  max-width: 40em;
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.75;
}

.page-products .pp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Media helpers ---------- */
.page-products .media {
  overflow: hidden;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius);
  background: rgba(6, 25, 35, 0.6);
}

.page-products .media__frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .media--wide .media__frame img {
  aspect-ratio: 16 / 9;
}

.page-products .media--tall .media__frame img {
  aspect-ratio: 4 / 3;
}

.page-products .media__caption {
  padding: 10px 14px;
  border-top: 1px solid rgba(143, 184, 177, 0.12);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rock);
}

/* ---------- Responsive ---------- */
@media (min-width: 560px) {
  .page-products .pp-bento,
  .page-products .pp-matrix,
  .page-products .pp-choose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pp-dims__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .section {
    padding-block: 84px;
  }

  .page-products .pp-hero {
    padding-block: 36px 72px;
  }

  .page-products .pp-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }

  .page-products .pp-zone__grid {
    grid-template-columns: var(--pp-rail-w) minmax(0, 1fr);
    gap: 36px;
  }

  .page-products .pp-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .pp-rail__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
  }

  .page-products .pp-rail__link {
    display: block;
    padding: 10px 12px;
    border-color: transparent;
    border-radius: var(--radius-sm);
  }

  .page-products .pp-rail__link:hover,
  .page-products .pp-rail__link:focus-visible {
    background: rgba(143, 184, 177, 0.08);
    border-color: var(--pp-line);
  }

  .page-products .pp-dims__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px;
  }

  .page-products .pp-dims__figure {
    position: sticky;
    top: 96px;
  }

  .page-products .pp-follow__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .page-products .pp-log__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
  }

  .page-products .pp-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 36px 40px;
  }

  .page-products .pp-cta__actions {
    flex: none;
  }
}

@media (min-width: 1080px) {
  .page-products .pp-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pp-cell--wide {
    grid-column: span 2;
  }

  .page-products .pp-matrix {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .pp-case--lg {
    grid-column: span 4;
  }

  .page-products .pp-case--sm {
    grid-column: span 2;
  }

  .page-products .pp-choose__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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