.page-products {
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-products .breadcrumbs {
  padding-block: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-products .breadcrumbs a {
  color: var(--mist);
  text-decoration: none;
}

.page-products .breadcrumbs a:hover,
.page-products .breadcrumbs a:focus-visible {
  color: var(--cyan);
}

/* ---------- hero ---------- */
.page-products .tools-hero {
  border-bottom: 2px solid var(--hairline);
  padding: clamp(1.8rem, 6vw, 4rem) 0 clamp(1.8rem, 5vw, 3rem);
  background-image:
    linear-gradient(155deg, rgba(67, 240, 207, 0.12), rgba(6, 26, 22, 0) 48%),
    repeating-linear-gradient(90deg, rgba(167, 222, 211, 0.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(167, 222, 211, 0.07) 0 1px, transparent 1px 72px);
}

.page-products .tools-hero__inner {
  position: relative;
}

.page-products .tools-hero h1 {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8.5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-shadow: 5px 5px 0 rgba(67, 240, 207, 0.16);
}

.page-products .tools-hero__lead {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: clamp(0.98rem, 2.4vw, 1.1rem);
  line-height: 1.85;
  color: var(--mist);
}

.page-products .tools-hero__quick {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}

.page-products .tools-hero__quick a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--hairline-strong);
  background: rgba(12, 42, 35, 0.75);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .tools-hero__quick a:hover,
.page-products .tools-hero__quick a:focus-visible {
  background: var(--cyan);
  color: var(--ink);
}

.page-products .tools-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  background: var(--hairline);
  border: 2px solid var(--hairline);
}

.page-products .stat {
  background: var(--panel);
  padding: 0.85rem 0.95rem;
  min-width: 0;
}

.page-products .stat dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--moss);
}

.page-products .stat dd {
  margin: 0.35rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.page-products .stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .stat--amber .stat__num {
  color: var(--amber);
}

.page-products .stat__unit {
  font-size: 0.76rem;
  color: var(--mist);
}

/* ---------- shell ---------- */
.page-products .tools-shell {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
  padding-top: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .tools-toc {
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  padding: 0.95rem;
}

.page-products .tools-toc__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.page-products .tools-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  font-size: 0.85rem;
  color: var(--mist);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .tools-toc__list a:hover,
.page-products .tools-toc__list a:focus-visible {
  border-color: var(--hairline-strong);
  color: var(--paper);
}

.page-products .tools-toc__list span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--cyan);
}

.page-products .tools-body {
  min-width: 0;
}

/* ---------- sections ---------- */
.page-products .tool-section {
  border-top: 2px solid var(--hairline);
  padding-block: clamp(1.7rem, 5vw, 3rem);
  scroll-margin-top: 1.5rem;
}

.page-products .tool-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-products .tool-section--panel {
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.1rem, 4vw, 1.9rem);
}

.page-products .tool-section--amber .tool-section__num {
  color: var(--signal);
}

.page-products .tool-section__head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--hairline);
}

.page-products .tool-section__num {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 700;
  color: var(--amber);
}

.page-products .tool-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 4.6vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-products .tool-section__lead {
  margin: 1rem 0 0;
  max-width: 66ch;
  color: var(--mist);
  line-height: 1.85;
  font-size: 0.97rem;
}

.page-products .tool-section__lead a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}

.page-products .tool-section__lead a:hover,
.page-products .tool-section__lead a:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- figures ---------- */
.page-products .tool-figure {
  margin: 0 0 1.4rem;
  border: 2px solid var(--hairline-strong);
  background: var(--panel-lift);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

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

.page-products .tool-figure--slant img {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.page-products .tool-figure__cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--moss);
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--hairline);
}

/* ---------- index list ---------- */
.page-products .tool-index {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 2px solid var(--hairline);
}

.page-products .tool-index__item {
  background: var(--panel);
  padding: 0.95rem;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.4rem 0.6rem;
  align-items: start;
}

.page-products .tool-index__num {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--cyan);
  padding-top: 0.15rem;
}

.page-products .tool-index__body {
  min-width: 0;
}

.page-products .tool-index__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-products .tool-index__desc {
  margin: 0.35rem 0 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.72;
}

.page-products .tool-index__item .tag {
  grid-column: 2;
  justify-self: start;
}

.page-products .tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

/* ---------- follow ---------- */
.page-products .follow-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.1rem;
}

