/* ===== 功能中心 / page-products ===== */

.page-products {
  --pp-offset: 8px;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- 首屏拼贴 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: calc(var(--header-h) + 28px) 0 44px;
  border-bottom: var(--stroke) solid var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23, 17, 15, 0.13) 1px, transparent 0),
    linear-gradient(158deg, #FCF8EE 0%, var(--paper) 52%, #F1E6D0 100%);
  background-size: 6px 6px, 100% 100%;
  overflow: hidden;
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  top: calc(var(--header-h) + 4px);
  right: -70px;
  width: 200px;
  height: 200px;
  border: var(--stroke) solid var(--ink);
  background: var(--red);
  opacity: 0.09;
  transform: rotate(14deg);
  pointer-events: none;
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 8px;
  background: var(--gold);
  border-top: var(--stroke) solid var(--ink);
  border-right: var(--stroke) solid var(--ink);
  pointer-events: none;
}

.page-products .pp-crumb {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.page-products .pp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  margin-top: 26px;
}

.page-products .pp-hero-lead .eyebrow {
  color: var(--red);
  text-transform: none;
}

.page-products .pp-hero-lead h1 {
  margin: 14px 0 0;
  max-width: 15em;
}

.page-products .pp-hero-lead .lede {
  margin-top: 20px;
  max-width: 32em;
  color: #2C2320;
}

.page-products .pp-hero-hint {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--muted);
  border-left: var(--stroke) solid var(--gold);
  padding-left: 12px;
  max-width: 30em;
  line-height: 1.75;
}

.page-products .pp-hero-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .pp-hero-num {
  display: grid;
  gap: 8px;
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  padding: 18px 20px;
}

.page-products .pp-hero-num .num-figure {
  line-height: 1;
  color: var(--ink);
}

.page-products .pp-hero-num .num-caption {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #453A32;
}

.page-products .pp-note {
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-3);
}

.page-products .pp-note .note-title {
  color: var(--jade);
}

.page-products .pp-terms {
  border: var(--stroke) solid var(--ink);
  background: var(--jade-light);
  box-shadow: var(--sh-3);
  padding: 16px 18px;
}

.page-products .pp-terms-title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--jade);
  margin-bottom: 10px;
}

.page-products .pp-terms dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-products .pp-term {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(22, 101, 90, 0.35);
}

.page-products .pp-term:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pp-term dt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.page-products .pp-term dd {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #3A4F49;
}

.page-products .pp-links {
  display: grid;
  gap: 8px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-3);
  padding: 16px 18px;
}

.page-products .pp-links-title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-links a {
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--jade);
  padding-bottom: 2px;
  width: fit-content;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .pp-links a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ---------- 章节通用 ---------- */
.page-products .pp-section {
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pp-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 64px;
}

.page-products .pp-section--credit {
  background: linear-gradient(180deg, var(--paper) 0%, #F4EAD5 100%);
}

.page-products .pp-section--device {
  background: linear-gradient(180deg, #F2F6F3 0%, var(--paper) 100%);
}

.page-products .pp-section--relation {
  background: var(--paper);
}

.page-products .section-head {
  margin-bottom: 28px;
}

.page-products .section-title {
  margin-top: 12px;
  max-width: 22em;
}

.page-products .pp-section .col-7,
.page-products .pp-section .col-5,
.page-products .pp-section .col-6 {
  margin-bottom: 20px;
}

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

.page-products figure.figure-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 01 比例刻度 ---------- */
.page-products .pp-scale-grid {
  align-items: start;
}

.page-products .pp-scale-copy p {
  margin-bottom: 18px;
  color: #2C2320;
}

.page-products .pp-ruler {
  height: 16px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background-color: var(--gold-light);
  background-image: repeating-linear-gradient(
    90deg,
    var(--gold) 0 2px,
    transparent 2px 22px
  );
  box-shadow: var(--sh-3);
}

.page-products .pp-ruler-marks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-products .pp-ruler-marks li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: var(--stroke) solid var(--gold);
  padding: 2px 0 2px 10px;
}

.page-products .pp-ruler-marks span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-products .pp-ruler-marks strong {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

/* 档位切换 */
.page-products .pp-tier-switch {
  position: relative;
  margin-top: 32px;
}

.page-products .pp-tier-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .pp-tier-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-products .pp-tier-tab {
  display: grid;
  gap: 4px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-3);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.22s var(--ease), background-color 0.22s var(--ease),
    color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-products .pp-tier-tab:hover {
  transform: translate(-2px, -2px);
}

.page-products .pp-tier-tab:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.page-products .pp-tier-pct {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.page-products .pp-tier-cat {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.page-products .pp-tier-input:focus-visible ~ .pp-tier-tabs {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.page-products .pp-tier-r1:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(1),
.page-products .pp-tier-r2:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(2),
.page-products .pp-tier-r3:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(3),
.page-products .pp-tier-r4:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(4) {
  background: var(--red);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--gold);
}

.page-products .pp-tier-panels {
  margin-top: 16px;
}

.page-products .pp-tier-panel {
  display: none;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-1);
  padding: 22px 20px;
}

.page-products .pp-tier-r1:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(1),
.page-products .pp-tier-r2:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(2),
.page-products .pp-tier-r3:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(3),
.page-products .pp-tier-r4:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(4) {
  display: block;
  animation: pp-panel-in 0.36s var(--ease) both;
}

@keyframes pp-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-products .pp-tier-big {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--red);
}

.page-products .pp-tier-sub {
  margin: 6px 0 14px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-tier-panel p:not(.pp-tier-big):not(.pp-tier-sub) {
  max-width: 38em;
  margin-bottom: 14px;
}

/* ---------- 02 试玩额度 ---------- */
.page-products .pp-credit-copy p {
  margin-bottom: 16px;
}

.page-products .pp-credit-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.page-products .pp-credit-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .pp-credit-item {
  position: relative;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-1);
  padding: 20px 18px 18px 66px;
}

.page-products .pp-credit-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-products .pp-credit-item p {
  margin: 0;
  font-size: 0.95rem;
  color: #2C2320;
}

.page-products .pp-credit-no {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--gold-light);
  border: var(--stroke) solid var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 800;
}

.page-products .pp-credit-item:nth-child(2) {
  border-color: var(--ink);
}

.page-products .pp-credit-item:nth-child(3) {
  background: linear-gradient(180deg, var(--paper) 0%, #F3E7CE 100%);
}

/* ---------- 03 结算节奏 ---------- */
.page-products .pp-cycle-lede {
  max-width: 40em;
  margin-bottom: 24px;
  font-size: 1.02rem;
  color: #2C2320;
}

.page-products .pp-cycle-figure {
  margin-bottom: 30px;
}

.page-products .pp-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  position: relative;
  display: grid;
  gap: 22px;
}

.page-products .pp-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: var(--stroke);
  background: var(--ink);
}

