.page-products {
  --pf-hard-shadow: 5px 5px 0 rgba(201, 162, 39, 0.2);
  --pf-panel-rule: var(--line-soft);
  --pf-panel-text: var(--cream);
  --pf-panel-mute: var(--mute);
  --pf-section-pad: clamp(48px, 7vw, 88px);
  --pf-loose-pad: clamp(64px, 10vw, 124px);

  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.7;
}

.page-products .pf-lede {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.88;
}

.page-products .pf-cap {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 首屏 ---------- */

.page-products .pf-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 76% at 88% -6%, rgba(201, 162, 39, 0.2), rgba(11, 31, 26, 0) 58%),
    var(--ink);
}

.page-products .pf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background-image: repeating-linear-gradient(90deg, rgba(201, 162, 39, 0.22) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.page-products .pf-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  padding: clamp(26px, 6vw, 58px) 0 clamp(38px, 7vw, 76px);
}

.page-products .pf-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 8.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-products .pf-hero__mark {
  color: var(--gold);
}

.page-products .pf-hero__sub {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.9;
}

.page-products .pf-hero__facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 1px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-products .pf-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 12px;
  background: var(--ink);
  font-size: 13px;
  color: var(--mute);
}

.page-products .pf-hero__facts .mono {
  font-family: var(--font-mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.page-products .pf-hero__card {
  border: 2px solid var(--line-soft);
  border-top: 3px solid var(--gold);
  background: rgba(7, 21, 18, 0.74);
  padding: 16px 16px 18px;
  box-shadow: var(--pf-hard-shadow);
}

.page-products .pf-hero__card-cap {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-products .pf-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pf-index li + li {
  border-top: 1px solid var(--line);
}

.page-products .pf-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 15px;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}

.page-products .pf-index a:hover,
.page-products .pf-index a:focus-visible {
  color: var(--gold-soft);
  background: rgba(201, 162, 39, 0.08);
}

.page-products .pf-index .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

.page-products .pf-hero__card-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 通用区块 ---------- */

.page-products .pf-section {
  padding: var(--pf-section-pad) 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-section--loose {
  padding: var(--pf-loose-pad) 0;
}

.page-products .pf-section h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 5.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--cream);
}

/* ---------- 栏目结构图 ---------- */

.page-products .pf-map__frame {
  position: relative;
  margin-top: 28px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: var(--pf-hard-shadow);
  overflow: hidden;
}

.page-products .pf-map__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.8) contrast(1.05);
  pointer-events: none;
}

.page-products .pf-map__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 26, 0.82), rgba(11, 31, 26, 0.95));
  pointer-events: none;
}

.page-products .pf-map__grid {
  position: relative;
  z-index: 1;
  padding: 22px 14px 24px;
}

.page-products .pf-map__axis {
  position: absolute;
  left: 14px;
  top: 28px;
  bottom: 30px;
  width: 26px;
  height: auto;
}

.page-products .pf-axis-line {
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.page-products .pf-axis-tick {
  stroke: var(--gold-soft);
  stroke-width: 1;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.page-products .pf-map__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 40px;
}

.page-products .pf-map__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 1px 10px;
  padding: 12px 10px;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.page-products .pf-map__item:hover,
.page-products .pf-map__item:focus-visible {
  background: rgba(201, 162, 39, 0.1);
  border-left-color: var(--gold);
}

.page-products .pf-map__code {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.page-products .pf-map__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .pf-map__desc {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  transition: color var(--t-hover) var(--ease);
}

.page-products .pf-map__item:hover .pf-map__desc,
.page-products .pf-map__item:focus-visible .pf-map__desc {
  color: var(--cream);
}

/* ---------- 权益分段切换 ---------- */

.page-products .pf-tabs {
  margin-top: 26px;
}

.page-products .pf-tabs .segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 2px solid var(--line);
  background: var(--ink-deep);
}

.page-products .pf-tabs .segmented [role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--t-seg) var(--ease), color var(--t-seg) var(--ease);
}

.page-products .pf-tabs .segmented [role="tab"]:last-child {
  border-right: 0;
}

.page-products .pf-tabs .segmented [role="tab"]:hover {
  color: var(--gold-soft);
}

.page-products .pf-tabs .segmented [role="tab"][aria-selected="true"] {
  background: var(--gold);
  color: var(--ink-deep);
}

.page-products .pf-panels::before {
  content: "";
  display: block;
  height: 14px;
  border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 14px);
}

.page-products .pf-panel {
  --pf-panel-rule: var(--line-soft);
  --pf-panel-text: var(--cream);
  --pf-panel-mute: var(--mute);

  padding: clamp(18px, 4.5vw, 32px);
  border: 2px solid var(--line);
  border-top: 0;
  background: var(--surface);
  color: var(--pf-panel-text);
}

.page-products .pf-panel--light {
  --pf-panel-rule: rgba(11, 31, 26, 0.18);
  --pf-panel-text: #0B1F1A;
  --pf-panel-mute: #3C4F49;

  background: var(--cream);
  border-color: var(--brass);
  color: var(--pf-panel-text);
}

.page-products .pf-panel__inner {
  display: grid;
  gap: 20px;
}

