.page-products {
  --prod-ink-soft: #4E5F7C;
  --prod-rail-w: 216px;
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb {
  padding-top: var(--stack);
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  position: relative;
  padding: calc(var(--block) * 0.6) 0 var(--block);
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 88% -10%, rgba(46, 125, 209, 0.22), transparent 62%),
    radial-gradient(80% 60% at 6% 110%, rgba(217, 58, 58, 0.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(30, 58, 99, 0.32) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(30, 58, 99, 0.32) 0 1px, transparent 1px 68px);
}

.page-products .prod-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .prod-hero__title {
  margin: 14px 0 0;
  max-width: 21ch;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--snow);
  text-wrap: balance;
}

.page-products .prod-hero__lead {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-hero__grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 50px);
}

@media (min-width: 880px) {
  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 24px;
    align-items: start;
  }
}

.page-products .prod-channel {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard-lg);
}

.page-products .prod-channel--client {
  border-top: 4px solid var(--blue);
}

.page-products .prod-channel--web {
  background: var(--snow);
  border-top: 4px solid var(--red);
}

.page-products .prod-channel__kicker {
  margin: 0;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-products .prod-channel--web .prod-channel__kicker {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel__title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--snow);
}

.page-products .prod-channel--web .prod-channel__title {
  color: var(--night);
}

.page-products .prod-channel__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

.page-products .prod-channel--web .prod-channel__text {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .prod-channel__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dust);
}

.page-products .prod-channel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  background: var(--yellow);
}

.page-products .prod-channel--web .prod-channel__list li {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel .btn {
  margin-top: 24px;
}

.page-products .prod-channel--web .btn--line {
  border-color: var(--night);
  color: var(--night);
}

.page-products .prod-channel--web .btn--line:hover,
.page-products .prod-channel--web .btn--line:focus-visible {
  background: var(--night);
  color: var(--snow);
}

/* 首屏数据条 */
.page-products .prod-facts {
  display: grid;
  gap: 1px;
  margin-top: clamp(24px, 3.5vw, 42px);
  background: var(--line);
  border: var(--edge);
}

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

.page-products .prod-facts .stat {
  padding: 18px 20px;
  background: var(--night);
}

.page-products .prod-facts .stat__label {
  margin-top: 4px;
}

/* ---------- 左侧索引 + 宽正文 ---------- */
.page-products .prod-layout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--block);
}

@media (min-width: 980px) {
  .page-products .prod-layout {
    grid-template-columns: minmax(0, var(--prod-rail-w)) minmax(0, 1fr);
    align-items: start;
  }
}

.page-products .prod-rail {
  border: var(--edge);
  background: var(--night-2);
  padding: 18px;
}

@media (min-width: 980px) {
  .page-products .prod-rail {
    position: sticky;
    top: 96px;
  }
}

.page-products .prod-rail__title {
  margin: 0 0 14px;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dust);
}

.page-products .prod-rail__nav {
  display: grid;
  gap: 4px;
}

.page-products .prod-rail__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dust);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .prod-rail__link .mono {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--blue);
}

.page-products .prod-rail__link:hover,
.page-products .prod-rail__link:focus-visible {
  color: var(--snow);
  background: rgba(46, 125, 209, 0.12);
}

.page-products .prod-rail__link[data-active] {
  color: var(--snow);
  border-left-color: var(--yellow);
  background: rgba(46, 125, 209, 0.18);
}

@media (max-width: 979px) {
  .page-products .prod-rail__nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .page-products .prod-rail__link {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-left-width: 2px;
  }
  .page-products .prod-rail__link[data-active] {
    border-color: var(--blue);
    border-left-color: var(--yellow);
  }
}

/* ---------- 章节 ---------- */
.page-products .prod-section {
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 2px solid var(--line);
}

.page-products .prod-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .prod-section .eyebrow {
  margin: 0;
}

.page-products .prod-body .section__title {
  margin: 10px 0 0;
  max-width: 30ch;
}

.page-products .prod-body .section__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--dust);
}

/* ---------- 配图 ---------- */
.page-products .prod-figure {
  margin: clamp(22px, 3vw, 34px) 0 0;
  border: var(--edge);
  box-shadow: var(--hard-lg);
  background: var(--night-2);
}

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

/* ---------- 四端切换 ---------- */
.page-products .prod-tabs {
  margin-top: clamp(22px, 3vw, 34px);
}

.page-products .prod-tabs__radio,
.page-products .range__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .prod-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .prod-tabs__btn {
  padding: 10px 18px;
  border: var(--edge);
  background: var(--night-2);
  color: var(--dust);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .prod-tabs__btn:hover {
  color: var(--snow);
  border-color: var(--blue);
}

.page-products #pf-win:checked ~ .prod-tabs__bar label[for="pf-win"],
.page-products #pf-mac:checked ~ .prod-tabs__bar label[for="pf-mac"],
.page-products #pf-android:checked ~ .prod-tabs__bar label[for="pf-android"],
.page-products #pf-ios:checked ~ .prod-tabs__bar label[for="pf-ios"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--snow);
}

