.page-products {
  --pp-accent: var(--turf-2);
  background: var(--night);
  color: var(--cold);
  overflow-x: hidden;
}

.page-products .pp-hero {
  position: relative;
  padding: 28px 0 44px;
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(30, 122, 78, 0.55), rgba(10, 26, 40, 0) 66%);
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 14% 100%);
  pointer-events: none;
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 64%;
  height: 1px;
  background: var(--hairline);
  transform: rotate(-14deg);
  pointer-events: none;
}

.page-products .pp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
}

.page-products .pp-kicker {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ice);
}

.page-products .pp-hero__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 7.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .pp-hero__text {
  max-width: 40ch;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.82);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .pp-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-products .pp-hero__media {
  margin: 0;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 94%);
}

.page-products .pp-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-body {
  display: grid;
  gap: 30px;
  padding-top: 8px;
  padding-bottom: 56px;
}

.page-products .pp-index {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.page-products .pp-index__list {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pp-index__link {
  display: block;
  white-space: nowrap;
  padding: 9px 12px;
  border-left: 2px solid var(--slate);
  background: var(--glass);
  color: var(--cold);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-products .pp-index__link.is-round { border-left-color: var(--ice); }
.page-products .pp-index__link.is-transfer { border-left-color: var(--amber); }
.page-products .pp-index__link.is-report { border-left-color: var(--turf-2); }
.page-products .pp-index__link.is-compare { border-left-color: var(--cold); }
.page-products .pp-index__link.is-spec { border-left-color: var(--slate); }
.page-products .pp-index__link.is-uses { border-left-color: var(--ice); }

.page-products .pp-index__link:hover,
.page-products .pp-index__link:focus-visible,
.page-products .pp-index__link.is-active {
  background: var(--glass-ice);
  border-left-width: 4px;
}

.page-products .pp-module {
  position: relative;
  margin-bottom: 26px;
  padding: 22px 18px 24px;
  background: var(--board);
  border: 1px solid var(--hairline);
}

.page-products .pp-module::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--pp-accent);
}

.page-products .pp-module--round { --pp-accent: var(--ice); background: var(--board); }
.page-products .pp-module--transfer { --pp-accent: var(--amber); background: var(--board-soft); }
.page-products .pp-module--report { --pp-accent: var(--turf-2); background: var(--board); }

.page-products .pp-module__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.08;
  color: var(--white);
}

.page-products .pp-scene {
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--pp-accent, var(--turf-2));
  font-size: 15px;
  line-height: 1.7;
  color: var(--ice);
}

.page-products .pp-module--transfer .pp-scene { color: #F0B36A; }

.page-products .pp-split {
  display: grid;
  gap: 20px;
}

.page-products .pp-prose {
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.86);
}

.page-products .pp-prose p {
  margin: 0 0 14px;
}

.page-products .pp-timeline {
  margin: 20px 0 0;
  padding: 0 0 0 20px;
  list-style: none;
  border-left: 1px solid var(--hairline);
}

.page-products .pp-timeline li {
  position: relative;
  padding-bottom: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 248, 246, 0.8);
}

.page-products .pp-timeline li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ice);
  border-radius: 50%;
  background: var(--night);
}

.page-products .pp-timeline li:last-child::before {
  background: var(--ice);
  box-shadow: 0 0 0 4px rgba(159, 211, 206, 0.16);
}

.page-products .pp-timeline strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ice);
}