.page-products .pf-panel__media {
  max-width: 240px;
}

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

.page-products .pf-panel__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--pf-panel-text);
}

.page-products .pf-panel__count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--pf-panel-mute);
}

.page-products .pf-panel__intro {
  margin: 8px 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pf-panel-mute);
}

.page-products .pf-rights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pf-rights-list > li {
  padding: 16px 0;
  border-top: 1px solid var(--pf-panel-rule);
}

.page-products .pf-rights-list > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pf-right {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 12px;
}

.page-products .pf-right__code {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-products .pf-panel--light .pf-right__code {
  color: var(--brass);
}

.page-products .pf-right__body h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--pf-panel-text);
}

.page-products .pf-right__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pf-panel-text);
}

.page-products .pf-right__body p + p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pf-panel-mute);
}

/* ---------- 标识规则 ---------- */

.page-products .pf-mark__grid {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.page-products .pf-mark__panel {
  padding: 20px 18px;
  border: 2px solid var(--line);
}

.page-products .pf-mark__panel--dark {
  background: var(--ink-deep);
}

.page-products .pf-mark__panel--light {
  background: var(--cream);
  border-color: var(--brass);
}

.page-products .pf-mark__cap {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

.page-products .pf-mark__panel--light .pf-mark__cap {
  color: #3C4F49;
}

.page-products .pf-mark__badge {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, 0.14);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

.page-products .pf-mark__badge--dark {
  border-color: var(--brass);
  background: rgba(107, 85, 24, 0.14);
  color: var(--brass);
}

.page-products .pf-mark__line {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.85;
}

.page-products .pf-mark__panel--light .pf-mark__line {
  color: #26382F;
  opacity: 1;
}

.page-products .pf-usage {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-usage li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pf-usage__chip {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: 1px solid rgba(242, 237, 227, 0.28);
}

.page-products .pf-usage__chip--gold {
  background: var(--gold);
}

.page-products .pf-usage__chip--soft {
  background: var(--gold-soft);
}

.page-products .pf-usage__chip--brass {
  background: var(--brass);
}

.page-products .pf-usage__chip--mute {
  background: var(--mute);
}

.page-products .pf-usage__name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.page-products .pf-usage__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 记录机制 ---------- */

.page-products .pf-record {
  display: grid;
  gap: 28px;
}

.page-products .pf-record__body > p {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.88;
}

.page-products .pf-record__rules {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-record__rules li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream);
}

.page-products .pf-record__rules .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-products .pf-record__rules li:last-child .mono {
  color: var(--mute);
}

.page-products .pf-record__foot {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--brass);
  font-size: 14px;
  line-height: 1.75;
  color: var(--mute);
}

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

/* ---------- 使用场景 ---------- */

.page-products .pf-scenes__list {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.page-products .pf-scene {
  padding-top: 20px;
  border-top: 2px solid var(--line);
}

.page-products .pf-scene__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.page-products .pf-scene h3 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .pf-scene p {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--cream);
  opacity: 0.85;
}

/* ---------- 折叠说明 ---------- */

.page-products .pf-folds {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--ink-deep);
}

.page-products .pf-fold + .pf-fold {
  border-top: 1px solid var(--line);
}

.page-products .pf-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
}

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

.page-products .pf-fold > summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--gold);
  transition: transform var(--t-fold) var(--ease);
}

.page-products .pf-fold[open] > summary::after {
  transform: rotate(45deg);
}

.page-products .pf-fold > summary:hover {
  color: var(--gold-soft);
}

.page-products .pf-fold__body {
  padding: 0 16px 18px;
  border-top: 1px dashed var(--line);
}

.page-products .pf-fold__body p {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

/* ---------- 后续链接 ---------- */

.page-products .pf-next__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-next__list li {
  border-bottom: 1px solid var(--line);
}

.page-products .pf-next__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease), padding-left var(--t-hover) var(--ease);
}

.page-products .pf-next__list a:hover,
.page-products .pf-next__list a:focus-visible {
  color: var(--gold-soft);
  padding-left: 10px;
}

.page-products .pf-next__list .mono {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

/* ---------- 响应式 ---------- */

@media (min-width: 640px) {
  .page-products .pf-map__list {
    padding-left: 52px;
  }

  .page-products .pf-map__item {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 13px 12px;
  }

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

  .page-products .pf-panel__media {
    max-width: 300px;
  }

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

  .page-products .pf-record {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  .page-products .pf-panel__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }

  .page-products .pf-panel__media {
    max-width: none;
  }

  .page-products .pf-scenes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
  }

  .page-products .pf-scene:nth-child(2) {
    margin-top: 40px;
  }

  .page-products .pf-scene:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 60ch;
  }
}

@media (min-width: 1180px) {
  .page-products .pf-scenes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 44px;
  }

  .page-products .pf-scene:nth-child(3) {
    grid-column: auto;
    margin-top: 20px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-scene:nth-child(2),
  .page-products .pf-scene:nth-child(3) {
    margin-top: 0;
  }

  .page-products .pf-index a,
  .page-products .pf-map__item,
  .page-products .pf-map__desc,
  .page-products .pf-fold > summary::after,
  .page-products .pf-next__list a,
  .page-products .pf-tabs .segmented [role="tab"] {
    transition-duration: 1ms;
  }
}
</style>
<<<END>>>