.page-products #pf-win:focus-visible ~ .prod-tabs__bar label[for="pf-win"],
.page-products #pf-mac:focus-visible ~ .prod-tabs__bar label[for="pf-mac"],
.page-products #pf-android:focus-visible ~ .prod-tabs__bar label[for="pf-android"],
.page-products #pf-ios:focus-visible ~ .prod-tabs__bar label[for="pf-ios"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-products .prod-tabs__panels {
  margin-top: 14px;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

.page-products .prod-tabs__panel {
  display: none;
  padding: clamp(20px, 3vw, 30px);
}

.page-products #pf-win:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(1),
.page-products #pf-mac:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(2),
.page-products #pf-android:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(3),
.page-products #pf-ios:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(4) {
  display: block;
}

.page-products .prod-tabs__panel-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--snow);
}

.page-products .prod-tabs__panel p {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.page-products .prod-points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dust);
}

.page-products .prod-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--green);
}

/* ---------- 订阅要点 ---------- */
.page-products .prod-feature-list {
  display: grid;
  gap: 0;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

@media (min-width: 780px) {
  .page-products .prod-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .prod-feature-list li {
  padding: clamp(18px, 2.6vw, 26px);
  border-bottom: 2px solid var(--line);
}

.page-products .prod-feature-list li:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .prod-feature-list li {
    border-bottom: 0;
    border-right: 2px solid var(--line);
  }
  .page-products .prod-feature-list li:last-child {
    border-right: 0;
  }
}

.page-products .prod-feature-list h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--snow);
}

.page-products .prod-feature-list p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 赛前十分钟时间线 ---------- */
.page-products .prod-minute {
  position: relative;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-products .prod-minute::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.page-products .prod-minute li {
  position: relative;
  display: grid;
  gap: 4px;
}

.page-products .prod-minute li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--night);
  border: 2px solid var(--yellow);
}

@media (min-width: 700px) {
  .page-products .prod-minute li {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0 18px;
    align-items: baseline;
  }
}

.page-products .prod-minute .mono {
  font-family: var(--font-num);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.page-products .prod-minute h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--snow);
}

.page-products .prod-minute p {
  margin: 6px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 比分区间 ---------- */
.page-products .range {
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(20px, 3vw, 32px);
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard-lg);
}

.page-products .range__scale {
  margin-bottom: 20px;
}

.page-products .range__track {
  position: relative;
  height: 52px;
  border-bottom: 2px solid var(--line);
}

.page-products .range__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 16px);
}

.page-products .range__thumb {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: calc(100% / 3);
  height: 6px;
  background: var(--yellow);
  z-index: 1;
  transition: left var(--dur) var(--ease);
}

.page-products #band-b:checked ~ .range__scale .range__thumb {
  left: calc(100% / 3);
}

.page-products #band-c:checked ~ .range__scale .range__thumb {
  left: calc(100% / 3 * 2);
}

.page-products .range__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.page-products .range__marks .mono {
  font-family: var(--font-num);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dust);
}

.page-products .range__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.page-products .range__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: var(--edge);
  background: var(--night);
  font-size: 13px;
  color: var(--dust);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-products .range__opt .mono {
  font-family: var(--font-num);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--snow);
}

.page-products .range__opt:hover {
  border-color: var(--blue);
}

.page-products #band-a:checked ~ .range__options label[for="band-a"],
.page-products #band-b:checked ~ .range__options label[for="band-b"],
.page-products #band-c:checked ~ .range__options label[for="band-c"] {
  border-color: var(--yellow);
  background: var(--night-2);
  box-shadow: inset 3px 0 0 var(--yellow);
  color: var(--snow);
}

.page-products #band-a:focus-visible ~ .range__options label[for="band-a"],
.page-products #band-b:focus-visible ~ .range__options label[for="band-b"],
.page-products #band-c:focus-visible ~ .range__options label[for="band-c"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-products .range__panel {
  display: none;
  border-top: 2px solid var(--line);
  padding-top: 18px;
}

.page-products #band-a:checked ~ .range__panels .range__panel:nth-child(1),
.page-products #band-b:checked ~ .range__panels .range__panel:nth-child(2),
.page-products #band-c:checked ~ .range__panels .range__panel:nth-child(3) {
  display: block;
}

.page-products .range__panel-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--snow);
}

.page-products .range__panel p {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-combine {
  display: grid;
  gap: 10px;
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .prod-combine li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: var(--edge);
  background: var(--night-2);
  font-size: 14px;
  color: var(--dust);
}

.page-products .prod-combine .mono {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--night);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

/* ---------- 注册步骤 ---------- */
.page-products .prod-steps {
  display: grid;
  gap: 0;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

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

.page-products .prod-steps li {
  padding: clamp(18px, 2.6vw, 26px);
  border-bottom: 2px solid var(--line);
}

.page-products .prod-steps li:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .prod-steps li {
    border-bottom: 0;
    border-right: 2px solid var(--line);
  }
  .page-products .prod-steps li:last-child {
    border-right: 0;
  }
}

.page-products .prod-steps__num {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  background: var(--night);
  font-family: var(--font-num);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.page-products .prod-steps h3 {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--snow);
}

.page-products .prod-steps p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 版本时间线 ---------- */
.page-products .prod-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: clamp(24px, 3.5vw, 38px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.page-products .prod-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.page-products .prod-timeline li {
  position: relative;
}

.page-products .prod-timeline li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--night);
  border: 2px solid var(--blue);
}

