.page-products {
  --tool-gap: clamp(22px, 3vw, 40px);
  --panel-pad: clamp(20px, 3.4vw, 32px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-products .page-intro {
  padding-block: clamp(24px, 4vw, 44px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}

.page-products .intro-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(24px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .intro-facts > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 18px;
  background: var(--ink-700);
}

.page-products .fact-num {
  font-size: clamp(22px, 4.6vw, 32px);
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .fact-label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sand);
}

/* ---------- 01 工具总览 ---------- */

.page-products .overview-band {
  margin: 0 0 clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .overview-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.82);
}

.page-products .tool-tabs {
  position: relative;
}

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

.page-products .tool-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-products .tool-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.page-products .tool-num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .tool-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-products .tool-stage {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sand);
}

.page-products #tool-tab-1:checked ~ .tool-tablist .tool-tab[for="tool-tab-1"],
.page-products #tool-tab-2:checked ~ .tool-tablist .tool-tab[for="tool-tab-2"],
.page-products #tool-tab-3:checked ~ .tool-tablist .tool-tab[for="tool-tab-3"],
.page-products #tool-tab-4:checked ~ .tool-tablist .tool-tab[for="tool-tab-4"] {
  border-color: rgba(200, 255, 61, 0.72);
  background: rgba(200, 255, 61, 0.1);
}

.page-products #tool-tab-1:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-1"],
.page-products #tool-tab-2:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-2"],
.page-products #tool-tab-3:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-3"],
.page-products #tool-tab-4:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-4"] {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .tool-panel {
  display: none;
  padding: var(--panel-pad);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
}

.page-products #tool-tab-1:checked ~ .tool-panels > .tool-panel:nth-child(1),
.page-products #tool-tab-2:checked ~ .tool-panels > .tool-panel:nth-child(2),
.page-products #tool-tab-3:checked ~ .tool-panels > .tool-panel:nth-child(3),
.page-products #tool-tab-4:checked ~ .tool-panels > .tool-panel:nth-child(4) {
  display: block;
}

.page-products .tool-panel-title {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-products .tool-panel-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--sand);
}

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

.page-products .tool-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sand);
}

.page-products .tool-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- 02 桌面端 ---------- */

.page-products .desk-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .desk-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

.page-products .step-list {
  list-style: none;
  counter-reset: step;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .step-list li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--line);
}

.page-products .step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .step-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .step-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--sand);
}

.page-products .desk-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .desk-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .desk-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-products .desk-stat {
  padding: 18px 20px;
  border-left: 3px solid var(--warm);
}

.page-products .desk-stat-num {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--warm);
}

.page-products .desk-stat-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

/* ---------- 03 移动端场馆 ---------- */

.page-products .mobile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .venue-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .venue-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 520px;
}

.page-products .venue-lede {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

.page-products .venue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .venue-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .venue-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
  padding-top: 3px;
}

.page-products .venue-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .venue-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

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

/* ---------- 04 赛事日历 ---------- */

.page-products .cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .cal-filter {
  position: relative;
}

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

.page-products .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sand);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products #cal-all:checked ~ .chip-row .chip[for="cal-all"],
.page-products #cal-football:checked ~ .chip-row .chip[for="cal-football"],
.page-products #cal-basketball:checked ~ .chip-row .chip[for="cal-basketball"] {
  border-color: var(--lime);
  background: rgba(200, 255, 61, 0.12);
  color: var(--lime);
}

.page-products #cal-all:focus-visible ~ .chip-row .chip[for="cal-all"],
.page-products #cal-football:focus-visible ~ .chip-row .chip[for="cal-football"],
.page-products #cal-basketball:focus-visible ~ .chip-row .chip[for="cal-basketball"] {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .cal-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.page-products #cal-football:checked ~ .cal-list .cal-item:not(.cal-item--football),
.page-products #cal-basketball:checked ~ .cal-list .cal-item:not(.cal-item--basketball) {
  display: none;
}

.page-products .cal-round {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--paper);
  min-width: 58px;
}

.page-products .cal-desc {
  flex: 1 1 220px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--sand);
}

.page-products .cal-footnote {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--smoke);
}

.page-products .cal-footnote .mono {
  color: var(--cyan);
}

.page-products .cal-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .cal-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .cal-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-products .cal-note {
  padding: 16px 18px;
}

.page-products .cal-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

/* ---------- 05 帮助文档 ---------- */

.page-products .doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .doc-list {
  border-top: 1px solid var(--line);
}

.page-products .doc-item {
  border-bottom: 1px solid var(--line);
}

.page-products .doc-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

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

.page-products .doc-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--lime);
  line-height: 1;
}

