.page-products {
  --pp-frame: rgba(34, 211, 238, 0.28);
  --pp-glass: rgba(229, 242, 255, 0.05);
  --pp-card: rgba(17, 24, 39, 0.86);
  --pp-gap: 16px;
  --pp-radius-lg: 20px;
}

.page-products .section {
  padding: 40px 0;
}

.page-products .section--band {
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(34, 211, 238, 0.10), transparent 62%),
    linear-gradient(150deg, var(--navy-a), var(--navy-b) 70%, var(--ink));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- Hero ---------- */
.page-products .products-hero {
  padding-top: 20px;
}

.page-products .products-hero__frame {
  position: relative;
  overflow: hidden;
  padding: 28px 20px 30px;
  border: 1px solid var(--pp-frame);
  border-radius: var(--pp-radius-lg);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(34, 211, 238, 0.16), transparent 58%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 107, 44, 0.12), transparent 62%),
    linear-gradient(158deg, var(--navy-a), var(--navy-b) 58%, var(--ink));
}

.page-products .products-hero__frame::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  opacity: 0.72;
  pointer-events: none;
}

.page-products .products-hero__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 16px);
  opacity: 0.34;
  pointer-events: none;
}

.page-products .products-hero__title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(30px, 7.4vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ice);
  max-width: 20ch;
}

.page-products .products-hero__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ice);
  opacity: 0.88;
}

.page-products .products-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-products .products-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-products .products-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .products-hero__num {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}

.page-products .products-hero__fact:nth-child(2) .products-hero__num,
.page-products .products-hero__fact:nth-child(4) .products-hero__num {
  color: var(--orange);
}

.page-products .products-hero__label {
  font-size: 13px;
  color: var(--slate);
  letter-spacing: 0.04em;
}

/* ---------- 选项卡 ---------- */
.page-products .tabs {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background: var(--pp-card);
  overflow: hidden;
}

.page-products .tabs__list {
  display: flex;
  gap: 4px;
  padding: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(11, 27, 58, 0.9), rgba(7, 18, 38, 0.7));
  scrollbar-width: none;
}

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

.page-products .tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--slate);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-products .tab:hover {
  color: var(--ice);
  background: rgba(34, 211, 238, 0.08);
}

.page-products .tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}

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

.page-products .tabs__panel {
  padding: 22px 18px 26px;
}

.page-products .tabs__panel p {
  margin: 10px 0 0;
  color: var(--ice);
  opacity: 0.86;
  max-width: 68ch;
}

.page-products .feature-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ice);
  opacity: 0.9;
  font-size: 15px;
  line-height: 1.6;
}

.page-products .feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .feature-list--tight li {
  font-size: 14px;
}

/* ---------- 入口排序 ---------- */
.page-products .entry-grid {
  margin-top: 6px;
}

.page-products .entry-grid .card {
  padding: 22px 20px;
}

.page-products .entry-grid .card__meta {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-products .entry-callout {
  margin-top: 22px;
  border-left: 3px solid var(--amber);
}

/* ---------- 比分轨道 ---------- */
.page-products .score-track {
  margin-top: 22px;
}

.page-products .track-card {
  flex: 0 0 208px;
  padding: 18px 16px;
  scroll-snap-align: start;
}

.page-products .track-card__league {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-products .track-card__score {
  margin: 14px 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--ice);
  letter-spacing: 0.02em;
}

.page-products .track-card__colon {
  color: var(--orange);
  padding: 0 4px;
}

.page-products .track-card__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

.page-products .track-card__min {
  font-size: 13px;
  color: var(--slate);
}

.page-products .score-notes {
  margin-top: 22px;
}

.page-products .score-note {
  padding: 20px 18px;
  border-left: 2px solid var(--line);
}

/* ---------- 球队库 ---------- */
.page-products .team-layout {
  align-items: start;
  gap: 22px;
}

.page-products .team-layout__side {
  display: grid;
  gap: 10px;
}

.page-products .tree-node {
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background: var(--pp-glass);
  overflow: hidden;
}

.page-products .tree-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ice);
  font-weight: 600;
  font-size: 16px;
}

.page-products .tree-node__head::-webkit-details-marker {
  display: none;
}

.page-products .tree-node__head::after {
  content: "+";
  color: var(--cyan);
  font-size: 18px;
  line-height: 1;
}

.page-products .tree-node[open] .tree-node__head::after {
  content: "–";
}

.page-products .tree-node[open] .tree-node__head {
  border-bottom: 1px solid var(--line-soft);
  color: var(--cyan);
}

.page-products .tree-node__name {
  flex: 1 1 auto;
}

.page-products .tree-node__count {
  font-size: 12px;
  color: var(--slate);
}

.page-products .tree-node__body {
  padding: 14px 16px 18px;
}

.page-products .tree-node__body p {
  margin: 0;
  font-size: 14px;
  color: var(--ice);
  opacity: 0.82;
}

.page-products .team-summary {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  background: var(--pp-glass);
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  color: var(--ice);
  opacity: 0.9;
}

