.page-products {
  background: var(--paper);
  color: var(--ink);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.page-products .crumbs-row {
  padding-top: clamp(14px, 2.5vw, 24px);
  padding-bottom: clamp(10px, 2vw, 16px);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(111, 168, 160, 0.3), transparent 62%),
    linear-gradient(155deg, var(--deep) 0%, var(--night) 100%);
  color: #f2ece1;
  padding: clamp(26px, 5vw, 56px) 0 clamp(30px, 5vw, 64px);
  border-bottom: 1px solid rgba(216, 168, 85, 0.4);
}

.page-products .cat-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-products .cat-eyebrow {
  color: var(--sand);
  margin: 0 0 12px;
}

.page-products .cat-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #fbf6ec;
}

.page-products .cat-hero-lead {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.8;
  color: #d7dee2;
}

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

.page-products .jump-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(216, 168, 85, 0.35);
  border-left: 3px solid var(--coral);
  color: #f2ece1;
  text-decoration: none;
  background: rgba(7, 26, 40, 0.35);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .jump-link:hover,
.page-products .jump-link:focus-visible {
  background: rgba(242, 101, 63, 0.16);
  border-color: var(--coral);
}

.page-products .jump-num {
  color: var(--coral-soft);
  font-size: 12px;
}

.page-products .jump-name {
  font-size: 14px;
}

/* ---------- 刻度尺 ---------- */
.page-products .cat-gauge {
  border: 1px solid rgba(216, 168, 85, 0.42);
  background: rgba(7, 26, 40, 0.5);
  padding: 16px clamp(12px, 2.4vw, 22px) 18px;
}

.page-products .gauge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sand);
}

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

.page-products .gauge-item {
  position: relative;
  padding: 14px 8px 12px;
  border-top: 2px solid rgba(216, 168, 85, 0.32);
}

.page-products .gauge-item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.page-products .gauge-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1;
  color: var(--coral-soft);
}

.page-products .gauge-name {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #cfd9dd;
}

.page-products .gauge-ruler {
  margin-top: 14px;
  height: 12px;
  background-image: repeating-linear-gradient(90deg, rgba(216, 168, 85, 0.55) 0 1px, transparent 1px 12px);
  border-bottom: 1px solid rgba(216, 168, 85, 0.35);
}

.page-products .gauge-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a9b8c0;
}

@media (min-width: 520px) {
  .page-products .gauge-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-products .cat-hero-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ---------- 章节通用 ---------- */
.page-products .cat-section {
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

.page-products .overview-head {
  max-width: 62ch;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-products .overview-head .index-num {
  display: block;
  color: var(--sand);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  margin-bottom: 10px;
}

.page-products .overview-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--deep);
}

.page-products .overview-head p {
  margin: 0;
  line-height: 1.8;
  color: var(--ink);
}

.page-products .overview-media {
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.page-products .overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 32px);
}

.page-products .judge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .judge-item {
  position: relative;
  padding: 14px 16px 14px 18px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mist);
}

.page-products .judge-tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rock);
}

.page-products .judge-text {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}

.page-products .tree-panel {
  border: 1px solid var(--line);
  background: #fffdf8;
  padding: clamp(12px, 2.4vw, 20px);
}

.page-products .tree-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
  margin: 0 auto;
}

.page-products .tree-root-box {
  fill: var(--deep);
}

.page-products .tree-root-text {
  font-family: var(--font-mono);
  font-size: 17px;
  fill: var(--paper);
  text-anchor: middle;
}

.page-products .tree-lines path {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.5;
}

.page-products .tree-minor {
  fill: var(--mist);
}

.page-products .tree-dot {
  fill: var(--coral);
}

.page-products .tree-label {
  font-family: var(--font-body);
  font-size: 15px;
  fill: var(--deep);
}

.page-products .tree-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--rock);
  text-align: center;
}

@media (min-width: 860px) {
  .page-products .overview-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
}

/* ---------- 横向长条 ---------- */
.page-products .cat-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: clamp(28px, 4.5vw, 56px) 0;
}

.page-products .cat-band--tint {
  background: #f1ead d;
  background: linear-gradient(180deg, #f3eddf 0%, #efe7d7 100%);
}

.page-products .cat-band-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 32px);
  position: relative;
}

.page-products .band-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(64px, 15vw, 128px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgba(14, 46, 69, 0.14);
  -webkit-text-stroke: 2px rgba(14, 46, 69, 0.38);
  margin: 0;
  transition: color 0.3s var(--ease), -webkit-text-stroke-color 0.3s var(--ease);
  user-select: none;
}

.page-products .cat-band:hover .band-num {
  color: rgba(242, 101, 63, 0.16);
  -webkit-text-stroke-color: var(--coral);
}

.page-products .band-meta {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--coral);
}

.page-products .band-body h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 3.4vw, 28px);
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--deep);
}

.page-products .band-lead {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  max-width: 36em;
}

.page-products .band-tags {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .band-media {
  margin: 0;
}

.page-products .aside-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rock);
}

.page-products .aside-note a,
.page-products .fallback-list a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .page-products .cat-band-inner {
    grid-template-columns: 130px minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
    gap: clamp(20px, 3vw, 40px);
  }

  .page-products .cat-band-inner--flip {
    grid-template-columns: 130px minmax(0, 340px) minmax(0, 1fr);
  }

  .page-products .band-num {
    font-size: clamp(96px, 9vw, 132px);
    margin-left: -8px;
  }

  .page-products .band-aside {
    grid-column: 3;
  }

  .page-products .band-body {
    grid-column: 2;
  }

  .page-products .cat-band-inner--flip .band-aside {
    grid-column: 2;
  }

  .page-products .cat-band-inner--flip .band-body {
    grid-column: 3;
  }
}

/* ---------- 三种翻法 ---------- */
.page-products .route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .route-item {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.page-products .route-key {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--deep);
  padding: 3px 8px;
}

.page-products .route-item p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}

/* ---------- 四步 ---------- */
.page-products .step-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  counter-reset: step;
}

.page-products .step {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  padding-bottom: 12px;
}

.page-products .step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--deep);
  color: var(--paper);
  border: 1px solid var(--sand);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-products .step::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: 2px;
  border-left: 1px dashed var(--mist);
}

.page-products .step:last-child::after {
  display: none;
}

.page-products .step-details {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.page-products .step-title {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--deep);
}

.page-products .step-title::-webkit-details-marker {
  display: none;
}

.page-products .step-title::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--coral);
  font-size: 16px;
}

.page-products .step-details[open] .step-title::after {
  content: "–";
}

.page-products .step-note {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
}

/* ---------- 命名规则 ---------- */
.page-products .name-rule {
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .rule-row {
  border-left: 3px solid var(--sand);
  padding: 2px 0 2px 12px;
}

.page-products .rule-row dt {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--rock);
}

.page-products .rule-row dd {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}

.page-products .cadence {
  background: var(--deep);
  color: #e8e2d6;
  padding: 16px 18px;
}

.page-products .cadence-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

.page-products .cadence-line + .cadence-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(216, 168, 85, 0.3);
}

.page-products .cadence-key {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  background: var(--coral);
  color: #fff8f2;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---------- 帮助说明 ---------- */
.page-products .help-topics {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .help-topic {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fffdf8;
  font-size: 14px;
  line-height: 1.6;
}

.page-products .help-topic .mono {
  flex: none;
  color: var(--mist);
  font-size: 12px;
}

.page-products .fallback {
  border: 1px dashed var(--mist);
  padding: 14px 16px;
  background: rgba(111, 168, 160, 0.08);
}

.page-products .fallback-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--deep);
}

.page-products .fallback-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.page-products .fallback-list li + li {
  margin-top: 6px;
}

/* ---------- 表格 ---------- */
.page-products .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fffdf8;
}

.page-products .path-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .path-table thead th {
  background: var(--night);
  color: #efe7d8;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-align: left;
  padding: 12px 14px;
  white-space: nowrap;
}

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

.page-products .path-table tbody th {
  font-weight: 600;
  color: var(--deep);
}

.page-products .path-table td {
  color: var(--rock);
}

.page-products .path-table tbody tr:nth-child(even) {
  background: rgba(220, 211, 196, 0.22);
}

@media (min-width: 720px) {
  .page-products .path-table td:last-child {
    color: var(--coral);
    white-space: nowrap;
  }
}

/* ---------- 尾部入口 ---------- */
.page-products .cat-tail {
  padding-top: clamp(16px, 3vw, 28px);
}

.page-products .tail-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--coral);
  background: #fffdf8;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 6px 6px 0 rgba(216, 168, 85, 0.18);
}

.page-products .tail-eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--rock);
}

.page-products .tail-text {
  margin: 0 0 18px;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.8;
}

.page-products .tail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products {
  --band-tint: #f2ebdc;
}

