.page-products {
  --pp-start: var(--ochre);
  --pp-tide: var(--tide);
  --pp-ocean: var(--brass);
  --pp-line: var(--paper-line);
  --pp-row: rgba(11, 34, 49, 0.04);
}

.page-products .pp-coord {
  padding-top: clamp(1.2rem, 3vw, 2rem);
}

.page-products .pp-num {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--brass);
  font-feature-settings: "tnum";
}

/* ---------- Hero ---------- */
.page-products .pp-hero {
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.page-products .pp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.page-products .pp-hero__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--tide-deep);
}

.page-products .pp-hero h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}

.page-products .pp-br {
  display: none;
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-products .pp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pp-line);
}

.page-products .pp-fact {
  margin: 0;
}

.page-products .pp-fact dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--graphite);
  margin-bottom: 0.35rem;
}

.page-products .pp-fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--text-ink);
}

.page-products .pp-fact dd .pp-num {
  font-size: 1.6rem;
  color: var(--ochre);
}

.page-products .pp-hero__visual {
  position: relative;
  padding-top: 0.5rem;
}

.page-products .pp-hero__compass {
  position: absolute;
  top: -1.5rem;
  right: -0.5rem;
  width: clamp(120px, 30vw, 200px);
  opacity: 0.55;
  pointer-events: none;
}

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

.page-products .pp-lines {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-products .pp-line {
  position: relative;
  padding: 1.1rem 1.25rem 1.15rem 1.9rem;
  background: var(--paper);
  border-left: 4px solid var(--pp-line-accent, var(--ochre));
  box-shadow: 0 1px 0 var(--paper-shade);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.page-products .pp-line:hover,
.page-products .pp-line:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 34, 49, 0.16);
}

.page-products .pp-line--start { --pp-line-accent: var(--pp-start); }
.page-products .pp-line--tide { --pp-line-accent: var(--pp-tide); }
.page-products .pp-line--ocean { --pp-line-accent: var(--pp-ocean); }

.page-products .pp-line__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--graphite);
  margin-bottom: 0.35rem;
}

.page-products .pp-line__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text-ink);
  letter-spacing: 0.01em;
}

.page-products .pp-line__for {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.86rem;
  color: var(--tide-deep);
  letter-spacing: 0.02em;
}

.page-products .pp-line__desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- Section head modifier ---------- */
.page-products .section-head--pp {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pp-line);
}

.page-products .section-head--ondark {
  border-bottom-color: rgba(87, 175, 174, 0.28);
}

.page-products .section-head--ondark .section-head__title {
  color: var(--paper);
}

.page-products .section-head--ondark .section-head__index {
  color: var(--coral);
}

/* ---------- Line detail cards ---------- */
.page-products .pp-lines-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.page-products .pp-lines-detail__card {
  padding: 1.5rem 1.35rem;
  border-top: 4px solid var(--ochre);
  background: var(--paper);
}

.page-products .pp-card--start { border-top-color: var(--pp-start); }
.page-products .pp-card--tide { border-top-color: var(--pp-tide); }
.page-products .pp-card--ocean { border-top-color: var(--pp-ocean); }

.page-products .pp-lines-detail__card h3 {
  margin: 0.75rem 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--text-ink);
}

.page-products .pp-lines-detail__card p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--graphite);
}

.page-products .pp-bullets {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.page-products .pp-bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-ink);
}

.page-products .pp-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.page-products .pp-lines-detail__link {
  margin: 0;
  font-size: 0.9rem;
}

.page-products .pp-lines-detail__link a {
  color: var(--tide-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pp-lines-detail__link a:hover,
.page-products .pp-lines-detail__link a:focus-visible {
  color: var(--coral);
}

/* ---------- Figures ---------- */
.page-products .pp-figure {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--pp-line);
  background: var(--paper-shade);
}

.page-products .pp-figure--wide img {
  aspect-ratio: 16 / 9;
}

.page-products .pp-figure--tall img {
  aspect-ratio: 25 / 16;
}

.page-products .pp-figure__cap,
.page-products .pp-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--graphite);
  line-height: 1.6;
}

.page-products .pp-figure--dark figcaption {
  color: rgba(243, 237, 224, 0.66);
}

.page-products .pp-figure--dark img {
  border-color: rgba(87, 175, 174, 0.28);
}

/* ---------- Spec table ---------- */
.page-products .pp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0.9rem;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.page-products .chip span {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(87, 175, 174, 0.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(87, 175, 174, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-products .chip:hover span {
  background: rgba(228, 113, 75, 0.18);
  border-color: var(--coral);
}

.page-products .chip input:checked + span {
  background: var(--tide-deep);
  border-color: var(--tide-deep);
  color: var(--paper);
}

.page-products .chip input:focus-visible + span {
  outline: 2px solid var(--tide);
  outline-offset: 2px;
}

.page-products .pp-table-hint {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(243, 237, 224, 0.62);
  line-height: 1.65;
}

.page-products .pp-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(87, 175, 174, 0.3);
  background: var(--harbor);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--tide-deep) rgba(11, 34, 49, 0.6);
}

.page-products .pp-scroll:focus-visible {
  outline: 2px solid var(--tide);
  outline-offset: 3px;
}

.page-products .pp-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  color: var(--paper);
}

.page-products .pp-table__caption {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(243, 237, 224, 0.6);
  border-bottom: 1px solid rgba(87, 175, 174, 0.24);
}

.page-products .pp-table th,
.page-products .pp-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(87, 175, 174, 0.16);
  white-space: nowrap;
  line-height: 1.5;
}

.page-products .pp-table thead th {
  background: rgba(11, 34, 49, 0.96);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 2;
}

.page-products .pp-table tbody tr:nth-child(odd) {
  background: rgba(243, 237, 224, 0.045);
}

.page-products .pp-table tbody tr:hover {
  background: rgba(228, 113, 75, 0.14);
}

.page-products .pp-table tbody th.pp-col-ver {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--brass);
  font-size: 0.95rem;
}

.page-products .pp-table .pp-col-ver,
.page-products .pp-table .pp-col-line {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--harbor);
}

.page-products .pp-table thead .pp-col-ver,
.page-products .pp-table thead .pp-col-line {
  z-index: 3;
  background: rgba(11, 34, 49, 0.98);
}

