.page-products {
  --tree-rail: 0.6875rem;
  --node-pad: 2.5rem;
}

.page-products .hero {
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.page-products .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.page-products .hero__lead h1 {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 7.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}

.page-products .hero__text {
  margin: 1.15rem 0 0;
  max-width: var(--measure);
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.8);
}

.page-products .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.page-products .hero__figure {
  order: -1;
}

.page-products .figure__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--deck);
}

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

.page-products .figure__caption {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--mist);
  text-transform: uppercase;
}

.page-products .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--line-soft);
}

.page-products .stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0.9rem 1.15rem;
  background: var(--ink);
}

.page-products .stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .stat__label {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--mist);
}

/* ---------- 技能树 ---------- */
.page-products .section-lede {
  max-width: 60ch;
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.72);
}

.page-products .tree {
  position: relative;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .tree::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 2.5rem;
  left: var(--tree-rail);
  width: 1px;
  background: linear-gradient(180deg, var(--cyan-line), rgba(244, 240, 230, 0.12) 55%, transparent);
}

.page-products .tree__node {
  position: relative;
  padding: 0 0 1.75rem var(--node-pad);
  transition: background-color 0.25s ease;
}

.page-products .tree__dot {
  position: absolute;
  left: calc(var(--tree-rail) - 5px);
  top: 0.42rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--cyan-line);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.page-products .tree__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.page-products .tree__code {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-products .tree__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .tree__text {
  margin: 0.55rem 0 0;
  max-width: var(--measure);
  font-size: 0.93rem;
  line-height: 1.82;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .tree__meta {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .tree__node:hover .tree__dot,
.page-products .tree__node:focus-within .tree__dot {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(41, 242, 207, 0.16);
  transform: scale(1.12);
}

.page-products .tree__node:hover .tree__title,
.page-products .tree__node:focus-within .tree__title {
  color: var(--cyan);
}

/* ---------- 双端对照 ---------- */
.page-products .devices__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .devices__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products .device {
  position: relative;
  padding: 1.35rem 1.15rem 1.5rem;
  background: var(--night);
  border: 1px solid var(--line);
  border-top-width: 3px;
}

.page-products .device--phone {
  border-top-color: var(--cyan);
}

.page-products .device--desktop {
  border-top-color: var(--orange);
}

.page-products .device__head h3 {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-products .device__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.page-products .device__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(244, 240, 230, 0.78);
}

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

.page-products .device--desktop .device__list li::before {
  background: var(--orange);
}

.page-products .device__note {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* ---------- 历史交锋 ---------- */
.page-products .h2h__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.page-products .h2h__lead h2 {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-products .h2h__text {
  margin: 1rem 0 0;
  max-width: var(--measure);
  font-size: 0.94rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .marks {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1rem;
  background: rgba(16, 43, 74, 0.6);
  border-left: 2px solid var(--laterite);
}

.page-products .marks p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(244, 240, 230, 0.76);
}

.page-products .marks a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
}

.page-products .h2h__figure {
  margin: 1.5rem 0 0;
}

.page-products .h2h__aside {
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--deck);
  border: 1px solid var(--cyan-line);
}

.page-products .h2h__aside-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-products .h2h__track {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0 0 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-products .h2h__track:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .h2h__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 5.4rem;
  padding: 0.75rem 0.7rem;
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.page-products .h2h__item:hover {
  border-color: var(--cyan-line);
  transform: translateY(-2px);
}

.page-products .h2h__order {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
}

.page-products .h2h__venue {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .h2h__kind {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-products .h2h__facts {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .h2h__fact dt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .h2h__fact dd {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(244, 240, 230, 0.86);
}

.page-products .h2h__aside .btn {
  margin-top: 1.2rem;
  width: 100%;
  justify-content: center;
}

/* ---------- 收藏与前瞻 ---------- */
.page-products .bookmarks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .bookmark-card {
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--night);
}

.page-products .bookmark-card h3 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
}

.page-products .bookmark-card p {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: rgba(244, 240, 230, 0.75);
}

.page-products .rhythm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.4rem 1.15rem;
  background: linear-gradient(115deg, rgba(255, 106, 42, 0.14), rgba(16, 43, 74, 0.5) 62%);
  border: 1px solid rgba(255, 106, 42, 0.32);
}

.page-products .rhythm__mark {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.page-products .rhythm__mark .num--lg {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--orange);
}

.page-products .rhythm__unit {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.page-products .rhythm__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
}

.page-products .rhythm__body p {
  margin: 0.5rem 0 0;
  max-width: var(--measure);
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.8);
}

.page-products .rhythm__link {
  align-self: end;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
  padding-bottom: 0.2rem;
}

/* ---------- 资料下载 ---------- */
.page-products .packs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .pack {
  padding: 1.25rem 1.1rem 1.35rem;
  background: var(--tag);
  color: var(--black);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-products .pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(3, 7, 13, 0.9);
}

.page-products .pack__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--black);
}

.page-products .pack__desc {
  margin: 0.55rem 0 0;
  font-size: 0.87rem;
  line-height: 1.78;
  color: rgba(3, 7, 13, 0.78);
}

.page-products .pack__meta {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(3, 7, 13, 0.18);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(3, 7, 13, 0.6);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.page-products .pack:hover .pack__meta {
  opacity: 1;
}

.page-products .packs__figure {
  margin: 1.5rem 0 0;
}

.page-products .packs__foot {
  margin: 1.15rem 0 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.76);
}

/* ---------- 使用路径 ---------- */
.page-products .path__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  align-items: start;
}

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

