.page-products {
  --pr-cut: 14px;
  --pr-panel-bg: #151A20;
  --pr-panel-deep: #0B0D10;
  display: block;
}

/* ---------- 首屏 ---------- */
.page-products .pr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-4);
  padding-block: var(--gap-4) var(--gap-5);
  align-items: start;
}

.page-products .pr-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-1);
  margin: 0 0 var(--gap-2);
}

.page-products .pr-kicker__text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm);
}

.page-products .pr-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.125rem, 7vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-products .pr-hero__lede {
  max-width: 54ch;
  margin: var(--gap-2) 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--warm);
}

.page-products .pr-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--gap-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--ink-800);
}

.page-products .pr-hero__num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-products .pr-hero__stat-label {
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

.page-products .pr-hero__visual {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
}

.page-products .pr-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 通用段落头 ---------- */
.page-products .pr-section-head {
  display: grid;
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
}

.page-products .pr-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--fog);
}

.page-products .pr-section-head__note {
  max-width: 66ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--warm);
}

/* ---------- 服务总览 ---------- */
.page-products .pr-overview {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
  transition: border-color var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease);
}

.page-products .pr-card:hover,
.page-products .pr-card:focus-within {
  border-color: var(--orange);
  background: var(--ink-700);
}

.page-products .pr-card__label {
  margin: 0;
}

.page-products .pr-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--fog);
}

.page-products .pr-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

.page-products .pr-card__meta {
  margin: 0;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--warm);
}

.page-products .pr-card__meta .num {
  color: var(--blue);
  font-weight: 700;
}

.page-products .pr-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--warm);
}

.page-products .pr-card__list li {
  padding-left: 16px;
  position: relative;
}

.page-products .pr-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--lime);
}

.page-products .pr-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease);
}

.page-products .pr-card__link:hover,
.page-products .pr-card__link:focus-visible {
  border-bottom-color: var(--orange);
}

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

.page-products .pr-feed__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-1);
  padding: 9px 10px;
  background: var(--pr-panel-deep);
}

.page-products .pr-feed__tag {
  font-size: 11px;
  color: var(--warm);
  white-space: nowrap;
}

.page-products .pr-feed__name {
  font-size: 13px;
  color: var(--fog);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-products .pr-nodes {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--gap-2);
}

.page-products .pr-nodes__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pr-nodes__line {
  stroke: #2A313A;
  stroke-width: 1;
}

.page-products .pr-nodes__dot--a {
  fill: var(--blue);
}

.page-products .pr-nodes__dot--b {
  fill: var(--lime);
}

/* ---------- 面板能力 ---------- */
.page-products .pr-panels {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3);
  align-items: start;
}

.page-products .pr-index {
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
}

.page-products .pr-index__label {
  margin: 0 0 var(--gap-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.page-products .pr-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
}

.page-products .pr-index__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 10px;
  background: var(--ink-800);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.page-products .pr-index__item:hover {
  background: var(--pr-panel-deep);
  color: var(--white);
}

.page-products .pr-index__num {
  font-size: 11px;
  color: var(--orange);
}

.page-products .pr-index__note {
  margin: var(--gap-2) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--warm);
}

.page-products .pr-index__cta {
  margin-top: var(--gap-3);
  width: 100%;
  text-align: center;
}

.page-products .pr-panel {
  display: grid;
  gap: var(--gap-3);
  padding: var(--gap-3);
  min-width: 0;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #151A20 0%, #0B0D10 78%);
}

.page-products .pr-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
  padding-bottom: var(--gap-2);
  border-bottom: 1px solid var(--line);
}

.page-products .pr-panel__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(182, 255, 59, 0.16);
}

.page-products .pr-panel__filter {
  margin-left: auto;
  font-size: 12px;
  color: var(--blue);
}

.page-products .pr-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

.page-products .pr-metric {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  transition: border-color var(--dur-mid) var(--ease);
}

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

.page-products .pr-metric__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
}

.page-products .pr-metric__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-products .pr-metric__bar {
  display: block;
  height: 4px;
  background: var(--line);
  overflow: hidden;
}

.page-products .pr-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--deep-orange), var(--orange));
}

.page-products .pr-bar--85 { width: 85%; }
.page-products .pr-bar--78 { width: 78%; }
.page-products .pr-bar--70 { width: 70%; }
.page-products .pr-bar--62 { width: 62%; }
.page-products .pr-bar--44 { width: 44%; }
.page-products .pr-bar--32 { width: 32%; }

.page-products .pr-chart {
  border: 1px solid var(--line);
  background: var(--pr-panel-deep);
  padding: var(--gap-2);
}

.page-products .pr-chart__cap {
  margin: 0 0 var(--gap-1);
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pr-chart__grid {
  stroke: #232A33;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.page-products .pr-chart__area {
  fill: rgba(255, 90, 31, 0.14);
}

.page-products .pr-chart__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.page-products .pr-chart__line--blue {
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.page-products .pr-chart__dot {
  fill: var(--lime);
}

.page-products .pr-rank {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fog);
}

.page-products .pr-rank__cap {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--gap-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
}

.page-products .pr-rank th,
.page-products .pr-rank td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.page-products .pr-rank th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--warm);
  text-transform: uppercase;
}

.page-products .pr-rank td.num {
  color: var(--lime);
  font-weight: 700;
}

.page-products .pr-rank tbody tr:hover td {
  background: var(--ink-800);
}

/* ---------- 球员数据 ---------- */
.page-products .pr-player {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-player__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3);
  align-items: start;
}

.page-products .pr-player__media {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
}

.page-products .pr-player__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .pr-player__body {
  display: grid;
  gap: var(--gap-3);
  min-width: 0;
}

.page-products .pr-chips {
  display: grid;
  gap: var(--gap-1);
}

.page-products .pr-chips__label {
  margin: var(--gap-1) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--warm);
}

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

