.page-products {
  --pd-gap: clamp(16px, 2.5vw, 26px);
  --pd-radius: 20px;
  --pd-panel: #ffffff;
  --pd-shadow: 0 20px 44px -38px rgba(21, 23, 25, 0.6);
  --pd-shadow-lift: 0 26px 54px -36px rgba(21, 23, 25, 0.55);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.page-products a:focus-visible,
.page-products summary:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-products .pd-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4.5vw, 56px) 0 clamp(28px, 4.5vw, 52px);
  background:
    radial-gradient(115% 85% at 95% 4%, rgba(63, 124, 138, 0.15), transparent 60%),
    radial-gradient(85% 72% at 2% 98%, rgba(210, 59, 34, 0.12), transparent 64%),
    var(--paper);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -16%;
  width: min(58vw, 540px);
  aspect-ratio: 1 / 1;
  border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
  background: linear-gradient(148deg, rgba(210, 59, 34, 0.16), rgba(63, 124, 138, 0.12) 62%, rgba(251, 248, 242, 0) 88%);
  transform: rotate(-10deg);
  pointer-events: none;
}

.page-products .pd-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(20px, 3.4vw, 40px);
  align-items: start;
}

.page-products .pd-hero-copy {
  min-width: 0;
}

.page-products .pd-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 5.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-products .pd-lede {
  margin: 14px 0 0;
  max-width: 48ch;
  font-family: var(--font-serif);
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
}

.page-products .pd-hero-stats > div {
  border-top: 2px solid var(--flame);
  padding-top: 10px;
  min-width: 0;
}

.page-products .pd-hero-stats > div:nth-child(2) {
  border-top-color: var(--teal);
}

.page-products .pd-hero-stats > div:nth-child(3) {
  border-top-color: var(--amber);
}

.page-products .pd-hero-stats dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-60);
}

.page-products .pd-hero-stats dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2.5vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}

.page-products .pd-hero-figure {
  margin: 0;
  border-radius: var(--pd-radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, #1b2024, #23515c 92%);
  box-shadow: var(--pd-shadow-lift);
}

.page-products .pd-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 章节索引条 ---------- */
.page-products .pd-toc {
  background: var(--cold);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pd-toc ol {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-products .pd-toc li {
  flex: 0 0 auto;
}

.page-products .pd-toc a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-70);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-products .pd-toc a:hover {
  color: var(--flame-deep);
  border-color: var(--flame);
  background: #fff;
}

/* ---------- 通用章节 ---------- */
.page-products .pd-section {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(40px, 6vw, 76px);
}

.page-products .pd-section--tint {
  background:
    linear-gradient(180deg, rgba(232, 236, 238, 0.55), rgba(216, 229, 231, 0.55)),
    var(--paper);
}

.page-products .pd-section--arch {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(63, 124, 138, 0.14), transparent 62%),
    var(--paper);
}

.page-products .pd-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3.4vw, 36px);
  max-width: 64ch;
}

.page-products .pd-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.page-products .pd-head .section-lede {
  margin: 0;
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.78;
  color: var(--ink-70);
}

/* ---------- 01 轮次工作台 ---------- */
.page-products .pd-workspace {
  display: grid;
  gap: var(--pd-gap);
  align-items: start;
}

.page-products .pd-board {
  background: var(--pd-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: var(--pd-shadow);
  min-width: 0;
}

.page-products .pd-board-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--teal-deep);
  text-transform: uppercase;
}

.page-products .pd-rounds {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.page-products .pd-round {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-products .pd-round:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: translateX(3px);
}

.page-products .pd-round--spot {
  background: var(--flame-soft);
  border-color: rgba(210, 59, 34, 0.24);
}

.page-products .pd-round-no {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.page-products .pd-round--spot .pd-round-no {
  color: var(--flame-deep);
}

.page-products .pd-round-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.page-products .pd-round-body b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.page-products .pd-round-body small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-60);
}

.page-products .pd-spot {
  position: relative;
  overflow: hidden;
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(210, 59, 34, 0.22);
  background:
    linear-gradient(158deg, rgba(210, 59, 34, 0.11), rgba(255, 255, 255, 0.72) 46%, rgba(216, 229, 231, 0.78)),
    #fff;
  box-shadow: var(--pd-shadow-lift);
  min-width: 0;
}

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

.page-products .pd-spot h3 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.28;
}

.page-products .pd-spot p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-spot-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-spot-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-70);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.page-products .pd-spot-list li .pd-mono {
  color: var(--flame-deep);
  font-weight: 700;
}

.page-products .pd-spot-foot {
  margin-top: 16px !important;
  font-size: 13px !important;
  color: var(--ink-60) !important;
}

.page-products .pd-board--rules {
  background: var(--haze);
  border-color: rgba(35, 81, 92, 0.16);
  box-shadow: none;
}

.page-products .pd-board--rules .pd-board-label {
  color: var(--teal-deep);
}

.page-products .pd-board--rules details {
  border-bottom: 1px solid rgba(35, 81, 92, 0.16);
  padding: 11px 0;
}

.page-products .pd-board--rules details:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-board--rules summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-deep);
}

.page-products .pd-board--rules summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-board--rules summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--flame);
}

.page-products .pd-board--rules details[open] summary::after {
  content: "−";
}

.page-products .pd-board--rules p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-70);
}

/* ---------- 02 终端刷新 ---------- */
.page-products .pd-pulse {
  margin: 0 0 clamp(18px, 3vw, 30px);
}

.page-products .pd-pulse svg {
  display: block;
  width: 100%;
  height: clamp(38px, 6vw, 60px);
}

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

