.page-products {
  --pf-gap: clamp(18px, 3vw, 34px);
  background: var(--ink-900);
  color: var(--mist-100);
  overflow-x: clip;
}

.page-products .pf-hero {
  position: relative;
  padding-block: clamp(22px, 4vw, 48px) clamp(28px, 4.6vw, 56px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(23, 169, 140, 0.18), transparent 62%),
    var(--ink-900);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 40px);
  align-items: start;
}

.page-products .pf-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 7.4vw, 78px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 12px 0 0;
  max-width: 15em;
}

.page-products .pf-hero__title span {
  display: block;
}

.page-products .pf-hero__title em {
  display: block;
  font-style: normal;
  margin-top: 10px;
  font-size: clamp(18px, 3.2vw, 34px);
  letter-spacing: 0.02em;
  color: var(--signal);
}

.page-products .pf-hero__lead {
  margin: clamp(16px, 2.6vw, 26px) 0 0;
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2.8vw, 28px);
}

.page-products .pf-hero__side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .pf-hero__version {
  margin: 0;
  justify-self: end;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(48px, 14vw, 116px);
  line-height: 0.76;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--teal-700);
  user-select: none;
}

.page-products .pf-hero__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
}

.page-products .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.03);
}

.page-products .media-frame {
  margin: 0 0 18px;
  background: var(--ink-800);
}

.page-products .media-frame--wide {
  aspect-ratio: 16 / 9;
}

.page-products .media-frame--square {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

.page-products .media-frame__caption {
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel-400);
  border-top: 1px solid var(--ink-700);
}

.page-products .pf-metrics {
  list-style: none;
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-700);
  border-block: 1px solid var(--ink-700);
}

.page-products .pf-metric {
  position: relative;
  background: var(--ink-900);
  padding: clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 26px);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-products .pf-metric::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--signal);
  opacity: 0.5;
}

.page-products .pf-metric__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
}

.page-products .pf-metric__num small {
  font-size: 0.42em;
  letter-spacing: 0;
  margin-inline-start: 3px;
  color: var(--steel-400);
}

.page-products .pf-metric p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--steel-400);
}

.page-products .pf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  padding-block: clamp(26px, 4.2vw, 52px) clamp(38px, 6vw, 76px);
}

.page-products .pf-toc {
  min-width: 0;
}

.page-products .pf-toc__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.page-products .pf-toc ol {
  list-style: none;
  counter-reset: pf-toc;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pf-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  color: var(--steel-400);
  background: var(--ink-800);
  border-inline-start: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .pf-toc a::before {
  counter-increment: pf-toc;
  content: counter(pf-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--teal-700);
}

.page-products .pf-toc a:hover,
.page-products .pf-toc a:focus-visible {
  color: var(--mist-100);
  background: var(--ink-700);
  border-inline-start-color: var(--signal);
}

.page-products .pf-toc a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.page-products .pf-sections {
  min-width: 0;
}

.page-products .pf-section {
  padding-block: clamp(24px, 3.6vw, 44px);
  border-top: 1px solid var(--ink-700);
  scroll-margin-top: 76px;
}

.page-products .pf-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pf-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(14px, 2vw, 20px);
}

.page-products .pf-section__idx {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.page-products .pf-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-products .pf-section h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--mist-100);
}

.page-products .pf-section p {
  margin: 0 0 14px;
  max-width: 38em;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-products .pf-section p:last-child {
  margin-bottom: 0;
}

.page-products .pf-section .link-track {
  color: var(--track);
}

.page-products .pf-section .link-track:hover,
.page-products .pf-section .link-track:focus-visible {
  color: var(--amber);
}

.page-products .pf-map {
  margin: 0 0 18px;
  padding: clamp(10px, 2vw, 22px);
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-products .pf-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pf-map figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--steel-400);
}

.page-products .pf-map__link {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  opacity: 0.6;
}