.page-products .follow-copy p {
  margin: 0 0 0.9rem;
  max-width: 62ch;
  color: var(--mist);
  line-height: 1.85;
  font-size: 0.96rem;
}

.page-products .follow-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--moss);
  margin: 0;
}

.page-products .chip-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding: 0;
}

.page-products .chip {
  border: 1px solid var(--hairline-strong);
  padding: 0.28rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .follow-panel {
  border: 2px solid var(--hairline-strong);
  background: var(--ink);
  padding: 0.95rem;
  box-shadow: var(--shadow-hard);
  min-width: 0;
}

.page-products .follow-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-products .follow-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--panel);
  border-left: 3px solid var(--cyan);
}

.page-products .follow-item__name {
  font-weight: 700;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.page-products .follow-item__meta {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--moss);
}

.page-products .follow-item .tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.page-products .follow-panel__foot {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--moss);
}

/* ---------- split ---------- */
.page-products .split {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.1rem;
  align-items: start;
}

.page-products .split__text {
  min-width: 0;
}

.page-products .split__text .tool-section__lead {
  margin-top: 0;
}

.page-products .split__text .tool-section__lead + .tool-section__lead {
  margin-top: 1rem;
}

.page-products .bullets {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-products .bullets li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--paper);
  font-size: 0.94rem;
  line-height: 1.7;
}

.page-products .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.46rem;
  height: 0.46rem;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .split .tool-figure {
  margin-bottom: 0;
}

/* ---------- scorer ---------- */
.page-products .scorer-table {
  margin-top: 1.2rem;
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  overflow: hidden;
}

.page-products .scorer-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 3.2rem 3.1rem;
  gap: 0.35rem;
  align-items: center;
  padding: 0.58rem 0.65rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
}

.page-products .scorer-row--head {
  border-top: 0;
  background: var(--panel-lift);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--moss);
}

.page-products .scorer-row__rank {
  font-family: var(--font-mono);
  color: var(--amber);
}

.page-products .scorer-row__team {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-products .scorer-row__goals {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right;
  color: var(--paper);
}

.page-products .delta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: right;
}

.page-products .delta--up {
  color: var(--signal);
}

.page-products .delta--down,
.page-products .delta--flat {
  color: var(--moss);
}

.page-products .tool-figure--wide {
  margin-top: 1.3rem;
}

.page-products .tool-section--amber .scorer-table {
  border-color: rgba(245, 185, 76, 0.45);
}

/* ---------- search ---------- */
.page-products .search-mock {
  margin: 1rem 0;
  border: 2px solid var(--hairline-strong);
  background: var(--ink);
  padding: 0.7rem;
}

.page-products .search-mock__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist);
}

.page-products .search-mock__caret {
  color: var(--cyan);
}

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

.page-products .taglist .tag {
  border: 1px solid var(--hairline);
  padding: 0.24rem 0.5rem;
  color: var(--cyan);
}

/* ---------- downloads ---------- */
.page-products .pack-grid {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.page-products .pack-card {
  border: 2px solid var(--hairline);
  background: var(--ink);
  padding: 0.95rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.page-products .pack-card__ver {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-products .pack-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.page-products .pack-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--mist);
}

/* ---------- flow ---------- */
.page-products .flow-steps {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline-strong);
  border: 2px solid var(--hairline-strong);
}

.page-products .flow-step {
  background: var(--panel);
  padding: 1.05rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.9rem;
  align-items: baseline;
}

.page-products .flow-step__num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 0.9;
  color: var(--cyan);
}

.page-products .flow-step h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-products .flow-step p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- cta ---------- */
.page-products .tools-cta {
  margin-top: clamp(1.5rem, 5vw, 2.4rem);
  padding: clamp(1.15rem, 4vw, 1.9rem);
  border: 2px solid var(--hairline-strong);
  background: var(--indigo);
  box-shadow: var(--shadow-soft);
}

.page-products .tools-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
}

.page-products .tools-cta p {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--mist);
}

.page-products .tools-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.page-products .tools-cta__note {
  font-size: 0.78rem;
  color: var(--moss);
}

.page-products .tools-cta__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}

.page-products .tools-cta__note a:hover,
.page-products .tools-cta__note a:focus-visible {
  border-bottom-color: var(--cyan);
}

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

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

