.page-products {
  color: var(--ink);
  overflow-x: clip;
}

.page-products .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 14px 6px;
  font-size: 13px;
  color: var(--muted);
}

.page-products .crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumb a:hover,
.page-products .crumb a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-products .crumb-sep {
  color: var(--line);
}

.page-products .crumb [aria-current="page"] {
  color: var(--ink);
}

/* ---------- HERO ---------- */

.page-products .pb-hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(36, 26, 70, 0.42) 0%, rgba(7, 12, 20, 0.9) 100%);
}

.page-products .pb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(28, 42, 66, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 42, 66, 0.55) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.page-products .pb-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.page-products .pb-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  filter: saturate(0.55) contrast(1.08);
}

.page-products .pb-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 12, 20, 0.96) 0%, rgba(7, 12, 20, 0.7) 44%, rgba(36, 26, 70, 0.72) 100%);
}

.page-products .pb-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-block: clamp(40px, 9vw, 96px) clamp(36px, 7vw, 72px);
}

.page-products .pb-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pb-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(38px, 9vw, 72px);
  color: var(--ink);
  text-wrap: balance;
}

.page-products .pb-lead {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.8;
  color: var(--ink);
}

.page-products .pb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-products .pb-hero-panel {
  align-self: start;
  padding: 20px 22px 22px;
  background: rgba(14, 23, 48, 0.86);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  box-shadow: 0 0 0 1px rgba(36, 224, 210, 0.08), 0 18px 40px -28px rgba(36, 224, 210, 0.5);
}

.page-products .pb-panel-label {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .pb-snap {
  display: grid;
  gap: 0;
  margin: 0;
}

.page-products .pb-snap > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-snap > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pb-snap dt {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-snap dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.page-products .pb-snap > div:first-child dd {
  color: var(--pulse);
}

/* ---------- SECTIONS ---------- */

.page-products .pb-section {
  padding-block: clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-section--panel {
  background: linear-gradient(180deg, rgba(14, 23, 48, 0.6) 0%, rgba(7, 12, 20, 0) 100%);
}

.page-products .pb-section--violet {
  background: linear-gradient(180deg, rgba(36, 26, 70, 0.72) 0%, rgba(7, 12, 20, 0) 92%);
}

.page-products .pb-section--wine {
  background: linear-gradient(180deg, rgba(58, 16, 32, 0.6) 0%, rgba(7, 12, 20, 0) 92%);
}

.page-products .pb-section--last {
  border-bottom: 0;
}

.page-products .section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.page-products .section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  font-size: clamp(23px, 3.6vw, 32px);
  line-height: 1.2;
  color: var(--ink);
}

.page-products .section-num {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  padding: 3px 7px;
  border: 1px solid var(--line);
  flex: none;
}

.page-products .prose {
  margin: 0 0 16px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
}

.page-products .prose:last-child {
  margin-bottom: 0;
}

.page-products .pb-section a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 224, 210, 0.4);
}

.page-products .pb-section a:hover,
.page-products .pb-section a:focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 01 entry ---------- */

.page-products .pb-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-products .pb-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-entry-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-el-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  color: var(--cyan);
  border: 1px solid var(--line);
  background: rgba(14, 23, 48, 0.8);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.page-products .pb-entry-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.page-products .pb-entry-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 02 ranking ---------- */

.page-products .pb-rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-filters {
  padding: 20px;
  background: rgba(14, 23, 48, 0.62);
  border: 1px solid var(--line);
}

.page-products .pb-filter-head {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pb-filter {
  margin-bottom: 18px;
}

.page-products .pb-filter-key {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-products .pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pb-chip {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--line);
}

.page-products .pb-chip.is-on {
  color: var(--ink-dark);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 600;
}

.page-products .pb-filter-stamp {
  margin-top: 22px;
}

.page-products .stamp {
  padding: 12px 14px;
  background: var(--paper);
  color: var(--ink-dark);
  border: 1px solid var(--ink-dark);
  box-shadow: 3px 3px 0 rgba(36, 224, 210, 0.35), 6px 6px 0 rgba(36, 26, 70, 0.6);
}

.page-products .pb-filter-stamp p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.page-products .pb-filter-stamp p:first-child {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.page-products .pb-rank-main {
  min-width: 0;
}

.page-products .pb-rank-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.page-products .pb-rank-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulse);
}

.page-products .pb-rank-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.page-products .pb-rank-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(36, 224, 210, 0.65);
  animation: pb-pulse 2.4s ease-out infinite;
}

@keyframes pb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(36, 224, 210, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(36, 224, 210, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 224, 210, 0); }
}

.page-products .pb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: rgba(7, 12, 20, 0.5);
  -webkit-overflow-scrolling: touch;
}

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

.page-products .pb-table thead th {
  padding: 11px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 96% 100%, 0 100%);
}

.page-products .pb-table thead th.num {
  text-align: right;
}

.page-products .pb-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  white-space: nowrap;
}

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

.page-products .pb-table tbody tr:nth-child(even) {
  background: rgba(14, 23, 48, 0.42);
}

.page-products .pb-table tbody tr:hover {
  background: rgba(36, 224, 210, 0.06);
}

.page-products .pb-table td.num {
  text-align: right;
}

.page-products .pb-team {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.page-products .pb-up,
.page-products .pb-down,
.page-products .pb-flat {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-products .pb-up { color: var(--cyan); transform: translateY(-1px); }
.page-products .pb-down { color: var(--red); transform: translateY(1px); }
.page-products .pb-flat { color: var(--muted); }

.page-products .pb-table-foot {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 03 profiles ---------- */

.page-products .pb-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-profile-figure {
  margin: 0;
}

.page-products .figure {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

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

.page-products .figure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--pulse));
}

.page-products .figure figcaption {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  background: rgba(14, 23, 48, 0.86);
  border-top: 1px solid var(--line);
}

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

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

.page-products .pb-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-fields > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-fields dt {
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-fields dd {
  margin: 0;
  font-size: 13.5px;
  text-align: right;
  color: var(--ink);
}

.page-products .pb-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.page-products .pb-pcard {
  background: rgba(14, 23, 48, 0.72);
  border: 1px solid var(--pulse);
  box-shadow: 0 0 14px -6px rgba(155, 108, 255, 0.6);
  transition: box-shadow 240ms ease, border-color 240ms ease;
}

.page-products .pb-pcard--youth {
  border-color: var(--line);
  box-shadow: none;
}

.page-products .pb-pcard[open] {
  box-shadow: 0 0 22px -6px rgba(155, 108, 255, 0.75);
}

.page-products .pb-pcard summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.page-products .pb-pcard summary::-webkit-details-marker {
  display: none;
}

.page-products .pb-pcard summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--cyan);
}