等一下——我输出的是 `</style>`，但协议要求以 `` 标记结束。那里不应该有 `</style>` 标签，应该直接以 CSS 结尾就行。让我把结尾修正一下。

重新检查一下：输出应该以 PAGE_CSS 的 CSS 内容结束，不能有 `</style>` 标签，也不能有其他任何东西。那我删掉它。

另外再检查一下有没有把样式重复写两遍——没有。

让我再确认一下 `media` 块里嵌套的 `.page-products .pf-scene:nth-child(2) { margin-top: 40px; }` 这部分——没问题。

`@media (min-width: 1180px)` ——没问题。

还有一点：`.page-products .pf-tabs .segmented` 这个选择器——共享 CSS 里可能已经有 `.segmented` 的样式了；我在这里做覆盖是没问题的。

还有 `.pf-hero__facts li` 用的是 `display: flex`，包含 `.mono` 和文字——这样可以。

检查一下 `pf-panel__media img` 放在 `.media-frame` 里——共享的 `media-frame` 大概率会处理纵横比，所以我的 `img` 设置没问题。

好，就这样定稿。
<main id="main-content" class="page-products">

  <nav class="breadcrumb container" aria-label="页面位置">
    <a href="/">首页</a>
    <span aria-hidden="true">/</span>
    <span aria-current="page">平台服务</span>
  </nav>

  <header class="pf-hero">
    <div class="container pf-hero__inner">
      <div class="pf-hero__lead">
        <p class="eyebrow">02 · 平台服务</p>
        <h1>会员权益 V3 与六个固定栏目，<span class="pf-hero__mark">按编号就能对上位置</span></h1>
        <p class="pf-hero__sub">
          澳门新萄京移动端品牌服务把全部栏目压在同一条竖轴上：六个位置、三组九项权益、一套等宽编号。
          打开这一页，先看清结构，再决定自己该看哪一栏，不必逐条询问。
        </p>
        <ul class="pf-hero__facts">
          <li><span class="mono">06</span><span>个固定栏目</span></li>
          <li><span class="mono">09</span><span>项权益编号</span></li>
          <li><span class="mono">12</span><span>次版本迭代</span></li>
          <li><span class="mono">47</span><span>条更新记录</span></li>
        </ul>
      </div>

      <aside class="pf-hero__card" aria-label="六栏栏目索引">
        <p class="pf-hero__card-cap">栏目索引 · 按编号定位</p>
        <ol class="pf-index">
          <li><a href="/"><span class="mono">01</span>首屏栏目</a></li>
          <li><a href="/platform/"><span class="mono">02</span>会员权益 V3</a></li>
          <li><a href="/trends/"><span class="mono">03</span>更新记录</a></li>
          <li><a href="/inquiry/"><span class="mono">04</span>联系入口</a></li>
          <li><a href="/story/"><span class="mono">05</span>品牌沿革</a></li>
          <li><a href="/faqs/"><span class="mono">06</span>常见问答</a></li>
        </ol>
        <p class="pf-hero__card-note">你正在看 02。这一栏只讲结构、编号和规则，不讲别的东西。</p>
      </aside>
    </div>
  </header>

  <section class="pf-section pf-map" aria-labelledby="pf-map-title">
    <div class="container">
      <p class="eyebrow">结构总览</p>
      <h2 id="pf-map-title">移动端服务全貌</h2>
      <p class="pf-lede">
        栏目数量被压在六个，不是省事，而是路径的上限——一次打开之内看得完，位置才记得住。
        再多一格，首屏栏目轴就需要滚动才能看全，回访时熟悉的那个位置感就散了。
      </p>

      <div class="pf-map__frame">
        <img class="pf-map__bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深色桌面上局部暖金反光的抽象特写，无文字无人物">
        <div class="pf-map__grid">
          <svg class="pf-map__axis" viewBox="0 0 32 640" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <line class="pf-axis-line" x1="16" y1="0" x2="16" y2="640"></line>
            <line class="pf-axis-tick" x1="3" y1="53" x2="29" y2="53"></line>
            <line class="pf-axis-tick" x1="3" y1="160" x2="29" y2="160"></line>
            <line class="pf-axis-tick" x1="3" y1="267" x2="29" y2="267"></line>
            <line class="pf-axis-tick" x1="3" y1="373" x2="29" y2="373"></line>
            <line class="pf-axis-tick" x1="3" y1="480" x2="29" y2="480"></line>
            <line class="pf-axis-tick" x1="3" y1="587" x2="29" y2="587"></line>
          </svg>
          <ol class="pf-map__list">
            <li>
              <a class="pf-map__item" href="/">
                <span class="pf-map__code mono">01</span>
                <span class="pf-map__name">首屏栏目</span>
                <span class="pf-map__desc">定位锚点。打开即确认自己在哪一栏，不翻页。</span>
              </a>
            </li>
            <li>
              <a class="pf-map__item" href="/platform/">
                <span class="pf-map__code mono">02</span>
                <span class="pf-map__name">会员权益 V3</span>
                <span class="pf-map__desc">三组九项的分组与编号，规则全部写在本栏。</span>
              </a>
            </li>
            <li>
              <a class="pf-map__item" href="/trends/">
                <span class="pf-map__code mono">03</span>
                <span class="pf-map__name">更新记录</span>
                <span class="pf-map__desc">版本变化按月归档，先看分类再看摘要。</span>
              </a>
            </li>
            <li>
              <a class="pf-map__item" href="/inquiry/">
                <span class="pf-map__code mono">04</span>
                <span class="pf-map__name">联系入口</span>
                <span class="pf-map__desc">回访与权益咨询的出口，固定在底部第二栏。</span>
              </a>
            </li>
            <li>
              <a class="pf-map__item" href="/story/">
                <span class="pf-map__code mono">05</span>
                <span class="pf-map__name">品牌沿革</span>
                <span class="pf-map__desc">结构从哪一步来，由哪些小组长期维护。</span>
              </a>
            </li>
            <li>
              <a class="pf-map__item" href="/faqs/">
                <span class="pf-map__code mono">06</span>
                <span class="pf-map__name">常见问答</span>
                <span class="pf-map__desc">短问题配一句话结论，适合快速核对。</span>
              </a>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="pf-section pf-rights" aria-labelledby="pf-rights-title">
    <div class="container">
      <p class="eyebrow">权益 V3</p>
      <h2 id="pf-rights-title">会员权益 V3 的三组九项</h2>
      <p class="pf-lede">
        九项权益按使用深度分成基础组、进阶组、长期组，每组固定三项，编号前缀分别是 B、A、L。
        编号一旦发布就不再复用，只做增补或停用标注，方便对照旧记录确认自己看到的是哪一项。
      </p>

      <div class="pf-tabs" data-tabs>
        <div class="segmented" role="tablist" aria-label="会员权益 V3 分组">
          <button type="button" role="tab" id="rtab-basic" aria-controls="rpanel-basic" aria-selected="true" tabindex="0">基础组 · B</button>
          <button type="button" role="tab" id="rtab-plus" aria-controls="rpanel-plus" aria-selected="false" tabindex="-1">进阶组 · A</button>
          <button type="button" role="tab" id="rtab-long" aria-controls="rpanel-long" aria-selected="false" tabindex="-1">长期组 · L</button>
        </div>

        <div class="pf-panels">
          <section class="pf-panel" role="tabpanel" id="rpanel-basic" aria-labelledby="rtab-basic" tabindex="0">
            <div class="pf-panel__inner">
              <div class="pf-panel__media">
                <div class="media-frame media-frame--square">
                  <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="单堆筹码的微距特写，暖金色调，背景深绿" loading="lazy" decoding="async">
                </div>
              </div>
              <div class="pf-panel__body">
                <h3>基础组 <span class="mono pf-panel__count">03 / 09</span></h3>
                <p class="pf-panel__intro">进门就能用上的三项，全部围绕“少翻一次”设计。</p>
                <ol class="pf-rights-list">
                  <li class="pf-right">
                    <p class="pf-right__code mono">B-01</p>
                    <div class="pf-right__body">
                      <h4>栏目位置授权</h4>
                      <p>把你最常看的栏目留在索引条前两位，下次打开不用重新往下找。</p>
                      <p>触发 · 账号登录后完成一次首屏栏目访问。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">B-02</p>
                    <div class="pf-right__body">
                      <h4>更新提醒标记</h4>
                      <p>新一个版本周期的记录发布后，更新记录栏顶部会标出本周期的变更条数。</p>
                      <p>触发 · 该周期记录正式归档之后自动生效。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">B-03</p>
                    <div class="pf-right__body">
                      <h4>联系入口记忆</h4>
                      <p>从底部第二栏发出过一次咨询后，再打开联系入口会回到上次使用的渠道。</p>
                      <p>触发 · 通过邮箱或服务电话完成一次咨询发起。</p>
                    </div>
                  </li>
                </ol>
              </div>
            </div>
          </section>

          <section class="pf-panel pf-panel--light" role="tabpanel" id="rpanel-plus" aria-labelledby="rtab-plus" tabindex="0" hidden>
            <div class="pf-panel__inner">
              <div class="pf-panel__media">
                <div class="media-frame media-frame--square">
                  <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="两堆并列筹码的俯拍，光线偏冷，无标识" loading="lazy" decoding="async">
                </div>
              </div>
              <div class="pf-panel__body">
                <h3>进阶组 <span class="mono pf-panel__count">03 / 09</span></h3>
                <p class="pf-panel__intro">面向已经记住路径的人，重点是“对照”和“切换”。</p>
                <ol class="pf-rights-list">
                  <li class="pf-right">
                    <p class="pf-right__code mono">A-01</p>
                    <div class="pf-right__body">
                      <h4>自定义栏目索引</h4>
                      <p>把六个栏目中的任意三个放进个人索引条，用地图图例式的编号与色块呈现。</p>
                      <p>触发 · 连续三个版本周期内访问过全部六个栏目。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">A-02</p>
                    <div class="pf-right__body">
                      <h4>版本对比视图</h4>
                      <p>相邻两个版本周期的记录可以并排显示，位置变更的那一条会被标出来。</p>
                      <p>触发 · 在更新记录栏使用过一次版本核对。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">A-03</p>
                    <div class="pf-right__body">
                      <h4>双档位栏目切换</h4>
                      <p>在完整六栏和常用三栏之间切换，默认沿用你上一次的选择，不重置。</p>
                      <p>触发 · 手动切换过一次档位并保持登录状态。</p>
                    </div>
                  </li>
                </ol>
              </div>
            </div>
          </section>

          <section class="pf-panel" role="tabpanel" id="rpanel-long" aria-labelledby="rtab-long" tabindex="0" hidden>
            <div class="pf-panel__inner">
              <div class="pf-panel__media">
                <div class="media-frame media-frame--square">
                  <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="整齐排列的筹码边缘特写，构图为横向重复节奏" loading="lazy" decoding="async">
                </div>
              </div>
              <div class="pf-panel__body">
                <h3>长期组 <span class="mono pf-panel__count">03 / 09</span></h3>
                <p class="pf-panel__intro">留给长期观察版本变化的人，记录和保留是这三项的全部作用。</p>
                <ol class="pf-rights-list">
                  <li class="pf-right">
                    <p class="pf-right__code mono">L-01</p>
                    <div class="pf-right__body">
                      <h4>访问位置快照</h4>
                      <p>保留最近 12 次访问时所在的栏目位置，用来核对栏目顺序有没有被人动过。</p>
                      <p>触发 · 同一账号在 12 次访问内保持登录。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">L-02</p>
                    <div class="pf-right__body">
                      <h4>分组选择保留</h4>
                      <p>你在三组之间选定的那一组会跟随账号保留，更换设备后重新打开仍是同一组。</p>
                      <p>触发 · 在分段切换中选定一组并保持登录。</p>
                    </div>
                  </li>
                  <li class="pf-right">
                    <p class="pf-right__code mono">L-03</p>
                    <div class="pf-right__body">
                      <h4>值守队列标识</h4>
                      <p>工作时段内提交的咨询会进入联系入口值守组队列，按先后顺序处理，不作加急。</p>
                      <p>触发 · 在工作时段内通过客服邮箱或服务电话发起咨询。</p>
                    </div>
                  </li>
                </ol>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </section>

  <section class="pf-section pf-mark" aria-labelledby="pf-mark-title">
    <div class="container">
      <p class="eyebrow">标识规则</p>
      <h2 id="pf-mark-title">暖金只留给首屏栏目和权益 V3</h2>
      <p class="pf-lede">
        全站压在墨底深绿上，光源只集中在两个位置：首屏栏目标识和权益 V3 徽章。
        其余的编号、刻度、分隔线一律走低饱和色，避免到处都是重点，反而让位置感失效。
      </p>

      <div class="pf-mark__grid">
        <div class="pf-mark__panel pf-mark__panel--dark">
          <p class="pf-mark__cap mono">深绿底 · #0B1F1A</p>
          <p class="pf-mark__badge">V3 · 权益标识</p>
          <p class="pf-mark__line">暖金 #C9A227 置于深绿底，对比度约 7:1，可以承担标识本身的分量。</p>
        </div>
        <div class="pf-mark__panel pf-mark__panel--light">
          <p class="pf-mark__cap mono">米白底 · #F2EDE3</p>
          <p class="pf-mark__badge pf-mark__badge--dark">V3 · 权益标识</p>
          <p class="pf-mark__line">浅色反白分区里改用暗金褐 #6B5518，保证编号与刻度仍然读得清。</p>
        </div>
      </div>

      <ul class="pf-usage">
        <li>
          <span class="pf-usage__chip pf-usage__chip--gold" aria-hidden="true"></span>
          <span class="pf-usage__name">暖金 #C9A227</span>
          <span class="pf-usage__desc">首屏栏目标识与权益 V3 徽章，只出现在深绿底上</span>
        </li>
        <li>
          <span class="pf-usage__chip pf-usage__chip--soft" aria-hidden="true"></span>
          <span class="pf-usage__name">浅暖金 #E7C766</span>
          <span class="pf-usage__desc">悬停与焦点描边，不作为正文颜色使用</span>
        </li>
        <li>
          <span class="pf-usage__chip pf-usage__chip--brass" aria-hidden="true"></span>
          <span class="pf-usage__name">暗金褐 #6B5518</span>
          <span class="pf-usage__desc">浅色分区里的编号、刻度与弱化装饰线</span>
        </li>
        <li>
          <span class="pf-usage__chip pf-usage__chip--mute" aria-hidden="true"></span>
          <span class="pf-usage__name">中性灰绿 #6E7F78</span>
          <span class="pf-usage__desc">次级说明与分隔线，不承载长文本</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="pf-section" aria-labelledby="pf-record-title">
    <div class="container pf-record">
      <div class="pf-record__body">
        <p class="eyebrow">记录机制</p>
        <h2 id="pf-record-title">十二次迭代，四十七条记录</h2>
        <p>
          站点累计完成 12 次版本迭代，更新记录累计 47 条，节奏稳定在每月 1–2 次小版本记录。
          记录按三类归档：栏目调整、版本发布、内容补充。只有会影响你回访路径或权益结构的变化才必须写入记录。
        </p>
        <ol class="pf-record__rules">
          <li><span class="mono">必记</span><span>栏目顺序或栏目名称发生调整</span></li>
          <li><span class="mono">必记</span><span>权益编号增删、分组归属发生变化</span></li>
          <li><span class="mono">必记</span><span>联系入口位置调整，例如最近一次移至底部第二栏</span></li>
          <li><span class="mono">归档</span><span>内容补充、措辞修正、索引编号微调</span></li>
        </ol>
        <p class="pf-record__foot">
          维护由 14 人、4 个小组承担：栏目运维组负责首屏栏目轴，版本记录组负责条目归档，
          会员权益组维护九项编号，联系入口值守组按工作时段处理咨询。
        </p>
      </div>
      <div class="pf-record__media">
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间门廊的线性灯光与地面反光，低角度，无人物" loading="lazy" decoding="async">
        </div>
        <p class="pf-cap">3月12日 的那次调整，把联系入口移到 底部第二栏，权益 V3 与更新记录同处首屏一栏。</p>
      </div>
    </div>
  </section>

  <section class="pf-section pf-section--loose pf-scenes" aria-labelledby="pf-scenes-title">
    <div class="container">
      <p class="eyebrow">三种打开方式</p>
      <h2 id="pf-scenes-title">同一套栏目，不同的人各取一段</h2>
      <div class="pf-scenes__list">
        <article class="pf-scene">
          <p class="pf-scene__num mono">场景 01</p>
          <h3>通勤时段快速确认</h3>
          <p>
            站台上单手打开，只看首屏栏目轴的第一格和第三格。回访用户中约 68% 直接从首屏栏目进入，
            完成一次位置确认的平均时间约 11 秒。要的就是这十一秒。
          </p>
        </article>
        <article class="pf-scene">
          <p class="pf-scene__num mono">场景 02</p>
          <h3>夜间回访核对版本</h3>
          <p>
            在家把更新记录翻到最近一个版本周期，对照自己在进阶组里记住的编号，确认 A-02 那条记录有没有变化。
            值守按排班进行，记录本身不因时段改变。
          </p>
        </article>
        <article class="pf-scene">
          <p class="pf-scene__num mono">场景 03</p>
          <h3>首次访问按索引理解结构</h3>
          <p>
            第一次进来的人从六个编号开始读，先看懂哪一栏放什么，再决定从哪一格往下走。
            地图图例式的编号就是给这类访问者准备的。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="pf-section" aria-labelledby="pf-mobile-title">
    <div class="container">
      <p class="eyebrow">窄屏与弱网</p>
      <h2 id="pf-mobile-title">移动端适配与加载</h2>
      <p class="pf-lede">
        栏目轴在所有页面沿用同一位置逻辑：桌面端固定在左侧轨道，窄屏时收成顶部抽屉入口。
        首屏栏目优先渲染，其余区块按滚动顺序补齐。
      </p>

      <div class="pf-folds">
        <details class="pf-fold">
          <summary>首屏栏目优先渲染是怎么处理的</summary>
          <div class="pf-fold__body">
            <p>
              栏目轴、六个编号与权益 V3 徽章属于第一批内容，先于图片与索引列表呈现。
              这样即便后续资源还在路上，你也已经能确认自己处在哪一栏。
            </p>
          </div>
        </details>
        <details class="pf-fold">
          <summary>窄屏下栏目轴去了哪里</summary>
          <div class="pf-fold__body">
            <p>
              窄屏把左侧轨道折叠为顶部抽屉入口，六个栏目与底部第二栏的联系入口完整保留在抽屉内，
              编号顺序不变，位置感不依赖屏幕宽度。
            </p>
          </div>
        </details>
        <details class="pf-fold">
          <summary>弱网环境下会看到什么</summary>
          <div class="pf-fold__body">
            <p>
              文字与编号优先显示，图片位置保留固定比例的占位框，不出现跳动式重排。
              分段切换与折叠展开属于本地行为，不依赖网络返回，弱网下仍可操作。
            </p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="pf-section pf-next" aria-labelledby="pf-next-title">
    <div class="container">
      <h2 id="pf-next-title">接着可以看什么</h2>
      <ul class="pf-next__list">
        <li><a href="/trends/"><span>更新记录 · 核对最近一个版本周期改了什么</span><span class="mono">03</span></a></li>
        <li><a href="/faqs/"><span>常见问答 · 权益 V3 与旧版本的差异一句话说明</span><span class="mono">06</span></a></li>
        <li><a href="/inquiry/"><span>联系入口 · 客服邮箱、服务电话与底部第二栏说明</span><span class="mono">04</span></a></li>
        <li><a href="/story/"><span>品牌沿革 · 栏目轴为什么是这样长出来的</span><span class="mono">05</span></a></li>
        <li><a href="/"><span>首屏栏目 · 回到定位锚点</span><span class="mono">01</span></a></li>
      </ul>
    </div>
  </section>