.page-products .pf-map__node {
  fill: var(--ink-900);
  stroke: var(--ink-700);
  stroke-width: 1;
}

.page-products .pf-map__node--key {
  stroke: var(--teal-700);
}

.page-products .pf-map__label {
  fill: var(--mist-100);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-products .pf-map__sub {
  fill: var(--steel-400);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

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

.page-products .pf-chips .chip {
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--steel-400);
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
}

.page-products .pf-chips .chip:first-child {
  color: var(--signal);
  border-color: var(--teal-700);
}

.page-products .pf-facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--ink-700);
}

.page-products .pf-facts li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 2px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-400);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-facts .mono {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.page-products .pf-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.page-products .pf-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 12px;
  font-size: 14px;
  color: var(--mist-100);
  background: var(--ink-800);
  border-inline-start: 2px solid var(--track);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.page-products .pf-step b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--track);
}

.page-products .pf-library {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 28px);
  align-items: start;
  margin-bottom: 18px;
}

.page-products .pf-cats {
  list-style: none;
  counter-reset: pf-cat;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-products .pf-cats li {
  counter-increment: pf-cat;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mist-100);
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-cats li::before {
  content: counter(pf-cat, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--teal-700);
}

.page-products .pf-tablewrap {
  margin-bottom: 18px;
  overflow-x: auto;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
}

.page-products .pf-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .pf-table__caption {
  caption-side: top;
  text-align: start;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--steel-400);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-table th,
.page-products .pf-table td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-table thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--steel-400);
  background: var(--ink-900);
}

.page-products .pf-table tbody th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--mist-100);
  border-inline-start: 3px solid var(--ink-700);
}

.page-products .pf-table tbody td {
  color: var(--steel-400);
}

.page-products .pf-table tbody tr.is-changed th {
  border-inline-start-color: var(--signal);
}

.page-products .pf-table tbody tr.is-changed td:last-child {
  color: var(--mist-100);
}

.page-products .pf-table tbody tr:last-child th,
.page-products .pf-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pf-track {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 0 20px;
  border-inline-start: 1px solid var(--ink-700);
}

.page-products .pf-track li {
  position: relative;
  padding-bottom: 22px;
}

.page-products .pf-track li:last-child {
  padding-bottom: 0;
}

.page-products .pf-track li::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--steel-400);
}

.page-products .pf-track li:last-child::before {
  background: var(--signal);
}

.page-products .pf-track p {
  margin: 0;
  font-size: 15.5px;
}

.page-products .pf-track__ver {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel-400);
}

.page-products .pf-track li:last-child .pf-track__ver {
  color: var(--signal);
}

.page-products .pf-scenarios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.page-products .pf-scenario {
  background: var(--ink-800);
  border-top: 2px solid var(--ink-700);
  transition: border-color var(--dur) var(--ease);
}

.page-products .pf-scenario[open] {
  border-top-color: var(--signal);
}

.page-products .pf-scenario summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mist-100);
  cursor: pointer;
  list-style: none;
}

.page-products .pf-scenario summary::-webkit-details-marker {
  display: none;
}

.page-products .pf-scenario summary .mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--steel-400);
}

.page-products .pf-scenario summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--signal);
}

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

.page-products .pf-scenario summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.page-products .pf-scenario ol {
  margin: 0;
  padding: 0 16px 16px 34px;
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--steel-400);
}

.page-products .pf-scenario li::marker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--track);
}

.page-products .pf-tail {
  margin: 0;
  font-size: 14.5px;
  color: var(--steel-400);
}

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

  .page-products .pf-library {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-products .pf-scenarios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 880px) {
  .page-products .pf-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
  }

  .page-products .pf-hero__version {
    font-size: clamp(72px, 9vw, 116px);
  }
}

