.page-products {
  --pg-rule: rgba(10, 27, 61, 0.13);
  --pg-rule-strong: rgba(10, 27, 61, 0.26);
  --pg-ink-soft: #43506B;
  --pg-gold-line: rgba(232, 180, 74, 0.45);
}

.page-products .breadcrumbs {
  padding: 18px 0 4px;
  font-size: 14px;
  color: var(--pg-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-products .breadcrumbs__sep {
  opacity: 0.5;
}

/* ---------- 首屏 ---------- */
.page-products .pg-hero {
  padding-top: 10px;
  padding-bottom: 8px;
}

.page-products .hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .pg-hero__lead {
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .pg-hero__lead h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.page-products .pg-hero__lead .lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  max-width: 34em;
}

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

.page-products .pg-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(251, 247, 239, 0.22);
}

.page-products .pg-hero__facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-products .pg-hero__facts dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.page-products .pg-hero__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1.1;
  color: var(--gold);
}

.page-products .pg-hero__aside {
  padding: 26px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--pg-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-products .pg-aside__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--pg-ink-soft);
}

.page-products .pg-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .pg-aside__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--mist);
  color: var(--navy-900);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  transition: background 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.page-products .pg-aside__list a:hover,
.page-products .pg-aside__list a:focus-visible {
  background: var(--gold-pale);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--pg-gold-line);
}

.page-products .pg-aside__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--navy-600);
  flex: none;
}

.page-products .pg-aside__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pg-ink-soft);
}

/* ---------- 通用分栏 ---------- */
.page-products .pg-sticky {
  align-self: start;
}

.page-products .pg-sticky h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.24;
  margin: 8px 0 12px;
}

.page-products .pg-mini-index {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .pg-mini-index .index-rail__link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--navy-800);
  font-size: 14px;
  text-decoration: none;
}

.page-products .pg-mini-index .index-rail__link:hover {
  background: var(--gold-pale);
}

/* ---------- 八个栏目 ---------- */
.page-products .pg-columns-section {
  padding-top: 48px;
}

.page-products .pg-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pg-columns__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: start;
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.page-products .pg-columns__item:hover {
  border-color: var(--pg-gold-line);
  transform: translateY(-2px);
}

.page-products .pg-columns__item .card__index {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--navy-600);
  padding-top: 4px;
}

.page-products .pg-columns__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy-900);
}

.page-products .pg-columns__scene {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-columns__go {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  font-size: 14px;
}

/* ---------- 资料库 ---------- */
.page-products .pg-library__head {
  max-width: 46em;
}

.page-products .pg-library__head h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.22;
  margin: 10px 0 12px;
}

.page-products .pg-library__body {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-products .pg-library__figure {
  margin: 0;
}

.page-products .pg-library__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-library__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .figure__caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--pg-ink-soft);
}

.page-products .pg-library__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-products .pg-zone {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border-left: 3px solid var(--gold);
}

.page-products .pg-zone__meta {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--wine);
}

.page-products .pg-zone__name {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-zone__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

/* ---------- 工具 ---------- */
.page-products .pg-tools h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .pg-chipbar .chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pg-rule-strong);
  background: transparent;
  color: var(--navy-800);
  font-size: 14px;
  text-decoration: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}

.page-products .pg-chipbar .chip:hover,
.page-products .pg-chipbar .chip:focus-visible {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--paper);
}

.page-products .pg-tools__hint {
  margin-top: 14px;
  color: var(--pg-ink-soft);
}

.page-products .pg-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-products .pg-band {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: grid;
  gap: 10px;
  scroll-margin-top: 120px;
}

.page-products .pg-band__title {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--paper);
}

.page-products .pg-band__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 247, 239, 0.82);
}

.page-products .pg-toolgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.page-products .pg-tool {
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.page-products .pg-tool:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--pg-gold-line);
}

.page-products .pg-tool__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--mist);
  color: var(--navy-600);
}

.page-products .pg-tool__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.page-products .pg-tool .card__title {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-tool .card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-tool__time {
  margin: auto 0 0;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wine);
  border-top: 1px solid var(--pg-rule);
}

.page-products .pg-toolgrid--with-figure {
  align-items: start;
}

.page-products .pg-tool__figure {
  margin: 0;
}

.page-products .pg-tool__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  transform: rotate(-1.4deg);
  box-shadow: 10px 14px 0 rgba(20, 48, 107, 0.08);
  transition: transform 220ms var(--ease);
}

.page-products .pg-tool__figure:hover .figure__frame {
  transform: rotate(0deg);
}

.page-products .pg-tool__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 终端差异 ---------- */
.page-products .pg-devices .section__head {
  max-width: 48em;
}

.page-products .pg-devices h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-devices__body {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .pg-devices__col {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-devices__col--desk {
  border-top: 3px solid var(--gold);
}

.page-products .pg-devices__col--mobile {
  border-top: 3px solid var(--wine);
}

.page-products .pg-devices__name {
  margin: 12px 0 12px;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-devices__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-devices__list li::marker {
  color: var(--navy-600);
}

.page-products .pg-devices__figure {
  margin: 0;
}

.page-products .pg-devices__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-devices__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 场景对照表 ---------- */
.page-products .pg-scene h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-tablewrap {
  margin-top: 26px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .pg-table__caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--pg-ink-soft);
}

.page-products .pg-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--navy-800);
  white-space: nowrap;
}

.page-products .pg-table__th-action {
  display: inline-block;
}