.page-products .cat-band--tint {
  background: linear-gradient(180deg, #f4eee1 0%, var(--band-tint) 100%);
}

.page-products .path-table {
  min-width: 620px;
}

.page-products .jump-link:focus-visible,
.page-products .step-title:focus-visible,
.page-products .tail-links .btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.page-products .step-title:hover {
  color: var(--coral);
}

.page-products .route-item:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .band-num,
  .page-products .jump-link {
    transition: none;
  }
}

.page-products .cat-band--tint {
  background: linear-gradient(180deg, #f4eee1 0%, #efe7d7 100%);
}

.page-products .cat-band-inner--flip .band-aside {
  order: 0;
}

@media (min-width: 900px) {
  .page-products .band-num {
    align-self: start;
    margin-top: 6px;
  }
}

@media (max-width: 899px) {
  .page-products .band-num {
    margin-bottom: -6px;
  }

  .page-products .band-aside {
    max-width: 520px;
  }
}

.page-products .cat-band--tint {
  background: linear-gradient(180deg, #f4eee1 0%, #efe7d7 100%);
}

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

.page-products .media-frame--square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-products .band-media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-products .overview-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 900px) {
  .page-products .cat-band--tint .band-aside {
    padding-top: 4px;
  }
}

.page-products .tail-card .btn {
  text-decoration: none;
}

.page-products .tail-links a.btn--ghost {
  border: 1px solid var(--deep);
  color: var(--deep);
  background: transparent;
}

.page-products .tail-links a.btn--ghost:hover {
  background: var(--deep);
  color: var(--paper);
}

.page-products .cat-gauge {
  border-radius: 2px;
}

.page-products .gauge-item:nth-child(odd)::before {
  left: 8px;
}

.page-products .gauge-item:nth-child(even)::before {
  background: var(--coral-soft);
}

@media (min-width: 1100px) {
  .page-products .cat-hero-lead {
    max-width: 32em;
  }

  .page-products .band-lead {
    max-width: 34em;
  }
}

.page-products .tree-panel {
  align-self: stretch;
}

.page-products .judge-item:last-child {
  border-left-color: var(--coral);
}

.page-products .path-table tbody th {
  width: 34%;
}

.page-products .cadence-line:first-child {
  border-top: 0;
  margin-top: 0;
}

/* 收尾：移动端安全与全局细节 */
@media (max-width: 560px) {
  .page-products .cat-hero-lead,
  .page-products .band-lead,
  .page-products .overview-head p {
    font-size: 14.5px;
  }

  .page-products .band-num {
    font-size: 64px;
  }

  .page-products .step {
    padding-left: 40px;
  }

  .page-products .step::before {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .page-products .step::after {
    left: 14px;
    top: 32px;
  }
}

.page-products .wrap {
  box-sizing: border-box;
}

.page-products *,
.page-products *::before,
.page-products *::after {
  box-sizing: border-box;
}

.page-products .jump-link {
  min-width: 0;
}

.page-products .jump-name {
  overflow-wrap: anywhere;
}

.page-products .path-table caption {
  text-align: left;
}

.page-products .help-topic .mono {
  font-weight: 700;
}

.page-products .route-key {
  border-radius: 2px;
}

.page-products .tree-svg .tree-lines path {
  stroke-linecap: round;
}

.page-products .judge-tag {
  background: rgba(111, 168, 160, 0.16);
  padding: 2px 7px;
  display: inline-block;
  border-radius: 2px;
}

.page-products .gauge-note {
  border-top: 1px solid rgba(216, 168, 85, 0.25);
  padding-top: 10px;
}

.page-products .band-meta::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--coral);
  vertical-align: middle;
  margin-right: 8px;
}

.page-products .overview-head .index-num {
  font-weight: 700;
}

.page-products .tail-card .btn--coral {
  color: #fff8f2;
}

.page-products .cat-band:last-of-type {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .page-products .band-num {
    position: sticky;
    top: 88px;
  }
}

.page-products .path-table tbody tr:hover {
  background: rgba(242, 101, 63, 0.07);
}

.page-products .fallback-list a:hover,
.page-products .aside-note a:hover {
  color: var(--coral);
}

.page-products .tree-label {
  letter-spacing: 0.01em;
}

.page-products .cadence {
  border-left: 4px solid var(--coral);
}

.page-products .help-topic:hover {
  border-color: var(--mist);
  background: #fff;
}

.page-products .section-note,
.page-products .muted {
  color: var(--rock);
}

.page-products .cat-tail {
  padding-bottom: clamp(24px, 4vw, 48px);
}

@media (min-width: 900px) {
  .page-products .overview-media {
    margin-bottom: 36px;
  }
}

.page-products .path-table tbody td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-products .route-item p a {
  color: var(--deep);
}

.page-products .gauge-ruler {
  opacity: 0.9;
}

.page-products .step-details[open] .step-title {
  color: var(--deep);
}

.page-products .tail-eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--sand);
  margin-top: 6px;
}

.page-products .judge-text strong {
  color: var(--deep);
}

.page-products .band-body {
  min-width: 0;
}

.page-products .overview-grid > * {
  min-width: 0;
}

.page-products .table-scroll {
  -webkit-overflow-scrolling: touch;
}

.page-products .cat-hero h1 {
  text-wrap: balance;
}

.page-products .band-body h2 {
  text-wrap: balance;
}

.page-products .fallback {
  border-radius: 2px;
}

@media (min-width: 900px) and (max-width: 1100px) {
  .page-products .cat-band-inner {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 280px);
  }

  .page-products .cat-band-inner--flip {
    grid-template-columns: 96px minmax(0, 280px) minmax(0, 1fr);
  }

  .page-products .band-num {
    font-size: 92px;
  }
}

.page-products .gauge-item {
  min-width: 0;
}

.page-products .gauge-name {
  overflow-wrap: anywhere;
}

.page-products .path-table tbody th {
  font-family: var(--font-body);
}

.page-products .step-title {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.page-products .band-tags .tag {
  border-radius: 2px;
}

@media print {
  .page-products .cat-gauge,
  .page-products .tree-panel {
    display: none;
  }
}

.page-products .wrap {
  width: 100%;
}

.page-products .cat-band-inner {
  box-sizing: border-box;
}

.page-products .name-rule .rule-row:last-child {
  border-left-color: var(--mist);
}

.page-products .cadence-key {
  border-radius: 2px;
}

.page-products .jump-link {
  border-radius: 2px;
}

.page-products .judge-item {
  border-radius: 2px;
}

.page-products .tail-card {
  border-radius: 2px;
}

.page-products .tree-panel {
  border-radius: 2px;
}

.page-products .table-scroll {
  border-radius: 2px;
}

.page-products .fallback-list li::marker {
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-products .tail-links .btn {
  font-size: 13.5px;
  padding: 9px 16px;
}

.page-products .band-body h2 {
  letter-spacing: 0;
}

.page-products .overview-head h2 {
  letter-spacing: 0;
}

.page-products .cat-hero h1 {
  margin-top: 0;
}

.page-products .gauge-head {
  text-transform: uppercase;
}

.page-products .index-num {
  font-variant-numeric: tabular-nums;
}

.page-products .gauge-num,
.page-products .band-num {
  font-variant-numeric: tabular-nums;
}

.page-products .cat-section:last-of-type {
  padding-bottom: clamp(8px, 2vw, 16px);
}

.page-products .tree-svg text {
  dominant-baseline: middle;
}

.page-products .tree-root-text {
  dominant-baseline: middle;
}

.page-products .media-caption {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--rock);
}

.page-products .overview-media .media-caption {
  padding: 8px 2px 0;
}

.page-products .band-media {
  background: #fffdf8;
}

.page-products .cat-hero .jump-link:visited {
  color: #f2ece1;
}

@media (min-width: 600px) {
  .page-products .fallback-list {
    padding-left: 22px;
  }
}

.page-products .route-item .route-key + p {
  margin-top: 8px;
}

.page-products .step-details .step-note {
  padding-right: 4px;
}

.page-products .help-topics {
  margin-bottom: 16px;
}

.page-products .cadence-line {
  text-align: left;
}

.page-products .tail-text {
  color: var(--ink);
}

.page-products .overview-head p + p {
  margin-top: 10px;
}

.page-products .judge-item + .judge-item {
  margin-top: 0;
}

.page-products .path-table thead th:first-child {
  border-top-left-radius: 2px;
}

.page-products .path-table thead th:last-child {
  border-top-right-radius: 2px;
}

.page-products .band-tags .tag--coral {
  color: #fff8f2;
}

.page-products .band-tags .tag {
  font-size: 12px;
  padding: 5px 10px;
}

.page-products .cat-band:target .band-num {
  color: rgba(242, 101, 63, 0.18);
  -webkit-text-stroke-color: var(--coral);
}

.page-products .cat-hero-lead a {
  color: var(--coral-soft);
}

.page-products .overview-media img {
  background: var(--deep);
}

.page-products .band-media img {
  background: var(--paper);
}

.page-products .cat-tail .tail-links a {
  white-space: nowrap;
}

.page-products .judge-list {
  align-content: start;
}

.page-products .tree-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-products .gauge-list {
  align-items: stretch;
}

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

.page-products .table-scroll table {
  margin: 0;
}

.page-products .cat-section + .cat-band {
  margin-top: 0;
}

.page-products .band-aside .media-frame {
  box-shadow: 5px 5px 0 rgba(216, 168, 85, 0.16);
}

.page-products .route-list li p {
  color: var(--ink);
}

.page-products .fallback {
  margin-top: 4px;
}

.page-products .step-list {
  margin-bottom: 0;
}

.page-products .band-lead:last-child {
  margin-bottom: 0;
}

.page-products .cat-jump {
  margin-top: 4px;
}

.page-products .gauge-item:first-child {
  border-top-color: rgba(242, 101, 63, 0.7);
}

.page-products .tail-card:hover {
  box-shadow: 6px 6px 0 rgba(216, 168, 85, 0.28);
}

.page-products .judge-item:hover {
  border-left-color: var(--coral);
}

.page-products .tree-panel:hover .tree-dot {
  fill: var(--coral-soft);
}

.page-products .cat-hero .jump-link:active {
  background: rgba(242, 101, 63, 0.24);
}

.page-products .step-title:active {
  color: var(--coral);
}

.page-products .overview-head {
  border-left: 3px solid var(--sand);
  padding-left: 14px;
}

@media (min-width: 900px) {
  .page-products .overview-head {
    padding-left: 18px;
  }
}

.page-products .band-num {
  pointer-events: none;
}

.page-products .cat-band:hover .band-num {
  transform: none;
}

.page-products .media-frame {
  max-width: 100%;
}

.page-products .cat-tail {
  padding-top: clamp(12px, 2.5vw, 24px);
}

.page-products .wrap.cat-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .path-table tbody td:first-of-type {
  font-size: 13.5px;
}

.page-products .gauge-note {
  font-family: var(--font-body);
}

.page-products .judge-list {
  gap: 10px;
}

.page-products .route-item p,
.page-products .rule-row dd,
.page-products .help-topic,
.page-products .fallback-list li {
  max-width: 40em;
}

.page-products .cat-band--tint .band-num {
  color: rgba(14, 46, 69, 0.1);
}

.page-products .cat-band--tint:hover .band-num {
  color: rgba(242, 101, 63, 0.14);
}

@media (max-width: 380px) {
  .page-products .cat-jump {
    grid-template-columns: 1fr;
  }

  .page-products .band-num {
    font-size: 54px;
  }
}

.page-products .tail-links {
  align-items: center;
}

.page-products .cat-hero-copy > *:last-child {
  margin-bottom: 0;
}

.page-products .overview-grid {
  margin-bottom: clamp(6px, 1.6vw, 12px);
}

.page-products .step-details {
  padding-top: 6px;
}

.page-products .path-table thead th {
  border-bottom: 2px solid var(--coral);
}

.page-products .band-tags .tag--mist {
  border: 1px solid var(--mist);
  background: rgba(111, 168, 160, 0.14);
  color: var(--deep);
}

.page-products .cat-gauge {
  overflow: hidden;
}

.page-products .overview-head h2 + p {
  margin-top: 0;
}

.page-products .tree-svg {
  overflow: visible;
}

.page-products .cat-hero {
  position: relative;
}

.page-products .cat-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--sand) 0 2px, transparent 2px 14px);
  opacity: 0.5;
}