@media (min-width: 1000px) {
  .page-products .pf-body {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
  }

  .page-products .pf-toc {
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .page-products .pf-toc ol {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-products .pf-toc a {
    padding: 8px 10px;
    background: transparent;
  }

  .page-products .pf-toc a:hover,
  .page-products .pf-toc a:focus-visible {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-toc a,
  .page-products .pf-scenario {
    transition: none;
  }

  .page-products .pf-toc a:hover,
  .page-products .pf-toc a:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">平台能力</li>
      </ol>
    </nav>
  </div>

  <section class="pf-hero" aria-labelledby="pf-hero-title">
    <div class="shell">
      <div class="pf-hero__grid">
        <div class="pf-hero__copy">
          <p class="eyebrow">FH体育 · 当前版本 FHV4</p>
          <h1 id="pf-hero-title" class="pf-hero__title">
            <span>查比赛、读战报、翻资料，一处走完</span>
            <em>FH V4版本说明</em>
          </h1>
          <p class="lead pf-hero__lead">
            FH体育把观赛时最常做的三件事排在同一条路径上：赛程告诉你下一场什么时候开打，战报接住打完的结果，资料库收着需要反复翻的规则、历史与场馆信息。这一版把首屏做轻、把入口合并、把筛选统一，打开页面就能直接开始用。
          </p>
          <div class="pf-hero__actions">
            <a class="btn btn--signal" href="#fixtures">从赛程开始用</a>
            <a class="btn btn--ghost" href="#v4">看本版改了什么</a>
          </div>
        </div>

        <div class="pf-hero__side">
          <p class="pf-hero__version" aria-hidden="true">V4</p>
          <figure class="media-frame pf-hero__figure">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="移动端赛程列表界面示意，深色背景上青绿状态点与等宽时间戳排列整齐">
          </figure>
        </div>
      </div>

      <ul class="pf-metrics">
        <li class="pf-metric">
          <span class="pf-metric__num">38<small>%</small></span>
          <p>首屏资源体积较上一版压缩的比例</p>
        </li>
        <li class="pf-metric">
          <span class="pf-metric__num">1.4<small>秒</small></span>
          <p>4G 网络下可交互时间中位数，进入这个区间</p>
        </li>
        <li class="pf-metric">
          <span class="pf-metric__num">48<small>小时 / 轮</small></span>
          <p>赛程数据同步节奏，赛季高峰加密到 24 小时一轮</p>
        </li>
      </ul>
    </div>
  </section>

  <div class="shell pf-body">
    <aside class="pf-toc" aria-label="功能目录">
      <p class="pf-toc__label">功能目录</p>
      <ol>
        <li><a href="#overview">模块怎么串起来</a></li>
        <li><a href="#fixtures">赛程中心</a></li>
        <li><a href="#reports">战报专栏</a></li>
        <li><a href="#library">资料库与检索</a></li>
        <li><a href="#v4">FHV4 版本说明</a></li>
        <li><a href="#roadmap">版本路线</a></li>
        <li><a href="#scenarios">三种常见用法</a></li>
      </ol>
    </aside>

    <div class="pf-sections">
      <section class="pf-section" id="overview" aria-labelledby="pf-overview-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">01</span>
          <h2 id="pf-overview-title">四个模块，一条路走下来</h2>
        </div>
        <p>赛程中心摆出接下来有哪些比赛，战报专栏接住已经打完的那些，资料库存放规则、历史战绩、场馆与术语，站内检索横向穿过这三处，随时把你想要的那一条捞出来。</p>

        <figure class="pf-map">
          <svg viewBox="0 0 720 330" role="img" aria-labelledby="pf-map-title" preserveAspectRatio="xMidYMid meet">
            <title id="pf-map-title">赛程中心、战报专栏、资料库与站内检索之间的引用关系示意</title>
            <path class="pf-map__link" d="M186 78 C 300 18, 420 18, 534 78"/>
            <path class="pf-map__link" d="M600 106 C 662 150, 662 190, 600 232"/>
            <path class="pf-map__link" d="M534 252 C 420 312, 300 312, 186 252"/>

            <rect class="pf-map__node pf-map__node--key" x="30" y="56" width="156" height="46"/>
            <text class="pf-map__label" x="108" y="84" text-anchor="middle">赛程中心</text>

            <rect class="pf-map__node" x="534" y="56" width="156" height="46"/>
            <text class="pf-map__label" x="612" y="84" text-anchor="middle">战报专栏</text>

            <rect class="pf-map__node" x="534" y="230" width="156" height="46"/>
            <text class="pf-map__label" x="612" y="258" text-anchor="middle">资料库</text>

            <rect class="pf-map__node pf-map__node--key" x="30" y="230" width="156" height="46"/>
            <text class="pf-map__label" x="108" y="255" text-anchor="middle">站内检索</text>
            <text class="pf-map__sub" x="108" y="269" text-anchor="middle">贯穿其余三处</text>
          </svg>
          <figcaption>赛程带出战报，战报落到资料库，检索随时把三者重新串起来。</figcaption>
        </figure>

        <p>从任何一处进来都能继续往前走：在赛程里盯上一场，打完顺手进战报；读战报时想弄明白某个判罚依据，跳进资料库；在资料库里翻到一条术语，再回到检索里缩小范围。路径是连着的，不用记自己在第几层。</p>
      </section>

      <section class="pf-section" id="fixtures" aria-labelledby="pf-fixtures-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">02</span>
          <h2 id="pf-fixtures-title">赛程中心：四个维度，锁定下一场</h2>
        </div>
        <p>筛项目、选日期，再看要不要按赛事级别或地区收窄。项目与日期是两档主筛选，绝大多数查询到这两步就结束了。</p>

        <ul class="pf-chips" aria-label="赛程中心支持的筛选维度">
          <li class="chip">项目</li>
          <li class="chip">日期</li>
          <li class="chip">赛事级别</li>
          <li class="chip">地区</li>
        </ul>

        <p>现在覆盖 28 个运动项目，累计 46 万条赛程条目，落到中国大陆 31 个省区市，单赛季收录省级以上赛事 1,900 余项。数据每 48 小时完成一轮同步，赛季高峰加密到 24 小时一轮；状态点用三种颜色说话——青绿是已同步，橙色是同步中，灰色是待同步。</p>

        <p>注册之后可以关注常看的项目，开赛前收到赛程提醒，不用每天自己刷一遍列表。关注列表同时驱动战报订阅，赛后不用回头找。</p>

        <figure class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="赛程时间轴界面示意，项目标签贴左、比分与时间戳右对齐" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">时间轴按日期纵向展开，左侧贴项目标签，右侧对齐比分与开赛时间。</figcaption>
        </figure>

        <p class="pf-inline-link">想确认筛选怎么组合、状态色分别代表什么，可以看 <a class="link-track" href="/knowledge/">知识中心</a> 里的操作说明。</p>
      </section>

      <section class="pf-section" id="reports" aria-labelledby="pf-reports-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">03</span>
          <h2 id="pf-reports-title">战报专栏：一轮打完，六小时内读到</h2>
        </div>
        <p>每轮赛事结束后 6 小时内出稿，单轮平均发布 40 篇。标题先给结果，卡片补齐判断所需的四项信息，扫一眼就知道这场值不值得点开。</p>

        <ul class="pf-facts">
          <li><span class="mono">时间戳</span><span>开赛与完赛时间，精确到分钟，跨天场次也能对上</span></li>
          <li><span class="mono">比分</span><span>终场结果与关键分节，先看结果再决定要不要读过程</span></li>
          <li><span class="mono">项目</span><span>所属运动项目，与赛程里的标签保持一致</span></li>
          <li><span class="mono">级别</span><span>赛事级别，常规赛与淘汰赛一眼分得开</span></li>
        </ul>

        <div class="pf-steps" role="group" aria-label="找到战报的三步">
          <span class="pf-step"><b>1</b>筛项目</span>
          <span class="pf-step"><b>2</b>选日期</span>
          <span class="pf-step"><b>3</b>进战报列表</span>
        </div>

        <p>回访用户按这三步走，两下就能落到想看的场次。关注了项目的话，战报会按订阅推过来，赛后不用自己回来翻。</p>

        <p class="pf-inline-link">看最近的出稿节奏与专题合集，进 <a class="link-track" href="/journal/">赛事日志</a>。</p>
      </section>

      <section class="pf-section" id="library" aria-labelledby="pf-library-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">04</span>
          <h2 id="pf-library-title">资料库与检索：四类条目，两档主筛</h2>
        </div>
        <p>资料库现有 12,600 余条条目，按四类整理。每条都带来源标注与最后校订轮次，读到哪一条都能顺着往回想，也能看出它是不是最近更新过。</p>

        <div class="pf-library">
          <div>
            <ul class="pf-cats">
              <li>项目规则</li>
              <li>历史战绩</li>
              <li>场馆信息</li>
              <li>术语解释</li>
            </ul>
            <p>检索支持项目、日期、赛事级别与地区四个维度组合，其中项目与日期两档主筛选最常用，先把范围收到一个项目的一天，再往里挑。站点日均处理约 37 万次检索请求，赛程页的访问高峰集中在周末晚间。</p>
          </div>
          <figure class="media-frame media-frame--square">
            <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="检索筛选面板示意，项目标签与日期区间控件分两行排布" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">项目标签一排，日期区间一排，两行选完就出结果。</figcaption>
          </figure>
        </div>

        <figure class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:750w:1200}" width="1200" height="750" alt="资料库条目列表示意，每条含来源标注与校订轮次徽标" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">条目列表把信息来源与校订轮次放在同一行，新旧程度一目了然。</figcaption>
        </figure>
      </section>

      <section class="pf-section" id="v4" aria-labelledby="pf-v4-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">05</span>
          <h2 id="pf-v4-title">FHV4 版本说明：轻一点，快一点，少走一步</h2>
        </div>
        <p>这一版没有加新栏目，改动集中在打开速度和操作一致性上。下面几项是打开页面就能直接感受到的变化。</p>

        <div class="pf-tablewrap">
          <table class="pf-table">
            <caption class="pf-table__caption">FHV4 主要改动与对应的使用变化</caption>
            <thead>
              <tr>
                <th scope="col">改动项</th>
                <th scope="col">FHV4 的做法</th>
                <th scope="col">用起来的感觉</th>
              </tr>
            </thead>
            <tbody>
              <tr class="is-changed">
                <th scope="row">首屏资源体积</th>
                <td>精简首屏加载内容，较上一版压缩 38%</td>
                <td>主体内容先出来，弱网下不用对着空白等</td>
              </tr>
              <tr class="is-changed">
                <th scope="row">4G 可交互时间</th>
                <td>可交互时间中位数缩短至 1.4 秒以内</td>
                <td>页面一出来就能点筛选，不用等它反应</td>
              </tr>
              <tr class="is-changed">
                <th scope="row">底栏信息条</th>
                <td>版本说明与资料库入口合并，压缩到 96 像素高</td>
                <td>手机上底部少占一截，两个入口都还在</td>
              </tr>
              <tr class="is-changed">
                <th scope="row">筛选组件</th>
                <td>赛程、战报、资料库统一为项目＋日期两档主筛选</td>
                <td>学会一次，三个地方都是同一套操作</td>
              </tr>
              <tr>
                <th scope="row">栏目结构</th>
                <td>维持原有六个栏目，位置不变</td>
                <td>老用户不用重新找路</td>
              </tr>
            </tbody>
          </table>
        </div>

        <p>最后一行是没动的地方。习惯比新鲜重要，能不动的位置就不动。</p>

        <figure class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="两组柱状对比图，标注首屏体积与可交互时间的前后变化" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">首屏体积与可交互时间两项，在 FHV4 前后的对照。</figcaption>
        </figure>
      </section>

      <section class="pf-section" id="roadmap" aria-labelledby="pf-roadmap-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">06</span>
          <h2 id="pf-roadmap-title">从 FHV1 到 FHV4，下一步往哪走</h2>
        </div>
        <p>平台自 2019 年上线第一版，先后走过四个版本。四步拆开看，主线只有一条：把同一件事的路径缩短。</p>

        <ol class="pf-track">
          <li>
            <span class="pf-track__ver">FHV1</span>
            <h3>把日程整理成能筛的结构</h3>
            <p>赛事从散落的公告变成按项目与日期排布的时间轴，查一场比赛第一次有了固定走法。</p>
          </li>
          <li>
            <span class="pf-track__ver">FHV2</span>
            <h3>让结果留在同一条路上</h3>
            <p>看比赛和读结果不再分头找，赛后从赛程往前走一步就到。</p>
          </li>
          <li>
            <span class="pf-track__ver">FHV3</span>
            <h3>把要反复翻的东西接进来</h3>
            <p>规则、历史、场馆与术语并入站内，检索范围从赛程扩展到全站。</p>
          </li>
          <li>
            <span class="pf-track__ver">FHV4</span>
            <h3>回头把速度和一致性收一收</h3>
            <p>首屏变轻、底栏入口合并、三处筛选统一成一套组件，路径本身也变短了。</p>
          </li>
        </ol>

        <p>版本说明每季度更新一次，记录新增功能与调整过的数据。想看得更细，去 <a class="link-track" href="/journal/">赛事日志</a> 翻版本迭代与资料库更新的条目；想了解这些事由谁在做，看 <a class="link-track" href="/mission/">品牌与使命</a>。</p>
      </section>

      <section class="pf-section" id="scenarios" aria-labelledby="pf-scenarios-title">
        <div class="pf-section__head">
          <span class="pf-section__idx" aria-hidden="true">07</span>
          <h2 id="pf-scenarios-title">三种常见用法，各自三步</h2>
        </div>
        <p>不同的人来这里的理由不一样，路径也就不一样。下面三种最典型，展开看看哪条更像你。</p>

        <div class="pf-scenarios">
          <details class="pf-scenario" open>
            <summary><span class="mono">01</span>通勤路上，想知道今晚有什么可看</summary>
            <ol>
              <li>打开 <a class="link-track" href="/">首页</a>，进入赛程时间轴。</li>
              <li>筛掉不看的项目，日期选中今天。</li>
              <li>按开赛时间顺下来，挑一场加入关注并开提醒。</li>
            </ol>
          </details>

          <details class="pf-scenario">
            <summary><span class="mono">02</span>昨晚错过直播，想补结果</summary>
            <ol>
              <li>按项目筛一遍，锁定关注的那支队伍。</li>
              <li>日期选到昨天，进战报列表。</li>
              <li>看时间戳与比分，再决定要不要细读过程。</li>
            </ol>
          </details>

          <details class="pf-scenario">
            <summary><span class="mono">03</span>写稿备课，需要查依据</summary>
            <ol>
              <li>在检索里选项目与日期，先收到一个范围。</li>
              <li>进资料库，按规则、战绩、场馆或术语找到条目。</li>
              <li>看来源标注与校订轮次，确认这条能不能直接用。</li>
            </ol>
          </details>
        </div>

        <p class="pf-tail">手上有赛事、场馆或高校的赛事内容想放到这里来，去 <a class="link-track" href="/consult/">咨询中心</a> 说明情况就行。</p>
      </section>
    </div>
  </div>
</main>

.page-products {
  --pf-gap: clamp(18px, 3vw, 34px);
  background: var(--ink-900);
  color: var(--mist-100);
  overflow-x: clip;
}

.page-products .pf-hero {
  position: relative;
  padding-block: clamp(22px, 4vw, 48px) clamp(28px, 4.6vw, 56px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(23, 169, 140, 0.18), transparent 62%),
    var(--ink-900);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 40px);
  align-items: start;
}

.page-products .pf-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 7.4vw, 78px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 12px 0 0;
  max-width: 15em;
}

.page-products .pf-hero__title span {
  display: block;
}

.page-products .pf-hero__title em {
  display: block;
  font-style: normal;
  margin-top: 10px;
  font-size: clamp(18px, 3.2vw, 34px);
  letter-spacing: 0.02em;
  color: var(--signal);
}

.page-products .pf-hero__lead {
  margin: clamp(16px, 2.6vw, 26px) 0 0;
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2.8vw, 28px);
}