.page-products .pp-tl-item {
  position: relative;
  padding-right: 4px;
}

.page-products .pp-tl-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 20px;
  height: 20px;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.page-products .pp-tl-step {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-tl-time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 2px 0 6px;
  color: var(--ink);
}

.page-products .pp-tl-desc {
  font-size: 0.92rem;
  color: #3A322C;
  max-width: 34em;
}

/* ---------- 04 设备适配 ---------- */
.page-products .pp-table-wrap {
  overflow-x: auto;
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

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

.page-products .pp-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.page-products .pp-table-caption {
  caption-side: top;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--paper);
  border-bottom: 1px dashed var(--line);
}

.page-products .pp-table thead th {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: var(--stroke) solid var(--ink);
}

.page-products .pp-table tbody th,
.page-products .pp-table tbody td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.75;
}

.page-products .pp-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--gold-light);
  border-right: var(--stroke) solid var(--ink);
  font-weight: 600;
  min-width: 108px;
  color: var(--ink);
}

.page-products .pp-table tbody tr:nth-child(even) td {
  background: #FBF6EA;
}

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

/* ---------- 05 记录与导出 ---------- */
.page-products .pp-record-copy p {
  margin-bottom: 16px;
}

.page-products .pp-record-copy .btn {
  margin-top: 4px;
}

.page-products .pp-export {
  margin-top: 30px;
  border: var(--stroke) solid var(--ink);
  background: var(--jade-light);
  box-shadow: var(--sh-3);
  padding: 20px 18px;
}

.page-products .pp-export-title {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--jade);
  margin-bottom: 14px;
}

.page-products .pp-export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-products .pp-export-list li {
  position: relative;
  padding: 8px 10px 8px 26px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.page-products .pp-export-list li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--gold);
  border: 2px solid var(--ink);
}

/* ---------- 06 口径关系 ---------- */
.page-products .pp-relation {
  display: grid;
  gap: 14px;
}

.page-products .pp-relation-card {
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  padding: 20px 18px;
}

.page-products .pp-relation-card--jade {
  background: var(--jade-light);
}

.page-products .pp-relation-card--red {
  background: var(--gold-light);
}

.page-products .pp-relation-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.page-products .pp-relation-card--jade .pp-relation-label {
  color: var(--jade);
}

.page-products .pp-relation-card--red .pp-relation-label {
  color: var(--red);
}

.page-products .pp-relation-body {
  font-size: 0.95rem;
  color: #2C2320;
  max-width: 34em;
}

.page-products .pp-relation-note {
  margin-top: 20px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: #3A322C;
  max-width: 46em;
  border-left: var(--stroke) solid var(--gold);
  padding-left: 14px;
}

.page-products .pp-relation-note a {
  color: var(--jade);
  text-decoration: none;
  border-bottom: 2px solid var(--jade);
}

.page-products .pp-relation-note a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 700px) {
  .page-products .pp-tier-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .page-products .pp-relation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-products .pp-hero {
    padding: calc(var(--header-h) + 44px) 0 62px;
  }

  .page-products .pp-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 46px;
    margin-top: 34px;
  }

  .page-products .pp-hero-side {
    margin-top: 6px;
  }

  .page-products .pp-section {
    padding: 72px 0;
  }

  .page-products .pp-section:last-of-type {
    padding-bottom: 88px;
  }

  .page-products .section-head {
    margin-bottom: 36px;
  }

  .page-products .pp-section .col-7,
  .page-products .pp-section .col-5,
  .page-products .pp-section .col-6 {
    margin-bottom: 0;
  }

  .page-products .pp-scale-figure {
    padding-right: 8px;
  }

  .page-products .pp-scale-copy {
    padding-left: 8px;
  }

  .page-products .pp-tier-switch {
    margin-top: 44px;
  }

  .page-products .pp-tier-panel {
    padding: 30px 28px;
    margin-left: var(--pp-offset);
    width: calc(100% - var(--pp-offset));
  }

  .page-products .pp-credit-item {
    padding: 22px 22px 20px 76px;
  }

  .page-products .pp-credit-item:nth-child(2) {
    margin-left: 24px;
    width: calc(100% - 24px);
  }

  .page-products .pp-credit-item:nth-child(3) {
    margin-left: 48px;
    width: calc(100% - 48px);
  }

  .page-products .pp-timeline {
    padding-left: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .page-products .pp-timeline::before {
    left: 8px;
    right: 8px;
    top: 9px;
    bottom: auto;
    width: auto;
    height: var(--stroke);
  }

  .page-products .pp-tl-item {
    padding: 34px 12px 0 0;
  }

  .page-products .pp-tl-dot {
    left: 0;
    top: 0;
  }

  .page-products .pp-tl-time {
    font-size: 1.6rem;
  }

  .page-products .pp-device-table-col {
    padding-right: 10px;
  }

  .page-products .pp-device-figure {
    padding-left: 10px;
  }

  .page-products .pp-export {
    padding: 26px 24px;
  }
}

