.page-products {
  --pv-glow: 0 0 32px rgba(55, 240, 208, .14);
  --pv-grid: repeating-linear-gradient(0deg, rgba(55, 240, 208, .05) 0 1px, transparent 1px 5px);
  padding-bottom: clamp(20px, 4vw, 48px);
}

.page-products .wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}

/* ---------- 首屏 ---------- */

.page-products .sub-hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 4.4vw, 56px) 0 clamp(32px, 5vw, 64px);
  margin-top: clamp(10px, 1.6vw, 18px);
}

.page-products .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-products .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  filter: saturate(.72) contrast(1.08);
}

.page-products .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(55, 240, 208, .16), transparent 62%),
    radial-gradient(90% 70% at 8% 96%, rgba(255, 122, 69, .1), transparent 60%),
    linear-gradient(180deg, rgba(5, 20, 15, .48) 0%, rgba(5, 20, 15, .93) 68%, var(--ink) 100%);
}

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

.page-products .sub-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fog);
  text-shadow: 0 0 24px rgba(55, 240, 208, .18);
  max-width: 18ch;
}

.page-products .sub-hero__lead {
  margin: 0 0 clamp(20px, 3vw, 34px);
  max-width: 60ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .dot--live {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, .16);
}

/* ---------- 控制台 ---------- */

.page-products .console {
  display: grid;
  gap: var(--gap);
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(10, 31, 24, .82);
  background-image: var(--pv-grid);
  box-shadow: inset 0 1px 0 rgba(55, 240, 208, .07), 0 18px 48px rgba(0, 0, 0, .38);
  backdrop-filter: blur(2px);
}

.page-products .console__col {
  min-width: 0;
}

.page-products .console__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .cItem {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0 0 10px;
  padding: 11px 13px;
  text-align: left;
  font: inherit;
  color: var(--fog);
  background: rgba(5, 20, 15, .6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.page-products .cItem:last-of-type {
  margin-bottom: 0;
}

.page-products .cItem:hover {
  border-color: var(--cyan-line);
  border-left-color: var(--cyan);
}

.page-products .cItem.is-active {
  background: var(--panel-2);
  border-color: rgba(55, 240, 208, .34);
  border-left-color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(55, 240, 208, .14), var(--pv-glow);
}

.page-products .cItem__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.page-products .cItem__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--muted);
  line-height: 1.5;
}

.page-products .cItem.is-active .cItem__meta {
  color: rgba(55, 240, 208, .82);
}

.page-products .console__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .console__preview {
  min-width: 0;
}

.page-products .pv {
  position: relative;
  padding: clamp(14px, 1.8vw, 18px);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--panel-2), rgba(5, 20, 15, .9));
  overflow: hidden;
}

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

.page-products .pv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pv-grid);
  opacity: .7;
  pointer-events: none;
}

.page-products .pv > * {
  position: relative;
  z-index: 1;
}

.page-products .pv__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.page-products .pv__league {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-products .pv__score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .pv__team {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fog);
  min-width: 0;
}

.page-products .pv__team--away {
  text-align: right;
  align-items: flex-end;
}

.page-products .pv__side {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 5px;
  width: fit-content;
}

.page-products .pv .num--score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: -.02em;
  color: var(--fog);
  text-shadow: 0 0 18px rgba(255, 122, 69, .22);
  white-space: nowrap;
}

.page-products .pv__sep {
  color: var(--orange);
  margin-inline: 2px;
}

.page-products .pv__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pv__list {
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .pv__list li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fog-88);
  padding-left: 14px;
  position: relative;
}

.page-products .pv__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 章节通用 ---------- */

.page-products .section {
  padding: clamp(38px, 5.6vw, 74px) 0;
  border-bottom: 1px solid var(--line);
}

.page-products .section-head {
  position: relative;
  margin-bottom: clamp(22px, 3vw, 36px);
  padding-right: 0;
}

.page-products .section-head .vert-label {
  display: none;
}

.page-products .section-head__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--cyan);
  margin: 0 0 8px;
}

.page-products .section-head__num::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--cyan-line);
}

.page-products .section-head__title {
  margin: 0 0 10px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--fog);
  max-width: 26ch;
}

.page-products .section-head__sub {
  margin: 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--fog-88);
}

/* ---------- 01 三种订阅方式 ---------- */

.page-products .modes {
  display: grid;
  gap: var(--gap);
}

.page-products .mode {
  position: relative;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}

.page-products .mode--wide {
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 62%);
  border-color: rgba(55, 240, 208, .26);
}

.page-products .mode__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 3px 8px;
  border: 1px solid rgba(55, 240, 208, .34);
  border-radius: 2px;
  width: fit-content;
}

.page-products .mode__title {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fog);
}

.page-products .mode p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

.page-products .mode__fit {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px !important;
  color: var(--muted) !important;
}

.page-products .combo {
  display: grid;
  gap: 8px;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  background: rgba(255, 122, 69, .05);
}

.page-products .combo__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .combo__v {
  margin: 0;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

/* ---------- 02 连场接续 ---------- */

.page-products .relay-outer {
  display: grid;
  gap: var(--gap);
}

.page-products .relay {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.page-products .relay__match {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.page-products .relay__match--next {
  border-color: rgba(255, 211, 77, .34);
  background: linear-gradient(150deg, rgba(255, 211, 77, .07), var(--panel) 70%);
}

.page-products .relay__teams {
  margin: 10px 0 8px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--fog);
  line-height: 1.4;
}

.page-products .relay__vs {
  color: var(--orange);
  font-weight: 500;
  margin-inline: 4px;
}

.page-products .relay__state {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .relay__match--next .relay__state {
  color: rgba(255, 211, 77, .86);
}

.page-products .relay__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}

.page-products .relay__gap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted);
  white-space: nowrap;
}

.page-products .relay__dash {
  width: 1px;
  flex: 1;
  min-height: 26px;
  background-image: linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
  background-size: 1px 10px;
}

.page-products .relay__fig {
  margin: 0;
}

.page-products .relay-notes {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .relay-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fog-88);
}

.page-products .relay-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 03 推送控制台 ---------- */

.page-products .pctrl {
  display: grid;
  gap: var(--gap);
}

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

.page-products .pctrl__row {
  padding: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--line);
}

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

.page-products .pctrl__k {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pctrl__v {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
  max-width: 68ch;
}

.page-products .pctrl__panels {
  margin-top: 12px;
}

.page-products .pctrl__panel {
  margin: 0 0 8px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(5, 20, 15, .55);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fog-88);
}

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

.page-products .pctrl__panel.is-visible {
  border-color: rgba(55, 240, 208, .3);
  color: var(--fog);
}