.page-products .band-body > p:last-child {
  margin-bottom: 0;
}

.page-products .jump-name {
  font-weight: 500;
}

.page-products .fallback-title {
  font-family: var(--font-mono);
}

.page-products .step-note {
  max-width: 38em;
}

.page-products .band-lead {
  color: var(--ink);
}

.page-products .cadence-line {
  color: #e6e0d4;
}

.page-products .path-table tbody tr:hover th {
  color: var(--deep);
}

.page-products .cat-band--tint .band-lead {
  color: var(--ink);
}

.page-products .band-aside {
  min-width: 0;
}

.page-products .cat-band-inner > * {
  min-width: 0;
}

.page-products .media-frame--wide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-products .overview-media {
  overflow: hidden;
}

.page-products .cat-section .index-num {
  opacity: 0.9;
}

@media (min-width: 900px) {
  .page-products .cat-band-inner--flip .band-aside {
    order: -1;
  }
}

.page-products .cat-band-inner--flip .band-aside {
  order: 0;
}

.page-products .band-num {
  order: -1;
}

.page-products .tail-card + .tail-card {
  margin-top: 16px;
}

.page-products .help-topics li:nth-child(even) .mono {
  color: var(--sand);
}

.page-products .overview-head p {
  font-size: 15px;
}

.page-products .gauge-ruler {
  border-top: 1px solid rgba(216, 168, 85, 0.3);
}

.page-products .cat-hero .eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

.page-products .path-table caption {
  position: absolute;
  width: 1px;
}

.page-products .cat-band--tint + .cat-band {
  border-top-color: rgba(216, 168, 85, 0.45);
}

.page-products .tree-note {
  letter-spacing: 0.06em;
}

.page-products .cat-tail .tail-text:last-child {
  margin-bottom: 0;
}

.page-products .jump-link .jump-num {
  flex: none;
}

.page-products .fallback-list {
  list-style: decimal;
}

.page-products .step-list {
  counter-reset: step;
}

.page-products .band-meta {
  font-family: var(--font-mono);
}

.page-products .cat-hero h1 + .cat-hero-lead {
  margin-top: 0;
}

.page-products .overview-grid .tree-panel p:last-child {
  margin-bottom: 0;
}

.page-products .gauge-list {
  counter-reset: none;
}

.page-products .cat-band:last-of-type .band-num {
  color: rgba(14, 46, 69, 0.12);
}

.page-products .tail-card .tail-links a:last-child {
  margin-left: auto;
}

@media (max-width: 719px) {
  .page-products .tail-card .tail-links a:last-child {
    margin-left: 0;
  }
}

.page-products .path-table td:nth-child(2) {
  color: var(--deep);
}

.page-products .cat-hero .cat-jump li {
  min-width: 0;
}

.page-products .route-list + .band-tags {
  margin-top: 20px;
}

.page-products .help-topics + .fallback {
  margin-top: 14px;
}

.page-products .cadence {
  margin-top: 4px;
}

.page-products .tree-panel .tree-note {
  margin-bottom: 0;
}

.page-products .cat-band--tint .band-media {
  border-color: var(--line);
}

.page-products .step-details:last-child {
  border-bottom: 0;
}

.page-products .judge-item:first-child {
  border-left-color: var(--coral);
}

.page-products .cat-gauge .gauge-list {
  margin-top: 16px;
}

.page-products .overview-head .index-num + h2 {
  margin-top: 0;
}

.page-products .band-tags {
  margin-bottom: 0;
}

.page-products .cat-band .wrap {
  position: relative;
  z-index: 1;
}

.page-products .cat-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--sand) 0 6px, transparent 6px 18px);
  opacity: 0.55;
}

.page-products .cat-band:first-of-type::before {
  opacity: 0.8;
}

.page-products .route-key {
  letter-spacing: 0.05em;
}

.page-products .cat-hero-lead {
  text-wrap: pretty;
}

.page-products .tail-text {
  text-wrap: pretty;
}

.page-products .path-table {
  font-variant-numeric: tabular-nums;
}

.page-products .band-num {
  contain: layout paint;
}

.page-products .gauge-item .gauge-name {
  font-family: var(--font-body);
}

