.page-products {
  position: relative;
  overflow-x: clip;
}

.page-products .section {
  scroll-margin-top: 96px;
}

/* ---------- 首屏：闸门式错位色块 ---------- */
.page-products .console-hero {
  padding-top: 32px;
}

.page-products .console-hero__grid {
  display: grid;
  gap: 30px;
}

.page-products .console-hero__copy h1 {
  margin: 14px 0 18px;
}

.page-products .console-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.page-products .console-hero__actions .hint {
  flex: 1 1 100%;
  margin: 4px 0 0;
}

.page-products .console-hero__gate {
  position: relative;
  min-height: 176px;
  border: 1px solid var(--ink-700);
  background-color: var(--ink-900);
  background-image:
    linear-gradient(var(--ink-700) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-700) 1px, transparent 1px);
  background-size: 96px 96px;
  overflow: hidden;
}

.page-products .console-hero__blade {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}

.page-products .console-hero__blade--a {
  left: -8%;
  width: 62%;
  background: var(--blue-600);
  opacity: .2;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

.page-products .console-hero__blade--b {
  right: -8%;
  width: 62%;
  background: var(--cyan-500);
  opacity: .16;
  clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
}

.page-products .console-hero__beam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--cyan-500) 24%, var(--cyan-500) 76%, transparent);
}

/* ---------- 左侧刻度 + 右侧宽面板 ---------- */
.page-products .console-grid {
  display: grid;
  gap: 22px;
}

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

.page-products .axis__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  font-size: 13px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-products .axis__num {
  color: var(--cyan-500);
  font-size: 12px;
}

.page-products .axis__label {
  color: var(--slate-400);
}

.page-products .axis__item.is-current {
  border-color: var(--cyan-500);
}

.page-products .axis__item.is-current .axis__label {
  color: var(--paper-050);
}

/* ---------- 核对面板 ---------- */
.page-products .checkpoint__list {
  margin: 16px 0 0;
}

.page-products .checkpoint__warn {
  margin-top: 24px;
}

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

/* ---------- 步进式排查 ---------- */
.page-products .stepper__bar,
.page-products .archive__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.page-products .stepper__btn,
.page-products .archive__btn {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--slate-400);
  background: transparent;
  border: 1px solid var(--ink-700);
  padding: 10px 14px;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-products .stepper__btn:hover,
.page-products .archive__btn:hover {
  color: var(--blue-300);
  border-color: var(--blue-600);
}

.page-products .stepper__btn[aria-pressed="true"],
.page-products .archive__btn[aria-pressed="true"] {
  color: var(--ink-950);
  background: var(--cyan-500);
  border-color: var(--cyan-500);
}

.page-products .stepper__panels {
  display: grid;
  gap: 16px;
}

.page-products .stepper__panels.is-switching {
  transition: opacity .18s var(--ease);
}

.page-products .stepper__panel {
  position: relative;
  padding: 22px 20px 24px;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.page-products .stepper__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cyan-500);
}

.page-products .stepper__panel h3 {
  margin: 0 0 10px;
}

.page-products .stepper__panel p {
  margin: 0 0 10px;
}

.page-products .step-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 9px;
  border: 1px solid var(--ink-700);
  color: var(--cyan-500);
  font-size: 12px;
}

.page-products .compat__fig,
.page-products .nodes__fig,
.page-products .platform__fig {
  margin-top: 28px;
}

.page-products .compat__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ---------- 节点与回退 ---------- */
.page-products .callout--wide {
  margin-bottom: 28px;
}

.page-products .node-steps {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .node-steps__item {
  position: relative;
  padding: 24px 20px 26px;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.page-products .node-steps__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 4px;
  background: var(--cyan-500);
}

.page-products .node-steps__idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  margin-bottom: 16px;
  padding: 0 8px;
  background: var(--ink-700);
  color: var(--cyan-500);
  font-size: 13px;
}

.page-products .node-steps__item h3 {
  margin: 0 0 10px;
}

.page-products .node-steps__item p {
  margin: 0;
}

.page-products .nodes__hint {
  margin-top: 20px;
}

/* ---------- 旧版本资料区 ---------- */
.page-products .archive__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-700);
}

.page-products .archive__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: baseline;
  padding: 15px 8px;
  border-bottom: 1px solid var(--ink-700);
  transition: background-color .18s var(--ease);
}

.page-products .archive__item:hover {
  background: var(--ink-900);
}

.page-products .archive__ver {
  color: var(--blue-300);
  font-size: 13px;
}

.page-products .archive__desc {
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.7;
}

.page-products .archive__stamp {
  grid-column: 2;
  justify-self: start;
}

.page-products .archive__body {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.page-products .archive__note h3 {
  margin: 0 0 12px;
}

.page-products .archive__note .hint {
  margin-top: 14px;
}

/* ---------- 两端分工 ---------- */
.page-products .platform-grid {
  display: grid;
  gap: 20px;
}

.page-products .platform-card h3 {
  margin: 14px 0 12px;
}

.page-products .platform-card .bullets {
  margin: 0;
}

.page-products .platform__hint {
  margin-top: 20px;
}

/* ---------- 桌面端栅格 ---------- */
@media (min-width: 760px) {
  .page-products .stepper__panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .archive__item {
    grid-template-columns: 96px minmax(0, 1fr) 84px;
    align-items: center;
  }

  .page-products .archive__stamp {
    grid-column: 3;
    justify-self: end;
  }
}

@media (min-width: 860px) {
  .page-products .node-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .page-products .node-steps__item + .node-steps__item::before {
    content: "";
    position: absolute;
    top: 42px;
    left: -28px;
    width: 28px;
    height: 1px;
    background: var(--cyan-500);
  }

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

@media (min-width: 960px) {
  .page-products .console-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: 52px;
  }

  .page-products .console-hero__gate {
    min-height: 260px;
  }

  .page-products .console-grid {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 38px;
    align-items: start;
  }

  .page-products .axis {
    position: sticky;
    top: 104px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-products .axis__item {
    position: relative;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--ink-700);
    padding: 12px 0 12px 14px;
  }

  .page-products .axis__item.is-current {
    border-left-color: var(--cyan-500);
  }

  .page-products .axis__item.is-current::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background: var(--cyan-500);
  }

  .page-products .archive__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 40px;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .axis__item,
  .page-products .stepper__btn,
  .page-products .archive__btn,
  .page-products .archive__item,
  .page-products .stepper__panels {
    transition: none;
  }
}