.page-products {
  --prod-rule: rgba(242, 247, 244, .12);
  --prod-panel: rgba(255, 255, 255, .06);
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-products .shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-products .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--pitch-bright);
  text-transform: uppercase;
}

.page-products .eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--whistle);
  border-radius: 2px;
}

/* ---------- HERO ---------- */

.page-products .prod-hero {
  position: relative;
  isolation: isolate;
  padding: 48px 0 56px;
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(860px 420px at 82% 4%, rgba(18, 160, 107, .24), transparent 66%),
    radial-gradient(620px 340px at 6% 96%, rgba(255, 107, 53, .16), transparent 70%),
    linear-gradient(180deg, rgba(20, 82, 74, .38), transparent 60%);
  pointer-events: none;
  z-index: -2;
}

.page-products .prod-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      rgba(18, 160, 107, .055) 0 54px,
      transparent 54px 108px);
  pointer-events: none;
  z-index: -1;
}

.page-products .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 26px;
}

.page-products .breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
}

.page-products .breadcrumb a:hover {
  color: var(--pitch-bright);
}

.page-products .prod-hero h1 {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 16ch;
}

.page-products .hero-lead {
  margin: 22px 0 0;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-dim);
}

.page-products .hero-coords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin-top: 34px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
}

.page-products .hero-coords .coord-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(242, 247, 244, .10);
  padding-bottom: 8px;
}

.page-products .hero-coords .coord-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-mute);
}

.page-products .hero-coords .coord-val {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  color: var(--whistle);
  letter-spacing: .02em;
}

/* ---------- CAPABILITY CARDS ---------- */

.page-products .cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 40px;
}

.page-products .cap-card {
  position: relative;
  padding: 24px 22px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(158deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
  overflow: hidden;
  transition: transform .32s ease, border-color .32s ease, background .32s ease;
}

.page-products .cap-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--pitch-bright);
}

.page-products .cap-card.is-score::before { background: var(--whistle); }
.page-products .cap-card.is-pass::before { background: var(--pitch-bright); }
.page-products .cap-card.is-screen::before { background: var(--data-blue); }
.page-products .cap-card.is-stop::before { background: var(--stoppage); }

.page-products .cap-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: linear-gradient(158deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
}

.page-products .cap-coord {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-mute);
}

.page-products .cap-num {
  margin: 14px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-num);
  font-weight: 700;
  line-height: .9;
}

.page-products .cap-num span {
  font-size: 62px;
  color: var(--ink);
}

.page-products .cap-num em {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-dim);
}

.page-products .cap-card.is-score .cap-num span { color: var(--whistle); }
.page-products .cap-card.is-stop .cap-num span { color: var(--stoppage); }
.page-products .cap-card.is-screen .cap-num span { color: var(--pitch-bright); }

.page-products .cap-title {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

.page-products .cap-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .cap-use {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(242, 247, 244, .12);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- TOC ---------- */

.page-products .prod-toc {
  position: relative;
  z-index: 2;
  padding: 4px 0 12px;
}

.page-products .prod-toc-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  border-top: 1px solid var(--prod-rule);
  border-bottom: 1px solid var(--prod-rule);
  scrollbar-width: thin;
}

.page-products .prod-toc-link {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: 14px;
  text-decoration: none;
  transition: color .24s ease, border-color .24s ease, background .24s ease;
}

.page-products .prod-toc-link:hover,
.page-products .prod-toc-link[aria-current="true"] {
  color: var(--night);
  background: var(--pitch-bright);
  border-color: var(--pitch-bright);
}

/* ---------- MODULES ---------- */

.page-products .module {
  position: relative;
  padding: 64px 0;
}

.page-products .module.is-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 82, 74, .16), transparent 78%);
  pointer-events: none;
}

.page-products .module-head {
  position: relative;
  max-width: 72ch;
  margin-bottom: 34px;
}

.page-products .coord-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--pitch-bright);
}

.page-products .module-title {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.page-products .module-sub {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-dim);
}

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

.page-products .split-body p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink);
}

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

.page-products .fact-list li {
  position: relative;
  padding: 12px 16px 12px 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .fact-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pitch-bright);
}

.page-products .fact-list b {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  margin-right: 8px;
}

.page-products .img-frame {
  margin: 36px 0 0;
}

/* score panel */

.page-products .score-panel {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(11, 110, 79, .30), rgba(10, 20, 24, .82));
  box-shadow: var(--shadow-soft);
}

.page-products .score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.page-products .score-head .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--night);
  background: var(--whistle);
}

.page-products .score-head .tag.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--night);
}

.page-products .score-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 6px 0 20px;
}

.page-products .score-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 84px;
}

.page-products .score-team {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--ink-dim);
}

.page-products .score-val {
  font-family: var(--font-num);
  font-size: 84px;
  font-weight: 700;
  line-height: .9;
  color: var(--ink);
}

.page-products .score-divider {
  font-family: var(--font-num);
  font-size: 40px;
  color: var(--ink-mute);
}

.page-products .score-bars {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .score-bars li {
  display: grid;
  grid-template-columns: 46px 1fr 72px;
  align-items: center;
  gap: 12px;
}

.page-products .bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.page-products .bar-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(242, 247, 244, .12);
  overflow: hidden;
}

.page-products .bar-track i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pitch-deep), var(--pitch-bright));
}

.page-products .bar-val {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--ink-dim);
  text-align: right;
}

/* pitch chart */

.page-products .pitch-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(20, 82, 74, .42), rgba(10, 20, 24, .9));
  padding: 6px;
}

.page-products .pc-bg {
  fill: rgba(10, 20, 24, .55);
  stroke: rgba(242, 247, 244, .10);
}

.page-products .pc-grid line,
.page-products .pc-grid circle {
  fill: none;
  stroke: rgba(242, 247, 244, .12);
  stroke-width: 1.4;
  stroke-dasharray: 6 8;
}

.page-products .pc-zone {
  color: var(--pitch-bright);
  cursor: pointer;
  outline: none;
}

.page-products .pc-zone[data-zone="back"] { color: var(--data-blue); }
.page-products .pc-zone[data-zone="mid"] { color: var(--pitch-deep); }
.page-products .pc-zone[data-zone="front"] { color: var(--pitch-bright); }
.page-products .pc-zone[data-zone="wing"] { color: var(--loess); }
.page-products .pc-zone[data-zone="edge"] { color: var(--whistle); }

.page-products .pc-zone rect {
  fill: currentColor;
  fill-opacity: .16;
  stroke: currentColor;
  stroke-opacity: .42;
  stroke-width: 1.6;
  transition: fill-opacity .26s ease, stroke-opacity .26s ease;
}

.page-products .pc-zone text {
  fill: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  opacity: .86;
  pointer-events: none;
}