.page-products .pd-step {
  border-top: 3px solid var(--flame);
  padding-top: 12px;
  min-width: 0;
}

.page-products .pd-step:nth-child(2) {
  border-top-color: var(--amber);
}

.page-products .pd-step:nth-child(3) {
  border-top-color: var(--teal);
}

.page-products .pd-step:nth-child(4) {
  border-top-color: var(--green);
}

.page-products .pd-step-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-60);
}

.page-products .pd-step h3 {
  margin: 7px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.page-products .pd-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: var(--ink-70);
}

.page-products .pd-refresh-grid {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.8vw, 38px);
  align-items: center;
}

.page-products .pd-figure {
  margin: 0;
  border-radius: var(--pd-radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--cold);
  box-shadow: var(--pd-shadow);
}

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

.page-products .pd-figure .media-caption {
  display: block;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-60);
  background: #fff;
  border-top: 1px solid var(--line-soft);
}

.page-products .pd-note-card {
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--pd-radius);
  border-left: 3px solid var(--teal);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.page-products .pd-note-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.4;
  color: var(--teal-deep);
}

.page-products .pd-note-card p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-note-card p:last-child {
  margin-bottom: 0;
}

/* ---------- 03 使用记录 ---------- */
.page-products .pd-records {
  display: grid;
  gap: var(--pd-gap);
  align-items: start;
}

.page-products .pd-records-body {
  min-width: 0;
}

.page-products .pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .pd-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--haze);
  color: var(--teal-deep);
  border: 1px solid rgba(35, 81, 92, 0.16);
}

.page-products .pd-records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-records-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--ink-70);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.page-products .pd-records-list li:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--pd-shadow);
}

.page-products .pd-records-list .pd-mono {
  color: var(--flame-deep);
  font-weight: 700;
  white-space: nowrap;
}

.page-products .pd-state {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
}

.page-products .pd-records-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--haze);
  font-size: 13px;
  line-height: 1.75;
  color: var(--teal-deep);
}

.page-products .pd-records-link {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--ink-70);
}

.page-products .pd-records-link a {
  color: var(--flame-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 04 三维索引 ---------- */
.page-products .pd-axes {
  display: grid;
  gap: var(--pd-gap);
}

.page-products .pd-axis {
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--pd-radius);
  background: #fff;
  border: 1px solid rgba(35, 81, 92, 0.16);
  box-shadow: var(--pd-shadow);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  min-width: 0;
}

.page-products .pd-axis:hover {
  transform: translateY(-3px);
  box-shadow: var(--pd-shadow-lift);
}

.page-products .pd-axis-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 3px;
}

.page-products .pd-axis h3 {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--teal-deep);
}

.page-products .pd-axis p {
  margin: 0;
  font-size: 14px;
  line-height: 1.76;
  color: var(--ink-70);
}

.page-products .pd-axes-foot {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.6vw, 38px);
  align-items: center;
}

.page-products .pd-axes-copy h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-products .pd-axes-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pd-axes-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-70);
}

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

.page-products .pd-axes-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

/* ---------- 05 谁在用 ---------- */
.page-products .pd-audience {
  display: grid;
  gap: var(--pd-gap);
}

.page-products .pd-aud-card {
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--pd-radius);
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--pd-shadow);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
  min-width: 0;
}

.page-products .pd-aud-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame);
}

.page-products .pd-aud-card h3 {
  margin: 12px 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.page-products .pd-aud-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.76;
  color: var(--ink-70);
}

.page-products .pd-subscribe {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.6vw, 38px);
  padding: clamp(18px, 2.8vw, 30px);
  border-radius: var(--pd-radius);
  background:
    linear-gradient(140deg, rgba(233, 162, 59, 0.16), rgba(251, 248, 242, 0.9) 52%, rgba(216, 229, 231, 0.72));
  border: 1px solid rgba(233, 162, 59, 0.4);
  align-items: center;
}

.page-products .pd-figure--sub {
  max-width: 340px;
  justify-self: center;
  width: 100%;
}

.page-products .pd-sub-copy .eyebrow {
  margin: 0 0 8px;
}

.page-products .pd-sub-copy h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.28;
}

.page-products .pd-sub-copy p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-sub-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.page-products .pd-sub-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-70);
}

.page-products .pd-sub-list li::before {
  content: "·";
  position: absolute;
  left: 5px;
  top: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--flame);
  line-height: 1.3;
}

.page-products .pd-sub-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
}

/* ---------- 06 版本对照 ---------- */
.page-products .pd-versions-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: #fff;
  box-shadow: var(--pd-shadow);
}

.page-products .pd-versions {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pd-versions th,
.page-products .pd-versions td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.65;
}

.page-products .pd-versions thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--teal-deep);
  background: var(--cold);
  white-space: nowrap;
}

.page-products .pd-versions tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pd-versions tbody tr:hover td {
  background: rgba(216, 229, 231, 0.42);
}

.page-products .pd-versions tbody td:first-child {
  font-weight: 700;
  color: var(--flame-deep);
  white-space: nowrap;
}

.page-products .pd-versions tbody td:nth-child(2) {
  color: var(--ink-60);
  white-space: nowrap;
}

.page-products .pd-versions-note {
  margin: 18px 0 0;
  max-width: 76ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-70);
}