.page-products .cat-tail .tail-card {
  background-image: linear-gradient(180deg, #fffdf8 0%, #fdf8ee 100%);
}

.page-products .cat-section .overview-media .media-caption {
  margin-top: 0;
}

.page-products .step-title::after {
  line-height: 1;
}

.page-products .fallback-list li {
  padding-left: 2px;
}

.page-products .cat-band--tint .route-item {
  border-top-color: rgba(91, 102, 112, 0.24);
}

.page-products .cat-band--tint .cadence {
  background: var(--night);
}

.page-products .path-table thead th:nth-child(4) {
  color: var(--coral-soft);
}

.page-products .tail-links a {
  text-align: center;
}

@media (max-width: 560px) {
  .page-products .tail-links a {
    flex: 1 1 100%;
  }
}

.page-products .cat-hero-copy {
  min-width: 0;
}

.page-products .cat-section .overview-media {
  box-shadow: 6px 6px 0 rgba(216, 168, 85, 0.15);
}

.page-products .help-topic {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-products .judge-text {
  max-width: 42em;
}

.page-products .band-body .band-tags:last-child {
  margin-top: 18px;
}

.page-products .overview-grid .judge-list {
  padding-top: 2px;
}

.page-products .cat-band-inner {
  row-gap: clamp(14px, 2.4vw, 24px);
}

.page-products .path-table tbody th,
.page-products .path-table tbody td {
  padding-block: 13px;
}

.page-products .gauge-note {
  margin-bottom: 0;
}

.page-products .cat-hero .cat-jump .jump-link {
  line-height: 1.4;
}

.page-products .tree-panel .tree-svg {
  margin-bottom: 0;
}

.page-products .band-lead + .route-list {
  margin-top: 4px;
}

.page-products .name-rule .rule-row + .rule-row {
  margin-top: 0;
}

.page-products .cat-tail .tail-card .tail-links {
  row-gap: 8px;
}

.page-products .step-details > .step-note:first-of-type {
  margin-top: 10px;
}

.page-products .cadence-line .cadence-key + * {
  vertical-align: baseline;
}

@media (min-width: 900px) {
  .page-products .band-lead {
    margin-bottom: 22px;
  }
}

.page-products .cat-band--tint .fallback {
  background: rgba(255, 253, 248, 0.7);
}

.page-products .cat-gauge .gauge-ruler + .gauge-note {
  margin-top: 12px;
}

.page-products .overview-head p {
  line-height: 1.85;
}

.page-products .judge-item .judge-tag + .judge-text {
  margin-top: 6px;
}

.page-products .band-media.media-frame--square img {
  aspect-ratio: 1 / 1;
}

.page-products .table-scroll {
  background-clip: padding-box;
}

.page-products .cat-section .table-scroll {
  margin-top: 4px;
}

.page-products .band-num {
  opacity: 0.95;
}

.page-products .cat-hero h1 {
  font-weight: 900;
}

.page-products .band-body h2 {
  font-weight: 700;
}

.page-products .overview-head h2 {
  font-weight: 700;
}

.page-products .tail-card {
  border-left: 1px solid var(--line);
}

.page-products .wrap.cat-tail {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .cat-hero .wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .cat-band .wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .wrap.crumbs-row {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .cat-band .wrap.cat-band-inner {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .cat-hero .wrap.cat-hero-grid {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-products .cat-section .overview-head {
  padding-left: 14px;
}

.page-products .cat-hero .cat-jump {
  max-width: 520px;
}

.page-products .cat-gauge .gauge-item .gauge-name {
  line-height: 1.4;
}

.page-products .band-num {
  font-feature-settings: "tnum" 1;
}

.page-products .cat-band--tint .band-num {
  -webkit-text-stroke-color: rgba(14, 46, 69, 0.3);
}

.page-products .overview-grid .tree-panel .tree-label {
  dominant-baseline: middle;
}

.page-products .fallback .fallback-list {
  margin-bottom: 0;
}

.page-products .step .step-details[open] .step-note {
  animation: none;
}

.page-products .cat-tail .tail-card .tail-links .btn {
  border-radius: 2px;
}

.page-products .cat-hero-copy .eyebrow + h1 {
  margin-top: 0;
}

.page-products .band-body > .band-tags + .band-tags {
  margin-top: 8px;
}

.page-products .help-topics .help-topic:last-child {
  border-bottom-color: var(--line);
}

.page-products .cat-section#paths .overview-head p {
  max-width: 52em;
}

.page-products .cat-band .band-aside .aside-note a {
  font-weight: 500;
}

.page-products .path-table thead th {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.page-products .gauge-item {
  background: rgba(255, 255, 255, 0.02);
}

.page-products .cat-band--tint .band-media {
  box-shadow: 5px 5px 0 rgba(91, 102, 112, 0.12);
}

.page-products .cat-band:target .band-body h2 {
  color: var(--coral);
}

.page-products .tree-panel .tree-minor {
  stroke: none;
}

.page-products .cat-hero .cat-hero-lead a:hover {
  color: var(--paper);
}

@media (min-width: 900px) {
  .page-products .cat-band--tint .band-aside {
    align-self: center;
  }
}

.page-products .step-title {
  font-family: var(--font-body);
}

.page-products .overview-head .index-num {
  font-family: var(--font-mono);
}

.page-products .band-num {
  font-family: var(--font-mono);
}

.page-products .gauge-num {
  font-family: var(--font-mono);
}

.page-products .route-key {
  font-family: var(--font-mono);
}

.page-products .tail-eyebrow {
  font-family: var(--font-mono);
}

.page-products .band-meta {
  text-transform: uppercase;
}

.page-products .path-table tbody td:nth-child(4) {
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-products .wrap.cat-section#paths {
  padding-top: clamp(30px, 5vw, 60px);
}

.page-products .cat-band-inner--flip .band-aside .media-frame {
  margin-top: 2px;
}

.page-products .judge-item .judge-text {
  color: var(--ink);
}

.page-products .cat-band--tint .help-topic {
  background: #fffdf8;
}

.page-products .cat-hero .cat-jump .jump-link:hover .jump-num {
  color: var(--paper);
}

.page-products .fallback-list li a {
  font-weight: 500;
}

.page-products .cat-tail .tail-card .tail-eyebrow + .tail-text {
  margin-top: 0;
}

.page-products .path-table tbody tr {
  transition: background 0.18s var(--ease);
}

.page-products .cat-gauge {
  box-shadow: 4px 4px 0 rgba(7, 26, 40, 0.35);
}

.page-products .tree-panel {
  box-shadow: 4px 4px 0 rgba(216, 168, 85, 0.14);
}

.page-products .judge-item {
  box-shadow: 3px 3px 0 rgba(216, 168, 85, 0.1);
}

.page-products .cat-band--tint .judge-item {
  background: #fffdf8;
}

.page-products .cat-hero .cat-jump li:first-child .jump-link {
  border-left-color: var(--coral);
}

.page-products .cat-hero .cat-jump li:nth-child(2) .jump-link {
  border-left-color: var(--coral-soft);
}

.page-products .cat-hero .cat-jump li:nth-child(3) .jump-link {
  border-left-color: var(--sand);
}

.page-products .cat-hero .cat-jump li:nth-child(4) .jump-link {
  border-left-color: var(--mist);
}

.page-products .overview-head {
  margin-bottom: clamp(18px, 3vw, 30px);
}

@media (min-width: 1024px) {
  .page-products .cat-section {
    padding-top: clamp(48px, 6vw, 80px);
  }
}

.page-products .band-lead,
.page-products .overview-head p,
.page-products .step-note,
.page-products .route-item p,
.page-products .rule-row dd,
.page-products .fallback-list li,
.page-products .tail-text {
  text-wrap: pretty;
}

.page-products .cat-band,
.page-products .cat-section,
.page-products .cat-hero,
.page-products .cat-tail {
  max-width: 100%;
}

.page-products .path-table tbody th {
  background: transparent;
}

.page-products .cat-band--tint + .cat-band--tint {
  border-top: 1px solid rgba(216, 168, 85, 0.4);
}

.page-products .gauge-list .gauge-item {
  list-style: none;
}

.page-products .cat-gauge .gauge-head span:last-child {
  color: var(--coral-soft);
}

.page-products .step-details summary::-webkit-details-marker {
  display: none;
}

.page-products .step-details summary {
  list-style: none;
}

.page-products .help-topic .mono {
  min-width: 1.2em;
}

.page-products .cat-hero-lead {
  letter-spacing: 0.01em;
}

.page-products .band-body h2 + .band-lead {
  margin-top: 0;
}

.page-products .overview-head h2 {
  margin-top: 0;
}

.page-products .cat-tail .tail-card {
  border-right: 0;
  border-top-width: 4px;
}

.page-products .media-frame {
  border-radius: 2px;
}

.page-products .cat-band--tint .band-tags .tag--mist {
  border-color: rgba(91, 102, 112, 0.2);
}

.page-products .path-table td:last-child {
  font-weight: 500;
}

.page-products .cat-hero .cat-hero-copy .cat-jump {
  margin-top: 0;
}

.page-products .fallback-list li:first-child {
  margin-top: 0;
}

.page-products .judge-list .judge-item:last-child {
  margin-bottom: 0;
}

.page-products .tree-panel .tree-note {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.page-products .band-aside .media-frame + .aside-note {
  margin-top: 12px;
}

.page-products .cadence-line:first-child .cadence-key {
  background: var(--coral);
}

.page-products .cadence-line:last-child .cadence-key {
  background: var(--coral-soft);
  color: #4a2214;
}

.page-products .path-table thead th:first-child {
  color: #f3ecdd;
}

@media (min-width: 900px) {
  .page-products .cat-band--tint .band-body {
    padding-top: 2px;
  }
}

.page-products .cat-tail .tail-card .tail-links {
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}

.page-products .cat-tail .tail-links {
  margin-top: 2px;
}

.page-products .cat-hero .cat-jump li:last-child .jump-link {
  border-right: 1px solid rgba(216, 168, 85, 0.35);
}

.page-products .overview-grid .judge-list li:first-child .judge-tag {
  color: var(--deep);
  background: rgba(242, 101, 63, 0.16);
}

.page-products .tree-label {
  font-family: var(--font-body);
}

.page-products .cat-section .index-num {
  margin-bottom: 8px;
}

.page-products .media-caption {
  margin-top: 8px;
}

.page-products .band-tags .tag {
  line-height: 1.5;
}

.page-products .step-note {
  color: var(--rock);
}

.page-products .cat-band--tint .band-lead {
  color: var(--ink);
}

.page-products .cat-tail {
  margin-top: 2px;
}

.page-products .wrap.cat-tail {
  max-width: var(--wrap);
  margin-inline: auto;
}

.page-products .cat-band .wrap {
  margin-inline: auto;
}

.page-products .cat-hero .wrap {
  margin-inline: auto;
}

.page-products .cat-section {
  margin-inline: auto;
}

.page-products .band-num {
  will-change: auto;
}

.page-products .gauge-item {
  border-bottom: 1px solid rgba(216, 168, 85, 0.16);
}

.page-products .path-table tbody th,
.page-products .path-table tbody td {
  font-size: 14px;
}

.page-products .cat-hero-lead {
  color: #d4dde1;
}

/* 最终：移动端防溢出与栅格收敛 */
@media (max-width: 899px) {
  .page-products .cat-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .band-num {
    justify-self: start;
  }

  .page-products .cat-gauge {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .page-products .cat-band-inner {
    align-items: start;
  }
}

.page-products .path-table caption {
  white-space: nowrap;
}

.page-products .cat-gauge .gauge-item:last-child {
  border-bottom: 0;
}

.page-products .step .step-details {
  border-bottom-color: var(--line);
}

.page-products .cat-hero .eyebrow {
  font-size: 11.5px;
}

.page-products .overview-media .media-caption {
  margin-top: 6px;
}

.page-products .band-body .band-tags .tag--coral {
  background: var(--coral);
}

.page-products .cat-band--tint .route-key {
  background: var(--deep);
  color: var(--paper);
}

.page-products .cat-tail .tail-card {
  box-shadow: 5px 5px 0 rgba(216, 168, 85, 0.2);
}

.page-products .cat-section#paths .table-scroll {
  box-shadow: 4px 4px 0 rgba(216, 168, 85, 0.12);
}

.page-products .cat-hero {
  overflow: hidden;
}

.page-products .cat-hero-grid > * {
  min-width: 0;
}

.page-products .judge-text,
.page-products .band-lead {
  overflow-wrap: anywhere;
}

.page-products .wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}

.page-products .band-num {
  max-width: 100%;
}

.page-products .cat-band-inner .band-num {
  overflow: hidden;
}

.page-products .cat-section {
  width: 100%;
}

.page-products .path-table {
  table-layout: auto;
}

.page-products .cat-tail .tail-card {
  overflow: hidden;
}

.page-products .fallback-list {
  padding-inline-start: 22px;
}

@media (min-width: 900px) {
  .page-products .band-num {
    line-height: 0.78;
  }
}

.page-products .gauge-ruler {
  height: 10px;
}

.page-products .tree-svg {
  max-height: 320px;
}

.page-products .help-topic span.mono:first-child {
  color: var(--mist);
}

.page-products .cat-band--tint .step-title {
  color: var(--deep);
}

.page-products .cat-band--tint .fallback-title {
  color: var(--deep);
}

.page-products .cat-hero .cat-jump .jump-link {
  padding-block: 11px;
}

.page-products .overview-head .index-num {
  opacity: 1;
}

.page-products .band-aside .media-frame {
  border: 1px solid var(--line);
}

.page-products .cat-hero .jump-link:hover .jump-name {
  color: #fff;
}

.page-products .cat-tail .tail-card .btn--coral {
  background: var(--coral);
  border: 1px solid var(--coral);
}

.page-products .cat-tail .tail-card .btn--coral:hover {
  background: #d9532f;
  border-color: #d9532f;
}

.page-products .path-table tbody tr:last-child td {
  color: var(--deep);
}

/* end */
<main id="main-content" class="page-products">
  <div class="wrap crumbs-row">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
        <li class="breadcrumb-item"><span class="breadcrumb-current">内容目录</span></li>
      </ol>
    </nav>
  </div>

  <section class="cat-hero">
    <div class="wrap cat-hero-grid">
      <div class="cat-hero-copy">
        <p class="eyebrow cat-eyebrow">目录索引 · 代号 02—05</p>
        <h1>内容目录</h1>
        <p class="cat-hero-lead">缺什么就翻哪一格：第 2 格找下载，第 3 格办登录，第 4 格对版本，第 5 格查说明。澳发服务平台把这四格按顺序排在一条顺手的位置上，你不必在首页反复试，直接跳到对应序号就能开始。</p>
        <ul class="cat-jump">
          <li><a class="jump-link" href="#band-download"><span class="jump-num mono">02</span><span class="jump-name">资源下载</span></a></li>
          <li><a class="jump-link" href="#band-login"><span class="jump-num mono">03</span><span class="jump-name">注册登录</span></a></li>
          <li><a class="jump-link" href="#band-version"><span class="jump-num mono">04</span><span class="jump-name">版本文件</span></a></li>
          <li><a class="jump-link" href="#band-help"><span class="jump-num mono">05</span><span class="jump-name">帮助说明</span></a></li>
        </ul>
      </div>

      <div class="cat-gauge">
        <div class="gauge-head">
          <span>全目录 12 栏</span>
          <span>主刻度 02—05</span>
        </div>
        <ol class="gauge-list">
          <li class="gauge-item"><span class="gauge-num">02</span><span class="gauge-name">资源下载</span></li>
          <li class="gauge-item"><span class="gauge-num">03</span><span class="gauge-name">注册登录</span></li>
          <li class="gauge-item"><span class="gauge-num">04</span><span class="gauge-name">版本文件</span></li>
          <li class="gauge-item"><span class="gauge-num">05</span><span class="gauge-name">帮助说明</span></li>
        </ol>
        <div class="gauge-ruler" aria-hidden="true"></div>
        <p class="gauge-note">有明确目标的访客，在目录里平均 2 分 40 秒就能找到要的东西。</p>
      </div>
    </div>
  </section>

  <section class="wrap cat-section" id="overview">
    <div class="overview-head">
      <span class="index-num mono">01</span>
      <h2>先确认自己缺的是哪一格</h2>
      <p>澳发平台内容目录一共 12 个栏目，第 2 到第 5 格是日常用得最多的四格；其余 8 个栏目放的是平台介绍、合作方式与支持类内容，临时找文件的人基本不用往那边走。对一眼自己的处境，就知道该点哪一号。</p>
    </div>

    <figure class="media-frame media-frame--wide overview-media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="内容目录分层结构示意，深海蓝底上以沙金连线串起十二个栏目，序号二至五用珊瑚橙高亮">
      <figcaption class="media-caption">四个核心分区按序号排在同一条主线上，越靠前的序号对应越常被翻的内容。</figcaption>
    </figure>

    <div class="overview-grid">
      <ul class="judge-list">
        <li class="judge-item">
          <span class="judge-tag mono">情形 A</span>
          <p class="judge-text">手上有一串版本号，想确认它属于哪条产品线、还需不需要更新——从序号 2 进。</p>
        </li>
        <li class="judge-item">
          <span class="judge-tag mono">情形 B</span>
          <p class="judge-text">刚换了平板或新设备，原来的登录状态没了——从序号 3 进，照着四步走。</p>
        </li>
        <li class="judge-item">
          <span class="judge-tag mono">情形 C</span>
          <p class="judge-text">使用中遇到一句看不懂的报错，想知道先做什么——从序号 5 进，按主题找。</p>
        </li>
      </ul>

      <div class="tree-panel">
        <svg class="tree-svg" viewBox="0 0 560 340" role="img" aria-label="内容目录结构示意：十二个栏目中序号二至五为核心分区">
          <rect class="tree-root-box" x="16" y="140" width="88" height="60" rx="4"></rect>
          <text class="tree-root-text" x="60" y="176">12 栏</text>
          <g class="tree-lines">
            <path d="M104 170 H150"></path>
            <path d="M150 60 V300"></path>
            <path d="M150 60 H238"></path>
            <path d="M150 140 H238"></path>
            <path d="M150 220 H238"></path>
            <path d="M150 300 H238"></path>
          </g>
          <circle class="tree-minor" cx="150" cy="100" r="4"></circle>
          <circle class="tree-minor" cx="150" cy="180" r="4"></circle>
          <circle class="tree-minor" cx="150" cy="260" r="4"></circle>
          <circle class="tree-dot" cx="246" cy="60" r="8"></circle>
          <circle class="tree-dot" cx="246" cy="140" r="8"></circle>
          <circle class="tree-dot" cx="246" cy="220" r="8"></circle>
          <circle class="tree-dot" cx="246" cy="300" r="8"></circle>
          <text class="tree-label" x="266" y="66">02 资源下载</text>
          <text class="tree-label" x="266" y="146">03 注册登录</text>
          <text class="tree-label" x="266" y="226">04 版本文件</text>
          <text class="tree-label" x="266" y="306">05 帮助说明</text>
        </svg>
        <p class="tree-note mono">雾青小点：其余 8 个栏目</p>
      </div>
    </div>
  </section>

  <section class="cat-band cat-band--tint" id="band-download">
    <div class="wrap cat-band-inner">
      <div class="band-num" aria-hidden="true">02</div>
      <div class="band-body">
        <p class="band-meta mono">序号 02 · 资源下载</p>
        <h2>860 份文件，按 6 条产品线分开摆</h2>
        <p class="band-lead">资源下载分区收录的 860 份版本文件分属 6 条产品线，同一条线的文件单独成组，组内按上传时间从新到旧排。想翻得快，先看手上有什么线索，再挑一种翻法。</p>
        <ul class="route-list">
          <li class="route-item">
            <span class="route-key mono">按产品线</span>
            <p>知道自己用哪条产品线，点进分组后看到的全是这条线的文件，两步到位。</p>
          </li>
          <li class="route-item">
            <span class="route-key mono">按版本号</span>
            <p>文件开头是产品线代码，后面的数字段越大越接近当前版本，拿手上的编号对一下就清楚。</p>
          </li>
          <li class="route-item">
            <span class="route-key mono">按更新时间</span>
            <p>只想拿最新一版，每条分组顶部就是最近上传的那份，不用往下翻。</p>
          </li>
        </ul>
        <p class="band-tags">
          <span class="tag tag--coral">860 份版本文件</span>
          <span class="tag">6 条产品线</span>
          <span class="tag tag--mist">三种翻法任选</span>
        </p>
      </div>
      <div class="band-aside">
        <figure class="media-frame band-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="版本文件按产品线分组的抽象特写，米白标签与雾青版本号条并列排列" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="cat-band" id="band-login">
    <div class="wrap cat-band-inner cat-band-inner--flip">
      <div class="band-num" aria-hidden="true">03</div>
      <div class="band-body">
        <p class="band-meta mono">序号 03 · 注册登录</p>
        <h2>换设备的登录入口，就在这一格</h2>
        <p class="band-lead">注册、登录、身份验证与设备切换都收在第 3 格。澳发平台平板换设备后重新登录这件事，走的也是同一个入口，不需要另外找页面。</p>

        <ol class="step-list">
          <li class="step">
            <details class="step-details">
              <summary class="step-title">在平板上打开第 3 格的登录入口</summary>
              <p class="step-note">优先用平板自带的浏览器；从聊天工具里点开的页面经常卡在验证环节。</p>
            </details>
          </li>
          <li class="step">
            <details class="step-details">
              <summary class="step-title">填原来的账号和密码</summary>
              <p class="step-note">和手机上用的是同一个账号，不必重新注册，也别急着改密码。</p>
            </details>
          </li>
          <li class="step">
            <details class="step-details">
              <summary class="step-title">走一次身份验证</summary>
              <p class="step-note">验证信息可能稍有延迟，一分钟内没到先别反复点击，稍等再试一次即可。</p>
            </details>
          </li>
          <li class="step">
            <details class="step-details">
              <summary class="step-title">回到上次翻到的地方</summary>
              <p class="step-note">登录后会记住你所在的栏目，直接从断掉的位置继续往下看。</p>
            </details>
          </li>
        </ol>

        <p class="band-tags">
          <span class="tag tag--coral">四步</span>
          <span class="tag">多数访客 90 秒内完成</span>
          <span class="tag tag--mist">适配平板</span>
        </p>
      </div>
      <div class="band-aside">
        <figure class="media-frame band-media">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="四步登录流程示意图，圆形节点以虚线相连，旁边是平板的抽象几何轮廓" loading="lazy" decoding="async">
        </figure>
        <p class="aside-note">验证环节卡住时，先确认浏览器是否允许弹窗，再去<a href="/faq/">疑问解答</a>看有没有同款情况。</p>
      </div>
    </div>
  </section>

  <section class="cat-band cat-band--tint" id="band-version">
    <div class="wrap cat-band-inner">
      <div class="band-num" aria-hidden="true">04</div>
      <div class="band-body">
        <p class="band-meta mono">序号 04 · 版本文件</p>
        <h2>看文件名，就知道新旧</h2>
        <p class="band-lead">版本文件翻查不难，难的是分清哪一份该装。文件名由三段组成，看开头知道属于哪条产品线，看数字段决定先后，末位的修订号只在细节修补时才变。</p>
        <dl class="name-rule">
          <div class="rule-row">
            <dt class="mono">前段 · 产品线代码</dt>
            <dd>对应资源下载里 6 条产品线之一，同一代码下的文件可以放心放在一起看。</dd>
          </div>
          <div class="rule-row">
            <dt class="mono">中段 · 版本数字</dt>
            <dd>数字大的比数字小的新；跨产品线比较数字没有意义，只在同一条线内看。</dd>
          </div>
          <div class="rule-row">
            <dt class="mono">末段 · 修订号</dt>
            <dd>小修补只动末位，主体功能不变，已经装好的人按需更新即可。</dd>
          </div>
        </dl>
        <div class="cadence">
          <p class="cadence-line"><span class="cadence-key mono">常规</span>每月固定更新两次，改完就上架，不设固定公告日。</p>
          <p class="cadence-line"><span class="cadence-key mono">紧急</span>影响正常使用的故障，确认后 24 小时内会挂出修复版本。</p>
        </div>
      </div>
      <div class="band-aside">
        <figure class="media-frame band-media">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="版本分支树的抽象图示，节点标注版本序号，沙金与浅珊瑚形成新旧对比" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="cat-band" id="band-help">
    <div class="wrap cat-band-inner cat-band-inner--flip">
      <div class="band-num" aria-hidden="true">05</div>
      <div class="band-body">
        <p class="band-meta mono">序号 05 · 帮助说明</p>
        <h2>210 条说明，分成 9 个主题</h2>
        <p class="band-lead">账号与登录、文件下载、版本挑选、设备适配、报错处理，这 9 个主题下累计 210 条说明，每月还会新增 8 到 12 条。多数情况从主题名就能猜到该点哪一条。</p>
        <ul class="help-topics">
          <li class="help-topic"><span class="mono">A</span>账号与登录：注册、验证、设备切换</li>
          <li class="help-topic"><span class="mono">B</span>文件与版本：下载、命名、更新节奏</li>
          <li class="help-topic"><span class="mono">C</span>设备与适配：平板、手机、桌面端差异</li>
          <li class="help-topic"><span class="mono">D</span>异常与处理：报错提示、页面打不开</li>
        </ul>
        <div class="fallback">
          <p class="fallback-title mono">条目标题对不上时，按这个顺序走</p>
          <ol class="fallback-list">
            <li>换一个更短的词再搜一次，比如只搜「登录」而不带设备名。</li>
            <li>转到<a href="/faq/">疑问解答</a>，那里有临时查信息适配清单，按场景列好了需要准备的信息。</li>
            <li>仍然没有答案，就<a href="/contact/">联系我们</a>，把产品线、版本号和设备型号一并写上，回复会快很多。</li>
          </ol>
        </div>
      </div>
      <div class="band-aside">
        <figure class="media-frame media-frame--square band-media">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="帮助说明的层叠索引卡片特写，纸张质感，雾青主题标签逐层露出" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="wrap cat-section" id="paths">
    <div class="overview-head">
      <span class="index-num mono">06</span>
      <h2>常见任务，几步能办完</h2>
      <p>把常被问到的几件事拆成路径，出发点和大致步数都写清楚。照着走，多数任务在两分钟内收尾。</p>
    </div>

    <div class="table-scroll">
      <table class="path-table">
        <caption class="visually-hidden">常见任务对应的目录起点、步数与参考耗时</caption>
        <thead>
          <tr>
            <th scope="col">要办的事</th>
            <th scope="col">从哪开始</th>
            <th scope="col">大致步数</th>
            <th scope="col">参考耗时</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">确认手上版本号属于哪条产品线</th>
            <td>序号 2 资源下载</td>
            <td>2 步</td>
            <td>约 1 分钟</td>
          </tr>
          <tr>
            <th scope="row">换平板后重新登录</th>
            <td>序号 3 注册登录</td>
            <td>4 步</td>
            <td>多数 90 秒内</td>
          </tr>
          <tr>
            <th scope="row">拿某条产品线的最新版本</th>
            <td>序号 2 资源下载</td>
            <td>3 步</td>
            <td>约 2 分钟</td>
          </tr>
          <tr>
            <th scope="row">查一句报错提示该怎么处理</th>
            <td>序号 5 帮助说明</td>
            <td>2 步</td>
            <td>约 1 分半</td>
          </tr>
          <tr>
            <th scope="row">主题里找不到对应条目</th>
            <td>序号 5 → 疑问解答</td>
            <td>3 步</td>
            <td>约 2 分钟</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section class="wrap cat-tail">
    <div class="tail-card">
      <p class="tail-eyebrow mono">还没找到？</p>
      <p class="tail-text">目录里翻不到的东西，通常能在另外几处找到说明。文件怎么用、能引到哪里，看访问说明；站内目录怎么调整、最近有什么变化，看品牌日志。</p>
      <div class="tail-links">
        <a class="btn btn--coral btn--sm" href="/faq/">看疑问解答</a>
        <a class="btn btn--ghost btn--sm" href="/journal/">翻品牌日志</a>
        <a class="btn btn--ghost btn--sm" href="/instructions/">读访问说明</a>
        <a class="btn btn--ghost btn--sm" href="/contact/">联系我们</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  --band-tint: #efe7d7;
  --band-tint-top: #f4eee1;
  background: var(--paper);
  color: var(--ink);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.page-products *,
.page-products *::before,
.page-products *::after {
  box-sizing: border-box;
}

.page-products .crumbs-row {
  padding-top: clamp(14px, 2.5vw, 24px);
  padding-bottom: clamp(10px, 2vw, 16px);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(111, 168, 160, 0.3), transparent 62%),
    linear-gradient(155deg, var(--deep) 0%, var(--night) 100%);
  color: #f2ece1;
  padding: clamp(26px, 5vw, 56px) 0 clamp(30px, 5vw, 64px);
  border-bottom: 1px solid rgba(216, 168, 85, 0.4);
}

.page-products .cat-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--sand) 0 2px, transparent 2px 14px);
  opacity: 0.5;
}

.page-products .cat-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-products .cat-hero-grid > * {
  min-width: 0;
}

.page-products .cat-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--sand);
}