.page-products .prod-timeline li.is-now::before {
  background: var(--green);
  border-color: var(--green);
}

.page-products .prod-timeline .mono {
  font-family: var(--font-num);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.page-products .prod-timeline li.is-now .mono {
  color: var(--green);
}

.page-products .prod-timeline p {
  margin: 6px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 下一步入口 ---------- */
.page-products .prod-next {
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: clamp(26px, 3.5vw, 40px);
  border-top: 2px solid var(--line);
}

.page-products .prod-next .section__title {
  margin: 0;
}

.page-products .prod-next__grid {
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

@media (min-width: 640px) {
  .page-products .prod-next__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .page-products .prod-next__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .prod-next__link {
  display: block;
  padding: 18px 16px;
  border: var(--edge);
  background: var(--night-2);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .prod-next__link:hover,
.page-products .prod-next__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--hard-lg);
}

.page-products .prod-next__link .mono {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
}

.page-products .prod-next__link strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--snow);
}

.page-products .prod-next__link p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dust);
}

@media (prefers-reduced-motion: reduce) {
  .page-products .range__thumb,
  .page-products .prod-raill__link,
  .page-products .prod-next__link,
  .page-products .prod-tabs__btn,
  .page-products .range__opt {
    transition: none;
  }
  .page-products .prod-next__link:hover,
  .page-products .prod-next__link:focus-visible {
    transform: none;
  }
}
<<<END>>>

随手检查一下：

- 我写了一个 `.prod-raill__link` 的笔误，在 reduced-motion 块里。得修掉。

其实那段需要重写。改掉：

```css
@media (prefers-reduced-motion: reduce) {
  .page-products .range__thumb,
  .page-products .prod-rail__link,
  .page-products .prod-next__link,
  .page-products .prod-tabs__btn,
  .page-products .range__opt {
    transition: none;
  }
  .page-products .prod-next__link:hover,
  .page-products .prod-next__link:focus-visible {
    transform: none;
  }
}
```

其他都对。