.page-products .doc-item[open] .doc-summary::after {
  content: "–";
}

.page-products .doc-summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .doc-cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .doc-body {
  padding: 0 0 20px;
}

.page-products .doc-body p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--sand);
}

.page-products .doc-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .doc-body li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--sand);
}

.page-products .doc-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--smoke);
  border-radius: 1px;
}

.page-products .doc-footnote {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--smoke);
}

.page-products .text-link {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .text-link:hover,
.page-products .text-link:focus-visible {
  color: var(--lime);
}

.page-products .doc-aside {
  align-content: start;
}

.page-products .doc-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .doc-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 520px;
}

/* ---------- 06 兼容与版本 ---------- */

.page-products .version-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(200, 255, 61, 0.34);
  border-radius: var(--radius);
  background: rgba(200, 255, 61, 0.06);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-products .version-sep {
  color: var(--smoke);
}

.page-products .compat-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.page-products .compat-scroll:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .compat-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .compat-caption {
  padding: 12px 16px 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--smoke);
}

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

.page-products .compat-table thead th {
  background: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sand);
}

.page-products .compat-table tbody th {
  font-weight: 800;
  color: var(--paper);
  white-space: nowrap;
}

.page-products .compat-table tbody td {
  color: var(--sand);
  line-height: 1.68;
}

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

.page-products .changelog {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
}

.page-products .changelog-summary {
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
}

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

.page-products .changelog-summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .changelog-body {
  padding: 0 18px 18px;
}

.page-products .changelog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: log;
  border-top: 1px solid var(--line);
}

.page-products .changelog-list li {
  counter-increment: log;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .changelog-list li:last-child {
  border-bottom: 0;
}

.page-products .changelog-list span {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--warm);
  padding-top: 2px;
}

.page-products .changelog-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--sand);
}

/* ---------- 07 下一步 ---------- */

.page-products .next-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .next-steps a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink-700);
  color: var(--paper);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .next-steps a span {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--smoke);
  transition: color 0.18s var(--ease);
}

.page-products .next-steps a:hover,
.page-products .next-steps a:focus-visible {
  background: var(--ink-600);
  color: var(--lime);
}

.page-products .next-steps a:hover span,
.page-products .next-steps a:focus-visible span {
  color: var(--lime);
}

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

@media (min-width: 700px) {
  .page-products .intro-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .intro-facts > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-products .tool-tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (min-width: 960px) {
  .page-products .desk-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .mobile-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr);
    align-items: start;
  }

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

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

  .page-products .doc-aside {
    position: sticky;
    top: 96px;
  }

  .page-products .tool-panel-title {
    max-width: 30ch;
  }
}

