.page-products {
  --sol-rail: 236px;
  background: var(--night);
  color: var(--mist);
  font-family: var(--font-sans);
  line-height: 1.75;
  overflow-x: clip;
}

.page-products .num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  font-family: var(--font-sans);
  color: var(--snow);
  letter-spacing: -.01em;
}

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

.page-products .sol-hero {
  position: relative;
  padding: 26px 0 48px;
  overflow: hidden;
}

.page-products .sol-hero__glow {
  position: absolute;
  top: -34%;
  right: -22%;
  width: 84%;
  height: 158%;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 68% 42%, rgba(23, 195, 162, .16), transparent 72%),
    repeating-linear-gradient(118deg, rgba(127, 230, 210, .05) 0 1px, transparent 1px 28px);
}

.page-products .sol-hero__grid {
  position: relative;
  display: grid;
  gap: 28px;
}

.page-products .sol-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--teal);
}

.page-products .sol-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ember);
}

.page-products h1 {
  margin: 0 0 16px;
  font-size: clamp(27px, 6.2vw, 46px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.page-products .sol-lede {
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: 15px;
  color: var(--mist);
}

.page-products .sol-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.page-products .sol-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(92, 104, 132, .35);
}

.page-products .sol-hero__facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-products .sol-hero__facts dd {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  color: var(--snow);
}

.page-products .sol-hero__facts dd span {
  margin-left: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
}

.page-products .sol-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--panel-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

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

.page-products .sol-hero__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 主体骨架 ---------- */

.page-products .sol-body {
  padding: 14px 0 76px;
}

.page-products .sol-body__grid {
  display: grid;
  gap: 26px;
}

.page-products .sol-sec {
  padding-bottom: 42px;
}

.page-products .sol-sec + .sol-sec {
  padding-top: 44px;
  border-top: 1px solid rgba(92, 104, 132, .28);
}

.page-products .sol-sec__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin-bottom: 22px;
}

.page-products .sol-no {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  letter-spacing: -.02em;
}

.page-products .sol-no--hot {
  color: var(--ember);
}

.page-products .sol-sec__head h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(21px, 3.8vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}

.page-products .sol-sec__head p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
}

.page-products .sol-grid-2 {
  display: grid;
  gap: 24px;
}

.page-products .sol-copy h3 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-copy h3:first-child {
  margin-top: 0;
}

.page-products .sol-copy p {
  margin: 0 0 14px;
  font-size: 14px;
}

/* ---------- 看板字段 ---------- */

.page-products .sol-fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-fields li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(92, 104, 132, .42);
}

.page-products .sol-fields__k {
  font-size: 14px;
  font-weight: 600;
  color: var(--snow);
}

.page-products .sol-fields__v {
  font-size: 13px;
  color: var(--mist);
}

/* ---------- 周期模块 ---------- */

.page-products .sol-cycle__top {
  display: grid;
  gap: 22px;
  margin-bottom: 24px;
}

.page-products .sol-radar {
  margin: 0;
  padding: 14px;
  background: var(--panel-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .sol-radar svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.page-products .sol-radar figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mist);
}

.page-products .sol-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--snow);
}

.page-products .sol-legend::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.page-products .sol-legend--home::before {
  background: var(--teal);
}

.page-products .sol-legend--away::before {
  background: var(--violet);
}

.page-products .sol-legend__note {
  flex: 1 1 100%;
  color: var(--rule);
  font-size: 11.5px;
}

.page-products .sol-cycle__notes p {
  margin: 0 0 14px;
  font-size: 14px;
}

.page-products .sol-cycle__notes h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.page-products .sol-asks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-asks li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(92, 104, 132, .22);
}

.page-products .sol-asks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.page-products .sol-filter {
  margin: 0 0 18px;
}

.page-products .sol-cycle__panels {
  display: grid;
  gap: 12px;
}

.page-products .sol-cycle__item {
  padding: 18px 20px;
  background: var(--panel);
  border-left: 3px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.page-products .sol-cycle__item:nth-child(2) {
  border-left-color: var(--violet);
}

.page-products .sol-cycle__item:nth-child(3) {
  border-left-color: var(--teal-soft);
}

.page-products .sol-cycle__item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-cycle__item p {
  margin: 0;
  font-size: 14px;
}

.page-products .sol-figure--chart {
  max-width: 620px;
  margin-top: 26px;
}

/* ---------- 第 3 栏 · 报价面板 ---------- */

.page-products .sol-price {
  position: relative;
  padding: 26px 20px 30px !important;
  background: linear-gradient(158deg, var(--panel) 0%, var(--panel-deep) 100%);
  border-top: 0 !important;
  border-left: 4px solid var(--ember);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-products .sol-price__band {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(255, 90, 43, .42);
}

.page-products .sol-price__band h2 {
  margin: 0;
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 700;
}

.page-products .sol-price__lede {
  margin: 0 0 24px;
  max-width: 66ch;
  font-size: 14.5px;
}

.page-products .sol-tiers {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.page-products .sol-tier {
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(92, 104, 132, .34);
}

.page-products .sol-tier:first-child {
  padding-top: 6px;
}

.page-products .sol-tier--pick {
  border-left: 3px solid var(--teal);
  padding-left: 16px;
}

.page-products .sol-tier__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-products .sol-tier__badge {
  font-size: 17px;
  font-weight: 700;
  color: var(--snow);
}

.page-products .sol-tier__tag {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--night);
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.page-products .sol-tier__for {
  margin: 0;
  font-size: 13.5px;
  color: var(--mist);
}

.page-products .sol-tier__has {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.page-products .sol-tier__has li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  color: var(--mist);
}

.page-products .sol-tier__has li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--rule);
}

.page-products .sol-tier__price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.page-products .sol-price__sub {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-phases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-phase {
  border-bottom: 1px solid rgba(92, 104, 132, .3);
}

.page-products .sol-phase summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  color: var(--snow);
  font-size: 15px;
  font-weight: 600;
}

.page-products .sol-phase summary::-webkit-details-marker {
  display: none;
}

.page-products .sol-phase__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
}