.page-products .pg-table tbody tr.pg-table__row:nth-of-type(4n + 1) {
  background: var(--mist);
}

.page-products .pg-table td {
  padding: 14px 18px;
  vertical-align: middle;
  line-height: 1.65;
  color: var(--pg-ink-soft);
  border-bottom: 1px solid var(--pg-rule);
}

.page-products .pg-table td:first-child {
  color: var(--navy-900);
  font-weight: 500;
  width: 44%;
}

.page-products .pg-table__panel td {
  background: var(--paper);
  padding: 4px 18px 18px;
  border-bottom: 1px solid var(--pg-rule);
}

.page-products .pg-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-steps li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

.page-products .pg-table .btn--sm {
  white-space: nowrap;
}

/* ---------- 四步流程 ---------- */
.page-products .pg-flow h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-flow__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-products .pg-flow__body .figure {
  margin: 0;
}

.page-products .pg-flow__body .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-flow__body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .pg-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pg-flow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  background: var(--mist);
}

.page-products .pg-flow__num {
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  padding-top: 2px;
}

.page-products .pg-flow__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-flow__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

/* ---------- 当季更新 ---------- */
.page-products .pg-updates {
  border-radius: var(--radius-xl);
  margin-top: 12px;
}

.page-products .pg-updates__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-products .pg-updates h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.25;
  margin: 10px 0 12px;
  color: var(--paper);
}

.page-products .pg-updates__lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(251, 247, 239, 0.86);
  max-width: 40em;
}

.page-products .pg-updates__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pg-updates__actions .btn {
  align-self: flex-start;
}

.page-products .pg-updates__note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 247, 239, 0.74);
}

.page-products .pg-updates__link {
  color: var(--gold-pale);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pg-hero__lead h1 {
    font-size: 48px;
  }

  .page-products .pg-library__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pg-toolgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .page-products .pg-hero__lead {
    padding: 40px 36px;
  }

  .page-products .pg-hero__aside {
    padding: 32px 30px;
  }

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

  .page-products .pg-devices__body {
    grid-template-columns: 1fr;
  }

  .page-products .pg-flow__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pg-updates__inner {
    grid-template-columns: 1.4fr 1fr;
  }
}

@media (min-width: 1024px) {
  .page-products .hero-split {
    grid-template-columns: 5fr 7fr;
    gap: 24px;
  }

  .page-products .pg-hero__lead h1 {
    font-size: 62px;
  }

  .page-products .pg-library__body {
    grid-template-columns: 5fr 7fr;
    gap: 32px;
  }

  .page-products .pg-library__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .page-products .pg-toolgrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pg-toolgrid--with-figure {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pg-tool__figure {
    grid-column: 1 / -1;
    max-width: 420px;
  }

  .page-products .pg-band {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }

  .page-products .pg-devices__body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desk mobile"
      "figure figure";
  }

  .page-products .pg-devices__col--desk {
    grid-area: desk;
  }

  .page-products .pg-devices__col--mobile {
    grid-area: mobile;
  }

  .page-products .pg-devices__figure {
    grid-area: figure;
  }
}

@media (min-width: 1280px) {
  .page-products .pg-hero__lead h1 {
    font-size: 70px;
  }

  .page-products .pg-columns__item {
    padding: 24px 22px;
  }

  .page-products .pg-flow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pg-aside__list a,
  .page-products .pg-columns__item,
  .page-products .pg-tool,
  .page-products .pg-tool__figure .figure__frame,
  .page-products .pg-chipbar .chip {
    transition: none;
  }

  .page-products .pg-tool__figure .figure__frame {
    transform: none;
  }
}


等等——我输出的标记错了。我把标记的顺序完全搞乱了。得重新整理一遍。

我的输出应该是什么样子：

```

...main...

...css...
```

我误加了一些零散的内容。现在重新规规矩矩地输出，注意在 CSS 里保留 `-webkit-text-stroke` 这部分，因为需要金色描边，所以得用 `color: transparent`。

注意：`.pg-flow__num` 使用 `color: transparent` 再搭配 `-webkit-text-stroke`，在非 webkit 内核下数字会看不见。得加个回退方案：直接给金色文字颜色，只在支持的地方再用描边。其实更简单——就设 `color: var(--gold)` 就行。还是别冒险了，直接改成金色文字吧。

