.page-products {
  --pp-paper-muted: #5E5A54;
  --pp-cold-muted: #57606B;
  --pp-hairline-paper: #DCD1C0;
  --pp-hairline-cold: #D6DAE1;
  --pp-soft: #C6CBD2;
  background: var(--charcoal);
  color: var(--cold);
  overflow-x: clip;
  font-family: var(--font-body);
}

.page-products .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- hero ---------- */
.page-products .pp-hero {
  position: relative;
  padding: clamp(18px, 4vw, 34px) 0 clamp(30px, 5vw, 56px);
  background:
    radial-gradient(130% 100% at 92% -10%, rgba(255, 90, 31, 0.24), transparent 58%),
    linear-gradient(180deg, var(--ink), var(--charcoal));
  border-bottom: 1px solid var(--line);
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ember) 0 34%, var(--mint) 34% 46%, transparent 46%);
}

.page-products .pp-label {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-products .pp-hero-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(29px, 6.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-products .pp-hero-lede {
  margin: 16px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .kit-tabs {
  display: flex;
  gap: 8px;
  margin-top: clamp(24px, 5vw, 40px);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-products .kit-tabs::-webkit-scrollbar {
  display: none;
}

.page-products .kit-tab {
  flex: 0 0 auto;
  min-width: 172px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-bottom: 3px solid transparent;
  background: rgba(246, 247, 249, 0.04);
  color: var(--cold);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.page-products .kit-tab:hover,
.page-products .kit-tab:focus-visible {
  border-bottom-color: var(--ember);
  background: rgba(255, 90, 31, 0.12);
}

.page-products .kit-tab:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-products .kit-tab-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-products .kit-tab-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .kit-tab-line {
  font-size: 12px;
  line-height: 1.5;
  color: var(--steel);
}

/* ---------- shared section shell ---------- */
.page-products .pp-section {
  padding: clamp(40px, 7vw, 76px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}

.page-products .pp-section--paper {
  --muted: var(--pp-paper-muted);
  --hairline: var(--pp-hairline-paper);
  background: var(--paper);
  color: #14161A;
  border-top-color: var(--pp-hairline-paper);
}

.page-products .pp-section--cold {
  --muted: var(--pp-cold-muted);
  --hairline: var(--pp-hairline-cold);
  background: var(--cold);
  color: #14161A;
  border-top-color: var(--pp-hairline-cold);
}

.page-products .pp-section--ink {
  --hairline: #1D2128;
  background: var(--ink);
}

.page-products .pp-head {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-bottom: clamp(20px, 3.5vw, 34px);
}

.page-products .pp-index {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ember);
  padding-top: 8px;
}

.page-products .pp-head-body .pp-label {
  margin-top: 0;
}

.page-products .pp-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.page-products .pp-note {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

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

.page-products .tool-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-areas:
    "num name"
    "num problem"
    "num result";
  gap: 2px 12px;
  padding: 16px 2px 18px;
  border-bottom: 1px solid var(--line);
}

.page-products .tool-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mint);
  padding-top: 4px;
}

.page-products .tool-name {
  grid-area: name;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .tool-problem {
  grid-area: problem;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--steel);
}

.page-products .tool-result {
  grid-area: result;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mint);
}

/* ---------- entry strip section ---------- */
.page-products .entry-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
}

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

.page-products .entry-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: #FBF7F1;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ember);
}

.page-products .entry-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ember-deep);
  padding-top: 3px;
}

.page-products .entry-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .entry-text {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pp-paper-muted);
}

.page-products .entry-paragraph {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 58ch;
  color: #2A2C30;
}

.page-products .entry-paragraph a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .entry-figure {
  margin: 0;
}

.page-products .shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #0C0E11;
}

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

.page-products .shot--lean {
  clip-path: polygon(0 0, 100% 2.2%, 100% 100%, 0 97.8%);
}

.page-products .shot--wide {
  clip-path: polygon(0 1.4%, 100% 0, 100% 100%, 0 98.6%);
}

.page-products .shot-cap {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- schedule ---------- */
.page-products .schedule-shot {
  margin-bottom: clamp(20px, 3.5vw, 32px);
}

.page-products .schedule-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .schedule-cols {
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3.4vw, 30px);
}

.page-products .schedule-card {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ember-deep);
  background: rgba(246, 247, 249, 0.035);
}

.page-products .schedule-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .schedule-card p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

/* ---------- board & reels ---------- */
.page-products .board-scroll,
.page-products .scene-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .board-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-products .board-caption,
.page-products .scene-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .board-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.page-products .board-table td {
  padding: 12px;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--hairline);
}

.page-products .board-ts {
  color: var(--ember-deep);
  font-weight: 600;
}

