.page-products {
  display: block;
  background: var(--color-surface);
  color: var(--color-ink);
}

/* ============ 首屏 ============ */
.page-products .products-hero {
  position: relative;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding-block: var(--space-6) var(--space-8);
  overflow: hidden;
}

.page-products .products-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-contrast-ink) 5%, transparent) 0 1px,
    transparent 1px 56px
  );
  pointer-events: none;
}

.page-products .products-hero .container {
  position: relative;
  z-index: 1;
}

.page-products .products-hero__crumbs {
  margin-bottom: var(--space-4);
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-products .products-hero__crumbs a {
  color: inherit;
  text-decoration: none;
}

.page-products .products-hero__crumbs a:hover,
.page-products .products-hero__crumbs a:focus-visible {
  color: var(--color-contrast-accent);
}

.page-products .products-hero__top {
  display: grid;
  gap: var(--space-4);
}

.page-products .products-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 0.95;
  letter-spacing: var(--tracking-heading);
  margin: var(--space-2) 0 0;
  color: var(--color-contrast-ink);
}

.page-products .products-hero__title em {
  font-style: normal;
  color: var(--color-contrast-accent);
}

.page-products .products-hero__lede {
  margin-top: var(--space-3);
  max-width: var(--measure);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}

.page-products .products-hero__figure {
  margin: 0;
  border: var(--border-thin) solid var(--color-contrast-line);
  overflow: hidden;
}

.page-products .products-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

/* 展台色块 */
.page-products .products-hero__stalls {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.page-products .stall {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  min-height: 172px;
  text-decoration: none;
  color: inherit;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-ink) 16%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-products .stall__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.page-products .stall__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  opacity: 0.82;
}

.page-products .stall__fig {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.page-products .stall__num {
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-products .stall__unit {
  font-size: var(--text-sm);
  opacity: 0.78;
}

.page-products .stall__step {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  opacity: 0.72;
  transition: opacity 180ms ease;
}

.page-products .stall:hover,
.page-products .stall:focus-visible {
  transform: translateY(calc(var(--space-1) * -1));
}

.page-products .stall:hover .stall__step,
.page-products .stall:focus-visible .stall__step {
  opacity: 1;
}

.page-products .stall--reports {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}

.page-products .stall--atlas {
  background: var(--color-surface);
  color: var(--color-ink);
}

.page-products .stall--table {
  background: var(--color-contrast-line);
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
}

.page-products .stall--clubs {
  background: var(--color-primary-soft);
  color: var(--color-ink);
}

.page-products .stall--media {
  background: var(--color-surface-deep);
  color: var(--color-ink);
}

.page-products .stall--atlas .stall__num,
.page-products .stall--clubs .stall__num,
.page-products .stall--media .stall__num {
  color: var(--color-accent);
}

.page-products .stall--table .stall__num {
  color: var(--color-contrast-accent);
}

.page-products .stall--reports .stall__num {
  color: var(--color-primary-ink);
}

/* ============ 五项主推 ============ */
.page-products .products-lines {
  background: var(--color-surface);
}

.page-products .products-lines__intro {
  max-width: 74ch;
  margin-bottom: var(--space-6);
}

.page-products .products-lines__intro h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-2) 0 var(--space-3);
}

.page-products .products-lines__intro p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .line {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--border-thick) solid var(--color-ink);
}

.page-products .line:last-child {
  border-bottom: var(--border-thick) solid var(--color-ink);
}

.page-products .line__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-products .line__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.page-products .line__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.page-products .line__body {
  display: grid;
  gap: var(--space-4);
}

.page-products .line__specs {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.page-products .line__spec {
  padding-left: var(--space-3);
  border-left: var(--border-thin) solid var(--color-line);
}

.page-products .line__spec dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.page-products .line__spec dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-products .line__spec dd a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .line__spec dd a:hover,
.page-products .line__spec dd a:focus-visible {
  color: var(--color-focus);
}

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

.page-products .line__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-thin) solid var(--color-line);
  object-fit: cover;
}

/* ============ 战报时间轴 ============ */
.page-products .products-reel {
  position: relative;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding-block: var(--space-8);
}

.page-products .reel__banner {
  position: relative;
  margin: 0 0 var(--space-6);
  border: var(--border-thin) solid var(--color-contrast-line);
  overflow: hidden;
}

.page-products .reel__banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.page-products .reel__banner-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  pointer-events: none;
}

.page-products .reel__banner-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4);
  color: var(--color-contrast-ink);
}

.page-products .reel__banner-text {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  max-width: 54ch;
}

.page-products .reel__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-6);
  max-width: 32ch;
}

.page-products .reel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.page-products .reel__item {
  position: relative;
}

.page-products .reel__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-4);
  height: var(--space-4);
  padding-inline: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  background: var(--color-contrast-line);
  color: var(--color-contrast-ink);
  position: relative;
  z-index: 1;
}

.page-products .reel__item--penalty .reel__node {
  background: var(--color-contrast-accent);
  color: var(--color-contrast-surface);
}

.page-products .reel__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: var(--space-2) 0 0;
  color: var(--color-contrast-ink);
}

.page-products .reel__item--penalty .reel__title {
  color: var(--color-contrast-accent);
}

.page-products .reel__details {
  margin-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-products .reel__details summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-contrast-ink) 68%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

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

.page-products .reel__details summary::after {
  content: "＋";
  color: var(--color-contrast-accent);
  font-size: var(--text-sm);
}

.page-products .reel__details[open] summary::after {
  content: "－";
}