.page-products .pp-figure {
  margin: 0;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-figure figcaption,
.page-products .pp-wide figcaption,
.page-products .pp-start__media figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-products .pp-levels {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.page-products .pp-level {
  padding: 13px 14px;
  background: rgba(10, 26, 40, 0.55);
  border-left: 2px solid var(--amber);
}

.page-products .pp-level--watch {
  border-left-color: var(--slate);
}

.page-products .pp-level p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: rgba(10, 26, 40, 0.45);
  border: 1px solid var(--hairline);
}

.page-products .pp-compare {
  margin-bottom: 26px;
  padding: 22px 18px 24px;
  background: var(--surface-glass, var(--glass));
  border: 1px solid var(--hairline);
}

.page-products .pp-h2 {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.08;
  color: var(--white);
}

.page-products .pp-h2--light {
  color: var(--text);
}

.page-products .pp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .pp-tabs .tab {
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.page-products .pp-tabs .tab[aria-selected="true"],
.page-products .pp-tabs .tab.is-active {
  background: var(--turf);
  border-color: var(--turf);
  color: var(--white);
}

.page-products .pp-tabpanel {
  flex-basis: 100%;
  margin-top: 8px;
}

.page-products .pp-mini {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-mini li {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-mini__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ice);
}

.page-products .pp-features {
  background: var(--cold);
  color: var(--text);
  padding: 48px 0 52px;
}

.page-products .pp-prose--light {
  max-width: 46ch;
  color: var(--text);
  opacity: 0.86;
}

.page-products .pp-spec {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.page-products .pp-spec summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: var(--text);
}

.page-products .pp-spec summary::-webkit-details-marker {
  display: none;
}

.page-products .pp-spec summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--turf);
}

.page-products .pp-spec[open] summary::after {
  content: "–";
}

.page-products .pp-spec__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--turf);
}

.page-products .pp-spec__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-products .pp-spec__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
}

.page-products .pp-spec__list .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--turf);
}

.page-products .pp-uses {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-products .pp-uses__grid {
  display: grid;
  gap: 14px;
}

.page-products .pp-use {
  padding: 18px 16px;
  background: var(--board);
  border-top: 2px solid var(--ice);
}

.page-products .pp-use:nth-child(2) { border-top-color: var(--amber); background: var(--board-soft); }
.page-products .pp-use:nth-child(3) { border-top-color: var(--turf-2); }

.page-products .pp-use__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ice);
}

.page-products .pp-use:nth-child(2) .pp-use__no { color: var(--amber); }
.page-products .pp-use:nth-child(3) .pp-use__no { color: var(--turf-2); }

.page-products .pp-use h3 {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.page-products .pp-use p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-wide {
  margin: 28px 0 0;
}

.page-products .pp-wide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-start {
  padding: 12px 0 64px;
}

.page-products .pp-start__inner {
  display: grid;
  gap: 26px;
}

.page-products .pp-start__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-products .pp-note {
  margin-top: 24px;
  padding: 16px 16px 18px;
  background: var(--glass);
  border-left: 2px solid var(--ice);
}

.page-products .pp-note h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}

.page-products .pp-note p {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-start__media {
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.page-products .pp-start__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

@media (min-width: 720px) {
  .page-products .pp-hero {
    padding: 40px 0 60px;
  }

  .page-products .pp-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-products .pp-split--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

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

  .page-products .pp-index__list {
    flex-wrap: wrap;
    overflow: visible;
  }

  .page-products .pp-mini li {
    grid-template-columns: 132px 1fr;
    gap: 15px;
    align-items: baseline;
  }
}

@media (min-width: 960px) {
  .page-products .pp-hero {
    padding: 56px 0 72px;
  }

  .page-products .pp-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 44px;
  }

  .page-products .pp-body {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 46px;
    padding-bottom: 72px;
  }

  .page-products .pp-index {
    position: sticky;
    top: 104px;
    align-self: start;
    padding: 16px 14px 18px;
    background: var(--glass);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(10px);
  }

  .page-products .pp-index__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
  }

  .page-products .pp-index__link {
    padding: 10px 12px;
  }

  .page-products .pp-module {
    padding: 32px 32px 34px;
    margin-bottom: 34px;
  }

  .page-products .pp-compare {
    padding: 32px 32px 34px;
    margin-bottom: 0;
  }

  .page-products .pp-features {
    padding: 68px 0 76px;
  }

  .page-products .pp-uses {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .page-products .pp-start__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 46px;
    align-items: start;
  }
}

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


