.page-products {
  background: var(--ly-deep);
  color: var(--ly-paper);
  font-family: var(--ly-font-body);
  overflow-x: hidden;
}

.page-products .pp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--ly-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ly-rock);
}

.page-products .pp-kicker::before {
  content: "";
  width: 22px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(100deg, var(--ly-cyan) 0 55%, var(--ly-signal) 55% 100%);
  transform: skewX(-18deg);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: calc(var(--ly-header-h) + 44px) 0 56px;
  background:
    radial-gradient(820px 400px at 92% -12%, var(--ly-cyan-16), transparent 68%),
    radial-gradient(560px 360px at -6% 108%, rgba(255, 107, 44, 0.12), transparent 70%),
    var(--ly-deep);
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-hero__grid {
  display: grid;
  gap: 34px;
}

.page-products .pp-hero__title {
  margin: 0 0 18px;
  font-family: var(--ly-font-display);
  font-weight: 900;
  font-size: clamp(34px, 7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ly-paper);
}

.page-products .pp-hero__lead {
  margin: 0 0 26px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pp-board {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(165deg, rgba(16, 27, 46, 0.96), rgba(11, 18, 32, 0.98));
  box-shadow: 0 30px 60px -40px rgba(53, 224, 208, 0.5);
}

.page-products .pp-board__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--ly-line);
  font-family: var(--ly-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ly-cyan);
}

.page-products .pp-board__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ly-cyan);
  box-shadow: 0 0 0 4px var(--ly-cyan-16);
}

.page-products .pp-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-products .pp-board__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--ly-r-sm);
  background: rgba(7, 11, 20, 0.7);
}

.page-products .pp-board__num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ly-paper);
  letter-spacing: 0.01em;
}

.page-products .pp-board__lab {
  font-size: 12px;
  color: var(--ly-rock);
}

.page-products .pp-board__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-moss);
}

/* ---------- 区块通用 ---------- */
.page-products .pp-section {
  padding: 56px 0;
  position: relative;
}

.page-products .pp-head {
  max-width: 62ch;
  margin-bottom: 32px;
}

.page-products .pp-head__title {
  margin: 0 0 14px;
  font-family: var(--ly-font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ly-paper);
}

.page-products .pp-head__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

/* ---------- 阶梯终端 ---------- */
.page-products .pp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pp-dev {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(160deg, rgba(16, 27, 46, 0.94), rgba(11, 18, 32, 0.98));
  transition: transform var(--ly-dur) var(--ly-ease),
    border-color var(--ly-dur) var(--ly-ease),
    box-shadow var(--ly-dur) var(--ly-ease);
}

.page-products .pp-dev:hover,
.page-products .pp-dev:focus-within {
  transform: translateY(-4px);
  border-color: var(--ly-cyan-55);
  box-shadow: 0 24px 48px -30px rgba(53, 224, 208, 0.6);
}

.page-products .pp-dev__frame {
  position: relative;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: #060a12;
  overflow: hidden;
}

.page-products .pp-dev__bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #0a1120;
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-dev__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ly-line);
}

.page-products .pp-dev__dot:nth-child(1) { background: var(--ly-signal); opacity: 0.85; }
.page-products .pp-dev__dot:nth-child(2) { background: var(--ly-clay); opacity: 0.75; }
.page-products .pp-dev__dot:nth-child(3) { background: var(--ly-cyan); opacity: 0.85; }

.page-products .pp-dev__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-products .pp-dev__screen img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.06);
}

.page-products .pp-dev__frame--phone {
  width: min(100%, 232px);
  margin: 0 auto;
  aspect-ratio: 9 / 17;
  padding: 12px 8px 14px;
  border-radius: 30px;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #0a1120, #060a12);
}

.page-products .pp-dev__notch {
  align-self: center;
  width: 54px;
  height: 6px;
  border-radius: var(--ly-r-pill);
  background: var(--ly-line);
}

.page-products .pp-dev__frame--phone .pp-dev__screen {
  flex: 1;
  aspect-ratio: auto;
  border-radius: 20px;
  overflow: hidden;
}

.page-products .pp-dev__home {
  align-self: center;
  width: 62px;
  height: 4px;
  border-radius: var(--ly-r-pill);
  background: var(--ly-line);
}

.page-products .pp-dev__frame--lite {
  border-radius: var(--ly-r-sm);
}

.page-products .pp-dev__screen--plain {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 16px 18px;
  background:
    repeating-linear-gradient(180deg, rgba(28, 41, 66, 0.35) 0 1px, transparent 1px 18px),
    linear-gradient(140deg, rgba(53, 224, 208, 0.09), transparent 62%);
}

.page-products .pp-dev__line {
  height: 7px;
  width: 84%;
  border-radius: var(--ly-r-pill);
  background: rgba(140, 154, 171, 0.35);
}

.page-products .pp-dev__line--short { width: 46%; background: var(--ly-cyan-55); }
.page-products .pp-dev__line--mid { width: 66%; }

.page-products .pp-dev__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-dev__title {
  margin: 0;
  font-family: var(--ly-font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ly-paper);
}

.page-products .pp-dev__scene {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

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

.page-products .pp-dev__points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ly-rock);
}

.page-products .pp-dev__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ly-cyan);
  transform: rotate(45deg);
  opacity: 0.8;
}

.page-products .pp-dev__who {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-moss);
  transition: color var(--ly-dur) var(--ly-ease), opacity var(--ly-dur) var(--ly-ease);
}

@media (hover: hover) and (min-width: 900px) {
  .page-products .pp-dev__who { opacity: 0; }
  .page-products .pp-dev:hover .pp-dev__who,
  .page-products .pp-dev:focus-within .pp-dev__who { opacity: 1; color: var(--ly-cyan); }
}

/* ---------- 赛程查询 ---------- */
.page-products .pp-schedule {
  display: grid;
  gap: 28px;
}

.page-products .pp-schedule__panel {
  padding: 22px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(150deg, rgba(16, 27, 46, 0.9), rgba(7, 11, 20, 0.95));
}

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

.page-products .pp-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.page-products .pp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ly-r-sm);
  border: 1px solid var(--ly-line);
  background: var(--ly-cyan-08);
  font-size: 13px;
  color: var(--ly-cyan);
  transform: skewX(-6deg);
}