.page-products .pd-versions-note a {
  color: var(--flame-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 结尾 ---------- */
.page-products .pd-closing {
  padding: clamp(30px, 4.6vw, 52px) 0;
  background: var(--ink);
  color: var(--paper);
}

.page-products .pd-closing-inner {
  display: grid;
  gap: 20px;
  align-items: center;
}

.page-products .pd-closing-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.25;
  color: var(--paper);
}

.page-products .pd-closing-text {
  margin: 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(251, 248, 242, 0.74);
}

.page-products .pd-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.page-products .pd-closing-actions .btn--solid {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--paper);
}

.page-products .pd-closing-actions .btn--solid:hover {
  background: var(--flame-deep);
  border-color: var(--flame-deep);
}

.page-products .pd-closing-actions .btn--ghost {
  border-color: rgba(251, 248, 242, 0.42);
  color: var(--paper);
}

.page-products .pd-closing-actions .btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(251, 248, 242, 0.1);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .pd-audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .pd-closing-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
  }

  .page-products .pd-hero-figure {
    transform: translateY(-8px) rotate(-1.1deg);
  }

  .page-products .pd-refresh-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }

  .page-products .pd-records {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-products .pd-axes-foot {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 3.4vw, 42px);
  }

  .page-products .pd-subscribe {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(22px, 3.2vw, 40px);
  }
}

@media (min-width: 1000px) {
  .page-products .pd-workspace {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.2fr) minmax(0, 0.94fr);
  }

  .page-products .pd-axes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-audience {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
  }
}