.page-products .pp-table .pp-col-line {
  left: 92px;
  min-width: 108px;
  border-right: 1px solid rgba(87, 175, 174, 0.28);
}

.page-products .pp-table tbody tr:nth-child(odd) .pp-col-ver,
.page-products .pp-table tbody tr:nth-child(odd) .pp-col-line {
  background: #10303f;
}

.page-products .pp-table tbody tr:hover .pp-col-ver,
.page-products .pp-table tbody tr:hover .pp-col-line {
  background: #17414f;
}

.page-products .pp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
}

.page-products .pp-dot--start { background: var(--pp-start); }
.page-products .pp-dot--tide { background: var(--pp-tide); }
.page-products .pp-dot--ocean { background: var(--pp-ocean); }

/* pure-CSS product line filter */
.page-products .spec-wrap:has(input.pl-start:checked) .pp-table tbody tr.row-tide,
.page-products .spec-wrap:has(input.pl-start:checked) .pp-table tbody tr.row-ocean,
.page-products .spec-wrap:has(input.pl-tide:checked) .pp-table tbody tr.row-start,
.page-products .spec-wrap:has(input.pl-tide:checked) .pp-table tbody tr.row-ocean,
.page-products .spec-wrap:has(input.pl-ocean:checked) .pp-table tbody tr.row-start,
.page-products .spec-wrap:has(input.pl-ocean:checked) .pp-table tbody tr.row-tide {
  display: none;
}

/* ---------- Version reading ---------- */
.page-products .pp-version__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}

.page-products .pp-version__text .prose {
  margin: 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-ink);
}

.page-products .pp-version__legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pp-line);
}

.page-products .pp-version__legend dt {
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--text-ink);
  letter-spacing: 0.02em;
}

.page-products .pp-version__legend dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--graphite);
}

.page-products .pp-version__figure {
  margin-top: 0;
}

/* ---------- Rights / tiers ---------- */
.page-products .pp-rights__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.page-products .pp-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.page-products .pp-tier {
  position: relative;
  padding: 1.15rem 0 1.15rem 3.4rem;
  border-bottom: 1px solid rgba(87, 175, 174, 0.22);
  transition: background 0.2s ease;
}

.page-products .pp-tier:first-child {
  border-top: 1px solid rgba(87, 175, 174, 0.22);
}

.page-products .pp-tier:hover {
  background: rgba(87, 175, 174, 0.08);
}

.page-products .pp-tier__no {
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 2.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--brass);
}

.page-products .pp-tier__name {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
}

.page-products .pp-tier__unlock {
  margin: 0 0 0.35rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(243, 237, 224, 0.88);
}

.page-products .pp-tier__note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(243, 237, 224, 0.56);
}

.page-products .pp-rights__aside .pp-figure {
  margin-top: 0;
}

.page-products .pp-rights__tip {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(243, 237, 224, 0.78);
}

.page-products .pp-rights__tip a {
  color: var(--tide);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pp-rights__tip a:hover,
.page-products .pp-rights__tip a:focus-visible {
  color: var(--coral);
}

/* ---------- Scenarios ---------- */
.page-products .pp-scene__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products .pp-scene__item {
  position: relative;
  padding: 1.35rem 1.25rem 1.4rem;
  background: var(--paper);
  border-left: 3px solid var(--paper-shade);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-products .pp-scene__item:hover,
.page-products .pp-scene__item:focus-within {
  border-left-color: var(--coral);
  transform: translateY(-2px);
}

.page-products .pp-scene__item h3 {
  margin: 0.7rem 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text-ink);
}

.page-products .pp-scene__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--graphite);
}

.page-products .pp-scene__item a {
  color: var(--tide-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pp-scene__item a:hover,
.page-products .pp-scene__item a:focus-visible {
  color: var(--coral);
}

/* ---------- Access ---------- */
.page-products .pp-access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.page-products .pp-access__card {
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(87, 175, 174, 0.28);
  border-radius: 2px;
}

.page-products .pp-access__card--accent {
  border-color: rgba(228, 113, 75, 0.48);
  background: rgba(228, 113, 75, 0.1);
}

.page-products .pp-access__card h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--paper);
}

.page-products .pp-access__card p {
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(243, 237, 224, 0.82);
}

.page-products .pp-access__card p:last-child {
  margin-bottom: 0;
}

.page-products .pp-access__card a {
  color: var(--tide);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.page-products .pp-access__card a:hover,
.page-products .pp-access__card a:focus-visible {
  color: var(--coral);
}

.page-products .pp-access__figure {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .page-products .pp-version__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

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

  .page-products .pp-version__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  }

  .page-products .pp-rights__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }

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

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

  .page-products .pp-br {
    display: inline;
  }
}

