/* ========== 平台与栏目对照 ========== */
.page-products {
  --pp-radius: 6px;
  --pp-gap: clamp(14px, 2.4vw, 24px);
  --pp-section-pad: clamp(40px, 6vw, 80px);
}

/* ---- 面包屑 ---- */
.page-products .breadcrumb {
  padding-block: 14px;
  border-bottom: 1px solid var(--sand);
  background: var(--warm);
}

.page-products .crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--slate);
}

.page-products .crumb-list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--sand);
}

.page-products .crumb-list a {
  color: var(--night);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumb-list a:hover,
.page-products .crumb-list a:focus-visible {
  border-bottom-color: var(--cinnabar);
}

.page-products .crumb-current {
  color: var(--cinnabar);
  font-weight: 700;
}

/* ---- 首屏标题带 ---- */
.page-products .page-band {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--warm);
  border-bottom: 3px solid var(--gold);
  padding-block: clamp(30px, 5vw, 58px);
}

.page-products .page-band::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, .2);
  box-shadow:
    0 0 0 42px rgba(201, 162, 75, .06),
    0 0 0 96px rgba(201, 162, 75, .035);
  pointer-events: none;
}

.page-products .hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-products .page-band__kicker {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold);
  margin: 0 0 14px;
}

.page-products h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--warm);
}

.page-products .page-band__lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(246, 241, 231, .84);
  margin: 0 0 26px;
  max-width: 62ch;
}

.page-products .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- 首屏维度计量板 ---- */
.page-products .hero-meter {
  background: var(--night-2);
  border: 2px solid rgba(201, 162, 75, .5);
  box-shadow: var(--shadow-hard);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-products .hero-meter__title {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold);
  margin: 0 0 20px;
}

.page-products .hero-meter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .hero-meter__row {
  display: grid;
  gap: 8px;
}

.page-products .hero-meter__key {
  font-size: 15px;
  font-weight: 700;
  color: var(--warm);
}

.page-products .hero-meter__bars {
  display: grid;
  gap: 6px;
}

.page-products .hero-meter__bar {
  display: block;
  height: 9px;
  background: rgba(246, 241, 231, .12);
  position: relative;
  overflow: hidden;
}

.page-products .hero-meter__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
}

.page-products .hero-meter__bar--a::after { background: var(--cinnabar-2); }
.page-products .hero-meter__bar--b::after { background: var(--celadon); }

.page-products .hero-meter__list > li:nth-child(1) .hero-meter__bar--a::after { width: 78%; }
.page-products .hero-meter__list > li:nth-child(1) .hero-meter__bar--b::after { width: 46%; }
.page-products .hero-meter__list > li:nth-child(2) .hero-meter__bar--a::after { width: 52%; }
.page-products .hero-meter__list > li:nth-child(2) .hero-meter__bar--b::after { width: 74%; }
.page-products .hero-meter__list > li:nth-child(3) .hero-meter__bar--a::after { width: 34%; }
.page-products .hero-meter__list > li:nth-child(3) .hero-meter__bar--b::after { width: 76%; }
.page-products .hero-meter__list > li:nth-child(4) .hero-meter__bar--a::after { width: 88%; }
.page-products .hero-meter__list > li:nth-child(4) .hero-meter__bar--b::after { width: 54%; }

.page-products .hero-meter__foot {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(246, 241, 231, .18);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(246, 241, 231, .7);
}

/* ---- 通用区块 ---- */
.page-products .section {
  padding-block: var(--pp-section-pad);
}

.page-products .section--tinted {
  background: var(--sand);
  border-block: 2px solid var(--ink);
}

.page-products .section-head {
  max-width: 780px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-products .section-head__kicker {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--cinnabar);
  margin: 0 0 12px;
}

.page-products .section-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
}

.page-products .section-head__lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0;
}

.page-products .verdict {
  margin-top: clamp(22px, 3.2vw, 34px);
  border-left: 5px solid var(--cinnabar);
  background: var(--night);
  color: var(--warm);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}

.page-products .verdict__label {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
  flex: none;
}

.page-products .verdict p {
  margin: 0;
  flex: 1 1 260px;
  font-size: 16px;
  line-height: 1.75;
}

/* ---- 图片容器补充 ---- */
.page-products .media-frame {
  margin: 0 0 clamp(22px, 3.4vw, 34px);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--night);
}

.page-products .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .catalog-figure {
  margin-bottom: clamp(26px, 4vw, 40px);
}

/* ---- 栏目总览卡片 ---- */
.page-products .catalog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 22px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .catalog-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 18px;
  width: 48px;
  height: 4px;
  background: var(--gold);
}

.page-products .catalog-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-products .catalog-card__num {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--night);
  letter-spacing: -.02em;
}

.page-products .catalog-card__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.page-products .catalog-card__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

.page-products .catalog-card__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sand);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}

.page-products .catalog-card__count {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--cinnabar);
}

.page-products .catalog-card__who {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---- 两版对照表 ---- */
.page-products .compare-wrap {
  overflow-x: auto;
  border: var(--border);
  background: var(--warm);
  box-shadow: var(--shadow-hard);
  -webkit-overflow-scrolling: touch;
}

.page-products .compare-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 16px;
}

.page-products .compare-table th,
.page-products .compare-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid var(--sand);
}

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

.page-products .compare-table thead th {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--night);
  color: var(--warm);
  border-bottom: 2px solid var(--gold);
}

.page-products .compare-table thead th.compare-table__a {
  background: var(--cinnabar);
  color: var(--warm);
}

.page-products .compare-table thead th.compare-table__b {
  background: var(--celadon);
  color: var(--warm);
}

.page-products .compare-table tbody th[scope="row"] {
  width: 20%;
  font-weight: 700;
  color: var(--night);
  background: rgba(228, 220, 205, .5);
}

.page-products .compare-table tbody td:nth-child(2) {
  border-left: 3px solid var(--cinnabar);
}