@media (min-width: 860px) {
  .page-products .split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.4rem, 3vw, 2.2rem);
  }

  .page-products .split--tall {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .page-products .follow-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.2rem, 3vw, 2rem);
  }

  .page-products .tool-index__item {
    grid-template-columns: 2.6rem minmax(0, 1fr) 9rem;
    align-items: center;
    padding: 1rem 1.1rem;
  }

  .page-products .tool-index__item .tag {
    grid-column: 3;
    justify-self: end;
  }

  .page-products .scorer-row {
    grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 4.5rem;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }

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

  .page-products .flow-step {
    padding: 1.25rem;
  }
}

@media (min-width: 960px) {
  .page-products .tools-shell {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .tools-toc {
    position: sticky;
    top: 1.2rem;
  }

  .page-products .tools-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-products .tools-hero__quick a,
  .page-products .tools-toc__list a {
    transition: none;
  }
}


<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <ol>
        <li><a href="/">赛场总览</a></li>
        <li><span aria-current="page">工具与资料</span></li>
      </ol>
    </nav>
  </div>

  <header class="tools-hero">
    <div class="wrap tools-hero__inner">
      <p class="index-label">TOOL DESK · V2.0</p>
      <h1>赛前要查的东西，<br>收在一张工作台上</h1>
      <p class="tools-hero__lead">易倍体育赛事把你在开赛前真正会用到的动作排成六个入口：先把在意的球队存下来，再按日期翻到当天的场次与前瞻，需要留档就把资料包带走。第一次来也能按顺序走一趟，之后每次打开都从自己那份名单开始。</p>
      <ul class="tools-hero__quick">
        <li><a href="#follow">关注列表</a></li>
        <li><a href="#preview">赛前前瞻</a></li>
        <li><a href="#scorers">射手榜</a></li>
        <li><a href="#search">小屏与检索</a></li>
        <li><a href="#downloads">下载区</a></li>
      </ul>
      <dl class="tools-hero__stats">
        <div class="stat">
          <dt>关注项上限</dt>
          <dd><span class="stat__num">50</span><span class="stat__unit">项</span></dd>
        </div>
        <div class="stat stat--amber">
          <dt>榜单每日刷新</dt>
          <dd><span class="stat__num">3</span><span class="stat__unit">次</span></dd>
        </div>
        <div class="stat">
          <dt>变动留存</dt>
          <dd><span class="stat__num">90</span><span class="stat__unit">天</span></dd>
        </div>
        <div class="stat">
          <dt>资料包</dt>
          <dd><span class="stat__num">12</span><span class="stat__unit">个</span></dd>
        </div>
      </dl>
    </div>
  </header>

  <div class="wrap tools-shell">
    <aside class="tools-toc" aria-label="工具目录">
      <p class="index-label">目录</p>
      <ol class="tools-toc__list">
        <li><a href="#index"><span>01</span>六类入口</a></li>
        <li><a href="#follow"><span>02</span>关注列表</a></li>
        <li><a href="#preview"><span>03</span>赛前前瞻</a></li>
        <li><a href="#scorers"><span>04</span>射手榜</a></li>
        <li><a href="#search"><span>05</span>小屏与检索</a></li>
        <li><a href="#downloads"><span>06</span>下载区</a></li>
        <li><a href="#flow"><span>07</span>三步上手</a></li>
      </ol>
    </aside>

    <div class="tools-body">
      <section class="tool-section" id="index" data-reveal>
        <figure class="tool-figure tool-figure--slant">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深墨绿网格与荧光青数据线交织的赛事看板纹理">
          <figcaption class="tool-figure__cap">关注状态与检索条件在六个入口之间通用</figcaption>
        </figure>
        <header class="tool-section__head">
          <span class="tool-section__num">01</span>
          <h2 class="tool-section__title">六个入口，各管一段赛前准备</h2>
        </header>
        <p class="tool-section__lead">先看手头要做什么，再决定从哪一格进去。存名单、查档期、读前瞻、追榜单、取资料、看长文，各有各的落点，配着用比单独用一个省事。</p>
        <ul class="tool-index" data-reveal-group>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">01</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">关注列表</h3>
              <p class="tool-index__desc">把球队、联赛和常看的开赛时段存成自己的一份，下次打开直接落在最关心的场次上。</p>
            </div>
            <span class="tag">日常跟进</span>
          </li>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">02</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">赛前前瞻</h3>
              <p class="tool-index__desc">一场一段摘要，近况、主客场差异与关键数据都在里面，进场前几分钟能读完。</p>
            </div>
            <span class="tag">赛前速读</span>
          </li>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">03</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">射手榜</h3>
              <p class="tool-index__desc">名次和进球数在动，谁往上走谁在滑落，打开就能看到当天的最新排位。</p>
            </div>
            <span class="tag">榜单追踪</span>
          </li>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">04</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">赛程检索</h3>
              <p class="tool-index__desc">赛事入口站内检索页把日期、联赛、球队、主客场和关键词叠在一起筛，手机上点几下就出结果。</p>
            </div>
            <span class="tag">查档期</span>
          </li>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">05</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">下载区</h3>
              <p class="tool-index__desc">赛程模板、字段说明和版本变更记录打包放好，做表、对字段、留底都有现成的可拿。</p>
            </div>
            <span class="tag">留档</span>
          </li>
          <li class="tool-index__item" data-reveal>
            <span class="tool-index__num">06</span>
            <div class="tool-index__body">
              <h3 class="tool-index__name">文章专栏</h3>
              <p class="tool-index__desc">赛季专题和球队观察的长文集中在这里，适合有空时慢慢读，也方便转给同好。</p>
            </div>
            <span class="tag">深读</span>
          </li>
        </ul>
      </section>

      <section class="tool-section tool-section--panel" id="follow" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">02</span>
          <h2 class="tool-section__title">把你追的球队固定在第一屏</h2>
        </header>
        <div class="follow-grid">
          <div class="follow-copy">
            <p>易倍体育赛前前瞻关注列表是整个工作台的起点。你可以存球队、存联赛，也可以只存某个常看的开赛时段——比如周末晚上那几场，不必每次都从头翻赛程。</p>
            <p>单个账户最多保存 50 个关注项，放下主队、常看的两个联赛和一整季的重点场次绰绰有余。存好之后，关注的球队按开赛时间排在列表最前面，找起来一眼就够。</p>
            <ul class="chip-row">
              <li class="chip">按球队</li>
              <li class="chip">按联赛</li>
              <li class="chip">按开赛时段</li>
            </ul>
            <p class="follow-note">名单随时能改，加减之后立刻反映在列表顺序和前瞻入口上。</p>
          </div>
          <div class="follow-panel">
            <p class="index-label">我的关注 <span class="dot-live" aria-hidden="true"></span></p>
            <ul class="follow-list">
              <li class="follow-item">
                <span class="follow-item__name">北岸联</span>
                <span class="follow-item__meta">周六 20:00</span>
                <span class="tag tag--signal">已关注</span>
              </li>
              <li class="follow-item">
                <span class="follow-item__name">东部联赛</span>
                <span class="follow-item__meta">整季赛程</span>
                <span class="tag tag--signal">已关注</span>
              </li>
              <li class="follow-item">
                <span class="follow-item__name">南浦联</span>
                <span class="follow-item__meta">周日 22:30</span>
                <span class="tag tag--signal">已关注</span>
              </li>
              <li class="follow-item">
                <span class="follow-item__name">青川竞技</span>
                <span class="follow-item__meta">周三 19:45</span>
                <span class="tag tag--signal">已关注</span>
              </li>
            </ul>
            <p class="follow-panel__foot">关注项越贴近真实观赛习惯，列表就越好用。</p>
          </div>
        </div>
      </section>

      <section class="tool-section" id="preview" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">03</span>
          <h2 class="tool-section__title">开赛前十分钟，把该知道的读完</h2>
        </header>
        <div class="split">
          <div class="split__text">
            <p class="tool-section__lead">从关注列表点进任意一场，落到手边的就是这场的前瞻摘要。写稿、发帖、和朋友聊球之前，先看这几段就够用。</p>
            <ul class="bullets">
              <li>双方最近五场的战绩与进失球走势</li>
              <li>主客场差异，以及连续作战带来的轮换幅度</li>
              <li>关键位置的人员变化与可用阵容深度</li>
              <li>一组可以直接引用的数据点，方便二次整理</li>
            </ul>
            <p class="tool-section__lead">不想一场一场点，也可以在前瞻列表里按联赛和日期筛，把当天所有场次一次翻完，再回头细读感兴趣的那几篇。</p>
          </div>
          <figure class="tool-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场灯光下的草坪局部特写" loading="lazy" decoding="async">
            <figcaption class="tool-figure__cap">赛前前瞻 · 摘要与关键数据</figcaption>
          </figure>
        </div>
      </section>

      <section class="tool-section tool-section--amber" id="scorers" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">04</span>
          <h2 class="tool-section__title">榜单每天动三次，变化留得住</h2>
        </header>
        <p class="tool-section__lead">EMC 射手榜更新记录每日刷新 3 次，最近 90 天的名次变化都留在轨迹里。上升标橙红箭头，下滑用灰绿箭头，点开任意一行能看到这个位置是怎么走到今天的。</p>
        <div class="scorer-table" role="table" aria-label="射手榜排位视图">
          <div class="scorer-row scorer-row--head" role="row">
            <span role="columnheader">名次</span>
            <span role="columnheader">球队 · 位置</span>
            <span role="columnheader">进球</span>
            <span role="columnheader">变动</span>
          </div>
          <div class="scorer-row" role="row">
            <span class="scorer-row__rank" role="cell">01</span>
            <span class="scorer-row__team" role="cell">东岭联 · 前场 7 号</span>
            <span class="scorer-row__goals" role="cell">21</span>
            <span class="delta delta--up" role="cell">▲ 3</span>
          </div>
          <div class="scorer-row" role="row">
            <span class="scorer-row__rank" role="cell">02</span>
            <span class="scorer-row__team" role="cell">青川竞技 · 前场 11 号</span>
            <span class="scorer-row__goals" role="cell">19</span>
            <span class="delta delta--up" role="cell">▲ 1</span>
          </div>
          <div class="scorer-row" role="row">
            <span class="scorer-row__rank" role="cell">03</span>
            <span class="scorer-row__team" role="cell">南浦联 · 前场 9 号</span>
            <span class="scorer-row__goals" role="cell">17</span>
            <span class="delta delta--down" role="cell">▼ 1</span>
          </div>
          <div class="scorer-row" role="row">
            <span class="scorer-row__rank" role="cell">04</span>
            <span class="scorer-row__team" role="cell">滨海城 · 前场 10 号</span>
            <span class="scorer-row__goals" role="cell">16</span>
            <span class="delta delta--flat" role="cell">— 0</span>
          </div>
          <div class="scorer-row" role="row">
            <span class="scorer-row__rank" role="cell">05</span>
            <span class="scorer-row__team" role="cell">西陵队 · 前场 21 号</span>
            <span class="scorer-row__goals" role="cell">14</span>
            <span class="delta delta--up" role="cell">▲ 2</span>
          </div>
        </div>
        <figure class="tool-figure tool-figure--wide">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="抽象排名柱状图与上升箭头组成的榜单数据图形" loading="lazy" decoding="async">
          <figcaption class="tool-figure__cap">排位视图支持按联赛切换、按球队筛选</figcaption>
        </figure>
        <p class="tool-section__lead">切换联赛就能换一张榜；只看某支球队的得分手，用球队筛选比逐行找快得多。名次挪动较大的几行会带橙红标记，扫一眼就知道这轮发生了什么。</p>
      </section>

      <section class="tool-section" id="search" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">05</span>
          <h2 class="tool-section__title">在手机上查赛程，只要两步</h2>
        </header>
        <div class="split split--tall">
          <figure class="tool-figure tool-figure--tall">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手持设备显示赛程列表，背景是夜间球场灯光" loading="lazy" decoding="async">
            <figcaption class="tool-figure__cap">小屏阅读：一屏四场，滑动即翻页</figcaption>
          </figure>
          <div class="split__text">
            <p class="tool-section__lead">小屏看华人体育赛程表的入口现在收进站内检索页。手机打开检索页，选好日期，当天全部场次按开赛时间往下排，主客场、联赛和状态一眼分得清。</p>
            <div class="search-mock">
              <p class="search-mock__field"><span>球队、联赛、日期或版本号</span><span class="search-mock__caret" aria-hidden="true">▍</span></p>
              <ul class="taglist">
                <li class="tag">前瞻</li>
                <li class="tag">榜单</li>
                <li class="tag">赛程</li>
                <li class="tag">文章</li>
                <li class="tag">下载资料</li>
              </ul>
            </div>
            <p class="tool-section__lead">站内检索覆盖前瞻、榜单、赛程、文章与下载资料五类内容，输球队简称也能命中，不必记全称。条件可以叠加：先定日期，再挑联赛，最后只看主队主场。</p>
          </div>
        </div>
      </section>

      <section class="tool-section tool-section--panel" id="downloads" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">06</span>
          <h2 class="tool-section__title">12 个资料包，按赛季和版本排好</h2>
        </header>
        <p class="tool-section__lead">下载区保留 V1.0 至 V2.0 共 12 个资料包，按赛季、版本、用途三级目录摆放。旧版本资料同样留在原处，做表、对字段或者回看改动都不必重新找。</p>
        <figure class="tool-figure tool-figure--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="叠放的资料包与版本标签，背景是数据纹理" loading="lazy" decoding="async">
          <figcaption class="tool-figure__cap">每个资料包标注所属赛季与版本号</figcaption>
        </figure>
        <ul class="pack-grid" data-reveal-group>
          <li class="pack-card" data-reveal>
            <span class="pack-card__ver">V1.0 — V2.0</span>
            <h3>赛程模板</h3>
            <p>按联赛与轮次排好空表，填日期、对阵和主客场即可直接使用。</p>
          </li>
          <li class="pack-card" data-reveal>
            <span class="pack-card__ver">V1.0 — V2.0</span>
            <h3>字段说明</h3>
            <p>每个字段的含义、取值范围与常见写法逐项列出，对接别人做的表也不容易出错。</p>
          </li>
          <li class="pack-card" data-reveal>
            <span class="pack-card__ver">V2.0</span>
            <h3>版本变更记录</h3>
            <p>罗列每个版本改了哪些字段、加了哪些内容，升级后翻一遍就能对齐旧资料。</p>
          </li>
        </ul>
        <p class="tool-section__lead">想找某支球队相关的资料，用球队关键词定位比逐层翻目录快；版本更新记录也在<a href="/articles/">赛场文摘</a>以专题形式持续发布，改动写得比包里更细。</p>
      </section>

      <section class="tool-section" id="flow" data-reveal>
        <header class="tool-section__head">
          <span class="tool-section__num">07</span>
          <h2 class="tool-section__title">第一次用，按这三步走</h2>
        </header>
        <ol class="flow-steps" data-reveal-group>
          <li class="flow-step" data-reveal>
            <span class="flow-step__num">1</span>
            <h3>先存名单</h3>
            <p>把主队和常看的联赛放进关注列表，50 个名额留给真正会看的场次，列表越干净越好用。</p>
          </li>
          <li class="flow-step" data-reveal>
            <span class="flow-step__num">2</span>
            <h3>再查赛程与前瞻</h3>
            <p>在检索页选日期看当天场次，或者从关注列表直接点进前瞻，把摘要和数据过一遍。</p>
          </li>
          <li class="flow-step" data-reveal>
            <span class="flow-step__num">3</span>
            <h3>需要时带走资料</h3>
            <p>做表或留档，去下载区取对应赛季和版本的资料包，旧版本也一并放在那里。</p>
          </li>
        </ol>
      </section>

      <section class="tools-cta" data-reveal>
        <h2>用起来卡住了，随时找我们</h2>
        <p>关注列表加不进去、旧版本资料找不到、某场比赛的数据对不上，都可以直接问。工作日 9:00–18:00 在线，赛事数据相关的咨询附上页面链接和截图，处理会快很多。</p>
        <div class="tools-cta__actions">
          <a class="btn btn--primary" href="/questions/">去问答中心</a>
          <a class="btn btn--outline" href="/reach-us/">联络我们</a>
          <a class="btn btn--ghost" href="/who-we-are/">了解团队</a>
        </div>
        <p class="tools-cta__note">关于个人信息的使用方式，见<a href="/personal-data/">个人信息说明</a>。</p>
      </section>
    </div>
  </div>
</main>

.page-products {
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-products .breadcrumbs {
  padding-block: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.page-products .breadcrumbs a {
  color: var(--mist);
  text-decoration: none;
}

.page-products .breadcrumbs a:hover,
.page-products .breadcrumbs a:focus-visible {
  color: var(--cyan);
}

/* ---------- hero ---------- */
.page-products .tools-hero {
  border-bottom: 2px solid var(--hairline);
  padding: clamp(1.8rem, 6vw, 4rem) 0 clamp(1.8rem, 5vw, 3rem);
  background-image:
    linear-gradient(155deg, rgba(67, 240, 207, 0.12), rgba(6, 26, 22, 0) 48%),
    repeating-linear-gradient(90deg, rgba(167, 222, 211, 0.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(167, 222, 211, 0.07) 0 1px, transparent 1px 72px);
}

.page-products .tools-hero__inner {
  position: relative;
}

.page-products .tools-hero h1 {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8.5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-shadow: 5px 5px 0 rgba(67, 240, 207, 0.16);
}

.page-products .tools-hero__lead {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: clamp(0.98rem, 2.4vw, 1.1rem);
  line-height: 1.85;
  color: var(--mist);
}

.page-products .tools-hero__quick {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}

.page-products .tools-hero__quick a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--hairline-strong);
  background: rgba(12, 42, 35, 0.75);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .tools-hero__quick a:hover,
.page-products .tools-hero__quick a:focus-visible {
  background: var(--cyan);
  color: var(--ink);
}

.page-products .tools-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  background: var(--hairline);
  border: 2px solid var(--hairline);
}

.page-products .stat {
  background: var(--panel);
  padding: 0.85rem 0.95rem;
  min-width: 0;
}

.page-products .stat dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--moss);
}