.page-products .sol-phase__name {
  flex: 1 1 auto;
}

.page-products .sol-phase__mark {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.page-products .sol-phase__mark::before,
.page-products .sol-phase__mark::after {
  content: "";
  position: absolute;
  background: var(--mist);
  transition: transform .22s var(--ease);
}

.page-products .sol-phase__mark::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.page-products .sol-phase__mark::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.page-products .sol-phase[open] .sol-phase__mark::after {
  transform: scaleY(0);
}

.page-products .sol-phase p {
  margin: 0 0 16px 38px;
  font-size: 14px;
}

/* ---------- 战报与报告 ---------- */

.page-products .sol-figure--wide img {
  aspect-ratio: 7 / 3;
  object-fit: cover;
}

.page-products .sol-report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(92, 104, 132, .3);
  border-bottom: 1px solid rgba(92, 104, 132, .3);
}

.page-products .sol-report-stats > div {
  display: grid;
  gap: 4px;
}

.page-products .sol-report-stats .num {
  font-size: 26px;
  line-height: 1;
  color: var(--snow);
}

.page-products .sol-report-stats span:last-child {
  font-size: 12.5px;
  color: var(--mist);
}

/* ---------- 手机版 / 机构版 ---------- */

.page-products .sol-figure--tall {
  max-width: 300px;
  margin: 0 auto;
}

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

/* ---------- 接入流程 ---------- */

.page-products .sol-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-steps li {
  position: relative;
  padding: 18px 0 18px 52px;
}

.page-products .sol-steps li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(92, 104, 132, .34);
}

.page-products .sol-steps li:last-child::before {
  height: 34px;
}

.page-products .sol-step__no {
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  background: var(--night);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
}

.page-products .sol-steps h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-steps p {
  margin: 0;
  font-size: 14px;
}

/* ---------- 收尾 ---------- */

.page-products .sol-next {
  margin-top: 8px;
  padding: 28px 20px 30px;
  background: var(--panel-deep);
  border-top: 2px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-products .sol-next h2 {
  margin: 0 0 16px;
  font-size: clamp(19px, 3.4vw, 23px);
  font-weight: 700;
}

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

.page-products .sol-next__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--snow);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 104, 132, .3);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-products .sol-next__list a span {
  color: var(--teal);
}

.page-products .sol-next__list a:hover,
.page-products .sol-next__list a:focus-visible {
  color: var(--teal);
  padding-left: 6px;
}

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

@media (min-width: 720px) {
  .page-products .sol-hero {
    padding: 44px 0 64px;
  }

  .page-products .sol-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: 46px;
  }

  .page-products .sol-body__grid {
    gap: 34px;
  }

  .page-products .sol-grid-2 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 34px;
    align-items: start;
  }

  .page-products .sol-cycle__top {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .page-products .sol-figure--tall {
    margin: 0;
  }

  .page-products .sol-price {
    padding: 30px 28px 34px !important;
  }

  .page-products .sol-next {
    padding: 30px 28px 32px;
  }
}

@media (min-width: 960px) {
  .page-products .sol-body__grid {
    grid-template-columns: var(--sol-rail) minmax(0, 1fr);
    gap: 56px;
  }

  .page-products .sol-rail {
    position: sticky;
    top: 86px;
    padding: 0 0 0 18px;
    border-left: 2px solid rgba(92, 104, 132, .34);
  }

  .page-products .sol-rail__list {
    flex-direction: column;
    gap: 2px;
  }

  .page-products .sol-rail__list a {
    justify-content: flex-start;
    padding: 9px 10px 9px 12px;
    white-space: normal;
    line-height: 1.45;
    border: 0;
    border-left: 2px solid transparent;
  }

  .page-products .sol-rail__list a:hover,
  .page-products .sol-rail__list a:focus-visible {
    border-left-color: var(--teal);
    background: rgba(23, 195, 162, .07);
  }

  .page-products .sol-tier {
    grid-template-columns: 112px minmax(0, .9fr) minmax(0, 1.25fr) 160px;
    gap: 20px;
    align-items: start;
  }

  .page-products .sol-tier--pick {
    padding-left: 18px;
  }

  .page-products .sol-cycle__item {
    padding: 20px 24px;
  }
}

@media (max-width: 719px) {
  .page-products .sol-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .sol-hero__facts dd {
    font-size: 20px;
  }

  .page-products .sol-rail {
    padding: 14px 0;
    border-top: 1px solid rgba(92, 104, 132, .3);
    border-bottom: 1px solid rgba(92, 104, 132, .3);
  }

  .page-products .sol-rail__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .page-products .sol-rail__list li {
    flex: 0 0 auto;
  }

  .page-products .sol-rail__list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--mist);
    text-decoration: none;
    border: 1px solid rgba(92, 104, 132, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .sol-next__list a,
  .page-products .sol-phase__mark::before,
  .page-products .sol-phase__mark::after {
    transition: none;
  }
}
</final_review>
检查一下我写的内容：

1. 唯一一个 h1 ✓（“比分、走势、复盘，按你的赛季节奏配齐”）
2. 面包屑 ✓
3. 所有锚点都存在：`#pricing`、`#onboard`、`#board`、`#cycle`、`#reports`、`#mobile`——这些 id 都作为 section id 存在 ✓
4. 内部链接：`/`、`/answers/`、`/notes/`、`/usage/`、`/connect/` 都在允许的路由里 ✓
5. 图片 5 张，分别与目标尺寸一致 ✓
6. `data-filter-group`、`data-filter`、`data-filter-item`、`data-tags`、`data-reveal` 都在允许的列表里 ✓
7. 所有价格只在 `#pricing` 栏 ✓
8. 品牌名 KOK体育 出现在导语里 ✓
9. 关键词：“KOK 主客场表现周期”出现一次 ✓；“体育赛事 服务范围 报价”出现一次 ✓
10. 页面内没有 `:root`/`html`/`body` 选择器 ✓
11. 所有变量都来自列表 ✓