.page-products .pf-hero__side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .pf-hero__version {
  margin: 0;
  justify-self: end;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(48px, 14vw, 116px);
  line-height: 0.76;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--teal-700);
  user-select: none;
}

.page-products .pf-hero__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
}

.page-products .media-frame {
  margin: 0 0 18px;
  background: var(--ink-800);
}

.page-products .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.03);
}

.page-products .media-frame--wide {
  aspect-ratio: 16 / 9;
}

.page-products .media-frame--square {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

.page-products .media-frame__caption {
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel-400);
  border-top: 1px solid var(--ink-700);
}

.page-products .pf-metrics {
  list-style: none;
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-700);
  border-block: 1px solid var(--ink-700);
}

.page-products .pf-metric {
  position: relative;
  background: var(--ink-900);
  padding: clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 26px);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-products .pf-metric::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--signal);
  opacity: 0.5;
}

.page-products .pf-metric__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
}

.page-products .pf-metric__num small {
  font-size: 0.42em;
  letter-spacing: 0;
  margin-inline-start: 3px;
  color: var(--steel-400);
}

.page-products .pf-metric p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--steel-400);
}

.page-products .pf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  padding-block: clamp(26px, 4.2vw, 52px) clamp(38px, 6vw, 76px);
}

.page-products .pf-toc {
  min-width: 0;
}

