.page-products {
  --pd-gap: clamp(16px, 3vw, 28px);
  --pd-ink: #121417;
  --pd-ink-soft: rgba(18, 20, 23, .08);
  background: var(--charcoal);
  color: var(--mist);
  font-family: var(--font-body);
}

.page-products .section--mist {
  color: var(--charcoal);
}

.page-products .container {
  width: 100%;
}

/* 面包屑 */
.page-products .pd-crumb {
  margin-bottom: clamp(20px, 4vw, 34px);
}

/* 首屏 */
.page-products .pd-hero {
  padding-top: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 107, 26, .16), transparent 46%),
    var(--charcoal);
}

.page-products .pd-hero-grid {
  display: grid;
  gap: clamp(26px, 5vw, 56px);
  align-items: start;
  grid-template-columns: 1fr;
}

.page-products .pd-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 6.2vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 18px 0 20px;
  color: var(--mist);
}

.page-products .pd-hero .lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  color: var(--steel);
}

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

.page-products .pd-hero-stats {
  list-style: none;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 22px 0 0;
  border-top: var(--bw) solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.page-products .pd-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-products .pd-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--pulse);
}

.page-products .pd-stat-key {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--steel);
}

/* 通用媒体框 */
.page-products .pd-media {
  margin: 0;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-hard);
  background: var(--slate);
  overflow: hidden;
}

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

.page-products .pd-hero-media {
  border-color: var(--signal);
}

/* 区块标题 */
.page-products .pd-sec-head {
  max-width: 64ch;
}

.page-products .pd-sec-head h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 14px 0 12px;
  color: var(--mist);
}

.page-products .pd-sec-head p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-sec-head--ink h2 {
  color: var(--charcoal);
}

.page-products .pd-sec-head--ink p {
  color: var(--muted);
}

/* 路径选择 */
.page-products .pd-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 40px);
}

.page-products .pd-path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--charcoal);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-hard);
  color: var(--mist);
  text-decoration: none;
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-products .pd-path-card:hover,
.page-products .pd-path-card:focus-visible {
  transform: translate(-3px, -3px);
  border-color: var(--signal);
  box-shadow: var(--shadow-lift);
}

.page-products .pd-path-idx {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--signal);
}

.page-products .pd-path-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--mist);
}

.page-products .pd-path-card p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .pd-path-go {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--pulse);
}

/* 数据区 */
.page-products .pd-asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-data-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--mist);
}

.page-products .pd-data-copy p {
  margin: 0 0 14px;
  line-height: 1.85;
  color: var(--steel);
  max-width: 48ch;
}

.page-products .pd-flaglist {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-flaglist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--steel);
}

.page-products .pd-flaglist .tag {
  flex: 0 0 auto;
}

.page-products .pd-metrics {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: var(--bw) solid var(--line);
}

.page-products .pd-metrics-title {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--steel);
}

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

.page-products .pd-metric-list li {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: var(--slate);
  color: var(--mist);
}

.page-products .pd-metric-list li:nth-child(1),
.page-products .pd-metric-list li:nth-child(2),
.page-products .pd-metric-list li:nth-child(3) {
  border-color: var(--signal);
  color: var(--signal);
}

.page-products .pd-metrics-note {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--steel);
}

/* 对比条 */
.page-products .pd-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 38px);
  align-items: start;
}

.page-products .pd-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.page-products .pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.page-products .pd-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--charcoal);
  background: transparent;
  border: 1.5px solid var(--charcoal);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}

.page-products .pd-chip:hover {
  background: rgba(18, 20, 23, .06);
}

.page-products #pd-m-run:checked ~ .pd-chips label[for="pd-m-run"],
.page-products #pd-m-shot:checked ~ .pd-chips label[for="pd-m-shot"],
.page-products #pd-m-poss:checked ~ .pd-chips label[for="pd-m-poss"] {
  background: var(--charcoal);
  color: var(--mist);
}

.page-products #pd-m-run:focus-visible ~ .pd-chips label[for="pd-m-run"],
.page-products #pd-m-shot:focus-visible ~ .pd-chips label[for="pd-m-shot"],
.page-products #pd-m-poss:focus-visible ~ .pd-chips label[for="pd-m-poss"] {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.page-products .pd-view {
  display: none;
}