- 已检查图片：5 张，符合要求。
- 已检查标题层级：h1 → 各 h2 → 各 h3。
- 核对锚点：`#install`、`#subscribe`、`#lineup`、`#score-range`、`#reports`、`#versions` 全部存在，且与 `data-section` / `data-section-link` 配对。
- 关键短语按规则各出现一次。
- 品牌名称“米乐娱乐”已出现在 hero 的导语中。
- 没有表单、没有外部链接、没有虚假联系方式。
- 所有数字都是真实文本。
<main id="main-content" class="page-products">

  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <a class="breadcrumb__item" href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span class="breadcrumb__item">观赛产品</span>
    </nav>
  </div>

  <section class="prod-hero">
    <div class="container prod-hero__inner">
      <p class="eyebrow">观赛产品 · 两条通道</p>
      <h1 id="prod-h1" class="prod-hero__title">装客户端还是开网页，看你习惯怎么盯这一轮</h1>
      <p class="prod-hero__lead">
        米乐娱乐把观赛前后要办的事拆成两条顺手通道。想在开赛前十分钟被提醒、把首发和伤停一次看全，装客户端更省心；只想点开就查某一轮、按比分区间往回翻旧赛，浏览器端一个字都不用装。下面按你会遇到的具体场景，把两条通道各自能做什么、什么时候更新、注册之后多出什么讲清楚。
      </p>

      <div class="prod-hero__grid">
        <article class="prod-channel prod-channel--client">
          <p class="prod-channel__kicker mono">客户端 · 4.2</p>
          <h2 class="prod-channel__title">米乐M6客户端CN</h2>
          <p class="prod-channel__text">落地在设备上的那条通道。订阅、提醒、离线战报都在这儿，适合把看球当成固定日程的人。</p>
          <ul class="prod-channel__list">
            <li>联赛订阅与开赛提醒，锁屏也能收到</li>
            <li>赛前十分钟的首发与伤停推到眼前</li>
            <li>战报支持离线缓存，没网也能翻</li>
          </ul>
          <a class="btn btn--solid" href="#install">看安装方式</a>
        </article>

        <article class="prod-channel prod-channel--web">
          <p class="prod-channel__kicker mono">浏览器端 · 免安装</p>
          <h2 class="prod-channel__title">浏览器端米乐查询</h2>
          <p class="prod-channel__text">打开就用的那条通道。按比分区间、球队、轮次、日期把旧赛翻出来，适合临时起意查一场的时候。</p>
          <ul class="prod-channel__list">
            <li>比分区间筛选，0–1 / 2–3 / 4 球以上</li>
            <li>球队、轮次、日期可叠加组合</li>
            <li>账号与客户端共用，注册后进战报合集</li>
          </ul>
          <a class="btn btn--line" href="#score-range">查比分区间</a>
        </article>
      </div>

      <div class="prod-facts">
        <div class="stat">
          <span class="stat__value mono">12</span>
          <span class="stat__label">个联赛与杯赛可订阅</span>
        </div>
        <div class="stat">
          <span class="stat__value mono">4.2</span>
          <span class="stat__label">客户端当前版本</span>
        </div>
        <div class="stat">
          <span class="stat__value mono">约 8 周</span>
          <span class="stat__label">一次功能更新</span>
        </div>
      </div>
    </div>
  </section>

  <div class="container">
    <div class="prod-layout">

      <aside class="prod-rail" aria-label="本页栏目索引">
        <p class="prod-rail__title">按顺序看</p>
        <nav class="prod-rail__nav">
          <a class="prod-rail__link" href="#install" data-section-link="install"><span class="mono">01</span>四个平台都能装上</a>
          <a class="prod-rail__link" href="#subscribe" data-section-link="subscribe"><span class="mono">02</span>订阅与开赛提醒</a>
          <a class="prod-rail__link" href="#lineup" data-section-link="lineup"><span class="mono">03</span>赛前十分钟阵容</a>
          <a class="prod-rail__link" href="#score-range" data-section-link="score-range"><span class="mono">04</span>按比分区间回查</a>
          <a class="prod-rail__link" href="#reports" data-section-link="reports"><span class="mono">05</span>注册后进战报合集</a>
          <a class="prod-rail__link" href="#versions" data-section-link="versions"><span class="mono">06</span>版本怎么迭代</a>
        </nav>
      </aside>

      <div class="prod-body">

        <section class="prod-section" id="install" data-section="install" data-reveal>
          <p class="eyebrow">01 / 安装</p>
          <h2 class="section__title">四个平台都能装上，登录后设置跟着你走</h2>
          <p class="section__lead">Windows、macOS、Android、iOS 各有一份 4.2 版本客户端。你在手机上订的联赛、标了提醒的重点场次，换到电脑打开还是那一份，不用重新配一遍。</p>

          <figure class="prod-figure media media--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="桌面、笔记本与移动设备轮廓横向排列的抽象设备示意，无品牌标识" loading="lazy" decoding="async">
            <figcaption class="media__caption">四个平台共用一套账号</figcaption>
          </figure>

          <div class="prod-tabs">
            <input class="prod-tabs__radio" type="radio" name="platform" id="pf-win" checked>
            <input class="prod-tabs__radio" type="radio" name="platform" id="pf-mac">
            <input class="prod-tabs__radio" type="radio" name="platform" id="pf-android">
            <input class="prod-tabs__radio" type="radio" name="platform" id="pf-ios">

            <div class="prod-tabs__bar">
              <label class="prod-tabs__btn" for="pf-win">Windows</label>
              <label class="prod-tabs__btn" for="pf-mac">macOS</label>
              <label class="prod-tabs__btn" for="pf-android">Android</label>
              <label class="prod-tabs__btn" for="pf-ios">iOS</label>
            </div>

            <div class="prod-tabs__panels">
              <div class="prod-tabs__panel">
                <h3 class="prod-tabs__panel-title">Windows</h3>
                <p>装上 4.2 版本后用账号登录，订阅列表、关注球队和提醒设置一次性同步过来。适合一边开着当轮看板、一边干别的事。</p>
                <ul class="prod-points">
                  <li>多窗口并排，当轮场次和战报各占一个</li>
                  <li>开赛提醒走桌面通知，不挡视线</li>
                </ul>
              </div>
              <div class="prod-tabs__panel">
                <h3 class="prod-tabs__panel-title">macOS</h3>
                <p>界面和 Windows 端对齐，操作习惯不用重学。同样支持多窗口，阵容和战报在不同窗口里各自保持刷新。</p>
                <ul class="prod-points">
                  <li>与 iOS 端共用登录态，手机电脑来回切</li>
                  <li>提醒可设置为静默，只看不打扰</li>
                </ul>
              </div>
              <div class="prod-tabs__panel">
                <h3 class="prod-tabs__panel-title">Android</h3>
                <p>装在手机上，开赛提醒走系统通知，锁屏状态也能收到。战报支持先缓存下来，通勤路上没信号照样能翻已存好的轮次。</p>
                <ul class="prod-points">
                  <li>提醒按重点场次单独设置，不用全开</li>
                  <li>离线缓存按轮次管理，占多少自己清</li>
                </ul>
              </div>
              <div class="prod-tabs__panel">
                <h3 class="prod-tabs__panel-title">iOS</h3>
                <p>安装后开启通知权限，重点场次会在开赛前十分钟推到你面前。账号和浏览器端共用，订阅和关注列表自动对齐。</p>
                <ul class="prod-points">
                  <li>提醒时间与阵容更新节点一致</li>
                  <li>关注列表本地保留，换设备登录即恢复</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section class="prod-section" id="subscribe" data-section="subscribe" data-reveal>
          <p class="eyebrow">02 / 订阅与提醒</p>
          <h2 class="section__title">把你真正要看的挑出来，到点它来找你</h2>
          <p class="section__lead">12 个联赛与杯赛不必全跟。订上常看的那几个，当轮看板先把它们的场次排在最前面；碰上非看不可的一场，再单独给这一场设个提醒。</p>

          <figure class="prod-figure media">
            <img src="{zhanqunpic:h:750w:1200}" width="1200" height="750" alt="联赛标签与提醒开关排列而成的抽象界面图形" loading="lazy" decoding="async">
            <figcaption class="media__caption">订阅按联赛走，提醒按场次走</figcaption>
          </figure>

          <ul class="prod-feature-list">
            <li>
              <h3>按联赛订，不按天订</h3>
              <p>订阅跟着赛季走，联赛一开始就常驻在你的看板里，轮次之间不用重新选。</p>
            </li>
            <li>
              <h3>重点场次单独设提醒</h3>
              <p>订阅和提醒是两级设置，互不冲突。整季跟的和只看一场的，可以同时存在。</p>
            </li>
            <li>
              <h3>提醒落在开赛前十分钟</h3>
              <p>那个时点刚好是阵容更新完成的时候，点开就是这一版，不用再等。</p>
            </li>
          </ul>
        </section>

        <section class="prod-section" id="lineup" data-section="lineup" data-reveal>
          <p class="eyebrow">03 / 赛前十分钟</p>
          <h2 class="section__title">首发和伤停，摆在当轮场次卡的同一块位置</h2>
          <p class="section__lead">只看重点场次的人不需要一份长报告。你要的东西就三样，全都在同一张卡片上刷新，不用来回切页面。</p>

          <figure class="prod-figure media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="阵容名单与时间标记排列成的抽象列表图形，不含真实姓名" loading="lazy" decoding="async">
            <figcaption class="media__caption">阵容、伤停、状态摘要同批更新</figcaption>
          </figure>

          <ol class="prod-minute">
            <li>
              <span class="mono">T−10′</span>
              <div>
                <h3>首发名单</h3>
                <p>开赛前十分钟落到场次卡上，主客两边一起给。</p>
              </div>
            </li>
            <li>
              <span class="mono">T−10′</span>
              <div>
                <h3>伤停缺阵</h3>
                <p>谁这场打不了，直接标在名单旁边，不用自己去对。</p>
              </div>
            </li>
            <li>
              <span class="mono">T−10′</span>
              <div>
                <h3>近期状态摘要</h3>
                <p>最近几场的走势浓缩成一行，扫一眼就知道最近顺不顺。</p>
              </div>
            </li>
          </ol>
        </section>

        <section class="prod-section" id="score-range" data-section="score-range" data-reveal>
          <p class="eyebrow">04 / 比分区间</p>
          <h2 class="section__title">别一场一场点，按区间往回捞</h2>
          <p class="section__lead">想看的常常不是某一场，而是「这一整轮里进球少的都有哪些」。先框定比分区间，再叠上球队、轮次或日期，列表重新给你一份。</p>

          <div class="range">
            <input class="range__radio" type="radio" name="score-band" id="band-a" checked>
            <input class="range__radio" type="radio" name="score-band" id="band-b">
            <input class="range__radio" type="radio" name="score-band" id="band-c">

            <div class="range__scale">
              <div class="range__track">
                <span class="range__thumb" aria-hidden="true"></span>
              </div>
              <div class="range__marks" aria-hidden="true">
                <span class="mono">0</span>
                <span class="mono">1</span>
                <span class="mono">2</span>
                <span class="mono">3</span>
                <span class="mono">4</span>
                <span class="mono">5+</span>
              </div>
            </div>

            <div class="range__options">
              <label class="range__opt" for="band-a"><span class="mono">0–1</span>球</label>
              <label class="range__opt" for="band-b"><span class="mono">2–3</span>球</label>
              <label class="range__opt" for="band-c"><span class="mono">4+</span>球</label>
            </div>

            <div class="range__panels">
              <div class="range__panel">
                <h3 class="range__panel-title">低分局</h3>
                <p>低分场次往往扎堆出现在赛季初和赛程最密的那几周。把区间定在这一段，再叠上联赛和轮次，整个阶段的比赛能一口气翻完。</p>
              </div>
              <div class="range__panel">
                <h3 class="range__panel-title">常见区间</h3>
                <p>这是出现得最多的一个区间。代入你关注的球队，几个赛季下来说得清它大致落在什么分数段，比单看某一场有参考价值。</p>
              </div>
              <div class="range__panel">
                <h3 class="range__panel-title">大比分局</h3>
                <p>大比分不常来，来了往往挤在同一段时间。把日期范围收窄到某个月，找火力集中的那一段会快很多。</p>
              </div>
            </div>
          </div>

          <ul class="prod-combine">
            <li><span class="mono">球队</span>只看关注队伍的比赛</li>
            <li><span class="mono">轮次</span>锁定某一轮的范围</li>
            <li><span class="mono">日期</span>按时间段圈出结果</li>
          </ul>

          <figure class="prod-figure media media--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="横向刻度尺与区间高亮块构成的查询示意图形" loading="lazy" decoding="async">
            <figcaption class="media__caption">区间筛选 2023 年上线，沿用至今</figcaption>
          </figure>
        </section>

        <section class="prod-section" id="reports" data-section="reports" data-reveal>
          <p class="eyebrow">05 / 战报合集</p>
          <h2 class="section__title">注册之后，三个赛季的战报按赛事分类存着</h2>
          <p class="section__lead">不注册也能用查询。想翻旧账就注册一个账号：进到赛后战报合集，近 3 个赛季约 1,860 轮的记录按赛事分类排好，点开某一轮就是那一场的完整战报与数据。</p>

          <ol class="prod-steps">
            <li>
              <span class="prod-steps__num mono">01</span>
              <h3>用邮箱注册</h3>
              <p>一个邮箱就够，之后用同一个账号登录客户端和浏览器端。</p>
            </li>
            <li>
              <span class="prod-steps__num mono">02</span>
              <h3>定下观赛偏好</h3>
              <p>选几个联赛、几支球队，之后打开的看板按这个顺序排。</p>
            </li>
            <li>
              <span class="prod-steps__num mono">03</span>
              <h3>进合集翻旧轮</h3>
              <p>按赛事分类往下点，每个赛季的每一轮都能翻到。</p>
            </li>
          </ol>
        </section>

        <section class="prod-section" id="versions" data-section="versions" data-reveal>
          <p class="eyebrow">06 / 版本迭代</p>
          <h2 class="section__title">4.2 版本，大约每八周往前挪一步</h2>
          <p class="section__lead">客户端从 1.0 走到 4.2，平均每 8 周发一次功能更新。改的大多是每天都要用的地方：查询响应、提醒时点、列表翻起来顺不顺手。</p>

          <figure class="prod-figure media media--wide">
            <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="版本节点连成的横向时间轴抽象图形" loading="lazy" decoding="async">
            <figcaption class="media__caption">从 1.0 到 4.2 的主要节点</figcaption>
          </figure>

          <ol class="prod-timeline">
            <li>
              <span class="mono">2019</span>
              <p>平台开始运营，最初只覆盖少数联赛的赛程与比分。</p>
            </li>
            <li>
              <span class="mono">2021</span>
              <p>可按联赛来回切换的观赛主页上线，多联赛换着看不用反复跳转。</p>
            </li>
            <li>
              <span class="mono">2023</span>
              <p>比分区间筛选上线，0–1 球、2–3 球、4 球以上的查法固定下来。</p>
            </li>
            <li>
              <span class="mono">2024</span>
              <p>赛事专栏解读加入，站内 6 个专栏陆续成型，目前累计 420 余篇。</p>
            </li>
            <li class="is-now">
              <span class="mono">现在</span>
              <p>客户端到 4.2 版本，四端同步，更新节奏保持在约每 8 周一次。</p>
            </li>
          </ol>
        </section>

        <section class="prod-next" data-reveal>
          <h2 class="section__title">接着往下走</h2>
          <div class="prod-next__grid">
            <a class="prod-next__link" href="/journal/">
              <span class="mono">01</span>
              <strong>赛事日志</strong>
              <p>按轮次翻往期战报与专栏解读。</p>
            </a>
            <a class="prod-next__link" href="/faqs/">
              <span class="mono">02</span>
              <strong>常见问答</strong>
              <p>注册、阵容查看、区间筛选的具体步骤。</p>
            </a>
            <a class="prod-next__link" href="/profile/">
              <span class="mono">03</span>
              <strong>品牌概况</strong>
              <p>团队规模、覆盖范围与内容体系。</p>
            </a>
            <a class="prod-next__link" href="/inquiry/">
              <span class="mono">04</span>
              <strong>咨询通道</strong>
              <p>账号问题、内容纠错与合作洽谈。</p>
            </a>
          </div>
        </section>

      </div>
    </div>
  </div>