.page-products .pr-chip {
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--warm);
  background: transparent;
  border: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.page-products .pr-chip--on {
  color: var(--ink-900);
  background: var(--lime);
  border-color: var(--lime);
  font-weight: 600;
}

.page-products .pr-chip:hover {
  border-color: var(--blue);
  color: var(--fog);
}

.page-products .pr-chip--on:hover {
  color: var(--ink-900);
}

.page-products .pr-player__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

.page-products .pr-mini {
  padding: 12px 14px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  transition: border-color var(--dur-mid) var(--ease);
}

.page-products .pr-mini:hover {
  border-top-color: var(--orange);
}

.page-products .pr-mini--accent {
  background: rgba(45, 140, 255, 0.1);
  border-top-color: var(--blue);
}

.page-products .pr-mini__label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--warm);
}

.page-products .pr-mini__val {
  margin: 6px 0 2px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-products .pr-mini--accent .pr-mini__val {
  color: var(--ice);
}

.page-products .pr-mini__sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--warm);
}

.page-products .pr-player__notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--warm);
}

.page-products .pr-player__notes li {
  padding-left: 16px;
  position: relative;
}

.page-products .pr-player__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.page-products .pr-player__body .btn {
  justify-self: start;
}

/* ---------- 订阅方案 ---------- */
.page-products .pr-plans {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
  transition: transform var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}

.page-products .pr-plan:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
}

.page-products .pr-plan--hot {
  background: linear-gradient(165deg, rgba(255, 90, 31, 0.15), var(--ink-800) 62%);
  border-color: rgba(255, 90, 31, 0.55);
}

.page-products .pr-plan--org {
  background: linear-gradient(165deg, rgba(45, 140, 255, 0.14), var(--ink-800) 58%);
  border-color: rgba(45, 140, 255, 0.5);
}

.page-products .pr-plan--org:hover {
  border-color: var(--blue);
}

.page-products .pr-plan__badge {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
  border: 1px solid var(--line);
}

.page-products .pr-plan__badge--hot {
  color: var(--orange);
  border-color: var(--orange);
}

.page-products .pr-plan__badge--org {
  color: var(--blue);
  border-color: var(--blue);
}

.page-products .pr-plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .pr-plan__for {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--warm);
}

.page-products .pr-plan__list {
  margin: 0;
  padding: var(--gap-2) 0 0;
  list-style: none;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fog);
}

.page-products .pr-plan__list li {
  padding-left: 18px;
  position: relative;
}

.page-products .pr-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--orange);
}

.page-products .pr-plan--org .pr-plan__list li::before {
  border-color: var(--blue);
}

.page-products .pr-plan__figure {
  border: 1px solid var(--line);
  overflow: hidden;
}

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

.page-products .pr-plan__cta {
  margin-top: auto;
  padding-top: var(--gap-2);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fog);
  text-decoration: none;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--dur-mid) var(--ease);
}

.page-products .pr-plan__cta::after {
  content: "→";
  color: var(--warm);
  transition: transform var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}

.page-products .pr-plan__cta:hover,
.page-products .pr-plan__cta:focus-visible {
  color: var(--orange);
}

.page-products .pr-plan__cta:hover::after {
  transform: translateX(4px);
  color: var(--orange);
}

.page-products .pr-plan__cta--hot {
  color: var(--orange);
}

.page-products .pr-plan__cta--hot::after {
  color: var(--orange);
}

.page-products .pr-plan--org .pr-plan__cta:hover {
  color: var(--blue);
}

.page-products .pr-plan--org .pr-plan__cta:hover::after {
  color: var(--blue);
}

/* ---------- 适用场景 ---------- */
.page-products .pr-scene {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-scene__item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
}

.page-products .pr-scene__item--wide,
.page-products .pr-scene__item--tall {
  border-left: 3px solid var(--orange);
}

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

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

.page-products .pr-scene__text h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
}

.page-products .pr-scene__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

/* ---------- 接入流程 ---------- */
.page-products .pr-flow {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-flow__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-flow__step {
  position: relative;
  padding: var(--gap-3);
  background: var(--ink-800);
  transition: background-color var(--dur-mid) var(--ease);
}

.page-products .pr-flow__step:hover {
  background: var(--ink-700);
}

.page-products .pr-flow__num {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--line);
  transition: color var(--dur-mid) var(--ease);
}

.page-products .pr-flow__step:hover .pr-flow__num {
  color: var(--orange);
}

.page-products .pr-flow__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
}

.page-products .pr-flow__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--warm);
}

/* ---------- 常见问题指向 ---------- */
.page-products .pr-help {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-help__title {
  margin-bottom: var(--gap-3);
}

.page-products .pr-help__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-help__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
}

.page-products .pr-help__card--accent {
  background: linear-gradient(150deg, rgba(255, 90, 31, 0.16), var(--ink-800) 70%);
  border-color: rgba(255, 90, 31, 0.45);
}

.page-products .pr-help__cardtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
}

.page-products .pr-help__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

.page-products .pr-help__card .btn {
  margin-top: auto;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pr-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

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

@media (min-width: 900px) {
  .page-products .pr-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--gap-5);
    padding-block: var(--gap-5) var(--gap-6);
  }

  .page-products .pr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-3);
  }

  .page-products .pr-cell--a { grid-column: span 7; }
  .page-products .pr-cell--b { grid-column: span 5; }
  .page-products .pr-cell--c { grid-column: span 5; }
  .page-products .pr-cell--d { grid-column: span 7; }

  .page-products .pr-split {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--gap-4);
  }

  .page-products .pr-index {
    position: sticky;
    top: var(--gap-3);
  }

  .page-products .pr-player__grid {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: var(--gap-4);
  }

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

  .page-products .pr-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-products .pr-plan--hot {
    transform: translateY(-8px);
  }

  .page-products .pr-plan--hot:hover {
    transform: translateY(-11px);
  }

  .page-products .pr-scene__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .page-products .pr-scene__item--wide {
    grid-column: span 2;
    grid-row: span 2;
  }

  .page-products .pr-scene__item--tall {
    grid-column: span 2;
  }

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

  .page-products .pr-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
  }
}