.page-products #pd-m-run:checked ~ .pd-views .pd-view--run,
.page-products #pd-m-shot:checked ~ .pd-views .pd-view--shot,
.page-products #pd-m-poss:checked ~ .pd-views .pd-view--poss {
  display: block;
}

.page-products .pd-view-note {
  margin: 0 0 20px;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.page-products .pd-bar-key {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--charcoal);
}

.page-products .pd-bar {
  height: 16px;
  border: 1.5px solid var(--charcoal);
  background: var(--pd-ink-soft);
  overflow: hidden;
}

.page-products .pd-bar-fill {
  display: block;
  height: 100%;
  background: var(--signal);
}

.page-products .pd-bar--b .pd-bar-fill {
  background: var(--slate);
}

.page-products .pd-compare-media {
  border-color: var(--charcoal);
  box-shadow: 8px 8px 0 rgba(18, 20, 23, .18);
  background: var(--slate);
}

/* 历史交锋 */
.page-products .pd-history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 38px);
  align-items: start;
}

.page-products .pd-timeline {
  position: relative;
  padding-left: 26px;
}

.page-products .pd-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--signal), var(--pulse));
}

.page-products .pd-node {
  position: relative;
  margin-bottom: 12px;
  border: var(--bw) solid var(--line);
  background: var(--slate);
  transition: border-color .18s ease;
}

.page-products .pd-node::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--charcoal);
}

.page-products .pd-node[open] {
  border-color: var(--signal);
}

.page-products .pd-node summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

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

.page-products .pd-node-idx {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--signal);
}

.page-products .pd-node-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mist);
}

.page-products .pd-node-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--steel);
}

.page-products .pd-node p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: .9375rem;
  line-height: 1.78;
  color: var(--steel);
}

/* 旧版栏目 */
.page-products .pd-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-products .pd-archive-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--charcoal);
}

.page-products .pd-archive-copy p {
  margin: 0 0 14px;
  max-width: 46ch;
  line-height: 1.85;
  color: #3a434d;
}

.page-products .pd-inline-link {
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-products .pd-inline-link:hover {
  color: #b34a10;
}

.page-products .pd-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--bw) solid var(--charcoal);
}

.page-products .pd-archive-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1.5px solid rgba(18, 20, 23, .2);
}

.page-products .pd-archive-idx {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: 3px;
}

.page-products .pd-archive-list strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.page-products .pd-archive-list p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: #3a434d;
}

/* 移动端 */
.page-products .pd-mobile {
  background:
    radial-gradient(circle at 12% 88%, rgba(125, 255, 106, .12), transparent 50%),
    var(--charcoal);
}

.page-products .pd-mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-products .pd-mobile-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--mist);
}

.page-products .pd-mobile-copy > p {
  margin: 0 0 22px;
  max-width: 48ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-mobile-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pd-mobile-list li {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--signal);
}

.page-products .pd-mobile-list strong {
  font-size: .9375rem;
  color: var(--mist);
}

.page-products .pd-mobile-list span {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .pd-mobile-media {
  border-color: var(--pulse);
}

/* 下一步 */
.page-products .pd-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}

.page-products .pd-next h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}

.page-products .pd-next p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--bw) solid var(--line);
}

.page-products .pd-next-links li {
  border-bottom: var(--bw) solid var(--line);
}

.page-products .pd-next-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 6px;
  font-size: .9375rem;
  color: var(--mist);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.page-products .pd-next-links a .mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--signal);
}

.page-products .pd-next-links a:hover,
.page-products .pd-next-links a:focus-visible {
  background: rgba(255, 107, 26, .12);
  color: var(--signal);
  padding-left: 14px;
}

