.page-products {
  --prod-text-on-paper: #2c5851;
  --prod-cut: 20px;
}

/* ========== 面包屑间距 ========== */
.page-products .breadcrumb {
  padding-top: 20px;
  padding-bottom: 8px;
}

/* ========== Hero ========== */
.page-products .prod-hero {
  position: relative;
  background: var(--ink-void);
  color: var(--white);
  padding: 24px 0 56px;
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(61, 240, 200, 0.10), transparent 62%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(255, 122, 61, 0.08), transparent 62%);
  pointer-events: none;
}

.page-products .prod-hero-grid {
  position: relative;
  display: grid;
  gap: 32px;
}

.page-products .prod-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .prod-hero .eyebrow {
  color: var(--cyan);
}

.page-products .prod-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
}

.page-products .prod-hero-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mist);
  max-width: 34em;
  margin: 0;
}

.page-products .prod-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
}

.page-products .prod-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .prod-meta-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}

.page-products .prod-meta-label {
  font-size: 0.75rem;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .prod-hero-visual {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
  background: var(--ink-field);
}

.page-products .prod-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-products .prod-hero-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  background: rgba(7, 30, 35, 0.82);
  color: var(--cyan);
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
}

/* ========== 产品总览 ========== */
.page-products .product-overview {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .product-overview .section-head h2 {
  color: var(--white);
}

.page-products .product-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.page-products .product-card {
  position: relative;
  background: var(--ink-stand);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background 0.3s var(--ease);
}

.page-products .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.page-products .product-card:hover::before {
  transform: scaleX(1);
}

.page-products .product-card:hover {
  background: #163d44;
}

.page-products .product-card:nth-child(3)::before {
  background: var(--orange);
}

.page-products .product-card-num {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.page-products .product-card:nth-child(3) .product-card-num {
  color: var(--orange);
}

.page-products .product-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.01em;
}

.page-products .product-card-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
  margin: 0;
  flex-grow: 1;
}

.page-products .product-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  border: 1px solid var(--ink-line);
  color: var(--mist);
  border-radius: 2px;
  white-space: nowrap;
  background: transparent;
}

.page-products .chip-cyan {
  border-color: rgba(61, 240, 200, 0.42);
  background: rgba(61, 240, 200, 0.1);
  color: var(--cyan);
}

.page-products .chip-orange {
  border-color: rgba(255, 122, 61, 0.42);
  background: rgba(255, 122, 61, 0.1);
  color: var(--orange);
}

.page-products .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .link-arrow::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}

.page-products .link-arrow:hover {
  gap: 10px;
  color: var(--white);
}

.page-products .product-card:nth-child(3) .link-arrow {
  color: var(--orange);
}

.page-products .product-card:nth-child(3) .link-arrow:hover {
  color: var(--white);
}

/* ========== 筛选章节（浅纸底） ========== */
.page-products .filter-section {
  background: var(--paper);
  color: var(--deep-text);
}

.page-products .filter-section .display {
  color: var(--deep-text);
}

.page-products .filter-section .eyebrow {
  color: var(--mint);
}

.page-products .filter-layout {
  display: grid;
  gap: 32px;
}

.page-products .filter-visual {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

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

.page-products .filter-body .display {
  margin-top: 8px;
}

.page-products .filter-lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--prod-text-on-paper);
  margin: 14px 0 0;
}

.page-products .filter-steps {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
}

.page-products .filter-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(11, 107, 94, 0.18);
}

.page-products .filter-step:last-child {
  border-bottom: 1px solid rgba(11, 107, 94, 0.18);
}

.page-products .filter-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
  background: var(--orange);
  color: var(--orange-ink);
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.page-products .filter-step-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--deep-text);
  letter-spacing: 0.01em;
}

.page-products .filter-step-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--prod-text-on-paper);
}

.page-products .filter-summary {
  margin-top: 26px;
  padding: 18px 20px;
  background: rgba(61, 240, 200, 0.14);
  border-left: 3px solid var(--mint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .filter-summary-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  font-weight: 700;
}

.page-products .filter-summary p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--prod-text-on-paper);
}

/* ========== 小屏看台 ========== */
.page-products .mobile-section {
  background: var(--ink-void);
  color: var(--white);
  overflow: hidden;
}

.page-products .mobile-section .display {
  color: var(--white);
}

.page-products .mobile-section .eyebrow {
  color: var(--cyan);
}

.page-products .mobile-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .mobile-layout {
  display: grid;
  gap: 40px;
  margin-top: 36px;
}

.page-products .device-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  position: relative;
}

.page-products .device-mock {
  position: relative;
  margin: 0;
}

.page-products .device-mock-frame {
  background: #0a2529;
  border: 3px solid var(--ink-line);
  border-radius: 22px;
  padding: 16px 12px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.65);
}

.page-products .device-mock--port .device-mock-frame {
  width: 148px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
}

.page-products .device-mock--land .device-mock-frame {
  width: 220px;
  aspect-ratio: 19.5 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-products .device-mock-bar {
  display: block;
  width: 38%;
  height: 3px;
  margin: 0 auto 12px;
  background: var(--ink-line);
  border-radius: 2px;
  flex-shrink: 0;
}

.page-products .device-mock-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 8px;
  font-size: 0.6rem;
  color: var(--mist);
  border-bottom: 1px dashed rgba(168, 199, 197, 0.2);
}