/* ---------- 手机栏目页 ---------- */
.page-products .mobile-layout {
  align-items: start;
  gap: 24px;
}

.page-products .mobile-layout__text p {
  margin: 12px 0 0;
  color: var(--ice);
  opacity: 0.86;
}

.page-products .mobile-layout__media {
  max-width: 380px;
}

.page-products .mobile-callout {
  margin-top: 22px;
}

/* ---------- 安装流程 ---------- */
.page-products .install-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  counter-reset: none;
}

.page-products .install-step {
  position: relative;
  padding: 20px 18px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background: linear-gradient(120deg, rgba(17, 24, 39, 0.9), rgba(11, 27, 58, 0.7));
}

.page-products .install-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--orange);
  border-radius: 3px;
}

.page-products .install-step__no {
  display: block;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.page-products .install-step__title {
  margin: 8px 0 0;
  font-size: 19px;
  color: var(--ice);
}

.page-products .install-step__body {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--slate);
  line-height: 1.6;
}

.page-products .install-notes {
  margin-top: 22px;
  gap: 14px;
}

.page-products .device-picker {
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background: var(--pp-card);
  overflow: hidden;
}

.page-products .device-picker__head {
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  color: var(--ice);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .device-picker__head::-webkit-details-marker {
  display: none;
}

.page-products .device-picker__head::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--cyan);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.page-products .device-picker__body {
  padding: 0 18px 18px;
}

.page-products .device-picker__body p {
  margin: 0;
  font-size: 14px;
  color: var(--ice);
  opacity: 0.84;
  line-height: 1.65;
}

.page-products .device-picker__body .feature-list {
  margin-top: 12px;
}

.page-products .install-help {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--slate);
}

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

/* ---------- 版本与兼容 ---------- */
.page-products .version-grid {
  gap: 16px;
}

.page-products .version-card {
  padding: 22px 20px;
}

.page-products .version-card--accent {
  border-left: 3px solid var(--lime);
}

.page-products .version-card__ver {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
}

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

.page-products .compat-band {
  margin-top: 26px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  background:
    linear-gradient(120deg, rgba(11, 27, 58, 0.92), rgba(7, 18, 38, 0.86));
}

.page-products .compat-band__title {
  margin: 0;
  font-size: 20px;
  color: var(--ice);
}

.page-products .compat-band__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .compat-band__list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ice);
  opacity: 0.88;
}

.page-products .compat-band__list .mono {
  color: var(--orange);
  font-size: 14px;
}

.page-products .compat-band__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--slate);
}

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

/* ---------- 媒体与响应式 ---------- */
.page-products .media-frame {
  margin-top: 22px;
}

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