<main id="main-content" class="page-products">
  <section class="pp-hero">
    <div class="shell pp-hero__inner">
      <div class="pp-hero__copy">
        <nav class="breadcrumbs breadcrumbs--inverse" aria-label="面包屑">
          <ol>
            <li><a href="/">首页</a></li>
            <li aria-current="page">内容目录</li>
          </ol>
        </nav>
        <p class="pp-kicker">开赛前十分钟，最怕翻不到对的那张表</p>
        <h1 class="pp-hero__title">内容目录：万合足球电脑版常用入口与三条主线</h1>
        <p class="lead lead--inverse">万合足球电脑版常用入口就固定在顶部导航第二栏，从任意一页点进来，落到的都是同一块完整的电脑端主视图，不用重新找位置。</p>
        <p class="pp-hero__text">轮次表解决开球时间与场馆，转会动态解决人员变动，赛后战报解决终场之后怎么复盘。三块内容各有色标，扫一眼就知道自己正落在哪一类信息里。</p>
        <div class="pp-hero__actions">
          <a class="btn btn--primary" href="#round">先看轮次表</a>
          <a class="btn btn--ghost" href="/articles/">浏览赛事专栏</a>
        </div>
        <p class="pp-hero__meta"><span class="version-badge">V3.2.1</span> 当前电脑端视图版本</p>
      </div>
      <figure class="pp-hero__media">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="抽象化的电脑屏幕版式示意，网格与色块分区，呼应同屏对照的信息结构">
      </figure>
    </div>
  </section>

  <div class="pp-body shell" id="modules">
    <aside class="pp-index" aria-label="模块索引">
      <p class="section-label section-label--inverse">INDEX / 模块索引</p>
      <ul class="pp-index__list">
        <li><a class="pp-index__link is-round" href="#round" data-index-link>01 轮次安排</a></li>
        <li><a class="pp-index__link is-transfer" href="#transfer" data-index-link>02 转会动态</a></li>
        <li><a class="pp-index__link is-report" href="#report" data-index-link>03 赛后战报</a></li>
        <li><a class="pp-index__link is-compare" href="#compare" data-index-link>04 同屏对照</a></li>
        <li><a class="pp-index__link is-spec" href="#spec" data-index-link>05 版本功能</a></li>
        <li><a class="pp-index__link is-uses" href="#uses" data-index-link>06 常见用法</a></li>
      </ul>
    </aside>

    <div class="pp-panels">
      <section class="pp-module pp-module--round" id="round" data-reveal>
        <p class="section-label section-label--inverse">ROUND / 轮次安排</p>
        <h2 class="pp-module__title">简体版轮次安排表，按日期一路往下排</h2>
        <p class="pp-scene">周五下班前想确认明天几点开球、从哪个门进场，扫一眼就够。</p>
        <div class="pp-split">
          <div class="pp-prose">
            <p>简体版轮次安排按日期纵向排列，每一轮给出开赛时间、对阵双方与比赛场馆，单赛季整理的轮次条目超过 1,000 场。分隔线用浅青，行与行之间留得开，往下滚的时候不会串到下一轮。</p>
            <p>顺序跟着赛程走，不跟着球队走——你按日期找，永远比按队名翻更快。赛前 48 小时会复核开赛时间与场馆变更，临时调整当天就落进表里。</p>
            <ul class="pp-timeline">
              <li><strong>赛季前 · 初次整理</strong>全季日期、对阵与场馆一次排定，按轮次编号成行。</li>
              <li><strong>赛季前 · 时段确认</strong>对照场馆方公布的可用时段逐轮确认，改动即时更新。</li>
              <li><strong>赛前 48 小时</strong>再核一遍开球时间与场馆，遇到调整当天生效。</li>
              <li><strong>开赛</strong>当前轮次节点常亮，时间轴跟着你正看的位置走。</li>
            </ul>
          </div>
          <figure class="pp-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="纵向排列的轮次表格版式特写，行线与浅青分隔线清晰" loading="lazy" decoding="async">
            <figcaption>浅青分隔线把每个轮次隔开，当前节点常亮。</figcaption>
          </figure>
        </div>
      </section>

      <section class="pp-module pp-module--transfer" id="transfer" data-reveal>
        <p class="section-label section-label--inverse">TRANSFER / 转会动态</p>
        <h2 class="pp-module__title">三种标注，一眼分清消息走到哪一步</h2>
        <p class="pp-scene">转会窗开着的那几周，同一条消息一夜之间能翻三次面。</p>
        <div class="pp-split pp-split--reverse">
          <div class="pp-prose">
            <p>每条球员信息都会被打上其中一档，标签颜色不同，判断依据也不同。你不必读完正文才知道这条能不能当真，先看角标就够了。</p>
            <div class="pp-levels">
              <div class="pp-level pp-level--official">
                <span class="chip chip--transfer">官宣</span>
                <p>俱乐部或球员本人已公开确认，信息落定。卡片转为实色描边，可以当作结论使用。</p>
              </div>
              <div class="pp-level pp-level--rumor">
                <span class="chip chip--transfer">传闻</span>
                <p>已有媒体或经纪渠道提及，当事方尚未确认。保留原始出处，等它走到上一档再看结果。</p>
              </div>
              <div class="pp-level pp-level--watch">
                <span class="chip">观察</span>
                <p>关注名单阶段，只记录接触与意向，用来提前留意某支球队的位置缺口。</p>
              </div>
            </div>
            <p>琥珀橙只属于转会模块，切到轮次或战报不会跳出同样的颜色，混读的风险就小了很多。</p>
          </div>
          <figure class="pp-figure">
            <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="战术板手绘圆点与斜线的局部特写，笔触清晰，呼应转会标注的分类方式" loading="lazy" decoding="async">
            <figcaption>三档标注像战术板上的三种记号，各管一段进程。</figcaption>
          </figure>
        </div>
      </section>

      <section class="pp-module pp-module--report" id="report" data-reveal>
        <p class="section-label section-label--inverse">REPORT / 赛后战报</p>
        <h2 class="pp-module__title">战报和场馆信息，摊在同一屏上</h2>
        <p class="pp-scene">终场哨响，你想知道的不只是比分，还有这场球是在什么场地踢的。</p>
        <p class="pp-prose">赛后战报在终场后 90 分钟内给出初稿，24 小时内补齐技术统计与场馆信息。场馆档案收录 42 座球场，含容量、草皮类型、交通指引与看台视角说明，直接挂在战报同一视图里，不必再开一个窗口去查。</p>
        <svg class="pp-diagram" viewBox="0 0 560 250" role="img" aria-label="轮次、转会、战报三块内容在同一视图内互相引用">
          <line x1="96" y1="102" x2="280" y2="130" stroke="#9FD3CE" stroke-width="1" stroke-dasharray="4 5" opacity="0.7"/>
          <line x1="464" y1="102" x2="280" y2="130" stroke="#E08A2E" stroke-width="1" stroke-dasharray="4 5" opacity="0.7"/>
          <line x1="280" y1="188" x2="280" y2="130" stroke="#37A06B" stroke-width="1" stroke-dasharray="4 5" opacity="0.8"/>
          <rect x="8" y="26" width="176" height="76" rx="2" fill="rgba(159,211,206,0.12)" stroke="#9FD3CE" stroke-width="1"/>
          <text x="26" y="56" fill="#9FD3CE" font-family="monospace" font-size="12" letter-spacing="2">ROUND</text>
          <text x="26" y="82" fill="#F5F8F6" font-size="14">开赛时间 · 对阵 · 场馆</text>
          <rect x="376" y="26" width="176" height="76" rx="2" fill="rgba(224,138,46,0.12)" stroke="#E08A2E" stroke-width="1"/>
          <text x="394" y="56" fill="#E08A2E" font-family="monospace" font-size="12" letter-spacing="2">TRANSFER</text>
          <text x="394" y="82" fill="#F5F8F6" font-size="14">官宣 · 传闻 · 观察</text>
          <rect x="176" y="188" width="208" height="46" rx="2" fill="rgba(55,160,107,0.16)" stroke="#37A06B" stroke-width="1"/>
          <text x="194" y="217" fill="#F5F8F6" font-size="14">战报 + 场馆信息 · 同屏</text>
          <circle cx="280" cy="130" r="7" fill="#0A1A28" stroke="#9FD3CE" stroke-width="1.5"/>
          <circle cx="280" cy="130" r="16" fill="none" stroke="#9FD3CE" stroke-width="1" opacity="0.35"/>
        </svg>
      </section>

      <section class="pp-compare" id="compare" data-reveal>
        <p class="section-label section-label--inverse">SAME VIEW / 同屏对照</p>
        <h2 class="pp-h2">换个栏目，不用离开这一屏</h2>
        <p class="pp-prose">轮次与转运动态共用一块视图，切换时不刷新页面，你刚滚到的位置也还在。对照一支球队本周的对手和人员变化，两个标签来回点两下就行。</p>
        <div class="tabs pp-tabs" data-tabs>
          <button type="button" class="tab" data-tab="round">轮次安排</button>
          <button type="button" class="tab" data-tab="transfer">转会动态</button>
          <div class="pp-tabpanel" data-panel="round">
            <ul class="pp-mini">
              <li><span class="pp-mini__num">周六 15:30</span>主场对阵 · 场馆与交通指引随行显示</li>
              <li><span class="pp-mini__num">周六 19:35</span>客场对阵 · 赛前 48 小时复核后的最新时间</li>
              <li><span class="pp-mini__num">周日 16:00</span>同轮次其余场次按日期继续往下排</li>
            </ul>
          </div>
          <div class="pp-tabpanel" data-panel="transfer">
            <ul class="pp-mini">
              <li><span class="pp-mini__num">官宣</span>实色描边卡片，信息已落定</li>
              <li><span class="pp-mini__num">传闻</span>保留原始出处，等待确认</li>
              <li><span class="pp-mini__num">观察</span>关注名单阶段，记录接触与意向</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </div>

  <section class="pp-features" id="spec" data-reveal>
    <div class="shell">
      <p class="section-label">VERSION / 当前版本</p>
      <h2 class="pp-h2 pp-h2--light">V3.2.1 提供什么，按用途分成四组</h2>
      <p class="pp-prose pp-prose--light">V3 系列自 2023 年起按季度迭代，这一版把对照、索引与标记三件事补齐。想快速确认某个功能在不在，展开对应的那一组就可以。</p>

      <details class="pp-spec" open>
        <summary><span class="pp-spec__no">01</span>同屏对照</summary>
        <ul class="pp-spec__list">
          <li><span class="num">1.1</span><span>轮次与转运动态在同一视图内切换，切换过程不刷新页面。</span></li>
          <li><span class="num">1.2</span><span>赛后战报与场馆信息挂在同一块屏幕，复盘一场球不用再跳出去。</span></li>
          <li><span class="num">1.3</span><span>切换后保留当前阅读位置，滚到哪儿就是哪儿。</span></li>
        </ul>
      </details>

      <details class="pp-spec">
        <summary><span class="pp-spec__no">02</span>栏目色标</summary>
        <ul class="pp-spec__list">
          <li><span class="num">2.1</span><span>轮次用冷白与浅青，标题下的短色条与分隔线同色。</span></li>
          <li><span class="num">2.2</span><span>转运动态用琥珀橙，只出现在标签、角标与重点卡片描边上。</span></li>
          <li><span class="num">2.3</span><span>赛后战报用草皮绿，与地面色块形成稳定的位置记忆。</span></li>
        </ul>
      </details>

      <details class="pp-spec">
        <summary><span class="pp-spec__no">03</span>索引与导航</summary>
        <ul class="pp-spec__list">
          <li><span class="num">3.1</span><span>左侧章节索引随滚动点亮，点一下平滑定位到对应模块。</span></li>
          <li><span class="num">3.2</span><span>第二栏入口常驻，页面滚动后仍然可见，一次点击回到电脑端主视图。</span></li>
          <li><span class="num">3.3</span><span>返回顶部按钮在向下滚动一段后出现，与版本徽标同一列对齐。</span></li>
        </ul>
      </details>

      <details class="pp-spec">
        <summary><span class="pp-spec__no">04</span>标记与提示</summary>
        <ul class="pp-spec__list">
          <li><span class="num">4.1</span><span>版本徽标用等宽字加描边，V3.2.1 在头部与页尾都能对上。</span></li>
          <li><span class="num">4.2</span><span>更新时间提示按轮次与版本表达，随时知道内容走到哪一步。</span></li>
          <li><span class="num">4.3</span><span>当前轮次节点常亮，配一圈浅青光晕，不与其他节点混淆。</span></li>
        </ul>
      </details>
    </div>
  </section>

  <section class="pp-uses shell" id="uses" data-reveal>
    <p class="section-label section-label--inverse">MATCHDAY / 三种常见用法</p>
    <h2 class="pp-h2">谁在什么时候会打开这些模块</h2>
    <div class="pp-uses__grid">
      <article class="pp-use">
        <span class="pp-use__no">赛前十分钟</span>
        <h3>查开球和走哪个门</h3>
        <p>打开轮次表，按日期找到本轮，点进对阵看场馆与交通指引。赶上临时调整，表里看到的就是复核后的时间。</p>
      </article>
      <article class="pp-use">
        <span class="pp-use__no">转会窗开着</span>
        <h3>对照两种说法</h3>
        <p>同屏切到转会动态，官宣与传闻分色排开，同一个人的进展不用在两个窗口之间来回比对。</p>
      </article>
      <article class="pp-use">
        <span class="pp-use__no">赛后复盘</span>
        <h3>把一场球看完整</h3>
        <p>先读战报初稿回顾过程，24 小时内技术统计补齐，再回来看数据与场地细节，一次看完。</p>
      </article>
    </div>
    <figure class="pp-wide">
      <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间球场俯拍，看台与草皮沿对角线分割，灯光明亮" loading="lazy" decoding="async">
      <figcaption>赛前的查表、转会窗的对照、终场后的复盘，用的都是同一块屏幕。</figcaption>
    </figure>
  </section>

  <section class="pp-start" data-reveal>
    <div class="shell pp-start__inner">
      <div class="pp-start__copy">
        <p class="section-label section-label--inverse">START / 从这里开始</p>
        <h2 class="pp-h2">一次点到位</h2>
        <p class="pp-prose">第二栏入口是起步最快的一条路，点进去就是完整的电脑端主视图。想先看内容更新，去赛事专栏按标签筛；按钮找不到、标注看不懂，答疑中心按问题出现的先后顺序列好了答案；想了解是谁在做这些内容，品牌档案里有团队配置与合作情况。</p>
        <div class="pp-start__links">
          <a class="btn btn--primary" href="/articles/">赛事专栏</a>
          <a class="btn btn--solid-light" href="/answers/">答疑中心</a>
          <a class="btn btn--ghost" href="/company/">品牌档案</a>
          <a class="btn btn--ghost" href="/cooperation/">合作联系</a>
        </div>
        <div class="pp-note">
          <h3>手机上看和电脑上看，差在哪</h3>
          <p>移动端保留轮次、战报、转会三个入口，其余内容按同一阅读顺序往下排。需要并排比对两块信息时，回到电脑端会更顺手，也不用来回缩放。</p>
        </div>
      </div>
      <figure class="pp-start__media">
        <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="夜色中的看台灯柱剪影，纵向构图，上方留出大片空白" loading="lazy" decoding="async">
        <figcaption>夜场灯亮起来之前，信息先到位。</figcaption>
      </figure>
    </div>
  </section>