@media (min-width: 1120px) {
  .page-products .pp-table {
    min-width: 1180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-line,
  .page-products .pp-scene__item {
    transition: none;
  }

  .page-products .pp-line:hover,
  .page-products .pp-scene__item:hover {
    transform: none;
  }
}
<<<END>>>

等等，我犯了个错误——输出了多余的 <<<END>>> 标记。让我重新仔细核对一下输出格式。

实际上，看要求，输出应该包含两个标记块： 和 。我不该加 END 标记。让我把多余的删掉。

另外，我还得再检查一下：

1. 图片数量——我有 5 张图片 ✓（hero 里没有图片，这没问题，最小值是 1）

2. 表格筛选器用 `:has()`——这个应该能用。

3. `pp-figure__cap` 类——我定义了它，但用了吗？我到处用的都是 `figcaption`。让我两者都留作样式备用，这没问题。

4. 面包屑——✓

5. 单个 h1——✓

6. 品牌名“澳发平台”出现在 hero 的 lede 里 ✓

7. 链接：/#spec-table ✓，/#access ✓，/#lines……等等，我没有在任何地方链接到 #lines。其实 `id="lines"` 是存在的，但从来没有被链接到。这没问题，没有要求每个 id 都必须被链接到。

实际上，还有一个链接 `href="#lines"` 吗？没有。嗯，是 `href="#spec-table"` 和 `href="#access"`，两个目标都存在。

8. 字号（字号）缩放——没问题。

让我再检查一下表格粘性列的对齐。`.pp-col-ver` 定位在 left: 0，宽度——我需要给它一个宽度。它可以收缩到内容宽度，但 `left: 92px` 用在 `.pp-col-line` 上假设了第一列的宽度是 92px，这可能对不上。这是粘性列的常见问题。

更好的做法：设置固定宽度。

```css
.pp-table .pp-col-ver {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}
.pp-table .pp-col-line {
  left: 92px;
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}
```

我来更新一下。

另外，表头单元格 `th.pp-col-ver`——我把它同时用在 thead 和 tbody 里了（在 tbody 里是行头）。这没问题。

还有，字体上：`tbody th.pp-col-ver` 用大号黄铜色，这没问题。

另外检查一下：`.pp-table .pp-col-line` 里有个 span 圆点——但 `min-width: 108px`，内容“潮汐线”加圆点可能会换行。就把宽度设成 108px 加 nowrap 吧。

我直接给这些列设定明确的宽度，再移除 left: 92px 对内容宽度的依赖。

其实简单点说：

```css
.page-products .pp-table .pp-col-ver {
  width: 96px;
  min-width: 96px;
}

.page-products .pp-table .pp-col-line {
  left: 96px;
  width: 116px;
  min-width: 116px;
}
```

不过粘性列需要不透明背景，这个我已经设了。

但还有个细节：这两个单元格的 `border-collapse: separate; border-spacing: 0`——用 separate 而不是 collapse，粘性定位的表头单元格会出现边框问题，不过能接受。

还有，当行隐藏时（通过筛选），背景只在 `tbody tr:hover` 上设置——没问题。

另外有个问题：`.pp-table tbody tr:nth-child(odd)` 的背景和其他样式，没问题。

还有那个 `row-start`、`row-tide`、`row-ocean` 类——没问题。

现在有个潜在问题：`.pp-table tbody tr:nth-child(odd) .pp-col-ver` 用了一个十六进制颜色 `#10303f`，这个没问题。

还有一个视觉上的问题：在深色 `.pp-table` 背景上，悬停的时候粘性列的背景会变成 `#17414f`，这会跟行悬停的 `rgba(228,113,75,.14)` 撞色，也没关系。

好，我来把带修正的 CSS 定稿。

还有一件事——我检查一下图片格式：
`{zhanqunpic:h:640w:1000}` 的 width=1000 height=640 ✓
`{zhanqunpic:h:900w:1200}` 的 width=1200 height=900 ✓
`{zhanqunpic:h:900w:1600}` 的 width=1600 height=900 ✓
`{zhanqunpic:h:800w:1200}` 的 width=1200 height=800 ✓
`{zhanqunpic:h:800w:1200}` 的 width=1200 height=800 ✓

都好。

现在再检查一下"产品线规格清单"这个关键词的用法——在导语里用了一次再加上 h1，已经足够了。

还要确保我没有违反任何禁止用语。

检查一下："不把规格清单写成口号式的卖点列表"——这是给我的指令，不能出现在正文里。✓

再检查一下首屏里"我们"的用法："我们会按您说的情况给一档建议。" ✓ 在咨询部分。

还有"您"这个称呼，全文都在使用。✓

好，我现在开始输出了。

有一个小问题——在 `.pp-hero__visual` 里我有一个 `<svg>` 配合 `aria-hidden="true"`。但里面有个 `role="presentation"`。没问题。

另外 `pp-figure__cap` 类是定义了但没有实际使用，这没问题（未使用的类不算错误）。

其实也可以把它删掉来减少冗余，不过留着也无害。

现在输出最终版本。

等等——我应该再检查一下 `section-head--ondark` 的作用域问题。`.section-head--ondark` 是一个新类，我需要确保它在我的作用域下定义过。是的，我是在 `.page-products .section-head--ondark` 里定义的。✓

还有 `.section-head--pp`——在作用域内定义过 ✓。

好，输出。

其实再检查一下——`section-head__index` 在深色下的颜色。我把 `.page-products .section-head--ondark .section-head__index` 设成了 `var(--coral)`。不错。

但默认的 `section-head__index` 是什么颜色？这是共享样式，我假设在浅色背景下是赭红。好吧。

现在，`.section-head__title` 的默认是什么？在浅色背景下，大概是墨色。我在深色下覆盖成纸色。可以。

输出。
<main id="main-content" class="page-products">

  <div class="pp-coord shell">
    <span class="coordinate-line">版本 4.7 / 本季初更新 · 三线并排对照</span>
  </div>

  <nav class="breadcrumb shell" aria-label="页面位置">
    <ol class="breadcrumb__list">
      <li><a href="/">首页</a></li>
      <li aria-current="page">产品线规格</li>
    </ol>
  </nav>

  <section class="pp-hero" id="top">
    <div class="shell pp-hero__grid">
      <div class="pp-hero__text">
        <p class="pp-hero__eyebrow">选型的第一件事，是把版本摊开看</p>
        <h1>三条产品线，27 个版本，<br class="pp-br">对着同一张表挑</h1>
        <p class="lede">
          同一张表上，起航线、潮汐线与远洋线的版本逐行排开，每项能力各占一列。澳发平台产品线规格清单把选型时要看的字段全部摊在您面前，您只需要对着自己的工作节奏，找出最合适的那一档。
        </p>
        <div class="pp-hero__actions">
          <a class="btn btn--primary" href="#spec-table">直接看对照表</a>
          <a class="btn btn--ghost" href="#access">索取纸质索引</a>
        </div>
        <dl class="pp-hero__facts">
          <div class="pp-fact">
            <dt>产品线</dt>
            <dd><span class="pp-num">3</span> 条</dd>
          </div>
          <div class="pp-fact">
            <dt>版本条目</dt>
            <dd><span class="pp-num">27</span> 个</dd>
          </div>
          <div class="pp-fact">
            <dt>能力字段</dt>
            <dd><span class="pp-num">12</span> 项</dd>
          </div>
        </dl>
      </div>

      <div class="pp-hero__visual">
        <div class="pp-hero__compass" aria-hidden="true">
          <svg viewBox="0 0 200 200" role="presentation" focusable="false">
            <circle cx="100" cy="100" r="88" fill="none" stroke="#57AFAE" stroke-opacity="0.35" stroke-width="1"/>
            <circle cx="100" cy="100" r="66" fill="none" stroke="#C08B3E" stroke-opacity="0.5" stroke-width="1"/>
            <circle cx="100" cy="100" r="40" fill="none" stroke="#57AFAE" stroke-opacity="0.28" stroke-width="1"/>
            <line x1="100" y1="8" x2="100" y2="192" stroke="#57AFAE" stroke-opacity="0.22" stroke-width="1"/>
            <line x1="8" y1="100" x2="192" y2="100" stroke="#57AFAE" stroke-opacity="0.22" stroke-width="1"/>
            <path d="M100 100 L146 62" stroke="#E4714B" stroke-width="3" stroke-linecap="round"/>
            <path d="M100 100 L64 152" stroke="#C08B3E" stroke-width="2" stroke-linecap="round"/>
            <circle cx="100" cy="100" r="6" fill="#E4714B"/>
          </svg>
        </div>
        <ul class="pp-lines">
          <li class="pp-line pp-line--start">
            <span class="pp-line__no">01</span>
            <h2 class="pp-line__name">起航线</h2>
            <p class="pp-line__for">刚起步的个人与两三人小队</p>
            <p class="pp-line__desc">先把资料归拢成型，版本跨度大、节奏慢，够用又不压手。</p>
          </li>
          <li class="pp-line pp-line--tide">
            <span class="pp-line__no">02</span>
            <h2 class="pp-line__name">潮汐线</h2>
            <p class="pp-line__for">需要稳定迭代节奏的团队</p>
            <p class="pp-line__desc">每季一个小版本，能力字段与导出权限随季度推进，适合长期跟进。</p>
          </li>
          <li class="pp-line pp-line--ocean">
            <span class="pp-line__no">03</span>
            <h2 class="pp-line__name">远洋线</h2>
            <p class="pp-line__for">要专属支持与定制梳理的用户</p>
            <p class="pp-line__desc">半年一个大版本，配一对一方案梳理与专属更新提醒。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section pp-lines-detail" id="lines">
    <div class="shell">
      <header class="section-head section-head--pp">
        <span class="section-head__index">01</span>
        <h2 class="section-head__title">三条产品线，各走一段航程</h2>
        <p class="section-head__note">先认清线与线之间的差别，再决定从哪一档开始。</p>
      </header>

      <div class="pp-lines-detail__grid">
        <article class="plate pp-lines-detail__card pp-card--start">
          <span class="tag">起航线</span>
          <h3>把散落的资料先收成一本</h3>
          <p>如果您是第一次整理跨境业务资料，或者团队只有两三个人，起航线给的是最基本的版本对照和邮件支持。它不追求每季变动，半年一个大版本，学得会、跟得住。</p>
          <ul class="pp-bullets">
            <li>适合从零开始建立资料习惯</li>
            <li>版本跨度大，一次看懂长期变化</li>
            <li>邮件支持覆盖日常查阅问题</li>
          </ul>
          <p class="pp-lines-detail__link"><a href="#spec-table">看起航线的版本行</a></p>
        </article>

        <article class="plate pp-lines-detail__card pp-card--tide">
          <span class="tag">潮汐线</span>
          <h3>让能力的升级跟上业务节奏</h3>
          <p>跨境贸易、货代与跨境电商团队通常按季度做复盘，潮汐线就是为这种节奏准备的。每季一个小版本，能力字段、导出权限与会员权益同步推进，上一季定下的做法不会忽然失效。</p>
          <ul class="pp-bullets">
            <li>每季小版本，改动范围清楚可预期</li>
            <li>能力字段与导出权限同步开放</li>
            <li>与每季初的权益记录配套查阅</li>
          </ul>
          <p class="pp-lines-detail__link"><a href="#spec-table">看潮汐线的版本行</a></p>
        </article>

        <article class="plate pp-lines-detail__card pp-card--ocean">
          <span class="tag">远洋线</span>
          <h3>有人陪您把方案梳理到底</h3>
          <p>制造业外贸部门要把资料沉淀成册，留学与文旅服务从业者要向客户解释流程，这类需求往往一次讲不清。远洋线提供一对一方案梳理、专属更新提醒和更宽的历史版本查阅范围。</p>
          <ul class="pp-bullets">
            <li>一对一方案梳理，按您的业务落点</li>
            <li>专属更新提醒，版本变化第一时间知道</li>
            <li>历史版本查阅范围更宽，便于追溯</li>
          </ul>
          <p class="pp-lines-detail__link"><a href="#spec-table">看远洋线的版本行</a></p>
        </article>
      </div>

      <figure class="pp-figure pp-figure--wide">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="三叠不同色边的编号资料册并排摆放，色调克制，无商标与可辨文字" loading="lazy" decoding="async">
        <figcaption>三条产品线各有一册编号资料，色边用于区分归属，册内条目按版本顺序排列。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--dark pp-spec" id="spec-table">
    <div class="shell">
      <header class="section-head section-head--pp section-head--ondark">
        <span class="section-head__index">02</span>
        <h2 class="section-head__title">横向对照表：一行一个版本</h2>
        <p class="section-head__note">左右拖动查看全部 12 项字段；版本号与产品线两列固定在最左侧。</p>
      </header>

      <figure class="pp-figure pp-figure--wide pp-figure--dark">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="纸质表格局部的微距俯拍，行列线清晰，格内文字被虚化处理" loading="lazy" decoding="async">
        <figcaption>纸质清单与线上对照表结构一致，字段顺序逐项对应。</figcaption>
      </figure>

      <div class="spec-wrap" data-reveal>
        <div class="pp-filters" role="group" aria-label="按产品线筛选版本行">
          <label class="chip">
            <input type="radio" name="pp-line-filter" class="pl-all" checked>
            <span>全部产品线</span>
          </label>
          <label class="chip">
            <input type="radio" name="pp-line-filter" class="pl-start">
            <span>起航线</span>
          </label>
          <label class="chip">
            <input type="radio" name="pp-line-filter" class="pl-tide">
            <span>潮汐线</span>
          </label>
          <label class="chip">
            <input type="radio" name="pp-line-filter" class="pl-ocean">
            <span>远洋线</span>
          </label>
        </div>

        <p class="pp-table-hint">表格可在框内左右滑动，也可用键盘方向键滚动。下面列出部分版本条目，完整 27 条请见纸质索引。</p>

        <div class="pp-scroll" tabindex="0" role="region" aria-label="产品线版本对照表，可横向滚动">
          <table class="pp-table">
            <caption class="pp-table__caption">澳发平台三条产品线的版本对照，一行一个版本，一列一项能力字段。</caption>
            <thead>
              <tr>
                <th scope="col" class="pp-col-ver">版本</th>
                <th scope="col" class="pp-col-line">产品线</th>
                <th scope="col">上线时间</th>
                <th scope="col">适用人群</th>
                <th scope="col">核心能力</th>
                <th scope="col">数据导出</th>
                <th scope="col">更新节奏</th>
                <th scope="col">支持方式</th>
                <th scope="col">历史查阅</th>
                <th scope="col">纸质索引</th>
                <th scope="col">更新提醒</th>
                <th scope="col">协作席位</th>
              </tr>
            </thead>
            <tbody>
              <tr class="row-tide">
                <th scope="row" class="pp-col-ver">4.7</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--tide"></span>潮汐线</td>
                <td>当季初</td>
                <td>需要稳定迭代的团队</td>
                <td>全字段对照与筛选</td>
                <td>字段级导出</td>
                <td>每季小版本</td>
                <td>邮件与热线</td>
                <td>12 期</td>
                <td>当季寄送</td>
                <td>开启</td>
                <td>5 人</td>
              </tr>
              <tr class="row-tide">
                <th scope="row" class="pp-col-ver">4.6</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--tide"></span>潮汐线</td>
                <td>上一季</td>
                <td>跨境贸易与货代团队</td>
                <td>能力字段筛选</td>
                <td>字段级导出</td>
                <td>每季小版本</td>
                <td>邮件支持</td>
                <td>11 期</td>
                <td>上一季</td>
                <td>开启</td>
                <td>5 人</td>
              </tr>
              <tr class="row-tide">
                <th scope="row" class="pp-col-ver">4.5</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--tide"></span>潮汐线</td>
                <td>两季前</td>
                <td>按季度复盘的部门</td>
                <td>能力字段筛选</td>
                <td>整表导出</td>
                <td>每季小版本</td>
                <td>邮件支持</td>
                <td>10 期</td>
                <td>按需补寄</td>
                <td>开启</td>
                <td>3 人</td>
              </tr>
              <tr class="row-tide">
                <th scope="row" class="pp-col-ver">4.3</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--tide"></span>潮汐线</td>
                <td>四个季度前</td>
                <td>跨境电商运营团队</td>
                <td>基础字段对照</td>
                <td>整表导出</td>
                <td>每季小版本</td>
                <td>邮件支持</td>
                <td>8 期</td>
                <td>按需补寄</td>
                <td>开启</td>
                <td>3 人</td>
              </tr>
              <tr class="row-tide">
                <th scope="row" class="pp-col-ver">4.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--tide"></span>潮汐线</td>
                <td>三个季度前</td>
                <td>刚转入长期跟踪的团队</td>
                <td>基础字段对照</td>
                <td>不支持</td>
                <td>每季小版本</td>
                <td>邮件支持</td>
                <td>6 期</td>
                <td>按需补寄</td>
                <td>关闭</td>
                <td>1 人</td>
              </tr>
              <tr class="row-ocean">
                <th scope="row" class="pp-col-ver">4.7</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--ocean"></span>远洋线</td>
                <td>当季初</td>
                <td>需要专属支持的部门</td>
                <td>全字段对照与定制梳理</td>
                <td>字段级导出</td>
                <td>每半年大版本</td>
                <td>一线对接人</td>
                <td>12 期</td>
                <td>当季寄送</td>
                <td>专属提醒</td>
                <td>20 人</td>
              </tr>
              <tr class="row-ocean">
                <th scope="row" class="pp-col-ver">4.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--ocean"></span>远洋线</td>
                <td>去年下半段</td>
                <td>制造业外贸部门</td>
                <td>全字段对照</td>
                <td>字段级导出</td>
                <td>每半年大版本</td>
                <td>一线对接人</td>
                <td>10 期</td>
                <td>按季寄送</td>
                <td>专属提醒</td>
                <td>20 人</td>
              </tr>
              <tr class="row-ocean">
                <th scope="row" class="pp-col-ver">3.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--ocean"></span>远洋线</td>
                <td>去年上半段</td>
                <td>要长期沉淀资料的团队</td>
                <td>多版本并排对照</td>
                <td>整表导出</td>
                <td>每半年大版本</td>
                <td>专属邮件通道</td>
                <td>8 期</td>
                <td>按季寄送</td>
                <td>专属提醒</td>
                <td>10 人</td>
              </tr>
              <tr class="row-start">
                <th scope="row" class="pp-col-ver">4.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--start"></span>起航线</td>
                <td>去年下半段</td>
                <td>刚开始整理资料的个人</td>
                <td>版本基础对照</td>
                <td>不支持</td>
                <td>每半年大版本</td>
                <td>邮件支持</td>
                <td>6 期</td>
                <td>按需补寄</td>
                <td>关闭</td>
                <td>1 人</td>
              </tr>
              <tr class="row-start">
                <th scope="row" class="pp-col-ver">3.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--start"></span>起航线</td>
                <td>去年上半段</td>
                <td>两三人小队</td>
                <td>版本基础对照</td>
                <td>不支持</td>
                <td>每半年大版本</td>
                <td>邮件支持</td>
                <td>4 期</td>
                <td>按需补寄</td>
                <td>关闭</td>
                <td>1 人</td>
              </tr>
              <tr class="row-start">
                <th scope="row" class="pp-col-ver">2.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--start"></span>起航线</td>
                <td>前一年下半段</td>
                <td>留学与文旅服务从业者</td>
                <td>条目浏览</td>
                <td>不支持</td>
                <td>每半年大版本</td>
                <td>邮件支持</td>
                <td>2 期</td>
                <td>不支持</td>
                <td>关闭</td>
                <td>1 人</td>
              </tr>
              <tr class="row-start">
                <th scope="row" class="pp-col-ver">1.0</th>
                <td class="pp-col-line"><span class="pp-dot pp-dot--start"></span>起航线</td>
                <td>前一年上半段</td>
                <td>第一次接触平台的访客</td>
                <td>条目浏览</td>
                <td>不支持</td>
                <td>每半年大版本</td>
                <td>邮件支持</td>
                <td>1 期</td>
                <td>不支持</td>
                <td>关闭</td>
                <td>1 人</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <section class="section pp-version" id="version-rule">
    <div class="shell pp-version__grid">
      <div class="pp-version__text">
        <header class="section-head section-head--pp">
          <span class="section-head__index">03</span>
          <h2 class="section-head__title">版本号怎么读</h2>
        </header>
        <p class="prose">
          每个版本号都由“代次.序号”两段组成：点号前面是代次，代表能力结构大改过一次；点号后面是序号，代表这一代里第几次小步推进。看到 4.7，读作第四代第七个小版本，也就是目前最新的一档。
        </p>
        <p class="prose">
          三条产品线的推进节奏不同。潮汐线每季发布一个小版本，序号持续往上走；起航线与远洋线每半年发布一个大版本，代次会在半年节点上抬一格。这意味着您如果选了潮汐线，一年里会经历四次能力字段与导出权限的更新；选了起航线或远洋线，节奏则是半年一次、改动范围更大。
        </p>
        <dl class="pp-version__legend">
          <div>
            <dt><span class="pp-num">4</span> 代次</dt>
            <dd>能力结构的大版本，起航线与远洋线每半年推进一次。</dd>
          </div>
          <div>
            <dt><span class="pp-num">7</span> 序号</dt>
            <dd>同一代内的小步推进，潮汐线每季前进一个数字。</dd>
          </div>
        </dl>
      </div>

      <figure class="pp-figure pp-figure--tall pp-version__figure">
        <img src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="旧式仪表刻度盘与指针的特写，金属表面留有使用痕迹" loading="lazy" decoding="async">
        <figcaption>读数式编号：既看得出走到第几代，也看得出这一代里走了多远。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--harbor pp-rights" id="rights">
    <div class="shell">
      <header class="section-head section-head--pp section-head--ondark">
        <span class="section-head__index">04</span>
        <h2 class="section-head__title">权益等级与版本怎么配合</h2>
        <p class="section-head__note">会员权益记录固定在导航的第二栏，每季初更新一次。选版本时，把这一页与权益记录对着看，就知道自己这一档能用到哪一步。</p>
      </header>

      <div class="pp-rights__grid">
        <ol class="pp-tiers">
          <li class="pp-tier">
            <span class="pp-tier__no">I</span>
            <h3 class="pp-tier__name">潮线级</h3>
            <p class="pp-tier__unlock">解锁：起航线与潮汐线的基础版本行，以及全部帮助文档与季度记录。</p>
            <p class="pp-tier__note">适合刚开始了解平台、先看后定的访客。</p>
          </li>
          <li class="pp-tier">
            <span class="pp-tier__no">II</span>
            <h3 class="pp-tier__name">航标级</h3>
            <p class="pp-tier__unlock">解锁：规格清单的多版本对照，以及按字段导出的权限。</p>
            <p class="pp-tier__note">适合要把版本差异整理成内部说明的团队。</p>
          </li>
          <li class="pp-tier">
            <span class="pp-tier__no">III</span>
            <h3 class="pp-tier__name">罗盘级</h3>
            <p class="pp-tier__unlock">解锁：当季案例合集的纸质索引寄送，与更宽的历史版本查阅范围。</p>
            <p class="pp-tier__note">适合需要拿实例向同事或客户说明的场景。</p>
          </li>
          <li class="pp-tier">
            <span class="pp-tier__no">IV</span>
            <h3 class="pp-tier__name">灯塔级</h3>
            <p class="pp-tier__unlock">解锁：一对一方案梳理，以及版本更新的专属提醒。</p>
            <p class="pp-tier__note">适合长期用远洋线、需要有人跟着走的部门。</p>
          </li>
        </ol>

        <div class="pp-rights__aside">
          <figure class="pp-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上的打印纸、索引标签与文件夹，光线偏冷，纸面文字不可辨读" loading="lazy" decoding="async">
            <figcaption>导出后的字段可以打印归档，与纸质索引并排保存。</figcaption>
          </figure>
          <p class="pp-rights__tip">
            不确定该从哪一级开始？先看<a href="/introduction/">关于澳发</a>里的权益记录，再回到这张表比对版本行。想看别人怎么用，也可以翻一翻<a href="/articles/">案例合集</a>。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section pp-scene" id="scenarios">
    <div class="shell">
      <header class="section-head section-head--pp">
        <span class="section-head__index">05</span>
        <h2 class="section-head__title">从您的场景起步</h2>
        <p class="section-head__note">每条线上都有对应的起始版本，下面是几种常见情况。</p>
      </header>

      <ul class="pp-scene__list">
        <li class="pp-scene__item">
          <span class="tag tag--season">跨境贸易</span>
          <h3>先对齐版本，再谈长期跟单</h3>
          <p>团队每季要做复盘，最怕的是做法定下来又变了。建议从潮汐线 4.6 起步，一个季度摸熟一套字段，下一季跟着小版本往上走。</p>
        </li>
        <li class="pp-scene__item">
          <span class="tag">物流货代</span>
          <h3>把流程讲清楚比讲得多更重要</h3>
          <p>您需要向客户解释每一步怎么走。潮汐线 4.5 的整表导出，配上<a href="/help-center/">帮助中心</a>里的流程条目，就够撑起一份客户说明。</p>
        </li>
        <li class="pp-scene__item">
          <span class="tag">制造业外贸</span>
          <h3>资料要沉淀成册，不能只存在窗口里</h3>
          <p>部门要留档，远洋线 4.0 的字段级导出与按季寄送更合适，梳理过程也有人跟着走。</p>
        </li>
        <li class="pp-scene__item">
          <span class="tag">留学服务</span>
          <h3>起步阶段，先用最轻的一档</h3>
          <p>第一次系统化整理资料，从起航线 4.0 开始，把条目结构摸熟之后再决定要不要转到潮汐线。</p>
        </li>
        <li class="pp-scene__item">
          <span class="tag">文旅服务</span>
          <h3>按季更新的内容最贴近您的节奏</h3>
          <p>文旅的季节性强，潮汐线每季一个小版本，刚好跟得上您换季调整的步调。</p>
        </li>
        <li class="pp-scene__item">
          <span class="tag">跨境电商</span>
          <h3>对照表先行，能力字段跟上</h3>
          <p>从潮汐线 4.3 起看基础字段对照，等业务跑顺了再开导出权限，成本可控。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--dark pp-access" id="access">
    <div class="shell">
      <header class="section-head section-head--pp section-head--ondark">
        <span class="section-head__index">06</span>
        <h2 class="section-head__title">拿到完整清单与纸质索引</h2>
      </header>

      <div class="pp-access__grid">
        <article class="glass pp-access__card">
          <h3>在线查阅</h3>
          <p>对照表就在本页，左右拖动即可看到 12 项字段的全貌。想按版本区间细看某一段，或不确定自己该从哪一档起步，可以先翻<a href="/help-center/">帮助中心</a>的文档，再从入门分类回到这里选版本。</p>
          <p>如果您已经有明确的合作方向，也可以直接到<a href="/consult/">咨询服务</a>留言，我们会按您说的情况给一档建议。</p>
        </article>

        <article class="glass pp-access__card pp-access__card--accent">
          <h3>索取纸质索引</h3>
          <p>每季寄出约 600 份纸质索引，覆盖 28 个省级行政区。索引册里把 27 个版本条目与 12 项字段完整排开，适合开会时摊在桌上逐条过。</p>
          <p>发邮件到 <a href="mailto:support@aofa-journey.com.cn">support@aofa-journey.com.cn</a>，标题注明“澳发资料申请”，正文简单说一句用途与收件信息即可。工作日内 9:00-18:00 回复。热线 400-5826-6778。</p>
        </article>
      </div>

      <figure class="pp-figure pp-figure--wide pp-access__figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="装订好的索引册被翻到中部，页面边缘微微卷起，纸面文字不可辨读" loading="lazy" decoding="async">
        <figcaption>索引册按版本顺序装订，翻到哪一页就知道自己看到了第几档。</figcaption>
      </figure>
    </div>
  </section>

</main>

.page-products {
  --pp-start: var(--ochre);
  --pp-tide: var(--tide);
  --pp-ocean: var(--brass);
  --pp-line: var(--paper-line);
}

.page-products .pp-coord {
  padding-top: clamp(1.2rem, 3vw, 2rem);
}

.page-products .pp-num {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}

/* ---------- Hero ---------- */
.page-products .pp-hero {
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.page-products .pp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.page-products .pp-hero__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--tide-deep);
}