.page-products .pc-zone:hover rect,
.page-products .pc-zone:focus-visible rect {
  fill-opacity: .42;
  stroke-opacity: 1;
}

.page-products .pass-legend {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-products .pass-legend li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}

.page-products .pass-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pitch-bright);
}

.page-products .pass-legend .is-blue::before { background: var(--data-blue); }
.page-products .pass-legend .is-pitch::before { background: var(--pitch-deep); }
.page-products .pass-legend .is-bright::before { background: var(--pitch-bright); }
.page-products .pass-legend .is-loess::before { background: var(--loess); }
.page-products .pass-legend .is-whistle::before { background: var(--whistle); }

.page-products .pass-legend b {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  margin-right: 8px;
}

/* screen stack */

.page-products .screen-stack {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(160deg, rgba(27, 79, 114, .34), rgba(10, 20, 24, .88));
}

.page-products .screen-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 247, 244, .14);
  background: rgba(242, 247, 244, .07);
  transition: transform .28s ease, background .28s ease;
}

.page-products .screen-item:hover {
  transform: translateX(4px);
  background: rgba(242, 247, 244, .13);
}

.page-products .screen-cap {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

.page-products .screen-bar {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
  justify-content: flex-end;
  height: 34px;
}

.page-products .screen-bar i {
  display: block;
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: var(--pitch-bright);
}

.page-products .screen-bar i:nth-child(1) { height: 40%; }
.page-products .screen-bar i:nth-child(2) { height: 68%; }
.page-products .screen-bar i:nth-child(3) { height: 100%; background: var(--whistle); }

.page-products .screen-item.is-projector .screen-bar i { background: var(--data-blue); }
.page-products .screen-item.is-projector .screen-bar i:nth-child(2) { background: var(--whistle); }
.page-products .screen-item.is-tablet .screen-bar i { background: var(--loess); }

/* stoppage timeline */

.page-products .stoppage-panel {
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(192, 57, 43, .38);
  background: linear-gradient(160deg, rgba(192, 57, 43, .18), rgba(10, 20, 24, .9));
}

.page-products .stoppage-head {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-dim);
}

.page-products .stoppage-track {
  position: relative;
  margin: 0;
  padding: 14px 0 4px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 2px solid rgba(242, 247, 244, .16);
}

.page-products .stoppage-tick {
  position: relative;
  padding-top: 16px;
}

.page-products .stoppage-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 2px;
  height: 10px;
  background: var(--pitch-bright);
  opacity: .55;
}

.page-products .stoppage-tick .min {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--ink-mute);
}

.page-products .stoppage-tick.is-lit::before {
  background: var(--whistle);
  height: 15px;
  top: -15px;
  opacity: 1;
}

.page-products .stoppage-tick.is-lit .min { color: var(--whistle); }

.page-products .stoppage-tick.is-stoppage::before {
  background: var(--stoppage);
  height: 22px;
  top: -22px;
  width: 3px;
  opacity: 1;
}

.page-products .stoppage-tick.is-stoppage .min {
  color: var(--stoppage);
  font-weight: 700;
}

.page-products .stoppage-legend {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.page-products .stoppage-legend li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}

.page-products .stoppage-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pitch-bright);
}

.page-products .stoppage-legend .is-whistle::before { background: var(--whistle); }
.page-products .stoppage-legend .is-red::before { background: var(--stoppage); }

/* ---------- API ---------- */

.page-products .api-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.page-products .code-card {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 79, 114, .7);
  background: linear-gradient(170deg, rgba(27, 79, 114, .34), rgba(10, 20, 24, .92));
}

.page-products .code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(242, 247, 244, .16);
}

.page-products .code-lang {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--night);
  background: var(--pitch-bright);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.page-products .code-note {
  font-size: 13px;
  color: var(--ink-dim);
}

.page-products .code-keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .code-keys li {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(242, 247, 244, .08);
}

.page-products .code-keys li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .code-keys .k {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pitch-bright);
  word-break: break-word;
}

.page-products .code-keys .v {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.page-products .api-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .flow-step {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--prod-panel);
}

.page-products .flow-idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--whistle);
}

.page-products .flow-step h3 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
}

.page-products .flow-step p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- RELEASE ---------- */

.page-products .release-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .release-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  transition: border-color .28s ease, transform .28s ease;
}

.page-products .release-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.page-products .rel-ver {
  font-family: var(--font-num);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--pitch-bright);
}

.page-products .release-card h3 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
}

.page-products .release-card p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .rhythm {
  margin-top: 34px;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(150deg, rgba(232, 217, 181, .10), rgba(10, 20, 24, .82));
}

.page-products .rhythm-title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
}

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

.page-products .rhythm-list li {
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 3px solid var(--pitch-bright);
}

.page-products .rhythm-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--whistle);
}

.page-products .rhythm-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- SCENES ---------- */

.page-products .scene-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .scene-card {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
}

.page-products .scene-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: rgba(18, 160, 107, .18);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--pitch-bright);
}

.page-products .scene-card h3 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.35;
}

.page-products .scene-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-dim);
}

.page-products .scene-line {
  padding-top: 12px;
  border-top: 1px dashed rgba(242, 247, 244, .14);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--whistle) !important;
}

/* ---------- CTA ---------- */

.page-products .prod-cta {
  padding: 20px 0 72px;
}

.page-products .cta-band {
  display: grid;
  gap: 20px;
  padding: 30px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(560px 240px at 88% 10%, rgba(255, 107, 53, .22), transparent 70%),
    linear-gradient(150deg, rgba(11, 110, 79, .40), rgba(10, 20, 24, .9));
}

.page-products .cta-text h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
}

.page-products .cta-text p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-dim);
  max-width: 52ch;
}

.page-products .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .24s ease, background .24s ease, color .24s ease;
}

.page-products .btn-whistle {
  background: var(--whistle);
  color: var(--night);
  box-shadow: var(--shadow-whistle);
}

.page-products .btn-whistle:hover {
  transform: translateY(-3px);
}

.page-products .btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--glass);
}

.page-products .btn-ghost:hover {
  transform: translateY(-3px);
  background: rgba(18, 160, 107, .22);
}

.page-products .cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 22px 0 0;
  font-size: 14px;
}

.page-products .cta-links a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 179, 172, .4);
  padding-bottom: 2px;
}

.page-products .cta-links a:hover {
  color: var(--pitch-bright);
  border-color: var(--pitch-bright);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 560px) {
  .page-products .prod-hero {
    padding: 34px 0 44px;
  }

  .page-products .hero-coords {
    grid-template-columns: 1fr;
  }

  .page-products .cap-num span {
    font-size: 52px;
  }

  .page-products .score-val {
    font-size: 64px;
  }

  .page-products .stoppage-track {
    grid-template-columns: repeat(12, 40px);
    overflow-x: auto;
    padding-bottom: 12px;
  }
}

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

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

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

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

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

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

  .page-products .cta-band {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    padding: 38px 34px;
  }

  .page-products .cta-actions {
    justify-content: flex-end;
  }

  .page-products .rhythm-list li {
    grid-template-columns: 150px 1fr;
    align-items: baseline;
    gap: 18px;
  }
}