</main>

.page-products {
  --pf-hard-shadow: 5px 5px 0 rgba(201, 162, 39, 0.2);
  --pf-panel-rule: var(--line-soft);
  --pf-panel-text: var(--cream);
  --pf-panel-mute: var(--mute);
  --pf-section-pad: clamp(48px, 7vw, 88px);
  --pf-loose-pad: clamp(64px, 10vw, 124px);

  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.7;
}

.page-products .pf-lede {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.88;
}

.page-products .pf-cap {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 首屏 ---------- */

.page-products .pf-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 76% at 88% -6%, rgba(201, 162, 39, 0.2), rgba(11, 31, 26, 0) 58%),
    var(--ink);
}

.page-products .pf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background-image: repeating-linear-gradient(90deg, rgba(201, 162, 39, 0.22) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.page-products .pf-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  padding: clamp(26px, 6vw, 58px) 0 clamp(38px, 7vw, 76px);
}

.page-products .pf-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 8.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-products .pf-hero__mark {
  color: var(--gold);
}

.page-products .pf-hero__sub {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.9;
}

.page-products .pf-hero__facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 1px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-products .pf-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px;
  background: var(--ink);
  font-size: 13px;
  color: var(--mute);
}

.page-products .pf-hero__facts .mono {
  font-family: var(--font-mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.page-products .pf-hero__card {
  border: 2px solid var(--line-soft);
  border-top: 3px solid var(--gold);
  background: rgba(7, 21, 18, 0.74);
  padding: 16px 16px 18px;
  box-shadow: var(--pf-hard-shadow);
}

.page-products .pf-hero__card-cap {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.page-products .pf-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pf-index li + li {
  border-top: 1px solid var(--line);
}

.page-products .pf-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 15px;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}

.page-products .pf-index a:hover,
.page-products .pf-index a:focus-visible {
  color: var(--gold-soft);
  background: rgba(201, 162, 39, 0.08);
}

.page-products .pf-index .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

.page-products .pf-hero__card-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 通用区块 ---------- */

.page-products .pf-section {
  padding: var(--pf-section-pad) 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-section--loose {
  padding: var(--pf-loose-pad) 0;
}

.page-products .pf-section h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 5.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--cream);
}

/* ---------- 栏目结构图 ---------- */

.page-products .pf-map__frame {
  position: relative;
  margin-top: 28px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: var(--pf-hard-shadow);
  overflow: hidden;
}

.page-products .pf-map__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.8) contrast(1.05);
  pointer-events: none;
}