.page-products .pf-toc__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.page-products .pf-toc ol {
  list-style: none;
  counter-reset: pf-toc;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .pf-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  color: var(--steel-400);
  background: var(--ink-800);
  border-inline-start: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-products .pf-toc a::before {
  counter-increment: pf-toc;
  content: counter(pf-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--teal-700);
}

.page-products .pf-toc a:hover,
.page-products .pf-toc a:focus-visible {
  color: var(--mist-100);
  background: var(--ink-700);
  border-inline-start-color: var(--signal);
}

.page-products .pf-toc a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.page-products .pf-sections {
  min-width: 0;
}

.page-products .pf-section {
  padding-block: clamp(24px, 3.6vw, 44px);
  border-top: 1px solid var(--ink-700);
  scroll-margin-top: 76px;
}

.page-products .pf-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pf-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(14px, 2vw, 20px);
}

.page-products .pf-section__idx {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.page-products .pf-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-products .pf-section h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--mist-100);
}

.page-products .pf-section p {
  margin: 0 0 14px;
  max-width: 38em;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-products .pf-section p:last-child {
  margin-bottom: 0;
}

.page-products .pf-section .link-track {
  color: var(--track);
}

.page-products .pf-section .link-track:hover,
.page-products .pf-section .link-track:focus-visible {
  color: var(--amber);
}

.page-products .pf-map {
  margin: 0 0 18px;
  padding: clamp(10px, 2vw, 22px);
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-products .pf-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pf-map figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--steel-400);
}

