/* ===== 平台功能页 · page-products ===== */
.page-products {
  --prod-tint: rgba(199, 220, 232, 0.42);
  --prod-tint-deep: rgba(18, 59, 87, 0.94);
  --prod-gap: clamp(20px, 3.4vw, 40px);
}

/* 首屏 */
.page-products .prod-hero {
  padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4.6vw, 60px);
}

.page-products .prod-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
}

/* 章节通用 */
.page-products .prod-section {
  padding-block: clamp(46px, 6vw, 92px);
}

.page-products .prod-section--tint {
  background: var(--prod-tint);
  border-radius: var(--radius-lg);
  margin-inline: clamp(10px, 2vw, 26px);
}

.page-products .prod-section--deep {
  background: var(--ink-blue);
  color: var(--paper);
  border-radius: var(--radius-lg);
  margin-inline: clamp(10px, 2vw, 26px);
}

.page-products .prod-section--deep .section__title,
.page-products .prod-section--deep .section__lede,
.page-products .prod-section--deep .prod-subtitle {
  color: var(--paper);
}

.page-products .prod-section--deep .section__lede {
  opacity: 0.82;
}

.page-products .prod-section__head {
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.page-products .prod-subtitle {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

/* 总览配图 */
.page-products .prod-figure {
  margin: 0 0 clamp(26px, 3.6vw, 44px);
}

.page-products .prod-figure img,
.page-products .prod-ctrl__figure img,
.page-products .prod-versions__figure img,
.page-products .prod-mobile__figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* 功能模块网格 */
.page-products .prod-modules {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(14px, 2vw, 22px);
}

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

@media (min-width: 1080px) {
  .page-products .prod-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .prod-modules > :nth-child(even) {
    margin-top: 26px;
  }
}

.page-products .prod-mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.6vw, 30px);
  color: inherit;
  text-decoration: none;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-products .prod-mod:hover,
.page-products .prod-mod:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.page-products .prod-mod__state {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgba(180, 230, 60, 0.24);
}

.page-products .prod-mod__idx {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray);
}

.page-products .prod-mod__read {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-blue);
}

.page-products .prod-mod .card__title {
  margin: 4px 0 0;
}

/* 控球率对比 */
.page-products .prod-ctrl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-ctrl {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: start;
  }
}

.page-products .prod-ctrl__figure {
  margin: 0;
}

.page-products .prod-chips {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

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

.page-products .prod-panel + .prod-panel {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}

.page-products .prod-ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(260px, 68vw);
  margin-inline: auto;
}

.page-products .prod-ring {
  width: 100%;
  height: auto;
  display: block;
}

.page-products .prod-ring__track {
  fill: none;
  stroke: var(--lake-soft);
  stroke-width: 20;
}

.page-products .prod-ring__fill {
  fill: none;
  stroke: var(--lake);
  stroke-width: 20;
  stroke-linecap: round;
}

.page-products .prod-ring__fill--away {
  stroke: var(--sunset);
}

.page-products .prod-ring__read {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-blue);
  font-variant-numeric: tabular-nums;
}

.page-products .prod-legend {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.page-products .prod-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-products .prod-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.page-products .prod-legend__dot--home {
  background: var(--lake);
}

.page-products .prod-legend__dot--away {
  background: var(--sunset);
}

.page-products .prod-panel__text {
  margin: 14px 0 0;
  color: var(--gray);
  max-width: 44ch;
}

.page-products .prod-hint {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--gray);
}

.page-products .prod-hint a {
  color: var(--lake);
  text-underline-offset: 3px;
}

/* 半场比分评测 */
.page-products .prod-halves {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-halves {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
  }
}

.page-products .prod-line-figure {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}

.page-products .prod-line {
  width: 100%;
  height: auto;
  display: block;
}

.page-products .prod-line__grid {
  stroke: var(--rule);
  stroke-width: 1;
}

.page-products .prod-line__axis {
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}

.page-products .prod-line__first {
  fill: none;
  stroke: var(--lake);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .prod-line__second {
  fill: none;
  stroke: var(--sunset);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .prod-line__node {
  fill: var(--neon);
}

.page-products .prod-line__caption {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gray);
}

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

.page-products .prod-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  line-height: 1.75;
}

.page-products .prod-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--sunset);
  border-radius: 2px;
}

.page-products .prod-list strong {
  font-weight: 600;
  color: var(--ink-blue);
}

.page-products .prod-note {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--neon);
  background: rgba(180, 230, 60, 0.12);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
  color: var(--ink);
}