.page-products .pb-pcard[open] summary::after {
  content: "–";
}

.page-products .pb-pcard summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-products .pb-pcard-id {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-products .pb-pcard-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.page-products .tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink-dark);
  background: var(--paper);
  border: 1px solid var(--ink-dark);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 rgba(36, 224, 210, 0.4);
}

.page-products .pb-pcard--youth .tag {
  background: var(--violet);
  color: var(--ink);
  border-color: var(--pulse);
  box-shadow: 2px 2px 0 rgba(155, 108, 255, 0.4);
}

.page-products .tag--version {
  background: var(--pulse);
  color: var(--ink-dark);
  border-color: var(--pulse);
  box-shadow: 2px 2px 0 rgba(36, 224, 210, 0.45);
}

.page-products .pb-pcard-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0 16px 14px;
  border-top: 1px solid var(--line-soft);
}

.page-products .pb-pcard-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-pcard-stats > div:last-child {
  border-bottom: 0;
}

.page-products .pb-pcard-stats dt {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-pcard-stats dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.page-products .pb-profile-foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 04 version ---------- */

.page-products .pb-version-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 34px;
}

.page-products .pb-version-copy {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .pb-version-figure {
  margin: 0;
}

.page-products .pb-version-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
}

.page-products .pb-vnode {
  position: relative;
  flex: 0 0 66%;
  min-width: 200px;
  padding: 18px 16px 16px;
  background: rgba(7, 12, 20, 0.62);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  scroll-snap-align: start;
}

.page-products .pb-vnode::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--pulse);
}

.page-products .pb-vnode.is-current {
  background: linear-gradient(160deg, rgba(36, 26, 70, 0.92), rgba(14, 23, 48, 0.9));
  border-color: var(--cyan);
  border-top-color: var(--cyan);
}

.page-products .pb-vnode.is-current::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(36, 224, 210, 0.18);
}

.page-products .pb-vnum {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  line-height: 1;
}

.page-products .pb-vnode.is-current .pb-vnum {
  font-size: clamp(42px, 9vw, 64px);
  color: var(--ink);
  letter-spacing: -0.03em;
}

.page-products .pb-vtext {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pb-vnode.is-current .pb-vtext {
  color: var(--ink);
}

.page-products .pb-version-foot {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- 05 curve ---------- */

.page-products .pb-curve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pb-stages {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-stage {
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-stage-num {
  position: absolute;
  left: 0;
  top: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-products .pb-stage h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.page-products .pb-stage p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .pb-stage--early { border-left: 2px solid var(--cyan); padding-left: 42px; }
.page-products .pb-stage--mid { border-left: 2px solid var(--pulse); padding-left: 42px; }
.page-products .pb-stage--late { border-left: 2px solid var(--red); padding-left: 42px; }

.page-products .pb-curve-note {
  margin: 20px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink);
  background: rgba(36, 26, 70, 0.5);
  border-left: 2px solid var(--cyan);
}

.page-products .pb-curve-figure {
  margin: 0;
  align-self: start;
}

.page-products .pb-curve-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--line);
}

.page-products .pb-curve-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.page-products .pb-curve-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .pb-curve-line--early { stroke: var(--cyan); }
.page-products .pb-curve-line--mid { stroke: var(--pulse); }
.page-products .pb-curve-line--late { stroke: var(--red); }

/* ---------- 06 combos ---------- */

.page-products .pb-intro {
  max-width: 58ch;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.page-products .pb-combo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .pb-combo {
  position: relative;
  padding: 26px 20px 20px;
  background: rgba(7, 12, 20, 0.6);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.page-products .pb-combo-num {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--red);
}

.page-products .pb-combo h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.page-products .pb-combo p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--muted);
}

.page-products .pb-combo-foot {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 07 refresh ---------- */

.page-products .pb-refresh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-refresh-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pb-refresh-stats > div {
  padding: 18px 16px;
  background: rgba(14, 23, 48, 0.85);
}

.page-products .pb-refresh-stats dt {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .pb-refresh-stats dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.page-products .pb-big {
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

.page-products .pb-unit {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-refresh-foot {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 08 devices ---------- */

.page-products .pb-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pb-device-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-device-list li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-device-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .pb-device-figure {
  margin: 0;
  align-self: start;
}

.page-products .pb-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(36px, 6vw, 60px);
  padding: 24px 22px;
  background: linear-gradient(120deg, rgba(36, 26, 70, 0.92), rgba(14, 23, 48, 0.92));
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
}

.page-products .pb-cta h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 3.4vw, 24px);
  color: var(--ink);
}

.page-products .pb-cta p {
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .pb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- responsive ---------- */

@media (min-width: 640px) {
  .page-products .pb-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pb-pcard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
  .page-products .pb-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .page-products .pb-combo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .page-products .pb-vnode {
    flex-basis: 44%;
  }
}

@media (min-width: 900px) {
  .page-products .pb-hero-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 56px;
    align-items: end;
  }
  .page-products .pb-entry-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: start;
  }
  .page-products .pb-rank-grid {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .page-products .pb-profile-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .page-products .pb-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .pb-version-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px;
    align-items: end;
  }
  .page-products .pb-version-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-products .pb-vnode {
    flex: none;
    min-width: 0;
    padding: 20px 16px 18px;
  }
  .page-products .pb-curve-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 44px;
    align-items: start;
  }
  .page-products .pb-refresh-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
  .page-products .pb-device-grid {
    grid-template-columns: minmax(0, 1.25fr) 320px;
    gap: 48px;
    align-items: start;
  }
  .page-products .pb-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
  }
}