@media (min-width: 1080px) {
  .page-products .prod-hero {
    padding: 56px 0 72px;
  }

  .page-products .hero-coords {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 880px;
  }

  .page-products .hero-coords .coord-row {
    border-bottom: 0;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .page-products .cap-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-products .cap-card:nth-child(1) { grid-column: span 7; }
  .page-products .cap-card:nth-child(2) { grid-column: span 5; }
  .page-products .cap-card:nth-child(3) { grid-column: span 5; }
  .page-products .cap-card:nth-child(4) { grid-column: span 7; }

  .page-products .split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 44px;
  }

  .page-products .split.is-flip .split-visual {
    order: 2;
  }

  .page-products .split.is-flip .split-body {
    order: 1;
  }

  .page-products .img-frame {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cap-card,
  .page-products .screen-item,
  .page-products .release-card,
  .page-products .btn,
  .page-products .pc-zone rect {
    transition: none;
  }

  .page-products .cap-card:hover,
  .page-products .release-card:hover,
  .page-products .btn:hover,
  .page-products .screen-item:hover {
    transform: none;
  }
}
<<<END>>>

等等，这个结尾标记看起来不太对——我需要确认一下正确的结尾格式。原文好像把这两个标记连在一起了，但通常应该是各自单独一行。

我重新整理一下输出末尾：先输出 `` 和完整的 CSS 内容，最后不要加多余的闭合标记，因为协议里并没有要求。

另外我注意到 CSS 里有一处可能需要再确认：`.page-products .img-frame { margin: 36px 0 0; }` 这里用简写 `margin` 会重置宽度方向的边距。如果图片容器的左右边距本来由父级控制，那这样写是安全的；但如果希望保留左右内容宽度对齐，最好也显式写上 `margin-left` 和 `margin-right`，或者用 `margin-top` 单独控制。

不过既然 `.shell` 已经提供了左右内边距，`.img-frame` 作为块级元素默认宽度就是 100%，把左右 margin 归零没问题，不会造成溢出。

还有一处需要确认：`.page-products .score-head .tag.is-live::before` 这里用的是 `background: var(--night)`，那应该是深色底上放一个深色圆点？实际 `.tag.is-live` 本身背景是哨声橙，圆点用深色 `--night` 是对的，能看清。

再检查一下 hero 区域的 `z-index` 层级：`.page-products .prod-hero::before` 设了 `z-index: -2`，`::after` 设了 `-1`，而 `.shell` 设了 `position: relative; z-index: 1`。由于 `.prod-hero` 有 `isolation: isolate`，负 z-index 的伪元素不会跑到 `main` 之外，隔离栈会限制它们的作用范围。这样背景层在内容层之下是正确的。

还有 `.page-products .prod-toc` 设了 `position: relative; z-index: 2`，这个其实没必要，但无害，保持原样。

图例的 `grid-template-columns` 在 720px 以上从单列变成两列，在 1080px 以上没有改回单列，这没问题，两列在宽屏上更合适。

我再看一下 `.page-products .stoppage-track` 在移动端的处理：`grid-template-columns: repeat(12, 40px)` 加上 `overflow-x: auto`，会产生横向滚动条，能避免溢出，符合要求。

最后确认一下输出中所有标记都只出现一次：`` 一次，`` 一次，没有多余的 `<<<END>>>` 标记。修正后即可。
<main id="main-content" class="page-products">

  <section class="prod-hero" data-reveal>
    <div class="shell">
      <nav class="breadcrumb" aria-label="页面位置">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span>产品总览</span>
      </nav>

      <p class="eyebrow">PRODUCT BOARD · 四块数据板</p>
      <h1>比赛怎么走，四块板子接住了</h1>
      <p class="hero-lead">
        加加体育把一场比赛拆成四种可以直接用的东西：中场哨响就亮出来的比分，按五个区域拆开的传球成功率，
        投到酒吧和场馆大屏上的中文画面，还有补时阶段逐分钟推进的时间轴。你可以挑一块看，
        也可以把整套数据接到自己的系统里。
      </p>

      <div class="hero-coords">
        <div class="coord-row"><span class="coord-key">覆盖联赛</span><span class="coord-val">42</span></div>
        <div class="coord-row"><span class="coord-key">每赛季赛事</span><span class="coord-val">18000 场</span></div>
        <div class="coord-row"><span class="coord-key">半场同步用时</span><span class="coord-val">15 秒</span></div>
        <div class="coord-row"><span class="coord-key">半场比分准确率</span><span class="coord-val">99.6%</span></div>
      </div>

      <div class="cap-grid">
        <article class="cap-card is-score">
          <span class="cap-coord">01 / 半场比分</span>
          <p class="cap-num"><span>15</span><em>秒</em></p>
          <h2 class="cap-title">中场休息同步完成</h2>
          <p class="cap-text">比分、控球和场面走势落在同一个主客场表现区块里，不用在两处之间来回翻。</p>
          <p class="cap-use">追即时比分的球迷 · 写战报的编辑</p>
        </article>

        <article class="cap-card is-pass">
          <span class="cap-coord">02 / 传球成功率</span>
          <p class="cap-num"><span>5</span><em>区域</em></p>
          <h2 class="cap-title">按球场位置分开数</h2>
          <p class="cap-text">前场、中场、后场、边路、禁区前沿各自算出成功率，而不是给一个笼统的百分数。</p>
          <p class="cap-use">战术复盘栏目 · 数据类产品团队</p>
        </article>

        <article class="cap-card is-screen">
          <span class="cap-coord">03 / 大屏看球中文版</span>
          <p class="cap-num"><span>3</span><em>类屏幕</em></p>
          <h2 class="cap-title">一套画面投到哪都成</h2>
          <p class="cap-text">4K 电视、投影设备和横屏平板共用同一套中文界面，字号三档可调。</p>
          <p class="cap-use">酒吧与场馆运营 · 家庭客厅</p>
        </article>

        <article class="cap-card is-stop">
          <span class="cap-coord">04 / 伤停补时状态</span>
          <p class="cap-num"><span>12</span><em>个节点</em></p>
          <h2 class="cap-title">最后几分钟逐分钟走</h2>
          <p class="cap-text">补时信息放在详情页底部，一格一格推进，末端节点用补时红标出来。</p>
          <p class="cap-use">压着点看结局的人 · 即时推送栏目</p>
        </article>
      </div>
    </div>
  </section>

  <nav class="prod-toc" aria-label="模块目录" data-reveal>
    <div class="shell">
      <ol class="prod-toc-list">
        <li><a class="prod-toc-link" href="#panel-score" data-toc-link>半场比分与主客场表现</a></li>
        <li><a class="prod-toc-link" href="#panel-pass" data-toc-link>五区传球成功率</a></li>
        <li><a class="prod-toc-link" href="#panel-screen" data-toc-link>大屏看球中文版</a></li>
        <li><a class="prod-toc-link" href="#panel-stoppage" data-toc-link>伤停补时时间轴</a></li>
        <li><a class="prod-toc-link" href="#panel-api" data-toc-link>接口对接</a></li>
        <li><a class="prod-toc-link" href="#panel-release" data-toc-link>版本与更新</a></li>
        <li><a class="prod-toc-link" href="#panel-scene" data-toc-link>谁在用</a></li>
      </ol>
    </div>
  </nav>

  <section class="module" id="panel-score" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">01</span>
        <h2 class="module-title">中场哨一响，比分先落在主客场表现区块里</h2>
        <p class="module-sub">半场比分入口已经并进主客场表现区块。进去之后，比分、控球和场面走势是同一屏里的三件事。</p>
      </header>

      <div class="split">
        <div class="split-visual">
          <div class="score-panel">
            <div class="score-head">
              <span class="coord-tag">半场 45'+2</span>
              <span class="tag is-live">刚刚更新</span>
            </div>
            <div class="score-main">
              <div class="score-side">
                <span class="score-team">主队</span>
                <span class="score-val">1</span>
              </div>
              <span class="score-divider" aria-hidden="true">:</span>
              <div class="score-side">
                <span class="score-team">客队</span>
                <span class="score-val">0</span>
              </div>
            </div>
            <ul class="score-bars">
              <li>
                <span class="bar-label">控球</span>
                <span class="bar-track"><i style="width:58%"></i></span>
                <span class="bar-val">58 / 42</span>
              </li>
              <li>
                <span class="bar-label">射门</span>
                <span class="bar-track"><i style="width:64%"></i></span>
                <span class="bar-val">7 / 4</span>
              </li>
              <li>
                <span class="bar-label">角球</span>
                <span class="bar-track"><i style="width:50%"></i></span>
                <span class="bar-val">3 / 3</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="split-body">
          <p>
            过去翻比赛，你得先在一个地方看数字，再去另一个地方看数据。现在这两步合成一步：
            中场休息后 15 秒内，半场比分连同控球比例、射门与角球的对比一起刷新，
            主队和客队的表现并排摆着，谁在压着打一眼就看得出来。
          </p>
          <ul class="fact-list">
            <li><b>同步时间</b>比赛进入中场休息后 15 秒内完成更新。</li>
            <li><b>准确程度</b>近三个赛季，半场比分的更新准确率保持在 99.6% 以上。</li>
            <li><b>联动关系</b>区块里的比分与传球成功率互相点亮，悬停一头，另一头跟着高亮。</li>
            <li><b>适用人群</b>想在手机上三秒确认结果的人，和赶着发中场战报的编辑都能直接用。</li>
          </ul>
        </div>
      </div>

      <figure class="img-frame ratio-4-3 is-contained">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async"
             alt="半场比分数据卡片界面示意，主客队比分与控球、射门、角球对比同屏排列">
        <figcaption class="img-cap">半场比分与主客场表现同屏呈现，中场休息后十几秒内完成刷新</figcaption>
      </figure>
    </div>
  </section>

  <section class="module is-alt" id="panel-pass" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">02</span>
        <h2 class="module-title">传球成功率看的不是一个大数，是它发生在哪儿</h2>
        <p class="module-sub">一次传球从中卫脚下出去和从边锋脚下出去，意义完全不同。加加体育的传球成功率按五个区域分别统计。</p>
      </header>

      <div class="split is-flip">
        <div class="split-visual">
          <svg class="pitch-chart" viewBox="0 0 660 320" role="img"
               aria-label="传球成功率五个统计区域的划分示意，依次为后场、中场、前场、边路与禁区前沿">
            <rect class="pc-bg" x="2" y="2" width="656" height="316" rx="16"/>
            <g class="pc-grid">
              <line x1="330" y1="2" x2="330" y2="318"/>
              <circle cx="330" cy="160" r="52"/>
            </g>
            <g class="pc-zones">
              <g class="pc-zone" data-zone="back" tabindex="0">
                <rect x="18" y="18" width="176" height="284" rx="12"/>
                <text x="106" y="168">后场</text>
              </g>
              <g class="pc-zone" data-zone="mid" tabindex="0">
                <rect x="202" y="18" width="222" height="284" rx="12"/>
                <text x="313" y="168">中场</text>
              </g>
              <g class="pc-zone" data-zone="front" tabindex="0">
                <rect x="432" y="18" width="210" height="284" rx="12"/>
                <text x="537" y="168">前场</text>
              </g>
              <g class="pc-zone" data-zone="wing" tabindex="0">
                <rect x="18" y="18" width="624" height="58" rx="12"/>
                <text x="330" y="54">边路</text>
              </g>
              <g class="pc-zone" data-zone="edge" tabindex="0">
                <rect x="452" y="112" width="176" height="96" rx="12"/>
                <text x="540" y="166">禁区前沿</text>
              </g>
            </g>
          </svg>

          <ul class="pass-legend">
            <li class="is-blue"><b>后场</b>由守转攻的第一脚出球</li>
            <li class="is-pitch"><b>中场</b>节奏控制与向前输送</li>
            <li class="is-bright"><b>前场</b>把球留在危险位置的能力</li>
            <li class="is-loess"><b>边路</b>两翼推进与套上的效率</li>
            <li class="is-whistle"><b>禁区前沿</b>最后一传的把握</li>
          </ul>
        </div>

        <div class="split-body">
          <p>
            五个区域拆开之后，同一支球队能读出五种结论。中场传球成功率漂亮但禁区前沿掉得厉害，
            说明球能推上去、最后一脚不稳；边路数据平平而后场偏高，多半是踢得稳但不肯冒险。
            这类判断，单看一个总数是看不出来的。
          </p>
          <ul class="fact-list">
            <li><b>与比分联动</b>半场结束后，区块里的比分与五区数据同步高亮，对照着看攻守两端。</li>
            <li><b>适合场景</b>赛后复盘栏目、球队数据看板、体育类产品的战术模块。</li>
            <li><b>看数习惯</b>把五个区域横着排一遍，比盯着一个百分数看更省时间。</li>
            <li><b>取用方式</b>页面直接可读，也可以走接口把整组区域数据取回去自己渲染。</li>
          </ul>
        </div>
      </div>

      <figure class="img-frame ratio-16-9">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" loading="lazy" decoding="async"
             alt="球场俯视图被划分为后场、中场、前场、边路与禁区前沿五个区域，每个区域标注对应的传球成功率">
        <figcaption class="img-cap">五个区域各自统计，同一场比赛能拆出五种不同读法</figcaption>
      </figure>
    </div>
  </section>

  <section class="module" id="panel-screen" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">03</span>
        <h2 class="module-title">一块屏投出去，站在门口的人也看得清</h2>
        <p class="module-sub">大屏看球中文版当前版本 2.6，一套中文界面同时喂给 4K 电视、投影设备和横屏平板。</p>
      </header>

      <div class="split">
        <div class="split-visual">
          <div class="screen-stack">
            <div class="screen-item is-tv">
              <span class="screen-cap">4K 电视</span>
              <span class="screen-bar"><i></i><i></i><i></i></span>
            </div>
            <div class="screen-item is-projector">
              <span class="screen-cap">投影设备</span>
              <span class="screen-bar"><i></i><i></i></span>
            </div>
            <div class="screen-item is-tablet">
              <span class="screen-cap">横屏平板</span>
              <span class="screen-bar"><i></i></span>
            </div>
          </div>
        </div>

        <div class="split-body">
          <p>
            酒吧和场馆的屏幕大小差得远，画面却不用各做一套。中文版按屏幕比例自适应，
            投到大厅的 4K 电视上是满屏，转到包厢的平板上也不会被裁掉关键数字。
            字号分三档，站吧台后面能调到大号，坐沙发上看调回中号就够。
          </p>
          <ul class="fact-list">
            <li><b>连续播放</b>整场比赛不间断，中间不打断、不跳回首页。</li>
            <li><b>字号三档</b>按观看距离切换，比分始终是画面上最大的那组数字。</li>
            <li><b>典型场合</b>酒吧、场馆大厅、球迷聚会空间，以及家里的客厅电视。</li>
            <li><b>开屏方式</b>沿用原有路径进入，内容随比赛日更新。</li>
          </ul>
        </div>
      </div>

      <figure class="img-frame ratio-16-9">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" loading="lazy" decoding="async"
             alt="电视、投影与横屏平板三块屏幕并排显示同一套中文赛事数据界面">
        <figcaption class="img-cap">一套中文界面适配三类屏幕，场地大小不同也不用重做画面</figcaption>
      </figure>
    </div>
  </section>

  <section class="module is-alt" id="panel-stoppage" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">04</span>
        <h2 class="module-title">补时的每一分钟，都在屏幕底下往前走</h2>
        <p class="module-sub">体育赛事伤停补时状态固定在详情页底部，做成一条逐分钟推进的时间轴，一次补时最多记录 12 个关键节点。</p>
      </header>

      <div class="split is-flip">
        <div class="split-visual">
          <div class="stoppage-panel">
            <p class="stoppage-head">补时节点 · 最多 12 格</p>
            <ol class="stoppage-track">
              <li class="stoppage-tick"><span class="min">1'</span></li>
              <li class="stoppage-tick"><span class="min">2'</span></li>
              <li class="stoppage-tick is-lit"><span class="min">3'</span></li>
              <li class="stoppage-tick"><span class="min">4'</span></li>
              <li class="stoppage-tick"><span class="min">5'</span></li>
              <li class="stoppage-tick is-lit"><span class="min">6'</span></li>
              <li class="stoppage-tick"><span class="min">7'</span></li>
              <li class="stoppage-tick"><span class="min">8'</span></li>
              <li class="stoppage-tick is-lit"><span class="min">9'</span></li>
              <li class="stoppage-tick"><span class="min">10'</span></li>
              <li class="stoppage-tick"><span class="min">11'</span></li>
              <li class="stoppage-tick is-stoppage"><span class="min">12'</span></li>
            </ol>
            <ul class="stoppage-legend">
              <li class="is-pitch">普通时刻</li>
              <li class="is-whistle">关键节点</li>
              <li class="is-red">末端收官</li>
            </ul>
          </div>
        </div>

        <div class="split-body">
          <p>
            比赛最后那几分钟，信息密度比前面整场都高。时间轴把补时阶段拆成一格一格的分钟刻度，
            进球、换人、伤停处理、视频回看判定这些事件落在对应分钟上，末端一格转成补时红，
            意味着比赛随时会结束。
          </p>
          <ul class="fact-list">
            <li><b>位置固定</b>详情页底部常驻，往下滚到底就能看到，不用找按钮。</li>
            <li><b>节点数量</b>一次补时最多记录 12 个关键节点，密集时段也不会糊成一团。</li>
            <li><b>颜色含义</b>草皮绿是常规刻度，哨声橙是关键节点，补时红只留给末端收官。</li>
            <li><b>配合使用</b>和半场比分、五区成功率放在同一场详情里，前后对照着读完一场比赛。</li>
          </ul>
        </div>
      </div>

      <figure class="img-frame ratio-21-9">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async"
             alt="逐分钟补时时间轴示意图，刻度按分钟排开，关键节点颜色与末端节点颜色相互区分">
        <figcaption class="img-cap">补时时间轴按分钟推进，末端节点转红提示比赛即将结束</figcaption>
      </figure>
    </div>
  </section>

  <section class="module" id="panel-api" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">05</span>
        <h2 class="module-title">不想在网页上看，就把数据取回去</h2>
        <p class="module-sub">数据接口当前版本 v3，输出 JSON 与 CSV 两种格式，字段跟着你现有的栏目结构走。</p>
      </header>

      <div class="api-grid">
        <div class="code-card">
          <div class="code-head">
            <span class="code-lang">JSON</span>
            <span class="code-note">嵌套结构，适合直接进产品界面</span>
          </div>
          <ul class="code-keys">
            <li><span class="k">league</span><span class="v">联赛与赛季阶段</span></li>
            <li><span class="k">half_score</span><span class="v">半场比分与主客场表现</span></li>
            <li><span class="k">pass_rate</span><span class="v">五个区域的传球成功率</span></li>
            <li><span class="k">stoppage</span><span class="v">补时节点与发生分钟</span></li>
            <li><span class="k">updated_at</span><span class="v">本条数据的更新时间</span></li>
          </ul>
        </div>

        <div class="code-card">
          <div class="code-head">
            <span class="code-lang">CSV</span>
            <span class="code-note">扁平表格，适合导进报表与表格工具</span>
          </div>
          <ul class="code-keys">
            <li><span class="k">match_id, league, kickoff</span><span class="v">一行一场比赛，便于批量拉取</span></li>
            <li><span class="k">half_home, half_away</span><span class="v">半场比分两个字段直接可用</span></li>
            <li><span class="k">pass_front … pass_edge</span><span class="v">五区成功率各占一列</span></li>
            <li><span class="k">stoppage_minute, stoppage_type</span><span class="v">补时节点按顺序排列</span></li>
          </ul>
        </div>
      </div>

      <div class="api-flow">
        <div class="flow-step">
          <span class="flow-idx">STEP 01</span>
          <h3>说清要哪些字段</h3>
          <p>把你要展示的位置、栏目结构和更新频率讲一遍，我们给出对应的字段清单与样例。</p>
        </div>
        <div class="flow-step">
          <span class="flow-idx">STEP 02</span>
          <h3>开通调用权限</h3>
          <p>单日调用上限默认按常规量给，需要更大的量可以申请提升，最高可到 50 万次。</p>
        </div>
        <div class="flow-step">
          <span class="flow-idx">STEP 03</span>
          <h3>联调并上线</h3>
          <p>技术团队按样例完成对接，确认字段与更新节奏后即可投入正式使用。</p>
        </div>
      </div>

      <figure class="img-frame ratio-4-3 is-plain">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async"
             alt="数据从采集端经过整理后输出为接口的流程示意图形，串联三条采集链路与两种输出格式">
        <figcaption class="img-cap">现场记录员、官方数据源与视频回看校正三条链路汇入同一份输出</figcaption>
      </figure>
    </div>
  </section>

  <section class="module is-alt" id="panel-release" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">06</span>
        <h2 class="module-title">版本在往前推，每天什么时候更新也说得清</h2>
        <p class="module-sub">导航结构、数据接口和大屏看球中文版各自迭代，比赛日的更新按赛前、赛中、赛后三段走。</p>
      </header>

      <div class="release-grid">
        <article class="release-card">
          <span class="rel-ver">v4.2</span>
          <h3>导航结构</h3>
          <p>联赛导航栏完成调整，首页与赛事页索引同步至新结构。赛季专题按联赛分组收起，最近看过的 3 个联赛默认展开。</p>
        </article>
        <article class="release-card">
          <span class="rel-ver">v3</span>
          <h3>数据接口</h3>
          <p>输出格式固定为 JSON 与 CSV 两种，五区传球成功率与补时节点都进了标准字段，接入方不用再自己拼装。</p>
        </article>
        <article class="release-card">
          <span class="rel-ver">2.6</span>
          <h3>大屏看球中文版</h3>
          <p>三类屏幕的适配比例与三档字号在这版定型，整场连续播放的表现同步稳定下来。</p>
        </article>
      </div>

      <div class="rhythm">
        <h3 class="rhythm-title">一个比赛日的三段更新</h3>
        <ol class="rhythm-list">
          <li>
            <span class="rhythm-time">赛前 2 小时</span>
            <span class="rhythm-text">首发名单与伤停名单上线，谁缺阵、谁顶替，开赛前就能看到。</span>
          </li>
          <li>
            <span class="rhythm-time">比赛进行中</span>
            <span class="rhythm-text">中场即时刷新比分与五区成功率，补时阶段时间轴随事件逐格点亮。</span>
          </li>
          <li>
            <span class="rhythm-time">赛后 30 分钟</span>
            <span class="rhythm-text">全场数据补齐归档，复盘栏目当天就有完整素材可用。</span>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="module" id="panel-scene" data-reveal>
    <div class="shell">
      <header class="module-head">
        <span class="coord-tag">07</span>
        <h2 class="module-title">三种人进来，拿走的不是同一样东西</h2>
        <p class="module-sub">场馆运营盯的是大屏，媒体编辑盯的是发稿速度，普通球迷盯的是自己关注的那几支球队。</p>
      </header>

      <div class="scene-grid">
        <article class="scene-card">
          <span class="scene-tag">场馆与酒吧</span>
          <h3>让整间屋子的人都看到</h3>
          <p>开赛前把大屏看球中文版投上去，字号调到大号，比分和补时状态隔着吧台也读得清。整场不中断，客人中途进来也能立刻跟上局面。</p>
          <p class="scene-line">建议组合：大屏看球中文版 + 伤停补时时间轴</p>
        </article>

        <article class="scene-card">
          <span class="scene-tag">媒体与栏目</span>
          <h3>发稿速度跟得上比赛</h3>
          <p>中场休息就能取到比分和五区成功率，配一张区域图就是一条完整的半场稿。赛后 30 分钟内全场数据补齐，晚场战报不用等到第二天。</p>
          <p class="scene-line">建议组合：半场比分模块 + 数据接口</p>
        </article>

        <article class="scene-card">
          <span class="scene-tag">个人追赛</span>
          <h3>关注二十支球队也不乱</h3>
          <p>在个人中心关注球队，首页卡片就按你的关注列表排序。开赛提醒、半场结果和补时状态三类通知可以分开订，想安静看球的时候关掉就行。</p>
          <p class="scene-line">建议组合：首页卡片 + 推送通知</p>
        </article>
      </div>
    </div>
  </section>

  <section class="prod-cta" data-reveal>
    <div class="shell">
      <div class="cta-band">
        <div class="cta-text">
          <h2>选一块先用起来</h2>
          <p>只想看球，直接进今日赛事板；要往自己的系统里接，聊聊字段和调用量就行。</p>
        </div>
        <div class="cta-actions">
          <a class="btn btn-whistle" href="/cooperation/">聊聊合作</a>
          <a class="btn btn-ghost" href="/questions/">查看常见问题</a>
        </div>
      </div>
      <p class="cta-links">
        <a href="/overview/">了解加加体育的平台与团队</a>
        <a href="/notes/">看看近期的数据能力更新</a>
        <a href="/">回到今日赛事板</a>
      </p>
    </div>
  </section>

</main>

.page-products {
  --prod-rule: rgba(242, 247, 244, .12);
  --prod-panel: rgba(255, 255, 255, .06);
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-products .shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-products .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--pitch-bright);
  text-transform: uppercase;
}

