.page-products {
  padding-bottom: 0;
}

/* ===== 首屏：分屏叙事 + 口径快照 ===== */
.page-products .hero {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--ink-500);
  background: var(--ink-700);
  margin-top: var(--sp-4);
}

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

.page-products .hero__narr {
  padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 768px) {
  .page-products .hero__narr {
    padding: var(--sp-6) var(--sp-5);
  }
}

.page-products .hero__title {
  margin: var(--sp-3) 0 0;
  text-wrap: balance;
}

.page-products .hero__lead {
  margin-top: var(--sp-4);
  max-width: 38em;
}

.page-products .hero__body {
  margin-top: var(--sp-3);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.85;
  max-width: 40em;
}

.page-products .hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.page-products .hero__gauge {
  border-top: 1px solid var(--ink-500);
  padding: var(--sp-5) var(--sp-4);
  background-color: var(--ink-900);
}

@media (min-width: 960px) {
  .page-products .hero__gauge {
    border-top: 0;
    border-left: 1px solid var(--ink-500);
    padding: var(--sp-6) var(--sp-5);
  }
}

.page-products .grid-bg {
  background-image:
    linear-gradient(to right, rgba(36, 51, 79, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36, 51, 79, 0.55) 1px, transparent 1px);
  background-size: 88px 88px;
}

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

.page-products .gauge-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-500);
}

.page-products .gauge-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--ink-500);
}

.page-products .gauge-item__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  min-width: 72px;
  font-family: var(--font-mono);
}

.page-products .gauge-item__v {
  font-size: 26px;
  line-height: 1;
  color: var(--text-hi);
}

.page-products .gauge-item__v.num {
  color: var(--neon-cyan);
}

.page-products .gauge-item__u {
  font-size: 12px;
  color: var(--text-dim);
}

/* ===== 口径条 ===== */
.page-products .caliber-bar {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink-500);
  border-top: 0;
  background: var(--ink-900);
}

.page-products .caliber-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--ink-500);
  flex: 1 1 auto;
}

.page-products .caliber-group:last-child {
  border-right: 0;
}

.page-products .caliber-group__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
  margin-right: var(--sp-2);
}

.page-products .caliber-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding: 5px 10px;
  border: 1px solid var(--ink-500);
  white-space: nowrap;
}

.page-products .caliber-chip.is-active {
  color: var(--neon-cyan);
  border-color: var(--ink-500);
  box-shadow: inset 0 -2px 0 var(--neon-cyan);
}

/* ===== 章节头 ===== */
.page-products .sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-500);
  margin-bottom: var(--sp-5);
}

.page-products .sec-head--tight {
  margin-bottom: var(--sp-4);
}

.page-products .sec-head__meta {
  font-size: 12px;
  color: var(--slate-400);
  margin: 0;
}

/* ===== 图形容器 ===== */
.page-products .media__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .records-figure,
.page-products .seg-figure,
.page-products .compare-figure {
  margin: 0 0 var(--sp-5);
}

/* ===== 主表 ===== */
.page-products .records-panel {
  background: var(--paper-100);
  border: 1px solid var(--paper-line);
}

.page-products .records-panel .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .records-table {
  width: 100%;
  min-width: 900px;
}

.page-products .records-table__caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-4);
  color: var(--paper-ink);
  font-size: 13px;
  line-height: 1.7;
  border-bottom: 1px solid var(--paper-line);
}

.page-products .records-table th,
.page-products .records-table td {
  white-space: nowrap;
}

.page-products .seg-key {
  color: var(--gold-500);
  font-weight: 500;
}

.page-products .records-table tbody th[scope="row"] {
  color: var(--card-black);
}

.page-products .records-panel__foot {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--paper-line);
  color: var(--paper-ink);
}

/* ===== 字段字典 ===== */
.page-products .fields-block {
  margin-top: var(--sp-6);
}

