.page-products {
  --pp-gap: clamp(1rem, 3vw, 1.7rem);
  --pp-radius: var(--r-md);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(43, 245, 210, .10), transparent 60%),
    radial-gradient(90% 80% at 92% 6%, rgba(255, 138, 61, .10), transparent 62%);
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .28;
  pointer-events: none;
}

.page-products .pp-hero__grid {
  position: relative;
  display: grid;
  gap: var(--pp-gap);
  padding: clamp(1.8rem, 5vw, 3.4rem) 0;
}

.page-products .pp-hero__copy h1,
.page-products .pp-hero h1 {
  margin: 1rem 0 0;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 7vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 900;
  color: var(--bone);
  text-wrap: balance;
}

.page-products .pp-hero__lead {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: var(--fog);
  font-size: 1.02rem;
  line-height: 1.75;
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.5rem;
}

.page-products .pp-hero__meta {
  margin: 1.3rem 0 0;
  color: var(--dim);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.7;
}

/* 日期轨道预览卡 */
.page-products .pp-board {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
  padding: clamp(1rem, 3.4vw, 1.4rem);
  box-shadow: var(--shadow-1);
}

.page-products .pp-board__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .07em;
  color: var(--fog);
  text-transform: uppercase;
}

.page-products .pp-board__pulse {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--orange);
  animation: pp-pulse 2.6s var(--ease) infinite;
}

@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 138, 61, 0); }
}

.page-products .pp-board__dates {
  display: flex;
  gap: .4rem;
  margin: .9rem 0;
  overflow-x: auto;
  padding-bottom: .2rem;
}

.page-products .pp-board__date {
  flex: 0 0 auto;
  padding: .32rem .72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fog);
  font-size: .78rem;
}

.page-products .pp-board__date.is-on {
  background: var(--orange);
  border-color: var(--orange);
  color: #20140a;
  font-weight: 700;
}

.page-products .pp-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .pp-board__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  background: var(--ink-700);
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--bone);
}

.page-products .pp-board__list li > span:first-child {
  color: var(--mint);
  font-size: .84rem;
}

.page-products .pp-board__go {
  color: var(--orange);
  font-size: .72rem;
  border: 1px solid rgba(255, 138, 61, .45);
  padding: .1rem .45rem;
  border-radius: 999px;
}

/* ---------- 分节通用 ---------- */
.page-products .pp-section {
  padding: clamp(2.1rem, 5.5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pp-section--flush {
  border-bottom: 0;
}

.page-products .pp-taglist {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ---------- 工具总览 ---------- */
.page-products .pp-toolkit {
  display: grid;
  gap: var(--pp-gap);
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.page-products .pp-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.page-products .pp-index__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .15rem .6rem;
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  text-decoration: none;
  color: var(--bone);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.page-products .pp-index__item:hover,
.page-products .pp-index__item:focus-visible {
  border-color: var(--mint);
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-products .pp-index__num {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--mint);
  font-size: 1.05rem;
  font-weight: 700;
}

.page-products .pp-index__title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.page-products .pp-index__desc {
  color: var(--fog);
  font-size: .89rem;
  line-height: 1.6;
}

.page-products .pp-flow {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 3.4vw, 1.5rem);
}

.page-products .pp-flow__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-flow__sub {
  margin: .25rem 0 1.1rem;
  color: var(--fog);
  font-size: .86rem;
}

.page-products .pp-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: ppstep;
}

.page-products .pp-flow__steps li {
  position: relative;
  padding-left: 2.3rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--fog);
}

.page-products .pp-flow__steps li strong {
  color: var(--bone);
}

.page-products .pp-flow__steps li::before {
  counter-increment: ppstep;
  content: counter(ppstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--ink-900);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
}

.page-products .pp-flow__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .75rem;
  top: 1.85rem;
  bottom: -1rem;
  width: 1px;
  background: var(--line);
}