/* 断点 */
@media (min-width: 600px) {
  .page-products .pd-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

  .page-products .pd-path-card:nth-child(1) {
    grid-column: span 4;
  }

  .page-products .pd-path-card:nth-child(2) {
    grid-column: span 2;
  }

  .page-products .pd-path-card:nth-child(3) {
    grid-column: span 2;
  }

  .page-products .pd-path-card:nth-child(4) {
    grid-column: span 4;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(34px, 5vw, 68px);
  }

  .page-products .pd-asym {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-products .pd-compare-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-products .pd-history-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-archive-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-mobile-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-products .pd-next-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-path-card,
  .page-products .pd-next-links a,
  .page-products .pd-chip {
    transition: none;
  }

  .page-products .pd-path-card:hover,
  .page-products .pd-path-card:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <section class="section section--dark pd-hero">
    <div class="container">
      <nav class="breadcrumb pd-crumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">赛季追踪台</a></li>
          <li class="breadcrumb-item"><span class="breadcrumb-link" aria-current="page">面板与数据区</span></li>
        </ol>
      </nav>
      <div class="pd-hero-grid">
        <div class="pd-hero-copy" data-reveal>
          <span class="tag tag--signal">PANEL 4.2 · ROUND 17</span>
          <h1>火狐体育新版面板：红黄牌、跑动射门与近5次交锋，一条路查到底</h1>
          <p class="lede">赛季追到第17轮，你要的答案常常散在几个角落——谁吃了牌在数据区，两边跑动和射门谁更凶要比对条，上一次交手是什么局面得进对话页。火狐体育把这些入口摆进同一块面板，按轮次同步刷新，手机和桌面从同一个入口进，不用在标签之间反复试探。</p>
          <div class="pd-hero-actions">
            <a class="btn btn--signal" href="#data">进赛事数据区</a>
            <a class="btn btn--ghost" href="#history">看近5次交锋</a>
          </div>
          <ul class="pd-hero-stats">
            <li><span class="pd-stat-num mono">17</span><span class="pd-stat-key">当前轮次</span></li>
            <li><span class="pd-stat-num mono">12</span><span class="pd-stat-key">核心指标</span></li>
            <li><span class="pd-stat-num mono">1,860</span><span class="pd-stat-key">历史对阵</span></li>
            <li><span class="pd-stat-num mono">5</span><span class="pd-stat-key">一级分类</span></li>
          </ul>
        </div>
        <figure class="pd-media pd-hero-media" data-reveal data-reveal-delay="120">
          <img src="{zhanqunpic:h:750w:1200}" width="1200" height="750" alt="深色仪表盘上并排的面板切片、分类标签与橙色数据条">
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--slate pd-paths" id="paths">
    <div class="container">
      <header class="pd-sec-head" data-reveal>
        <span class="tag">[ 路径选择 ]</span>
        <h2>先定一件事：你此刻想查什么</h2>
        <p>红黄牌、跑动射门、历史交锋、翻旧栏目，四类需求各有入口。挑一个点进去，落点就是你要的那张卡。</p>
      </header>
      <div class="pd-path-grid">
        <a class="pd-path-card" href="#data" data-reveal>
          <span class="pd-path-idx">01 / 赛事数据区</span>
          <h3>这轮谁吃了牌</h3>
          <p>红黄牌跟着轮次卡走，和另外十一项指标并排，切轮次整组刷新。</p>
          <span class="pd-path-go">去数据区 →</span>
        </a>
        <a class="pd-path-card" href="#compare" data-reveal data-reveal-delay="80">
          <span class="pd-path-idx">02 / 轮次对比条</span>
          <h3>谁跑得多、谁射得准</h3>
          <p>主客队横向排开，一场比赛的身体投入和进攻意愿一眼读出来。</p>
          <span class="pd-path-go">看对比条 →</span>
        </a>
        <a class="pd-path-card" href="#history" data-reveal data-reveal-delay="160">
          <span class="pd-path-idx">03 / 板块对话页</span>
          <h3>上次交手怎么回事</h3>
          <p>近5次对阵先摆出来，主客场、赛事类型、比分走势按时间串成一条线。</p>
          <span class="pd-path-go">进对话页 →</span>
        </a>
        <a class="pd-path-card" href="#mobile" data-reveal data-reveal-delay="240">
          <span class="pd-path-idx">04 / 移动入口</span>
          <h3>想在手机上接着看</h3>
          <p>手机与桌面共用同一入口，底部固定四个位置，滚到哪都不飘。</p>
          <span class="pd-path-go">看移动端 →</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section section--dark pd-data" id="data">
    <div class="container">
      <div class="pd-asym">
        <div class="pd-data-copy" data-reveal>
          <span class="tag tag--red">赛事数据区</span>
          <h2>红黄牌和十一项指标，排在同一张轮次卡里</h2>
          <p>查火狐体育红黄牌记录不用绕路：进赛事数据区，选轮次，牌数直接出现在比分旁边。黄牌走琥珀色，红牌走朱红色，扫一眼就知道这场比赛的火药味有多重。</p>
          <p>跑动距离、射门次数、控球率、传球成功率、抢断、角球、越位、犯规、扑救、预期进球、对抗成功率，连同红黄牌合计12项，全部按轮次同步，切一次轮次整张卡一起换。</p>
          <ul class="pd-flaglist">
            <li><span class="tag tag--amber">黄牌</span><span>跟随轮次卡更新，累计张数直接列在球队名下。</span></li>
            <li><span class="tag tag--red">红牌</span><span>单独成行，与黄牌分开统计，看的时候不会混。</span></li>
            <li><span class="tag tag--green">已更新</span><span>每轮比赛结束后24小时内，核心数据摘要完成刷新。</span></li>
          </ul>
        </div>
        <figure class="pd-media pd-data-media" data-reveal data-reveal-delay="100">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="红黄牌色块、轮次编号卡与数据区网格组合成的抽象画面">
        </figure>
      </div>
      <div class="pd-metrics" data-reveal>
        <h3 class="pd-metrics-title">12 CORE METRICS · ROUND 17</h3>
        <ul class="pd-metric-list">
          <li>红黄牌</li>
          <li>跑动距离</li>
          <li>射门次数</li>
          <li>控球率</li>
          <li>传球成功率</li>
          <li>抢断</li>
          <li>角球</li>
          <li>越位</li>
          <li>犯规</li>
          <li>扑救</li>
          <li>预期进球</li>
          <li>对抗成功率</li>
        </ul>
        <p class="pd-metrics-note">新版面板把指标收进赛事数据、板块对话、历史交锋、旧版档案、移动入口五个一级分类标签，要找的字段跟着分类走，不必在长页面里来回翻找。</p>
      </div>
    </div>
  </section>

  <section class="section section--mist pd-compare" id="compare">
    <div class="container">
      <header class="pd-sec-head pd-sec-head--ink" data-reveal>
        <span class="tag">[ 轮次对比条 ]</span>
        <h2>跑动距离和射门次数，横着看才比得出来</h2>
        <p>同一场比赛的主客队、同一轮次的不同场次，都能拉成横向条来比。想换一个指标，点上面的标签就行。</p>
      </header>
      <div class="pd-compare-grid">
        <div class="pd-filter" data-reveal>
          <input class="pd-radio" type="radio" name="pd-metric" id="pd-m-run" checked>
          <input class="pd-radio" type="radio" name="pd-metric" id="pd-m-shot">
          <input class="pd-radio" type="radio" name="pd-metric" id="pd-m-poss">
          <div class="pd-chips">
            <label class="pd-chip" for="pd-m-run">跑动距离</label>
            <label class="pd-chip" for="pd-m-shot">射门次数</label>
            <label class="pd-chip" for="pd-m-poss">控球率</label>
          </div>
          <div class="pd-views">
            <div class="pd-view pd-view--run">
              <p class="pd-view-note">跑动距离按主客队分列，条越长代表全场覆盖范围越大，适合判断哪一方把节奏跑了出来。</p>
              <div class="pd-bar-row">
                <span class="pd-bar-key">主队</span>
                <div class="pd-bar"><span class="pd-bar-fill" style="width:82%"></span></div>
              </div>
              <div class="pd-bar-row">
                <span class="pd-bar-key">客队</span>
                <div class="pd-bar pd-bar--b"><span class="pd-bar-fill" style="width:68%"></span></div>
              </div>
            </div>
            <div class="pd-view pd-view--shot">
              <p class="pd-view-note">射门次数合并了禁区内外的起脚，条的长短能看出哪边进攻回合更多，配合预期进球读更准。</p>
              <div class="pd-bar-row">
                <span class="pd-bar-key">主队</span>
                <div class="pd-bar"><span class="pd-bar-fill" style="width:74%"></span></div>
              </div>
              <div class="pd-bar-row">
                <span class="pd-bar-key">客队</span>
                <div class="pd-bar pd-bar--b"><span class="pd-bar-fill" style="width:56%"></span></div>
              </div>
            </div>
            <div class="pd-view pd-view--poss">
              <p class="pd-view-note">控球率最直观地说明风格差异：一边压着打还是一边等着打，条的长短基本能看出来。</p>
              <div class="pd-bar-row">
                <span class="pd-bar-key">主队</span>
                <div class="pd-bar"><span class="pd-bar-fill" style="width:63%"></span></div>
              </div>
              <div class="pd-bar-row">
                <span class="pd-bar-key">客队</span>
                <div class="pd-bar pd-bar--b"><span class="pd-bar-fill" style="width:45%"></span></div>
              </div>
            </div>
          </div>
        </div>
        <figure class="pd-media pd-compare-media" data-reveal data-reveal-delay="120">
          <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" loading="lazy" decoding="async" alt="球场局部纹理上的跑动轨迹与射门方向光轨，冷灰蓝底上点缀荧光绿亮点">
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--dark pd-history" id="history">
    <div class="container">
      <header class="pd-sec-head" data-reveal>
        <span class="tag tag--green">板块对话页</span>
        <h2>约火狐体育看历史交锋，从近5次对阵开始读</h2>
        <p>进对话页选好对阵双方，最近5次交手先按时间排开，节点标着主客场和赛事类型；想往更早翻，顺着时间轴继续往下走。</p>
      </header>
      <div class="pd-history-grid">
        <figure class="pd-media pd-history-media" data-reveal>
          <img src="{zhanqunpic:h:620w:1100}" width="1100" height="620" loading="lazy" decoding="async" alt="双方近5次对阵的时间轴插画，节点用橙色与灰蓝区分主客场">
        </figure>
        <div class="pd-timeline" data-reveal data-reveal-delay="120">
          <details class="pd-node" open>
            <summary>
              <span class="pd-node-idx">05</span>
              <span class="pd-node-title">最近一次交手</span>
              <span class="pd-node-meta">主场 · 联赛</span>
            </summary>
            <p>展开这个节点，比分走势、红黄牌和射门对比都在摘要里，看完再决定要不要往更早翻。</p>
          </details>
          <details class="pd-node">
            <summary>
              <span class="pd-node-idx">04</span>
              <span class="pd-node-title">往前第2次</span>
              <span class="pd-node-meta">客场 · 杯赛</span>
            </summary>
            <p>杯赛碰面轮换往往更多，摘要会同时给出这场的关键指标，方便和联赛成绩分开判断。</p>
          </details>
          <details class="pd-node">
            <summary>
              <span class="pd-node-idx">03</span>
              <span class="pd-node-title">往前第3次</span>
              <span class="pd-node-meta">主场 · 联赛</span>
            </summary>
            <p>同一赛季的联赛对阵，主客场标记和轮次编号一起显示，回看某一段走势时不用重新找。</p>
          </details>
          <details class="pd-node">
            <summary>
              <span class="pd-node-idx">02</span>
              <span class="pd-node-title">往前第4次</span>
              <span class="pd-node-meta">客场 · 友谊赛</span>
            </summary>
            <p>友谊赛的参考价值和正式比赛不同，摘要把赛事类型标在最前面，读的时候心里有数。</p>
          </details>
          <details class="pd-node">
            <summary>
              <span class="pd-node-idx">01</span>
              <span class="pd-node-title">往前第5次</span>
              <span class="pd-node-meta">主场 · 联赛</span>
            </summary>
            <p>第5场是近5次对阵的边界，再往前的记录可以继续展开，累计整理的对阵已经超过1,860场。</p>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--mist pd-archive" id="archive">
    <div class="container">
      <div class="pd-archive-grid">
        <div class="pd-archive-copy" data-reveal>
          <span class="tag">[ 旧版栏目 ]</span>
          <h2>用惯了老位置，侧边栏第二栏照旧</h2>
          <p>新版面板换了分类标签，旧版栏目没有被收进折叠菜单，而是固定在侧边栏第二栏，按赛程、球队、数据、专题、帮助五类归档。老用户点开就能接着用，不必重新适应一套导航。</p>
          <p>想先弄明白新版标签和旧栏目的对应关系，可以翻一翻<a class="pd-inline-link" href="/answers/">答疑档案</a>，那里按“找什么—去哪里”把常见路径列了出来。</p>
        </div>
        <ol class="pd-archive-list" data-reveal data-reveal-delay="120">
          <li>
            <span class="pd-archive-idx">01</span>
            <div>
              <strong>赛程</strong>
              <p>按轮次排开的比赛日历，点进任意一场就是当轮数据的入口。</p>
            </div>
          </li>
          <li>
            <span class="pd-archive-idx">02</span>
            <div>
              <strong>球队</strong>
              <p>常跟的球队单独成档，主客场表现和近期轮次归在一起。</p>
            </div>
          </li>
          <li>
            <span class="pd-archive-idx">03</span>
            <div>
              <strong>数据</strong>
              <p>习惯看的旧版指标视图，字段位置没有挪动。</p>
            </div>
          </li>
          <li>
            <span class="pd-archive-idx">04</span>
            <div>
              <strong>专题</strong>
              <p>赛季回顾与阶段性观察的合辑，适合整段回看。</p>
            </div>
          </li>
          <li>
            <span class="pd-archive-idx">05</span>
            <div>
              <strong>帮助</strong>
              <p>找不到栏目时的说明入口，写清了每个区块放什么内容。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section section--dark pd-mobile" id="mobile">
    <div class="container">
      <div class="pd-mobile-grid">
        <div class="pd-mobile-copy" data-reveal>
          <span class="tag tag--signal">移动入口</span>
          <h2>手机和桌面进的是同一块面板</h2>
          <p>通勤路上打开跟在电脑前打开，落在同一个入口，不会因为换了设备就要重找一遍。移动端改成单列滚动，轮次卡一张接一张往下走，横向对比条自动收窄，手指划着也能读清楚。</p>
          <ul class="pd-mobile-list">
            <li><strong>底部固定入口</strong><span>首页、数据、对话、答疑四个位置常驻底部，滚到哪都不飘走。</span></li>
            <li><strong>单列阅读</strong><span>轮次卡纵向推进，红黄牌徽标和指标并排时自动换行。</span></li>
            <li><strong>同一份数据</strong><span>筛过的轮次和球队，切到桌面端依然对得上。</span></li>
          </ul>
          <a class="btn btn--signal" href="/answers/">看移动端常见路径</a>
        </div>
        <figure class="pd-media pd-mobile-media" data-reveal data-reveal-delay="140">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="手持手机查看赛季面板的侧影，屏幕透出橙色与荧光绿的界面光晕">
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--slate pd-next">
    <div class="container">
      <div class="pd-next-grid">
        <div data-reveal>
          <h2>接着往下走</h2>
          <p>如果哪条数据对不上，把截图和轮次编号发过来，编辑复核后会在下一次轮次更新里修正；想看面板每月的新变化，赛季通讯一直在更新。</p>
        </div>
        <ul class="pd-next-links" data-reveal data-reveal-delay="100">
          <li><a href="/blog/"><span class="mono">01</span>面板更新与轮次观察 · 赛季通讯</a></li>
          <li><a href="/inquiry/"><span class="mono">02</span>数据需要纠正 · 联络与纠错</a></li>
          <li><a href="/who-we-are/"><span class="mono">03</span>谁在做这块面板 · 品牌档案室</a></li>
          <li><a href="/privacy-center/"><span class="mono">04</span>访问信息如何处理 · 隐私中心</a></li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pd-gap: clamp(16px, 3vw, 28px);
  --pd-ink-soft: rgba(18, 20, 23, .08);
  background: var(--charcoal);
  color: var(--mist);
  font-family: var(--font-body);
}

.page-products .section--mist {
  color: var(--charcoal);
}

.page-products .container {
  width: 100%;
}

/* 面包屑 */
.page-products .pd-crumb {
  margin-bottom: clamp(20px, 4vw, 34px);
}

/* 首屏 */
.page-products .pd-hero {
  padding-top: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 107, 26, .16), transparent 46%),
    var(--charcoal);
}