</main>

.page-products {
  --pp-accent: var(--turf-2);
  background: var(--night);
  color: var(--cold);
  overflow-x: hidden;
}

.page-products .pp-hero {
  position: relative;
  padding: 28px 0 44px;
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(30, 122, 78, 0.55), rgba(10, 26, 40, 0) 66%);
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 14% 100%);
  pointer-events: none;
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 66%;
  height: 1px;
  background: var(--hairline);
  transform: rotate(-14deg);
  pointer-events: none;
}

.page-products .pp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
}

.page-products .pp-kicker {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ice);
}

.page-products .pp-hero__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 7.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-products .pp-hero__text {
  max-width: 40ch;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.82);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .pp-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.page-products .pp-hero__media {
  margin: 0;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 94%);
}

.page-products .pp-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-body {
  display: grid;
  gap: 30px;
  padding-top: 8px;
  padding-bottom: 56px;
}

.page-products .pp-index {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.page-products .pp-index__list {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pp-index__link {
  display: block;
  white-space: nowrap;
  padding: 9px 12px;
  border-left: 2px solid var(--slate);
  background: var(--glass);
  color: var(--cold);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}

.page-products .pp-index__link.is-round { border-left-color: var(--ice); }
.page-products .pp-index__link.is-transfer { border-left-color: var(--amber); }
.page-products .pp-index__link.is-report { border-left-color: var(--turf-2); }
.page-products .pp-index__link.is-compare { border-left-color: var(--cold); }
.page-products .pp-index__link.is-spec { border-left-color: var(--slate); }
.page-products .pp-index__link.is-uses { border-left-color: var(--ice); }

.page-products .pp-index__link:hover,
.page-products .pp-index__link:focus-visible,
.page-products .pp-index__link.is-active {
  background: var(--glass-ice);
  border-left-width: 4px;
}

.page-products .pp-module {
  position: relative;
  margin-bottom: 26px;
  padding: 22px 18px 24px;
  background: var(--board);
  border: 1px solid var(--hairline);
}

.page-products .pp-module::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--pp-accent);
}

