.page-products {
  --pd-pad: clamp(16px, 3vw, 40px);
  --pd-radius: 26px 10px 26px 10px;
  color: var(--paper);
  background: var(--ink);
}

.page-products .ky-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--mute);
}

.page-products .ky-breadcrumb__link {
  color: var(--gold);
  text-decoration: none;
}

.page-products .ky-breadcrumb__link:hover,
.page-products .ky-breadcrumb__link:focus-visible {
  color: var(--gold-bright);
}

.page-products .ky-breadcrumb__sep {
  color: var(--ink-3);
}

/* ---------- Hero ---------- */
.page-products .pd-hero {
  padding-top: clamp(20px, 4vw, 44px);
}

.page-products .pd-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-hero__title {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 7.6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.page-products .pd-hero__text {
  max-width: 46ch;
  color: rgba(245, 241, 230, .82);
}

.page-products .pd-hero__actions {
  margin-top: 26px;
  gap: 12px;
}

.page-products .pd-facts {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: linear-gradient(158deg, var(--ink-2), var(--ink) 62%);
  box-shadow: var(--shadow);
}

.page-products .pd-facts__head {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--gold);
}

.page-products .pd-facts__list {
  margin: 0;
}

.page-products .pd-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
}

.page-products .pd-facts__row dt {
  color: var(--mute);
}

.page-products .pd-facts__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--gold-bright);
  text-align: right;
}

.page-products .pd-facts__media {
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px 6px 16px 6px;
}

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

/* ---------- P-01 ---------- */
.page-products .pd-app__grid {
  display: grid;
  gap: 20px;
}

.page-products .pd-app__body p + p {
  margin-top: 14px;
}

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

.page-products .pd-app__list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 241, 230, .84);
}

.page-products .pd-app__num {
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: .12em;
}

/* ---------- P-02 ---------- */
.page-products .pd-review__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-products .pd-review__lead {
  color: rgba(245, 241, 230, .78);
}

.page-products .pd-review__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pd-review__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: var(--ink-2);
}

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

.page-products .pd-dim {
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px 6px 16px 6px;
  background: var(--ink-2);
  transition: border-color .18s ease, transform .18s ease;
}

.page-products .pd-dim:hover,
.page-products .pd-dim:focus-within {
  border-color: var(--gold);
  transform: translateY(-2px);
}

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

.page-products .pd-dim__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

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

.page-products .pd-dim__summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--gold);
}

.page-products .pd-dim[open] .pd-dim__summary::after {
  content: "－";
}

.page-products .pd-dim__num {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
}

.page-products .pd-dim__body {
  padding: 0 18px 18px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-dim__body p {
  margin: 0 0 10px;
}

.page-products .pd-dim__how {
  font-size: 14px;
  color: var(--gold-bright);
  border-left: 2px solid var(--line);
  padding-left: 12px;
}

/* ---------- P-03 ---------- */
.page-products .pd-compare {
  position: relative;
}

.page-products .pd-compare::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--data-blue), var(--data-purple) 55%, transparent 92%);
  opacity: .75;
}

.page-products .pd-compare__head {
  max-width: 66ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-compare__lead {
  color: rgba(245, 241, 230, .78);
}

.page-products .pd-compare__figure {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

.page-products .pd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px 8px 18px 8px;
  background: var(--ink-2);
  -webkit-overflow-scrolling: touch;
}

.page-products .pd-table-wrap:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.page-products .pd-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
}

.page-products .pd-table caption {
  padding: 15px 18px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-products .pd-table th,
.page-products .pd-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
}

.page-products .pd-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-3);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.page-products .pd-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ink-2);
  color: var(--gold-bright);
  font-weight: 600;
  white-space: nowrap;
}

.page-products .pd-table thead th:first-child {
  left: 0;
  z-index: 3;
}

.page-products .pd-table tbody td {
  color: rgba(245, 241, 230, .82);
}

.page-products .pd-table tbody tr:hover td,
.page-products .pd-table tbody tr:hover th {
  background: rgba(201, 162, 74, .08);
}

.page-products .pd-compare__note {
  margin-top: 16px;
  color: var(--mute);
}

/* ---------- P-04 ---------- */
.page-products .pd-panels__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pd-panels__body > .ky-title {
  margin-bottom: 18px;
}

.page-products .pd-panels__cards {
  display: grid;
  gap: 14px;
  margin: 26px 0 18px;
}