.page-products .pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 5vw, 56px);
  align-items: start;
}

.page-products .pd-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 6.2vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 18px 0 20px;
  color: var(--mist);
}

.page-products .pd-hero .lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  color: var(--steel);
}

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

.page-products .pd-hero-stats {
  list-style: none;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 22px 0 0;
  border-top: var(--bw) solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.page-products .pd-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-products .pd-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--pulse);
}

.page-products .pd-stat-key {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--steel);
}

/* 媒体框 */
.page-products .pd-media {
  margin: 0;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-hard);
  background: var(--slate);
  overflow: hidden;
}

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

.page-products .pd-hero-media {
  border-color: var(--signal);
}

/* 区块标题 */
.page-products .pd-sec-head {
  max-width: 64ch;
}

.page-products .pd-sec-head h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 14px 0 12px;
  color: var(--mist);
}

.page-products .pd-sec-head p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-sec-head--ink h2 {
  color: var(--charcoal);
}

.page-products .pd-sec-head--ink p {
  color: var(--muted);
}

/* 路径选择 */
.page-products .pd-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 40px);
}

.page-products .pd-path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--charcoal);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-hard);
  color: var(--mist);
  text-decoration: none;
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-products .pd-path-card:hover,
.page-products .pd-path-card:focus-visible {
  transform: translate(-3px, -3px);
  border-color: var(--signal);
  box-shadow: var(--shadow-lift);
}