/* 赛事版本 */
.page-products .prod-versions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-versions {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }
}

.page-products .prod-versions__figure {
  margin: 0;
}

.page-products .prod-ver-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}

.page-products .prod-ver-panel + .prod-ver-panel {
  margin-top: 18px;
}

.page-products .prod-ver__read {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sunset);
  margin: 0;
}

.page-products .prod-ver__label {
  margin: 8px 0 18px;
  font-size: 15px;
  color: var(--gray);
}

/* 欧冠区间 */
.page-products .prod-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

@media (min-width: 860px) {
  .page-products .prod-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .prod-stage {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
}

.page-products .prod-stage__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 5px rgba(180, 230, 60, 0.22);
  margin-bottom: 16px;
}

.page-products .prod-stage__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink-blue);
}

.page-products .prod-stage__text {
  margin: 0;
  color: var(--gray);
  line-height: 1.78;
}

.page-products .prod-ucl__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

/* 移动端 */
.page-products .prod-mobile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-mobile {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }
}

.page-products .prod-mobile__figure {
  margin: 0;
}

.page-products .prod-mobile__figure img {
  border: 1px solid rgba(199, 220, 232, 0.7);
}

.page-products .prod-swipe {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-products .prod-swipe__card {
  flex: 0 0 min(76%, 280px);
  scroll-snap-align: start;
  padding: 22px;
  background: var(--white);
  border-radius: var(--radius-md);
}

.page-products .prod-swipe__tag {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sunset);
}

.page-products .prod-swipe__read {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-blue);
}

.page-products .prod-swipe__text {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
}

.page-products .prod-list--tight {
  margin-top: clamp(22px, 3vw, 32px);
}

.page-products .prod-section--deep .prod-list li,
.page-products .prod-section--deep .prod-list strong {
  color: var(--paper);
}

.page-products .prod-section--deep .prod-list li {
  opacity: 0.9;
}

.page-products .prod-section--deep .prod-list li::before {
  background: var(--neon);
}

.page-products .prod-section--deep .prod-swipe__card {
  background: var(--white);
}

.page-products .prod-section--deep .prod-swipe__read {
  color: var(--ink-blue);
}

/* 上手流程 */
.page-products .prod-flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 40px);
}

@media (min-width: 860px) {
  .page-products .prod-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .prod-flow::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: var(--rule-strong);
  }
}

.page-products .prod-flow__step {
  position: relative;
}

.page-products .prod-flow__num {
  position: relative;
  display: inline Grid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--sunset);
  margin-bottom: 18px;
}

.page-products .prod-flow__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  color: var(--ink-blue);
}

.page-products .prod-flow__text {
  margin: 0;
  color: var(--gray);
  line-height: 1.78;
  max-width: 40ch;
}

.page-products .prod-flow__foot {
  margin: clamp(30px, 4vw, 46px) 0 0;
  color: var(--gray);
}

.page-products .prod-flow__foot a {
  color: var(--lake);
  text-underline-offset: 3px;
}

/* 结尾 */
.page-products .prod-end {
  padding-block: clamp(44px, 6vw, 84px) clamp(50px, 7vw, 96px);
}

.page-products .prod-end__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink-blue);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.page-products .prod-end__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .prod-end__note {
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-size: 14.5px;
  color: var(--gray);
  max-width: 62ch;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-mod,
  .page-products .prod-ring__fill {
    transition: none;
  }
}
</style>
<<<END>>>

等等——我加了个 `</style>` 标签，这是错的。PAGE_CSS 里面绝不能包含 style 标签。删掉它。

还有，我写了 `display: inline Grid;` 然后又接 `display: inline-flex;`。得把这一行删掉。

现在把 PAGE_CSS 重新整理干净。

另外还需要检查，`.prod-flow::before` 连接线会不会跑到滑动卡片后面——不会，这是独立区块。

还有 `.prod-flow__num` 在桌面端应该是盖住那条线的，背景色得用 `var(--paper)`。不过这个区块本来就在奶油色底上，应该没问题。

还有个潜在问题：`.prod-section--tint` 和 `--deep` 的 `margin-inline`，配合内部的 `.wrap`，可能会在窄屏幕上造成溢出。因为 `margin-inline` 是正的，会向内收，所以没问题。

`.prod-section--deep` 那里也得再确认一下，会不会有样式冲突。

还要检查 `.prod-swipe` 在深色区块里的表现——卡片是白色的，问题不大。

另外 `.prod-flow__foot` 这些也都没问题。