@media (min-width: 1180px) {
  .page-products .pb-hero-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .page-products .pb-rank-grid {
    grid-template-columns: 268px minmax(0, 1fr);
  }
  .page-products .pb-table {
    font-size: 15px;
  
  }
  .page-products .pb-table tbody td {
    padding: 13px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pb-dot {
    animation: none;
  }
  .page-products .pb-pcard {
    transition: none;
  }
}
</main>
<<<END>>>

等等——我犯了个错误。输出格式要求先给 `` 块，再给 `` 块，两者都要，不能出现 `</main>` 标签外的内容。让我重新组织一下。

另外我注意到在媒体查询里有个 CSS 语法错误：

```css
.page-products .pb-table {
    font-size: 15px;
  
  }
```

多了个空行——嗯，没问题，不过我还是清理一下。

而且 `</main>` 出现在 PAGE_CSS 之后了，那是不对的。让我修正输出结构。

实际上再看一遍，我的输出里在 CSS 块前面确实有 `` 和 ``，但我把 `</main>` 放在最后了。让我清理一下。

等等，我把 `</main>` 写在了 CSS 后面。这是个错误。`</main>` 应该出现在 MAIN_HTML 块的末尾。我再重新整理一下。

其实再看我的输出，HTML 确实以 `</main>` 正确结尾了，然后才是 CSS 块。但我又多写了一个 `</main>` 和 `<<<END>>>`。我重新整理一下。

让我再快速检查一下：

1. `` ✓
2. `<main id="main-content" class="page-products">` ✓
3. ... 内容 ...
4. `</main>` ✓
5. `` ✓
6. `<div class="page-products">...` 等等不对，CSS 应该以 `.page-products {...}` 开头

嗯，其实我的 CSS 是以 `.page-products { color: var(--ink); overflow-x: clip; }` 开头的，这没问题。

7. 然后我在末尾又写了 `</main>` 和 `<<<END>>>`——不对。

我重新整理一下输出。

还有，`.page-products .crumb` 被定义了两次——一次是显示样式，另一次在 hero 之前。其实我定义了两次。去掉重复的那次。

还有，我写的这段 CSS：
```
.page-products .pb-section a {
  color: var(--cyan);
  ...
}
```
这段没问题，但也会影响共享按钮。其实 `.btn` 有自己的颜色。`.pb-section a` 会覆盖任何章节里的 `.btn` 样式。让我把它收窄一下。

而且 `.pb-section a` 会把 `.btn--primary`（电光青底深色文字）中的文字颜色改成电光青，那就看不见了。这是个问题。让我把范围限制到正文链接。

我通过给行内链接加上 `.pb-link` 类来修复，或者用 `p a` 选择器。

还是直接用 `p a` 吧——行内链接在段落和列表里。

其实更简单：`.page-products a:not(.btn)`。

那就用这个。

另外，`.pb-profile-foot` 和 `.pb-version-foot`、`.pb-combo-foot`、`.pb-refresh-foot` 里的链接也需要样式。用 `a:not(.btn)` 就能覆盖它们。

最后再定下来，写干净点。

再加一点：`.pb-hero-panel` 用了 `data-reveal`。但 `data-reveal` 需要配合 `is-hidden` 类。根据 `site_kit` 的说法：“在任意页面元素上加 data-reveal，JS 会在其进入视口时移除 .is-hidden 并加上 .is-in”，而“不要移除 .is-hidden 的 CSS 定义”。

嗯，那 `.is-hidden` 的 CSS 是在共享样式里的吧？可能吧。不过如果共享 CSS 里没有 `.is-hidden` 的样式定义，用 `data-reveal` 的元素初始会是可见的（没问题，算渐进增强）。

其实 `site_kit` 说的是“不要移除 .is-hidden 的 CSS 定义”——意味着它应该存在于共享 CSS 里。所以如果我想做显现效果，可以直接加 `data-reveal` 而不用加 `is-hidden` ——JS 会处理的。

保险起见，我干脆完全不加 `data-reveal`，保持内容始终可见。没有它页面也没问题。

其实，还是加几个 `data-reveal` 来增加一点效果吧——反正它只是渐进增强。

嗯，但如果共享 CSS 里 `.is-hidden { opacity: 0 }` 而 JS 加载失败，内容就会一直隐藏。这有风险。

我要么不加，要么……好吧，干脆全都不加 `data-reveal`。安全第一。

其实规范里有一条：“在适合的内容元素上使用对应 data-* 属性”——是鼓励用的，但不是强制。

为了稳妥，我会在首屏面板上加一个 `data-reveal`。因为这是常见做法，而且 JS 很可能一定能加载。

嗯，算了，还是跳过吧。没有 JS 的静态页面读起来完全没问题，也不会有风险。

其实让我再想想——在首屏面板上加一个 `data-reveal` 可以增加一点微妙的效果。但内容始终可见是底线。如果共享 CSS 里有 `.is-hidden`，而 JS 加载失败了……那我们就冒了这个风险。

还是不用了。跳过 `data-reveal`，确保内容始终可见。

好，现在写最终答案。

其实我把 `data-reveal` 去掉了，但其他要保留。

来写最终版。

还有——CSS 里的 `.page-products .pb-hero h1`。那也就是 `main` 里 h1 的样式。好。

好，写。
<main id="main-content" class="page-products">

  <nav class="crumb container" aria-label="面包屑导航">
    <a href="/">首页</a>
    <span class="crumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">排名与档案中心</span>
  </nav>

  <header class="pb-hero">
    <div class="pb-hero-bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="赛事数据看板墙上排列着小组积分与排名变化的画面">
    </div>
    <div class="pb-hero-grid container">
      <div class="pb-hero-copy">
        <p class="pb-eyebrow mono">02 · 排名与档案中心</p>
        <h1>排名与档案中心</h1>
        <p class="pb-lead">季后赛的每一个晚上，你都要在同一分钟里回答三个问题：这一组谁出线、这个人这赛季打成什么样、现在打的是哪个版本。极速电竞把这三件事收进一块屏，省下你在标签页之间来回翻的时间。</p>
        <div class="pb-hero-actions">
          <a class="btn btn--primary" href="/updates/">看本赛季赛程</a>
          <a class="btn btn--ghost" href="/tutorial/">第一次用先看指引</a>
        </div>
      </div>
      <aside class="pb-hero-panel">
        <p class="pb-panel-label mono">查询台当前状态</p>
        <dl class="pb-snap">
          <div><dt>季中版本</dt><dd class="mono">v3.2</dd></div>
          <div><dt>经济曲线</dt><dd>已重画 · 三段</dd></div>
          <div><dt>常规刷新</dt><dd class="mono">3 分钟</dd></div>
          <div><dt>季后赛刷新</dt><dd class="mono">60 秒</dd></div>
          <div><dt>覆盖战队</dt><dd class="mono">128</dd></div>
          <div><dt>选手档案</dt><dd class="mono">640+</dd></div>
        </dl>
      </aside>
    </div>
  </header>

  <section class="pb-section" id="entry">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">01</span>
        <h2>一个入口，三种答案</h2>
      </div>
      <div class="pb-entry-grid">
        <div class="pb-entry-lead">
          <p class="prose">在首页顶部那条命令栏里写下你要查的东西，结果会拆成排名、档案、版本三块并排出现。看直播的人不用先想清楚自己该点哪个栏目，把小组或战队写进去就行；做内容的人想核对一位选手的出场记录，也不必先猜他在哪个子页面。</p>
          <p class="prose">入口合并之后，手机和电脑的层级完全一样：你在手机上点开的路径，和在电脑上点开的是同一条。赛期里一边看直播一边补资料的人，最省的就是这段来回找的时间。</p>
        </div>
        <ol class="pb-entry-list" role="list">
          <li>
            <span class="pb-el-num mono">A</span>
            <div>
              <h3>小组排名查询</h3>
              <p>按小组、赛区或赛季切过去，一屏看清积分、胜负场与名次升降。</p>
            </div>
          </li>
          <li>
            <span class="pb-el-num mono">B</span>
            <div>
              <h3>极速电竞选手档案</h3>
              <p>主力与青训分别列出，位置、所属战队、参赛赛季、出场数一路排开。</p>
            </div>
          </li>
          <li>
            <span class="pb-el-num mono">C</span>
            <div>
              <h3>极速电竞版本号</h3>
              <p>当前版本与历史节点连成一条横向条带，每个节点上写清改了什么。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="pb-section pb-section--panel" id="ranking">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">02</span>
        <h2>小组排名查询</h2>
      </div>
      <div class="pb-rank-grid">
        <aside class="pb-filters" aria-label="当前查询维度">
          <p class="pb-filter-head mono">查询维度</p>

          <div class="pb-filter">
            <p class="pb-filter-key mono">位置</p>
            <ul class="pb-chips" role="list">
              <li class="pb-chip is-on">全部</li>
              <li class="pb-chip">上路</li>
              <li class="pb-chip">打野</li>
              <li class="pb-chip">中路</li>
              <li class="pb-chip">下路</li>
              <li class="pb-chip">辅助</li>
            </ul>
          </div>

          <div class="pb-filter">
            <p class="pb-filter-key mono">战队</p>
            <ul class="pb-chips" role="list">
              <li class="pb-chip is-on">A 组全部</li>
              <li class="pb-chip">A-01</li>
              <li class="pb-chip">A-02</li>
              <li class="pb-chip">A-03</li>
            </ul>
          </div>

          <div class="pb-filter">
            <p class="pb-filter-key mono">赛季</p>
            <ul class="pb-chips" role="list">
              <li class="pb-chip is-on">本赛季</li>
              <li class="pb-chip">上一赛季</li>
            </ul>
          </div>

          <div class="pb-filter">
            <p class="pb-filter-key mono">版本</p>
            <ul class="pb-chips" role="list">
              <li class="pb-chip is-on mono">v3.2</li>
              <li class="pb-chip mono">v3.1</li>
              <li class="pb-chip mono">v3.0</li>
            </ul>
          </div>

          <div class="stamp pb-filter-stamp">
            <p class="mono">第 7 赛周</p>
            <p>小组赛进行中，排名每 3 分钟刷新一次</p>
          </div>
        </aside>

        <div class="pb-rank-main">
          <div class="pb-rank-head">
            <div>
              <p class="pb-rank-kicker mono">小组 A · 小组赛</p>
              <h3>积分与升降一览</h3>
            </div>
            <p class="pb-rank-note">
              <span class="pb-dot" aria-hidden="true"></span>
              同分时按净胜分排前后
            </p>
          </div>

          <div class="pb-table-wrap">
            <table class="pb-table">
              <caption class="visually-hidden">小组 A 小组赛积分排名，包含积分、胜负场、净胜分与名次升降</caption>
              <thead>
                <tr>
                  <th scope="col">名次</th>
                  <th scope="col">战队</th>
                  <th scope="col" class="num">积分</th>
                  <th scope="col" class="num">胜 / 负</th>
                  <th scope="col" class="num">净胜分</th>
                  <th scope="col">升降</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="mono">1</td>
                  <td class="pb-team">A-01</td>
                  <td class="num mono">14</td>
                  <td class="num mono">4-1</td>
                  <td class="num mono">+9</td>
                  <td><span class="pb-up mono">▲ 2</span></td>
                </tr>
                <tr>
                  <td class="mono">2</td>
                  <td class="pb-team">A-02</td>
                  <td class="num mono">12</td>
                  <td class="num mono">4-1</td>
                  <td class="num mono">+6</td>
                  <td><span class="pb-down mono">▼ 1</span></td>
                </tr>
                <tr>
                  <td class="mono">3</td>
                  <td class="pb-team">A-03</td>
                  <td class="num mono">11</td>
                  <td class="num mono">3-2</td>
                  <td class="num mono">+4</td>
                  <td><span class="pb-flat mono">— 0</span></td>
                </tr>
                <tr>
                  <td class="mono">4</td>
                  <td class="pb-team">A-04</td>
                  <td class="num mono">9</td>
                  <td class="num mono">3-2</td>
                  <td class="num mono">+1</td>
                  <td><span class="pb-up mono">▲ 1</span></td>
                </tr>
                <tr>
                  <td class="mono">5</td>
                  <td class="pb-team">A-05</td>
                  <td class="num mono">8</td>
                  <td class="num mono">2-3</td>
                  <td class="num mono">-3</td>
                  <td><span class="pb-down mono">▼ 2</span></td>
                </tr>
                <tr>
                  <td class="mono">6</td>
                  <td class="pb-team">A-06</td>
                  <td class="num mono">6</td>
                  <td class="num mono">2-3</td>
                  <td class="num mono">-5</td>
                  <td><span class="pb-flat mono">— 0</span></td>
                </tr>
              </tbody>
            </table>
          </div>

          <p class="pb-table-foot">
            表格覆盖 4 个大区赛、16 个小组与 128 支战队。切换小组时列结构不变，你熟悉的阅读顺序不会被改掉。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="pb-section" id="profiles">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">03</span>
        <h2>极速电竞选手档案</h2>
      </div>

      <div class="pb-profile-layout">
        <figure class="figure figure--tall pb-profile-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="电竞选手在比赛席上的背影剪影，屏幕光打在肩上" loading="lazy" decoding="async">
          <figcaption>比赛席上的一次出场，最终会落成档案里的一行数据。</figcaption>
        </figure>

        <div class="pb-profile-body">
          <p class="prose">档案覆盖主力与青训两份名单，一共 640 余名选手。主力名单按当前赛季的注册情况排，青训名单单独成栏，位置、所属战队、参赛赛季、出场数、常用角色与经济占比六项字段，无论看谁都是同一套顺序。</p>
          <p class="prose">拿一位中路选手举例：你可以直接看到他本赛季的出场数、常用角色分布，以及他在队内的经济占比排位。这三个数放在一起，就能判断他承担的是发育核心还是节奏发起。</p>

          <dl class="pb-fields">
            <div><dt>位置</dt><dd>上路 / 打野 / 中路 / 下路 / 辅助</dd></div>
            <div><dt>所属战队</dt><dd>按小组与赛区归属</dd></div>
            <div><dt>参赛赛季</dt><dd>逐赛季累加</dd></div>
            <div><dt>出场数</dt><dd>含首发与轮换</dd></div>
            <div><dt>常用角色</dt><dd>按出场次数排序</dd></div>
            <div><dt>经济占比</dt><dd>占队伍总经济的百分比</dd></div>
          </dl>

          <div class="pb-cards">
            <details class="pb-pcard">
              <summary>
                <span class="pb-pcard-id mono">P-0128</span>
                <span class="pb-pcard-role">中路</span>
                <span class="tag tag--version mono">主力</span>
              </summary>
              <dl class="pb-pcard-stats">
                <div><dt>参赛赛季</dt><dd class="mono">6</dd></div>
                <div><dt>出场数</dt><dd class="mono">88</dd></div>
                <div><dt>经济占比</dt><dd class="mono">23.4%</dd></div>
                <div><dt>所属战队</dt><dd class="mono">A-01</dd></div>
              </dl>
            </details>

            <details class="pb-pcard">
              <summary>
                <span class="pb-pcard-id mono">P-0341</span>
                <span class="pb-pcard-role">打野</span>
                <span class="tag tag--version mono">主力</span>
              </summary>
              <dl class="pb-pcard-stats">
                <div><dt>参赛赛季</dt><dd class="mono">4</dd></div>
                <div><dt>出场数</dt><dd class="mono">61</dd></div>
                <div><dt>经济占比</dt><dd class="mono">18.9%</dd></div>
                <div><dt>所属战队</dt><dd class="mono">A-02</dd></div>
              </dl>
            </details>

            <details class="pb-pcard pb-pcard--youth">
              <summary>
                <span class="pb-pcard-id mono">P-0593</span>
                <span class="pb-pcard-role">下路</span>
                <span class="tag mono">青训</span>
              </summary>
              <dl class="pb-pcard-stats">
                <div><dt>参赛赛季</dt><dd class="mono">1</dd></div>
                <div><dt>出场数</dt><dd class="mono">12</dd></div>
                <div><dt>经济占比</dt><dd class="mono">21.2%</dd></div>
                <div><dt>所属战队</dt><dd class="mono">A-04</dd></div>
              </dl>
            </details>
          </div>

          <p class="pb-profile-foot">
            发现字段出入，可以把所属战队和赛季一起说明，档案纠错通常在 24 小时内完成核对与修订。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="pb-section pb-section--violet" id="version">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">04</span>
        <h2>从 v2.6 到 v3.2 的版本号</h2>
      </div>

      <div class="pb-version-top">
        <div class="pb-version-intro">
          <p class="prose">每个赛季包含 1 个大版本与 2 至 3 次季中修订，季中修订递增次版本号。摸清这条线，你就能判断某一场比赛的节奏为什么和上周不一样。</p>
          <p class="pb-version-copy mono">当前季中版本 v3.2 · 经济曲线已重画</p>
        </div>
        <figure class="figure figure--wide pb-version-figure">
          <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="抽象的版本时间轴与数字刻度叠加深色背景" loading="lazy" decoding="async">
          <figcaption>版本节点按时间连成一条线，越靠右越接近当前赛季。</figcaption>
        </figure>
      </div>

      <div class="pb-version-track">
        <div class="pb-vnode">
          <p class="pb-vnum mono">v2.6</p>
          <p class="pb-vtext">排在这个位置的一次季中修订，次版本号按次数递增。</p>
        </div>
        <div class="pb-vnode">
          <p class="pb-vnum mono">v2.9</p>
          <p class="pb-vtext">改动逐条记进赛季专题，每条附一句短说明。</p>
        </div>
        <div class="pb-vnode">
          <p class="pb-vnum mono">v3.0</p>
          <p class="pb-vtext">新赛季的大版本，一个赛季里只出现一次。</p>
        </div>
        <div class="pb-vnode">
          <p class="pb-vnum mono">v3.1</p>
          <p class="pb-vtext">排在 v3.0 之后的季中修订，接在大版本后面。</p>
        </div>
        <div class="pb-vnode is-current">
          <p class="pb-vnum mono">v3.2</p>
          <p class="pb-vtext">当前版本，经济曲线在这一次重画，三段的分界更清楚。</p>
        </div>
      </div>

      <p class="pb-version-foot">
        想按日期翻每一条改动，去 <a href="/updates/">赛季专题与更新</a> 看版本演进那一栏。
      </p>
    </div>
  </section>

  <section class="pb-section" id="curve">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">05</span>
        <h2>经济曲线重画之后怎么看</h2>
      </div>

      <div class="pb-curve-grid">
        <div class="pb-curve-copy">
          <p class="prose">曲线只分三段，读起来的顺序和你观赛的顺序一样。前段看资源往哪里堆，中段看团战与地图资源怎么换，后段看决胜前几天谁的经济还在涨。</p>

          <ol class="pb-stages" role="list">
            <li class="pb-stage pb-stage--early">
              <span class="pb-stage-num mono">01</span>
              <h3>前期</h3>
              <p>经济集中在少数位置上，曲线陡起来的那一段就是资源倾斜最明显的时段。陡坡提前出现，说明这套阵容打算靠单人优势起势。</p>
            </li>
            <li class="pb-stage pb-stage--mid">
              <span class="pb-stage-num mono">02</span>
              <h3>中期</h3>
              <p>曲线趋于平缓，经济从个人手里转到团队手里。这一段谁把地图资源换得多，曲线就会在下一段重新抬头。</p>
            </li>
            <li class="pb-stage pb-stage--late">
              <span class="pb-stage-num mono">03</span>
              <h3>后期</h3>
              <p>曲线再次分化，差距往往在这一段拉开。决胜团战之前的最后一次资源分配，看的就是这里的斜率差。</p>
            </li>
          </ol>

          <p class="pb-curve-note">
            v3.2 重画之后，三段的衔接比之前更清楚，你在同一张图上能更快找到转折点。
          </p>
        </div>

        <figure class="figure figure--wide pb-curve-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="青紫色经济曲线在网格上交叉并分段高亮的抽象图形" loading="lazy" decoding="async">
          <figcaption>
            <svg class="pb-curve-svg" viewBox="0 0 480 220" role="img" aria-label="经济曲线三段走势示意，前期较陡、中期趋平、后期再次分化">
              <g class="pb-curve-grid" aria-hidden="true">
                <line x1="0" y1="50" x2="480" y2="50"></line>
                <line x1="0" y1="100" x2="480" y2="100"></line>
                <line x1="0" y1="150" x2="480" y2="150"></line>
              </g>
              <path class="pb-curve-line pb-curve-line--early" d="M0,196 L40,178 L80,158 L120,142 L160,124"></path>
              <path class="pb-curve-line pb-curve-line--mid" d="M160,124 L200,114 L240,108 L280,104 L320,98"></path>
              <path class="pb-curve-line pb-curve-line--late" d="M320,98 L360,74 L400,54 L440,36 L480,22"></path>
            </svg>
            前期、中期、后期三段曲线示意，转折点集中在两条接缝处。
          </figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pb-section pb-section--wine" id="combos">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">06</span>
        <h2>组合着查，范围收得更快</h2>
      </div>

      <p class="pb-intro prose">位置、战队、赛季三种条件可以叠加。三个都打开会得到一小撮人，只留一个时就是一份完整名单。表头排序跟着筛选一起生效，你看到的顺序就是当前条件的顺序。</p>

      <div class="pb-combo-grid">
        <article class="pb-combo">
          <span class="pb-combo-num mono">01</span>
          <h3>先框住赛季</h3>
          <p>一上来先定赛季，后面的位置和战队都在这段时间内生效，名单不会把跨赛季的数据混在一起。</p>
        </article>
        <article class="pb-combo">
          <span class="pb-combo-num mono">02</span>
          <h3>再叠位置或战队</h3>
          <p>找某个位置的全部出场记录就单选位置；想横向比较同队几人，把战队挑出来再挂上位置，一组对照就出来了。</p>
        </article>
        <article class="pb-combo">
          <span class="pb-combo-num mono">03</span>
          <h3>最后换排序</h3>
          <p>点表头可以按积分、净胜分或出场数重排。名次有变动的那一行会带上升降标记，改动一眼能看出。</p>
        </article>
      </div>

      <p class="pb-combo-foot">
        筛选条件会记在你自己的设备上，下次打开还是这套条件。想看一步步的操作示范，去 <a href="/tutorial/">使用教程</a>。
      </p>
    </div>
  </section>

  <section class="pb-section" id="refresh">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">07</span>
        <h2>数据多久刷新一次</h2>
      </div>

      <div class="pb-refresh-grid">
        <div class="pb-refresh-main">
          <p class="prose">常规赛期间，排名每 3 分钟刷新一次；进入季后赛，刷新间隔加密到 60 秒，基本跟得上你刷新页面的节奏。每场比赛结束后 30 分钟内，结果会同步录入到排名表与选手档案里。</p>
          <p class="prose">数据编辑按照赛区轮值，四条线同时推进。比赛打完，你看到的比分、净胜分和出场数会在半小时内落到对应位置上。</p>
        </div>

        <dl class="pb-refresh-stats">
          <div>
            <dt class="mono">常规刷新</dt>
            <dd><span class="pb-big mono">3</span><span class="pb-unit">分钟</span></dd>
          </div>
          <div>
            <dt class="mono">季后赛刷新</dt>
            <dd><span class="pb-big mono">60</span><span class="pb-unit">秒</span></dd>
          </div>
          <div>
            <dt class="mono">结果录入</dt>
            <dd><span class="pb-big mono">30</span><span class="pb-unit">分钟内</span></dd>
          </div>
          <div>
            <dt class="mono">档案核对</dt>
            <dd><span class="pb-big mono">24</span><span class="pb-unit">小时内</span></dd>
          </div>
        </dl>
      </div>

      <p class="pb-refresh-foot">
        档案纠错平均在 24 小时内完成核对与修订。发现字段有问题，可以通过 <a href="/reach-us/">联系对接</a> 把所属战队与赛季一起说明，处理会快一些。
      </p>
    </div>
  </section>

  <section class="pb-section pb-section--last" id="devices">
    <div class="container">
      <div class="section-head">
        <span class="section-num mono">08</span>
        <h2>换个设备，读到的还是一样</h2>
      </div>

      <div class="pb-device-grid">
        <div class="pb-device-copy">
          <p class="prose">在手机上查排名的人占了多数，所以筛选器、排名表和档案卡在四种主要断点下的字段完整度是一样的，只调整摆放方式：窄栏纵向堆到顶部，宽栏的表格保留横向滚动，档案卡改成单列。阅读顺序始终保持“先筛选、再表格、后卡片”，你在手机上滑到的内容和在电脑上看到的一模一样。</p>
          <ul class="pb-device-list" role="list">
            <li><span class="pb-device-key mono">窄屏</span>筛选器折成横向刻度条，表格横向滑动，档案卡单列排布</li>
            <li><span class="pb-device-key mono">中屏</span>筛选器回到左侧，表格列全部保留，档案卡两列并排</li>
            <li><span class="pb-device-key mono">宽屏</span>左窄右宽分栏，表格行距放宽，档案卡三列对齐</li>
            <li><span class="pb-device-key mono">超宽</span>内容宽度收在同一个上限内，行宽不再拉长</li>
          </ul>
        </div>

        <figure class="figure figure--tall pb-device-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="移动设备屏幕上显示排名列表与筛选下拉的特写" loading="lazy" decoding="async">
          <figcaption>手机上打开的排名表保留全部列，只需横向滑动。</figcaption>
        </figure>
      </div>

      <div class="pb-cta">
        <div>
          <h3>先把本赛季的赛程和版本节点扫一遍</h3>
          <p>赛季专题按日期排列赛程，版本变动逐条写明，季后赛期间每日更新。</p>
        </div>
        <div class="pb-cta-actions">
          <a class="btn btn--primary" href="/updates/">进赛季专题</a>
          <a class="btn btn--ghost" href="/overview/">了解我们</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  color: var(--ink);
  overflow-x: clip;
}