@media (min-width: 1180px) {
  .page-products .next-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .next-steps a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tool-tab,
  .page-products .chip,
  .page-products .next-steps a,
  .page-products .next-steps a span {
    transition: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

等等——我多加了一个标记，<<<PAGE_CSS_END>>> 和 <<<END>>> 不在约定里。约定是只输出  和 。我重新干净地输出一次，只保留那两个标记。

我再核对一下 HTML 里有没有问题：

- 面包屑、页面介绍用的是共享类。
- 唯一的 h1。没问题。
- 工具面板里的标签：我用了 <p class="tool-panel-title"> 而不是标题元素——可以，避免了标题层级上的问题。
- 工具栏的 label 放在 tablist 里，但标签页语义没写完整——可以接受。
- `id="tool-panel-1"` 没有在任何地方被引用——没关系，但也没有坏处。
- 所有锚点链接：/faqs/、/feedback/、/information/、/brand/、/ —— 都是合法的路由。没有用页内锚点。
- 图片：5 张。检查占位格式——h 在前、w 在后：{zhanqunpic:h:900w:1600} 对应 width=1600 height=900 ✓。{zhanqunpic:h:675w:1200} 对应 1200x675 ✓。{zhanqunpic:h:1000w:800} 对应 800x1000 ✓。{zhanqunpic:h:800w:1200} 对应 1200x800 ✓。{zhanqunpic:h:1000w:800} 对应 800x1000 ✓。
- 第一张图片放在首屏，没有用 lazy ✓，其余都用了 lazy + async ✓。
- 没有 form，没有外部 URL。
- 数字直接写出来了 ✓。
- 品牌“速搏看台”在导语和下一个区块里都自然出现了 ✓。

有一点要留意：“核对”这个词——我避开了，改用“更新到位/确认”。但副标题里我写了“先确认你的浏览器在支持范围内”……这没问题。

嗯，等等——我是不是在某个地方用了“核对”？让我搜一下……“确认”用得没问题。“核对”没有出现，好。

还有，“62%”和“38%”来自允许的事实——没问题（62% 桌面端、38% 移动端）。

“赛事日历”这几个字出现了好几次——可以接受。

一个顾虑：`.page-products .section-head` 等是共享类，没问题。

另外，`.page-products .cal-footnote .mono` —— mono 是共享类。

还有任何地方都需要了 `role="tablist"`，但用的却是 label——有点语义不匹配，不过视觉上没问题。或许去掉 role="tablist" 避免 ARIA 问题？没有标签页角色的话，tablist 就没意义了。我还是把 role="tablist" 去掉吧，只用 aria-label 配合 group。

其实 label 放在 div 带 role="tablist" 里面，在可访问性上有点别扭。干脆用 `<div class="tool-tablist" role="group" aria-label="四类观赛工具">`。

现在定稿。另外 `#tool-panel-1` 这些 id 就保留着吧。

最后确认一遍。
<main id="main-content" class="page-products">
  <nav class="breadcrumbs wrap" aria-label="面包屑">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
      <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">工具中心</span></li>
    </ol>
  </nav>

  <header class="page-intro wrap">
    <p class="eyebrow">TOOLS / 工具中心</p>
    <h1>速搏看台工具中心</h1>
    <p class="page-lede">开赛前十分钟想弄清双方阵容，走进场馆想确认看台入口，比赛结束后想回看那几段集锦——速搏看台把这几件事分别做成了可以直接打开的工具。你在哪个环节，就从哪个入口进去，不必在一个页面里反复翻找。</p>
    <div class="intro-facts">
      <div>
        <span class="fact-num mono">12</span>
        <span class="fact-label">项足球与篮球联赛，按比赛日排开</span>
      </div>
      <div>
        <span class="fact-num mono">86万</span>
        <span class="fact-label">注册观赛用户，8 个赛季持续使用</span>
      </div>
      <div>
        <span class="fact-num mono">186</span>
        <span class="fact-label">篇操作说明，覆盖开赛到离场</span>
      </div>
    </div>
  </header>

  <section class="section tool-overview" aria-labelledby="overview-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">01</span>
        <h2 class="section-title" id="overview-title">四类工具，各管一段观赛时间</h2>
        <p class="section-note">先想清楚眼下要办的是哪件事，选入口会比逐个翻页快得多。</p>
      </div>

      <figure class="overview-band">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光照亮看台边缘，灯光线条上叠加浅色数据网格与状态点">
      </figure>

      <div class="tool-tabs">
        <input class="tool-radio" type="radio" name="tool-tab" id="tool-tab-1" checked>
        <input class="tool-radio" type="radio" name="tool-tab" id="tool-tab-2">
        <input class="tool-radio" type="radio" name="tool-tab" id="tool-tab-3">
        <input class="tool-radio" type="radio" name="tool-tab" id="tool-tab-4">

        <div class="tool-tablist" role="group" aria-label="四类观赛工具">
          <label class="tool-tab" for="tool-tab-1">
            <span class="tool-num mono">01</span>
            <span class="tool-name">赛事日历</span>
            <span class="tool-stage">赛前到赛后</span>
          </label>
          <label class="tool-tab" for="tool-tab-2">
            <span class="tool-num mono">02</span>
            <span class="tool-name">桌面端观赛</span>
            <span class="tool-stage">开赛前十分钟</span>
          </label>
          <label class="tool-tab" for="tool-tab-3">
            <span class="tool-num mono">03</span>
            <span class="tool-name">移动端场馆</span>
            <span class="tool-stage">到场之后</span>
          </label>
          <label class="tool-tab" for="tool-tab-4">
            <span class="tool-num mono">04</span>
            <span class="tool-name">帮助文档</span>
            <span class="tool-stage">任何时候</span>
          </label>
        </div>

        <div class="tool-panels">
          <div class="tool-panel" id="tool-panel-1">
            <p class="tool-panel-title">按日期和项目翻赛程，几十场收窄成你要看的那几场</p>
            <p class="tool-panel-text">足球和篮球两类联赛都收在同一份日历里。先圈定日期，再点项目，剩下的就是当天真正和你有关的场次。看完比赛想回头找片段，集锦按比赛日归档，位置和赛程一一对得上。</p>
            <ul class="tool-points">
              <li>覆盖两类共 12 项联赛，按比赛日排列</li>
              <li>日期与项目两个条件同时收窄结果</li>
              <li>视频集锦按比赛日归档，赛后当晚可看</li>
            </ul>
          </div>

          <div class="tool-panel" id="tool-panel-2">
            <p class="tool-panel-title">屏幕够宽，赛程、阵容和交手记录能同时摊开</p>
            <p class="tool-panel-text">离比赛还有十分钟，打开的往往是电脑。多栏面板把这一天要看的场次、双方阵容和过去几个赛季的交手结果并排放着，不用来回切换标签。本赛季的内容已经更新到第 28 轮。</p>
            <ul class="tool-points">
              <li>多栏数据面板，单场信息一屏读完</li>
              <li>阵容在开赛前十分钟更新到位</li>
              <li>历史交锋保留近 5 个赛季</li>
            </ul>
          </div>

          <div class="tool-panel" id="tool-panel-3">
            <p class="tool-panel-title">人已经在场馆附近，信息得跟得上脚步</p>
            <p class="tool-panel-text">手机屏幕能放的东西不多，所以场馆入口、看台分区和现场提示被放在同一页，往下滑就是帮助文档。找不到检票口或者临时改了通道，不用退出去重新找入口。</p>
            <ul class="tool-points">
              <li>与 46 家场馆保持信息协作</li>
              <li>每个比赛日前完成一次场馆信息巡检</li>
              <li>帮助文档入口与场馆信息同栏直达</li>
            </ul>
          </div>

          <div class="tool-panel" id="tool-panel-4">
            <p class="tool-panel-title">卡住了，先翻文档，多数问题三步之内能解开</p>
            <p class="tool-panel-text">操作说明按你要办的事分组，从不清楚该点哪里，到现场找不到对应的看台，都能找到对应的那一条。实在没有答案，反馈通道会接住。</p>
            <ul class="tool-points">
              <li>按开赛前、观赛中、赛后三个阶段组织</li>
              <li>五类任务分组，先选场景再看步骤</li>
              <li>客服邮箱工作日 9:00-18:00 回复</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section desk-section" aria-labelledby="desk-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">02</span>
        <h2 class="section-title" id="desk-title">桌面端速搏体育观赛：开赛前十分钟，该看的都在一屏</h2>
        <p class="section-note">适合坐下来认真看一场的人。窗开得够宽，信息就摆得够全。</p>
      </div>

      <div class="desk-layout">
        <div class="desk-main">
          <p class="desk-lede">比赛还有十分钟开始，你打开电脑，先看到的不是一屏推荐，而是今天所有场次的进度条。点进正在关注的那一场，阵容、交手记录和同日其他比赛的结果就在两侧，视线不用离开屏幕。</p>

          <ol class="step-list">
            <li>
              <strong>先在日历上定位今天</strong>
              <p>足球和篮球的同日场次一并列出，还没开始的排在最上面，已经结束的标出比分和集锦入口。</p>
            </li>
            <li>
              <strong>进入单场，看双方阵容</strong>
              <p>赛前十分钟，双方名单在面板里更新到位，位置和号码并排，方便你快速对上人。</p>
            </li>
            <li>
              <strong>顺手翻一眼历史交锋</strong>
              <p>近 5 个赛季的交手结果列在阵容下方，比分和主客场一目了然。</p>
            </li>
            <li>
              <strong>赛后回到同一处看集锦</strong>
              <p>比赛日当晚完成归档，下一场开始之前，你想回看的那几段就已经在里面。</p>
            </li>
          </ol>
        </div>

        <aside class="desk-aside">
          <figure class="desk-figure">
            <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="深色桌面观赛界面，左侧为赛程列表，中间是阵容栏位，右侧为历史交锋数据面板">
          </figure>
          <div class="desk-stat card card--solid">
            <p class="desk-stat-num mono">62%</p>
            <p class="desk-stat-text">的观赛用户在电脑前完成赛前信息查看，这也是桌面端把多栏面板放在首屏的原因。</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section venue-section" aria-labelledby="venue-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">03</span>
        <h2 class="section-title" id="venue-title">移动端场馆信息：站在入口前，知道往哪走</h2>
        <p class="section-note">到场之后的几分钟最需要答案，页面就得短、直、能单手操作。</p>
      </div>

      <div class="mobile-layout">
        <figure class="venue-figure">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" loading="lazy" decoding="async" alt="手机屏幕内展示场馆入口、看台分区与帮助文档标签，底部导航栏并列排布">
        </figure>

        <div class="venue-body">
          <p class="venue-lede">走进场馆附近，人开始找方向。这时候打开手机，最想知道的是从哪进、往哪层走、临时有没有改道。移动端把这些放在一个页面里，底部导航栏同时留了帮助文档的入口，遇到设备或票务相关的问题不用退出去重搜。</p>

          <ul class="venue-list">
            <li>
              <span class="venue-key mono">入口</span>
              <div>
                <strong>按票面对应分区给出方向</strong>
                <p>输入看台编号，页面直接告诉你最近的入口在哪个方向，省去在广场上绕圈。</p>
              </div>
            </li>
            <li>
              <span class="venue-key mono">看台</span>
              <div>
                <strong>分区编号和楼层一起给出</strong>
                <p>编号、楼层、相邻通道并列显示，走到哪一段都能对上自己手里的票。</p>
              </div>
            </li>
            <li>
              <span class="venue-key mono">提示</span>
              <div>
                <strong>现场临时调整同步更新</strong>
                <p>安检口移位、通道临时封闭这类变动，随场馆信息一起刷新，不会让你走到封住的门口。</p>
              </div>
            </li>
            <li>
              <span class="venue-key mono">文档</span>
              <div>
                <strong>问题答不上来就往下走一步</strong>
                <p>同一条导航栏里就是帮助文档，按任务分类排好，找答案不用换页面。</p>
              </div>
            </li>
          </ul>

          <div class="venue-meta">
            <span class="tag tag--cyan">46 家场馆信息协作</span>
            <span class="tag tag--sand">每场比赛日前完成一次巡检</span>
            <span class="tag tag--lime">38% 用户到场后使用移动端</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section cal-section" aria-labelledby="cal-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">04</span>
        <h2 class="section-title" id="cal-title">速搏体育赛事日历：先筛条件，再看场次</h2>
        <p class="section-note">不确定今晚有什么可看的时候，从项目开始筛最快。</p>
      </div>

      <div class="cal-layout">
        <div class="cal-main">
          <div class="cal-filter">
            <input class="cal-radio" type="radio" name="cal-filter" id="cal-all" checked>
            <input class="cal-radio" type="radio" name="cal-filter" id="cal-football">
            <input class="cal-radio" type="radio" name="cal-filter" id="cal-basketball">

            <div class="chip-row" role="group" aria-label="按项目筛选赛程">
              <label class="chip" for="cal-all">全部项目</label>
              <label class="chip" for="cal-football">足球</label>
              <label class="chip" for="cal-basketball">篮球</label>
            </div>
          </div>

          <ul class="cal-list">
            <li class="cal-item cal-item--football">
              <span class="cal-round mono">第 28 轮</span>
              <span class="tag tag--lime">足球</span>
              <span class="cal-desc">赛前十分钟阵容更新到位，同屏可查近 5 个赛季交手结果。</span>
            </li>
            <li class="cal-item cal-item--basketball">
              <span class="cal-round mono">第 28 轮</span>
              <span class="tag tag--warm">篮球</span>
              <span class="cal-desc">赛果与集锦在比赛日当晚归档，第二天打开就能回看。</span>
            </li>
            <li class="cal-item cal-item--football">
              <span class="cal-round mono">第 29 轮</span>
              <span class="tag tag--lime">足球</span>
              <span class="cal-desc">桌面端多栏面板同时展开当日全部场次，进度一眼看完。</span>
            </li>
            <li class="cal-item cal-item--basketball">
              <span class="cal-round mono">第 29 轮</span>
              <span class="tag tag--warm">篮球</span>
              <span class="cal-desc">移动端可直接跳到场馆信息，确认完看台再回来继续翻赛程。</span>
            </li>
            <li class="cal-item cal-item--football">
              <span class="cal-round mono">第 30 轮</span>
              <span class="tag tag--lime">足球</span>
              <span class="cal-desc">提前标记关注的场次，开赛前进入单场视图查看阵容变化。</span>
            </li>
          </ul>

          <p class="cal-footnote">集锦库已归档超过 <span class="mono">4200</span> 条比赛日片段，按比赛日排列，和日历上的场次一一对应。</p>
        </div>

        <aside class="cal-aside">
          <figure class="cal-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="战术板上的日期格、箭头和阵容标记特写，青柠与暖橘色标注区分不同状态">
          </figure>
          <div class="cal-note card card--line">
            <p>两项条件叠加使用时，日历只留下同时满足的场次。想看某个项目的整轮安排，单选项目就够了。</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section doc-section" aria-labelledby="doc-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">05</span>
        <h2 class="section-title" id="doc-title">速搏体育帮助文档：按你要办的事找答案</h2>
        <p class="section-note">展开你遇到问题的那一类，步骤按顺序写，照着做就行。</p>
      </div>

      <div class="doc-layout">
        <div class="doc-main">
          <div class="doc-list">
            <details class="doc-item" open>
              <summary class="doc-summary"><span class="doc-cat mono">01</span>开赛准备</summary>
              <div class="doc-body">
                <p>比赛开始前把设备和入口确认一遍，多数临场问题在这一步就能避免。</p>
                <ul>
                  <li>提前十分钟打开单场页面，确认阵容栏已经更新到最新一轮。</li>
                  <li>把关注的场次标在日历上，赛前提醒会带着入口一起出现。</li>
                  <li>电脑端建议提前打开，多栏面板加载完成后切换场次更快。</li>
                </ul>
              </div>
            </details>

            <details class="doc-item">
              <summary class="doc-summary"><span class="doc-cat mono">02</span>设备与入口</summary>
              <div class="doc-body">
                <p>页面打不开、数据不刷新、某个栏位显示不全，按这个顺序排查。</p>
                <ul>
                  <li>先把浏览器升级到最新两个大版本，再重新打开页面。</li>
                  <li>窗口太窄时，桌面端的多栏面板会自动收成单栏，把窗口拉宽即可恢复。</li>
                  <li>移动端保持默认缩放比例，其他设置可能让场馆卡片排版错位。</li>
                </ul>
              </div>
            </details>

            <details class="doc-item">
              <summary class="doc-summary"><span class="doc-cat mono">03</span>场馆导航</summary>
              <div class="doc-body">
                <p>到了现场找不到位置，先看票面，再看场馆信息页。</p>
                <ul>
                  <li>用票面上的分区编号在移动端查询入口方向，编号与楼层会一起给出。</li>
                  <li>遇到通道临时封闭，页面上的现场提示会同步更新，以最新一条为准。</li>
                  <li>场馆动线图从入口画到座位区，中途的安检与检票位置都标了出来。</li>
                </ul>
              </div>
            </details>

            <details class="doc-item">
              <summary class="doc-summary"><span class="doc-cat mono">04</span>数据说明</summary>
              <div class="doc-body">
                <p>哪项信息什么时候更新，看这里就不会反复刷新等结果。</p>
                <ul>
                  <li>阵容在开赛前十分钟集中更新，之前显示的是上一轮的名单。</li>
                  <li>比分随比赛进程刷新，赛果在比赛日当晚完成归档。</li>
                  <li>历史交锋保留近 5 个赛季，更早的记录不再展示。</li>
                </ul>
              </div>
            </details>

            <details class="doc-item">
              <summary class="doc-summary"><span class="doc-cat mono">05</span>反馈</summary>
              <div class="doc-body">
                <p>文档里没有的情况，交给反馈通道处理，带上这几项能更快定位。</p>
                <ul>
                  <li>写清楚是在哪一端遇到的：电脑端页面还是手机端场馆信息。</li>
                  <li>附上大致时间和你正在查看的场次轮次。</li>
                  <li>场馆信息有误时，说明是入口、看台还是现场提示哪一项对不上。</li>
                </ul>
              </div>
            </details>
          </div>

          <p class="doc-footnote">还没找到答案？<a class="text-link" href="/feedback/">走反馈通道</a>，或在工作日 9:00-18:00 之间发邮件到客服邮箱。</p>
        </div>

        <aside class="doc-aside">
          <figure class="doc-figure">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" loading="lazy" decoding="async" alt="俯拍场馆入口与看台动线，画面叠加手机界面轮廓和路线编号标记">
          </figure>
        </aside>
      </div>
    </div>
  </section>

  <section class="section compat-section" aria-labelledby="compat-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">06</span>
        <h2 class="section-title" id="compat-title">设备兼容与版本更新</h2>
        <p class="section-note">两端都跟到了本赛季第 28 轮，先确认你的浏览器在支持范围内。</p>
      </div>

      <div class="version-bar">
        <span class="status-dot" aria-hidden="true"></span>
        <span>当前版本：本赛季第 28 轮</span>
        <span class="version-sep" aria-hidden="true">/</span>
        <span>桌面端与移动端均已更新</span>
      </div>

      <div class="compat-scroll" tabindex="0" role="region" aria-label="浏览器支持情况，可横向滚动">
        <table class="compat-table">
          <caption class="compat-caption">两端浏览器支持情况</caption>
          <thead>
            <tr>
              <th scope="col">使用端</th>
              <th scope="col">支持范围</th>
              <th scope="col">主要用途</th>
              <th scope="col">遇到问题怎么办</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">电脑端</th>
              <td>Chrome、Edge、Safari 的最新两个大版本</td>
              <td>赛程筛选、阵容查看、历史交锋、集锦回看</td>
              <td>升级浏览器后重开页面，多栏面板会自动恢复</td>
            </tr>
            <tr>
              <th scope="row">手机端</th>
              <td>主流移动浏览器的最新两个大版本</td>
              <td>场馆入口、看台分区、现场提示与帮助文档</td>
              <td>保持默认缩放，刷新后重新进入场馆信息页</td>
            </tr>
            <tr>
              <th scope="row">窄窗口</th>
              <td>桌面端窗口宽度不足时</td>
              <td>多栏数据面板自动收为单栏排列</td>
              <td>拉宽窗口或全屏，即可回到多栏视图</td>
            </tr>
          </tbody>
        </table>
      </div>

      <details class="changelog">
        <summary class="changelog-summary">最近几次版本更新</summary>
        <div class="changelog-body">
          <ol class="changelog-list">
            <li>
              <span class="mono">本赛季</span>
              <p>观赛页更新至第 28 轮，集锦按比赛日归档，赛果当晚完成入库。</p>
            </li>
            <li>
              <span class="mono">2024</span>
              <p>移动端把场馆信息与帮助文档合并到同一导航栏，现场查阅少跳一次页面。</p>
            </li>
            <li>
              <span class="mono">2021</span>
              <p>桌面端观赛工作台上线，赛程、阵容与历史交锋改为多栏并排展示。</p>
            </li>
            <li>
              <span class="mono">2017</span>
              <p>首个赛季页面投入使用，赛事日历成为此后各个版本的共同主轴。</p>
            </li>
          </ol>
        </div>
      </details>
    </div>
  </section>

  <section class="section next-section" aria-labelledby="next-title">
    <div class="wrap">
      <div class="section-head">
        <span class="section-index" aria-hidden="true">07</span>
        <h2 class="section-title" id="next-title">还不确定从哪个入口开始？</h2>
      </div>
      <div class="next-steps">
        <a href="/faqs/">先看帮助文档<span aria-hidden="true">→</span></a>
        <a href="/feedback/">把问题交给反馈通道<span aria-hidden="true">→</span></a>
        <a href="/information/">在资讯中心看赛季动态<span aria-hidden="true">→</span></a>
        <a href="/brand/">了解速搏看台的团队与场馆协作<span aria-hidden="true">→</span></a>
      </div>
    </div>
  </section>
</main>

.page-products {
  --tool-gap: clamp(22px, 3vw, 40px);
  --panel-pad: clamp(20px, 3.4vw, 32px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-products .page-intro {
  padding-block: clamp(24px, 4vw, 44px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}

.page-products .intro-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(24px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .intro-facts > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 18px;
  background: var(--ink-700);
}

.page-products .fact-num {
  font-size: clamp(22px, 4.6vw, 32px);
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .fact-label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sand);
}

.page-products .overview-band {
  margin: 0 0 clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .overview-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.82);
}

.page-products .tool-tabs {
  position: relative;
}

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

.page-products .tool-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-products .tool-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.page-products .tool-num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .tool-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-products .tool-stage {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sand);
}

.page-products #tool-tab-1:checked ~ .tool-tablist .tool-tab[for="tool-tab-1"],
.page-products #tool-tab-2:checked ~ .tool-tablist .tool-tab[for="tool-tab-2"],
.page-products #tool-tab-3:checked ~ .tool-tablist .tool-tab[for="tool-tab-3"],
.page-products #tool-tab-4:checked ~ .tool-tablist .tool-tab[for="tool-tab-4"] {
  border-color: rgba(200, 255, 61, 0.72);
  background: rgba(200, 255, 61, 0.1);
}

.page-products #tool-tab-1:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-1"],
.page-products #tool-tab-2:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-2"],
.page-products #tool-tab-3:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-3"],
.page-products #tool-tab-4:focus-visible ~ .tool-tablist .tool-tab[for="tool-tab-4"] {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .tool-panel {
  display: none;
  padding: var(--panel-pad);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
}