.page-products .stat dd {
  margin: 0.35rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.page-products .stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-products .stat--amber .stat__num {
  color: var(--amber);
}

.page-products .stat__unit {
  font-size: 0.76rem;
  color: var(--mist);
}

/* ---------- shell ---------- */
.page-products .tools-shell {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
  padding-top: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .tools-toc {
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  padding: 0.95rem;
}

.page-products .tools-toc__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.page-products .tools-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  font-size: 0.85rem;
  color: var(--mist);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-products .tools-toc__list a:hover,
.page-products .tools-toc__list a:focus-visible {
  border-color: var(--hairline-strong);
  color: var(--paper);
}

.page-products .tools-toc__list span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--cyan);
}

.page-products .tools-body {
  min-width: 0;
}

/* ---------- sections ---------- */
.page-products .tool-section {
  border-top: 2px solid var(--hairline);
  padding-block: clamp(1.7rem, 5vw, 3rem);
  scroll-margin-top: 1.5rem;
}

.page-products .tool-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-products .tool-section--panel {
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.1rem, 4vw, 1.9rem);
}

.page-products .tool-section--amber .tool-section__num {
  color: var(--signal);
}

.page-products .tool-section__head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--hairline);
}

.page-products .tool-section__num {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 700;
  color: var(--amber);
}

