.page-products {
  --dl-ink: var(--charcoal-950);
  --dl-quiet: var(--rock-600);
  --dl-hair: 1px solid var(--paper-edge);
  background: var(--rice-50);
}

/* ---------- 首屏 ---------- */

.page-products .dl-opening {
  padding: var(--sp-4) 0 var(--sp-3);
}

.page-products .dl-frame {
  padding: var(--sp-4) var(--sp-3);
  background: var(--rice-50);
}

.page-products .dl-frame__grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.page-products .dl-frame__lead .eyebrow {
  margin: 0 0 var(--sp-2);
}

.page-products .dl-frame h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 8vw, 72px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--sabah-900);
  margin: 0 0 var(--sp-3);
}

.page-products .dl-frame__intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--dl-ink);
  margin: 0 0 var(--sp-3);
  max-width: 60ch;
}

.page-products .dl-frame__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.page-products .dl-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--paper-edge);
  border: var(--edge);
  margin: 0;
}

.page-products .dl-metric {
  background: var(--rice-50);
  padding: var(--sp-2) var(--sp-3);
}

.page-products .dl-metric__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dl-quiet);
  margin: 0;
}

.page-products .dl-metric__v {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--sabah-700);
  margin: 6px 0 0;
}

/* ---------- 四类文件总览 ---------- */

.page-products .dl-overview {
  background: var(--moss-200);
  border-top: var(--edge);
  border-bottom: var(--edge);
}

.page-products .dl-overview__head {
  max-width: 62ch;
}

.page-products .dl-overview__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.12;
  color: var(--sabah-900);
  margin: var(--sp-2) 0 var(--sp-2);
}

.page-products .dl-overview__lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sabah-700);
  margin: 0 0 var(--sp-3);
}

.page-products .dl-deck {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-2);
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-products .dl-deck__item {
  flex: 0 0 80%;
  scroll-snap-align: start;
  background: var(--rice-50);
  border: var(--edge);
  border-top: 3px solid var(--sabah-500);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
}

.page-products .dl-deck__no {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sabah-500);
  margin-bottom: 8px;
}

.page-products .dl-deck__item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  color: var(--sabah-900);
  margin: 0 0 8px;
}

.page-products .dl-deck__item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dl-ink);
  margin: 0 0 var(--sp-2);
}

.page-products .dl-deck__role {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--clay-500);
  border-top: 1px dashed var(--paper-edge);
  padding-top: 10px;
}

/* ---------- 货架：索引 + 卡片 ---------- */

.page-products .dl-rail__list {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0 0 6px;
  display: grid;
  gap: 2px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  overflow-x: auto;
}

.page-products .dl-rail__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  color: var(--sabah-700);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.page-products .dl-rail__list a:hover,
.page-products .dl-rail__list a:focus-visible {
  background: var(--moss-200);
  border-left-color: var(--neon-400);
}

.page-products .dl-rail__list .mono {
  color: var(--dl-quiet);
  font-size: 12px;
}

.page-products .dl-rail__note {
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--dl-quiet);
  border-top: 1px dashed var(--paper-edge);
  padding-top: 10px;
  margin: var(--sp-2) 0 0;
}

.page-products .dl-shelf__stack {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.page-products .dl-card {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  background: var(--rice-50);
  border: var(--edge);
  border-top: 3px solid var(--sabah-700);
  scroll-margin-top: 116px;
}

.page-products .dl-card--moss {
  background: var(--moss-200);
  border-top-color: var(--sabah-500);
}

.page-products .dl-card__stamp {
  position: absolute;
  top: -13px;
  right: var(--sp-3);
  background: var(--clay-500);
  color: var(--rice-50);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 11px;
  transform: rotate(-1.6deg);
  box-shadow: 0 8px 16px -10px rgba(14, 46, 34, 0.75);
}

.page-products .dl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--sp-2);
}

.page-products .dl-card__no {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sabah-500);
  margin: 0;
}

.page-products .dl-card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 4.6vw, 36px);
  line-height: 1.1;
  color: var(--sabah-900);
  margin: 0;
}

.page-products .dl-card__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--dl-ink);
  margin: 0 0 var(--sp-3);
  max-width: 66ch;
}

.page-products .dl-card__foot {
  font-size: 15px;
  line-height: 1.78;
  color: var(--sabah-700);
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--paper-edge);
}