.page-products #tool-tab-1:checked ~ .tool-panels > .tool-panel:nth-child(1),
.page-products #tool-tab-2:checked ~ .tool-panels > .tool-panel:nth-child(2),
.page-products #tool-tab-3:checked ~ .tool-panels > .tool-panel:nth-child(3),
.page-products #tool-tab-4:checked ~ .tool-panels > .tool-panel:nth-child(4) {
  display: block;
}

.page-products .tool-panel-title {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-products .tool-panel-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--sand);
}

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

.page-products .tool-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sand);
}

.page-products .tool-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

.page-products .desk-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .desk-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

.page-products .step-list {
  list-style: none;
  counter-reset: step;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .step-list li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--line);
}

.page-products .step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .step-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .step-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--sand);
}

.page-products .desk-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .desk-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .desk-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-products .desk-stat {
  padding: 18px 20px;
  border-left: 3px solid var(--warm);
}

.page-products .desk-stat-num {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--warm);
}

.page-products .desk-stat-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

.page-products .mobile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .venue-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .venue-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 520px;
}

.page-products .venue-lede {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  font-size: 16px;
  line-height: 1.8;
  color: var(--sand);
}

.page-products .venue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .venue-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .venue-key {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
  padding-top: 3px;
}

.page-products .venue-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
}