.page-products .pp-module--round { --pp-accent: var(--ice); background: var(--board); }
.page-products .pp-module--transfer { --pp-accent: var(--amber); background: var(--board-soft); }
.page-products .pp-module--report { --pp-accent: var(--turf-2); background: var(--board); }

.page-products .pp-module__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.08;
  color: var(--white);
}

.page-products .pp-scene {
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--pp-accent, var(--turf-2));
  font-size: 15px;
  line-height: 1.7;
  color: var(--ice);
}

.page-products .pp-module--transfer .pp-scene { color: #F0B36A; }

.page-products .pp-split {
  display: grid;
  gap: 20px;
}

.page-products .pp-prose {
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.86);
}

.page-products .pp-prose p {
  margin: 0 0 14px;
}

.page-products .pp-timeline {
  margin: 20px 0 0;
  padding: 0 0 0 20px;
  list-style: none;
  border-left: 1px solid var(--hairline);
}

.page-products .pp-timeline li {
  position: relative;
  padding-bottom: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 248, 246, 0.8);
}

.page-products .pp-timeline li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ice);
  border-radius: 50%;
  background: var(--night);
}

.page-products .pp-timeline li:last-child::before {
  background: var(--ice);
  box-shadow: 0 0 0 4px rgba(159, 211, 206, 0.16);
}