.page-products .pp-step__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-paper);
}

.page-products .pp-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-schedule__diagram {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background:
    radial-gradient(420px 260px at 80% 0%, var(--ly-cyan-08), transparent 70%),
    var(--ly-stand);
}

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

.page-products .pp-schedule__caption {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
}

/* ---------- 赛前十分钟 ---------- */
.page-products .pp-lineup {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pp-lineup__media {
  margin: 0;
  border-radius: var(--ly-r-lg);
  overflow: hidden;
  border: 1px solid var(--ly-line);
  background: var(--ly-steel);
}

.page-products .pp-lineup__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.08);
}

.page-products .pp-lineup__figcap {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
  border-top: 1px solid var(--ly-line);
}

.page-products .pp-fields {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-products .pp-field {
  padding: 16px 18px;
  border: 1px solid var(--ly-line);
  border-left: 3px solid var(--ly-cyan);
  border-radius: 0 var(--ly-r-md) var(--ly-r-md) 0;
  background: rgba(16, 27, 46, 0.62);
  transition: background var(--ly-dur) var(--ly-ease), border-left-color var(--ly-dur) var(--ly-ease);
}

.page-products .pp-field:hover {
  background: rgba(16, 27, 46, 0.95);
  border-left-color: var(--ly-signal);
}

.page-products .pp-field__name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-cyan);
}

.page-products .pp-field__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

/* ---------- 版本对照 ---------- */
.page-products .pp-versions {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pp-versions__table {
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: rgba(11, 18, 32, 0.9);
  overflow: hidden;
}

.page-products .pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pp-table th,
.page-products .pp-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-table thead th {
  font-family: var(--ly-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ly-rock);
  background: rgba(7, 11, 20, 0.85);
}

.page-products .pp-table tbody th {
  font-weight: 600;
  color: var(--ly-paper);
}

.page-products .pp-table tbody td {
  color: var(--ly-body-soft);
  white-space: nowrap;
}

.page-products .pp-table tbody tr {
  transition: background var(--ly-dur) var(--ly-ease);
}

.page-products .pp-table tbody tr:hover,
.page-products .pp-table tbody tr:focus-within {
  background: var(--ly-cyan-08);
}

.page-products .pp-table tbody tr:hover td,
.page-products .pp-table tbody tr:hover th {
  color: var(--ly-paper);
}

.page-products .pp-table tbody tr.is-shift th:first-child {
  box-shadow: inset 3px 0 0 var(--ly-signal);
  color: var(--ly-signal);
}

.page-products .pp-table tbody tr:last-child th,
.page-products .pp-table tbody tr:last-child td {
  border-bottom: none;
}

.page-products .pp-versions__note {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.72;
  color: var(--ly-rock);
}

.page-products .pp-versions__media {
  margin: 0;
  border-radius: var(--ly-r-lg);
  overflow: hidden;
  border: 1px solid var(--ly-line);
  background: var(--ly-steel);
}

.page-products .pp-versions__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.6) contrast(1.1);
}

.page-products .pp-versions__media figcaption {
  padding: 13px 16px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
}

/* ---------- 订阅 ---------- */
.page-products .pp-sub {
  background:
    radial-gradient(600px 320px at 8% 0%, rgba(255, 107, 44, 0.1), transparent 70%),
    var(--ly-stand);
  border-top: 1px solid var(--ly-line);
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-sub__grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

.page-products .pp-sub__meta {
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ly-rock);
}

.page-products .pp-sub__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pp-sub__item {
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: rgba(16, 27, 46, 0.85);
  transition: border-color var(--ly-dur) var(--ly-ease);
}

.page-products .pp-sub__item[open] {
  border-color: var(--ly-cyan-55);
}

.page-products .pp-sub__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--ly-paper);
}

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

.page-products .pp-sub__sum:focus-visible {
  outline: 2px solid var(--ly-cyan);
  outline-offset: 2px;
  border-radius: var(--ly-r-md);
}

.page-products .pp-sub__mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.page-products .pp-sub__mark::before,
.page-products .pp-sub__mark::after {
  content: "";
  position: absolute;
  background: var(--ly-cyan);
  border-radius: 2px;
  transition: transform var(--ly-dur) var(--ly-ease), opacity var(--ly-dur) var(--ly-ease);
}

.page-products .pp-sub__mark::before {
  left: 0; top: 6px; width: 14px; height: 2px;
}

.page-products .pp-sub__mark::after {
  left: 6px; top: 0; width: 2px; height: 14px;
}

.page-products .pp-sub__item[open] .pp-sub__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-products .pp-sub__label {
  flex: 1 1 auto;
}

.page-products .pp-sub__tag {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ly-rock);
}

.page-products .pp-sub__item[open] .pp-sub__tag { color: var(--ly-cyan); }

.page-products .pp-sub__body {
  padding: 0 18px 18px 44px;
  border-top: 1px solid var(--ly-line);
  padding-top: 14px;
}

.page-products .pp-sub__body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

.page-products .pp-sub__body p:last-child { margin-bottom: 0; }

/* ---------- 版本节奏 ---------- */
.page-products .pp-pace {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-products .pp-pace__item {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: rgba(11, 18, 32, 0.78);
  transition: border-color var(--ly-dur) var(--ly-ease), transform var(--ly-dur) var(--ly-ease);
}

.page-products .pp-pace__item:hover {
  border-color: var(--ly-cyan-55);
  transform: translateY(-3px);
}

.page-products .pp-pace__num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ly-cyan);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

.page-products .pp-pace__body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-paper);
}

.page-products .pp-pace__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-pace__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .pp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-pill);
  background: rgba(16, 27, 46, 0.7);
  font-size: 14px;
  color: var(--ly-paper);
  text-decoration: none;
  transition: border-color var(--ly-dur) var(--ly-ease),
    color var(--ly-dur) var(--ly-ease),
    background var(--ly-dur) var(--ly-ease);
}

.page-products .pp-link:hover,
.page-products .pp-link:focus-visible {
  border-color: var(--ly-cyan);
  color: var(--ly-cyan);
  background: var(--ly-cyan-08);
  outline: none;
}

.page-products .pp-link span {
  transition: transform var(--ly-dur) var(--ly-ease);
}

.page-products .pp-link:hover span { transform: translateX(4px); }