.page-products .pctrl__hint {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pctrl__fig {
  margin: 0;
}

.page-products .switch--stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .sw {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  color: var(--fog-88);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}

.page-products .sw:hover {
  border-color: var(--cyan-line);
  color: var(--fog);
}

.page-products .sw.is-active {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .silence {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

.page-products .silence__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-products .silence__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .02em;
}

.page-products .silence__k {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}

.page-products .silence__line {
  flex: 1;
  min-width: 48px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}

.page-products .devices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .device {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(5, 20, 15, .5);
}

.page-products .device__k {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fog);
  min-width: 44px;
}

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

/* ---------- 04 主客场图层 ---------- */

.page-products .split {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-products .split__side {
  padding: clamp(14px, 2vw, 20px);
}

.page-products .split__side--home {
  background: linear-gradient(180deg, rgba(55, 240, 208, .06), transparent 72%);
}

.page-products .split__side--away {
  background: linear-gradient(180deg, rgba(255, 122, 69, .06), transparent 72%);
}

.page-products .split__divider {
  height: 1px;
  background: var(--line);
}

.page-products .split__side-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
}

.page-products .split__side--home .split__side-title {
  color: var(--cyan);
}

.page-products .split__side--away .split__side-title {
  color: var(--orange);
}

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

.page-products .kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}

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

.page-products .kv__k {
  font-size: 13.5px;
  color: var(--muted);
}

.page-products .kv__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--fog);
}

.page-products .ring-row {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
  margin-top: clamp(20px, 2.8vw, 30px);
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 31, 24, .7);
}

.page-products .ring {
  position: relative;
  justify-self: center;
  flex: none;
}

.page-products .ring svg {
  display: block;
  transform: rotate(-90deg);
}

.page-products .ring__track {
  stroke: rgba(30, 74, 58, .9);
}

.page-products .ring__value {
  stroke: var(--cyan);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(55, 240, 208, .42));
}

.page-products .ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.page-products .ring__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fog);
  line-height: 1;
}

.page-products .ring__num small {
  font-size: .58em;
  color: var(--cyan);
}

.page-products .ring__cap {
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.page-products .ring-row__title {
  margin: 0 0 10px;
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fog);
}

.page-products .ring-row__text p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .sec-split .media-frame {
  margin: clamp(20px, 2.8vw, 30px) 0 0;
}

/* ---------- 05 记录下载 ---------- */

.page-products .exp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: clamp(16px, 2.2vw, 26px);
}

.page-products .exp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.page-products .switch--fmt {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.page-products .fmt {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  padding: 9px 22px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.page-products .fmt:last-child {
  border-right: 0;
}

.page-products .fmt:hover {
  color: var(--fog);
}

.page-products .fmt.is-active {
  color: var(--fog);
  background: rgba(255, 122, 69, .14);
  box-shadow: inset 0 -2px 0 var(--orange);
}

.page-products .exp__hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 240px;
  min-width: 0;
}

.page-products .exp__notes {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.page-products .fmt-note {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

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

.page-products .fmt-note.is-visible {
  border-left-color: var(--orange);
  color: var(--fog);
}

.page-products .ftable-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  -webkit-overflow-scrolling: touch;
}

.page-products .ftable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-products .ftable caption {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.page-products .ftable th {
  text-align: left;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}

.page-products .ftable td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(30, 74, 58, .6);
  color: var(--fog-88);
  line-height: 1.6;
  vertical-align: top;
}

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

.page-products .ftable code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--yellow);
  background: rgba(255, 211, 77, .08);
  border: 1px solid var(--yellow-line);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}

.page-products .exp__fig {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}

.page-products .exp__foot {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .exp__foot a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 06 四步流程 ---------- */

.page-products .steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: grid;
  gap: 0;
}

.page-products .step {
  position: relative;
  padding: clamp(16px, 2vw, 22px) 0 clamp(16px, 2vw, 22px) clamp(46px, 7vw, 72px);
  border-top: 1px solid var(--line);
}

.page-products .step:last-child {
  border-bottom: 1px solid var(--line);
}

.page-products .step__num {
  position: absolute;
  left: 0;
  top: clamp(16px, 2vw, 22px);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-products .step__title {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fog);
}

.page-products .step p {
  margin: 0 0 10px;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .step__next {
  margin: 0 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  color: var(--muted) !important;
}

.page-products .step__next a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 07 常见疑问 ---------- */

.page-products .accordion {
  border-top: 1px solid var(--line);
}

.page-products .accordion__btn {
  width: 100%;
}

.page-products .accordion__btn span:nth-child(2) {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.page-products .accordion__inner p {
  margin: 0 0 10px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--fog-88);
}

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

.page-products .accordion__inner a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 结尾 CTA ---------- */

.page-products .end-cta {
  padding: clamp(34px, 5vw, 66px) 0;
}

.page-products .end-cta__box {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 120% at 90% 0%, rgba(55, 240, 208, .12), transparent 62%),
    linear-gradient(150deg, var(--panel-2), var(--ink) 78%);
  overflow: hidden;
}

.page-products .end-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pv-grid);
  opacity: .6;
  pointer-events: none;
}

.page-products .end-cta__box > * {
  position: relative;
  z-index: 1;
}

.page-products .end-cta__title {
  margin: 10px 0 12px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.28;
  color: var(--fog);
  max-width: 24ch;
}

.page-products .end-cta__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .end-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.page-products .end-cta__aside {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .end-cta__aside a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 760px) {
  .page-products .relay {
    grid-template-columns: 1fr 116px 1fr;
    align-items: center;
  }

  .page-products .relay__bridge {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .page-products .relay__dash {
    width: auto;
    height: 1px;
    min-height: 0;
    background-image: linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
    background-size: 10px 1px;
  }

  .page-products .split {
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
  }

  .page-products .split__divider {
    height: auto;
    width: 1px;
    background: var(--line);
  }

  .page-products .ring-row {
    grid-template-columns: auto 1fr;
  }

  .page-products .ring {
    justify-self: start;
  }

  .page-products .pctrl__row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px 20px;
  }

  .page-products .pctrl__k {
    margin-bottom: 0;
    padding-top: 2px;
  }

  .page-products .pctrl__panels,
  .page-products .silence,
  .page-products .devices,
  .page-products .pctrl__v,
  .page-products .pctrl__hint {
    grid-column: 2;
  }

  .page-products .pctrl__row--last .pctrl__v {
    grid-column: 2;
  }

  .page-products .console__preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-content: start;
  }

  .page-products .pv {
    margin-bottom: 0;
  }
}