.page-products .eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--whistle);
  border-radius: 2px;
}

/* ---------- HERO ---------- */

.page-products .prod-hero {
  position: relative;
  isolation: isolate;
  padding: 48px 0 56px;
  overflow: hidden;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(860px 420px at 82% 4%, rgba(18, 160, 107, .24), transparent 66%),
    radial-gradient(620px 340px at 6% 96%, rgba(255, 107, 53, .16), transparent 70%),
    linear-gradient(180deg, rgba(20, 82, 74, .38), transparent 60%);
  pointer-events: none;
  z-index: -2;
}

.page-products .prod-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      rgba(18, 160, 107, .055) 0 54px,
      transparent 54px 108px);
  pointer-events: none;
  z-index: -1;
}

.page-products .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 26px;
}

.page-products .breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
}

.page-products .breadcrumb a:hover {
  color: var(--pitch-bright);
}

.page-products .prod-hero h1 {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 16ch;
}

.page-products .hero-lead {
  margin: 22px 0 0;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-dim);
}

.page-products .hero-coords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin-top: 34px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
}

.page-products .hero-coords .coord-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(242, 247, 244, .10);
  padding-bottom: 8px;
}

.page-products .hero-coords .coord-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-mute);
}

.page-products .hero-coords .coord-val {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  color: var(--whistle);
  letter-spacing: .02em;
}