现在开始输出。
<main id="main-content" class="page-products">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <a class="text-link" href="/">首页</a>
      <span class="breadcrumbs__sep">/</span>
      <span aria-current="page">导航与工具</span>
    </nav>
  </div>

  <section class="shell shell--wide pg-hero" aria-labelledby="pg-hero-title">
    <div class="hero-split">
      <div class="hero-panel hero-panel--navy pg-hero__lead">
        <p class="eyebrow eyebrow--light">第 5 版导航 · 现行结构</p>
        <h1 id="pg-hero-title">导航与工具</h1>
        <p class="lede">八个一级栏目、六个资料库分区、九个随手可用的工具，皇冠主页把它们按“您现在要办什么事”重新排过一遍。旧地址打不开、某个浏览器白屏、出差路上想离线带走一份地图，都能在这里各取所需。</p>
        <div class="pg-hero__cta">
          <a class="btn btn--gold" href="#scenario">按场景选工具<span class="btn__arrow">→</span></a>
          <a class="btn btn--ghost-light" href="#columns">先看栏目分工</a>
        </div>
        <dl class="pg-hero__facts">
          <div>
            <dt>一级栏目</dt>
            <dd>8</dd>
          </div>
          <div>
            <dt>工具入口</dt>
            <dd>9</dd>
          </div>
          <div>
            <dt>资料库条目</dt>
            <dd>1,240</dd>
          </div>
        </dl>
      </div>

      <div class="hero-panel hero-panel--paper pg-hero__aside">
        <p class="pg-aside__title">先对号入座</p>
        <ul class="pg-aside__list">
          <li>
            <a href="#group-entry">
              <span class="pg-aside__num">01</span>
              <span class="pg-aside__text">收藏的旧地址跳不到原来的位置</span>
            </a>
          </li>
          <li>
            <a href="#group-fit">
              <span class="pg-aside__num">02</span>
              <span class="pg-aside__text">同一个页面换个浏览器就打不开</span>
            </a>
          </li>
          <li>
            <a href="#group-data">
              <span class="pg-aside__num">03</span>
              <span class="pg-aside__text">要在没有网络的地方按图找栏目</span>
            </a>
          </li>
          <li>
            <a href="/news/">
              <span class="pg-aside__num">04</span>
              <span class="pg-aside__text">想知道这个季度到底改了什么</span>
            </a>
          </li>
        </ul>
        <p class="pg-aside__note">拿不准该点哪里，也可以先看 <a class="text-link" href="/answers/">访问答疑</a> 里最常遇到的几种情况。</p>
      </div>
    </div>
  </section>

  <section class="section pg-columns-section" id="columns" aria-labelledby="pg-columns-title">
    <div class="shell split split--4-8">
      <div class="split__sticky pg-sticky">
        <p class="eyebrow">栏目索引</p>
        <h2 id="pg-columns-title">八个一级栏目，各管一件事</h2>
        <p class="muted">与其逐个点开试探，不如先认清自己现在站在哪一步。下面每一项都写明了“什么情况下该去”。</p>
        <ul class="index-rail__list pg-mini-index">
          <li><a class="index-rail__link" href="#library">六个资料库分区</a></li>
          <li><a class="index-rail__link" href="#tools">九个好用的工具</a></li>
          <li><a class="index-rail__link" href="#devices">电脑端和手机端</a></li>
          <li><a class="index-rail__link" href="#scenario">按场景直接选</a></li>
        </ul>
      </div>

      <ol class="pg-columns">
        <li class="pg-columns__item">
          <span class="card__index">01</span>
          <div>
            <h3 class="pg-columns__name">首页</h3>
            <p class="pg-columns__scene">第一次来，先认路。三步引导从打开浏览器一路带到目标栏目，多数人 40 秒左右就能落到想去的地方。</p>
          </div>
          <a class="text-link pg-columns__go" href="/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">02</span>
          <div>
            <h3 class="pg-columns__name">品牌概况</h3>
            <p class="pg-columns__scene">想先摸清这个站点的底细：五次结构性改版是怎么来的、版本号怎么读、服务范围到哪。</p>
          </div>
          <a class="text-link pg-columns__go" href="/profile/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">03</span>
          <div>
            <h3 class="pg-columns__name">导航与工具</h3>
            <p class="pg-columns__scene">就是您现在这一页。栏目的分工、资料库怎么分区、九个工具分别什么时候用，一次看完。</p>
          </div>
          <span class="tag tag--gold pg-columns__go">当前</span>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">04</span>
          <div>
            <h3 class="pg-columns__name">更新动态</h3>
            <p class="pg-columns__scene">想知道这一季改了什么、下次大约什么时候改，直接看版本发布与栏目调整的记录。</p>
          </div>
          <a class="text-link pg-columns__go" href="/news/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">05</span>
          <div>
            <h3 class="pg-columns__name">访问答疑</h3>
            <p class="pg-columns__scene">已经撞上具体的坎：入口失效、页面打不开、手机上排版乱、改版对照表不会读。</p>
          </div>
          <a class="text-link pg-columns__go" href="/answers/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">06</span>
          <div>
            <h3 class="pg-columns__name">找到我们</h3>
            <p class="pg-columns__scene">需要找人说清楚：服务范围是否覆盖您所在地区、用哪个渠道最快、工作日几点有人回。</p>
          </div>
          <a class="text-link pg-columns__go" href="/find-us/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">07</span>
          <div>
            <h3 class="pg-columns__name">隐私声明</h3>
            <p class="pg-columns__scene">访问信息怎么采集、Cookie 存了什么、留过联络方式之后多久处理完，都在这里交代。</p>
          </div>
          <a class="text-link pg-columns__go" href="/privacy-notice/">进入</a>
        </li>
        <li class="pg-columns__item">
          <span class="card__index">08</span>
          <div>
            <h3 class="pg-columns__name">使用条款</h3>
            <p class="pg-columns__scene">引用站内资料、点击外链之前，先确认允许的范围与责任边界。</p>
          </div>
          <a class="text-link pg-columns__go" href="/terms/">进入</a>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--mist pg-library" id="library" aria-labelledby="pg-library-title">
    <div class="shell">
      <div class="section__head pg-library__head">
        <p class="eyebrow">资料库</p>
        <h2 id="pg-library-title">六个分区，按您要查的东西分开</h2>
        <p class="muted">累计 1,240 篇条目，每季度随导航版本校订一次。分区之间不重叠，找一次就能落到该看的那一篇。</p>
      </div>

      <div class="pg-library__body">
        <figure class="figure pg-library__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="六个资料库分区的线性图标排成两行网格，每个图标下方配一个短标签，整体为暖白底金色描边" decoding="async">
          </div>
          <figcaption class="figure__caption">六个分区共用一套图标语义，与工具入口的图标一一对应。</figcaption>
        </figure>

        <div class="pg-library__grid">
          <article class="pg-zone">
            <p class="pg-zone__meta">268 篇</p>
            <h3 class="pg-zone__name">入口与路径条目</h3>
            <p class="pg-zone__text">每个栏目、每个工具的准确位置与走法，第一次来或者刚换了设备的人从这一区开始最省事。</p>
          </article>
          <article class="pg-zone">
            <p class="pg-zone__meta">210 篇</p>
            <h3 class="pg-zone__name">版本与改版对照</h3>
            <p class="pg-zone__text">把前三个版本的旧位置映射到现行位置。收藏夹里还留着旧地址，先查这一区就行。</p>
          </article>
          <article class="pg-zone">
            <p class="pg-zone__meta">186 篇</p>
            <h3 class="pg-zone__name">终端适配与浏览器说明</h3>
            <p class="pg-zone__text">主流浏览器最近两个大版本上的打开情况与常见现象，遇到白屏或样式错乱时对照着排查。</p>
          </article>
          <article class="pg-zone">
            <p class="pg-zone__meta">224 篇</p>
            <h3 class="pg-zone__name">栏目地图与索引说明</h3>
            <p class="pg-zone__text">离线地图怎么读、图例代表什么、按图找栏目的先后顺序，这一区都配了示例。</p>
          </article>
          <article class="pg-zone">
            <p class="pg-zone__meta">172 篇</p>
            <h3 class="pg-zone__name">资料库使用指引</h3>
            <p class="pg-zone__text">按版本检索、按适用终端筛选的具体做法，适合要把一批条目一次查全的人。</p>
          </article>
          <article class="pg-zone">
            <p class="pg-zone__meta">180 篇</p>
            <h3 class="pg-zone__name">常见问题与操作步骤</h3>
            <p class="pg-zone__text">把大家问得最多的情况整理成了分步操作，照着做就能走完，不必自己猜。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section pg-tools" id="tools" aria-labelledby="pg-tools-title">
    <div class="shell split split--3-9">
      <aside class="split__sticky pg-sticky">
        <p class="eyebrow">工具入口</p>
        <h2 id="pg-tools-title">九个工具，分三组用</h2>
        <p class="muted">每个工具都写清了“什么时候该用”和“一次大概花多久”，挑之前先看这两行就够。</p>
        <nav class="pg-chipbar" aria-label="工具分组索引">
          <a class="chip" href="#group-entry">入口类 · 3</a>
          <a class="chip" href="#group-fit">适配类 · 3</a>
          <a class="chip" href="#group-data">资料类 · 3</a>
        </nav>
        <p class="small pg-tools__hint">九个工具都直接在页面里操作，不需要另外申请账号。</p>
      </aside>

      <div class="pg-groups">
        <div class="band band--gradient pg-band" id="group-entry">
          <div class="pg-band__text">
            <p class="eyebrow eyebrow--light">第一组</p>
            <h3 class="pg-band__title">入口类 · 找得到、对得上</h3>
          </div>
          <p class="pg-band__note">判断 → 选择 → 执行 → 确认，四个动作对应三个工具的先后顺序。</p>
        </div>

        <div class="pg-toolgrid">
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <circle cx="21" cy="21" r="11" fill="none" stroke="currentColor" stroke-width="2.5"/>
                <path d="M29 29l10 10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
              </svg>
            </span>
            <h4 class="card__title">官方入口速查</h4>
            <p class="card__text">第一次找入口、拿不准该敲哪个地址的时候用，输进去就能落到对应栏目。</p>
            <p class="pg-tool__time">约 30 秒</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <path d="M8 16h20M20 8l8 8-8 8M40 32H20M28 24l-8 8 8 8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <h4 class="card__title">改版路由对照</h4>
            <p class="card__text">收藏的旧地址跳不到原来的位置时用，输旧路径就能查出它现在归到哪个栏目。</p>
            <p class="pg-tool__time">约 1 分钟</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="2" opacity=".35"/>
                <path d="M15 24l7 7 12-14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <h4 class="card__title">收藏链接校验</h4>
            <p class="card__text">换过电脑或浏览器之后，想确认收藏夹里的地址是否还指向正确位置时用。</p>
            <p class="pg-tool__time">约 40 秒</p>
          </article>
        </div>

        <div class="band band--gradient pg-band" id="group-fit">
          <div class="pg-band__text">
            <p class="eyebrow eyebrow--light">第二组</p>
            <h3 class="pg-band__title">适配类 · 打得开、看得清</h3>
          </div>
          <p class="pg-band__note">先查浏览器，再看屏幕方向，最后才是加载速度。</p>
        </div>

        <div class="pg-toolgrid">
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <rect x="6" y="10" width="36" height="24" rx="4" fill="none" stroke="currentColor" stroke-width="2.5"/>
                <path d="M16 41h16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                <circle cx="24" cy="22" r="5" fill="none" stroke="currentColor" stroke-width="2.2"/>
              </svg>
            </span>
            <h4 class="card__title">浏览器兼容自查</h4>
            <p class="card__text">页面白屏、样式错乱时先跑这一遍，会告诉您是版本太旧还是别的原因。</p>
            <p class="pg-tool__time">约 1 分钟</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <rect x="16" y="6" width="16" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="2.5"/>
                <path d="M22 36h4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                <path d="M4 24h8M36 24h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".55"/>
              </svg>
            </span>
            <h4 class="card__title">移动端横屏提示</h4>
            <p class="card__text">手机上栏目挤成一团、或者顶部提示条挡住内容时用，会告诉您怎么转过来看全。</p>
            <p class="pg-tool__time">约 20 秒</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <circle cx="24" cy="24" r="17" fill="none" stroke="currentColor" stroke-width="2.2" opacity=".35"/>
                <path d="M24 7a17 17 0 0 1 15 10" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"/>
                <path d="M24 15v9l7 5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <h4 class="card__title">首屏加载自测</h4>
            <p class="card__text">打开偏慢时想知道问题出在网络还是别处，跑一遍就有结论，不用反复刷新。</p>
            <p class="pg-tool__time">约 30 秒</p>
          </article>
        </div>

        <div class="band band--gradient pg-band" id="group-data">
          <div class="pg-band__text">
            <p class="eyebrow eyebrow--light">第三组</p>
            <h3 class="pg-band__title">资料类 · 带得走、查得回</h3>
          </div>
          <p class="pg-band__note">地图留给没网的时候，摘要留给季度末，检索留给要查具体条目的人。</p>
        </div>

        <div class="pg-toolgrid pg-toolgrid--with-figure">
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <path d="M6 12l12-5 12 5 12-5v29l-12 5-12-5-12 5z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/>
                <path d="M18 7v29M30 12v29" fill="none" stroke="currentColor" stroke-width="2" opacity=".45"/>
              </svg>
            </span>
            <h4 class="card__title">离线栏目地图</h4>
            <p class="card__text">出差、断电、现场没有网络时按图找栏目。单份 PDF 约 1.2MB，存到本地就能一直用。</p>
            <p class="pg-tool__time">下载后查找约 1 分钟</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <rect x="9" y="6" width="26" height="36" rx="4" fill="none" stroke="currentColor" stroke-width="2.2"/>
                <path d="M16 16h12M16 23h12M16 30h7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
                <circle cx="36" cy="34" r="7" fill="none" stroke="currentColor" stroke-width="2.2"/>
              </svg>
            </span>
            <h4 class="card__title">版本更新摘要</h4>
            <p class="card__text">想知道这一季改了什么、下一次大约什么时候改，读一遍就对得上号。</p>
            <p class="pg-tool__time">约 3 分钟</p>
          </article>
          <article class="card pg-tool">
            <span class="pg-tool__icon" aria-hidden="true">
              <svg viewBox="0 0 48 48" width="48" height="48" focusable="false">
                <path d="M10 14h28M10 24h28M10 34h18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                <circle cx="36" cy="34" r="6" fill="none" stroke="currentColor" stroke-width="2.2"/>
              </svg>
            </span>
            <h4 class="card__title">资料库条目检索</h4>
            <p class="card__text">按版本号或适用终端定位到某一条具体说明，不用在一千多篇里翻。</p>
            <p class="pg-tool__time">约 1 分钟</p>
          </article>

          <figure class="figure figure--tall pg-tool__figure">
            <div class="figure__frame">
              <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="一本带皇冠符号的栏目地图册封面插画，封面印有金色坐标网格与分区标签" loading="lazy" decoding="async">
            </div>
            <figcaption class="figure__caption">离线地图按六个分区编号，翻开封面就能对上工具入口的图例。</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="section pg-devices" id="devices" aria-labelledby="pg-devices-title">
    <div class="shell">
      <div class="section__head">
        <p class="eyebrow">终端差异</p>
        <h2 id="pg-devices-title">电脑端做完整的活，手机端先把路认下来</h2>
        <p class="muted">两类设备都能打开全部页面，能做的事情深浅不同。知道自己手上是哪种，能少绕一半路。</p>
      </div>

      <div class="pg-devices__body">
        <div class="pg-devices__col pg-devices__col--desk">
          <p class="tag tag--gold">电脑端</p>
          <h3 class="pg-devices__name">左右分屏，边看边对照</h3>
          <ul class="pg-devices__list">
            <li>左栏索引固定在原位，滚动时不会跟着跑，右侧正文可以一路看下去。</li>
            <li>九个工具全部可操作，改版路由对照能一次贴进多条旧路径。</li>
            <li>离线栏目地图可直接另存到本地，单份约 1.2MB。</li>
            <li>场景对照表的展开步骤能同时摊开，方便逐行比对。</li>
          </ul>
        </div>

        <figure class="figure pg-devices__figure">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="并排的电脑屏幕与手机屏幕抽象轮廓，屏幕内分别是栏目卡片与折叠提示条，无人物出现" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">电脑端保留分屏索引，手机端把同一份内容收进可展开的说明里。</figcaption>
        </figure>

        <div class="pg-devices__col pg-devices__col--mobile">
          <p class="tag tag--wine">移动端</p>
          <h3 class="pg-devices__name">顶部有横屏提示，路径可折叠</h3>
          <ul class="pg-devices__list">
            <li>页面顶部保留一条横屏提示条，转成横向后一屏能看到的栏目明显变多。</li>
            <li>电脑端的分屏路径收进折叠说明，点开就能看到同样的走法，不必猜。</li>
            <li>入口类与资料类工具都能直接使用，长表格建议转横屏阅读。</li>
            <li>离线地图在手机上可以先存下，之后再传到电脑上看大图。</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--mist pg-scene" id="scenario" aria-labelledby="pg-scene-title">
    <div class="shell">
      <div class="section__head">
        <p class="eyebrow">场景对照</p>
        <h2 id="pg-scene-title">按您遇到的情况，直接调出那个工具</h2>
        <p class="muted">六种最常见的处境，每一行都对应一个具体工具。点开右侧可以看完整的操作步骤。</p>
      </div>

      <div class="pg-tablewrap">
        <table class="data-table pg-table">
          <caption class="pg-table__caption">场景与工具对照</caption>
          <thead>
            <tr>
              <th scope="col">您遇到的情况</th>
              <th scope="col">先用哪个</th>
              <th scope="col"><span class="pg-table__th-action">操作步骤</span></th>
            </tr>
          </thead>
          <tbody>
            <tr class="pg-table__row">
              <td data-label="情况">收藏的旧地址跳不到原来的位置</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-entry">改版路由对照</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-1">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-1" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>把收藏夹里那条旧地址整段复制下来，注意带上栏目后面的路径。</li>
                  <li>在对照框里贴进去，页面会给出它现在对应的栏目名。</li>
                  <li>按给出的栏目名从顶部导航重新进入一次，再把新地址存进收藏夹。</li>
                </ol>
              </td>
            </tr>

            <tr class="pg-table__row">
              <td data-label="情况">同一个页面换个浏览器就打不开</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-fit">浏览器兼容自查</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-2">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-2" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>先确认浏览器的版本号，最近两个大版本通常都能正常打开。</li>
                  <li>版本偏旧就先升级，再刷新一次页面看问题还在不在。</li>
                  <li>升级后仍然白屏，换一个浏览器交叉验证，判断是页面还是本机设置的问题。</li>
                </ol>
              </td>
            </tr>

            <tr class="pg-table__row">
              <td data-label="情况">出差路上没有网络，还要找栏目</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-data">离线栏目地图</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-3">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-3" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>出发前把地图 PDF 存到本地，单份约 1.2MB，手机也能放下。</li>
                  <li>在地图上按分区编号找栏目，编号与站内六个资料库分区一致。</li>
                  <li>回到有网络的地方，再按图上记下的栏目名从导航进入。</li>
                </ol>
              </td>
            </tr>

            <tr class="pg-table__row">
              <td data-label="情况">想知道这个季度改动了什么</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-data">版本更新摘要</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-4">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-4" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>从导航栏第一屏的金色胶囊进入，当季摘要固定在置顶位置。</li>
                  <li>先看版本号，例如 5.2 表示第 5 版导航的第 2 季更新。</li>
                  <li>再看栏目调整那一段，确认自己常用的入口有没有挪位。</li>
                </ol>
              </td>
            </tr>

            <tr class="pg-table__row">
              <td data-label="情况">手机上栏目挤在一起看不清</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-fit">移动端横屏提示</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-5">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-5" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>把手机转成横向，顶部横屏提示条会收起，腾出更多阅读高度。</li>
                  <li>需要看电脑端的走法时，展开折叠说明，里面的路径与电脑端一致。</li>
                  <li>长表格建议横屏逐行看，比在竖屏里上下折返省力。</li>
                </ol>
              </td>
            </tr>

            <tr class="pg-table__row">
              <td data-label="情况">要按版本找某一条具体说明</td>
              <td data-label="先用哪个"><a class="text-link" href="#group-data">资料库条目检索</a></td>
              <td data-label="操作步骤"><button type="button" class="btn btn--ghost btn--sm" data-fold aria-expanded="false" aria-controls="scene-6">查看步骤</button></td>
            </tr>
            <tr class="pg-table__panel" id="scene-6" data-fold-panel hidden>
              <td colspan="3">
                <ol class="pg-steps">
                  <li>先在检索里选版本号，范围会缩到该季校订过的条目。</li>
                  <li>再按适用终端筛一次，电脑端和移动端的说明分开列出。</li>
                  <li>找到条目后记下它所属的分区，下次直接从那一区进去更快。</li>
                </ol>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="section pg-flow" id="flow" aria-labelledby="pg-flow-title">
    <div class="shell split split--4-8">
      <div class="split__sticky pg-sticky">
        <p class="eyebrow">怎么走完</p>
        <h2 id="pg-flow-title">从判断到解决，四步就够</h2>
        <p class="muted">多数人卡住不是因为工具不好用，而是不知道该先做哪一步。把顺序理清楚，剩下的就是照着点。</p>
        <a class="btn btn--navy" href="/answers/">还有别的疑问<span class="btn__arrow">→</span></a>
      </div>

      <div class="pg-flow__body">
        <figure class="figure figure--wide">
          <div class="figure__frame">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="四步横向流程图，用金色箭头依次串联判断、选择、执行、确认四个节点" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">判断、选择、执行、确认，四个节点各对应一小组工具。</figcaption>
        </figure>

        <ol class="pg-flow__list">
          <li class="pg-flow__item">
            <span class="metric metric--xl pg-flow__num">1</span>
            <div>
              <h3 class="pg-flow__name">判断问题落在哪一头</h3>
              <p class="pg-flow__text">是地址不对、浏览器不认、还是手上没网。落在哪一头，决定了后面点哪一组。</p>
            </div>
          </li>
          <li class="pg-flow__item">
            <span class="metric metric--xl pg-flow__num">2</span>
            <div>
              <h3 class="pg-flow__name">在对应组里挑一个工具</h3>
              <p class="pg-flow__text">每组三个工具各管一件事，挑那件与您情况最贴近的，不必三个都试。</p>
            </div>
          </li>
          <li class="pg-flow__item">
            <span class="metric metric--xl pg-flow__num">3</span>
            <div>
              <h3 class="pg-flow__name">照着提示走完当前这一步</h3>
              <p class="pg-flow__text">工具会把该填什么、该看哪里写清楚，一次只处理一个动作。</p>
            </div>
          </li>
          <li class="pg-flow__item">
            <span class="metric metric--xl pg-flow__num">4</span>
            <div>
              <h3 class="pg-flow__name">确认结果，顺手存下正确的地址</h3>
              <p class="pg-flow__text">走通之后把新位置存进收藏夹，下次直接从导航栏进入，省掉重新找的一轮。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section section--navy pg-updates" id="updates" aria-labelledby="pg-updates-title">
    <div class="shell pg-updates__inner">
      <div class="pg-updates__text">
        <p class="eyebrow eyebrow--light">当季更新</p>
        <h2 id="pg-updates-title">每季发一次摘要，不用每次重新摸索</h2>
        <p class="pg-updates__lede">每个季度发布一次版本更新摘要，固定在导航栏第一屏的金色胶囊里。栏目调整、资料库校订、工具增减都写在同一条记录里，看一遍就知道这三个月动了哪些地方。</p>
      </div>
      <div class="pg-updates__actions">
        <a class="btn btn--gold" href="/news/">看本季改了什么<span class="btn__arrow">→</span></a>
        <a class="btn btn--ghost-light" href="/profile/">了解改版历程</a>
        <p class="pg-updates__note">摘要里没写到的情况，可以在 <a class="text-link pg-updates__link" href="/find-us/">找到我们</a> 里选一个渠道说清楚。</p>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pg-rule: rgba(10, 27, 61, 0.13);
  --pg-rule-strong: rgba(10, 27, 61, 0.26);
  --pg-ink-soft: #43506B;
  --pg-gold-line: rgba(232, 180, 74, 0.45);
}