.page-products .venue-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

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

.page-products .cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .cal-filter {
  position: relative;
}

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

.page-products .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-products .chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sand);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products #cal-all:checked ~ .chip-row .chip[for="cal-all"],
.page-products #cal-football:checked ~ .chip-row .chip[for="cal-football"],
.page-products #cal-basketball:checked ~ .chip-row .chip[for="cal-basketball"] {
  border-color: var(--lime);
  background: rgba(200, 255, 61, 0.12);
  color: var(--lime);
}

.page-products #cal-all:focus-visible ~ .chip-row .chip[for="cal-all"],
.page-products #cal-football:focus-visible ~ .chip-row .chip[for="cal-football"],
.page-products #cal-basketball:focus-visible ~ .chip-row .chip[for="cal-basketball"] {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-products .cal-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.page-products #cal-football:checked ~ .cal-list .cal-item:not(.cal-item--football),
.page-products #cal-basketball:checked ~ .cal-list .cal-item:not(.cal-item--basketball) {
  display: none;
}

.page-products .cal-round {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--paper);
  min-width: 58px;
}

.page-products .cal-desc {
  flex: 1 1 220px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--sand);
}

.page-products .cal-footnote {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--smoke);
}

.page-products .cal-footnote .mono {
  color: var(--cyan);
}