/* ---------- CAPABILITY CARDS ---------- */

.page-products .cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 40px;
}

.page-products .cap-card {
  position: relative;
  padding: 24px 22px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(158deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
  overflow: hidden;
  transition: transform .32s ease, border-color .32s ease, background .32s ease;
}

.page-products .cap-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--pitch-bright);
}

.page-products .cap-card.is-score::before { background: var(--whistle); }
.page-products .cap-card.is-pass::before { background: var(--pitch-bright); }
.page-products .cap-card.is-screen::before { background: var(--data-blue); }
.page-products .cap-card.is-stop::before { background: var(--stoppage); }

.page-products .cap-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: linear-gradient(158deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
}

.page-products .cap-coord {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-mute);
}

.page-products .cap-num {
  margin: 14px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-num);
  font-weight: 700;
  line-height: .9;
}

.page-products .cap-num span {
  font-size: 62px;
  color: var(--ink);
}

.page-products .cap-num em {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-dim);
}

.page-products .cap-card.is-score .cap-num span { color: var(--whistle); }
.page-products .cap-card.is-stop .cap-num span { color: var(--stoppage); }
.page-products .cap-card.is-screen .cap-num span { color: var(--pitch-bright); }

.page-products .cap-title {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

.page-products .cap-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .cap-use {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(242, 247, 244, .12);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- TOC ---------- */

.page-products .prod-toc {
  position: relative;
  z-index: 2;
  padding: 4px 0 12px;
}

.page-products .prod-toc-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  border-top: 1px solid var(--prod-rule);
  border-bottom: 1px solid var(--prod-rule);
  scrollbar-width: thin;
}

.page-products .prod-toc-link {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: 14px;
  text-decoration: none;
  transition: color .24s ease, border-color .24s ease, background .24s ease;
}

.page-products .prod-toc-link:hover,
.page-products .prod-toc-link[aria-current="true"] {
  color: var(--night);
  background: var(--pitch-bright);
  border-color: var(--pitch-bright);
}

/* ---------- MODULES ---------- */

.page-products .module {
  position: relative;
  padding: 64px 0;
}

.page-products .module.is-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 82, 74, .16), transparent 78%);
  pointer-events: none;
}