@media (min-width: 900px) {
  .page-products .console {
    grid-template-columns: 5fr 7fr;
    gap: clamp(18px, 2.4vw, 30px);
  }

  .page-products .modes {
    grid-template-columns: 1.3fr 1fr 1fr;
    align-items: stretch;
  }

  .page-products .relay-outer {
    grid-template-columns: 1fr minmax(240px, 320px);
    align-items: start;
  }

  .page-products .relay__fig {
    margin-top: 0;
  }

  .page-products .pctrl {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }

  .page-products .sec-export .exp {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1060px) {
  .page-products .section-head {
    padding-right: 60px;
  }

  .page-products .section-head .vert-label {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
}

@media (max-width: 560px) {
  .page-products .pv__score {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }

  .page-products .pv__team,
  .page-products .pv__team--away {
    align-items: center;
    text-align: center;
  }

  .page-products .exp__head {
    gap: 10px;
  }

  .page-products .fmt {
    padding: 9px 16px;
  }

  .page-products .step {
    padding-left: 0;
    padding-top: clamp(46px, 12vw, 56px);
  }

  .page-products .step__num {
    top: clamp(16px, 2vw, 22px);
  }
}
</style>
<<<END>>>

等等，我最后多写了一个 `</style>`，得删掉，标记本身已经够了。输出里只保留 `` 和内容就好，不用额外的 `</style>`。

现在回头复查一遍关键点：

1. 只有一个 h1，没问题。
2. 面包屑导航有了。
3. 所有 href 都指向合法路由或真实锚点：#modes、#relay、#pctrl、#split-layer、#export、#start、#faq——这些 id 在 HTML 里都真实存在。
4. 图片：5 张，符合目标 5 张，最少 1 张，最多 15 张。尺寸也对：1600x900、800x800、800x600、1200x600、960x540。
   - 等等，主客场那章的图片是 h:600w:1200 → width 1200 height 600，没问题。
   - 首屏没加 loading lazy，其他都加了。
5. 用到的交互：data-switch 配 data-switch-btn 和 data-target；data-accordion 配 data-accordion-btn；data-reveal。
6. data-switch 的用法…… 嗯， `data-target` 指向的元素，比如 pv-club、pv-league、pv-window——这些是同一父容器里的同级元素。希望站点的 JS 能处理。

不过这里有个风险：如果 JS 默认把所有面板都隐藏，只显示 active 那个，那首屏进页面时就会是没错——一个显示，两个隐藏。这正是我们要的效果。

7. “体育赛事实时比分爱娱乐体育”在 01 节的 section-head__sub 里用了——嗯，但后面接的是“爱娱乐体育”作为品牌名插进去的：“订阅的内容就是体育赛事实时比分——爱娱乐体育按你选的节点推过来”。断句不太连贯，但可以接受，读起来挺顺的。

8. 品牌名“爱娱乐体育”出现在 h1 和 01 节的副标题里——自然。

9. 联系方式：这个页面没用到。没问题。

10. 没有表单，没有外部链接。

11. 检查禁止使用的短语：“口径、边界、核对、可核对、逐条核对、资料性呈现、统一口径、跨页面一致、不代表、不做承诺、不设、不提供、本页只、这个页面只做、我们不做”——扫一遍……“不会丢”没问题。“不做”没用。“不提供”没用。好。

嗯，还有“不重复”在“已读的不重复”里——这个没问题，是在讲推送行为。

12. 连续重复 8 个字以上：检查“周末两场之间，不用再动手”——只出现一次。“近 7 天赛事记录”出现了几次，但那是术语，没问题。

13. 前一段“同一订阅下的连续两场会自动接续”——FAQ 里也写了“同一订阅下的连续两场会自动接续”——等等，FAQ 里是“同一订阅下的连续两场会自动接续”——跟第 02 节的副标题“上一场的终场推送发出后，同一订阅下的下一场自动进入队列”对比——相似，但还不至于连续 8 个字完全相同。让我核对一下：“同一订阅下的” = 6 个字。没关系。

等等，再看 FAQ q-5：“同一订阅下的连续两场会自动接续，上一场终场推送发出后，下一场进入队列并按开赛时间提醒。中间那段空档还会给你一条预告。”

和第 02 节的副标题：“上一场的终场推送发出后，同一订阅下的下一场自动进入队列。中间那段空档，会给你一条含开赛时间与对阵的预告。”

嗯，“中间那段空档” + “给你一条”……“会给你一条含开赛时间与对阵的预告”对“中间那段空档还会给你一条预告”——相似，但不是连续的 8 个字完全相同。

让我微调一下，降低风险。把 FAQ 的 q-5 改短：

“同一订阅里的连续两场会自动接续：上一场收工后，下一场按开赛时间提醒你，中间还有一条预告。”

好。

还有 FAQ q-6 里的“推送一直没到”和结尾 CTA 的“推送没到”——没问题。

14. 检查一下 `.page-products .section { border-bottom: 1px solid var(--line); }`——最后一个 section 是 `.sec-faq`，然后才是 `.end-cta`。没问题。

15. `.page-products .exp` 在 900px 下用了 `display: grid; grid-template-columns: 1fr`——这条规则本质上是空操作。删掉它。

16. 检查 `.page-products .accordion__btn span:nth-child(2)` 是能生效的。

但要注意：共享的 `.accordion__btn` 可能本身就是 flex 布局，我的选择器没问题。

17. 关于 `ftable`，`min-width: 480px` 放在 100% 宽度且带 `overflow-x: auto` 的容器里，选择器用 `.page-products .ftable-wrap { overflow-x: auto }` 就行，手机上也没问题。

18. console 在 760px 的断点里设置过 `.console__preview` 的 grid，900px 又设了 `.console` 的 `grid-template-columns`，不会有冲突。

嗯，还有一个潜在的重叠问题：在 760px 时 `.console__preview` 变成了 grid，卡片会有最小宽度。在 900px 以下 console 还是单列堆叠，那 `.console__preview` 在约 800px 时变成两列的话，可能会太挤。但 `minmax(240px, 1fr)` 会自动折行到单列，所以没关系。

其实更稳妥的做法是把这个 grid 挪到 900px 的断点里，跟双列 console 同时生效。让我移到 900px 那档去吧。

19. `.page-products .ring` 上面的 `--size` 是通过内联样式设置的，没问题。

20. 整个页面纵向节奏没问题。

21. 最后再来确认一次 `vert-label` —— 页面上其他地方用过吗？只有 section-head 里。第 1060px 起显示，而且只在有 `data-reveal` 的区块里出现，没问题。

我现在把定稿再理一遍，把调过的小地方收进去。

`.exp` 的 `display: grid` 那行删掉。

另外，`.page-products .pctrl__row--last .pctrl__v { grid-column: 2; }` —— 其实也可以用 `.pctrl__row--last .pctrl__v`，但放在 760px 的媒体查询里就行了，因为 `.pctrl__v` 本来就已经指定了。

不过等一下，`.pctrl__v` 是在 760px 的 `grid-column: 2` 列表里的，那 `.pctrl__row--last` 里包含的 `<p class="pctrl__k">` 加上 `<p class="pctrl__v">` 就自然有效，不用额外写。

好，再最后扫一眼 CSS 有没有语法问题。

重写一遍替换后的 `` 区块，把修正都包含进去。另外还要把误加的 `</style>` 删掉。
<main id="main-content" class="page-products">

  <div class="wrap">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li><a href="/apps/" aria-current="page">比分订阅中心</a></li>
      </ol>
    </nav>
  </div>

  <section class="sub-hero">
    <div class="hero-media" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间暗色控制台界面上的数据波形与光晕抽象视觉">
    </div>
    <div class="wrap sub-hero__inner">
      <p class="eyebrow">PUSH CONSOLE · 推送控制台</p>
      <h1>订阅爱娱乐体育实时比分</h1>
      <p class="sub-hero__lead">把你关心的球队、赛事和时间段放进控制台，开赛、进球、中场、终场按节点推到你手上。周末两场接得紧，上一场一结束，下一场自动排进队列，你不用再进去改一遍设置。</p>

      <div class="console" data-switch>
        <div class="console__col console__col--list">
          <p class="console__title"><span class="dot dot--live" aria-hidden="true"></span>我的订阅项目</p>

          <button class="cItem is-active" type="button" data-switch-btn data-target="pv-club" aria-pressed="true">
            <span class="cItem__name">蜀山烈焰 · 全赛季</span>
            <span class="cItem__meta">按球队 · 开赛 / 进球 / 中场 / 终场</span>
          </button>

          <button class="cItem" type="button" data-switch-btn data-target="pv-league" aria-pressed="false">
            <span class="cItem__name">蓉城周末冠军杯</span>
            <span class="cItem__meta">按赛事 · 整轮连推 · 跨天不中断</span>
          </button>

          <button class="cItem" type="button" data-switch-btn data-target="pv-window" aria-pressed="false">
            <span class="cItem__name">周五 19:00 – 周日 24:00</span>
            <span class="cItem__meta">按时段 · 工作日静默 · 周末全开</span>
          </button>

          <p class="console__foot">三种方式可以叠加。例如把一支球队设为常驻，再挂一个周末时段，工作日不响、周末不漏。</p>
        </div>

        <div class="console__col console__col--preview">
          <p class="console__title">推送预览</p>
          <div class="console__preview" id="console-preview">

            <article class="pv is-visible" id="pv-club">
              <header class="pv__top">
                <span class="tag tag--live"><span class="dot" aria-hidden="true"></span>进行中</span>
                <span class="stamp">21:34 · 第 3 节</span>
              </header>
              <p class="pv__league">蓉城周末冠军杯 · 第 6 轮</p>
              <div class="pv__score">
                <span class="pv__team">蜀山烈焰<i class="pv__side">主</i></span>
                <span class="num num--score">78<span class="pv__sep">:</span>74</span>
                <span class="pv__team pv__team--away">锦江浪<i class="pv__side">客</i></span>
              </div>
              <p class="pv__note">主场近 10 场 7 胜 3 负，客队客场场均失分 81.3。</p>
            </article>

            <article class="pv" id="pv-league">
              <header class="pv__top">
                <span class="tag tag--done">已排入队列</span>
                <span class="stamp">21:00 开赛</span>
              </header>
              <p class="pv__league">蓉城周末冠军杯 · 第 6 轮 · 第 2 场</p>
              <div class="pv__score">
                <span class="pv__team">天府铁骑<i class="pv__side">主</i></span>
                <span class="num num--score">—<span class="pv__sep">:</span>—</span>
                <span class="pv__team pv__team--away">峨眉星光<i class="pv__side">客</i></span>
              </div>
              <p class="pv__note">上一场收工后自动排队，无需重新设置一遍。</p>
            </article>

            <article class="pv" id="pv-window">
              <header class="pv__top">
                <span class="tag tag--sub">时段生效中</span>
                <span class="stamp">窗口剩余 2 天 04 小时</span>
              </header>
              <p class="pv__league">当前时段内共有 14 场待推</p>
              <ul class="pv__list">
                <li>足球 · 青城公开赛 半决赛 2 场</li>
                <li>篮球 · 蓉城周末冠军杯 4 场</li>
                <li>羽毛球 · 锦江公开组 8 场</li>
              </ul>
              <p class="pv__note">周一 00:00 起自动转静默，下周五 19:00 重新开启。</p>
            </article>

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

  <section class="section sec-modes" id="modes">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 01</span>
        <span class="section-head__num">01</span>
        <h2 class="section-head__title">三种订阅方式，挑顺手的用</h2>
        <p class="section-head__sub">订阅推的就是体育赛事实时比分——爱娱乐体育按你选的节点送过来，而不是让你一直盯着屏幕刷新。球队、赛事、时段各管一段，也能叠着用。</p>
      </header>

      <div class="modes">
        <article class="mode mode--wide">
          <p class="mode__label">按球队</p>
          <h3 class="mode__title">跟着一支队伍走完整季</h3>
          <p>开赛前 15 分钟提醒，进球或得分发生变化立刻推一条，中场与终场各收一次汇总。其他比赛不打扰你。</p>
          <p class="mode__fit">适合：只关心自己支持的那一支，赛季里一场都不想断。</p>
        </article>

        <article class="mode">
          <p class="mode__label">按赛事</p>
          <h3 class="mode__title">一整项赛事连着看</h3>
          <p>把一项赛事整体加进来，跨轮次、跨比赛日连续推送，赛程临时变动也会跟着更新。</p>
          <p class="mode__fit">适合：追杯赛、追赛季末段，需要整条线都握着的人。</p>
        </article>

        <article class="mode">
          <p class="mode__label">按时段</p>
          <h3 class="mode__title">只在你在线的时候响</h3>
          <p>划出固定窗口，比如周五 19:00 到周日 24:00。窗口外自动安静下来，窗口一到重新开始推。</p>
          <p class="mode__fit">适合：白天忙、时间碎片化，周末才有空连着看的人。</p>
        </article>
      </div>

      <div class="combo" data-reveal>
        <p class="combo__k">怎么组合</p>
        <p class="combo__v">常驻一支球队 + 叠加周末时段 + 再把一项杯赛整季挂着，就是一套几乎不用管的配置。后续想加减，随时回控制台改。</p>
      </div>
    </div>
  </section>

  <section class="section sec-relay" id="relay">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 02</span>
        <span class="section-head__num">02</span>
        <h2 class="section-head__title">周末两场之间，不用再动手</h2>
        <p class="section-head__sub">上一场的终场推送发出之后，同一订阅里的下一场自动进入队列。中间那段空档，会给你一条含开赛时间与对阵的预告。</p>
      </header>

      <div class="relay-outer">
        <div class="relay">
          <article class="relay__match">
            <span class="stamp">周六 19:30</span>
            <p class="relay__teams">蜀山烈焰 <span class="relay__vs">对</span> 锦江浪</p>
            <p class="relay__state">终场推送已发出 · 21:12</p>
          </article>

          <div class="relay__bridge" aria-hidden="true">
            <span class="relay__gap">空档约 45 分钟</span>
            <span class="relay__dash"></span>
          </div>

          <article class="relay__match relay__match--next">
            <span class="stamp">周六 21:00</span>
            <p class="relay__teams">天府铁骑 <span class="relay__vs">对</span> 峨眉星光</p>
            <p class="relay__state">已自动接续 · 提醒于 20:45 到达</p>
          </article>
        </div>

        <figure class="media-frame media-frame--square relay__fig">
          <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="两段球场灯光轨迹首尾相接的抽象光带" loading="lazy" decoding="async">
          <figcaption class="media-frame__cap">两场之间，控制台会推一条含开赛时间与对阵的预告，提醒你什么时候回到屏幕前。</figcaption>
        </figure>
      </div>

      <ul class="relay-notes">
        <li>同一球队 24 小时内有两场，两场都在队列里，按开赛时间先后推送。</li>
        <li>后一场延后开赛，提醒时间跟着顺延，不会提前叫醒你。</li>
        <li>你只想看其中一场，可以在队列里单独把某一场静音。</li>
      </ul>
    </div>
  </section>

  <section class="section sec-pctrl" id="pctrl">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 03</span>
        <span class="section-head__num">03</span>
        <h2 class="section-head__title">推送控制台：按你的作息来</h2>
        <p class="section-head__sub">频率、静默时段、多设备、断线补推，四项都在同一个面板里调。</p>
      </header>

      <div class="pctrl">
        <div class="pctrl__settings">

          <div class="pctrl__row">
            <p class="pctrl__k">通知频率</p>
            <div class="switch switch--stack" data-switch>
              <button class="sw is-active" type="button" data-switch-btn data-target="freq-key" aria-pressed="true">关键节点</button>
              <button class="sw" type="button" data-switch-btn data-target="freq-all" aria-pressed="false">全程跟播</button>
              <button class="sw" type="button" data-switch-btn data-target="freq-digest" aria-pressed="false">每日汇总</button>
            </div>
            <div class="pctrl__panels" id="freq-panels">
              <p class="pctrl__panel is-visible" id="freq-key">开赛前提醒、比分变化、中场、终场四条，其余时间不响。多数人选这一档。</p>
              <p class="pctrl__panel" id="freq-all">每一次得分、每一次判罚变化都推，画面感强，消息量也大。</p>
              <p class="pctrl__panel" id="freq-digest">当天比赛全部结束后一次推完，含比分与主客场标记。</p>
            </div>
          </div>

          <div class="pctrl__row">
            <p class="pctrl__k">静默时段</p>
            <div class="silence">
              <div class="silence__item">
                <span class="silence__v num">00:00</span>
                <span class="silence__k">开始静默</span>
              </div>
              <span class="silence__line" aria-hidden="true"></span>
              <div class="silence__item">
                <span class="silence__v num">07:00</span>
                <span class="silence__k">恢复推送</span>
              </div>
            </div>
            <p class="pctrl__hint">静默期间的结果不会丢，早上恢复后按时间顺序一次补齐。夜里开赛的赛事也可以单独设为例外。</p>
          </div>

          <div class="pctrl__row">
            <p class="pctrl__k">多设备同步</p>
            <ul class="devices">
              <li class="device"><span class="device__k">手机</span><span class="device__v">推送主通道</span></li>
              <li class="device"><span class="device__k">平板</span><span class="device__v">与手机同步在线</span></li>
              <li class="device"><span class="device__k">桌面</span><span class="device__v">看板常驻，接收同一条推送</span></li>
            </ul>
            <p class="pctrl__hint">同账号登录自动对齐订阅项与静默设置，换设备不用重来一遍。</p>
          </div>

          <div class="pctrl__row pctrl__row--last">
            <p class="pctrl__k">断线之后</p>
            <p class="pctrl__v">网络恢复后，控制台会把断线期间错过的关键节点按顺序补推一次，已经看过的不会再来。移动端还能离线缓存最近 3 场比分记录，场馆里信号不稳也看得到。</p>
          </div>

        </div>

        <figure class="media-frame pctrl__fig">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="夜场看台光影中手持设备显示比分推送的抽象画面" loading="lazy" decoding="async">
          <figcaption class="media-frame__cap">手机、平板与桌面同账号登录，订阅项与静默设置自动对齐。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section sec-split" id="split-layer">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 04</span>
        <span class="section-head__num">04</span>
        <h2 class="section-head__title">每条推送后面，能看到主客场差异</h2>
        <p class="section-head__sub">常看比赛的人都清楚，同一支队伍换个场地就是另一副样子。所以每条推送都能展开一层主客场概况，你也可以只留简洁版。</p>
      </header>

      <div class="split">
        <div class="split__side split__side--home">
          <p class="split__side-title">主队 · 蜀山烈焰</p>
          <ul class="kv">
            <li><span class="kv__k">近 10 场主场</span><span class="kv__v num">7 胜 3 负</span></li>
            <li><span class="kv__k">主场胜率</span><span class="kv__v num">70%</span></li>
            <li><span class="kv__k">主场场均得分</span><span class="kv__v num">86.4</span></li>
            <li><span class="kv__k">主场场均失分</span><span class="kv__v num">79.1</span></li>
          </ul>
        </div>

        <div class="split__divider" aria-hidden="true"></div>

        <div class="split__side split__side--away">
          <p class="split__side-title">客队 · 锦江浪</p>
          <ul class="kv">
            <li><span class="kv__k">近 10 场客场</span><span class="kv__v num">4 胜 6 负</span></li>
            <li><span class="kv__k">客场胜率</span><span class="kv__v num">40%</span></li>
            <li><span class="kv__k">客场场均得分</span><span class="kv__v num">80.2</span></li>
            <li><span class="kv__k">客场场均失分</span><span class="kv__v num">84.6</span></li>
          </ul>
        </div>
      </div>

      <div class="ring-row">
        <div class="ring" style="--size:132px">
          <svg viewBox="0 0 120 120" aria-hidden="true" focusable="false">
            <circle class="ring__track" cx="60" cy="60" r="52" fill="none" stroke-width="6"></circle>
            <circle class="ring__value" cx="60" cy="60" r="52" fill="none" stroke-width="6" stroke-dasharray="326.7" stroke-dashoffset="98"></circle>
          </svg>
          <span class="ring__center">
            <span class="ring__num num">70<small>%</small></span>
            <span class="ring__cap">主场胜率</span>
          </span>
        </div>

        <div class="ring-row__text">
          <h3 class="ring-row__title">简洁版还是完整版，你自己定</h3>
          <p>简洁版只给比分和当前节次，适合一边做别的事一边扫一眼；完整版把主客队分栏、近 10 场主客场战绩、主客场胜率与场均得失分一起带上，适合复盘。两档随时切换，不用重建订阅。</p>
        </div>
      </div>

      <figure class="media-frame media-frame--wide">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="细描边环形图与左右分栏的抽象图形，荧光青与暖橙形成对比" loading="lazy" decoding="async">
        <figcaption class="media-frame__cap">左右分栏看两队在各自场地条件下的表现，中间那条竖线就是你切换主客场视角的位置。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section sec-export" id="export">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 05</span>
        <span class="section-head__num">05</span>
        <h2 class="section-head__title">近 7 天赛事记录，随时导出</h2>
        <p class="section-head__sub">回访用户可以把最近 7 天的比赛打包带走。单次最多 7 天、最多 200 场，两种格式按用途挑。</p>
      </header>

      <div class="exp">
        <div class="exp__head">
          <div class="switch switch--fmt" data-switch>
            <button class="fmt is-active" type="button" data-switch-btn data-target="note-csv" aria-pressed="true">CSV</button>
            <button class="fmt" type="button" data-switch-btn data-target="note-pdf" aria-pressed="false">PDF</button>
          </div>
          <p class="exp__hint">导出区间超出 7 天，控制台会当场提示你调整，不会先跑一遍再失败。</p>
        </div>

        <div class="exp__notes" id="fmt-notes">
          <p class="fmt-note is-visible" id="note-csv">CSV 一行一场，字段顺序固定，直接拖进表格软件就能继续算，适合自己做统计或整理给社群。</p>
          <p class="fmt-note" id="note-pdf">PDF 按场次分页排版，比分与主客场标记一眼可读，适合存档、转发和打印留底。</p>
        </div>

        <div class="ftable-wrap">
          <table class="ftable">
            <caption>两种格式都包含以下字段</caption>
            <thead>
              <tr>
                <th scope="col">字段</th>
                <th scope="col">含义</th>
              </tr>
            </thead>
            <tbody>
              <tr><td><code>match_id</code></td><td>赛事编号，同一天内唯一，便于跨表对齐</td></tr>
              <tr><td><code>kickoff_ts</code></td><td>开赛时间戳，含时区，排序不用手动改</td></tr>
              <tr><td><code>home_name</code> / <code>away_name</code></td><td>主队与客队的显示名称</td></tr>
              <tr><td><code>venue_tag</code></td><td>主客场标记，用来拆开统计两种场地条件下的表现</td></tr>
              <tr><td><code>score_ft</code></td><td>终场比分</td></tr>
              <tr><td><code>period_log</code></td><td>各节或各局比分序列</td></tr>
            </tbody>
          </table>
        </div>

        <figure class="media-frame exp__fig">
          <img src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="数据表格与文件图标组合的抽象视觉，冷色底配暖色强调" loading="lazy" decoding="async">
          <figcaption class="media-frame__cap">导出文件里每一行都带时间戳与主客场标记，拿去做二次整理不用再补字段。</figcaption>
        </figure>

        <p class="exp__foot">记录导出对注册回访用户开放。手机号只用于订阅推送与账号定位，不会用在别处；导出环节的信息处理方式，可以看<a href="/data-privacy/">数据与隐私</a>。</p>
      </div>
    </div>
  </section>

  <section class="section sec-start" id="start">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 06</span>
        <span class="section-head__num">06</span>
        <h2 class="section-head__title">四步开起来</h2>
        <p class="section-head__sub">从注册到第一条推送到达，通常几分钟内就能走完。</p>
      </header>

      <ol class="steps">
        <li class="step">
          <span class="step__num">01</span>
          <h3 class="step__title">注册并绑定手机号</h3>
          <p>手机号用于接收订阅推送和定位账号，订阅项、静默设置与下载权限都挂在这个账号上。</p>
          <p class="step__next">下一步：挑一支球队或一整项赛事加进来</p>
        </li>
        <li class="step">
          <span class="step__num">02</span>
          <h3 class="step__title">把要跟的内容加进控制台</h3>
          <p>按球队、按赛事、按时段任选其一，也可以叠加。加完之后左侧列表会显示当前生效的订阅项与预计推送量。</p>
          <p class="step__next">下一步：决定哪些节点要响</p>
        </li>
        <li class="step">
          <span class="step__num">03</span>
          <h3 class="step__title">设定通知频率与静默时段</h3>
          <p>默认是关键节点档，只在开赛、比分变化、中场、终场时提醒。要更细就切到全程跟播，要更省就切每日汇总。</p>
          <p class="step__next">下一步：确认第一场比赛的提醒时间</p>
        </li>
        <li class="step">
          <span class="step__num">04</span>
          <h3 class="step__title">随时调整或退订</h3>
          <p>增减订阅项、换频率、改静默时段都在同一个面板里完成。已经产生的近 7 天记录仍然可以导出。</p>
          <p class="step__next">遇到推送没到、导出失败，去 <a href="/troubleshooting/">问题排查</a> 找对应处理办法</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section sec-faq" id="faq">
    <div class="wrap">
      <header class="section-head" data-reveal>
        <span class="vert-label" aria-hidden="true">PANEL 07</span>
        <span class="section-head__num">07</span>
        <h2 class="section-head__title">订阅前常被问到的几件事</h2>
        <p class="section-head__sub">下面这几条覆盖了大部分上手阶段的问题。没对上，也可以直接找我们。</p>
      </header>

      <div class="accordion" data-accordion>
        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-1" aria-expanded="false">
            <span class="accordion__idx">01</span>
            <span class="accordion__q">一个账号能同时订阅多少项？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-1">
            <div class="accordion__inner">
              <p>球队订阅建议常驻不超过 20 项，赛事订阅不超过 10 项，时段订阅可以叠在两者之上。超出之后推送会变密，真正关键的那几场反而容易被淹没。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-2" aria-expanded="false">
            <span class="accordion__idx">02</span>
            <span class="accordion__q">换设备以后，订阅还在吗？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-2">
            <div class="accordion__inner">
              <p>在的。用同一账号登录，订阅项、通知频率与静默时段都会同步过去，新设备上不用重新配一遍。旧设备如果还登录着，可以在设备列表里把它移除。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-3" aria-expanded="false">
            <span class="accordion__idx">03</span>
            <span class="accordion__q">退订之后，之前的赛事记录还能导出吗？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-3">
            <div class="accordion__inner">
              <p>可以。退订只停掉后续推送，近 7 天已经产生的赛事记录仍然留在账号里，随时可以导出 CSV 或 PDF。过了这个窗口自然就不再保留。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-4" aria-expanded="false">
            <span class="accordion__idx">04</span>
            <span class="accordion__q">手机号会被用到哪些地方？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-4">
            <div class="accordion__inner">
              <p>只用于订阅推送和账号定位，比如你在别处问起某条推送为什么没到，我们凭它才能查到是哪个账号。具体范围可以看<a href="/data-privacy/">数据与隐私</a>。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-5" aria-expanded="false">
            <span class="accordion__idx">05</span>
            <span class="accordion__q">周末连场会不会中间断掉？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-5">
            <div class="accordion__inner">
              <p>同一个订阅里的连续两场会自动接上：前一场收工后，后一场按开赛时间提醒你，中间还有一条预告。你不需要重新设置一次。</p>
            </div>
          </div>
        </div>

        <div class="accordion__item">
          <button class="accordion__btn" type="button" data-accordion-btn aria-controls="q-6" aria-expanded="false">
            <span class="accordion__idx">06</span>
            <span class="accordion__q">推送一直没到，先看哪里？</span>
            <span class="accordion__sign" aria-hidden="true"></span>
          </button>
          <div class="accordion__panel" id="q-6">
            <div class="accordion__inner">
              <p>先确认静默时段是否还覆盖着当前时间，再看系统的通知权限有没有被关掉。<a href="/troubleshooting/">问题排查</a>里按「收不到推送」这条往下走，一般两分钟能定位。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="end-cta">
    <div class="wrap">
      <div class="end-cta__box" data-reveal>
        <p class="eyebrow">NEXT STEP</p>
        <h2 class="end-cta__title">推送没到、导出卡住，或者想谈合作？</h2>
        <p class="end-cta__text">常见问题的处理步骤都整理在问题排查页；订阅、下载与内容合作方面的对接方式，在服务联络页。想看主客场表现的深度内容，去内容中心翻最近更新。</p>
        <div class="end-cta__actions">
          <a class="btn btn--primary" href="/troubleshooting/">查看问题排查</a>
          <a class="btn btn--ghost" href="/reach-us/">联系服务联络</a>
        </div>
        <p class="end-cta__aside">也可以直接去<a href="/blog/">内容中心</a>，看今天的赛场内外记录。</p>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pv-glow: 0 0 32px rgba(55, 240, 208, .14);
  --pv-grid: repeating-linear-gradient(0deg, rgba(55, 240, 208, .05) 0 1px, transparent 1px 5px);
  padding-bottom: clamp(20px, 4vw, 48px);
}

.page-products .wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}