/* ---------- 结尾 ---------- */
.page-products .pp-final {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ly-line);
}

.page-products .pp-final__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15);
  opacity: 0.42;
}

.page-products .pp-final__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.72), rgba(7, 11, 20, 0.95) 72%),
    radial-gradient(520px 300px at 78% 20%, rgba(53, 224, 208, 0.18), transparent 70%);
}

.page-products .pp-final__inner {
  position: relative;
  padding: 68px 0 76px;
}

.page-products .pp-final__title {
  margin: 0 0 14px;
  font-family: var(--ly-font-display);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ly-paper);
}

.page-products .pp-final__text {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

.page-products .pp-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pp-hero__title {
    transform: skewX(-3deg);
    transform-origin: 0 50%;
  }

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

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

  .page-products .pp-sub__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 36px;
  }

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

@media (min-width: 900px) {
  .page-products .pp-hero {
    padding: calc(var(--ly-header-h) + 62px) 0 72px;
  }

  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    gap: 48px;
    align-items: center;
  }

  .page-products .pp-section {
    padding: 76px 0;
  }

  .page-products .pp-stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    padding-bottom: 48px;
  }

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

  .page-products .pp-stage__item--apple {
    grid-column: 2 / 7;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--ly-stack));
  }

  .page-products .pp-stage__item--lite {
    grid-column: 8 / 13;
    position: relative;
    z-index: 3;
    margin-top: 76px;
  }

  .page-products .pp-dev__frame--desk .pp-dev__screen {
    aspect-ratio: 21 / 9;
  }

  .page-products .pp-lineup {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 44px;
  }

  .page-products .pp-lineup__media {
    margin-top: 34px;
    transform: translateX(-6px);
  }

  .page-products .pp-versions__media {
    margin-top: 42px;
    transform: translateX(10px);
  }

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

  .page-products .pp-pace__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .page-products .pp-final__inner {
    padding: 88px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-dev,
  .page-products .pp-pace__item,
  .page-products .pp-link,
  .page-products .pp-field {
    transition: none;
  }

  .page-products .pp-dev:hover,
  .page-products .pp-pace__item:hover {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="ly-shell">
    <nav class="ly-crumb" aria-label="面包屑导航">
      <ol class="ly-crumb__list">
        <li class="ly-crumb__item"><a class="ly-crumb__link" href="/">看台首页</a></li>
        <li class="ly-crumb__item"><span class="ly-crumb__current" aria-current="page">应用中心</span></li>
      </ol>
    </nav>
  </div>

  <header class="pp-hero">
    <div class="ly-shell pp-hero__grid">
      <div class="pp-hero__copy">
        <p class="pp-kicker">A 区 · 终端与功能</p>
        <h1 class="pp-hero__title">挑一块顺手的屏，把今晚的比赛看明白</h1>
        <p class="pp-hero__lead">今晚要看哪几场、首发有没有临时的变化、上一轮的对阵长成什么样，在 LEYU看台的应用中心能一次拿到。电脑版把一整天的赛程摊开，苹果端揣在口袋里盯倒计时，网页轻量版在信号弱的地方也能翻下去。</p>
        <div class="pp-hero__actions">
          <a class="ly-btn ly-btn--primary" href="#terminals">比较三种终端</a>
          <a class="ly-btn ly-btn--ghost" href="#subscribe">看订阅能拿到什么</a>
        </div>
      </div>
      <aside class="pp-board" aria-label="版本与场次速览">
        <div class="pp-board__head">
          <span class="pp-board__dot" aria-hidden="true"></span>
          <span>当前版本 第12版</span>
        </div>
        <div class="pp-board__grid">
          <div class="pp-board__cell">
            <span class="pp-board__num ly-num">62</span>
            <span class="pp-board__lab">项联赛与杯赛</span>
          </div>
          <div class="pp-board__cell">
            <span class="pp-board__num ly-num">300–900</span>
            <span class="pp-board__lab">每日在架场次</span>
          </div>
          <div class="pp-board__cell">
            <span class="pp-board__num ly-num">36</span>
            <span class="pp-board__lab">个轮次快照</span>
          </div>
          <div class="pp-board__cell">
            <span class="pp-board__num ly-num">09:30</span>
            <span class="pp-board__lab">发布当日版本号</span>
          </div>
        </div>
        <p class="pp-board__note">开赛前十分钟，阵容名单、伤停状态与射门统计同时推到你的屏上。</p>
      </aside>
    </div>
  </header>

  <section class="pp-section" id="terminals">
    <div class="ly-shell">
      <div class="pp-head">
        <p class="pp-kicker">B 区 · 终端矩阵</p>
        <h2 class="pp-head__title">先在哪个屏上看球，再决定装什么</h2>
        <p class="pp-head__lead">三个入口读的是同一份赛程与阵容。差别在屏幕大小和当下的网速——挑一个当主力，另外两个留着备用，换设备也不会断线。</p>
      </div>

      <div class="pp-stage">
        <article class="pp-stage__item pp-stage__item--desk">
          <div class="pp-dev">
            <div class="pp-dev__frame pp-dev__frame--desk">
              <div class="pp-dev__bar" aria-hidden="true">
                <span class="pp-dev__dot"></span>
                <span class="pp-dev__dot"></span>
                <span class="pp-dev__dot"></span>
              </div>
              <div class="pp-dev__screen">
                <img src="{zhanqunpic:h:900w:1440}" width="1440" height="900" alt="暗色桌面上多窗口赛程网格界面，屏幕反光与键盘边缘虚化" loading="lazy" decoding="async">
              </div>
            </div>
            <div class="pp-dev__body">
              <span class="ly-chip ly-chip--cyan">主力终端</span>
              <h3 class="pp-dev__title">电脑版：一整天摊在一屏里</h3>
              <p class="pp-dev__scene">下班回到家打开电脑，把今天到明天的比赛按联赛排一遍，顺手把常看的几个联赛收进收藏，明晚直接回到同一条列表。</p>
              <ul class="pp-dev__points">
                <li>联赛与日期两个方向一起筛，几百场里挑出你要的那几场</li>
                <li>多窗口并排，开赛时间与比分在同一行对齐</li>
              </ul>
              <p class="pp-dev__who">适合：一周固定追两三个联赛、看球时还开着电脑的人</p>
            </div>
          </div>
        </article>

        <article class="pp-stage__item pp-stage__item--apple">
          <div class="pp-dev">
            <div class="pp-dev__frame pp-dev__frame--phone">
              <span class="pp-dev__notch" aria-hidden="true"></span>
              <div class="pp-dev__screen">
                <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机屏幕在暗环境中显示订阅公告与排名区间，手指轻触，画面冷调" loading="lazy" decoding="async">
              </div>
              <span class="pp-dev__home" aria-hidden="true"></span>
            </div>
            <div class="pp-dev__body">
              <span class="ly-chip ly-chip--signal">订阅终端</span>
              <h3 class="pp-dev__title">苹果端：倒计时贴在手边</h3>
              <p class="pp-dev__scene">人还在路上，比赛二十分钟后开球。掏出手机看一眼倒计时，再点开阵容确认谁顶替了停赛的那一个。</p>
              <ul class="pp-dev__points">
                <li>iOS 16 及以上系统可用，目前约 12 万人在订阅</li>
                <li>开赛提醒与阵容刷新推送到同一处，不用来回切</li>
              </ul>
              <p class="pp-dev__who">适合：通勤路上、饭局间隙也要刷一眼阵容的人</p>
            </div>
          </div>
        </article>

        <article class="pp-stage__item pp-stage__item--lite">
          <div class="pp-dev">
            <div class="pp-dev__frame pp-dev__frame--lite">
              <div class="pp-dev__bar" aria-hidden="true">
                <span class="pp-dev__dot"></span>
                <span class="pp-dev__dot"></span>
                <span class="pp-dev__dot"></span>
              </div>
              <div class="pp-dev__screen pp-dev__screen--plain" aria-hidden="true">
                <span class="pp-dev__line"></span>
                <span class="pp-dev__line pp-dev__line--short"></span>
                <span class="pp-dev__line"></span>
                <span class="pp-dev__line pp-dev__line--mid"></span>
              </div>
            </div>
            <div class="pp-dev__body">
              <span class="ly-chip ly-chip--moss">备用入口</span>
              <h3 class="pp-dev__title">网页轻量版：弱网也读得下去</h3>
              <p class="pp-dev__scene">在球场地下一层、高铁隧道里、老家的旧手机上，页面自动收成纯文本列表，只剩场次、联赛和开赛时间三列。</p>
              <ul class="pp-dev__points">
                <li>不依赖安装，浏览器打开就能查</li>
                <li>降级后仍保留最关键的三个字段</li>
              </ul>
              <p class="pp-dev__who">适合：临时换设备、网络时好时坏的人</p>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="pp-section" id="schedule">
    <div class="ly-shell">
      <div class="pp-head">
        <p class="pp-kicker">C 区 · 赛程查询</p>
        <h2 class="pp-head__title">周末十几场同时开球，两下就收窄到你要的那一场</h2>
        <p class="pp-head__lead">LEYU电脑版赛程查询走的是两条轴：一条是日期，一条是联赛。先圈日子，再勾联赛，中间交叉出来的就是今天真正要看的几场。</p>
      </div>

      <div class="pp-schedule">
        <div class="pp-schedule__panel">
          <ol class="pp-schedule__steps">
            <li class="pp-step">
              <span class="pp-step__num ly-num">01</span>
              <div>
                <h3 class="pp-step__title">先定日子</h3>
                <p class="pp-step__text">默认落在今天，点一下跳到明天，或者直接选周末两天。一个主流比赛日能排到接近 900 场，先把日子框住，列表立刻短下来。</p>
              </div>
            </li>
            <li class="pp-step">
              <span class="pp-step__num ly-num">02</span>
              <div>
                <h3 class="pp-step__title">再勾联赛</h3>
                <p class="pp-step__text">62 项联赛与杯赛分成足球、篮球、网球与综合三类。勾上你在追的那几个，剩下的场次不会再来占地方。</p>
              </div>
            </li>
            <li class="pp-step">
              <span class="pp-step__num ly-num">03</span>
              <div>
                <h3 class="pp-step__title">收藏常看的</h3>
                <p class="pp-step__text">把每周都看的联赛收进收藏，下次打开电脑版直接落在同一条列表上，不用重新勾一遍。</p>
              </div>
            </li>
          </ol>
        </div>

        <figure class="pp-schedule__diagram">
          <svg class="pp-svg" viewBox="0 0 420 268" role="img" aria-label="横轴为日期、纵轴为联赛的双轴筛选示意，交叉点亮起荧光青">
            <g stroke="var(--ly-line)" stroke-width="1" stroke-dasharray="3 5">
              <line x1="86" y1="34" x2="86" y2="222"></line>
              <line x1="86" y1="222" x2="396" y2="222"></line>
              <line x1="148" y1="34" x2="148" y2="222"></line>
              <line x1="210" y1="34" x2="210" y2="222"></line>
              <line x1="272" y1="34" x2="272" y2="222"></line>
              <line x1="334" y1="34" x2="334" y2="222"></line>
              <line x1="86" y1="72" x2="396" y2="72"></line>
              <line x1="86" y1="110" x2="396" y2="110"></line>
              <line x1="86" y1="148" x2="396" y2="148"></line>
              <line x1="86" y1="186" x2="396" y2="186"></line>
            </g>
            <g fill="var(--ly-rock)" font-size="11" font-family="var(--ly-font-mono)">
              <text x="24" y="76">足球</text>
              <text x="24" y="114">篮球</text>
              <text x="24" y="152">网球</text>
              <text x="24" y="190">综合</text>
            </g>
            <g fill="var(--ly-rock)" font-size="10" font-family="var(--ly-font-mono)" text-anchor="middle">
              <text x="148" y="244">周五</text>
              <text x="210" y="244">周六</text>
              <text x="272" y="244">周日</text>
              <text x="334" y="244">周一</text>
            </g>
            <g fill="var(--ly-line)">
              <circle cx="148" cy="72" r="4"></circle>
              <circle cx="334" cy="72" r="4"></circle>
              <circle cx="210" cy="110" r="4"></circle>
              <circle cx="148" cy="148" r="4"></circle>
              <circle cx="334" cy="186" r="4"></circle>
            </g>
            <circle cx="210" cy="72" r="16" fill="var(--ly-cyan-16)"></circle>
            <circle cx="210" cy="72" r="6" fill="var(--ly-cyan)"></circle>
            <line x1="210" y1="34" x2="210" y2="72" stroke="var(--ly-cyan)" stroke-width="1"></line>
            <line x1="210" y1="72" x2="86" y2="72" stroke="var(--ly-cyan)" stroke-width="1"></line>
          </svg>
          <figcaption class="pp-schedule__caption">周六 × 足球，交叉点亮起的地方就是今天最先看的那几场。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section" id="lineup">
    <div class="ly-shell pp-lineup">
      <figure class="pp-lineup__media">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="球员入场通道与更衣室门口的热身剪影，逆光与地面反光" loading="lazy" decoding="async">
        <figcaption class="pp-lineup__figcap">开赛前十分钟，通道里的人已经换成另外一套阵容。</figcaption>
      </figure>
      <div class="pp-lineup__copy">
        <p class="pp-kicker">D 区 · 赛前十分钟</p>
        <h2 class="pp-head__title">名单临阵变动的那十分钟，别靠群里转发</h2>
        <p class="pp-head__lead">你要的国内LEYU开赛前十分钟阵容，就落在下面三类信息上。它们在开赛前十分钟一起刷新，来源是与平台对接的 9 家数据服务商和赛事官方公开数据接口。</p>
        <div class="pp-fields">
          <div class="pp-field">
            <h3 class="pp-field__name">阵容变动</h3>
            <p class="pp-field__text">首发换了谁、替补席上多了谁，写清楚位置和换人方向，不用自己对着号码猜。</p>
          </div>
          <div class="pp-field">
            <h3 class="pp-field__name">伤停状态</h3>
            <p class="pp-field__text">赛前临时出现的伤停会单独标出来，你看到的那一条就是临场生效的版本。</p>
          </div>
          <div class="pp-field">
            <h3 class="pp-field__name">射门统计</h3>
            <p class="pp-field__text">配合赛前走势一起看，谁最近脚感好、谁一直在打铁，一眼能分出高下。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pp-section" id="versions">
    <div class="ly-shell">
      <div class="pp-head">
        <p class="pp-kicker">E 区 · 版本对照</p>
        <h2 class="pp-head__title">上一轮怎么写的，翻回去还能看见</h2>
        <p class="pp-head__lead">体育赛事对阵版本对照随联赛轮次滚动校准，最近 36 个轮次快照都留着，往前能回溯三个赛季。中文译名与术语对照库收了 4,800 条词条，队名、球员位置和统计方式都对得上号。</p>
      </div>

      <div class="pp-versions">
        <div class="pp-versions__table">
          <table class="pp-table">
            <caption class="ly-visually-hidden">对阵版本对照各字段的更新时机与回看深度</caption>
            <thead>
              <tr>
                <th scope="col">对照字段</th>
                <th scope="col">当前轮次取值</th>
                <th scope="col">回看深度</th>
              </tr>
            </thead>
            <tbody>
              <tr class="is-shift">
                <th scope="row">对阵版本号</th>
                <td class="ly-num">随轮次递增</td>
                <td class="ly-num">36 个轮次快照</td>
              </tr>
              <tr>
                <th scope="row">首发阵容</th>
                <td class="ly-num">开赛前十分钟</td>
                <td class="ly-num">三个赛季</td>
              </tr>
              <tr>
                <th scope="row">伤停名单</th>
                <td class="ly-num">开赛前十分钟</td>
                <td class="ly-num">三个赛季</td>
              </tr>
              <tr>
                <th scope="row">射门统计</th>
                <td class="ly-num">开赛前十分钟</td>
                <td class="ly-num">三个赛季</td>
              </tr>
              <tr class="is-shift">
                <th scope="row">中文译名</th>
                <td class="ly-num">随词条库更新</td>
                <td class="ly-num">4,800 条词条</td>
              </tr>
            </tbody>
          </table>
          <p class="pp-versions__note">橙色标记的两行每轮都会动。写稿、做视频、复盘争议判罚，需要引用当时的说法时，从这两行走。</p>
        </div>
        <figure class="pp-versions__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="数据表格与对齐线段的抽象光影，冷蓝与青色细线交织" loading="lazy" decoding="async">
          <figcaption>同一场对阵的两个版本并排，改动的地方一眼能挑出来。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section pp-sub" id="subscribe">
    <div class="ly-shell pp-sub__grid">
      <div class="pp-sub__copy">
        <p class="pp-kicker">F 区 · 苹果端订阅</p>
        <h2 class="pp-head__title">订阅之后多出来的四件事</h2>
        <p class="pp-head__lead">苹果端LEYU订阅不改变你查赛程的方式，只是在原有的内容上加了几层方便：数据版本随时能翻到、排名区间有个提示、日历能替你记着比赛、读起来更干净。</p>
        <p class="pp-sub__meta"><span class="ly-num">iOS 16</span> 及以上系统可用，目前约 <span class="ly-num">12 万</span> 用户在订阅。</p>
        <a class="ly-btn ly-btn--signal" href="/answers/">看订阅常见问题</a>
      </div>

      <div class="pp-sub__list">
        <details class="pp-sub__item" open>
          <summary class="pp-sub__sum">
            <span class="pp-sub__mark" aria-hidden="true"></span>
            <span class="pp-sub__label">更新公告栏</span>
            <span class="pp-sub__tag ly-num">01</span>
          </summary>
          <div class="pp-sub__body">
            <p>当天的数据版本号和联赛排名区间都写在更新公告栏里。想确认自己看到的是哪一版，打开公告栏就能对上，不用去翻设置。</p>
            <p>赛季初大版本上线后，公告栏里会留一条说明，写清这次动了哪些字段。</p>
          </div>
        </details>

        <details class="pp-sub__item">
          <summary class="pp-sub__sum">
            <span class="pp-sub__mark" aria-hidden="true"></span>
            <span class="pp-sub__label">排名区间提示</span>
            <span class="pp-sub__tag ly-num">02</span>
          </summary>
          <div class="pp-sub__body">
            <p>联赛打到中段，积分榜挤成一团的时候，排名区间提示会告诉你这两队差在第几档，看走势比看单场比分更有用。</p>
            <p>区间跟着轮次走，每轮结束后自动更新到最新一档。</p>
          </div>
        </details>

        <details class="pp-sub__item">
          <summary class="pp-sub__sum">
            <span class="pp-sub__mark" aria-hidden="true"></span>
            <span class="pp-sub__label">赛程日历订阅</span>
            <span class="pp-sub__tag ly-num">03</span>
          </summary>
          <div class="pp-sub__body">
            <p>把常看的联赛塞进手机日历，开赛前自动响一声。改期或者换场地，日历里的条目会跟着改，不会出现两个时间打架。</p>
            <p>一次订阅长期有效，收藏的联赛变了，日历也同步跟着变。</p>
          </div>
        </details>

        <details class="pp-sub__item">
          <summary class="pp-sub__sum">
            <span class="pp-sub__mark" aria-hidden="true"></span>
            <span class="pp-sub__label">清爽阅读</span>
            <span class="pp-sub__tag ly-num">04</span>
          </summary>
          <div class="pp-sub__body">
            <p>去掉多余的边框和提示，屏幕上一屏能多放两行数据。晚上关灯看球的时候，眼睛会舒服很多。</p>
            <p>在手机设置的显示与亮度里切换深浅模式，页面会跟着走。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="pp-section" id="pace">
    <div class="ly-shell">
      <div class="pp-head">
        <p class="pp-kicker">G 区 · 版本节奏</p>
        <h2 class="pp-head__title">每天上午九点半，先看今天这一版叫什么</h2>
        <p class="pp-head__lead">版本号是这块看台的时间刻度。每日版本走小步，赛季初走大步，轮次之内还会再修一次。</p>
      </div>

      <ol class="pp-pace">
        <li class="pp-pace__item">
          <span class="pp-pace__num ly-num">09:30</span>
          <div class="pp-pace__body">
            <h3>当日版本号</h3>
            <p>每天上午九点半，当天的数据版本号准时发布。白天看到的赛程和阵容，都挂在这个号下面。</p>
          </div>
        </li>
        <li class="pp-pace__item">
          <span class="pp-pace__num ly-num">赛季初</span>
          <div class="pp-pace__body">
            <h3>大版本</h3>
            <p>新赛季开打前上线一个大版本，联赛范围、字段结构和译名库一起调整，改动会写进公告。</p>
          </div>
        </li>
        <li class="pp-pace__item">
          <span class="pp-pace__num ly-num">轮次内</span>
          <div class="pp-pace__body">
            <h3>小版本修整</h3>
            <p>轮次打到一半，遇到改期、临时换场地或者译名调整，用小版本修一次，编号往后顺延。</p>
          </div>
        </li>
      </ol>

      <div class="pp-pace__links">
        <a class="pp-link" href="/press/">最近的版本公告与阵容观察<span aria-hidden="true">→</span></a>
        <a class="pp-link" href="/history/">十二个版本是怎么走过来的<span aria-hidden="true">→</span></a>
      </div>
    </div>
  </section>

  <section class="pp-final">
    <img class="pp-final__img" src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="夜场球场俯视灯光，草坪条纹与观众席光点，高对比低饱和" loading="lazy" decoding="async">
    <div class="pp-final__scrim" aria-hidden="true"></div>
    <div class="ly-shell pp-final__inner">
      <h2 class="pp-final__title">今晚就从这儿开始</h2>
      <p class="pp-final__text">回到首页挑今天要看的场次，或者直接找客服说说你遇到的情况。工作日 9:00–18:00 有人守着，平均 4 小时内回。</p>
      <div class="pp-final__actions">
        <a class="ly-btn ly-btn--primary" href="/">回看台首页</a>
        <a class="ly-btn ly-btn--ghost" href="/contact/">联系客服</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  background: var(--ly-deep);
  color: var(--ly-paper);
  font-family: var(--ly-font-body);
  overflow-x: hidden;
}

.page-products .pp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--ly-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ly-rock);
}