.page-products .compare-table tbody td:nth-child(3) {
  border-left: 3px solid var(--celadon);
}

/* ---- 小屏六档刻度尺 ---- */
.page-products .ruler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .ruler__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 18px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .ruler__bar {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, var(--cinnabar) 0%, var(--gold) 100%);
}

.page-products .ruler__item:nth-child(1) .ruler__bar { height: 22px; }
.page-products .ruler__item:nth-child(2) .ruler__bar { height: 32px; }
.page-products .ruler__item:nth-child(3) .ruler__bar { height: 42px; }
.page-products .ruler__item:nth-child(4) .ruler__bar { height: 54px; }
.page-products .ruler__item:nth-child(5) .ruler__bar { height: 66px; }
.page-products .ruler__item:nth-child(6) .ruler__bar { height: 80px; }

.page-products .ruler__range {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--night);
  letter-spacing: -.01em;
}

.page-products .ruler__unit {
  font-size: 12px;
  color: var(--slate);
  margin-left: 2px;
}

.page-products .ruler__verdict {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

.page-products .ruler__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--sand);
}

/* ---- 设置项对接 ---- */
.page-products .setting-map {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pp-gap);
}

.page-products .setting-row {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .setting-row__index {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--cinnabar);
}

.page-products .setting-row__name h3 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 4px;
}

.page-products .setting-row__hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

.page-products .setting-row__map {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.page-products .setting-row__map p {
  flex: 1 1 100%;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}

/* ---- 权益六大类 ---- */
.page-products .rights-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .rights-card {
  padding: 22px 20px 24px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .rights-card__key {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--night);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--gold);
}

.page-products .rights-card__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
}

.page-products .rights-card__scene {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

/* ---- 技能树 ---- */
.page-products .tree-frame {
  padding: clamp(14px, 3vw, 28px);
  background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .skill-tree {
  display: block;
  width: 100%;
  min-width: 700px;
  height: auto;
}

.page-products .skill-tree .tree-lines path {
  fill: none;
  stroke: rgba(201, 162, 75, .65);
  stroke-width: 2;
}

.page-products .skill-tree text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  fill: var(--warm);
  text-anchor: middle;
}

.page-products .skill-tree .tree-root rect {
  fill: var(--cinnabar);
  stroke: var(--gold);
  stroke-width: 2;
}

.page-products .skill-tree .tree-node rect {
  fill: var(--night-2);
  stroke-width: 2;
}

.page-products .skill-tree .tree-node--a rect { stroke: var(--cinnabar-2); }
.page-products .skill-tree .tree-node--b rect { stroke: var(--gold); }
.page-products .skill-tree .tree-node--c rect { stroke: var(--celadon); }

.page-products .tree-legend {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .tree-legend__item {
  padding: 18px 18px 20px;
  background: var(--warm);
  border-left: 5px solid var(--night);
  border-block: 2px solid var(--sand);
  border-right: 2px solid var(--sand);
}

.page-products .tree-legend__item .tag {
  margin-bottom: 10px;
}

.page-products .tree-legend__item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

/* ---- 对照结果怎么看 ---- */
.page-products .reading-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .reading-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .reading-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 2px solid var(--ink);
}

.page-products .reading-step:first-child {
  border-top: 2px solid var(--ink);
}

.page-products .reading-step__num {
  grid-row: 1 / span 2;
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cinnabar);
}

.page-products .reading-step h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.page-products .reading-step p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

/* ---- 收尾 ---- */
.page-products .section--closing {
  background: var(--night);
  color: var(--warm);
  border-top: 3px solid var(--gold);
}

.page-products .closing {
  display: grid;
  gap: 24px;
  align-items: center;
}

.page-products .closing h2 {
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--warm);
  margin: 0 0 12px;
}

.page-products .closing__text p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(246, 241, 231, .82);
  margin: 0;
  max-width: 58ch;
}

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