.page-products .pd-panelcard {
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 16px 6px 16px 6px;
  background: var(--ink-2);
  transition: border-color .18s ease, transform .18s ease;
}

.page-products .pd-panelcard:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.page-products .pd-panelcard__id {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--data-teal);
}

.page-products .pd-panelcard__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

.page-products .pd-panelcard__text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-panelcard__meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--mute);
}

.page-products .pd-panels__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

.page-products .pd-textlink {
  display: inline-block;
  color: var(--gold);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}

.page-products .pd-textlink:hover,
.page-products .pd-textlink:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* ---------- P-05 ---------- */
.page-products .pd-install {
  background: linear-gradient(180deg, var(--ink-2), var(--ink) 72%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pd-install__head {
  max-width: 60ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-products .pd-install__lead {
  color: rgba(245, 241, 230, .78);
}

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

.page-products .pd-step {
  padding-top: 16px;
  border-top: 2px solid var(--line);
  transition: border-color .18s ease;
}

.page-products .pd-step:hover {
  border-color: var(--gold-bright);
}

.page-products .pd-step__num {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--gold);
}

.page-products .pd-step__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}

.page-products .pd-step__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-install__figure {
  margin: 30px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

/* ---------- P-06 ---------- */
.page-products .pd-scenes__head {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-scenes {
  display: grid;
  gap: 16px;
}

.page-products .pd-scene {
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: var(--ink-2);
  transition: transform .18s ease, border-color .18s ease;
}

.page-products .pd-scene:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.page-products .pd-scene__num {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--data-blue);
}

.page-products .pd-scene__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

.page-products .pd-scene__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

/* ---------- P-07 ---------- */
.page-products .pd-rhythm__grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

.page-products .pd-rhythm__body p + p {
  margin-top: 14px;
}

.page-products .pd-rhythm__actions {
  margin-top: 26px;
  gap: 12px;
}

/* ---------- Next ---------- */
.page-products .pd-next {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.page-products .pd-next__inner {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: linear-gradient(150deg, var(--ink-2), var(--ink));
  box-shadow: var(--shadow);
}

.page-products .pd-next__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}

.page-products .pd-next__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-next__links {
  gap: 12px;
  align-items: center;
}

/* ---------- Media queries ---------- */
@media (min-width: 760px) {
  .page-products .pd-scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-panels__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }
}

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

  .page-products .pd-app__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .page-products .pd-rhythm__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 56px);
  }

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