@media (min-width: 1200px) {
  .page-products .pr-hero__lede {
    font-size: 17px;
  }

  .page-products .pr-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
</style>
<<<END>>>

等等——我不应该输出 `</style>`。严格按标记要求来，输出应该以 PAGE_CSS 内容结束，后面不需要其他东西。

让我修正一下。结束部分应该就是 CSS 本身，不要 `</style>` 和 `<<<END>>>`。

实际上指令说的是：“严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：`` … `` …”——所以只允许这两个标记。我不应该包含 `</style>` 或 `<<<END>>>`。

让我重新干净地输出。
<main id="main-content" class="page-products">
  <nav class="breadcrumb wrap" aria-label="面包屑">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a><span class="breadcrumb__sep" aria-hidden="true">/</span></li>
      <li class="breadcrumb__item"><span class="breadcrumb__link" aria-current="page">数据服务与订阅</span></li>
    </ol>
  </nav>

  <section class="pr-hero wrap">
    <div class="pr-hero__copy">
      <p class="pr-kicker"><span class="tag tag--orange">数据服务</span><span class="pr-kicker__text">第 7 版面板 · 更新至第 12 轮</span></p>
      <h1 class="pr-hero__title">赛果看明白，球员看透彻</h1>
      <p class="pr-hero__lede">LOVE体育把 12 个运动项目的赛果、积分与球员表现收进一套可直接查看的面板。跟队的球迷能一口气追完整个赛季，教练组能把需要的指标带进复盘，联赛与青训机构则可以把内容嵌进自己的发布渠道。</p>
      <ul class="pr-hero__stats">
        <li><span class="num pr-hero__num">18</span><span class="pr-hero__stat-label">项核心指标</span></li>
        <li><span class="num pr-hero__num">6</span><span class="pr-hero__stat-label">个联赛覆盖</span></li>
        <li><span class="num pr-hero__num">480</span><span class="pr-hero__stat-label">名球员档案</span></li>
        <li><span class="num pr-hero__num">12</span><span class="pr-hero__stat-label">个运动项目</span></li>
      </ul>
      <div class="pr-hero__actions">
        <a class="btn btn--primary" href="/inquiry/">聊聊你的使用场景</a>
        <a class="btn btn--ghost" href="/guide/">看新手指引</a>
      </div>
    </div>
    <div class="pr-hero__visual media-frame media-frame--wide">
      <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深色背景上的抽象体育数据面板，橙色折线与蓝色指标块交错排列" decoding="async">
      <span class="media-frame__scrim" aria-hidden="true"></span>
      <span class="tag tag--lime media-frame__tag">第 12 轮</span>
      <p class="media-frame__caption">比分、轮次与球员指标在同一屏展开</p>
    </div>
  </section>

  <section class="pr-overview wrap" aria-labelledby="pr-overview-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">01</span><span class="plate__title">服务总览</span></span>
      <h2 class="pr-section-head__title" id="pr-overview-title">四块拼在一起，就是一整季的观赛与运营底板</h2>
      <p class="pr-section-head__note">每一项都能单独用，叠在一起时共用同一份关注列表，队伍和球员换了也不用重新找入口。</p>
    </header>

    <div class="pr-grid">
      <article class="pr-cell pr-cell--a pr-card">
        <p class="pr-card__label"><span class="tag tag--orange">战报聚合</span></p>
        <h3 class="pr-card__title">赛后十分钟，先把比分和关键事看完</h3>
        <p class="pr-card__body">足球、篮球、排球、田径、羽毛球、乒乓球等项目的赛果按日期排开，积分变化和关键时刻挂在同一张条目上。赛季高峰期一天有 6 到 10 条汇总，忙的时候挑重点看，闲下来再顺着日期往回翻。</p>
        <ul class="pr-feed">
          <li class="pr-feed__row"><span class="num pr-feed__tag">第 12 轮</span><span class="pr-feed__name">足球 · 城市联赛</span><span class="tag tag--blue">已汇总</span></li>
          <li class="pr-feed__row"><span class="num pr-feed__tag">第 12 轮</span><span class="pr-feed__name">篮球 · 区域杯赛</span><span class="tag tag--blue">已汇总</span></li>
          <li class="pr-feed__row"><span class="num pr-feed__tag">第 11 轮</span><span class="pr-feed__name">排球 · 校园组</span><span class="tag tag--blue">已汇总</span></li>
        </ul>
        <a class="pr-card__link" href="/notes/">进战报笔记翻日期</a>
      </article>

      <article class="pr-cell pr-cell--b pr-card">
        <p class="pr-card__label"><span class="tag tag--lime">关注列表</span></p>
        <h3 class="pr-card__title">勾一次，之后不用再找</h3>
        <p class="pr-card__body">在球队和球员上打勾，订阅状态会跟着账号走。第 12 轮的比分、下一轮的赛程、你看中那位球员的各项数值，都会先出现在你自己的列表里。</p>
        <p class="pr-card__meta"><span class="num">5.6 万</span> 注册用户正在使用 · <span class="num">320</span> 支业余球队</p>
      </article>

      <article class="pr-cell pr-cell--c pr-card">
        <p class="pr-card__label"><span class="tag tag--blue">球员面板</span></p>
        <h3 class="pr-card__title">把一名球员拆成 18 个可比的数</h3>
        <p class="pr-card__body">得分、助攻、篮板、抢断、盖帽、跑动距离各占一格，数值之间能横向比较。想找同类位置的参照对象，切换筛选就能换一组。</p>
        <ul class="pr-card__list">
          <li>按联赛、球队、位置三层筛选</li>
          <li>指标卡支持收藏与分享</li>
          <li>第 12 轮模板已统一</li>
        </ul>
      </article>

      <article class="pr-cell pr-cell--d pr-card">
        <p class="pr-card__label"><span class="tag tag--orange">机构接口</span></p>
        <h3 class="pr-card__title">让数据直接长在你的发布渠道上</h3>
        <p class="pr-card__body">联赛组委会与青训机构可以批量取走赛季数据，再把面板模块嵌进官网或赛事专题页里。36 家业余联赛、12 家青训机构和 8 家赛事运营公司已经在按这套方式出内容。</p>
        <div class="pr-nodes" aria-hidden="true">
          <svg viewBox="0 0 240 90" class="pr-nodes__svg">
            <line x1="30" y1="45" x2="105" y2="20" class="pr-nodes__line" />
            <line x1="30" y1="45" x2="105" y2="70" class="pr-nodes__line" />
            <line x1="105" y1="20" x2="200" y2="45" class="pr-nodes__line" />
            <line x1="105" y1="70" x2="200" y2="45" class="pr-nodes__line" />
            <circle cx="30" cy="45" r="7" class="pr-nodes__dot pr-nodes__dot--a" />
            <circle cx="105" cy="20" r="5" class="pr-nodes__dot pr-nodes__dot--b" />
            <circle cx="105" cy="70" r="5" class="pr-nodes__dot pr-nodes__dot--b" />
            <circle cx="200" cy="45" r="7" class="pr-nodes__dot pr-nodes__dot--a" />
          </svg>
        </div>
      </article>
    </div>
  </section>

  <section class="pr-panels wrap" aria-labelledby="pr-panels-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">02</span><span class="plate__title">面板能力</span></span>
      <h2 class="pr-section-head__title" id="pr-panels-title">18 项指标，按你关心的顺序排开</h2>
      <p class="pr-section-head__note">比分和排名是底板，球员指标是细节。联赛、球队、位置三层筛选联动，选完一次，后面翻页不用重选。</p>
    </header>

    <div class="pr-split">
      <aside class="pr-index" aria-label="面板功能索引">
        <p class="pr-index__label">面板分区</p>
        <ul class="pr-index__list">
          <li class="pr-index__item"><span class="pr-index__num num">01</span><span>赛果与积分排名</span></li>
          <li class="pr-index__item"><span class="pr-index__num num">02</span><span>单场技术统计</span></li>
          <li class="pr-index__item"><span class="pr-index__num num">03</span><span>得分 · 助攻 · 篮板</span></li>
          <li class="pr-index__item"><span class="pr-index__num num">04</span><span>抢断 · 盖帽 · 跑动距离</span></li>
          <li class="pr-index__item"><span class="pr-index__num num">05</span><span>轮次走势与对比</span></li>
        </ul>
        <p class="pr-index__note">订阅体育赛事数据面板后，你勾选的球队与球员会同步到对应分区，打开就是自己关心的那几个人。</p>
        <a class="btn btn--primary pr-index__cta" href="/inquiry/">订阅咨询</a>
      </aside>

      <div class="pr-panel">
        <div class="pr-panel__bar">
          <span class="tag tag--lime">第 12 轮</span>
          <span class="pr-panel__live"><span class="pr-dot" aria-hidden="true"></span>场均数据已同步</span>
          <span class="pr-panel__filter num">6 联赛 / 480 人</span>
        </div>

        <div class="pr-metrics">
          <div class="pr-metric">
            <span class="pr-metric__label">得分</span>
            <span class="pr-metric__value num">27.4</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--85"></i></span>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__label">助攻</span>
            <span class="pr-metric__value num">7.8</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--62"></i></span>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__label">篮板</span>
            <span class="pr-metric__value num">9.1</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--70"></i></span>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__label">抢断</span>
            <span class="pr-metric__value num">2.3</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--44"></i></span>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__label">盖帽</span>
            <span class="pr-metric__value num">1.4</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--32"></i></span>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__label">跑动距离</span>
            <span class="pr-metric__value num">10.6</span>
            <span class="pr-metric__bar"><i class="pr-bar pr-bar--78"></i></span>
          </div>
        </div>

        <div class="pr-chart">
          <p class="pr-chart__cap">近六轮场均得分走势（橙）与失分走势（蓝）</p>
          <svg class="pr-chart__svg" viewBox="0 0 320 130" role="img" aria-label="近六轮得分与失分走势折线图，得分整体保持上行">
            <line x1="0" y1="30" x2="320" y2="30" class="pr-chart__grid" />
            <line x1="0" y1="70" x2="320" y2="70" class="pr-chart__grid" />
            <line x1="0" y1="110" x2="320" y2="110" class="pr-chart__grid" />
            <polygon class="pr-chart__area" points="0,96 40,74 80,84 120,52 160,64 200,36 240,46 280,22 320,30 320,130 0,130" />
            <polyline class="pr-chart__line" points="0,96 40,74 80,84 120,52 160,64 200,36 240,46 280,22 320,30" />
            <polyline class="pr-chart__line pr-chart__line--blue" points="0,104 40,92 80,96 120,74 160,80 200,62 240,70 280,50 320,58" />
            <circle cx="280" cy="22" r="4" class="pr-chart__dot" />
          </svg>
        </div>

        <table class="pr-rank">
          <caption class="pr-rank__cap">第 12 轮场均得分前四</caption>
          <thead>
            <tr><th scope="col">名次</th><th scope="col">队伍</th><th scope="col">场均得分</th></tr>
          </thead>
          <tbody>
            <tr><td class="num">1</td><td>东区一队</td><td class="num">27.4</td></tr>
            <tr><td class="num">2</td><td>南岸二队</td><td class="num">24.8</td></tr>
            <tr><td class="num">3</td><td>西城三队</td><td class="num">21.2</td></tr>
            <tr><td class="num">4</td><td>北环四队</td><td class="num">18.6</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="pr-player wrap" aria-labelledby="pr-player-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">03</span><span class="plate__title">球员数据</span></span>
      <h2 class="pr-section-head__title" id="pr-player-title">最新球员数据页面，翻到第 12 轮就有答案</h2>
      <p class="pr-section-head__note">6 个联赛、约 480 名球员的档案同步在这一版里。定好位置和球队，两个人的指标可以并排摆着看，合适的指标卡还能收藏下来发出去。</p>
    </header>

    <div class="pr-player__grid">
      <div class="pr-player__media media-frame media-frame--tall">
        <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="排球运动员扣球动作的剪影，画面上叠加半透明指标数字" loading="lazy" decoding="async">
        <span class="media-frame__scrim" aria-hidden="true"></span>
        <span class="tag tag--orange media-frame__tag">扣球瞬间</span>
        <p class="media-frame__caption">动作与数值对照着看，判断更准</p>
      </div>

      <div class="pr-player__body">
        <div class="pr-chips">
          <p class="pr-chips__label">位置</p>
          <ul class="pr-chips__list">
            <li class="pr-chip pr-chip--on">全部</li>
            <li class="pr-chip">前锋</li>
            <li class="pr-chip">中场</li>
            <li class="pr-chip">后卫</li>
            <li class="pr-chip">主攻</li>
            <li class="pr-chip">二传</li>
          </ul>
          <p class="pr-chips__label">球队</p>
          <ul class="pr-chips__list">
            <li class="pr-chip pr-chip--on">东区一队</li>
            <li class="pr-chip">南岸二队</li>
            <li class="pr-chip">西城三队</li>
          </ul>
        </div>

        <div class="pr-player__cards">
          <article class="pr-mini">
            <p class="pr-mini__label">球员 A · 主攻</p>
            <p class="pr-mini__val num">27.4</p>
            <p class="pr-mini__sub">得分 · 第 12 轮</p>
          </article>
          <article class="pr-mini">
            <p class="pr-mini__label">球员 B · 主攻</p>
            <p class="pr-mini__val num">23.1</p>
            <p class="pr-mini__sub">得分 · 第 12 轮</p>
          </article>
          <article class="pr-mini pr-mini--accent">
            <p class="pr-mini__label">对比结果</p>
            <p class="pr-mini__val num">+4.3</p>
            <p class="pr-mini__sub">同一位置差值</p>
          </article>
          <article class="pr-mini">
            <p class="pr-mini__label">跑动距离</p>
            <p class="pr-mini__val num">10.6</p>
            <p class="pr-mini__sub">公里 / 场</p>
          </article>
        </div>

        <ul class="pr-player__notes">
          <li>指标卡一键收藏，下次打开还在原位</li>
          <li>分享出去的卡片带着轮次和筛选条件</li>
          <li>同一位置横向排序，找参照对象更快</li>
        </ul>
        <a class="btn btn--ghost" href="/notes/">看本轮的赛场记录</a>
      </div>
    </div>
  </section>

  <section class="pr-plans wrap" aria-labelledby="pr-plans-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">04</span><span class="plate__title">订阅方案</span></span>
      <h2 class="pr-section-head__title" id="pr-plans-title">从自己看到整个机构用，三档接着往上走</h2>
      <p class="pr-section-head__note">档位只说清两件事：谁在用，能拿到什么。具体开通方式和账号数量，在咨询时按你的实际人数和赛季长度确认。</p>
    </header>

    <div class="pr-plans__grid">
      <article class="pr-plan">
        <p class="pr-plan__badge">个人球迷</p>
        <h3 class="pr-plan__name">基础版</h3>
        <p class="pr-plan__for">适合每周固定追几场、想先把赛果和排名看全的人。</p>
        <ul class="pr-plan__list">
          <li>赛果汇总，按日期往回翻</li>
          <li>积分排名随轮次更新</li>
          <li>战报索引，一场一条</li>
        </ul>
        <a class="pr-plan__cta" href="/inquiry/">选这个档位</a>
      </article>

      <article class="pr-plan pr-plan--hot">
        <p class="pr-plan__badge pr-plan__badge--hot">球队与教练组</p>
        <h3 class="pr-plan__name">进阶版</h3>
        <p class="pr-plan__for">需要把对手和自己摆在一起比的教练组，复盘前先看数。</p>
        <ul class="pr-plan__list">
          <li>包含基础版全部内容</li>
          <li>关注列表同步到面板</li>
          <li>球员指标对比与排序</li>
          <li>面板订阅，动态自动推送</li>
        </ul>
        <a class="pr-plan__cta pr-plan__cta--hot" href="/inquiry/">按进阶版咨询</a>
      </article>

      <article class="pr-plan pr-plan--org">
        <p class="pr-plan__badge pr-plan__badge--org">联赛与青训机构</p>
        <h3 class="pr-plan__name">机构版</h3>
        <p class="pr-plan__for">要把赛事数据变成官网栏目、专题页和青训展示材料的一方。</p>
        <ul class="pr-plan__list">
          <li>包含进阶版全部内容</li>
          <li>赛季数据批量导出</li>
          <li>面板模块嵌入发布渠道</li>
          <li>按赛事周期配置账号</li>
        </ul>
        <div class="pr-plan__figure">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="深色底上发光的数据节点由细线连接，电光蓝与荧光绿点缀" loading="lazy" decoding="async">
        </div>
        <a class="pr-plan__cta" href="/inquiry/">谈机构接入</a>
      </article>
    </div>
  </section>

  <section class="pr-scene wrap" aria-labelledby="pr-scene-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">05</span><span class="plate__title">适用场景</span></span>
      <h2 class="pr-section-head__title" id="pr-scene-title">同样一套数据，四种用法</h2>
      <p class="pr-section-head__note">下面四种情况，是过去一个赛季里问得最多的。看看哪一种更像你现在的处境。</p>
    </header>

    <div class="pr-scene__grid">
      <article class="pr-scene__item pr-scene__item--wide">
        <div class="pr-scene__media media-frame media-frame--wide">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="教练与球员围看平板上的数据图表，侧影构图，不聚焦面部" loading="lazy" decoding="async">
          <span class="media-frame__scrim" aria-hidden="true"></span>
          <p class="media-frame__caption">赛前把对手的得分分布先摆出来</p>
        </div>
        <div class="pr-scene__text">
          <h3>球队复盘</h3>
          <p>把上一轮的得分、助攻和跑动距离拉出来对照，哪一段体力掉了、哪个人被压住了，会上不用再靠回忆争。带进训练课，改哪一项也清楚。</p>
        </div>
      </article>

      <article class="pr-scene__item pr-scene__item--tall">
        <div class="pr-scene__media media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛事转播工作台的多屏数据画面，硬光影，屏幕上是图表与比分" loading="lazy" decoding="async">
          <span class="media-frame__scrim" aria-hidden="true"></span>
          <p class="media-frame__caption">转播与内容岗的实时数据来源</p>
        </div>
        <div class="pr-scene__text">
          <h3>联赛内容运营</h3>
          <p>每轮结束后，赛果和排名直接从面板导出，配上战报索引做成专题页。赛季冲刺阶段内容需求密集，模板固定下来就不用每次从头排。</p>
        </div>
      </article>

      <article class="pr-scene__item">
        <div class="pr-scene__text">
          <h3>球迷追踪</h3>
          <p>只关心一支队、两个球员也可以。勾进关注列表，比分和指标一有变化就先看到，不必每轮自己搜一遍。</p>
        </div>
      </article>

      <article class="pr-scene__item">
        <div class="pr-scene__text">
          <h3>青训数据展示</h3>
          <p>家长开放日、招生简章、赛季总结，都需要能看得懂的数据。把球员指标卡收藏好，配上轮次说明就能直接发布。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="pr-flow wrap" aria-labelledby="pr-flow-title">
    <header class="pr-section-head">
      <span class="plate"><span class="plate__index">06</span><span class="plate__title">接入流程</span></span>
      <h2 class="pr-section-head__title" id="pr-flow-title">从聊需求到上手，四步走完</h2>
      <p class="pr-section-head__note">个人订阅当场就能开；机构接入通常在一到两周内完成配置，赛季中途也能接。</p>
    </header>

    <ol class="pr-flow__list">
      <li class="pr-flow__step">
        <span class="pr-flow__num num">01</span>
        <h3 class="pr-flow__title">选档位</h3>
        <p class="pr-flow__text">说清是自己在用，还是整支队伍、整个机构在用，我们按人数和赛事范围给出对应方案。</p>
      </li>
      <li class="pr-flow__step">
        <span class="pr-flow__num num">02</span>
        <h3 class="pr-flow__title">开关注</h3>
        <p class="pr-flow__text">把要跟的球队和球员勾进关注列表，订阅状态确认后，对应动态会自动进入面板。</p>
      </li>
      <li class="pr-flow__step">
        <span class="pr-flow__num num">03</span>
        <h3 class="pr-flow__title">配面板</h3>
        <p class="pr-flow__text">按你的联赛、球队和位置偏好定好默认筛选，指标卡顺序也能调整成复盘时最顺手的排列。</p>
      </li>
      <li class="pr-flow__step">
        <span class="pr-flow__num num">04</span>
        <h3 class="pr-flow__title">训与反馈</h3>
        <p class="pr-flow__text">给团队做一次使用讲解，把导出和嵌入的用法过一遍。后续遇到数据问题，附截图发客服邮箱，定位更快。</p>
      </li>
    </ol>
  </section>

  <section class="pr-help wrap" aria-labelledby="pr-help-title">
    <h2 class="pr-section-head__title pr-help__title" id="pr-help-title">还有疑问？两条路都通向人</h2>
    <div class="pr-help__grid">
      <article class="pr-help__card">
        <h3 class="pr-help__cardtitle">操作上的问题</h3>
        <p>第一次用，不确定关注列表在哪、面板怎么订阅、球员数据页怎么筛。新手指引里按步骤写好了，跟着走一遍就能上手。</p>
        <a class="btn btn--ghost" href="/guide/">打开新手指引</a>
      </article>
      <article class="pr-help__card pr-help__card--accent">
        <h3 class="pr-help__cardtitle">合作与接入的问题</h3>
        <p>要谈机构版、批量导出、面板嵌入，或者想知道你们那个联赛适合哪一档，直接找咨询通道，工作日 9:00-18:00 有人回复。</p>
        <a class="btn btn--primary" href="/inquiry/">联系咨询</a>
      </article>
    </div>
  </section>

  <div class="wrap">
    <div class="action-strip">
      <p class="action-strip__text">把这份服务说明收进收藏，下次和团队讨论档位时直接打开；遇到数据对不上，附截图发客服邮箱处理更快。</p>
      <div class="action-strip__actions">
        <button class="btn btn--ghost" type="button" data-save-toggle aria-pressed="false">收藏本页</button>
        <a class="btn btn--ghost" href="/inquiry/">反馈问题</a>
      </div>
    </div>
  </div>
</main>

.page-products {
  --pr-cut: 14px;
  --pr-panel-deep: #0B0D10;
  display: block;
}

/* ---------- 首屏 ---------- */
.page-products .pr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-4);
  padding-block: var(--gap-4) var(--gap-5);
  align-items: start;
}