.page-products .cat-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #fbf6ec;
  text-wrap: balance;
}

.page-products .cat-hero-lead {
  margin: 0 0 22px;
  max-width: 34em;
  font-size: clamp(14.5px, 2vw, 17px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: #d4dde1;
  text-wrap: pretty;
}

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

.page-products .cat-jump li {
  min-width: 0;
}

.page-products .jump-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(216, 168, 85, 0.35);
  border-left: 3px solid var(--coral);
  background: rgba(7, 26, 40, 0.35);
  color: #f2ece1;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-products .cat-jump li:nth-child(2) .jump-link {
  border-left-color: var(--coral-soft);
}

.page-products .cat-jump li:nth-child(3) .jump-link {
  border-left-color: var(--sand);
}

.page-products .cat-jump li:nth-child(4) .jump-link {
  border-left-color: var(--mist);
}

.page-products .jump-link:hover,
.page-products .jump-link:focus-visible {
  background: rgba(242, 101, 63, 0.16);
  border-color: var(--coral);
}

.page-products .jump-link:hover .jump-name {
  color: #fff;
}

.page-products .jump-num {
  flex: none;
  font-size: 12px;
  color: var(--coral-soft);
}

.page-products .jump-name {
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- 刻度尺 ---------- */
.page-products .cat-gauge {
  width: 100%;
  overflow: hidden;
  padding: 16px clamp(12px, 2.4vw, 22px) 18px;
  border: 1px solid rgba(216, 168, 85, 0.42);
  background: rgba(7, 26, 40, 0.5);
  box-shadow: 4px 4px 0 rgba(7, 26, 40, 0.35);
}

.page-products .gauge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}