等等——我用到了 `--ghost` 吗？没有。没关系。

我有没有用过 `--cut`？没有。没关系。

检查一下 `.page-products .sol-price` ——我把 `!important` 放在了 `padding` 和 `border-top` 上，用来覆盖 `.sol-sec + .sol-sec` 的规则。这没问题，但用 `!important` 有点丑。还是重构一下：把 `.sol-sec + .sol-sec` 的规则弄得具体一点，排除掉 `.sol-price`。

更好的做法：
```css
.page-products .sol-sec + .sol-sec {
  padding-top: 44px;
  border-top: 1px solid rgba(92, 104, 132, .28);
}
.page-products .sol-sec.sol-price {
  border-top: 0;
  padding-top: 26px;
}
```
但特异性：`.page-products .sol-sec + .sol-sec` = 0,3,0 加上 element？其实 `.page-products`（类）`.sol-sec`（类）+ `.sol-sec`（类）= 3 个类 = 0,3,0。而 `.page-products .sol-sec.sol-price` = 3 个类 = 0,3,0。相同特异性，后写的生效。既然我把 sol-price 规则放在后面，它就会生效。好。

但 padding 的问题：`.sol-sec` 有 `padding-bottom: 42px`。`.sol-price` 设置 `padding: 26px 20px 30px`，这是简写，放后面会覆盖。好。

我就重构一下，移除 `!important`：

```css
.page-products .sol-sec + .sol-sec {
  padding-top: 44px;
  border-top: 1px solid rgba(92, 104, 132, .28);
}

.page-products .sol-price {
  ...
  border-top: 0;
  padding: 26px 20px 30px;
  ...
}
```

然后在媒体查询里：`.page-products .sol-price { padding: 30px 28px 34px; }`。好。

但等等——`sol-price` 也是 `.sol-sec`，所以它从 `.sol-sec` 得到 `padding-bottom: 42px`，然后被 `padding` 简写覆盖。因为简写规则在文件里更靠后，并且特异性相同或更高，所以没问题。

实际上 `.page-products .sol-sec` = 2 个类 = 0,2,0。`.page-products .sol-price` = 2 个类 = 0,2,0。相同。后写的生效。`sol-price` 规则在后面。✓

但 `.sol-sec + .sol-sec` 在 0,3,0，配了 `padding-top: 44px`——所以需要 `.page-products .sol-sec.sol-price` 在 0,3,0 来覆盖。我还是用那个吧。

我就直接在后面写 `.page-products .sol-sec.sol-price { border-top: 0; padding-top: 26px; }`。这样能覆盖，因为它在后面且特异性相同。

其实更简单——直接加上。我来定稿。

还有一点：我给 `.sol-price` 加了 `border-left: 4px solid var(--ember)`，那在移动端也没问题。

再检查一下 `sol-figure--wide img { aspect-ratio: 7/3; object-fit: cover }`——图片是 1400x600 = 7/3 ✓。

`sol-figure--tall img` 的 900/1200 = 3/4 ✓。

还有 `sol-hero__media img` 的 1600/900 = 16/9 ✓。

嗯，`object-fit: cover` 配合 `height: auto` 和 `aspect-ratio`——在现代浏览器里会生效。好。

还有一点：`.page-products .sol-flow` 没有样式——没关系的，它就是个普通容器。

再看看，`.sol-next` 在 `.sol-flow` 里面，但在 `.sol-sec` 后面——它没有 `.sol-sec` 类，所以没有 `+ .sol-sec` 规则的影响。好。

检查一下有没有 8 个字以上的重复短语。应该没问题。

再检查一下规则 12——不要出现内容管理相关的说法。扫一遍：“口径”在手机版那节里用过一次（“两边的数据和口径对得上”）。规则 12 禁止把“口径”写给访客看。还是拿掉吧。

把“两边的数据和口径对得上”改成“两边的数据对得上”。

另外，“核对”出现在“经编辑核对后进入战报或周期报告”里。这也挺像内容管理术语的。嗯——但这是对供稿走流程的真实描述。规则是：“口径、边界、核对、可核对、逐条核对、资料性呈现、统一口径、跨页面一致、不代表、不做承诺、不设、不提供、本页只、这个页面只做、我们不做”。所以“核对”被禁了。换种说法：“经编辑整理后进入战报或周期报告”。

嗯，“整理”没问题（赛前资料整理里也用了）。

改成：“由编辑按赛事节点组织进战报或周期报告。”

嗯，突然变啰嗦了。改成：“经编辑处理后进入战报或周期报告。”

“编辑处理”听着有点太内部。或者写成：“把素材交给编辑，就会出现在战报或周期报告里。”

还是用：“经编辑采用后，会进入战报或周期报告。”

好。

另外“白皮书优先阅读”没问题。

再检查一下没有“本页/本站/我们不做”之类的措辞。扫一遍……“它不替代完整看板”——没问题，那是在讲产品。

“模块按近 10 轮……”没问题。

再检查一下“服务范围四阶段”——我写的是“四个阶段”。

好。

再检查一下规则：不要“暂不/暂无”——没有。

再检查一下不要出现“示例/占位/模板”——没有。

还有一条：“站点”有没有用过？没有，我说的是“站里”——“不用先在站里绕一圈”。嗯，这勉强可以接受。改成“不用先到处找”。

定稿吧。

再看一下 hero 文案：“打开就是当天的场次，不用先到处找。”

另外 `sol-rail__label` 现在是“方案中心”，没问题。

再检查一下 `aria-pressed="true"` 只加在“全部”按钮上——这没问题。

输出定稿。我需要把 CSS 里的 `!important` 替换方案应用上去。