.page-products .device-mock-row .mono {
  color: var(--cyan);
}

.page-products .device-mock-pill {
  margin-top: 10px;
  text-align: center;
  font-size: 0.55rem;
  padding: 5px 6px;
  background: rgba(61, 240, 200, 0.14);
  color: var(--cyan);
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.page-products .device-mock figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--mist);
  letter-spacing: 0.06em;
}

.page-products .mobile-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.page-products .mobile-photo {
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
}

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

.page-products .mobile-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .mobile-feature {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}

.page-products .mobile-feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.65rem;
  color: var(--cyan);
  border: 1px solid rgba(61, 240, 200, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
}

.page-products .mobile-feature h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--white);
}

.page-products .mobile-feature p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.68;
  color: var(--mist);
}

/* ========== 旧版资源 ========== */
.page-products .archive-section {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .archive-section .display {
  color: var(--white);
}

.page-products .archive-section .eyebrow {
  color: var(--orange);
}

.page-products .archive-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .archive-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-line);
}

.page-products .archive-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .archive-figure-value {
  font-family: var(--font-data);
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .archive-figure:nth-child(2) .archive-figure-value {
  color: var(--amber);
}

.page-products .archive-figure:nth-child(3) .archive-figure-value {
  color: var(--orange);
}

.page-products .archive-figure-label {
  font-size: 0.72rem;
  color: var(--mist);
  letter-spacing: 0.06em;
}

.page-products .archive-layout {
  display: grid;
  gap: 32px;
}

.page-products .archive-visual {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
}

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

.page-products .archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-line);
}

.page-products .archive-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .archive-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .version-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  background: var(--orange);
  color: var(--orange-ink);
  letter-spacing: 0.04em;
  cursor: default;
  border-radius: 2px;
}

.page-products .version-chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .version-device {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  background: var(--ink-void);
  color: var(--cyan);
  font-size: 0.65rem;
  padding: 5px 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  border: 1px solid var(--cyan);
  font-weight: 400;
  z-index: 3;
}

.page-products .version-chip:hover .version-device,
.page-products .version-chip:focus .version-device {
  opacity: 1;
}

.page-products .archive-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}

.page-products .archive-item-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--mist);
}

.page-products .archive-details {
  margin-top: 2px;
}

.page-products .archive-details summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--cyan);
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.page-products .archive-details summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.page-products .archive-details[open] summary::before {
  content: "−";
}

.page-products .archive-details p {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(7, 30, 35, 0.45);
  border-left: 2px solid var(--ink-line);
  font-size: 0.8rem;
  line-height: 1.68;
  color: var(--mist);
}

/* ========== 时间轴 ========== */
.page-products .timeline-section {
  background: var(--paper);
  color: var(--deep-text);
}

.page-products .timeline-section .display {
  color: var(--deep-text);
}

.page-products .timeline-section .eyebrow {
  color: var(--mint);
}

.page-products .timeline-section .page-lead {
  color: var(--prod-text-on-paper);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .timeline-visual {
  margin-top: 32px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

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

.page-products .timeline-stages {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-products .timeline-stage {
  position: relative;
  padding-left: 28px;
  padding-bottom: 4px;
  border-left: 2px solid rgba(11, 107, 94, 0.25);
}

.page-products .timeline-stage::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px rgba(255, 122, 61, 0.32);
}

.page-products .timeline-stage:nth-child(5)::before {
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(11, 107, 94, 0.32);
}

.page-products .timeline-num {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  display: block;
  margin-bottom: 4px;
}

.page-products .timeline-title {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--deep-text);
}

.page-products .timeline-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--prod-text-on-paper);
}

/* ========== 场景对照 ========== */
.page-products .scene-section {
  background: var(--ink-void);
  color: var(--white);
}

.page-products .scene-section .display {
  color: var(--white);
}

.page-products .scene-section .eyebrow {
  color: var(--cyan);
}

.page-products .scene-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

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

.page-products .scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 22px;
}

.page-products .scene-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-family: var(--font-data);
  letter-spacing: 0.03em;
  border: 1px solid var(--ink-line);
  color: var(--mist);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.page-products .scene-tab:hover {
  border-color: var(--cyan);
  color: var(--white);
}

.page-products #scene-a:checked ~ .scene-tabs label[for="scene-a"],
.page-products #scene-b:checked ~ .scene-tabs label[for="scene-b"],
.page-products #scene-c:checked ~ .scene-tabs label[for="scene-c"] {
  background: var(--cyan);
  color: var(--cyan-ink);
  border-color: var(--cyan);
  font-weight: 700;
}

.page-products .scene-panel {
  display: none;
  padding: 24px;
  background: var(--ink-stand);
  border: 1px solid var(--ink-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.page-products #scene-a:checked ~ .scene-panels [data-panel="a"],
.page-products #scene-b:checked ~ .scene-panels [data-panel="b"],
.page-products #scene-c:checked ~ .scene-panels [data-panel="c"] {
  display: block;
}

.page-products .scene-panel h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--white);
  letter-spacing: 0.01em;
}

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

.page-products .scene-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .scene-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--orange);
}