.page-products .pr-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-1);
  margin: 0 0 var(--gap-2);
}

.page-products .pr-kicker__text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm);
}

.page-products .pr-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.125rem, 7vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}

.page-products .pr-hero__lede {
  max-width: 54ch;
  margin: var(--gap-2) 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--warm);
}

.page-products .pr-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--gap-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--ink-800);
}

.page-products .pr-hero__num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-products .pr-hero__stat-label {
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

.page-products .pr-hero__visual {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
}

.page-products .pr-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 段落头 ---------- */
.page-products .pr-section-head {
  display: grid;
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
}

.page-products .pr-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--fog);
}

.page-products .pr-section-head__note {
  max-width: 66ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--warm);
}

/* ---------- 服务总览 ---------- */
.page-products .pr-overview {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
  transition: border-color var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease);
}

.page-products .pr-card:hover,
.page-products .pr-card:focus-within {
  border-color: var(--orange);
  background: var(--ink-700);
}

.page-products .pr-card__label {
  margin: 0;
}

.page-products .pr-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--fog);
}

.page-products .pr-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

.page-products .pr-card__meta {
  margin: 0;
  margin-top: auto;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--warm);
}

.page-products .pr-card__meta .num {
  color: var(--blue);
  font-weight: 700;
}

.page-products .pr-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--warm);
}