现在输出干净的版本。
<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="页面位置">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">首页</a></li>
        <li class="breadcrumbs__sep" aria-hidden="true">/</li>
        <li class="breadcrumbs__item"><span class="breadcrumbs__current" aria-current="page">平台功能</span></li>
      </ol>
    </nav>

    <header class="page-head prod-hero">
      <p class="page-head__eyebrow">[ 平台功能 ]</p>
      <h1 class="page-head__title">把两队的控球差，和上下半场的节奏，放进同一屏</h1>
      <p class="page-head__lede">悦盈体育焕新版控球率对比把两支球队的控球数据画进同一组图形，CN体育半场比分评测把一场球的比分拆成上、下两段走势。两块视图共用一套色阶和字号，电脑上打开和 iPhone 上打开，读到的排布是一样的。</p>
      <div class="prod-hero__meta">
        <span class="pill pill--live">每个比赛日赛后补充</span>
        <span class="pill">12 个主流联赛</span>
        <span class="pill">6 项洲际赛事</span>
        <span class="pill pill--accent">欧冠区间统计已上线</span>
      </div>
    </header>
  </div>

  <section class="section prod-section" id="overview" aria-labelledby="overview-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">01</p>
        <h2 class="section__title" id="overview-title">六个模块，摊开一场球的大部分疑问</h2>
        <p class="section__lede">赛前看两队谁更粘球，中场休息时判断节奏往哪偏，赛后回头核对哪一段被追平——这些都能在同一个页面里点开，不必在几个标签之间来回找。</p>
      </div>

      <figure class="img-frame img-frame--wide prod-figure">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="抽象信息图：奶油底色上排列多个圆角面板，面板内是环形、折线与分段光带的组合，以深蓝与日落橙为主">
        <figcaption class="img-frame__caption">功能面板总览：环形、折线与版本条并排陈列</figcaption>
      </figure>

      <div class="prod-modules">
        <a class="card prod-mod" href="#control">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 01</span>
          <span class="prod-mod__read numeral">2 组</span>
          <h3 class="card__title">控球率对比</h3>
          <p class="card__body">两队控球占比进同一组环形，谁的图形更长，谁就控得更久。</p>
        </a>

        <a class="card prod-mod" href="#halves">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 02</span>
          <span class="prod-mod__read numeral">2 段</span>
          <h3 class="card__title">半场比分评测</h3>
          <p class="card__body">比分拆成上半场与下半场两条折线，节奏拐在哪一段看得见。</p>
        </a>

        <a class="card prod-mod" href="#versions">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 03</span>
          <span class="prod-mod__read numeral">12 个</span>
          <h3 class="card__title">赛事版本切换</h3>
          <p class="card__body">每个联赛一套版本号，按你追的那个联赛切过去，视图跟着换。</p>
        </a>

        <a class="card prod-mod" href="#ucl">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 04</span>
          <span class="prod-mod__read numeral">小组赛 → 淘汰赛</span>
          <h3 class="card__title">欧冠区间统计</h3>
          <p class="card__body">按阶段分区间聚合，从分组一路看到决出胜负的那一场。</p>
        </a>

        <a class="card prod-mod" href="#mobile">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 05</span>
          <span class="prod-mod__read numeral">免缩放</span>
          <h3 class="card__title">移动端自适应</h3>
          <p class="card__body">iPhone 上重排层级、字号不缩，卡片横向滑动就能比完两组数。</p>
        </a>

        <a class="card prod-mod" href="#flow">
          <span class="prod-mod__state" aria-hidden="true"></span>
          <span class="prod-mod__idx">模块 06</span>
          <span class="prod-mod__read numeral">3 步</span>
          <h3 class="card__title">上手流程</h3>
          <p class="card__body">选版本、挑两队、切半场，三步走到你想看的那组对比。</p>
        </a>
      </div>
    </div>
  </section>

  <section class="section prod-section prod-section--tint" id="control" aria-labelledby="control-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">02</p>
        <h2 class="section__title" id="control-title">两组控球数据，落进同一组环形</h2>
        <p class="section__lede">主队与客队各占一个颜色，湖蓝归主、日落橙归客。占比多少，看的是环形里那一段画了多长；两支球队摆在一起，谁压过谁不用读数字也能先看出来。</p>
      </div>

      <div class="prod-ctrl">
        <figure class="img-frame img-frame--square prod-ctrl__figure">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="环形占比图形特写，两侧色块分别为湖蓝与日落橙，中心留出百分比读数的位置" loading="lazy" decoding="async">
          <figcaption class="img-frame__caption">环形两段分别取湖蓝与日落橙</figcaption>
        </figure>

        <div class="prod-ctrl__read">
          <div class="chip-row prod-chips" data-tabs role="tablist" aria-label="控球率视图切换">
            <button class="chip" type="button" role="tab" id="ctrl-tab-a" aria-controls="ctrl-panel-a" aria-selected="true">主队控球占优</button>
            <button class="chip" type="button" role="tab" id="ctrl-tab-b" aria-controls="ctrl-panel-b" aria-selected="false">客队控球占优</button>
          </div>

          <div class="prod-panel" id="ctrl-panel-a" role="tabpanel" aria-labelledby="ctrl-tab-a" data-tab-panel>
            <div class="prod-ring-wrap">
              <svg class="prod-ring" viewBox="0 0 200 200" role="img" aria-label="主队控球占比百分之五十八，客队百分之四十二">
                <circle class="prod-ring__track" cx="100" cy="100" r="74" transform="rotate(-90 100 100)" stroke-dasharray="270 465"></circle>
                <circle class="prod-ring__fill" cx="100" cy="100" r="74" transform="rotate(-90 100 100)" stroke-dasharray="270 465"></circle>
              </svg>
              <span class="prod-ring__read numeral">58%</span>
            </div>
            <ul class="prod-legend">
              <li class="prod-legend__item"><span class="prod-legend__dot prod-legend__dot--home" aria-hidden="true"></span>主队控球 58%</li>
              <li class="prod-legend__item"><span class="prod-legend__dot prod-legend__dot--away" aria-hidden="true"></span>客队控球 42%</li>
            </ul>
            <p class="prod-panel__text">湖蓝那一段明显更长的时候，说明这段时间球更多落在主队脚下。环形两端的差值，就是两队之间的实际差距。</p>
          </div>

          <div class="prod-panel" id="ctrl-panel-b" role="tabpanel" aria-labelledby="ctrl-tab-b" data-tab-panel>
            <div class="prod-ring-wrap">
              <svg class="prod-ring" viewBox="0 0 200 200" role="img" aria-label="客队控球占比百分之五十六，主队百分之四十四">
                <circle class="prod-ring__track" cx="100" cy="100" r="74" transform="rotate(-90 100 100)" stroke-dasharray="205 465"></circle>
                <circle class="prod-ring__fill prod-ring__fill--away" cx="100" cy="100" r="74" transform="rotate(-90 100 100)" stroke-dasharray="260 465"></circle>
              </svg>
              <span class="prod-ring__read numeral">56%</span>
            </div>
            <ul class="prod-legend">
              <li class="prod-legend__item"><span class="prod-legend__dot prod-legend__dot--away" aria-hidden="true"></span>客队控球 56%</li>
              <li class="prod-legend__item"><span class="prod-legend__dot prod-legend__dot--home" aria-hidden="true"></span>主队控球 44%</li>
            </ul>
            <p class="prod-panel__text">橙色段翻上去，说明客队把球权拿走了。切回上一种视图，两队的走势差异会更直观。</p>
          </div>

          <p class="prod-hint">点上面的胶囊就能换视图，图形会平滑过渡，不会闪一下重新画一遍。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section prod-section" id="halves" aria-labelledby="halves-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">03</p>
        <h2 class="section__title" id="halves-title">比分拆成两段，节奏拐在哪看得见</h2>
        <p class="section__lede">一场球只给一个终场比分，很多事说不清楚。半场比分评测把它切成上半场和下半场两条走势，领先的一方是被追平还是继续拉开，进球挤在哪一段，中场回来后风向有没有变，都落在曲线上。</p>
      </div>

      <div class="prod-halves">
        <figure class="prod-line-figure">
          <svg class="prod-line" viewBox="0 0 640 240" role="img" aria-label="上半场与下半场比分走势折线图，两条曲线以不同线宽区分">
            <line class="prod-line__grid" x1="40" y1="40" x2="620" y2="40"></line>
            <line class="prod-line__grid" x1="40" y1="100" x2="620" y2="100"></line>
            <line class="prod-line__grid" x1="40" y1="160" x2="620" y2="160"></line>
            <line class="prod-line__axis" x1="40" y1="200" x2="620" y2="200"></line>
            <polyline class="prod-line__first" points="40,200 180,164 320,164 480,120 620,120"></polyline>
            <polyline class="prod-line__second" points="40,200 180,182 320,146 480,146 620,92"></polyline>
            <circle class="prod-line__node" cx="480" cy="120" r="6"></circle>
            <circle class="prod-line__node" cx="620" cy="92" r="6"></circle>
          </svg>
          <figcaption class="prod-line__caption">粗线为上半场走势，细线为下半场走势，荧光绿圆点标出转折位置</figcaption>
        </figure>

        <div class="prod-halves__notes">
          <h3 class="prod-subtitle">顺着两条线往下读</h3>
          <ul class="prod-list">
            <li><strong>领先有没有守住。</strong>上半场拉开的距离，下半场是原样保持，还是被一段连续进球抹平。</li>
            <li><strong>进球挤在哪一段。</strong>集中在上半场说明开局就定了调，落在下半场说明中场调整起了作用。</li>
            <li><strong>拐点落在哪个位置。</strong>两条曲线换向的地方，往往就是那场比赛的分水岭。</li>
          </ul>
          <p class="prod-note">曲线只描述已经发生的比分变化，用来复盘和对照，不替任何人判断下一场会怎么走。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section prod-section prod-section--tint" id="versions" aria-labelledby="versions-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">04</p>
        <h2 class="section__title" id="versions-title">按联赛分版本，视图跟着你换</h2>
        <p class="section__lede">同时追三五个联赛的人，最怕几套数据混在一起。赛事版本把每个联赛拆成独立的一套，各自带版本号，切过去以后图形、读数、字号阶梯全部跟着换，不用重新适应一遍。</p>
      </div>

      <div class="prod-versions">
        <figure class="img-frame prod-versions__figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="并排的联赛标签栏与数据面板示意，选中项带日落橙描边，背景为纸白卡片" loading="lazy" decoding="async">
          <figcaption class="img-frame__caption">版本切换：标签栏在上，数据面板在下</figcaption>
        </figure>

        <div class="prod-versions__read">
          <div class="chip-row prod-chips" data-tabs role="tablist" aria-label="赛事版本切换">
            <button class="chip" type="button" role="tab" id="ver-tab-league" aria-controls="ver-panel-league" aria-selected="true">联赛版本</button>
            <button class="chip" type="button" role="tab" id="ver-tab-cup" aria-controls="ver-panel-cup" aria-selected="false">洲际赛事版本</button>
          </div>

          <div class="prod-ver-panel" id="ver-panel-league" role="tabpanel" aria-labelledby="ver-tab-league" data-tab-panel>
            <p class="prod-ver__read numeral">12</p>
            <p class="prod-ver__label">个主流联赛各有一套版本号</p>
            <ul class="prod-list">
              <li>版本号跟着联赛走，互不覆盖，切过去就是那一个联赛的视图。</li>
              <li>两轮之间对照同一联赛的版本，改动落在哪个字段一目了然。</li>
              <li>换联赛不换配色与字号，看到的内容换了，眼睛不用重新认。</li>
            </ul>
          </div>

          <div class="prod-ver-panel" id="ver-panel-cup" role="tabpanel" aria-labelledby="ver-tab-cup" data-tab-panel>
            <p class="prod-ver__read numeral">6</p>
            <p class="prod-ver__label">项洲际赛事按阶段归档</p>
            <ul class="prod-list">
              <li>洲际赛事的版本按赛程阶段划分，小组赛与淘汰赛分开存放。</li>
              <li>赛程覆盖 28 个国家和地区的球队，赛区之间可横向对照。</li>
              <li>每个比赛日结束后补充当轮数据，版本号随之上抬一位。</li>
            </ul>
          </div>

          <p class="prod-hint">想翻看这些版本一路怎么变过来的，可以到<a href="/insights/">动态观察</a>里按时间往回读。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section prod-section" id="ucl" aria-labelledby="ucl-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">05</p>
        <h2 class="section__title" id="ucl-title">欧冠区间统计，从小组赛看到淘汰赛</h2>
        <p class="section__lede">杯赛和联赛的看数据方式不一样。区间统计按赛程阶段切段，每一段单独成块，赛程往后推进的时候，新的区间跟着补进来。</p>
      </div>

      <ol class="prod-stages">
        <li class="prod-stage">
          <span class="prod-stage__dot" aria-hidden="true"></span>
          <h3 class="prod-stage__title">小组赛区间</h3>
          <p class="prod-stage__text">分组阶段的数据按轮次聚拢，控球占比与半场比分都放在同一张面板上，能看清一支球队在整段分组期里的起伏。</p>
        </li>
        <li class="prod-stage">
          <span class="prod-stage__dot" aria-hidden="true"></span>
          <h3 class="prod-stage__title">淘汰赛区间</h3>
          <p class="prod-stage__text">两回合与单场对决分别成段，首回合与次回合的控球变化、上下半场的节奏差异都拆开摆，方便比对哪一场改变了整个走势。</p>
        </li>
        <li class="prod-stage">
          <span class="prod-stage__dot" aria-hidden="true"></span>
          <h3 class="prod-stage__title">阶段对照</h3>
          <p class="prod-stage__text">同一支球队在小组赛与淘汰赛的读数可以并排看。赛程越往后，对抗强度变化在控球曲线上的反映越明显。</p>
        </li>
      </ol>

      <div class="prod-ucl__strip">
        <span class="pill">小组赛起</span>
        <span class="pill">淘汰赛承</span>
        <span class="pill pill--accent">区间可对照</span>
      </div>
    </div>
  </section>

  <section class="section prod-section prod-section--deep" id="mobile" aria-labelledby="mobile-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">06</p>
        <h2 class="section__title" id="mobile-title">在 iPhone 上打开，读数一个不少</h2>
        <p class="section__lede">通勤路上、看球间隙，多数人是单手拿手机查一眼就走。iOS 移动端自适应把电脑端的那套排布重新折叠：字号不缩，只重排先后，数据卡片横向滑动就能比完。</p>
      </div>

      <div class="prod-mobile">
        <figure class="img-frame img-frame--portrait prod-mobile__figure">
          <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="竖版移动设备轮廓内显示横向滑动的数据卡片，设备外描边为湖蓝细线，背景虚化为奶油底" loading="lazy" decoding="async">
          <figcaption class="img-frame__caption">手机端：卡片横滑，单手完成两组数据对照</figcaption>
        </figure>

        <div class="prod-mobile__read">
          <div class="prod-swipe" role="group" aria-label="移动端数据卡片示例">
            <article class="card prod-swipe__card">
              <p class="prod-swipe__tag">控球</p>
              <p class="prod-swipe__read numeral">58%</p>
              <p class="prod-swipe__text">主队控球占比，湖蓝段长度即读数。</p>
            </article>
            <article class="card prod-swipe__card">
              <p class="prod-swipe__tag">半场</p>
              <p class="prod-swipe__read numeral">上 / 下</p>
              <p class="prod-swipe__text">比分拆成两段，粗线细线各占一条。</p>
            </article>
            <article class="card prod-swipe__card">
              <p class="prod-swipe__tag">版本</p>
              <p class="prod-swipe__read numeral">12</p>
              <p class="prod-swipe__text">联赛版本各带编号，左右滑动逐个切。</p>
            </article>
            <article class="card prod-swipe__card">
              <p class="prod-swipe__tag">赛事</p>
              <p class="prod-swipe__read numeral">6 项</p>
              <p class="prod-swipe__text">洲际赛事按阶段归档，翻到对应区间即可。</p>
            </article>
          </div>

          <ul class="prod-list prod-list--tight">
            <li>字号沿用电脑端的阶梯，打开就是原始大小，不用双指放大。</li>
            <li>可点区域不小于 44px，拇指落在哪一格都不会点偏。</li>
            <li>卡片滑到最边上，会有一条细线回弹，提示你已经到头了。</li>
            <li>横滑卡片与电脑端取同一份读数，两边看到的数字对得上。</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section prod-section" id="flow" aria-labelledby="flow-title">
    <div class="wrap">
      <div class="section__head prod-section__head">
        <p class="section__index">07</p>
        <h2 class="section__title" id="flow-title">三步走到你想看的那组对比</h2>
        <p class="section__lede">第一次进来不用琢磨菜单在哪。按顺序走完下面三步，该看的对比就已经摆在屏幕上了。</p>
      </div>

      <ol class="prod-flow">
        <li class="prod-flow__step">
          <span class="prod-flow__num numeral">01</span>
          <h3 class="prod-flow__title">先选联赛版本</h3>
          <p class="prod-flow__text">在版本条上点一下你常看的那个联赛，视图会整体换成那一个版本的排布。追多个联赛的话，来回点几下就能切换。</p>
        </li>
        <li class="prod-flow__step">
          <span class="prod-flow__num numeral">02</span>
          <h3 class="prod-flow__title">挑出要比的两支球队</h3>
          <p class="prod-flow__text">在控球率对比里把主客两边摆好，环形两段立刻按占比重画。两段长度的差距，就是两队在那段时间里的球权差距。</p>
        </li>
        <li class="prod-flow__step">
          <span class="prod-flow__num numeral">03</span>
          <h3 class="prod-flow__title">切到半场看走势</h3>
          <p class="prod-flow__text">换到半场比分评测，比分被拆成上下两段曲线。领先被追平、进球集中在哪一段，顺着线读下来就有答案。</p>
        </li>
      </ol>

      <p class="prod-flow__foot">操作上碰到卡住的地方，<a href="/faqs/">帮助问答</a>里按场景列了处理步骤，多数情况自己两步就能排查完。</p>
    </div>
  </section>

  <section class="prod-end">
    <div class="wrap">
      <h2 class="prod-end__title">想接着往下看</h2>
      <div class="prod-end__links">
        <a class="btn btn--solid" href="/insights/">看版本与专题更新</a>
        <a class="btn btn--ghost" href="/cooperation/">聊数据授权与共建</a>
        <a class="btn btn--quiet" href="/who-we-are/">了解运营团队</a>
      </div>
      <p class="prod-end__note">客服邮箱 contact@yueying-sprint.com.cn 与电话 400-1482-3968，工作日 9:00 至 18:00 有人应答。运营中心设在青海省西宁市城西区五四西路108号。</p>
    </div>
  </section>