@media (min-width: 960px) {
  .page-products .pd-review__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(26px, 3vw, 44px);
  }

  .page-products .pd-panels__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(26px, 3vw, 48px);
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-dim,
  .page-products .pd-panelcard,
  .page-products .pd-scene,
  .page-products .pd-step,
  .page-products .pd-textlink {
    transition: color .18s ease, border-color .18s ease;
  }

  .page-products .pd-dim:hover,
  .page-products .pd-dim:focus-within,
  .page-products .pd-panelcard:hover,
  .page-products .pd-scene:hover {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <nav class="ky-breadcrumb" aria-label="面包屑">
    <a class="ky-breadcrumb__link" href="/">首页</a>
    <span class="ky-breadcrumb__sep" aria-hidden="true">/</span>
    <span aria-current="page">应用与版本</span>
  </nav>

  <section class="ky-section pd-hero">
    <div class="ky-container pd-hero__grid">
      <div class="pd-hero__lead">
        <p class="ky-kicker">P-00 · 应用与版本</p>
        <h1 class="pd-hero__title">开运体育安卓客户端<br>与版本选择</h1>
        <p class="ky-lead pd-hero__text">装上客户端，比分和战报就落在你手里。开运体育把安装门槛、五个体验维度的实际表现，以及标准版与 NW4W 测试版各自能做到哪一步，一段一段讲清楚，你照着挑一个合适的版本就行。</p>
        <div class="ky-cluster pd-hero__actions">
          <a class="ky-btn ky-btn--gold" href="#pd-install">看安装流程</a>
          <a class="ky-btn ky-btn--ghost" href="#pd-compare">对照两个版本</a>
        </div>
      </div>
      <aside class="pd-facts" aria-label="版本参数速览">
        <p class="pd-facts__head">速览</p>
        <dl class="pd-facts__list">
          <div class="pd-facts__row"><dt>适用系统</dt><dd>Android 8.0 及以上</dd></div>
          <div class="pd-facts__row"><dt>安装包</dt><dd>约 38MB</dd></div>
          <div class="pd-facts__row"><dt>访问方式</dt><dd>网页版 · 安卓客户端</dd></div>
          <div class="pd-facts__row"><dt>覆盖赛事</dt><dd>18 个联赛与杯赛</dd></div>
          <div class="pd-facts__row"><dt>战报库</dt><dd>4200 场编号战报</dd></div>
        </dl>
        <figure class="pd-facts__media">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深墨绿手机界面轮廓，鎏金卡片与蓝紫数据线层叠">
        </figure>
      </aside>
    </div>
  </section>

  <section id="pd-app" class="ky-section pd-app">
    <div class="ky-container pd-app__grid">
      <header class="pd-app__head">
        <p class="ky-kicker">P-01</p>
        <h2 class="ky-title">装得上、开得快的安卓客户端</h2>
      </header>
      <div class="pd-app__body">
        <p class="ky-body">开运体育在 2016 年上线官网与安卓客户端，两边用的是同一批赛事数据。安装包约 38MB，Android 8.0 及以上的机型都能装，从拿到安装包到看见比分，通常就是几分钟的事。</p>
        <p class="ky-body">如果只是临时查一场比赛的比分和技术统计，打开网页版就够了，不用安装任何东西，公开数据直接看。如果你习惯赛前赛后反复翻同一批联赛，客户端会把数据面板、战报专栏和使用记录都放在触手可及的位置。</p>
        <ul class="pd-app__list">
          <li><span class="ky-mono pd-app__num">01</span>不挑机型：Android 8.0 及以上系统即可安装，用了几年的旧设备也跑得动。</li>
          <li><span class="ky-mono pd-app__num">02</span>体积克制：约 38MB 的安装包，不必为它专门腾出大块存储空间。</li>
          <li><span class="ky-mono pd-app__num">03</span>两端一致：网页版与客户端看到的是同一批已发布数据，换设备不用重新熟悉一遍界面。</li>
        </ul>
      </div>
    </div>
  </section>

  <section id="pd-review" class="ky-section pd-review">
    <div class="ky-container">
      <header class="pd-review__head">
        <p class="ky-kicker">P-02 · 五个维度</p>
        <h2 class="ky-title">一份看得懂的开运APP安卓版评测</h2>
        <p class="ky-lead pd-review__lead">启动加载、数据刷新、账号安全、耗电占用、界面可读性，这五项是用户反馈最集中的地方，也是我们每次大版本发布前会重新过一遍的内容。下面每项都写了怎么看，你可以拿自己的手机验证。</p>
      </header>
      <div class="pd-review__grid">
        <figure class="pd-review__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="等宽标签围绕五角雷达图，评分刻度以鎏金与数据蓝交替" loading="lazy" decoding="async">
        </figure>
        <div class="pd-review__items">
          <details class="pd-dim" open>
            <summary class="pd-dim__summary"><span class="ky-mono pd-dim__num">01</span>启动与加载</summary>
            <div class="pd-dim__body">
              <p>从点开图标到首屏出现比分，是耐心消耗最快的几秒。约 38MB 的包体在这里起作用——需要初始化的内容少，第一次打开也不至于让人干等。</p>
              <p class="pd-dim__how">你可以这样看：清掉后台，冷启动一次，数到比分牌出现为止；再切出去几秒回来，看是不是直接落回刚才的位置。</p>
            </div>
          </details>
          <details class="pd-dim">
            <summary class="pd-dim__summary"><span class="ky-mono pd-dim__num">02</span>数据刷新</summary>
            <div class="pd-dim__body">
              <p>比分、技术统计和趋势指标来自同一批已发布数据。页面切回前台时能不能立刻跟上比赛进程，直接决定边看边翻的顺畅程度。</p>
              <p class="pd-dim__how">你可以这样看：比赛进行中把客户端切到后台，两分钟后切回来，与网页版同一场比赛的比分和统计并排比一下。</p>
            </div>
          </details>
          <details class="pd-dim">
            <summary class="pd-dim__summary"><span class="ky-mono pd-dim__num">03</span>账号安全</summary>
            <div class="pd-dim__body">
              <p>登录设备、查询动作都会写进开运中心的使用记录，换手机或把设备借给别人之后，你能一眼看出哪些操作来自旧设备。平台另有账号安全、数据备份与访问审计三项机制在后台运行。</p>
              <p class="pd-dim__how">你可以这样看：在开运中心翻最近一段时间的登录记录，遇到陌生设备及时改密码，并把情况发给客服。</p>
            </div>
          </details>
          <details class="pd-dim">
            <summary class="pd-dim__summary"><span class="ky-mono pd-dim__num">04</span>耗电与占用</summary>
            <div class="pd-dim__body">
              <p>连续浏览半小时，电量掉了多少、后台常驻占多少内存，是长期跟赛程的人最在意的两项。刷新越密集的版本，这一项越值得留意。</p>
              <p class="pd-dim__how">你可以这样看：在手机设置里查这个应用的电量与存储占用，和日常用的同类工具横向比一比，心里就有数了。</p>
            </div>
          </details>
          <details class="pd-dim">
            <summary class="pd-dim__summary"><span class="ky-mono pd-dim__num">05</span>界面可读性</summary>
            <div class="pd-dim__body">
              <p>场馆灯光偏暗、手机亮度调低的时候，比分数字和球队名称还认不认得出，取决于字号层级与明暗对比。数据面板里的趋势线也按同样的原则处理。</p>
              <p class="pd-dim__how">你可以这样看：把屏幕亮度调到三分之一，在地铁里或户外看一屏比分，能一眼读清就是合适的。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section id="pd-compare" class="ky-section pd-compare">
    <div class="ky-container">
      <header class="pd-compare__head">
        <p class="ky-kicker">P-03 · 两个版本</p>
        <h2 class="ky-title">NW4W测试版服务范围对比</h2>
        <p class="ky-lead pd-compare__lead">NW4W 测试版开放数据面板、战报专栏、开运中心使用记录与更新记录四类服务，覆盖面与标准版一致，差别主要在刷新频率、历史区间、导出能力和入口位置。下表可以左右滑动，第一列固定在左边。</p>
      </header>
      <figure class="pd-compare__figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="左右两列功能矩阵与连接线，紫色标记测试版扩展范围" loading="lazy" decoding="async">
      </figure>
      <div class="pd-table-wrap" tabindex="0" role="region" aria-label="标准版与 NW4W 测试版服务范围对比表">
        <table class="pd-table">
          <caption>标准版 / NW4W 测试版 服务范围对照</caption>
          <thead>
            <tr>
              <th scope="col">对比项</th>
              <th scope="col">标准版</th>
              <th scope="col">NW4W 测试版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">数据刷新频率</th>
              <td>常规节拍，赛后与日常浏览都够用</td>
              <td>刷新更密集，适合边看边盯的局面</td>
            </tr>
            <tr>
              <th scope="row">历史记录范围</th>
              <td>近期场次与常用战报</td>
              <td>更长的历史区间，跨赛季对照方便</td>
            </tr>
            <tr>
              <th scope="row">导出能力</th>
              <td>在页面内直接查看</td>
              <td>可把面板整理成文件带出</td>
            </tr>
            <tr>
              <th scope="row">入口位置</th>
              <td>首页与导航中的常驻入口</td>
              <td>首页右侧开运中心内的测试版入口</td>
            </tr>
            <tr>
              <th scope="row">更新节奏</th>
              <td>跟随双周更新上线</td>
              <td>新功能先在测试版露面</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="ky-note pd-compare__note">两个版本共用同一个账号，登录后在开运中心的使用记录里能看到各自的查询与操作。</p>
    </div>
  </section>

  <section id="pd-panels" class="ky-section pd-panels">
    <div class="ky-container pd-panels__grid">
      <div class="pd-panels__body">
        <p class="ky-kicker">P-04 · 两个入口</p>
        <h2 class="ky-title">数据面板与战报专栏，各走各的路</h2>
        <p class="ky-body">数据面板和战报专栏是两个独立入口，首页和全站导航都能直接点到，不必先绕到别处。面板管现在的比分和走势，战报管已经结束的那一场到底发生了什么。</p>
        <div class="pd-panels__cards">
          <article class="pd-panelcard">
            <p class="ky-mono pd-panelcard__id">P-04 / A</p>
            <h3 class="pd-panelcard__title">数据面板</h3>
            <p class="pd-panelcard__text">覆盖 18 个联赛与杯赛，比分、赛程、技术统计与趋势指标排在同一个面板里。适合开赛前看对阵和近期状态，也适合多场并行时来回切换。</p>
            <p class="pd-panelcard__meta">场馆运营方、高校体育社团、内容整理者用得最多。</p>
          </article>
          <article class="pd-panelcard">
            <p class="ky-mono pd-panelcard__id">P-04 / B</p>
            <h3 class="pd-panelcard__title">战报专栏</h3>
            <p class="pd-panelcard__text">战报按场次编号排列，战报库已收录 4200 场。知道编号就能直接翻到那一场，不用按日期一层层找；同事之间交接时，报编号比描述比赛更省口舌。</p>
            <p class="pd-panelcard__meta">赛后复盘、资料归档和值班交接都用得上。</p>
          </article>
        </div>
        <p class="pd-panels__linkline">
          <a class="pd-textlink" href="/">回首页看使用记录入口</a>
        </p>
      </div>
      <figure class="pd-panels__figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="比分、赛程与趋势线组成的深色数据仪表盘抽象图" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section id="pd-install" class="ky-section pd-install">
    <div class="ky-container">
      <header class="pd-install__head">
        <p class="ky-kicker">P-05 · 四步完成</p>
        <h2 class="ky-title">下载、校验与安装流程</h2>
        <p class="ky-lead pd-install__lead">整个过程分四步，第一次装的人照着走一遍就熟了。中间任何一步对不上，先别急着继续，去帮助中心看看，或者直接问客服。</p>
      </header>
      <ol class="pd-steps">
        <li class="pd-step">
          <p class="ky-mono pd-step__num">STEP 01</p>
          <h3 class="pd-step__title">获取安装包</h3>
          <p class="pd-step__text">从官网的安卓客户端入口进入，页面上会写明当前版本号和安装包大小，约 38MB。</p>
        </li>
        <li class="pd-step">
          <p class="ky-mono pd-step__num">STEP 02</p>
          <h3 class="pd-step__title">看清版本号</h3>
          <p class="pd-step__text">安装前先确认版本标识，与你打算用的那一版对得上，再往下走。</p>
        </li>
        <li class="pd-step">
          <p class="ky-mono pd-step__num">STEP 03</p>
          <h3 class="pd-step__title">完成安装</h3>
          <p class="pd-step__text">按系统提示允许本次安装，等待进度走完。Android 8.0 及以上系统均支持。</p>
        </li>
        <li class="pd-step">
          <p class="ky-mono pd-step__num">STEP 04</p>
          <h3 class="pd-step__title">登录并绑定手机号</h3>
          <p class="pd-step__text">用手机号完成首次登录并绑定，之后的查询和操作才会归到你的使用记录里。</p>
        </li>
      </ol>
      <figure class="pd-install__figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="四个等宽编号节点以虚线连接，背景为场馆光带" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section id="pd-scenes" class="ky-section pd-scenes-section">
    <div class="ky-container">
      <header class="pd-scenes__head">
        <p class="ky-kicker">P-06 · 使用场景</p>
        <h2 class="ky-title">这些情况，客户端比网页更顺手</h2>
      </header>
      <div class="pd-scenes">
        <article class="pd-scene">
          <p class="ky-mono pd-scene__num">01</p>
          <h3 class="pd-scene__title">赛后想回头翻一遍</h3>
          <p class="pd-scene__text">比赛结束几个小时后再看，把比分、技术统计和对应场次的战报放在一起，比翻一堆截图省事得多，聊起来也有据可依。</p>
        </article>
        <article class="pd-scene">
          <p class="ky-mono pd-scene__num">02</p>
          <h3 class="pd-scene__title">长期跟一两个联赛</h3>
          <p class="pd-scene__text">18 个联赛与杯赛的赛程和趋势指标在同一个面板里连着看，赛季走势不会断线，中途换设备也不影响接着往下追。</p>
        </article>
        <article class="pd-scene">
          <p class="ky-mono pd-scene__num">03</p>
          <h3 class="pd-scene__title">场馆与社团批量查看</h3>
          <p class="pd-scene__text">同一时段多场赛事并行时，按场次编号逐条翻战报，值班同事换班交接也能说清楚看到哪一场、哪个指标。</p>
        </article>
      </div>
    </div>
  </section>

  <section id="pd-rhythm" class="ky-section pd-rhythm">
    <div class="ky-container pd-rhythm__grid">
      <header class="pd-rhythm__head">
        <p class="ky-kicker">P-07 · 更新节奏</p>
        <h2 class="ky-title">双周迭代，新功能先到测试版</h2>
      </header>
      <div class="pd-rhythm__body">
        <p class="ky-body">功能按双周节奏更新，每月的较大版本把这段时间攒下的改动一起发出去。新功能通常先在 NW4W 测试版露面，用一段时间稳定之后进标准版，所以想尝鲜的人和求稳的人各有各的选择。</p>
        <p class="ky-body">开运更新记录已补至第 46 期，每一期列出本次改动和涉及的服务。想知道下一个版本会动哪里，翻最近几期就能看出规律。</p>
        <div class="ky-cluster pd-rhythm__actions">
          <a class="ky-btn ky-btn--gold" href="/press/">查看第 46 期更新记录</a>
          <a class="ky-btn ky-btn--ghost" href="/faq/">版本差异常见问题</a>
        </div>
      </div>
    </div>
  </section>

  <section class="ky-section--tight pd-next">
    <div class="ky-container pd-next__inner">
      <div class="pd-next__text">
        <h2 class="pd-next__title">选好版本，剩下的事我们接着办</h2>
        <p class="pd-next__lead">安装过程卡住、版本拿不准，或者只是想问某个指标在哪个面板里，都可以直接找我们。客服团队 12 人，工作日 9:00-18:00 在线。</p>
      </div>
      <div class="ky-cluster pd-next__links">
        <a class="ky-btn ky-btn--gold" href="/feedback/">联系客服</a>
        <a class="ky-btn ky-btn--ghost" href="/faq/">去帮助中心</a>
        <a class="pd-textlink" href="/story/">了解开运体育的数据团队</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pd-radius: 26px 10px 26px 10px;
  color: var(--paper);
  background: var(--ink);
}