@media (min-width: 1180px) {
  .page-products .pp-hero-lead h1 {
    max-width: 12.5em;
  }

  .page-products .pp-tier-big {
    font-size: 5.2rem;
  }

  .page-products .pp-relation-card {
    padding: 26px 24px;
  }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products .pp-tier-tab,
  .page-products .pp-links a,
  .page-products .pp-relation-note a {
    transition: none;
  }

  .page-products .pp-tier-r1:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(1),
  .page-products .pp-tier-r2:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(2),
  .page-products .pp-tier-r3:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(3),
  .page-products .pp-tier-r4:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(4) {
    animation: none;
  }

  .page-products .pp-tier-tab:hover {
    transform: none;
  }
}
<<<END>>>

现在检查一下我实际写出来的内容，看看有没有明显的问题。

- `.pp-hero-num .num-figure` —— 这个 `num-figure` 是全局类，它已经自带了 clamp 尺寸，所以显示出来应该是一个很大的“1.2%”。OK。
- `.pp-tier-panel` 的显示逻辑通过 `~` 兄弟选择器生效，因为 input 和 `.pp-tier-tabs`、`.pp-tier-panels` 是同级关系，符合设计。
- 移动端上，`pp-credit-item` 没有用偏移量，所以不会因为 margin 引发横向溢出。
- 时间轴在移动端是竖排，桌面端变横排，连接线方向切换也处理了。
- 表格的 `min-width: 540px` 加上 `overflow-x: auto`，窄屏横向滚动应该没问题，首列 sticky 保持住了。
- 所有页面专属选择器都带 `.page-products` 前缀，而像 `.pp-hero`、`.pp-tier-*` 这类自定义类也没有和全局冲突。
- 没有引入 `:root` 或 `html/body` 这些全局选择器，新变量就在 `.page-products` 里定义，只有一个 `--pp-offset`，简单干净。
- 数字都直接写在文本里，没有依赖 `data-count` 之类的脚本填充。
- 图片的 `src` 用了 `src="{zhanqunpic:h:700w:1400}"`，尺寸属性也对得上，第一张没加 lazy，后面的都加了 `loading="lazy"` 和 `decoding="async"`。
- 链接目标都是合法的站内路径，没有任何外部链接或假链接。

