.page-products {
  --pd-gap: clamp(16px, 2.6vw, 28px);
  --pd-pad: clamp(20px, 3.2vw, 30px);
  background: var(--ink);
  color: var(--white);
  overflow-x: clip;
}

.page-products p {
  margin: 0;
}

.page-products a {
  color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  padding-block: clamp(20px, 3.6vw, 40px) clamp(34px, 6vw, 70px);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(660px 320px at 90% 4%, rgba(255, 122, 26, 0.16), transparent 68%),
    radial-gradient(520px 300px at 4% 96%, rgba(76, 122, 90, 0.24), transparent 72%);
}

.page-products .pd-hero .wrap {
  position: relative;
}

.page-products .pd-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(22px, 3.4vw, 40px);
}

.page-products .pd-hero__copy h1 {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.page-products .pd-hero__copy .lede {
  margin-top: 18px;
  max-width: 60ch;
}

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

.page-products .pd-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
}

.page-products .pd-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-hero__facts b {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: -0.02em;
}

/* 控制台视觉 */
.page-products .pd-console {
  position: relative;
  padding: clamp(18px, 2.6vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--panel) 0%, #0a1119 72%);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-products .pd-console::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -30%;
  width: 72%;
  height: 190%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(182, 255, 46, 0.08), transparent);
  pointer-events: none;
}

.page-products .pd-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .pd-console__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.18);
}

.page-products .pd-console__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.page-products .pd-console__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-console__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 4px;
  font-family: var(--font-mono);
  font-size: clamp(48px, 12vw, 76px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.page-products .pd-console__score i {
  font-style: normal;
  font-size: 0.62em;
  color: var(--orange);
}

.page-products .pd-console__caption {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-console__rows {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.page-products .pd-console__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--muted);
}

.page-products .pd-console__row b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--white);
}

/* ---------- 章节导航 ---------- */
.page-products .pd-toc {
  padding-block: 0;
}

.page-products .pd-toc__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.page-products .pd-toc__list::-webkit-scrollbar {
  display: none;
}

.page-products .pd-toc__link {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-products .pd-toc__link:hover {
  color: var(--white);
  border-color: var(--moss);
}

.page-products .pd-toc__link.is-current,
.page-products .pd-toc__link[aria-current="true"] {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
}

/* ---------- 章节通用 ---------- */
.page-products .pd-block {
  padding-block: clamp(44px, 6.5vw, 84px);
  border-top: 1px solid var(--line);
}

.page-products .pd-block__lede {
  margin-top: 18px;
  max-width: 74ch;
}

.page-products .pd-block__foot {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-figure {
  margin: clamp(26px, 4vw, 40px) 0 0;
}

.page-products .pd-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* ---------- 新版对照 ---------- */
.page-products .pd-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
}

.page-products .pd-compare__item {
  position: relative;
  padding: 22px 20px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}

.page-products .pd-compare__item::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(182, 255, 46, 0.08);
}

.page-products .pd-compare__item:nth-child(2)::after {
  background: rgba(255, 122, 26, 0.1);
}

.page-products .pd-compare__item:nth-child(3)::after {
  background: rgba(76, 122, 90, 0.2);
}

.page-products .pd-compare__num {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--orange);
}

.page-products .pd-compare__item h3 {
  position: relative;
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .pd-compare__item p {
  position: relative;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  overflow: hidden;
}

.page-products .pd-stat {
  padding: 20px 18px;
  background: var(--panel);
}

.page-products .pd-stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--lime);
}

.page-products .pd-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 集锦三个时段 ---------- */
.page-products .pd-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

.page-products .pd-stage {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--lime);
}

.page-products .pd-stage--noon::before {
  background: var(--orange);
}

.page-products .pd-stage--night::before {
  background: var(--clay);
}

.page-products .pd-stage__badge {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pd-stage--noon .pd-stage__badge {
  color: var(--orange);
}

.page-products .pd-stage--night .pd-stage__badge {
  color: var(--clay);
}

.page-products .pd-stage h3 {
  margin: 12px 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.page-products .pd-stage p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- 订阅分组 ---------- */
.page-products .pd-drag {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.page-products .pd-pool {
  padding: var(--pd-pad);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(20, 27, 38, 0.55);
}

.page-products .pd-pool__title {
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-pool__hint {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

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

.page-products .pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink);
  font-size: 13px;
  color: var(--white);
  cursor: grab;
}

.page-products .pd-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--moss);
}

.page-products .pd-chip--hot::before {
  background: var(--lime);
}

.page-products .pd-chip--trail {
  border-color: rgba(182, 255, 46, 0.5);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.1);
  transform: translate(6px, -5px) rotate(-1.5deg);
}