/* ---- 平板 ---- */
@media (min-width: 620px) {
  .page-products .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

/* ---- 桌面 ---- */
@media (min-width: 900px) {
  .page-products .hero-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }

  .page-products .setting-row {
    grid-template-columns: 60px minmax(170px, 240px) minmax(0, 1fr);
    align-items: start;
    gap: 8px 24px;
  }

  .page-products .reading-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  }

  .page-products .closing {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

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

  .page-products .catalog-card:nth-child(3n + 2) {
    margin-top: 24px;
  }

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

  .page-products .rights-card:nth-child(3n + 2) {
    margin-top: 26px;
  }

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

@media (min-width: 1240px) {
  .page-products .ruler {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .ruler__verdict {
    font-size: 13.5px;
  }

  .page-products .ruler__note {
    font-size: 12.5px;
  }
}

/* ---- 降低动效 ---- */
@media (prefers-reduced-motion: reduce) {
  .page-products * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
<<<END>>>

等等——我不应该在最后加 `<<<END>>>` 这种标记，协议里没要求。让我从输出里去掉。

另外，我需要再仔细检查一下：`page_css` 里是不是不小心定义了 `:root` 之类？没有。

还有 `.page-products *` 这条通配选择器是作用域内部的，没问题。

现在确认一下所有锚点都真的有对应的 id：
- `#catalog` → 有（在栏目的 section 上）
- `#small-screen` → 有
好的。

别的地方没有用到锚点链接。

检查页内跨页面链接：`/`、`/stories/`、`/faq/` 都在允许的路由里，没错。

图片数量：5 张。最小 1 张，目标 5 张，最大 15 张。也对上了。

第一张图片在 `#catalog` 区块内，不在首屏，所以用懒加载没问题。

等等——`page-band` 的 `hero-split` 现在只是网格布局，还没设列宽。

好，收尾。输出的时候把末尾那个多余的标记去掉。
<main id="main-content" class="page-products">

  <div class="breadcrumb">
    <div class="shell">
      <ol class="crumb-list">
        <li><a href="/">首页</a></li>
        <li><span class="crumb-current">平台与栏目对照</span></li>
      </ol>
    </div>
  </div>

  <header class="page-band products-hero">
    <div class="shell hero-split">
      <div class="hero-split__copy">
        <p class="page-band__kicker">平台与栏目对照</p>
        <h1>八个栏目并排看，两版差在哪一屏就清楚</h1>
        <p class="page-band__lead">
          瑞祥真人会馆把站内八个内容栏目按同一套命名摆在您面前，速览版与详读版左右并置，
          再补上六档移动宽度下的实际阅读读数。您不必来回翻页，就能判断自己该从哪个栏目、哪一版开始。
        </p>
        <div class="hero-actions">
          <a class="btn btn--cinnabar" href="#catalog">看八个栏目</a>
          <a class="btn btn--ghost" href="#small-screen">看小屏读数</a>
        </div>
      </div>

      <aside class="hero-meter" aria-labelledby="hero-meter-title">
        <p class="hero-meter__title" id="hero-meter-title">四个维度 · 两版差多少</p>
        <ul class="hero-meter__list">
          <li class="hero-meter__row">
            <span class="hero-meter__key">条目密度</span>
            <span class="hero-meter__bars">
              <span class="hero-meter__bar hero-meter__bar--a"></span>
              <span class="hero-meter__bar hero-meter__bar--b"></span>
            </span>
          </li>
          <li class="hero-meter__row">
            <span class="hero-meter__key">阅读顺序</span>
            <span class="hero-meter__bars">
              <span class="hero-meter__bar hero-meter__bar--a"></span>
              <span class="hero-meter__bar hero-meter__bar--b"></span>
            </span>
          </li>
          <li class="hero-meter__row">
            <span class="hero-meter__key">图片占比</span>
            <span class="hero-meter__bars">
              <span class="hero-meter__bar hero-meter__bar--a"></span>
              <span class="hero-meter__bar hero-meter__bar--b"></span>
            </span>
          </li>
          <li class="hero-meter__row">
            <span class="hero-meter__key">更新频率</span>
            <span class="hero-meter__bars">
              <span class="hero-meter__bar hero-meter__bar--a"></span>
              <span class="hero-meter__bar hero-meter__bar--b"></span>
            </span>
          </li>
        </ul>
        <p class="hero-meter__foot">长条为速览版，短条为详读版；长度差越大，两版读起来越不一样。</p>
      </aside>
    </div>
  </header>

  <section class="section" id="catalog" aria-labelledby="catalog-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">栏目总览</p>
        <h2 id="catalog-title">八块内容，各管一段事</h2>
        <p class="section-head__lead">
          从先看权益到提交反馈，每个栏目都有明确的覆盖范围和适合的读者。下面按站内统一顺序列出，
          条目数量与适合人群一并给出，方便您估算读完全部内容大概要花多少时间。
        </p>
      </div>

      <figure class="media-frame media-frame--screen catalog-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="屏幕近景显示八个内容栏目的列表，每行带有栏目标签与条目数量" loading="lazy" decoding="async">
        <figcaption class="media-frame__cap">八个栏目在同一屏内的列表形态</figcaption>
      </figure>

      <ul class="catalog-grid">
        <li class="catalog-card" data-reveal="0">
          <div class="catalog-card__head">
            <span class="catalog-card__num">01</span>
            <span class="tag tag--cinnabar">权益</span>
          </div>
          <h3 class="catalog-card__title">权益先览</h3>
          <p class="catalog-card__desc">把会员能用的六类权益一次摆清楚，每类配一句使用场景。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 260 条</span>
            <span class="catalog-card__who">刚接触会馆、先想知道自己能得什么的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="1">
          <div class="catalog-card__head">
            <span class="catalog-card__num">02</span>
            <span class="tag tag--cinnabar">设置</span>
          </div>
          <h3 class="catalog-card__title">账户设置</h3>
          <p class="catalog-card__desc">五项常用设置的入口与改动效果，改完立刻能在别处看到变化。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 140 条</span>
            <span class="catalog-card__who">要调昵称头像、通知或阅读偏好的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="2">
          <div class="catalog-card__head">
            <span class="catalog-card__num">03</span>
            <span class="tag tag--cinnabar">对照</span>
          </div>
          <h3 class="catalog-card__title">栏目对照</h3>
          <p class="catalog-card__desc">八个栏目与两版差异的并置表，四个维度一行一行摊开。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 180 条</span>
            <span class="catalog-card__who">拿不准从哪个栏目、哪一版开始的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="3">
          <div class="catalog-card__head">
            <span class="catalog-card__num">04</span>
            <span class="tag tag--gold">评测</span>
          </div>
          <h3 class="catalog-card__title">小屏评测</h3>
          <p class="catalog-card__desc">六档移动宽度的实际阅读读数，字号、行长、单双列都有结论。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 420 条</span>
            <span class="catalog-card__who">习惯用手机读完长条目的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="4">
          <div class="catalog-card__head">
            <span class="catalog-card__num">05</span>
            <span class="tag tag--gold">更新</span>
          </div>
          <h3 class="catalog-card__title">更新记录</h3>
          <p class="catalog-card__desc">季度归档与每月条目维护都留痕，改了什么一页翻完。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 220 条</span>
            <span class="catalog-card__who">想确认内容还在往前走的长期会员</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="5">
          <div class="catalog-card__head">
            <span class="catalog-card__num">06</span>
            <span class="tag tag--celadon">帮助</span>
          </div>
          <h3 class="catalog-card__title">使用帮助</h3>
          <p class="catalog-card__desc">从看权益到查记录的完整走法，卡在哪一步就翻哪一步。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 190 条</span>
            <span class="catalog-card__who">第一次进来、需要有人领一遍的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="5">
          <div class="catalog-card__head">
            <span class="catalog-card__num">07</span>
            <span class="tag tag--celadon">反馈</span>
          </div>
          <h3 class="catalog-card__title">意见反馈</h3>
          <p class="catalog-card__desc">纠错、评测线索与使用问题各有对应入口，说清就能被受理。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 150 条</span>
            <span class="catalog-card__who">发现条目对不上、想直接说一声的人</span>
          </div>
        </li>

        <li class="catalog-card" data-reveal="5">
          <div class="catalog-card__head">
            <span class="catalog-card__num">08</span>
            <span class="tag tag--cinnabar">动态</span>
          </div>
          <h3 class="catalog-card__title">会馆动态</h3>
          <p class="catalog-card__desc">品牌沿革、团队分工与协作进展，判断一家会馆值不值得长期跟。</p>
          <div class="catalog-card__meta">
            <span class="catalog-card__count">约 300 条</span>
            <span class="catalog-card__who">想确认会馆是否长期稳定运营的人</span>
          </div>
        </li>
      </ul>

      <div class="verdict">
        <span class="verdict__label">怎么选</span>
        <p>八块内容合计约 1,860 条，其中评测条目约 420 条。第一次进来，按 01 → 02 → 03 读三段就够；老会员通常直接从 04 和 05 进去。</p>
      </div>
    </div>
  </section>

  <section class="section section--tinted" id="versions" aria-labelledby="versions-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">两版对照查阅</p>
        <h2 id="versions-title">速览版看广度，详读版看深度</h2>
        <p class="section-head__lead">
          同一批条目，按两种方式排。差别集中在四个维度上，横着比一行，竖着看一版，
          十几秒就能定下自己要哪一种。
        </p>
      </div>

      <figure class="media-frame media-frame--screen">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="两块屏幕并排显示同一栏目的两版布局，左侧条目紧凑、右侧条目舒展并带展开说明" loading="lazy" decoding="async">
        <figcaption class="media-frame__cap">同一栏目在速览版与详读版下的排布</figcaption>
      </figure>

      <div class="compare-wrap">
        <table class="compare-table">
          <caption class="visually-hidden">速览版与详读版在四个维度上的对照</caption>
          <thead>
            <tr>
              <th scope="col">对照维度</th>
              <th scope="col" class="compare-table__a">速览版</th>
              <th scope="col" class="compare-table__b">详读版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">条目密度</th>
              <td>一屏 4–6 条，标题加一行摘要</td>
              <td>一屏 2–3 条，摘要后接完整说明段落</td>
            </tr>
            <tr>
              <th scope="row">阅读顺序</th>
              <td>按近期热度排，新条目排在前面</td>
              <td>按主题归并，从权益一层层展开到细则</td>
            </tr>
            <tr>
              <th scope="row">图片占比</th>
              <td>约 15%，以图标和色块为主</td>
              <td>约 35%，多用屏幕近景与并排截图</td>
            </tr>
            <tr>
              <th scope="row">更新频率</th>
              <td>每周跟进一次热点条目</td>
              <td>每月维护一次条目，季度整体归档</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="verdict">
        <span class="verdict__label">怎么选</span>
        <p>先用速览版扫一遍目录，圈出两三个想细看的栏目，再切到详读版慢慢读；如果平时主要靠手机读长内容，直接进详读版更省力。</p>
      </div>
    </div>
  </section>

  <section class="section" id="small-screen" aria-labelledby="small-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">小屏评测</p>
        <h2 id="small-title">六档移动宽度，逐档给出阅读结论</h2>
        <p class="section-head__lead">
          瑞祥真人综合小屏评测把 360 像素到 768 像素分成六档，每档实测字号、行长、单双列与表格展开方式，
          结论和容易踩的坑一并列在下面。评测按季度复测，最近一轮覆盖全部六档。
        </p>
      </div>

      <figure class="media-frame media-frame--screen">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="手持手机在六档宽度示意卡前逐档比对，卡尺与刻度线条清晰可见" loading="lazy" decoding="async">
        <figcaption class="media-frame__cap">同一段条目在六档宽度下的排布差异</figcaption>
      </figure>

      <ol class="ruler">
        <li class="ruler__item" data-reveal="0">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">360</span>–<span class="ruler__num">389</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">单列排布，正文 16 像素，长表格自动改为纵向卡片</span>
          <span class="ruler__note">横向滑动的表格区要在开头留一行提示，否则容易漏看右侧一列。</span>
        </li>
        <li class="ruler__item" data-reveal="1">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">390</span>–<span class="ruler__num">413</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">主流窄屏，行长落在舒适区，按钮点按间距足够</span>
          <span class="ruler__note">两版切换放在页面顶部更方便，别压到内容末尾去。</span>
        </li>
        <li class="ruler__item" data-reveal="2">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">414</span>–<span class="ruler__num">479</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">两列卡片开始成立，四维对照表可以并排显示</span>
          <span class="ruler__note">图片接近满屏宽时，图注要移到图片下方，不要压图。</span>
        </li>
        <li class="ruler__item" data-reveal="3">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">480</span>–<span class="ruler__num">599</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">图文可以左右分栏，栏目目录固定在顶部不再挡路</span>
          <span class="ruler__note">目录固定后要给正文首行留出间距，避免压住标题。</span>
        </li>
        <li class="ruler__item" data-reveal="4">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">600</span>–<span class="ruler__num">703</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">接近小尺寸平板，四个维度的对照可以整表展开</span>
          <span class="ruler__note">一屏能放下的条目变多，速览版的密度优势在这一档最明显。</span>
        </li>
        <li class="ruler__item" data-reveal="5">
          <span class="ruler__bar" aria-hidden="true"></span>
          <span class="ruler__range"><span class="ruler__num">704</span>–<span class="ruler__num">768</span> <span class="ruler__unit">px</span></span>
          <span class="ruler__verdict">双列阅读舒适，可以同时打开旁注与正文</span>
          <span class="ruler__note">这一档的体验已经很接近桌面，字号无需再额外放大。</span>
        </li>
      </ol>

      <div class="verdict">
        <span class="verdict__label">怎么选</span>
        <p>日常主要在 390 到 430 这一段看，建议把阅读偏好设成详读版并锁 17 像素正文；经常在 600 以上宽度阅读，两版差别会明显变小。</p>
      </div>
    </div>
  </section>

  <section class="section section--tinted" id="settings" aria-labelledby="settings-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">账户设置入口</p>
        <h2 id="settings-title">五项常用设置，各自牵着哪类权益</h2>
        <p class="section-head__lead">
          设置不是孤立的开关。改一项，对应的权益内容、提醒节奏或者阅读排布就会跟着变。
          下面把五项设置和它们牵动的权益类别排在同行里，改之前先看清楚会动到什么。
        </p>
      </div>

      <figure class="media-frame media-frame--screen">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="屏幕特写显示五项账户设置列表，光标停在通知提醒一项上，界面为夜蓝与暖白配色" loading="lazy" decoding="async">
        <figcaption class="media-frame__cap">五项设置集中在一处，改动后立即生效</figcaption>
      </figure>

      <ul class="setting-map">
        <li class="setting-row" data-reveal="0">
          <span class="setting-row__index">01</span>
          <div class="setting-row__name">
            <h3>昵称与头像</h3>
            <p class="setting-row__hint">改完立即生效</p>
          </div>
          <div class="setting-row__map">
            <span class="tag tag--cinnabar">账户与安全</span>
            <p>署名变化会同步到收藏列表与反馈记录，早先留下的记录不会因为改名而找不到。</p>
          </div>
        </li>

        <li class="setting-row" data-reveal="1">
          <span class="setting-row__index">02</span>
          <div class="setting-row__name">
            <h3>通知提醒</h3>
            <p class="setting-row__hint">影响推送与邮件</p>
          </div>
          <div class="setting-row__map">
            <span class="tag tag--cinnabar">更新提醒</span>
            <p>决定季度归档与每月条目维护的消息是否送到您的设备，关掉之后新增内容需要自己进来翻。</p>
          </div>
        </li>

        <li class="setting-row" data-reveal="2">
          <span class="setting-row__index">03</span>
          <div class="setting-row__name">
            <h3>阅读偏好</h3>
            <p class="setting-row__hint">建议新用户先定这项</p>
          </div>
          <div class="setting-row__map">
            <span class="tag tag--cinnabar">内容栏目</span>
            <span class="tag tag--celadon">小屏阅读</span>
            <p>决定进入栏目时的默认展开层级，以及小屏端默认字号与单双列，是影响最大的一项。</p>
          </div>
        </li>

        <li class="setting-row" data-reveal="3">
          <span class="setting-row__index">04</span>
          <div class="setting-row__name">
            <h3>登录设备</h3>
            <p class="setting-row__hint">换机时先看这里</p>
          </div>
          <div class="setting-row__map">
            <span class="tag tag--cinnabar">账户与安全</span>
            <span class="tag tag--celadon">小屏阅读</span>
            <p>设备列表直接决定小屏端记住的阅读位置与默认排布，换设备后建议重新确认一次。</p>
          </div>
        </li>

        <li class="setting-row" data-reveal="4">
          <span class="setting-row__index">05</span>
          <div class="setting-row__name">
            <h3>隐私开关</h3>
            <p class="setting-row__hint">控制对外展示范围</p>
          </div>
          <div class="setting-row__map">
            <span class="tag tag--celadon">意见反馈</span>
            <span class="tag tag--celadon">使用帮助</span>
            <p>决定提交反馈时对外展示的范围，也决定帮助内容是否按您的使用习惯给出个性化提示。</p>
          </div>
        </li>
      </ul>

      <div class="verdict">
        <span class="verdict__label">怎么选</span>
        <p>新用户先动 03 阅读偏好和 02 通知提醒，这两项定下来，之后读什么、什么时候被提醒，都跟着顺了。</p>
      </div>
    </div>
  </section>

  <section class="section" id="rights" aria-labelledby="rights-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">权益六大类速查</p>
        <h2 id="rights-title">六类权益，各配一句话场景</h2>
        <p class="section-head__lead">
          会馆把会员权益归纳成六类，名称与首页保持一致。下面每类给一句使用场景，
          看完您就知道自己最常用的是哪一类。
        </p>
      </div>

      <ul class="rights-grid">
        <li class="rights-card" data-reveal="0">
          <span class="rights-card__key">A</span>
          <h3 class="rights-card__title">账户与安全</h3>
          <p class="rights-card__scene">换手机时不用重新摸索，昵称、头像、登录设备与隐私入口都集中在一处。</p>
        </li>
        <li class="rights-card" data-reveal="1">
          <span class="rights-card__key">B</span>
          <h3 class="rights-card__title">内容栏目</h3>
          <p class="rights-card__scene">先弄清八个栏目各覆盖什么，再决定把有限的时间花在哪一块。</p>
        </li>
        <li class="rights-card" data-reveal="2">
          <span class="rights-card__key">C</span>
          <h3 class="rights-card__title">小屏阅读</h3>
          <p class="rights-card__scene">六档宽度的字号与单双列结论摆出来，手机上看长条目更省眼睛。</p>
        </li>
        <li class="rights-card" data-reveal="3">
          <span class="rights-card__key">D</span>
          <h3 class="rights-card__title">更新提醒</h3>
          <p class="rights-card__scene">季度归档与每月条目维护的提醒方式可以自己挑，新内容不会再漏掉。</p>
        </li>
        <li class="rights-card" data-reveal="4">
          <span class="rights-card__key">E</span>
          <h3 class="rights-card__title">使用帮助</h3>
          <p class="rights-card__scene">从先看权益到查使用记录的完整走法都有条目，卡在哪一步就翻哪一步。</p>
        </li>
        <li class="rights-card" data-reveal="5">
          <span class="rights-card__key">F</span>
          <h3 class="rights-card__title">意见反馈</h3>
          <p class="rights-card__scene">纠错、评测线索与使用问题各有对应入口，工作日 48 小时内回复。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="section" id="paths" aria-labelledby="paths-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">场景路径</p>
        <h2 id="paths-title">三类访客，三条走到头的路</h2>
        <p class="section-head__lead">
          入口只有一个，走法分三种。下面按新用户、长期会员和比对型读者各画一条，
          节点就是您要点的位置，照着走一遍基本不会绕路。
        </p>
      </div>

      <div class="tree-frame">
        <svg class="skill-tree" viewBox="0 0 1000 420" role="img" aria-labelledby="skilltree-title skilltree-desc" preserveAspectRatio="xMidYMid meet">
          <title id="skilltree-title">三类访客从同一入口展开的场景路径</title>
          <desc id="skilltree-desc">新用户路径从权益先览经账户设置到选定栏目；长期会员路径从更新记录经阅读偏好到长期跟进；比对型读者路径从并置两版经标注差异到定下结论。</desc>

          <g class="tree-lines">
            <path d="M174 210 C 212 210, 212 60, 250 60"/>
            <path d="M174 210 L 250 210"/>
            <path d="M174 210 C 212 210, 212 360, 250 360"/>
            <path d="M430 60 L 490 60"/>
            <path d="M430 210 L 490 210"/>
            <path d="M430 360 L 490 360"/>
            <path d="M670 60 L 730 60"/>
            <path d="M670 210 L 730 210"/>
            <path d="M670 360 L 730 360"/>
          </g>

          <g class="tree-root">
            <rect x="24" y="182" width="150" height="56" rx="10"/>
            <text x="99" y="210" dy="0.35em">会馆入口</text>
          </g>

          <g class="tree-node tree-node--a">
            <rect x="250" y="32" width="180" height="56" rx="10"/>
            <text x="340" y="60" dy="0.35em">先看权益</text>
          </g>
          <g class="tree-node tree-node--a">
            <rect x="490" y="32" width="180" height="56" rx="10"/>
            <text x="580" y="60" dy="0.35em">再进设置</text>
          </g>
          <g class="tree-node tree-node--a">
            <rect x="730" y="32" width="180" height="56" rx="10"/>
            <text x="820" y="60" dy="0.35em">选定栏目</text>
          </g>

          <g class="tree-node tree-node--b">
            <rect x="250" y="182" width="180" height="56" rx="10"/>
            <text x="340" y="210" dy="0.35em">查更新记录</text>
          </g>
          <g class="tree-node tree-node--b">
            <rect x="490" y="182" width="180" height="56" rx="10"/>
            <text x="580" y="210" dy="0.35em">调阅读偏好</text>
          </g>
          <g class="tree-node tree-node--b">
            <rect x="730" y="182" width="180" height="56" rx="10"/>
            <text x="820" y="210" dy="0.35em">长期跟进</text>
          </g>

          <g class="tree-node tree-node--c">
            <rect x="250" y="332" width="180" height="56" rx="10"/>
            <text x="340" y="360" dy="0.35em">并置两版</text>
          </g>
          <g class="tree-node tree-node--c">
            <rect x="490" y="332" width="180" height="56" rx="10"/>
            <text x="580" y="360" dy="0.35em">标注差异</text>
          </g>
          <g class="tree-node tree-node--c">
            <rect x="730" y="332" width="180" height="56" rx="10"/>
            <text x="820" y="360" dy="0.35em">定下结论</text>
          </g>
        </svg>
      </div>

      <ul class="tree-legend">
        <li class="tree-legend__item">
          <span class="tag tag--cinnabar">新用户</span>
          <p>从权益先览看起，六类权益扫一遍，再到账户设置里把昵称与通知定好，最后在栏目对照里挑两三个常看的栏目。</p>
        </li>
        <li class="tree-legend__item">
          <span class="tag tag--gold">长期会员</span>
          <p>直接进更新记录看这一季改了什么，把阅读偏好调成自己顺眼的一档，再在小屏评测里确认手上的设备落在哪一档。</p>
        </li>
        <li class="tree-legend__item">
          <span class="tag tag--celadon">比对型读者</span>
          <p>打开两版对照，把四个维度上的差别标出来，对到自己的阅读习惯上，最后写下一行结论作为下次进入的默认。</p>
        </li>
      </ul>

      <div class="verdict">
        <span class="verdict__label">怎么选</span>
        <p>不确定自己属于哪一类，就按第一条走：先看权益，再进设置，最后回来挑栏目。三步走完，后面都是熟路。</p>
      </div>
    </div>
  </section>

  <section class="section section--tinted" id="reading" aria-labelledby="reading-title">
    <div class="shell">
      <div class="section-head">
        <p class="section-head__kicker">对照结果怎么看</p>
        <h2 id="reading-title">三步，把差异变成自己的选择</h2>
        <p class="section-head__lead">
          上面那张表不需要读得面面俱到。三步下来，您手里会剩下一句话：
          先看哪个栏目、用哪一版。
        </p>
      </div>

      <div class="reading-grid">
        <figure class="media-frame media-frame--screen">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上摊开的打印对照表，旁边放着红笔与便签，俯拍视角" loading="lazy" decoding="async">
          <figcaption class="media-frame__cap">把差异圈出来，比一次读完四行更管用</figcaption>
        </figure>

        <ol class="reading-steps">
          <li class="reading-step" data-reveal="0">
            <span class="reading-step__num">01</span>
            <h3>先看差异标记</h3>
            <p>朱砂标出速览版更省时的行，青瓷绿标出详读版更完整的行。这一步只盯这两列，不必逐字比较。</p>
          </li>
          <li class="reading-step" data-reveal="1">
            <span class="reading-step__num">02</span>
            <h3>再对到自己的场景</h3>
            <p>平时用手机还是宽屏、是碎片时间还是整块时间看，把两列差别落到自己的习惯上，取舍自然就出来了。</p>
          </li>
          <li class="reading-step" data-reveal="2">
            <span class="reading-step__num">03</span>
            <h3>最后写下一行结论</h3>
            <p>写下“先看某某栏目、用某某版”，下次进站直接从这行字开始，不用再对着表格重新想一遍。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section section--closing">
    <div class="shell closing">
      <div class="closing__text">
        <h2>还没定下从哪一版开始？</h2>
        <p>回到首页先看权益，再进账户设置，然后带着这张对照表回来挑栏目。走完这一遍，您手上就有一套固定的读法了。</p>
      </div>
      <div class="closing__actions">
        <a class="btn btn--cinnabar" href="/">回到权益先览</a>
        <a class="btn btn--gold" href="/stories/">看评测更新记录</a>
        <a class="btn btn--gold" href="/faq/">查常见问答</a>
      </div>
    </div>
  </section>

</main>

/* ========== 平台与栏目对照 ========== */
.page-products {
  --pp-radius: 6px;
  --pp-gap: clamp(14px, 2.4vw, 24px);
  --pp-section-pad: clamp(40px, 6vw, 80px);
}

/* ---- 面包屑 ---- */
.page-products .breadcrumb {
  padding-block: 14px;
  border-bottom: 1px solid var(--sand);
  background: var(--warm);
}

.page-products .crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--slate);
}

.page-products .crumb-list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--sand);
}