.page-products .path__step {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.85rem;
  padding: 1.1rem 1rem;
  background: var(--ink);
  transition: background-color 0.25s ease;
}

.page-products .path__step:hover {
  background: var(--night);
}

.page-products .path__num {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange);
  line-height: 1.4;
}

.page-products .path__step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--paper);
}

.page-products .path__step p {
  margin: 0.4rem 0 0;
  font-size: 0.87rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.75);
}

.page-products .path__cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: 1.25rem 1.1rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--night);
}

.page-products .path__cta p {
  margin: 0;
  max-width: 64ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .path__cta a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
}

.page-products .path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

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

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

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

  .page-products .rhythm {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
  }

  .page-products .rhythm__link {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .page-products {
    --tree-rail: 16.5rem;
    --node-pad: 0rem;
  }

  .page-products .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .page-products .hero__figure {
    order: 0;
    margin-top: 0.5rem;
  }

  .page-products .tree__node {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3rem;
    padding: 0 0 2.25rem 0;
  }

  .page-products .tree__dot {
    left: calc(16.5rem - 5px);
    top: 0.55rem;
  }

  .page-products .tree__head {
    padding-right: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .page-products .tree__title {
    font-size: 1.55rem;
  }

  .page-products .tree__text {
    margin-top: 0;
    font-size: 0.95rem;
  }

  .page-products .devices__layout {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .page-products .devices__figure {
    position: sticky;
    top: 7rem;
  }

  .page-products .h2h__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .page-products .h2h__aside {
    position: sticky;
    top: 7rem;
  }

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

  .page-products .rhythm {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
    padding: 1.6rem 1.75rem;
  }

  .page-products .rhythm__link {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  .page-products .path__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .page-products .path__figure {
    margin-top: 0.35rem;
  }

  .page-products .path__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 1.75rem;
  }

  .page-products .path__actions {
    margin-top: 0;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tree__dot,
  .page-products .tree__title,
  .page-products .pack,
  .page-products .pack__meta,
  .page-products .h2h__item,
  .page-products .path__step {
    transition: none;
  }

  .page-products .pack:hover,
  .page-products .h2h__item:hover {
    transform: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

等一下。让我核对一下输出格式要求。

要求：严格按照标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：


...

...

我只应该输出这两个标记。我刚写了 `<<<PAGE_CSS_END>>>` 和 `<<<END>>>`，这是错误的。我需要重新输出，不要这些额外的标记。

另外检查一下技术问题：
- `.page-products .figure__caption` — 共享类，我定义了，但作用域限定在 .page-products 下，OK。
- `.page-products .num--lg` — 我用了 `.rhythm__mark .num--lg`，共享类已在 site_kit 中，没问题。
- var() 只用已有变量：--cyan, --paper, --ink, --night, --deck, --mist, --line, --line-soft, --cyan-line, --orange, --laterite, --tag, --black, --measure, --font-display, --font-mono。都是 site_kit 中存在的。✓
- 没有 :root/html/body/.site-header/.site-footer/.site-nav。✓
- 图片 5 张，符合 target 5，至少 1 张。✓
- 图片尺寸与 width/height 一致：1600x900 ✓，900x1200 ✓，1600x1000 ✓，1200x800 ✓，1200x800 ✓。src 格式 `{zhanqunpic:h:900w:1600}` 与 width=1600 height=900 一致。✓
- 首屏主图不加 lazy，其余加 loading="lazy" decoding="async"。✓
- 面包屑 ✓
- 只有一个 h1 ✓
- 锚点：#service-tree, #devices, #h2h, #bookmark, #packs, #path — 都存在。✓ hero 里的 href="#service-tree" ✓
- 站内链接只用合法 route：/, /information/, /help-center/, /mission/, /connect/。✓
- 可见数字都是真实文本。✓
- 没有 data-* 死属性使用（我没用任何 data-*）。这可以，因为交互都是 CSS hover。不过 site_kit 里的共享钩子 data-year 之类由页脚处理，页面主体不需要。OK。
- 品牌名"浩瀚体育"出现在正文中（hero__text、h2h__text、路径区）。✓
- 关键词"浩瀚体育老用户回访历史交锋"在 h2h__text 出现一次 ✓；"长期跟一支球队的球迷资料下载"在 packs__foot 出现一次 ✓；"新手看浩瀚体育赛事从哪开始"在 path__cta 出现一次 ✓（分配给帮助中心页的，但这里自然引用了——规则说关键词完整词组按页分配，"新手看浩瀚体育赛事从哪开始"用于帮助中心。我在本页用了完整短语，可能违反分配。让我改掉，改成"新手上手路径"之类的自然表达。）

我修改 path__cta 中那句，避免使用分配给他页的完整关键词。

改为：「帮助中心按账号、收藏、前瞻、下载和纠错五组问题整理，刚开始看球的人可以在那里找到更细的说明。」

另外 "赛事功能地图" 之类的短语没用到，没关系。

还有一处："手机端首屏直接能看到收藏入口" — OK。

"content_constraints" 说历史交锋回访强调登录同步和换设备不丢，但不承诺替用户保存未登录状态。我没写未登录的承诺。✓

再检查重复：连续 8 个汉字重复不超过 2 次。"换设备重新登录"出现几次：tree 节点 04、h2h__facts、h2h__text。三次"换设备重新登录"是 7 个字。加上前后文就不完全一样。有点风险但可以接受？"换设备重新登录"这 7 字，规则是 8 个以上汉字。7 字不触发。但 h2h__text 有"换了手机、换了电脑，重新登录之后"以及"换设备重新登录，翻到哪一段还在那儿"…… 让我稍微变化措辞避免重复感。

h2h__text 第二段：改成"这些都不用重新找一遍：登录状态下，回访记录跟着账号走。换了手机、换了电脑，重新登录之后，上次停在哪个赛季、收藏了哪几场，都还在原处。"

已经在上面这么写了，第二段没有"换设备重新登录"。✓
h2h__facts 里"换设备重新登录即可接上"。tree 04"换设备重新登录，翻到哪一段还在那儿"。两处相同短语，可接受。

好，重新输出，去掉多余标记，并修正 path__cta。

另外 hero 图 caption "夜间通道 / 入口之后才是整场比赛" 好。

最后再确认 .tree 的移动端布局：.tree::before left: var(--tree-rail)=0.6875rem；.tree__dot left: calc(0.6875rem - 5px)。圆点宽 11px，中心在 0.6875rem+0.5px，线在 0.6875rem。基本对齐。✓

桌面：--tree-rail: 16.5rem；grid 列 15rem + gap 3rem，所以第二列起点 18rem，第一列右边缘 15rem，线在 16.5rem，居中于间隙。✓ 圆点 left calc(16.5rem - 5px) ✓。

好，输出。
<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">赛事功能</span>
    </nav>
  </div>

  <section class="hero">
    <div class="wrap hero__grid">
      <div class="hero__lead">
        <p class="index-label">功能路径 / 01 — 05</p>
        <h1>从第一次收藏，到长期跟一支球队</h1>
        <p class="hero__text">
          浩瀚体育中文专区把入口、收藏、赛前前瞻、历史交锋回访和资料下载连成一条能走通的路线。
          你不用先弄明白所有功能——第一次看球的人、每周固定跟队的人、隔几个月回来翻旧账的人，
          走的都是同一条路，只是从不同的位置进来。
        </p>
        <div class="hero__actions">
          <a class="btn btn--solid" href="#service-tree">看完整路径</a>
          <a class="btn btn--ghost" href="/help-center/">从哪里开始</a>
        </div>
      </div>
      <figure class="figure figure--wide hero__figure">
        <div class="figure__frame">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场通道的低角度灯光，通向看台的入口">
        </div>
        <figcaption class="figure__caption">夜间通道 / 入口之后才是整场比赛</figcaption>
      </figure>
    </div>

    <div class="wrap">
      <ul class="stats">
        <li class="stat">
          <span class="stat__num">18</span>
          <span class="stat__label">个联赛与杯赛在库</span>
        </li>
        <li class="stat">
          <span class="stat__num">320</span>
          <span class="stat__label">支球队可查资料</span>
        </li>
        <li class="stat">
          <span class="stat__num">9</span>
          <span class="stat__label">个赛季的交锋记录</span>
        </li>
        <li class="stat">
          <span class="stat__num">48</span>
          <span class="stat__label">小时提前发布前瞻</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section" id="service-tree">
    <div class="wrap">
      <div class="section-head">
        <p class="index-label">功能路径</p>
        <h2>五个节点，走完一次完整的赛前与回看</h2>
        <p class="section-lede">
          从进门到把资料留在手里，每一步都接着下一步。悬停任意节点，可以看清它接住的是什么、又交出去什么。
        </p>
      </div>

      <ol class="tree">
        <li class="tree__node">
          <span class="tree__dot" aria-hidden="true"></span>
          <div class="tree__head">
            <span class="tree__code num">01</span>
            <h3 class="tree__title">入口</h3>
          </div>
          <div class="tree__body">
            <p class="tree__text">
              手机和电脑各有独立入口，打开后的首个界面也不一样。手机上先把收藏和前瞻放在手边，
              电脑上先把宽屏对照和交锋回放摊开。选错一端不会出错，只是绕远。
            </p>
            <p class="tree__meta">衔接节点：收藏、赛前前瞻</p>
          </div>
        </li>

        <li class="tree__node">
          <span class="tree__dot" aria-hidden="true"></span>
          <div class="tree__head">
            <span class="tree__code num">02</span>
            <h3 class="tree__title">收藏</h3>
          </div>
          <div class="tree__body">
            <p class="tree__text">
              赛程、球队、专题三类对象都能收进收藏。收藏过什么，下一场该看什么就写在眼前，
              不用每次重新翻联赛找队名。手机端首屏直接就能看到收藏入口。
            </p>
            <p class="tree__meta">衔接节点：赛前前瞻、历史交锋回访</p>
          </div>
        </li>

        <li class="tree__node">
          <span class="tree__dot" aria-hidden="true"></span>
          <div class="tree__head">
            <span class="tree__code num">03</span>
            <h3 class="tree__title">赛前前瞻</h3>
          </div>
          <div class="tree__body">
            <p class="tree__text">
              焦点场次的前瞻在开赛前 48 小时发布，写双方近况和这场值得看的地方。
              收藏了球队的人顺着收藏就能找到对应前瞻，赛前三小时打开手机也来得及读完。
            </p>
            <p class="tree__meta">衔接节点：历史交锋回访</p>
          </div>
        </li>

        <li class="tree__node">
          <span class="tree__dot" aria-hidden="true"></span>
          <div class="tree__head">
            <span class="tree__code num">04</span>
            <h3 class="tree__title">历史交锋回访</h3>
          </div>
          <div class="tree__body">
            <p class="tree__text">
              两支球队以前怎么踢的，可以按主客场拆开看，也可以只看最近 6 次，或者顺着球队时间轴往前推。
              登录后回访记录会同步，换设备重新登录，翻到哪一段还在那儿。
            </p>
            <p class="tree__meta">衔接节点：资料下载</p>
          </div>
        </li>

        <li class="tree__node">
          <span class="tree__dot" aria-hidden="true"></span>
          <div class="tree__head">
            <span class="tree__code num">05</span>
            <h3 class="tree__title">球迷资料下载</h3>
          </div>
          <div class="tree__body">
            <p class="tree__text">
              球队资料包、赛程卡片、交锋手册三类文件，按月更新。出差路上下到手机里，
              回家在电脑上再取一次，拿到的都是最新那一版。
            </p>
            <p class="tree__meta">衔接节点：回到入口，进入下一个赛季</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section devices" id="devices">
    <div class="wrap">
      <div class="section-head">
        <p class="index-label">双端对照</p>
        <h2>手机端和电脑端，处理的是两件不同的事</h2>
      </div>

      <div class="devices__layout">
        <figure class="figure figure--tall devices__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机屏幕上的抽象收藏卡片与前瞻条目，数据线发光" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">手机端 / 收藏与前瞻在手边</figcaption>
        </figure>

        <div class="devices__pair">
          <article class="device device--phone">
            <header class="device__head">
              <span class="tag tag--cyan">手机端</span>
              <h3>等在口袋里，随时打开</h3>
            </header>
            <ul class="device__list">
              <li>收藏入口直接放在首屏，赛程、球队、专题一次点进去</li>
              <li>赛前前瞻随收藏走，开赛前 48 小时发布后马上能读</li>
              <li>2022 年完成独立适配，常见 4G 网络下主要入口 1.8 秒内加载完成</li>
              <li>等车、午休、进场前十分钟，都能顺手翻完一场的看点</li>
            </ul>
            <p class="device__note">适合：碎片时间跟进度、开赛前临时补课</p>
          </article>

          <article class="device device--desktop">
            <header class="device__head">
              <span class="tag tag--laterite">电脑端</span>
              <h3>摊开来，一次看全</h3>
            </header>
            <ul class="device__list">
              <li>宽屏数据对照，两支球队的近况可以并排放在同一屏</li>
              <li>历史交锋回访在宽屏上更好用，主客场拆分与球队时间轴一次看全</li>
              <li>资料包适合在电脑上整理归档、打印赛程卡片</li>
              <li>换设备登录后，之前在手机上收的对象照样出现在列表里</li>
            </ul>
            <p class="device__note">适合：赛前做功课、整理一个赛季的资料</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section h2h" id="h2h">
    <div class="wrap h2h__grid">
      <div class="h2h__lead">
        <p class="index-label">历史交锋回访</p>
        <h2>翻回去看，才有底气和人聊这场球</h2>
        <p class="h2h__text">
          两支球队碰上之前，先知道上回是怎么踢的，看前瞻就不容易被带着走。浩瀚体育老用户回访历史交锋时，
          主客场可以拆开对照，最近 6 次交锋按时间倒序排开，球队时间轴则把更早的场次拉成一条线。
        </p>
        <p class="h2h__text">
          这些都不用重新找一遍：登录状态下，回访记录跟着账号走。换了手机、换了电脑，
          重新登录之后，上次停在哪个赛季、存了哪几场，都还在原处。
        </p>

        <div class="marks">
          <span class="tag tag--outline">场次牌面记录</span>
          <p>每场比赛的红黄牌情况按场次归档，回看时能对上号。完整记录在<a href="/information/">赛况情报</a>持续更新。</p>
        </div>

        <figure class="figure figure--wide h2h__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="宽屏桌面上摊开的抽象交锋数据表与球队时间轴，等宽数字清晰" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">宽屏对照 / 主客场拆分与球队时间轴</figcaption>
        </figure>
      </div>

      <aside class="h2h__aside">
        <h3 class="h2h__aside-title">最近 6 次交锋 · 横向滑动</h3>
        <ol class="h2h__track" tabindex="0" aria-label="最近六次交锋记录，可横向滑动查看">
          <li class="h2h__item">
            <span class="h2h__order num">01</span>
            <span class="h2h__venue">主场</span>
            <span class="h2h__kind">联赛</span>
          </li>
          <li class="h2h__item">
            <span class="h2h__order num">02</span>
            <span class="h2h__venue">客场</span>
            <span class="h2h__kind">联赛</span>
          </li>
          <li class="h2h__item">
            <span class="h2h__order num">03</span>
            <span class="h2h__venue">主场</span>
            <span class="h2h__kind">杯赛</span>
          </li>
          <li class="h2h__item">
            <span class="h2h__order num">04</span>
            <span class="h2h__venue">客场</span>
            <span class="h2h__kind">联赛</span>
          </li>
          <li class="h2h__item">
            <span class="h2h__order num">05</span>
            <span class="h2h__venue">主场</span>
            <span class="h2h__kind">联赛</span>
          </li>
          <li class="h2h__item">
            <span class="h2h__order num">06</span>
            <span class="h2h__venue">客场</span>
            <span class="h2h__kind">杯赛</span>
          </li>
        </ol>
        <dl class="h2h__facts">
          <div class="h2h__fact">
            <dt>查看方式</dt>
            <dd>主客场拆分 / 最近 6 次 / 球队时间轴</dd>
          </div>
          <div class="h2h__fact">
            <dt>跨设备</dt>
            <dd>登录后同步，换设备重新登录即可接上</dd>
          </div>
          <div class="h2h__fact">
            <dt>记录范围</dt>
            <dd>近 9 个赛季的交锋记录</dd>
          </div>
        </dl>
        <a class="btn btn--quiet" href="/help-center/">回访没接上？看帮助中心</a>
      </aside>
    </div>
  </section>

  <section class="section bookmarks" id="bookmark">
    <div class="wrap">
      <div class="section-head">
        <p class="index-label">收藏与赛前前瞻</p>
        <h2>把要追的东西先收好，比赛日就不用翻</h2>
        <p class="section-lede">
          收藏不是往篮子里堆东西，而是给下一场比赛提前排好顺序。收三类对象，等一个时间点。
        </p>
      </div>

      <div class="bookmarks__grid">
        <article class="panel panel--hover bookmark-card">
          <span class="tag tag--cyan">赛程</span>
          <h3>一场一场收</h3>
          <p>把打算看的场次收进来，开赛时间、对阵和所属轮次都在同一处，跟着收藏走就不会错过。</p>
        </article>
        <article class="panel panel--hover bookmark-card">
          <span class="tag tag--cyan">球队</span>
          <h3>收自己跟的那支</h3>
          <p>收了球队，赛程、前瞻、资料包都围着它排序。长期跟一支球队的人，只用维护这一条收藏。</p>
        </article>
        <article class="panel panel--hover bookmark-card">
          <span class="tag tag--cyan">专题</span>
          <h3>收一个话题</h3>
          <p>判罚、德比、赛季走势这类专题也能收，专题更新时会重新回到你的列表里。</p>
        </article>
      </div>

      <div class="rhythm">
        <div class="rhythm__mark">
          <span class="num num--lg">48</span>
          <span class="rhythm__unit">小时</span>
        </div>
        <div class="rhythm__body">
          <h3>赛前 48 小时，前瞻到手</h3>
          <p>
            焦点场次的前瞻在开赛前 48 小时发布，写双方近况、关键位置和这场值得看的地方。
            手上事情多的人可以先收着，等开赛前一晚再读，节奏也不会乱。
          </p>
        </div>
        <a class="rhythm__link" href="/information/">看近期前瞻与更新</a>
      </div>
    </div>
  </section>

  <section class="section packs" id="packs">
    <div class="wrap">
      <div class="section-head">
        <p class="index-label">球迷资料下载</p>
        <h2>长期跟一支球队，资料得能带走</h2>
        <p class="section-lede">
          手机换成新机、办公室换了电脑，跟队的东西不该跟着丢。三类文件按月更新，取到的总是当前版本。
        </p>
      </div>

      <div class="packs__grid">
        <article class="paper pack">
          <span class="tag tag--laterite">长期跟队</span>
          <h3 class="pack__title">球队资料包</h3>
          <p class="pack__desc">阵容构成、赛季走势、常用对阵关系整理成册，适合在赛季开始前通读一遍。</p>
          <p class="pack__meta">文件类型：PDF · 按月更新</p>
        </article>
        <article class="paper pack">
          <span class="tag tag--laterite">长期跟队</span>
          <h3 class="pack__title">赛程卡片</h3>
          <p class="pack__desc">一整段赛程压进便于查看的卡片，手机上翻、打印出来贴在桌前都合适。</p>
          <p class="pack__meta">文件类型：图片卡片 · 按月更新</p>
        </article>
        <article class="paper pack">
          <span class="tag tag--laterite">长期跟队</span>
          <h3 class="pack__title">交锋手册</h3>
          <p class="pack__desc">把一支球队对主要对手的历史交锋整理成册，主客场分开列，聊球前翻两页就够。</p>
          <p class="pack__meta">文件类型：PDF · 按月更新</p>
        </article>
      </div>

      <figure class="figure figure--wide packs__figure">
        <div class="figure__frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色桌面上平铺的赛程卡片、交锋手册与球队档案册，带印刷标签和围巾一角" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption">三类文件 / 手机与电脑浏览器都能取</figcaption>
      </figure>

      <p class="packs__foot">
        长期跟一支球队的球迷资料下载体验，在换设备之后同样稳定：手机端存进相册随身看，电脑端整包取走做归档，两边拿到的版本一致。
      </p>
    </div>
  </section>

  <section class="section path" id="path">
    <div class="wrap">
      <div class="section-head">
        <p class="index-label">使用路径</p>
        <h2>不知道该点哪里，按这四步走</h2>
      </div>

      <div class="path__grid">
        <ol class="path__steps">
          <li class="path__step">
            <span class="path__num num">01</span>
            <div>
              <h3>先看案例合集</h3>
              <p>刚接触赛事的人，从案例合集入手最快：280 篇文章按联赛、球队、赛事情境、判罚主题、回访场景和新手路径六类整理，挑一篇顺眼的读下去，赛事脉络自己就浮出来了。</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num num">02</span>
            <div>
              <h3>收下你的球队</h3>
              <p>有主队之后，把球队收进收藏，再把近期打算看的几场赛程一起收好。后面所有入口都会围着这条收藏排序。</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num num">03</span>
            <div>
              <h3>赛前读一篇前瞻</h3>
              <p>开赛前 48 小时，前瞻发布。花十分钟读完，进场的时候你会知道该盯着哪几个人看。</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num num">04</span>
            <div>
              <h3>回访交锋，再把资料留下</h3>
              <p>赛后再翻一次历史交锋，对照着看这一次的位置。顺手把球队资料包和赛程卡片取走，赛季末再回头，手里是完整的一条线。</p>
            </div>
          </li>
        </ol>

        <figure class="figure figure--tall path__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="看台围巾与抽象时间轴刻度叠合，夜间灯光下的长期跟队意象" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">一个赛季接一个赛季 / 跟队是长期的事</figcaption>
        </figure>
      </div>

      <div class="path__cta">
        <p>
          <a href="/help-center/">帮助中心</a>按账号、收藏、前瞻、下载和纠错五组问题整理，刚开始看球的人在那里能找到更细的说明。
          想先了解这支团队怎么做事，可以看<a href="/mission/">品牌使命</a>；
          资料取不到或者场次对不上，直接走<a href="/connect/">联系通道</a>。
        </p>
        <div class="path__actions">
          <a class="btn btn--solid" href="/">回到专区首页</a>
          <a class="btn btn--ghost" href="/help-center/">进入帮助中心</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --tree-rail: 0.6875rem;
  --node-pad: 2.5rem;
}

.page-products .hero {
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.page-products .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.page-products .hero__lead h1 {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 7.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}

.page-products .hero__text {
  margin: 1.15rem 0 0;
  max-width: var(--measure);
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.8);
}

.page-products .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.page-products .hero__figure {
  order: -1;
}

.page-products .figure__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--deck);
}

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

.page-products .figure__caption {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-products .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--line-soft);
}

.page-products .stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0.9rem 1.15rem;
  background: var(--ink);
}