.page-products .tool-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 4.6vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-products .tool-section__lead {
  margin: 1rem 0 0;
  max-width: 66ch;
  color: var(--mist);
  line-height: 1.85;
  font-size: 0.97rem;
}

.page-products .tool-section__lead a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}

.page-products .tool-section__lead a:hover,
.page-products .tool-section__lead a:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- figures ---------- */
.page-products .tool-figure {
  margin: 0 0 1.4rem;
  border: 2px solid var(--hairline-strong);
  background: var(--panel-lift);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

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

.page-products .tool-figure--slant img {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.page-products .tool-figure__cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--moss);
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--hairline);
}

/* ---------- index list ---------- */
.page-products .tool-index {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 2px solid var(--hairline);
}

.page-products .tool-index__item {
  background: var(--panel);
  padding: 0.95rem;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.4rem 0.6rem;
  align-items: start;
}

.page-products .tool-index__num {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--cyan);
  padding-top: 0.15rem;
}

.page-products .tool-index__body {
  min-width: 0;
}

.page-products .tool-index__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-products .tool-index__desc {
  margin: 0.35rem 0 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.72;
}

.page-products .tool-index__item .tag {
  grid-column: 2;
  justify-self: start;
}

.page-products .tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

/* ---------- follow ---------- */
.page-products .follow-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.1rem;
}