.page-products a:focus-visible,
.page-products summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .page-products .section {
    padding: 56px 0;
  }

  .page-products .products-hero__frame {
    padding: 44px 40px 44px;
  }

  .page-products .products-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .page-products .tabs__panel {
    padding: 28px 26px 32px;
  }

  .page-products .install-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .page-products .grid--editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px;
  }

  .page-products .mobile-layout.grid--editorial {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  }

  .page-products .team-layout.grid--editorial {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-products .products-hero__frame {
    padding: 56px 56px 50px;
  }

  .page-products .products-hero__lead {
    font-size: 18px;
  }

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

  .page-products .track-card {
    flex: 0 0 232px;
  }

  .page-products .mobile-layout__media {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tab,
  .page-products .card,
  .page-products .install-step {
    transition: none !important;
  }
}
</main>
<<<END>>>

等等——我需要按要求以 `</main>` 结束 main_html，然后 page_css。我错误地把 `</main>` 放进 page_css 块里了。让我修正输出。

实际上再看一下：我写的是 MAIN_HTML 块，里面有正确的 `</main>`，然后 PAGE_CSS 块结束时……我在里面放了 `</main>`？不对——我是在 PAGE_CSS 块末尾放了 `<<<END>>>` 和 `</main>`。那是个错误。让我干净地重新输出。

另外我用了 `.page-products .grid--editorial`——那是共享类，没问题，但我在媒体查询里覆盖了它。那没问题，但共享的 `.grid--editorial` 可能已经定义了。再覆盖也没事。

还有 `.page-products .tabs__list` 覆盖——共享的 `.tabs__list` 是存在的。没问题。

还有 `.page-products .feature-list`——新类，在作用域内定义了。可以。

我重新输出吧，把 page_css 里的 `</main>` 去掉。

等等，再看一遍我的 draft，我发现 page_css 末尾是 `</main>` 然后 `<<<END>>>`。让我清理掉。

其实不对——看我写的：

```

...
</main>
<<<END>>>
```

嗯，我把 `</main>` 放在 CSS 后面了。那是个 bug。去掉它。

再输出一遍。
<main id="main-content" class="page-products">
  <nav class="breadcrumbs" aria-label="面包屑导航">
    <span class="breadcrumbs__item"><a href="/">首页</a></span>
    <span class="breadcrumbs__item">功能与下载</span>
  </nav>

  <section class="section products-hero" aria-labelledby="products-hero-title">
    <div class="products-hero__frame">
      <p class="eyebrow">CN 全新升级 · V4 功能与下载</p>
      <h1 id="products-hero-title" class="products-hero__title">装好一次，赛程、比分、球队资料与赛程表都在同一个入口</h1>
      <p class="lead products-hero__lead">178体育安装把看球路上最常做的四件事收进同一套界面：先找比赛，再盯比分，想了解对手就翻球队档案，赛前把赛程表导出来发给球友。V4 把入口顺序重新排过，常看的联赛更容易点到，切换比分时之前选好的筛选也不会被清空。</p>
      <div class="products-hero__actions">
        <a class="btn btn--primary" href="#install">查看下载与安装流程</a>
        <a class="btn btn--ghost" href="/faqs/">安装遇到问题</a>
      </div>
      <div class="products-hero__facts">
        <div class="products-hero__fact">
          <span class="mono products-hero__num">120+</span>
          <span class="products-hero__label">联赛与杯赛接入</span>
        </div>
        <div class="products-hero__fact">
          <span class="mono products-hero__num">18</span>
          <span class="products-hero__label">热门项目覆盖</span>
        </div>
        <div class="products-hero__fact">
          <span class="mono products-hero__num">4,800+</span>
          <span class="products-hero__label">球队档案收录</span>
        </div>
        <div class="products-hero__fact">
          <span class="mono products-hero__num">1.2s</span>
          <span class="products-hero__label">手机首屏加载</span>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="overview" aria-labelledby="overview-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">能力地图</p>
        <h2 id="overview-title" class="section-title">四块能力，拼成一条完整的看球路径</h2>
      </div>
      <p class="section-note">从赛程入口出发，往下是比分、球队库和赛程表三条支线，常用动作都在这条线上。</p>
    </div>

    <figure class="media-frame media-frame--wide" data-reveal>
      <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深色仪表盘风格的功能总览界面，四个能力节点围绕中心入口分布" decoding="async">
      <figcaption class="media-frame__caption">赛程、比分、球队库与赛程表四个节点从安装入口向外展开</figcaption>
    </figure>

    <div class="tabs" data-tabs>
      <div class="tabs__list" role="tablist" aria-label="功能模块切换">
        <button class="tab" type="button" role="tab" id="tab-schedule" data-tab="schedule" aria-selected="true" aria-controls="panel-schedule">赛程板块</button>
        <button class="tab" type="button" role="tab" id="tab-score" data-tab="score" aria-selected="false" aria-controls="panel-score">比分切换</button>
        <button class="tab" type="button" role="tab" id="tab-teams" data-tab="teams" aria-selected="false" aria-controls="panel-teams">球队库</button>
        <button class="tab" type="button" role="tab" id="tab-sheet" data-tab="sheet" aria-selected="false" aria-controls="panel-sheet">赛程表</button>
      </div>

      <div class="tabs__panel" id="panel-schedule" data-panel="schedule" role="tabpanel" aria-labelledby="tab-schedule">
        <h3 class="card__title">找比赛只要三步</h3>
        <p>选项目、挑联赛、看当天，三步就能落到具体的比赛页面。足球、篮球、网球、电竞、排球等 18 个热门项目各自成组，入口不再混在一起。</p>
        <ul class="feature-list">
          <li>联赛与杯赛超过 120 项，按热门程度和你的浏览习惯排序</li>
          <li>同一天的比赛可跨项目混排，晚上想看什么一目了然</li>
          <li>V4 本周调整后，高频联赛入口前置到首屏第一层</li>
        </ul>
      </div>

      <div class="tabs__panel" id="panel-score" data-panel="score" role="tabpanel" aria-labelledby="tab-score" hidden>
        <h3 class="card__title">同时盯住 12 个联赛</h3>
        <p>足球周末、篮球背靠背、电竞小组赛撞在同一天时，你可以在同一块轨道上并列关注最多 12 个联赛，比分变化集中在一屏里。</p>
        <ul class="feature-list">
          <li>切换联赛不丢筛选条件，项目、时间、状态的选择会带过去</li>
          <li>比分数字用等宽字体放大，扫一眼就能读出差距</li>
          <li>进行中、已结束、待开赛用不同颜色区分，不会看错状态</li>
        </ul>
      </div>

      <div class="tabs__panel" id="panel-teams" data-panel="teams" role="tabpanel" aria-labelledby="tab-teams" hidden>
        <h3 class="card__title">从联赛一路下钻到球队</h3>
        <p>球队库按联赛建立二级目录，先定位联赛，再进球队，路径比过去缩短一层。4,800 多支球队的档案与基础资料都在这里。</p>
        <ul class="feature-list">
          <li>二级目录按项目分组，联赛多的时候也不会翻不到头</li>
          <li>球队页与赛程、比分互通，看完资料能直接跳到该队的比赛</li>
          <li>内容团队每周维护联赛专题与球队资料</li>
        </ul>
      </div>

      <div class="tabs__panel" id="panel-sheet" data-panel="sheet" role="tabpanel" aria-labelledby="tab-sheet" hidden>
        <h3 class="card__title">把赛程装进口袋</h3>
        <p>国内178体育专区提供赛程表下载，支持 CSV 与图片两种格式。每周更新 3 次，导出的文件可以离线打开，也方便直接转发到群里。</p>
        <ul class="feature-list">
          <li>当周重点联赛、全部联赛、我关注的联赛三种范围任选</li>
          <li>图片格式适合发社群，CSV 适合自己整理和二次使用</li>
          <li>手机上下载后无需联网也能查看</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section section--band" id="entry" aria-labelledby="entry-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">入口排序</p>
        <h2 id="entry-title" class="section-title">高频联赛前置之后，找一场比赛少点几下</h2>
      </div>
      <p class="section-note">体育赛程板块入口支持按项目、联赛、时间三种维度浏览，长期追的赛事会稳定停在你记得住的位置。</p>
    </div>

    <div class="grid grid--3 entry-grid">
      <article class="card card--glass" data-reveal>
        <p class="card__meta mono">维度 01</p>
        <h3 class="card__title">先定项目</h3>
        <p class="card__body">足球、篮球、网球、电竞、排球等 18 个项目各占一格，选定项目后再挑联赛，视线不会被无关赛事带跑。</p>
      </article>
      <article class="card card--glass" data-reveal>
        <p class="card__meta mono">维度 02</p>
        <h3 class="card__title">再挑联赛</h3>
        <p class="card__body">接入的 120 多项联赛与杯赛直接陈列，你最近常看的那几个会排到更靠前的位置。</p>
      </article>
      <article class="card card--accent" data-reveal>
        <p class="card__meta mono">维度 03</p>
        <h3 class="card__title">最后看时间</h3>
        <p class="card__body">想知道今晚有什么可看，切到时间维度，不同项目当天的比赛会排在同一条线上。</p>
      </article>
    </div>

    <div class="callout entry-callout" data-reveal>
      <p class="callout__title">本周更新说明</p>
      <p>V4 首页调整了赛程板块的入口排列顺序，把高频联赛和热门项目提到更前的位置。习惯从首页进入的用户，可以直接凭位置记忆点到目标赛事，不用再往下翻。</p>
    </div>
  </section>

  <section class="section" id="scores" aria-labelledby="scores-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">比分轨道</p>
        <h2 id="scores-title" class="section-title">多个联赛同时开打，筛选条件不会中途丢掉</h2>
      </div>
      <p class="section-note">横向滑动轨道上的每一格都是一场比赛，左右滑动的过程中，你之前选好的项目与时间范围始终有效。</p>
    </div>

    <figure class="media-frame media-frame--cinema" data-reveal>
      <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="多联赛比分横向轨道界面，左侧为联赛标签，右侧为并列的比分卡片" loading="lazy" decoding="async">
      <figcaption class="media-frame__caption">同一轨道上并列展示多个联赛的实时比分</figcaption>
    </figure>

    <div class="h-scroll score-track" data-reveal>
      <article class="card card--glass track-card">
        <p class="track-card__league">英超 · 赛季阶段</p>
        <p class="track-card__score mono">2<span class="track-card__colon">:</span>1</p>
        <p class="track-card__state"><span class="tag tag--lime">进行中</span><span class="mono track-card__min">67'</span></p>
      </article>
      <article class="card card--glass track-card">
        <p class="track-card__league">西甲 · 赛季阶段</p>
        <p class="track-card__score mono">0<span class="track-card__colon">:</span>0</p>
        <p class="track-card__state"><span class="tag tag--orange">待开赛</span><span class="mono track-card__min">20:00</span></p>
      </article>
      <article class="card card--glass track-card">
        <p class="track-card__league">德甲 · 赛季阶段</p>
        <p class="track-card__score mono">3<span class="track-card__colon">:</span>3</p>
        <p class="track-card__state"><span class="tag tag--lime">进行中</span><span class="mono track-card__min">82'</span></p>
      </article>
      <article class="card card--glass track-card">
        <p class="track-card__league">CBA · 常规赛</p>
        <p class="track-card__score mono">88<span class="track-card__colon">:</span>91</p>
        <p class="track-card__state"><span class="tag tag--lime">进行中</span><span class="mono track-card__min">Q4</span></p>
      </article>
      <article class="card card--glass track-card">
        <p class="track-card__league">电竞联赛 · 小组赛</p>
        <p class="track-card__score mono">1<span class="track-card__colon">:</span>0</p>
        <p class="track-card__state"><span class="tag tag--muted">已结束</span><span class="mono track-card__min">FT</span></p>
      </article>
      <article class="card card--glass track-card">
        <p class="track-card__league">排球联赛 · 赛季阶段</p>
        <p class="track-card__score mono">2<span class="track-card__colon">:</span>2</p>
        <p class="track-card__state"><span class="tag tag--lime">进行中</span><span class="mono track-card__min">局 5</span></p>
      </article>
    </div>

    <div class="grid grid--2 score-notes">
      <article class="card score-note" data-reveal>
        <h3 class="card__title">最多同时关注 12 个联赛</h3>
        <p class="card__body">足球、篮球、电竞挤在同一天的赛程里，你把它们都加进轨道就行。超出视野的部分向左滑动即可，不需要来回切页。</p>
      </article>
      <article class="card score-note" data-reveal>
        <h3 class="card__title">筛选条件跟着你走</h3>
        <p class="card__body">从英超切到西甲，再切回英超，先前勾选的项目、日期和比赛状态都还在。想换一组条件，清空一次就行，不必每切一次联赛重设一次。</p>
      </article>
    </div>
  </section>

  <section class="section section--band" id="teams" aria-labelledby="teams-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">球队资料</p>
        <h2 id="teams-title" class="section-title">像翻目录一样，从联赛一路走到具体球队</h2>
      </div>
      <p class="section-note">球队库的二级目录把项目、联赛、球队分层放好，联赛越多，这层结构越省事。</p>
    </div>

    <div class="grid grid--editorial team-layout">
      <div class="team-layout__main">
        <figure class="media-frame media-frame--square" data-reveal>
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="按联赛区分的球队目录树状界面，上层为项目分组，下层为球队条目" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">二级目录让联赛与球队之间的层级一眼看清</figcaption>
        </figure>
      </div>

      <div class="team-layout__side">
        <details class="tree-node" open>
          <summary class="tree-node__head">
            <span class="tree-node__name">足球</span>
            <span class="mono tree-node__count">多层级联赛</span>
          </summary>
          <div class="tree-node__body">
            <p>顶级联赛与各级杯赛分列，展开后直接看到该联赛下的球队条目。</p>
            <ul class="feature-list feature-list--tight">
              <li>球队档案：归属联赛、主场信息、基础资料</li>
              <li>赛季轨迹：近期战绩与排名位置的变化</li>
              <li>赛程联动：该队接下来的比赛直接跳转查看</li>
            </ul>
          </div>
        </details>

        <details class="tree-node">
          <summary class="tree-node__head">
            <span class="tree-node__name">篮球</span>
            <span class="mono tree-node__count">联赛 + 分区</span>
          </summary>
          <div class="tree-node__body">
            <p>联赛之下再分区域，找一支球队先认联赛，再认分区，两步落地。</p>
            <ul class="feature-list feature-list--tight">
              <li>支持从比分卡片直接进入对应球队</li>
              <li>球队近期场次在该队页面内连续排列</li>
            </ul>
          </div>
        </details>

        <details class="tree-node">
          <summary class="tree-node__head">
            <span class="tree-node__name">网球与排球</span>
            <span class="mono tree-node__count">赛事 + 队伍</span>
          </summary>
          <div class="tree-node__body">
            <p>以赛事为主线组织，队伍资料挂在对应赛事之下，赛季更换时目录自动跟着调整。</p>
          </div>
        </details>

        <details class="tree-node">
          <summary class="tree-node__head">
            <span class="tree-node__name">电竞</span>
            <span class="mono tree-node__count">项目 + 战队</span>
          </summary>
          <div class="tree-node__body">
            <p>按游戏项目分组的战队资料，赛程与战绩并列呈现，方便赛前快速了解对手。</p>
          </div>
        </details>
      </div>
    </div>

    <p class="team-summary" data-reveal">目前球队库已收录 4,800 多支球队的档案与基础资料，内容团队每周维护一次联赛专题与球队条目。你关注过的球队会保留在目录里，下次进来直接点开就行。</p>
  </section>

  <section class="section" id="mobile" aria-labelledby="mobile-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">手机栏目页</p>
        <h2 id="mobile-title" class="section-title">为单手刷赛程准备的那一版</h2>
      </div>
      <p class="section-note">移动端访问占比 78%，这一版栏目页就是围绕这个数字做的。</p>
    </div>

    <div class="grid grid--editorial mobile-layout">
      <div class="mobile-layout__text">
        <h3 class="card__title">首屏就把当天赛程摆出来</h3>
        <p>体育2025大陆版手机栏目页已经上线。它把首屏重新排了一遍，当天最值得看的比赛优先出现，往下滑才是分区与联赛筛选。首屏加载约 1.2 秒，等电梯的工夫就能看完一轮比分。</p>

        <ul class="feature-list">
          <li>手势浏览：左右滑动切换联赛，上下滑动翻看赛程，符合手机上最顺手的操作</li>
          <li>点击区域加大：比分卡片和联赛标签的触控范围更宽，走路时点也不容易误触</li>
          <li>字体与对比度调整：深色背景下比分用高对比数字，户外光线强时也读得清</li>
          <li>返回路径固定：从球队页跳回赛程时保留原来的滚动位置，不用重新找</li>
        </ul>

        <div class="callout callout--amber mobile-callout">
          <p class="callout__title">换设备同步关注</p>
          <p>手机上加进轨道的联赛，换到平板或桌面浏览器打开时仍然是同一组，接着看就行。手机栏目页与桌面版共用同一套关注列表。</p>
        </div>
      </div>

      <div class="mobile-layout__media">
        <figure class="media-frame media-frame--tall" data-reveal>
          <img src="{zhanqunpic:h:1280w:720}" width="720" height="1280" alt="体育2025大陆版手机栏目页界面示意，深色背景下排列着当天的赛程卡片" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">手机栏目页首屏：当天重点比赛与联赛切换</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--band" id="install" aria-labelledby="install-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">下载与安装</p>
        <h2 id="install-title" class="section-title">从拿到入口到赛程表存进手机，四步走完</h2>
      </div>
      <p class="section-note">安装过程不需要注册，赛程表下载也不需要额外权限，按下面的顺序操作即可。</p>
    </div>

    <ol class="install-steps" data-reveal>
      <li class="install-step">
        <span class="install-step__no mono">01</span>
        <h3 class="install-step__title">打开 V4 入口</h3>
        <p class="install-step__body">从官方首页进入 CN 全新升级的 V4 版本，首次打开会有当前位置提示，确认后即可看到赛程板块与当天比赛。</p>
      </li>
      <li class="install-step">
        <span class="install-step__no mono">02</span>
        <h3 class="install-step__title">选择你的联赛</h3>
        <p class="install-step__body">在赛程入口按项目或联赛勾选你常看的赛事，勾选结果会保存在本机，下次打开直接呈现这一组比分。</p>
      </li>
      <li class="install-step">
        <span class="install-step__no mono">03</span>
        <h3 class="install-step__title">生成赛程表</h3>
        <p class="install-step__body">进入国内178体育专区，选择当周重点联赛、全部联赛或我关注的联赛，再挑 CSV 或图片格式。</p>
      </li>
      <li class="install-step">
        <span class="install-step__no mono">04</span>
        <h3 class="install-step__title">保存或分享</h3>
        <p class="install-step__body">文件保存到本机后可离线查看。图片格式适合发到球友群，CSV 适合自己整理成表格继续用。</p>
      </li>
    </ol>

    <figure class="media-frame media-frame--wide" data-reveal>
      <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="赛程表 CSV 与图片两种格式的下载入口界面，右侧列出三种导出范围" loading="lazy" decoding="async">
      <figcaption class="media-frame__caption">CSV 与图片两种格式，三种导出范围可选</figcaption>
    </figure>

    <div class="grid grid--2 install-notes">
      <details class="device-picker" open>
        <summary class="device-picker__head">赛程表多久更新一次</summary>
        <div class="device-picker__body">
          <p>赛程表每周更新 3 次，遇到联赛密集期会临时加更。已经下载到本机的文件不会自动刷新，需要重新导出一次才能拿到最新排期。</p>
        </div>
      </details>

      <details class="device-picker">
        <summary class="device-picker__head">我的设备支持吗</summary>
        <div class="device-picker__body">
          <p>以下环境都可以正常使用 V4 与手机栏目页：</p>
          <ul class="feature-list feature-list--tight">
            <li>手机与平板：主流 iOS 与 Android 浏览器的近两个大版本</li>
            <li>桌面：Chrome、Edge、Safari、Firefox 的当前版本</li>
            <li>老设备：屏幕宽度较小时自动切换为单列布局，比分与赛程不再并排</li>
            <li>弱网环境：比分区域优先加载，球队资料与图集按需加载</li>
          </ul>
        </div>
      </details>
    </div>

    <p class="install-help" data-reveal>安装卡住、入口找不到、导出文件打不开，都可以先去 <a href="/faqs/">帮助中心</a> 对照排查；具体的下载与内容使用规则写在 <a href="/instructions/">使用说明</a> 里。</p>
  </section>

  <section class="section" id="versions" aria-labelledby="versions-title">
    <div class="section-head">
      <div>
        <p class="eyebrow">版本与兼容</p>
        <h2 id="versions-title" class="section-title">V4 之后，功能按什么节奏往前推</h2>
      </div>
      <p class="section-note">每次更新都会优先处理入口位置、加载速度和移动端操作这三类反馈。</p>
    </div>

    <div class="grid grid--3 version-grid">
      <article class="card version-card" data-reveal>
        <p class="version-card__ver mono">V4.2</p>
        <h3 class="card__title">每月一次功能级更新</h3>
        <p class="card__body">赛程入口排序、比分轨道的滑动手感、球队目录的层级调整，一般以月为单位合入。更新不需要你手动操作，刷新页面即生效。</p>
      </article>
      <article class="card version-card" data-reveal>
        <p class="version-card__ver mono">季度路线图</p>
        <h3 class="card__title">每季度公布一次版本路线</h3>
        <p class="card__body">平台每季度发布一次版本路线图，把接下来要做的功能模块提前列出来。已经完成的部分会在 <a href="/news/">赛事动态</a> 里留下更新记录。</p>
      </article>
      <article class="card version-card version-card--accent" data-reveal>
        <p class="version-card__ver mono">等保二级</p>
        <h3 class="card__title">数据安全与日志管理</h3>
        <p class="card__body">平台已通过等保二级测评，建立了数据安全与日志管理制度。你的关注列表与筛选偏好保存在本机，不需要提交额外信息。</p>
      </article>
    </div>

    <div class="compat-band" data-reveal>
      <h3 class="compat-band__title">遇到不兼容的时候，先看这三条</h3>
      <ul class="compat-band__list">
        <li><span class="mono">01</span><span>页面显示错位：清一次浏览器缓存再刷新，多为旧版本样式残留。</span></li>
        <li><span class="mono">02</span><span>比分不刷新：检查网络是否被切换过，弱网下比分刷新会有延迟。</span></li>
        <li><span class="mono">03</span><span>赛程表打不开：确认保存的是完整文件，CSV 需用表格软件打开。</span></li>
      </ul>
      <p class="compat-band__foot">这几条没解决的话，可以到 <a href="/cooperation/">合作与联系</a> 说明情况，或在 <a href="/about/">平台介绍</a> 里了解运营团队的响应安排。</p>
    </div>
  </section>
</main>

.page-products {
  --pp-frame: rgba(34, 211, 238, 0.28);
  --pp-glass: rgba(229, 242, 255, 0.05);
  --pp-card: rgba(17, 24, 39, 0.86);
  --pp-radius-lg: 20px;
}

.page-products .section {
  padding: 40px 0;
}

.page-products .section--band {
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(34, 211, 238, 0.10), transparent 62%),
    linear-gradient(150deg, var(--navy-a), var(--navy-b) 70%, var(--ink));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- 首屏框景 ---------- */
.page-products .products-hero {
  padding-top: 20px;
}

.page-products .products-hero__frame {
  position: relative;
  overflow: hidden;
  padding: 28px 20px 30px;
  border: 1px solid var(--pp-frame);
  border-radius: var(--pp-radius-lg);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(34, 211, 238, 0.16), transparent 58%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 107, 44, 0.12), transparent 62%),
    linear-gradient(158deg, var(--navy-a), var(--navy-b) 58%, var(--ink));
}