.page-products .pd-groups {
  display: grid;
  gap: 12px;
}

.page-products .pd-group {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-group__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
}

.page-products .pd-group__dot--orange {
  background: var(--orange);
}

.page-products .pd-group__dot--moss {
  background: var(--moss);
}

.page-products .pd-group__meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-group__note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

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

/* ---------- 看战报步骤 ---------- */
.page-products .pd-guide__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-top: 26px;
}

.page-products .pd-steps {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

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

.page-products .pd-step[open] {
  border-color: rgba(182, 255, 46, 0.4);
}

.page-products .pd-step summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.page-products .pd-step summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--orange);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-step__arrow {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.page-products .pd-step[open] .pd-step__arrow {
  transform: rotate(90deg);
  color: var(--lime);
}

.page-products .pd-step__body {
  padding: 0 18px 20px 66px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-figure--tight {
  margin-top: 0;
}

/* ---------- 数据面板 ---------- */
.page-products .pd-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .pd-sig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-sig:first-child {
  background: linear-gradient(160deg, #131c28 0%, #0a1119 100%);
}

.page-products .pd-sig__title {
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-sig__cap {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(38px, 8vw, 54px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.page-products .score-unit {
  color: var(--white);
}

.page-products .score-label {
  font-size: 0.6em;
  color: var(--orange);
}

.page-products .pd-legend {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-legend li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.page-products .pd-legend b {
  color: var(--white);
  font-weight: 600;
}

.page-products .pd-legend__key {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--muted);
}

.page-products .pd-legend__key--live {
  background: var(--orange);
}

.page-products .pd-legend__key--done {
  background: var(--moss);
}

/* ---------- 适用场景 ---------- */
.page-products .pd-scenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .pd-scene {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-scene__kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-products .pd-scene h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .pd-scene p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-scene p.pd-scene__hint {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
}

.page-products .pd-scene--paper {
  background: var(--paper);
  border-color: var(--paper);
  color: #16202b;
}

.page-products .pd-scene--paper .pd-scene__kicker {
  color: var(--clay);
}

.page-products .pd-scene--paper p {
  color: #3a4655;
}

.page-products .pd-scene--paper p.pd-scene__hint {
  border-top-color: rgba(22, 32, 43, 0.22);
}

/* ---------- 结尾 ---------- */
.page-products .pd-end {
  border-top: 1px solid var(--line);
}

.page-products .pd-end__box {
  position: relative;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(118deg, #0d1420 0%, #131c28 56%, #0c1a13 100%);
  overflow: hidden;
}

.page-products .pd-end__box::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 255, 46, 0.2), transparent 68%);
  pointer-events: none;
}

.page-products .pd-end__box h2 {
  position: relative;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-products .pd-end__box p {
  position: relative;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-end__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

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

@media (min-width: 760px) {
  .page-products .pd-compare {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-scenes {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-products .pd-console {
    transform: rotate(-1.2deg);
  }

  .page-products .pd-drag {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .page-products .pd-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-guide__split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-products .pd-figure--tight {
    position: sticky;
    top: 92px;
    margin-top: 26px;
  }
}

@media (max-width: 519px) {
  .page-products .pd-step summary {
    gap: 10px;
    padding: 15px;
  }

  .page-products .pd-step__title {
    font-size: 14px;
  }

  .page-products .pd-step__body {
    padding: 0 15px 18px 59px;
    font-size: 14px;
  }

  .page-products .pd-hero__facts {
    gap: 10px 20px;
  }
}
<<<END>>>

等等，用户只要求输出标记块。让我确认我只输出了两个标记块，没有多余的说明。上面那些分析内容都不该输出。

实际上我之前的回复里似乎包含了思考过程。让我重新确认——用户明确说了“不要 Markdown 和解释”，严格按照标记顺序输出。所以我应该只输出 ``、HTML 和 ``、CSS。

我之前的回复中确实包含了思考过程，这是不对的。但现在我需要给出正确格式的最终回复。

让我回顾一下之前已经生成的 HTML 和 CSS 内容，确认它们是正确的，然后只输出标记部分。

我之前生成的 HTML 里有一些问题需要检查：
1. 面包屑导航的 `<ol>` 没有正确闭合？让我看看……
2. 图片占位符格式是否正确？
3. 是否有重复的 ID？

让我重新整理并输出正确的版本。

实际上我注意到之前回复里 HTML 是完整的，但从分析文本开始输出是错的。现在我需要输出正确格式。

等等——系统提示说“当前页面 slug 是 products”，要求输出：
```

从 <main id="main-content" class="page-products"> 开始，到 </main> 结束

当前页面专属 CSS
```

让我检查几个关键点：
- 只能有一个 h1 ✓
- 所有 href 锚点都有对应 id ✓ (#clips, #subscribe, #overview, #guide, #panel, #scenes 都有)
- 图片占位格式 `{zhanqunpic:h:900w:1400}` 对应 width="1400" height="900" ✓
- 联系信息只在 /cooperation/ 链接，没有直接展示 ✓
- 品牌名 "A8赛场" 出现在正文 ✓
- 关键词 "体育订阅球队关注列表" 自然融入 ✓
- 关键词 "A8新版中文版页面打开" 自然融入 ✓

但等等，我之前生成的 HTML 中面包屑部分的 `<ol>` 闭合是否完整？
```html
<nav class="breadcrumbs" aria-label="面包屑导航">
  <ol>
    <li><a href="/">赛场首页</a></li>
    <li aria-current="page">产品与能力</li>
  </ol>
</nav>
```
是的，闭合了。

好，现在我需要输出完整的最终回复。但之前的内容已经生成了，我应该直接给出正确的格式。

让我把之前生成的 HTML 和 CSS 复制并整理成正确的格式输出。

但注意，我的思考过程中说“好的，最终输出如下所示。”然后开始输出，但输出中混入了思考。让我重新开始，只输出两个标记块。

不过我不能重头再生成一遍，那样会消耗太多 token。我就把已经写好的内容直接整理输出。

等等，我需要检查 HTML 中是否存在问题——比如 `data-section` 和 `data-toc-link` 的配对。它们都是：overview, clips, subscribe, guide, panel, scenes。匹配 ✓

还有一处问题：我之前生成的 HTML 中有一个 `</main>` 收尾，但 `` 之后的 CSS 中所有选择器都限制在 `.page-products` 作用域内。检查一下：
- `.page-products { ... }`
- `.page-products p { ... }`
- `.page-products a { ... }`
- 所有其他规则都以 `.page-products` 开头
- 媒体查询内部的规则也以 `.page-products` 开头

好，没问题。

CSS 中引用的变量也检查一下：
- `--ink`, `--panel`, `--line`, `--white`, `--muted`, `--lime`, `--orange`, `--moss`, `--clay`, `--paper` ✓
- `--r-lg`, `--r-md`, `--r-pill` ✓
- `--shadow-lift` ✓
- `--t-fast`, `--ease` ✓
- `--font-mono`, `--font-head` ✓

都在 site_kit.css_variables 列表中 ✓

自定义变量 `--pd-gap` 和 `--pd-pad` 在 `.page-products` 作用域内定义 ✓

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

  <section class="section pd-hero">
    <div class="wrap">
      <nav class="breadcrumbs" aria-label="面包屑导航">
        <ol>
          <li><a href="/">赛场首页</a></li>
          <li aria-current="page">产品与能力</li>
        </ol>
      </nav>

      <div class="pd-hero__grid">
        <div class="pd-hero__copy">
          <p class="eyebrow">产品与能力</p>
          <h1>集锦、主队和战报，一块屏幕就能盯住</h1>
          <p class="lede">看比赛不该花掉你半个晚上。A8赛场把按日更新的赛事短片、跨联赛合并的球队关注、两步即达的战报入口收进同一个移动端界面——早高峰刷完昨晚的进球，午休追另一支主队的半场，夜里确认最终比分，全程不用翻来翻去。</p>
          <div class="pd-hero__cta">
            <a class="btn btn--primary" href="#clips">看集锦怎么用</a>
            <a class="btn btn--ghost" href="#subscribe">搭一个关注列表</a>
          </div>
          <ul class="pd-hero__facts">
            <li><b>18</b><span>个体育项目</span></li>
            <li><b>60+</b><span>个联赛</span></li>
            <li><b>300+</b><span>条集锦 / 每天</span></li>
          </ul>
        </div>

        <div class="pd-hero__visual">
          <div class="pd-console" aria-hidden="true">
            <div class="pd-console__bar">
              <span class="pd-console__dot"></span>
              <span class="pd-console__tag">LIVE</span>
              <span class="pd-console__time">78'</span>
            </div>
            <div class="pd-console__score">
              <span>2</span><i>:</i><span>1</span>
            </div>
            <p class="pd-console__caption">夜间赛场 · 比分跟着赛况走</p>
            <div class="pd-console__rows">
              <div class="pd-console__row"><span>本场集锦</span><b>3 条</b></div>
              <div class="pd-console__row"><span>关注列表动态</span><b>5 场</b></div>
              <div class="pd-console__row"><span>下一更新时段</span><b>21:00</b></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <nav class="wrap pd-toc" aria-label="本页内容">
    <ul class="pd-toc__list">
      <li><a class="toc-link pd-toc__link" href="#overview" data-toc-link="overview">新版与旧版</a></li>
      <li><a class="toc-link pd-toc__link" href="#clips" data-toc-link="clips">视频集锦</a></li>
      <li><a class="toc-link pd-toc__link" href="#subscribe" data-toc-link="subscribe">订阅列表</a></li>
      <li><a class="toc-link pd-toc__link" href="#guide" data-toc-link="guide">看战报指引</a></li>
      <li><a class="toc-link pd-toc__link" href="#panel" data-toc-link="panel">数据面板</a></li>
      <li><a class="toc-link pd-toc__link" href="#scenes" data-toc-link="scenes">适用场景</a></li>
    </ul>
  </nav>

  <section class="section pd-block" id="overview" data-section="overview">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">新版与旧版</p>
        <h2 class="section-title">A8新版中文版页面打开之后，熟悉的位置都还在</h2>
      </div>
      <p class="lede pd-block__lede">第一屏仍然是你习惯的两栏：一边按体育项目分类，一边是当天热度和你的关注。这一版把改动落在手指够得到的地方——入口往下挪了一点，按钮做宽，夜间阅读不再刺眼。原来建好的关注分组跟着账号继续用，不用重新添一遍。</p>

      <figure class="media-frame media-frame--wide pd-figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间球场灯光与看台亮灯特写，画面带轻微运动模糊" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">夜间赛场是主场景，界面按低亮度环境设计</figcaption>
      </figure>

      <div class="pd-compare">
        <article class="pd-compare__item">
          <span class="pd-compare__num">01</span>
          <h3>入口没挪远</h3>
          <p>集锦、订阅和战报仍在首屏范围里，向下滑动不超过一屏，单手拇指都够得着。</p>
        </article>
        <article class="pd-compare__item">
          <span class="pd-compare__num">02</span>
          <h3>关注原样带过来</h3>
          <p>沿用同一个账号，你已经建好的分组和球队会直接出现在新的关注列表里，不必重新添加。</p>
        </article>
        <article class="pd-compare__item">
          <span class="pd-compare__num">03</span>
          <h3>夜里看着不累</h3>
          <p>深色夜间赛场模式是默认形态，冷白文字配荧光绿操作键，躺床上连刷几段集锦也不费眼。</p>
        </article>
      </div>

      <div class="pd-stats">
        <div class="pd-stat"><b>2019</b><span>开始运营</span></div>
        <div class="pd-stat"><b>8</b><span>代内容架构</span></div>
        <div class="pd-stat"><b>180万+</b><span>注册用户</span></div>
        <div class="pd-stat"><b>26</b><span>个省份的用户在用</span></div>
      </div>

      <p class="pd-block__foot">想看看每天这几百条内容是怎么攒出来的，可以翻一翻<a href="/about-us/">品牌与团队</a>，以及持续更新的<a href="/insights/">赛场观察</a>。</p>
    </div>
  </section>

  <section class="section pd-block" id="clips" data-section="clips">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">移动端视频集锦</p>
        <h2 class="section-title">一天三班更新，错过的比赛按日追回来</h2>
      </div>
      <p class="lede pd-block__lede">集锦按日更新，早间、午间、晚间三个时段各推一批，日均更新 300 条以上，覆盖 18 个体育项目和 60 余个联赛。每段片子剪得很短，竖屏单手就能刷，遇到想细看的回合再放慢或回拉。</p>

      <div class="pd-track">
        <article class="pd-stage pd-stage--am">
          <span class="pd-stage__badge mono">07:30</span>
          <h3>早间站</h3>
          <p>隔夜结束的比赛剪成第一批短片，通勤路上正好刷完你关心的那几场。</p>
          <ul class="pd-stage__tags">
            <li class="tag tag--muted">足球</li>
            <li class="tag tag--muted">篮球</li>
            <li class="tag tag--moss">隔夜场</li>
          </ul>
        </article>
        <article class="pd-stage pd-stage--noon">
          <span class="pd-stage__badge mono">12:30</span>
          <h3>午间站</h3>
          <p>上午收官的比赛和午间开打的场次各剪一段，午休吃口饭的工夫就补完了。</p>
          <ul class="pd-stage__tags">
            <li class="tag tag--muted">网球</li>
            <li class="tag tag--muted">电竞</li>
            <li class="tag tag--orange">实时跟进</li>
          </ul>
        </article>
        <article class="pd-stage pd-stage--night">
          <span class="pd-stage__badge mono">21:00</span>
          <h3>晚间站</h3>
          <p>当日主要联赛的完整集锦和关键回合一次给全，睡前一屏翻完今天的赛场。</p>
          <ul class="pd-stage__tags">
            <li class="tag tag--muted">赛车</li>
            <li class="tag tag--muted">田径</li>
            <li class="tag tag--clay">当日汇总</li>
          </ul>
        </article>
      </div>

      <figure class="media-frame pd-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="移动端赛事视频集锦界面拼贴，右上角按日更新标签醒目" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">竖屏短片，更新标签直接标在卡片角上</figcaption>
      </figure>
    </div>
  </section>

  <section class="section pd-block" id="subscribe" data-section="subscribe">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">球队订阅</p>
        <h2 class="section-title">一个列表，装下你所有的主队</h2>
      </div>
      <p class="lede pd-block__lede">体育订阅球队关注列表支持跨联赛合并：不管你追的是足球还是篮球，各支球队的动态会汇进同一块面板，按你的分组顺序排好。最多可以建 20 个分组，单个列表能追踪 50 支球队。</p>

      <div class="pd-drag">
        <div class="pd-pool">
          <p class="pd-pool__title">待分组</p>
          <p class="pd-pool__hint">按住任意一项拖到右侧分组里，松手就归位，分组顺序随时还能再调。</p>
          <ul class="pd-chips">
            <li class="pd-chip pd-chip--hot">刚关注的球队</li>
            <li class="pd-chip pd-chip--trail">推荐关注</li>
            <li class="pd-chip">旧版带过来的关注</li>
          </ul>
        </div>

        <div class="pd-groups">
          <article class="pd-group">
            <div class="pd-group__head">
              <span class="pd-group__dot" aria-hidden="true"></span>
              <span>周末必看</span>
              <span class="pd-group__meta mono">8 支 · 4 个联赛</span>
            </div>
            <p class="pd-group__note">周末整块时间，把两个联赛的主队动态放在一起刷新，不用来回切换项目。</p>
          </article>
          <article class="pd-group">
            <div class="pd-group__head">
              <span class="pd-group__dot pd-group__dot--orange" aria-hidden="true"></span>
              <span>工作日夜场</span>
              <span class="pd-group__meta mono">6 支 · 3 个联赛</span>
            </div>
            <p class="pd-group__note">晚上十点后开打的场次单独归一组，第二天早间的集锦按这个分组顺序推给你。</p>
          </article>
          <article class="pd-group">
            <div class="pd-group__head">
              <span class="pd-group__dot pd-group__dot--moss" aria-hidden="true"></span>
              <span>第二主队</span>
              <span class="pd-group__meta mono">5 支 · 5 个联赛</span>
            </div>
            <p class="pd-group__note">跨项目一起追的那些队放这里，足球、篮球、赛车可以共用一个列表。</p>
          </article>
          <p class="pd-drag__foot">按上限算，你还能再建 17 个分组。</p>
        </div>
      </div>

      <figure class="media-frame pd-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="跨联赛球队订阅列表拖拽分组示意，荧光绿高亮拖拽轨迹" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">拖动时轨迹用荧光绿高亮，落点位置即时可见</figcaption>
      </figure>
    </div>
  </section>

  <section class="section pd-block" id="guide" data-section="guide">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">看战报指引</p>
        <h2 class="section-title">两步打开战报，比赛间隙也刷得完</h2>
      </div>

      <div class="pd-guide__split">
        <div class="pd-guide__col">
          <p class="lede pd-block__lede">常看战报的人最在意的是快：打开就是当天结果，不用先找入口。这条路径就两步，第二栏点一次，列表就已经按联赛和时间排好。</p>

          <div class="pd-steps">
            <details class="pd-step" open>
              <summary>
                <span class="pd-step__num mono">1</span>
                <span class="pd-step__title">落在首页，视线下移到第二栏</span>
                <span class="pd-step__arrow" aria-hidden="true">›</span>
              </summary>
              <div class="pd-step__body">打开 A8赛场首页，战报入口就在第二栏这一行，和其他常用入口排在一起，不需要展开菜单层层往下点。</div>
            </details>
            <details class="pd-step">
              <summary>
                <span class="pd-step__num mono">2</span>
                <span class="pd-step__title">点一下，当天战报直接铺开</span>
                <span class="pd-step__arrow" aria-hidden="true">›</span>
              </summary>
              <div class="pd-step__body">一次点击切进战报列表，已结束的场次排在最前，比分、关键事件和时间戳一行一条，按联赛分组折叠。</div>
            </details>
            <details class="pd-step">
              <summary>
                <span class="pd-step__num mono">3</span>
                <span class="pd-step__title">想补画面，再点旁边的集锦标签</span>
                <span class="pd-step__arrow" aria-hidden="true">›</span>
              </summary>
              <div class="pd-step__body">读到感兴趣的一场，条目旁就是该场的集锦入口，点开即看，不会再跳回首页重新找一遍比赛。</div>
            </details>
          </div>
        </div>

        <figure class="media-frame pd-figure pd-figure--tight">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="看战报指引的两步操作步骤卡，电光橙标记步骤编号" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">步骤卡可以逐条展开，跟着做一遍就记住了</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section pd-block" id="panel" data-section="panel">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">数据面板与状态信号</p>
        <h2 class="section-title">比分、状态、更新时间，一眼扫过去</h2>
      </div>
      <p class="lede pd-block__lede">面板上的比分用等宽数字排布，刷新或换行时两边的数字不会左右跳动；赛事状态用固定颜色的标签区分，扫一眼就知道该点进去，还是再等一等。</p>

      <div class="pd-panel">
        <div class="pd-sig">
          <div class="score">
            <span class="score-unit mono">2</span>
            <span class="score-label">:</span>
            <span class="score-unit mono">1</span>
          </div>
          <p class="pd-sig__title">比分牌</p>
          <p class="pd-sig__cap">主客队数字等宽对齐，滚动列表时整列不会晃。</p>
        </div>

        <div class="pd-sig">
          <p class="pd-sig__title">状态标签</p>
          <ul class="pd-legend">
            <li><span class="pd-legend__key pd-legend__key--live" aria-hidden="true"></span><span><b>进行中 / 刚更新</b>，赛事正在发生，点进去多半有新画面。</span></li>
            <li><span class="pd-legend__key pd-legend__key--done" aria-hidden="true"></span><span><b>已结束</b>，结果已定，集锦基本剪完。</span></li>
            <li><span class="pd-legend__key" aria-hidden="true"></span><span><b>未开始</b>，可以先进去订阅提醒。</span></li>
          </ul>
        </div>

        <div class="pd-sig">
          <p class="pd-sig__title">更新标签</p>
          <p class="pd-sig__cap">每张集锦卡片角落都标着最近一次更新的时刻，早间、午间、晚间三批各更新一次。你不用反复下拉试探，看到时间变了再点开就行。</p>
        </div>
      </div>

      <figure class="media-frame pd-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间赛场数据面板与比分牌组件，等宽数字显示当场比分" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">比分牌、状态灯、更新标签共用一套颜色语言</figcaption>
      </figure>
    </div>
  </section>

  <section class="section pd-block" id="scenes" data-section="scenes">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">适用场景</p>
        <h2 class="section-title">你大概属于哪一种看球节奏</h2>
      </div>

      <div class="pd-scenes">
        <article class="pd-scene">
          <span class="pd-scene__kicker mono">碎片时间</span>
          <h3>通勤与午休的零散空档</h3>
          <p>早间站和午间站的更新刚好卡在出门和午休前后，一次刷三到五段短片，不用等直播，也不必回看整场。</p>
          <p class="pd-scene__hint">建议：先把最常追的两三支球队放进第一个分组，集锦会按这个顺序排。</p>
        </article>

        <article class="pd-scene pd-scene--paper">
          <span class="pd-scene__kicker mono">多主队</span>
          <h3>同时追好几支队</h3>
          <p>足球、篮球、赛车各有各的赛季，跨联赛合并之后它们落在同一块面板上，比完一场切到另一场不丢上下文。</p>
          <p class="pd-scene__hint">建议：按关注频次分组，周末常看的和偶尔看一眼的分开放，列表会更清爽。</p>
        </article>

        <article class="pd-scene">
          <span class="pd-scene__kicker mono">只看结果</span>
          <h3>只要比分和关键事件</h3>
          <p>不一定每场都看，但想知道谁赢了、怎么赢的。两步打开战报，关键事件一行一条，几十秒扫完当天所有比赛。</p>
          <p class="pd-scene__hint">建议：把战报入口固定在你最常落脚的那一屏，形成肌肉记忆。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section pd-block pd-end">
    <div class="wrap">
      <div class="pd-end__box">
        <h2>想让这些能力用在你手上的赛事？</h2>
        <p>赛事内容合作、版权与数据接入、内容纠错，都可以从一封邮件开始聊。想先自己走一遍流程，帮助中心里有更细的入口说明和常见问题。</p>
        <div class="pd-end__cta">
          <a class="btn btn--primary" href="/cooperation/">联系商务合作</a>
          <a class="btn btn--ghost" href="/faqs/">查看帮助中心</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pd-pad: clamp(20px, 3.2vw, 30px);
  background: var(--ink);
  color: var(--white);
  overflow-x: clip;
}

.page-products p {
  margin: 0;
}

.page-products a {
  color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  padding-block: clamp(20px, 3.6vw, 40px) clamp(34px, 6vw, 70px);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(660px 320px at 90% 4%, rgba(255, 122, 26, 0.16), transparent 68%),
    radial-gradient(520px 300px at 4% 96%, rgba(76, 122, 90, 0.24), transparent 72%);
}

.page-products .pd-hero .wrap {
  position: relative;
}

.page-products .pd-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(22px, 3.4vw, 40px);
}

.page-products .pd-hero__copy h1 {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.page-products .pd-hero__copy .lede {
  margin-top: 18px;
  max-width: 60ch;
}

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

.page-products .pd-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
}

.page-products .pd-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-hero__facts b {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: -0.02em;
}

.page-products .pd-console {
  position: relative;
  padding: clamp(18px, 2.6vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--panel) 0%, #0a1119 72%);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-products .pd-console::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -30%;
  width: 72%;
  height: 190%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(182, 255, 46, 0.08), transparent);
  pointer-events: none;
}

.page-products .pd-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .pd-console__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.18);
}

.page-products .pd-console__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.page-products .pd-console__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-console__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 4px;
  font-family: var(--font-mono);
  font-size: clamp(48px, 12vw, 76px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.page-products .pd-console__score i {
  font-style: normal;
  font-size: 0.62em;
  color: var(--orange);
}

.page-products .pd-console__caption {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.page-products .pd-console__rows {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.page-products .pd-console__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--muted);
}

.page-products .pd-console__row b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--white);
}

/* ---------- 章节导航 ---------- */
.page-products .pd-toc {
  padding-block: 0;
}

.page-products .pd-toc__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.page-products .pd-toc__list::-webkit-scrollbar {
  display: none;
}

.page-products .pd-toc__link {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-products .pd-toc__link:hover {
  color: var(--white);
  border-color: var(--moss);
}

.page-products .pd-toc__link.is-current,
.page-products .pd-toc__link[aria-current="true"] {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
}

/* ---------- 章节通用 ---------- */
.page-products .pd-block {
  padding-block: clamp(44px, 6.5vw, 84px);
  border-top: 1px solid var(--line);
}

.page-products .pd-block__lede {
  margin-top: 18px;
  max-width: 74ch;
}

.page-products .pd-block__foot {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-figure {
  margin: clamp(26px, 4vw, 40px) 0 0;
}

.page-products .pd-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* ---------- 新版对照 ---------- */
.page-products .pd-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
}

.page-products .pd-compare__item {
  position: relative;
  padding: 22px 20px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}

.page-products .pd-compare__item::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(182, 255, 46, 0.08);
}

.page-products .pd-compare__item:nth-child(2)::after {
  background: rgba(255, 122, 26, 0.1);
}

.page-products .pd-compare__item:nth-child(3)::after {
  background: rgba(76, 122, 90, 0.2);
}

.page-products .pd-compare__num {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--orange);
}

.page-products .pd-compare__item h3 {
  position: relative;
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .pd-compare__item p {
  position: relative;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  overflow: hidden;
}

.page-products .pd-stat {
  padding: 20px 18px;
  background: var(--panel);
}

.page-products .pd-stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--lime);
}

.page-products .pd-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 集锦三个时段 ---------- */
.page-products .pd-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

.page-products .pd-stage {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--lime);
}

.page-products .pd-stage--noon::before {
  background: var(--orange);
}

.page-products .pd-stage--night::before {
  background: var(--clay);
}

.page-products .pd-stage__badge {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .pd-stage--noon .pd-stage__badge {
  color: var(--orange);
}

.page-products .pd-stage--night .pd-stage__badge {
  color: var(--clay);
}

.page-products .pd-stage h3 {
  margin: 12px 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.page-products .pd-stage p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- 订阅分组 ---------- */
.page-products .pd-drag {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.page-products .pd-pool {
  padding: var(--pd-pad);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(20, 27, 38, 0.55);
}

.page-products .pd-pool__title {
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-pool__hint {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

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

.page-products .pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink);
  font-size: 13px;
  color: var(--white);
  cursor: grab;
}

.page-products .pd-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--moss);
}

.page-products .pd-chip--hot::before {
  background: var(--lime);
}

.page-products .pd-chip--trail {
  border-color: rgba(182, 255, 46, 0.5);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.1);
  transform: translate(6px, -5px) rotate(-1.5deg);
}

.page-products .pd-groups {
  display: grid;
  gap: 12px;
}

.page-products .pd-group {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-group__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
}

.page-products .pd-group__dot--orange {
  background: var(--orange);
}

.page-products .pd-group__dot--moss {
  background: var(--moss);
}

.page-products .pd-group__meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-products .pd-group__note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

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

/* ---------- 看战报步骤 ---------- */
.page-products .pd-guide__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-top: 26px;
}

.page-products .pd-steps {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

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

.page-products .pd-step[open] {
  border-color: rgba(182, 255, 46, 0.4);
}

.page-products .pd-step summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.page-products .pd-step summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--orange);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-step__arrow {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.page-products .pd-step[open] .pd-step__arrow {
  transform: rotate(90deg);
  color: var(--lime);
}

.page-products .pd-step__body {
  padding: 0 18px 20px 66px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-figure--tight {
  margin-top: 0;
}

/* ---------- 数据面板 ---------- */
.page-products .pd-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .pd-sig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-sig:first-child {
  background: linear-gradient(160deg, #131c28 0%, #0a1119 100%);
}

.page-products .pd-sig__title {
  font-size: 15px;
  font-weight: 700;
}

.page-products .pd-sig__cap {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(38px, 8vw, 54px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.page-products .score-unit {
  color: var(--white);
}

.page-products .score-label {
  font-size: 0.6em;
  color: var(--orange);
}

.page-products .pd-legend {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-legend li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.page-products .pd-legend b {
  color: var(--white);
  font-weight: 600;
}

.page-products .pd-legend__key {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--muted);
}

.page-products .pd-legend__key--live {
  background: var(--orange);
}

.page-products .pd-legend__key--done {
  background: var(--moss);
}

/* ---------- 适用场景 ---------- */
.page-products .pd-scenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .pd-scene {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.page-products .pd-scene__kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-products .pd-scene h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .pd-scene p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .pd-scene p.pd-scene__hint {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
}

.page-products .pd-scene--paper {
  background: var(--paper);
  border-color: var(--paper);
  color: #16202b;
}

.page-products .pd-scene--paper .pd-scene__kicker {
  color: var(--clay);
}

.page-products .pd-scene--paper p {
  color: #3a4655;
}

.page-products .pd-scene--paper p.pd-scene__hint {
  border-top-color: rgba(22, 32, 43, 0.22);
}

/* ---------- 结尾 ---------- */
.page-products .pd-end {
  border-top: 1px solid var(--line);
}

.page-products .pd-end__box {
  position: relative;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(118deg, #0d1420 0%, #131c28 56%, #0c1a13 100%);
  overflow: hidden;
}

.page-products .pd-end__box::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 255, 46, 0.2), transparent 68%);
  pointer-events: none;
}

.page-products .pd-end__box h2 {
  position: relative;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-products .pd-end__box p {
  position: relative;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-end__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

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

@media (min-width: 760px) {
  .page-products .pd-compare {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-scenes {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-products .pd-console {
    transform: rotate(-1.2deg);
  }

  .page-products .pd-drag {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .page-products .pd-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-guide__split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-products .pd-figure--tight {
    position: sticky;
    top: 92px;
    margin-top: 26px;
  }
}

@media (max-width: 519px) {
  .page-products .pd-step summary {
    gap: 10px;
    padding: 15px;
  }

  .page-products .pd-step__title {
    font-size: 14px;
  }

  .page-products .pd-step__body {
    padding: 0 15px 18px 59px;
    font-size: 14px;
  }

  .page-products .pd-hero__facts {
    gap: 10px 20px;
  }
}