/* ---------- 首屏 ---------- */

.page-products .sub-hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 4.4vw, 56px) 0 clamp(32px, 5vw, 64px);
  margin-top: clamp(10px, 1.6vw, 18px);
}

.page-products .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-products .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  filter: saturate(.72) contrast(1.08);
}

.page-products .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(55, 240, 208, .16), transparent 62%),
    radial-gradient(90% 70% at 8% 96%, rgba(255, 122, 69, .1), transparent 60%),
    linear-gradient(180deg, rgba(5, 20, 15, .48) 0%, rgba(5, 20, 15, .93) 68%, var(--ink) 100%);
}

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

.page-products .sub-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fog);
  text-shadow: 0 0 24px rgba(55, 240, 208, .18);
  max-width: 18ch;
}

.page-products .sub-hero__lead {
  margin: 0 0 clamp(20px, 3vw, 34px);
  max-width: 60ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .dot--live {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, .16);
}

/* ---------- 控制台 ---------- */

.page-products .console {
  display: grid;
  gap: var(--gap);
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(10, 31, 24, .82);
  background-image: var(--pv-grid);
  box-shadow: inset 0 1px 0 rgba(55, 240, 208, .07), 0 18px 48px rgba(0, 0, 0, .38);
}

.page-products .console__col {
  min-width: 0;
}