.page-products .pp-hero h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}

.page-products .pp-br {
  display: none;
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-products .pp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pp-line);
}

.page-products .pp-fact {
  margin: 0;
}

.page-products .pp-fact dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--graphite);
  margin-bottom: 0.35rem;
}

.page-products .pp-fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--text-ink);
}

.page-products .pp-fact dd .pp-num {
  font-size: 1.6rem;
  color: var(--ochre);
}

.page-products .pp-hero__visual {
  position: relative;
  padding-top: 0.5rem;
}

.page-products .pp-hero__compass {
  position: absolute;
  top: -1.5rem;
  right: -0.5rem;
  width: clamp(120px, 30vw, 200px);
  opacity: 0.55;
  pointer-events: none;
}

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

.page-products .pp-lines {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-products .pp-line {
  position: relative;
  padding: 1.1rem 1.25rem 1.15rem 1.9rem;
  background: var(--paper);
  border-left: 4px solid var(--pp-line-accent, var(--ochre));
  box-shadow: 0 1px 0 var(--paper-shade);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-products .pp-line:hover,
.page-products .pp-line:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 34, 49, 0.16);
}

.page-products .pp-line--start { --pp-line-accent: var(--pp-start); }
.page-products .pp-line--tide { --pp-line-accent: var(--pp-tide); }
.page-products .pp-line--ocean { --pp-line-accent: var(--pp-ocean); }

