/* ===== 导航与下载 / page-products ===== */
.page-products{
  --pd-radius: 22px;
  --pd-gap: clamp(16px, 2.2vw, 26px);
  --pd-index-w: 196px;
  background: var(--mist);
  color: var(--ink);
  overflow-x: hidden;
}

.page-products .pd-top{
  padding-top: calc(var(--header-h) + clamp(12px, 2.6vw, 26px));
}

/* 首屏 */
.page-products .pd-hero{
  padding-top: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(28px, 4.2vw, 52px);
}

.page-products .pd-hero__grid{
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.page-products .pd-hero__lead h1{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 10px 0 18px;
  max-width: 16em;
}

.page-products .pd-hero__lead .lede{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 20px;
}

.page-products .pd-hero__facts{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  color: var(--ink-soft);
}

.page-products .pd-hero__facts .num{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--teal);
}

.page-products .pd-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 能力矩阵 */
.page-products .pd-matrix{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 18px 40px -32px rgba(14, 22, 34, 0.55);
}

.page-products .pd-matrix__head{
  margin-bottom: 14px;
}

.page-products .pd-matrix__title{
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.page-products .pd-matrix__note{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-matrix__scroll{
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.page-products .pd-matrix__table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--fs-14);
}

.page-products .pd-matrix__table th{
  text-align: left;
  padding: 10px 12px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.page-products .pd-matrix__table td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}

.page-products .pd-matrix__table tbody tr:nth-child(even){
  background: rgba(231, 233, 230, 0.55);
}

.page-products .pd-matrix__table tbody tr:last-child td{
  border-bottom: 0;
}

.page-products .pd-matrix__table td:nth-child(2){
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.page-products .pd-matrix__table td:last-child{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--moss);
  white-space: nowrap;
}

.page-products .pd-matrix__no{
  font-family: var(--font-mono);
  color: var(--clay);
  font-size: var(--fs-12);
}

/* 左目录 + 右长文 */
.page-products .pd-body{
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-bottom: clamp(48px, 8vw, 96px);
  align-items: start;
}

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

.page-products .pd-index__label{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.page-products .pd-index__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pd-index__link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.page-products .pd-index__num{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--stone);
}

.page-products .pd-index__link:hover,
.page-products .pd-index__link:focus-visible{
  border-left-color: var(--amber);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.page-products .pd-index__link:focus-visible{
  box-shadow: 0 0 0 2px var(--gold);
}

.page-products .pd-sections{
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  min-width: 0;
}

/* 平板 / 手机对照 */
.page-products .pd-duo{
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.page-products .pd-feature{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.6vw, 30px);
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-products .pd-feature--paper{
  background: rgba(247, 245, 239, 0.72);
  border-style: dashed;
}

.page-products .pd-feature__head{
  display: grid;
  gap: 10px;
  justify-items: start;
}

.page-products .pd-feature__title{
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-products .pd-feature__text{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-figure{
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(22, 35, 58, 0.05) 0 1px, transparent 1px 12px),
    var(--mist);
}

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

.page-products .pd-figure--tall img{
  aspect-ratio: 3 / 4;
}

.page-products .pd-figure--wide img{
  aspect-ratio: 16 / 10;
}

.page-products .pd-figure--screen img,
.page-products .pd-figure--panel img{
  aspect-ratio: 16 / 9;
}

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

.page-products .pd-list li{
  position: relative;
  padding-left: 18px;
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-products .pd-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}

/* 通用分节 */
.page-products .pd-section{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(20px, 3vw, 38px);
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.page-products .pd-section--plain{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.page-products .pd-section__head{
  display: grid;
  gap: 10px;
  max-width: 46em;
}

.page-products .pd-section__kicker{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--clay);
}

.page-products .pd-section__title{
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
}

.page-products .pd-section__intro{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-section__foot{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.page-products .pd-section__foot a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 日期轴 */
.page-products .pd-axis{
  padding: 4px 2px 0;
}

.page-products .pd-axis__track{
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  border: 1px solid var(--line);
}

.page-products .pd-axis__range{
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 18%;
  width: 44%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--amber));
}

.page-products .pd-axis__ticks{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
}

/* 四个筛选维度 */
.page-products .pd-dims{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.page-products .pd-dim{
  background: var(--mist);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
}

.page-products .pd-dim__no{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--moss);
  margin-bottom: 6px;
}

.page-products .pd-dim__title{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
  margin: 0 0 6px;
}

.page-products .pd-dim__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* 下载 */
.page-products .pd-download{
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
}

.page-products .pd-dl-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.page-products .pd-dl{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  background: rgba(231, 233, 230, 0.5);
}

.page-products .pd-dl__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.page-products .pd-dl__name{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
}

.page-products .pd-dl__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-dl__text a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pd-meta-strip{
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}

.page-products .pd-meta-strip p{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-meta-strip__key{
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--moss);
}

/* 三端分段 */
.page-products .pd-segmented{
  justify-self: start;
  max-width: 100%;
}

.page-products .pd-panels{
  display: grid;
  gap: 14px;
}

.page-products .pd-panel{
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.4vw, 26px);
}

.page-products .pd-device{
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  border: 2px solid var(--ink);
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(180deg, rgba(22, 35, 58, 0.07) 0 2px, transparent 2px 22px),
    var(--paper);
}

.page-products .pd-device--phone{
  aspect-ratio: 9 / 17;
  max-width: 118px;
  border-radius: 20px;
}

.page-products .pd-device--tablet{
  aspect-ratio: 4 / 3;
  max-width: 190px;
  border-radius: 16px;
}

.page-products .pd-device--desktop{
  aspect-ratio: 16 / 10;
  max-width: 230px;
  border-radius: 8px;
  border-bottom-width: 12px;
  border-bottom-color: var(--ink-soft);
}

.page-products .pd-spec{
  display: grid;
  gap: 10px;
  margin: 0;
}

.page-products .pd-spec__row{
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-strong);
}

.page-products .pd-spec__row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-spec dt{
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--moss);
}

.page-products .pd-spec dd{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* 场景清单 */
.page-products .pd-scenes{
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.page-products .pd-scene{
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pd-scene__name{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 800;
  margin: 0;
}

.page-products .pd-scene__need,
.page-products .pd-scene__path{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-scene__path{
  position: relative;
  padding-left: 18px;
  color: var(--ink);
}

.page-products .pd-scene__path::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* 开始使用 */
.page-products .pd-section--start{
  background: linear-gradient(160deg, var(--night) 0%, var(--ink) 68%);
  border-color: transparent;
  color: var(--paper);
}

.page-products .pd-section--start .pd-section__title{
  color: var(--paper);
}

.page-products .pd-section--start .pd-section__kicker{
  color: var(--gold);
}

.page-products .pd-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
}

.page-products .pd-step{
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-light);
  background: rgba(247, 245, 239, 0.06);
}

.page-products .pd-step__no{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--gold);
}

.page-products .pd-step__title{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
  margin: 0;
  color: var(--paper);
}

.page-products .pd-step__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: rgba(247, 245, 239, 0.82);
  margin: 0;
}

.page-products .pd-start__cta{
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  justify-items: start;
}

.page-products .pd-start__cta-text{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.8;
  color: rgba(247, 245, 239, 0.9);
  margin: 0;
  max-width: 40em;
}

/* 窄屏适配 */
@media (min-width: 700px){
  .page-products .pd-panel{
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .page-products .pd-download{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-products .pd-dims{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pd-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pd-scene{
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: clamp(14px, 2vw, 24px);
  }
  .page-products .pd-scene__name{
    grid-row: span 2;
  }
}

@media (min-width: 900px){
  .page-products .pd-hero__grid{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 56px);
  }
  .page-products .pd-hero__lead{
    padding-top: clamp(0px, 3vw, 34px);
  }
  .page-products .pd-duo{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-products .pd-dims{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pd-steps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .page-products .pd-body{
    grid-template-columns: var(--pd-index-w) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 52px);
  }
  .page-products .pd-index{
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    padding-right: 6px;
  }
  .page-products .pd-section{
    scroll-margin-top: calc(var(--header-h) + 28px);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .pd-index__link{
    transition: none;
  }
}
</main>
<<<END>>>

等等——我在结尾出了个错。我写了 `</main>` 然后又接了一段多余的文本。让我把格式改正确。

实际上我输出的第二个块里包含 `` 然后是 CSS，再然后是 `</main>`，那是不对的——`</main>` 应该属于 MAIN_HTML。

让我把输出重新写干净。

还有，`.pd-feature__title` 应该用 `h2`——对，没错。

另外，`.pd-matrix__title` 是 h2，可以。

现在让我把输出仔细地重新组织一下。

还有一点：`.pd-figure--tall img { aspect-ratio: 3/4 }` 配上 900x1200 的图片——3/4 = 0.75，900/1200 = 0.75。没问题。

`.pd-figure--wide img` 用 16/10，对应 1600x1000。没问题。

`.pd-figure--screen img` 用 16/9，对应 1600x900。没问题。

`.pd-figure--panel img` 用 16/9，对应 1200x800……1200/800 = 1.5，不是 16/9。把面板改成 aspect-ratio 3/2。我来修一下。

还有场景那张图用的也是 `pd-figure--wide`，1600x900——等一下，场景那张图是 1600x900，宽高比 16/9，但 wide 类写的是 16/10。还是把场景那张图改成 `pd-figure--screen` 吧。其实再简化一下：干脆把 `pd-figure--screen` 用在筛选和场景两张图上，都是 16/9。

改一下。

还有 `.pd-hero__lead h1` 的 `max-width: 16em`，这是以字号为基准的……em 是相对于 font-size 来的，不过没问题。

收尾吧。
<main id="main-content" class="page-products">
  <div class="wrap pd-top">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li><span class="breadcrumb__sep" aria-hidden="true">/</span></li>
        <li><span class="breadcrumb__current" aria-current="page">导航与下载</span></li>
      </ol>
    </nav>
  </div>

  <header class="wrap pd-hero">
    <div class="pd-hero__grid">
      <div class="pd-hero__lead reveal">
        <p class="eyebrow">导航与下载</p>
        <h1>赛程、公告与文件，哪一端都能顺手取到</h1>
        <p class="lede">杏运赛场把赛事资讯简体版、日期区间赛程筛选和下载入口放在同一块界面里：桌面端摊开表格做复盘，平板横屏对着联赛树讲给同事听，手机上随手翻公告。下面按能力、按端型、按场景逐项说清用法，您可以直接挑自己那一端上手。</p>
        <ul class="pd-hero__facts">
          <li><span class="num">186</span> 个联赛可查</li>
          <li><span class="num">v4.2</span> 现行版本</li>
          <li>每 <span class="num">6</span> 周迭代一次</li>
        </ul>
        <div class="pd-hero__actions">
          <a class="btn btn--primary" href="#start">看三步上手</a>
          <a class="btn btn--ghost" href="/support/">查操作说明</a>
        </div>
      </div>

      <div class="pd-matrix reveal">
        <div class="pd-matrix__head">
          <h2 class="pd-matrix__title">六项能力，先横向比一遍</h2>
          <p class="pd-matrix__note">同一条赛程信息，在三种设备上的取用方式不同。这张表帮您快速判断该在哪一端完成手上的事。</p>
        </div>
        <div class="table-scroll pd-matrix__scroll">
          <table class="data-table pd-matrix__table">
            <caption class="sr-only">平台六项能力及其使用场景与所在端</caption>
            <thead>
              <tr>
                <th scope="col">编号</th>
                <th scope="col">能力</th>
                <th scope="col">帮您解决的问题</th>
                <th scope="col">所在端</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="num pd-matrix__no">01</td>
                <td>日期区间赛程筛选</td>
                <td>把一整轮赛程缩到真正要看的几场</td>
                <td>桌面 · 平板</td>
              </tr>
              <tr>
                <td class="num pd-matrix__no">02</td>
                <td>平板端联赛导航</td>
                <td>联赛树与近三轮公告同屏，便于讲解</td>
                <td>平板</td>
              </tr>
              <tr>
                <td class="num pd-matrix__no">03</td>
                <td>手机端公告查询</td>
                <td>赛季密集期随手确认临时调整</td>
                <td>手机</td>
              </tr>
              <tr>
                <td class="num pd-matrix__no">04</td>
                <td>收藏常用页面</td>
                <td>常看的联赛与公告一键回访，最多 30 个</td>
                <td>手机 · 平板</td>
              </tr>
              <tr>
                <td class="num pd-matrix__no">05</td>
                <td>站内检索</td>
                <td>赛事、公告、下载、帮助四类内容一处找到</td>
                <td>全端</td>
              </tr>
              <tr>
                <td class="num pd-matrix__no">06</td>
                <td>下载入口</td>
                <td>赛程表、公告合集、复盘模板按需取用</td>
                <td>桌面 · 平板</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </header>

  <div class="wrap pd-body">
    <aside class="pd-index" aria-label="本页目录">
      <p class="pd-index__label">本页要点</p>
      <ol class="pd-index__list">
        <li><a class="pd-index__link" href="#tablet"><span class="pd-index__num">01</span>平板端联赛导航</a></li>
        <li><a class="pd-index__link" href="#phone"><span class="pd-index__num">02</span>手机端公告查询</a></li>
        <li><a class="pd-index__link" href="#filter"><span class="pd-index__num">03</span>赛程区间筛选</a></li>
        <li><a class="pd-index__link" href="#download"><span class="pd-index__num">04</span>下载入口与版本</a></li>
        <li><a class="pd-index__link" href="#devices"><span class="pd-index__num">05</span>三端分工对照</a></li>
        <li><a class="pd-index__link" href="#scenes"><span class="pd-index__num">06</span>四种常见用法</a></li>
        <li><a class="pd-index__link" href="#start"><span class="pd-index__num">07</span>三步开始</a></li>
      </ol>
    </aside>

    <div class="pd-sections">

      <div class="pd-duo">
        <section class="pd-feature reveal" id="tablet" aria-labelledby="pd-tablet-title">
          <div class="pd-feature__head">
            <span class="tag tag--moss">平板 · 横屏</span>
            <h2 class="pd-feature__title" id="pd-tablet-title">大屏看联赛：左边找联赛，右边读公告</h2>
          </div>
          <div class="pd-figure pd-figure--wide">
            <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="平板横屏打开杏运赛场联赛导航，左侧为联赛树，右侧为近三轮公告列表与下载按钮">
          </div>
          <p class="pd-feature__text">打开杏运体育娱乐平板端联赛导航，画面左列是按省区市与联赛层级铺开的联赛树，右侧同时显示近三轮的联赛公告和下载入口。单屏大约可见 12 场赛程，切换联赛时右侧内容跟着更替，不需要反复缩放或来回跳页。</p>
          <p class="pd-feature__text">线下研讨最合适这个尺寸：平板平放在长桌中央，主讲人点开某个联赛节点，参会人一起对着公告原文往下读，遇到需要留档的场次，就地把赛程表取走。页面每次打开刷新一次，研讨开始前统一打开，几个人看到的是同一屏内容。</p>
          <ul class="pd-list">
            <li>联赛树先定位地域与联赛，再展开到轮次，层级一眼分明</li>
            <li>右侧公告面板保留近三轮记录，方便前后对照</li>
            <li>公告条目旁边直接挂下载按钮，赛程表与公告合集就地取用</li>
            <li>横屏状态下表格列宽舒展，场次编号与日期不错行</li>
          </ul>
        </section>

        <section class="pd-feature pd-feature--paper reveal" id="phone" aria-labelledby="pd-phone-title">
          <div class="pd-feature__head">
            <span class="tag tag--amber">手机 · 竖屏</span>
            <h2 class="pd-feature__title" id="pd-phone-title">随身翻公告：一屏六到八条，更新跟得上</h2>
          </div>
          <div class="pd-figure pd-figure--tall">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机竖屏赛事公告列表，每条公告标题旁标有更新时间，右侧带收藏图标" loading="lazy" decoding="async">
          </div>
          <p class="pd-feature__text">手机端赛事公告查询打开即是列表，一屏大约六到八条，标题与更新时间并排显示。赛季进入密集阶段后公告变化频繁，列表每 15 分钟拉取一次更新，临时改期、场地调整这类消息能在通勤路上先看到。</p>
          <p class="pd-feature__text">常看的联赛或某条公告，点右侧收藏图标就能固定下来，最多保存 30 个。收藏保存在浏览器本地，换个设备需要重新标一次；出差回来接着翻，收藏顺序不会因为赛程推进被打乱。</p>
          <ul class="pd-list">
            <li>列表顶部显示最近一次同步时间，心里有数</li>
            <li>收藏清单按您添加的先后排列，不随赛程重排</li>
            <li>收藏达到 30 个时提示先移除再添加，不会悄悄覆盖旧的</li>
            <li>整页为竖排单列，拇指滑动一段就是一轮公告</li>
          </ul>
        </section>
      </div>

      <section class="pd-section reveal" id="filter" aria-labelledby="pd-filter-title">
        <div class="pd-section__head">
          <span class="pd-section__kicker num">03</span>
          <h2 class="pd-section__title" id="pd-filter-title">四个条件叠起来，一轮赛程缩到几场</h2>
          <p class="pd-section__intro">赛程筛选支持日期区间、联赛、场馆、比赛状态四个维度组合查询。顺序从粗到细最省事：先圈日期，再定联赛，然后用场馆收窄，最后按状态挑出未开始或已结束的场次。</p>
        </div>

        <div class="pd-figure pd-figure--screen">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="桌面浏览器中的赛程表格，顶部显示已选的日期区间、联赛、场馆与比赛状态筛选项" loading="lazy" decoding="async">
        </div>

        <div class="pd-axis" aria-hidden="true">
          <div class="pd-axis__track"><span class="pd-axis__range"></span></div>
          <ol class="pd-axis__ticks">
            <li>第 1 轮</li>
            <li>第 3 轮</li>
            <li>第 5 轮</li>
            <li>第 7 轮</li>
            <li>第 9 轮</li>
          </ol>
        </div>

        <ol class="pd-dims">
          <li class="pd-dim">
            <span class="pd-dim__no num">1</span>
            <h3 class="pd-dim__title">日期区间</h3>
            <p class="pd-dim__text">选三天、一周或整轮，结果随区间即时更新，条数统计同步变化。</p>
          </li>
          <li class="pd-dim">
            <span class="pd-dim__no num">2</span>
            <h3 class="pd-dim__title">联赛</h3>
            <p class="pd-dim__text">在已选区间内锁定单一联赛，避免不同赛事的场次混排在一起。</p>
          </li>
          <li class="pd-dim">
            <span class="pd-dim__no num">3</span>
            <h3 class="pd-dim__title">场馆</h3>
            <p class="pd-dim__text">按场馆收窄，适合安排一天的观赛路线或核对场地使用时段。</p>
          </li>
          <li class="pd-dim">
            <span class="pd-dim__no num">4</span>
            <h3 class="pd-dim__title">比赛状态</h3>
            <p class="pd-dim__text">筛未开始、进行中或已结束，复盘与预告各取所需。</p>
          </li>
        </ol>
        <p class="pd-section__foot">筛选结果以表格呈现，场次编号、日期与状态统一用等宽数字对齐，横向拉宽也不会错行。对某一个结果有疑问，可以到<a href="/support/">支持中心</a>查筛选与同步的说明。</p>
      </section>

      <section class="pd-section pd-section--download reveal" id="download" aria-labelledby="pd-download-title">
        <div class="pd-section__head">
          <span class="pd-section__kicker num">04</span>
          <h2 class="pd-section__title" id="pd-download-title">三类文件，拿走就能用在排期与复盘里</h2>
          <p class="pd-section__intro">下载入口提供赛程表、公告合集、复盘模板三类文件，格式分别是 CSV、PDF 与 XLSX。文件内容跟随所选日期区间与联赛更新，取下来就是当时那一版。</p>
        </div>

        <div class="pd-download">
          <div class="pd-figure pd-figure--panel">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="杏运赛场下载面板，列出赛程表、公告合集与复盘模板三类文件及各自格式" loading="lazy" decoding="async">
          </div>

          <ul class="pd-dl-list">
            <li class="pd-dl">
              <div class="pd-dl__top">
                <span class="pd-dl__name">赛程表</span>
                <span class="tag tag--teal">CSV</span>
              </div>
              <p class="pd-dl__text">按当前筛选条件导出，列含轮次、日期、场馆、对阵与状态。导入表格软件后可直接排进俱乐部内部日程，不用再手工誊一遍。</p>
            </li>
            <li class="pd-dl">
              <div class="pd-dl__top">
                <span class="pd-dl__name">公告合集</span>
                <span class="tag tag--amber">PDF</span>
              </div>
              <p class="pd-dl__text">保留公告原有版面，适合转引、打印与会议分发。给教练组或媒体同事发一份，读到的就是站上那一版内容。</p>
            </li>
            <li class="pd-dl">
              <div class="pd-dl__top">
                <span class="pd-dl__name">复盘模板</span>
                <span class="tag tag--moss">XLSX</span>
              </div>
              <p class="pd-dl__text">按轮次预置表头，填写比分、关键场次与备注。想先看看别人怎么用，可以翻<a href="/reports/">观察报告</a>里的复盘专题。</p>
            </li>
          </ul>
        </div>

        <div class="pd-meta-strip">
          <p><span class="pd-meta-strip__key">更新时机</span>赛程表与公告合集随公告同步更新；复盘模板跟随版本发布。</p>
          <p><span class="pd-meta-strip__key">版本</span>当前 v4.2，页面每 6 周迭代一次，下载格式保持稳定。</p>
          <p><span class="pd-meta-strip__key">兼容</span>CSV 可直接用 Excel、WPS 或 Numbers 打开；XLSX 面向常见电子表格版本；PDF 按 A4 输出，打印不缩放。</p>
        </div>
      </section>

      <section class="pd-section reveal" id="devices" aria-labelledby="pd-devices-title">
        <div class="pd-section__head">
          <span class="pd-section__kicker num">05</span>
          <h2 class="pd-section__title" id="pd-devices-title">手机、平板、桌面，各管一段</h2>
          <p class="pd-section__intro">同一条赛程，三端给出的信息密度和操作方式不一样。点开对照，看看您手上的活儿落在哪一端更顺手。</p>
        </div>

        <div class="segmented pd-segmented" data-segmented>
          <button class="segmented__btn" type="button" role="tab" id="pd-seg-mobile" data-segment="mobile" aria-selected="true" aria-controls="pd-panel-mobile">手机</button>
          <button class="segmented__btn" type="button" role="tab" id="pd-seg-tablet" data-segment="tablet" aria-selected="false" aria-controls="pd-panel-tablet" tabindex="-1">平板</button>
          <button class="segmented__btn" type="button" role="tab" id="pd-seg-desktop" data-segment="desktop" aria-selected="false" aria-controls="pd-panel-desktop" tabindex="-1">桌面</button>
          <span class="segmented__indicator" data-indicator aria-hidden="true"></span>
        </div>

        <div class="pd-panels">
          <div class="pd-panel" id="pd-panel-mobile" data-panel="mobile" role="tabpanel" aria-labelledby="pd-seg-mobile">
            <div class="pd-device pd-device--phone" aria-hidden="true"></div>
            <dl class="pd-spec">
              <div class="pd-spec__row"><dt>信息密度</dt><dd>竖排单列，一屏约六到八条公告</dd></div>
              <div class="pd-spec__row"><dt>操作方式</dt><dd>拇指滑动浏览，点右侧图标收藏</dd></div>
              <div class="pd-spec__row"><dt>典型场景</dt><dd>通勤路上确认临时改期，赛前对时间</dd></div>
            </dl>
          </div>
          <div class="pd-panel" id="pd-panel-tablet" data-panel="tablet" role="tabpanel" aria-labelledby="pd-seg-tablet">
            <div class="pd-device pd-device--tablet" aria-hidden="true"></div>
            <dl class="pd-spec">
              <div class="pd-spec__row"><dt>信息密度</dt><dd>左联赛树右列表，单屏约 12 场赛程</dd></div>
              <div class="pd-spec__row"><dt>操作方式</dt><dd>双手握持点选，左右两栏对照阅读</dd></div>
              <div class="pd-spec__row"><dt>典型场景</dt><dd>线下研讨、教练组碰头，一屏讲给几个人</dd></div>
            </dl>
          </div>
          <div class="pd-panel" id="pd-panel-desktop" data-panel="desktop" role="tabpanel" aria-labelledby="pd-seg-desktop">
            <div class="pd-device pd-device--desktop" aria-hidden="true"></div>
            <dl class="pd-spec">
              <div class="pd-spec__row"><dt>信息密度</dt><dd>表格多列并排，整轮赛程一页铺开</dd></div>
              <div class="pd-spec__row"><dt>操作方式</dt><dd>鼠标组合筛选，导出 CSV 与复盘模板</dd></div>
              <div class="pd-spec__row"><dt>典型场景</dt><dd>俱乐部内部排期、赛后复盘、稿件整理</dd></div>
            </dl>
          </div>
        </div>
      </section>

      <section class="pd-section pd-section--plain reveal" id="scenes" aria-labelledby="pd-scenes-title">
        <div class="pd-section__head">
          <span class="pd-section__kicker num">06</span>
          <h2 class="pd-section__title" id="pd-scenes-title">四种常见用法，照着走一遍就会</h2>
          <p class="pd-section__intro">从排期到研讨，每种用法都给出一条可以直接照着操作的路。</p>
        </div>

        <div class="pd-figure pd-figure--screen">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="长桌俯拍，几台平板同时显示联赛导航界面，旁边放着纸质记录与笔" loading="lazy" decoding="async">
        </div>

        <div class="pd-scenes">
          <article class="pd-scene">
            <h3 class="pd-scene__name">俱乐部内部排期</h3>
            <p class="pd-scene__need">下一轮赛程出来后，运营同事要把时间、场馆和对阵整理给教练组，靠截图拼表容易漏场次。</p>
            <p class="pd-scene__path">桌面端按日期区间选下一轮，锁定本俱乐部所在联赛，导出 CSV 赛程表，直接拖进内部排期表。</p>
          </article>
          <article class="pd-scene">
            <h3 class="pd-scene__name">媒体转引</h3>
            <p class="pd-scene__need">稿件里引用公告原文，怕的是截到旧版本，事后对不上。</p>
            <p class="pd-scene__path">站内检索输入联赛名或公告关键词，打开条目后复制页面地址，随稿件一起附上。需要版面时改用 PDF 公告合集。</p>
          </article>
          <article class="pd-scene">
            <h3 class="pd-scene__name">赛后复盘</h3>
            <p class="pd-scene__need">比分与关键场次要按轮次归档，下一轮开打前能翻回来比。</p>
            <p class="pd-scene__path">桌面端打开赛程表，按下 XLSX 复盘模板的列顺序填写比分与备注，存档时文件名带轮次。</p>
          </article>
          <article class="pd-scene">
            <h3 class="pd-scene__name">线下研讨</h3>
            <p class="pd-scene__need">几个人围着一块屏幕对公告，比各自低头翻手机快得多。</p>
            <p class="pd-scene__path">平板横屏打开联赛导航，锁定研讨涉及的联赛，逐条展开近三轮公告，需要留档的场次当场下载。</p>
          </article>
        </div>
        <p class="pd-section__foot">这套界面从 2017 年为本地联赛整理赛程起步，一路长到今天的规模，过程写在<a href="/story/">品牌故事</a>里。</p>
      </section>

      <section class="pd-section pd-section--start reveal" id="start" aria-labelledby="pd-start-title">
        <div class="pd-section__head">
          <span class="pd-section__kicker num">07</span>
          <h2 class="pd-section__title" id="pd-start-title">三步开始：收藏、筛选、下载</h2>
        </div>
        <ol class="pd-steps">
          <li class="pd-step">
            <span class="pd-step__no num">01</span>
            <h3 class="pd-step__title">先把常看的收起来</h3>
            <p class="pd-step__text">在手机或平板上打开常跟的联赛与公告页，点右侧收藏图标。攒到 30 个以内，之后每次打开就能从收藏直接进去。</p>
          </li>
          <li class="pd-step">
            <span class="pd-step__no num">02</span>
            <h3 class="pd-step__title">再用四个条件筛一遍</h3>
            <p class="pd-step__text">按日期区间、联赛、场馆、状态依次收窄，看条数统计确认范围合适，再决定是当场阅读还是导出。</p>
          </li>
          <li class="pd-step">
            <span class="pd-step__no num">03</span>
            <h3 class="pd-step__title">最后把文件取走</h3>
            <p class="pd-step__text">赛程表给排期，公告合集给转引，复盘模板给赛后归档。三类文件分别在下载入口对应位置，按需取用即可。</p>
          </li>
        </ol>
        <div class="pd-start__cta">
          <p class="pd-start__cta-text">如果贵机构要把赛程接进自己的排期系统，或者需要按固定节奏拿到公告合集，可以直接和我们的同事聊一聊具体做法。</p>
          <a class="btn btn--amber" href="/inquiry/">联系咨询</a>
        </div>
      </section>

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

/* ===== 导航与下载 / page-products ===== */
.page-products{
  --pd-radius: 22px;
  --pd-gap: clamp(16px, 2.2vw, 26px);
  --pd-index-w: 196px;
  background: var(--mist);
  color: var(--ink);
  overflow-x: hidden;
}

.page-products .pd-top{
  padding-top: calc(var(--header-h) + clamp(12px, 2.6vw, 26px));
}

/* 首屏 */
.page-products .pd-hero{
  padding-top: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(28px, 4.2vw, 52px);
}

.page-products .pd-hero__grid{
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.page-products .pd-hero__lead h1{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 10px 0 18px;
  max-width: 16em;
}

.page-products .pd-hero__lead .lede{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 20px;
}

.page-products .pd-hero__facts{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  color: var(--ink-soft);
}

.page-products .pd-hero__facts .num{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--teal);
}

.page-products .pd-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 能力矩阵 */
.page-products .pd-matrix{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 18px 40px -32px rgba(14, 22, 34, 0.55);
}

.page-products .pd-matrix__head{
  margin-bottom: 14px;
}

.page-products .pd-matrix__title{
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.page-products .pd-matrix__note{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-matrix__scroll{
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.page-products .pd-matrix__table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--fs-14);
}

.page-products .pd-matrix__table th{
  text-align: left;
  padding: 10px 12px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.page-products .pd-matrix__table td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}

.page-products .pd-matrix__table tbody tr:nth-child(even){
  background: rgba(231, 233, 230, 0.55);
}

.page-products .pd-matrix__table tbody tr:last-child td{
  border-bottom: 0;
}

.page-products .pd-matrix__table td:nth-child(2){
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.page-products .pd-matrix__table td:last-child{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--moss);
  white-space: nowrap;
}

.page-products .pd-matrix__no{
  font-family: var(--font-mono);
  color: var(--clay);
  font-size: var(--fs-12);
}

/* 左目录 + 右长文 */
.page-products .pd-body{
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-bottom: clamp(48px, 8vw, 96px);
  align-items: start;
}

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

.page-products .pd-index__label{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.page-products .pd-index__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pd-index__link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.page-products .pd-index__num{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--stone);
}

.page-products .pd-index__link:hover,
.page-products .pd-index__link:focus-visible{
  border-left-color: var(--amber);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.page-products .pd-index__link:focus-visible{
  box-shadow: 0 0 0 2px var(--gold);
}

.page-products .pd-sections{
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  min-width: 0;
}

/* 平板 / 手机对照 */
.page-products .pd-duo{
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.page-products .pd-feature{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.6vw, 30px);
  display: grid;
  gap: 14px;
  align-content: start;
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.page-products .pd-feature--paper{
  background: rgba(247, 245, 239, 0.72);
  border-style: dashed;
}

.page-products .pd-feature__head{
  display: grid;
  gap: 10px;
  justify-items: start;
}

.page-products .pd-feature__title{
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-products .pd-feature__text{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-figure{
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(22, 35, 58, 0.05) 0 1px, transparent 1px 12px),
    var(--mist);
}

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

.page-products .pd-figure--tall img{
  aspect-ratio: 3 / 4;
}

.page-products .pd-figure--wide img{
  aspect-ratio: 16 / 10;
}

.page-products .pd-figure--screen img{
  aspect-ratio: 16 / 9;
}

.page-products .pd-figure--panel img{
  aspect-ratio: 3 / 2;
}

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

.page-products .pd-list li{
  position: relative;
  padding-left: 18px;
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-products .pd-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}

/* 通用分节 */
.page-products .pd-section{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  padding: clamp(20px, 3vw, 38px);
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.page-products .pd-section--plain{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.page-products .pd-section__head{
  display: grid;
  gap: 10px;
  max-width: 46em;
}

.page-products .pd-section__kicker{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--clay);
}

.page-products .pd-section__title{
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
}

.page-products .pd-section__intro{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-section__foot{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.page-products .pd-section__foot a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 日期轴 */
.page-products .pd-axis{
  padding: 4px 2px 0;
}

.page-products .pd-axis__track{
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  border: 1px solid var(--line);
}

.page-products .pd-axis__range{
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 18%;
  width: 44%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--amber));
}

.page-products .pd-axis__ticks{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
}

/* 四个筛选维度 */
.page-products .pd-dims{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.page-products .pd-dim{
  background: var(--mist);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
}

.page-products .pd-dim__no{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--moss);
  margin-bottom: 6px;
}

.page-products .pd-dim__title{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
  margin: 0 0 6px;
}

.page-products .pd-dim__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* 下载 */
.page-products .pd-download{
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
}

.page-products .pd-dl-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.page-products .pd-dl{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  background: rgba(231, 233, 230, 0.5);
}

.page-products .pd-dl__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.page-products .pd-dl__name{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
}

.page-products .pd-dl__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-dl__text a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pd-meta-strip{
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}

.page-products .pd-meta-strip p{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-meta-strip__key{
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--moss);
}

/* 三端分段 */
.page-products .pd-segmented{
  justify-self: start;
  max-width: 100%;
}

.page-products .pd-panels{
  display: grid;
  gap: 14px;
}

.page-products .pd-panel{
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.4vw, 26px);
}

.page-products .pd-device{
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  border: 2px solid var(--ink);
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(180deg, rgba(22, 35, 58, 0.07) 0 2px, transparent 2px 22px),
    var(--paper);
}

.page-products .pd-device--phone{
  aspect-ratio: 9 / 17;
  max-width: 118px;
  border-radius: 20px;
}

.page-products .pd-device--tablet{
  aspect-ratio: 4 / 3;
  max-width: 190px;
  border-radius: 16px;
}

.page-products .pd-device--desktop{
  aspect-ratio: 16 / 10;
  max-width: 230px;
  border-radius: 8px;
  border-bottom-width: 12px;
  border-bottom-color: var(--ink-soft);
}

.page-products .pd-spec{
  display: grid;
  gap: 10px;
  margin: 0;
}

.page-products .pd-spec__row{
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-strong);
}

.page-products .pd-spec__row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-spec dt{
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--moss);
}

.page-products .pd-spec dd{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* 场景清单 */
.page-products .pd-scenes{
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.page-products .pd-scene{
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pd-scene__name{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 800;
  margin: 0;
}

.page-products .pd-scene__need,
.page-products .pd-scene__path{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.page-products .pd-scene__path{
  position: relative;
  padding-left: 18px;
  color: var(--ink);
}

.page-products .pd-scene__path::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* 开始使用 */
.page-products .pd-section--start{
  background: linear-gradient(160deg, var(--night) 0%, var(--ink) 68%);
  border-color: transparent;
  color: var(--paper);
}

.page-products .pd-section--start .pd-section__title{
  color: var(--paper);
}

.page-products .pd-section--start .pd-section__kicker{
  color: var(--gold);
}

.page-products .pd-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
}

.page-products .pd-step{
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-light);
  background: rgba(247, 245, 239, 0.06);
}

.page-products .pd-step__no{
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--gold);
}

.page-products .pd-step__title{
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
  margin: 0;
  color: var(--paper);
}

.page-products .pd-step__text{
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.75;
  color: rgba(247, 245, 239, 0.82);
  margin: 0;
}

.page-products .pd-start__cta{
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  justify-items: start;
}

.page-products .pd-start__cta-text{
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.8;
  color: rgba(247, 245, 239, 0.9);
  margin: 0;
  max-width: 40em;
}

/* 窄屏适配 */
@media (min-width: 700px){
  .page-products .pd-panel{
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .page-products .pd-download{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-products .pd-dims{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pd-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .pd-scene{
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: clamp(14px, 2vw, 24px);
  }
  .page-products .pd-scene__name{
    grid-row: span 2;
  }
}

@media (min-width: 900px){
  .page-products .pd-hero__grid{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 56px);
  }
  .page-products .pd-hero__lead{
    padding-top: clamp(0px, 3vw, 34px);
  }
  .page-products .pd-duo{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-products .pd-dims{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pd-steps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .page-products .pd-body{
    grid-template-columns: var(--pd-index-w) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 52px);
  }
  .page-products .pd-index{
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    padding-right: 6px;
  }
  .page-products .pd-section{
    scroll-margin-top: calc(var(--header-h) + 30px);
  }
}

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