@media (min-width: 720px) and (max-width: 999px) {
  .page-products .pd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 519px) {
  .page-products .pd-hero-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .page-products .pd-records-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .pd-state {
    grid-column: 1;
  }

  .page-products .pd-toc a {
    padding: 6px 12px;
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-round,
  .page-products .pd-axis,
  .page-products .pd-aud-card,
  .page-products .pd-records-list li {
    transition: none;
  }

  .page-products .pd-round:hover,
  .page-products .pd-axis:hover,
  .page-products .pd-aud-card:hover,
  .page-products .pd-records-list li:hover {
    transform: none;
  }

  .page-products .pd-hero-figure {
    transform: none;
  }
}


<main id="main-content" class="page-products">

  <section class="pd-hero">
    <div class="container--wide pd-hero-grid">
      <div class="pd-hero-copy">
        <nav class="breadcrumb" aria-label="面包屑">
          <ol>
            <li><a href="/">看台首页</a></li>
            <li aria-current="page">轮次与归档服务</li>
          </ol>
        </nav>
        <p class="eyebrow">轮次与归档服务</p>
        <h1>一轮赛程，从安排到回查都在一张工作台上</h1>
        <p class="pd-lede">开赛前你想知道本轮哪几场值得留出时间，终场后你想知道比分最快什么时候变，隔一阵子你想找回某个轮次的完整记录。火博看台把这三件事放进同一张桌面，通勤路上刷一次就够，回头再查也不用重新摸索路径。</p>
        <dl class="pd-hero-stats">
          <div>
            <dt>终场后刷新</dt>
            <dd>3 分钟</dd>
          </div>
          <div>
            <dt>浏览轨迹回溯</dt>
            <dd>18 个月</dd>
          </div>
          <div>
            <dt>轮次档案收录</dt>
            <dd>46,000 场</dd>
          </div>
        </dl>
        <div class="pd-switch">
          <a href="#workspace"><span class="pd-switch-key">R</span>轮次工作台</a>
          <a href="#refresh"><span class="pd-switch-key">T</span>刷新链路</a>
          <a href="#records"><span class="pd-switch-key">H</span>使用记录</a>
        </div>
      </div>
      <figure class="pd-hero-figure">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="轮次编号、重点场次标记与规则说明并排的归档工作台界面，匿名示例数据">
        <figcaption class="pd-hero-caption">本轮场次、重点标记与规则说明并排</figcaption>
      </figure>
    </div>
  </section>

  <section class="section pd-section" id="workspace" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">01</span> 轮次工作台</p>
        <h2 class="section-title">一轮里哪几场值得看，进来就知道</h2>
        <p class="section-lede">左边列本轮全部场次，中间只留最值得花时间的那几场，右边的规则说明随时展开。火博体育轮次安排把这三列摆在同一个视野里，你不必在几个页面之间来回对照。</p>
      </header>

      <div class="pd-workspace">
        <div class="pd-board pd-board--rounds">
          <p class="pd-board-label">第 24 轮 · 场次列表</p>
          <ol class="pd-rounds">
            <li class="pd-round pd-round--spot">
              <span class="pd-round-no">03</span>
              <span class="pd-round-body"><b>第 3 场</b><small>重点 · 2 分钟前刷新</small></span>
              <span class="tag tag--green">已刷新</span>
            </li>
            <li class="pd-round">
              <span class="pd-round-no">05</span>
              <span class="pd-round-body"><b>第 5 场</b><small>常规 · 待开赛</small></span>
              <span class="tag tag--teal">未开</span>
            </li>
            <li class="pd-round pd-round--spot">
              <span class="pd-round-no">07</span>
              <span class="pd-round-body"><b>第 7 场</b><small>重点 · 上轮已归档</small></span>
              <span class="tag tag--amber">重点</span>
            </li>
            <li class="pd-round">
              <span class="pd-round-no">09</span>
              <span class="pd-round-body"><b>第 9 场</b><small>常规 · 已刷新</small></span>
              <span class="tag tag--green">已刷新</span>
            </li>
            <li class="pd-round">
              <span class="pd-round-no">11</span>
              <span class="pd-round-body"><b>第 11 场</b><small>常规 · 待开赛</small></span>
              <span class="tag tag--teal">未开</span>
            </li>
          </ol>
        </div>

        <article class="pd-spot">
          <div class="pd-spot-top">
            <span class="tag tag--amber">本轮重点场次</span>
            <span class="pd-spot-time">更新于 2 分钟前</span>
          </div>
          <h3>只把最该看的三场放到你面前</h3>
          <p>每轮结束后，编辑会从最近几轮的状态变化、排名位置和交锋历史里挑出少量场次做重点标记。它不是热度排行，作用是帮你决定今晚的时间花在哪一场上。</p>
          <ul class="pd-spot-list">
            <li><span class="pd-mono">03</span><span>本轮最先刷新的一场，标记理由写着最近三轮的连胜走向</span></li>
            <li><span class="pd-mono">07</span><span>两队排名相邻，结果会直接影响本轮之后的位次</span></li>
            <li><span class="pd-mono">12</span><span>上赛季同轮次交手打到加时规则说明同时在右侧展开</span></li>
          </ul>
          <p class="pd-spot-foot">标记旁边始终带着相对更新时间和轮次编号，看到数字就知道这条提示是哪来的。</p>
        </article>

        <aside class="pd-board pd-board--rules">
          <p class="pd-board-label">规则说明 · 与本轮并排</p>
          <details open>
            <summary>轮次编号怎么读</summary>
            <p>前面的数字是轮次，后面的两位是这一轮里的场次序号。同一场比赛在索引、档案和时间轴里都用这组编号，找那场不用靠回忆日期。</p>
          </details>
          <details>
            <summary>加时与点球怎么计入</summary>
            <p>常规时间之外的比分单独标出，不会混进正赛结果里。看存档时两种比分上下相邻，一眼能分出哪一段决定了胜负。</p>
          </details>
          <details>
            <summary>补赛和赛程调整怎么处理</summary>
            <p>遇到延期，原轮次编号保留，新时间挂在同一条记录下，状态改为待定。订了摘要的球迷会在下一次发布时看到这次调整。</p>
          </details>
          <details>
            <summary>一轮小结里有什么</summary>
            <p>每轮结束后附一段小结，写清规则有没有变动、索引有哪些更新，帮你判断下轮要不要改关注清单。</p>
          </details>
        </aside>
      </div>
    </div>
  </section>

  <section class="section pd-section pd-section--tint" id="refresh" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">02</span> 终端刷新</p>
        <h2 class="section-title">终场哨响，三分钟内你看到的数字就是终局</h2>
        <p class="section-lede">上下班路上只有几分钟刷手机，最怕点进一个还在转圈的页面。流程压到四步，每一步都留时间戳，你看到的比分旁边就写着它是几点几分刷上去的。</p>
      </header>

      <div class="pd-pulse" aria-hidden="true">
        <svg viewBox="0 0 1160 60" preserveAspectRatio="none" focusable="false">
          <defs>
            <linearGradient id="pdPulseGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#3F7C8A"/>
              <stop offset="52%" stop-color="#D23B22"/>
              <stop offset="100%" stop-color="#E9A23B"/>
            </linearGradient>
          </defs>
          <path d="M0 32 H150 l24 -18 l28 36 l24 -30 l26 26 H392 l22 -14 l26 28 l24 -24 l24 18 H760 l24 -16 l26 30 l24 -26 l24 20 H1160"
                fill="none" stroke="url(#pdPulseGrad)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <ol class="pd-steps">
        <li class="pd-step">
          <span class="pd-step-num">STEP 01 · 00:00</span>
          <h3>终场信号进入队列</h3>
          <p>比赛结束后赛果立刻进入待处理队列，页面顶端的场次状态先变成结算中，你至少知道数据已经在路上。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step-num">STEP 02 · 00:40</span>
          <h3>接口交叉校验</h3>
          <p>平台接入的 9 家数据服务商接口同时回传比分，出现不一致时按多数结果锁定，单路异常不会把错数字推到你眼前。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step-num">STEP 03 · 02:10</span>
          <h3>编辑复核轮次状态</h3>
          <p>数据编辑核对加时、红牌、弃权等特殊情形，确认后同步更新轮次表与重点场次的结算标记。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step-num">STEP 04 · 03:00</span>
          <h3>时间戳发布</h3>
          <p>比分与状态一起上线，旁边写明刷新时刻。刷新过没刷新过，看时间戳就知道，不用反复下拉试探。</p>
        </li>
      </ol>

      <div class="pd-refresh-grid">
        <figure class="pd-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="终场哨到发布时间戳之间的信号线与记分牌数字局部特写" loading="lazy" decoding="async">
          <figcaption class="media-caption">从终场到发布的四个环节，每一步都会留下可见的时间标记。</figcaption>
        </figure>
        <div class="pd-note-card">
          <h3>为什么要把时间写出来</h3>
          <p>很多人是在地铁上刷最后一眼的，页面没变就以为漏了。把刷新时刻直接印在比分旁边，抬眼看一眼就知道这条是新的还是上一轮的。</p>
          <p>如果某场过了三分钟仍是旧数字，说明复核环节遇到了争议判罚或数据冲突，状态栏会标出复核中，而不是继续挂着旧比分。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section pd-section" id="records" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">03</span> 使用记录</p>
        <h2 class="section-title">看过什么，回头还能一条条翻出来</h2>
        <p class="section-lede">网页版火博体育使用记录保存最近 18 个月的浏览轨迹，按球队、日期、轮次三种条件组合筛，找到那场之后可以导出摘要，直接发给一起看球的群。</p>
      </header>

      <div class="pd-records">
        <div class="pd-records-body">
          <ul class="pd-chips">
            <li class="pd-chip">按球队</li>
            <li class="pd-chip">按日期</li>
            <li class="pd-chip">按轮次</li>
          </ul>
          <ul class="pd-records-list">
            <li>
              <span class="pd-mono">最近一轮</span>
              <span>查看了第 24 轮的 5 场档案与一段轮次小结</span>
              <span class="pd-state">可导出</span>
            </li>
            <li>
              <span class="pd-mono">上个月</span>
              <span>连续七天点开同一支球队的赛程与历史交锋记录</span>
              <span class="pd-state">可导出</span>
            </li>
            <li>
              <span class="pd-mono">上赛季</span>
              <span>按日期筛出整个赛季的主场场次并生成了一段摘要</span>
              <span class="pd-state">已导出</span>
            </li>
            <li>
              <span class="pd-mono">三个月前</span>
              <span>从重点场次提示跳转，回看了当时的规则变更说明</span>
              <span class="pd-state">可导出</span>
            </li>
          </ul>
          <p class="pd-records-note">轨迹存在你本机浏览器里，换一台设备或换一个浏览器不会自动带过去，清理浏览器数据后这段记录也会一起清空。需要长期留存的内容，导出摘要比收藏页面更稳妥。</p>
        </div>
        <figure class="pd-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="网页版浏览轨迹列表的抽象示意，按球队与轮次排列，匿名示例数据" loading="lazy" decoding="async">
          <figcaption class="media-caption">轨迹按时间倒序排列，每条都带轮次编号和类型标记。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section pd-section pd-section--arch" id="axes" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">04</span> 三维索引</p>
        <h2 class="section-title">三条轴交叉，把你记不清的那场捞出来</h2>
        <p class="section-lede">只记得是某支球队在某个赛季的某个月打的一场？三条轴任意组合一次，剩下的候选就只剩几行。索引覆盖 12 个主流足球与篮球联赛、1,860 支球队档案和 38 个赛季序列。</p>
      </header>

      <div class="pd-axes">
        <article class="pd-axis">
          <span class="pd-axis-key">轴 01</span>
          <h3>按轮次</h3>
          <p>从本赛季任意一轮跳到同轮次的历史记录，看这一轮在过去几个赛季里出过什么结果。标记过的重点场次在轴上会有一道橙红短线。</p>
        </article>
        <article class="pd-axis">
          <span class="pd-axis-key">轴 02</span>
          <h3>按球队</h3>
          <p>选一支队，赛程、主客场分布和历年同阶段战绩纵向排开。长期跟一支队的球迷通常从这条轴开始，慢慢就把整季走完了。</p>
        </article>
        <article class="pd-axis">
          <span class="pd-axis-key">轴 03</span>
          <h3>按日期</h3>
          <p>记得日子不记得轮次的时候用这条。按周或按月划出一段时间，把这段时间里所有归档场次平铺出来，再点进去看细节。</p>
        </article>
      </div>

      <div class="pd-axes-foot">
        <figure class="pd-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="轮次、球队、日期三轴交叉的索引信息图" loading="lazy" decoding="async">
          <figcaption class="media-caption">三条轴共享同一套编号，任意两轴组合都能落到具体的场次记录上。</figcaption>
        </figure>
        <div class="pd-axes-copy">
          <h3>组合筛选之后能拿到的结果</h3>
          <ul class="pd-axes-list">
            <li>把一支球队整个赛季的主场记录拉成一条线，看状态起伏</li>
            <li>按日期圈出上个月全部重点场次，回看当时的标记理由</li>
            <li>跨赛季对比同一轮次的赛果分布，找出这个阶段常出现的情况</li>
            <li>导出结果摘要，作为社群讨论或内容整理的底稿</li>
          </ul>
          <p>归档页用时间轴和卡片矩阵混合呈现，纵向是时间，横向是同一轮的场次，滚动和跳转都不打断阅读。页面里始终留着固定入口，随时能回到当前这轮。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section pd-section" id="audience" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">05</span> 谁在用</p>
        <h2 class="section-title">三种看球节奏，三种进入方式</h2>
        <p class="section-lede">有人一整季只盯一支队，有人只在通勤路上扫几眼，还有人要把整轮内容整理给别人看。同一套档案，可以从不同的门进去。</p>
      </header>

      <div class="pd-audience">
        <article class="pd-aud-card">
          <span class="tag tag--teal">长期跟队</span>
          <h3>一整季只跟一支队</h3>
          <p>把球队档案设成主要入口，每轮只需看一眼这支队的场次有没有被标为重点。赛季走完再按球队轴回看，整季的轨迹是一条完整的线，不用一页页翻。</p>
        </article>
        <article class="pd-aud-card">
          <span class="tag tag--amber">通勤快刷</span>
          <h3>上下班路上看几眼</h3>
          <p>打开首页就是本轮重点，比分旁边带着刷新时间戳。三分钟刷完，不用登录，也不会有跳来跳去的页面打断你。</p>
        </article>
        <article class="pd-aud-card">
          <span class="tag">社群整理</span>
          <h3>把一轮内容整理给别人</h3>
          <p>按轮次或日期筛出整段结果，导出摘要后直接贴进群里或者做成推送素材。平台目前与 16 家区域球迷社群保持内容合作，月度摘要包也走这条路径。</p>
        </article>
      </div>

      <div class="pd-subscribe">
        <figure class="pd-figure pd-figure--sub">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="周三归档摘要卡片与邮件信封图形组合示意" loading="lazy" decoding="async">
        </figure>
        <div class="pd-sub-copy">
          <p class="eyebrow">每周三下午</p>
          <h3>一周的轮次变化，一封摘要说清楚</h3>
          <p>摘要包含三部分：这一周轮次有哪些调整、哪些场次被标为重点、索引新增了哪些内容。长期跟队的球迷订阅之后不用每天守着刷新，周三看一封就掌握节奏。</p>
          <ul class="pd-sub-list">
            <li>按你关注的球队过滤，只留相关的轮次条目</li>
            <li>规则有变更时，摘要里会单列一段说明</li>
            <li>错过一期也没关系，往期摘要可以从归档页翻回来</li>
          </ul>
          <p class="pd-sub-cta">
            <a class="btn btn--solid" href="/help/">订阅方式</a>
            <a class="btn btn--ghost" href="/feedback/">社群合作</a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section pd-section pd-section--tint" id="versions" data-reveal>
    <div class="container--wide">
      <header class="section-head pd-head">
        <p class="eyebrow"><span class="num">06</span> 版本对照</p>
        <h2 class="section-title">八个版本走下来，能用的都在今天这套里</h2>
        <p class="section-lede">从 2017 年的第一版索引表到现在的重点场次提示，每次升级都围绕查得更快、回得更远。下面这几项能力，你现在打开网页版就能用上。</p>
      </header>

      <div class="pd-versions-wrap">
        <table class="pd-versions">
          <caption class="visually-hidden">火博看台各版本上线的能力对照</caption>
          <thead>
            <tr>
              <th scope="col">版本</th>
              <th scope="col">年份</th>
              <th scope="col">当时新增</th>
              <th scope="col">今天怎么用</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>V1</td>
              <td>2017</td>
              <td>索引版轮次表</td>
              <td>查某一轮有哪些场次，最快的一条路</td>
            </tr>
            <tr>
              <td>V2</td>
              <td>2019</td>
              <td>时间轴归档</td>
              <td>沿时间回看整季走势，跨轮次对比</td>
            </tr>
            <tr>
              <td>V3</td>
              <td>2021</td>
              <td>三维索引</td>
              <td>轮次、球队、日期任意组合筛选</td>
            </tr>
            <tr>
              <td>V4</td>
              <td>2023</td>
              <td>悬浮导航与键盘焦点反馈</td>
              <td>长页面里不迷路，只用键盘也能走完</td>
            </tr>
            <tr>
              <td>V5</td>
              <td>2025</td>
              <td>重点场次提示与规则并排</td>
              <td>一轮的看点与规则在同一屏看完</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="pd-versions-note">这些能力叠在一起，服务的是 31 个省级区域的约 48 万活跃用户；背后支撑它的是 22 人的编辑与技术团队，其中数据编辑 9 人、内容校对 5 人、产品技术 8 人。想看这些年具体发生过什么，可以去 <a href="/stories/">看台动态</a> 顺着版本更新翻一翻，或者到 <a href="/overview/">品牌总览</a> 了解归档体系的来路。</p>
    </div>
  </section>

  <section class="pd-closing" data-reveal>
    <div class="container--wide pd-closing-inner">
      <div>
        <h2 class="pd-closing-title">不确定哪条路最适合你？</h2>
        <p class="pd-closing-text">第一次用可以先从本轮安排看起，五分钟就知道这套东西合不合你的看球习惯。遇到归档问题或想谈合作，工作日 9:00 到 18:00 之间都能找到人。</p>
      </div>
      <p class="pd-closing-actions">
        <a class="btn btn--solid" href="/">从本轮开始</a>
        <a class="btn btn--ghost" href="/feedback/">反馈通道</a>
      </p>
    </div>
  </section>

</main>

.page-products {
  --pd-gap: clamp(16px, 2.5vw, 26px);
  --pd-radius: 20px;
  --pd-panel: #ffffff;
  --pd-shadow: 0 20px 44px -38px rgba(21, 23, 25, 0.6);
  --pd-shadow-lift: 0 26px 54px -36px rgba(21, 23, 25, 0.55);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.page-products a:focus-visible,
.page-products summary:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-products .pd-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

/* 首屏 */
.page-products .pd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4.5vw, 56px) 0 clamp(28px, 4.5vw, 52px);
  background:
    radial-gradient(115% 85% at 95% 4%, rgba(63, 124, 138, 0.15), transparent 60%),
    radial-gradient(85% 72% at 2% 98%, rgba(210, 59, 34, 0.12), transparent 64%),
    var(--paper);
}