.page-products .products-hero__frame::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  opacity: 0.72;
  pointer-events: none;
}

.page-products .products-hero__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 16px);
  opacity: 0.34;
  pointer-events: none;
}

.page-products .products-hero__title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(30px, 7.4vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ice);
  max-width: 20ch;
}

.page-products .products-hero__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ice);
  opacity: 0.88;
}

.page-products .products-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.page-products .products-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-products .products-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .products-hero__num {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}

.page-products .products-hero__fact:nth-child(2) .products-hero__num,
.page-products .products-hero__fact:nth-child(4) .products-hero__num {
  color: var(--orange);
}

.page-products .products-hero__label {
  font-size: 13px;
  color: var(--slate);
  letter-spacing: 0.04em;
}

/* ---------- 分段切换 ---------- */
.page-products .tabs {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pp-card);
  overflow: hidden;
}

.page-products .tabs__list {
  display: flex;
  gap: 4px;
  padding: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(11, 27, 58, 0.9), rgba(7, 18, 38, 0.7));
  scrollbar-width: none;
}

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

.page-products .tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--slate);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-products .tab:hover {
  color: var(--ice);
  background: rgba(34, 211, 238, 0.08);
}

.page-products .tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}

.page-products .tabs__panel {
  padding: 22px 18px 26px;
}