.page-products .pf-map__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 26, 0.82), rgba(11, 31, 26, 0.95));
  pointer-events: none;
}

.page-products .pf-map__grid {
  position: relative;
  z-index: 1;
  padding: 22px 14px 24px;
}

.page-products .pf-map__axis {
  position: absolute;
  left: 14px;
  top: 28px;
  bottom: 30px;
  width: 26px;
  height: auto;
}

.page-products .pf-axis-line {
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.page-products .pf-axis-tick {
  stroke: var(--gold-soft);
  stroke-width: 1;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.page-products .pf-map__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 40px;
}

.page-products .pf-map__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 1px 10px;
  padding: 12px 10px;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.page-products .pf-map__item:hover,
.page-products .pf-map__item:focus-visible {
  background: rgba(201, 162, 39, 0.1);
  border-left-color: var(--gold);
}

.page-products .pf-map__code {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.page-products .pf-map__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .pf-map__desc {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  transition: color var(--t-hover) var(--ease);
}

.page-products .pf-map__item:hover .pf-map__desc,
.page-products .pf-map__item:focus-visible .pf-map__desc {
  color: var(--cream);
}

/* ---------- 权益分段切换 ---------- */

.page-products .pf-tabs {
  margin-top: 26px;
}

.page-products .pf-tabs .segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 2px solid var(--line);
  background: var(--ink-deep);
}

.page-products .pf-tabs .segmented [role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--t-seg) var(--ease), color var(--t-seg) var(--ease);
}