.page-products .module-head {
  position: relative;
  max-width: 72ch;
  margin-bottom: 34px;
}

.page-products .coord-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--pitch-bright);
}

.page-products .module-title {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.page-products .module-sub {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-dim);
}

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

.page-products .split-body p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink);
}

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

.page-products .fact-list li {
  position: relative;
  padding: 12px 16px 12px 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .fact-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pitch-bright);
}

.page-products .fact-list b {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  margin-right: 8px;
}

.page-products .img-frame {
  margin: 36px 0 0;
}

/* score panel */

.page-products .score-panel {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(11, 110, 79, .30), rgba(10, 20, 24, .82));
  box-shadow: var(--shadow-soft);
}

.page-products .score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.page-products .score-head .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--night);
  background: var(--whistle);
}

.page-products .score-head .tag.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--night);
}

.page-products .score-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 6px 0 20px;
}

.page-products .score-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 84px;
}

.page-products .score-team {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--ink-dim);
}

.page-products .score-val {
  font-family: var(--font-num);
  font-size: 84px;
  font-weight: 700;
  line-height: .9;
  color: var(--ink);
}

.page-products .score-divider {
  font-family: var(--font-num);
  font-size: 40px;
  color: var(--ink-mute);
}

.page-products .score-bars {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .score-bars li {
  display: grid;
  grid-template-columns: 46px 1fr 72px;
  align-items: center;
  gap: 12px;
}

.page-products .bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.page-products .bar-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(242, 247, 244, .12);
  overflow: hidden;
}