/* ========== CTA ========== */
.page-products .cta-section {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .cta-panel {
  position: relative;
  padding: 36px 24px;
  background: var(--ink-stand);
  border: 1px solid var(--ink-line);
  overflow: hidden;
  display: grid;
  gap: 26px;
}

.page-products .cta-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-products .cta-copy .eyebrow {
  color: var(--cyan);
}

.page-products .cta-copy .display {
  color: var(--white);
  margin-top: 8px;
}

.page-products .cta-text {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
  max-width: 42em;
}

.page-products .cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* ========== 桌面端 ========== */
@media (min-width: 860px) {
  .page-products .prod-hero {
    padding: 32px 0 88px;
  }

  .page-products .prod-hero-grid {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 48px;
  }

  .page-products .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }

  .page-products .filter-layout {
    grid-template-columns: 1.02fr 1fr;
    align-items: start;
    gap: 48px;
  }

  .page-products .filter-body .display {
    font-size: 2.1rem;
  }

  .page-products .mobile-layout {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 48px;
  }

  .page-products .device-stage {
    padding: 24px 0;
  }

  .page-products .device-mock--port .device-mock-frame {
    width: 172px;
  }

  .page-products .device-mock--land .device-mock-frame {
    width: 258px;
  }

  .page-products .archive-figures {
    gap: 24px;
    margin: 40px 0 48px;
    padding-bottom: 36px;
  }

  .page-products .archive-layout {
    grid-template-columns: 340px 1fr;
    align-items: start;
    gap: 48px;
  }

  .page-products .timeline-visual {
    margin-top: 40px;
  }

  .page-products .timeline-stages {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 48px;
  }

  .page-products .timeline-stage {
    padding-left: 0;
    padding-top: 30px;
    border-left: none;
    border-top: 2px solid rgba(11, 107, 94, 0.25);
  }

  .page-products .timeline-stage::before {
    left: 0;
    top: -8px;
  }

  .page-products .scene-panel {
    padding: 30px 32px;
  }

  .page-products .cta-panel {
    grid-template-columns: 1.2fr auto;
    align-items: center;
    gap: 40px;
    padding: 44px 40px;
  }

  .page-products .cta-links {
    justify-content: flex-end;
    max-width: 340px;
  }
}

@media (max-width: 380px) {
  .page-products .device-stage {
    flex-direction: column;
    gap: 16px;
  }

  .page-products .device-mock--port .device-mock-frame {
    width: 136px;
  }

  .page-products .device-mock--land .device-mock-frame {
    width: 200px;
  }
}
<<<结束>>>

等等，我最后多加了一个 <<<结束>>> 标记，这是不对的。让我重新看要求。

要求说"严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号： ...  ..."