.page-products .console__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .cItem {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0 0 10px;
  padding: 11px 13px;
  text-align: left;
  font: inherit;
  color: var(--fog);
  background: rgba(5, 20, 15, .6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.page-products .cItem:last-of-type {
  margin-bottom: 0;
}

.page-products .cItem:hover {
  border-color: var(--cyan-line);
  border-left-color: var(--cyan);
}

.page-products .cItem.is-active {
  background: var(--panel-2);
  border-color: rgba(55, 240, 208, .34);
  border-left-color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(55, 240, 208, .14), var(--pv-glow);
}

.page-products .cItem__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.page-products .cItem__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--muted);
  line-height: 1.5;
}

.page-products .cItem.is-active .cItem__meta {
  color: rgba(55, 240, 208, .82);
}

.page-products .console__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .console__preview {
  min-width: 0;
}

.page-products .pv {
  position: relative;
  padding: clamp(14px, 1.8vw, 18px);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--panel-2), rgba(5, 20, 15, .9));
  overflow: hidden;
}

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

.page-products .pv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pv-grid);
  opacity: .7;
  pointer-events: none;
}

.page-products .pv > * {
  position: relative;
  z-index: 1;
}

.page-products .pv__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.page-products .pv__league {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

.page-products .pv__score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .pv__team {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fog);
  min-width: 0;
}