文案方面再去重看了看，除了品牌名和导航，没有连续的重复句式。整体节奏是“快扫 + 慢读”交替，每屏有一个核心信息，不像是均匀的卡片墙。应该可以直接出了。首屏的侧栏是结论摘要、证据边界、术语表和延伸阅读，和体验方向也对得上。可以了。
<main id="main-content" class="page-products">

  <section class="pp-hero">
    <div class="container">
      <nav class="breadcrumb pp-crumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span class="breadcrumb-sep" aria-hidden="true">/</span>
        <span aria-current="page">功能中心</span>
      </nav>

      <div class="pp-hero-grid">
        <div class="pp-hero-lead">
          <p class="eyebrow">栏目索引 · 功能中心</p>
          <h1 class="display-title">四喜娱乐功能口径：比例、额度与结算</h1>
          <p class="lede">
            免费试玩的额度与返水比例是两套独立口径，本页把它们分开列清：四喜娱乐免费试玩的三档开放条件、CN娱乐平台返水比例的四档判定依据、以自然周为单位的结算节奏，以及桌面端与移动端的适配范围。
          </p>
          <p class="pp-hero-hint">逐条列出，每条都附版本号，方便按需回查。阅读顺序建议从上往下，也可以直接跳到对应小节。</p>
        </div>

        <aside class="pp-hero-side" aria-label="结论摘要与口径边界">
          <div class="num-block pp-hero-num" data-reveal>
            <span class="num-figure">1.2%</span>
            <span class="num-caption">四档中的最高档 · 对应主题专场品类</span>
          </div>

          <div class="note-panel pp-note" data-reveal data-reveal-delay="80">
            <p class="note-title">证据边界</p>
            <p>本页出现的比例数值、结算周期与浏览器范围均来自站内规则条目，不随访问次数或个人差异浮动。页面只做口径说明，不提供收益推演与对比引导。</p>
          </div>

          <div class="pp-terms" data-reveal data-reveal-delay="160">
            <p class="pp-terms-title">术语速查</p>
            <dl>
              <div class="pp-term">
                <dt>档位</dt>
                <dd>按品类划分的返水数值级别，共四档。</dd>
              </div>
              <div class="pp-term">
                <dt>试玩额度</dt>
                <dd>按账号状态与访问记录逐级开放，不公布具体金额。</dd>
              </div>
              <div class="pp-term">
                <dt>结算周期</dt>
                <dd>每周一 00:00 至周日 24:00 的自然周。</dd>
              </div>
            </dl>
          </div>

          <nav class="pp-links" aria-label="延伸阅读">
            <p class="pp-links-title">延伸阅读</p>
            <a href="/insights/">规则变更日志与新旧条目对比</a>
            <a href="/help-center/">六类常见问题与新手五步</a>
          </nav>
        </aside>
      </div>
    </div>
  </section>

  <section class="pp-section" id="scale">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">01 / 比例刻度</span>
        <h2 class="section-title">四档返水刻度与品类对应</h2>
      </header>

      <div class="grid-12 pp-scale-grid">
        <div class="col-7 pp-scale-figure" data-reveal>
          <figure class="figure-frame figure-frame--wide">
            <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="四段同心刻度盘，依次标注 0.3%、0.6%、0.9%、1.2%，外圈配四组品类短标签">
            <figcaption class="figure-caption">四档比例按品类固定，同一品类在各周期使用同一档数值，不叠加、不浮动。</figcaption>
          </figure>
        </div>

        <div class="col-5 pp-scale-copy" data-reveal data-reveal-delay="80">
          <p>返水比例共四档，依次是 0.3%、0.6%、0.9%、1.2%，分别对应休闲益智、桌面棋牌、竞技闯关、主题专场四组品类。品类归属决定档位，档位决定数值，中间没有额外换算步骤。</p>
          <div class="pp-ruler" aria-hidden="true"></div>
          <ul class="pp-ruler-marks">
            <li><span>第 1 档</span><strong>0.3%</strong></li>
            <li><span>第 2 档</span><strong>0.6%</strong></li>
            <li><span>第 3 档</span><strong>0.9%</strong></li>
            <li><span>第 4 档</span><strong>1.2%</strong></li>
          </ul>
        </div>
      </div>

      <div class="pp-tier-switch" data-reveal>
        <input class="pp-tier-input pp-tier-r1" type="radio" name="pp-tier" id="pp-tier-1" checked>
        <input class="pp-tier-input pp-tier-r2" type="radio" name="pp-tier" id="pp-tier-2">
        <input class="pp-tier-input pp-tier-r3" type="radio" name="pp-tier" id="pp-tier-3">
        <input class="pp-tier-input pp-tier-r4" type="radio" name="pp-tier" id="pp-tier-4">

        <div class="pp-tier-tabs" role="group" aria-label="返水档位切换">
          <label class="pp-tier-tab" for="pp-tier-1">
            <span class="pp-tier-pct">0.3%</span>
            <span class="pp-tier-cat">休闲益智</span>
          </label>
          <label class="pp-tier-tab" for="pp-tier-2">
            <span class="pp-tier-pct">0.6%</span>
            <span class="pp-tier-cat">桌面棋牌</span>
          </label>
          <label class="pp-tier-tab" for="pp-tier-3">
            <span class="pp-tier-pct">0.9%</span>
            <span class="pp-tier-cat">竞技闯关</span>
          </label>
          <label class="pp-tier-tab" for="pp-tier-4">
            <span class="pp-tier-pct">1.2%</span>
            <span class="pp-tier-cat">主题专场</span>
          </label>
        </div>

        <div class="pp-tier-panels">
          <article class="pp-tier-panel">
            <p class="pp-tier-big">0.3%</p>
            <p class="pp-tier-sub">第 1 档 · 休闲益智</p>
            <p>四档中的最低档，用于节奏轻、单局时长短的休闲益智类内容。该档位的比例数值在全站口径内保持一致。</p>
            <ul class="rule-list">
              <li>数值写法统一为 0.3%，不写作小数位后加零的形式。</li>
              <li>档位序号固定为第 1 档，调整需走规则修订流程并留版本号。</li>
            </ul>
          </article>

          <article class="pp-tier-panel">
            <p class="pp-tier-big">0.6%</p>
            <p class="pp-tier-sub">第 2 档 · 桌面棋牌</p>
            <p>第二档，对应桌面棋牌品类。这一档的位置处在四档中段偏下，数值与品类一一绑定。</p>
            <ul class="rule-list">
              <li>品类归属以条目中登记的分类为准，不按设备或入口区分。</li>
              <li>同一周期内不会出现跨档混用的情况。</li>
            </ul>
          </article>

          <article class="pp-tier-panel">
            <p class="pp-tier-big">0.9%</p>
            <p class="pp-tier-sub">第 3 档 · 竞技闯关</p>
            <p>第三档，对应竞技闯关品类。四档之间以 0.3% 为步长依次递增，形成可目视比较的刻度。</p>
            <ul class="rule-list">
              <li>步长关系固定，便于在记录页按数值快速排序核对。</li>
              <li>档位说明与条目原文同步，同步时间为每月十号。</li>
            </ul>
          </article>

          <article class="pp-tier-panel">
            <p class="pp-tier-big">1.2%</p>
            <p class="pp-tier-sub">第 4 档 · 主题专场</p>
            <p>第四档，也是四档中的最高档，对应主题专场品类。数值已封顶，不存在高于 1.2% 的档位。</p>
            <ul class="rule-list">
              <li>该档为刻度上限，任何说明中都不会出现超过 1.2% 的数值。</li>
              <li>历史版本若与当前口径不同，以记录页最新版本号为准。</li>
            </ul>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="pp-section pp-section--credit" id="credits">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">02 / 试玩额度</span>
        <h2 class="section-title">入门、常规、进阶三档如何逐级开放</h2>
      </header>

      <div class="grid-12 pp-credit-grid">
        <div class="col-5 pp-credit-copy" data-reveal>
          <p>试玩额度分三档：入门、常规、进阶。开放顺序按账号状态与访问记录逐级推进，不跳档，也不对外公布具体金额。</p>
          <p>查看位置在记录页的额度条目内，每档显示当前所处级别与下一次可核对的时间点。级别只升不降，回退情况以条目中的版本号为准。</p>
          <div class="pp-credit-note">
            <span class="tag tag--jade">不公布金额</span>
            <span class="tag tag--gold">按记录推进</span>
          </div>
        </div>

        <div class="col-7 pp-credit-figure" data-reveal data-reveal-delay="80">
          <figure class="figure-frame">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="三层堆叠方块示意图，由小到大分别标注入门、常规、进阶三档试玩额度，配色以浅金与青玉绿为主" loading="lazy" decoding="async">
            <figcaption class="figure-caption">三档额度呈逐级堆叠关系，面积只表示级别先后，不表示具体数值大小。</figcaption>
          </figure>
        </div>
      </div>

      <ol class="pp-credit-list">
        <li class="pp-credit-item" data-reveal>
          <span class="pp-credit-no">01</span>
          <h3>入门档</h3>
          <p>首次进站即可查看的基础级别，用于确认入口、设备与栏目结构是否正常。这一档的作用是让人先跑通流程，而不是给出具体数值。</p>
        </li>
        <li class="pp-credit-item" data-reveal data-reveal-delay="80">
          <span class="pp-credit-no">02</span>
          <h3>常规档</h3>
          <p>在入门档基础上随访问记录推进后进入。记录页会显示当前档位与上一档的切换时间点，方便对照。</p>
        </li>
        <li class="pp-credit-item" data-reveal data-reveal-delay="160">
          <span class="pp-credit-no">03</span>
          <h3>进阶档</h3>
          <p>三档中的最高级别，同样按记录推进，不设申请入口与加速通道。若对所处档位有疑问，可先核对记录条目。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="pp-section" id="cycle">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">03 / 结算节奏</span>
        <h2 class="section-title">从周一到次周展示的时间顺序</h2>
      </header>

      <p class="pp-cycle-lede" data-reveal>结算周期统一为每周一 00:00 至周日 24:00，核对完成后在次周更新展示。周期与自然周对齐，跨月不拆分。</p>

      <div class="pp-cycle-figure" data-reveal>
        <figure class="figure-frame figure-frame--wide">
          <img src="{zhanqunpic:h:520w:1400}" width="1400" height="520" alt="横向时间轴，起点为周一零点，终点为次周核对展示，节点用刻度线与铜钱图标表示" loading="lazy" decoding="async">
          <figcaption class="figure-caption">横轴为自然周，竖轴为处理阶段；两者顺序不因节假日调整。</figcaption>
        </figure>
      </div>

      <ol class="pp-timeline">
        <li class="pp-tl-item" data-reveal>
          <span class="pp-tl-dot" aria-hidden="true"></span>
          <p class="pp-tl-step">周期起点</p>
          <p class="pp-tl-time">周一 00:00</p>
          <p class="pp-tl-desc">新一周的统计开始，上一周的条目转入口径核对状态。</p>
        </li>
        <li class="pp-tl-item" data-reveal data-reveal-delay="80">
          <span class="pp-tl-dot" aria-hidden="true"></span>
          <p class="pp-tl-step">周期终点</p>
          <p class="pp-tl-time">周日 24:00</p>
          <p class="pp-tl-desc">当周统计截止，此后产生的记录归入下一周期。</p>
        </li>
        <li class="pp-tl-item" data-reveal data-reveal-delay="160">
          <span class="pp-tl-dot" aria-hidden="true"></span>
          <p class="pp-tl-step">核对</p>
          <p class="pp-tl-time">次周内完成</p>
          <p class="pp-tl-desc">按品类与档位逐项比对，异常条目会标注原因并进入复看队列。</p>
        </li>
        <li class="pp-tl-item" data-reveal data-reveal-delay="240">
          <span class="pp-tl-dot" aria-hidden="true"></span>
          <p class="pp-tl-step">展示更新</p>
          <p class="pp-tl-time">核对完成后</p>
          <p class="pp-tl-desc">记录页写入新周期条目，同时附带本次使用的版本号。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="pp-section pp-section--device" id="devices">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">04 / 设备适配</span>
        <h2 class="section-title">桌面端与移动端的可用范围</h2>
      </header>

      <div class="grid-12 pp-device-grid">
        <div class="col-7 pp-device-table-col" data-reveal>
          <div class="pp-table-wrap" role="region" aria-label="设备适配对照表，可横向滚动" tabindex="0">
            <table class="pp-table">
              <caption class="pp-table-caption">下表为当前口径，随浏览器版本更新于每月十号复核</caption>
              <thead>
                <tr>
                  <th scope="col">对照项</th>
                  <th scope="col">桌面端</th>
                  <th scope="col">移动端</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">可用浏览器</th>
                  <td>Chrome、Edge、Safari 最近三个主要版本</td>
                  <td>iOS Safari 与 Android Chrome</td>
                </tr>
                <tr>
                  <th scope="row">最小阅读宽度</th>
                  <td>320px</td>
                  <td>320px</td>
                </tr>
                <tr>
                  <th scope="row">窄屏表现</th>
                  <td>错位面板收拢为单列，旁注移到正文之后</td>
                  <td>导航折叠为右侧贴片抽屉，表格可左右滑动</td>
                </tr>
                <tr>
                  <th scope="row">阅读建议</th>
                  <td>1280px 以上可完整看到错位版心与右侧索引</td>
                  <td>竖屏优先看单列，比例与周期章节建议横屏查看</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="col-5 pp-device-figure" data-reveal data-reveal-delay="80">
          <figure class="figure-frame figure-frame--tall">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="桌面屏幕与手机轮廓并列的线稿图，标注浏览器范围与 320px 最小阅读宽度" loading="lazy" decoding="async">
            <figcaption class="figure-caption">两端共用同一套版式规则，差异只在折叠方式与滚动区域。</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="pp-section" id="records">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">05 / 记录与导出</span>
        <h2 class="section-title">查什么、按什么版本号、导出哪几个字段</h2>
      </header>

      <div class="grid-12 pp-record-grid">
        <div class="col-6 pp-record-copy" data-reveal>
          <p>记录页保留最近 36 个月版本，可按自然周逐条翻看，也可以切换到新旧条目对比视图，查看同一字段在两版之间的差异。</p>
          <p>版本号由年份区间加序号构成，写在每条记录的末尾。核对时以版本号为准，而不是以页面抓取时间为准。</p>
          <a class="btn btn--ghost" href="/insights/">查看变更日志</a>
        </div>

        <div class="col-6 pp-record-figure" data-reveal data-reveal-delay="80">
          <figure class="figure-frame">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="列表与对比视图的抽象界面示意图，使用中性几何形状与色块表示字段排列，无真实界面截图" loading="lazy" decoding="async">
            <figcaption class="figure-caption">导出内容与页面展示字段一致，不额外附加说明文本。</figcaption>
          </figure>
        </div>
      </div>

      <div class="pp-export" data-reveal>
        <p class="pp-export-title">导出后包含的字段</p>
        <ul class="pp-export-list">
          <li>周期起止</li>
          <li>品类名称</li>
          <li>档位序号</li>
          <li>比例数值</li>
          <li>核对状态</li>
          <li>版本号</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="pp-section pp-section--relation" id="relation">
    <div class="container">
      <header class="section-head" data-reveal>
        <span class="section-index">06 / 口径关系</span>
        <h2 class="section-title">额度与比例不是一回事</h2>
      </header>

      <div class="pp-relation" data-reveal>
        <article class="pp-relation-card pp-relation-card--jade">
          <p class="pp-relation-label">试玩额度</p>
          <p class="pp-relation-body">按账号状态与访问记录逐级开放，分入门、常规、进阶三档，不公布具体金额。</p>
        </article>

        <article class="pp-relation-card pp-relation-card--red">
          <p class="pp-relation-label">返水比例</p>
          <p class="pp-relation-body">按品类固定为 0.3%、0.6%、0.9%、1.2% 四档，与访问记录无关。</p>
        </article>
      </div>

      <p class="pp-relation-note" data-reveal>两套口径各走各的判定路径，不能互相换算，也不能用额度级别推断比例档位。若两者在同一条记录里同时出现，会分别标注来源字段。相关边界见<a href="/instructions/">使用说明</a>；如需就自身条目提问，请走<a href="/contact/">联系我们</a>的官方渠道。</p>
    </div>
  </section>