.page-products .follow-copy p {
  margin: 0 0 0.9rem;
  max-width: 62ch;
  color: var(--mist);
  line-height: 1.85;
  font-size: 0.96rem;
}

.page-products .follow-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--moss);
  margin: 0;
}

.page-products .chip-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding: 0;
}

.page-products .chip {
  border: 1px solid var(--hairline-strong);
  padding: 0.28rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-products .follow-panel {
  border: 2px solid var(--hairline-strong);
  background: var(--ink);
  padding: 0.95rem;
  box-shadow: var(--shadow-hard);
  min-width: 0;
}

.page-products .follow-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-products .follow-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--panel);
  border-left: 3px solid var(--cyan);
}

.page-products .follow-item__name {
  font-weight: 700;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.page-products .follow-item__meta {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--moss);
}

.page-products .follow-item .tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.page-products .follow-panel__foot {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--moss);
}

/* ---------- split ---------- */
.page-products .split {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.1rem;
  align-items: start;
}

.page-products .split__text {
  min-width: 0;
}

.page-products .split__text .tool-section__lead {
  margin-top: 0;
}

.page-products .split__text .tool-section__lead + .tool-section__lead {
  margin-top: 1rem;
}

.page-products .bullets {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-products .bullets li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--paper);
  font-size: 0.94rem;
  line-height: 1.7;
}