另外注意：`.page-products .sol-sec.sol-price` 这个选择器——和 `.sol-sec + .sol-sec` 的特异性一样（两边都是 3 类，加上 `.page-products` 实际上变成 3 类和 3 类？我数一下：
- `.page-products .sol-sec + .sol-sec` → 类：`.page-products`、`.sol-sec`、`.sol-sec` = 3 类 → (0,3,0)
- `.page-products .sol-sec.sol-price` → `.page-products`、`.sol-sec`、`.sol-price` = 3 类 → (0,3,0)
特异性相同，后写的生效。✓

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

  <div class="shell">
    <nav class="breadcrumb" aria-label="当前页面位置">
      <ol class="breadcrumb__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">方案中心</li>
      </ol>
    </nav>
  </div>

  <section class="sol-hero">
    <div class="sol-hero__glow" aria-hidden="true"></div>
    <div class="shell sol-hero__grid">
      <div class="sol-hero__copy">
        <p class="sol-kicker">赛季服务 · 三档可选</p>
        <h1>比分、走势、复盘，按你的赛季节奏配齐</h1>
        <p class="sol-lede">KOK体育把赛前资料、赛中比分、赛后战报和赛季走势合成可订阅的服务。你打算跟几个项目、更在意主场还是客场、赛季里要不要出周期报告，都能在下面找到对应的档位和费用。</p>
        <div class="sol-hero__act">
          <a class="btn btn--teal" href="#pricing">看赛季报价</a>
          <a class="btn btn--ghost" href="#onboard">走一遍接入流程</a>
        </div>
        <dl class="sol-hero__facts">
          <div>
            <dt>覆盖项目</dt>
            <dd class="num">12</dd>
          </div>
          <div>
            <dt>比分刷新</dt>
            <dd class="num">8<span>秒</span></dd>
          </div>
          <div>
            <dt>赛季方案</dt>
            <dd class="num">3<span>档</span></dd>
          </div>
        </dl>
      </div>
      <figure class="sol-figure sol-hero__media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜色中的综合体育场，多条跑道与场地灯光交织，冷蓝底色">
      </figure>
    </div>
  </section>

  <div class="sol-body">
    <div class="shell sol-body__grid">

      <aside class="sol-rail" aria-label="本页栏目">
        <p class="sol-rail__label">方案中心</p>
        <ol class="sol-rail__list">
          <li><a href="#board"><span class="sol-rail__no">01</span>实时比分看板</a></li>
          <li><a href="#cycle"><span class="sol-rail__no">02</span>主客场表现周期</a></li>
          <li><a href="#pricing"><span class="sol-rail__no">03</span>赛季报价与服务范围</a></li>
          <li><a href="#reports"><span class="sol-rail__no">04</span>赛后战报与周期报告</a></li>
          <li><a href="#mobile"><span class="sol-rail__no">05</span>手机版与机构版</a></li>
          <li><a href="#onboard"><span class="sol-rail__no">06</span>接入流程</a></li>
        </ol>
      </aside>

      <div class="sol-flow">

        <section id="board" class="sol-sec" data-reveal>
          <header class="sol-sec__head">
            <span class="sol-no">01</span>
            <h2>实时比分看板</h2>
            <p>打开就是当天的场次，不用先到处找。项目、比分、打到哪一步，一屏铺完。</p>
          </header>

          <div class="sol-grid-2">
            <div class="sol-copy">
              <p>看板常驻足球、篮球、排球、田径等 12 个项目。每个比赛日平均有 1,800 场以上的赛事在这里跑，从数据采集到页面显示的平均间隔是 8 秒，你滚一次屏，基本就是最新的一版。</p>
              <h3>看板上有哪些字段</h3>
              <ul class="sol-fields">
                <li>
                  <span class="sol-fields__k">比赛项目与轮次</span>
                  <span class="sol-fields__v">同一轮的场次并列排开，不会埋在二级页面里</span>
                </li>
                <li>
                  <span class="sol-fields__k">对阵双方与当前比分</span>
                  <span class="sol-fields__v">数字走等宽字宽，比分翻动时位置不跳</span>
                </li>
                <li>
                  <span class="sol-fields__k">比赛阶段与净时</span>
                  <span class="sol-fields__v">上半场、下半场、加时还是已结束，一眼分清</span>
                </li>
                <li>
                  <span class="sol-fields__k">关键事件时间点</span>
                  <span class="sol-fields__v">进球、换人、判罚按分钟落位，不必回翻</span>
                </li>
                <li>
                  <span class="sol-fields__k">当日进行中的场次条数</span>
                  <span class="sol-fields__v">头部信息条实时显示，随时知道今天还剩什么</span>
                </li>
              </ul>
            </div>
            <figure class="sol-figure">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="抽象的数据流轨迹穿过网格，青绿色光点沿路径移动" loading="lazy" decoding="async">
            </figure>
          </div>
        </section>

        <section id="cycle" class="sol-sec" data-reveal>
          <header class="sol-sec__head">
            <span class="sol-no">02</span>
            <h2>主客场表现周期</h2>
            <p>同一支队，在主场和客场常常是两副样子。KOK 主客场表现周期把这两条线拉到一起看。</p>
          </header>

          <div class="sol-cycle__top">
            <figure class="sol-radar">
              <svg viewBox="0 0 320 320" role="img" aria-label="主客场六个维度指标对比雷达图，主场整体靠外，客场在进攻与末段表现上明显收窄">
                <g fill="none" stroke="#5C6884" stroke-width="1" stroke-opacity=".55">
                  <polygon points="160,123.7 191.44,141.85 191.44,178.15 160,196.3 128.56,178.15 128.56,141.85"/>
                  <polygon points="160,87.4 222.87,123.7 222.87,196.3 160,232.6 97.13,196.3 97.13,123.7"/>
                  <polygon points="160,50 255.26,105 255.26,215 160,270 64.74,215 64.74,105"/>
                  <line x1="160" y1="160" x2="160" y2="50"/>
                  <line x1="160" y1="160" x2="255.26" y2="105"/>
                  <line x1="160" y1="160" x2="255.26" y2="215"/>
                  <line x1="160" y1="160" x2="160" y2="270"/>
                  <line x1="160" y1="160" x2="64.74" y2="215"/>
                  <line x1="160" y1="160" x2="64.74" y2="105"/>
                </g>
                <polygon points="160,61 231.45,118.75 240.98,206.75 160,226 83.79,204 93.32,121.5"
                         fill="#17C3A2" fill-opacity=".16" stroke="#17C3A2" stroke-width="2"/>
                <polygon points="160,94 240.98,113.25 212.39,190.25 160,248 112.37,187.5 98.08,124.25"
                         fill="#5B4BE0" fill-opacity=".16" stroke="#5B4BE0" stroke-width="2" stroke-dasharray="5 4"/>
              </svg>
              <figcaption>
                <span class="sol-legend sol-legend--home">主场</span>
                <span class="sol-legend sol-legend--away">客场</span>
                <span class="sol-legend__note">六个维度：胜率、场均进球、场均失球、控球、定位球、末段表现</span>
              </figcaption>
            </figure>

            <div class="sol-cycle__notes">
              <p>模块按近 10 轮、近 20 轮和整赛季三档输出，主场一条曲线、客场一条曲线，放在同一个坐标系里对比。两档之间的落差，往往比单看总胜率更能说明问题。</p>
              <h3>它能替你回答这些问题</h3>
              <ul class="sol-asks">
                <li>主场那一截数据是真优势，还是撞上连胜期的错觉</li>
                <li>客场丢分集中在赛季哪一段，是开局还是密集赛程</li>
                <li>换帅或轮换之后，两条线有没有再次分开</li>
                <li>赛前做资料时，这支队放在主场该怎么看</li>
              </ul>
            </div>
          </div>

          <div class="sol-filter">
            <div class="filter-bar" data-filter-group="#cycle-panels">
              <button type="button" class="filter-chip" data-filter="all" aria-pressed="true">全部</button>
              <button type="button" class="filter-chip" data-filter="r10">近 10 轮</button>
              <button type="button" class="filter-chip" data-filter="r20">近 20 轮</button>
              <button type="button" class="filter-chip" data-filter="season">整赛季</button>
            </div>
          </div>

          <div class="sol-cycle__panels" id="cycle-panels">
            <article class="sol-cycle__item" data-filter-item data-tags="r10">
              <h3>近 10 轮</h3>
              <p>看最近的拐点。连续几个主场的得分效率、客场是不是刚好碰上一段硬仗，这一档最先反映出来，适合判断球队当下手感。</p>
            </article>
            <article class="sol-cycle__item" data-filter-item data-tags="r20">
              <h3>近 20 轮</h3>
              <p>把中段赛程和密集客场段落单独拎出来比，轮换深度对客场成绩的影响在这一档最明显，也更容易看出教练的客场取舍。</p>
            </article>
            <article class="sol-cycle__item" data-filter-item data-tags="season">
              <h3>整赛季</h3>
              <p>主场与客场的全季曲线并排放在一起，适合赛前做赛季级别的背景铺垫，也适合直接引用到周期报告里。</p>
            </article>
          </div>

          <figure class="sol-figure sol-figure--chart">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深色背景上的双折线走势图与刻度，线条分别为青绿与夜紫" loading="lazy" decoding="async">
          </figure>
        </section>

        <section id="pricing" class="sol-sec sol-price" data-reveal>
          <div class="sol-price__band">
            <span class="sol-no sol-no--hot">03</span>
            <h2>赛季报价与服务范围</h2>
          </div>

          <p class="sol-price__lede">体育赛事 服务范围 报价 在这一栏里一次摊开：四个阶段串起一场比赛从开赛前到赛季收尾的全过程，三档方案按赛季计价，看完这一栏基本就能定。</p>

          <ul class="sol-tiers">
            <li class="sol-tier">
              <div class="sol-tier__name"><span class="sol-tier__badge">基础版</span></div>
              <p class="sol-tier__for">个人球迷、自媒体作者的日常跟踪</p>
              <ul class="sol-tier__has">
                <li>实时比分看板全项目访问</li>
                <li>赛后战报时间轴</li>
                <li>手机版轻量查询</li>
              </ul>
              <p class="sol-tier__price"><span class="num">3,800</span> 元／赛季</p>
            </li>

            <li class="sol-tier sol-tier--pick">
              <div class="sol-tier__name">
                <span class="sol-tier__badge">进阶版</span>
                <span class="sol-tier__tag">多数人从这档开始</span>
              </div>
              <p class="sol-tier__for">需要连续跟踪主客场走势的资深球迷与内容创作者</p>
              <ul class="sol-tier__has">
                <li>基础版全部内容</li>
                <li>主客场表现周期三档输出</li>
                <li>赛季周期报告持续更新</li>
              </ul>
              <p class="sol-tier__price"><span class="num">9,800</span> 元／赛季</p>
            </li>

            <li class="sol-tier">
              <div class="sol-tier__name"><span class="sol-tier__badge">机构版</span></div>
              <p class="sol-tier__for">体育协会、场馆、赛事运营方与内容机构</p>
              <ul class="sol-tier__has">
                <li>进阶版全部内容</li>
                <li>看板字段对接与自定义组合</li>
                <li>赛事素材供稿通道、白皮书优先阅读</li>
              </ul>
              <p class="sol-tier__price"><span class="num">26,000</span> 元／赛季起</p>
            </li>
          </ul>

          <h3 class="sol-price__sub">四个阶段，从开赛前跟到赛季结束</h3>
          <ol class="sol-phases">
            <li>
              <details class="sol-phase">
                <summary>
                  <span class="sol-phase__dot">1</span>
                  <span class="sol-phase__name">赛前资料整理</span>
                  <span class="sol-phase__mark" aria-hidden="true"></span>
                </summary>
                <p>对阵历史、场地与轮次信息、双方近期状态摘要先摆好。开赛前把背景补齐，解说和稿子都不用临时翻资料。</p>
              </details>
            </li>
            <li>
              <details class="sol-phase">
                <summary>
                  <span class="sol-phase__dot">2</span>
                  <span class="sol-phase__name">赛中实时比分</span>
                  <span class="sol-phase__mark" aria-hidden="true"></span>
                </summary>
                <p>12 个项目的比分和关键事件持续推到看板，平均 8 秒一次，同一天多场并行也不会互相挤掉。</p>
              </details>
            </li>
            <li>
              <details class="sol-phase">
                <summary>
                  <span class="sol-phase__dot">3</span>
                  <span class="sol-phase__name">赛后战报</span>
                  <span class="sol-phase__mark" aria-hidden="true"></span>
                </summary>
                <p>一场比赛拆成平均 9 个关键节点，按时间顺序还原走势。想写复盘、想找转折点，顺着节点读下去就行。</p>
              </details>
            </li>
            <li>
              <details class="sol-phase">
                <summary>
                  <span class="sol-phase__dot">4</span>
                  <span class="sol-phase__name">赛季周期分析</span>
                  <span class="sol-phase__mark" aria-hidden="true"></span>
                </summary>
                <p>近 10 轮、近 20 轮与整赛季三档输出主客两条曲线，配合平均每两周更新一期的周期报告，赛季走势有迹可循。</p>
              </details>
            </li>
          </ol>
        </section>

        <section id="reports" class="sol-sec" data-reveal>
          <header class="sol-sec__head">
            <span class="sol-no">04</span>
            <h2>赛后战报与周期报告</h2>
            <p>比赛结束不是终点。当天有战报，两周有周期报告，赛季收尾还有一本白皮书。</p>
          </header>

          <figure class="sol-figure sol-figure--wide">
            <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="横向时间轴抽象图形，节点以橙色光点标注" loading="lazy" decoding="async">
          </figure>

          <div class="sol-report-stats">
            <div>
              <span class="num">3,600</span>
              <span>篇赛后战报已发布</span>
            </div>
            <div>
              <span class="num">420</span>
              <span>期赛季周期报告</span>
            </div>
            <div>
              <span class="num">9</span>
              <span>个关键节点／篇</span>
            </div>
          </div>

          <div class="sol-copy">
            <p>战报按时间轴排，进球、换人、红黄牌、比分变化都落在具体分钟上，一场球的节奏一眼能扫出来。周期报告按赛季阶段发布，平均每两周更新一期，把这段时间的主客场曲线变化、值得留意的队伍和赛程密度讲清楚。</p>
            <p>每个赛季收尾会出一份内容与版本白皮书，目前已经发到第 9 期，赛季整体表现和站点功能更新都在里面，机构版用户可以优先读到。</p>
          </div>
        </section>

        <section id="mobile" class="sol-sec" data-reveal>
          <header class="sol-sec__head">
            <span class="sol-no">05</span>
            <h2>手机版与机构版组合</h2>
            <p>随手查一眼和长期调数据是两种用法，对应的工具也不一样。</p>
          </header>

          <div class="sol-grid-2">
            <div class="sol-copy">
              <h3>手机版：临时查分的那一眼</h3>
              <p>手机版是轻量查询页，页面更小、打开更快，适合在赛场边上、通勤路上随手看比分。它不替代完整看板，但日常盯场次够用。手机版是否单独收费、包含哪些功能，写在答疑中心，想先确认再决定可以去那里翻一下。</p>
              <p>现阶段手机版访问占到整体访问的 68%，多数人是先在手机上看到比分，再到电脑上翻战报和周期报告。</p>

              <h3>机构版：要往自己的看板和报告里放</h3>
              <p>如果你在协会、场馆或赛事运营方，需要把比分字段接进自家看板，或者需要周期报告作为对外内容的素材来源，机构版更合适。看板字段可以按你的栏目组合，素材也能通过内容供稿渠道提交进来，经编辑采用后进入战报或周期报告。</p>
              <p>常见组合是：白天用手机版盯场次，赛季节点用机构版调周期报告和白皮书，两边的数据对得上。</p>
            </div>
            <figure class="sol-figure sol-figure--tall">
              <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="竖版画面，手持设备屏幕上的深色比分界面抽象示意" loading="lazy" decoding="async">
            </figure>
          </div>
        </section>

        <section id="onboard" class="sol-sec" data-reveal>
          <header class="sol-sec__head">
            <span class="sol-no">06</span>
            <h2>接入流程</h2>
            <p>四步走完，从想法到能天天用上。</p>
          </header>

          <ol class="sol-steps">
            <li>
              <span class="sol-step__no">01</span>
              <h3>说清你要跟什么</h3>
              <p>告诉我们你关注哪些项目、赛季周期多长、要不要周期报告。走联系通道，或者在工作日 9:00-18:00 用答疑中心的在线表单，赛事相关问题的首个回复平均 4 小时内给出。</p>
            </li>
            <li>
              <span class="sol-step__no">02</span>
              <h3>对着三档选一个</h3>
              <p>我们按你说的场景对照三档内容给出建议。只日常盯比分，基础版就够；要连着看主客场走势，进阶版更顺手；要把数据接进自家看板，直接谈机构版。</p>
            </li>
            <li>
              <span class="sol-step__no">03</span>
              <h3>拿到看板地址和使用说明</h3>
              <p>确认档位后，看板地址、字段说明和周期模块的读法一并同步给你，不用自己摸索哪个数字代表什么。</p>
            </li>
            <li>
              <span class="sol-step__no">04</span>
              <h3>赛季中途也能调</h3>
              <p>开季后想加项目、加报告，或者想把手机版一起用上，赛季中途都能补。往上调档位不影响已有内容的访问。</p>
            </li>
          </ol>
        </section>

        <section class="sol-next" data-reveal>
          <h2>接下来可以走这几条</h2>
          <ul class="sol-next__list">
            <li><a href="/answers/">手机版怎么收费、包含什么，在答疑中心看<span aria-hidden="true">→</span></a></li>
            <li><a href="/notes/">翻一篇赛后战报，看看时间轴长什么样<span aria-hidden="true">→</span></a></li>
            <li><a href="/usage/">数据能怎么引用、功能范围到哪里，使用指引里写了<span aria-hidden="true">→</span></a></li>
            <li><a href="/connect/">把需求发过来，谈谈怎么配合<span aria-hidden="true">→</span></a></li>
          </ul>
        </section>

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