.page-products .tabs__panel p {
  margin: 10px 0 0;
  color: var(--ice);
  opacity: 0.86;
  max-width: 68ch;
}

.page-products .feature-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ice);
  opacity: 0.9;
  font-size: 15px;
  line-height: 1.6;
}

.page-products .feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .feature-list--tight li {
  font-size: 14px;
}

/* ---------- 入口维度 ---------- */
.page-products .entry-grid {
  margin-top: 6px;
}

.page-products .entry-grid .card {
  padding: 22px 20px;
}

.page-products .entry-grid .card__meta {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-products .entry-callout {
  margin-top: 22px;
  border-left: 3px solid var(--amber);
}

/* ---------- 比分轨道 ---------- */
.page-products .score-track {
  margin-top: 22px;
}

.page-products .track-card {
  flex: 0 0 208px;
  padding: 18px 16px;
  scroll-snap-align: start;
}

.page-products .track-card__league {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-products .track-card__score {
  margin: 14px 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--ice);
  letter-spacing: 0.02em;
}

.page-products .track-card__colon {
  color: var(--orange);
  padding: 0 4px;
}

.page-products .track-card__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

.page-products .track-card__min {
  font-size: 13px;
  color: var(--slate);
}

.page-products .score-notes {
  margin-top: 22px;
}

.page-products .score-note {
  padding: 20px 18px;
  border-left: 2px solid var(--line);
}

/* ---------- 球队目录 ---------- */
.page-products .team-layout {
  align-items: start;
  gap: 22px;
}

.page-products .team-layout__side {
  display: grid;
  gap: 10px;
}

.page-products .tree-node {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pp-glass);
  overflow: hidden;
}