.page-products .ky-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--mute);
}

.page-products .ky-breadcrumb__link {
  color: var(--gold);
  text-decoration: none;
}

.page-products .ky-breadcrumb__link:hover,
.page-products .ky-breadcrumb__link:focus-visible {
  color: var(--gold-bright);
}

.page-products .ky-breadcrumb__sep {
  color: var(--ink-3);
}

/* ---------- Hero ---------- */
.page-products .pd-hero {
  padding-top: clamp(20px, 4vw, 44px);
}

.page-products .pd-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-hero__title {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 7.6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.page-products .pd-hero__text {
  max-width: 46ch;
  color: rgba(245, 241, 230, .82);
}

.page-products .pd-hero__actions {
  margin-top: 26px;
  gap: 12px;
}

.page-products .pd-facts {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: linear-gradient(158deg, var(--ink-2), var(--ink) 62%);
  box-shadow: var(--shadow);
}

.page-products .pd-facts__head {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--gold);
}

.page-products .pd-facts__list {
  margin: 0;
}

.page-products .pd-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
}

.page-products .pd-facts__row dt {
  color: var(--mute);
}

.page-products .pd-facts__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--gold-bright);
  text-align: right;
}

.page-products .pd-facts__media {
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px 6px 16px 6px;
}

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

/* ---------- P-01 ---------- */
.page-products .pd-app__grid {
  display: grid;
  gap: 20px;
}