</main>

.page-products {
  --prod-ink-soft: #4E5F7C;
  --prod-rail-w: 216px;
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb {
  padding-top: var(--stack);
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  position: relative;
  padding: calc(var(--block) * 0.6) 0 var(--block);
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 88% -10%, rgba(46, 125, 209, 0.22), transparent 62%),
    radial-gradient(80% 60% at 6% 110%, rgba(217, 58, 58, 0.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(30, 58, 99, 0.32) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(30, 58, 99, 0.32) 0 1px, transparent 1px 68px);
}

.page-products .prod-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .prod-hero__title {
  margin: 14px 0 0;
  max-width: 21ch;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--snow);
  text-wrap: balance;
}

.page-products .prod-hero__lead {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-hero__grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 50px);
}

@media (min-width: 880px) {
  .page-products .prod-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 24px;
    align-items: start;
  }
}

.page-products .prod-channel {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard-lg);
}

.page-products .prod-channel--client {
  border-top: 4px solid var(--blue);
}

.page-products .prod-channel--web {
  background: var(--snow);
  border-top: 4px solid var(--red);
}

.page-products .prod-channel__kicker {
  margin: 0;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-products .prod-channel--web .prod-channel__kicker {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel__title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--snow);
}

.page-products .prod-channel--web .prod-channel__title {
  color: var(--night);
}