.page-products .bar-track i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pitch-deep), var(--pitch-bright));
}

.page-products .bar-val {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--ink-dim);
  text-align: right;
}

/* pitch chart */

.page-products .pitch-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(20, 82, 74, .42), rgba(10, 20, 24, .9));
  padding: 6px;
}

.page-products .pc-bg {
  fill: rgba(10, 20, 24, .55);
  stroke: rgba(242, 247, 244, .10);
}

.page-products .pc-grid line,
.page-products .pc-grid circle {
  fill: none;
  stroke: rgba(242, 247, 244, .12);
  stroke-width: 1.4;
  stroke-dasharray: 6 8;
}

.page-products .pc-zone {
  color: var(--pitch-bright);
  cursor: pointer;
  outline: none;
}

.page-products .pc-zone[data-zone="back"] { color: var(--data-blue); }
.page-products .pc-zone[data-zone="mid"] { color: var(--pitch-deep); }
.page-products .pc-zone[data-zone="front"] { color: var(--pitch-bright); }
.page-products .pc-zone[data-zone="wing"] { color: var(--loess); }
.page-products .pc-zone[data-zone="edge"] { color: var(--whistle); }

.page-products .pc-zone rect {
  fill: currentColor;
  fill-opacity: .16;
  stroke: currentColor;
  stroke-opacity: .42;
  stroke-width: 1.6;
  transition: fill-opacity .26s ease, stroke-opacity .26s ease;
}

.page-products .pc-zone text {
  fill: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  opacity: .86;
  pointer-events: none;
}

.page-products .pc-zone:hover rect,
.page-products .pc-zone:focus-visible rect {
  fill-opacity: .42;
  stroke-opacity: 1;
}

.page-products .pass-legend {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-products .pass-legend li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}

.page-products .pass-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pitch-bright);
}

.page-products .pass-legend .is-blue::before { background: var(--data-blue); }
.page-products .pass-legend .is-pitch::before { background: var(--pitch-deep); }
.page-products .pass-legend .is-bright::before { background: var(--pitch-bright); }
.page-products .pass-legend .is-loess::before { background: var(--loess); }
.page-products .pass-legend .is-whistle::before { background: var(--whistle); }

.page-products .pass-legend b {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  margin-right: 8px;
}

/* screen stack */

.page-products .screen-stack {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(160deg, rgba(27, 79, 114, .34), rgba(10, 20, 24, .88));
}

.page-products .screen-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(242, 247, 244, .14);
  background: rgba(242, 247, 244, .07);
  transition: transform .28s ease, background .28s ease;
}

.page-products .screen-item:hover {
  transform: translateX(4px);
  background: rgba(242, 247, 244, .13);
}