.page-products .pd-app__body p + p {
  margin-top: 14px;
}

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

.page-products .pd-app__list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 241, 230, .84);
}

.page-products .pd-app__num {
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: .12em;
}

/* ---------- P-02 ---------- */
.page-products .pd-review__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-products .pd-review__lead {
  color: rgba(245, 241, 230, .78);
}

.page-products .pd-review__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pd-review__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: var(--ink-2);
}

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

.page-products .pd-dim {
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px 6px 16px 6px;
  background: var(--ink-2);
  transition: border-color .18s ease, transform .18s ease;
}

.page-products .pd-dim:hover,
.page-products .pd-dim:focus-within {
  border-color: var(--gold);
  transform: translateY(-2px);
}

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

.page-products .pd-dim__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

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

.page-products .pd-dim__summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--gold);
}

.page-products .pd-dim[open] .pd-dim__summary::after {
  content: "－";
}

.page-products .pd-dim__num {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
}

.page-products .pd-dim__body {
  padding: 0 18px 18px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-dim__body p {
  margin: 0 0 10px;
}

.page-products .pd-dim__how {
  font-size: 14px;
  color: var(--gold-bright);
  border-left: 2px solid var(--line);
  padding-left: 12px;
}

/* ---------- P-03 ---------- */
.page-products .pd-compare {
  position: relative;
}

.page-products .pd-compare::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--data-blue), var(--data-purple) 55%, transparent 92%);
  opacity: .75;
}