/* ---------- breadcrumb ---------- */

.page-products .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 14px 6px;
  font-size: 13px;
  color: var(--muted);
}

.page-products .crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumb a:hover,
.page-products .crumb a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-products .crumb-sep {
  color: var(--line);
}

.page-products .crumb [aria-current="page"] {
  color: var(--ink);
}

/* ---------- hero ---------- */

.page-products .pb-hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(36, 26, 70, 0.42) 0%, rgba(7, 12, 20, 0.92) 100%);
}

.page-products .pb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(28, 42, 66, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 42, 66, 0.55) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.page-products .pb-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.page-products .pb-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  filter: saturate(0.55) contrast(1.08);
}

.page-products .pb-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 12, 20, 0.96) 0%, rgba(7, 12, 20, 0.72) 44%, rgba(36, 26, 70, 0.74) 100%);
}

.page-products .pb-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-block: clamp(40px, 9vw, 96px) clamp(36px, 7vw, 72px);
}

.page-products .pb-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pb-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(38px, 9vw, 72px);
  color: var(--ink);
}

.page-products .pb-lead {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.8;
  color: var(--ink);
}

.page-products .pb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-products .pb-hero-panel {
  align-self: start;
  padding: 20px 22px 22px;
  background: rgba(14, 23, 48, 0.86);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  box-shadow: 0 0 0 1px rgba(36, 224, 210, 0.08), 0 18px 42px -30px rgba(36, 224, 210, 0.55);
}