.page-products .pr-card__list li {
  position: relative;
  padding-left: 16px;
}

.page-products .pr-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--lime);
}

.page-products .pr-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease);
}

.page-products .pr-card__link:hover,
.page-products .pr-card__link:focus-visible {
  border-bottom-color: var(--orange);
}

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

.page-products .pr-feed__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-1);
  padding: 9px 10px;
  background: var(--pr-panel-deep);
}

.page-products .pr-feed__tag {
  font-size: 11px;
  color: var(--warm);
  white-space: nowrap;
}

.page-products .pr-feed__name {
  font-size: 13px;
  color: var(--fog);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-products .pr-nodes {
  margin-top: auto;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--line);
}

.page-products .pr-nodes__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pr-nodes__line {
  stroke: #2A313A;
  stroke-width: 1;
}

.page-products .pr-nodes__dot--a {
  fill: var(--blue);
}

.page-products .pr-nodes__dot--b {
  fill: var(--lime);
}

/* ---------- 面板能力 ---------- */
.page-products .pr-panels {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3);
  align-items: start;
}

.page-products .pr-index {
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
}

.page-products .pr-index__label {
  margin: 0 0 var(--gap-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.page-products .pr-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
}

.page-products .pr-index__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px;
  background: var(--ink-800);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.page-products .pr-index__item:hover {
  background: var(--pr-panel-deep);
  color: var(--white);
}

.page-products .pr-index__num {
  font-size: 11px;
  color: var(--orange);
}

.page-products .pr-index__note {
  margin: var(--gap-2) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--warm);
}