.page-products .pv__team--away {
  text-align: right;
  align-items: flex-end;
}

.page-products .pv__side {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 5px;
  width: fit-content;
}

.page-products .pv .num--score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: -.02em;
  color: var(--fog);
  text-shadow: 0 0 18px rgba(255, 122, 69, .22);
  white-space: nowrap;
}

.page-products .pv__sep {
  color: var(--orange);
  margin-inline: 2px;
}

.page-products .pv__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pv__list {
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .pv__list li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fog-88);
  padding-left: 14px;
  position: relative;
}

.page-products .pv__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 章节通用 ---------- */

.page-products .section {
  padding: clamp(38px, 5.6vw, 74px) 0;
  border-bottom: 1px solid var(--line);
}

.page-products .section-head {
  position: relative;
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-products .section-head .vert-label {
  display: none;
}

.page-products .section-head__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--cyan);
  margin: 0 0 8px;
}

.page-products .section-head__num::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--cyan-line);
}

.page-products .section-head__title {
  margin: 0 0 10px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--fog);
  max-width: 26ch;
}

.page-products .section-head__sub {
  margin: 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--fog-88);
}

/* ---------- 01 三种订阅方式 ---------- */

.page-products .modes {
  display: grid;
  gap: var(--gap);
}

.page-products .mode {
  position: relative;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}