.page-products .pf-tabs .segmented [role="tab"]:last-child {
  border-right: 0;
}

.page-products .pf-tabs .segmented [role="tab"]:hover {
  color: var(--gold-soft);
}

.page-products .pf-tabs .segmented [role="tab"][aria-selected="true"] {
  background: var(--gold);
  color: var(--ink-deep);
}

.page-products .pf-panels::before {
  content: "";
  display: block;
  height: 14px;
  border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 14px);
}

.page-products .pf-panel {
  --pf-panel-rule: var(--line-soft);
  --pf-panel-text: var(--cream);
  --pf-panel-mute: var(--mute);

  padding: clamp(18px, 4.5vw, 32px);
  border: 2px solid var(--line);
  border-top: 0;
  background: var(--surface);
  color: var(--pf-panel-text);
}

.page-products .pf-panel--light {
  --pf-panel-rule: rgba(11, 31, 26, 0.18);
  --pf-panel-text: #0B1F1A;
  --pf-panel-mute: #3C4F49;

  background: var(--cream);
  border-color: var(--brass);
  color: var(--pf-panel-text);
}

.page-products .pf-panel__inner {
  display: grid;
  gap: 20px;
}

.page-products .pf-panel__media {
  max-width: 240px;
}

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

.page-products .pf-panel__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--pf-panel-text);
}