.page-products .pr-index__cta {
  display: block;
  width: 100%;
  margin-top: var(--gap-3);
  text-align: center;
}

.page-products .pr-panel {
  display: grid;
  gap: var(--gap-3);
  padding: var(--gap-3);
  min-width: 0;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #151A20 0%, #0B0D10 78%);
}

.page-products .pr-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
  padding-bottom: var(--gap-2);
  border-bottom: 1px solid var(--line);
}

.page-products .pr-panel__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(182, 255, 59, 0.16);
}

.page-products .pr-panel__filter {
  margin-left: auto;
  font-size: 12px;
  color: var(--blue);
}

.page-products .pr-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

.page-products .pr-metric {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  transition: border-color var(--dur-mid) var(--ease);
}

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

.page-products .pr-metric__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
}

.page-products .pr-metric__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-products .pr-metric__bar {
  display: block;
  height: 4px;
  background: var(--line);
  overflow: hidden;
}

.page-products .pr-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--deep-orange), var(--orange));
}

.page-products .pr-bar--85 { width: 85%; }
.page-products .pr-bar--78 { width: 78%; }
.page-products .pr-bar--70 { width: 70%; }
.page-products .pr-bar--62 { width: 62%; }
.page-products .pr-bar--44 { width: 44%; }
.page-products .pr-bar--32 { width: 32%; }