.page-products .pd-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -16%;
  width: min(58vw, 540px);
  aspect-ratio: 1 / 1;
  border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
  background: linear-gradient(148deg, rgba(210, 59, 34, 0.16), rgba(63, 124, 138, 0.12) 62%, rgba(251, 248, 242, 0) 88%);
  transform: rotate(-10deg);
  pointer-events: none;
}

.page-products .pd-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(20px, 3.4vw, 40px);
  align-items: start;
}

.page-products .pd-hero-copy {
  min-width: 0;
}

.page-products .pd-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 5.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-products .pd-lede {
  margin: 14px 0 0;
  max-width: 48ch;
  font-family: var(--font-serif);
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
}

.page-products .pd-hero-stats > div {
  border-top: 2px solid var(--flame);
  padding-top: 10px;
  min-width: 0;
}

.page-products .pd-hero-stats > div:nth-child(2) {
  border-top-color: var(--teal);
}

.page-products .pd-hero-stats > div:nth-child(3) {
  border-top-color: var(--amber);
}

.page-products .pd-hero-stats dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-60);
}

.page-products .pd-hero-stats dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2.5vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}

.page-products .pd-hero-figure {
  margin: 0;
  border-radius: var(--pd-radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, #1b2024, #23515c 92%);
  box-shadow: var(--pd-shadow-lift);
}

.page-products .pd-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .pd-hero-caption {
  display: block;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgba(251, 248, 242, 0.68);
}

.page-products .pd-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.page-products .pd-switch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-70);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-products .pd-switch a:hover {
  color: var(--flame-deep);
  border-color: var(--flame);
}