.page-products .pf-panel__count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--pf-panel-mute);
}

.page-products .pf-panel__intro {
  margin: 8px 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pf-panel-mute);
}

.page-products .pf-rights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pf-rights-list > li {
  padding: 16px 0;
  border-top: 1px solid var(--pf-panel-rule);
}

.page-products .pf-rights-list > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .pf-right {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 12px;
}

.page-products .pf-right__code {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-products .pf-panel--light .pf-right__code {
  color: var(--brass);
}

.page-products .pf-right__body h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--pf-panel-text);
}

.page-products .pf-right__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pf-panel-text);
}

.page-products .pf-right__body p + p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pf-panel-mute);
}

/* ---------- 标识规则 ---------- */

.page-products .pf-mark__grid {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.page-products .pf-mark__panel {
  padding: 20px 18px;
  border: 2px solid var(--line);
}

.page-products .pf-mark__panel--dark {
  background: var(--ink-deep);
}

.page-products .pf-mark__panel--light {
  background: var(--cream);
  border-color: var(--brass);
}

.page-products .pf-mark__cap {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

.page-products .pf-mark__panel--light .pf-mark__cap {
  color: #3C4F49;
}

.page-products .pf-mark__badge {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, 0.14);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

.page-products .pf-mark__badge--dark {
  border-color: var(--brass);
  background: rgba(107, 85, 24, 0.14);
  color: var(--brass);
}

.page-products .pf-mark__line {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.85;
}

.page-products .pf-mark__panel--light .pf-mark__line {
  color: #26382F;
  opacity: 1;
}

.page-products .pf-usage {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-usage li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .pf-usage__chip {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: 1px solid rgba(242, 237, 227, 0.28);
}

.page-products .pf-usage__chip--gold {
  background: var(--gold);
}

.page-products .pf-usage__chip--soft {
  background: var(--gold-soft);
}

.page-products .pf-usage__chip--brass {
  background: var(--brass);
}

.page-products .pf-usage__chip--mute {
  background: var(--mute);
}

.page-products .pf-usage__name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.page-products .pf-usage__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 记录机制 ---------- */

.page-products .pf-record {
  display: grid;
  gap: 28px;
}

.page-products .pf-record__body > p {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.88;
}

.page-products .pf-record__rules {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-record__rules li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream);
}

.page-products .pf-record__rules .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-products .pf-record__rules li:last-child .mono {
  color: var(--mute);
}

.page-products .pf-record__foot {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--brass);
  font-size: 14px;
  line-height: 1.75;
  color: var(--mute);
}

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

/* ---------- 使用场景 ---------- */

.page-products .pf-scenes__list {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.page-products .pf-scene {
  padding-top: 20px;
  border-top: 2px solid var(--line);
}

.page-products .pf-scene__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.page-products .pf-scene h3 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .pf-scene p {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--cream);
  opacity: 0.85;
}

/* ---------- 折叠说明 ---------- */

.page-products .pf-folds {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--ink-deep);
}