.page-products .dl-card__foot a {
  color: var(--sabah-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 图片 ---------- */

.page-products .dl-figure {
  margin: 0 0 var(--sp-3);
  border: var(--edge);
  background: var(--rice-50);
}

.page-products .dl-figure--switch { --ratio: 5 / 3; }
.page-products .dl-figure--fit { --ratio: 50 / 31; }
.page-products .dl-figure--dark { --ratio: 20 / 13; }
.page-products .dl-figure--form { --ratio: 3 / 2; }
.page-products .dl-figure--version { --ratio: 45 / 28; margin: var(--sp-3) 0 0; }

.page-products .dl-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 步骤 ---------- */

.page-products .dl-steps {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--paper-edge);
  border: var(--edge);
}

.page-products .dl-steps__item {
  display: grid;
  gap: 6px;
  background: var(--rice-50);
  padding: var(--sp-2) var(--sp-3);
}

.page-products .dl-steps__n {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sabah-500);
}

.page-products .dl-steps__item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dl-ink);
  margin: 0;
}

/* ---------- 表格 ---------- */

.page-products .dl-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
}

.page-products .dl-table__cap {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dl-quiet);
  padding: 0 0 8px;
}

.page-products .dl-table th,
.page-products .dl-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: var(--edge);
  vertical-align: top;
  color: var(--dl-ink);
}

.page-products .dl-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--dl-quiet);
}

.page-products .dl-table tbody tr:nth-child(odd) {
  background: var(--moss-200);
}

.page-products .dl-table .mono {
  color: var(--sabah-700);
  font-weight: 500;
}

.page-products .dl-card--moss .dl-table tbody tr:nth-child(odd) {
  background: rgba(248, 245, 237, 0.78);
}

/* ---------- 分段切换 ---------- */

.page-products .dl-switch {
  position: relative;
  margin-top: var(--sp-3);
}

.page-products .dl-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.page-products .dl-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}

.page-products .dl-seg label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 7px 15px;
  border: 1px solid var(--sabah-500);
  background: var(--rice-50);
  color: var(--sabah-700);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page-products .dl-seg label:hover {
  background: var(--rice-50);
  border-color: var(--neon-400);
}

.page-products .dl-switch > input:focus-visible ~ .dl-seg {
  box-shadow: 0 0 0 2px var(--neon-400);
}

.page-products #dl-tab-res:checked ~ .dl-seg label[for="dl-tab-res"],
.page-products #dl-tab-bro:checked ~ .dl-seg label[for="dl-tab-bro"],
.page-products #dl-tab-dark:checked ~ .dl-seg label[for="dl-tab-dark"] {
  background: var(--sabah-700);
  border-color: var(--sabah-700);
  color: var(--rice-50);
}

.page-products .dl-panels {
  border-top: 1px dashed var(--paper-edge);
  padding-top: var(--sp-3);
}

.page-products .dl-panel {
  display: none;
}

.page-products #dl-tab-res:checked ~ .dl-panels .dl-panel[data-panel="res"],
.page-products #dl-tab-bro:checked ~ .dl-panels .dl-panel[data-panel="bro"],
.page-products #dl-tab-dark:checked ~ .dl-panels .dl-panel[data-panel="dark"] {
  display: block;
  animation: dlFade 0.22s ease both;
}

@keyframes dlFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.page-products .dl-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .dl-notes li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--dl-ink);
}

.page-products .dl-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--clay-500);
}

/* ---------- 说明清单 ---------- */

.page-products .dl-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--paper-edge);
  border: var(--edge);
}

.page-products .dl-spec__item {
  background: var(--rice-50);
  padding: var(--sp-2) var(--sp-3);
}

.page-products .dl-spec__k {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sabah-500);
  margin-bottom: 6px;
}

.page-products .dl-spec__item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dl-ink);
  margin: 0;
}

/* ---------- 版本区块 ---------- */

.page-products .dl-version {
  background: var(--sabah-900);
  border-top: 3px solid var(--sabah-500);
}

.page-products .dl-version .eyebrow {
  color: var(--neon-400);
}

.page-products .dl-version h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.1;
  color: var(--rice-50);
  margin: var(--sp-2) 0 var(--sp-2);
}

.page-products .dl-version__intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--moss-200);
  margin: 0;
  max-width: 56ch;
}