.page-products .screen-cap {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

.page-products .screen-bar {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
  justify-content: flex-end;
  height: 34px;
}

.page-products .screen-bar i {
  display: block;
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: var(--pitch-bright);
}

.page-products .screen-bar i:nth-child(1) { height: 40%; }
.page-products .screen-bar i:nth-child(2) { height: 68%; }
.page-products .screen-bar i:nth-child(3) { height: 100%; background: var(--whistle); }

.page-products .screen-item.is-projector .screen-bar i { background: var(--data-blue); }
.page-products .screen-item.is-projector .screen-bar i:nth-child(2) { background: var(--whistle); }
.page-products .screen-item.is-tablet .screen-bar i { background: var(--loess); }

/* stoppage timeline */

.page-products .stoppage-panel {
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(192, 57, 43, .38);
  background: linear-gradient(160deg, rgba(192, 57, 43, .18), rgba(10, 20, 24, .9));
}

.page-products .stoppage-head {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-dim);
}

.page-products .stoppage-track {
  position: relative;
  margin: 0;
  padding: 14px 0 4px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 2px solid rgba(242, 247, 244, .16);
}

.page-products .stoppage-tick {
  position: relative;
  padding-top: 16px;
}

.page-products .stoppage-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 2px;
  height: 10px;
  background: var(--pitch-bright);
  opacity: .55;
}

.page-products .stoppage-tick .min {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--ink-mute);
}

.page-products .stoppage-tick.is-lit::before {
  background: var(--whistle);
  height: 15px;
  top: -15px;
  opacity: 1;
}

.page-products .stoppage-tick.is-lit .min { color: var(--whistle); }

.page-products .stoppage-tick.is-stoppage::before {
  background: var(--stoppage);
  height: 22px;
  top: -22px;
  width: 3px;
  opacity: 1;
}

.page-products .stoppage-tick.is-stoppage .min {
  color: var(--stoppage);
  font-weight: 700;
}

.page-products .stoppage-legend {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.page-products .stoppage-legend li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}

.page-products .stoppage-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pitch-bright);
}

.page-products .stoppage-legend .is-whistle::before { background: var(--whistle); }
.page-products .stoppage-legend .is-red::before { background: var(--stoppage); }

/* ---------- API ---------- */

.page-products .api-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.page-products .code-card {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 79, 114, .7);
  background: linear-gradient(170deg, rgba(27, 79, 114, .34), rgba(10, 20, 24, .92));
}

.page-products .code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(242, 247, 244, .16);
}

.page-products .code-lang {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--night);
  background: var(--pitch-bright);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.page-products .code-note {
  font-size: 13px;
  color: var(--ink-dim);
}

.page-products .code-keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .code-keys li {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(242, 247, 244, .08);
}

.page-products .code-keys li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .code-keys .k {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pitch-bright);
  word-break: break-word;
}

.page-products .code-keys .v {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.page-products .api-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.page-products .flow-step {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--prod-panel);
}

.page-products .flow-idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--whistle);
}

.page-products .flow-step h3 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
}

.page-products .flow-step p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- RELEASE ---------- */

.page-products .release-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .release-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--prod-rule);
  background: var(--glass);
  transition: border-color .28s ease, transform .28s ease;
}

.page-products .release-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.page-products .rel-ver {
  font-family: var(--font-num);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--pitch-bright);
}

.page-products .release-card h3 {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
}

.page-products .release-card p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.page-products .rhythm {
  margin-top: 34px;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(150deg, rgba(232, 217, 181, .10), rgba(10, 20, 24, .82));
}

.page-products .rhythm-title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
}

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

.page-products .rhythm-list li {
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 3px solid var(--pitch-bright);
}

.page-products .rhythm-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--whistle);
}

.page-products .rhythm-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- SCENES ---------- */

.page-products .scene-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .scene-card {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--prod-rule);
  background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
}

.page-products .scene-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: rgba(18, 160, 107, .18);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--pitch-bright);
}

.page-products .scene-card h3 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.35;
}

.page-products .scene-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-dim);
}

.page-products .scene-line {
  padding-top: 12px;
  border-top: 1px dashed rgba(242, 247, 244, .14);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--whistle) !important;
}

/* ---------- CTA ---------- */

.page-products .prod-cta {
  padding: 20px 0 72px;
}

.page-products .cta-band {
  display: grid;
  gap: 20px;
  padding: 30px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(560px 240px at 88% 10%, rgba(255, 107, 53, .22), transparent 70%),
    linear-gradient(150deg, rgba(11, 110, 79, .40), rgba(10, 20, 24, .9));
}

.page-products .cta-text h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
}

.page-products .cta-text p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-dim);
  max-width: 52ch;
}

.page-products .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .24s ease, background .24s ease, color .24s ease;
}

.page-products .btn-whistle {
  background: var(--whistle);
  color: var(--night);
  box-shadow: var(--shadow-whistle);
}

.page-products .btn-whistle:hover {
  transform: translateY(-3px);
}

.page-products .btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--glass);
}

.page-products .btn-ghost:hover {
  transform: translateY(-3px);
  background: rgba(18, 160, 107, .22);
}

.page-products .cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 22px 0 0;
  font-size: 14px;
}

.page-products .cta-links a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 179, 172, .4);
  padding-bottom: 2px;
}

.page-products .cta-links a:hover {
  color: var(--pitch-bright);
  border-color: var(--pitch-bright);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 560px) {
  .page-products .prod-hero {
    padding: 34px 0 44px;
  }

  .page-products .hero-coords {
    grid-template-columns: 1fr;
  }

  .page-products .cap-num span {
    font-size: 52px;
  }

  .page-products .score-val {
    font-size: 64px;
  }

  .page-products .stoppage-track {
    grid-template-columns: repeat(12, 40px);
    overflow-x: auto;
    padding-bottom: 12px;
  }
}

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

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

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

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

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

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

  .page-products .cta-band {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    padding: 38px 34px;
  }

  .page-products .cta-actions {
    justify-content: flex-end;
  }

  .page-products .rhythm-list li {
    grid-template-columns: 150px 1fr;
    align-items: baseline;
    gap: 18px;
  }
}

@media (min-width: 1080px) {
  .page-products .prod-hero {
    padding: 56px 0 72px;
  }

  .page-products .hero-coords {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 880px;
  }

  .page-products .hero-coords .coord-row {
    border-bottom: 0;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .page-products .cap-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-products .cap-card:nth-child(1) { grid-column: span 7; }
  .page-products .cap-card:nth-child(2) { grid-column: span 5; }
  .page-products .cap-card:nth-child(3) { grid-column: span 5; }
  .page-products .cap-card:nth-child(4) { grid-column: span 7; }

  .page-products .split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 44px;
  }

  .page-products .split.is-flip .split-visual {
    order: 2;
  }

  .page-products .split.is-flip .split-body {
    order: 1;
  }

  .page-products .img-frame {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cap-card,
  .page-products .screen-item,
  .page-products .release-card,
  .page-products .btn,
  .page-products .pc-zone rect {
    transition: none;
  }

  .page-products .cap-card:hover,
  .page-products .release-card:hover,
  .page-products .btn:hover,
  .page-products .screen-item:hover {
    transform: none;
  }
}