.page-products .prod-channel__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

.page-products .prod-channel--web .prod-channel__text {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .prod-channel__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dust);
}

.page-products .prod-channel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  background: var(--yellow);
}

.page-products .prod-channel--web .prod-channel__list li {
  color: var(--prod-ink-soft);
}

.page-products .prod-channel .btn {
  margin-top: 24px;
}

.page-products .prod-channel--web .btn--line {
  border-color: var(--night);
  color: var(--night);
}

.page-products .prod-channel--web .btn--line:hover,
.page-products .prod-channel--web .btn--line:focus-visible {
  background: var(--night);
  color: var(--snow);
}

/* 首屏数据条 */
.page-products .prod-facts {
  display: grid;
  gap: 1px;
  margin-top: clamp(24px, 3.5vw, 42px);
  background: var(--line);
  border: var(--edge);
}

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

.page-products .prod-facts .stat {
  padding: 18px 20px;
  background: var(--night);
}

.page-products .prod-facts .stat__label {
  margin-top: 4px;
}

/* ---------- 左侧索引 + 宽正文 ---------- */
.page-products .prod-layout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--block);
}

@media (min-width: 980px) {
  .page-products .prod-layout {
    grid-template-columns: minmax(0, var(--prod-rail-w)) minmax(0, 1fr);
    align-items: start;
  }
}