.page-products .tree-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ice);
  font-weight: 600;
  font-size: 16px;
}

.page-products .tree-node__head::-webkit-details-marker {
  display: none;
}

.page-products .tree-node__head::after {
  content: "+";
  color: var(--cyan);
  font-size: 18px;
  line-height: 1;
}

.page-products .tree-node[open] .tree-node__head::after {
  content: "–";
}

.page-products .tree-node[open] .tree-node__head {
  border-bottom: 1px solid var(--line-soft);
  color: var(--cyan);
}

.page-products .tree-node__name {
  flex: 1 1 auto;
}

.page-products .tree-node__count {
  font-size: 12px;
  color: var(--slate);
}

.page-products .tree-node__body {
  padding: 14px 16px 18px;
}

.page-products .tree-node__body p {
  margin: 0;
  font-size: 14px;
  color: var(--ice);
  opacity: 0.82;
}

.page-products .team-summary {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  background: var(--pp-glass);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ice);
  opacity: 0.9;
}

/* ---------- 手机栏目页 ---------- */
.page-products .mobile-layout {
  align-items: start;
  gap: 24px;
}

.page-products .mobile-layout__text p {
  margin: 12px 0 0;
  color: var(--ice);
  opacity: 0.86;
}

.page-products .mobile-layout__media {
  max-width: 380px;
}