.page-products .pd-switch-key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--flame);
  border-right: 1px solid var(--line);
  padding-right: 8px;
}

/* 通用章节 */
.page-products .pd-section {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(40px, 6vw, 76px);
}

.page-products .pd-section--tint {
  background: linear-gradient(180deg, rgba(232, 236, 238, 0.6), rgba(216, 229, 231, 0.55)), var(--paper);
}

.page-products .pd-section--arch {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(63, 124, 138, 0.14), transparent 62%),
    var(--paper);
}

.page-products .pd-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3.4vw, 36px);
  max-width: 64ch;
}

.page-products .pd-head .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.page-products .pd-head .section-lede {
  margin: 0;
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.78;
  color: var(--ink-70);
}

/* 01 轮次工作台 */
.page-products .pd-workspace {
  display: grid;
  gap: var(--pd-gap);
  align-items: start;
}

.page-products .pd-board {
  background: var(--pd-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: var(--pd-shadow);
  min-width: 0;
}

.page-products .pd-board-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--teal-deep);
}

.page-products .pd-rounds {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.page-products .pd-round {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.page-products .pd-round:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: translateX(3px);
}

.page-products .pd-round--spot {
  background: var(--flame-soft);
  border-color: rgba(210, 59, 34, 0.24);
}

.page-products .pd-round-no {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.page-products .pd-round--spot .pd-round-no {
  color: var(--flame-deep);
}

.page-products .pd-round-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.page-products .pd-round-body b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.page-products .pd-round-body small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-60);
}