.page-products .breadcrumbs {
  padding: 18px 0 4px;
  font-size: 14px;
  color: var(--pg-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-products .breadcrumbs__sep {
  opacity: 0.5;
}

/* ---------- 首屏 ---------- */
.page-products .pg-hero {
  padding-top: 10px;
  padding-bottom: 8px;
}

.page-products .hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .pg-hero__lead {
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .pg-hero__lead h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.page-products .pg-hero__lead .lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  max-width: 34em;
}

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

.page-products .pg-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(251, 247, 239, 0.22);
}

.page-products .pg-hero__facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-products .pg-hero__facts dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.page-products .pg-hero__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1.1;
  color: var(--gold);
}

.page-products .pg-hero__aside {
  padding: 26px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--pg-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-products .pg-aside__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--pg-ink-soft);
}

.page-products .pg-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .pg-aside__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--mist);
  color: var(--navy-900);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  transition: background 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.page-products .pg-aside__list a:hover,
.page-products .pg-aside__list a:focus-visible {
  background: var(--gold-pale);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--pg-gold-line);
}

.page-products .pg-aside__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--navy-600);
  flex: none;
}

.page-products .pg-aside__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pg-ink-soft);
}

/* ---------- 通用分栏 ---------- */
.page-products .pg-sticky {
  align-self: start;
}