.page-products .mobile-callout {
  margin-top: 22px;
}

/* ---------- 安装流程 ---------- */
.page-products .install-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-products .install-step {
  position: relative;
  padding: 20px 18px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(17, 24, 39, 0.9), rgba(11, 27, 58, 0.7));
}

.page-products .install-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--orange);
  border-radius: 3px;
}

.page-products .install-step__no {
  display: block;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.page-products .install-step__title {
  margin: 8px 0 0;
  font-size: 19px;
  color: var(--ice);
}

.page-products .install-step__body {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--slate);
  line-height: 1.6;
}

.page-products .install-notes {
  margin-top: 22px;
  gap: 14px;
}

.page-products .device-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pp-card);
  overflow: hidden;
}

.page-products .device-picker__head {
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  color: var(--ice);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-products .device-picker__head::-webkit-details-marker {
  display: none;
}

.page-products .device-picker__head::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--cyan);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.page-products .device-picker__body {
  padding: 0 18px 18px;
}

.page-products .device-picker__body p {
  margin: 0;
  font-size: 14px;
  color: var(--ice);
  opacity: 0.84;
  line-height: 1.65;
}

.page-products .device-picker__body .feature-list {
  margin-top: 12px;
}

.page-products .install-help {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--slate);
}

.page-products .install-help a,
.page-products .version-card a,
.page-products .compat-band__foot a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 版本与兼容 ---------- */
.page-products .version-grid {
  gap: 16px;
}