</main>

/* ===== 功能中心 / page-products ===== */

.page-products {
  --pp-offset: 8px;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- 首屏拼贴 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: calc(var(--header-h) + 28px) 0 44px;
  border-bottom: var(--stroke) solid var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23, 17, 15, 0.13) 1px, transparent 0),
    linear-gradient(158deg, #FCF8EE 0%, var(--paper) 52%, #F1E6D0 100%);
  background-size: 6px 6px, 100% 100%;
  overflow: hidden;
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  top: calc(var(--header-h) + 4px);
  right: -70px;
  width: 200px;
  height: 200px;
  border: var(--stroke) solid var(--ink);
  background: var(--red);
  opacity: 0.09;
  transform: rotate(14deg);
  pointer-events: none;
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 8px;
  background: var(--gold);
  border-top: var(--stroke) solid var(--ink);
  border-right: var(--stroke) solid var(--ink);
  pointer-events: none;
}

.page-products .pp-crumb {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.page-products .pp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  margin-top: 26px;
}

.page-products .pp-hero-lead .eyebrow {
  color: var(--red);
  text-transform: none;
}

.page-products .pp-hero-lead h1 {
  margin: 14px 0 0;
  max-width: 15em;
}

.page-products .pp-hero-lead .lede {
  margin-top: 20px;
  max-width: 32em;
  color: #2C2320;
}