.page-products .pp-line__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--graphite);
  margin-bottom: 0.35rem;
}

.page-products .pp-line__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text-ink);
  letter-spacing: 0.01em;
}

.page-products .pp-line__for {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.86rem;
  color: var(--tide-deep);
  letter-spacing: 0.02em;
}

.page-products .pp-line__desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--graphite);
}

/* ---------- Section head ---------- */
.page-products .section-head--pp {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pp-line);
}

.page-products .section-head--ondark {
  border-bottom-color: rgba(87, 175, 174, 0.28);
}

.page-products .section-head--ondark .section-head__title {
  color: var(--paper);
}

.page-products .section-head--ondark .section-head__index {
  color: var(--coral);
}

/* ---------- Line detail ---------- */
.page-products .pp-lines-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.page-products .pp-lines-detail__card {
  padding: 1.5rem 1.35rem;
  border-top: 4px solid var(--ochre);
  background: var(--paper);
}

.page-products .pp-card--start { border-top-color: var(--pp-start); }
.page-products .pp-card--tide { border-top-color: var(--pp-tide); }
.page-products .pp-card--ocean { border-top-color: var(--pp-ocean); }

.page-products .pp-lines-detail__card h3 {
  margin: 0.75rem 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--text-ink);
}

.page-products .pp-lines-detail__card p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--graphite);
}