.page-products .pg-sticky h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.24;
  margin: 8px 0 12px;
}

.page-products .pg-mini-index {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .pg-mini-index .index-rail__link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--navy-800);
  font-size: 14px;
  text-decoration: none;
}

.page-products .pg-mini-index .index-rail__link:hover {
  background: var(--gold-pale);
}

/* ---------- 八个栏目 ---------- */
.page-products .pg-columns-section {
  padding-top: 48px;
}

.page-products .pg-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pg-columns__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: start;
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.page-products .pg-columns__item:hover {
  border-color: var(--pg-gold-line);
  transform: translateY(-2px);
}

.page-products .pg-columns__item .card__index {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--navy-600);
  padding-top: 4px;
}

.page-products .pg-columns__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy-900);
}

.page-products .pg-columns__scene {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-columns__go {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  font-size: 14px;
}

/* ---------- 资料库 ---------- */
.page-products .pg-library__head {
  max-width: 46em;
}

.page-products .pg-library__head h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.22;
  margin: 10px 0 12px;
}

.page-products .pg-library__body {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-products .pg-library__figure {
  margin: 0;
}

.page-products .pg-library__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-library__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .figure__caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--pg-ink-soft);
}

.page-products .pg-library__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-products .pg-zone {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border-left: 3px solid var(--gold);
}