.page-products .pd-spot {
  position: relative;
  overflow: hidden;
  border-radius: var(--pd-radius);
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(210, 59, 34, 0.22);
  background:
    linear-gradient(158deg, rgba(210, 59, 34, 0.11), rgba(255, 255, 255, 0.72) 46%, rgba(216, 229, 231, 0.78)),
    #fff;
  box-shadow: var(--pd-shadow-lift);
  min-width: 0;
}

.page-products .pd-spot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-products .pd-spot-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--flame-deep);
}

.page-products .pd-spot h3 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.28;
}

.page-products .pd-spot p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-spot-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-spot-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-70);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.page-products .pd-spot-list li .pd-mono {
  color: var(--flame-deep);
  font-weight: 700;
}

.page-products .pd-spot-foot {
  margin-top: 16px !important;
  font-size: 13px !important;
  color: var(--ink-60) !important;
}

.page-products .pd-board--rules {
  background: var(--haze);
  border-color: rgba(35, 81, 92, 0.16);
  box-shadow: none;
}

.page-products .pd-board--rules details {
  border-bottom: 1px solid rgba(35, 81, 92, 0.16);
  padding: 11px 0;
}

.page-products .pd-board--rules details:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .pd-board--rules summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-deep);
}

.page-products .pd-board--rules summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-board--rules summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--flame);
}

.page-products .pd-board--rules details[open] summary::after {
  content: "−";
}

.page-products .pd-board--rules p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-70);
}

/* 02 终端刷新 */
.page-products .pd-pulse {
  margin: 0 0 clamp(18px, 3vw, 30px);
}

.page-products .pd-pulse svg {
  display: block;
  width: 100%;
  height: clamp(38px, 6vw, 60px);
}

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

.page-products .pd-step {
  border-top: 3px solid var(--flame);
  padding-top: 12px;
  min-width: 0;
}

.page-products .pd-step:nth-child(2) {
  border-top-color: var(--amber);
}

.page-products .pd-step:nth-child(3) {
  border-top-color: var(--teal);
}

.page-products .pd-step:nth-child(4) {
  border-top-color: var(--green);
}

.page-products .pd-step-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-60);
}

.page-products .pd-step h3 {
  margin: 7px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.page-products .pd-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: var(--ink-70);
}

.page-products .pd-refresh-grid {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.8vw, 38px);
  align-items: center;
}

.page-products .pd-figure {
  margin: 0;
  border-radius: var(--pd-radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--cold);
  box-shadow: var(--pd-shadow);
}

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

.page-products .pd-figure .media-caption {
  display: block;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-60);
  background: #fff;
  border-top: 1px solid var(--line-soft);
}

.page-products .pd-note-card {
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--pd-radius);
  border-left: 3px solid var(--teal);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.page-products .pd-note-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.4;
  color: var(--teal-deep);
}

.page-products .pd-note-card p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-note-card p:last-child {
  margin-bottom: 0;
}

/* 03 使用记录 */
.page-products .pd-records {
  display: grid;
  gap: var(--pd-gap);
  align-items: start;
}

.page-products .pd-records-body {
  min-width: 0;
}

.page-products .pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .pd-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--haze);
  color: var(--teal-deep);
  border: 1px solid rgba(35, 81, 92, 0.16);
}

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

.page-products .pd-records-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--ink-70);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.page-products .pd-records-list li:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--pd-shadow);
}

.page-products .pd-records-list .pd-mono {
  color: var(--flame-deep);
  font-weight: 700;
  white-space: nowrap;
}

.page-products .pd-state {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
}

.page-products .pd-records-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--haze);
  font-size: 13px;
  line-height: 1.75;
  color: var(--teal-deep);
}