.page-products .reel-head {
  margin-top: clamp(24px, 4vw, 38px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.page-products .reel-heading {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .reel-note {
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .board-filter {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  min-height: 40px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #BFC5CE;
  color: #14161A;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.page-products .board-filter:hover {
  background: #E7EBF0;
}

.page-products .board-filter:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-products .board-filter[aria-pressed="true"] {
  background: var(--ember);
  border-color: var(--ember-deep);
  color: #14161A;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--mint);
}

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

.page-products .reel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ember);
}

.page-products .reel-round {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--amber);
  color: #14161A;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .reel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.page-products .reel-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--pp-cold-muted);
}

.page-products .reel-stamp {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ember-deep);
}

/* ---------- export ---------- */
.page-products .export-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
}

.page-products .export-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .export-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}

.page-products .export-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  border-left: 1px dashed var(--line);
}

.page-products .export-step:last-child {
  padding-bottom: 0;
}

.page-products .export-step:last-child::before {
  display: none;
}

.page-products .export-step-num {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.page-products .export-step-title {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .export-step-body p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .export-paragraph {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .export-figure {
  margin: 0;
}

/* ---------- flow ---------- */
.page-products .flow-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .flow-step {
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  background: rgba(246, 247, 249, 0.03);
}

.page-products .flow-step--last {
  border-color: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint);
}

.page-products .flow-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  color: var(--ember);
  letter-spacing: 0.02em;
}

.page-products .flow-title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .flow-text {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .flow-gain {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mint);
}

/* ---------- devices ---------- */
.page-products .device-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 38px);
}

.page-products .device-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 14px;
  background: #FBF7F1;
  border: 1px solid var(--hairline);
}

.page-products .device {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 7px;
  border: 2px solid #14161A;
  background: #FFFFFF;
}

.page-products .device--phone {
  width: 76px;
  aspect-ratio: 9 / 19;
}

.page-products .device--tablet {
  width: 118px;
  aspect-ratio: 4 / 3;
}

.page-products .device--desk {
  width: 172px;
  aspect-ratio: 16 / 10;
}

.page-products .device-bar {
  display: block;
  height: 6px;
  background: #DFE3E9;
}

.page-products .device-bar--strong {
  background: var(--ember);
}

.page-products .device-bar--short {
  width: 62%;
}

.page-products .device-cap {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pp-paper-muted);
}

.page-products .device-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-products .device-item {
  padding-left: 12px;
  border-left: 3px solid var(--ember-deep);
}

.page-products .device-item dt {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .device-item dd {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--pp-paper-muted);
}

.page-products .device-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.8;
  color: #2A2C30;
}

.page-products .device-figure {
  margin: clamp(22px, 3.6vw, 34px) 0 0;
}

/* ---------- scenes ---------- */
.page-products .scene-figure {
  margin: 0 0 clamp(20px, 3.4vw, 30px);
}

.page-products .scene-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--line);
}