.page-products .mode--wide {
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 62%);
  border-color: rgba(55, 240, 208, .26);
}

.page-products .mode__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 3px 8px;
  border: 1px solid rgba(55, 240, 208, .34);
  border-radius: 2px;
  width: fit-content;
}

.page-products .mode__title {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fog);
}

.page-products .mode p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

.page-products .mode__fit {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px !important;
  color: var(--muted) !important;
}

.page-products .combo {
  display: grid;
  gap: 8px;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  background: rgba(255, 122, 69, .05);
}

.page-products .combo__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .combo__v {
  margin: 0;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

/* ---------- 02 连场接续 ---------- */

.page-products .relay-outer {
  display: grid;
  gap: var(--gap);
}

.page-products .relay {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.page-products .relay__match {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.page-products .relay__match--next {
  border-color: rgba(255, 211, 77, .34);
  background: linear-gradient(150deg, rgba(255, 211, 77, .07), var(--panel) 70%);
}

.page-products .relay__teams {
  margin: 10px 0 8px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--fog);
  line-height: 1.4;
}

.page-products .relay__vs {
  color: var(--orange);
  font-weight: 500;
  margin-inline: 4px;
}

.page-products .relay__state {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .relay__match--next .relay__state {
  color: rgba(255, 211, 77, .86);
}

.page-products .relay__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}

.page-products .relay__gap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted);
  white-space: nowrap;
}

.page-products .relay__dash {
  width: 1px;
  flex: 1;
  min-height: 26px;
  background-image: linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
  background-size: 1px 10px;
}

.page-products .relay__fig {
  margin: 0;
}

.page-products .relay-notes {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .relay-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fog-88);
}

.page-products .relay-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 03 推送控制台 ---------- */

.page-products .pctrl {
  display: grid;
  gap: var(--gap);
}

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

.page-products .pctrl__row {
  padding: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--line);
}

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

.page-products .pctrl__k {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-products .pctrl__v {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
  max-width: 68ch;
}

.page-products .pctrl__panels {
  margin-top: 12px;
}

.page-products .pctrl__panel {
  margin: 0 0 8px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(5, 20, 15, .55);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fog-88);
}

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

.page-products .pctrl__panel.is-visible {
  border-color: rgba(55, 240, 208, .3);
  color: var(--fog);
}