.page-products .pp-bullets {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.page-products .pp-bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-ink);
}

.page-products .pp-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.page-products .pp-lines-detail__link {
  margin: 0;
  font-size: 0.9rem;
}

.page-products .pp-lines-detail__link a,
.page-products .pp-scene__item a {
  color: var(--tide-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pp-lines-detail__link a:hover,
.page-products .pp-lines-detail__link a:focus-visible,
.page-products .pp-scene__item a:hover,
.page-products .pp-scene__item a:focus-visible {
  color: var(--coral);
}

/* ---------- Figures ---------- */
.page-products .pp-figure {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}

.page-products .pp-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--pp-line);
  background: var(--paper-shade);
}

.page-products .pp-figure--wide img { aspect-ratio: 16 / 9; }
.page-products .pp-figure--tall img { aspect-ratio: 25 / 16; }

.page-products .pp-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--graphite);
  line-height: 1.6;
}

.page-products .pp-figure--dark figcaption {
  color: rgba(243, 237, 224, 0.66);
}

.page-products .pp-figure--dark img {
  border-color: rgba(87, 175, 174, 0.28);
}

/* ---------- Spec table ---------- */
.page-products .pp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0.9rem;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.page-products .chip span {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(87, 175, 174, 0.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(87, 175, 174, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-products .chip:hover span {
  background: rgba(228, 113, 75, 0.18);
  border-color: var(--coral);
}

.page-products .chip input:checked + span {
  background: var(--tide-deep);
  border-color: var(--tide-deep);
  color: var(--paper);
}

.page-products .chip input:focus-visible + span {
  outline: 2px solid var(--tide);
  outline-offset: 2px;
}

.page-products .pp-table-hint {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(243, 237, 224, 0.62);
  line-height: 1.65;
}

.page-products .pp-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(87, 175, 174, 0.3);
  background: var(--harbor);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--tide-deep) rgba(11, 34, 49, 0.6);
}

.page-products .pp-scroll:focus-visible {
  outline: 2px solid var(--tide);
  outline-offset: 3px;
}

.page-products .pp-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  color: var(--paper);
}