.page-products .stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .stat__label {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--mist);
}

/* 技能树 */
.page-products .section-lede {
  max-width: 60ch;
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.72);
}

.page-products .tree {
  position: relative;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .tree::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 2.5rem;
  left: var(--tree-rail);
  width: 1px;
  background: linear-gradient(180deg, var(--cyan-line), rgba(244, 240, 230, 0.12) 55%, transparent);
}

.page-products .tree__node {
  position: relative;
  padding: 0 0 1.75rem var(--node-pad);
  transition: background-color 0.25s ease;
}

.page-products .tree__dot {
  position: absolute;
  left: calc(var(--tree-rail) - 5px);
  top: 0.42rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--cyan-line);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.page-products .tree__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.page-products .tree__code {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.page-products .tree__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 0.25s ease;
}

.page-products .tree__text {
  margin: 0.55rem 0 0;
  max-width: var(--measure);
  font-size: 0.93rem;
  line-height: 1.82;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .tree__meta {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .tree__node:hover .tree__dot,
.page-products .tree__node:focus-within .tree__dot {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(41, 242, 207, 0.16);
  transform: scale(1.12);
}

.page-products .tree__node:hover .tree__title,
.page-products .tree__node:focus-within .tree__title {
  color: var(--cyan);
}

/* 双端对照 */
.page-products .devices__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .devices__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products .device {
  position: relative;
  padding: 1.35rem 1.15rem 1.5rem;
  background: var(--night);
  border: 1px solid var(--line);
  border-top-width: 3px;
}

.page-products .device--phone {
  border-top-color: var(--cyan);
}

.page-products .device--desktop {
  border-top-color: var(--orange);
}

.page-products .device__head h3 {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-products .device__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.page-products .device__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(244, 240, 230, 0.78);
}

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

.page-products .device--desktop .device__list li::before {
  background: var(--orange);
}

.page-products .device__note {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* 历史交锋 */
.page-products .h2h__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.page-products .h2h__lead h2 {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-products .h2h__text {
  margin: 1rem 0 0;
  max-width: var(--measure);
  font-size: 0.94rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .marks {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1rem;
  background: rgba(16, 43, 74, 0.6);
  border-left: 2px solid var(--laterite);
}

.page-products .marks p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(244, 240, 230, 0.76);
}

.page-products .marks a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
}

.page-products .h2h__figure {
  margin: 1.5rem 0 0;
}

.page-products .h2h__aside {
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--deck);
  border: 1px solid var(--cyan-line);
}

.page-products .h2h__aside-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-products .h2h__track {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0 0 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-products .h2h__track:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .h2h__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 5.4rem;
  padding: 0.75rem 0.7rem;
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.page-products .h2h__item:hover {
  border-color: var(--cyan-line);
  transform: translateY(-2px);
}

.page-products .h2h__order {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
}

.page-products .h2h__venue {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .h2h__kind {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-products .h2h__facts {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .h2h__fact dt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .h2h__fact dd {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(244, 240, 230, 0.86);
}

.page-products .h2h__aside .btn {
  margin-top: 1.2rem;
  width: 100%;
  justify-content: center;
}

/* 收藏与前瞻 */
.page-products .bookmarks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .bookmark-card {
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--night);
}

.page-products .bookmark-card h3 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
}

.page-products .bookmark-card p {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: rgba(244, 240, 230, 0.75);
}

.page-products .rhythm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.4rem 1.15rem;
  background: linear-gradient(115deg, rgba(255, 106, 42, 0.14), rgba(16, 43, 74, 0.5) 62%);
  border: 1px solid rgba(255, 106, 42, 0.32);
}

.page-products .rhythm__mark {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.page-products .rhythm__mark .num--lg {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--orange);
}

.page-products .rhythm__unit {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.page-products .rhythm__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
}

.page-products .rhythm__body p {
  margin: 0.5rem 0 0;
  max-width: var(--measure);
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.8);
}

.page-products .rhythm__link {
  align-self: end;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
  padding-bottom: 0.2rem;
}

/* 资料下载 */
.page-products .packs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-products .pack {
  padding: 1.25rem 1.1rem 1.35rem;
  background: var(--tag);
  color: var(--black);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-products .pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(3, 7, 13, 0.9);
}

.page-products .pack__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--black);
}