.page-products .pp-timeline strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ice);
}

.page-products .pp-figure {
  margin: 0;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-figure figcaption,
.page-products .pp-wide figcaption,
.page-products .pp-start__media figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-products .pp-levels {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.page-products .pp-level {
  padding: 13px 14px;
  background: rgba(10, 26, 40, 0.55);
  border-left: 2px solid var(--amber);
}

.page-products .pp-level--watch {
  border-left-color: var(--slate);
}

.page-products .pp-level p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: rgba(10, 26, 40, 0.45);
  border: 1px solid var(--hairline);
}

.page-products .pp-compare {
  margin-bottom: 26px;
  padding: 22px 18px 24px;
  background: var(--glass);
  border: 1px solid var(--hairline);
}

.page-products .pp-h2 {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.08;
  color: var(--white);
}

.page-products .pp-h2--light {
  color: var(--text);
}

.page-products .pp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .pp-tabs .tab {
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.page-products .pp-tabs .tab[aria-selected="true"],
.page-products .pp-tabs .tab.is-active {
  background: var(--turf);
  border-color: var(--turf);
  color: var(--white);
}

.page-products .pp-tabpanel {
  flex-basis: 100%;
  margin-top: 8px;
}

.page-products .pp-mini {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-mini li {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-mini__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ice);
}

.page-products .pp-features {
  background: var(--cold);
  color: var(--text);
  padding: 48px 0 52px;
}

.page-products .pp-prose--light {
  max-width: 46ch;
  color: var(--text);
  opacity: 0.86;
}

.page-products .pp-spec {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.page-products .pp-spec summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: var(--text);
}

.page-products .pp-spec summary::-webkit-details-marker {
  display: none;
}

.page-products .pp-spec summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--turf);
}