.page-products .pd-compare__head {
  max-width: 66ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-compare__lead {
  color: rgba(245, 241, 230, .78);
}

.page-products .pd-compare__figure {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

.page-products .pd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px 8px 18px 8px;
  background: var(--ink-2);
  -webkit-overflow-scrolling: touch;
}

.page-products .pd-table-wrap:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.page-products .pd-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
}

.page-products .pd-table caption {
  padding: 15px 18px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-products .pd-table th,
.page-products .pd-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
}

.page-products .pd-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-3);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.page-products .pd-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ink-2);
  color: var(--gold-bright);
  font-weight: 600;
  white-space: nowrap;
}

.page-products .pd-table thead th:first-child {
  left: 0;
  z-index: 3;
}

.page-products .pd-table tbody td {
  color: rgba(245, 241, 230, .82);
}

.page-products .pd-table tbody tr:hover td,
.page-products .pd-table tbody tr:hover th {
  background: rgba(201, 162, 74, .08);
}

.page-products .pd-compare__note {
  margin-top: 16px;
  color: var(--mute);
}

/* ---------- P-04 ---------- */
.page-products .pd-panels__grid {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pd-panels__body > .ky-title {
  margin-bottom: 18px;
}

.page-products .pd-panels__cards {
  display: grid;
  gap: 14px;
  margin: 26px 0 18px;
}

.page-products .pd-panelcard {
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 16px 6px 16px 6px;
  background: var(--ink-2);
  transition: border-color .18s ease, transform .18s ease;
}

.page-products .pd-panelcard:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.page-products .pd-panelcard__id {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--data-teal);
}