.page-products {
  --sol-rail: 236px;
  background: var(--night);
  color: var(--mist);
  font-family: var(--font-sans);
  line-height: 1.75;
  overflow-x: clip;
}

.page-products .num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  font-family: var(--font-sans);
  color: var(--snow);
  letter-spacing: -.01em;
}

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

.page-products .sol-hero {
  position: relative;
  padding: 26px 0 48px;
  overflow: hidden;
}

.page-products .sol-hero__glow {
  position: absolute;
  top: -34%;
  right: -22%;
  width: 84%;
  height: 158%;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 68% 42%, rgba(23, 195, 162, .16), transparent 72%),
    repeating-linear-gradient(118deg, rgba(127, 230, 210, .05) 0 1px, transparent 1px 28px);
}

.page-products .sol-hero__grid {
  position: relative;
  display: grid;
  gap: 28px;
}

.page-products .sol-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--teal);
}

.page-products .sol-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ember);
}

.page-products h1 {
  margin: 0 0 16px;
  font-size: clamp(27px, 6.2vw, 46px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.page-products .sol-lede {
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: 15px;
  color: var(--mist);
}

.page-products .sol-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.page-products .sol-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(92, 104, 132, .35);
}

.page-products .sol-hero__facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-products .sol-hero__facts dd {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  color: var(--snow);
}

.page-products .sol-hero__facts dd span {
  margin-left: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
}

.page-products .sol-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--panel-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

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

.page-products .sol-hero__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 主体骨架 ---------- */

.page-products .sol-body {
  padding: 14px 0 76px;
}

.page-products .sol-body__grid {
  display: grid;
  gap: 26px;
}

.page-products .sol-sec {
  padding-bottom: 42px;
}

.page-products .sol-sec + .sol-sec {
  padding-top: 44px;
  border-top: 1px solid rgba(92, 104, 132, .28);
}

.page-products .sol-sec__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin-bottom: 22px;
}