.page-products .pb-panel-label {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .pb-snap {
  display: grid;
  gap: 0;
  margin: 0;
}

.page-products .pb-snap > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-snap > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pb-snap dt {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-snap dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.page-products .pb-snap > div:first-child dd {
  color: var(--pulse);
}

/* ---------- sections ---------- */

.page-products .pb-section {
  padding-block: clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-section--panel {
  background: linear-gradient(180deg, rgba(14, 23, 48, 0.62) 0%, rgba(7, 12, 20, 0) 100%);
}

.page-products .pb-section--violet {
  background: linear-gradient(180deg, rgba(36, 26, 70, 0.74) 0%, rgba(7, 12, 20, 0) 92%);
}

.page-products .pb-section--wine {
  background: linear-gradient(180deg, rgba(58, 16, 32, 0.6) 0%, rgba(7, 12, 20, 0) 92%);
}

.page-products .pb-section--last {
  border-bottom: 0;
}

.page-products .section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.page-products .section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  font-size: clamp(23px, 3.6vw, 32px);
  line-height: 1.2;
  color: var(--ink);
}

.page-products .section-num {
  flex: none;
  padding: 3px 7px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  border: 1px solid var(--line);
}

.page-products .prose {
  margin: 0 0 16px;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
}

.page-products .prose:last-child {
  margin-bottom: 0;
}

.page-products a:not(.btn) {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 224, 210, 0.4);
}

.page-products a:not(.btn):hover,
.page-products a:not(.btn):focus-visible {
  color: var(--pulse);
  border-bottom-color: var(--pulse);
}

/* ---------- 01 entry ---------- */

.page-products .pb-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-products .pb-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-entry-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-el-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  color: var(--cyan);
  border: 1px solid var(--line);
  background: rgba(14, 23, 48, 0.8);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.page-products .pb-entry-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.page-products .pb-entry-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 02 ranking ---------- */

.page-products .pb-rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-filters {
  padding: 20px;
  background: rgba(14, 23, 48, 0.62);
  border: 1px solid var(--line);
}

.page-products .pb-filter-head {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pb-filter {
  margin-bottom: 18px;
}

.page-products .pb-filter-key {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-products .pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pb-chip {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--line);
}

.page-products .pb-chip.is-on {
  color: var(--ink-dark);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 600;
}

.page-products .pb-filter-stamp {
  margin-top: 22px;
}

.page-products .stamp {
  padding: 12px 14px;
  color: var(--ink-dark);
  background: var(--paper);
  border: 1px solid var(--ink-dark);
  box-shadow: 3px 3px 0 rgba(36, 224, 210, 0.35), 6px 6px 0 rgba(36, 26, 70, 0.6);
}

.page-products .pb-filter-stamp p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.page-products .pb-filter-stamp p:first-child {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-products .pb-rank-main {
  min-width: 0;
}

.page-products .pb-rank-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.page-products .pb-rank-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulse);
}

.page-products .pb-rank-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.page-products .pb-rank-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pb-pulse 2.4s ease-out infinite;
}