.page-products .field-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink-500);
  border-left: 1px solid var(--ink-500);
}

@media (min-width: 640px) {
  .page-products .field-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .page-products .field-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-products .field-cell {
  border-right: 1px solid var(--ink-500);
  border-bottom: 1px solid var(--ink-500);
  padding: var(--sp-4);
  background: var(--ink-700);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-products .field-cell:hover {
  border-right-color: var(--neon-cyan);
  background: var(--ink-900);
}

.page-products .field-cell__no {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}

.page-products .field-cell__name {
  display: block;
  margin-top: var(--sp-2);
  font-size: 16px;
  color: var(--text-hi);
}

.page-products .field-cell__desc {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-body);
}

/* ===== 编号段横向带 ===== */
.page-products .band__item.seg-card {
  flex: 0 0 240px;
  width: 240px;
  border: 1px solid var(--ink-500);
  background: var(--ink-700);
  padding: var(--sp-4);
  box-sizing: border-box;
  transition: border-color var(--dur) var(--ease);
}

.page-products .band__item.seg-card:hover,
.page-products .band__item.seg-card:focus-visible {
  border-color: var(--neon-cyan);
}

.page-products .seg-card__key {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold-500);
}

.page-products .seg-card__num {
  margin: var(--sp-2) 0 0;
  font-size: 40px;
  line-height: 1;
  color: var(--text-hi);
}

.page-products .seg-card__bar {
  position: relative;
  height: 6px;
  margin: var(--sp-4) 0 var(--sp-3);
  background: var(--ink-500);
}

.page-products .seg-card__bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 50%);
  background: var(--neon-cyan);
  transition: background-color var(--dur) var(--ease), width 600ms var(--ease);
}

.page-products .seg-card:hover .seg-card__bar i,
.page-products .seg-card:focus-visible .seg-card__bar i {
  background: var(--gold-500);
}

.page-products .seg-card__foot {
  margin: 0;
  color: var(--slate-400);
}

.page-products .seg-note {
  margin-top: var(--sp-5);
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
}

/* ===== 并列对照 ===== */
.page-products .compare {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--ink-500);
  background: var(--ink-900);
}

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

.page-products .compare__col {
  padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 900px) {
  .page-products .compare__col {
    padding: var(--sp-6) var(--sp-5);
  }
}

.page-products .compare__col + .compare__col {
  border-top: 1px solid var(--ink-500);
}

@media (min-width: 900px) {
  .page-products .compare__col + .compare__col {
    border-top: 0;
    border-left: 1px solid var(--ink-500);
  }
}

.page-products .compare__col--back {
  background: var(--ink-700);
}

.page-products .compare__title {
  margin: var(--sp-2) 0 0;
}

.page-products .compare__lead {
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  max-width: 36em;
}

.page-products .scale {
  position: relative;
  height: 72px;
  margin: var(--sp-5) 0 var(--sp-4);
  border-left: 1px solid var(--ink-500);
  border-right: 1px solid var(--ink-500);
  background-image: repeating-linear-gradient(
    to right,
    rgba(36, 51, 79, 0.9) 0,
    rgba(36, 51, 79, 0.9) 1px,
    transparent 1px,
    transparent 10%
  );
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

.page-products .range-bar {
  position: absolute;
  left: var(--from, 0%);
  width: calc(var(--to, 100%) - var(--from, 0%));
  height: 10px;
}

.page-products .range-bar--cyan {
  top: 20px;
  background: rgba(70, 224, 212, 0.24);
  border-left: 1px solid var(--neon-cyan);
  border-right: 1px solid var(--neon-cyan);
}

.page-products .range-bar--gold {
  top: 20px;
  background: rgba(201, 162, 74, 0.24);
  border-left: 1px solid var(--gold-500);
  border-right: 1px solid var(--gold-500);
}

.page-products .range-bar--median {
  top: 42px;
  height: 3px;
  background: var(--neon-cyan);
}

.page-products .range-bar--median-gold {
  background: var(--gold-500);
}

.page-products .scale__tick {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  color: var(--slate-400);
}

.page-products .scale__tick--end {
  right: 0;
}

.page-products .metric-list {
  margin: 0;
  border-top: 1px solid var(--ink-500);
}

.page-products .metric-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--ink-500);
}