</main>

/* ===== 平台功能页 · page-products ===== */
.page-products {
  --prod-tint: rgba(199, 220, 232, 0.42);
  --prod-gap: clamp(20px, 3.4vw, 40px);
}

/* 首屏 */
.page-products .prod-hero {
  padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4.6vw, 60px);
}

.page-products .prod-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
}

/* 章节通用 */
.page-products .prod-section {
  padding-block: clamp(46px, 6vw, 92px);
}

.page-products .prod-section--tint {
  background: var(--prod-tint);
  border-radius: var(--radius-lg);
  margin-inline: clamp(10px, 2vw, 26px);
}

.page-products .prod-section--deep {
  background: var(--ink-blue);
  color: var(--paper);
  border-radius: var(--radius-lg);
  margin-inline: clamp(10px, 2vw, 26px);
}

.page-products .prod-section--deep .section__title {
  color: var(--paper);
}

.page-products .prod-section--deep .section__lede {
  color: var(--paper);
  opacity: 0.82;
}

.page-products .prod-section__head {
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.page-products .prod-subtitle {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

/* 配图 */
.page-products .prod-figure {
  margin: 0 0 clamp(26px, 3.6vw, 44px);
}

.page-products .prod-figure img,
.page-products .prod-ctrl__figure img,
.page-products .prod-versions__figure img,
.page-products .prod-mobile__figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* 功能模块网格 */
.page-products .prod-modules {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(14px, 2vw, 22px);
}

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

@media (min-width: 1080px) {
  .page-products .prod-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .prod-modules > :nth-child(even) {
    margin-top: 26px;
  }
}

.page-products .prod-mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.6vw, 30px);
  color: inherit;
  text-decoration: none;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-products .prod-mod:hover,
.page-products .prod-mod:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.page-products .prod-mod__state {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgba(180, 230, 60, 0.24);
}

.page-products .prod-mod__idx {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray);
}