.page-products .crumb-list a {
  color: var(--night);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumb-list a:hover,
.page-products .crumb-list a:focus-visible {
  border-bottom-color: var(--cinnabar);
}

.page-products .crumb-current {
  color: var(--cinnabar);
  font-weight: 700;
}

/* ---- 首屏标题带 ---- */
.page-products .page-band {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--warm);
  border-bottom: 3px solid var(--gold);
  padding-block: clamp(30px, 5vw, 58px);
}

.page-products .page-band::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, .2);
  box-shadow:
    0 0 0 42px rgba(201, 162, 75, .06),
    0 0 0 96px rgba(201, 162, 75, .035);
  pointer-events: none;
}

.page-products .hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-products .page-band__kicker {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold);
  margin: 0 0 14px;
}

.page-products h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--warm);
}

.page-products .page-band__lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(246, 241, 231, .84);
  margin: 0 0 26px;
  max-width: 62ch;
}

.page-products .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- 首屏维度计量板 ---- */
.page-products .hero-meter {
  background: var(--night-2);
  border: 2px solid rgba(201, 162, 75, .5);
  box-shadow: var(--shadow-hard);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-products .hero-meter__title {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold);
  margin: 0 0 20px;
}

.page-products .hero-meter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .hero-meter__row {
  display: grid;
  gap: 8px;
}