.page-products .pd-path-idx {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--signal);
}

.page-products .pd-path-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--mist);
}

.page-products .pd-path-card p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .pd-path-go {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--pulse);
}

/* 数据区 */
.page-products .pd-asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-data-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--mist);
}

.page-products .pd-data-copy p {
  margin: 0 0 14px;
  max-width: 48ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-flaglist {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-flaglist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--steel);
}

.page-products .pd-flaglist .tag {
  flex: 0 0 auto;
}

.page-products .pd-metrics {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: var(--bw) solid var(--line);
}

.page-products .pd-metrics-title {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--steel);
}

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

.page-products .pd-metric-list li {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: var(--slate);
  color: var(--mist);
}

.page-products .pd-metric-list li:nth-child(1),
.page-products .pd-metric-list li:nth-child(2),
.page-products .pd-metric-list li:nth-child(3) {
  border-color: var(--signal);
  color: var(--signal);
}

.page-products .pd-metrics-note {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--steel);
}

/* 对比条 */
.page-products .pd-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 38px);
  align-items: start;
}

.page-products .pd-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.page-products .pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.page-products .pd-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--charcoal);
  background: transparent;
  border: 1.5px solid var(--charcoal);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}

.page-products .pd-chip:hover {
  background: rgba(18, 20, 23, .06);
}