.page-products .pf-map__link {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  opacity: 0.6;
}

.page-products .pf-map__node {
  fill: var(--ink-900);
  stroke: var(--ink-700);
  stroke-width: 1;
}

.page-products .pf-map__node--key {
  stroke: var(--teal-700);
}

.page-products .pf-map__label {
  fill: var(--mist-100);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-products .pf-map__sub {
  fill: var(--steel-400);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

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

.page-products .pf-chips .chip {
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--steel-400);
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
}

.page-products .pf-chips .chip:first-child {
  color: var(--signal);
  border-color: var(--teal-700);
}

.page-products .pf-facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--ink-700);
}

.page-products .pf-facts li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 2px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-400);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-facts .mono {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.page-products .pf-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.page-products .pf-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 12px;
  font-size: 14px;
  color: var(--mist-100);
  background: var(--ink-800);
  border-inline-start: 2px solid var(--track);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.page-products .pf-step b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--track);
}

.page-products .pf-library {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 28px);
  align-items: start;
  margin-bottom: 18px;
}

.page-products .pf-cats {
  list-style: none;
  counter-reset: pf-cat;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-products .pf-cats li {
  counter-increment: pf-cat;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mist-100);
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-cats li::before {
  content: counter(pf-cat, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--teal-700);
}

.page-products .pf-tablewrap {
  margin-bottom: 18px;
  overflow-x: auto;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
}

.page-products .pf-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .pf-table__caption {
  caption-side: top;
  text-align: start;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--steel-400);
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-table th,
.page-products .pf-table td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--ink-700);
}