@keyframes pb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(36, 224, 210, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(36, 224, 210, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 224, 210, 0); }
}

.page-products .pb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(7, 12, 20, 0.5);
  border: 1px solid var(--line);
}

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

.page-products .pb-table thead th {
  padding: 11px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 96% 100%, 0 100%);
}

.page-products .pb-table thead th.num {
  text-align: right;
}

.page-products .pb-table tbody td {
  padding: 12px;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

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

.page-products .pb-table tbody tr:nth-child(even) {
  background: rgba(14, 23, 48, 0.42);
}

.page-products .pb-table tbody tr:hover {
  background: rgba(36, 224, 210, 0.07);
}

.page-products .pb-table td.num {
  text-align: right;
}

.page-products .pb-team {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-products .pb-up,
.page-products .pb-down,
.page-products .pb-flat {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-products .pb-up { color: var(--cyan); transform: translateY(-1px); }
.page-products .pb-down { color: var(--red); transform: translateY(1px); }
.page-products .pb-flat { color: var(--muted); }

.page-products .pb-table-foot {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- shared figure ---------- */

.page-products .figure {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}

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

.page-products .figure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--pulse));
}

.page-products .figure figcaption {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  background: rgba(14, 23, 48, 0.86);
  border-top: 1px solid var(--line);
}

.page-products .figure--tall img { aspect-ratio: 3 / 4; }
.page-products .figure--wide img { aspect-ratio: 16 / 9; }

/* ---------- 03 profiles ---------- */

.page-products .pb-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-profile-figure {
  margin: 0;
}

.page-products .pb-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-fields > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-fields dt {
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-fields dd {
  margin: 0;
  font-size: 13.5px;
  text-align: right;
  color: var(--ink);
}

.page-products .pb-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.page-products .pb-pcard {
  background: rgba(14, 23, 48, 0.72);
  border: 1px solid var(--pulse);
  box-shadow: 0 0 14px -6px rgba(155, 108, 255, 0.6);
  transition: box-shadow 240ms ease, border-color 240ms ease;
}

.page-products .pb-pcard--youth {
  border-color: var(--line);
  box-shadow: none;
}

.page-products .pb-pcard[open] {
  box-shadow: 0 0 22px -6px rgba(155, 108, 255, 0.78);
}

.page-products .pb-pcard summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.page-products .pb-pcard summary::-webkit-details-marker {
  display: none;
}

.page-products .pb-pcard summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--cyan);
}