.page-products .cal-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-products .cal-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .cal-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-products .cal-note {
  padding: 16px 18px;
}

.page-products .cal-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sand);
}

.page-products .doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tool-gap);
}

.page-products .doc-list {
  border-top: 1px solid var(--line);
}

.page-products .doc-item {
  border-bottom: 1px solid var(--line);
}

.page-products .doc-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--paper);
}

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

.page-products .doc-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--lime);
  line-height: 1;
}

.page-products .doc-item[open] .doc-summary::after {
  content: "–";
}

.page-products .doc-summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .doc-cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-products .doc-body {
  padding: 0 0 20px;
}

.page-products .doc-body p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--sand);
}

.page-products .doc-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .doc-body li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--sand);
}

.page-products .doc-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--smoke);
  border-radius: 1px;
}

.page-products .doc-footnote {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--smoke);
}

.page-products .text-link {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .text-link:hover,
.page-products .text-link:focus-visible {
  color: var(--lime);
}

.page-products .doc-aside {
  align-content: start;
}

.page-products .doc-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
}

.page-products .doc-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 520px;
}

.page-products .version-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(200, 255, 61, 0.34);
  border-radius: var(--radius);
  background: rgba(200, 255, 61, 0.06);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-products .version-sep {
  color: var(--smoke);
}