.page-products .hero-meter__key {
  font-size: 15px;
  font-weight: 700;
  color: var(--warm);
}

.page-products .hero-meter__bars {
  display: grid;
  gap: 6px;
}

.page-products .hero-meter__bar {
  display: block;
  height: 9px;
  background: rgba(246, 241, 231, .12);
  position: relative;
  overflow: hidden;
}

.page-products .hero-meter__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
}

.page-products .hero-meter__bar--a::after { background: var(--cinnabar-2); }
.page-products .hero-meter__bar--b::after { background: var(--celadon); }

.page-products .hero-meter__list > li:nth-child(1) .hero-meter__bar--a::after { width: 78%; }
.page-products .hero-meter__list > li:nth-child(1) .hero-meter__bar--b::after { width: 46%; }
.page-products .hero-meter__list > li:nth-child(2) .hero-meter__bar--a::after { width: 52%; }
.page-products .hero-meter__list > li:nth-child(2) .hero-meter__bar--b::after { width: 74%; }
.page-products .hero-meter__list > li:nth-child(3) .hero-meter__bar--a::after { width: 34%; }
.page-products .hero-meter__list > li:nth-child(3) .hero-meter__bar--b::after { width: 76%; }
.page-products .hero-meter__list > li:nth-child(4) .hero-meter__bar--a::after { width: 88%; }
.page-products .hero-meter__list > li:nth-child(4) .hero-meter__bar--b::after { width: 54%; }