.page-products .sol-no {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  letter-spacing: -.02em;
}

.page-products .sol-no--hot {
  color: var(--ember);
}

.page-products .sol-sec__head h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(21px, 3.8vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}

.page-products .sol-sec__head p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
}

.page-products .sol-grid-2 {
  display: grid;
  gap: 24px;
}

.page-products .sol-copy h3 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-copy h3:first-child {
  margin-top: 0;
}

.page-products .sol-copy p {
  margin: 0 0 14px;
  font-size: 14px;
}

/* ---------- 看板字段 ---------- */

.page-products .sol-fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-fields li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(92, 104, 132, .42);
}

.page-products .sol-fields__k {
  font-size: 14px;
  font-weight: 600;
  color: var(--snow);
}

.page-products .sol-fields__v {
  font-size: 13px;
  color: var(--mist);
}

/* ---------- 周期模块 ---------- */

.page-products .sol-cycle__top {
  display: grid;
  gap: 22px;
  margin-bottom: 24px;
}

.page-products .sol-radar {
  margin: 0;
  padding: 14px;
  background: var(--panel-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .sol-radar svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.page-products .sol-radar figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mist);
}

.page-products .sol-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--snow);
}

.page-products .sol-legend::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.page-products .sol-legend--home::before {
  background: var(--teal);
}