.page-products .compat-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.page-products .compat-scroll:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .compat-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.page-products .compat-caption {
  padding: 12px 16px 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--smoke);
}

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

.page-products .compat-table thead th {
  background: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sand);
}

.page-products .compat-table tbody th {
  font-weight: 800;
  color: var(--paper);
  white-space: nowrap;
}

.page-products .compat-table tbody td {
  color: var(--sand);
  line-height: 1.68;
}

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

.page-products .changelog {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
}

.page-products .changelog-summary {
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--paper);
}

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

.page-products .changelog-summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .changelog-body {
  padding: 0 18px 18px;
}

.page-products .changelog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .changelog-list li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .changelog-list li:last-child {
  border-bottom: 0;
}

.page-products .changelog-list span {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--warm);
  padding-top: 2px;
}

.page-products .changelog-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--sand);
}

.page-products .next-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .next-steps a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink-700);
  color: var(--paper);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .next-steps a span {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--smoke);
  transition: color 0.18s var(--ease);
}

.page-products .next-steps a:hover,
.page-products .next-steps a:focus-visible {
  background: var(--ink-600);
  color: var(--lime);
}

.page-products .next-steps a:hover span,
.page-products .next-steps a:focus-visible span {
  color: var(--lime);
}

@media (min-width: 700px) {
  .page-products .intro-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .intro-facts > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-products .tool-tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (min-width: 960px) {
  .page-products .desk-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .mobile-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr);
    align-items: start;
  }

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

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

  .page-products .doc-aside {
    position: sticky;
    top: 96px;
  }

  .page-products .tool-panel-title {
    max-width: 30ch;
  }
}

@media (min-width: 1180px) {
  .page-products .next-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .next-steps a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tool-tab,
  .page-products .chip,
  .page-products .next-steps a,
  .page-products .next-steps a span {
    transition: none;
  }
}