.page-products .pg-zone__meta {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--wine);
}

.page-products .pg-zone__name {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-zone__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

/* ---------- 工具 ---------- */
.page-products .pg-tools h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .pg-chipbar .chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pg-rule-strong);
  background: transparent;
  color: var(--navy-800);
  font-size: 14px;
  text-decoration: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}

.page-products .pg-chipbar .chip:hover,
.page-products .pg-chipbar .chip:focus-visible {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--paper);
}

.page-products .pg-tools__hint {
  margin-top: 14px;
  color: var(--pg-ink-soft);
}

.page-products .pg-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-products .pg-band {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: grid;
  gap: 10px;
  scroll-margin-top: 120px;
}

.page-products .pg-band__title {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--paper);
}

.page-products .pg-band__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 247, 239, 0.82);
}

.page-products .pg-toolgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.page-products .pg-tool {
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.page-products .pg-tool:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--pg-gold-line);
}

.page-products .pg-tool__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--mist);
  color: var(--navy-600);
}

.page-products .pg-tool__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.page-products .pg-tool .card__title {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-tool .card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-tool__time {
  margin: auto 0 0;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wine);
  border-top: 1px solid var(--pg-rule);
}

.page-products .pg-toolgrid--with-figure {
  align-items: start;
}

.page-products .pg-tool__figure {
  margin: 0;
}