.page-products .pp-kicker::before {
  content: "";
  width: 22px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(100deg, var(--ly-cyan) 0 55%, var(--ly-signal) 55% 100%);
  transform: skewX(-18deg);
}

/* ---------- 首屏 ---------- */
.page-products .pp-hero {
  position: relative;
  padding: calc(var(--ly-header-h) + 44px) 0 56px;
  background:
    radial-gradient(820px 400px at 92% -12%, var(--ly-cyan-16), transparent 68%),
    radial-gradient(560px 360px at -6% 108%, rgba(255, 107, 44, 0.12), transparent 70%),
    var(--ly-deep);
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-hero__grid {
  display: grid;
  gap: 34px;
}

.page-products .pp-hero__title {
  margin: 0 0 18px;
  font-family: var(--ly-font-display);
  font-weight: 900;
  font-size: clamp(34px, 7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ly-paper);
}

.page-products .pp-hero__lead {
  margin: 0 0 26px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .pp-board {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(165deg, rgba(16, 27, 46, 0.96), rgba(11, 18, 32, 0.98));
  box-shadow: 0 30px 60px -40px rgba(53, 224, 208, 0.5);
}

.page-products .pp-board__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--ly-line);
  font-family: var(--ly-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ly-cyan);
}

.page-products .pp-board__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ly-cyan);
  box-shadow: 0 0 0 4px var(--ly-cyan-16);
}