.page-products .gauge-head span:last-child {
  color: var(--coral-soft);
}

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

.page-products .gauge-item {
  position: relative;
  min-width: 0;
  padding: 14px 8px 12px;
  list-style: none;
  border-top: 2px solid rgba(216, 168, 85, 0.32);
  border-bottom: 1px solid rgba(216, 168, 85, 0.16);
  background: rgba(255, 255, 255, 0.02);
}

.page-products .gauge-item:first-child {
  border-top-color: rgba(242, 101, 63, 0.7);
}

.page-products .gauge-item:last-child {
  border-bottom: 0;
}

.page-products .gauge-item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.page-products .gauge-num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1;
  color: var(--coral-soft);
}

.page-products .gauge-name {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #cfd9dd;
  overflow-wrap: anywhere;
}

.page-products .gauge-ruler {
  margin-top: 14px;
  height: 10px;
  border-top: 1px solid rgba(216, 168, 85, 0.3);
  border-bottom: 1px solid rgba(216, 168, 85, 0.35);
  background-image: repeating-linear-gradient(90deg, rgba(216, 168, 85, 0.55) 0 1px, transparent 1px 12px);
  opacity: 0.9;
}

.page-products .gauge-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 168, 85, 0.25);
  font-size: 12.5px;
  line-height: 1.7;
  color: #a9b8c0;
}