.page-products .scene-table th {
  text-align: left;
  padding: 11px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .scene-table td {
  padding: 13px 12px;
  line-height: 1.65;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.page-products .scene-table tbody tr:nth-child(even) {
  background: rgba(246, 247, 249, 0.045);
}

.page-products .scene-table tbody tr td:first-child {
  font-weight: 800;
  color: var(--cold);
}

.page-products .scene-outro {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .scene-outro a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .scene-outro a:hover {
  color: var(--amber);
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-products .schedule-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 860px) {
  .page-products .pp-head {
    grid-template-columns: 52px 1fr;
    gap: 16px;
  }

  .page-products .kit-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    gap: 10px;
  }

  .page-products .tool-row {
    grid-template-columns: 52px minmax(170px, 0.9fr) 1.35fr 1.35fr;
    grid-template-areas: "num name problem result";
    align-items: baseline;
    gap: 0 20px;
    padding: 18px 4px;
  }

  .page-products .tool-num {
    padding-top: 0;
  }

  .page-products .tool-problem,
  .page-products .tool-result {
    margin-top: 0;
  }

  .page-products .entry-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

  .page-products .export-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-products .device-grid {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }

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

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

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

@media (min-width: 1080px) {
  .page-products .pp-hero-title {
    max-width: 18ch;
  }

  .page-products .schedule-cols {
    gap: 18px;
  }
}


<main id="main-content" class="page-products">
  <section class="pp-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a href="/">首页</a></li>
          <li class="breadcrumb-sep" aria-hidden="true">/</li>
          <li class="breadcrumb-item breadcrumb-current" aria-current="page">观赛工具</li>
        </ol>
      </nav>
      <p class="pp-label">Toolkit · 观赛工具</p>
      <h1 class="pp-hero-title">入口、赛程、榜单、导出，四个工具把一晚两场排明白</h1>
      <p class="pp-hero-lede">火博体育把球迷最常做的四件事收成了四个能直接上手的工具：手机顶部那条入口带让你随时跳回原位，赛程中心先告诉你两场之间还剩多少分钟，专栏榜单按时间倒序翻出阵容变化，比赛页底部的导出模块把需要的段落整段留住。下面按你实际会遇到的顺序逐个讲清怎么用。</p>
      <div class="kit-tabs" aria-label="工具快速定位">
        <a class="kit-tab" href="#tool-entry">
          <span class="kit-tab-num">01</span>
          <span class="kit-tab-label">移动端入口对照</span>
          <span class="kit-tab-line">四个入口并排，切页不迷路</span>
        </a>
        <a class="kit-tab" href="#tool-schedule">
          <span class="kit-tab-num">02</span>
          <span class="kit-tab-label">赛程中心</span>
          <span class="kit-tab-line">先看两场间隔分钟数</span>
        </a>
        <a class="kit-tab" href="#tool-board">
          <span class="kit-tab-num">03</span>
          <span class="kit-tab-label">榜单与集锦</span>
          <span class="kit-tab-line">倒序看变动，按轮次回看</span>
        </a>
        <a class="kit-tab" href="#tool-export">
          <span class="kit-tab-num">04</span>
          <span class="kit-tab-label">资讯导出</span>
          <span class="kit-tab-line">比赛页底部，长按即存</span>
        </a>
      </div>
    </div>
  </section>

  <section class="pp-section" id="tool-overview" aria-labelledby="h-overview">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">01</span>
        <div class="pp-head-body">
          <p class="pp-label">Tool Overview</p>
          <h2 class="pp-title" id="h-overview">一件工具管一件事</h2>
          <p class="pp-note">四个工具各自对应观赛时的一个具体卡点。先找到你卡在哪一步，再看下面那一节。</p>
        </div>
      </div>
      <ul class="tool-index">
        <li class="tool-row">
          <span class="tool-num" aria-hidden="true">01</span>
          <h3 class="tool-name">移动端入口对照</h3>
          <p class="tool-problem">想看的入口散在页面各处，来回翻找会打断正在看的东西</p>
          <p class="tool-result">首页顶部一条横带，四个入口并排，手指不用往上划去找导航</p>
        </li>
        <li class="tool-row">
          <span class="tool-num" aria-hidden="true">02</span>
          <h3 class="tool-name">赛程中心</h3>
          <p class="tool-problem">两场之间到底隔多久，光看开赛时间算不出来</p>
          <p class="tool-result">开赛、结束与间隔分钟数并排给出，中间那段空档一眼可见</p>
        </li>
        <li class="tool-row">
          <span class="tool-num" aria-hidden="true">03</span>
          <h3 class="tool-name">专栏榜单与集锦</h3>
          <p class="tool-problem">想知道近几轮谁换了人、哪一球值得回看，一条条翻太慢</p>
          <p class="tool-result">阵容变动按时间倒序排成表，集锦带时间戳与轮次角标</p>
        </li>
        <li class="tool-row">
          <span class="tool-num" aria-hidden="true">04</span>
          <h3 class="tool-name">资讯导出</h3>
          <p class="tool-problem">看到一段有用的阵容说明，截图拼长图又乱又费事</p>
          <p class="tool-result">比赛页底部长按保存，图片或文本都保留段落与轮次标记</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="pp-section pp-section--paper" id="tool-entry" aria-labelledby="h-entry">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">02</span>
        <div class="pp-head-body">
          <p class="pp-label">Entry Strip</p>
          <h2 class="pp-title" id="h-entry">锚在首页顶部的那排入口</h2>
          <p class="pp-note">四个入口各管一件小事。下面写清各自通向哪里，以及什么情况下该点它。</p>
        </div>
      </div>
      <div class="entry-grid">
        <div class="entry-copy">
          <ul class="entry-list">
            <li class="entry-item">
              <span class="entry-idx" aria-hidden="true">A</span>
              <div>
                <h3 class="entry-name">当日赛程</h3>
                <p class="entry-text">今天两场几点开、几点完、中间隔多久。出门前扫一眼就够，不用打开日历自己算。</p>
              </div>
            </li>
            <li class="entry-item">
              <span class="entry-idx" aria-hidden="true">B</span>
              <div>
                <h3 class="entry-name">专栏榜单</h3>
                <p class="entry-text">近 5 轮谁换了首发、哪一轮的集锦值得翻。赛后统一看，不影响你比赛时的注意力。</p>
              </div>
            </li>
            <li class="entry-item">
              <span class="entry-idx" aria-hidden="true">C</span>
              <div>
                <h3 class="entry-name">集锦回看</h3>
                <p class="entry-text">按轮次直接落到具体一球，不用从头拖进度条去找那两分钟。</p>
              </div>
            </li>
            <li class="entry-item">
              <span class="entry-idx" aria-hidden="true">D</span>
              <div>
                <h3 class="entry-name">资讯导出</h3>
                <p class="entry-text">把比赛页底部的段落与轮次标记整段存下来，之后随时翻出来对照。</p>
              </div>
            </li>
          </ul>
          <p class="entry-paragraph">手机上四个入口排在一条线上，放不下时横向滑动，标签不会被挤成第二行。页面往下滚，这条带子会压扁后吸在顶部，正文能多留出一点高度；往上滑回顶部附近，它又恢复原本的样子。</p>
          <p class="entry-paragraph">记不住也没关系，就一句话：赛前点当日赛程，赛后点榜单和集锦，想留档就点导出。近 5 轮的完整条目都在<a href="/journal/">赛事专栏</a>里，从榜单入口过去就是。</p>
        </div>
        <figure class="entry-figure">
          <div class="shot shot--lean">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="夜间看台的虚化灯光前，一只手握着竖屏手机，屏幕上并排显示四个入口标签" loading="lazy" decoding="async">
          </div>
          <figcaption class="shot-cap">周末连看两场时，入口带一直停在拇指够得到的位置</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section" id="tool-schedule" aria-labelledby="h-schedule">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">03</span>
        <div class="pp-head-body">
          <p class="pp-label">Schedule Center</p>
          <h2 class="pp-title" id="h-schedule">先看间隔分钟数，再决定要不要连轴看</h2>
          <p class="pp-note">赛程中心默认把当天的两场并排放在一处，开赛、结束和中间的空档都写成现成的数字。</p>
        </div>
      </div>
      <div class="schedule-shot">
        <div class="shot shot--wide shot--lean">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="宽幅屏幕上横向铺开的比分条与时间刻度，数字使用等宽字体排列" loading="lazy" decoding="async">
        </div>
      </div>
      <div class="schedule-body">
        <p class="schedule-lead">默认视图只有当天两场。第一场几点开、几点结束，第二场几点开，中间那行写着两场的间隔分钟数。这个数字直接决定你还有没有时间下楼买点吃的，或者要不要先把第二场的回看位置记好。</p>
        <div class="schedule-cols">
          <article class="schedule-card">
            <h3 class="schedule-card-title">间隔怎么读</h3>
            <p>第一场结束到第二场开赛之间那一段就是间隔。间隔短，两场连着看更顺；间隔长，中间正好放一顿饭或者一段通勤。</p>
          </article>
          <article class="schedule-card">
            <h3 class="schedule-card-title">一周的密度提示</h3>
            <p>每周一上的当周赛程密度提示会单独标出连续两天出赛的球队。同一支队伍两天都有比赛，第二场未必需要从开场看到结束，把集锦留到第二天通勤路上更省时间。</p>
          </article>
          <article class="schedule-card">
            <h3 class="schedule-card-title">时间临时有变</h3>
            <p>赛程时间跟着各联赛的官方公告走，公告一调整，条目上会多出一个调整标记。看到标记照着重排一遍就好，不用自己去几个地方对时间。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="pp-section pp-section--cold" id="tool-board" aria-labelledby="h-board">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">04</span>
        <div class="pp-head-body">
          <p class="pp-label">Board &amp; Reels</p>
          <h2 class="pp-title" id="h-board">榜单看变化，集锦看关键球</h2>
          <p class="pp-note">阵容变动按时间倒序排进一张表，想看哪一轮的球，就到下面找到对应角标的集锦。</p>
        </div>
      </div>
      <div class="board-scroll">
        <table class="board-table">
          <caption class="board-caption">近 5 轮阵容变动 · 时间由近及远</caption>
          <thead>
            <tr>
              <th scope="col">时间</th>
              <th scope="col">项目</th>
              <th scope="col">变动</th>
              <th scope="col">集锦</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="mono">本轮赛后</span></td>
              <td>足球</td>
              <td>主力中卫累积停赛，青训小将顶上首发</td>
              <td><span class="mono board-ts">02:14</span></td>
            </tr>
            <tr>
              <td><span class="mono">昨日</span></td>
              <td>篮球</td>
              <td>后场双人轮换，替补控卫出场时间上调</td>
              <td><span class="mono board-ts">01:36</span></td>
            </tr>
            <tr>
              <td><span class="mono">本轮赛前</span></td>
              <td>网球</td>
              <td>种子选手退赛，签表顺位整体前移</td>
              <td><span class="mono board-ts">00:58</span></td>
            </tr>
            <tr>
              <td><span class="mono">上周</span></td>
              <td>排球</td>
              <td>主攻手伤停两轮后回归，接应位置改回原配置</td>
              <td><span class="mono board-ts">01:41</span></td>
            </tr>
            <tr>
              <td><span class="mono">上周</span></td>
              <td>羽毛球</td>
              <td>双打组合拆对，新搭档首次登场</td>
              <td><span class="mono board-ts">02:05</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="reel-head">
        <h3 class="reel-heading">集锦卡片：先认轮次，再看时间戳</h3>
        <p class="reel-note">左上角标是轮次，右下角标是时间戳。两张角标一对上，你就能在十分钟里把一场比赛的关键球补齐。</p>
      </div>
      <div class="board-filters" data-filter-bar role="group" aria-label="按项目筛选集锦">
        <button type="button" class="board-filter" data-filter="*" aria-pressed="true">全部</button>
        <button type="button" class="board-filter" data-filter="足球" aria-pressed="false">足球</button>
        <button type="button" class="board-filter" data-filter="篮球" aria-pressed="false">篮球</button>
      </div>
      <ul class="reel-grid">
        <li class="reel-card" data-filter-item data-tags="足球">
          <span class="reel-round">第 18 轮</span>
          <h4 class="reel-title">补时阶段的定位球</h4>
          <p class="reel-text">前点一蹭，后点包抄把比分追平，整段只有四十秒。</p>
          <span class="reel-stamp mono">02:14</span>
        </li>
        <li class="reel-card" data-filter-item data-tags="篮球">
          <span class="reel-round">第 18 轮</span>
          <h4 class="reel-title">替补控卫的连续三次突破</h4>
          <p class="reel-text">出场时间上调之后的第一段表现，节奏明显加快。</p>
          <span class="reel-stamp mono">01:36</span>
        </li>
        <li class="reel-card" data-filter-item data-tags="足球">
          <span class="reel-round">第 17 轮</span>
          <h4 class="reel-title">中卫换人后的第一次防线站位</h4>
          <p class="reel-text">青训小将上场后的第一个回合，位置感可以单独看一遍。</p>
          <span class="reel-stamp mono">00:47</span>
        </li>
        <li class="reel-card" data-filter-item data-tags="篮球">
          <span class="reel-round">第 17 轮</span>
          <h4 class="reel-title">末节最后两分钟的攻防转换</h4>
          <p class="reel-text">两次抢断连着打成，比分在这一段被拉开。</p>
          <span class="reel-stamp mono">01:52</span>
        </li>
        <li class="reel-card" data-filter-item data-tags="足球">
          <span class="reel-round">第 16 轮</span>
          <h4 class="reel-title">边路连续两次换位</h4>
          <p class="reel-text">同一侧两次交叉跑动，解说提到的变化在这一段最清楚。</p>
          <span class="reel-stamp mono">01:08</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="pp-section" id="tool-export" aria-labelledby="h-export">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">05</span>
        <div class="pp-head-body">
          <p class="pp-label">Export Module</p>
          <h2 class="pp-title" id="h-export">比赛页底部的国内体育资讯导出路径</h2>
          <p class="pp-note">看到一段想留底的阵容说明，不用再截图拼长图，按住模块就能存下来。</p>
        </div>
      </div>
      <div class="export-grid">
        <div class="export-copy">
          <ol class="export-steps">
            <li class="export-step">
              <span class="export-step-num" aria-hidden="true">01</span>
              <div class="export-step-body">
                <h3 class="export-step-title">滚到比赛页最底部</h3>
                <p>任意一场比赛的页面，最下面固定着一块资讯导出区域，位置不会随内容长短变化。</p>
              </div>
            </li>
            <li class="export-step">
              <span class="export-step-num" aria-hidden="true">02</span>
              <div class="export-step-body">
                <h3 class="export-step-title">按住模块约 600 毫秒</h3>
                <p>按住不放，保存选项会浮出来；松手即取消，不会误存。</p>
              </div>
            </li>
            <li class="export-step">
              <span class="export-step-num" aria-hidden="true">03</span>
              <div class="export-step-body">
                <h3 class="export-step-title">选图片或文本</h3>
                <p>图片默认按 1080 像素宽生成；文本保持段落顺序，两种情况都带着轮次标记。</p>
              </div>
            </li>
            <li class="export-step">
              <span class="export-step-num" aria-hidden="true">04</span>
              <div class="export-step-body">
                <h3 class="export-step-title">存进相册或笔记</h3>
                <p>之后对着轮次标记就能翻回原场次，不用再整站搜一遍。</p>
              </div>
            </li>
          </ol>
          <p class="export-paragraph">导出的内容保留原文段落与轮次标记，段落顺序不会被打乱，粘到任何笔记里都能和原场次对上号。自己留着随时看没问题；发到群里或自己的账号上，记得带上来源和轮次，方便别人回查。</p>
        </div>
        <figure class="export-figure">
          <div class="shot shot--lean">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="特写画面中一只手长按手机屏幕底部的模块，屏幕浮出保存选项" loading="lazy" decoding="async">
          </div>
          <figcaption class="shot-cap">长按的位置就在比赛页最底部，内容再长也不会被挤走</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pp-section pp-section--ink" id="tool-flow" aria-labelledby="h-flow">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">06</span>
        <div class="pp-head-body">
          <p class="pp-label">First Run</p>
          <h2 class="pp-title" id="h-flow">第一次用，按这四步走一遍</h2>
          <p class="pp-note">从打开首页到把一段资讯存下来，正常操作下来不到两分钟。</p>
        </div>
      </div>
      <ol class="flow-track">
        <li class="flow-step">
          <span class="flow-num" aria-hidden="true">01</span>
          <h3 class="flow-title">选入口</h3>
          <p class="flow-text">点首页顶部带子里的当日赛程，先确认今晚两场的开赛时间。</p>
          <p class="flow-gain">结果：今晚看什么，心里有数了。</p>
        </li>
        <li class="flow-step">
          <span class="flow-num" aria-hidden="true">02</span>
          <h3 class="flow-title">排赛程</h3>
          <p class="flow-text">在赛程中心看两场的间隔分钟数，把吃饭、休息和补觉插进空档里。</p>
          <p class="flow-gain">结果：两场不撞车，空档也不空等。</p>
        </li>
        <li class="flow-step">
          <span class="flow-num" aria-hidden="true">03</span>
          <h3 class="flow-title">看榜单</h3>
          <p class="flow-text">赛后到专栏榜单翻倒序列表，找到你关心的那支队伍的阵容变动。</p>
          <p class="flow-gain">结果：谁换人、哪一球值得看，一次看完。</p>
        </li>
        <li class="flow-step flow-step--last">
          <span class="flow-num" aria-hidden="true">04</span>
          <h3 class="flow-title">存资讯</h3>
          <p class="flow-text">打开对应比赛页，滚到底部长按导出模块，把需要的段落留下来。</p>
          <p class="flow-gain">结果：带轮次标记的原文，随时能翻出来。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="pp-section pp-section--paper" id="tool-devices" aria-labelledby="h-devices">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">07</span>
        <div class="pp-head-body">
          <p class="pp-label">Devices &amp; Versions</p>
          <h2 class="pp-title" id="h-devices">手机、平板、桌面，各用各的顺手</h2>
          <p class="pp-note">同一批工具会在不同屏幕上重新排布，你不用为换个设备再学一遍。</p>
        </div>
      </div>
      <div class="device-grid">
        <div class="device-panel">
          <div class="device-row">
            <div class="device device--phone">
              <span class="device-bar device-bar--strong"></span>
              <span class="device-bar"></span>
              <span class="device-bar"></span>
              <span class="device-bar device-bar--short"></span>
            </div>
            <div class="device device--tablet">
              <span class="device-bar device-bar--strong"></span>
              <span class="device-bar"></span>
              <span class="device-bar"></span>
            </div>
            <div class="device device--desk">
              <span class="device-bar device-bar--strong"></span>
              <span class="device-bar"></span>
              <span class="device-bar"></span>
              <span class="device-bar device-bar--short"></span>
            </div>
          </div>
          <p class="device-cap">从左到右：手机单列、平板双栏、桌面宽窄章节交替</p>
        </div>
        <div class="device-copy">
          <dl class="device-list">
            <div class="device-item">
              <dt>手机</dt>
              <dd>单列到底，入口带横向滑动，赛程与集锦一张接一张往下排。通勤路上一只手就能翻完。</dd>
            </div>
            <div class="device-item">
              <dt>平板</dt>
              <dd>左边窄栏是赛程时间轴，右边宽栏放榜单和集锦卡片，两栏可以同屏对照。</dd>
            </div>
            <div class="device-item">
              <dt>桌面</dt>
              <dd>内容收在 1280 像素以内，宽窄章节交替出现，长时间看榜单眼睛不容易累。</dd>
            </div>
          </dl>
          <p class="device-note">目前运行 v3.6 版本，支持项目、联赛、轮次三级筛选，也支持在紧凑与舒适两种行高之间切换，选择会记在这台设备上。往前翻：v1.0 先上线赛程中心，v2.0 加入入口对照带，v3.0 才有的导出模块。</p>
        </div>
      </div>
      <figure class="device-figure">
        <div class="shot shot--lean">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="平板横放在桌面，左侧窄栏显示赛程时间轴，右侧宽栏排着榜单与集锦卡片" loading="lazy" decoding="async">
        </div>
        <figcaption class="shot-cap">平板横过来时，时间轴和榜单会同时留在视野里</figcaption>
      </figure>
    </div>
  </section>

  <section class="pp-section" id="tool-scenes" aria-labelledby="h-scenes">
    <div class="container">
      <div class="pp-head">
        <span class="pp-index" aria-hidden="true">08</span>
        <div class="pp-head-body">
          <p class="pp-label">Scenarios</p>
          <h2 class="pp-title" id="h-scenes">四类常见场景，各配一套工具组合</h2>
          <p class="pp-note">照着你自己的处境对一行，工具组合和使用要点都在里面。</p>
        </div>
      </div>
      <div class="scene-figure">
        <div class="shot shot--lean">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暖橙色光影下，秒表、护腕与球拍手柄的局部特写摆在一起" loading="lazy" decoding="async">
        </div>
      </div>
      <div class="scene-scroll">
        <table class="scene-table">
          <caption class="scene-caption">场景对照 · 按你现在的处境选</caption>
          <thead>
            <tr>
              <th scope="col">场景</th>
              <th scope="col">工具组合</th>
              <th scope="col">怎么做</th>
              <th scope="col">你会得到</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>通勤路上</td>
              <td>入口对照 + 赛程中心</td>
              <td>点当日赛程，看两场开赛时间与间隔</td>
              <td>到站前就知道今晚几点开电视</td>
            </tr>
            <tr>
              <td>周末连看</td>
              <td>赛程中心 + 集锦回看</td>
              <td>先看间隔分钟数，赛后再按轮次翻集锦</td>
              <td>两场不撞车，漏掉的球也能补回来</td>
            </tr>
            <tr>
              <td>赛后回看</td>
              <td>专栏榜单 + 集锦回看</td>
              <td>在倒序榜单里找变动，记下轮次角标</td>
              <td>十分钟看完关键球</td>
            </tr>
            <tr>
              <td>内容合作</td>
              <td>资讯导出 + 咨询通道</td>
              <td>长按保存原始段落，合作细节走咨询通道</td>
              <td>拿到带轮次标记的原文，沟通时直接引用</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="scene-outro">还是拿不准某个按钮在哪？<a href="/faqs/">常见问答</a>按入口、赛程、榜单、导出四类整理了最常见的问题。需要内容合作、投稿或者提交更正，可以走<a href="/inquiry/">咨询通道</a>，把场次和页面链接一并写上，回复会快很多。</p>
    </div>
  </section>
</main>

.page-products {
  --pp-paper-muted: #5E5A54;
  --pp-cold-muted: #57606B;
  --pp-hairline-paper: #DCD1C0;
  --pp-hairline-cold: #D6DAE1;
  --pp-soft: #C6CBD2;
  background: var(--charcoal);
  color: var(--cold);
  overflow-x: clip;
  font-family: var(--font-body);
}

.page-products .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- hero ---------- */
.page-products .pp-hero {
  position: relative;
  padding: clamp(18px, 4vw, 34px) 0 clamp(30px, 5vw, 56px);
  background:
    radial-gradient(130% 100% at 92% -10%, rgba(255, 90, 31, 0.24), transparent 58%),
    linear-gradient(180deg, var(--ink), var(--charcoal));
  border-bottom: 1px solid var(--line);
}

.page-products .pp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ember) 0 34%, var(--mint) 34% 46%, transparent 46%);
}