.page-products .prod-mod__read {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-blue);
}

.page-products .prod-mod .card__title {
  margin: 4px 0 0;
}

/* 控球率对比 */
.page-products .prod-ctrl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-ctrl {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: start;
  }
}

.page-products .prod-ctrl__figure {
  margin: 0;
}

.page-products .prod-chips {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

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

.page-products .prod-panel + .prod-panel {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}

.page-products .prod-ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(260px, 68vw);
  margin-inline: auto;
}

.page-products .prod-ring {
  width: 100%;
  height: auto;
  display: block;
}

.page-products .prod-ring__track {
  fill: none;
  stroke: var(--lake-soft);
  stroke-width: 20;
}

.page-products .prod-ring__fill {
  fill: none;
  stroke: var(--lake);
  stroke-width: 20;
  stroke-linecap: round;
}

.page-products .prod-ring__fill--away {
  stroke: var(--sunset);
}

.page-products .prod-ring__read {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-blue);
  font-variant-numeric: tabular-nums;
}

.page-products .prod-legend {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.page-products .prod-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page-products .prod-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.page-products .prod-legend__dot--home {
  background: var(--lake);
}

.page-products .prod-legend__dot--away {
  background: var(--sunset);
}

.page-products .prod-panel__text {
  margin: 14px 0 0;
  color: var(--gray);
  max-width: 46ch;
}

.page-products .prod-hint {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--gray);
}