.page-products .hero-meter__foot {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(246, 241, 231, .18);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(246, 241, 231, .7);
}

/* ---- 通用区块 ---- */
.page-products .section {
  padding-block: var(--pp-section-pad);
}

.page-products .section--tinted {
  background: var(--sand);
  border-block: 2px solid var(--ink);
}

.page-products .section-head {
  max-width: 780px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-products .section-head__kicker {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--cinnabar);
  margin: 0 0 12px;
}

.page-products .section-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
}

.page-products .section-head__lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0;
}

.page-products .verdict {
  margin-top: clamp(22px, 3.2vw, 34px);
  border-left: 5px solid var(--cinnabar);
  background: var(--night);
  color: var(--warm);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}

.page-products .verdict__label {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
  flex: none;
}

.page-products .verdict p {
  margin: 0;
  flex: 1 1 260px;
  font-size: 16px;
  line-height: 1.75;
}

/* ---- 图片容器补充 ---- */
.page-products .media-frame {
  margin: 0 0 clamp(22px, 3.4vw, 34px);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--night);
}

.page-products .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .catalog-figure {
  margin-bottom: clamp(26px, 4vw, 40px);
}

/* ---- 栏目总览卡片 ---- */
.page-products .catalog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 22px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .catalog-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 18px;
  width: 48px;
  height: 4px;
  background: var(--gold);
}