.page-products .prod-rail {
  border: var(--edge);
  background: var(--night-2);
  padding: 18px;
}

@media (min-width: 980px) {
  .page-products .prod-rail {
    position: sticky;
    top: 96px;
  }
}

.page-products .prod-rail__title {
  margin: 0 0 14px;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dust);
}

.page-products .prod-rail__nav {
  display: grid;
  gap: 4px;
}

.page-products .prod-rail__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dust);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .prod-rail__link .mono {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--blue);
}

.page-products .prod-rail__link:hover,
.page-products .prod-rail__link:focus-visible {
  color: var(--snow);
  background: rgba(46, 125, 209, 0.12);
}

.page-products .prod-rail__link[data-active] {
  color: var(--snow);
  border-left-color: var(--yellow);
  background: rgba(46, 125, 209, 0.18);
}

@media (max-width: 979px) {
  .page-products .prod-rail__nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .page-products .prod-rail__link {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-left-width: 2px;
  }
  .page-products .prod-rail__link[data-active] {
    border-color: var(--blue);
    border-left-color: var(--yellow);
  }
}

/* ---------- 章节 ---------- */
.page-products .prod-section {
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 2px solid var(--line);
}

.page-products .prod-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .prod-section .eyebrow {
  margin: 0;
}

.page-products .prod-body .section__title {
  margin: 10px 0 0;
  max-width: 30ch;
}

.page-products .prod-body .section__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--dust);
}

/* ---------- 配图 ---------- */
.page-products .prod-figure {
  margin: clamp(22px, 3vw, 34px) 0 0;
  border: var(--edge);
  box-shadow: var(--hard-lg);
  background: var(--night-2);
}

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

/* ---------- 四端切换 ---------- */
.page-products .prod-tabs {
  margin-top: clamp(22px, 3vw, 34px);
}

.page-products .prod-tabs__radio,
.page-products .range__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .prod-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .prod-tabs__btn {
  padding: 10px 18px;
  border: var(--edge);
  background: var(--night-2);
  color: var(--dust);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .prod-tabs__btn:hover {
  color: var(--snow);
  border-color: var(--blue);
}

.page-products #pf-win:checked ~ .prod-tabs__bar label[for="pf-win"],
.page-products #pf-mac:checked ~ .prod-tabs__bar label[for="pf-mac"],
.page-products #pf-android:checked ~ .prod-tabs__bar label[for="pf-android"],
.page-products #pf-ios:checked ~ .prod-tabs__bar label[for="pf-ios"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--snow);
}

.page-products #pf-win:focus-visible ~ .prod-tabs__bar label[for="pf-win"],
.page-products #pf-mac:focus-visible ~ .prod-tabs__bar label[for="pf-mac"],
.page-products #pf-android:focus-visible ~ .prod-tabs__bar label[for="pf-android"],
.page-products #pf-ios:focus-visible ~ .prod-tabs__bar label[for="pf-ios"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-products .prod-tabs__panels {
  margin-top: 14px;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

.page-products .prod-tabs__panel {
  display: none;
  padding: clamp(20px, 3vw, 30px);
}

.page-products #pf-win:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(1),
.page-products #pf-mac:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(2),
.page-products #pf-android:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(3),
.page-products #pf-ios:checked ~ .prod-tabs__panels .prod-tabs__panel:nth-child(4) {
  display: block;
}

.page-products .prod-tabs__panel-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--snow);
}

.page-products .prod-tabs__panel p {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.page-products .prod-points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dust);
}

.page-products .prod-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--green);
}

/* ---------- 订阅要点 ---------- */
.page-products .prod-feature-list {
  display: grid;
  gap: 0;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

@media (min-width: 780px) {
  .page-products .prod-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .prod-feature-list li {
  padding: clamp(18px, 2.6vw, 26px);
  border-bottom: 2px solid var(--line);
}

.page-products .prod-feature-list li:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .prod-feature-list li {
    border-bottom: 0;
    border-right: 2px solid var(--line);
  }
  .page-products .prod-feature-list li:last-child {
    border-right: 0;
  }
}

.page-products .prod-feature-list h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--snow);
}

.page-products .prod-feature-list p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 赛前十分钟时间线 ---------- */
.page-products .prod-minute {
  position: relative;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-products .prod-minute::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.page-products .prod-minute li {
  position: relative;
  display: grid;
  gap: 4px;
}

.page-products .prod-minute li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--night);
  border: 2px solid var(--yellow);
}