.page-products #pd-m-run:checked ~ .pd-chips label[for="pd-m-run"],
.page-products #pd-m-shot:checked ~ .pd-chips label[for="pd-m-shot"],
.page-products #pd-m-poss:checked ~ .pd-chips label[for="pd-m-poss"] {
  background: var(--charcoal);
  color: var(--mist);
}

.page-products #pd-m-run:focus-visible ~ .pd-chips label[for="pd-m-run"],
.page-products #pd-m-shot:focus-visible ~ .pd-chips label[for="pd-m-shot"],
.page-products #pd-m-poss:focus-visible ~ .pd-chips label[for="pd-m-poss"] {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.page-products .pd-view {
  display: none;
}

.page-products #pd-m-run:checked ~ .pd-views .pd-view--run,
.page-products #pd-m-shot:checked ~ .pd-views .pd-view--shot,
.page-products #pd-m-poss:checked ~ .pd-views .pd-view--poss {
  display: block;
}

.page-products .pd-view-note {
  margin: 0 0 20px;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-products .pd-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.page-products .pd-bar-key {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--charcoal);
}

.page-products .pd-bar {
  height: 16px;
  border: 1.5px solid var(--charcoal);
  background: var(--pd-ink-soft);
  overflow: hidden;
}

.page-products .pd-bar-fill {
  display: block;
  height: 100%;
  background: var(--signal);
}