.page-products .pp-table__caption {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(243, 237, 224, 0.6);
  border-bottom: 1px solid rgba(87, 175, 174, 0.24);
}

.page-products .pp-table th,
.page-products .pp-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(87, 175, 174, 0.16);
  white-space: nowrap;
  line-height: 1.5;
}

.page-products .pp-table thead th {
  background: rgba(11, 34, 49, 0.96);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 2;
}

.page-products .pp-table tbody tr:nth-child(odd) {
  background: rgba(243, 237, 224, 0.045);
}

.page-products .pp-table tbody tr:hover {
  background: rgba(228, 113, 75, 0.14);
}

.page-products .pp-table tbody th.pp-col-ver {
  font-weight: 600;
  font-size: 0.95rem;
}

.page-products .pp-table .pp-col-ver,
.page-products .pp-table .pp-col-line {
  position: sticky;
  z-index: 1;
  background: var(--harbor);
}

.page-products .pp-table .pp-col-ver {
  left: 0;
  width: 96px;
  min-width: 96px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--brass);
}

.page-products .pp-table .pp-col-line {
  left: 96px;
  width: 120px;
  min-width: 120px;
  border-right: 1px solid rgba(87, 175, 174, 0.28);
}

.page-products .pp-table thead .pp-col-ver,
.page-products .pp-table thead .pp-col-line {
  z-index: 3;
  background: rgba(11, 34, 49, 0.98);
  color: var(--paper);
}