只有两个标记。我不该加 <<<结束>>>。让我重新输出，去掉多余的标记。
<main id="main-content" class="page-products">

  <div class="wrap">
    <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-sep" aria-hidden="true">/</span><span class="breadcrumb-current">产品与下载</span></li>
      </ol>
    </nav>
  </div>

  <section class="prod-hero">
    <div class="wrap prod-hero-grid">
      <div class="prod-hero-copy">
        <p class="eyebrow">产品入口 · 三类工具</p>
        <h1>先选对入口，再开始赛前碰面</h1>
        <p class="prod-hero-lead">云体育看台把注册筛选、小屏看台和旧版资源整理成三类可直接使用的工具。按设备、网络和联赛偏好找到对应入口，每天开工前的赛前碰面就更顺手。</p>
        <div class="prod-hero-meta" aria-label="产品服务规模">
          <div class="prod-meta-item">
            <span class="prod-meta-value mono">3</span>
            <span class="prod-meta-label">类产品入口</span>
          </div>
          <div class="prod-meta-item">
            <span class="prod-meta-value mono">28</span>
            <span class="prod-meta-label">个省级区域覆盖</span>
          </div>
          <div class="prod-meta-item">
            <span class="prod-meta-value mono">36</span>
            <span class="prod-meta-label">个联赛与杯赛条目</span>
          </div>
        </div>
      </div>
      <div class="prod-hero-visual">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="小屏设备、数据卡与看台边线叠影，深蓝绿底配荧光青状态线">
        <div class="prod-hero-tag mono">看台坐标 / 产品入口</div>
      </div>
    </div>
  </section>

  <section class="section product-overview" id="product-entry">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">三类入口</p>
        <h2 class="display">要解决的问题不同，入口也不同</h2>
      </div>
      <div class="product-grid">
        <article class="product-card">
          <span class="product-card-num mono">01</span>
          <h3 class="product-card-title">注册筛选</h3>
          <p class="product-card-text">按设备、网络、联赛偏好和观看时段四步确认，得到更适合自己的联赛入口。清单会给出一个主入口和两个备选，不用自己反复试。</p>
          <div class="product-card-tags">
            <span class="chip chip-cyan">四步清单</span>
            <span class="chip">12 个重点联赛</span>
          </div>
          <a class="link-arrow" href="#filter">看筛选清单</a>
        </article>
        <article class="product-card">
          <span class="product-card-num mono">02</span>
          <h3 class="product-card-title">小屏看台</h3>
          <p class="product-card-text">4.7–8 英寸手机屏幕上的横竖屏数据卡，配合文字战报和关键节点提醒。通勤路上、赛前碎片时间都能扫一眼就明白。</p>
          <div class="product-card-tags">
            <span class="chip chip-cyan">竖屏 / 横屏</span>
            <span class="chip">移动端首选</span>
          </div>
          <a class="link-arrow" href="#mobile">看小屏布局</a>
        </article>
        <article class="product-card">
          <span class="product-card-num mono">03</span>
          <h3 class="product-card-title">旧版资源下载</h3>
          <p class="product-card-text">5 条版本线保留 186 期战报归档与 42 份版本说明，支持回查往期资料。版本标签、适用设备、更新说明和归档入口一并给出。</p>
          <div class="product-card-tags">
            <span class="chip chip-orange">版本标签</span>
            <span class="chip">归档入口</span>
          </div>
          <a class="link-arrow" href="#archive">看版本线</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section filter-section" id="filter">
    <div class="wrap">
      <div class="filter-layout">
        <div class="filter-visual">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="战术板上按四步排列的筛选标签与箭头路线，暖橙标记关键条件">
        </div>
        <div class="filter-body">
          <p class="eyebrow">注册筛选</p>
          <h2 class="display">四步确认，找到顺手的那一个入口</h2>
          <p class="filter-lead">每一步只需要一个判断：用什么设备、走什么网络、追哪些联赛、在什么时段看。走完四步，适配清单会给出更适合你的联赛入口组合。</p>
          <ol class="filter-steps">
            <li class="filter-step">
              <span class="filter-step-num mono">01</span>
              <div>
                <h3 class="filter-step-title">设备</h3>
                <p class="filter-step-text">手机 4.7–8 英寸、平板还是桌面浏览器。先量屏幕尺寸，再决定竖屏还是横屏优先，打开后直接落在合适的布局上。</p>
              </div>
            </li>
            <li class="filter-step">
              <span class="filter-step-num mono">02</span>
              <div>
                <h3 class="filter-step-title">网络</h3>
                <p class="filter-step-text">稳定 Wi-Fi、4G/5G，还是通勤路上的波动网络。网络决定数据卡的加载顺序，波动环境下会先显示速览行。</p>
              </div>
            </li>
            <li class="filter-step">
              <span class="filter-step-num mono">03</span>
              <div>
                <h3 class="filter-step-title">联赛偏好</h3>
                <p class="filter-step-text">从 12 个重点联赛、15 个地区联赛和 9 个专项杯赛中勾选想看的类别，清单会把对应入口排在前面。</p>
              </div>
            </li>
            <li class="filter-step">
              <span class="filter-step-num mono">04</span>
              <div>
                <h3 class="filter-step-title">观看时段</h3>
                <p class="filter-step-text">赛前 2 小时锁定终版，还是赛后核对近 6 场分布。时段不同，入口默认打开的数据视图也不同。</p>
              </div>
            </li>
          </ol>
          <div class="filter-summary">
            <span class="filter-summary-label mono">适配清单结果</span>
            <p>清单按四步答案给出一个主入口和两个备选，主入口附上设备提示。想核对操作细节，可以到使用指南按步骤走一遍。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section mobile-section" id="mobile">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">小屏看台</p>
        <h2 class="display">在手机上，也能一眼看清</h2>
        <p class="page-lead">4.7–8 英寸的手机屏幕里，竖屏给速览、横屏给分布。数据卡、文字战报和关键节点提醒配合，适合通勤和赛前碎片时间的约小屏看联赛场合。</p>
      </div>
      <div class="mobile-layout">
        <div class="device-stage">
          <figure class="device-mock device-mock--port">
            <div class="device-mock-frame">
              <span class="device-mock-bar"></span>
              <div class="device-mock-row"><span>日期</span><span class="mono">阶段</span></div>
              <div class="device-mock-row"><span>联赛</span><span class="mono">类别</span></div>
              <div class="device-mock-row"><span>进失球</span><span class="mono">近 6 场</span></div>
              <div class="device-mock-pill">开赛前 2 小时锁终版</div>
            </div>
            <figcaption class="mono">竖屏 · 速览</figcaption>
          </figure>
          <figure class="device-mock device-mock--land">
            <div class="device-mock-frame">
              <span class="device-mock-bar"></span>
              <div class="device-mock-row"><span>主客场拆分</span><span class="mono">分布</span></div>
              <div class="device-mock-row"><span>半场区间</span><span class="mono">走势</span></div>
              <div class="device-mock-row"><span>全场区间</span><span class="mono">走势</span></div>
              <div class="device-mock-pill">横屏展开分布</div>
            </div>
            <figcaption class="mono">横屏 · 分布</figcaption>
          </figure>
        </div>
        <div class="mobile-copy">
          <figure class="mobile-photo">
            <img src="{zhanqunpic:h:720w:960}" width="960" height="720" loading="lazy" decoding="async" alt="手持手机查看横屏数据卡的局部特写，屏幕信息抽象化">
          </figure>
          <ul class="mobile-features">
            <li class="mobile-feature">
              <span class="mobile-feature-mark mono">A</span>
              <div>
                <h3>竖屏三行速览</h3>
                <p>日期、联赛、进失球分布三行结构，打开即可扫完，适合赛前 30 分钟的快速确认。</p>
              </div>
            </li>
            <li class="mobile-feature">
              <span class="mobile-feature-mark mono">B</span>
              <div>
                <h3>横屏展开分布</h3>
                <p>转成横屏后展开主客场拆分与半场、全场区间，适合赛后逐项核对。</p>
              </div>
            </li>
            <li class="mobile-feature">
              <span class="mobile-feature-mark mono">C</span>
              <div>
                <h3>文字战报与节点提醒</h3>
                <p>关键节点用短句标出，开赛前 2 小时锁定终版数据，不用一直刷新。</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section archive-section" id="archive">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">旧版资源</p>
        <h2 class="display">往前翻，归档就在这里</h2>
        <p class="page-lead">怀旧版本、往期战报、历史说明都收在旧版资源下载站点里。5 条版本线从当前稳定版往回排，每个入口只留必要信息，翻起来快。</p>
      </div>
      <div class="archive-figures">
        <div class="archive-figure">
          <span class="archive-figure-value mono">5</span>
          <span class="archive-figure-label">条版本线</span>
        </div>
        <div class="archive-figure">
          <span class="archive-figure-value mono">186</span>
          <span class="archive-figure-label">期战报归档</span>
        </div>
        <div class="archive-figure">
          <span class="archive-figure-value mono">42</span>
          <span class="archive-figure-label">份版本说明</span>
        </div>
      </div>
      <div class="archive-layout">
        <div class="archive-visual">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="整齐排列的版本标签、资料封面与归档盒，暖橙与雾青配色">
        </div>
        <ul class="archive-list">
          <li class="archive-item">
            <div class="archive-item-head">
              <span class="version-chip" tabindex="0">V5<span class="version-device">桌面 + 手机</span></span>
              <span class="archive-item-name">当前稳定版</span>
              <span class="chip chip-cyan">当前推荐</span>
            </div>
            <p class="archive-item-desc">数据卡布局与归档入口统一，桌面和手机共用一套版本标签。</p>
            <details class="archive-details">
              <summary>版本说明</summary>
              <p>统一横竖屏数据卡呈现顺序，补全主客场拆分入口，归档索引按联赛类别分组。</p>
            </details>
          </li>
          <li class="archive-item">
            <div class="archive-item-head">
              <span class="version-chip" tabindex="0">V4<span class="version-device">手机横竖屏</span></span>
              <span class="archive-item-name">横竖屏镜像版</span>
            </div>
            <p class="archive-item-desc">横屏与竖屏显示同一套速览结构，转屏后数据位置不乱。</p>
            <details class="archive-details">
              <summary>版本说明</summary>
              <p>把竖屏三行结构映射到横屏两栏，保留进失球分布位置，减少转屏后的重新定位。</p>
            </details>
          </li>
          <li class="archive-item">
            <div class="archive-item-head">
              <span class="version-chip" tabindex="0">V3<span class="version-device">4.7 英寸起</span></span>
              <span class="archive-item-name">小屏优化版</span>
            </div>
            <p class="archive-item-desc">4.7 英寸起的小屏优先布局，压缩单行信息量，避免拥挤。</p>
            <details class="archive-details">
              <summary>版本说明</summary>
              <p>重排竖屏数据卡行高和字号，窄屏下优先显示日期与联赛行。</p>
            </details>
          </li>
          <li class="archive-item">
            <div class="archive-item-head">
              <span class="version-chip" tabindex="0">V2<span class="version-device">桌面 + 平板</span></span>
              <span class="archive-item-name">数据卡扩展版</span>
            </div>
            <p class="archive-item-desc">三行速览结构固定为标准，主客场拆分首次独立成块。</p>
            <details class="archive-details">
              <summary>版本说明</summary>
              <p>将进失球分布拆成主客场和半场、全场两种查看维度，适配较宽屏幕。</p>
            </details>
          </li>
          <li class="archive-item">
            <div class="archive-item-head">
              <span class="version-chip" tabindex="0">V1<span class="version-device">桌面浏览器</span></span>
              <span class="archive-item-name">归档基础版</span>
            </div>
            <p class="archive-item-desc">战报归档与版本说明的起点，保留早期资料入口。</p>
            <details class="archive-details">
              <summary>版本说明</summary>
              <p>建立赛前战报的归档结构，为后续版本留下可回溯的入口位置。</p>
            </details>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section timeline-section" id="timeline">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">版本演进</p>
        <h2 class="display">从早期版本到现在</h2>
        <p class="page-lead">5 条版本线对应五个使用阶段。旧入口保留最近 5 个版本线，往前翻能看清每次调整给使用场景带来的变化。</p>
      </div>
      <div class="timeline-visual">
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" loading="lazy" decoding="async" alt="抽象赛道线与阶段标记，横向延伸，少量荧光青节点">
      </div>
      <ol class="timeline-stages">
        <li class="timeline-stage">
          <span class="timeline-num mono">阶段一</span>
          <h3 class="timeline-title">归档基础版</h3>
          <p class="timeline-text">先建立战报归档和版本说明的入口，让往期资料有固定位置。</p>
        </li>
        <li class="timeline-stage">
          <span class="timeline-num mono">阶段二</span>
          <h3 class="timeline-title">数据卡扩展版</h3>
          <p class="timeline-text">三行速览成为标准结构，主客场拆分独立成块，查看维度拉开。</p>
        </li>
        <li class="timeline-stage">
          <span class="timeline-num mono">阶段三</span>
          <h3 class="timeline-title">小屏优化版</h3>
          <p class="timeline-text">从 4.7 英寸起步重新排布竖屏数据卡，窄屏信息不再拥挤。</p>
        </li>
        <li class="timeline-stage">
          <span class="timeline-num mono">阶段四</span>
          <h3 class="timeline-title">横竖屏镜像版</h3>
          <p class="timeline-text">横屏与竖屏共用结构，转屏之后数据位置保持稳定。</p>
        </li>
        <li class="timeline-stage">
          <span class="timeline-num mono">阶段五</span>
          <h3 class="timeline-title">当前稳定版</h3>
          <p class="timeline-text">五条版本线整合，桌面和手机共用版本标签，归档入口统一收拢。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section scene-section" id="scene">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">场景对照</p>
        <h2 class="display">三种常见场景，配三种组合</h2>
        <p class="page-lead">同一个人，在不同时段用的产品组合也不一样。选一个场景看看，哪种搭配最省时间。</p>
      </div>
      <div class="scene-switch">
        <input type="radio" name="scene" id="scene-a" class="scene-radio" checked>
        <input type="radio" name="scene" id="scene-b" class="scene-radio">
        <input type="radio" name="scene" id="scene-c" class="scene-radio">
        <div class="scene-tabs">
          <label for="scene-a" class="scene-tab">赛前 30 分钟</label>
          <label for="scene-b" class="scene-tab">通勤路上</label>
          <label for="scene-c" class="scene-tab">赛后核对</label>
        </div>
        <div class="scene-panels">
          <div class="scene-panel" data-panel="a">
            <h3>赛前 30 分钟：先看清单，再开竖屏</h3>
            <ul class="scene-list">
              <li>适配清单给出主入口和两个备选，不用临场再挑。</li>
              <li>主入口打开即落竖屏数据卡，日期、联赛、进失球三行一眼扫完。</li>
              <li>重点场次在开赛前 2 小时锁定终版，数据不会临场再变。</li>
            </ul>
          </div>
          <div class="scene-panel" data-panel="b">
            <h3>通勤路上：横屏展开，节点提醒</h3>
            <ul class="scene-list">
              <li>横屏数据卡展开主客场拆分与半场、全场区间，站着也能看清。</li>
              <li>关键节点提醒用短句标出，不必一直盯着刷新。</li>
              <li>波动网络下优先加载速览行，信息完整度不掉。</li>
            </ul>
          </div>
          <div class="scene-panel" data-panel="c">
            <h3>赛后核对：战报速读，归档回查</h3>
            <ul class="scene-list">
              <li>战报按日期、联赛、进失球三行结构呈现，速读比长段落快。</li>
              <li>近 6 场、主客场拆分、半场与全场区间三种查看维度可对照。</li>
              <li>久远的战报去旧版资源下载站点回查，按版本线找更直接。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section cta-section" id="start">
    <div class="wrap">
      <div class="cta-panel">
        <div class="cta-copy">
          <p class="eyebrow">开始使用</p>
          <h2 class="display">看清单，或者直接找人问</h2>
          <p class="cta-text">先从适配清单走一遍四步，拿到主入口和备选。想核对操作细节可以看使用指南，想了解内容节奏可以翻内容观察，邮件标题带【注册】或【前瞻】就能分流到对应客服。</p>
        </div>
        <div class="cta-links">
          <a class="btn btn-primary" href="/guide/">查看使用指南</a>
          <a class="link-arrow" href="/insights/">看赛前前瞻</a>
          <a class="link-arrow" href="/contact/">联系碰面</a>
          <a class="link-arrow" href="/overview/">了解品牌总览</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --prod-text-on-paper: #2c5851;
}