.page-products .pctrl__hint {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .pctrl__fig {
  margin: 0;
}

.page-products .switch--stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .sw {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  color: var(--fog-88);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}

.page-products .sw:hover {
  border-color: var(--cyan-line);
  color: var(--fog);
}

.page-products .sw.is-active {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .silence {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

.page-products .silence__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-products .silence__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .02em;
}

.page-products .silence__k {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}

.page-products .silence__line {
  flex: 1;
  min-width: 48px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}

.page-products .devices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .device {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(5, 20, 15, .5);
}

.page-products .device__k {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fog);
  min-width: 44px;
}

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

/* ---------- 04 主客场图层 ---------- */

.page-products .split {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.page-products .split__side {
  padding: clamp(14px, 2vw, 20px);
}

.page-products .split__side--home {
  background: linear-gradient(180deg, rgba(55, 240, 208, .06), transparent 72%);
}

.page-products .split__side--away {
  background: linear-gradient(180deg, rgba(255, 122, 69, .06), transparent 72%);
}

.page-products .split__divider {
  height: 1px;
  background: var(--line);
}

.page-products .split__side-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
}

.page-products .split__side--home .split__side-title {
  color: var(--cyan);
}

.page-products .split__side--away .split__side-title {
  color: var(--orange);
}

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

.page-products .kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}

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

.page-products .kv__k {
  font-size: 13.5px;
  color: var(--muted);
}

.page-products .kv__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--fog);
}

.page-products .ring-row {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
  margin-top: clamp(20px, 2.8vw, 30px);
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 31, 24, .7);
}

.page-products .ring {
  position: relative;
  justify-self: center;
  flex: none;
}

.page-products .ring svg {
  display: block;
  transform: rotate(-90deg);
}

.page-products .ring__track {
  stroke: rgba(30, 74, 58, .9);
}

.page-products .ring__value {
  stroke: var(--cyan);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(55, 240, 208, .42));
}

.page-products .ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.page-products .ring__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fog);
  line-height: 1;
}

.page-products .ring__num small {
  font-size: .58em;
  color: var(--cyan);
}

.page-products .ring__cap {
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.page-products .ring-row__title {
  margin: 0 0 10px;
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fog);
}

.page-products .ring-row__text p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .sec-split .media-frame {
  margin: clamp(20px, 2.8vw, 30px) 0 0;
}

/* ---------- 05 记录下载 ---------- */

.page-products .exp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: clamp(16px, 2.2vw, 26px);
}

.page-products .exp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.page-products .switch--fmt {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.page-products .fmt {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  padding: 9px 22px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.page-products .fmt:last-child {
  border-right: 0;
}

.page-products .fmt:hover {
  color: var(--fog);
}

.page-products .fmt.is-active {
  color: var(--fog);
  background: rgba(255, 122, 69, .14);
  box-shadow: inset 0 -2px 0 var(--orange);
}

.page-products .exp__hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 240px;
  min-width: 0;
}

.page-products .exp__notes {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.page-products .fmt-note {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--fog-88);
}

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

.page-products .fmt-note.is-visible {
  border-left-color: var(--orange);
  color: var(--fog);
}

.page-products .ftable-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  -webkit-overflow-scrolling: touch;
}

.page-products .ftable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-products .ftable caption {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.page-products .ftable th {
  text-align: left;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}

.page-products .ftable td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(30, 74, 58, .6);
  color: var(--fog-88);
  line-height: 1.6;
  vertical-align: top;
}

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

.page-products .ftable code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--yellow);
  background: rgba(255, 211, 77, .08);
  border: 1px solid var(--yellow-line);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}

.page-products .exp__fig {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}

.page-products .exp__foot {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .exp__foot a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 06 四步流程 ---------- */

.page-products .steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-products .step {
  position: relative;
  padding: clamp(16px, 2vw, 22px) 0 clamp(16px, 2vw, 22px) clamp(46px, 7vw, 72px);
  border-top: 1px solid var(--line);
}

.page-products .step:last-child {
  border-bottom: 1px solid var(--line);
}

.page-products .step__num {
  position: absolute;
  left: 0;
  top: clamp(16px, 2vw, 22px);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-products .step__title {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fog);
}

.page-products .step p {
  margin: 0 0 10px;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .step__next {
  margin: 0 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  color: var(--muted) !important;
}

.page-products .step__next a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 07 常见疑问 ---------- */

.page-products .accordion {
  border-top: 1px solid var(--line);
}

.page-products .accordion__btn {
  width: 100%;
}

.page-products .accordion__btn span:nth-child(2) {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.page-products .accordion__inner p {
  margin: 0 0 10px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--fog-88);
}

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

.page-products .accordion__inner a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 结尾 CTA ---------- */

.page-products .end-cta {
  padding: clamp(34px, 5vw, 66px) 0;
}

.page-products .end-cta__box {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 120% at 90% 0%, rgba(55, 240, 208, .12), transparent 62%),
    linear-gradient(150deg, var(--panel-2), var(--ink) 78%);
  overflow: hidden;
}

.page-products .end-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pv-grid);
  opacity: .6;
  pointer-events: none;
}

.page-products .end-cta__box > * {
  position: relative;
  z-index: 1;
}

.page-products .end-cta__title {
  margin: 10px 0 12px;
  font-family: var(--font-cn);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.28;
  color: var(--fog);
  max-width: 24ch;
}

.page-products .end-cta__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--fog-88);
}

.page-products .end-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.page-products .end-cta__aside {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.page-products .end-cta__aside a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 760px) {
  .page-products .relay {
    grid-template-columns: 1fr 116px 1fr;
    align-items: center;
  }

  .page-products .relay__bridge {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .page-products .relay__dash {
    width: auto;
    height: 1px;
    min-height: 0;
    background-image: linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
    background-size: 10px 1px;
  }

  .page-products .split {
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
  }

  .page-products .split__divider {
    height: auto;
    width: 1px;
    background: var(--line);
  }

  .page-products .ring-row {
    grid-template-columns: auto 1fr;
  }

  .page-products .ring {
    justify-self: start;
  }

  .page-products .pctrl__row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px 20px;
  }

  .page-products .pctrl__k {
    margin-bottom: 0;
    padding-top: 2px;
  }

  .page-products .pctrl__panels,
  .page-products .silence,
  .page-products .devices,
  .page-products .pctrl__v,
  .page-products .pctrl__hint {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .page-products .console {
    grid-template-columns: 5fr 7fr;
    gap: clamp(18px, 2.4vw, 30px);
  }

  .page-products .console__preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-content: start;
  }

  .page-products .pv {
    margin-bottom: 0;
  }

  .page-products .modes {
    grid-template-columns: 1.3fr 1fr 1fr;
    align-items: stretch;
  }

  .page-products .relay-outer {
    grid-template-columns: 1fr minmax(240px, 320px);
    align-items: start;
  }

  .page-products .pctrl {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

@media (min-width: 1060px) {
  .page-products .section-head {
    padding-right: 60px;
  }

  .page-products .section-head .vert-label {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
}

@media (max-width: 560px) {
  .page-products .pv__score {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }

  .page-products .pv__team,
  .page-products .pv__team--away {
    align-items: center;
    text-align: center;
  }

  .page-products .exp__head {
    gap: 10px;
  }

  .page-products .fmt {
    padding: 9px 16px;
  }

  .page-products .step {
    padding-left: 0;
    padding-top: clamp(46px, 12vw, 56px);
  }
}