.page-products .prod-hint a {
  color: var(--lake);
  text-underline-offset: 3px;
}

/* 半场比分评测 */
.page-products .prod-halves {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-halves {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
  }
}

.page-products .prod-line-figure {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}

.page-products .prod-line {
  width: 100%;
  height: auto;
  display: block;
}

.page-products .prod-line__grid {
  stroke: var(--rule);
  stroke-width: 1;
}

.page-products .prod-line__axis {
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}

.page-products .prod-line__first {
  fill: none;
  stroke: var(--lake);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .prod-line__second {
  fill: none;
  stroke: var(--sunset);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-products .prod-line__node {
  fill: var(--neon);
}

.page-products .prod-line__caption {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gray);
}

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

.page-products .prod-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  line-height: 1.75;
}

.page-products .prod-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--sunset);
  border-radius: 2px;
}

.page-products .prod-list strong {
  font-weight: 600;
  color: var(--ink-blue);
}

.page-products .prod-note {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--neon);
  background: rgba(180, 230, 60, 0.12);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
  color: var(--ink);
}

/* 赛事版本 */
.page-products .prod-versions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-versions {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }
}

.page-products .prod-versions__figure {
  margin: 0;
}

.page-products .prod-ver-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}

.page-products .prod-ver-panel + .prod-ver-panel {
  margin-top: 18px;
}