/* ========== 面包屑间距 ========== */
.page-products .breadcrumb {
  padding-top: 20px;
  padding-bottom: 8px;
}

/* ========== Hero ========== */
.page-products .prod-hero {
  position: relative;
  background: var(--ink-void);
  color: var(--white);
  padding: 24px 0 56px;
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(61, 240, 200, 0.10), transparent 62%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(255, 122, 61, 0.08), transparent 62%);
  pointer-events: none;
}

.page-products .prod-hero-grid {
  position: relative;
  display: grid;
  gap: 32px;
}

.page-products .prod-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .prod-hero .eyebrow {
  color: var(--cyan);
}

.page-products .prod-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
}

.page-products .prod-hero-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mist);
  max-width: 34em;
  margin: 0;
}

.page-products .prod-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
}

.page-products .prod-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .prod-meta-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}

.page-products .prod-meta-label {
  font-size: 0.75rem;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .prod-hero-visual {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
  background: var(--ink-field);
}

.page-products .prod-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-products .prod-hero-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  background: rgba(7, 30, 35, 0.82);
  color: var(--cyan);
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
}

/* ========== 产品总览 ========== */
.page-products .product-overview {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .product-overview .section-head h2 {
  color: var(--white);
}

.page-products .product-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.page-products .product-card {
  position: relative;
  background: var(--ink-stand);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background 0.3s var(--ease);
}

.page-products .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.page-products .product-card:hover::before {
  transform: scaleX(1);
}

.page-products .product-card:hover {
  background: #163d44;
}

.page-products .product-card:nth-child(3)::before {
  background: var(--orange);
}

.page-products .product-card-num {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.page-products .product-card:nth-child(3) .product-card-num {
  color: var(--orange);
}

.page-products .product-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.01em;
}

.page-products .product-card-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
  margin: 0;
  flex-grow: 1;
}