.page-products .pp-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-products .pp-board__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--ly-r-sm);
  background: rgba(7, 11, 20, 0.7);
}

.page-products .pp-board__num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ly-paper);
  letter-spacing: 0.01em;
}

.page-products .pp-board__lab {
  font-size: 12px;
  color: var(--ly-rock);
}

.page-products .pp-board__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-moss);
}

/* ---------- 区块通用 ---------- */
.page-products .pp-section {
  padding: 56px 0;
  position: relative;
}

.page-products .pp-head {
  max-width: 62ch;
  margin-bottom: 32px;
}

.page-products .pp-head__title {
  margin: 0 0 14px;
  font-family: var(--ly-font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ly-paper);
}

.page-products .pp-head__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

/* ---------- 阶梯终端 ---------- */
.page-products .pp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pp-dev {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(160deg, rgba(16, 27, 46, 0.94), rgba(11, 18, 32, 0.98));
  transition: transform var(--ly-dur) var(--ly-ease),
    border-color var(--ly-dur) var(--ly-ease),
    box-shadow var(--ly-dur) var(--ly-ease);
}

.page-products .pp-dev:hover,
.page-products .pp-dev:focus-within {
  transform: translateY(-4px);
  border-color: var(--ly-cyan-55);
  box-shadow: 0 24px 48px -30px rgba(53, 224, 208, 0.6);
}