.page-products .pr-chart {
  padding: var(--gap-2);
  border: 1px solid var(--line);
  background: var(--pr-panel-deep);
}

.page-products .pr-chart__cap {
  margin: 0 0 var(--gap-1);
  font-size: 12px;
  color: var(--warm);
}

.page-products .pr-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pr-chart__grid {
  stroke: #232A33;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.page-products .pr-chart__area {
  fill: rgba(255, 90, 31, 0.14);
}

.page-products .pr-chart__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.page-products .pr-chart__line--blue {
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.page-products .pr-chart__dot {
  fill: var(--lime);
}

.page-products .pr-rank {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fog);
}

.page-products .pr-rank__cap {
  caption-side: top;
  padding-bottom: var(--gap-1);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
}

.page-products .pr-rank th,
.page-products .pr-rank td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.page-products .pr-rank th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm);
}

.page-products .pr-rank td.num {
  font-weight: 700;
  color: var(--lime);
}

.page-products .pr-rank tbody tr:hover td {
  background: var(--ink-800);
}

/* ---------- 球员数据 ---------- */
.page-products .pr-player {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-player__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3);
  align-items: start;
}

.page-products .pr-player__media {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
}

.page-products .pr-player__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .pr-player__body {
  display: grid;
  gap: var(--gap-3);
  min-width: 0;
}

.page-products .pr-chips {
  display: grid;
  gap: var(--gap-1);
}

.page-products .pr-chips__label {
  margin: var(--gap-1) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--warm);
}

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

.page-products .pr-chip {
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--warm);
  background: transparent;
  border: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.page-products .pr-chip--on {
  color: var(--ink-900);
  background: var(--lime);
  border-color: var(--lime);
  font-weight: 600;
}

.page-products .pr-chip:hover {
  border-color: var(--blue);
  color: var(--fog);
}

.page-products .pr-chip--on:hover {
  color: var(--ink-900);
}

.page-products .pr-player__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

.page-products .pr-mini {
  padding: 12px 14px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  transition: border-color var(--dur-mid) var(--ease);
}

.page-products .pr-mini:hover {
  border-top-color: var(--orange);
}

.page-products .pr-mini--accent {
  background: rgba(45, 140, 255, 0.1);
  border-top-color: var(--blue);
}

.page-products .pr-mini__label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--warm);
}