.page-products .pp-table tbody tr:nth-child(odd) .pp-col-ver,
.page-products .pp-table tbody tr:nth-child(odd) .pp-col-line {
  background: #10303f;
}

.page-products .pp-table tbody tr:hover .pp-col-ver,
.page-products .pp-table tbody tr:hover .pp-col-line {
  background: #17414f;
}

.page-products .pp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
}

.page-products .pp-dot--start { background: var(--pp-start); }
.page-products .pp-dot--tide { background: var(--pp-tide); }
.page-products .pp-dot--ocean { background: var(--pp-ocean); }

.page-products .spec-wrap:has(input.pl-start:checked) .pp-table tbody tr.row-tide,
.page-products .spec-wrap:has(input.pl-start:checked) .pp-table tbody tr.row-ocean,
.page-products .spec-wrap:has(input.pl-tide:checked) .pp-table tbody tr.row-start,
.page-products .spec-wrap:has(input.pl-tide:checked) .pp-table tbody tr.row-ocean,
.page-products .spec-wrap:has(input.pl-ocean:checked) .pp-table tbody tr.row-start,
.page-products .spec-wrap:has(input.pl-ocean:checked) .pp-table tbody tr.row-tide {
  display: none;
}

/* ---------- Version reading ---------- */
.page-products .pp-version__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}

.page-products .pp-version__text .prose {
  margin: 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-ink);
}

.page-products .pp-version__legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pp-line);
}

.page-products .pp-version__legend dt {
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--text-ink);
  letter-spacing: 0.02em;
}

.page-products .pp-version__legend dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--graphite);
}

.page-products .pp-version__figure {
  margin-top: 0;
}

/* ---------- Tiers ---------- */
.page-products .pp-rights__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.page-products .pp-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .pp-tier {
  position: relative;
  padding: 1.15rem 0 1.15rem 3.4rem;
  border-bottom: 1px solid rgba(87, 175, 174, 0.22);
  transition: background 0.2s ease;
}

.page-products .pp-tier:first-child {
  border-top: 1px solid rgba(87, 175, 174, 0.22);
}

.page-products .pp-tier:hover {
  background: rgba(87, 175, 174, 0.08);
}

.page-products .pp-tier__no {
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 2.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--brass);
}

.page-products .pp-tier__name {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
}

.page-products .pp-tier__unlock {
  margin: 0 0 0.35rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(243, 237, 224, 0.88);
}

.page-products .pp-tier__note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(243, 237, 224, 0.56);
}

.page-products .pp-rights__aside .pp-figure {
  margin-top: 0;
}

.page-products .pp-rights__tip {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(243, 237, 224, 0.78);
}

.page-products .pp-rights__tip a {
  color: var(--tide);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pp-rights__tip a:hover,
.page-products .pp-rights__tip a:focus-visible {
  color: var(--coral);
}

/* ---------- Scenarios ---------- */
.page-products .pp-scene__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products .pp-scene__item {
  position: relative;
  padding: 1.35rem 1.25rem 1.4rem;
  background: var(--paper);
  border-left: 3px solid var(--paper-shade);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-products .pp-scene__item:hover,
.page-products .pp-scene__item:focus-within {
  border-left-color: var(--coral);
  transform: translateY(-2px);
}

.page-products .pp-scene__item h3 {
  margin: 0.7rem 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text-ink);
}

.page-products .pp-scene__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--graphite);
}

/* ---------- Access ---------- */
.page-products .pp-access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.page-products .pp-access__card {
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(87, 175, 174, 0.28);
  border-radius: 2px;
}

.page-products .pp-access__card--accent {
  border-color: rgba(228, 113, 75, 0.48);
  background: rgba(228, 113, 75, 0.1);
}

.page-products .pp-access__card h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--paper);
}

.page-products .pp-access__card p {
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(243, 237, 224, 0.82);
}

.page-products .pp-access__card p:last-child {
  margin-bottom: 0;
}

.page-products .pp-access__card a {
  color: var(--tide);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.page-products .pp-access__card a:hover,
.page-products .pp-access__card a:focus-visible {
  color: var(--coral);
}

.page-products .pp-access__figure {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .page-products .pp-version__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

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

  .page-products .pp-version__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  }

  .page-products .pp-rights__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }

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

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

  .page-products .pp-br {
    display: inline;
  }
}

@media (min-width: 1120px) {
  .page-products .pp-table {
    min-width: 1180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-line,
  .page-products .pp-scene__item {
    transition: none;
  }

  .page-products .pp-line:hover,
  .page-products .pp-scene__item:hover {
    transform: none;
  }
}