.page-products .prod-ver__read {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sunset);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.page-products .prod-ver__label {
  margin: 8px 0 18px;
  font-size: 15px;
  color: var(--gray);
}

/* 欧冠区间 */
.page-products .prod-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 28px);
}

@media (min-width: 860px) {
  .page-products .prod-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .prod-stage {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
}

.page-products .prod-stage__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 5px rgba(180, 230, 60, 0.22);
  margin-bottom: 16px;
}

.page-products .prod-stage__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink-blue);
}

.page-products .prod-stage__text {
  margin: 0;
  color: var(--gray);
  line-height: 1.78;
}

.page-products .prod-ucl__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

/* 移动端 */
.page-products .prod-mobile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prod-gap);
}

@media (min-width: 900px) {
  .page-products .prod-mobile {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }
}

.page-products .prod-mobile__figure {
  margin: 0;
}

.page-products .prod-mobile__figure img {
  border: 1px solid rgba(199, 220, 232, 0.7);
}

.page-products .prod-swipe {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
}

.page-products .prod-swipe__card {
  flex: 0 0 min(76%, 280px);
  scroll-snap-align: start;
  padding: 22px;
  background: var(--white);
  border-radius: var(--radius-md);
}

.page-products .prod-swipe__tag {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sunset);
}