.page-products .catalog-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-products .catalog-card__num {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--night);
  letter-spacing: -.02em;
}

.page-products .catalog-card__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.page-products .catalog-card__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

.page-products .catalog-card__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sand);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}

.page-products .catalog-card__count {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--cinnabar);
}

.page-products .catalog-card__who {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---- 两版对照表 ---- */
.page-products .compare-wrap {
  overflow-x: auto;
  border: var(--border);
  background: var(--warm);
  box-shadow: var(--shadow-hard);
  -webkit-overflow-scrolling: touch;
}

.page-products .compare-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 16px;
}

.page-products .compare-table th,
.page-products .compare-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid var(--sand);
}

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

.page-products .compare-table thead th {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--night);
  color: var(--warm);
  border-bottom: 2px solid var(--gold);
}

.page-products .compare-table thead th.compare-table__a {
  background: var(--cinnabar);
  color: var(--warm);
}

.page-products .compare-table thead th.compare-table__b {
  background: var(--celadon);
  color: var(--warm);
}

.page-products .compare-table tbody th[scope="row"] {
  width: 20%;
  font-weight: 700;
  color: var(--night);
  background: rgba(228, 220, 205, .5);
}

.page-products .compare-table tbody td:nth-child(2) {
  border-left: 3px solid var(--cinnabar);
}