.page-products .pp-dev__frame {
  position: relative;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: #060a12;
  overflow: hidden;
}

.page-products .pp-dev__bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #0a1120;
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-dev__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ly-line);
}

.page-products .pp-dev__dot:nth-child(1) { background: var(--ly-signal); opacity: 0.85; }
.page-products .pp-dev__dot:nth-child(2) { background: var(--ly-clay); opacity: 0.75; }
.page-products .pp-dev__dot:nth-child(3) { background: var(--ly-cyan); opacity: 0.85; }

.page-products .pp-dev__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-products .pp-dev__screen img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.06);
}

.page-products .pp-dev__frame--phone {
  width: min(100%, 232px);
  margin: 0 auto;
  aspect-ratio: 9 / 17;
  padding: 12px 8px 14px;
  border-radius: 30px;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #0a1120, #060a12);
}

.page-products .pp-dev__notch {
  align-self: center;
  width: 54px;
  height: 6px;
  border-radius: var(--ly-r-pill);
  background: var(--ly-line);
}

.page-products .pp-dev__frame--phone .pp-dev__screen {
  flex: 1;
  aspect-ratio: auto;
  border-radius: 20px;
  overflow: hidden;
}

.page-products .pp-dev__home {
  align-self: center;
  width: 62px;
  height: 4px;
  border-radius: var(--ly-r-pill);
  background: var(--ly-line);
}