.page-products .pack__desc {
  margin: 0.55rem 0 0;
  font-size: 0.87rem;
  line-height: 1.78;
  color: rgba(3, 7, 13, 0.78);
}

.page-products .pack__meta {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(3, 7, 13, 0.18);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(3, 7, 13, 0.6);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.page-products .pack:hover .pack__meta {
  opacity: 1;
}

.page-products .packs__figure {
  margin: 1.5rem 0 0;
}

.page-products .packs__foot {
  margin: 1.15rem 0 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.76);
}

/* 使用路径 */
.page-products .path__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  align-items: start;
}

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

.page-products .path__step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.1rem 1rem;
  background: var(--ink);
  transition: background-color 0.25s ease;
}

.page-products .path__step:hover {
  background: var(--night);
}

.page-products .path__num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange);
  line-height: 1.4;
}

.page-products .path__step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--paper);
}

.page-products .path__step p {
  margin: 0.4rem 0 0;
  font-size: 0.87rem;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.75);
}

.page-products .path__cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: 1.25rem 1.1rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--night);
}

.page-products .path__cta p {
  margin: 0;
  max-width: 64ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(244, 240, 230, 0.78);
}

.page-products .path__cta a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line);
}

.page-products .path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

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

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

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

  .page-products .rhythm {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
  }

  .page-products .rhythm__link {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .page-products {
    --tree-rail: 16.5rem;
    --node-pad: 0rem;
  }

  .page-products .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .page-products .hero__figure {
    order: 0;
    margin-top: 0.5rem;
  }

  .page-products .tree__node {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3rem;
    padding: 0 0 2.25rem 0;
  }

  .page-products .tree__dot {
    left: calc(16.5rem - 5px);
    top: 0.55rem;
  }

  .page-products .tree__head {
    padding-right: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .page-products .tree__title {
    font-size: 1.55rem;
  }

  .page-products .tree__text {
    margin-top: 0;
    font-size: 0.95rem;
  }

  .page-products .devices__layout {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .page-products .devices__figure {
    position: sticky;
    top: 7rem;
  }

  .page-products .h2h__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .page-products .h2h__aside {
    position: sticky;
    top: 7rem;
  }

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

  .page-products .rhythm {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
    padding: 1.6rem 1.75rem;
  }

  .page-products .rhythm__body {
    grid-column: 2;
  }

  .page-products .rhythm__link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .page-products .path__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .page-products .path__figure {
    margin-top: 0.35rem;
  }

  .page-products .path__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 1.75rem;
  }

  .page-products .path__actions {
    margin-top: 0;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tree__dot,
  .page-products .tree__title,
  .page-products .pack,
  .page-products .pack__meta,
  .page-products .h2h__item,
  .page-products .path__step {
    transition: none;
  }

  .page-products .pack:hover,
  .page-products .h2h__item:hover {
    transform: none;
  }
}