.page-products .sol-legend--away::before {
  background: var(--violet);
}

.page-products .sol-legend__note {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--rule);
}

.page-products .sol-cycle__notes p {
  margin: 0 0 14px;
  font-size: 14px;
}

.page-products .sol-cycle__notes h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.page-products .sol-asks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-asks li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(92, 104, 132, .22);
}

.page-products .sol-asks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.page-products .sol-filter {
  margin: 0 0 18px;
}

.page-products .sol-cycle__panels {
  display: grid;
  gap: 12px;
}

.page-products .sol-cycle__item {
  padding: 18px 20px;
  background: var(--panel);
  border-left: 3px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.page-products .sol-cycle__item:nth-child(2) {
  border-left-color: var(--violet);
}

.page-products .sol-cycle__item:nth-child(3) {
  border-left-color: var(--teal-soft);
}

.page-products .sol-cycle__item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-cycle__item p {
  margin: 0;
  font-size: 14px;
}

.page-products .sol-figure--chart {
  max-width: 620px;
  margin-top: 26px;
}

/* ---------- 第 3 栏 · 报价面板 ---------- */

.page-products .sol-sec.sol-price {
  position: relative;
  padding: 26px 20px 30px;
  border-top: 0;
  border-left: 4px solid var(--ember);
  background: linear-gradient(158deg, var(--panel) 0%, var(--panel-deep) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-products .sol-price__band {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(255, 90, 43, .42);
}

.page-products .sol-price__band h2 {
  margin: 0;
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 700;
}

.page-products .sol-price__lede {
  margin: 0 0 24px;
  max-width: 66ch;
  font-size: 14.5px;
}

.page-products .sol-tiers {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.page-products .sol-tier {
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(92, 104, 132, .34);
}

.page-products .sol-tier:first-child {
  padding-top: 6px;
}

.page-products .sol-tier--pick {
  padding-left: 16px;
  border-left: 3px solid var(--teal);
}

.page-products .sol-tier__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-products .sol-tier__badge {
  font-size: 17px;
  font-weight: 700;
  color: var(--snow);
}

.page-products .sol-tier__tag {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--night);
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.page-products .sol-tier__for {
  margin: 0;
  font-size: 13.5px;
  color: var(--mist);
}

.page-products .sol-tier__has {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.page-products .sol-tier__has li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  color: var(--mist);
}

.page-products .sol-tier__has li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--rule);
}

.page-products .sol-tier__price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.page-products .sol-price__sub {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-phases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-phase {
  border-bottom: 1px solid rgba(92, 104, 132, .3);
}

.page-products .sol-phase summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--snow);
}

.page-products .sol-phase summary::-webkit-details-marker {
  display: none;
}

.page-products .sol-phase__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
}