.page-products .product-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  border: 1px solid var(--ink-line);
  color: var(--mist);
  border-radius: 2px;
  white-space: nowrap;
  background: transparent;
}

.page-products .chip-cyan {
  border-color: rgba(61, 240, 200, 0.42);
  background: rgba(61, 240, 200, 0.1);
  color: var(--cyan);
}

.page-products .chip-orange {
  border-color: rgba(255, 122, 61, 0.42);
  background: rgba(255, 122, 61, 0.1);
  color: var(--orange);
}

.page-products .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .link-arrow::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}

.page-products .link-arrow:hover {
  gap: 10px;
  color: var(--white);
}

.page-products .product-card:nth-child(3) .link-arrow {
  color: var(--orange);
}

.page-products .product-card:nth-child(3) .link-arrow:hover {
  color: var(--white);
}

/* ========== 筛选章节（浅纸底） ========== */
.page-products .filter-section {
  background: var(--paper);
  color: var(--deep-text);
}

.page-products .filter-section .display {
  color: var(--deep-text);
}

.page-products .filter-section .eyebrow {
  color: var(--mint);
}

.page-products .filter-layout {
  display: grid;
  gap: 32px;
}

.page-products .filter-visual {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

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

.page-products .filter-body .display {
  margin-top: 8px;
}

.page-products .filter-lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--prod-text-on-paper);
  margin: 14px 0 0;
}