.page-products .pg-tool__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  transform: rotate(-1.4deg);
  box-shadow: 10px 14px 0 rgba(20, 48, 107, 0.08);
  transition: transform 220ms var(--ease);
}

.page-products .pg-tool__figure:hover .figure__frame {
  transform: rotate(0deg);
}

.page-products .pg-tool__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 终端差异 ---------- */
.page-products .pg-devices .section__head {
  max-width: 48em;
}

.page-products .pg-devices h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-devices__body {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .pg-devices__col {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-devices__col--desk {
  border-top: 3px solid var(--gold);
}

.page-products .pg-devices__col--mobile {
  border-top: 3px solid var(--wine);
}

.page-products .pg-devices__name {
  margin: 12px 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-devices__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-devices__list li::marker {
  color: var(--navy-600);
}

.page-products .pg-devices__figure {
  margin: 0;
}

.page-products .pg-devices__figure .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-devices__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 场景对照表 ---------- */
.page-products .pg-scene h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-tablewrap {
  margin-top: 26px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pg-rule);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

.page-products .pg-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .pg-table__caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--pg-ink-soft);
}

.page-products .pg-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--navy-800);
  white-space: nowrap;
}

.page-products .pg-table tbody tr.pg-table__row:nth-of-type(4n + 1) {
  background: var(--mist);
}