.page-products .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.46rem;
  height: 0.46rem;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .split .tool-figure {
  margin-bottom: 0;
}

/* ---------- scorer ---------- */
.page-products .scorer-table {
  margin-top: 1.2rem;
  border: 2px solid var(--hairline-strong);
  background: var(--panel);
  overflow: hidden;
}

.page-products .scorer-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 3.2rem 3.1rem;
  gap: 0.35rem;
  align-items: center;
  padding: 0.58rem 0.65rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
}

.page-products .scorer-row--head {
  border-top: 0;
  background: var(--panel-lift);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--moss);
}

.page-products .scorer-row__rank {
  font-family: var(--font-mono);
  color: var(--amber);
}

.page-products .scorer-row__team {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-products .scorer-row__goals {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right;
  color: var(--paper);
}

.page-products .delta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: right;
}

.page-products .delta--up {
  color: var(--signal);
}

.page-products .delta--down,
.page-products .delta--flat {
  color: var(--moss);
}

.page-products .tool-figure--wide {
  margin-top: 1.3rem;
}

.page-products .tool-section--amber .scorer-table {
  border-color: rgba(245, 185, 76, 0.45);
}

/* ---------- search ---------- */
.page-products .search-mock {
  margin: 1rem 0;
  border: 2px solid var(--hairline-strong);
  background: var(--ink);
  padding: 0.7rem;
}