.page-products .pp-hero-hint {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--muted);
  border-left: var(--stroke) solid var(--gold);
  padding-left: 12px;
  max-width: 30em;
  line-height: 1.75;
}

.page-products .pp-hero-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .pp-hero-num {
  display: grid;
  gap: 8px;
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  padding: 18px 20px;
}

.page-products .pp-hero-num .num-figure {
  line-height: 1;
  color: var(--ink);
}

.page-products .pp-hero-num .num-caption {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #453A32;
}

.page-products .pp-note {
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-3);
}

.page-products .pp-note .note-title {
  color: var(--jade);
}

.page-products .pp-terms {
  border: var(--stroke) solid var(--ink);
  background: var(--jade-light);
  box-shadow: var(--sh-3);
  padding: 16px 18px;
}

.page-products .pp-terms-title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--jade);
  margin-bottom: 10px;
}

.page-products .pp-terms dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-products .pp-term {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(22, 101, 90, 0.35);
}

.page-products .pp-term:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pp-term dt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.page-products .pp-term dd {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #3A4F49;
}

.page-products .pp-links {
  display: grid;
  gap: 8px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-3);
  padding: 16px 18px;
}

.page-products .pp-links-title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-links a {
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--jade);
  padding-bottom: 2px;
  width: fit-content;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .pp-links a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ---------- 章节通用 ---------- */