/* 04 三维索引 */
.page-products .pd-axes {
  display: grid;
  gap: var(--pd-gap);
}

.page-products .pd-axis {
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--pd-radius);
  background: #fff;
  border: 1px solid rgba(35, 81, 92, 0.16);
  box-shadow: var(--pd-shadow);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  min-width: 0;
}

.page-products .pd-axis:hover {
  transform: translateY(-3px);
  box-shadow: var(--pd-shadow-lift);
}

.page-products .pd-axis-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 3px;
}

.page-products .pd-axis h3 {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--teal-deep);
}

.page-products .pd-axis p {
  margin: 0;
  font-size: 14px;
  line-height: 1.76;
  color: var(--ink-70);
}

.page-products .pd-axes-foot {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.6vw, 38px);
  align-items: center;
}

.page-products .pd-axes-copy h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.page-products .pd-axes-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pd-axes-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-70);
}

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

.page-products .pd-axes-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

/* 05 谁在用 */
.page-products .pd-audience {
  display: grid;
  gap: var(--pd-gap);
}

.page-products .pd-aud-card {
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--pd-radius);
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--pd-shadow);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
  min-width: 0;
}

.page-products .pd-aud-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame);
}

.page-products .pd-aud-card h3 {
  margin: 12px 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.page-products .pd-aud-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.76;
  color: var(--ink-70);
}

.page-products .pd-subscribe {
  display: grid;
  gap: var(--pd-gap);
  margin-top: clamp(24px, 3.6vw, 38px);
  padding: clamp(18px, 2.8vw, 30px);
  border-radius: var(--pd-radius);
  background: linear-gradient(140deg, rgba(233, 162, 59, 0.16), rgba(251, 248, 242, 0.9) 52%, rgba(216, 229, 231, 0.72));
  border: 1px solid rgba(233, 162, 59, 0.4);
  align-items: center;
}

.page-products .pd-figure--sub {
  max-width: 320px;
  justify-self: center;
  width: 100%;
}

.page-products .pd-sub-copy .eyebrow {
  margin: 0 0 8px;
}

.page-products .pd-sub-copy h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.28;
}

.page-products .pd-sub-copy p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-products .pd-sub-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.page-products .pd-sub-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-70);
}

.page-products .pd-sub-list li::before {
  content: "·";
  position: absolute;
  left: 5px;
  top: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--flame);
  line-height: 1.3;
}

.page-products .pd-sub-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
}

/* 06 版本对照 */
.page-products .pd-versions-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: var(--pd-radius);
  background: #fff;
  box-shadow: var(--pd-shadow);
}

.page-products .pd-versions {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pd-versions th,
.page-products .pd-versions td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.65;
}

.page-products .pd-versions thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--teal-deep);
  background: var(--cold);
  white-space: nowrap;
}

.page-products .pd-versions tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pd-versions tbody tr:hover td {
  background: rgba(216, 229, 231, 0.42);
}

.page-products .pd-versions tbody td:first-child {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--flame-deep);
  white-space: nowrap;
}

.page-products .pd-versions tbody td:nth-child(2) {
  font-family: var(--font-mono);
  color: var(--ink-60);
  white-space: nowrap;
}

.page-products .pd-versions-note {
  margin: 18px 0 0;
  max-width: 76ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-70);
}

.page-products .pd-versions-note a {
  color: var(--flame-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 结尾 */
.page-products .pd-closing {
  padding: clamp(30px, 4.6vw, 52px) 0;
  background: var(--ink);
  color: var(--paper);
}

.page-products .pd-closing-inner {
  display: grid;
  gap: 20px;
  align-items: center;
}

.page-products .pd-closing-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.25;
  color: var(--paper);
}

.page-products .pd-closing-text {
  margin: 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(251, 248, 242, 0.74);
}

.page-products .pd-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.page-products .pd-closing-actions .btn--solid {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--paper);
}

.page-products .pd-closing-actions .btn--solid:hover {
  background: var(--flame-deep);
  border-color: var(--flame-deep);
}

.page-products .pd-closing-actions .btn--ghost {
  border-color: rgba(251, 248, 242, 0.42);
  color: var(--paper);
}

.page-products .pd-closing-actions .btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(251, 248, 242, 0.1);
}

/* 响应式 */
@media (min-width: 640px) {
  .page-products .pd-axes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pd-closing-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 720px) and (max-width: 999px) {
  .page-products .pd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
  }

  .page-products .pd-hero-figure {
    transform: translateY(-8px) rotate(-1.1deg);
  }

  .page-products .pd-refresh-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }

  .page-products .pd-records {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-products .pd-axes-foot {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(24px, 3.4vw, 42px);
  }

  .page-products .pd-subscribe {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
    gap: clamp(22px, 3.2vw, 40px);
  }
}

@media (min-width: 1000px) {
  .page-products .pd-workspace {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.2fr) minmax(0, 0.94fr);
  }

  .page-products .pd-axes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-audience {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
  }
}

@media (max-width: 519px) {
  .page-products .pd-hero-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .page-products .pd-records-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .pd-state {
    grid-column: 1;
  }

  .page-products .pd-switch a {
    padding: 7px 12px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-round,
  .page-products .pd-axis,
  .page-products .pd-aud-card,
  .page-products .pd-records-list li {
    transition: none;
  }

  .page-products .pd-round:hover,
  .page-products .pd-axis:hover,
  .page-products .pd-aud-card:hover,
  .page-products .pd-records-list li:hover {
    transform: none;
  }

  .page-products .pd-hero-figure {
    transform: none;
  }
}