.page-products .sol-phase__name {
  flex: 1 1 auto;
}

.page-products .sol-phase__mark {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.page-products .sol-phase__mark::before,
.page-products .sol-phase__mark::after {
  content: "";
  position: absolute;
  background: var(--mist);
  transition: transform .22s var(--ease);
}

.page-products .sol-phase__mark::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.page-products .sol-phase__mark::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.page-products .sol-phase[open] .sol-phase__mark::after {
  transform: scaleY(0);
}

.page-products .sol-phase p {
  margin: 0 0 16px 38px;
  font-size: 14px;
}

/* ---------- 战报与报告 ---------- */

.page-products .sol-figure--wide img {
  aspect-ratio: 7 / 3;
  object-fit: cover;
}

.page-products .sol-report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(92, 104, 132, .3);
  border-bottom: 1px solid rgba(92, 104, 132, .3);
}

.page-products .sol-report-stats > div {
  display: grid;
  gap: 4px;
}

.page-products .sol-report-stats .num {
  font-size: 26px;
  line-height: 1;
  color: var(--snow);
}

.page-products .sol-report-stats span:last-child {
  font-size: 12.5px;
  color: var(--mist);
}

/* ---------- 手机版 / 机构版 ---------- */

.page-products .sol-figure--tall {
  max-width: 300px;
  margin: 0 auto;
}

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

/* ---------- 接入流程 ---------- */

.page-products .sol-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .sol-steps li {
  position: relative;
  padding: 18px 0 18px 52px;
}

.page-products .sol-steps li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(92, 104, 132, .34);
}

.page-products .sol-steps li:last-child::before {
  height: 34px;
}

.page-products .sol-step__no {
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  background: var(--night);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
}

.page-products .sol-steps h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.page-products .sol-steps p {
  margin: 0;
  font-size: 14px;
}

/* ---------- 收尾 ---------- */

.page-products .sol-next {
  margin-top: 8px;
  padding: 28px 20px 30px;
  background: var(--panel-deep);
  border-top: 2px solid var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-products .sol-next h2 {
  margin: 0 0 16px;
  font-size: clamp(19px, 3.4vw, 23px);
  font-weight: 700;
}

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

.page-products .sol-next__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--snow);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 104, 132, .3);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-products .sol-next__list a span {
  color: var(--teal);
}

.page-products .sol-next__list a:hover,
.page-products .sol-next__list a:focus-visible {
  color: var(--teal);
  padding-left: 6px;
}

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

@media (min-width: 720px) {
  .page-products .sol-hero {
    padding: 44px 0 64px;
  }

  .page-products .sol-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: 46px;
  }

  .page-products .sol-body__grid {
    gap: 34px;
  }

  .page-products .sol-grid-2 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 34px;
    align-items: start;
  }

  .page-products .sol-cycle__top {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .page-products .sol-figure--tall {
    margin: 0;
  }

  .page-products .sol-sec.sol-price {
    padding: 30px 28px 34px;
  }

  .page-products .sol-next {
    padding: 30px 28px 32px;
  }
}

@media (min-width: 960px) {
  .page-products .sol-body__grid {
    grid-template-columns: var(--sol-rail) minmax(0, 1fr);
    gap: 56px;
  }

  .page-products .sol-rail {
    position: sticky;
    top: 86px;
    padding: 0 0 0 18px;
    border-left: 2px solid rgba(92, 104, 132, .34);
  }

  .page-products .sol-rail__list {
    flex-direction: column;
    gap: 2px;
  }

  .page-products .sol-rail__list a {
    justify-content: flex-start;
    padding: 9px 10px 9px 12px;
    white-space: normal;
    line-height: 1.45;
    border: 0;
    border-left: 2px solid transparent;
  }

  .page-products .sol-rail__list a:hover,
  .page-products .sol-rail__list a:focus-visible {
    border-left-color: var(--teal);
    background: rgba(23, 195, 162, .07);
  }

  .page-products .sol-tier {
    grid-template-columns: 112px minmax(0, .9fr) minmax(0, 1.25fr) 160px;
    gap: 20px;
    align-items: start;
  }

  .page-products .sol-tier--pick {
    padding-left: 18px;
  }

  .page-products .sol-cycle__item {
    padding: 20px 24px;
  }
}

@media (max-width: 719px) {
  .page-products .sol-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .sol-hero__facts dd {
    font-size: 20px;
  }

  .page-products .sol-rail {
    padding: 14px 0;
    border-top: 1px solid rgba(92, 104, 132, .3);
    border-bottom: 1px solid rgba(92, 104, 132, .3);
  }

  .page-products .sol-rail__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .page-products .sol-rail__list li {
    flex: 0 0 auto;
  }

  .page-products .sol-rail__list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--mist);
    text-decoration: none;
    border: 1px solid rgba(92, 104, 132, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .sol-next__list a,
  .page-products .sol-phase__mark::before,
  .page-products .sol-phase__mark::after {
    transition: none;
  }
}