.page-products .pp-section {
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pp-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 64px;
}

.page-products .pp-section--credit {
  background: linear-gradient(180deg, var(--paper) 0%, #F4EAD5 100%);
}

.page-products .pp-section--device {
  background: linear-gradient(180deg, #F2F6F3 0%, var(--paper) 100%);
}

.page-products .pp-section--relation {
  background: var(--paper);
}

.page-products .section-head {
  margin-bottom: 28px;
}

.page-products .section-title {
  margin-top: 12px;
  max-width: 22em;
}

.page-products .pp-section .col-7,
.page-products .pp-section .col-5,
.page-products .pp-section .col-6 {
  margin-bottom: 20px;
}

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

.page-products figure.figure-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 01 比例刻度 ---------- */
.page-products .pp-scale-grid {
  align-items: start;
}

.page-products .pp-scale-copy p {
  margin-bottom: 18px;
  color: #2C2320;
}

.page-products .pp-ruler {
  height: 16px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background-color: var(--gold-light);
  background-image: repeating-linear-gradient(
    90deg,
    var(--gold) 0 2px,
    transparent 2px 22px
  );
  box-shadow: var(--sh-3);
}

.page-products .pp-ruler-marks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-products .pp-ruler-marks li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: var(--stroke) solid var(--gold);
  padding: 2px 0 2px 10px;
}

.page-products .pp-ruler-marks span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-products .pp-ruler-marks strong {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

/* 档位切换 */
.page-products .pp-tier-switch {
  position: relative;
  margin-top: 32px;
}

.page-products .pp-tier-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .pp-tier-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-products .pp-tier-tab {
  display: grid;
  gap: 4px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-3);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.22s var(--ease), background-color 0.22s var(--ease),
    color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.page-products .pp-tier-tab:hover {
  transform: translate(-2px, -2px);
}

.page-products .pp-tier-tab:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.page-products .pp-tier-pct {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.page-products .pp-tier-cat {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.page-products .pp-tier-input:focus-visible ~ .pp-tier-tabs {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.page-products .pp-tier-r1:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(1),
.page-products .pp-tier-r2:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(2),
.page-products .pp-tier-r3:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(3),
.page-products .pp-tier-r4:checked ~ .pp-tier-tabs .pp-tier-tab:nth-child(4) {
  background: var(--red);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--gold);
}

.page-products .pp-tier-panels {
  margin-top: 16px;
}

.page-products .pp-tier-panel {
  display: none;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-1);
  padding: 22px 20px;
}

.page-products .pp-tier-r1:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(1),
.page-products .pp-tier-r2:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(2),
.page-products .pp-tier-r3:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(3),
.page-products .pp-tier-r4:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(4) {
  display: block;
  animation: pp-panel-in 0.36s var(--ease) both;
}

@keyframes pp-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-products .pp-tier-big {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--red);
}

.page-products .pp-tier-sub {
  margin: 6px 0 14px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-tier-panel p:not(.pp-tier-big):not(.pp-tier-sub) {
  max-width: 38em;
  margin-bottom: 14px;
}

/* ---------- 02 试玩额度 ---------- */
.page-products .pp-credit-copy p {
  margin-bottom: 16px;
}

.page-products .pp-credit-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.page-products .pp-credit-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .pp-credit-item {
  position: relative;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--sh-1);
  padding: 20px 18px 18px 66px;
}

.page-products .pp-credit-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-products .pp-credit-item p {
  margin: 0;
  font-size: 0.95rem;
  color: #2C2320;
}

.page-products .pp-credit-no {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--gold-light);
  border: var(--stroke) solid var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 800;
}

.page-products .pp-credit-item:nth-child(3) {
  background: linear-gradient(180deg, var(--paper) 0%, #F3E7CE 100%);
}

/* ---------- 03 结算节奏 ---------- */
.page-products .pp-cycle-lede {
  max-width: 40em;
  margin-bottom: 24px;
  font-size: 1.02rem;
  color: #2C2320;
}

.page-products .pp-cycle-figure {
  margin-bottom: 30px;
}

.page-products .pp-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  position: relative;
  display: grid;
  gap: 22px;
}

.page-products .pp-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: var(--stroke);
  background: var(--ink);
}

.page-products .pp-tl-item {
  position: relative;
  padding-right: 4px;
}

.page-products .pp-tl-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 20px;
  height: 20px;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.page-products .pp-tl-step {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.page-products .pp-tl-time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 2px 0 6px;
  color: var(--ink);
}

.page-products .pp-tl-desc {
  font-size: 0.92rem;
  color: #3A322C;
  max-width: 34em;
}