.page-products .metric-list__row dt {
  font-size: 13px;
  color: var(--text-dim);
}

.page-products .metric-list__row dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-hi);
  text-align: right;
}

/* ===== 延迟入口 ===== */
.page-products .latency-panel {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--ink-500);
  background: var(--ink-700);
}

@media (min-width: 960px) {
  .page-products .latency-panel {
    grid-template-columns: 4fr 8fr;
  }
}

.page-products .latency-panel__text {
  padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 960px) {
  .page-products .latency-panel__text {
    padding: var(--sp-6) var(--sp-5);
    border-right: 1px solid var(--ink-500);
  }
}

.page-products .latency-panel__lead {
  margin: var(--sp-3) 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
  max-width: 34em;
}

.page-products .latency-facts {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: 13px;
  color: var(--text-dim);
}

.page-products .latency-facts .mono {
  color: var(--neon-cyan);
  margin-right: var(--sp-2);
}

.page-products .latency-panel__text .btn {
  margin-top: var(--sp-5);
}

.page-products .latency-panel__fig {
  margin: 0;
  border-top: 1px solid var(--ink-500);
  background: var(--ink-900);
}

@media (min-width: 960px) {
  .page-products .latency-panel__fig {
    border-top: 0;
  }
}

.page-products .latency-panel__fig .media__label {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ink-500);
  color: var(--slate-400);
}

/* ===== 跨玩法并列 ===== */
.page-products .crossview .panel {
  padding: var(--sp-5) var(--sp-4);
}

.page-products .label-cloud,
.page-products .code-cloud {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.page-products .code-cloud li {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1px solid var(--ink-500);
  color: var(--text-body);
  background: var(--ink-900);
}

.page-products .crossview__note {
  margin: var(--sp-4) 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .crossview__fig {
  margin: 0;
}

.page-products .crossview__fig .media__label {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ink-500);
  color: var(--slate-400);
}

.page-products .crossview__foot {
  margin-top: var(--sp-4);
  max-width: 44em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
}

/* ===== 底部状态条 ===== */
.page-products .status-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: var(--sp-6);
  background: var(--ink-700);
  border-top: 1px solid var(--ink-500);
  border-bottom: 1px solid var(--ink-500);
}

.page-products .status-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.page-products .status-bar__label {
  margin: 0;
  color: var(--gold-500);
}

.page-products .status-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 12px;
  color: var(--text-body);
}

.page-products .status-bar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.page-products .status-bar__item .mono {
  color: var(--neon-cyan);
}

/* ===== 窄屏保护 ===== */
@media (max-width: 767px) {
  .page-products .hero__gauge {
    padding: var(--sp-4) var(--sp-3);
  }

  .page-products .gauge-item__v {
    font-size: 22px;
  }

  .page-products .caliber-group {
    border-right: 0;
    border-bottom: 1px solid var(--ink-500);
    padding: var(--sp-3);
  }

  .page-products .compare__col,
  .page-products .field-cell,
  .page-products .crossview .panel,
  .page-products .latency-panel__text {
    padding: var(--sp-4) var(--sp-3);
  }

  .page-products .seg-card__num {
    font-size: 32px;
  }

  .page-products .band__item.seg-card {
    flex: 0 0 200px;
    width: 200px;
  }

  .page-products .status-bar__inner {
    gap: var(--sp-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .seg-card__bar i,
  .page-products .field-cell {
    transition: none;
  }
}

.page-products {
  --from: 1rem;
  --to: 1rem;
  --w: 1rem;
}