.page-products .prod-swipe__read {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-blue);
  font-variant-numeric: tabular-nums;
}

.page-products .prod-swipe__text {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
}

.page-products .prod-list--tight {
  margin-top: clamp(22px, 3vw, 32px);
}

.page-products .prod-section--deep .prod-list li,
.page-products .prod-section--deep .prod-list strong {
  color: var(--paper);
}

.page-products .prod-section--deep .prod-list li {
  opacity: 0.9;
}

.page-products .prod-section--deep .prod-list li::before {
  background: var(--neon);
}

.page-products .prod-section--deep .prod-swipe__card {
  background: var(--white);
}

/* 上手流程 */
.page-products .prod-flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 40px);
}

@media (min-width: 860px) {
  .page-products .prod-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .prod-flow::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: var(--rule-strong);
  }
}

.page-products .prod-flow__step {
  position: relative;
}

.page-products .prod-flow__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--sunset);
  margin-bottom: 18px;
}

.page-products .prod-flow__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  color: var(--ink-blue);
}

.page-products .prod-flow__text {
  margin: 0;
  color: var(--gray);
  line-height: 1.78;
  max-width: 40ch;
}

.page-products .prod-flow__foot {
  margin: clamp(30px, 4vw, 46px) 0 0;
  color: var(--gray);
}

.page-products .prod-flow__foot a {
  color: var(--lake);
  text-underline-offset: 3px;
}

/* 结尾 */
.page-products .prod-end {
  padding-block: clamp(44px, 6vw, 84px) clamp(50px, 7vw, 96px);
}

.page-products .prod-end__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink-blue);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.page-products .prod-end__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .prod-end__note {
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-size: 14.5px;
  color: var(--gray);
  max-width: 62ch;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prod-mod {
    transition: none;
  }
}