.page-products .filter-steps {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
}

.page-products .filter-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(11, 107, 94, 0.18);
}

.page-products .filter-step:last-child {
  border-bottom: 1px solid rgba(11, 107, 94, 0.18);
}

.page-products .filter-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
  background: var(--orange);
  color: var(--orange-ink);
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.page-products .filter-step-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--deep-text);
  letter-spacing: 0.01em;
}

.page-products .filter-step-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--prod-text-on-paper);
}

.page-products .filter-summary {
  margin-top: 26px;
  padding: 18px 20px;
  background: rgba(61, 240, 200, 0.14);
  border-left: 3px solid var(--mint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .filter-summary-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  font-weight: 700;
}

.page-products .filter-summary p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--prod-text-on-paper);
}

/* ========== 小屏看台 ========== */
.page-products .mobile-section {
  background: var(--ink-void);
  color: var(--white);
  overflow: hidden;
}

.page-products .mobile-section .display {
  color: var(--white);
}

.page-products .mobile-section .eyebrow {
  color: var(--cyan);
}

.page-products .mobile-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .mobile-layout {
  display: grid;
  gap: 40px;
  margin-top: 36px;
}

.page-products .device-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  position: relative;
}

.page-products .device-mock {
  position: relative;
  margin: 0;
}

.page-products .device-mock-frame {
  background: #0a2529;
  border: 3px solid var(--ink-line);
  border-radius: 22px;
  padding: 16px 12px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.65);
}

.page-products .device-mock--port .device-mock-frame {
  width: 148px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
}

.page-products .device-mock--land .device-mock-frame {
  width: 220px;
  aspect-ratio: 19.5 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-products .device-mock-bar {
  display: block;
  width: 38%;
  height: 3px;
  margin: 0 auto 12px;
  background: var(--ink-line);
  border-radius: 2px;
  flex-shrink: 0;
}

.page-products .device-mock-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 8px;
  font-size: 0.6rem;
  color: var(--mist);
  border-bottom: 1px dashed rgba(168, 199, 197, 0.2);
}

.page-products .device-mock-row .mono {
  color: var(--cyan);
}

.page-products .device-mock-pill {
  margin-top: 10px;
  text-align: center;
  font-size: 0.55rem;
  padding: 5px 6px;
  background: rgba(61, 240, 200, 0.14);
  color: var(--cyan);
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.page-products .device-mock figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--mist);
  letter-spacing: 0.06em;
}

.page-products .mobile-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.page-products .mobile-photo {
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
}

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

.page-products .mobile-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-products .mobile-feature {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}

.page-products .mobile-feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.65rem;
  color: var(--cyan);
  border: 1px solid rgba(61, 240, 200, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
}

.page-products .mobile-feature h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--white);
}

.page-products .mobile-feature p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.68;
  color: var(--mist);
}

/* ========== 旧版资源 ========== */
.page-products .archive-section {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .archive-section .display {
  color: var(--white);
}

.page-products .archive-section .eyebrow {
  color: var(--orange);
}

.page-products .archive-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .archive-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-line);
}

.page-products .archive-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .archive-figure-value {
  font-family: var(--font-data);
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .archive-figure:nth-child(2) .archive-figure-value {
  color: var(--amber);
}

.page-products .archive-figure:nth-child(3) .archive-figure-value {
  color: var(--orange);
}

.page-products .archive-figure-label {
  font-size: 0.72rem;
  color: var(--mist);
  letter-spacing: 0.06em;
}

.page-products .archive-layout {
  display: grid;
  gap: 32px;
}

.page-products .archive-visual {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  border: 1px solid var(--ink-line);
}

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

.page-products .archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-line);
}

.page-products .archive-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-products .archive-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .version-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  background: var(--orange);
  color: var(--orange-ink);
  letter-spacing: 0.04em;
  cursor: default;
  border-radius: 2px;
}

.page-products .version-chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .version-device {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  background: var(--ink-void);
  color: var(--cyan);
  font-size: 0.65rem;
  padding: 5px 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  border: 1px solid var(--cyan);
  font-weight: 400;
  z-index: 3;
}

.page-products .version-chip:hover .version-device,
.page-products .version-chip:focus .version-device {
  opacity: 1;
}

.page-products .archive-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}

.page-products .archive-item-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--mist);
}

.page-products .archive-details {
  margin-top: 2px;
}

.page-products .archive-details summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--cyan);
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.page-products .archive-details summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.page-products .archive-details[open] summary::before {
  content: "−";
}