.page-products .pp-label {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-products .pp-hero-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(29px, 6.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-products .pp-hero-lede {
  margin: 16px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .kit-tabs {
  display: flex;
  gap: 8px;
  margin-top: clamp(24px, 5vw, 40px);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-products .kit-tabs::-webkit-scrollbar {
  display: none;
}

.page-products .kit-tab {
  flex: 0 0 auto;
  min-width: 172px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-bottom: 3px solid transparent;
  background: rgba(246, 247, 249, 0.04);
  color: var(--cold);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.page-products .kit-tab:hover,
.page-products .kit-tab:focus-visible {
  border-bottom-color: var(--ember);
  background: rgba(255, 90, 31, 0.12);
}

.page-products .kit-tab:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-products .kit-tab-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-products .kit-tab-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-products .kit-tab-line {
  font-size: 12px;
  line-height: 1.5;
  color: var(--steel);
}

/* ---------- shared section shell ---------- */
.page-products .pp-section {
  padding: clamp(40px, 7vw, 76px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}

.page-products .pp-section--paper {
  --muted: var(--pp-paper-muted);
  --hairline: var(--pp-hairline-paper);
  background: var(--paper);
  color: #14161A;
  border-top-color: var(--pp-hairline-paper);
}

.page-products .pp-section--cold {
  --muted: var(--pp-cold-muted);
  --hairline: var(--pp-hairline-cold);
  background: var(--cold);
  color: #14161A;
  border-top-color: var(--pp-hairline-cold);
}

.page-products .pp-section--ink {
  --hairline: #1D2128;
  background: var(--ink);
}

.page-products .pp-head {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-bottom: clamp(20px, 3.5vw, 34px);
}

.page-products .pp-index {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ember);
  padding-top: 8px;
}

.page-products .pp-head-body .pp-label {
  margin-top: 0;
}

.page-products .pp-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.page-products .pp-note {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

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

.page-products .tool-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-areas:
    "num name"
    "num problem"
    "num result";
  gap: 2px 12px;
  padding: 16px 2px 18px;
  border-bottom: 1px solid var(--line);
}

.page-products .tool-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mint);
  padding-top: 4px;
}

.page-products .tool-name {
  grid-area: name;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .tool-problem {
  grid-area: problem;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--steel);
}

.page-products .tool-result {
  grid-area: result;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mint);
}

/* ---------- entry strip section ---------- */
.page-products .entry-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
}

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

.page-products .entry-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: #FBF7F1;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ember);
}