.page-products .pf-table thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--steel-400);
  background: var(--ink-900);
}

.page-products .pf-table tbody th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--mist-100);
  border-inline-start: 3px solid var(--ink-700);
}

.page-products .pf-table tbody td {
  color: var(--steel-400);
}

.page-products .pf-table tbody tr.is-changed th {
  border-inline-start-color: var(--signal);
}

.page-products .pf-table tbody tr.is-changed td:last-child {
  color: var(--mist-100);
}

.page-products .pf-table tbody tr:last-child th,
.page-products .pf-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pf-track {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 0 20px;
  border-inline-start: 1px solid var(--ink-700);
}

.page-products .pf-track li {
  position: relative;
  padding-bottom: 22px;
}

.page-products .pf-track li:last-child {
  padding-bottom: 0;
}

.page-products .pf-track li::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--steel-400);
}

.page-products .pf-track li:last-child::before {
  background: var(--signal);
}

.page-products .pf-track p {
  margin: 0;
  font-size: 15.5px;
}

.page-products .pf-track__ver {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel-400);
}

.page-products .pf-track li:last-child .pf-track__ver {
  color: var(--signal);
}

.page-products .pf-scenarios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.page-products .pf-scenario {
  background: var(--ink-800);
  border-top: 2px solid var(--ink-700);
  transition: border-color var(--dur) var(--ease);
}