@media (min-width: 520px) {
  .page-products .gauge-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-products .cat-hero-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ---------- 章节 ---------- */
.page-products .cat-section {
  width: 100%;
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

.page-products .overview-head {
  max-width: 62ch;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-left: 14px;
  border-left: 3px solid var(--sand);
}

.page-products .overview-head .index-num {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  font-weight: 700;
  color: var(--sand);
}

.page-products .overview-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.4;
  color: var(--deep);
}

.page-products .overview-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  text-wrap: pretty;
}

.page-products .overview-media {
  margin: 0 0 clamp(20px, 3vw, 36px);
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(216, 168, 85, 0.15);
}

.page-products .overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  margin-bottom: clamp(6px, 1.6vw, 12px);
}

.page-products .overview-grid > * {
  min-width: 0;
}

.page-products .judge-list {
  list-style: none;
  margin: 0;
  padding: 2px 0 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .judge-item {
  position: relative;
  padding: 14px 16px 14px 18px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mist);
  box-shadow: 3px 3px 0 rgba(216, 168, 85, 0.1);
}

.page-products .judge-item:first-child {
  border-left-color: var(--coral);
}

.page-products .judge-item:hover {
  border-left-color: var(--coral);
}

.page-products .judge-tag {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(111, 168, 160, 0.16);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rock);
}

.page-products .judge-list li:first-child .judge-tag {
  background: rgba(242, 101, 63, 0.16);
  color: var(--deep);
}

.page-products .judge-text {
  margin: 6px 0 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.page-products .tree-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: clamp(12px, 2.4vw, 20px);
  border: 1px solid var(--line);
  background: #fffdf8;
  box-shadow: 4px 4px 0 rgba(216, 168, 85, 0.14);
}

.page-products .tree-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 320px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.page-products .tree-svg text {
  dominant-baseline: middle;
}

.page-products .tree-root-box {
  fill: var(--deep);
}

.page-products .tree-root-text {
  font-family: var(--font-mono);
  font-size: 17px;
  fill: var(--paper);
  text-anchor: middle;
}

.page-products .tree-lines path {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.page-products .tree-minor {
  fill: var(--mist);
  stroke: none;
}

.page-products .tree-dot {
  fill: var(--coral);
  transition: fill 0.24s var(--ease);
}

.page-products .tree-panel:hover .tree-dot {
  fill: var(--coral-soft);
}

.page-products .tree-label {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.01em;
  fill: var(--deep);
}

.page-products .tree-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--rock);
}

@media (min-width: 860px) {
  .page-products .overview-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-products .overview-head {
    padding-left: 18px;
  }
}

/* ---------- 横向长条 ---------- */
.page-products .cat-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(28px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--line);
}

.page-products .cat-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--sand) 0 6px, transparent 6px 18px);
  opacity: 0.55;
}

.page-products .cat-band:first-of-type::before {
  opacity: 0.8;
}

.page-products .cat-band:last-of-type {
  border-bottom: 1px solid var(--line);
}

.page-products .cat-band--tint {
  background: linear-gradient(180deg, var(--band-tint-top) 0%, var(--band-tint) 100%);
}

.page-products .cat-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 24px) clamp(16px, 3vw, 32px);
  position: relative;
}

.page-products .cat-band-inner > * {
  min-width: 0;
}

.page-products .band-num {
  order: -1;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(64px, 15vw, 128px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgba(14, 46, 69, 0.14);
  -webkit-text-stroke: 2px rgba(14, 46, 69, 0.38);
  pointer-events: none;
  user-select: none;
  transition: color 0.3s var(--ease), -webkit-text-stroke-color 0.3s var(--ease);
}

.page-products .cat-band--tint .band-num {
  color: rgba(14, 46, 69, 0.1);
  -webkit-text-stroke-color: rgba(14, 46, 69, 0.3);
}

.page-products .cat-band:hover .band-num,
.page-products .cat-band:target .band-num {
  color: rgba(242, 101, 63, 0.16);
  -webkit-text-stroke-color: var(--coral);
}

.page-products .band-body {
  min-width: 0;
}

.page-products .band-meta {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

.page-products .band-meta::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--coral);
}

.page-products .band-body h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 3.4vw, 28px);
  line-height: 1.4;
  color: var(--deep);
  text-wrap: balance;
}

.page-products .cat-band:target .band-body h2 {
  color: var(--coral);
}