.page-products .pr-mini__val {
  margin: 6px 0 2px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.page-products .pr-mini--accent .pr-mini__val {
  color: var(--ice);
}

.page-products .pr-mini__sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--warm);
}

.page-products .pr-player__notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--warm);
}

.page-products .pr-player__notes li {
  position: relative;
  padding-left: 16px;
}

.page-products .pr-player__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.page-products .pr-player__body .btn {
  justify-self: start;
}

/* ---------- 订阅方案 ---------- */
.page-products .pr-plans {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
  transition: transform var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}

.page-products .pr-plan:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
}

.page-products .pr-plan--hot {
  background: linear-gradient(165deg, rgba(255, 90, 31, 0.15), var(--ink-800) 62%);
  border-color: rgba(255, 90, 31, 0.55);
}

.page-products .pr-plan--org {
  background: linear-gradient(165deg, rgba(45, 140, 255, 0.14), var(--ink-800) 58%);
  border-color: rgba(45, 140, 255, 0.5);
}

.page-products .pr-plan--org:hover {
  border-color: var(--blue);
}

.page-products .pr-plan__badge {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm);
  border: 1px solid var(--line);
}

.page-products .pr-plan__badge--hot {
  color: var(--orange);
  border-color: var(--orange);
}

.page-products .pr-plan__badge--org {
  color: var(--blue);
  border-color: var(--blue);
}

.page-products .pr-plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .pr-plan__for {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--warm);
}

.page-products .pr-plan__list {
  margin: 0;
  padding: var(--gap-2) 0 0;
  list-style: none;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fog);
}

.page-products .pr-plan__list li {
  position: relative;
  padding-left: 18px;
}

.page-products .pr-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--orange);
}

.page-products .pr-plan--org .pr-plan__list li::before {
  border-color: var(--blue);
}

.page-products .pr-plan__figure {
  overflow: hidden;
  border: 1px solid var(--line);
}

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

.page-products .pr-plan__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--gap-2);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fog);
  text-decoration: none;
  border-top: 1px solid var(--line);
  transition: color var(--dur-mid) var(--ease);
}

.page-products .pr-plan__cta::after {
  content: "→";
  color: var(--warm);
  transition: transform var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}

.page-products .pr-plan__cta:hover,
.page-products .pr-plan__cta:focus-visible {
  color: var(--orange);
}

.page-products .pr-plan__cta:hover::after,
.page-products .pr-plan__cta:focus-visible::after {
  transform: translateX(4px);
  color: var(--orange);
}

.page-products .pr-plan__cta--hot {
  color: var(--orange);
}

.page-products .pr-plan__cta--hot::after {
  color: var(--orange);
}

.page-products .pr-plan--org .pr-plan__cta:hover,
.page-products .pr-plan--org .pr-plan__cta:focus-visible {
  color: var(--blue);
}

.page-products .pr-plan--org .pr-plan__cta:hover::after,
.page-products .pr-plan--org .pr-plan__cta:focus-visible::after {
  color: var(--blue);
}

/* ---------- 适用场景 ---------- */
.page-products .pr-scene {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-scene__item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
}

.page-products .pr-scene__item--wide,
.page-products .pr-scene__item--tall {
  border-left: 3px solid var(--orange);
}

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

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

.page-products .pr-scene__text h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
}

.page-products .pr-scene__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

/* ---------- 接入流程 ---------- */
.page-products .pr-flow {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-flow__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .pr-flow__step {
  padding: var(--gap-3);
  background: var(--ink-800);
  transition: background-color var(--dur-mid) var(--ease);
}

.page-products .pr-flow__step:hover {
  background: var(--ink-700);
}

.page-products .pr-flow__num {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--line);
  transition: color var(--dur-mid) var(--ease);
}

.page-products .pr-flow__step:hover .pr-flow__num {
  color: var(--orange);
}

.page-products .pr-flow__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
}

.page-products .pr-flow__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--warm);
}

/* ---------- 常见问题指向 ---------- */
.page-products .pr-help {
  padding-block: var(--gap-5);
  border-top: 1px solid var(--line);
}

.page-products .pr-help__title {
  margin-bottom: var(--gap-3);
}

.page-products .pr-help__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

.page-products .pr-help__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--ink-800);
  border: 1px solid var(--line);
  min-width: 0;
}

.page-products .pr-help__card--accent {
  background: linear-gradient(150deg, rgba(255, 90, 31, 0.16), var(--ink-800) 70%);
  border-color: rgba(255, 90, 31, 0.45);
}

.page-products .pr-help__cardtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
}

.page-products .pr-help__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--warm);
}

.page-products .pr-help__card .btn {
  margin-top: auto;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pr-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pr-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pr-plans__grid,
  .page-products .pr-help__grid,
  .page-products .pr-scene__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-products .pr-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--gap-5);
    padding-block: var(--gap-5) var(--gap-6);
  }

  .page-products .pr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-3);
  }

  .page-products .pr-cell--a { grid-column: span 7; }
  .page-products .pr-cell--b { grid-column: span 5; }
  .page-products .pr-cell--c { grid-column: span 5; }
  .page-products .pr-cell--d { grid-column: span 7; }

  .page-products .pr-split {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--gap-4);
  }

  .page-products .pr-index {
    position: sticky;
    top: var(--gap-3);
  }

  .page-products .pr-player__grid {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: var(--gap-4);
  }

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

  .page-products .pr-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-products .pr-plan--hot {
    transform: translateY(-8px);
  }

  .page-products .pr-plan--hot:hover {
    transform: translateY(-11px);
  }

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

  .page-products .pr-scene__item--wide {
    grid-column: span 2;
    grid-row: span 2;
  }

  .page-products .pr-scene__item--tall {
    grid-column: span 2;
  }

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

  .page-products .pr-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
  }
}

@media (min-width: 1200px) {
  .page-products .pr-hero__lede {
    font-size: 17px;
  }

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