.page-products .search-mock__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist);
}

.page-products .search-mock__caret {
  color: var(--cyan);
}

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

.page-products .taglist .tag {
  border: 1px solid var(--hairline);
  padding: 0.24rem 0.5rem;
  color: var(--cyan);
}

/* ---------- downloads ---------- */
.page-products .pack-grid {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.page-products .pack-card {
  border: 2px solid var(--hairline);
  background: var(--ink);
  padding: 0.95rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.page-products .pack-card__ver {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-products .pack-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.page-products .pack-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--mist);
}

/* ---------- flow ---------- */
.page-products .flow-steps {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline-strong);
  border: 2px solid var(--hairline-strong);
}

.page-products .flow-step {
  background: var(--panel);
  padding: 1.05rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.9rem;
  align-items: baseline;
}

.page-products .flow-step__num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 0.9;
  color: var(--cyan);
}

.page-products .flow-step h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-products .flow-step p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- cta ---------- */
.page-products .tools-cta {
  margin-top: clamp(1.5rem, 5vw, 2.4rem);
  padding: clamp(1.15rem, 4vw, 1.9rem);
  border: 2px solid var(--hairline-strong);
  background: var(--indigo);
  box-shadow: var(--shadow-soft);
}

.page-products .tools-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
}

.page-products .tools-cta p {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--mist);
}

.page-products .tools-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.page-products .tools-cta__note {
  font-size: 0.78rem;
  color: var(--moss);
}

.page-products .tools-cta__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}

.page-products .tools-cta__note a:hover,
.page-products .tools-cta__note a:focus-visible {
  border-bottom-color: var(--cyan);
}

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

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

@media (min-width: 860px) {
  .page-products .split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.4rem, 3vw, 2.2rem);
  }

  .page-products .split--tall {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .page-products .follow-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.2rem, 3vw, 2rem);
  }

  .page-products .tool-index__item {
    grid-template-columns: 2.6rem minmax(0, 1fr) 9rem;
    align-items: center;
    padding: 1rem 1.1rem;
  }

  .page-products .tool-index__item .tag {
    grid-column: 3;
    justify-self: end;
  }

  .page-products .scorer-row {
    grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 4.5rem;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }

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

  .page-products .flow-step {
    padding: 1.25rem;
  }
}

@media (min-width: 960px) {
  .page-products .tools-shell {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: start;
  }

  .page-products .tools-toc {
    position: sticky;
    top: 1.2rem;
  }

  .page-products .tools-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-products .tools-hero__quick a,
  .page-products .tools-toc__list a {
    transition: none;
  }
}