.page-products .pb-pcard[open] summary::after {
  content: "–";
}

.page-products .pb-pcard summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-products .pb-pcard-id {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-products .pb-pcard-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.page-products .tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink-dark);
  background: var(--paper);
  border: 1px solid var(--ink-dark);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 rgba(36, 224, 210, 0.4);
}

.page-products .pb-pcard--youth .tag {
  color: var(--ink);
  background: var(--violet);
  border-color: var(--pulse);
  box-shadow: 2px 2px 0 rgba(155, 108, 255, 0.4);
}

.page-products .tag--version {
  color: var(--ink-dark);
  background: var(--pulse);
  border-color: var(--pulse);
  box-shadow: 2px 2px 0 rgba(36, 224, 210, 0.45);
}

.page-products .pb-pcard-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0 16px 14px;
  border-top: 1px solid var(--line-soft);
}

.page-products .pb-pcard-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-pcard-stats > div:last-child {
  border-bottom: 0;
}

.page-products .pb-pcard-stats dt {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-pcard-stats dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.page-products .pb-profile-foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 04 version ---------- */

.page-products .pb-version-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 34px;
}

.page-products .pb-version-copy {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .pb-version-figure {
  margin: 0;
}

.page-products .pb-version-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 12px;
  scroll-snap-type: x proximity;
}