.page-products .entry-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ember-deep);
  padding-top: 3px;
}

.page-products .entry-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .entry-text {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pp-paper-muted);
}

.page-products .entry-paragraph {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: #2A2C30;
}

.page-products .entry-paragraph a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .entry-figure {
  margin: 0;
}

.page-products .shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #0C0E11;
}

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

.page-products .shot--lean {
  clip-path: polygon(0 0, 100% 2.2%, 100% 100%, 0 97.8%);
}

.page-products .shot--wide {
  clip-path: polygon(0 1.4%, 100% 0, 100% 100%, 0 98.6%);
}

.page-products .shot-cap {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- schedule ---------- */
.page-products .schedule-shot {
  margin-bottom: clamp(20px, 3.5vw, 32px);
}

.page-products .schedule-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .schedule-cols {
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3.4vw, 30px);
}

.page-products .schedule-card {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ember-deep);
  background: rgba(246, 247, 249, 0.035);
}

.page-products .schedule-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .schedule-card p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

/* ---------- board & reels ---------- */
.page-products .board-scroll,
.page-products .scene-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .board-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-products .board-caption,
.page-products .scene-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-products .board-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.page-products .board-table td {
  padding: 12px;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--hairline);
}

.page-products .board-ts {
  color: var(--ember-deep);
  font-weight: 600;
}