.page-products .pp-spec[open] summary::after {
  content: "–";
}

.page-products .pp-spec__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--turf);
}

.page-products .pp-spec__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-products .pp-spec__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
}

.page-products .pp-spec__list .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--turf);
}

.page-products .pp-uses {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-products .pp-uses__grid {
  display: grid;
  gap: 14px;
}

.page-products .pp-use {
  padding: 18px 16px;
  background: var(--board);
  border-top: 2px solid var(--ice);
}

.page-products .pp-use:nth-child(2) {
  border-top-color: var(--amber);
  background: var(--board-soft);
}

.page-products .pp-use:nth-child(3) {
  border-top-color: var(--turf-2);
}

.page-products .pp-use__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ice);
}

.page-products .pp-use:nth-child(2) .pp-use__no { color: var(--amber); }
.page-products .pp-use:nth-child(3) .pp-use__no { color: var(--turf-2); }

.page-products .pp-use h3 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.page-products .pp-use p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-wide {
  margin: 28px 0 0;
}

.page-products .pp-wide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.page-products .pp-start {
  padding: 12px 0 64px;
}

.page-products .pp-start__inner {
  display: grid;
  gap: 26px;
}

.page-products .pp-start__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-products .pp-note {
  margin-top: 24px;
  padding: 16px 16px 18px;
  background: var(--glass);
  border-left: 2px solid var(--ice);
}