.page-products .dl-version__log {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.page-products .dl-version__more {
  font-size: 14px;
  line-height: 1.8;
  color: var(--moss-200);
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px dashed rgba(220, 231, 220, 0.25);
}

.page-products .dl-version__more a {
  color: var(--neon-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .dl-version .dl-figure {
  border-color: rgba(220, 231, 220, 0.24);
  background: rgba(248, 245, 237, 0.06);
}

.page-products .dl-version .dl-fold {
  background: rgba(248, 245, 237, 0.06);
  border-color: rgba(220, 231, 220, 0.24);
}

.page-products .dl-version .dl-fold > summary {
  color: var(--rice-50);
}

.page-products .dl-version .dl-fold > summary::after {
  color: var(--neon-400);
}

.page-products .dl-version .dl-fold > summary:hover {
  background: rgba(79, 224, 200, 0.12);
}

.page-products .dl-version .dl-fold[open] > summary {
  border-bottom-color: rgba(220, 231, 220, 0.24);
}

.page-products .dl-version .dl-fold__body {
  color: var(--moss-200);
}

.page-products .dl-version .dl-fold__body li::marker {
  color: var(--neon-400);
}

/* ---------- 折叠 ---------- */

.page-products .dl-fold {
  border: var(--edge);
  background: var(--rice-50);
  margin: 0 0 var(--sp-2);
}

.page-products .dl-fold:last-of-type {
  margin-bottom: 0;
}

.page-products .dl-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px var(--sp-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--sabah-700);
  transition: background 0.18s ease;
}

.page-products .dl-fold > summary::-webkit-details-marker {
  display: none;
}

.page-products .dl-fold > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--sabah-500);
  flex: none;
}

.page-products .dl-fold[open] > summary {
  border-bottom: var(--edge);
}

.page-products .dl-fold[open] > summary::after {
  content: "\2212";
}

.page-products .dl-fold > summary:hover,
.page-products .dl-fold > summary:focus-visible {
  background: var(--moss-200);
}

.page-products .dl-fold__body {
  padding: var(--sp-3);
  font-size: 15px;
  line-height: 1.78;
  color: var(--dl-ink);
}

.page-products .dl-fold__body p {
  margin: 0;
}

.page-products .dl-fold__body ul {
  margin: 0;
  padding-left: 20px;
}

.page-products .dl-fold__body li + li {
  margin-top: 8px;
}

.page-products .dl-fold__body a {
  color: var(--sabah-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 常见疑问 ---------- */

.page-products .dl-faq__head {
  max-width: 60ch;
  margin-bottom: var(--sp-3);
}

.page-products .dl-faq__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.1;
  color: var(--sabah-900);
  margin: var(--sp-2) 0 0;
}

.page-products .dl-faq__list {
  max-width: 78ch;
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-products .dl-deck__item {
    flex: 0 0 320px;
  }

  .page-products .dl-steps__item {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-2);
  }

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

@media (min-width: 900px) {
  .page-products .dl-opening {
    padding: var(--sp-6) 0 var(--sp-4);
  }

  .page-products .dl-frame {
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
  }

  .page-products .dl-frame__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.86fr);
    gap: var(--sp-5);
    align-items: end;
  }

  .page-products .dl-metrics {
    margin: 0;
  }

  .page-products .dl-rail__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .page-products .dl-shelf__stack {
    margin-top: 0;
    gap: var(--sp-6);
  }

  .page-products .dl-card {
    padding: var(--sp-5) var(--sp-5);
  }

  .page-products .dl-card:nth-child(2) {
    margin-left: var(--sp-4);
  }

  .page-products .dl-card:nth-child(4) {
    margin-left: var(--sp-3);
  }

  .page-products .dl-version__log {
    margin-top: 0;
    align-content: start;
  }

  .page-products .dl-deck {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
  }

  .page-products .dl-deck__item {
    flex: none;
  }
}

@media (min-width: 1200px) {
  .page-products .dl-frame h1 {
    max-width: 16ch;
  }

  .page-products .dl-card:nth-child(2) {
    margin-left: var(--sp-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .dl-seg label,
  .page-products .dl-rail__list a,
  .page-products .dl-fold > summary {
    transition: none;
  }

  .page-products #dl-tab-res:checked ~ .dl-panels .dl-panel[data-panel="res"],
  .page-products #dl-tab-bro:checked ~ .dl-panels .dl-panel[data-panel="bro"],
  .page-products #dl-tab-dark:checked ~ .dl-panels .dl-panel[data-panel="dark"] {
    animation: none;
  }
}