.page-products .reel-head {
  margin-top: clamp(24px, 4vw, 38px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.page-products .reel-heading {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .reel-note {
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-products .board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products .board-filter {
  min-height: 40px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #BFC5CE;
  color: #14161A;
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.page-products .board-filter:hover {
  background: #E7EBF0;
}

.page-products .board-filter:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-products .board-filter[aria-pressed="true"] {
  background: var(--ember);
  border-color: var(--ember-deep);
  color: #14161A;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--mint);
}

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

.page-products .reel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ember);
}

.page-products .reel-round {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--amber);
  color: #14161A;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-products .reel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.page-products .reel-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--pp-cold-muted);
}

.page-products .reel-stamp {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ember-deep);
}

/* ---------- export ---------- */
.page-products .export-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
}

.page-products .export-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products .export-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}

.page-products .export-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  border-left: 1px dashed var(--line);
}

.page-products .export-step:last-child {
  padding-bottom: 0;
}

.page-products .export-step:last-child::before {
  display: none;
}

.page-products .export-step-num {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.page-products .export-step-title {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .export-step-body p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .export-paragraph {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .export-figure {
  margin: 0;
}

/* ---------- flow ---------- */
.page-products .flow-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .flow-step {
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  background: rgba(246, 247, 249, 0.03);
}

.page-products .flow-step--last {
  border-color: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint);
}

.page-products .flow-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  color: var(--ember);
  letter-spacing: 0.02em;
}

.page-products .flow-title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .flow-text {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

.page-products .flow-gain {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mint);
}

/* ---------- devices ---------- */
.page-products .device-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 38px);
}