.page-products .pd-bar--b .pd-bar-fill {
  background: var(--slate);
}

.page-products .pd-compare-media {
  border-color: var(--charcoal);
  box-shadow: 8px 8px 0 rgba(18, 20, 23, .18);
  background: var(--slate);
}

/* 历史交锋 */
.page-products .pd-history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 38px);
  align-items: start;
}

.page-products .pd-timeline {
  position: relative;
  padding-left: 26px;
}

.page-products .pd-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--signal), var(--pulse));
}

.page-products .pd-node {
  position: relative;
  margin-bottom: 12px;
  border: var(--bw) solid var(--line);
  background: var(--slate);
  transition: border-color .18s ease;
}

.page-products .pd-node::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--charcoal);
}

.page-products .pd-node[open] {
  border-color: var(--signal);
}

.page-products .pd-node summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

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

.page-products .pd-node-idx {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--signal);
}

.page-products .pd-node-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mist);
}

.page-products .pd-node-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--steel);
}

.page-products .pd-node p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: .9375rem;
  line-height: 1.78;
  color: var(--steel);
}

/* 旧版栏目 */
.page-products .pd-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-products .pd-archive-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--charcoal);
}

.page-products .pd-archive-copy p {
  margin: 0 0 14px;
  max-width: 46ch;
  line-height: 1.85;
  color: #3a434d;
}