.page-products .pp-dev__frame--lite {
  border-radius: var(--ly-r-sm);
}

.page-products .pp-dev__screen--plain {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 16px 18px;
  background:
    repeating-linear-gradient(180deg, rgba(28, 41, 66, 0.35) 0 1px, transparent 1px 18px),
    linear-gradient(140deg, rgba(53, 224, 208, 0.09), transparent 62%);
}

.page-products .pp-dev__line {
  height: 7px;
  width: 84%;
  border-radius: var(--ly-r-pill);
  background: rgba(140, 154, 171, 0.35);
}

.page-products .pp-dev__line--short { width: 46%; background: var(--ly-cyan-55); }
.page-products .pp-dev__line--mid { width: 66%; }

.page-products .pp-dev__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .pp-dev__title {
  margin: 0;
  font-family: var(--ly-font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ly-paper);
}

.page-products .pp-dev__scene {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

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

.page-products .pp-dev__points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ly-rock);
}

.page-products .pp-dev__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ly-cyan);
  transform: rotate(45deg);
  opacity: 0.8;
}

.page-products .pp-dev__who {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-moss);
  transition: color var(--ly-dur) var(--ly-ease), opacity var(--ly-dur) var(--ly-ease);
}

@media (hover: hover) and (min-width: 900px) {
  .page-products .pp-dev__who { opacity: 0; }
  .page-products .pp-dev:hover .pp-dev__who,
  .page-products .pp-dev:focus-within .pp-dev__who { opacity: 1; color: var(--ly-cyan); }
}

/* ---------- 赛程查询 ---------- */
.page-products .pp-schedule {
  display: grid;
  gap: 28px;
}

.page-products .pp-schedule__panel {
  padding: 22px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: linear-gradient(150deg, rgba(16, 27, 46, 0.9), rgba(7, 11, 20, 0.95));
}

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

.page-products .pp-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.page-products .pp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ly-r-sm);
  border: 1px solid var(--ly-line);
  background: var(--ly-cyan-08);
  font-size: 13px;
  color: var(--ly-cyan);
  transform: skewX(-6deg);
}

.page-products .pp-step__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-paper);
}

.page-products .pp-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-schedule__diagram {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background:
    radial-gradient(420px 260px at 80% 0%, var(--ly-cyan-08), transparent 70%),
    var(--ly-stand);
}

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

.page-products .pp-schedule__caption {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
}

/* ---------- 赛前十分钟 ---------- */
.page-products .pp-lineup {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pp-lineup__media {
  margin: 0;
  border-radius: var(--ly-r-lg);
  overflow: hidden;
  border: 1px solid var(--ly-line);
  background: var(--ly-steel);
}

.page-products .pp-lineup__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.08);
}

.page-products .pp-lineup__figcap {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
  border-top: 1px solid var(--ly-line);
}

.page-products .pp-fields {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.page-products .pp-field {
  padding: 16px 18px;
  border: 1px solid var(--ly-line);
  border-left: 3px solid var(--ly-cyan);
  border-radius: 0 var(--ly-r-md) var(--ly-r-md) 0;
  background: rgba(16, 27, 46, 0.62);
  transition: background var(--ly-dur) var(--ly-ease), border-left-color var(--ly-dur) var(--ly-ease);
}

.page-products .pp-field:hover {
  background: rgba(16, 27, 46, 0.95);
  border-left-color: var(--ly-signal);
}

.page-products .pp-field__name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-cyan);
}

.page-products .pp-field__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

/* ---------- 版本对照 ---------- */
.page-products .pp-versions {
  display: grid;
  gap: 26px;
  align-items: start;
}

.page-products .pp-versions__table {
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-lg);
  background: rgba(11, 18, 32, 0.9);
  overflow: hidden;
}

.page-products .pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .pp-table th,
.page-products .pp-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-table thead th {
  font-family: var(--ly-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ly-rock);
  background: rgba(7, 11, 20, 0.85);
}

.page-products .pp-table tbody th {
  font-weight: 600;
  color: var(--ly-paper);
}

.page-products .pp-table tbody td {
  color: var(--ly-body-soft);
  white-space: nowrap;
}

.page-products .pp-table tbody tr {
  transition: background var(--ly-dur) var(--ly-ease);
}

.page-products .pp-table tbody tr:hover,
.page-products .pp-table tbody tr:focus-within {
  background: var(--ly-cyan-08);
}

.page-products .pp-table tbody tr:hover td,
.page-products .pp-table tbody tr:hover th {
  color: var(--ly-paper);
}

.page-products .pp-table tbody tr.is-shift th:first-child {
  box-shadow: inset 3px 0 0 var(--ly-signal);
  color: var(--ly-signal);
}