.page-products .pf-fold + .pf-fold {
  border-top: 1px solid var(--line);
}

.page-products .pf-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
}

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

.page-products .pf-fold > summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--gold);
  transition: transform var(--t-fold) var(--ease);
}

.page-products .pf-fold[open] > summary::after {
  transform: rotate(45deg);
}

.page-products .pf-fold > summary:hover {
  color: var(--gold-soft);
}

.page-products .pf-fold__body {
  padding: 0 16px 18px;
  border-top: 1px dashed var(--line);
}

.page-products .pf-fold__body p {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

/* ---------- 后续链接 ---------- */

.page-products .pf-next__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .pf-next__list li {
  border-bottom: 1px solid var(--line);
}

.page-products .pf-next__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease), padding-left var(--t-hover) var(--ease);
}

.page-products .pf-next__list a:hover,
.page-products .pf-next__list a:focus-visible {
  color: var(--gold-soft);
  padding-left: 10px;
}

.page-products .pf-next__list .mono {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}

/* ---------- 响应式 ---------- */

@media (min-width: 640px) {
  .page-products .pf-map__list {
    padding-left: 52px;
  }

  .page-products .pf-map__item {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 13px 12px;
  }

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

  .page-products .pf-panel__media {
    max-width: 300px;
  }

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

  .page-products .pf-record {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  .page-products .pf-panel__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }

  .page-products .pf-panel__media {
    max-width: none;
  }

  .page-products .pf-scenes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
  }

  .page-products .pf-scene:nth-child(2) {
    margin-top: 40px;
  }

  .page-products .pf-scene:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 60ch;
  }
}

@media (min-width: 1180px) {
  .page-products .pf-scenes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 44px;
  }

  .page-products .pf-scene:nth-child(3) {
    grid-column: auto;
    margin-top: 20px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-scene:nth-child(2),
  .page-products .pf-scene:nth-child(3) {
    margin-top: 0;
  }

  .page-products .pf-index a,
  .page-products .pf-map__item,
  .page-products .pf-map__desc,
  .page-products .pf-fold > summary::after,
  .page-products .pf-next__list a,
  .page-products .pf-tabs .segmented [role="tab"] {
    transition-duration: 1ms;
  }
}