.page-products .version-card {
  padding: 22px 20px;
}

.page-products .version-card--accent {
  border-left: 3px solid var(--lime);
}

.page-products .version-card__ver {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
}

.page-products .compat-band {
  margin-top: 26px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(11, 27, 58, 0.92), rgba(7, 18, 38, 0.86));
}

.page-products .compat-band__title {
  margin: 0;
  font-size: 20px;
  color: var(--ice);
}

.page-products .compat-band__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .compat-band__list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ice);
  opacity: 0.88;
}

.page-products .compat-band__list .mono {
  color: var(--orange);
  font-size: 14px;
}

.page-products .compat-band__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--slate);
}

/* ---------- 媒体与可访问性 ---------- */
.page-products .media-frame {
  margin-top: 22px;
}

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

.page-products a:focus-visible,
.page-products summary:focus-visible,
.page-products button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .page-products .section {
    padding: 56px 0;
  }

  .page-products .products-hero__frame {
    padding: 44px 40px;
  }

  .page-products .products-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .page-products .tabs__panel {
    padding: 28px 26px 32px;
  }

  .page-products .install-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .page-products .team-layout.grid--editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
  }

  .page-products .mobile-layout.grid--editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
    gap: 30px;
  }
}

@media (min-width: 1024px) {
  .page-products .products-hero__frame {
    padding: 56px 56px 50px;
  }

  .page-products .products-hero__lead {
    font-size: 18px;
  }

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

  .page-products .track-card {
    flex: 0 0 232px;
  }

  .page-products .mobile-layout__media {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tab,
  .page-products .card,
  .page-products .install-step,
  .page-products .tree-node__head {
    transition: none !important;
  }
}
<<<END>>>

.page-products {
  --pp-radius: var(--pp-radius-lg);
}