.page-products .pp-table tbody tr:last-child th,
.page-products .pp-table tbody tr:last-child td {
  border-bottom: none;
}

.page-products .pp-versions__note {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.72;
  color: var(--ly-rock);
}

.page-products .pp-versions__media {
  margin: 0;
  border-radius: var(--ly-r-lg);
  overflow: hidden;
  border: 1px solid var(--ly-line);
  background: var(--ly-steel);
}

.page-products .pp-versions__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.6) contrast(1.1);
}

.page-products .pp-versions__media figcaption {
  padding: 13px 16px;
  border-top: 1px solid var(--ly-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ly-rock);
}

/* ---------- 订阅 ---------- */
.page-products .pp-sub {
  background:
    radial-gradient(600px 320px at 8% 0%, rgba(255, 107, 44, 0.1), transparent 70%),
    var(--ly-stand);
  border-top: 1px solid var(--ly-line);
  border-bottom: 1px solid var(--ly-line);
}

.page-products .pp-sub__grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

.page-products .pp-sub__meta {
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ly-rock);
}

.page-products .pp-sub__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .pp-sub__item {
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: rgba(16, 27, 46, 0.85);
  transition: border-color var(--ly-dur) var(--ly-ease);
}

.page-products .pp-sub__item[open] {
  border-color: var(--ly-cyan-55);
}

.page-products .pp-sub__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--ly-paper);
}

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

.page-products .pp-sub__sum:focus-visible {
  outline: 2px solid var(--ly-cyan);
  outline-offset: 2px;
  border-radius: var(--ly-r-md);
}

.page-products .pp-sub__mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.page-products .pp-sub__mark::before,
.page-products .pp-sub__mark::after {
  content: "";
  position: absolute;
  background: var(--ly-cyan);
  border-radius: 2px;
  transition: transform var(--ly-dur) var(--ly-ease), opacity var(--ly-dur) var(--ly-ease);
}

.page-products .pp-sub__mark::before {
  left: 0; top: 6px; width: 14px; height: 2px;
}

.page-products .pp-sub__mark::after {
  left: 6px; top: 0; width: 2px; height: 14px;
}

.page-products .pp-sub__item[open] .pp-sub__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-products .pp-sub__label {
  flex: 1 1 auto;
}

.page-products .pp-sub__tag {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ly-rock);
}

.page-products .pp-sub__item[open] .pp-sub__tag { color: var(--ly-cyan); }

.page-products .pp-sub__body {
  padding: 0 18px 18px 44px;
  border-top: 1px solid var(--ly-line);
  padding-top: 14px;
}

.page-products .pp-sub__body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

.page-products .pp-sub__body p:last-child { margin-bottom: 0; }

/* ---------- 版本节奏 ---------- */
.page-products .pp-pace {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-products .pp-pace__item {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-md);
  background: rgba(11, 18, 32, 0.78);
  transition: border-color var(--ly-dur) var(--ly-ease), transform var(--ly-dur) var(--ly-ease);
}

.page-products .pp-pace__item:hover {
  border-color: var(--ly-cyan-55);
  transform: translateY(-3px);
}

.page-products .pp-pace__num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ly-cyan);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

.page-products .pp-pace__body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ly-paper);
}

.page-products .pp-pace__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ly-body-soft);
}

.page-products .pp-pace__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .pp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--ly-line);
  border-radius: var(--ly-r-pill);
  background: rgba(16, 27, 46, 0.7);
  font-size: 14px;
  color: var(--ly-paper);
  text-decoration: none;
  transition: border-color var(--ly-dur) var(--ly-ease),
    color var(--ly-dur) var(--ly-ease),
    background var(--ly-dur) var(--ly-ease);
}

.page-products .pp-link:hover,
.page-products .pp-link:focus-visible {
  border-color: var(--ly-cyan);
  color: var(--ly-cyan);
  background: var(--ly-cyan-08);
  outline: none;
}

.page-products .pp-link span {
  transition: transform var(--ly-dur) var(--ly-ease);
}

.page-products .pp-link:hover span { transform: translateX(4px); }

/* ---------- 结尾 ---------- */
.page-products .pp-final {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ly-line);
}

.page-products .pp-final__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15);
  opacity: 0.42;
}

.page-products .pp-final__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.72), rgba(7, 11, 20, 0.95) 72%),
    radial-gradient(520px 300px at 78% 20%, rgba(53, 224, 208, 0.18), transparent 70%);
}

.page-products .pp-final__inner {
  position: relative;
  padding: 68px 0 76px;
}

.page-products .pp-final__title {
  margin: 0 0 14px;
  font-family: var(--ly-font-display);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ly-paper);
}

.page-products .pp-final__text {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ly-body-soft);
}

.page-products .pp-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pp-hero__title {
    transform: skewX(-3deg);
    transform-origin: 0 50%;
  }

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

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

  .page-products .pp-sub__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 36px;
  }

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

@media (min-width: 900px) {
  .page-products .pp-hero {
    padding: calc(var(--ly-header-h) + 62px) 0 72px;
  }

  .page-products .pp-hero__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    gap: 48px;
    align-items: center;
  }

  .page-products .pp-section {
    padding: 76px 0;
  }

  .page-products .pp-stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    padding-bottom: 48px;
  }

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

  .page-products .pp-stage__item--apple {
    grid-column: 2 / 7;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--ly-stack));
  }

  .page-products .pp-stage__item--lite {
    grid-column: 8 / 13;
    position: relative;
    z-index: 3;
    margin-top: 76px;
  }

  .page-products .pp-dev__frame--desk .pp-dev__screen {
    aspect-ratio: 21 / 9;
  }

  .page-products .pp-lineup {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 44px;
  }

  .page-products .pp-lineup__media {
    margin-top: 34px;
    transform: translateX(-6px);
  }

  .page-products .pp-versions__media {
    margin-top: 42px;
    transform: translateX(10px);
  }

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

  .page-products .pp-pace__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .page-products .pp-final__inner {
    padding: 88px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-dev,
  .page-products .pp-pace__item,
  .page-products .pp-link,
  .page-products .pp-field {
    transition: none;
  }

  .page-products .pp-dev:hover,
  .page-products .pp-pace__item:hover {
    transform: none;
  }
}