.page-products .device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 14px;
  background: #FBF7F1;
  border: 1px solid var(--hairline);
}

.page-products .device {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 7px;
  border: 2px solid #14161A;
  background: #FFFFFF;
}

.page-products .device--phone {
  width: 76px;
  aspect-ratio: 9 / 19;
}

.page-products .device--tablet {
  width: 118px;
  aspect-ratio: 4 / 3;
}

.page-products .device--desk {
  width: 172px;
  aspect-ratio: 16 / 10;
}

.page-products .device-bar {
  display: block;
  height: 6px;
  background: #DFE3E9;
}

.page-products .device-bar--strong {
  background: var(--ember);
}

.page-products .device-bar--short {
  width: 62%;
}

.page-products .device-cap {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pp-paper-muted);
}

.page-products .device-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-products .device-item {
  padding-left: 12px;
  border-left: 3px solid var(--ember-deep);
}

.page-products .device-item dt {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-products .device-item dd {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--pp-paper-muted);
}

.page-products .device-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.8;
  color: #2A2C30;
}

.page-products .device-figure {
  margin: clamp(22px, 3.6vw, 34px) 0 0;
}

/* ---------- scenes ---------- */
.page-products .scene-figure {
  margin: 0 0 clamp(20px, 3.4vw, 30px);
}