.page-products .pd-inline-link {
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-products .pd-inline-link:hover {
  color: #b34a10;
}

.page-products .pd-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--bw) solid var(--charcoal);
}

.page-products .pd-archive-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1.5px solid rgba(18, 20, 23, .2);
}

.page-products .pd-archive-idx {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: 3px;
}

.page-products .pd-archive-list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--charcoal);
}

.page-products .pd-archive-list p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: #3a434d;
}

/* 移动端 */
.page-products .pd-mobile {
  background:
    radial-gradient(circle at 12% 88%, rgba(125, 255, 106, .12), transparent 50%),
    var(--charcoal);
}

.page-products .pd-mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-products .pd-mobile-copy h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.22;
  margin: 14px 0 16px;
  color: var(--mist);
}

.page-products .pd-mobile-copy > p {
  margin: 0 0 22px;
  max-width: 48ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-mobile-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pd-mobile-list li {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--signal);
}

.page-products .pd-mobile-list strong {
  font-size: .9375rem;
  color: var(--mist);
}

.page-products .pd-mobile-list span {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .pd-mobile-media {
  border-color: var(--pulse);
}

/* 下一步 */
.page-products .pd-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}

.page-products .pd-next h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}

.page-products .pd-next p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.85;
  color: var(--steel);
}

.page-products .pd-next-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--bw) solid var(--line);
}

.page-products .pd-next-links li {
  border-bottom: var(--bw) solid var(--line);
}

.page-products .pd-next-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 6px;
  font-size: .9375rem;
  color: var(--mist);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.page-products .pd-next-links a .mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--signal);
}

.page-products .pd-next-links a:hover,
.page-products .pd-next-links a:focus-visible {
  background: rgba(255, 107, 26, .12);
  color: var(--signal);
  padding-left: 14px;
}

/* 断点 */
@media (min-width: 600px) {
  .page-products .pd-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

  .page-products .pd-path-card:nth-child(1) {
    grid-column: span 4;
  }

  .page-products .pd-path-card:nth-child(2) {
    grid-column: span 2;
  }

  .page-products .pd-path-card:nth-child(3) {
    grid-column: span 2;
  }

  .page-products .pd-path-card:nth-child(4) {
    grid-column: span 4;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(34px, 5vw, 68px);
  }

  .page-products .pd-asym {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-products .pd-compare-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-products .pd-history-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-archive-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-products .pd-mobile-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-products .pd-next-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-path-card,
  .page-products .pd-next-links a,
  .page-products .pd-chip,
  .page-products .pd-node {
    transition: none;
  }

  .page-products .pd-path-card:hover,
  .page-products .pd-path-card:focus-visible {
    transform: none;
  }
}