.page-products .compare-table tbody td:nth-child(3) {
  border-left: 3px solid var(--celadon);
}

/* ---- 小屏六档刻度尺 ---- */
.page-products .ruler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .ruler__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 18px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .ruler__bar {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, var(--cinnabar) 0%, var(--gold) 100%);
}

.page-products .ruler__item:nth-child(1) .ruler__bar { height: 22px; }
.page-products .ruler__item:nth-child(2) .ruler__bar { height: 32px; }
.page-products .ruler__item:nth-child(3) .ruler__bar { height: 42px; }
.page-products .ruler__item:nth-child(4) .ruler__bar { height: 54px; }
.page-products .ruler__item:nth-child(5) .ruler__bar { height: 66px; }
.page-products .ruler__item:nth-child(6) .ruler__bar { height: 80px; }

.page-products .ruler__range {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--night);
  letter-spacing: -.01em;
}

.page-products .ruler__unit {
  font-size: 12px;
  color: var(--slate);
  margin-left: 2px;
}

.page-products .ruler__verdict {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

.page-products .ruler__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--sand);
}

/* ---- 设置项对接 ---- */
.page-products .setting-map {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pp-gap);
}

.page-products .setting-row {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .setting-row__index {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--cinnabar);
}

.page-products .setting-row__name h3 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 4px;
}

.page-products .setting-row__hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

.page-products .setting-row__map {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.page-products .setting-row__map p {
  flex: 1 1 100%;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}

/* ---- 权益六大类 ---- */
.page-products .rights-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .rights-card {
  padding: 22px 20px 24px;
  background: var(--warm);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
}

.page-products .rights-card__key {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--night);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--gold);
}

.page-products .rights-card__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
}

.page-products .rights-card__scene {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

/* ---- 技能树 ---- */
.page-products .tree-frame {
  padding: clamp(14px, 3vw, 28px);
  background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .skill-tree {
  display: block;
  width: 100%;
  min-width: 700px;
  height: auto;
}

.page-products .skill-tree .tree-lines path {
  fill: none;
  stroke: rgba(201, 162, 75, .65);
  stroke-width: 2;
}

.page-products .skill-tree text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  fill: var(--warm);
  text-anchor: middle;
}

.page-products .skill-tree .tree-root rect {
  fill: var(--cinnabar);
  stroke: var(--gold);
  stroke-width: 2;
}

.page-products .skill-tree .tree-node rect {
  fill: var(--night-2);
  stroke-width: 2;
}

.page-products .skill-tree .tree-node--a rect { stroke: var(--cinnabar-2); }
.page-products .skill-tree .tree-node--b rect { stroke: var(--gold); }
.page-products .skill-tree .tree-node--c rect { stroke: var(--celadon); }

.page-products .tree-legend {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-gap);
}

.page-products .tree-legend__item {
  padding: 18px 18px 20px;
  background: var(--warm);
  border-left: 5px solid var(--night);
  border-block: 2px solid var(--sand);
  border-right: 2px solid var(--sand);
}

.page-products .tree-legend__item .tag {
  margin-bottom: 10px;
}

.page-products .tree-legend__item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

/* ---- 对照结果怎么看 ---- */
.page-products .reading-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .reading-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .reading-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 2px solid var(--ink);
}

.page-products .reading-step:first-child {
  border-top: 2px solid var(--ink);
}

.page-products .reading-step__num {
  grid-row: 1 / span 2;
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cinnabar);
}

.page-products .reading-step h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.page-products .reading-step p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}

/* ---- 收尾 ---- */
.page-products .section--closing {
  background: var(--night);
  color: var(--warm);
  border-top: 3px solid var(--gold);
}

.page-products .closing {
  display: grid;
  gap: 24px;
  align-items: center;
}

.page-products .closing h2 {
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--warm);
  margin: 0 0 12px;
}

.page-products .closing__text p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(246, 241, 231, .82);
  margin: 0;
  max-width: 58ch;
}

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

/* ---- 平板 ---- */
@media (min-width: 620px) {
  .page-products .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

/* ---- 桌面 ---- */
@media (min-width: 900px) {
  .page-products .hero-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }

  .page-products .setting-row {
    grid-template-columns: 60px minmax(170px, 240px) minmax(0, 1fr);
    align-items: start;
    gap: 8px 24px;
  }

  .page-products .reading-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  }

  .page-products .closing {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

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

  .page-products .catalog-card:nth-child(3n + 2) {
    margin-top: 24px;
  }

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

  .page-products .rights-card:nth-child(3n + 2) {
    margin-top: 26px;
  }

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

@media (min-width: 1240px) {
  .page-products .ruler {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .ruler__verdict {
    font-size: 13.5px;
  }

  .page-products .ruler__note {
    font-size: 12.5px;
  }
}

/* ---- 降低动效 ---- */
@media (prefers-reduced-motion: reduce) {
  .page-products * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}