/* ---------- 04 设备适配 ---------- */
.page-products .pp-table-wrap {
  overflow-x: auto;
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

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

.page-products .pp-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.page-products .pp-table-caption {
  caption-side: top;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--paper);
  border-bottom: 1px dashed var(--line);
}

.page-products .pp-table thead th {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: var(--stroke) solid var(--ink);
}

.page-products .pp-table tbody th,
.page-products .pp-table tbody td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.75;
}

.page-products .pp-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--gold-light);
  border-right: var(--stroke) solid var(--ink);
  font-weight: 600;
  min-width: 108px;
  color: var(--ink);
}

.page-products .pp-table tbody tr:nth-child(even) td {
  background: #FBF6EA;
}

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

/* ---------- 05 记录与导出 ---------- */
.page-products .pp-record-copy p {
  margin-bottom: 16px;
}

.page-products .pp-record-copy .btn {
  margin-top: 4px;
}

.page-products .pp-export {
  margin-top: 30px;
  border: var(--stroke) solid var(--ink);
  background: var(--jade-light);
  box-shadow: var(--sh-3);
  padding: 20px 18px;
}

.page-products .pp-export-title {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--jade);
  margin-bottom: 14px;
}

.page-products .pp-export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-products .pp-export-list li {
  position: relative;
  padding: 8px 10px 8px 26px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.page-products .pp-export-list li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--gold);
  border: 2px solid var(--ink);
}

/* ---------- 06 口径关系 ---------- */
.page-products .pp-relation {
  display: grid;
  gap: 14px;
}

.page-products .pp-relation-card {
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--sh-1);
  padding: 20px 18px;
}

.page-products .pp-relation-card--jade {
  background: var(--jade-light);
}

.page-products .pp-relation-card--red {
  background: var(--gold-light);
}

.page-products .pp-relation-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.page-products .pp-relation-card--jade .pp-relation-label {
  color: var(--jade);
}

.page-products .pp-relation-card--red .pp-relation-label {
  color: var(--red);
}

.page-products .pp-relation-body {
  font-size: 0.95rem;
  color: #2C2320;
  max-width: 34em;
}

.page-products .pp-relation-note {
  margin-top: 20px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: #3A322C;
  max-width: 46em;
  border-left: var(--stroke) solid var(--gold);
  padding-left: 14px;
}

.page-products .pp-relation-note a {
  color: var(--jade);
  text-decoration: none;
  border-bottom: 2px solid var(--jade);
}

.page-products .pp-relation-note a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 700px) {
  .page-products .pp-tier-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .page-products .pp-relation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-products .pp-hero {
    padding: calc(var(--header-h) + 44px) 0 62px;
  }

  .page-products .pp-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 46px;
    margin-top: 34px;
  }

  .page-products .pp-hero-side {
    margin-top: 6px;
  }

  .page-products .pp-section {
    padding: 72px 0;
  }

  .page-products .pp-section:last-of-type {
    padding-bottom: 88px;
  }

  .page-products .section-head {
    margin-bottom: 36px;
  }

  .page-products .pp-section .col-7,
  .page-products .pp-section .col-5,
  .page-products .pp-section .col-6 {
    margin-bottom: 0;
  }

  .page-products .pp-scale-figure {
    padding-right: 8px;
  }

  .page-products .pp-scale-copy {
    padding-left: 8px;
  }

  .page-products .pp-tier-switch {
    margin-top: 44px;
  }

  .page-products .pp-tier-panel {
    padding: 30px 28px;
    margin-left: var(--pp-offset);
    width: calc(100% - var(--pp-offset));
  }

  .page-products .pp-credit-item {
    padding: 22px 22px 20px 76px;
  }

  .page-products .pp-credit-item:nth-child(2) {
    margin-left: 24px;
    width: calc(100% - 24px);
  }

  .page-products .pp-credit-item:nth-child(3) {
    margin-left: 48px;
    width: calc(100% - 48px);
  }

  .page-products .pp-timeline {
    padding-left: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .page-products .pp-timeline::before {
    left: 8px;
    right: 8px;
    top: 9px;
    bottom: auto;
    width: auto;
    height: var(--stroke);
  }

  .page-products .pp-tl-item {
    padding: 34px 12px 0 0;
  }

  .page-products .pp-tl-dot {
    left: 0;
    top: 0;
  }

  .page-products .pp-tl-time {
    font-size: 1.6rem;
  }

  .page-products .pp-device-table-col {
    padding-right: 10px;
  }

  .page-products .pp-device-figure {
    padding-left: 10px;
  }

  .page-products .pp-export {
    padding: 26px 24px;
  }
}

@media (min-width: 1180px) {
  .page-products .pp-hero-lead h1 {
    max-width: 12.5em;
  }

  .page-products .pp-tier-big {
    font-size: 5.2rem;
  }

  .page-products .pp-relation-card {
    padding: 26px 24px;
  }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-products .pp-tier-tab,
  .page-products .pp-links a,
  .page-products .pp-relation-note a {
    transition: none;
  }

  .page-products .pp-tier-r1:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(1),
  .page-products .pp-tier-r2:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(2),
  .page-products .pp-tier-r3:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(3),
  .page-products .pp-tier-r4:checked ~ .pp-tier-panels .pp-tier-panel:nth-child(4) {
    animation: none;
  }

  .page-products .pp-tier-tab:hover {
    transform: none;
  }
}
<<<END>>>