.page-products .pg-table td {
  padding: 14px 18px;
  vertical-align: middle;
  line-height: 1.65;
  color: var(--pg-ink-soft);
  border-bottom: 1px solid var(--pg-rule);
}

.page-products .pg-table td:first-child {
  color: var(--navy-900);
  font-weight: 500;
}

.page-products .pg-table__panel td {
  background: var(--paper);
  padding: 4px 18px 18px;
  border-bottom: 1px solid var(--pg-rule);
}

.page-products .pg-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

.page-products .pg-steps li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

.page-products .pg-table .btn--sm {
  white-space: nowrap;
}

/* ---------- 四步流程 ---------- */
.page-products .pg-flow h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 10px 0 12px;
}

.page-products .pg-flow__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-products .pg-flow__body .figure {
  margin: 0;
}

.page-products .pg-flow__body .figure__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pg-rule);
  background: var(--paper);
}

.page-products .pg-flow__body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .pg-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pg-flow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  background: var(--mist);
}

.page-products .pg-flow__num {
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
  padding-top: 2px;
}

.page-products .pg-flow__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy-900);
}

.page-products .pg-flow__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pg-ink-soft);
}

/* ---------- 当季更新 ---------- */
.page-products .pg-updates {
  border-radius: var(--radius-xl);
  margin-top: 12px;
}

.page-products .pg-updates__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.page-products .pg-updates h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.25;
  margin: 10px 0 12px;
  color: var(--paper);
}

.page-products .pg-updates__lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(251, 247, 239, 0.86);
  max-width: 40em;
}

.page-products .pg-updates__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pg-updates__actions .btn {
  align-self: flex-start;
}

.page-products .pg-updates__note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 247, 239, 0.74);
}

.page-products .pg-updates__link {
  color: var(--gold-pale);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pg-hero__lead h1 {
    font-size: 48px;
  }

  .page-products .pg-library__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pg-toolgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .page-products .pg-hero__lead {
    padding: 40px 36px;
  }

  .page-products .pg-hero__aside {
    padding: 32px 30px;
  }

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

  .page-products .pg-flow__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pg-updates__inner {
    grid-template-columns: 1.4fr 1fr;
  }
}

@media (min-width: 1024px) {
  .page-products .hero-split {
    grid-template-columns: 5fr 7fr;
    gap: 24px;
  }

  .page-products .pg-hero__lead h1 {
    font-size: 62px;
  }

  .page-products .pg-library__body {
    grid-template-columns: 5fr 7fr;
    gap: 32px;
  }

  .page-products .pg-library__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .page-products .pg-toolgrid,
  .page-products .pg-toolgrid--with-figure {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pg-tool__figure {
    grid-column: 1 / -1;
    max-width: 420px;
  }

  .page-products .pg-band {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }

  .page-products .pg-devices__body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desk mobile"
      "figure figure";
  }

  .page-products .pg-devices__col--desk {
    grid-area: desk;
  }

  .page-products .pg-devices__col--mobile {
    grid-area: mobile;
  }

  .page-products .pg-devices__figure {
    grid-area: figure;
  }
}

@media (min-width: 1280px) {
  .page-products .pg-hero__lead h1 {
    font-size: 70px;
  }

  .page-products .pg-columns__item {
    padding: 24px 22px;
  }

  .page-products .pg-flow__list {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pg-aside__list a,
  .page-products .pg-columns__item,
  .page-products .pg-tool,
  .page-products .pg-tool__figure .figure__frame,
  .page-products .pg-chipbar .chip {
    transition: none;
  }

  .page-products .pg-tool__figure .figure__frame {
    transform: none;
  }
}