.page-products .pp-note h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}

.page-products .pp-note p {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 248, 246, 0.84);
}

.page-products .pp-start__media {
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.page-products .pp-start__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

@media (min-width: 720px) {
  .page-products .pp-hero {
    padding: 40px 0 60px;
  }

  .page-products .pp-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-products .pp-split--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

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

  .page-products .pp-index__list {
    flex-wrap: wrap;
    overflow: visible;
  }

  .page-products .pp-mini li {
    grid-template-columns: 132px 1fr;
    gap: 15px;
    align-items: baseline;
  }
}

@media (min-width: 960px) {
  .page-products .pp-hero {
    padding: 56px 0 72px;
  }

  .page-products .pp-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 44px;
  }

  .page-products .pp-body {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 46px;
    padding-bottom: 72px;
  }

  .page-products .pp-index {
    position: sticky;
    top: 104px;
    align-self: start;
    padding: 16px 14px 18px;
    background: var(--glass);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(10px);
  }

  .page-products .pp-index__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
  }

  .page-products .pp-index__link {
    padding: 10px 12px;
  }

  .page-products .pp-module {
    padding: 32px 32px 34px;
    margin-bottom: 34px;
  }

  .page-products .pp-compare {
    padding: 32px 32px 34px;
    margin-bottom: 0;
  }

  .page-products .pp-features {
    padding: 68px 0 76px;
  }

  .page-products .pp-uses {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .page-products .pp-start__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 46px;
    align-items: start;
  }
}

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

.page-products {
  --surface-glass: transparent;
}