.page-products .pb-vnode {
  position: relative;
  flex: 0 0 68%;
  min-width: 208px;
  padding: 20px 16px 16px;
  background: rgba(7, 12, 20, 0.62);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  scroll-snap-align: start;
}

.page-products .pb-vnode::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--pulse);
}

.page-products .pb-vnode.is-current {
  background: linear-gradient(160deg, rgba(36, 26, 70, 0.94), rgba(14, 23, 48, 0.92));
  border-color: var(--cyan);
  border-top-color: var(--cyan);
}

.page-products .pb-vnode.is-current::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(36, 224, 210, 0.18);
}

.page-products .pb-vnum {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.page-products .pb-vnode.is-current .pb-vnum {
  font-size: clamp(42px, 9vw, 64px);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.page-products .pb-vtext {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pb-vnode.is-current .pb-vtext {
  color: var(--ink);
}

.page-products .pb-version-foot {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- 05 curve ---------- */

.page-products .pb-curve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pb-stages {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-stage {
  position: relative;
  padding: 16px 0 16px 42px;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-stage-num {
  position: absolute;
  left: 0;
  top: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.page-products .pb-stage h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.page-products .pb-stage p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .pb-stage--early { border-left: 2px solid var(--cyan); }
.page-products .pb-stage--mid { border-left: 2px solid var(--pulse); }
.page-products .pb-stage--late { border-left: 2px solid var(--red); }

.page-products .pb-curve-note {
  margin: 20px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink);
  background: rgba(36, 26, 70, 0.5);
  border-left: 2px solid var(--cyan);
}

.page-products .pb-curve-figure {
  margin: 0;
  align-self: start;
}

.page-products .pb-curve-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid var(--line);
}

.page-products .pb-curve-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.page-products .pb-curve-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .pb-curve-line--early { stroke: var(--cyan); }
.page-products .pb-curve-line--mid { stroke: var(--pulse); }
.page-products .pb-curve-line--late { stroke: var(--red); }

/* ---------- 06 combos ---------- */

.page-products .pb-intro {
  max-width: 58ch;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.page-products .pb-combo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-products .pb-combo {
  padding: 26px 20px 22px;
  background: rgba(7, 12, 20, 0.6);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.page-products .pb-combo-num {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--red);
}

.page-products .pb-combo h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.page-products .pb-combo p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--muted);
}

.page-products .pb-combo-foot {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 07 refresh ---------- */

.page-products .pb-refresh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-products .pb-refresh-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pb-refresh-stats > div {
  padding: 18px 16px;
  background: rgba(14, 23, 48, 0.85);
}

.page-products .pb-refresh-stats dt {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .pb-refresh-stats dd {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.page-products .pb-big {
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

.page-products .pb-unit {
  font-size: 13px;
  color: var(--muted);
}

.page-products .pb-refresh-foot {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 08 devices ---------- */

.page-products .pb-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.page-products .pb-device-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .pb-device-list li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pb-device-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .pb-device-figure {
  margin: 0;
  align-self: start;
}

.page-products .pb-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(36px, 6vw, 60px);
  padding: 24px 22px;
  background: linear-gradient(120deg, rgba(36, 26, 70, 0.92), rgba(14, 23, 48, 0.92));
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
}

.page-products .pb-cta h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 3.4vw, 24px);
  color: var(--ink);
}

.page-products .pb-cta p {
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .pb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- breakpoints ---------- */

@media (min-width: 640px) {
  .page-products .pb-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pb-pcard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
  .page-products .pb-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .page-products .pb-combo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .page-products .pb-vnode {
    flex-basis: 46%;
  }
}

@media (min-width: 900px) {
  .page-products .pb-hero-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 56px;
    align-items: end;
  }
  .page-products .pb-entry-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: start;
  }
  .page-products .pb-rank-grid {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .page-products .pb-profile-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .page-products .pb-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .pb-version-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px;
    align-items: end;
  }
  .page-products .pb-version-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-products .pb-vnode {
    flex: none;
    min-width: 0;
    padding: 22px 16px 18px;
  }
  .page-products .pb-curve-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 44px;
    align-items: start;
  }
  .page-products .pb-refresh-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
  .page-products .pb-device-grid {
    grid-template-columns: minmax(0, 1.25fr) 320px;
    gap: 48px;
    align-items: start;
  }
  .page-products .pb-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
  }
}

@media (min-width: 1180px) {
  .page-products .pb-hero-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .page-products .pb-rank-grid {
    grid-template-columns: 268px minmax(0, 1fr);
  }
  .page-products .pb-table {
    font-size: 15px;
  }
  .page-products .pb-table tbody td {
    padding: 13px 14px;
  }
  .page-products .pb-table thead th {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pb-dot {
    animation: none;
  }
  .page-products .pb-pcard {
    transition: none;
  }
}
<<<END>>>