.page-products .pd-panelcard__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

.page-products .pd-panelcard__text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-panelcard__meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--mute);
}

.page-products .pd-panels__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

.page-products .pd-textlink {
  display: inline-block;
  color: var(--gold);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}

.page-products .pd-textlink:hover,
.page-products .pd-textlink:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* ---------- P-05 ---------- */
.page-products .pd-install {
  background: linear-gradient(180deg, var(--ink-2), var(--ink) 72%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pd-install__head {
  max-width: 60ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-products .pd-install__lead {
  color: rgba(245, 241, 230, .78);
}

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

.page-products .pd-step {
  padding-top: 16px;
  border-top: 2px solid var(--line);
  transition: border-color .18s ease;
}

.page-products .pd-step:hover {
  border-color: var(--gold-bright);
}

.page-products .pd-step__num {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--gold);
}

.page-products .pd-step__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}

.page-products .pd-step__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-install__figure {
  margin: 30px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
}

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

/* ---------- P-06 ---------- */
.page-products .pd-scenes__head {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-scenes {
  display: grid;
  gap: 16px;
}

.page-products .pd-scene {
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: var(--ink-2);
  transition: transform .18s ease, border-color .18s ease;
}

.page-products .pd-scene:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.page-products .pd-scene__num {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--data-blue);
}

.page-products .pd-scene__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

.page-products .pd-scene__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

/* ---------- P-07 ---------- */
.page-products .pd-rhythm__grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

.page-products .pd-rhythm__body p + p {
  margin-top: 14px;
}

.page-products .pd-rhythm__actions {
  margin-top: 26px;
  gap: 12px;
}

/* ---------- Next ---------- */
.page-products .pd-next {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.page-products .pd-next__inner {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: linear-gradient(150deg, var(--ink-2), var(--ink));
  box-shadow: var(--shadow);
}

.page-products .pd-next__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}

.page-products .pd-next__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 241, 230, .8);
}

.page-products .pd-next__links {
  gap: 12px;
  align-items: center;
}

/* ---------- Media queries ---------- */
@media (min-width: 760px) {
  .page-products .pd-scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-panels__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }
}

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

  .page-products .pd-app__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .page-products .pd-rhythm__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 56px);
  }

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

@media (min-width: 960px) {
  .page-products .pd-review__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(26px, 3vw, 44px);
  }

  .page-products .pd-panels__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(26px, 3vw, 48px);
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-dim,
  .page-products .pd-panelcard,
  .page-products .pd-scene,
  .page-products .pd-step,
  .page-products .pd-textlink {
    transition: color .18s ease, border-color .18s ease;
  }

  .page-products .pd-dim:hover,
  .page-products .pd-dim:focus-within,
  .page-products .pd-panelcard:hover,
  .page-products .pd-scene:hover {
    transform: none;
  }
}