@media (min-width: 700px) {
  .page-products .prod-minute li {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0 18px;
    align-items: baseline;
  }
}

.page-products .prod-minute .mono {
  font-family: var(--font-num);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.page-products .prod-minute h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--snow);
}

.page-products .prod-minute p {
  margin: 6px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 比分区间 ---------- */
.page-products .range {
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(20px, 3vw, 32px);
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard-lg);
}

.page-products .range__scale {
  margin-bottom: 20px;
}

.page-products .range__track {
  position: relative;
  height: 52px;
  border-bottom: 2px solid var(--line);
}

.page-products .range__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 16px);
}

.page-products .range__thumb {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: calc(100% / 3);
  height: 6px;
  background: var(--yellow);
  z-index: 1;
  transition: left var(--dur) var(--ease);
}

.page-products #band-b:checked ~ .range__scale .range__thumb {
  left: calc(100% / 3);
}

.page-products #band-c:checked ~ .range__scale .range__thumb {
  left: calc(100% / 3 * 2);
}

.page-products .range__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.page-products .range__marks .mono {
  font-family: var(--font-num);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dust);
}

.page-products .range__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.page-products .range__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: var(--edge);
  background: var(--night);
  font-size: 13px;
  color: var(--dust);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-products .range__opt .mono {
  font-family: var(--font-num);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--snow);
}

.page-products .range__opt:hover {
  border-color: var(--blue);
}

.page-products #band-a:checked ~ .range__options label[for="band-a"],
.page-products #band-b:checked ~ .range__options label[for="band-b"],
.page-products #band-c:checked ~ .range__options label[for="band-c"] {
  border-color: var(--yellow);
  background: var(--night-2);
  box-shadow: inset 3px 0 0 var(--yellow);
  color: var(--snow);
}

.page-products #band-a:focus-visible ~ .range__options label[for="band-a"],
.page-products #band-b:focus-visible ~ .range__options label[for="band-b"],
.page-products #band-c:focus-visible ~ .range__options label[for="band-c"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.page-products .range__panel {
  display: none;
  border-top: 2px solid var(--line);
  padding-top: 18px;
}

.page-products #band-a:checked ~ .range__panels .range__panel:nth-child(1),
.page-products #band-b:checked ~ .range__panels .range__panel:nth-child(2),
.page-products #band-c:checked ~ .range__panels .range__panel:nth-child(3) {
  display: block;
}

.page-products .range__panel-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--snow);
}

.page-products .range__panel p {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--dust);
}

.page-products .prod-combine {
  display: grid;
  gap: 10px;
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .prod-combine li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: var(--edge);
  background: var(--night-2);
  font-size: 14px;
  color: var(--dust);
}

.page-products .prod-combine .mono {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--night);
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--yellow);
}

/* ---------- 注册步骤 ---------- */
.page-products .prod-steps {
  display: grid;
  gap: 0;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  border: var(--edge);
  background: var(--night-2);
  box-shadow: var(--hard);
}

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

.page-products .prod-steps li {
  padding: clamp(18px, 2.6vw, 26px);
  border-bottom: 2px solid var(--line);
}

.page-products .prod-steps li:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .prod-steps li {
    border-bottom: 0;
    border-right: 2px solid var(--line);
  }
  .page-products .prod-steps li:last-child {
    border-right: 0;
  }
}

.page-products .prod-steps__num {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  background: var(--night);
  font-family: var(--font-num);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.page-products .prod-steps h3 {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--snow);
}

.page-products .prod-steps p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 版本时间线 ---------- */
.page-products .prod-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: clamp(24px, 3.5vw, 38px) 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.page-products .prod-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.page-products .prod-timeline li {
  position: relative;
}

.page-products .prod-timeline li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--night);
  border: 2px solid var(--blue);
}

.page-products .prod-timeline li.is-now::before {
  background: var(--green);
  border-color: var(--green);
}

.page-products .prod-timeline .mono {
  font-family: var(--font-num);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.page-products .prod-timeline li.is-now .mono {
  color: var(--green);
}

.page-products .prod-timeline p {
  margin: 6px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dust);
}

/* ---------- 下一步入口 ---------- */
.page-products .prod-next {
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: clamp(26px, 3.5vw, 40px);
  border-top: 2px solid var(--line);
}

.page-products .prod-next .section__title {
  margin: 0;
}

.page-products .prod-next__grid {
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

@media (min-width: 640px) {
  .page-products .prod-next__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .page-products .prod-next__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .prod-next__link {
  display: block;
  padding: 18px 16px;
  border: var(--edge);
  background: var(--night-2);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .prod-next__link:hover,
.page-products .prod-next__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--hard-lg);
}

.page-products .prod-next__link .mono {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
}

.page-products .prod-next__link strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--snow);
}

.page-products .prod-next__link p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dust);
}

@media (prefers-reduced-motion: reduce) {
  .page-products .range__thumb,
  .page-products .prod-rail__link,
  .page-products .prod-next__link,
  .page-products .prod-tabs__btn,
  .page-products .range__opt {
    transition: none;
  }
  .page-products .prod-next__link:hover,
  .page-products .prod-next__link:focus-visible {
    transform: none;
  }
}
<<<END>>>