/* ---------- 日期分段赛程 ---------- */
.page-products .pp-schedule {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-rail {
  grid-column: 1 / -1;
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .2rem .2rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.page-products .pp-rail::-webkit-scrollbar {
  height: 6px;
}

.page-products .pp-rail::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.page-products .pp-rail__card {
  flex: 0 0 76%;
  max-width: 300px;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: 1rem;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-rail__card:nth-child(even) {
  padding-bottom: 1.9rem;
  background: var(--ink-800);
}

.page-products .pp-rail__date {
  margin: 0;
  color: var(--orange);
  font-size: .76rem;
  letter-spacing: .1em;
}

.page-products .pp-rail__league {
  margin: 0;
  color: var(--fog);
  font-size: .8rem;
}

.page-products .pp-rail__time {
  margin: .1rem 0;
  color: var(--bone);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
}

.page-products .pp-rail__teams {
  margin: 0 0 .3rem;
  font-size: .94rem;
  color: var(--bone);
}

.page-products .pp-rail__card .tag {
  justify-self: start;
}

.page-products .pp-schedule__note h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-schedule__note p {
  margin: 0;
  color: var(--fog);
  font-size: .94rem;
  line-height: 1.72;
}

.page-products .pp-schedule .media {
  margin: 0;
}

/* ---------- 阵容 ---------- */
.page-products .pp-lineup {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-lineup .media {
  margin: 0;
}

.page-products .pp-acc {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}

.page-products .pp-acc + .pp-acc {
  margin-top: .6rem;
}

.page-products .pp-acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.05rem;
  font-size: .97rem;
  font-weight: 700;
  color: var(--bone);
}

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

.page-products .pp-acc summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--mint);
}

.page-products .pp-acc[open] summary {
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
}

.page-products .pp-acc[open] summary::after {
  content: "–";
  color: var(--orange);
}

.page-products .pp-acc__body {
  padding: .9rem 1.05rem 1.1rem;
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.7;
}

.page-products .pp-acc__body p {
  margin: 0;
}

/* ---------- 排名中心 ---------- */
.page-products .pp-standings {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-standings .media {
  margin: 0;
  max-width: 340px;
}

.page-products .pp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.page-products .pp-stats__cell {
  padding: .8rem .9rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-stats__cell--wide {
  grid-column: 1 / -1;
  background: var(--ink-700);
}

.page-products .pp-stats__num {
  display: block;
  color: var(--mint);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}

.page-products .pp-stats__cell--violet .pp-stats__num {
  color: var(--violet);
}

.page-products .pp-stats__cell--wide .pp-stats__num {
  color: var(--orange);
}

.page-products .pp-stats__label {
  display: block;
  margin-top: .25rem;
  color: var(--fog);
  font-size: .78rem;
}

.page-products .pp-chartwrap {
  margin-top: .9rem;
  padding: .9rem 1rem 1rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-chartwrap__title {
  margin: 0 0 .6rem;
  color: var(--dim);
  font-size: .76rem;
  letter-spacing: .08em;
}

.page-products .pp-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.page-products .pp-chart text {
  fill: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-products .pp-chart rect {
  fill: var(--mint);
}

.page-products .pp-chart rect.pp-chart__bar--violet {
  fill: var(--violet);
}

.page-products .pp-acc--wide {
  margin-top: .9rem;
}

.page-products .pp-compare {
  display: grid;
  gap: .6rem;
  margin-bottom: .7rem;
}

.page-products .pp-compare__col {
  padding: .7rem .8rem;
  background: var(--ink-700);
  border-left: 2px solid var(--mint);
  border-radius: var(--r-sm);
}

.page-products .pp-compare__name {
  margin: 0 0 .3rem;
  color: var(--bone);
  font-size: .9rem;
  font-weight: 700;
}

.page-products .pp-compare__line {
  margin: 0;
  color: var(--mint);
  font-size: .8rem;
}

/* ---------- 历史交锋 ---------- */
.page-products .pp-h2h {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-h2h .media {
  margin: 0;
}

.page-products .pp-h2h__list h3 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-h2h__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .pp-h2h__rows li {
  display: grid;
  gap: .3rem;
  padding: .75rem .9rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.page-products .pp-h2h__pair {
  color: var(--bone);
  font-size: .95rem;
  font-weight: 700;
}

.page-products .pp-h2h__meta {
  color: var(--violet);
  font-size: .82rem;
}

.page-products .pp-h2h__rows .tag {
  justify-self: start;
}

/* 选项卡 */
.page-products .pp-tabs {
  position: relative;
  margin-top: 1.1rem;
}

.page-products .pp-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .pp-tabs__labels {
  display: flex;
  gap: .4rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}

.page-products .pp-tabs__labels label {
  cursor: pointer;
  padding: .38rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fog);
  font-size: .82rem;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.page-products #pp-fmt-csv:checked ~ .pp-tabs__labels label[for="pp-fmt-csv"],
.page-products #pp-fmt-png:checked ~ .pp-tabs__labels label[for="pp-fmt-png"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink-900);
  font-weight: 700;
}

.page-products .pp-tabs__panel {
  display: none;
  padding-top: .9rem;
}

.page-products #pp-fmt-csv:checked ~ .pp-tabs__panel[data-fmt="csv"],
.page-products #pp-fmt-png:checked ~ .pp-tabs__panel[data-fmt="png"] {
  display: block;
}

.page-products .pp-tabs__line {
  margin: 0 0 .4rem;
  color: var(--bone);
  font-size: .82rem;
  line-height: 1.6;
}

.page-products .pp-tabs__hint {
  margin: .6rem 0 .7rem;
  color: var(--fog);
  font-size: .9rem;
  line-height: 1.65;
}

/* ---------- 筛选与回访 ---------- */
.page-products .pp-filter {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  counter-reset: ppstep2;
}

.page-products .pp-steps li {
  position: relative;
  padding: .85rem .9rem .85rem 3rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.6;
}

.page-products .pp-steps li strong {
  display: block;
  color: var(--bone);
  font-size: .95rem;
  margin-bottom: .15rem;
}

.page-products .pp-steps li::before {
  counter-increment: ppstep2;
  content: counter(ppstep2, decimal-leading-zero);
  position: absolute;
  left: .85rem;
  top: .95rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #20140a;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
}

.page-products .pp-filter__side {
  padding: 1rem 1.05rem;
  background: var(--ink-700);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
}

.page-products .pp-filter__note {
  margin: 0;
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.72;
}

.page-products .pp-filter__media {
  margin: 0;
}

/* ---------- 适用场景 ---------- */
.page-products .pp-fit {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.page-products .pp-fit__card {
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: var(--r-sm);
}

.page-products .pp-fit__card:nth-child(2) {
  border-left-color: var(--orange);
}

.page-products .pp-fit__card:nth-child(3) {
  border-left-color: var(--violet);
}

.page-products .pp-fit__card:nth-child(4) {
  border-left-color: var(--sun);
}

.page-products .pp-fit__card:nth-child(5) {
  border-left-color: var(--mint);
}

.page-products .pp-fit__who {
  margin: 0 0 .35rem;
  color: var(--bone);
  font-size: .98rem;
  font-weight: 800;
}

.page-products .pp-fit__card > p:last-child {
  margin: 0;
  color: var(--fog);
  font-size: .9rem;
  line-height: 1.68;
}

/* ---------- 更新与导出 ---------- */
.page-products .pp-rhythm {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-facts {
  margin: 0;
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-products .pp-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-products .pp-facts__row:last-child {
  border-bottom: 0;
}

.page-products .pp-facts dt {
  color: var(--mint);
  font-size: .78rem;
  letter-spacing: .05em;
}

.page-products .pp-facts dd {
  margin: 0;
  color: var(--bone);
  font-size: .92rem;
}

.page-products .pp-next {
  padding: 1rem 1.05rem 1.2rem;
  background: var(--ink-700);
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
}

.page-products .pp-next__title {
  margin: 0 0 .7rem;
  color: var(--bone);
  font-size: 1.02rem;
  font-weight: 800;
}

.page-products .pp-next__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.page-products .pp-next__list a {
  display: block;
  padding: .55rem .7rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.page-products .pp-next__list a:hover,
.page-products .pp-next__list a:focus-visible {
  border-color: var(--mint);
  color: var(--mint);
}

.page-products .pp-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pp-rail__card {
    flex-basis: 260px;
  }

  .page-products .pp-h2h__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .page-products .pp-h2h__rows li .tag {
    grid-column: 1 / -1;
  }

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

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

@media (min-width: 900px) {
  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: clamp(1.6rem, 4vw, 3rem);
  }

  .page-products .pp-toolkit {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-products .pp-flow {
    position: sticky;
    top: 1.2rem;
  }

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

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

  .page-products .pp-standings {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    align-items: start;
  }

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

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

  .page-products .pp-filter__media {
    grid-column: 1 / -1;
  }

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

  .page-products .pp-rhythm {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .pp-filter {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .pp-filter__media {
    grid-column: 2 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-board__pulse {
    animation: none;
  }

  .page-products .pp-index__item {
    transition: none;
  }

  .page-products .pp-index__item:hover,
  .page-products .pp-index__item:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <nav class="breadcrumb" aria-label="面包屑">
    <div class="wrap">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">赛程首页</a></li>
        <li class="breadcrumb-item"><span class="breadcrumb-current">赛事工具目录</span></li>
      </ol>
    </div>
  </nav>

  <section class="pp-hero">
    <div class="wrap pp-hero__grid">
      <div class="pp-hero__copy">
        <p class="tag tag--mint mono">TOOLKIT / 四件套</p>
        <h1>赛事工具目录：从一场比赛走到一份数据</h1>
        <p class="pp-hero__lead">欧巴体育站把赛程、阵容、排名和交锋档案做成四件顺手的工具。手机上扫一眼日期，点开一场比赛，开赛前十分钟就能看到首发；看中的排名表或交锋记录，直接导出带走。</p>
        <div class="pp-hero__actions">
          <a class="button button--primary" href="#toolkit">看工具总览</a>
          <a class="button button--ghost" href="#standings">先查联赛排名</a>
        </div>
        <p class="pp-hero__meta mono">68 个联赛与杯赛 · 12 个赛季交锋档案 · 31 个省级区域用户</p>
      </div>

      <aside class="pp-board" aria-label="日期轨道与阵容入口预览">
        <div class="pp-board__head">
          <span class="pp-board__pulse" aria-hidden="true"></span>
          <span>开赛前十分钟</span>
          <span class="tag tag--sun mono">09:59</span>
        </div>
        <div class="pp-board__dates">
          <span class="pp-board__date mono is-on">周三</span>
          <span class="pp-board__date mono">周四</span>
          <span class="pp-board__date mono">周五</span>
          <span class="pp-board__date mono">周六</span>
        </div>
        <ul class="pp-board__list">
          <li><span class="mono">19:35</span><span>望江 vs 东屿</span><span class="pp-board__go mono">阵容</span></li>
          <li><span class="mono">21:00</span><span>江畔联 vs 青野竞技</span><span class="pp-board__go mono">阵容</span></li>
          <li><span class="mono">16:00</span><span>北辰 vs 南岭</span><span class="pp-board__go mono">待定</span></li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="pp-section" id="toolkit">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">01 / 工具总览</p>
        <h2 class="section-title">四件工具，串起一条从日期到数据的路线</h2>
        <p class="section-lead">先按日期把场次扫一遍，点开其中一场看阵容；想比一比排名、翻一翻旧账，就切到排名中心和历史交锋。每一步都能单独用，连起来正好是一场球赛开打前的完整动作。</p>
      </header>

      <div class="pp-toolkit" data-reveal>
        <ol class="pp-index">
          <li>
            <a class="pp-index__item" href="#schedule">
              <span class="pp-index__num mono">01</span>
              <span class="pp-index__title">日期分段赛程</span>
              <span class="pp-index__desc">一天一段，横向滑动，从今天扫到周末不用翻长列表。</span>
            </a>
          </li>
          <li>
            <a class="pp-index__item" href="#lineup">
              <span class="pp-index__num mono">02</span>
              <span class="pp-index__title">开赛前十分钟阵容</span>
              <span class="pp-index__desc">每场比赛都能点进去，位置分布和出场状态一次看全。</span>
            </a>
          </li>
          <li>
            <a class="pp-index__item" href="#standings">
              <span class="pp-index__num mono">03</span>
              <span class="pp-index__title">联赛排名中心</span>
              <span class="pp-index__desc">积分、场次、近期走势压进竖屏一屏里，下滑就换联赛。</span>
            </a>
          </li>
          <li>
            <a class="pp-index__item" href="#h2h">
              <span class="pp-index__num mono">04</span>
              <span class="pp-index__title">历史交锋档案</span>
              <span class="pp-index__desc">按对阵、赛季和主客场归档，CSV 和 PNG 都能带走。</span>
            </a>
          </li>
        </ol>

        <aside class="pp-flow">
          <p class="pp-flow__title">从找到比赛到带走数据</p>
          <p class="pp-flow__sub">四个动作，手机单手就能走完。</p>
          <ol class="pp-flow__steps">
            <li><strong>扫日期</strong>：日期轨道按天分段，今天和接下来几天的场次摆在最前面。</li>
            <li><strong>点比赛</strong>：卡片上先看开赛时间，再看联赛和阶段，阵容入口就在底下。</li>
            <li><strong>看阵容</strong>：开赛前十分钟入口点亮，首发名单和位置点同步出来。</li>
            <li><strong>导数据</strong>：排名表或交锋档案切到导出，存进手机或转给同事。</li>
          </ol>
        </aside>
      </div>
    </div>
  </section>

  <section class="pp-section" id="schedule">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">02 / 日期分段</p>
        <h2 class="section-title">每天一段，横向滑到底就看完了</h2>
        <p class="section-lead">赛程按日期分段排开，每段顶部是日期索引，下面是横向滑动的比赛卡片。竖屏一次能看到一场半，拇指左右一划就换时段，滑到哪段日期就亮哪段。</p>
      </header>

      <div class="pp-schedule">
        <div class="pp-rail" aria-label="日期分段赛程示例轨道">
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周三</p>
            <p class="pp-rail__league">城市联赛</p>
            <p class="pp-rail__time mono">19:35</p>
            <p class="pp-rail__teams">望江 vs 东屿</p>
            <span class="tag tag--mint">阵容 19:25 开</span>
          </article>
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周三</p>
            <p class="pp-rail__league">区域联赛 · 东部赛区</p>
            <p class="pp-rail__time mono">21:00</p>
            <p class="pp-rail__teams">江畔联 vs 青野竞技</p>
            <span class="tag tag--mint">阵容 20:50 开</span>
          </article>
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周四</p>
            <p class="pp-rail__league">校园杯 · 八强</p>
            <p class="pp-rail__time mono">16:00</p>
            <p class="pp-rail__teams">北辰 vs 南岭</p>
            <span class="tag tag--plain">阵容待定</span>
          </article>
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周五</p>
            <p class="pp-rail__league">城市联赛</p>
            <p class="pp-rail__time mono">20:30</p>
            <p class="pp-rail__teams">东屿 vs 江畔联</p>
            <span class="tag tag--mint">阵容 20:20 开</span>
          </article>
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周六</p>
            <p class="pp-rail__league">区域联赛 · 西部赛区</p>
            <p class="pp-rail__time mono">15:00</p>
            <p class="pp-rail__teams">青野竞技 vs 北辰</p>
            <span class="tag tag--mint">阵容 14:50 开</span>
          </article>
          <article class="pp-rail__card">
            <p class="pp-rail__date mono">周六</p>
            <p class="pp-rail__league">校园杯 · 半决赛</p>
            <p class="pp-rail__time mono">19:00</p>
            <p class="pp-rail__teams">南岭 vs 望江</p>
            <span class="tag tag--orange">赛前提醒</span>
          </article>
        </div>

        <div class="pp-schedule__note">
          <h3>卡片上先看三样</h3>
          <p>开赛时间用等宽数字放大，联赛和阶段跟在下面，最底下是阵容入口的状态。三样读完就知道这场要不要点开。</p>
          <ul class="pp-taglist">
            <li class="tag tag--orange mono">日期索引</li>
            <li class="tag tag--mint mono">开赛时间</li>
            <li class="tag tag--violet mono">交锋入口</li>
          </ul>
        </div>

        <figure class="media media--wide media--cut">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深墨绿界面上荧光青日期标签与横向比赛卡片轨道" loading="lazy" decoding="async">
          <figcaption class="media__caption">日期轨道与横向比赛卡片在小屏上的排布</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section" id="lineup">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">03 / 阵容入口</p>
        <h2 class="section-title">开赛前十分钟，阵容入口自己亮起来</h2>
        <p class="section-lead">每场比赛都挂着一个阵容入口。开赛前十分钟，入口从灰色转成荧光青，点进去就是首发名单和位置分布；名单还没出来时入口照样在，标签写待定，你可以在同一页等它变。</p>
      </header>

      <div class="pp-lineup">
        <div class="pp-lineup__text">
          <div class="pp-acc">
            <details open>
              <summary>位置卡怎么读</summary>
              <div class="pp-acc__body">
                <p>门将、后卫、中场、前锋分四组排列，每组左边是编号，右边是一个个位置点。一个点代表一个出场位置，点与点之间的连线表示这一路的配合方向。</p>
                <ul class="pp-taglist">
                  <li class="tag tag--mint mono">门将 1</li>
                  <li class="tag tag--mint mono">后卫 4</li>
                  <li class="tag tag--mint mono">中场 4</li>
                  <li class="tag tag--mint mono">前锋 2</li>
                </ul>
              </div>
            </details>
          </div>
          <div class="pp-acc">
            <details>
              <summary>状态标签怎么看</summary>
              <div class="pp-acc__body">
                <p>首发、轮换、待定三种标签，颜色跟着入口一起变。待定一般在开赛前十分钟到开赛之间落定，页面会直接更新，不用刷新重进。</p>
              </div>
            </details>
          </div>
          <div class="pp-acc">
            <details>
              <summary>阵容页还能顺手看什么</summary>
              <div class="pp-acc__body">
                <p>主客场标记、同位置的近期出场次数，以及这一场的交锋入口都放在阵容页底部。看完首发想再确认两队旧账，手指往下滑就到。</p>
              </div>
            </details>
          </div>
        </div>

        <figure class="media media--square media--cut">
          <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="战术板风格的首发位置点、球员剪影与跑动箭头示意" loading="lazy" decoding="async">
          <figcaption class="media__caption">位置点与跑动方向的读法示意</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section" id="standings">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">04 / 排名中心</p>
        <h2 class="section-title">联赛排名，竖屏一屏就能比完</h2>
        <p class="section-lead">华人小屏查联赛排名是我们最常被用到的场景，排名页按竖屏重排：积分和场次用等宽数字并排，近期走势压成一条迷你条形，往下滑还有联赛对比。换联赛走两步筛选，不用退回首页。</p>
      </header>

      <div class="pp-standings">
        <figure class="media media--portrait media--cut pp-standings__phone">
          <img src="{zhanqunpic:h:1280w:720}" width="720" height="1280" alt="手机竖屏上的联赛排名页，等宽数字与导出按钮排布" loading="lazy" decoding="async">
          <figcaption class="media__caption">竖屏排名页：积分、场次与导出入口</figcaption>
        </figure>

        <div class="pp-standings__data">
          <div class="pp-stats">
            <div class="pp-stats__cell">
              <span class="pp-stats__num mono">62</span>
              <span class="pp-stats__label">积分</span>
            </div>
            <div class="pp-stats__cell">
              <span class="pp-stats__num mono">26</span>
              <span class="pp-stats__label">已完成场次</span>
            </div>
            <div class="pp-stats__cell pp-stats__cell--violet">
              <span class="pp-stats__num mono">13</span>
              <span class="pp-stats__label">近五场积分</span>
            </div>
            <div class="pp-stats__cell pp-stats__cell--wide">
              <span class="pp-stats__num mono">+18</span>
              <span class="pp-stats__label">净胜球 · 联赛第二</span>
            </div>
          </div>

          <div class="pp-chartwrap">
            <p class="pp-chartwrap__title mono">前五名 · 近五场积分</p>
            <svg class="pp-chart" viewBox="0 0 340 190" role="img" aria-label="五支队伍近五场积分条形对比，最高 13 分">
              <line x1="56" y1="6" x2="56" y2="184" stroke="var(--line)"></line>
              <g class="pp-chart__row">
                <text x="0" y="24">望江</text>
                <rect x="58" y="12" width="200" height="16" rx="4"></rect>
                <text x="266" y="24">13</text>
              </g>
              <g class="pp-chart__row">
                <text x="0" y="60">东屿</text>
                <rect x="58" y="48" width="169" height="16" rx="4"></rect>
                <text x="235" y="60">11</text>
              </g>
              <g class="pp-chart__row">
                <text x="0" y="96">青野竞技</text>
                <rect x="58" y="84" width="154" height="16" rx="4"></rect>
                <text x="220" y="96">10</text>
              </g>
              <g class="pp-chart__row">
                <text x="0" y="132">北辰</text>
                <rect x="58" y="120" width="123" height="16" rx="4"></rect>
                <text x="189" y="132">8</text>
              </g>
              <g class="pp-chart__row">
                <text x="0" y="168">南岭</text>
                <rect class="pp-chart__bar--violet" x="58" y="156" width="92" height="16" rx="4"></rect>
                <text x="158" y="168">6</text>
              </g>
            </svg>
          </div>

          <details class="pp-acc pp-acc--wide">
            <summary>展开联赛对比视图</summary>
            <div class="pp-acc__body">
              <div class="pp-compare">
                <div class="pp-compare__col">
                  <p class="pp-compare__name">城市联赛 · 望江</p>
                  <p class="pp-compare__line mono">积分 62 · 场次 26 · 近五场 4 胜 1 平</p>
                </div>
                <div class="pp-compare__col">
                  <p class="pp-compare__name">区域联赛 · 江畔联</p>
                  <p class="pp-compare__line mono">积分 55 · 场次 25 · 近五场 3 胜 1 平 1 负</p>
                </div>
              </div>
              <p>两组联赛放在同一屏，主客场的差别一眼能看出来。看完想带走，用下面的导出格式。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="pp-section" id="h2h">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">05 / 交锋档案</p>
        <h2 class="section-title">旧账翻得清，也带得走</h2>
        <p class="section-lead">体育赛事历史交锋记录按对阵双方、赛季阶段和主客场三个维度归档，覆盖 12 个赛季。点开一组对阵先看总战绩，再看最近几次交手的比分和主客分布，需要交给同事就切到导出。</p>
      </header>

      <div class="pp-h2h">
        <div class="pp-h2h__list">
          <h3>常看的几组对阵</h3>
          <ul class="pp-h2h__rows">
            <li>
              <span class="pp-h2h__pair">望江 vs 东屿</span>
              <span class="pp-h2h__meta mono">18 场 · 7-5-6</span>
              <span class="tag tag--violet mono">含 4 个赛季</span>
            </li>
            <li>
              <span class="pp-h2h__pair">江畔联 vs 青野竞技</span>
              <span class="pp-h2h__meta mono">24 场 · 9-6-9</span>
              <span class="tag tag--violet mono">含 6 个赛季</span>
            </li>
            <li>
              <span class="pp-h2h__pair">北辰 vs 南岭</span>
              <span class="pp-h2h__meta mono">12 场 · 5-2-5</span>
              <span class="tag tag--violet mono">含 3 个赛季</span>
            </li>
          </ul>

          <div class="pp-tabs">
            <input class="pp-tabs__input" type="radio" name="pp-fmt" id="pp-fmt-csv" checked>
            <input class="pp-tabs__input" type="radio" name="pp-fmt" id="pp-fmt-png">
            <div class="pp-tabs__labels">
              <label for="pp-fmt-csv" class="mono">CSV 表格</label>
              <label for="pp-fmt-png" class="mono">PNG 图片</label>
            </div>
            <div class="pp-tabs__panel" data-fmt="csv">
              <p class="pp-tabs__line mono">列：赛季 / 阶段 / 主队 / 客队 / 比分 / 主客场</p>
              <p class="pp-tabs__line mono">行数：42 条</p>
              <p class="pp-tabs__hint">适合再整理：拿到表格接着排自己的赛前笔记，或者并进周报。</p>
              <span class="tag tag--sun mono">已生成 42 条</span>
            </div>
            <div class="pp-tabs__panel" data-fmt="png">
              <p class="pp-tabs__line mono">画布：1200 × 900</p>
              <p class="pp-tabs__line mono">内容：对阵表 + 近五次比分</p>
              <p class="pp-tabs__hint">适合直接发：存进相册转给群里，或者贴到简报、投到大屏。</p>
              <span class="tag tag--sun mono">已生成 1 张</span>
            </div>
          </div>
        </div>

        <figure class="media media--tall media--cut">
          <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="pp-section" id="filter">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">06 / 筛选与回访</p>
        <h2 class="section-title">两步选出联赛，回访一步回到原位</h2>
        <p class="section-lead">联赛多的时候，先在拇指区选地区或赛事类型，再选具体联赛，赛程立刻跳到对应日期段。常看的联赛可以收藏，最近查看会留在列表最上面，下次打开直接接着看。</p>
      </header>

      <div class="pp-filter">
        <ol class="pp-steps">
          <li><strong>第一步 · 选范围</strong>城市联赛、区域联赛、校园杯，先圈出一类。</li>
          <li><strong>第二步 · 选联赛</strong>范围定了再挑具体赛事，列表只留相关的。</li>
          <li><strong>到位</strong>赛程跳到对应日期段，阵容和排名入口跟着切换。</li>
        </ol>

        <div class="pp-filter__side">
          <p class="pp-filter__note">收藏记在浏览器本地，换设备不会跟过去；最近查看只保留你点开过的几场，随时能清。两步筛选固定在拇指够得着的位置，单手不用换姿势。</p>
          <ul class="pp-taglist">
            <li class="tag tag--mint mono">最近查看</li>
            <li class="tag tag--orange mono">本地收藏</li>
            <li class="tag tag--plain mono">两步筛选</li>
          </ul>
        </div>

        <figure class="media media--wide media--cut pp-filter__media">
          <img src="{zhanqunpic:h:700w:1100}" width="1100" height="700" alt="手机拇指区两步筛选步骤条与联赛标签的抽象界面" loading="lazy" decoding="async">
          <figcaption class="media__caption">筛选步骤落在拇指区，两步到联赛</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section" id="fit">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">07 / 适用场景</p>
        <h2 class="section-title">谁用这套工具最省事</h2>
        <p class="section-lead">同四件工具，不同人拿到手用法不一样。下面是几类常见用法，对号入座就行。</p>
      </header>

      <ul class="pp-fit">
        <li class="pp-fit__card">
          <p class="pp-fit__who">体育迷</p>
          <p>想知道今晚有什么球、谁首发，扫日期点比赛，两下看完，不用在长列表里翻。</p>
        </li>
        <li class="pp-fit__card">
          <p class="pp-fit__who">区域赛事运营者</p>
          <p>赛程按天分段摆出来，报名和观众都能对上时间；排名表导出来，直接给赞助方看。</p>
        </li>
        <li class="pp-fit__card">
          <p class="pp-fit__who">校园联赛组织者</p>
          <p>八强、半决赛用横向卡片展示，家长和学生拿手机看也不费劲，时间地点一目了然。</p>
        </li>
        <li class="pp-fit__card">
          <p class="pp-fit__who">场馆内容团队</p>
          <p>把当场对阵和交锋摘要导成 PNG，投大屏或打印都清楚，赛前十分钟就能上屏。</p>
        </li>
        <li class="pp-fit__card">
          <p class="pp-fit__who">体育内容编辑</p>
          <p>一次导出一整个赛季的交锋记录，写赛前稿不用一页页翻，条理直接摆在表格里。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="pp-section pp-section--flush" id="rhythm">
    <div class="wrap">
      <header class="section-head">
        <p class="section-kicker mono">08 / 更新与导出</p>
        <h2 class="section-title">每周三更新，看完随时带走</h2>
        <p class="section-lead">赛程数据固定在每周三更新，排名和交锋档案跟着刷新。导出支持 CSV 和 PNG，手机上可以直接存到文件或相册：表格适合再整理，图片适合直接发。</p>
      </header>

      <div class="pp-rhythm">
        <dl class="pp-facts">
          <div class="pp-facts__row"><dt class="mono">更新节奏</dt><dd>每周三</dd></div>
          <div class="pp-facts__row"><dt class="mono">导出格式</dt><dd>CSV / PNG</dd></div>
          <div class="pp-facts__row"><dt class="mono">覆盖范围</dt><dd>68 个联赛与杯赛</dd></div>
          <div class="pp-facts__row"><dt class="mono">交锋档案</dt><dd>12 个赛季 · 18 万场比赛条目</dd></div>
          <div class="pp-facts__row"><dt class="mono">移动访问</dt><dd>约占 78%</dd></div>
        </dl>

        <div class="pp-next">
          <p class="pp-next__title">接着去哪儿</p>
          <ul class="pp-next__list">
            <li><a href="/">回首页看今天的日期分段赛程</a></li>
            <li><a href="/questions/">导出没成功、入口点不开，看问题解答</a></li>
            <li><a href="/connect/">赛程数据有疑问，走联系通道</a></li>
            <li><a href="/stories/">赛前观察与交锋笔记在赛场故事</a></li>
            <li><a href="/history/">想了解团队和合作，看品牌历程</a></li>
          </ul>
          <div class="pp-next__actions">
            <a class="button button--primary" href="/questions/">看操作解答</a>
            <a class="button button--warm" href="/connect/">联系客服</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pp-gap: clamp(1rem, 3vw, 1.7rem);
  --pp-radius: var(--r-md);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(43, 245, 210, .10), transparent 60%),
    radial-gradient(90% 80% at 92% 6%, rgba(255, 138, 61, .10), transparent 62%);
}

.page-products .pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .28;
  pointer-events: none;
}

.page-products .pp-hero__grid {
  position: relative;
  display: grid;
  gap: var(--pp-gap);
  padding: clamp(1.8rem, 5vw, 3.4rem) 0;
}

.page-products .pp-hero h1 {
  margin: 1rem 0 0;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 7vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 900;
  color: var(--bone);
  text-wrap: balance;
}

.page-products .pp-hero__lead {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: var(--fog);
  font-size: 1.02rem;
  line-height: 1.75;
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.5rem;
}

.page-products .pp-hero__meta {
  margin: 1.3rem 0 0;
  color: var(--dim);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.7;
}

/* 日期轨道预览卡 */
.page-products .pp-board {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
  padding: clamp(1rem, 3.4vw, 1.4rem);
  box-shadow: var(--shadow-1);
}

.page-products .pp-board__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .07em;
  color: var(--fog);
  text-transform: uppercase;
}

.page-products .pp-board__pulse {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--orange);
  animation: pp-pulse 2.6s var(--ease) infinite;
}

@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 138, 61, 0); }
}

.page-products .pp-board__dates {
  display: flex;
  gap: .4rem;
  margin: .9rem 0;
  overflow-x: auto;
  padding-bottom: .2rem;
}

.page-products .pp-board__date {
  flex: 0 0 auto;
  padding: .32rem .72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fog);
  font-size: .78rem;
}

.page-products .pp-board__date.is-on {
  background: var(--orange);
  border-color: var(--orange);
  color: #20140a;
  font-weight: 700;
}

.page-products .pp-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .pp-board__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  background: var(--ink-700);
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--bone);
}

.page-products .pp-board__list li > span:first-child {
  color: var(--mint);
  font-size: .84rem;
}

.page-products .pp-board__go {
  color: var(--orange);
  font-size: .72rem;
  border: 1px solid rgba(255, 138, 61, .45);
  padding: .1rem .45rem;
  border-radius: 999px;
}

/* ---------- 分节通用 ---------- */
.page-products .pp-section {
  padding: clamp(2.1rem, 5.5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .pp-section--flush {
  border-bottom: 0;
}

.page-products .pp-taglist {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ---------- 工具总览 ---------- */
.page-products .pp-toolkit {
  display: grid;
  gap: var(--pp-gap);
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.page-products .pp-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.page-products .pp-index__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .15rem .6rem;
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  text-decoration: none;
  color: var(--bone);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.page-products .pp-index__item:hover,
.page-products .pp-index__item:focus-visible {
  border-color: var(--mint);
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-products .pp-index__num {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--mint);
  font-size: 1.05rem;
  font-weight: 700;
}

.page-products .pp-index__title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.page-products .pp-index__desc {
  color: var(--fog);
  font-size: .89rem;
  line-height: 1.6;
}

.page-products .pp-flow {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 3.4vw, 1.5rem);
}

.page-products .pp-flow__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-flow__sub {
  margin: .25rem 0 1.1rem;
  color: var(--fog);
  font-size: .86rem;
}

.page-products .pp-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: ppstep;
}

.page-products .pp-flow__steps li {
  position: relative;
  padding-left: 2.3rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--fog);
}

.page-products .pp-flow__steps li strong {
  color: var(--bone);
}

.page-products .pp-flow__steps li::before {
  counter-increment: ppstep;
  content: counter(ppstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--ink-900);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
}

.page-products .pp-flow__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .75rem;
  top: 1.85rem;
  bottom: -1rem;
  width: 1px;
  background: var(--line);
}

/* ---------- 日期分段赛程 ---------- */
.page-products .pp-schedule {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-rail {
  grid-column: 1 / -1;
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .2rem .2rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.page-products .pp-rail::-webkit-scrollbar {
  height: 6px;
}

.page-products .pp-rail::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.page-products .pp-rail__card {
  flex: 0 0 76%;
  max-width: 300px;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: 1rem;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-rail__card:nth-child(even) {
  padding-bottom: 1.9rem;
  background: var(--ink-800);
}

.page-products .pp-rail__date {
  margin: 0;
  color: var(--orange);
  font-size: .76rem;
  letter-spacing: .1em;
}

.page-products .pp-rail__league {
  margin: 0;
  color: var(--fog);
  font-size: .8rem;
}

.page-products .pp-rail__time {
  margin: .1rem 0;
  color: var(--bone);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
}

.page-products .pp-rail__teams {
  margin: 0 0 .3rem;
  font-size: .94rem;
  color: var(--bone);
}

.page-products .pp-rail__card .tag {
  justify-self: start;
}

.page-products .pp-schedule__note h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-schedule__note p {
  margin: 0;
  color: var(--fog);
  font-size: .94rem;
  line-height: 1.72;
}

.page-products .pp-schedule .media {
  margin: 0;
}

/* ---------- 阵容 ---------- */
.page-products .pp-lineup {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-lineup .media {
  margin: 0;
}

.page-products .pp-acc {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}

.page-products .pp-acc + .pp-acc {
  margin-top: .6rem;
}

.page-products .pp-acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.05rem;
  font-size: .97rem;
  font-weight: 700;
  color: var(--bone);
}

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

.page-products .pp-acc summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--mint);
}

.page-products .pp-acc[open] summary {
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
}

.page-products .pp-acc[open] summary::after {
  content: "–";
  color: var(--orange);
}

.page-products .pp-acc__body {
  padding: .9rem 1.05rem 1.1rem;
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.7;
}

.page-products .pp-acc__body p {
  margin: 0;
}

/* ---------- 排名中心 ---------- */
.page-products .pp-standings {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-standings .media {
  margin: 0;
  max-width: 340px;
}

.page-products .pp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.page-products .pp-stats__cell {
  padding: .8rem .9rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-stats__cell--wide {
  grid-column: 1 / -1;
  background: var(--ink-700);
}

.page-products .pp-stats__num {
  display: block;
  color: var(--mint);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}

.page-products .pp-stats__cell--violet .pp-stats__num {
  color: var(--violet);
}

.page-products .pp-stats__cell--wide .pp-stats__num {
  color: var(--orange);
}

.page-products .pp-stats__label {
  display: block;
  margin-top: .25rem;
  color: var(--fog);
  font-size: .78rem;
}

.page-products .pp-chartwrap {
  margin-top: .9rem;
  padding: .9rem 1rem 1rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--pp-radius);
}

.page-products .pp-chartwrap__title {
  margin: 0 0 .6rem;
  color: var(--dim);
  font-size: .76rem;
  letter-spacing: .08em;
}

.page-products .pp-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.page-products .pp-chart text {
  fill: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-products .pp-chart rect {
  fill: var(--mint);
}

.page-products .pp-chart rect.pp-chart__bar--violet {
  fill: var(--violet);
}

.page-products .pp-acc--wide {
  margin-top: .9rem;
}

.page-products .pp-compare {
  display: grid;
  gap: .6rem;
  margin-bottom: .7rem;
}

.page-products .pp-compare__col {
  padding: .7rem .8rem;
  background: var(--ink-700);
  border-left: 2px solid var(--mint);
  border-radius: var(--r-sm);
}

.page-products .pp-compare__name {
  margin: 0 0 .3rem;
  color: var(--bone);
  font-size: .9rem;
  font-weight: 700;
}

.page-products .pp-compare__line {
  margin: 0;
  color: var(--mint);
  font-size: .8rem;
}

/* ---------- 历史交锋 ---------- */
.page-products .pp-h2h {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-h2h .media {
  margin: 0;
}

.page-products .pp-h2h__list h3 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bone);
}

.page-products .pp-h2h__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.page-products .pp-h2h__rows li {
  display: grid;
  gap: .3rem;
  padding: .75rem .9rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.page-products .pp-h2h__pair {
  color: var(--bone);
  font-size: .95rem;
  font-weight: 700;
}

.page-products .pp-h2h__meta {
  color: var(--violet);
  font-size: .82rem;
}

.page-products .pp-h2h__rows .tag {
  justify-self: start;
}

/* 导出格式选项卡 */
.page-products .pp-tabs {
  position: relative;
  margin-top: 1.1rem;
}

.page-products .pp-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .pp-tabs__labels {
  display: flex;
  gap: .4rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}

.page-products .pp-tabs__labels label {
  cursor: pointer;
  padding: .38rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fog);
  font-size: .82rem;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.page-products #pp-fmt-csv:checked ~ .pp-tabs__labels label[for="pp-fmt-csv"],
.page-products #pp-fmt-png:checked ~ .pp-tabs__labels label[for="pp-fmt-png"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink-900);
  font-weight: 700;
}

.page-products .pp-tabs__panel {
  display: none;
  padding-top: .9rem;
}

.page-products #pp-fmt-csv:checked ~ .pp-tabs__panel[data-fmt="csv"],
.page-products #pp-fmt-png:checked ~ .pp-tabs__panel[data-fmt="png"] {
  display: block;
}

.page-products .pp-tabs__line {
  margin: 0 0 .4rem;
  color: var(--bone);
  font-size: .82rem;
  line-height: 1.6;
}

.page-products .pp-tabs__hint {
  margin: .6rem 0 .7rem;
  color: var(--fog);
  font-size: .9rem;
  line-height: 1.65;
}

/* ---------- 筛选与回访 ---------- */
.page-products .pp-filter {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  counter-reset: ppstep2;
}

.page-products .pp-steps li {
  position: relative;
  padding: .85rem .9rem .85rem 3rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.6;
}

.page-products .pp-steps li strong {
  display: block;
  color: var(--bone);
  font-size: .95rem;
  margin-bottom: .15rem;
}

.page-products .pp-steps li::before {
  counter-increment: ppstep2;
  content: counter(ppstep2, decimal-leading-zero);
  position: absolute;
  left: .85rem;
  top: .95rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #20140a;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
}

.page-products .pp-filter__side {
  padding: 1rem 1.05rem;
  background: var(--ink-700);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
}

.page-products .pp-filter__note {
  margin: 0;
  color: var(--fog);
  font-size: .92rem;
  line-height: 1.72;
}

.page-products .pp-filter__media {
  margin: 0;
}

/* ---------- 适用场景 ---------- */
.page-products .pp-fit {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.page-products .pp-fit__card {
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: var(--r-sm);
}

.page-products .pp-fit__card:nth-child(2) {
  border-left-color: var(--orange);
}

.page-products .pp-fit__card:nth-child(3) {
  border-left-color: var(--violet);
}

.page-products .pp-fit__card:nth-child(4) {
  border-left-color: var(--sun);
}

.page-products .pp-fit__card:nth-child(5) {
  border-left-color: var(--mint);
}

.page-products .pp-fit__who {
  margin: 0 0 .35rem;
  color: var(--bone);
  font-size: .98rem;
  font-weight: 800;
}

.page-products .pp-fit__card > p:last-child {
  margin: 0;
  color: var(--fog);
  font-size: .9rem;
  line-height: 1.68;
}

/* ---------- 更新与导出 ---------- */
.page-products .pp-rhythm {
  display: grid;
  gap: var(--pp-gap);
  margin-top: 1.5rem;
}

.page-products .pp-facts {
  margin: 0;
  padding: 1rem 1.05rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-products .pp-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-products .pp-facts__row:last-child {
  border-bottom: 0;
}

.page-products .pp-facts dt {
  color: var(--mint);
  font-size: .78rem;
  letter-spacing: .05em;
}

.page-products .pp-facts dd {
  margin: 0;
  color: var(--bone);
  font-size: .92rem;
}

.page-products .pp-next {
  padding: 1rem 1.05rem 1.2rem;
  background: var(--ink-700);
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
}

.page-products .pp-next__title {
  margin: 0 0 .7rem;
  color: var(--bone);
  font-size: 1.02rem;
  font-weight: 800;
}

.page-products .pp-next__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.page-products .pp-next__list a {
  display: block;
  padding: .55rem .7rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.page-products .pp-next__list a:hover,
.page-products .pp-next__list a:focus-visible {
  border-color: var(--mint);
  color: var(--mint);
}

.page-products .pp-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pp-rail__card {
    flex-basis: 260px;
  }

  .page-products .pp-h2h__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .page-products .pp-h2h__rows li .tag {
    grid-column: 1 / -1;
  }

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

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

@media (min-width: 900px) {
  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: clamp(1.6rem, 4vw, 3rem);
  }

  .page-products .pp-toolkit {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-products .pp-flow {
    position: sticky;
    top: 1.2rem;
  }

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

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

  .page-products .pp-standings {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    align-items: start;
  }

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

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

  .page-products .pp-filter__media {
    grid-column: 1 / -1;
  }

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

  .page-products .pp-rhythm {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .pp-filter {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .pp-filter__media {
    grid-column: 2 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-board__pulse {
    animation: none;
  }

  .page-products .pp-index__item {
    transition: none;
  }

  .page-products .pp-index__item:hover,
  .page-products .pp-index__item:focus-visible {
    transform: none;
  }
}