.page-products .band-lead {
  margin: 0 0 18px;
  max-width: 36em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.page-products .band-tags {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .band-tags .tag {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.page-products .band-tags .tag--coral {
  background: var(--coral);
  color: #fff8f2;
}

.page-products .band-tags .tag--mist {
  border: 1px solid var(--mist);
  background: rgba(111, 168, 160, 0.14);
  color: var(--deep);
}

.page-products .band-aside {
  min-width: 0;
}

.page-products .band-aside .media-frame {
  margin: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  background: #fffdf8;
  box-shadow: 5px 5px 0 rgba(216, 168, 85, 0.16);
}

.page-products .cat-band--tint .band-media {
  box-shadow: 5px 5px 0 rgba(91, 102, 112, 0.12);
}

.page-products .aside-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rock);
}

.page-products .aside-note a,
.page-products .fallback-list a {
  color: var(--deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

.page-products .aside-note a:hover,
.page-products .fallback-list a:hover {
  color: var(--coral);
}

@media (min-width: 900px) {
  .page-products .cat-band-inner {
    grid-template-columns: 130px minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
    gap: clamp(20px, 3vw, 40px);
  }

  .page-products .cat-band-inner--flip {
    grid-template-columns: 130px minmax(0, 340px) minmax(0, 1fr);
  }

  .page-products .band-num {
    position: sticky;
    top: 88px;
    align-self: start;
    margin: 6px 0 0 -8px;
    font-size: clamp(96px, 9vw, 132px);
    line-height: 0.78;
  }

  .page-products .band-body {
    grid-column: 2;
  }

  .page-products .band-aside {
    grid-column: 3;
  }

  .page-products .cat-band-inner--flip .band-aside {
    grid-column: 2;
  }

  .page-products .cat-band-inner--flip .band-body {
    grid-column: 3;
  }

  .page-products .band-lead {
    margin-bottom: 22px;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .page-products .cat-band-inner {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 280px);
  }

  .page-products .cat-band-inner--flip {
    grid-template-columns: 96px minmax(0, 280px) minmax(0, 1fr);
  }

  .page-products .band-num {
    font-size: 92px;
  }
}

@media (max-width: 899px) {
  .page-products .band-aside {
    max-width: 520px;
  }
}

/* ---------- 三种翻法 ---------- */
.page-products .route-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .route-item {
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.page-products .route-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .cat-band--tint .route-item {
  border-top-color: rgba(91, 102, 112, 0.24);
}

.page-products .route-key {
  display: inline-block;
  padding: 3px 8px;
  background: var(--deep);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.page-products .route-item p {
  margin: 8px 0 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- 四步 ---------- */
.page-products .step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.page-products .step {
  position: relative;
  padding-left: 46px;
  padding-bottom: 12px;
  counter-increment: step;
}

.page-products .step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: var(--deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-products .step::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: 2px;
  border-left: 1px dashed var(--mist);
}

.page-products .step:last-child::after {
  display: none;
}

.page-products .step-details {
  padding-top: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.page-products .step-details summary {
  list-style: none;
}

.page-products .step-details summary::-webkit-details-marker {
  display: none;
}

.page-products .step-title {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-right: 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--deep);
  cursor: pointer;
}

.page-products .step-title::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--coral);
}

.page-products .step-details[open] .step-title::after {
  content: "–";
}

.page-products .step-title:hover,
.page-products .step-title:active {
  color: var(--coral);
}

.page-products .step-note {
  margin: 8px 0 0;
  max-width: 38em;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--rock);
  text-wrap: pretty;
}

.page-products .step-details > .step-note:first-of-type {
  margin-top: 10px;
}

/* ---------- 命名规则 ---------- */
.page-products .name-rule {
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .rule-row {
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--sand);
}

.page-products .name-rule .rule-row:last-child {
  border-left-color: var(--mist);
}

.page-products .rule-row dt {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--rock);
}

.page-products .rule-row dd {
  margin: 5px 0 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

.page-products .cadence {
  margin-top: 4px;
  padding: 16px 18px;
  border-left: 4px solid var(--coral);
  background: var(--deep);
}

.page-products .cat-band--tint .cadence {
  background: var(--night);
}

.page-products .cadence-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #e6e0d4;
}

.page-products .cadence-line + .cadence-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(216, 168, 85, 0.3);
}

.page-products .cadence-key {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--coral);
  color: #fff8f2;
}

.page-products .cadence-line:last-child .cadence-key {
  background: var(--coral-soft);
  color: #4a2214;
}

/* ---------- 帮助说明 ---------- */
.page-products .help-topics {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .help-topic {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fffdf8;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-products .help-topic:hover {
  border-color: var(--mist);
  background: #fff;
}

.page-products .help-topic .mono {
  flex: none;
  min-width: 1.2em;
  font-size: 12px;
  font-weight: 700;
  color: var(--mist);
}

.page-products .help-topics li:nth-child(even) .mono {
  color: var(--sand);
}

.page-products .fallback {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--mist);
  background: rgba(111, 168, 160, 0.08);
}

.page-products .fallback-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--deep);
}

.page-products .fallback-list {
  margin: 0;
  padding-inline-start: 22px;
  list-style: decimal;
  font-size: 14px;
  line-height: 1.8;
}

.page-products .fallback-list li {
  max-width: 40em;
  padding-left: 2px;
  text-wrap: pretty;
}

.page-products .fallback-list li + li {
  margin-top: 6px;
}

.page-products .fallback-list li::marker {
  color: var(--coral);
  font-size: 12px;
}

/* ---------- 表格 ---------- */
.page-products .table-scroll {
  margin-top: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: #fffdf8;
  box-shadow: 4px 4px 0 rgba(216, 168, 85, 0.12);
}

.page-products .path-table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.page-products .path-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-products .path-table thead th {
  padding: 12px 14px;
  border-bottom: 2px solid var(--coral);
  background: var(--night);
  color: #efe7d8;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
}

.page-products .path-table thead th:first-child {
  color: #f3ecdd;
}

.page-products .path-table thead th:nth-child(4) {
  color: var(--coral-soft);
}

.page-products .path-table tbody th,
.page-products .path-table tbody td {
  padding: 13px 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
  vertical-align: top;
}

.page-products .path-table tbody th {
  width: 34%;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--deep);
}

.page-products .path-table tbody td {
  color: var(--rock);
}

.page-products .path-table td:nth-child(2) {
  color: var(--deep);
}

.page-products .path-table td:nth-child(3),
.page-products .path-table td:nth-child(4) {
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-products .path-table tbody tr {
  transition: background 0.18s var(--ease);
}

.page-products .path-table tbody tr:nth-child(even) {
  background: rgba(220, 211, 196, 0.22);
}

.page-products .path-table tbody tr:hover {
  background: rgba(242, 101, 63, 0.07);
}

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

.page-products .path-table tbody tr:last-child td {
  color: var(--deep);
}

@media (min-width: 720px) {
  .page-products .path-table td:last-child {
    color: var(--coral);
    white-space: nowrap;
  }
}

/* ---------- 尾部入口 ---------- */
.page-products .cat-tail {
  padding-top: clamp(12px, 2.5vw, 24px);
  padding-bottom: clamp(24px, 4vw, 48px);
}

.page-products .tail-card {
  overflow: hidden;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-top: 4px solid var(--coral);
  background-image: linear-gradient(180deg, #fffdf8 0%, #fdf8ee 100%);
  box-shadow: 5px 5px 0 rgba(216, 168, 85, 0.2);
  transition: box-shadow 0.24s var(--ease);
}

.page-products .tail-card:hover {
  box-shadow: 6px 6px 0 rgba(216, 168, 85, 0.28);
}

.page-products .tail-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--rock);
}

.page-products .tail-eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 6px;
  background: var(--sand);
}

.page-products .tail-text {
  margin: 0 0 18px;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  text-wrap: pretty;
}

.page-products .tail-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.page-products .tail-links a {
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

.page-products .tail-links .btn {
  padding: 9px 16px;
  font-size: 13.5px;
}

.page-products .tail-links a.btn--coral {
  background: var(--coral);
  border: 1px solid var(--coral);
  color: #fff8f2;
}

.page-products .tail-links a.btn--coral:hover {
  background: #d9532f;
  border-color: #d9532f;
}

.page-products .tail-links a.btn--ghost {
  border: 1px solid var(--deep);
  background: transparent;
  color: var(--deep);
}

.page-products .tail-links a.btn--ghost:hover {
  background: var(--deep);
  color: var(--paper);
}

@media (max-width: 719px) {
  .page-products .tail-links a:last-child {
    margin-left: 0;
  }
}

@media (min-width: 720px) {
  .page-products .tail-links a:last-child {
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .page-products .tail-links a {
    flex: 1 1 100%;
  }

  .page-products .cat-hero-lead,
  .page-products .band-lead,
  .page-products .overview-head p {
    font-size: 14.5px;
  }

  .page-products .band-num {
    font-size: 64px;
  }

  .page-products .step {
    padding-left: 40px;
  }

  .page-products .step::before {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .page-products .step::after {
    left: 14px;
    top: 32px;
  }
}

@media (max-width: 380px) {
  .page-products .cat-jump {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .band-num {
    font-size: 54px;
  }
}

/* ---------- 图片 ---------- */
.page-products .media-frame {
  max-width: 100%;
}

.page-products .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.page-products .overview-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deep);
}

.page-products .band-media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper);
}

.page-products .media-frame--square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-products .media-caption {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--rock);
}

@media (prefers-reduced-motion: reduce) {
  .page-products .band-num,
  .page-products .jump-link,
  .page-products .tree-dot,
  .page-products .path-table tbody tr,
  .page-products .tail-card,
  .page-products .help-topic {
    transition: none;
  }
}