.page-products .reel__details summary:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.page-products .reel__details p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 86%, transparent);
}

/* ============ 主场地图 ============ */
.page-products .products-atlas {
  background: var(--color-surface-alt);
}

.page-products .atlas__intro {
  max-width: 70ch;
  margin-bottom: var(--space-6);
}

.page-products .atlas__intro h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-2) 0 var(--space-3);
}

.page-products .atlas__intro p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .atlas__grid {
  display: grid;
  gap: var(--space-4);
}

.page-products .atlas__stage {
  position: relative;
  aspect-ratio: 6 / 5;
  background: var(--color-surface-deep);
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-products .atlas__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.page-products .atlas__spots {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.page-products .atlas__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: var(--border-thin) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  white-space: nowrap;
  z-index: 2;
}

.page-products .atlas__spot:nth-child(1) { left: 62%; top: 52%; }
.page-products .atlas__spot:nth-child(2) { left: 44%; top: 34%; }
.page-products .atlas__spot:nth-child(3) { left: 22%; top: 44%; }
.page-products .atlas__spot:nth-child(4) { left: 58%; top: 76%; }
.page-products .atlas__spot:nth-child(5) { left: 30%; top: 74%; }
.page-products .atlas__spot:nth-child(6) { left: 74%; top: 26%; }

.page-products .atlas__dot {
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-primary);
  border: var(--border-thin) solid var(--color-surface);
  flex: none;
}

.page-products .atlas__info {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-1));
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-size: var(--text-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 5;
}

.page-products .atlas__spot:hover .atlas__info,
.page-products .atlas__spot:focus-within .atlas__info {
  opacity: 1;
}

.page-products .atlas__side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.page-products .atlas__side-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  margin: 0;
}

.page-products .atlas__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-products .atlas__legend li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-products .atlas__example {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  padding-left: var(--space-3);
  border-left: var(--border-thick) solid var(--color-accent);
}

.page-products .atlas__photo {
  margin: 0;
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-products .atlas__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ============ 两项配套 ============ */
.page-products .products-support {
  background: var(--color-surface);
}

.page-products .support__intro {
  max-width: 70ch;
  margin-bottom: var(--space-6);
}

.page-products .support__intro h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-2) 0 var(--space-3);
}

.page-products .support__intro p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-products .support__grid {
  display: grid;
  gap: var(--space-4);
}

.page-products .support__photo {
  margin: 0;
  border: var(--border-thin) solid var(--color-line);
  overflow: hidden;
}

.page-products .support__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-products .support__cards {
  display: grid;
  gap: var(--space-4);
}

.page-products .support__card {
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-left: var(--border-thick) solid var(--color-primary);
  padding: var(--space-4);
}

.page-products .support__card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: var(--space-2) 0 var(--space-3);
}

.page-products .support__specs {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.page-products .support__specs dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.page-products .support__specs dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* ============ 下一步 ============ */
.page-products .products-next {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-products .next__intro {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.page-products .next__intro h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-contrast-ink);
}

.page-products .next__intro p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 82%, transparent);
}

.page-products .next__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.page-products .next__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thick) solid var(--color-contrast-accent);
}

.page-products .next__who {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--color-contrast-accent);
}

.page-products .next__what {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 88%, transparent);
}

/* ============ 响应式 ============ */
@media (min-width: 760px) {
  .page-products .products-hero {
    padding-block: var(--space-8) var(--space-8);
  }

  .page-products .products-lines__intro h2,
  .page-products .reel__heading,
  .page-products .atlas__intro h2,
  .page-products .support__intro h2,
  .page-products .next__intro h2 {
    font-size: var(--text-3xl);
  }

  .page-products .line__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .page-products .support__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-products .next__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 960px) {
  .page-products .products-hero__top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-6);
  }

  .page-products .products-hero__figure {
    margin-left: calc(var(--space-4) * -1);
    z-index: 2;
  }

  .page-products .products-hero__stalls {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-8);
  }

  .page-products .stall {
    flex: 1 1 0;
    min-height: 208px;
    margin-left: calc(var(--space-2) * -1);
  }

  .page-products .stall:first-child {
    margin-left: 0;
  }

  .page-products .stall--reports { flex-grow: 1.62; z-index: 1; }
  .page-products .stall--atlas   { flex-grow: 1.18; z-index: 2; }
  .page-products .stall--table   { flex-grow: 1.46; z-index: 3; }
  .page-products .stall--clubs   { flex-grow: 1.08; z-index: 4; }
  .page-products .stall--media   { flex-grow: 1.34; z-index: 5; }

  .page-products .line {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .page-products .line--table .line__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
    align-items: start;
    gap: var(--space-6);
  }

  .page-products .reel__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .page-products .reel__item {
    padding-right: var(--space-3);
  }

  .page-products .reel__item:last-child {
    padding-right: 0;
  }

  .page-products .reel__item::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    left: 0;
    right: 0;
    height: var(--border-thin);
    background: var(--color-contrast-line);
  }

  .page-products .reel__item:last-child::before {
    right: var(--space-3);
  }

  .page-products .reel__details summary:hover {
    color: var(--color-contrast-ink);
  }

  .page-products .atlas__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .page-products .atlas__example {
    font-size: var(--text-lg);
  }

  .page-products .support__cards {
    margin-top: calc(var(--space-6) * -1);
    position: relative;
    z-index: 2;
  }

  .page-products .support__card:nth-child(2) {
    margin-left: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .page-products .products-hero__figure {
    margin-bottom: calc(var(--space-6) * -1);
  }
}