.page-products .scene-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.page-products .scene-table th {
  text-align: left;
  padding: 11px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .scene-table td {
  padding: 13px 12px;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--line);
}

.page-products .scene-table tbody tr:nth-child(even) {
  background: rgba(246, 247, 249, 0.045);
}

.page-products .scene-table tbody tr td:first-child {
  font-weight: 800;
  color: var(--cold);
}

.page-products .scene-outro {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .scene-outro a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .scene-outro a:hover {
  color: var(--amber);
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-products .schedule-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 860px) {
  .page-products .pp-head {
    grid-template-columns: 52px 1fr;
    gap: 16px;
  }

  .page-products .kit-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .page-products .tool-row {
    grid-template-columns: 52px minmax(170px, 0.9fr) 1.35fr 1.35fr;
    grid-template-areas: "num name problem result";
    align-items: baseline;
    gap: 0 20px;
    padding: 18px 4px;
  }

  .page-products .tool-num {
    padding-top: 0;
  }

  .page-products .tool-problem,
  .page-products .tool-result {
    margin-top: 0;
  }

  .page-products .entry-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

  .page-products .export-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-products .device-grid {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }

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

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

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

@media (min-width: 1080px) {
  .page-products .pp-hero-title {
    max-width: 18ch;
  }

  .page-products .schedule-cols {
    gap: 18px;
  }
}