.page-products .archive-details p {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(7, 30, 35, 0.45);
  border-left: 2px solid var(--ink-line);
  font-size: 0.8rem;
  line-height: 1.68;
  color: var(--mist);
}

/* ========== 时间轴 ========== */
.page-products .timeline-section {
  background: var(--paper);
  color: var(--deep-text);
}

.page-products .timeline-section .display {
  color: var(--deep-text);
}

.page-products .timeline-section .eyebrow {
  color: var(--mint);
}

.page-products .timeline-section .page-lead {
  color: var(--prod-text-on-paper);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

.page-products .timeline-visual {
  margin-top: 32px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

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

.page-products .timeline-stages {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-products .timeline-stage {
  position: relative;
  padding-left: 28px;
  padding-bottom: 4px;
  border-left: 2px solid rgba(11, 107, 94, 0.25);
}

.page-products .timeline-stage::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px rgba(255, 122, 61, 0.32);
}

.page-products .timeline-stage:nth-child(5)::before {
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(11, 107, 94, 0.32);
}

.page-products .timeline-num {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  display: block;
  margin-bottom: 4px;
}

.page-products .timeline-title {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--deep-text);
}

.page-products .timeline-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--prod-text-on-paper);
}

/* ========== 场景对照 ========== */
.page-products .scene-section {
  background: var(--ink-void);
  color: var(--white);
}

.page-products .scene-section .display {
  color: var(--white);
}

.page-products .scene-section .eyebrow {
  color: var(--cyan);
}

.page-products .scene-section .page-lead {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 12px;
}

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

.page-products .scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 22px;
}

.page-products .scene-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-family: var(--font-data);
  letter-spacing: 0.03em;
  border: 1px solid var(--ink-line);
  color: var(--mist);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.page-products .scene-tab:hover {
  border-color: var(--cyan);
  color: var(--white);
}

.page-products #scene-a:checked ~ .scene-tabs label[for="scene-a"],
.page-products #scene-b:checked ~ .scene-tabs label[for="scene-b"],
.page-products #scene-c:checked ~ .scene-tabs label[for="scene-c"] {
  background: var(--cyan);
  color: var(--cyan-ink);
  border-color: var(--cyan);
  font-weight: 700;
}

.page-products .scene-panel {
  display: none;
  padding: 24px;
  background: var(--ink-stand);
  border: 1px solid var(--ink-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.page-products #scene-a:checked ~ .scene-panels [data-panel="a"],
.page-products #scene-b:checked ~ .scene-panels [data-panel="b"],
.page-products #scene-c:checked ~ .scene-panels [data-panel="c"] {
  display: block;
}

.page-products .scene-panel h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--white);
  letter-spacing: 0.01em;
}

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

.page-products .scene-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .scene-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--orange);
}

/* ========== CTA ========== */
.page-products .cta-section {
  background: var(--ink-field);
  color: var(--white);
}

.page-products .cta-panel {
  position: relative;
  padding: 36px 24px;
  background: var(--ink-stand);
  border: 1px solid var(--ink-line);
  overflow: hidden;
  display: grid;
  gap: 26px;
}

.page-products .cta-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-products .cta-copy .eyebrow {
  color: var(--cyan);
}

.page-products .cta-copy .display {
  color: var(--white);
  margin-top: 8px;
}

.page-products .cta-text {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
  max-width: 42em;
}

.page-products .cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* ========== 桌面端 ========== */
@media (min-width: 860px) {
  .page-products .prod-hero {
    padding: 32px 0 88px;
  }

  .page-products .prod-hero-grid {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 48px;
  }

  .page-products .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }

  .page-products .filter-layout {
    grid-template-columns: 1.02fr 1fr;
    align-items: start;
    gap: 48px;
  }

  .page-products .filter-body .display {
    font-size: 2.1rem;
  }

  .page-products .mobile-layout {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 48px;
  }

  .page-products .device-stage {
    padding: 24px 0;
  }

  .page-products .device-mock--port .device-mock-frame {
    width: 172px;
  }

  .page-products .device-mock--land .device-mock-frame {
    width: 258px;
  }

  .page-products .archive-figures {
    gap: 24px;
    margin: 40px 0 48px;
    padding-bottom: 36px;
  }

  .page-products .archive-layout {
    grid-template-columns: 340px 1fr;
    align-items: start;
    gap: 48px;
  }

  .page-products .timeline-visual {
    margin-top: 40px;
  }

  .page-products .timeline-stages {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 48px;
  }

  .page-products .timeline-stage {
    padding-left: 0;
    padding-top: 30px;
    border-left: none;
    border-top: 2px solid rgba(11, 107, 94, 0.25);
  }

  .page-products .timeline-stage::before {
    left: 0;
    top: -8px;
  }

  .page-products .scene-panel {
    padding: 30px 32px;
  }

  .page-products .cta-panel {
    grid-template-columns: 1.2fr auto;
    align-items: center;
    gap: 40px;
    padding: 44px 40px;
  }

  .page-products .cta-links {
    justify-content: flex-end;
    max-width: 340px;
  }
}

@media (max-width: 380px) {
  .page-products .device-stage {
    flex-direction: column;
    gap: 16px;
  }

  .page-products .device-mock--port .device-mock-frame {
    width: 136px;
  }

  .page-products .device-mock--land .device-mock-frame {
    width: 200px;
  }
}