.page-products .pf-scenario[open] {
  border-top-color: var(--signal);
}

.page-products .pf-scenario summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mist-100);
  cursor: pointer;
  list-style: none;
}

.page-products .pf-scenario summary::-webkit-details-marker {
  display: none;
}

.page-products .pf-scenario summary .mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--steel-400);
}

.page-products .pf-scenario summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--signal);
}

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

.page-products .pf-scenario summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.page-products .pf-scenario ol {
  margin: 0;
  padding: 0 16px 16px 34px;
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--steel-400);
}

.page-products .pf-scenario li::marker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--track);
}

.page-products .pf-tail {
  margin: 0;
  font-size: 14.5px;
  color: var(--steel-400);
}

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

  .page-products .pf-library {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-products .pf-scenarios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 880px) {
  .page-products .pf-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
  }

  .page-products .pf-hero__version {
    font-size: clamp(72px, 9vw, 116px);
  }
}

@media (min-width: 1000px) {
  .page-products .pf-body {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
  }

  .page-products .pf-toc {
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .page-products .pf-toc ol {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-products .pf-toc a {
    padding: 8px 10px;
    background: transparent;
  }

  .page-products .pf-toc a:hover,
  .page-products .pf-toc a:focus-visible {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-toc a,
  .page-products .pf-scenario {
    transition: none;
  }

  .page-products .pf-toc a:hover,
  .page-products .pf-toc a:focus-visible {
    transform: none;
  }
}